/* ── Provider filter (search) ───────────────── */
.provider-filter-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  /* Léger surcroît d'espace au-dessus : sépare « affiner » de « parcourir ». */
  padding: 14px var(--px) 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.provider-filter-scroll::-webkit-scrollbar { display: none; }

.provider-pill {
  flex-shrink: 0;
  width: 52px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  padding: 5px 4px 6px;
  cursor: pointer;
  transition: border-color 0.18s, transform 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.provider-pill img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 7px;
  display: block;
}
.provider-pill-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 44px;
  line-height: 1;
}
.provider-pill:active { transform: scale(0.96); }
.provider-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.provider-pill.active {
  border-color: var(--accent);
}
.provider-pill.active .provider-pill-label {
  color: var(--accent);
}

/* ── Tri chronologique (parcours plateforme) ──────────────────────────────────
   Contrôle discret au-dessus de la liste (dans la barre de raffinage du
   parcours) : un simple bouton texte estompé qui inverse le sens. Pas d'or
   (réservé aux actions franches) : c'est un réglage d'affichage, il s'efface. */
.search-sort-dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;            /* cible tactile, même si visuellement léger */
  padding: 4px 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.search-sort-dir svg { color: var(--meta); flex-shrink: 0; }
.search-sort-dir:active { opacity: 0.6; }
.search-sort-dir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) {
  .search-sort-dir:hover { color: var(--text-secondary); }
}

/* ── Recherche : coquille pilotée par l'état ──────────────────────────────────
   En-tête minimal et collant (le champ seul) + corps qui bascule entre
   découverte / résultats. Tout le reste (récents, rail, parcours) vit dans le
   corps et n'apparaît que dans l'état qui le justifie. */
.search-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  padding: var(--pt) var(--px) 12px;
}
#search-body {
  padding: 0 0 var(--pb);
}

/* Bouton « effacer » dans le champ (visible uniquement si saisie). */
.search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -6px -4px -6px 0;
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--meta);
  border-radius: var(--radius-full);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, background-color 0.15s;
}
.search-clear[hidden] { display: none; }
.search-clear:active { opacity: 0.7; }
.search-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
  .search-clear:hover { color: var(--text-secondary); background: var(--surface3); }
}

/* Transition de contenu entre états (swap sous le champ). */
@media (prefers-reduced-motion: no-preference) {
  #search-body > * { animation: searchFade 0.2s ease-out both; }
}
@keyframes searchFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ── Découverte : sections ─────────────────────────────────────────────────── */
.disco-section { margin-top: 26px; }
.disco-section:first-child { margin-top: 16px; }
.disco-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--px);
}
.disco-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 0;
}
.disco-clear {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--meta);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.disco-clear:active { opacity: 0.6; }
.disco-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) { .disco-clear:hover { color: var(--text-secondary); } }

/* Recherches récentes (chips supprimables). */
.recent-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 var(--px);
  margin-top: 12px;
}
.recent-chip {
  display: inline-flex;
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  max-width: 100%;
}
.recent-chip-main {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  height: 33px;
  padding: 0 3px 0 12px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.recent-chip-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 33px;
  padding: 0 8px 0 2px;
  background: none;
  border: none;
  color: var(--meta);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.recent-chip-main:active, .recent-chip-x:active { opacity: 0.65; }
.recent-chip-main:focus-visible, .recent-chip-x:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) { .recent-chip-x:hover { color: var(--danger); } }

/* Rail tendances (affiches-héros). */
.disco-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 14px var(--px) 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.disco-rail::-webkit-scrollbar { display: none; }

.trending-card {
  flex: 0 0 auto;
  width: 124px;
  display: block;
  padding: 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}
.trending-card-poster {
  position: relative;
  display: block;
  width: 124px;
  height: 184px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-faint);
  transition: transform 0.12s;
}
.trending-card-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trending-card-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 42px;
  color: var(--on-media);
  opacity: 0.5;
}
.trending-card-type {
  position: absolute;
  top: 7px;
  left: 7px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-media);
  background: color-mix(in srgb, #000 52%, transparent);
}
.trending-card-title {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
  margin-top: 8px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trending-card:active .trending-card-poster { transform: scale(0.97); }
.trending-card:focus-visible { outline: none; }
.trending-card:focus-visible .trending-card-poster { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Genres en chips. Beaucoup de genres (~19) → défilement horizontal sur deux
   rangées (idiome des rails Myna) plutôt qu'un mur en flex-wrap : compact en
   hauteur, on parcourt latéralement. Les chips remplissent colonne par colonne. */
.genre-chips {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: max-content;
  gap: 8px;
  overflow-x: auto;
  padding: 12px var(--px) 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.genre-chips::-webkit-scrollbar { display: none; }
.genre-chips .filter-pill { margin-top: 0; scroll-snap-align: start; }

/* ── Barre de raffinage (au-dessus des résultats) ─────────────────────────── */
.search-refine { padding-top: 8px; }
.browse-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 0 var(--px);
}
.browse-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.browse-context .search-sort-dir { margin-left: auto; }

/* Sélecteur de la facette manquante (ajouter une plateforme à un genre, ou
   l'inverse) — un petit intitulé d'invite au-dessus du scroller réutilisé. */
.browse-add { margin-top: 12px; }
.browse-add-label {
  display: block;
  padding: 0 var(--px);
  margin-bottom: 1px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--meta);
}
.browse-add .provider-filter-scroll,
.browse-add .genre-chips { padding-top: 8px; }
.browse-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  height: 36px;
  padding: 0 8px 0 11px;
  border-radius: var(--radius-pill);
  background: var(--accent-bg2);
  border: 1px solid var(--accent-border2);
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.browse-chip img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
.browse-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browse-chip svg { flex-shrink: 0; opacity: 0.75; }
.browse-chip:active { opacity: 0.8; }
.browse-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.refine-pills { margin-top: 12px; padding: 0 var(--px) 2px; }
.search-refine + #search-results { margin-top: 14px; }

/* ── Squelettes de chargement (opacity only → conforme iOS) ───────────────── */
.skel {
  background: var(--surface2);
  animation: ep-skel-pulse 1.3s ease-in-out infinite;
}
.trending-skel {
  flex: 0 0 auto;
  width: 124px;
  height: 184px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  scroll-snap-align: start;
}
.search-row-skel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px var(--px);
}
.search-row-skel .ss-thumb {
  flex: 0 0 auto;
  width: 54px;
  height: 80px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}
.search-row-skel .ss-lines { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.search-row-skel .ss-line { height: 13px; border-radius: 5px; }
.search-row-skel .ss-line--sm { height: 10px; }
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; opacity: 0.6; }
}

/* ── Badge ──────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-media);
  background: rgba(13,13,13,0.72);
  border: 1px solid rgba(238,234,224,0.12);
  padding: 4px 10px 4px 8px;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Point neutre statique : sur une affiche, l'or recule (et plus de clignotement). */
.badge::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--on-media) 55%, transparent);
  flex-shrink: 0;
}

.badge-type {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-media);
  background: rgba(13,13,13,0.55);
  padding: 3px 6px;
  border-radius: 5px;
}

/* ── Section header ─────────────────────────── */
.home-divider {
  margin: 40px 0 0;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.02em;
}

.section-sub {
  font-size: 12px;
  color: var(--muted);
}

/* ── Resume card ────────────────────────────── */
.resume-card {
  position: relative;
  height: 292px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  margin-top: 10px;
  transition: transform 0.12s;
}

.resume-card:active { transform: scale(0.99); }

.resume-card-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13,13,13,0.45) 0%, rgba(13,13,13,0) 35%, rgba(13,13,13,0) 40%, rgba(13,13,13,0.97) 100%);
}

.resume-card-watermark {
  position: absolute;
  right: -12px;
  bottom: -46px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 210px;
  line-height: 1;
  color: rgba(238,234,224,0.04);
  pointer-events: none;
}

.resume-card-header {
  position: absolute;
  top: 14px; left: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.resume-card-body {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
}

.resume-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 33px;
  color: var(--on-media);
  line-height: 1.02;
  letter-spacing: 0.01em;
}

/* Verre dépoli + texte or : une seule note d'or sur l'affiche, sans aplat. */
.resume-ep-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(238, 234, 224, 0.13);
  border: 1px solid rgba(238, 234, 224, 0.16);
  color: var(--accent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 6px;
  white-space: nowrap;
}

.resume-season-track {
  height: 3px;
  background: rgba(238,234,224,0.18);
  border-radius: 2px;
  overflow: hidden;
}

.resume-season-fill {
  height: 100%;
  background: var(--on-media);
  border-radius: 2px;
  transition: width 0.4s ease-out;
}

/* ── Episode dots (short series) ─────────────────── */
.prog-dots {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}
.prog-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 22%, transparent);
  flex-shrink: 0;
}
.prog-dot.filled { background: var(--on-media); }
.prog-dot-count {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-body);
  margin-left: 3px;
}

/* ── Bento watching grid ─────────────────────────── */
.bento-mini-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.bento-mini {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  transition: transform 0.12s;
}
.bento-mini:active { transform: scale(0.97); }
.bento-mini-focus-hint {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(13,13,13,0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(238,234,224,0.65);
  z-index: 2;
}
.bento-mini-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.1) 55%, transparent 100%);
}
.bento-mini-title {
  position: absolute;
  bottom: 7px;
  left: 7px;
  right: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--on-media);
  line-height: 1.2;
  letter-spacing: 0.01em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.btn-resume {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(238,234,224,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(238,234,224,0.18);
  color: var(--on-media);
  border-radius: 9px;
  padding: 9px 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.btn-resume:active {
  background: rgba(238,234,224,0.2);
}

.play-icon {
  width: 0; height: 0;
  border-left: 7px solid var(--on-media);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

/* Legacy progress bar (kept for any other usage) */
.progress-bar-wrap { flex: 1; }

.progress-bar-track {
  height: 4px;
  background: color-mix(in srgb, var(--text) 16%, transparent);
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s;
}

/* ── Episode card (slider) ──────────────────── */
.ep-card {
  flex: 0 0 auto;
  width: 148px;
  scroll-snap-align: start;
  cursor: pointer;
}

.ep-card-inner {
  position: relative;
  height: 213px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-faint);
  transition: transform 0.12s;
}

.ep-card-inner:active { transform: scale(0.98); }

.ep-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0) 36%, rgba(13,13,13,0.96) 100%);
}

.ep-card-watermark {
  position: absolute;
  right: -8px; bottom: -20px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 128px;
  line-height: 1;
  color: rgba(238,234,224,0.055);
  pointer-events: none;
}

.ep-card-badge-new {
  position: absolute;
  top: 9px; right: 9px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(13,13,13,0.76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(238, 234, 224, 0.16);
  border-radius: 6px;
  padding: 3px 7px;
  z-index: 2;
}

.ep-card-badge-new-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--on-media) 55%, transparent);
  flex-shrink: 0;
}

.ep-card-badge-new-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--on-media);
}

.ep-card-body {
  position: absolute;
  left: 11px; right: 11px; bottom: 12px;
}

.ep-card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.1;
  color: var(--on-media);
}

.ep-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  padding: 2px 7px;
  border-radius: 5px;
  margin-top: 7px;
}

.ep-ago {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px;
}

/* ── Wishlist card ──────────────────────────── */
.wish-card {
  flex: 0 0 auto;
  width: 128px;
  scroll-snap-align: start;
  cursor: pointer;
}

.wish-card-inner {
  position: relative;
  height: 184px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-faint);
  transition: transform 0.12s;
}

.wish-card-inner:active { transform: scale(0.98); }

.wish-card-watermark {
  position: absolute;
  right: -6px; bottom: -22px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 120px;
  line-height: 1;
  color: rgba(238,234,224,0.06);
  pointer-events: none;
}

.wish-card-type {
  position: absolute;
  top: 8px; left: 8px;
}

.wish-card-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wish-card-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
  margin-top: 8px;
  line-height: 1.25;
}

/* ── Search result row ──────────────────────── */
.search-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  transition: background-color 0.15s ease;
}

/* Survol desktop uniquement : évite le hover « collé » après tap sur iOS. */
@media (hover: hover) {
  .search-row:hover { background: var(--surface); }
}

.search-thumb {
  flex: 0 0 auto;
  width: 54px; height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.search-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-thumb-placeholder {
  font-family: monospace;
  font-size: 8px;
  color: var(--faint);
}

.search-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.search-info:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.search-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}

.search-year {
  font-size: 12px;
  color: var(--muted);
}

