/* ===========================================================
   Moovyx — feuille de style unique
   1. Tokens   2. Base   3. En-tête   4. Hero
   5. Rangées & cartes   6. Grille & filtres   7. Fiche/lecteur
   8. Compte   9. Divers   10. Responsive (dont mode téléviseur)
   =========================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme:dark;
  --bg:#08090d;
  --surface:#14161f;
  --surface-2:#1b1e2a;
  --skeleton:#161923;
  --glass:#161925f2;
  --line:#ffffff12;
  --line-2:#ffffff24;
  --fill:#ffffff0f;
  --fill-2:#ffffff1c;
  --text:#f4f6fb;
  --muted:#98a0b3;
  --faint:#6f7788;
  --scrim:#08090d;
  --backdrop:#05060acc;
  --shimmer:#ffffff12;
  --hero-text:#d7dce6;
  --hero-shadow:0 4px 30px #000a;
  --halo-1:#e4202c1c;
  --halo-2:#ff5a2e12;
  --shadow-1:0 4px 16px -6px #000a;
  --shadow-2:0 24px 48px -18px #000e;
  /* equivalents figes de color-mix(), non supporte par la plupart des navigateurs de
     televiseurs connectes (Chrome < 111 / Safari < 16.2) : sans repli, ces deux fonds
     sont des declarations CSS invalides et disparaissent entierement. */
  --header-bg:#08090de0;
  --scrim-55:#08090d8c;
  /* icônes SVG : var() ne s'interprète pas DANS un data-URI, on stocke donc l'url() entière */
  --icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a0b3' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.2-3.2'/%3E%3C/svg%3E");
  --icon-caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a0b3' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  --accent:#e4202c;
  --accent-2:#8a0e16;
  --ok:#4ade80;
  --danger:#ff8095;
  --grad:linear-gradient(120deg,var(--accent),var(--accent-2));
  --glow:0 8px 24px -8px #e4202c66;

  --r-sm:9px; --r:14px; --r-lg:20px; --r-xl:26px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --header-h:76px;
  --topbar-h:0px;
  --offset:calc(var(--topbar-h) + var(--header-h));
  --gutter:clamp(16px,4vw,54px);
  --card-w:196px;
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:"Plus Jakarta Sans",system-ui,Segoe UI,Roboto,sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;transition:background .3s var(--ease),color .3s var(--ease);
}
body.no-scroll{overflow:hidden}
h1,h2,h3{letter-spacing:-.02em;line-height:1.15;font-weight:800}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:#fff}

body::before{
  content:"";position:fixed;inset:-20% 0 auto;height:60vh;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 60% at 20% 0%,var(--halo-1),transparent 70%),
             radial-gradient(50% 50% at 85% 10%,var(--halo-2),transparent 70%);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:999px;padding:13px 28px;
  font:inherit;font-size:.98rem;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .2s;
}
.btn.primary{background:var(--grad);color:#fff;box-shadow:var(--glow)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px #e4202c88}
.btn.ghost{background:var(--fill);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn.ghost:hover{background:var(--fill-2);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.55;cursor:wait;transform:none;box-shadow:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- 3. Bandeau d'annonce & en-tête ---------- */
#topbar{
  position:fixed;top:0;left:0;right:0;z-index:56;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:10px var(--gutter);background:var(--surface-2);border-bottom:1px solid var(--line);
  font-size:.85rem;color:var(--text);text-align:center;
}
#topbar[hidden]{display:none}
.topbar-cta{
  background:var(--grad);color:#fff;border:0;border-radius:999px;padding:6px 16px;
  font:inherit;font-weight:700;font-size:.8rem;cursor:pointer;white-space:nowrap;
}
#topbar-close{background:none;border:0;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer;padding:0 4px;margin-left:4px}
#topbar-close:hover{color:var(--text)}

/* Ciblé sur #nav et pas sur « header » tout court : ces règles épinglaient en haut de l'écran
   n'importe quelle balise <header> de la page (l'en-tête d'une page compte, par exemple). */
#nav{
  position:fixed;top:var(--topbar-h);left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:clamp(12px,2vw,30px);
  height:var(--header-h);padding:0 var(--gutter);
  transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s,top .3s var(--ease);
  border-bottom:1px solid transparent;
}
/* voile dégradé qui déborde sous l'en-tête : pas d'arête visible sur le hero */
#nav::before{
  content:"";position:absolute;top:0;right:0;left:0;bottom:-60px;inset:0 0 -60px;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--scrim) 35%,transparent);
  transition:opacity .35s var(--ease);
}
#nav.solid{
  background:var(--header-bg);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);box-shadow:0 10px 30px -22px #0009;
}
#nav.solid::before{opacity:0}

.logo{
  font-size:1.45rem;font-weight:800;letter-spacing:-.04em;text-decoration:none;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  flex-shrink:0;
}
.logo::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:3px;vertical-align:middle}

nav{display:flex;gap:4px;flex:1;min-width:0}
nav a{
  position:relative;color:var(--muted);text-decoration:none;
  font-size:.94rem;font-weight:600;white-space:nowrap;
  padding:9px 14px;border-radius:999px;transition:color .2s,background .2s;
}
nav a:hover{color:var(--text);background:var(--fill)}
nav a.active{color:var(--text);background:var(--fill-2)}
nav a.active::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:3px;
  width:16px;height:2.5px;border-radius:2px;background:var(--grad);
}

/* Onglet "Animés" : léger halo pulsant pour attirer l'œil sur la nouvelle section, tant qu'elle
   n'est pas encore la page active (une fois dessus, l'état actif suffit à se faire remarquer). */
nav a[data-filter="anime"]:not(.active){
  animation:nav-anime-glow 2.6s ease-in-out infinite;
}
@keyframes nav-anime-glow{
  0%,100%{box-shadow:0 0 0 0 #e4202c00;color:var(--muted)}
  50%{box-shadow:0 0 14px 3px #e4202c70;color:var(--text)}
}

#search{
  background-color:var(--fill);border:1px solid var(--line-2);color:var(--text);
  font:inherit;font-size:.92rem;padding:11px 16px 11px 38px;border-radius:999px;
  width:clamp(150px,20vw,280px);outline:none;transition:border-color .2s,background-color .2s;
  background-image:var(--icon-search);
  background-repeat:no-repeat;background-position:13px center;background-size:16px;
}
#search::placeholder{color:var(--faint)}
#search:focus{border-color:var(--accent);background-color:var(--fill-2)}

/* Suggestions de recherche (js/suggest.js) : position calculée en JS (pas de CSS relative/absolute
   fiable vu que #search change de forme sur plusieurs points de rupture, voir media queries plus bas) */
.search-suggest{
  position:fixed;z-index:60;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:0 18px 40px rgba(0,0,0,.45);overflow:hidden;
  display:flex;flex-direction:column;padding:6px;
}
.suggest-item{
  display:flex;align-items:center;gap:12px;padding:8px;border-radius:calc(var(--r-lg) - 6px);
  text-decoration:none;color:var(--text);
}
.suggest-item:hover,.suggest-item:focus-visible{background:var(--fill)}
.suggest-poster{width:36px;height:52px;border-radius:6px;flex:0 0 auto;background-color:var(--surface)}
.suggest-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.suggest-info b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suggest-info small{color:var(--muted);font-size:.78rem}

/* ---------- 4. Hero ---------- */
/* padding-top léger (pas var(--offset)) : .hero-trust, juste avant dans le flux normal,
   s'occupe déjà de dégager l'en-tête fixe — pas besoin de le refaire ici. */
#hero{
  position:relative;min-height:80vh;min-height:min(94vh,900px);   /* 1re valeur : repli pour les navigateurs sans min() */
  display:flex;align-items:flex-end;
  padding:24px var(--gutter) clamp(70px,10vh,130px);
  background-size:cover;background-position:center 18%;
}
#hero::before{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--scrim) 6%,var(--scrim-55) 42%,transparent 76%),
             linear-gradient(0deg,var(--scrim) 2%,transparent 52%);
}
/* Fond du slide en cours, posé par renderHero() : fondu croisé entre les titres plutôt qu'un
   cut instantané. z-index négatif : toujours sous le voile (::before) et le contenu, quel que
   soit l'ordre d'empilement par défaut des éléments ajoutés après le voile dans le DOM. */
.hero-bg{
  position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;
  background-image:var(--hero-backdrop);background-size:cover;background-position:center 18%;
  opacity:0;transition:opacity .6s var(--ease);
}
.hero-bg.on{opacity:1}
/* Bandeau de confiance : dans le flux normal, juste sous l'en-tête fixe (margin-top:var(--offset)
   la dégage, quelle que soit sa hauteur réelle) et avant #hero — ne peut donc jamais chevaucher
   le titre/synopsis du hero, contrairement à un positionnement en absolu par-dessus l'image. */
