header nav{gap:20px}.feature-title{font-size:clamp(40px,6vw,92px)!important;letter-spacing:-3px!important;line-height:1.04!important;margin:30px 0!important;overflow-wrap:anywhere}.feature-controls{display:flex;gap:8px;margin-top:25px}.feature-controls button,.rail-controls button{border:1px solid var(--line);padding:8px 13px;border-radius:5px}.feature-controls [aria-pressed=true]{background:var(--blue);color:#201d0e}.hero-synopsis{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.language-badge{display:inline-block;color:#efd969;border:1px solid #666044;padding:3px 7px;border-radius:4px;font-size:12px}.detail-hero{position:relative}.cover-play{position:absolute;left:30px;bottom:25px;box-shadow:0 2px 25px #0009}.rating-panel{margin-top:40px;padding:26px;background:#1c1f28;border-radius:8px}.rating-panel input[type=range]{width:100%;margin:25px 0 10px;accent-color:#efd969}.rating-legend{display:flex;justify-content:space-between;gap:15px;font-size:14px;margin-bottom:25px}.watch-modal{max-width:1100px;width:94vw}.official-player{width:min(100%,calc(78vh * var(--ratio,16/9)));margin-inline:auto;aspect-ratio:var(--ratio,16/9);min-height:220px;background:#000}.official-player iframe,.official-player>div{width:100%;height:100%;border:0}.official-player iframe{color-scheme:normal}.finder-facets{grid-template-columns:repeat(auto-fit,minmax(155px,1fr))}.rail-controls{display:flex;gap:8px}.film-rail{scrollbar-width:thin}.cinema-caption{max-width:1000px}.watch-modal .close{z-index:4;background:#101216}dialog .text-link{margin-right:15px}header .header-actions{gap:10px}#auth-error,#player-status,#rating-status{color:#9db0e9;font-size:14px}@media(max-width:720px){header nav{gap:15px;justify-content:flex-start;white-space:nowrap}.cinema-hero{height:660px}.feature-title{font-size:42px!important;letter-spacing:-1.5px!important}.cinema-caption{bottom:0;padding-bottom:22px}.hero-synopsis{font-size:14px}.feature-controls{margin-top:15px}.cover-play{left:15px;bottom:15px}.watch-modal{padding:45px 15px 20px}.rating-panel{padding:20px}.official-player{min-height:220px}header .login{font-size:12px}header .brand{font-size:22px}}

/* Garder tous les contrôles accessibles même avec un titre très long. */
.cinema-hero{height:auto;min-height:650px}.cinema-caption{padding-top:65px;padding-bottom:45px}.feature-title{font-size:clamp(38px,4.7vw,72px)!important}
@media(max-width:720px){.cinema-hero{height:auto;min-height:660px;display:flex;align-items:flex-end}.cinema-caption{position:relative;bottom:auto;padding:65px 5% 28px}.feature-title{font-size:38px!important}.cinema-caption .actions{flex-wrap:wrap}}

[hidden]{display:none!important}

/* La navigation du carrousel est ancrée au cadre, indépendamment du texte. */
.cinema-hero{height:720px;min-height:720px;display:block}.cinema-caption{position:static!important;width:min(80%,1000px);height:100%;padding:48px 4.2% 110px;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
.feature-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:24px 0 12px!important}.feature-director{font-size:14px;color:#d0d2d7;margin:0 0 24px}.feature-controls{position:absolute;left:4.2%;bottom:30px;margin:0;min-height:42px}.hero-synopsis{flex-shrink:0}.language-badge{text-transform:capitalize}.public-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.public-tags .chip{text-transform:capitalize}.card h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media(max-width:720px){.cinema-hero{height:700px;min-height:700px}.cinema-caption{width:100%;padding:42px 5% 105px;justify-content:flex-end}.feature-title{font-size:34px!important;-webkit-line-clamp:3}.feature-controls{left:5%;bottom:24px}.feature-controls button{padding:8px 11px}.feature-director{margin-bottom:18px}.hero-synopsis{font-size:14px;margin-top:18px}}

/* Au-delà de 1600px, cinema.css recentre le bloc de texte sur la colonne de
   1500px. La navigation, ancrée au cadre du carrousel, doit suivre ce décalage
   sinon les flèches se retrouvent 150px à gauche du titre. */
@media(min-width:1600px){.feature-controls{left:calc((100vw - 1500px)/2 + 4.2%)}}

/* Ligne documentaire de la fiche : forme et sujet, cliquables vers la recherche. */
.doc-line{margin:18px 0 0;font-size:14px;color:#c5c7ce}
.doc-line a{color:#efd969;border-bottom:1px solid #666044;padding-bottom:1px}

/* Une piste automatique ouvre la traduction automatique du lecteur : le dire. */
.sub-note{display:block;font-size:12px;color:#a0aaa3;margin-top:4px}

.subtitle-badge{display:inline-block;color:#a8b6e0;border:1px solid #47506b;padding:3px 7px;border-radius:4px;font-size:12px;text-transform:capitalize}

/* Compréhension : ce que le spectateur peut suivre. Le vert dit « rien à faire »,
   l’ambre « un geste dans le lecteur », le rouge « hors de portée ». */
.comprehension{margin-top:28px;padding:18px 20px;border-radius:8px;background:#1c1f28;border-left:3px solid #666044}
.comprehension h2{font-size:15px;margin:0 0 8px;letter-spacing:.02em}
.comprehension p{margin:0;font-size:14px}
.comprehension.dialogue_free,.comprehension.original,.comprehension.written{border-left-color:#efd969}
.comprehension.translate{border-left-color:#9db0e9}
.comprehension.youtube_only{border-left-color:#a8b6e0}
.comprehension.none{border-left-color:#6b82c8}
.comprehension-badge{display:inline-block;padding:3px 7px;border-radius:4px;font-size:12px;border:1px solid #47506b;color:#a8b6e0}
.comprehension-badge.dialogue_free,.comprehension-badge.original,.comprehension-badge.written{color:#efd969;border-color:#666044}
.comprehension-badge.translate{color:#9db0e9;border-color:#4a526b}
.comprehension-badge.none{color:#6b82c8;border-color:#4a526b}
.comprehension.written_unlisted{border-left-color:#c9bf8f}
.comprehension-badge.written_unlisted{color:#c9bf8f;border-color:#6f694a}
.comprehension.automatic{border-left-color:#c9bf8f}
.comprehension-badge.automatic{color:#c9bf8f;border-color:#6f694a}

/* Sélecteur des quatre univers No Studio, en en-tête à côté de la marque.
   Le site courant n'est pas un lien : c'est là qu'on est. */
nav.univers{display:flex;gap:2px;align-items:center;margin-left:18px}
nav.univers a,nav.univers .ici{font-size:12px;letter-spacing:-.1px;padding:7px 11px;border-radius:5px;text-decoration:none;color:var(--muted)}
nav.univers a:hover{color:var(--ink);background:#ffffff0f}
nav.univers .ici{color:var(--blue);font-weight:700;background:#ffffff0d}
@media(max-width:900px){nav.univers{margin-left:10px}nav.univers a,nav.univers .ici{padding:6px 7px;font-size:11px}}
@media(max-width:720px){nav.univers{order:3;margin:0;width:100%;padding-bottom:10px;overflow-x:auto}}

/* La marque et le bascule d'univers forment un bloc : le sélecteur passe SOUS
   le logo plutôt qu'à côté, pour que la ligne de navigation reste lisible. */
header .marque{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:12px 0}
header .marque .brand{line-height:1}
nav.univers{margin-left:-11px;margin-top:2px}

/* Le signe N°, commun aux trois univers : il prend la couleur de la marque du
   site, le N° y est évidé. Même dessin que favicon.svg. */
.brand .logo{display:inline-block;width:.9em;height:.9em;margin-right:.3em;vertical-align:-.06em}

/* Catégorie : une liste déroulante dans la barre de navigation. */
.nav-cat{position:relative;display:inline-flex;align-items:center}
.nav-cat select{font:inherit;font-size:inherit;color:var(--ink);background:transparent;border:0;padding:0 18px 0 0;cursor:pointer;appearance:none;max-width:190px}
.nav-cat:after{content:'▾';position:absolute;right:2px;pointer-events:none;font-size:10px;color:var(--muted)}
.nav-cat.active select,.nav-cat.active:after{color:var(--blue)}
.nav-cat select option,.nav-cat select optgroup{background:var(--paper);color:var(--ink)}

/* Index des catégories : des pastilles qui portent leur nombre de films. */
.chips-cat{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chips-cat .chip{text-decoration:none;display:inline-flex;align-items:baseline;gap:7px}
.chips-cat .chip span{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px}
.chips-cat .chip:hover span{color:inherit}
p.note{color:var(--muted);font-size:13px;line-height:1.6;max-width:760px;margin:0 0 18px}

/* Progression sur la vignette d'un film commencé. Un trait, pas un chiffre :
   il dit « tu en es là » sans prétendre à une précision qu'on n'a pas. */
.card-image .progression{position:absolute;left:0;right:0;bottom:0;height:3px;background:#00000066;border-radius:0 0 7px 7px;overflow:hidden}
.card-image .progression>span{display:block;height:100%;background:var(--blue)}
.reprise{display:inline-flex;align-items:center;gap:7px;color:var(--blue);font-size:13px}

/* Carte d'un créateur dans le carrousel de tête. La vignette de son film le
   mieux établi sert de fond ; la pastille d'initiales tient lieu de portrait,
   qu'on n'a pas et qu'on n'ira pas chercher. */
.createur-rail{grid-auto-columns:calc((100% - 92px)/5)}
.createur-carte{text-decoration:none;display:flex;flex-direction:column;gap:11px;scroll-snap-align:start}
.createur-image{position:relative;display:block;aspect-ratio:1.65;border-radius:7px;overflow:hidden;background:var(--line)}
.createur-image img{width:100%;height:100%;object-fit:cover;opacity:.42;transition:opacity .25s}
.createur-carte:hover .createur-image img{opacity:.6}
.createur-pastille{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;font-weight:700;letter-spacing:-1px;color:var(--blue)}
.createur-carte h3{margin:0;font-size:17px;font-weight:500;letter-spacing:-.3px;color:var(--ink)}
.createur-carte p{margin:0;font-size:12px;color:var(--muted)}
@media(max-width:1000px){.createur-rail{grid-auto-columns:calc((100% - 54px)/4)}}
@media(max-width:720px){.createur-rail{grid-auto-columns:46%}.createur-pastille{font-size:24px}}

/* Proposer un film, et juger ce qui a été proposé. */
.proposition fieldset{border:1px solid var(--line);border-radius:7px;padding:18px 20px 6px;margin:0 0 22px}
.proposition legend{padding:0 8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.proposition label.case{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55;margin-bottom:14px;cursor:pointer}
.proposition label.case input{margin-top:3px;flex:none;accent-color:var(--blue)}
.proposition .cases{display:block}
.proposition .cases label.case{display:inline-flex;width:calc(50% - 12px);margin-right:10px}
.personne{border-left:2px solid var(--line);padding-left:14px;margin-bottom:16px}
.personne input[type=text]{width:100%}
.personne-etat{margin:6px 0 0;font-size:12px;color:var(--muted);min-height:1em}
.personne-choix{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.personne-choix button{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
 border:1px solid var(--line);border-radius:6px;padding:9px 12px;background:#171920;color:var(--ink);cursor:pointer}
.personne-choix button:hover{border-color:var(--blue)}
.personne-choix span{font-size:12px;color:var(--muted)}
#proposition-erreur{color:#9db0e9;font-size:14px}
.card.juger .synopsis{font-size:13px;line-height:1.55;color:var(--muted);margin:8px 0}
.juger-form{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.juger-form label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}
.juger-form output{font-variant-numeric:tabular-nums;color:var(--ink);font-size:16px}
.juger-form input[type=range]{width:100%;accent-color:var(--blue);margin:6px 0 12px}
.juger-form [role=alert]{color:#9db0e9;font-size:13px;margin:8px 0 0}
@media(max-width:720px){.proposition .cases label.case{width:100%;margin-right:0}}

/* Carrousel des sujets : des portes, pas des films. */
.tuile-sujet .createur-image{aspect-ratio:1.3}
.tuile-sujet img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.62)}
.tuile-voile{position:absolute;inset:0;background:linear-gradient(180deg,#0000 35%,#000000b0)}
.tuile-compte{position:absolute;left:11px;bottom:10px;font-size:12px;color:var(--ink);
 background:#0009;border:1px solid #ffffff26;padding:3px 8px;border-radius:4px;font-variant-numeric:tabular-nums}
.tuile-sujet h3{font-size:16px}
.tuile-sujet:hover img{filter:saturate(1) brightness(.8)}