.search-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--faint);
  flex-shrink: 0;
}

.search-type {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--meta);
}

/* ── Ligne « personne » (résultat acteur/réalisateur) ─────────────────────────
   Photo ronde (vs affiche 2:3 d'un titre) pour distinguer d'un coup d'œil ;
   toute la ligne est cliquable → écran acteur. */
.search-thumb--person {
  width: 54px;
  height: 54px;
  border-radius: 50%;
}
.search-person-initial {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--muted);
}
/* Méta personne sur une seule ligne : le métier reste entier, les titres connus
   tronquent (…) plutôt que de passer à la ligne. */
.search-row--person .search-meta { min-width: 0; }
.search-person-role {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.search-person-known {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.search-row-chevron {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: var(--faint);
}

.btn-add {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  padding: 0 13px;
  height: 44px;            /* cible tactile ≥44px (Apple HIG) */
  min-width: 44px;
  border-radius: 9px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.15s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.btn-add:active { opacity: 0.8; }
.btn-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (hover: hover) {
  .btn-add.not-in-list:hover { background: var(--accent-bg3); border-color: var(--accent-border3); }
  .btn-add.in-list:hover     { color: var(--text-secondary); border-color: var(--text-secondary); }
}

/* Action « Ajouter » : or ghost (tinte + texte + bord), pas de pavé plein —
   évite la colonne d'or qui descend toute la liste. L'or reste l'affordance,
   mais discret. État « Dans ma liste » = chip neutre qui s'efface (terminé). */
.btn-add.not-in-list {
  background: var(--accent-bg2);
  color: var(--accent);
  border: 1px solid var(--accent-border2);
}

.btn-add.in-list {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

.search-separator {
  height: 1px;
  background: var(--surface2);
  margin: 0 20px;
}

/* ── Filter pills ───────────────────────────── */
.filter-pills {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px; /* espace pour l'anneau focus */
}

.filter-pills::-webkit-scrollbar {
  display: none;
}

.library-filters {
  margin-bottom: 18px;
}

.filter-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
  margin: 6px 4px;
  flex-shrink: 0;
}

.filter-pill {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  padding: 8px 17px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  /* Seules les propriétés visuelles, pas de layout → pas de reflow */
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  min-height: 44px;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.filter-pill:active {
  opacity: 0.7;
}

.filter-pill.active {
  background: var(--accent-bg2);
  color: var(--accent);
  border-color: var(--accent-border2);
}

.filter-pill.active:active {
  opacity: 0.8;
}

.filter-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .filter-pill,
  .provider-pill,
  .btn-add,
  .search-row,
  .search-input-wrap { transition: none; }
  .provider-pill:active { transform: none; }
}

/* ── Search input ───────────────────────────── */
.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--surface2);
  /* Or discret : champ neutre au repos, l'or n'apparaît qu'au focus (état actif). */
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 13px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
  color: var(--muted);
}

.search-input-wrap:focus-within {
  border-color: var(--accent-border2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 6%, transparent);
}

.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 16px; /* ≥16px : évite le zoom iOS au focus */
  color: var(--text);
  caret-color: var(--accent);
}

.search-input::placeholder { color: var(--muted); }

/* ── Detail backdrop ────────────────────────── */
.detail-backdrop {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.detail-backdrop-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 40%, transparent) 0%,
    transparent 32%,
    color-mix(in srgb, var(--bg) 78%, transparent) 78%,
    var(--bg) 100%
  );
}

.detail-backdrop-watermark {
  position: absolute;
  right: -24px; top: -14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 270px;
  line-height: 1;
  color: rgba(238,234,224,0.05);
  pointer-events: none;
}

.btn-back {
  position: absolute;
  top: max(56px, calc(env(safe-area-inset-top) + 14px)); left: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(13,13,13,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--on-media);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Share button in backdrop */
.btn-share-card {
  position: absolute;
  top: max(56px, calc(env(safe-area-inset-top) + 14px));
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(13,13,13,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--on-media);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn-share-card:active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ── Share card modal ──────────────────────── */
.share-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.share-modal.open {
  pointer-events: auto;
  opacity: 1;
}
.share-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.share-modal-sheet {
  position: relative;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  padding: 0 0 calc(env(safe-area-inset-bottom) + 24px);
  transform: translateY(24px);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.share-modal.open .share-modal-sheet {
  transform: translateY(0);
}
.share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
}
.share-modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
  letter-spacing: 0.02em;
}
.share-modal-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.share-modal-close:active { opacity: 0.6; }

/* Preview area — 9:16 card scaled to fit */
.share-preview-wrap {
  margin: 0 20px 20px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 9/16;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 52dvh;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.share-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.share-preview-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.share-preview-error {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  padding: 24px;
  text-align: center;
}

/* Action buttons */
.share-modal-actions {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.share-btn-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.share-btn-main:disabled { opacity: 0.45; cursor: default; }
.share-btn-main:not(:disabled):active { opacity: 0.82; }
.share-btn-dl {
  width: 100%;
  min-height: 46px;
  background: none;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.share-btn-dl:disabled { opacity: 0.4; cursor: default; }
.share-btn-dl:not(:disabled):active { color: var(--text); border-color: color-mix(in srgb, var(--text) 30%, transparent); }

/* ── Detail poster row ──────────────────────── */
.detail-poster-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  margin-top: -72px;
  position: relative;
}

.detail-poster {
  flex: 0 0 auto;
  width: 108px; height: 158px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-faint);
  box-shadow: 0 14px 34px rgba(0,0,0,0.55);
  position: relative;
}

.detail-poster-watermark {
  position: absolute;
  right: -4px; bottom: -12px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 112px;
  line-height: 1;
  color: rgba(238,234,224,0.08);
}

.detail-poster img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.detail-info {
  flex: 1;
  padding-bottom: 6px;
  min-width: 0;
}

.detail-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 33px;
  line-height: 1.05;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}

.detail-tmdb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}

.detail-star { color: var(--accent); font-size: 13px; }

.detail-rating {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.detail-tmdb-label {
  font-size: 11px;
  color: var(--muted);
}

.detail-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--faint);
}

.detail-year {
  font-size: 12px;
  color: var(--muted);
}

.detail-cert {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  border: 1.5px solid var(--faint);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.detail-genres {
  font-size: 11px;
  color: var(--meta);
  margin-top: 7px;
  line-height: 1.4;
}

/* ── Status selector ────────────────────────── */
.status-selector {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}

.status-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 4px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--muted);
  min-height: 48px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Couleur sémantique par valeur de statut */
.status-btn[data-status="wishlist"].active {
  background: var(--accent-bg2);
  border-color: var(--accent-border);
  color: var(--accent);
}
.status-btn[data-status="watching"].active,
.status-btn[data-status="playing"].active {
  background: color-mix(in srgb, var(--progress) 16%, transparent);
  border-color: color-mix(in srgb, var(--progress) 38%, transparent);
  color: var(--progress);
}
.status-btn[data-status="done"].active,
.status-btn[data-status="completed"].active {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border-color: color-mix(in srgb, var(--success) 38%, transparent);
  color: var(--success);
}

.status-btn:active { opacity: 0.75; }
.status-btn:disabled,
.status-btn[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; }
.status-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .status-btn { transition: none; }
}

/* ── Synopsis ───────────────────────────────── */
.detail-synopsis {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--text-secondary);
  margin: 20px 0 0;
  text-wrap: pretty;
}

/* ── Detail section heading ─────────────────── */
.detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.detail-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.01em;
}
.btn-all-watched {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  padding: 10px 0 10px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}
.btn-all-watched:active { opacity: 0.65; }

/* ── Platforms grid ─────────────────────────── */
.platforms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.platform-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1.5px solid var(--surface3);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 0.18s, border-color 0.18s, transform 0.12s;
  min-height: 54px;
  width: 100%;
}


.platform-tile:active { transform: scale(0.96); }

.platform-tile.selected {
  background: var(--accent-bg);
  border-color: var(--accent-border3);
}

.platform-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--faint);
  transition: all 0.18s;
}

.platform-tile.selected .platform-icon {
  background: var(--accent-bg3);
  color: var(--accent);
}

.platform-name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
  flex: 1;
  text-align: left;
  line-height: 1.2;
  transition: color 0.18s;
}

.platform-tile.selected .platform-name { color: var(--text); }

.platform-check {
  flex-shrink: 0;
  width: 17px; height: 17px;
}

.platform-tile-add {
  border-style: dashed;
  background: transparent;
  border-color: var(--border);
}

/* ── Star rating ────────────────────────────── */
/* ── Rewatch row (detail screen) ────────────── */
.rewatch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  min-height: 44px;
}

.rewatch-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  flex: 1;
}

.rewatch-adj {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s;
}

.rewatch-adj:active { background: var(--surface3); }

.rewatch-inc-btn {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 0 16px;
  height: 38px;
  min-width: 44px;
  border-radius: 9px;
  border: 1.5px solid var(--accent-border);
  background: var(--accent-dim2);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.rewatch-inc-btn:active {
  background: var(--accent-dim);
  border-color: var(--accent-border2);
}

/* ── Rewatch badge (card thumbnail) ─────────── */
.rewatch-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(13, 13, 13, 0.72);
  border: 1px solid var(--accent-border2);
  border-radius: 5px;
  padding: 3px 7px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.03em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.star-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--surface3);
  border-radius: var(--radius-md);
  margin-top: 22px;
}

.star-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
}

.stars {
  display: flex;
  gap: 7px;
}

.star-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 1px;
  font-size: 22px;
  line-height: 1;
  color: color-mix(in srgb, var(--text) 42%, transparent);
  transition: transform 0.15s, color 0.15s;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.star-btn.active { color: var(--accent); }
.star-btn:active { transform: scale(1.3); }

/* ── Season tabs (Saison · 1 2 3) ───────────── */
.season-tabs {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  /* Ligne de base continue : les chiffres reposent dessus au lieu de flotter. */
  border-bottom: 1px solid var(--border);
}
.season-tabs-label {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  padding-bottom: 9px;
}
.season-tabs-track {
  position: relative;
  flex: 1;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  /* Sans ça, `overflow-x: auto` force `overflow-y` à `auto` aussi → scroll
     vertical parasite déclenché par le descendeur de l'indicateur actif. */
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.season-tabs-track::-webkit-scrollbar { display: none; }

.season-tab {
  position: relative;
  flex: 0 0 auto;
  min-width: 44px;
  height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 6px 9px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  color: var(--muted);
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.season-tab.done   { color: var(--success); }
.season-tab.active { color: var(--accent); }
.season-tab:active { color: var(--accent); }

/* Indicateur actif : segment or qui s'assoit sur la ligne de base. */
.season-tab::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  /* bottom: 0 (et non -1px) pour que l'indicateur reste dans la track, qui
     clippe désormais l'axe vertical (overflow-y: hidden). */
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.season-tab.active::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .season-tab::after { transition: none; }
}

/* ── Batch nav (tranches d'épisodes — saisons très longues) ───── */
.ep-batch-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  margin-top: 12px;
}
.ep-batch-nav::-webkit-scrollbar { display: none; }

.ep-batch-pill {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: var(--surface2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.ep-batch-pill:active { opacity: 0.7; }
.ep-batch-pill.active {
  color: var(--accent);
  background: var(--accent-bg2);
  border-color: var(--accent-border);
}

/* ── Episode list (pills · n° + titre) ───────── */
.episode-scroll-box {
  position: relative;
  margin-top: 16px;
}

.episode-list {
  position: relative; /* offsetParent des rows : offsetTop calé sur la grille elle-même, pas sur .episode-scroll-box */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Au-delà du seuil (JS), la liste devient sa propre zone de scroll bornée au
   lieu d'étirer toute la page — cf. anime/novelas à grosses saisons. */
.episode-list.scrollable {
  max-height: min(58vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Fondu haut/bas signalant qu'il y a plus de contenu à faire défiler ;
   visibilité pilotée par JS selon la position de scroll réelle. */
.ep-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ep-fade-top    { top: 0;    background: linear-gradient(to bottom, var(--bg), transparent); }
.ep-fade-bottom { bottom: 0; background: linear-gradient(to top,    var(--bg), transparent); }
.ep-fade.visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ep-fade { transition: none; }
}

.ep-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  border-radius: var(--radius-md);
  background: var(--surface2);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.ep-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  padding: 7px 8px 7px 7px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.12s;
}
.ep-row-main:active { opacity: 0.65; }
.ep-row-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 52px;
  padding: 0 12px 0 0;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.12s;
}
.ep-row-toggle:active { opacity: 0.65; }

/* Squelette de chargement (opacity only → conforme aux contraintes iOS). */
.ep-skel {
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--surface2);
  border: 1px solid var(--border-subtle);
  animation: ep-skel-pulse 1.3s ease-in-out infinite;
}
@keyframes ep-skel-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .ep-skel { animation: none; opacity: 0.6; }
}