.hero-trust{
  margin-top:var(--offset);
  padding:18px var(--gutter) 0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.hero-trust span{
  background:var(--fill-2);border:1px solid var(--line-2);border-radius:999px;
  padding:6px 13px;color:var(--text);font-size:.78rem;font-weight:600;
  backdrop-filter:blur(6px);white-space:nowrap;
}
.hero-inner{max-width:680px;position:relative;z-index:1;animation:rise .7s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
.hero-inner h1{font-size:clamp(2.4rem,6vw,5rem);margin-bottom:18px;text-shadow:var(--hero-shadow)}
.hero-inner p{
  color:var(--hero-text);line-height:1.65;margin-bottom:30px;font-size:1.08rem;
  max-width:54ch;text-shadow:var(--hero-shadow);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hero-inner .btn+.btn{margin-left:12px}
.reco{color:var(--accent);font-weight:700;font-size:.85rem;letter-spacing:.02em;margin:-6px 0 14px}
.meta{
  color:var(--muted);font-size:.85rem;font-weight:600;letter-spacing:.02em;
  margin-bottom:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.meta .chip{
  background:var(--fill-2);border:1px solid var(--line-2);border-radius:999px;
  padding:4px 11px;color:var(--text);font-size:.78rem;backdrop-filter:blur(6px);
}
.meta .chip.star{color:#ffd166;border-color:#c8860a33;background:#f5b62426}

/* Indicateur de scroll : 70% des visiteurs ne voient jamais au-delà du premier écran
   (mesuré sur Analytics) — ce repère discret invite à continuer, et disparaît dès le
   premier scroll pour ne pas s'incruster. Pure CSS (::after), pas de DOM supplémentaire. */
#hero::after{
  content:"";position:absolute;left:50%;bottom:16px;z-index:2;
  width:26px;height:26px;transform:translateX(-50%);
  background-image:var(--icon-caret);background-repeat:no-repeat;
  background-position:center;background-size:22px;opacity:.75;
  animation:scrollCue 1.8s ease-in-out infinite;pointer-events:none;
  transition:opacity .3s;
}
@keyframes scrollCue{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}
body.scrolled #hero::after{opacity:0}

/* ---------- 5. Rangées & cartes ---------- */
main{padding:0 var(--gutter) 40px;position:relative;z-index:2}
main.home{margin-top:-70px}
main.no-hero{padding-top:calc(var(--offset) + 34px)}
.row{margin-bottom:clamp(26px,4vw,42px)}
.row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.row h2{font-size:clamp(1.02rem,1.5vw,1.25rem);margin-bottom:0;display:flex;align-items:center;gap:10px}
.row h2::before{content:"";width:4px;height:18px;border-radius:3px;background:var(--grad);flex-shrink:0}
.more-link{
  background:none;border:0;color:var(--muted);font:inherit;font-size:.85rem;font-weight:700;
  cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:2px;transition:color .2s;
}
.more-link:hover{color:var(--accent)}

/* Top 10 : grand numéro en contour, calé sur le bas de l'affiche.
   Le numéro est en absolu dans une zone réservée par le padding de l'item : il déborde juste
   assez pour passer DERRIÈRE l'affiche (z-index plus bas), sans jamais être rogné ni recouvrir le titre. */
/* Colonne réservée au numéro : il est collé à l'affiche (10px de respiration) mais jamais dessous,
   donc entièrement lisible quelle que soit la largeur du chiffre (« 1 » étroit comme « 10 » large). */
.row-top10{--rank-gap:clamp(62px,5.5vw,94px)}
/* l'accroche de défilement porte sur l'item entier, sinon elle colle l'affiche au bord
   et pousse le numéro hors de la zone visible */
.top10-item{position:relative;flex:0 0 auto;padding-left:var(--rank-gap);scroll-snap-align:start}
.top10-item .card{scroll-snap-align:none}
.top10-item .rank{
  position:absolute;left:0;top:0;z-index:0;
  width:calc(var(--rank-gap) - 10px);height:calc(var(--card-w) * 1.5);   /* = hauteur de l'affiche */
  display:flex;align-items:flex-end;justify-content:flex-end;
  font-size:clamp(3.8rem,7vw,6rem);font-weight:800;line-height:.72;font-style:italic;
  letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2.5px var(--muted);
  pointer-events:none;user-select:none;
}
.top10-item .card{position:relative;z-index:1}

/* Franchises & studios */
.studio-track{align-items:center}
.studio-tile{
  flex:0 0 210px;height:116px;border:0;border-radius:var(--r);background:#fff;
  display:grid;place-items:center;padding:22px 28px;cursor:pointer;box-shadow:var(--shadow-1);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.studio-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
/* max-height borné : les logos très larges et les logos carrés gardent une taille optique proche */
.studio-tile img{width:100%;height:100%;max-height:68px;object-fit:contain}

.back-link{
  background:none;border:0;color:var(--muted);font:inherit;font-weight:700;font-size:.92rem;
  cursor:pointer;margin-bottom:18px;display:inline-flex;align-items:center;gap:4px;transition:color .2s;
}
.back-link:hover{color:var(--accent)}
.studio-title{font-size:clamp(1.4rem,3vw,2.2rem);margin-bottom:22px;display:flex;align-items:center;gap:10px}
.studio-title::before{content:"";width:5px;height:24px;border-radius:3px;background:var(--grad);flex-shrink:0}

.track-wrap{position:relative;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter)}
.track{
  /* padding-top généreux : au survol/focus, l'affiche remonte (translateY) et grossit (scale),
     et son contour bleu déborde encore un peu plus — sans cette marge, overflow-x:auto (qui
     coupe aussi en haut/bas, pas seulement sur les côtés) rognait le haut de cet effet. */
  display:flex;gap:18px;overflow-x:auto;padding:20px 0 10px;
  scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;
  scroll-padding-left:var(--gutter);
}
.track::-webkit-scrollbar{display:none}

.arrow{
  position:absolute;top:calc((var(--card-w) * 1.5) / 2);transform:translateY(-50%);
  z-index:5;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--glass);backdrop-filter:blur(10px);color:var(--text);
  font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  opacity:0;transition:opacity .25s,transform .2s var(--ease),background .2s,color .2s;
  box-shadow:var(--shadow-1);
}
.arrow.left{left:calc(var(--gutter) - 20px)}
.arrow.right{right:calc(var(--gutter) - 20px)}
.arrow:hover{background:var(--accent);border-color:transparent;color:#fff;transform:translateY(-50%) scale(1.08)}
.track-wrap:hover .arrow{opacity:1}
.arrow:focus-visible{opacity:1}

.card{
  flex:0 0 var(--card-w);width:var(--card-w);
  cursor:pointer;scroll-snap-align:start;background:none;
  display:flex;flex-direction:column;gap:9px;
  color:inherit;text-decoration:none;   /* .card est un <a href> (lien crawlable par Google), pas un <div> */
}
.poster{
  position:relative;aspect-ratio:2/3;border-radius:var(--r);overflow:hidden;
  background:var(--surface-2) center/cover no-repeat;
  box-shadow:var(--shadow-1);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
/* Vraie balise <img loading="lazy"> plutôt qu'un background-image CSS : le navigateur ne
   charge l'affiche que si la carte entre dans (ou approche) le viewport, au lieu de
   télécharger toutes les affiches de toutes les rangées dès l'arrivée sur la page. Le
   fond défini sur .poster (couleur/dégradé) reste visible pendant le chargement. */
/* Visible par défaut, sans fondu : un fondu conditionné à l'évènement « load » laissait des
   affiches vides sur les navigateurs de télé qui ne le déclenchent pas pour toutes les images. */
.poster-img{
  position:absolute;top:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;
}
/* meme formule que .skeleton et .top10-item .rank, qui s'appuient deja sur --card-w */
@supports not (aspect-ratio:2/3){ .poster{height:calc(var(--card-w) * 1.5)} }
.poster::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,#000000a6,transparent 45%);
  opacity:0;transition:opacity .3s;
}
.card:hover .poster,.card:focus-visible .poster{
  transform:translateY(-8px) scale(1.035);
  box-shadow:var(--shadow-2),0 0 0 2px #ffffff26 inset;
}
.card:hover .poster::after{opacity:1}
.card b{
  font-size:.92rem;font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .2s;
}
.card:hover b{color:var(--accent)}
.card small{color:var(--muted);font-size:.78rem;font-weight:600;margin-top:-4px}

/* badges posés sur l'affiche : toujours sombres, quel que soit le thème */
.rate,.fav,.resume{
  position:absolute;top:9px;z-index:2;
  font-size:.72rem;font-weight:800;letter-spacing:.01em;
  background:#0a0b11bf;backdrop-filter:blur(6px);
  border:1px solid #ffffff1f;border-radius:999px;padding:4px 9px;
}
.rate{left:9px;color:#ffd166}
.fav{right:9px;color:#ff5d85;font-size:.82rem;padding:3px 8px}
/* Saison/épisode repris, posée par loadContinueWatching() : pas de vraie position de lecture
   possible (lecteur en iframe tierce), mais au moins savoir où on s'est arrêté avant de cliquer. */
.resume{bottom:9px;left:9px;top:auto;background:var(--grad);color:#fff;border-color:transparent}
.play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;opacity:0;transition:opacity .3s}
.play span{
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:#ffffffe6;color:#0b0d12;font-size:1.05rem;padding-left:3px;
  box-shadow:0 8px 24px #0009;transform:scale(.8);transition:transform .3s var(--ease);
}
.card:hover .play{opacity:1}
.card:hover .play span{transform:scale(1)}

/* Aperçu au survol (ordinateur, voir js/preview.js) : panneau flottant en position fixed (pas
   absolute, sinon il serait coupé par l'overflow-x:auto de .track) à côté de l'affiche survolée. */
.hover-preview{
  position:fixed;z-index:60;width:min(340px,calc(100vw - 16px));
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-2),0 0 0 1px var(--line);
  overflow:hidden;opacity:0;transform:translateY(4px) scale(.98);pointer-events:none;
  transition:opacity .1s linear,transform .1s var(--ease);
}
.hover-preview.on{opacity:1;transform:none;pointer-events:auto}
.hp-media{position:relative;aspect-ratio:16/9;background:var(--surface-2)}
.hp-video{position:absolute;inset:0}
.hp-video iframe{width:100%;height:100%;border:0;pointer-events:none}   /* clic traverse vers la carte, pas vers YouTube */
.hp-body{padding:14px 16px 16px}
.hp-body b{display:block;font-size:1rem;margin-bottom:4px}
.hp-meta{color:var(--muted);font-size:.78rem;font-weight:600;margin-bottom:8px}
.hp-desc{
  color:var(--hero-text);font-size:.85rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
@media (max-width:860px){ .hover-preview{display:none} }   /* filet en plus de (hover:hover) and (pointer:fine) en JS */

/* ---------- 6. Grille & filtres ---------- */
.grid{display:grid;gap:26px 18px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.grid .card{flex:none;width:auto}
.grid .empty{color:var(--muted);grid-column:1/-1;padding:40px 0}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.toolbar select,.src-ctrl select{
  appearance:none;-webkit-appearance:none;
  background-color:var(--fill);color:var(--text);border:1px solid var(--line-2);
  border-radius:999px;font:inherit;font-weight:600;cursor:pointer;outline:none;
  transition:border-color .2s,background-color .2s;
  background-image:var(--icon-caret);
  background-repeat:no-repeat;
}
.toolbar select{padding:10px 38px 10px 16px;font-size:.9rem;background-position:right 13px center;background-size:15px}
.toolbar select:hover{background-color:var(--fill-2)}
.toolbar select:focus,.src-ctrl select:focus{border-color:var(--accent)}
.toolbar select option,.src-ctrl select option{background:var(--surface-2);color:var(--text)}
.grid.browse{padding-top:22px}

.skeleton{
  height:calc(var(--card-w) * 1.5);margin-bottom:34px;border-radius:var(--r);
  background:
    linear-gradient(90deg,transparent 0,var(--shimmer) 45%,transparent 90%) 0 0/200% 100% no-repeat,
    repeating-linear-gradient(90deg,var(--skeleton) 0 var(--card-w),transparent var(--card-w) calc(var(--card-w) + 14px));
  animation:sk 1.4s linear infinite;
}
@keyframes sk{to{background-position:-200% 0,0 0}}

.sentinel{text-align:center;color:var(--muted);font-size:.88rem;padding:34px 0 56px;min-height:64px}
.more{display:block;margin:24px auto 40px}

/* ---------- 7. Fiche & lecteur ---------- */
#modal{
  position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:60;padding:clamp(0px,3vw,28px);
  background:var(--backdrop);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;animation:fade .25s var(--ease);
}
#modal.hidden,#auth.hidden,.acc-menu.hidden,.ann-menu.hidden{display:none}
@keyframes fade{from{opacity:0}}
/* Fondu de sortie (classe posée par closeDialog() le temps de l'animation, avant .hidden) :
   sans ça l'ouverture est animée mais la fermeture coupe d'un coup, asymétrique. */
#modal.closing,#auth.closing{animation:fadeOut .2s var(--ease) forwards}
@keyframes fadeOut{to{opacity:0}}
.modal-box{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);max-width:940px;width:100%;max-height:94vh;
  overflow:auto;position:relative;box-shadow:var(--shadow-2);
  scrollbar-width:thin;animation:pop .35s var(--ease);
  -webkit-overflow-scrolling:touch;   /* défilement avec inertie sur Safari iOS, sinon saccadé */
}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.98)}}
.closing .modal-box,.closing .auth-box{animation:popOut .2s var(--ease) forwards}
@keyframes popOut{to{opacity:0;transform:translateY(14px) scale(.97)}}
.modal-box::-webkit-scrollbar{width:10px}
.modal-box::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px;border:3px solid var(--surface)}
#close{
  position:absolute;top:14px;right:14px;z-index:6;
  width:44px;height:44px;border-radius:50%;border:1px solid #ffffff24;   /* 44px : zone tactile minimale recommandée (Apple HIG) */
  background:#0a0b11b3;backdrop-filter:blur(10px);color:#fff;
  font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .2s,transform .2s;
}
#close:hover{background:var(--accent);border-color:transparent;transform:rotate(90deg)}