.ep-row-num {
  flex-shrink: 0;
  width: 36px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--surface3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--meta);
  transition: color 0.18s, background 0.18s;
}

.ep-row-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.25;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.18s;
}

.ep-badge-new {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-bg2);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-full);
  padding: 3px 8px 2px;
  line-height: 1;
}

.ep-row-state {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}
.ep-row-ring {
  display: inline-block;
  border-radius: 50%;
  border: 1.5px solid var(--faint);
}
.ep-row-time {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ep-row-soon {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

/* À suivre : contour accent, le reste neutre */
.ep-row.next {
  border-color: var(--accent-border2);
}
.ep-row.next .ep-row-num   { color: var(--accent); background: var(--accent-bg2); }
.ep-row.next .ep-row-title { color: var(--text); }
.ep-row.next .ep-row-ring  { border-color: var(--accent-border2); }

/* Vu : voile or discret + coche pleine ; le pavé numéro reste neutre
   pour que l'or ne sature pas une saison entièrement vue. */
.ep-row.watched {
  background: var(--accent-bg);
  border-color: var(--accent-border);
}
.ep-row.watched .ep-row-num   { color: var(--meta); background: var(--surface3); }
.ep-row.watched .ep-row-title { color: var(--meta2); }

/* Pas encore sorti : atténué */
.ep-row.unreleased { opacity: 0.5; }
.ep-row.unreleased .ep-row-main { cursor: default; }
.ep-row.unreleased .ep-row-title { color: var(--muted); }

/* ── Bottom sheet — détail épisode ──────────────────────────────────────── */

.ep-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 300;
  transition: background 0.28s ease;
}
.ep-sheet-backdrop.is-visible { background: rgba(0, 0, 0, 0.6); }

.ep-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface2);
  border-radius: 20px 20px 0 0;
  z-index: 301;
  max-height: 85svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
}
.ep-sheet.is-visible { transform: translateY(0); }

/* Desktop (≥768px) : le bottom sheet devient une modale centrée. Le plein-largeur
   ancré en bas est un pattern tactile — sur grand écran il s'étale par-dessus la
   sidebar, désaligné de la colonne de contenu. On le recompose en dialogue centré,
   borné, élevé, avec une entrée scale+fade au lieu du slide. (Placé avant le bloc
   reduced-motion pour que celui-ci garde la priorité sur la transition.) */
@media (min-width: 768px) {
  .ep-sheet-backdrop {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .ep-sheet-backdrop.is-visible { background: rgba(0, 0, 0, 0.55); }

  .ep-sheet {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(480px, calc(100vw - 80px));
    max-height: 86vh;
    border-radius: 20px;
    padding-bottom: 22px;
    box-shadow: 0 24px 60px -14px rgba(0, 0, 0, 0.62);
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    transition:
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.2s ease;
  }
  .ep-sheet.is-visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  /* La poignée = affordance de swipe, sans objet à la souris. */
  .ep-sheet-drag { display: none; }
  /* L'image épouse le haut arrondi de la modale ; sans image, on aère le corps. */
  .ep-sheet-still { border-radius: 20px 20px 0 0; }
  .ep-sheet:not(:has(.ep-sheet-still)) .ep-sheet-body { padding-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .ep-sheet, .ep-sheet-backdrop { transition: none; }
}

.ep-sheet-drag {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 10px auto 16px;
  flex-shrink: 0;
}

.ep-sheet-still {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface3);
  overflow: hidden;
}
.ep-sheet-still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ep-sheet-body { padding: 18px var(--px) 0; }

.ep-sheet-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}

.ep-sheet-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 12px;
  text-wrap: balance;
}

.ep-sheet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.ep-sheet-chip {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface3);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 3px 10px;
}

.ep-sheet-overview {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 14px;
}
.ep-sheet-overview--empty { color: var(--muted); font-style: italic; }

.ep-sheet-guests {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* ── Bouton saga ──────────────────────────────────────────────────────────── */

.detail-saga-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--surface2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
  color: var(--text);
}
.detail-saga-btn:active { background: var(--surface3); }

.detail-saga-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}
.detail-saga-name {
  flex: 1;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Liste de films dans le sheet collection ──────────────────────────────── */

.coll-list { padding: 0 var(--px) 8px; }

.coll-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.12s;
}
.coll-row:active { opacity: 0.6; }
.coll-row.has-border { border-bottom: 1px solid var(--border-subtle); }

.coll-poster {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 66px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface3);
}
/* Pastille « dans ta vidéothèque » sur l'affiche. */
.coll-owned {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1.5px var(--bg);
}
.coll-owned svg { width: 11px; height: 11px; }
.coll-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.coll-poster-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: rgba(255,255,255,0.45);
}

.coll-info { flex: 1; min-width: 0; cursor: pointer; }
.coll-info:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.coll-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coll-meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.coll-chevron { display: flex; flex-shrink: 0; color: var(--faint); }
.coll-row .btn-add { flex-shrink: 0; }

/* Action « Marquer la saga comme vue » : CTA primaire or franc, pleine largeur,
   au-dessus de la liste. Une fois la saga complète, devient un chip neutre
   (l'or recule, action accomplie) — cohérent avec l'état « Dans ma liste ». */
.coll-bulk { padding: 4px var(--px) 14px; }
.coll-bulk:empty { display: none; }

.coll-bulk-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s, background 0.2s, color 0.2s, border-color 0.2s;
}
.coll-bulk-btn svg { flex-shrink: 0; }
.coll-bulk-btn:active { opacity: 0.85; }
.coll-bulk-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coll-bulk-btn:disabled { cursor: default; opacity: 0.7; }

.coll-bulk-btn.is-complete {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  cursor: default;
  font-weight: 600;
}
.coll-bulk-btn.is-complete svg { color: var(--accent); }

/* ── Friends list ───────────────────────────── */
.friend-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 6px;
  text-align: left;
  width: 100%;
  min-height: 44px;
  transition: opacity 0.18s;
}

.friend-row:active { opacity: 0.6; }

.friend-avatar {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--accent);
}

.friend-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}

.friend-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.friend-chevron {
  color: var(--faint);
  font-size: 24px;
  font-weight: 300;
  margin-left: auto;
}

/* ── Profile stats ──────────────────────────── */
.stats-grid {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.stat-tile {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--surface3);
  border-radius: var(--radius-md);
  padding: 15px 8px;
  text-align: center;
}

.stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 27px;
  color: var(--accent);
  line-height: 1;
}

.stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 7px;
}

/* ── Library item (friend view / profile) ───── */
.lib-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 0;
}

.lib-thumb {
  flex: 0 0 auto;
  width: 44px; height: 64px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: repeating-linear-gradient(135deg,var(--surface2) 0 7px,var(--surface3) 7px 14px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lib-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lib-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
}

.lib-type {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--meta);
  margin-top: 3px;
}

/* ── Add friend input ───────────────────────── */
.add-friend-wrap {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.add-friend-input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 16px; /* ≥16px : évite le zoom iOS au focus */
  color: var(--text);
  outline: none;
  min-height: 44px;
  transition: border-color 0.2s;
}

.add-friend-input:focus {
  border-color: var(--accent-border);
}
.add-friend-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.add-friend-input::placeholder { color: var(--muted); }

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-md);
  padding: 0 18px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
}

.btn-primary:active { opacity: 0.85; }

/* ── Note text area ─────────────────────────── */
.note-textarea {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 16px; /* ≥16px : évite le zoom iOS au focus */
  color: var(--text);
  outline: none;
  resize: none;
  line-height: 1.6;
  margin-top: 10px;
  min-height: 80px;
  transition: border-color 0.2s;
}

.note-textarea:focus { border-color: var(--accent-border); }
.note-textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.note-textarea::placeholder { color: var(--muted); }

/* ── Add to list button ─────────────────────── */
.btn-add-to-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 16px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-md);
  padding: 15px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--on-accent);
  cursor: pointer;
  min-height: 50px;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn-add-to-list:active { opacity: 0.82; }
.btn-add-to-list:disabled { opacity: 0.5; cursor: default; }

/* ── Save button ────────────────────────────── */
.btn-save {
  width: 100%;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-md);
  padding: 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  margin-top: 24px;
  min-height: 56px;
  transition: opacity 0.2s;
}

.btn-save:active { opacity: 0.85; }

/* ── Custom platform input ──────────────────── */
.custom-platform-input-wrap {
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--surface3);
  border-radius: var(--radius-md);
  padding: 13px;
}

.custom-platform-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

.custom-platform-row {
  display: flex;
  gap: 9px;
}

.custom-platform-field {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 11px 12px;
  font-family: var(--font-body);
  font-size: 16px; /* ≥16px : évite le zoom iOS au focus */
  color: var(--text);
  outline: none;
}

.custom-platform-field:focus { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.custom-platform-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.custom-platform-field::placeholder { color: var(--muted); }

.btn-ok {
  flex: 0 0 auto;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 9px;
  padding: 0 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  min-height: 44px;
}

/* ── Horizontal slider wrap ─────────────────── */
.h-scroll {
  display: flex;
  gap: 11px;
  overflow-x: auto;
  padding: 14px 20px 6px;
  margin: 0 -20px;
  scroll-snap-type: x proximity;
}

.h-scroll-wide {
  gap: 14px;
  padding: 16px 20px 4px;
}

/* ── Count badge ────────────────────────────── */
.count-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

.count-badge span {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  color: var(--accent);
}

/* ── Confirm dialog ─────────────────────────── */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  animation: toastIn 0.18s ease;
}

.confirm-box {
  width: 100%;
  max-width: 320px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px 16px;
}

.confirm-msg {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  text-align: center;
  margin-bottom: 20px;
}

.confirm-actions {
  display: flex;
  gap: 10px;
}

.confirm-btn {
  flex: 1;
  min-height: 48px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid var(--border);
}

.confirm-cancel {
  background: transparent;
  color: var(--muted);
}

.confirm-ok {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.confirm-btn:active { opacity: 0.85; }

/* ── Consentement RGPD (auth) ──────────────────────────────────────────────
   Même idiome que le bottom sheet (ep-sheet) : slide-up plein largeur sur mobile,
   dialogue centré ≥768px. z au-dessus de l'écran d'auth (200) et de l'onboarding
   (250) : le consentement gate l'entrée dans l'app, rien ne doit passer devant. */
.consent-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 360;
  transition: background 0.28s ease;
}
.consent-backdrop.is-visible { background: rgba(0, 0, 0, 0.62); }

.consent-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 361;
  display: flex;
  flex-direction: column;
  max-height: min(88svh, 720px);
  background: var(--surface2);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px -12px rgba(0, 0, 0, 0.55);
  transform: translateY(100%);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.consent-sheet.is-visible { transform: translateY(0); }

.consent-drag {
  flex: none;
  width: 36px;
  height: 4px;
  margin: 10px auto 2px;
  border-radius: var(--radius-full);
  background: var(--border);
}

/* Corps défilant : intro + points + détail dépliable ; les actions restent fixes. */
.consent-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px var(--px) 8px;
}

.consent-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  color: var(--accent);
  background: var(--accent-bg2);
  border: 1px solid var(--accent-border);
  margin-bottom: 14px;
}

.consent-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
  margin-bottom: 8px;
}

.consent-intro {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 52ch;
  margin-bottom: 20px;
}

.consent-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 18px;
}
.consent-point {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.consent-point-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--surface3);
  color: var(--text-secondary);
  margin-top: 1px;
}
.consent-point-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.consent-point-text strong {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text);
  margin-bottom: 2px;
}

/* Disclosure « En savoir plus » : toggle discret + détail en grid 0fr→1fr
   (s'anime sans figer une hauteur ; replié = réellement hors flux). */
.consent-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.consent-more-toggle svg {
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.consent-sheet.is-expanded .consent-more-toggle svg { transform: rotate(180deg); }

.consent-more-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.consent-sheet.is-expanded .consent-more-wrap { grid-template-rows: 1fr; }
.consent-more {
  overflow: hidden;
  min-height: 0;
}
.consent-more p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 12px 0 0;
  max-width: 56ch;
}
.consent-more p strong { color: var(--text-secondary); font-weight: 600; }

/* Actions fixes : toujours atteignables, séparées par un filet, safe-area incluse. */
.consent-actions {
  flex: none;
  display: flex;
  gap: 10px;
  padding: 14px var(--px) calc(env(safe-area-inset-bottom) + 16px);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface2);
}
.consent-btn {
  min-height: 52px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, opacity 0.18s;
}
/* L'or recule : l'action affirmative est tintée, pas pleine (cf. .auth-btn-submit). */
.consent-accept {
  flex: 1;
  border: 1px solid var(--accent-border2);
  background: var(--accent-bg2);
  color: var(--accent);
}
.consent-accept:hover  { background: var(--accent-bg3); }
.consent-accept:active { background: var(--accent-bg3); opacity: 0.9; }
.consent-decline {
  flex: none;
  padding: 0 18px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
}
.consent-decline:hover  { color: var(--text-secondary); border-color: var(--border); }
.consent-decline:active { opacity: 0.85; }

.consent-btn:focus-visible,
.consent-more-toggle:focus-visible {
  outline: 2px solid var(--accent-border3);
  outline-offset: 2px;
}

/* Desktop (≥768px) : dialogue centré, borné, élevé — entrée scale+fade. */
@media (min-width: 768px) {
  .consent-backdrop {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .consent-backdrop.is-visible { background: rgba(0, 0, 0, 0.58); }

  .consent-sheet {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(460px, calc(100vw - 80px));
    max-height: 86vh;
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 60px -14px rgba(0, 0, 0, 0.62);
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    transition:
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.2s ease;
  }
  .consent-sheet.is-visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  .consent-drag { display: none; }
  .consent-scroll { padding-top: 26px; }
  .consent-actions { padding-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .consent-sheet,
  .consent-backdrop,
  .consent-more-wrap,
  .consent-more-toggle svg { transition: none; }
}

/* ── Suppression de compte (dialogue destructif) ───────────────────────────
   Confirme une action irréversible : alerte centrée, accent danger, proposition
   d'export, champ mot de passe conditionnel. Pas de transitionend (remove direct)
   → aucune fuite sous reduced-motion. */
.del-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: toastIn 0.18s ease;
}
.del-box {
  width: 100%;
  max-width: 360px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px 18px;
  text-align: center;
}
.del-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  margin-bottom: 14px;
}
.del-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
  margin: 0 0 8px;
}
.del-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.del-desc strong { color: var(--text); font-weight: 600; }

.del-export {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 16px;
  padding: 9px 14px;
  background: var(--accent-bg2);
  border: 1px solid var(--accent-border2);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--accent);
  cursor: pointer;
  min-height: 44px;
}
.del-export:active { opacity: 0.85; }

.del-pw-label {
  display: block;
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 6px;
}
.del-pw {
  width: 100%;
  box-sizing: border-box;
  min-height: 50px;
  padding: 0 14px;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;            /* 16px : empêche le zoom auto d'iOS au focus */
  -webkit-appearance: none;
  appearance: none;
}
.del-pw:focus { outline: none; border-color: var(--accent-border2); background: var(--surface2); }

.del-error {
  font-size: 13px;
  line-height: 1.4;
  color: var(--danger);
  text-align: left;
  margin: 0 0 14px;
}

.del-actions {
  display: flex;
  gap: 10px;
}
.del-btn {
  flex: 1;
  min-height: 50px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: opacity 0.18s, background 0.18s;
}
.del-cancel { background: transparent; color: var(--muted); }
.del-cancel:active { opacity: 0.85; }
.del-confirm {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--on-danger);
}
.del-confirm:active { opacity: 0.9; }
.del-btn:disabled { opacity: 0.55; cursor: default; }

.del-btn:focus-visible,
.del-export:focus-visible,
.del-pw:focus-visible {
  outline: 2px solid var(--accent-border3);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .del-overlay { animation: none; }
}

/* ── Divider ────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--border-subtle);
}

/* ── Stats (éditorial, sans cards) ──────────────
   L'espace et les titres portent la structure : pas de boîtes bordées
   (l'anti-référence « dashboard SaaS » de Myna). Rythme : tight dans une
   section, généreux entre les sections. */

/* Héro : le temps de visionnage est le seul gros chiffre. */
.stats-hero-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.stats-hero-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(54px, 15vw, 66px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--text);
}
.stats-hero-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
}

/* Compteurs : rangée 3-up, séparés par un filet fin (pas une card chacun). */
.stats-counts {
  display: flex;
  margin-top: 28px;
}
.stats-count {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
}
.stats-count + .stats-count { border-left: 1px solid var(--border-subtle); }
.stats-count:first-child { padding-left: 0; }
.stats-count-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  color: var(--text);
}
.stats-count-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
}

/* Sections : titre fort (Barlow) + espace généreux au-dessus. */
.stats-section { margin-top: 38px; }
.stats-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 0 0 14px;
}
.stats-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.stats-section-head .stats-section-title { margin-bottom: 0; }

/* Donut + légende */
.stats-donut-row {
  display: flex;
  align-items: center;
  gap: 24px;
}
.stats-donut-legend {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* Barres horizontales (genres) */
.stats-bar-row + .stats-bar-row { margin-top: 13px; }
.stats-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.stats-bar-name { font-size: 14px; color: var(--text-secondary); }
.stats-bar-val {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stats-bar-track {
  height: 3px;
  background: var(--surface3);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.stats-bar-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Histogramme des notes */
.stats-avg {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.stats-avg-max { font-size: 12px; font-weight: 400; color: var(--muted); }
.stats-ratings {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 70px;
}
.stats-rating-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  height: 100%;
  justify-content: flex-end;
}
.stats-rating-n { font-size: 10px; color: var(--muted); min-height: 13px; }
.stats-rating-bar {
  width: 100%;
  height: 0;
  min-height: 3px;
  border-radius: 4px 4px 0 0;
  transition: height 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.stats-rating-x { font-size: 10px; color: var(--muted); }

/* Séries les plus vues */
.stats-top-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}
.stats-top-row + .stats-top-row { border-top: 1px solid var(--border-faint); }
.stats-top-rank {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  text-align: right;
}
.stats-top-main { min-width: 0; }
.stats-top-title {
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-top-track {
  height: 3px;
  background: var(--surface3);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 5px;
}
.stats-top-fill {
  height: 100%;
  width: 0;
  background: var(--accent-border2);
  border-radius: var(--radius-full);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.stats-top-eps {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Plateformes (chips — usage légitime du pill, pas une section-card) */
.stats-platforms { display: flex; flex-wrap: wrap; gap: 7px; }
.stats-plat {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 13px;
  color: var(--text-secondary);
}
.stats-plat-logo {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
}
.stats-plat-sep { color: var(--faint); }
.stats-plat-n { color: var(--muted); }

.stats-footer {
  font-size: 11px;
  color: var(--faint);
  text-align: center;
  margin-top: 38px;
}

@media (prefers-reduced-motion: reduce) {
  .stats-bar-fill, .stats-rating-bar, .stats-top-fill { transition: none; }
}

/* ── Rétro (récap mensuel / annuel) ─────────────
   Réutilise l'idiome éditorial des Stats (.stats-hero*, .stats-counts,
   .stats-section*). L'or reste discret : franc sur l'action « Partager » et
   l'accroche genre, teinté sur les pills, neutre ailleurs. */
.retro-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
}
.retro-back {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}
.retro-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 31px;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.01em;
}

/* Sélecteur de période — rangée de pills défilable (mois récents puis années). */
.retro-periods {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 0 28px;
  padding-bottom: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.retro-periods::-webkit-scrollbar { display: none; }
.retro-period {
  flex-shrink: 0;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.retro-period.active {
  background: var(--accent-dim2);
  color: var(--accent);
  border-color: var(--accent-border2);
}

.retro-hero-unit {
  font-size: 0.52em;
  color: var(--accent);
  margin-left: 6px;
}

/* Mur d'affiches — grille adaptative, #1 mis en avant par un liseré or discret. */
.retro-posters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
}
.retro-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface2);
}
.retro-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.retro-poster.is-top { box-shadow: 0 0 0 1.5px var(--accent-border2); }
.retro-poster-rank {
  position: absolute;
  top: 5px;
  left: 7px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--accent);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.retro-poster-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--faint);
}

/* Accroche genre — une phrase, le genre dominant en or. */
.retro-accroche {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 12px;
}
.retro-accroche-genre { color: var(--accent); }
.retro-genres { display: flex; flex-wrap: wrap; gap: 7px; }
.retro-genre-pill {
  background: var(--accent-dim2);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  font-size: 12px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
}

/* Moments (superlatifs) — lignes denses, pas de cards. */
.retro-moment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--border-subtle);
}
.retro-moment-label { font-size: 13px; color: var(--meta); flex-shrink: 0; }
.retro-moment-val {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.retro-moment-title {
  font-size: 13.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.retro-moment-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.retro-stars { color: var(--accent); font-size: 12px; letter-spacing: 1.5px; flex-shrink: 0; }
.retro-trend { display: inline-flex; align-items: center; gap: 4px; }
.retro-trend.up { color: var(--accent); }
.retro-trend.down { color: var(--text-secondary); }
.retro-trend .retro-moment-num { color: inherit; }

.retro-share {
  width: 100%;
  margin-top: 34px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-lg);
  padding: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.retro-share:active { transform: scale(0.98); }
.retro-share.is-loading { opacity: 0.6; pointer-events: none; }

.retro-foot {
  font-size: 11px;
  color: var(--faint);
  text-align: center;
  margin-top: 22px;
}

/* État vide — invitation, pas « rien ici » (le suivi par date démarre maintenant). */
.retro-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 54px 24px;
}
.retro-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--accent-dim2);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.retro-empty-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--text);
  margin: 0 0 8px;
}
.retro-empty-body {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 32ch;
  margin: 0 auto;
}

/* Révélation des beats — enrichit un défaut déjà visible (.in posé en JS). */
.retro-beat.in {
  animation: retroBeatIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 0.06s);
}
@keyframes retroBeatIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .retro-beat.in { animation: none; }
}

/* ── Wishlist page grid ─────────────────────── */
.wishlist-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 10px;
  width: 100%;
}

.wishlist-page-card {
  cursor: pointer;
}

.wishlist-page-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wishlist-del-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(13,13,13,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(238,234,224,0.12);
  color: var(--on-media);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
  z-index: 2;
}
.wishlist-del-btn:active { background: rgba(180,60,60,0.7); transform: scale(0.9); }
.wishlist-del-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wishlist-page-type {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-media);
  background: rgba(13,13,13,0.6);
  backdrop-filter: blur(4px);
  padding: 2px 5px;
  border-radius: 4px;
}

.wishlist-page-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  margin-top: 6px;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.wishlist-page-year {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Watching screen — header editorial */
.watching-screen-header {
  margin-bottom: 20px;
}
.watching-back-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  -webkit-tap-highlight-color: transparent;
}
.watching-screen-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 42px;
  color: var(--text);
  margin: 0;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.watching-screen-count {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 7px;
  letter-spacing: 0.02em;
}

/* Statut ✓ — top-right corner, items terminés */
.watching-done-chip {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(13,13,13,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid color-mix(in srgb, var(--success) 45%, transparent);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
}

/* "En cours" — films avec status watching (pas de barre de saisons) */
.watching-movie-ep {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--on-progress);
  background: var(--progress);
  padding: 2px 6px;
  border-radius: 4px;
}

.watching-card-ep {
  position: absolute;
  bottom: 24px;
  left: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--on-accent);
  background: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
}

.watching-card-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: rgba(238,234,224,0.15);
}

.watching-card-bar-fill {
  height: 100%;
  background: var(--progress);
}

/* ── À venir rows ───────────────────────────── */
.upcoming-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.upcoming-row:last-child {
  border-bottom: none;
}

.upcoming-row:active { opacity: 0.7; }

.upcoming-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.upcoming-info {
  flex: 1;
  min-width: 0;
}

.upcoming-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.upcoming-ep {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upcoming-date {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
  text-align: right;
  white-space: nowrap;
}

/* Legacy stat-card kept for backwards compat */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.stat-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  margin-bottom: 14px;
}

/* ── Sélecteur d'espace (logo → menu déroulant) ───────────── */
.space-select { position: relative; display: inline-flex; }

.space-select-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 7px 6px;
  margin: -7px -6px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--muted);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.space-select-trigger:active { background: var(--surface2); }
.space-select-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.space-select-logo { height: 30px; width: auto; display: block; }