#player{position:relative;background:#000;border-radius:var(--r-xl) var(--r-xl) 0 0;overflow:hidden}
.yt,#player video{width:100%;aspect-ratio:16/9;border:0;display:block;background:#000}
/* En plein écran natif (déclenché automatiquement au lancement de la lecture), le conteneur
   remplit tout l'écran : l'iframe doit suivre en hauteur plutôt que garder son ratio 16/9
   fixe, sinon des bandes noires apparaissent au-dessus/dessous sur un écran plus haut. */
#player:fullscreen{border-radius:0;display:flex}
#player:fullscreen .yt{height:100%;aspect-ratio:auto}
#player:-webkit-full-screen{border-radius:0;display:flex}
#player:-webkit-full-screen .yt{height:100%;aspect-ratio:auto}
.trailer-msg{aspect-ratio:16/9;display:grid;place-items:center;background:#000 center/cover;color:#98a0b3;position:relative}
.player-unsupported{padding:28px;text-align:center}
.player-unsupported strong{display:block;color:#fff;font-size:1.1rem;margin-bottom:10px}
.player-unsupported p{max-width:46ch;margin:0 auto 18px;line-height:1.6;font-size:.92rem}

/* Lueur animée autour du lecteur tant que rien n'est encore lancé (palier pub, vérif des
   sources…), posée/retirée par setupPlayer()/injectEmbed() dans modal.js. */
#player.tp-loading{animation:tpGlowPulse 2.4s ease-in-out infinite}
@keyframes tpGlowPulse{
  0%,100%{box-shadow:0 30px 80px -30px #000,inset 0 0 0 1px var(--line-2),0 0 22px 1px #e4202c4d}
  50%{box-shadow:0 30px 80px -30px #000,inset 0 0 0 1px var(--line-2),0 0 46px 10px #e4202cb3}
}
/* Extinction en fondu doux de la lueur, une fois la séquence du lecteur tiers censée être
   terminée (voir PLAYER_WARMUP_MS dans modal.js) — pas un flash, une disparition tranquille. */
#player.tp-fade{animation:tpGlowFadeOut 2.6s ease forwards}
@keyframes tpGlowFadeOut{
  0%{box-shadow:0 30px 80px -30px #000,inset 0 0 0 1px var(--line-2),0 0 46px 10px #e4202cb3}
  100%{box-shadow:0 30px 80px -30px #000,inset 0 0 0 1px var(--line-2),0 0 0 0 #e4202c00}
}

/* Écran de « déverrouillage » du palier publicitaire : remplace l'affiche par un fond
   sombre neutre (dégradé radial, pas de photo) pour mettre la carte en avant, comme un
   vrai palier d'accès plutôt qu'un bandeau posé sur le poster. */
.ad-gate-screen{
  background:radial-gradient(ellipse 70% 60% at 50% 30%,#0f2a3a 0%,#0a1420 55%,var(--bg) 100%);
}
.ad-gate{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  max-width:420px;margin:0 auto;padding:12px;position:relative;z-index:1;
}
.ad-gate-badge{
  display:inline-flex;align-items:center;gap:7px;background:#e4202c24;border:1px solid #e4202c45;
  color:var(--accent);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;
}
.ad-gate-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.ad-gate-title{font-size:clamp(1.25rem,3vw,1.6rem);font-weight:800;text-transform:uppercase;letter-spacing:.01em;color:#fff;margin:2px 0 0}
.ad-gate-desc{font-size:.92rem;line-height:1.55;color:#e4e7f0;margin:0;max-width:38ch}
.ad-gate-note{font-size:.78rem;line-height:1.6;color:#9aa0b4;margin:0;max-width:42ch}
.ad-gate-note b{color:var(--text);font-weight:800}
.ad-gate-progress{display:flex;align-items:center;gap:12px;width:100%;max-width:340px;margin-top:4px}
.ad-gate-progress strong{font-size:1rem;font-weight:800;color:#fff;white-space:nowrap}
.ad-progress-bar{height:6px;border-radius:999px;background:#ffffff1a;overflow:hidden;display:block;flex:1}
.ad-progress-bar span{display:block;height:100%;background:var(--grad);box-shadow:var(--glow);transition:width .3s var(--ease)}
.ad-gate-steps{display:flex;gap:6px;width:100%;max-width:340px}
.ad-gate-steps span{flex:1;height:4px;border-radius:999px;background:#ffffff1a;transition:background .25s var(--ease)}
.ad-gate-steps span.done{background:var(--grad)}
.ad-gate-btn{width:100%;max-width:340px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.95rem;margin-top:4px}
.ad-gate-btn svg{width:15px;height:15px}
.ad-gate-footer{font-size:.78rem;color:#767c90;margin:2px 0 0}
@supports not (aspect-ratio:16/9){
  #player{box-sizing:content-box;height:0;padding-top:56.25%}
  .yt,#player video,.trailer-msg{position:absolute;inset:0;top:0;right:0;bottom:0;left:0;width:100%;height:100%}
}
.play-ph::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000000d9,#00000055)}
.play-ph .btn{position:relative;z-index:1}

.src-ctrl{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:18px 72px 14px clamp(18px,3vw,30px);color:var(--muted);font-size:.85rem;font-weight:600;
}
.src-ctrl select{padding:9px 34px 9px 14px;font-size:.88rem;background-position:right 12px center;background-size:14px}
.src-ctrl input{
  background:var(--fill);color:var(--text);border:1px solid var(--line-2);
  border-radius:999px;padding:9px 14px;font:inherit;font-size:.88rem;font-weight:600;outline:none;
  width:62px;text-align:center;transition:border-color .2s;
}
.src-ctrl input:focus{border-color:var(--accent)}
.src-ctrl .btn{margin-left:auto;padding:9px 18px;font-size:.85rem}
/* Sélecteur de source mis en valeur : plusieurs prestataires, aucun catalogue complet
   (voir le cas "Runner") — on attire l'œil dessus pour qu'il soit vu avant même qu'un
   titre échoue, pas seulement via le bandeau de repli après coup. */
.src-ctrl select.src-highlight{
  border-color:var(--accent);background-color:#e4202c14;color:var(--accent);
  box-shadow:0 0 0 3px #e4202c24;font-weight:800;
}
.src-ctrl select.src-highlight:hover{background-color:#e4202c1f}
.src-tip{
  flex-basis:100%;margin:2px 0 0;font-size:.78rem;font-weight:500;color:var(--muted);
}
.src-tip strong{color:var(--accent);font-weight:800}

/* Sélecteur d'épisode (séries) : un bouton ouvre une vraie liste avec vignettes et résumés
   (voir le panneau .ep-* dans modal.js), plutôt que de choisir saison puis épisode séparément. */
.ep-trigger{
  background:var(--fill);border:1px solid var(--line-2);border-radius:999px;color:var(--text);
  padding:9px 16px;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;transition:border-color .2s;
}
.ep-trigger:hover{border-color:var(--accent)}
.ep-overlay{
  display:none;position:fixed;inset:0;z-index:75;background:var(--backdrop);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:clamp(0px,3vw,28px);
}
.ep-overlay.open{display:flex}
.ep-panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  width:100%;max-width:640px;max-height:84vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:var(--shadow-2);
}
.ep-panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.ep-panel-head h2{font-size:1.15rem}
.ep-close{background:none;border:0;color:var(--muted);font-size:1.6rem;line-height:1;cursor:pointer;padding:4px}
.ep-seasons{display:flex;gap:6px;padding:14px 20px 0;overflow-x:auto;flex-shrink:0}
.ep-seasons button{
  border:0;background:var(--fill);color:var(--muted);font:inherit;font-size:.84rem;font-weight:700;
  padding:7px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s;
}
.ep-seasons button.on{background:var(--grad);color:#fff;box-shadow:var(--glow)}
.ep-list{overflow-y:auto;padding:14px 10px 18px}
.ep-loading{color:var(--faint);padding:20px;text-align:center;font-size:.9rem}
.ep-item{
  display:flex;gap:12px;width:100%;text-align:left;background:none;border:0;border-radius:var(--r-lg);
  padding:10px;cursor:pointer;color:var(--text);transition:background .15s;
}
.ep-item:hover{background:var(--fill)}
.ep-item.active{background:#e4202c14;box-shadow:inset 0 0 0 1px var(--accent)}
.ep-thumb{
  flex-shrink:0;width:120px;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;background:var(--fill);
}
.ep-thumb img{width:100%;height:100%;object-fit:cover}
.ep-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.ep-title{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ep-title b{font-size:.92rem}
.ep-title small{color:var(--muted);font-size:.76rem;font-weight:600}
.ep-overview{color:var(--muted);font-size:.8rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:700px){
  .ep-overlay{padding:0;align-items:flex-end}
  .ep-panel{max-width:none;max-height:88vh;border-radius:var(--r-xl) var(--r-xl) 0 0}
  .ep-thumb{width:96px}
}

.info{padding:20px clamp(18px,3vw,30px) 30px}
.info h2{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:10px}
.info>p{color:#ccd2de;line-height:1.65;margin:14px 0 18px;max-width:74ch}
#details .meta{margin:8px 0;display:block;color:var(--muted);font-size:.88rem;font-weight:500}
#details .meta b{color:var(--text);font-weight:700}
#details .row{margin:26px 0 6px}
#details .row h2{font-size:1rem}
#details .track-wrap{margin:0;padding:0}
#details{--card-w:124px}
#details .arrow{display:none}
#favbtn{margin-top:20px}

#telegram-link{
  flex-shrink:0;display:flex;align-items:center;border-radius:50%;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
#telegram-link svg{display:block}
#telegram-link:hover{transform:translateY(-2px);box-shadow:var(--glow)}

/* Cloche des nouveautés (voir js/announcements.js) : reprend les annonces Discord du lecteur. */
#ann{position:relative;flex-shrink:0}
#ann-toggle{
  position:relative;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:var(--fill-2);color:var(--text);
  transition:transform .2s var(--ease),background .2s;
}
#ann-toggle:hover{transform:translateY(-2px);background:var(--fill)}
#ann-dot{
  position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--grad);box-shadow:0 0 0 2px var(--surface);
  display:flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:800;color:#fff;line-height:1;
}
/* Halo pulsant tant qu'il reste des nouveautés non vues (même principe que l'onglet "Animés" du
   menu) : s'arrête dès que le panneau est ouvert (paintBadge retire la classe via markRead). */
#ann-toggle.has-unread{animation:ann-bell-glow 2.2s ease-in-out infinite}
@keyframes ann-bell-glow{
  0%,100%{box-shadow:0 0 0 0 #e4202c00}
  50%{box-shadow:0 0 14px 4px #e4202c70}
}
.ann-menu{
  position:absolute;right:0;top:52px;min-width:300px;max-width:360px;z-index:50;
  background:var(--glass);backdrop-filter:blur(20px);
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:8px;
  box-shadow:var(--shadow-2);animation:pop .22s var(--ease);
  max-height:70vh;overflow-y:auto;transform-origin:top right;
}
/* Fermeture (cloche recliquée, bouton ×, scroll, Échap…) : même principe que .closing sur
   #modal/#auth (closeDialog dans utils.js), un fondu + léger repli vers la cloche plutôt
   qu'une disparition brute. */
.ann-menu.closing{animation:annOut .2s var(--ease) forwards;pointer-events:none}
@keyframes annOut{to{opacity:0;transform:translateY(-10px) scale(.94)}}
.ann-head{
  padding:8px 10px 10px;font-weight:800;font-size:.9rem;border-bottom:1px solid var(--line);margin-bottom:4px;
  display:flex;align-items:center;justify-content:space-between;
}
#ann-close{
  background:none;border:0;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer;
  padding:0 2px;transition:color .2s,transform .2s;
}
#ann-close:hover{color:var(--text);transform:rotate(90deg)}
.ann-empty{color:var(--muted);font-size:.86rem;padding:14px 10px}
.ann-item{
  display:flex;align-items:flex-start;gap:10px;text-decoration:none;color:var(--text);
  padding:9px 10px;border-radius:var(--r-sm);transition:background .18s;
}
.ann-item:hover{background:var(--fill-2)}
.ann-poster{
  flex-shrink:0;width:42px;aspect-ratio:2/3;object-fit:cover;border-radius:6px;background:var(--fill-2);
}
.ann-poster-ph{background:var(--grad)}
.ann-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.ann-item b{font-size:.9rem;font-weight:700}
.ann-item small{color:var(--muted);font-size:.78rem}
.ann-toast{text-decoration:none;display:inline-block;max-width:min(86vw,440px);text-align:left}

/* ---------- 8. Compte ---------- */
#account{position:relative;display:flex;gap:8px;align-items:center;flex-shrink:0}
.acc-btn{padding:9px 18px;font-size:.88rem}
.avatar{
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:var(--grad);color:#fff;font:inherit;font-weight:800;font-size:1rem;
  box-shadow:var(--glow);transition:transform .2s var(--ease);
}
.avatar:hover{transform:scale(1.07)}
.acc-menu{
  position:absolute;right:0;top:52px;min-width:238px;z-index:50;
  background:var(--glass);backdrop-filter:blur(20px);
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:8px;
  box-shadow:var(--shadow-2);display:flex;flex-direction:column;gap:2px;
  animation:pop .22s var(--ease);
}
.acc-who{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acc-who b{font-size:.95rem}
.acc-who small{color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis}
.acc-menu a,.acc-menu button{
  background:none;border:0;color:var(--text);text-align:left;text-decoration:none;
  padding:10px 12px;border-radius:var(--r-sm);font:inherit;font-size:.9rem;font-weight:600;
  cursor:pointer;transition:background .18s;
  display:flex;align-items:center;gap:11px;
}
.acc-menu a:hover,.acc-menu button:hover{background:var(--fill-2)}
.acc-menu a svg,.acc-menu button svg,.acc-premium svg{width:17px;height:17px;flex-shrink:0;color:var(--muted)}
.acc-menu .danger{color:var(--danger)}
.acc-menu .danger:hover{background:#dc2a4e1a}
.acc-menu .danger svg{color:var(--danger)}
.acc-premium{
  padding:10px 12px;border-radius:var(--r-sm);font-size:.9rem;font-weight:700;color:#ffd166;background:#f5b62426;
  display:flex;align-items:center;gap:11px;
}
.acc-premium svg{color:#ffd166}

/* ---------- Pages compte & support (abonnement, paramètres, contact, bug, idée) ----------
   Gabarit commun posé par pageShell() dans browse.js : même largeur, même en-tête, mêmes cartes. */
.page{max-width:620px;margin:0 auto;padding:8px 0 64px}
.page-head{text-align:center;margin-bottom:26px}
.page-badge{
  display:inline-block;background:var(--fill-2);border:1px solid var(--line-2);border-radius:999px;
  padding:6px 16px;color:#ffd166;font-size:.8rem;font-weight:700;margin-bottom:16px;
}
.page-head h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:14px}
.page-lead{color:var(--muted);line-height:1.65;max-width:52ch;margin:0 auto}
.page-body{display:flex;flex-direction:column;gap:16px}
.page-card{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;
}
.page-card > b{font-size:1.02rem}
.page-card p{color:var(--muted);line-height:1.6}
.page-card .btn{align-self:stretch;justify-content:center}
.page-card-soft{background:var(--fill);border-style:dashed}
.page-card-danger{border-color:#dc2a4e40}
.danger-btn{color:var(--danger);box-shadow:inset 0 0 0 1px #dc2a4e55}
.danger-btn:hover{background:#dc2a4e1a}
.state-ok{color:#ffd166;font-weight:700}

/* Avantages (page abonnement) */
.perks{list-style:none;display:flex;flex-direction:column;gap:12px}
.perks li{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 20px;display:flex;flex-direction:column;gap:3px;
}
.perks b{font-size:.96rem}
.perks span{color:var(--muted);font-size:.9rem;line-height:1.55}
.tips{list-style:none;display:flex;flex-direction:column;gap:8px}
.tips li{color:var(--muted);font-size:.9rem;line-height:1.55;padding-left:16px;position:relative}
.tips li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* Fiche d'informations (paramètres) */
.info-list{display:flex;flex-direction:column;gap:12px;width:100%}
.info-list > div{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.info-list dt{color:var(--muted);font-size:.86rem;font-weight:600}
.info-list dd{font-size:.94rem;font-weight:700;text-align:right;word-break:break-word}

/* Tableau simple (page stats affiliés) */
.aff-table{width:100%;border-collapse:collapse;font-size:.92rem}
.aff-table th{text-align:left;color:var(--muted);font-weight:600;font-size:.82rem;padding:0 10px 10px}
.aff-table td{padding:10px;border-top:1px solid var(--line)}
.aff-table td:nth-child(2){font-weight:700}

.muted{color:var(--muted)}

/* Résultats de recherche + mes demandes (page Demander un titre) */
.req-results{display:flex;flex-direction:column;gap:8px;width:100%}
.req-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--r-sm);background:var(--fill)}
.req-item img{width:40px;aspect-ratio:2/3;object-fit:cover;border-radius:6px;flex-shrink:0}
.req-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.req-item-info b{font-size:.9rem}
.req-item-info small{color:var(--muted);font-size:.78rem}
.req-list{list-style:none;width:100%;display:flex;flex-direction:column;gap:2px}
.req-list li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:.92rem}
.req-list li:first-child{border-top:none}
.req-status{font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--fill-2);color:var(--muted);white-space:nowrap}
.req-status.req-pending{color:#ffd166}
.req-status.req-in_progress{color:var(--accent)}
.req-status.req-done{color:var(--ok)}
.req-status.req-rejected{color:var(--danger)}

/* Formulaires des pages (message, mot de passe) */
.msg-form{width:100%}
.msg-form .opt{color:var(--faint);font-weight:500}
.form-actions{display:flex;gap:10px;flex-wrap:wrap}
.form-actions .btn{flex:1;min-width:150px;justify-content:center}
.form-note{color:var(--danger);font-size:.86rem;font-weight:600;min-height:1.3em;margin-bottom:10px}
.form-note.ok{color:var(--ok)}
#auth{
  position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:80;padding:18px;
  background:var(--backdrop);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;animation:fade .25s var(--ease);
}
.auth-box{
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-xl);width:100%;max-width:420px;padding:26px 28px 22px;
  position:relative;box-shadow:var(--shadow-2);animation:pop .35s var(--ease);overflow:hidden;
}
.auth-box::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
#auth-close{
  position:absolute;top:14px;right:16px;background:none;border:0;color:var(--muted);
  font-size:1.6rem;line-height:1;cursor:pointer;transition:color .2s,transform .2s;
}
#auth-close:hover{color:var(--text);transform:rotate(90deg)}
.auth-tabs{display:flex;gap:4px;margin:8px 36px 22px 0;background:var(--fill);padding:4px;border-radius:999px}
.auth-tabs button{
  flex:1;background:none;border:0;color:var(--muted);
  padding:10px;border-radius:999px;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;
  transition:background .25s var(--ease),color .2s;
}
.auth-tabs button.on{background:var(--grad);color:#fff;box-shadow:var(--glow)}
#auth-form h2{font-size:1.4rem;margin-bottom:18px}
#auth-form label,.msg-form label{display:block;color:var(--muted);font-size:.82rem;font-weight:600;margin-bottom:14px}
#auth-form label[hidden]{display:none}
#auth-form input,.msg-form input,.msg-form textarea{
  display:block;width:100%;margin-top:6px;
  background:var(--fill);border:1px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--text);padding:12px 14px;font:inherit;font-size:.98rem;outline:none;
  transition:border-color .2s,background .2s;
}
.msg-form textarea{resize:vertical;min-height:130px;line-height:1.55}
#auth-form input:focus,.msg-form input:focus,.msg-form textarea:focus{border-color:var(--accent);background:var(--fill-2)}
#auth-error{color:var(--danger);font-size:.86rem;font-weight:600;min-height:1.3em;margin-bottom:10px}
#auth-error.ok{color:var(--ok)}
#auth-submit{width:100%;margin:0}
.auth-note{color:var(--faint);font-size:.76rem;margin-top:16px;text-align:center}

/* ---------- 9. Divers ---------- */
.notice{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:90;
  background:#2a2112ee;border:1px solid #ffd16633;color:#ffd79a;
  padding:12px 20px;border-radius:999px;font-size:.85rem;font-weight:600;box-shadow:var(--shadow-2);
}
footer{
  color:var(--faint);font-size:.8rem;line-height:1.7;
  padding:48px var(--gutter) 32px;border-top:1px solid var(--line);margin-top:20px;
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:30px}
.footer-col .logo{margin-bottom:12px;display:inline-block}
.footer-col p{color:var(--muted);font-size:.85rem;line-height:1.65;max-width:42ch}
.footer-col h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text);margin-bottom:12px;font-weight:800}
.footer-col a{display:block;color:var(--muted);text-decoration:none;font-size:.88rem;margin-bottom:9px;transition:color .2s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{color:var(--faint);font-size:.78rem;border-top:1px solid var(--line);padding-top:18px}

/* ---------- 10. Responsive ----------
   --header-h est mesurée en JS (trackHeaderHeight) : l'en-tête passe sur deux ou
   trois lignes selon la largeur, et tout ce qui se cale sur --offset passerait
   dessous si on figeait la valeur. Les --header-h ci-dessous ne sont qu'un repli
   avant la première mesure. */

/* Hauteurs en svh quand c'est disponible : sur mobile, 100vh inclut la barre
   d'URL rétractable et déborde donc de l'écran. */
#hero{min-height:80vh;min-height:min(94vh,900px)}
@supports(height:100svh){ #hero{min-height:min(94svh,900px)} }
.modal-box{max-height:94vh}
@supports(height:100svh){ .modal-box{max-height:94svh} }

/* --- Grands écrans & téléviseurs ---
   On élargit les affiches plutôt que d'en empiler toujours plus : à 4K, une
   grille à pas fixe donne des vignettes illisibles à trois mètres de distance. */
@media(min-width:1600px){
  :root{--card-w:224px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(204px,1fr))}
}
@media(min-width:2000px){
  :root{--card-w:280px;--gutter:clamp(54px,4.5vw,130px)}
  body{font-size:18px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:34px 24px}
  .studio-tile{flex:0 0 272px;height:150px}
  .studio-tile img{max-height:88px}
  .modal-box{max-width:1180px}
}

/* --- Pointeur grossier / absent (tactile, télécommande) ---
   Rien d'essentiel ne doit dépendre du survol : sur ces appareils il n'existe pas. */
@media(hover:none){
  .play{display:none}
  .arrow{display:none}
  .card:hover .poster{transform:none;box-shadow:var(--shadow-1)}
}

/* Navigation au clavier et à la télécommande : le focus doit se voir de loin. */
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.card:focus-visible .poster{transform:translateY(-6px) scale(1.03);box-shadow:var(--shadow-2),0 0 0 3px var(--accent)}
.card:focus-visible .play{opacity:1}
.card:focus-visible .play span{transform:scale(1)}
.studio-tile:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-2)}
/* la carte focalisée ne doit pas rester coincée au bord du carrousel */
.track{scroll-padding-inline:var(--gutter)}

/* --- Paliers intermédiaires --- */
@media(max-width:1280px){ :root{--card-w:184px} }
@media(max-width:1000px){ :root{--card-w:172px} }

/* --- Tablette et dessous : l'en-tête se réorganise en lignes --- */
@media(max-width:1180px){
  :root{--header-h:108px}
  #nav{flex-wrap:wrap;height:auto;padding:10px var(--gutter);row-gap:9px;column-gap:10px}
  .logo{order:0;font-size:1.25rem}
  #ann{order:1;margin-left:auto}
  #telegram-link{order:1}
  #account{order:2}
  #search{order:3;flex:1 1 100%;width:auto;min-width:0}
  nav{
    order:4;flex-basis:100%;overflow-x:auto;gap:2px;padding-bottom:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  }
  nav::-webkit-scrollbar{display:none}
  nav a{padding:8px 13px;font-size:.88rem}
  /* l'en-tête s'escamote au défilement vers le bas (voir tuckHeader) : sur deux ou
     trois lignes il mangerait sinon un sixième de l'écran en permanence */
  #nav{transition:transform .28s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
  #nav.tucked{transform:translateY(calc(-100% - var(--topbar-h)))}
  main.home{margin-top:-28px}
  main.no-hero{padding-top:calc(var(--offset) + 30px)}
  .arrow{display:none}
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:28px}
  .footer-col:first-child{grid-column:1/-1}
}

/* --- Téléphones --- */
@media(max-width:560px){
  :root{--card-w:142px;--header-h:104px}
  #topbar{font-size:.78rem;padding:7px 12px;gap:8px;line-height:1.35}
  .topbar-cta{padding:5px 13px;font-size:.75rem}
  .grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:22px 14px}
  .studio-tile{flex:0 0 164px;height:94px;padding:16px 22px}
  .studio-tile img{max-height:46px}
  .acc-btn.ghost{display:none}
  .acc-btn{padding:8px 15px;font-size:.84rem}
  /* Hero : affiche verticale en carte, plutôt qu'un fond large recadré au centre qui, sur un
     écran étroit, ne montre plus qu'une bande illisible de l'image (affiches « brouillon »,
     illisibles). #hero::before, qui sert de voile dégradé par-dessus le fond en version large,
     est réutilisé ici comme simple réservateur d'espace en flux normal pour la carte (plus
     besoin de voile : le texte n'est plus posé sur l'image). */
  #hero{min-height:auto;display:block;background:none;padding:18px var(--gutter) 28px}
  #hero::before{
    position:static;inset:auto;pointer-events:auto;background:none;
    content:"";display:block;width:min(70vw,280px);aspect-ratio:2/3;margin:0 auto 18px;
  }
  #hero::after{display:none}   /* indicateur de scroll : plus nécessaire, le hero n'occupe plus tout l'écran */
  .hero-bg{
    inset:auto;top:18px;left:50%;right:auto;bottom:auto;transform:translateX(-50%);
    width:min(70vw,280px);aspect-ratio:2/3;
    background-image:var(--hero-poster);background-position:center;
    border-radius:var(--r-xl);box-shadow:var(--shadow-2);
  }
  .hero-content{position:relative;z-index:1}
  .hero-inner{max-width:none;text-align:center;margin:0 auto}
  .meta{justify-content:center}
  .hero-inner h1{font-size:clamp(1.6rem,7vw,2.1rem);margin-bottom:10px}
  .reco{text-align:center}
  .hero-inner p{-webkit-line-clamp:2;font-size:.95rem;max-width:46ch;margin-left:auto;margin-right:auto}
  .hero-inner .btn{padding:12px 22px;font-size:.92rem}
  .footer-grid{grid-template-columns:1fr}
  .footer-col:first-child{grid-column:auto}
  /* la fiche occupe tout l'écran : une boîte centrée avec marges gaspille la place */
  #modal{padding:0;align-items:stretch}
  .modal-box{border-radius:0;max-height:100%;height:100%}
  #player{border-radius:0}
  /* .tp-stage .src-ctrl>* (règle 13, non limitée au mobile) remet margin à 0 4px avec la même
     spécificité à poids égal mais plus loin dans le fichier : on doit préciser .tp-stage ici
     aussi pour que ce marge-haut gagne vraiment, pas juste width/order. */
  .tp-stage .src-ctrl .src-next{margin-left:0;margin-top:10px;width:100%;order:9}
  .auth-box{padding:24px 20px 20px}
}

/* --- Très petits écrans : les deux boutons du hero passent l'un sous l'autre --- */
@media(max-width:380px){
  :root{--card-w:132px}
  .hero-inner .btn{width:100%;justify-content:center}
  .hero-inner .btn+.btn{margin-left:0;margin-top:10px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
}

/* --- Téléphone à l'horizontale : la hauteur est la ressource rare --- */
@media(max-height:560px) and (orientation:landscape){
  .hero-trust{display:none}   /* hauteur rare : pas la place pour un bandeau en plus du hero */
  #hero{min-height:auto;padding-top:18px;padding-bottom:56px}
  .hero-inner h1{font-size:clamp(1.6rem,5vw,2.4rem);margin-bottom:10px}
  .hero-inner p{-webkit-line-clamp:2;margin-bottom:18px}
  main.home{margin-top:-20px}
  .modal-box{max-height:100%}
}

/* --- Téléviseurs : lisibilité depuis le canapé ---
   Un téléviseur 4K déclare souvent la même largeur CSS (1920px) qu'un moniteur de bureau :
   la largeur seule ne permet pas de le distinguer. Ce qui le distingue vraiment, c'est
   l'absence de souris (hover:none) et un pointeur grossier (pointer:coarse, télécommande/
   D-pad), combinés à un grand écran. On s'en sert pour grossir texte, cartes et cibles de
   focus en vue d'une lecture à trois mètres plutôt qu'à cinquante centimètres. */
@media(hover:none) and (pointer:coarse) and (min-width:1200px){
  :root{--card-w:248px;--gutter:clamp(48px,4.5vw,110px)}
  body{font-size:19px}
  .hero-inner{max-width:780px}
  .hero-inner h1{font-size:clamp(3rem,5.5vw,5.6rem)}
  .hero-inner p{font-size:1.18rem;max-width:60ch}
  .btn{padding:16px 34px;font-size:1.08rem}
  .logo{font-size:1.65rem}
  nav a{font-size:1.04rem;padding:12px 19px}
  #search{font-size:1rem;padding:13px 18px 13px 42px}
  .row h2{font-size:clamp(1.2rem,1.6vw,1.55rem)}
  .more-link,.toolbar select{font-size:1rem}
  .avatar{width:46px;height:46px;font-size:1.1rem}
  /* la télécommande ne pointe pas, elle déplace le focus : l'anneau doit se voir de loin */
  :focus-visible{outline-width:4px;outline-offset:6px}
  .card:focus-visible .poster{transform:translateY(-8px) scale(1.045);box-shadow:var(--shadow-2),0 0 0 4px var(--accent)}
  .studio-tile:focus-visible{outline-offset:3px}
}
@media(hover:none) and (pointer:coarse) and (min-width:1800px){
  :root{--card-w:292px}
  body{font-size:21px}
  .hero-inner{max-width:880px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---------- 11. Structure « vraies pages » : menu en pilule, Films/Séries, Sans pub ---------- */

/* Menu en pilule : tous les onglets dans une capsule, l'onglet actif plein couleur. Réservé à
   l'ordinateur (voir @media ci-dessous) : son flex:none, sans condition, écrasait jusqu'ici le
   flex-basis:100%/overflow-x:auto du menu mobile (même spécificité, mais plus loin dans le
   fichier donc gagnant) — le menu débordait alors de l'écran sans pouvoir être fait défiler. */
@media(min-width:1181px){
  nav{
    flex:none;margin-right:auto;align-items:center;
    padding:5px;border-radius:999px;
    background:var(--fill);box-shadow:inset 0 0 0 1px var(--line-2);
  }
}
nav a.active{background:var(--grad);color:#fff;box-shadow:var(--glow)}
nav a.active::after{display:none}
nav a.nav-pub{display:inline-flex;align-items:center;color:var(--accent)}
nav a.nav-pub svg{margin-right:6px;flex-shrink:0}
nav a.nav-pub.active{color:#fff}
#nav.solid{background:var(--header-bg)}

/* Identité par section (Films/Séries) : avant, les deux pages partageaient exactement le
   même bloc d'en-tête bleu, texte mis à part — fait trop "clone générique". Chaque section a
   maintenant sa propre teinte (--page-accent) et son propre petit motif, posés via une classe sur
   <body> (page-films/page-series, voir render() dans browse.js pour le nettoyage). */
body.page-films{--page-accent:#f5a524;--page-accent-2:#ff6b35;--page-glow:0 8px 28px -10px #f5a52466}
body.page-series{--page-accent:#17c3b2;--page-accent-2:#0ea5a0;--page-glow:0 8px 28px -10px #17c3b266}

/* ---------- Catalogue unifié (Films + Séries + Animés) : filtres en colonne + grille, plutôt
   qu'une seule grille avec une barre de filtres au-dessus — vraie structure à part, pas juste
   l'accueil repeint. Tiroir plein écran sous 900px (voir .catalog-filters.open). */
.catalog-layout{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start}
.catalog-filters{
  position:sticky;top:calc(var(--offset) + 14px);display:flex;flex-direction:column;gap:22px;
  padding:20px;border-radius:var(--r-lg);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);
  max-height:calc(100vh - var(--offset) - 28px);overflow-y:auto;
}
.cf-head{display:flex;align-items:center;justify-content:space-between}
.cf-head h2{font-size:1.1rem}
.cf-head-actions{display:flex;align-items:center;gap:12px}
.cf-reset{background:none;border:0;color:var(--accent);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.cf-reset:hover{text-decoration:underline}
.cf-close{display:none;background:none;border:0;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer}
.cf-group{display:flex;flex-direction:column;gap:10px;transition:opacity .2s}
.cf-group.disabled{opacity:.4;pointer-events:none}
.cf-group>b{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.cf-pills{display:flex;flex-wrap:wrap;gap:6px}
.cf-pills button{
  border:0;background:var(--fill);color:var(--muted);font:inherit;font-size:.84rem;font-weight:700;
  padding:7px 14px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s;
}
.cf-pills button:hover{color:var(--text)}
.cf-pills button.on{
  background:linear-gradient(120deg,var(--page-accent,var(--accent)),var(--page-accent-2,var(--accent-2)));
  color:#fff;box-shadow:var(--page-glow,var(--glow));
}
.cf-group select{
  background:var(--fill);border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--text);
  padding:10px 12px;font:inherit;font-size:.9rem;width:100%;
}
.cf-genres{display:flex;flex-direction:column;gap:1px;max-height:260px;overflow-y:auto}
.cf-genre{display:flex;align-items:center;gap:9px;padding:7px 5px;border-radius:var(--r-sm);cursor:pointer;font-size:.88rem;color:var(--muted);transition:background .15s,color .15s}
.cf-genre:hover{background:var(--fill);color:var(--text)}
.cf-genre input{width:16px;height:16px;accent-color:var(--page-accent,var(--accent));cursor:pointer;flex-shrink:0}
.cf-loading{color:var(--faint);font-size:.84rem}

.catalog-main{min-width:0}
.catalog-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.cf-toggle-mobile{
  display:none;align-items:center;gap:8px;border:0;background:var(--fill);color:var(--text);
  font:inherit;font-size:.88rem;font-weight:700;padding:9px 16px;border-radius:999px;cursor:pointer;
}
.catalog-toolbar select{
  background:var(--fill);border:1px solid var(--line-2);border-radius:999px;color:var(--text);
  padding:9px 18px;font:inherit;font-size:.88rem;margin-left:auto;cursor:pointer;
}
.cf-display{display:inline-flex;gap:3px;padding:3px;border-radius:999px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--line-2)}
.cf-display button{border:0;background:none;color:var(--muted);padding:8px 11px;border-radius:999px;cursor:pointer;display:flex;transition:background .2s,color .2s}
.cf-display button.on{
  background:linear-gradient(120deg,var(--page-accent,var(--accent)),var(--page-accent-2,var(--accent-2)));
  color:#fff;box-shadow:var(--page-glow,var(--glow));
}
.cf-overlay{display:none;position:fixed;inset:0;z-index:69;background:var(--backdrop)}
.cf-overlay.open{display:block}

.grid.catalog.compact{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.grid.catalog.compact .card b{font-size:.78rem}
.grid.catalog.compact .card small{font-size:.7rem}

@media(max-width:900px){
  .catalog-layout{grid-template-columns:1fr}
  .catalog-filters{
    position:fixed;top:0;right:0;bottom:0;left:0;z-index:70;max-height:none;border-radius:0;
    transform:translateX(-100%);transition:transform .25s var(--ease);
  }
  .catalog-filters.open{transform:none}
  .cf-toggle-mobile{display:inline-flex}
  .cf-close{display:block}
  .catalog-toolbar select{margin-left:0}
}

/* En-tête de page (Sans pub) */
.page-hero{
  text-align:center;padding:34px 20px 30px;margin-bottom:26px;border-radius:var(--r-xl);
  background:radial-gradient(70% 120% at 50% 0%,#e4202c26,transparent 70%),var(--surface);
  box-shadow:inset 0 0 0 1px var(--line);
}
.page-hero h1{font-size:2.6rem;margin:12px 0}
.page-hero h1 em{font-style:normal;color:var(--accent)}
.page-hero p{color:var(--muted);max-width:640px;margin:0 auto}
.page-sub{display:block;color:var(--faint);margin-top:12px;font-size:.82rem}

/* Sans pub : étapes + offres */
.adfree-page{max-width:900px;margin:0 auto}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.steps li{padding:20px 16px;text-align:center;border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;align-items:center}
.steps li b{margin:10px 0 6px}
.steps li small{color:var(--muted);font-size:.84rem;line-height:1.45}
.step-n{width:30px;height:30px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem}
#adfree-status{margin-bottom:16px}
#adfree-status .state-ok{padding:14px 18px;border-radius:var(--r);background:#4ade8014;box-shadow:inset 0 0 0 1px #4ade8040}
.offers{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:22px}
.offer{padding:22px;border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column}
.offer>*+*{margin-top:12px}
.offer-top{display:flex;align-items:center;justify-content:space-between}
.offer-top b{font-size:1.1rem}
.offer-tag{padding:3px 11px;border-radius:999px;background:var(--fill-2);font-size:.78rem;font-weight:800;color:var(--accent)}
.offer small{color:var(--muted)}
.offer-progress{display:flex;align-items:center}
.offer-progress .ad-progress-bar{flex:1;margin-right:12px}
.offer-progress strong{font-size:.85rem;color:var(--muted)}
.offer .btn{width:100%}
.offer-left{margin-left:8px;padding:1px 9px;border-radius:999px;background:#ffffff30;font-size:.8rem}

@media(max-width:1180px){
  nav{margin-right:0}
}
@media(max-width:700px){
  .steps,.offers{grid-template-columns:1fr}
  .page-hero h1{font-size:2rem}
  .browse-head h1{font-size:1.7rem}
  .toolbar{padding:8px}
  .seg button{padding:7px 13px}
}
.no-flex-gap .browse-head>*{margin-right:14px}
.no-flex-gap .toolbar>*{margin-right:10px}
.no-flex-gap .steps li>*+*,.no-flex-gap .offer>*+*{margin-top:12px}

/* ---------- Navigateurs anciens (télés, ~Chromium < 84) ----------
   Ils ignorent entièrement une règle dès qu'une de ses valeurs utilise clamp()/min() (ou gap sur
   un conteneur flex) : marges à zéro, éléments collés, bandeau du haut écrasé. Ce bloc ne s'applique
   qu'à eux (@supports) et vient en dernier pour l'emporter sur les règles ci-dessus. */
@supports not (width:clamp(1px,2vw,3px)){
  :root{--gutter:40px}
  #nav{gap:20px}
  #search{width:220px}
  #hero{padding:24px var(--gutter) 110px}
  .hero-inner h1{font-size:3.6rem}
  .row{margin-bottom:34px}
  .row h2{font-size:1.15rem}
  .row-top10{--rank-gap:80px}
  .top10-item .rank{font-size:5rem}
  .studio-title{font-size:1.8rem}
  #modal{padding:20px}
  .ad-gate-title{font-size:1.5rem}
  .src-ctrl{padding:18px 72px 14px 26px}
  .info{padding:20px 26px 30px}
  .info h2{font-size:1.7rem}
  .page-head h1{font-size:2.2rem}
}
/* gap sur flex non géré : détecté en JS (index.html), on remplace par des marges */
.no-flex-gap .track > *{margin-right:18px}
.no-flex-gap .studio-track > *{margin-right:18px}
.no-flex-gap .card > * + *{margin-top:9px}
.no-flex-gap .meta > *,.no-flex-gap .hero-trust > *{margin:0 8px 8px 0}
.no-flex-gap .src-ctrl > *{margin-right:8px}
.no-flex-gap #nav > *{margin-right:20px}
.no-flex-gap nav a{margin-right:4px}
.no-flex-gap .page-body > * + *{margin-top:16px}
.no-flex-gap .page-card > * + *{margin-top:12px}
.no-flex-gap .btn svg{margin-right:9px}
.ad-gate-skip{display:inline-block;margin-top:14px;color:var(--accent);font-size:.85rem;font-weight:700;text-decoration:none}
.ad-gate-skip:hover{text-decoration:underline}

/* Relance vers les paliers longue durée : affichée à la place du lien discret ci-dessus quand la
   personne a cumulé beaucoup de clics pub cette semaine (voir NUDGE_THRESHOLD, js/modal.js). */
.ad-gate-nudge{
  display:flex;flex-direction:column;gap:4px;text-align:left;text-decoration:none;
  margin-top:14px;padding:14px 16px;border-radius:var(--r);max-width:340px;
  background:#4ade8018;border:1px solid #4ade8045;transition:background .2s,border-color .2s;
}
.ad-gate-nudge:hover{background:#4ade8028;border-color:#4ade8070}
.ad-gate-nudge:hover .ad-gate-nudge-cta{background:#4ade80;color:#06240f}
.ad-gate-nudge b{color:var(--ok);font-size:.86rem}
.ad-gate-nudge > span:not(.ad-gate-nudge-cta){color:#c3e8d2;font-size:.78rem;line-height:1.5}
/* pastille façon bouton, bien distincte du texte : pour que ce soit visible au premier coup
   d'œil que tout l'encart est cliquable, pas juste un paragraphe d'info. */
.ad-gate-nudge-cta{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:4px;
  padding:6px 13px;border-radius:999px;background:#4ade8030;color:var(--ok);
  font-size:.76rem;font-weight:800;transition:background .2s,color .2s;
}
/* en-tête plus compact sur ordinateur : 7 onglets + recherche + compte doivent tenir sur une ligne */
@media(min-width:1181px) and (hover:hover){
  nav a{padding:9px 12px;font-size:.9rem}
  #search{width:170px}
}

/* ---------- Animation d'ouverture « rideaux de cinéma » (moovyx.site uniquement, voir
   index.html) : deux rideaux noir/rouge qui se rejoignent au centre, le logo apparaît, puis les
   rideaux s'écartent pour révéler le site. z-index au-dessus de tout, y compris le bandeau.
   100% @keyframes (animation-delay pour le séquencement), aucun déclenchement par JS : démarre
   dès le premier rendu et se joue sur le thread de composition, insensible à ce que fait le
   reste de la page (API, scripts tiers…) pendant ce temps-là — voir le commentaire dans
   index.html pour l'incident que ça corrige (coupure en plein milieu de l'ouverture). ---------- */
#cinema-intro{position:fixed;inset:0;z-index:999;pointer-events:none;overflow:hidden}
#cinema-intro .cinema-curtain{
  position:absolute;top:0;bottom:0;width:50%;
  background:linear-gradient(160deg,#060304 0%,#1a0608 55%,#5c0e14 100%);
  animation-duration:1.1s;animation-timing-function:cubic-bezier(.76,0,.24,1);
  animation-delay:.65s;animation-fill-mode:forwards;
}
#cinema-intro .cinema-curtain.left{left:0;box-shadow:12px 0 40px -10px #000c;animation-name:cinemaOpenLeft}
#cinema-intro .cinema-curtain.right{right:0;box-shadow:-12px 0 40px -10px #000c;animation-name:cinemaOpenRight}
@keyframes cinemaOpenLeft{to{transform:translateX(-100%)}}
@keyframes cinemaOpenRight{to{transform:translateX(100%)}}
#cinema-intro::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);
  background:linear-gradient(var(--accent),transparent 75%);filter:blur(1.5px);
  animation:cinemaSeamOut .3s ease .65s forwards;
}
@keyframes cinemaSeamOut{to{opacity:0}}
.cinema-logo{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92);
  display:flex;align-items:center;gap:3px;font-weight:800;letter-spacing:.07em;color:#fff;
  font-size:clamp(1.9rem,5vw,2.7rem);opacity:0;text-shadow:0 0 36px #e4202caa;
  animation:cinemaLogoIn .45s ease forwards,cinemaLogoOut .35s ease .65s forwards;
}
.cinema-logo span{color:var(--accent)}
@keyframes cinemaLogoIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes cinemaLogoOut{to{opacity:0}}
@media(prefers-reduced-motion:reduce){#cinema-intro{display:none}}

/* ---------- Pop-up d'accueil Telegram ---------- */
#welcome{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:var(--backdrop);animation:welcome-fade .3s var(--ease);
}
#welcome.closing{opacity:0;transition:opacity .2s}
.welcome-box{
  position:relative;width:100%;max-width:440px;padding:34px 28px 24px;text-align:center;
  border-radius:var(--r-xl);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-2),0 0 80px -20px #e4202c66;
  animation:welcome-pop .4s var(--ease);
}
.welcome-box svg{margin:0 auto 16px}
.welcome-box h2{font-size:1.5rem;margin-bottom:12px}
.welcome-box p{color:var(--muted);margin-bottom:22px;line-height:1.55}
.welcome-box p b{color:var(--text)}
.welcome-cta{display:flex;width:100%;text-decoration:none}
.welcome-later{
  margin-top:12px;background:none;border:0;color:var(--faint);font:inherit;font-weight:600;
  padding:8px 14px;cursor:pointer;
}
.welcome-later:hover{color:var(--text)}
.welcome-x{
  position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;border:0;
  background:var(--fill);color:var(--muted);font-size:1.4rem;line-height:1;cursor:pointer;
}
.welcome-x:hover{background:var(--fill-2);color:var(--text)}
@keyframes welcome-fade{from{opacity:0}to{opacity:1}}
@keyframes welcome-pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.page-card.legal p+p{margin-top:12px}

/* ---------- 12. Finition « premium » ---------- */

/* Hero : logo du titre, boutons blanc + verre, voile plus cinéma */
.hero-inner .hero-logo{
  display:block;width:auto;max-width:100%;max-height:150px;margin:0 0 20px;object-fit:contain;
  filter:drop-shadow(0 6px 26px #000c);animation:rise .6s var(--ease) both;
}
.hero-inner.has-logo h1{
  position:absolute;width:1px;height:1px;overflow:hidden;margin:0;padding:0;
  clip:rect(0 0 0 0);white-space:nowrap;   /* gardé pour le référencement et les lecteurs d'écran */
}
.hero-inner .btn{padding:14px 30px}
.hero-inner .btn.primary{background:#fff;color:#0b0d12;box-shadow:0 12px 34px -12px #ffffff80}
.hero-inner .btn.primary:hover{box-shadow:0 16px 40px -12px #fff;background:#f1f4fa}
.hero-inner .btn.ghost{
  background:#ffffff26;color:#fff;box-shadow:inset 0 0 0 1px #ffffff33;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.hero-inner .btn.ghost:hover{background:#ffffff3d}

/* Défilement vers le haut */
#to-top{
  position:fixed;right:22px;bottom:22px;z-index:45;width:48px;height:48px;border-radius:50%;border:0;
  background:var(--grad);color:#fff;font-size:1.3rem;font-weight:800;cursor:pointer;
  box-shadow:var(--glow),0 10px 30px -10px #000;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
#to-top.on{opacity:1;transform:none;pointer-events:auto}
#to-top:hover{transform:translateY(-3px)}

/* Entrée en douceur du contenu à chaque page */
#rows>*{animation:rise .55s var(--ease) both}

/* Affiches : fin liseré + halo bleu au survol */
.poster{box-shadow:var(--shadow-1),inset 0 0 0 1px #ffffff14}
.card:hover .poster,.card:focus-visible .poster{box-shadow:var(--shadow-2),0 0 0 2px #e4202c99,0 18px 44px -14px #e4202c66}
.row{margin-bottom:46px}
.row h2{font-size:1.3rem}

/* Pied de page */
footer{margin-top:30px;border-top:1px solid var(--line);background:linear-gradient(0deg,#e4202c0d,transparent)}
.footer-col p{color:var(--muted);font-size:.9rem;line-height:1.6;max-width:340px;margin-bottom:16px}
.footer-tg{display:inline-flex;text-decoration:none;padding:11px 24px;font-size:.9rem}

/* Ordinateur : en-tête « îlot » flottant en verre, comme les plateformes premium */
@media(min-width:1181px) and (hover:hover){
  #nav,#nav.solid{
    left:var(--gutter);right:var(--gutter);top:calc(var(--topbar-h) + 14px);
    height:64px;padding:0 14px 0 24px;border-radius:999px;border-bottom:0;
    background:#0b0d14b8;backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
    box-shadow:inset 0 0 0 1px #ffffff1f,0 20px 50px -26px #000;
  }
  #nav::before{display:none}
  nav{background:#ffffff0d}
  main.no-hero{padding-top:calc(var(--offset) + 46px)}
}
@media(max-width:700px){
  #to-top{right:14px;bottom:14px;width:44px;height:44px}
  .row{margin-bottom:34px}
}

/* ---------- 13. Fiche d'un titre = vraie page (.tp) ----------
   Le conteneur #modal reste (historique, fermeture, lecteur), mais il se comporte comme une
   page : plein écran, fond du site, défilement propre, plus de boîte flottante. */
#modal{
  padding:0;display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;
}
.modal-box{
  max-width:none;max-height:none;height:auto;overflow:visible;border:0;border-radius:0;
  background:transparent;box-shadow:none;animation:none;
}
#close{display:none}
@media(min-width:1181px) and (hover:hover){
  /* sur ordinateur l'en-tête flottant reste visible au-dessus de la page, comme un vrai site */
  #modal{z-index:39}
  .tp{padding-top:calc(var(--offset) + 34px)}
}
.tp{max-width:940px;margin:0 auto;padding:18px 20px 70px;text-align:center}
.tp-back{
  display:block;margin:0 0 6px;background:none;border:0;color:var(--muted);font:inherit;
  font-weight:700;font-size:.92rem;cursor:pointer;text-align:left;padding:8px 0;
}
.tp-back:hover{color:var(--accent)}
.tp-title{font-size:2.6rem;margin:6px 0 18px;text-shadow:0 4px 30px #0009}
.tp-banner{
  display:flex;align-items:center;justify-content:center;max-width:640px;margin:0 auto 16px;
  padding:12px 20px;border-radius:var(--r);font-weight:600;font-size:.92rem;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2),inset 3px 0 0 var(--accent);
}
.tp-banner-ic{
  width:32px;height:32px;margin-right:12px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#fff;
  background:var(--grad);box-shadow:var(--glow);
}
.tp-chips{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:20px}
.tp-chips>*{margin:0 5px 8px}
.tp-chip{
  padding:7px 15px;border-radius:999px;font-size:.84rem;font-weight:700;color:var(--text);
  background:var(--fill);box-shadow:inset 0 0 0 1px var(--line-2);
}
.tp-chip.star{color:#ffd166;background:#f5b62422;box-shadow:inset 0 0 0 1px #c8860a55}

/* lecteur + barre de contrôle */
.tp-stage{display:flex;flex-direction:column;align-items:center}
.tp-stage #player{
  width:100%;border-radius:var(--r-xl);box-shadow:0 30px 80px -30px #000,inset 0 0 0 1px var(--line-2);
  background:radial-gradient(70% 90% at 50% 0%,#14203a,#07080d);
}
.tp-stage .src-ctrl{
  order:1;margin:18px auto 0;padding:7px;justify-content:center;gap:0;
  border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2),0 14px 40px -20px #000;
}
.tp-stage .src-ctrl>*{margin:0 4px}
.tp-stage .src-ctrl select{border-color:transparent;background-color:var(--fill)}
.tp-stage .src-ctrl select.src-highlight{background-color:var(--accent-2);color:#fff;border-color:transparent;box-shadow:var(--glow)}
.tp-stage .src-ctrl select.src-highlight option{background:var(--surface-2);color:var(--text)}
.tp-tip{margin:12px 0 20px;color:var(--faint);font-size:.8rem}
.tp-actions{display:flex;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.tp-actions .btn{margin:0 6px 10px;padding:11px 24px;font-size:.9rem}
#favbtn{margin-top:0}

/* distribution (repliée) */
.tp-acc{
  text-align:left;margin-bottom:34px;border-radius:var(--r-lg);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;
}
.tp-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;padding:16px 20px}
.tp-acc summary::-webkit-details-marker{display:none}
.tp-acc-ic{
  width:42px;height:42px;margin-right:14px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--accent);
  background:var(--fill-2);box-shadow:inset 0 0 0 1px var(--line-2);
}
.tp-acc-t{display:flex;flex-direction:column;flex:1}
.tp-acc-t small{color:var(--muted);font-size:.8rem}
.tp-acc-caret{color:var(--muted);font-size:1.3rem;transition:transform .25s var(--ease)}
.tp-acc[open] .tp-acc-caret{transform:rotate(180deg)}
.cast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:16px;padding:6px 20px 22px}
.cast-card{display:flex;flex-direction:column;align-items:center;text-align:center}
.cast-card img,.cast-ph{
  width:84px;height:84px;border-radius:50%;object-fit:cover;margin-bottom:8px;background:var(--surface-2);
  box-shadow:0 0 0 2px var(--line-2);
}
.cast-ph{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.4rem;color:var(--muted)}
.cast-card b{font-size:.82rem;line-height:1.25}
.cast-card small{color:var(--muted);font-size:.74rem;line-height:1.3;margin-top:2px}

/* bande-annonce */
.tp-trailer{text-align:left;margin-bottom:34px;padding:22px;border-radius:var(--r-xl);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.tp-trailer h2{font-size:1.05rem;margin-bottom:16px}
.tp-trailer-frame{border-radius:var(--r-lg);overflow:hidden;background:#000;box-shadow:inset 0 0 0 1px var(--line-2)}
.tp-trailer-btn{
  width:100%;aspect-ratio:16/9;border:0;cursor:pointer;color:#fff;font:inherit;font-weight:700;
  background:var(--surface-2) center/cover no-repeat;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.tp-trailer-btn>span:last-child{margin-top:14px;text-shadow:0 2px 10px #000}
.tp-play{
  width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;padding-left:4px;background:#dc2a4e;box-shadow:0 14px 40px -8px #dc2a4eaa;
  transition:transform .25s var(--ease);
}
.tp-trailer-btn:hover .tp-play{transform:scale(1.1)}
.tp-trailer-frame .yt{aspect-ratio:16/9}

/* synopsis */
.tp-about{
  margin-bottom:34px;padding:34px 28px;border-radius:var(--r-xl);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line),0 30px 70px -40px #e4202c44;
}
.tp-poster{width:180px;margin:0 auto 22px;border-radius:var(--r);box-shadow:var(--shadow-2),0 0 50px -10px #e4202c66}
.tp-about h2{font-size:1.8rem;margin-bottom:14px}
.tp-about p{color:#ccd2de;line-height:1.75;max-width:70ch;margin:0 auto;font-size:.98rem}
#tp-similar .row{text-align:left}
#tp-similar .row h2{font-size:1.1rem}

/* télé : la barre de source passe AU-DESSUS du lecteur, atteignable à la télécommande sans descendre */
@media(hover:none) and (pointer:coarse) and (min-width:1200px){
  .tp-stage .src-ctrl{order:-1;margin:0 auto 18px}
  .tp{max-width:1180px}
  .tp-title{font-size:3.4rem}
}
@media(max-width:700px){
  .tp{padding:10px 14px 60px}
  .tp-title{font-size:1.9rem;margin-bottom:14px}
  .tp-banner{font-size:.8rem;padding:10px 14px;text-align:left}
  .tp-stage #player{border-radius:var(--r-lg)}
  .tp-stage .src-ctrl{border-radius:var(--r-lg);flex-wrap:wrap}
  .tp-about{padding:26px 16px}
  .tp-poster{width:150px}
}
#modal{overflow-x:hidden}
#tp-similar .track-wrap{margin:0;padding:0}
#tp-similar .arrow.left{left:-6px}
#tp-similar .arrow.right{right:-6px}
#modal-content>footer{margin-top:10px;text-align:left}
#modal-content>footer .footer-grid{max-width:1100px;margin:0 auto}
.tp-subhint{order:2;margin:12px 0 0;padding:10px 18px;border-radius:var(--r-lg);max-width:640px;line-height:1.5;font-size:.84rem;color:var(--text);background:#e4202c1a;box-shadow:inset 0 0 0 1px #e4202c45}
.tp-subhint[hidden]{display:none}
.tp-subhint b{color:var(--accent)}
.src-next{
  border:0;background:var(--fill-2);color:var(--text);font:inherit;font-size:.84rem;font-weight:700;
  padding:9px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background .2s,transform .2s var(--ease);
}
.src-next:hover{background:var(--accent);color:#fff;transform:translateY(-1px)}
.tp-subhint a{color:var(--accent);font-weight:700}

/* ---------- 14. Optimisation téléphone & ordinateur ---------- */

/* liens-boutons sans soulignement ; pas de délai de 300 ms au toucher ni de halo gris sur iOS/Android */
a.btn{text-decoration:none}
a,button,input,select,label,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.track{overscroll-behavior-x:contain}

/* rendu différé des sections hors écran : page d'accueil nettement plus rapide à afficher sur téléphone
   (ignoré sans effet par les navigateurs qui ne connaissent pas la propriété) */
.row{content-visibility:auto;contain-intrinsic-size:auto 420px}

/* bandeau d'annonce : il s'efface au défilement et l'en-tête remonte à sa place */
#topbar{transition:transform .3s var(--ease)}
body.topbar-gone #topbar{transform:translateY(-100%)}
#nav{transition:top .3s var(--ease),transform .28s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
body.topbar-gone #nav{top:0}
@media(min-width:1181px) and (hover:hover){
  body.topbar-gone #nav,body.topbar-gone #nav.solid{top:14px}
}

/* bouton « retour en haut » : respecte l'encoche / la barre de geste des téléphones */
#to-top{bottom:calc(22px + env(safe-area-inset-bottom,0px));right:calc(22px + env(safe-area-inset-right,0px))}

@media(max-width:700px){
  /* en-tête compact : logo + actions sur une ligne, onglets sur la seconde ; la recherche devient
     une icône qui s'ouvre en barre pleine largeur au toucher (≈190 px de moins en haut de l'écran) */
  #nav{padding:8px var(--gutter);row-gap:8px}
  #search{
    order:1;flex:0 0 42px;width:42px;height:42px;padding:0;margin-left:auto;border-radius:50%;
    cursor:pointer;background-position:center;background-size:19px;color:transparent;caret-color:transparent;
  }
  #search::placeholder{color:transparent}
  #ann{order:2;margin-left:0}
  #telegram-link{order:3;margin-left:0}
  #account{order:4}
  #search:focus{
    position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);top:8px;
    width:auto;height:42px;padding:0 16px 0 42px;border-radius:999px;
    background-position:15px center;background-size:17px;
    background-color:var(--surface-2);color:var(--text);caret-color:auto;cursor:text;
  }
  #search:focus::placeholder{color:var(--faint)}
  nav{padding:4px}
  nav a{min-height:40px;display:inline-flex;align-items:center;padding:0 15px}
  .acc-btn{min-height:40px}
  /* zones tactiles confortables */
  .seg button{min-height:40px}
  .check{min-height:40px}
  .more-link{min-height:40px;padding:0 4px}
  .btn:not(.acc-btn){min-height:46px}
  .tp-actions .btn{min-height:42px}
  .src-ctrl select,.src-ctrl input,.src-next{min-height:42px}
  /* iOS zoome sur tout champ dont la police fait moins de 16 px : on évite ce zoom parasite */
  #search:focus,.src-ctrl input,.msg-form input,.msg-form textarea,#auth input,.toolbar select{font-size:16px}
  .tp-title{font-size:1.7rem}
  .row-head{margin-bottom:10px}
}

/* ordinateur : liens et boutons plus réactifs, focus clavier propre */
@media(hover:hover){
  .btn,.seg button,.src-next{will-change:transform}
  .card{transition:transform .25s var(--ease)}
}
@media(max-width:700px){
  /* filtres Films/Séries sur deux lignes au lieu de trois : période pleine largeur, puis genre + titres */
  .toolbar .seg{width:100%}
  .toolbar .seg button{flex:1}
  .toolbar select{flex:1 1 0;min-width:0}
  .toolbar .check{flex:0 0 auto;padding:8px 6px}
}

/* ---------- 16. Accueil — découverte (js/discover.js) ---------- */

/* Bandeau Telegram, dans le flux entre deux rangées */
.tg-strip{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-bottom:clamp(26px,4vw,42px);padding:18px 24px;border-radius:var(--r-lg);
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
}
.tg-strip-icon{display:flex;flex-shrink:0}
.tg-strip-text{flex:1;min-width:200px}
.tg-strip-text b{display:block;margin-bottom:2px}
.tg-strip-text p{color:var(--muted);font-size:.88rem}
.tg-strip .btn{flex-shrink:0;text-decoration:none;white-space:nowrap}

/* Recommandation du moment */
.reco-pick{
  position:relative;margin-bottom:clamp(26px,4vw,42px);padding:26px;border-radius:var(--r-xl);
  background:radial-gradient(60% 120% at 0% 0%,#7c5cff1f,transparent 70%),var(--surface);
  box-shadow:inset 0 0 0 1px var(--line);
}
.reco-pick-badge{
  display:inline-block;margin-bottom:18px;padding:5px 14px;border-radius:999px;
  background:#7c5cff26;color:#b9a8ff;font-size:.76rem;font-weight:800;letter-spacing:.03em;
}
.reco-pick-body{display:flex;gap:24px}
.reco-pick-poster{flex:0 0 140px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-2);display:block}
.reco-pick-poster img{width:100%;aspect-ratio:2/3;object-fit:cover}
.reco-pick-info{flex:1;min-width:0}
.reco-pick-info h3{font-size:1.4rem;margin-bottom:8px}
.reco-pick-info .meta{margin-bottom:6px}
.reco-pick-info p{
  color:var(--muted);line-height:1.6;margin:10px 0 18px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.reco-pick-actions{display:flex;gap:10px;flex-wrap:wrap}
.reco-pick-actions .btn{padding:11px 22px;font-size:.9rem}

/* Bandeau « Vis sans limites » */
.premium-strip{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(26px,4vw,42px);padding:30px 32px;border-radius:var(--r-xl);
  background:radial-gradient(70% 140% at 100% 0%,#e4202c33,transparent 70%),var(--surface);
  box-shadow:inset 0 0 0 1px #e4202c45;
  animation:strip-glow 5s ease-in-out infinite;
}
@keyframes strip-glow{
  0%,100%{box-shadow:inset 0 0 0 1px #e4202c45}
  50%{box-shadow:inset 0 0 0 1px #e4202c6b}
}
.premium-strip-badge{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;padding:5px 14px;border-radius:999px;
  background:#ffd16622;border:1px solid #ffd16655;color:#ffd166;font-size:.76rem;font-weight:800;letter-spacing:.02em;
}
.premium-strip-text b{font-size:1.4rem}
.premium-strip-text p{color:var(--muted);margin:8px 0 14px;max-width:48ch}
.premium-strip-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.premium-strip-tags li{
  padding:5px 13px;border-radius:999px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--line-2);
  font-size:.78rem;font-weight:700;color:var(--text);
}
.premium-strip-cta{display:flex;align-items:center;gap:18px;flex-shrink:0}
.premium-strip-cta .btn{text-decoration:none;padding:13px 26px}

/* Bandeau parrainage : même gabarit que le bandeau premium payant, mais en vert pour bien
   signaler que c'est la voie gratuite (pas confondre avec « acheter »). */
.referral-strip{
  background:radial-gradient(70% 140% at 100% 0%,#22c55e33,transparent 70%),var(--surface);
  box-shadow:inset 0 0 0 1px #22c55e45;
}
.referral-strip .premium-strip-badge{background:#22c55e22;border-color:#22c55e55;color:#4ade80}

/* Pastilles « Parcourir par genre » */
.genre-pills{margin-bottom:clamp(26px,4vw,42px)}
.genre-pills-row{display:flex;flex-wrap:wrap;gap:12px}
.genre-pill{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:12px 20px;border-radius:var(--r-lg);border:0;cursor:pointer;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .2s,transform .2s var(--ease),background .2s;
}
.genre-pill b{color:var(--text);font-size:.96rem}
.genre-pill small{color:var(--muted);font-size:.76rem;font-weight:600}
.genre-pill:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--accent),var(--shadow-1);background:var(--surface-2)}

/* Trouve ton contenu + roue du hasard */
.discover-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:clamp(26px,4vw,42px)}
.discover-card{
  padding:26px;border-radius:var(--r-xl);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  text-align:center;display:flex;flex-direction:column;align-items:center;
}
.discover-ic{
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:14px;
  border-radius:16px;color:#fff;background:var(--grad);box-shadow:var(--glow);
}
/* icône « roue du hasard » : les mêmes quartiers colorés que la vraie roue (plus bas),
   pour ne pas réduire la roue à un symbole ambigu une fois toute petite. */
.discover-ic.mini-wheel{
  border-radius:50%;background:conic-gradient(var(--accent) 0deg 45deg,var(--accent-2) 45deg 90deg,
    var(--accent) 90deg 135deg,var(--accent-2) 135deg 180deg,var(--accent) 180deg 225deg,
    var(--accent-2) 225deg 270deg,var(--accent) 270deg 315deg,var(--accent-2) 315deg 360deg);
  box-shadow:0 0 0 3px var(--surface),var(--glow);
}
.discover-card h3{font-size:1.15rem;margin-bottom:8px}
.discover-card p{color:var(--muted);font-size:.9rem;margin-bottom:18px;max-width:34ch}
.discover-card .btn{text-decoration:none}

/* Roue du hasard : pop-up plein écran, même famille que #modal */
.wheel-backdrop{
  position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  padding:20px;background:var(--backdrop);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
.wheel-backdrop.on{opacity:1;pointer-events:auto}
.wheel-box{
  width:100%;max-width:420px;max-height:92vh;overflow:auto;text-align:center;position:relative;
  padding:32px 26px;border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-2);
  transform:translateY(16px) scale(.97);transition:transform .25s var(--ease);
}
.wheel-backdrop.on .wheel-box{transform:none}
.wheel-close{
  position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:0;
  background:var(--fill);color:var(--text);font-size:1.3rem;cursor:pointer;
}
.wheel-box h2{font-size:1.4rem;margin-bottom:8px}
.wheel-lead{color:var(--muted);margin-bottom:22px;font-size:.9rem}
.wheel-wrap{position:relative;width:200px;height:200px;margin:0 auto 22px}
.wheel-disc{
  width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 6px var(--surface-2),var(--shadow-2);
  background:conic-gradient(var(--accent) 0deg 45deg,var(--accent-2) 45deg 90deg,
    var(--accent) 90deg 135deg,var(--accent-2) 135deg 180deg,var(--accent) 180deg 225deg,
    var(--accent-2) 225deg 270deg,var(--accent) 270deg 315deg,var(--accent-2) 315deg 360deg);
  transition:transform 3.1s cubic-bezier(.17,.86,.26,1);
}
.wheel-pin{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:1.4rem;color:var(--text);filter:drop-shadow(0 2px 4px #000a)}
.wheel-result{display:flex;align-items:center;gap:14px;margin-top:18px;padding:14px;border-radius:var(--r);background:var(--fill);text-align:left}
.wheel-result img{width:56px;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r-sm);flex-shrink:0}
.wheel-result b{display:block}
.wheel-result small{color:var(--muted);font-size:.78rem}
.wheel-result .btn{margin-top:8px;padding:8px 16px;font-size:.84rem}

@media(max-width:700px){
  .reco-pick-body{flex-direction:column}
  .reco-pick-poster{width:120px}
  .premium-strip{flex-direction:column;align-items:flex-start}
  .premium-strip-cta{width:100%;justify-content:space-between}
  .discover-row{grid-template-columns:1fr}
  .tg-strip{flex-direction:column;text-align:center}
  .tg-strip .btn{width:100%}
}