/* Chevron rotation — cible le svg généré par icon() */
.space-select-trigger svg {
  flex-shrink: 0;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.space-select-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.space-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.6);
  /* Fermé par défaut — transition bidirectionnelle (open ET close animés) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top left;
  transition:
    opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.18s;
}

.space-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .space-menu, .space-menu.open { transition: none; }
}

.space-menu-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 4px;
}

.space-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 9px;
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.15s;
}
.space-menu-item:hover  { background: var(--surface2); }
.space-menu-item:active { background: var(--surface3); }
.space-menu-item.active { background: var(--accent-bg); }
.space-menu-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.space-menu-item img { height: 22px; width: auto; display: block; }
.space-menu-item.soon {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.space-menu-check {
  margin-left: auto;
  color: var(--accent);
  display: flex;
  align-items: center;
}

.space-chip-soon {
  margin-left: auto;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-bg2);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-full);
  padding: 2px 8px;
}

/* ── Écran « Bientôt disponible » (espaces v2) ────────────── */
.coming-soon {
  position: relative;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pt) var(--px) var(--pb);
}

.coming-soon-header {
  position: absolute;
  top: max(16px, calc(env(safe-area-inset-top) + 8px));
  left: var(--px);
  right: var(--px);
  z-index: 10;
}

.coming-soon-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  max-width: 320px;
}

.coming-soon-logo { height: 30px; width: auto; }

.coming-soon-badge {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-bg2);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-full);
  padding: 6px 14px;
}

.coming-soon-blurb {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.coming-soon-cta {
  margin-top: 4px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 13px 22px;
  min-height: 48px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.coming-soon-cta:active { background: var(--surface3); }

/* ── Games: filter pills scroll ─────────────────────────────────────────────── */
.games-filter-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px var(--px) 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.games-filter-scroll::-webkit-scrollbar { display: none; }

.games-filter-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  padding: 7px 15px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  white-space: nowrap;
}
.games-filter-pill.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 600;
}
.games-filter-pill:active { opacity: 0.8; }

/* ── Games: 2-col grid ───────────────────────────────────────────────────────── */
.games-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 4px var(--px);
  align-items: start;
}

.games-card {
  cursor: pointer;
  transition: opacity 0.15s;
}
.games-card:active { opacity: 0.75; }
.games-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

.games-card-cover {
  position: relative;
  width: 100%;
  padding-bottom: 133.33%;
  height: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface3);
}

.games-card-cover img,
.games-card-cover > div:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.games-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0.5) 0%, rgba(13,13,13,0) 30%, rgba(13,13,13,0) 55%, rgba(13,13,13,0.75) 100%);
  pointer-events: none;
}

.games-card-top {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
}

.games-card-bottom {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.games-status-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 5px;
  line-height: 1.4;
}

.gc-rating {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--on-media);
  line-height: 1;
}

.gc-platform {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  color: var(--on-media);
  background: rgba(13,13,13,0.55);
  padding: 2px 6px;
  border-radius: 4px;
}

.games-card-info {
  padding: 8px 2px 2px;
}

.gc-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.gc-year {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Games: add sheet ────────────────────────────────────────────────────────── */
#games-add-sheet {
  position: fixed;
  inset: 0;
  z-index: 500;
}

.gas-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: gas-fade-in 0.22s ease forwards;
}

@keyframes gas-fade-in { from { opacity: 0; } to { opacity: 1; } }

.gas-panel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--border);
  padding: 16px var(--px) max(28px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.gas-panel.visible { transform: translateY(0); }

.gas-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 0 auto 20px;
}

.gas-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 20px;
}

.gas-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.gas-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.gas-status-btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  text-align: center;
}
.gas-status-btn:active { opacity: 0.8; }

.gas-platform-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}

.gas-chip {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.gas-chip.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent-border);
}
.gas-chip:active { opacity: 0.8; }

.gas-platform-field {
  width: 100%;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.18s;
  box-sizing: border-box;
}
.gas-platform-field::placeholder { color: var(--muted); }
.gas-platform-field:focus { border-color: var(--accent-border2); }
.gas-platform-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.gas-confirm {
  margin-top: 20px;
  width: 100%;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  padding: 0;
  height: 52px;
  cursor: pointer;
  transition: opacity 0.18s;
  letter-spacing: 0.01em;
}
.gas-confirm:active { opacity: 0.85; }
.gas-confirm:disabled { opacity: 0.5; cursor: default; }

/* ── Home: editorial header ──────────────────────────────────────────────────── */
.editorial-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
}
.editorial-head-left { line-height: 1; }
.editorial-count {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 42px;
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--text);
}
.editorial-num { color: var(--accent); }
.editorial-status {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 42px;
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-top: 2px;
}
.editorial-cta {
  display: flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--accent);
  cursor: pointer;
  padding-bottom: 10px;
  flex-shrink: 0;
}

/* ── Home: activity widget ───────────────────────────────────────────────────── */
.activity-widget {
  background: color-mix(in srgb, var(--accent) 3%, transparent);
  border-radius: var(--radius-lg);
  padding: 16px;
  border: 1px solid var(--accent-border);
  cursor: pointer;
  transition: border-color 0.15s;
}
.activity-widget:active {
  border-color: var(--accent-border2);
}
.act-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.act-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--text);
}
.act-avg {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
}
.act-avg strong {
  color: var(--text);
  font-weight: 600;
}
.act-total {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}
.act-total b {
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
}
.act-total-label { color: var(--muted); }
.act-bars {
  display: flex;
  gap: 5px;
  height: 90px;
  align-items: flex-end;
}
.act-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
}
.act-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}
.act-bar {
  width: 100%;
  background: color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 4px 4px 2px 2px;
  min-height: 4px;
}
.act-bar.today { background: var(--accent); }
.act-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1;
}
.act-label.today {
  color: var(--accent);
  font-weight: 700;
}

/* ── Home: remplir l'écran quand le contenu est court ────────────────────────────
   Sans assez de données (rien en cours / à venir), l'Accueil est plus court que
   l'écran → grande bande de fond vide en bas. On fait remplir : le conteneur
   occupe toute la hauteur et la section « À voir ce soir » s'ancre en bas
   (margin-top:auto), le surplus d'espace se répartit en respiration au-dessus.
   Quand l'Accueil est long (assez de contenu), il n'y a pas de slack → l'ancre
   est sans effet et l'écran scrolle normalement (dégagement bas = --pb). */
.home-root {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.home-root > #home-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.home-decision { margin-top: auto; }

/* ── Home: decision section ──────────────────────────────────────────────────── */
.decision-stage {
  margin-top: 10px;
}
/* Row 1: cover — ou — cover */
.decision-covers {
  display: grid;
  grid-template-columns: 1fr 36px 1fr;
  align-items: center;
}
.decision-ou-col {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}
/* Row 2: title — gap — title */
.decision-titles {
  display: grid;
  grid-template-columns: 1fr 36px 1fr;
  margin-top: 8px;
  gap: 0;
}
/* Cover button reset */
.decision-pick {
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.12s;
}
.decision-pick:active { opacity: 0.75; }
.decision-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.decision-hint {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.decision-shuffle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 0;
  transition: opacity 0.15s;
}
.decision-shuffle-btn:active { opacity: 0.7; }
.decision-card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface3);
}
.decision-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0) 50%, rgba(13,13,13,0.7) 100%);
}
.decision-card-type {
  position: absolute;
  top: 8px;
  left: 8px;
}
.decision-card-duration {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--on-media);
}
.decision-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
.decision-chosen {
  cursor: pointer;
  animation: fade-up 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: opacity 0.15s;
}
.decision-chosen:active { opacity: 0.8; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .decision-chosen { animation: none; }
}
.decision-chosen-cover {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-faint);
}
.decision-chosen-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.75) 100%);
}
.decision-chosen-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 90%, transparent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.decision-chosen-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 14px 14px;
}
.decision-chosen-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  color: var(--on-media);
  line-height: 0.95;
  letter-spacing: 0.01em;
}
.decision-chosen-meta {
  font-size: 11px;
  color: rgba(238,234,224,0.6);
  margin-top: 5px;
}
.decision-shuffle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 11px 0;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.decision-shuffle:active { background: var(--surface3); color: var(--text); }

/* ── Calendar screen ─────────────────────────────────────────────────────────── */
/* ── Calendar — full redesign ────────────────────────────────────────────── */

.cal-back-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  min-height: 44px;
}

/* ── Calendar feed (radar « À venir ») ───────────────────────────────────── */
/* Repère « fuseau » : note discrète rappelant que les dates affichées sont les
   dates de diffusion d'origine (TMDB), la sortie FR pouvant tomber le lendemain. */
.tz-note {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

.feed {
  padding: 0 var(--px);
  margin-top: 24px;
}
.feed-bucket { margin-top: 32px; }
.feed-bucket:first-child { margin-top: 20px; }

.feed-bucket-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}
.feed-bucket-label.now { color: var(--accent); }

.feed-group {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  column-gap: 22px;
}
/* Spine de la timeline, dans la gouttière, sous la date. */
.feed-group::before {
  content: '';
  position: absolute;
  left: 49px;
  top: 6px;
  bottom: -14px;
  width: 2px;
  margin-left: -1px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}
.feed-group.is-last::before { display: none; }
/* Nœud sur la spine, aligné avec la date. */
.feed-node {
  position: absolute;
  left: 49px;
  top: 14px;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--surface3);
  border: 2px solid var(--bg);
  z-index: 1;
}
.feed-node.now {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}

.feed-rail {
  display: flex;
  justify-content: center;
}
.feed-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.feed-date-dow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--meta);
}
.feed-date-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--text-secondary);
  margin-top: 3px;
}
.feed-date.now .feed-date-dow,
.feed-date.now .feed-date-num { color: var(--accent); }

.feed-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 14px;
  min-width: 0;
}

.feed-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  margin: -6px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
}
@media (hover: hover) { .feed-item:hover { background: var(--surface); } }
.feed-item:active { background: var(--surface2); }

.feed-item-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 62px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface2);
}
.feed-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-item-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
}

.feed-item-body {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.feed-item-body:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.feed-item-title {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-item-sub {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-chip {
  display: inline-block;
  margin-top: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--surface2);
  color: var(--meta);
}
.feed-chip.hot { background: var(--accent-bg2); color: var(--accent); }

.feed-empty {
  padding: 56px var(--px) 0;
  text-align: center;
}
.feed-empty-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--text);
}
.feed-empty-sub {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 10px auto 0;
  max-width: 34ch;
}

.cal-title-main {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 10vw, 48px);
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.01em;
}
.cal-title-sub {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 10vw, 48px);
  line-height: 1;
  color: color-mix(in srgb, var(--text) 22%, transparent);
  letter-spacing: -0.01em;
  margin-top: 2px;
}

/* MOIS / JOURS toggle */
.cal-toggle-group {
  display: flex;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 14px;
  padding: 3px;
  gap: 2px;
  margin-top: calc(var(--pt) + 4px);
  flex-shrink: 0;
}
.cal-toggle-btn {
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 10px;
  transition: all 0.15s;
  white-space: nowrap;
  min-height: 44px;
}
.cal-toggle-btn.active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}

/* Month nav */
.cal-month-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--text);
}
.cal-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.cal-nav-btn:active { background: var(--surface2); }

/* Month grid */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-day-hdr {
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding-bottom: 8px;
}
.cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: min(100%, 52px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid transparent;
  background: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.cal-day:disabled { cursor: default; }
.cal-day.past { color: color-mix(in srgb, var(--text) 25%, transparent); }
.cal-day.yest {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: color-mix(in srgb, var(--text) 50%, transparent);
}
.cal-day.today {
  background: var(--accent);
  color: var(--on-accent);
}
.cal-day.today .cal-dot { background: var(--on-accent); }
.cal-day.sel:not(.today) {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
}
.cal-day:not([disabled]):not(.sel):not(.today):active { background: var(--surface2); }

.cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* Event group header */
.cal-group-header {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--accent);
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  margin-bottom: 4px;
}

/* Episode row */
.cal-ev-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  -webkit-tap-highlight-color: transparent;
}
.cal-ev-row:last-child { border-bottom: none; }
.cal-ev-row:active { opacity: 0.7; }
.cal-ev-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.cal-ev-info { flex: 1; min-width: 0; }
.cal-ev-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.cal-ev-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-platform-badge {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Add-to-calendar button on event rows */
.cal-add-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
}
.cal-add-btn:active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  transform: scale(0.93);
}
.cal-add-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Agenda bottom sheet — option rows */
.cal-agenda-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  min-height: 56px;
  background: none;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  cursor: pointer;
  width: 100%;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}
.cal-agenda-option:last-child { border-bottom: none; }
.cal-agenda-option:active { background: color-mix(in srgb, var(--text) 4%, transparent); }
.cal-agenda-option-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-agenda-option-label {
  flex: 1;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}
.cal-agenda-option-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
}
.cal-agenda-chevron {
  flex-shrink: 0;
  color: color-mix(in srgb, var(--text) 25%, transparent);
}

/* Day strip (JOURS mode) */
.cal-day-strip-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 0 var(--px);
  scrollbar-width: none;
}
.cal-day-strip-wrap::-webkit-scrollbar { display: none; }
.cal-day-strip {
  display: flex;
  gap: 6px;
  padding-bottom: 2px;
  min-width: max-content;
}
.cal-day-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 60px;
  padding: 10px 8px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.cal-day-chip.today {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.cal-day-chip.sel {
  background: var(--accent);
  border-color: var(--accent);
}
.cal-chip-day {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cal-day-chip.sel .cal-chip-day { color: color-mix(in srgb, var(--on-accent) 65%, transparent); }
.cal-chip-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  color: var(--text);
}
.cal-day-chip.sel .cal-chip-num { color: var(--on-accent); }
.cal-chip-dot-wrap {
  height: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.cal-day-chip.sel .cal-chip-dot { background: var(--on-accent); }

.cal-group {
  margin-top: 24px;
}
.cal-group:first-child { margin-top: 20px; }

/* ── Accessible focus rings for role="button" div cards ─────────────────────── */
.resume-card:focus-visible,
.bento-mini:focus-visible,
.upcoming-row:focus-visible,
.wishlist-page-card:focus-visible,
.cast-card:focus-visible,
.actor-credit-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Cast strip — fiche détail
   ═══════════════════════════════════════════════════════════════════════════════ */

.cast-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.cast-strip::-webkit-scrollbar { display: none; }

.cast-card {
  flex-shrink: 0;
  width: 74px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 0;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}
.cast-card:active .cast-photo { transform: scale(0.95); }

.cast-photo {
  width: 74px;
  height: 111px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface3);
  transition: transform 0.13s ease-out;
}
.cast-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cast-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--muted);
}
.cast-name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  margin-top: 6px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cast-character {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Similaires — fiche détail (strip d'affiches horizontal, cf. cast-strip)
   ═══════════════════════════════════════════════════════════════════════════════ */

.similar-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.similar-strip::-webkit-scrollbar { display: none; }

.similar-card {
  flex-shrink: 0;
  width: 100px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}
.similar-card:active .similar-poster { transform: scale(0.96); }
.similar-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

.similar-poster {
  width: 100px;
  height: 150px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface3);
  transition: transform 0.13s ease-out;
}
.similar-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.similar-poster-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  color: rgba(238, 234, 224, 0.25);
}
.similar-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-top: 7px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.similar-year {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Écran Acteur
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Fiche acteur = PROFIL d'une personne (portrait rond centré), volontairement
   distinct des fiches titre (backdrop large + affiche 2:3). La photo TMDB est un
   portrait : la recadrer en bandeau large ne montrait que le front. On garde une
   ambiance cinéma via un voile flou de la même photo, fondu dans le fond. */
.actor-hero {
  position: relative;
  text-align: center;
  overflow: hidden;
}
/* Le bouton retour doit rester cliquable au-dessus de .actor-hero-inner
   (conteneur pleine largeur en flux qui, sinon, intercepte le clic). */
.actor-hero .btn-back { z-index: 3; }
.actor-hero-wash {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 300px;
  background-size: cover;
  background-position: center 20%;
  filter: blur(36px) saturate(0.85) brightness(0.5);
  transform: scale(1.25);
  pointer-events: none;
  /* Plume le bas du voile pour éviter une couture nette à la coupe. */
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 92%);
}
.actor-hero-fade {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 300px;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 28%, transparent) 0%,
    color-mix(in srgb, var(--bg) 64%, transparent) 58%,
    var(--bg) 100%);
}
.actor-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(env(safe-area-inset-top) + 64px) var(--px) 6px;
}
.actor-portrait {
  width: 150px;
  aspect-ratio: 2 / 3;          /* portrait plein (ratio photo TMDB) — aucun recadrage du visage */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Cadre or discret + ombre portée. */
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--accent) 42%, transparent),
    0 18px 42px -14px rgba(0, 0, 0, 0.72);
}
.actor-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.actor-portrait-initial {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 52px;
  color: rgba(238, 234, 224, 0.45);
}
.actor-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(27px, 7vw, 34px);
  color: var(--text);
  margin: 17px 0 0;
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.actor-role {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}

/* Filmographie */
.actor-body { padding: 22px var(--px) 0; }
.actor-credits { margin-top: 16px; }

/* Desktop : le profil reste centré mais borné, pas étiré sur toute la largeur. */
@media (min-width: 768px) {
  .actor-hero-inner { padding-top: calc(env(safe-area-inset-top) + 40px); }
  .actor-portrait { width: 172px; }
}

/* Filter tabs */
.actor-filter-tabs {
  display: flex;
  gap: 8px;
}
.actor-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  cursor: pointer;
  min-height: 36px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.actor-filter-btn.active {
  color: var(--accent);
  border-color: var(--accent-border2);
  background: var(--accent-dim);
}
.actor-filter-btn:active { opacity: 0.75; }
.actor-filter-count {
  font-size: 11px;
  font-weight: 500;
  color: inherit;
  opacity: 0.7;
}

/* Credit rows */
.actor-credit-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 0;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.actor-credit-row.has-border {
  border-bottom: 1px solid var(--border-faint);
}
.actor-credit-row:active { opacity: 0.65; }

.actor-credit-poster {
  flex-shrink: 0;
  width: 44px;
  height: 66px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface3);
}
.actor-credit-info {
  flex: 1;
  min-width: 0;
}
.actor-credit-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.actor-credit-char {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.actor-credit-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-body);
}
.actor-credit-sep { color: var(--faint); }
.actor-type-badge {
  font-size: 10px;
  color: var(--muted);
  background: var(--surface3);
  border-radius: 4px;
  padding: 2px 6px;
  font-weight: 500;
  margin-left: 2px;
}
.actor-credit-chevron {
  color: var(--faint);
  flex-shrink: 0;
}

/* Back button plain (error state, outside backdrop) */
.actor-back-plain {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .cast-photo { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Biblio — « Ma vidéothèque »
   Aperçu éditorial (héros + métriques + répartition) + bibliothèque filtrable
   en vue Grille (posters bord à bord) ou Liste. Monochrome crème/or : aucune
   couleur par catégorie. Statuts en mono (blanc / gris / contour), progression
   neutre (jamais or) — cf. système « or discret ».
   z-index local : sticky controls 30 < notch 32 < bottom-nav 90.
   ═══════════════════════════════════════════════════════════════════════════ */
.biblio { min-height: 100%; }

/* Masque le contenu derrière la status bar iOS translucide pendant le scroll. */
.biblio-notch {
  position: sticky;
  top: 0;
  z-index: 32;
  height: env(safe-area-inset-top, 0px);
  background: var(--bg);
}

/* ── Header ─────────────────────────────────────────────── */
.biblio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 6px var(--px) 0;
  margin-top: 8px;
}
.biblio-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.biblio-avatar {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface3);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.18s, transform 0.1s;
}
.biblio-avatar img { width: 100%; height: 100%; object-fit: cover; }
.biblio-avatar:active { transform: scale(0.94); }
.biblio-avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.biblio-loading { display: flex; align-items: center; justify-content: center; padding: 80px 0; }

/* ── Aperçu ─────────────────────────────────────────────── */
.biblio-overview { padding: 24px var(--px) 8px; }

/* Héros : le chiffre écrase l'unité (ratio 8:1). */
.biblio-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 10px;
  line-height: 0.9;
}
.biblio-hero-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 80px;
  color: var(--accent);
  letter-spacing: -0.03em;
}
.biblio-hero-unit {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 32%, transparent);
  padding-bottom: 11px; /* aligne en bas du chiffre */
}
@media (max-width: 340px) {
  .biblio-hero-num { font-size: 68px; }
}

.biblio-breakdown {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 18px;
}
.biblio-bd-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
}
.biblio-bd-dot { color: var(--faint); margin: 0 5px; }

/* Métriques secondaires — 3 colonnes flottantes, pas de cartes */
.biblio-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 30px;
  padding: 20px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.biblio-metric {
  text-align: center;
  border-right: 1px solid var(--border-subtle);
  padding: 0 10px;
}
.biblio-metric:last-child { border-right: none; }
.biblio-metric-value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.biblio-metric-unit { font-size: 15px; font-weight: 700; color: var(--muted); margin-left: 2px; }
.biblio-metric-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta);
  margin-top: 8px;
}

/* Barre de répartition (segments crème en opacité décroissante) */
.biblio-repartition { margin-top: 26px; }
.biblio-rep-head {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 11px;
}
.biblio-rep-bar { display: flex; gap: 2px; height: 20px; }
.biblio-seg { display: block; height: 100%; border-radius: 5px; }
.biblio-rep-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 13px; }
.biblio-leg {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.biblio-leg-chip { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.biblio-leg-pct { color: var(--muted); margin-left: 1px; font-variant-numeric: tabular-nums; }

/* Lien vers les stats détaillées (action → or assumé) */
.biblio-stats-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 20px;
  padding: 6px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  -webkit-tap-highlight-color: transparent;
}
.biblio-stats-link svg { margin-top: 1px; }
.biblio-stats-link:active { opacity: 0.7; }
.biblio-stats-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ── Contrôles collants ─────────────────────────────────── */
.biblio-controls {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px var(--px);
  margin-top: 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-subtle);
}
.biblio-controls .filter-pills {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  /* fondu sur le bord droit : signale que les filtres défilent sous le toggle */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
}
.biblio-view {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 3px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.biblio-view-btn {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: none;
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s, color 0.15s;
}
.biblio-view-btn.active { background: var(--accent-bg2); color: var(--accent); }
.biblio-view-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Items ──────────────────────────────────────────────── */
.biblio-items { padding-bottom: var(--pb); }

/* Grille : reprend tel quel le composant carte de la Bibliothèque
   (.wishlist-page-grid / .wishlist-page-card — cf screens/watching.js) :
   poster 2:3, titre + année SOUS la carte, badge S·E + barre pour les séries. */
.biblio-items.grid { padding: 14px var(--px) var(--pb); }

/* Repli (gradient + initiale) — partagé avec la vue Liste */
.biblio-poster-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  color: rgba(238, 234, 224, 0.22);
}

/* Mini-barre de progression — utilisée par la vue Liste */
.biblio-pbar-track {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 14%, transparent);
  overflow: hidden;
}
.biblio-pbar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--progress);
}
.biblio-pbar-label {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--meta);
  font-variant-numeric: tabular-nums;
}

/* Liste */
.biblio-items.list { display: flex; flex-direction: column; padding: 4px var(--px) var(--pb); }
.biblio-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 9px 0;
  border: none;
  border-bottom: 1px solid var(--border-faint);
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.biblio-row:last-child { border-bottom: none; }
.biblio-row:active { opacity: 0.65; }
.biblio-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.biblio-row-thumb {
  position: relative;
  width: 44px; height: 64px;
  flex-shrink: 0;
  border-radius: 5px;
  overflow: hidden;
  background: #000;
}
.biblio-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.biblio-row-thumb .biblio-poster-fallback { font-size: 17px; }
.biblio-row.is-wishlist .biblio-row-thumb img,
.biblio-row.is-wishlist .biblio-row-thumb .biblio-poster-fallback { opacity: 0.5; }
.biblio-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.biblio-row-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.biblio-row-meta { font-size: 12px; color: var(--muted); }
.biblio-row-prog { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.biblio-row-prog .biblio-pbar-track { width: 96px; flex: 0 0 auto; }
.biblio-row-prog-label {
  font-size: 10.5px;
  color: var(--meta);
  font-variant-numeric: tabular-nums;
}
.biblio-badge {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 999px;
}
.biblio-badge--watching {
  color: var(--text);
  background: color-mix(in srgb, var(--progress) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--progress) 35%, transparent);
}
.biblio-badge--done {
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid var(--border);
}
.biblio-badge--wishlist,
.biblio-badge--abandoned {
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
}
/* Retrait wishlist (vue liste) : action discrète à droite de la rangée. */
.biblio-row-del {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.biblio-row-del:active { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger); }
.biblio-row-del:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── États vides ────────────────────────────────────────── */
.biblio-empty { text-align: center; padding: 54px 24px; }
.biblio-empty-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--text-secondary);
}
.biblio-empty-sub {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 7px auto 0;
  max-width: 280px;
}
.biblio-empty-first { text-align: center; padding: 72px 28px var(--pb); }
.biblio-empty-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 72px;
  line-height: 1;
  color: var(--faint);
}
.biblio-empty-first .biblio-empty-title { font-size: 22px; color: var(--text); margin-top: 14px; }
.biblio-empty-cta {
  margin-top: 22px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  min-height: 44px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.biblio-empty-cta:active { opacity: 0.85; }
.biblio-empty-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Bouton retour (Profil / Compte, désormais sous-écran) ─ */
.profile-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.profile-back {
  width: 40px; height: 40px;
  margin-left: -8px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s;
}
.profile-back:active { color: var(--text); }
.profile-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .biblio-avatar,
  .biblio-view-btn,
  .profile-back { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   LISTES THÉMATIQUES
   Listes curatées et ordonnées (films/séries mélangés). Or réservé aux actions
   et au rang (l'ordre porte du sens). Cf. js/lists.js + screens/lists.js.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Cover « deck » (affiches fanées) ──────────────────────────────────────── */
.list-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface2);
  --first: 12.5%;
}
.list-cover[data-count="1"] { --first: 32.5%; }
.list-cover[data-count="2"] { --first: 22.5%; }
.list-cover[data-count="3"] { --first: 12.5%; }
.list-cover-poster {
  position: absolute;
  top: 10%;
  height: 80%;
  aspect-ratio: 2 / 3;
  left: calc(var(--first) + var(--i) * 20%);
  z-index: calc(3 - var(--i));
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface3);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.list-cover-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.list-cover-fallback {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: rgba(238, 234, 224, 0.3);
}
.list-cover.is-empty { display: flex; align-items: center; justify-content: center; }
.list-cover-initial {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  color: rgba(238, 234, 224, 0.28);
}

/* Vignette mono-affiche (rangées compactes : feuille + listes d'ami) */
.list-thumb {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 66px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: rgba(238, 234, 224, 0.45);
}
.list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Index « Mes listes » ──────────────────────────────────────────────────── */
.lists-screen { padding: var(--pt) var(--px) var(--pb); }
.lists-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.lists-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.lists-back:active { opacity: 0.7; }
.lists-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.lists-new {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent-bg2);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
}
.lists-new:active { transform: scale(0.92); }
.lists-new:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lists-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 31px;
  color: var(--text);
  margin: 10px 0 22px;
  letter-spacing: 0.01em;
}
.lists-loading { display: flex; justify-content: center; padding: 60px 0; }

.lists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px 14px;
}
.list-card {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.list-card:active { opacity: 0.82; }
.list-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
.list-card-foot { padding: 9px 2px 0; }
.list-card-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list-card-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.list-card-shared {
  position: absolute;
  top: 8px; right: 8px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(13, 13, 13, 0.62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}

/* Index vide */
.lists-empty { text-align: center; padding: 56px 24px var(--pb); }
.lists-empty-art {
  position: relative;
  width: 120px; height: 86px;
  margin: 0 auto 26px;
}
.lists-empty-card {
  position: absolute;
  left: 50%; top: 50%;
  width: 56px; height: 78px;
  border-radius: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  transform: translate(-50%, -50%) rotate(calc((var(--i) - 1) * 11deg)) translateX(calc((var(--i) - 1) * 30px));
  z-index: calc(3 - var(--i));
}
.lists-empty-card[style*="--i:1"] { background: var(--surface3); }
.lists-empty-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 23px;
  color: var(--text);
}
.lists-empty-sub {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 30ch;
  margin: 10px auto 22px;
}
.lists-empty-cta {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-md);
  padding: 13px 26px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  min-height: 48px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lists-empty-cta:active { opacity: 0.85; }
.lists-empty-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Vue d'une liste ───────────────────────────────────────────────────────── */
.lv-loading { display: flex; align-items: center; justify-content: center; height: 100%; }
.lv-error { padding: 58px var(--px) 0; }

.lv-hero {
  position: relative;
  min-height: 244px;
  display: flex;
  overflow: hidden;
}
.lv-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 28%;
  transform: scale(1.12);
  filter: blur(7px) saturate(0.92);
}
/* Scrim sombre — reste sombre dans les 2 thèmes (cohérent avec les affiches) :
   le texte clair par-dessus reste lisible quel que soit le thème. */
.lv-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 18, 22, 0.30) 0%,
    rgba(10, 18, 22, 0.12) 32%,
    rgba(10, 18, 22, 0.78) 82%,
    rgba(10, 18, 22, 0.94) 100%);
}
.lv-hero .btn-back,
.lv-hero .btn-share-card { z-index: 4; }
.lv-hero-content {
  position: relative;
  z-index: 3;
  align-self: flex-end;
  width: 100%;
  padding: 0 var(--px) 18px;
}
.lv-readonly {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-media);
  background: rgba(10, 18, 22, 0.5);
  border: 1px solid rgba(238, 234, 224, 0.2);
  padding: 4px 9px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.lv-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 8vw, 36px);
  line-height: 1.0;
  color: var(--on-media);
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
.lv-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: rgba(238, 234, 224, 0.78);
}
.lv-count { font-weight: 600; color: var(--on-media); }
.lv-dot { opacity: 0.4; }
.lv-desc {
  margin: 11px 0 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(238, 234, 224, 0.72);
  max-width: 60ch;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.lv-controls {
  display: flex;
  gap: 8px;
  padding: 14px var(--px) 6px;
}
.lv-ctrl {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
.lv-ctrl:active { opacity: 0.8; }
.lv-ctrl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lv-ctrl:disabled { opacity: 0.45; cursor: default; }
.lv-ctrl.active {
  background: var(--accent-bg2);
  color: var(--accent);
  border-color: var(--accent-border2);
}

/* Rangées numérotées */
.lv-rows { padding: 6px 0 8px; }
.lv-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px var(--px);
  border-bottom: 1px solid var(--border-faint);
  background: var(--bg);
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}
.lv-row:active { background: var(--surface); }
.lv-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lv-rank {
  flex-shrink: 0;
  width: 26px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.lv-poster {
  flex-shrink: 0;
  width: 44px;
  height: 66px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lv-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-poster-fallback {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: rgba(238, 234, 224, 0.45);
}
.lv-row-body { flex: 1; min-width: 0; }
.lv-row-title {
  display: block;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lv-row-meta {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.lv-chevron { display: flex; flex-shrink: 0; color: var(--faint); }
.lv-row-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.lv-remove, .lv-handle {
  display: none;
  width: 38px; height: 38px;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 9px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lv-remove { color: var(--muted); }
.lv-remove:active { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger); }
.lv-remove:focus-visible, .lv-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lv-handle { color: var(--meta); cursor: grab; touch-action: none; }

/* Mode réorganisation */
.lv-rows.is-editing .lv-row { cursor: default; }
.lv-rows.is-editing .lv-chevron { display: none; }
.lv-rows.is-editing .lv-remove,
.lv-rows.is-editing .lv-handle { display: flex; }
.lv-rows.lv-reordering .lv-row { transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
.lv-row.lv-dragging {
  z-index: 10;
  background: var(--surface2);
  border-radius: var(--radius-md);
  border-bottom-color: transparent;
  box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.6);
  transition: none;
  cursor: grabbing;
}
.lv-row.lv-dragging .lv-handle { cursor: grabbing; }

/* Liste vide / pied */
.lv-empty { text-align: center; padding: 48px 28px; }
.lv-empty-title { font-family: var(--font-display); font-weight: 800; font-size: 21px; color: var(--text); }
.lv-empty-sub { font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 32ch; margin: 9px auto 20px; }
.lv-empty-cta {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  min-height: 46px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lv-empty-cta:active { opacity: 0.85; }
.lv-empty-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lv-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 18px var(--px) 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.lv-foot-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 50px;
  padding: 0 4px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lv-foot-btn svg { color: var(--meta); flex-shrink: 0; }
.lv-foot-btn:active { opacity: 0.7; }
.lv-foot-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.lv-foot-danger { color: var(--danger); }
.lv-foot-danger svg { color: var(--danger); }

/* ── Cluster d'actions de la fiche (liste + partage) ───────────────────────── */
.detail-actions {
  position: absolute;
  top: max(56px, calc(env(safe-area-inset-top) + 14px));
  right: 16px;
  display: flex;
  gap: 8px;
  z-index: 4;
}
.detail-act-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(13, 13, 13, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--on-media);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.detail-act-btn:active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.detail-act-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.detail-act-btn.is-loading { opacity: 0.55; pointer-events: none; }

/* ── Feuille « Ajouter à une liste » ───────────────────────────────────────── */
.atl-new { padding: 4px var(--px) 8px; }
.atl-new-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px dashed var(--accent-border);
  border-radius: var(--radius-md);
  background: var(--accent-bg);
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.atl-new-btn:active { background: var(--accent-bg2); }
.atl-new-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.atl-list { padding: 0 var(--px) 4px; }
.atl-loading { display: flex; justify-content: center; padding: 28px 0; }
.atl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  border: none;
  background: none;
  border-bottom: 1px solid var(--border-faint);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.atl-row:last-child { border-bottom: none; }
.atl-row:active { opacity: 0.7; }
.atl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.atl-main { flex: 1; min-width: 0; }
.atl-title {
  display: block;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atl-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.atl-check {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  color: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.atl-check svg { width: 15px; height: 15px; }
.atl-row.is-in .atl-check { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.atl-empty { text-align: center; padding: 24px; }
.atl-empty-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text); }
.atl-empty-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ── Formulaire création / édition de liste ────────────────────────────────── */
.list-form { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.list-input, .list-textarea {
  width: 100%;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 16px; /* ≥16px : pas de zoom iOS */
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}
.list-textarea { resize: none; line-height: 1.5; min-height: 56px; }
.list-input:focus, .list-textarea:focus { border-color: var(--accent-border2); }
.list-input:focus-visible, .list-textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.list-input::placeholder, .list-textarea::placeholder { color: var(--muted); }

.list-switch-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 2px;
  cursor: pointer;
}
.list-switch-text { flex: 1; min-width: 0; }
.list-switch-title { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--text); }
.list-switch-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.list-switch { position: relative; width: 46px; height: 28px; flex-shrink: 0; }
.list-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.list-switch-knob {
  position: absolute; inset: 0;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background 0.2s, border-color 0.2s;
}
.list-switch-knob::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s;
}
.list-switch input:checked + .list-switch-knob { background: var(--accent-bg3); border-color: var(--accent-border2); }
.list-switch input:checked + .list-switch-knob::after { transform: translateX(18px); background: var(--accent); }
.list-switch input:focus-visible + .list-switch-knob { outline: 2px solid var(--accent); outline-offset: 2px; }

.list-form-actions { display: flex; gap: 10px; margin-top: 6px; }
.list-btn {
  flex: 1;
  min-height: 48px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s, background 0.15s;
}
.list-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.list-btn-ghost { background: var(--surface3); border: 1px solid var(--border); color: var(--text-secondary); }
.list-btn-ghost:active { opacity: 0.75; }
.list-btn-primary { background: var(--accent); border: none; color: var(--on-accent); font-weight: 700; }
.list-btn-primary:active { opacity: 0.85; }
.list-btn-primary:disabled { opacity: 0.55; cursor: default; }

/* ── Feuille « Ajouter des titres » (recherche) ────────────────────────────── */
.at-search {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  padding: 0 13px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--muted);
}
.at-search:focus-within { border-color: var(--accent-border2); }
.at-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  padding: 13px 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text);
}
.at-input::placeholder { color: var(--muted); }
.at-results { padding: 10px var(--px) 4px; min-height: 90px; }
.at-hint { color: var(--muted); font-size: 13px; text-align: center; padding: 26px 0; }
.at-loading { display: flex; justify-content: center; padding: 26px 0; }
.at-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0;
  border: none;
  background: none;
  border-bottom: 1px solid var(--border-faint);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.at-row:last-child { border-bottom: none; }
.at-row:active { opacity: 0.7; }
.at-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.at-poster {
  flex-shrink: 0;
  width: 40px; height: 60px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface3);
  display: flex; align-items: center; justify-content: center;
}
.at-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.at-poster-fallback { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: rgba(238, 234, 224, 0.45); }
.at-main { flex: 1; min-width: 0; }
.at-title {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.at-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.at-add {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-bg2);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.at-row.is-added .at-add { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ── Bande « Mes listes » dans la vidéothèque ──────────────────────────────── */
.biblio-lists { padding: 26px var(--px) 0; }
.biblio-lists-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 13px;
}
.biblio-lists-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.01em;
}
.biblio-lists-all {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.biblio-lists-all:active { opacity: 0.7; }
.biblio-lists-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.biblio-lists-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
}
.biblio-lists-strip::-webkit-scrollbar { display: none; }
.biblio-list-new {
  flex-shrink: 0;
  width: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  border: 1px dashed var(--accent-border);
  background: var(--accent-bg);
  color: var(--accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
  scroll-snap-align: start;
}
.biblio-list-new:active { background: var(--accent-bg2); }
.biblio-list-new:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.biblio-list-new-ic { display: flex; }
.biblio-list-new-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; }
.biblio-list-card {
  flex-shrink: 0;
  width: 150px;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  scroll-snap-align: start;
}
.biblio-list-card:active { opacity: 0.82; }
.biblio-list-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
.biblio-list-card .list-cover { margin-bottom: 8px; }
.biblio-list-name {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.biblio-list-count { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ── Listes d'un ami (friend-view, lecture seule) ──────────────────────────── */
.fv-lists { display: flex; flex-direction: column; }
.fv-list-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 10px 0;
  border: none;
  background: none;
  border-bottom: 1px solid var(--border-faint);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fv-list-row:last-child { border-bottom: none; }
.fv-list-row:active { opacity: 0.7; }
.fv-list-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.fv-list-main { flex: 1; min-width: 0; }
.fv-list-title {
  display: block;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fv-list-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lists-new, .list-card, .lv-ctrl, .lv-rows.lv-reordering .lv-row,
  .lv-row.lv-dragging, .atl-new-btn, .atl-check, .list-switch-knob,
  .list-switch-knob::after, .detail-act-btn, .at-add, .biblio-list-new,
  .list-btn { transition: none; }
  .lists-new:active { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Couche sociale — onglet Amis, demandes, profil ami, présence ambiante.
   Restrained : l'or ne marque que l'action primaire et le point de demande.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── En-têtes & navigation d'écran ─────────────────────────────────────────── */
.social-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.social-title {
  font-family: var(--font-display); font-weight: 800; font-size: 31px;
  color: var(--text); margin: 0; letter-spacing: 0.01em;
}
.social-count { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.social-subhead {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--text-secondary); letter-spacing: 0.06em; text-transform: uppercase;
  margin: 26px 0 2px;
}
.social-back {
  display: inline-flex; align-items: center; gap: 5px; background: none; border: none;
  color: var(--muted); cursor: pointer; padding: 0; margin-bottom: 14px;
  font-family: var(--font-body); font-size: 13px; min-height: 44px;
}
.social-back svg { flex: 0 0 auto; }
.social-back:active { opacity: 0.6; }

/* ── Entrée « Demandes » (point discret, jamais un badge rouge) ─────────────── */
.requests-entry {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 18px;
  padding: 13px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); cursor: pointer; color: var(--text-secondary);
  font-family: var(--font-body); font-size: 14px; transition: border-color 0.18s, background 0.18s;
}
.requests-entry:active { opacity: 0.8; }
.requests-entry.has-incoming { border-color: var(--accent-border); background: var(--accent-bg); color: var(--text); }
.req-ic { position: relative; display: inline-flex; color: var(--muted); flex: 0 0 auto; }
.requests-entry.has-incoming .req-ic { color: var(--accent); }
.req-dot {
  position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
}
.req-entry-label { flex: 1; text-align: left; font-weight: 600; }

/* ── Ajout d'ami (affordance secondaire → email → aperçu) ───────────────────── */
.add-friend-trigger {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 11px 15px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--text-secondary); font-family: var(--font-body); font-weight: 600; font-size: 14px;
  cursor: pointer; min-height: 44px; transition: border-color 0.18s, color 0.18s;
}
.add-friend-trigger svg { color: var(--muted); flex: 0 0 auto; }
.add-friend-trigger:hover { border-color: var(--accent-border); color: var(--text); }
.add-friend-trigger:active { opacity: 0.8; }

.add-friend-form { display: flex; gap: 8px; align-items: center; margin-top: 18px; }
.add-x {
  flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--muted); cursor: pointer; border-radius: var(--radius-md);
}
.add-x:active { opacity: 0.6; }

.add-preview {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding: 14px;
  background: var(--surface); border: 1px solid var(--accent-border); border-radius: var(--radius-lg);
}
.add-preview .friend-main { flex: 1 1 130px; }
.add-preview-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }

.add-results { margin-top: 18px; }
.add-results-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta);
}
.add-results .friend-list { margin-top: 4px; }

/* ── Boutons partagés (petit / fantôme) ────────────────────────────────────── */
.btn-primary.sm { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; font-size: 13px; }
.btn-primary.sm svg { flex: 0 0 auto; }
.btn-primary[disabled] { opacity: 0.55; cursor: default; }
.btn-ghost {
  background: none; border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 600; font-size: 13px;
  min-height: 40px; padding: 0 14px; cursor: pointer; white-space: nowrap; transition: border-color 0.18s, opacity 0.18s;
}
.btn-ghost.sm { min-height: 36px; padding: 0 12px; }
.btn-ghost:active { opacity: 0.65; }

/* ── Roster ────────────────────────────────────────────────────────────────── */
.friend-list { margin-top: 18px; }
.friend-list .friend-row { border-bottom: 1px solid var(--border-faint); }
.friend-list .friend-row:last-child { border-bottom: none; }
.friend-main { flex: 1; min-width: 0; }
.friend-name, .friend-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amb-label { color: var(--text-secondary); font-weight: 600; }
.friend-avatar.sm { width: 40px; height: 40px; font-size: 17px; }

.social-empty { padding: 46px 20px; }
.social-empty-ic {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
}

/* ── Lignes de demandes ────────────────────────────────────────────────────── */
.req-row { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--border-faint); }
.req-row:last-child { border-bottom: none; }
.req-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; flex: 0 0 auto; }
.req-none { color: var(--muted); font-size: 13px; margin: 16px 0 0; }

/* ── Squelette de chargement ───────────────────────────────────────────────── */
.skeleton-row { pointer-events: none; }
.friend-avatar.skel, .skel-line { background: var(--surface2); position: relative; overflow: hidden; }
.friend-avatar.skel { border-color: transparent; }
.skel-line { height: 11px; border-radius: 6px; margin: 5px 0; }
.skel-line.w60 { width: 60%; }
.skel-line.w40 { width: 40%; }
.friend-avatar.skel::after, .skel-line::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 6%, transparent), transparent);
  animation: skelShimmer 1.4s ease-in-out infinite;
}
@keyframes skelShimmer { to { transform: translateX(100%); } }

/* ── Profil ami — héros, en commun, coups de cœur ──────────────────────────── */
.fv-hero { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.fv-hero-avatar {
  flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid var(--accent-border2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--accent);
}
.fv-hero-name { font-family: var(--font-display); font-weight: 800; font-size: 27px; color: var(--text); line-height: 1; }
.fv-readonly {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border); padding: 4px 9px; border-radius: 6px;
}
.fv-common { margin-top: 22px; }
.fv-common-head { font-size: 13px; color: var(--text-secondary); font-weight: 600; margin-bottom: 10px; }

.fv-section { padding: 26px var(--px) 0; }
.fv-section-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); margin: 0 0 10px; letter-spacing: 0.02em; }
.fv-empty { color: var(--muted); font-size: 13px; padding: 6px 0; margin: 0; }

.fv-danger { padding: 34px var(--px) 0; }
.fv-remove {
  background: none; border: none; color: var(--muted); font-family: var(--font-body);
  font-size: 13px; cursor: pointer; padding: 8px 0; min-height: 44px; transition: color 0.18s;
}
.fv-remove:active { color: var(--danger); }

/* ── Rail d'affiches (en commun / coups de cœur) ───────────────────────────── */
.poster-rail {
  display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; padding-bottom: 4px; scrollbar-width: none;
}
.poster-rail::-webkit-scrollbar { display: none; }
.poster-chip { flex: 0 0 auto; background: none; border: none; padding: 0; cursor: pointer; scroll-snap-align: start; }
.poster-chip:active { opacity: 0.75; }
.poster-chip-img {
  display: flex; align-items: center; justify-content: center; width: 74px; height: 111px;
  border-radius: 9px; overflow: hidden; border: 1px solid var(--border);
  background-color: var(--surface2); background-size: cover; background-position: center;
}
.poster-chip-fallback { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--faint); }
.poster-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 9px; }

/* ── Bande « Chez tes amis » (accueil) ─────────────────────────────────────── */
.friends-band { margin-top: 26px; }
.fb-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.fb-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text); margin: 0; letter-spacing: 0.02em; }
.fb-rail { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
.fb-rail::-webkit-scrollbar { display: none; }
.fb-card { flex: 0 0 auto; width: 96px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.fb-card:active { opacity: 0.82; }
.fb-poster {
  display: flex; align-items: center; justify-content: center; width: 96px; height: 144px;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--border);
  background-color: var(--surface2); background-size: cover; background-position: center;
}
.fb-poster-fallback { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--faint); }
.fb-name { display: block; margin-top: 8px; font-family: var(--font-body); font-weight: 600; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-verb { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }

/* ── Présence des amis sur une fiche titre ─────────────────────────────────── */
.fot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 18px;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.fot-lead { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); flex: 0 0 auto; }
.fot-people { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.fot-person {
  display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0;
  cursor: pointer; font-family: var(--font-body); font-size: 13px; color: var(--text-secondary);
}
.fot-person:active { opacity: 0.6; }
.fot-glyph { display: inline-flex; color: var(--muted); }
.fot-person.loved .fot-glyph { color: var(--accent); }
.fot-more { font-size: 13px; color: var(--muted); }

/* ── Pseudo public @handle (Profil) + rappel (Amis) ────────────────────────── */
.handle-field {
  display: flex; align-items: center; background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 12px;
  transition: border-color 0.18s;
}
.handle-field:focus-within { border-color: var(--accent-border); }
.handle-at { color: var(--muted); font-family: var(--font-body); font-size: 16px; padding-right: 1px; }
.handle-field input {
  flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text);
  font-family: var(--font-body); font-size: 16px; /* ≥16px : évite le zoom iOS */
  padding: 12px 0; min-height: 44px;
}
.handle-status { font-size: 12px; margin-top: 8px; min-height: 15px; color: var(--muted); }
.handle-status.is-ok    { color: var(--success); }
.handle-status.is-err   { color: var(--danger); }
.handle-status.is-muted { color: var(--muted); }

.username-nudge {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 16px;
  padding: 12px 14px; background: var(--accent-bg); border: 1px solid var(--accent-border);
  border-radius: var(--radius-md); color: var(--text); font-family: var(--font-body);
  font-size: 13.5px; cursor: pointer; transition: opacity 0.18s;
}
.username-nudge svg { color: var(--accent); flex: 0 0 auto; }
.username-nudge > span:not(.friend-chevron) { flex: 1; text-align: left; }
.username-nudge:active { opacity: 0.85; }

/* ── Réglage de visibilité (Amis / Privé) ──────────────────────────────────── */
.vis-options { display: flex; flex-direction: column; gap: 10px; }
.vis-opt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 16px; cursor: pointer; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; transition: border-color 0.18s, background 0.18s;
}
.vis-opt.selected { border-color: var(--accent-border2); background: var(--accent-bg); }
.vis-opt:active { opacity: 0.85; }
.vis-opt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vis-opt-label { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--text); }
.vis-opt-sub { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.vis-opt-check { flex: 0 0 auto; display: flex; color: var(--accent); opacity: 0; transition: opacity 0.15s; margin-top: 2px; }
.vis-opt.selected .vis-opt-check { opacity: 1; }

/* ── Profil ami — compte privé ─────────────────────────────────────────────── */
.fv-private {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 46px var(--px) 8px;
}
.fv-private-ic {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
}
.fv-private-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text); }
.fv-private-sub { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 34ch; }

@media (prefers-reduced-motion: reduce) {
  .friend-avatar.skel::after, .skel-line::after { animation: none; }
  .requests-entry, .add-friend-trigger, .btn-ghost, .fv-remove, .handle-field, .username-nudge,
  .vis-opt, .vis-opt-check { transition: none; }
}