@font-face{font-family:'BSD repli';font-weight:100 599;src:local('Arial'),local('ArialMT'),local('Liberation Sans');size-adjust:54.2%;ascent-override:181.5%;descent-override:39.3%;line-gap-override:0%}@font-face{font-family:'BSD repli';font-weight:600 749;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold');size-adjust:60.4%;ascent-override:162.9%;descent-override:35.3%;line-gap-override:0%}@font-face{font-family:'BSD repli';font-weight:750 849;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold');size-adjust:65%;ascent-override:151.4%;descent-override:32.8%;line-gap-override:0%}@font-face{font-family:'BSD repli';font-weight:850 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold');size-adjust:69.6%;ascent-override:141.4%;descent-override:30.6%;line-gap-override:0%}@font-face{font-family:'Chivo repli';font-weight:100 549;src:local('Arial'),local('ArialMT'),local('Liberation Sans');size-adjust:105%;ascent-override:89.5%;descent-override:23.8%;line-gap-override:0%}@font-face{font-family:'Chivo repli';font-weight:550 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold');size-adjust:99.4%;ascent-override:94.6%;descent-override:25.2%;line-gap-override:0%}

/* ══ POLICES : servies par le site, plus par Google ═════════════════
   Le `display=swap` de Google montrait la police de secours le temps que
   le fichier arrive de fonts.gstatic.com : d'où le clignotement à chaque
   changement de page. Servies ici, préchargées et mises au cache du
   service worker, elles sont là avant le premier rendu.
   Deux fichiers variables par famille : latin, et latin-ext pour ce que
   le premier ne couvre pas. */
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:100 900;
  font-display:block;src:url(/fonts/bigshoulders-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:100 900;
  font-display:block;src:url(/fonts/bigshoulders-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chivo';font-style:normal;font-weight:100 900;
  font-display:block;src:url(/fonts/chivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chivo';font-style:normal;font-weight:100 900;
  font-display:block;src:url(/fonts/chivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chivo';font-style:italic;font-weight:100 900;
  font-display:block;src:url(/fonts/chivo-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chivo';font-style:italic;font-weight:100 900;
  font-display:block;src:url(/fonts/chivo-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --ink:#0d0b12; --paper:#fffdf7; --line:rgba(255,253,247,.26);
  /* l'accent est l'or du logo, relevé au niveau de ses hautes lumières */
  --hot:#f0c97c; --gold-deep:#d5a05f;
  /* la marque « terminé » prend la couleur de l'univers, pas un vert générique */
  --uni:#4d9fff;
  /* six encres d'ère : la page se noie dedans, une région à la fois */
  --era1:#0f6d63; --era2:#a8331b; --era3:#2b2f6b; --era4:#8a6a12;
  --era5:#134a72; --era6:#5c2060;
  /* les trois entrées colorées de la nav */
  --c-doss:#a99cf9; --c-upc:#f06292; --c-news:#4fc3f7;
  /* badges de type, charte du site */
  --t-film:#64b5f6; --t-filmanim:#90caf9; --t-serie:#81c784;
  --t-anime:#ce93d8; --t-jeu:#ffb74d;
  --era:var(--era1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;overscroll-behavior-x:none}
body{background:var(--ink);color:var(--paper);
  font-family:'Chivo','Chivo repli',system-ui,sans-serif;font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;overflow-x:clip;overscroll-behavior-x:none;
  /* la barre du bas se mesure : elle passe sur deux lignes en etroit */
  padding-bottom:calc(var(--hud-h,50px) + 14px)}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}
::selection{background:var(--hot);color:var(--ink)}
:focus-visible{outline:3px solid var(--hot);outline-offset:3px}
.disp{font-family:'Big Shoulders Display','BSD repli',sans-serif;font-weight:900;
  text-transform:uppercase;line-height:.9;letter-spacing:.005em}
/* l'ombre décalée dure : réservée aux grands titres, jamais aux entrées —
   sur une bulle elle débordait de la case et passait sur le titre voisin */
.off{text-shadow:4px 4px 0 var(--ink)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--hot);color:var(--ink);
  font-weight:700;padding:10px 16px}
.skip:focus{left:0}

/* ══ trame de demi-teinte : matière du monde, posée sur les visuels ══ */
.halftone{position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(13,11,18,.34) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply}

/* ══ bandeau ═══════════════════════════════════════════════════════ */
header{position:sticky;top:0;z-index:60;background:var(--ink);border-bottom:2px solid var(--paper)}
header .wrap{display:flex;align-items:center;gap:14px;padding-top:9px;padding-bottom:9px}
/* Le logo se retracte : a 375 px, ses 260 px plus le drapeau, le burger
   et les gouttieres reclamaient 410 px, et l'en-tete sortait de l'ecran
   par la droite. `flex:0 1 auto` avec `min-width:0` le laisse rendre les
   pixels de trop, et `height:auto` lui garde ses proportions. */
.brand{display:flex;align-items:center;text-decoration:none;flex:0 1 260px;min-width:0}
.brand img{width:100%;height:auto;aspect-ratio:1143/101;max-height:23px}
.nav-links{display:flex;gap:14px;margin-left:18px;flex-wrap:wrap}
.nav-links a{font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:16px;
  text-transform:uppercase;letter-spacing:.07em;color:rgba(255,253,247,.7);text-decoration:none;
  padding:2px 0;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--paper);border-bottom-color:var(--paper)}
.nav-links a[aria-current]{color:var(--hot);border-bottom-color:var(--hot)}
.nav-links a.doss,.drawer a.doss{color:var(--c-doss)}
.nav-links a.upc,.drawer a.upc{color:var(--c-upc)}
.nav-links a.news,.drawer a.news{color:var(--c-news)}
.nav-links a.doss:hover{border-bottom-color:var(--c-doss)}
.nav-links a.upc:hover{border-bottom-color:var(--c-upc)}
.nav-links a.news:hover{border-bottom-color:var(--c-news)}
.nav-links a.doss:hover,.nav-links a.upc:hover,.nav-links a.news:hover{filter:brightness(1.2)}
.nav-tools{margin-left:auto;display:flex;gap:8px;align-items:center}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
  background:none;border:2px solid var(--line);color:var(--paper);cursor:pointer;padding:0}
.icon-btn:hover{border-color:var(--paper)}
/* le drapeau se passe de cadre : c'est déjà une forme fermée */
.lang-btn{border:0;width:auto;height:auto;padding:2px}
.lang-btn:hover{border:0;transform:translateY(-1px)}
.lang-btn svg{width:38px;height:auto;display:block;box-shadow:0 0 0 2px rgba(13,11,18,.6)}
.burger{display:none}
.burger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:square}
/* Un bouton, deux dessins : les trois barres tant que le tiroir est ferme,
   la croix des qu'il s'ouvre. C'est `aria-expanded`, deja pose par le
   script de chaque page, qui commande — rien a ajouter cote JS. */
.burger .x{display:none}
.burger[aria-expanded=true] .m{display:none}
.burger[aria-expanded=true] .x{display:block}
/* ── PLUS D'UNIVERS : le deroulant du menu ─────────────────────────
   Six univers en clair debordaient la barre. Trois restent — ce sont les
   trois plus consultes —, les trois autres passent sous un bouton.
   <details> le fait sans une ligne de JS et se pilote au clavier. */
.nav-more{position:relative}
.nav-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:16px;text-transform:uppercase;
  letter-spacing:.07em;color:rgba(255,253,247,.7);padding:2px 0;
  border-bottom:2px solid transparent}
.nav-more>summary::-webkit-details-marker{display:none}
.nav-more>summary::after{content:'';width:6px;height:6px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.nav-more>summary:hover{color:var(--paper);border-bottom-color:var(--paper)}
.nav-more[open]>summary{color:var(--paper);border-bottom-color:var(--paper)}
.nav-more[open]>summary::after{transform:translateY(1px) rotate(225deg)}
.nav-more:has(a[aria-current])>summary{color:var(--hot);border-bottom-color:var(--hot)}
.more-pop{position:absolute;top:calc(100% + 10px);left:-13px;z-index:70;min-width:192px;
  background:var(--ink);border:2px solid var(--paper);padding:4px 0;
  box-shadow:0 9px 0 rgba(13,11,18,.5)}
.more-pop a{display:block;padding:9px 15px;font-family:'Big Shoulders Display','BSD repli';font-weight:800;
  font-size:16px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,253,247,.78);
  text-decoration:none;white-space:nowrap;border-bottom:0}
.more-pop a:hover{background:var(--paper);color:var(--ink)}
.more-pop a[aria-current]{color:var(--hot)}
/* ── LE TIROIR : les six univers d'abord, en deux colonnes ─────────
   Dix liens pleine largeur faisaient defiler le menu lui-meme. Les univers
   passent en grille — leur pastille les distingue plus vite que leur nom —
   et les quatre pages du site suivent dessous, a l'ancienne taille. */
.drawer{display:none;border-bottom:2px solid var(--paper);background:var(--ink);
  max-height:calc(100vh - var(--hh,53px));overflow-y:auto}
.drawer.open{display:block}
.drawer a[aria-current]{color:var(--hot)}
.dw-lab{display:block;padding:11px 20px 5px;font-family:'Big Shoulders Display','BSD repli';font-weight:800;
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,253,247,.44)}
.dw-uni{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 16px 12px}
.dw-uni a{display:flex;align-items:center;gap:8px;padding:10px 9px;text-decoration:none;
  font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:16.5px;text-transform:uppercase;
  letter-spacing:.04em;line-height:1.05;color:rgba(255,253,247,.86);border:2px solid var(--line)}
.dw-uni a:hover{border-color:var(--paper);color:var(--paper)}
.dw-uni a i{width:10px;height:10px;flex:0 0 auto;background:var(--k)}
.u-sw{--k:#4d9fff}.u-mcu{--k:#e23636}.u-dc{--k:#f5c842}
.u-av{--k:#7dd3fc}.u-st{--k:#b48cf2}.u-twd{--k:#a8bf4f}.u-da{--k:#e07b39}.u-ac{--k:#d4a02c}.u-dca{--k:#2dd4bf}.u-jw{--k:#45c46b}.u-wi{--k:#b0bec5}.u-re{--k:#dc0000}.u-br{--k:#ff5f1f}
.dw-uni a[aria-current]{border-color:var(--k);color:var(--k)}
.dw-site{border-top:2px solid rgba(255,253,247,.14)}
.dw-site a{display:block;padding:11px 20px;font-family:'Big Shoulders Display','BSD repli';font-weight:800;
  font-size:21px;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;
  border-top:2px solid rgba(255,253,247,.14)}
.dw-site a:first-child{border-top:0}

/* ══ PREMIER ÉCRAN ═════════════════════════════════════════════════ */
.attract{position:relative;overflow:hidden;border-bottom:2px solid var(--paper);
  min-height:min(60vh,520px);display:flex;align-items:flex-end}
/* Deux plans tirés du même fichier : la profondeur ne coûte donc pas un
   octet de plus. Les débords restent courts — au-delà, `cover` sur-zoome
   la bannière et le visuel part en bouillie. */
.plane{position:absolute;inset:0 -2%;background-size:cover;background-position:center;
  background-image:url(/images/starwars-banner.webp)}
.plane.p1{filter:saturate(.42) brightness(.5) blur(2px)}
.plane.p2{inset:0 -4%;filter:saturate(1.05) contrast(1.12);opacity:.55;
  clip-path:polygon(0 34%,100% 6%,100% 100%,0 100%)}
.veil{position:absolute;inset:0;
  background:linear-gradient(to top,var(--ink) 2%,
             color-mix(in srgb,#4d9fff 46%,var(--ink)) 38%,
             color-mix(in srgb,var(--era3) 40%,transparent))}
.attract .wrap{position:relative;z-index:2;padding-top:56px;padding-bottom:28px}
.attract h1{font-size:clamp(50px,11vw,140px)}.attract h1 .nm{display:block;max-width:6.08em;margin-inline:auto}.attract h1 .tag{display:block;width:max-content;max-width:100%;margin-inline:auto;text-shadow:none;line-height:1}
.tag{display:inline-block;background:var(--paper);color:var(--ink);
  font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 12px;margin-bottom:15px;
  clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.dek{margin-top:15px;font-size:17px;color:rgba(255,253,247,.92)}
.dek b{display:block;color:var(--paper);font-weight:700;margin-top:4px}
.upd{margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,253,247,.66);display:flex;align-items:center;gap:7px}
.upd i{width:8px;height:8px;background:var(--uni);display:block}

/* La barre de stats : le compte des médias, en haut, avant tout le reste.
   Une seule ligne, toujours — cinq tuiles empilées en deux rangs, ce n'est
   plus une barre. Les tuiles se resserrent au lieu de passer à la ligne. */
.stats{display:flex;flex-wrap:nowrap;gap:0;margin-top:20px;border:2px solid var(--paper);
  background:rgba(13,11,18,.62);width:fit-content;max-width:100%}
.stats .s{padding:9px 18px;border-right:2px solid var(--paper);min-width:0;flex:0 1 auto}
.stats .s:last-child{border-right:0}
.stats b{display:block;font-family:'Big Shoulders Display','BSD repli';font-weight:900;font-size:30px;
  line-height:.9;color:var(--hot);white-space:nowrap}
.stats span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,253,247,.78);margin-top:3px}
.start{display:inline-flex;align-items:center;gap:11px;margin-top:20px;
  background:var(--hot);color:var(--ink);text-decoration:none;
  font-family:'Big Shoulders Display','BSD repli';font-weight:900;font-size:22px;letter-spacing:.06em;
  text-transform:uppercase;padding:12px 22px;border:0;cursor:pointer;
  clip-path:polygon(0 0,100% 0,calc(100% - 13px) 100%,0 100%);
  transition:transform .09s cubic-bezier(.2,.9,.3,1)}
.start:hover{transform:translate(-3px,-3px)}
.start em{font-style:normal;animation:blink 1.5s steps(1,end) infinite}
@keyframes blink{50%{opacity:.25}}

/* ══ INTRO : la prose de la page, ses repères, ses omissions ════════ */
.intro{padding:34px 0 8px}
.intro-lead{font-size:16.5px;color:rgba(255,253,247,.9);margin-bottom:12px}
.intro-tags{margin:16px 0 6px}
.itag{display:inline-flex;align-items:flex-start;gap:9px;background:rgba(77,159,255,.13);
  border-left:4px solid var(--uni);padding:9px 14px;font-size:14px;font-weight:600}
.itag svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:var(--uni);stroke-width:2.6;
  stroke-linecap:square;margin-top:1px}
.keys-title{font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:22px;
  text-transform:uppercase;letter-spacing:.05em;margin:26px 0 12px;color:var(--hot)}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:13px}
.key{border:2px solid var(--line);background:rgba(255,253,247,.035);padding:14px 16px 15px}
.key-h{display:flex;align-items:center;gap:9px;font-family:'Big Shoulders Display','BSD repli';
  font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}
.key-h svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:var(--hot);stroke-width:2;
  stroke-linecap:square}
.key p{font-size:13.5px;color:rgba(255,253,247,.82)}
.key strong{color:var(--paper)}
.cuts{margin-top:20px;border:2px solid var(--line)}
.cuts>summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;
  padding:12px 16px;font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:20px;
  text-transform:uppercase;letter-spacing:.05em}
.cuts>summary::-webkit-details-marker{display:none}
.cuts>summary:hover{background:rgba(255,253,247,.05)}
.cuts .n{font-family:'Chivo','Chivo repli';font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:var(--paper);color:var(--ink);padding:3px 9px}
.cuts .chev{width:20px;height:20px;margin-left:auto;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:square;transition:transform .18s}
.cuts[open] .chev{transform:rotate(180deg)}
.cuts-body{padding:4px 16px 18px;border-top:2px solid var(--line)}
.cuts-intro{font-size:14px;color:rgba(255,253,247,.8);margin:12px 0 14px}
.cuts-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:12px}
.cut{border-left:3px solid var(--hot);padding-left:12px}
.cut dt{font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:18px;
  text-transform:uppercase;letter-spacing:.03em}
.cut dd{font-size:13px;color:rgba(255,253,247,.78);margin-top:3px}

/* ══ les deux parcours ══════════════════════════════════════════════
   La question se pose une fois, à l'arrivée, au centre de l'écran et le
   reste flouté : `dialog.ask`. Elle ne se repose plus ensuite — le choix
   vit sous le bouton d'entrée, en bascule, `.par`, et se reprend à tout
   moment. `margin:auto` est rappelé : `*{margin:0}` décolle sinon le
   dialogue en haut à gauche. */
.ask{margin:auto;border:2px solid var(--paper);background:var(--ink);color:var(--paper);
  padding:0;max-width:600px;width:calc(100% - 32px);box-shadow:8px 8px 0 rgba(0,0,0,.55)}
.ask:focus-visible{outline:none}
.ask::backdrop{background:rgba(8,8,12,.62);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
/* Refait le 28 septembre 2026 au dessin du plan de métro : un bandeau de
   quai à l'encre de l'univers, et chaque parcours est une voie — son
   numéro dans un rond de ligne, son nom dessous. Les deux libellés ajoutés (le bandeau et « Voie ») sont en CSS,
   avec leur version anglaise : ils n'ont rien à faire au lexique. */
.ask::before{content:'Choisissez votre voie';display:block;background:var(--uni);color:var(--ink);
  font-family:'Big Shoulders Display','BSD repli';font-weight:900;font-size:13px;letter-spacing:.24em;
  text-transform:uppercase;padding:8px 22px 7px;border-bottom:2px solid var(--paper)}
html[lang=en] .ask::before{content:'Choose your track'}
.ask b{display:block;font-family:'Big Shoulders Display','BSD repli';font-weight:900;
  font-size:clamp(24px,6vw,31px);text-transform:uppercase;letter-spacing:.02em;line-height:1.02;
  color:var(--paper);text-align:center;padding:22px 26px 0;text-shadow:3px 3px 0 #000}
.ask-b{display:flex;gap:12px;padding:20px 22px 24px;counter-reset:voie}
.ask-b button{flex:1 1 0;min-width:0;counter-increment:voie;display:flex;flex-direction:column;
  align-items:center;gap:10px;font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:18px;
  letter-spacing:.05em;text-transform:uppercase;line-height:1.05;background:rgba(255,253,247,.04);
  border:2px solid var(--line);color:var(--paper);padding:14px 10px 16px;cursor:pointer;
  transition:transform .1s,box-shadow .1s,border-color .1s}
.ask-b button::before{content:counter(voie);display:grid;place-items:center;width:42px;height:42px;
  border-radius:50%;background:var(--uni);color:var(--ink);border:3px solid var(--paper);
  box-shadow:0 0 0 2px var(--ink);font-weight:900;font-size:23px;letter-spacing:0;line-height:1}
.ask-b button:hover,.ask-b button:focus-visible{border-color:var(--uni);transform:translate(-3px,-3px);
  box-shadow:4px 4px 0 var(--uni);outline:none}
@media(max-width:520px){
  .ask-b{flex-direction:column;gap:10px;padding:18px 16px 20px}
  .ask-b button{flex-direction:row;gap:14px;padding:10px 14px;text-align:left;font-size:17px}
  .ask-b button::before{width:36px;height:36px;font-size:20px;flex:none}
  .ask-b button::after{content:'▸';margin-left:auto;color:var(--uni);font-size:18px}
}
@media(prefers-reduced-motion:reduce){.ask-b button{transition:none}}
.par{display:flex;justify-content:center;margin-top:15px}
.par-b{display:inline-flex;border:2px solid var(--paper)}
.par-b button{font-family:'Chivo','Chivo repli';font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;background:none;color:rgba(255,253,247,.8);
  border:0;padding:7px 13px;cursor:pointer}
.par-b button+button{border-left:2px solid var(--paper)}
.par-b button:hover{color:var(--paper)}
.par-b button[aria-pressed="true"]{background:var(--hot);color:var(--ink)}
/* L'accroche dit lequel des trois parcours on suit. Les trois phrases sont
   dans les données — écrites, donc traduisibles — et c'est le parcours en
   cours qui en montre une. Rien à réécrire en JS.
   Masquer par défaut et rallumer celle du parcours, plutôt que d'éteindre
   les deux autres : au troisième parcours la liste des `:not()` devenait
   l'endroit où l'on oublie un cas, et un oubli montre deux accroches
   contradictoires sans une ligne dans la console. */
.pc-first,.pc-rewatch,.pc-release{display:none}
body[data-parcours="first"] .pc-first,
body[data-parcours="rewatch"] .pc-rewatch,
body[data-parcours="release"] .pc-release{display:inline-flex}

/* ══ filtres, recherche, repères ════════════════════════════════════ */
.sieve{border-top:2px solid var(--paper);border-bottom:2px solid var(--paper);background:var(--ink);
  position:sticky;top:var(--hh,53px);z-index:50}
.sieve .wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  padding-top:10px;padding-bottom:10px}
.sgroup{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.sgroup>.lab{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,253,247,.5);margin-right:2px}
.sieve button{font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:14.5px;
  letter-spacing:.07em;text-transform:uppercase;background:none;border:2px solid var(--line);
  color:rgba(255,253,247,.76);padding:5px 11px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.sieve button:hover{border-color:var(--paper);color:var(--paper)}
.sieve button[aria-pressed=true]{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.sieve button i{width:9px;height:9px;background:var(--k,var(--paper));display:block}
.sieve button[aria-pressed=true] i{background:var(--k,var(--ink))}
.sieve .last{margin-left:auto}
/* la recherche : un champ franc, pas une pilule */
.search{display:flex;align-items:center;gap:8px;border:2px solid var(--line);
  padding:4px 9px;min-width:224px;flex:0 1 296px}
.search:focus-within{border-color:var(--hot)}
.search svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:rgba(255,253,247,.62);
  stroke-width:2.2;stroke-linecap:square}
.search input{flex:1;min-width:0;background:none;border:0;color:var(--paper);
  font-family:'Chivo','Chivo repli';font-size:14px;padding:3px 0}
.search input:focus{outline:none}
.search input::placeholder{color:rgba(255,253,247,.44)}
.search button{border:0;padding:0 4px;font-size:14px;line-height:1;color:rgba(255,253,247,.6);
  display:none}
.search button:hover{color:var(--paper);border:0}
.search.on button{display:block}
.fcount{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,253,247,.6)}
.marks{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,253,247,.5)}
/* Les repères ne filtrent rien : ils légendent. Ils passent donc sous la
   ligne des filtres, sur leur propre rangée, avec le masquage des vus et le
   compte poussés à droite — même disposition que Marvel et DC. */
.srow{flex:1 0 100%;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:1px}
.srow .marks{flex-wrap:wrap}

/* ══ BANDE D'ÈRE : parallaxe multiplane liée au défilement ══════════ */
.era-sec[hidden]{display:none}
.map{position:relative;overflow:hidden;background:var(--era);
  border-top:2px solid var(--paper);border-bottom:2px solid var(--paper)}
.map .layers{position:absolute;inset:0}
.map .lay{position:absolute;inset:-7% 0;background-size:cover;background-position:center}
.map .lay1{filter:saturate(.4) brightness(.55) blur(1.5px);opacity:.85}
.map .lay2{filter:saturate(.9) contrast(1.14);opacity:.42;
  clip-path:polygon(0 42%,100% 12%,100% 100%,0 100%)}
.map .tint{position:absolute;inset:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--era) 30%,transparent),
             color-mix(in srgb,var(--era) 88%,transparent))}
.map .wrap{position:relative;z-index:2;padding:46px 20px 28px}
.map .chev{font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;display:inline-block;
  background:var(--paper);color:var(--ink);padding:4px 11px;
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.map h2{font-size:clamp(32px,6vw,72px);margin:12px 0 6px}
.map .meta{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.map .meta b{color:var(--hot)}

/* ══ LES BULLES : une par ligne, image à gauche, titre à droite ═════ */
.list{background:color-mix(in srgb,var(--era) 16%,var(--ink));padding:20px 0 34px}
.rows{display:flex;flex-direction:column;gap:10px}
.bu{position:relative;display:flex;align-items:flex-start;gap:10px}
.bu[hidden]{display:none}
/* la colonne de gauche : la case, et sous elle le niveau d'importance */
.bu-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;
  margin-top:12px;width:34px}
.bu-side .lv{display:block;line-height:0}
.ic{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:miter;stroke-linecap:square}
.bu-side .ic{width:25px;height:25px}
.lv.must{color:var(--hot)}
.lv.imp{color:#ff9d5c}
.sieve .ic{width:15px;height:15px}
.sieve button.must{color:var(--hot)}
.sieve button.imp{color:#ff9d5c}
.sieve button.must[aria-pressed=true],.sieve button.imp[aria-pressed=true]{color:var(--ink)}
/* la case à cocher : c'est elle, et elle seule, qui fait tomber le tampon */
.bu-chk{width:30px;height:30px;background:none;cursor:pointer;
  border:2px solid #7e7ea8;box-shadow:0 0 0 1px rgba(126,126,168,.25);
  display:grid;place-items:center;padding:0;color:transparent;
  transition:border-color .1s steps(1,end),background-color .1s steps(1,end)}
.bu-chk svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:3.4;
  stroke-linecap:square}
.bu-chk:hover{border-color:var(--uni)}
.bu-chk[aria-checked=true]{background:var(--uni);border-color:var(--uni);color:var(--ink)}
.bu-card{flex:1;min-width:0;position:relative;border:2px solid var(--line);
  background:rgba(13,11,18,.5);
  transition:border-color .08s steps(1,end),transform .09s cubic-bezier(.2,.9,.3,1)}
.bu-card:hover{border-color:var(--hot);transform:translate(-3px,-3px)}
.bu.done .bu-card{border-color:var(--uni)}
.bu-head{display:flex;gap:14px;width:100%;background:none;border:0;color:inherit;font:inherit;
  text-align:left;cursor:pointer;padding:10px 12px}
/* 16/9 : le ratio natif des visuels d'entrée, donc aucun recadrage */
.bu-fig{position:relative;flex:0 0 auto;width:190px;aspect-ratio:16/9;overflow:hidden;
  background:var(--ink);align-self:flex-start}
.bu-fig img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.72) contrast(1.05);transition:filter .2s,transform .3s ease-out}
.bu-card:hover .bu-fig img{transform:scale(1.035);filter:saturate(1) contrast(1.08)}
.bu-n{position:absolute;top:0;left:0;z-index:2;background:var(--ink);color:var(--paper);
  font-family:'Big Shoulders Display','BSD repli';font-weight:900;font-size:17px;padding:1px 9px 0;
  clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.bu-txt{flex:1;min-width:0;display:block}
.bu-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px}
.b{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:2px 8px;color:var(--ink);background:var(--k,var(--paper));
  clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.ft{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:2px 8px;color:var(--hot);border:1px solid var(--hot)}
.bu-title{display:block;font-family:'Big Shoulders Display','BSD repli';font-weight:700;font-size:23px;
  line-height:1.02;text-transform:uppercase}
.bu-meta{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:6px;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,253,247,.74)}
/* la date in-universe situe l'entrée : c'est la deuxième information de la
   ligne, elle se lit d'un coup d'œil */
.bu-meta .d{font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:21px;
  letter-spacing:.03em;color:var(--hot);line-height:1}
/* L'ANNÉE DE SORTIE, dans son encadré, à côté — la disposition des deux
   dates d'Assassin's Creed, à l'encre de l'univers plutôt qu'à la sienne.
   L'or reste au grand nombre : c'est l'accent de la page, il va à ce qui
   se lit d'abord, et l'ordre de sortie ne change pas ça — il range la
   liste, la date de l'univers continue de dire ce qu'on va voir.
   L'encadré ne se pose QUE dans ce parcours-là : les entrées des deux
   autres n'ont pas de champ `rel`, et un cadre vide se lirait comme une
   donnée manquante. */
.bu-meta .rel{display:inline-flex;align-items:baseline;gap:7px;padding:3px 9px;
  border:1px solid color-mix(in srgb,var(--uni) 46%,transparent);
  background:color-mix(in srgb,var(--uni) 13%,transparent);
  font-size:10px;letter-spacing:.1em;color:var(--uni);white-space:nowrap}
.bu-meta .rel i{font-style:normal;font-weight:800;
  color:color-mix(in srgb,var(--uni) 74%,transparent)}
.bu-meta .rel b{font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:18px;
  letter-spacing:.03em;line-height:1;color:var(--uni)}
/* LES DEUX DATES SE LISENT CÔTE À CÔTE, À TOUTE LARGEUR, et c'est le repli
   qu'Assassin's Creed a déjà payé : sous 560 px la colonne de texte tombe à
   100 px — la vignette en prend 128 — et le cadre, qui ne se coupe pas,
   passait sous le grand nombre. Séparées sur deux lignes, les deux dates
   n'ont plus l'air d'un couple.

   Trois gestes, les siens : la vignette devient fluide et rend la place, le
   mot « Sortie » quitte le cadre — une quarantaine de pixels pour redire ce
   que l'encre bleue dit déjà, là où l'année en fait soixante — et les corps
   se resserrent d'un cran de plus sous 400 px. Le libellé revient au-dessus
   de 560. `flex-wrap:nowrap` n'est pas une précaution : c'est lui qui
   empêche le cadre de retomber à la ligne.

   Ciblé sur le parcours par ordre de sortie : lui seul porte un cadre, et
   rétrécir la vignette des deux autres pour une place qu'ils n'occupent
   pas serait payer un repli sans contrepartie. */
@media(max-width:560px){
  body[data-parcours="release"] .bu-fig{width:clamp(64px,23vw,96px)}
  body[data-parcours="release"] .bu-meta{gap:6px;flex-wrap:nowrap}
  /* la durée aussi : sur une ligne qui ne s'enroule plus, c'est elle qui
     encaisse la place qui manque, et « 40 h 56 » sortait sur trois lignes
     dans dix-sept pixels de large */
  body[data-parcours="release"] .bu-meta>span{white-space:nowrap}
  body[data-parcours="release"] .bu-meta .d{font-size:16px}
  body[data-parcours="release"] .bu-meta .rel{padding:1px 6px;gap:4px}
  body[data-parcours="release"] .bu-meta .rel i{display:none}
  body[data-parcours="release"] .bu-meta .rel b{font-size:13px}
}
/* Sous 400 px, LA DURÉE PASSE À LA LIGNE et les deux dates restent
   ensemble. C'est le seul des trois qu'on puisse déplacer : le couple ne
   se lit que côte à côte, et il ne se comprime plus — « 22–19 BBY »,
   « 2008-2020 » et « 40 h 56 » réclamaient dix-neuf pixels de plus que la
   carte n'en a, et c'est The Clone Wars, le pire cas du guide. Star Wars
   a ici une mesure de plus qu'Assassin's Creed, qui ne compte pas le
   temps et s'arrête donc à deux. */
@media(max-width:400px){
  body[data-parcours="release"] .bu-meta{gap:4px 5px;flex-wrap:wrap}
  body[data-parcours="release"] .bu-meta>span:not(.d):not(.rel){flex:1 0 100%}
  body[data-parcours="release"] .bu-meta .d{font-size:14px}
  body[data-parcours="release"] .bu-meta .rel{padding:1px 5px;gap:3px}
  body[data-parcours="release"] .bu-meta .rel b{font-size:11px}
}
/* Un cran de plus sous 360 px, et c'est la vignette qui rend la place —
   il manquait dix-neuf pixels à « 20 BBY – 9 ABY » plus son encadré sur
   un écran de 320. Le palier ne descend pas plus bas que 360 : à 375 le
   couple a déjà trente pixels de marge, et rétrécir l'image là où rien ne
   le demande se paierait sur toutes les cartes. */
@media(max-width:360px){
  body[data-parcours="release"] .bu-fig{width:clamp(52px,17vw,96px)}
  body[data-parcours="release"] .bu-meta .d{font-size:13px}
}
.bu-note{display:block;font-size:12.5px;color:rgba(255,253,247,.7);margin-top:6px;
  font-style:italic}
.bu-end{flex:0 0 auto;display:flex;align-self:center}
.bu-end svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:square;transition:transform .18s;color:rgba(255,253,247,.66)}
.bu-head[aria-expanded=true] .bu-end svg{transform:rotate(180deg)}
/* Saisons et épisodes, toujours visibles. Deux dispositions, parce que les
   données sont de deux natures : quand ce sont des épisodes unitaires, ils
   forment des arcs narratifs et se lisent en ligne, un arc par bande ; quand
   ce sont des blocs entiers (« Saison 1 », « Saison 2 épisodes 10-22 »), ils
   s'empilent, chacun sur sa ligne. Un arc de 6 épisodes qui déborde reste
   groupé : c'est la bande qui le tient, pas l'alignement. */
.bu-sub{display:flex;flex-direction:column;padding:0 12px 11px 216px}
.arc{display:flex;flex-wrap:wrap;gap:5px;padding:5px 0;
  border-top:1px solid rgba(255,253,247,.38)}
.arc:first-child{border-top:0;padding-top:0}
.bu-sub.stack .arc{padding:3px 0}
.si{font-size:11.5px;font-weight:600;padding:2px 8px;background:rgba(255,253,247,.08);
  border-left:2px solid var(--line)}
/* le lien de partage de l'entrée */
.bu-link{position:absolute;top:9px;right:9px;z-index:4;width:26px;height:26px;display:grid;
  place-items:center;color:rgba(255,253,247,.5);text-decoration:none;opacity:0;
  transition:opacity .15s}
.bu-card:hover .bu-link,.bu-link:focus-visible{opacity:1}
.bu-link:hover{color:var(--hot)}
.bu-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:square}
.bu-link.ok::after{content:attr(data-ok);position:absolute;right:0;top:100%;white-space:nowrap;
  background:var(--hot);color:var(--ink);font-size:10px;font-weight:700;padding:2px 7px;
  letter-spacing:.06em;text-transform:uppercase}

/* état terminé : tampon dur, image dessaturée, couleur de l'univers.
   Le tampon vit DANS la figure — posé sur la bulle, il était décalé du
   rembourrage de la carte et ne tombait pas au centre du visuel. */
.bu-done{position:absolute;inset:0;z-index:3;display:none;place-items:center;
  pointer-events:none}
.bu-done span{font-family:'Big Shoulders Display','BSD repli';font-weight:900;font-size:19px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--uni);
  padding:3px 11px;transform:rotate(-4deg);border:2px solid var(--ink)}
.bu.done .bu-done{display:grid}
.bu.done .bu-fig img{filter:saturate(.08) contrast(1.12) brightness(.6)}
.bu.done .bu-title{color:rgba(255,253,247,.72)}

/* ══ le dépliant : fiche TMDB / RAWG puis FAQ ═══════════════════════ */
.bu-panel{border-top:2px solid var(--line);padding:14px 12px 14px}
.bu-panel[hidden]{display:none}
.expand-loading{font-size:13px;color:rgba(255,253,247,.6)}
.expand-inner{display:flex;gap:15px;align-items:flex-start;flex-wrap:wrap}
.expand-poster{flex:0 0 auto;width:118px;border:2px solid var(--line);background:none;
  padding:0;cursor:zoom-in;position:relative;display:block}
.expand-poster img{width:100%;display:block}
.expand-poster-ov{position:absolute;right:4px;bottom:4px;font-size:13px;
  background:rgba(13,11,18,.8);padding:1px 5px}
.expand-info{flex:1;min-width:240px}
.expand-synopsis{font-size:13.5px;color:rgba(255,253,247,.86)}
.expand-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;
  color:rgba(255,253,247,.72)}
.expand-meta strong{color:var(--hot);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  margin-right:5px}
.expand-trailer-link{display:inline-block;margin-top:12px;background:var(--hot);color:var(--ink);
  font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;padding:6px 13px;text-decoration:none;
  clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.expand-trailer-link:hover{filter:brightness(1.1)}
.en-faq{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.faq{border-left:3px solid var(--uni);background:rgba(77,159,255,.07)}
.faq>summary{cursor:pointer;list-style:none;padding:8px 12px;font-size:13.5px;font-weight:700}
.faq>summary::-webkit-details-marker{display:none}
.faq>summary::before{content:'+ ';color:var(--uni);font-weight:900}
.faq[open]>summary::before{content:'– '}
.faq .a{padding:0 12px 10px;font-size:13px;color:rgba(255,253,247,.82)}

/* la visionneuse d'affiche */
.pm{position:fixed;inset:0;z-index:120;background:rgba(13,11,18,.92);display:none;
  place-items:center;padding:24px}
.pm.o{display:grid}
.pm img{max-width:min(92vw,520px);max-height:88vh;border:2px solid var(--paper)}
.pm-x{position:absolute;top:14px;right:16px;background:var(--paper);color:var(--ink);border:0;
  font-size:19px;width:38px;height:38px;cursor:pointer}

.empty{padding:44px 0;font-size:15px;color:rgba(255,253,247,.7)}
.empty[hidden]{display:none}

/* ══ révélation au défilement ══════════════════════════════════════ */
/* Aucun masquage par défaut, et surtout aucun masquage piloté par JS : une
   bulle cachée en attendant un événement qui ne vient pas, c'est une page
   vide. L'entrée est une animation liée au défilement, donc purement CSS —
   là où animation-timeline manque, les bulles sont simplement là. */

/* La parallaxe multiplane est liée au défilement, en CSS natif. Là où
   animation-timeline manque, les plans restent simplement fixes — la page
   ne perd rien d'essentiel. */
@supports (animation-timeline: view()){
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .rv{animation:rise linear both;animation-timeline:view();
      animation-range:entry 4% cover 14%}
  @keyframes glide1{from{transform:translateY(-3.5%)}to{transform:translateY(3.5%)}}
  @keyframes glide2{from{transform:translateY(-8%) scale(1.03)}to{transform:translateY(6%) scale(1.03)}}
  @keyframes riseTitle{from{transform:translateY(18px)}to{transform:translateY(-10px)}}
  .map .lay1{animation:glide1 linear both;animation-timeline:view();animation-range:cover}
  .map .lay2{animation:glide2 linear both;animation-timeline:view();animation-range:cover}
  .map .wrap{animation:riseTitle linear both;animation-timeline:view();animation-range:cover}
  .attract .plane{animation:glide1 linear both;animation-timeline:view();animation-range:cover}
  .attract .plane.p2{animation:glide2 linear both;animation-timeline:view();animation-range:cover}
}

/* ══ pied ══════════════════════════════════════════════════════════ */
footer{border-top:2px solid var(--paper);background:var(--ink);padding:30px 0 34px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px;max-width:1280px;margin:0 auto;padding:0 20px}
.foot h4{font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:19px;text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:9px;color:var(--hot)}
.foot p{font-size:13px;color:rgba(255,253,247,.72)}
.foot ul{list-style:none}
.foot li{margin-bottom:5px}
.foot a{font-size:13px;font-weight:600;color:rgba(255,253,247,.78);text-decoration:none}
.foot a:hover{color:var(--paper);text-decoration:underline}
.legal{grid-column:1/-1;border-top:2px solid var(--line);padding-top:14px;
  font-size:11.5px;color:rgba(255,253,247,.5);line-height:1.6}
.legal a{font-size:11.5px;color:rgba(255,253,247,.62);text-decoration:underline}

/* ══ Grogu : le retour en haut ═════════════════════════════════════ */
/* Sans trame ni désaturation : l'effet des visuels le salissait. */
#totop{position:fixed;right:16px;bottom:calc(var(--hud-h,50px) + 28px);z-index:75;width:96px;height:96px;padding:0;
  background:none;border:0;cursor:pointer;opacity:0;pointer-events:none;
  transform:translateY(10px);transition:opacity .2s,transform .2s}
#totop.on{opacity:1;pointer-events:auto;transform:none}
#totop span{position:relative;display:block;width:96px;height:96px}
#totop img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#totop .hv{opacity:0}
#totop:hover .nl{opacity:0}
#totop:hover .hv{opacity:1}

/* ══ barre de bas d'écran, dépliable : où j'en suis ═════════════════ */
.hud{position:fixed;bottom:0;left:0;right:0;z-index:80;background:var(--ink);
  border-top:2px solid var(--paper)}
.hud-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%;
  max-width:1280px;margin:0 auto;background:none;border:0;color:inherit;font:inherit;
  cursor:pointer;text-align:left;padding:9px 20px;
  padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))}
.hud.open .hud-bar{padding-bottom:9px}
.hud-bar b{font-family:'Big Shoulders Display','BSD repli';font-weight:900;font-size:21px;white-space:nowrap}
.hud-bar b em{font-style:normal;color:var(--uni)}
.hud .lbl{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,253,247,.66)}
.hud .bar{flex:1;min-width:110px;height:10px;border:2px solid var(--paper);position:relative}
.hud .bar i{position:absolute;inset:0;background:var(--uni);transform:scaleX(0);
  transform-origin:left center;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.hud-bar .ch{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:square;transition:transform .18s;margin-left:auto}
.hud.open .hud-bar .ch{transform:rotate(180deg)}
.hud-panel{border-top:2px solid var(--line);
  padding:16px 20px calc(18px + env(safe-area-inset-bottom,0px))}
.hud-panel[hidden]{display:none}
/* Le dépliant ne répète pas les compteurs : ils sont déjà sur la barre,
   juste au-dessus. Il ne porte que les actions et la phrase, centrées. */
.hud-in{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;
  align-items:center;gap:4px}
.pacts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:7px;background:none;border:2px solid var(--line);
  color:var(--paper);font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;padding:7px 13px;cursor:pointer}
.btn:hover{border-color:var(--paper)}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:square}
.btn.danger{color:#ff8f8f;border-color:rgba(255,143,143,.5)}
.btn.danger:hover{border-color:#ff8f8f}
.phint{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;
  text-align:center;font-size:12.5px;color:rgba(255,253,247,.72)}
.phint svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--uni);stroke-width:2;
  stroke-linecap:square;margin-top:1px}
.phint b{color:var(--paper)}

/* ══ badges ════════════════════════════════════════════════════════ */
.bx{position:fixed;inset:0;z-index:130;background:rgba(13,11,18,.92);display:none;
  place-items:center;padding:22px}
.bx.o{display:grid}
.bx-in{background:var(--ink);border:2px solid var(--paper);max-width:660px;width:100%;
  max-height:86vh;overflow:auto;padding:20px}
.bx-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.bx-h h3{font-family:'Big Shoulders Display','BSD repli';font-weight:900;font-size:26px;text-transform:uppercase}
.bx-h .n{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--hot);color:var(--ink);padding:3px 9px}
.bx-h button{margin-left:auto;background:var(--paper);color:var(--ink);border:0;width:34px;
  height:34px;font-size:17px;cursor:pointer}
.bx-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:11px}
.bg1{border:2px solid var(--line);padding:13px;display:flex;gap:11px;align-items:flex-start;
  opacity:.42;filter:grayscale(1)}
.bg1.on{opacity:1;filter:none;border-color:var(--c)}
.bg1 .i{font-size:26px;line-height:1}
.bg1 .t{display:block;font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:17px;
  text-transform:uppercase;line-height:1.05}
.bg1 .d{display:block;font-size:11.5px;color:rgba(255,253,247,.72);margin-top:3px}

/* ══ badge débloqué : le carton et les confettis ═══════════════════ */
.bpop{position:fixed;left:50%;bottom:calc(var(--hud-h,50px) + 48px);z-index:141;transform:translate(-50%,18px);
  display:flex;gap:13px;align-items:center;padding:13px 18px;max-width:min(420px,calc(100vw - 24px));
  background:var(--ink);border:2px solid var(--c,var(--hot));
  box-shadow:6px 6px 0 rgba(13,11,18,.6);opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease}
.bpop.o{opacity:1;transform:translate(-50%,0)}
.bpop .i{font-size:32px;line-height:1;flex:0 0 auto}
.bpop .k{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c,var(--hot))}
.bpop .t{display:block;font-family:'Big Shoulders Display','BSD repli';font-weight:900;font-size:22px;
  text-transform:uppercase;line-height:1.05;margin-top:2px}
.bpop .d{display:block;font-size:11.5px;color:rgba(255,253,247,.72);margin-top:2px}
.conf{position:fixed;inset:0;z-index:140;pointer-events:none}

@media(max-width:1080px){
  .nav-links{display:none}
  .burger{display:grid}
  .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .bu-head{flex-wrap:wrap;gap:10px}
  .bu-fig{width:128px}
  .bu-title{font-size:19px}
  .bu-meta .d{font-size:19px}
  .bu-sub{padding-left:12px}
  .bu-side{width:30px;margin-top:10px}
  .bu-chk{width:26px;height:26px}
  .bu-side .ic{width:21px;height:21px}
  .stats .s{padding:8px 10px}
  .stats b{font-size:21px}
  .stats span{font-size:8.5px;letter-spacing:.04em}
  /* Le pied tenait 722 px de haut sur un telephone, presque un ecran
     entier : les deux listes passent cote a cote, le bloc de tete garde
     la largeur, et tout le reste se resserre. Rien n'est retire. */
  footer{padding:22px 0 24px}
  .foot{grid-template-columns:1fr 1fr;gap:15px 18px}
  .foot>div:first-child{grid-column:1/-1}
  .foot h4{font-size:16px;margin-bottom:5px}
  .foot p{font-size:12.5px;line-height:1.45;max-width:none}
  /* 12,5 px laissaient des cibles de 19 px de haut : un doigt vise
     24 px. Le rembourrage est vertical, d'ou l'`inline-block` — un
     lien reste `inline`, et un padding vertical n'y agrandit rien.
     Il ne vaut que pour les listes : TMDB et Open Library sont au
     milieu d'une phrase, et l'y appliquer ecartait ses lignes. */
  .foot li{margin-bottom:0}
  .foot a{font-size:12.5px}
  .foot li a{display:inline-block;padding:4px 0}
  .legal{padding-top:11px;font-size:10.5px;line-height:1.5}
  .legal a{font-size:10.5px}
  .icon-btn{width:44px;height:44px}
  .dw-site a{padding:13px 20px}
  .sieve .last{margin-left:0}
  .pacts{margin-left:0}
  #totop{width:74px;height:74px;bottom:calc(var(--hud-h,84px) + 20px)}
  #totop span{width:74px;height:74px}
  /* pleine largeur, et posé au-dessus de Grogu qui monte à 148 px du bas */
  .bpop{left:12px;right:12px;max-width:none;bottom:calc(var(--hud-h,84px) + 106px);transform:translateY(18px)}
  .bpop.o{transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
  .start em{opacity:1}
}

/* ══ CENTRAGE ══════════════════════════════════════════════════════
   Bandeaux, accroche, stats, intro et bandes d'ère au centre. Les
   fiches de médias, les filtres et le pied gardent leur alignement :
   une liste qu'on parcourt du regard se lit sur un bord franc. */
.attract .wrap{text-align:center}
.attract h1,.dek,.intro-lead{margin-left:auto;margin-right:auto}
.attract .head{justify-content:center}
/* dans un flex, une marge auto mange l espace : le titre pousserait le tag au bord */
.attract .head h1{margin-left:0;margin-right:0}
.upd{justify-content:center}
.crumb{margin-left:auto;margin-right:auto}
.stats{margin-left:auto;margin-right:auto}
.intro-lead{text-align:center}
.intro-tags{text-align:center}
.keys-title{text-align:center}
.key-h{justify-content:center}
.key p{text-align:center}
.map .wrap{text-align:center}
.map .meta{justify-content:center}
.pick h2,.pick .sub{text-align:center}
.pick .sub{margin-left:auto;margin-right:auto}
.slot .nm,.slot .body,.slot .d{text-align:center}
.score{justify-content:center;gap:16px}
.deep .wrap{justify-content:center;text-align:center}
.deep p{margin-left:auto;margin-right:auto}
.deep .go{margin-left:0}
/* ── retouches du 17/08 ────────────────────────────────────────────
   « Ce qui est écarté, et pourquoi » se centre, chevron compris : le
   margin-left:auto qui le poussait à droite n'a plus lieu d'être. */
.cuts>summary{justify-content:center}
.cuts .chev{margin-left:0}
.cuts-intro{text-align:center}
.cuts-list{text-align:center}
.cut{border-left:0;border-top:3px solid var(--hot);padding-left:0;padding-top:8px}
/* ── les filtres, repliés ──────────────────────────────────────────
   Trois rangées ouvertes en permanence en haut de l'écran, c'était le
   plus gros bloc de la page avant la timeline elle-même. Repliées, elles
   tiennent une ligne, et le décompte reste lisible sans rien ouvrir. */
.sieve .wrap{display:block;padding-top:0;padding-bottom:0}
.filt>summary{display:flex;align-items:center;justify-content:center;gap:12px;
  cursor:pointer;list-style:none;padding:11px 4px;
  font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:15px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,253,247,.86)}
.filt>summary::-webkit-details-marker{display:none}
.filt>summary:hover{color:var(--paper)}
.filt>summary .chev{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:square;transition:transform .16s steps(3,end)}
.filt[open]>summary .chev{transform:rotate(180deg)}
@media(max-width:560px){
  .filt>summary{gap:8px;padding:9px 2px;font-size:13px;letter-spacing:.06em}
  .filt>summary .fcount{font-size:10px;letter-spacing:.04em}
}
.filt>summary .fcount{font-family:'Chivo','Chivo repli';font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:rgba(255,253,247,.52)}
.filt-body{display:flex;flex-direction:column;align-items:center;gap:13px;
  padding:13px 0 16px;border-top:2px solid var(--line)}
.filt-body>*{width:auto;max-width:100%}
.filt-body .search{flex:0 0 auto;width:min(430px,100%)}
.filt-body .sgroup,.filt-body .srow,.filt-body .srow2,
.filt-body .marks,.filt-body .eranav{justify-content:center}
.filt-body .srow,.filt-body .srow2{flex:0 1 auto;flex-direction:column;gap:11px}
.filt-body .marks{flex-wrap:wrap;row-gap:6px}
.filt-body .last{margin-left:0}
.filt-body .lab{width:100%;text-align:center;margin:0 0 2px;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,253,247,.5)}
/* « Repères » prend sa ligne, comme « Niveau » et « Types de média » : posé
   en tête de rangée, il se lisait comme un repère de plus. */
.filt-body .marks>span:first-child{width:100%;text-align:center;margin-bottom:2px}

/* ══ MAQUETTE — LA LIGNE STAR WARS ═══════════════════════════════════
   La page entière passe au plan de transport de l'accueil : l'univers
   est une ligne, une ère est une station, une œuvre est un arrêt. Le
   premier écran est le plan de la ligne, les ères sont des plaques de
   station posées sur le trait, chaque œuvre est un quai avec son horaire
   (la date du monde, en or, comme un tableau des départs) et la case à
   cocher est l'arrêt lui-même : un rond vide tant qu'on n'y est pas
   passé, plein une fois desservi. Le trait se colore jusqu'au train. */
:root{--rest:color-mix(in srgb,var(--uni) 26%,#1c1a26);--rail:64px;--board:#07060b;--cleared:#3ddc84;
  --led:radial-gradient(rgba(255,253,247,.06) 1px,transparent 1.4px) 0 0/4px 4px}

/* ── la barre du bas : la ligne en miniature, avec ses stations ── */
.hud .bar{height:10px;border:0;border-radius:5px;background:var(--rest);overflow:visible}
.hud .bar i{border-radius:5px}
.hud .bar .hs{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--paper);
  border:2px solid var(--ink);transform:translate(-50%,-50%)}
.hud .bar .hs.v{background:var(--uni);border-color:var(--paper)}
.hud-train{position:absolute;top:50%;z-index:2;width:30px;height:16px;transform:translate(-50%,-50%);
  transition:left .45s cubic-bezier(.16,1,.3,1);pointer-events:none}
.hud-train svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 5px var(--hot))}
.hud-train .body{fill:var(--hot);stroke:var(--ink);stroke-width:2.2}
.hud-train .win{fill:var(--ink)}
.hud-train .ping{display:none}
.hud .btn{border-radius:8px}

/* ── le premier écran : le titre, puis le plan de la ligne ── */
.ln-hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:2px solid var(--paper)}
.ln-bg{position:absolute;inset:-24px;z-index:-2;background:url(/images/starwars-banner.webp) center 30%/cover;
  filter:blur(3px) saturate(.85);opacity:.34;transform:scale(1.05)}
.ln-hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 30%,rgba(13,11,18,.25) 0%,rgba(13,11,18,.75) 60%,var(--ink) 100%)}
.ln-hero .wrap{padding-top:40px;padding-bottom:40px;text-align:center}
.ln-head h1{text-align:center;font-size:clamp(58px,10.5vw,138px);line-height:.84;text-shadow:5px 5px 0 var(--ink)}
.ln-head h1 .tag{display:block;width:max-content;max-width:100%;margin:0 auto 14px;text-shadow:none;line-height:1}
.ln-head h1 .nm{display:block}
.ln-hero .dek{max-width:640px;margin:18px auto 0;font-size:16.5px}
.ln-hero .upd{justify-content:center}

/* le plan de la ligne : un trait, une pastille par œuvre, une station par
   ère — sa taille dit son nombre d'œuvres, comme à l'accueil */
.ln-map{position:relative;max-width:1120px;margin:22px auto 0;padding:66px 92px 70px 64px}
.lm-dep,.lm-cnt{position:absolute;top:50%;transform:translateY(-50%);
  font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,253,247,.6)}
.lm-dep{left:0}
.lm-cnt{right:0;color:var(--paper)}
.lm-cnt b{color:var(--hot);font-size:17px}
.lm-track{position:relative;height:10px;border-radius:5px;background:var(--rest);box-shadow:0 0 0 3px var(--ink)}
.lm-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--uni);
  transition:width .5s cubic-bezier(.3,.9,.3,1)}
.lm-t{position:absolute;top:50%;width:4px;height:4px;border-radius:50%;background:rgba(255,253,247,.55);
  transform:translate(-50%,-50%)}
.lm-t.v{background:var(--ink)}
.lm-st{position:absolute;top:50%;z-index:1;display:block;border-radius:50%;text-decoration:none;
  width:var(--s);height:var(--s);transform:translate(-50%,-50%);
  background:var(--paper);border:3px solid var(--ink);box-shadow:0 0 0 2px var(--rest);transition:transform .15s}
.lm-st.v{background:var(--uni);border-color:var(--paper);box-shadow:0 0 0 2px var(--ink)}
.lm-st.cur{box-shadow:0 0 0 3px var(--hot)}
.lm-st:hover,.lm-st:focus-visible{transform:translate(-50%,-50%) scale(1.2);outline:none}
.lm-st.tm{border-radius:6px;width:30px;height:30px;border-width:4px}
.lm-lb{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 11px);width:max-content;
  max-width:170px;text-align:center;line-height:1;pointer-events:none;color:var(--paper);
  font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:16px;letter-spacing:.05em;text-transform:uppercase;
  text-shadow:0 2px 0 var(--ink),0 0 8px var(--ink)}
.lm-lb small{display:block;margin-top:3px;font-size:12px;font-weight:700;letter-spacing:.1em;color:rgba(255,253,247,.58)}
.lm-st.lo .lm-lb{bottom:auto;top:calc(100% + 11px)}
.lm-st.cur .lm-lb{color:var(--hot)}
.lm-train{position:absolute;top:50%;z-index:2;width:38px;height:20px;transform:translate(-50%,-50%);
  transition:left .5s cubic-bezier(.3,.9,.3,1);pointer-events:none}
.lm-train svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 7px var(--hot))}
.lm-train .body{fill:var(--hot);stroke:var(--ink);stroke-width:2.2}
.lm-train .win{fill:var(--ink)}
.lm-train .ping{fill:none;stroke:var(--hot);stroke-width:2;transform-box:fill-box;transform-origin:center;
  animation:lm-ping 1.8s ease-out infinite}
@keyframes lm-ping{from{transform:scale(.7);opacity:.9}to{transform:scale(1.9);opacity:0}}
.lm-now{display:none}

/* le tableau des départs : les chiffres de la ligne, en diodes */
.ln-board{display:flex;flex-wrap:nowrap;justify-content:center;margin:12px auto 0;width:fit-content;max-width:100%;
  background:var(--led),var(--board);border:2px solid var(--paper);border-radius:10px;overflow:hidden;
  box-shadow:6px 6px 0 var(--ink)}
.ln-board .s{padding:11px 22px 12px;border-right:2px dashed rgba(255,253,247,.16);min-width:0}
.ln-board .s:last-child{border-right:0}
.ln-board b{display:block;font-family:'Big Shoulders Display','BSD repli';font-weight:900;font-size:34px;line-height:.9;
  color:var(--hot);text-shadow:0 0 12px rgba(240,201,124,.45);white-space:nowrap}
.ln-board span{display:block;margin-top:5px;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,253,247,.66)}

/* le billet : prochain arrêt, et le bouton qui y mène */
.ln-go{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:30px}
.ticket{display:flex;align-items:center;gap:18px;max-width:100%;color:var(--ink);background:var(--paper);
  padding:10px 12px 10px 0;transform:rotate(-1.2deg);cursor:pointer;text-align:left;
  box-shadow:6px 6px 0 var(--ink),6px 6px 0 2px var(--paper);
  transition:transform .15s cubic-bezier(.2,.9,.3,1);
  -webkit-mask:radial-gradient(circle 9px at 84px 0,#0000 98%,#000) top/100% 51% no-repeat,
               radial-gradient(circle 9px at 84px 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle 9px at 84px 0,#0000 98%,#000) top/100% 51% no-repeat,
               radial-gradient(circle 9px at 84px 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.ticket:hover{transform:rotate(0) translateY(-2px)}
.t-stub{align-self:stretch;flex:none;width:84px;display:grid;place-items:center;margin:-10px 0;
  background:var(--uni);border-right:2px dashed var(--ink)}
.t-stub span{font-family:'Big Shoulders Display','BSD repli';font-weight:900;font-size:30px;color:var(--ink)}
.t-txt{display:flex;flex-direction:column;min-width:0;max-width:420px}
.t-k{font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:#6b6480}
.t-nm{font-family:'Big Shoulders Display','BSD repli';font-weight:900;font-size:29px;line-height:.95;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-st{font-size:13px;font-weight:600;color:#3a3548;margin-top:3px;text-transform:uppercase;letter-spacing:.02em}
.ticket .start.t-go{margin:0;flex:none;clip-path:none;background:var(--ink);color:var(--paper);
  font-size:17px;letter-spacing:.1em;padding:12px 16px}
.ticket .start.t-go:hover{transform:none;background:#231f2e}
.ticket .start em{color:var(--hot)}

/* le billet est posé sur le filet blanc du bas du premier écran, à cheval,
   comme celui de l'accueil. Il vit hors du premier écran, qui rogne
   (overflow) son fond flouté ; celui-ci garde en bas la place de sa moitié. */
.ticket-row{position:relative;z-index:3;display:flex;justify-content:center;margin-top:-34px;margin-bottom:6px}
section.ln-hero>.wrap{padding-bottom:66px}
@media(max-width:720px){section.ln-hero>.wrap{padding-bottom:56px}}

/* les trois parcours sont trois voies */
.ln-hero .par{margin:0}
.ln-hero .par-b{counter-reset:voie;gap:10px;border:0}
.ln-hero .par-b button{counter-increment:voie;display:flex;flex-direction:column;align-items:center;gap:3px;
  border:2px solid var(--paper);border-radius:8px;background:rgba(13,11,18,.72);padding:7px 16px 8px;
  font-family:'Big Shoulders Display','BSD repli';font-size:16px;font-weight:800;letter-spacing:.06em;color:var(--paper)}
.ln-hero .par-b button+button{border-left:2px solid var(--paper)}
.ln-hero .par-b button::before{content:'Voie ' counter(voie);font-size:10px;letter-spacing:.2em;
  color:rgba(255,253,247,.55)}
html[lang=en] .ln-hero .par-b button::before{content:'Track ' counter(voie)}
.ln-hero .par-b button[aria-pressed="true"]{background:var(--hot);color:var(--ink);border-color:var(--hot);
  box-shadow:4px 4px 0 var(--ink)}
.ln-hero .par-b button[aria-pressed="true"]::before{color:rgba(13,11,18,.6)}

/* ── l'intro : des panneaux d'information ── */
.intro .itag{border-radius:8px;border-left-width:6px}
.key{position:relative;border-radius:10px;padding-top:20px;overflow:hidden}
.key::before{content:'';position:absolute;left:0;right:0;top:0;height:6px;background:var(--uni)}
.cuts{border-radius:10px;overflow:hidden}

/* ── la barre collante ── */
.sieve{background:rgba(13,11,18,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sieve button,.search{border-radius:999px}
.sieve button i{border-radius:50%}

/* ── la ligne : un trait de fond, et le trait parcouru jusqu'au train.
   Les deux sont mesurés par le script (de la première station au
   terminus, et jusqu'au train) : un trait par carte laissait des trous
   partout où la page met de l'air, entre une plaque et ses arrêts. ── */
#timeline{position:relative;padding:6px 0 30px}
#timeline::before,#timeline::after{content:'';position:absolute;z-index:0;width:8px;border-radius:4px;
  left:calc(max(0px,(100% - 1280px) / 2) + 20px + var(--rail) / 2 - 4px);top:var(--l-top,0px)}
#timeline::before{height:var(--l-h,0px);background:var(--rest)}
#timeline::after{height:var(--f-h,0px);background:var(--uni);transition:height .35s cubic-bezier(.3,.9,.3,1)}
.era-sec,.terminus{position:relative;z-index:1}

.stn{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:14px;padding-top:34px}
.stn-rail{position:relative;display:grid;place-items:center}
.stn-dot{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;background:var(--paper);
  border:7px solid var(--ink);box-shadow:0 0 0 4px var(--rest)}
.era-sec.reach .stn-dot{box-shadow:0 0 0 4px var(--uni)}
.era-sec.fin .stn-dot{background:var(--uni);border-color:var(--paper);box-shadow:0 0 0 4px var(--ink)}
.stn-dot.tm{border-radius:9px}
/* la plaque : l'image de l'ère sur toute sa largeur, le texte par-dessus */
.stn-plate{position:relative;isolation:isolate;border:3px solid var(--paper);border-radius:12px;overflow:hidden;
  background:color-mix(in srgb,var(--era) 58%,var(--ink));box-shadow:7px 7px 0 var(--ink);min-height:200px;
  display:flex;align-items:center}
.stn-img{position:absolute;inset:0;z-index:-1;background:var(--ink) center 30%/cover no-repeat;
  filter:saturate(.85) contrast(1.05)}
.stn-img::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--era) 92%,var(--ink)) 0%,
    color-mix(in srgb,var(--era) 72%,transparent) 42%,color-mix(in srgb,var(--era) 18%,transparent) 100%)}
.stn-txt{position:relative;padding:20px 26px 20px;display:flex;flex-direction:column;gap:8px;max-width:760px}
.stn-k{display:flex;align-items:center;gap:10px;font-family:'Big Shoulders Display','BSD repli';font-weight:800;
  font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,253,247,.85)}
.code{display:inline-grid;place-items:center;background:var(--uni);color:var(--ink);border:2px solid var(--ink);
  border-radius:5px;padding:2px 7px 1px;font-family:'Big Shoulders Display','BSD repli';font-weight:900;font-size:14px;letter-spacing:.04em}
.stn-nm{font-size:clamp(36px,5.2vw,68px);line-height:.88;text-shadow:4px 4px 0 var(--ink)}
.stn-meta{display:flex;gap:6px 20px;flex-wrap:wrap;font-size:13px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;text-shadow:0 1px 3px var(--ink)}
.stn-meta b{color:var(--hot)}
.stn-cx{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px}
.stn-cx .lab{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,253,247,.7);margin-right:4px;text-shadow:0 1px 3px var(--ink)}
.cx{display:inline-flex;align-items:center;gap:6px;padding:2px 3px 2px 8px;border-radius:5px;
  background:var(--k);color:var(--ink);border:2px solid var(--ink);
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.cx b{background:var(--ink);color:var(--k);border-radius:3px;padding:0 5px;font-family:'Big Shoulders Display','BSD repli';
  font-size:13px;letter-spacing:0}

/* ── les arrêts ── */
.rows{display:flex;flex-direction:column;gap:12px;padding:18px 0 4px}
.bu{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:14px;align-items:start}
.bu-side{position:relative;z-index:1;width:auto;margin:0;align-self:stretch;display:block}
.bu-side .bu-chk{position:absolute;left:50%;top:32px;transform:translateX(-50%)}
.bu-side::after{content:'';position:absolute;top:45px;left:calc(50% + 15px);right:-14px;height:5px;
  background:var(--rest)}
.bu.done .bu-side::after{background:var(--uni)}
/* un rond vide : on comprend qu'il se coche. Plein une fois desservi. */
.bu-chk{width:30px;height:30px;border-radius:50%;background:var(--ink);border:3px solid var(--paper);
  box-shadow:0 0 0 3px var(--ink);color:transparent;transition:border-color .12s,box-shadow .12s}
.bu-chk:hover{border-color:var(--uni);box-shadow:0 0 0 3px var(--ink),0 0 0 6px color-mix(in srgb,var(--uni) 40%,transparent)}
.bu-chk[aria-checked=true]{background:var(--uni);border-color:var(--paper);color:var(--ink)}
.bu-chk svg{width:15px;height:15px}

.bu-card{border:2px solid var(--line);border-radius:12px;overflow:hidden;
  background:color-mix(in srgb,var(--era) 12%,#0f0d16);
  transition:transform .12s cubic-bezier(.2,.9,.3,1),box-shadow .12s,border-color .12s}
.bu-card:hover{transform:translate(-4px,-4px);border-color:var(--uni);box-shadow:4px 4px 0 var(--uni)}
.bu.done .bu-card{border-color:color-mix(in srgb,var(--uni) 55%,transparent)}
.bu-head{display:grid;grid-template-columns:118px 184px minmax(0,1fr) 34px;column-gap:18px;row-gap:0;
  align-items:stretch;padding:0 6px 0 0}
.bu-fig{grid-column:2;width:184px;align-self:center;margin:12px 0;border-radius:8px;border:2px solid var(--ink);
  box-shadow:0 0 0 1px var(--line)}
.bu-fig .bu-n{display:none}
.bu-txt{grid-column:3;padding:14px 0 13px;align-self:center}
.bu-time{grid-column:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;
  padding:12px 8px;text-align:center;background:var(--led),var(--board);border-right:2px dashed rgba(255,253,247,.16)}
.bu-time .bu-n{white-space:nowrap;position:static;background:none;clip-path:none;padding:0;color:rgba(255,253,247,.5);
  font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.bu-time .d{font-family:'Big Shoulders Display','BSD repli';font-weight:900;font-size:25px;line-height:.95;letter-spacing:.02em;
  color:var(--hot);text-shadow:0 0 10px rgba(240,201,124,.4)}
.bu-time .rel{display:inline-flex;flex-direction:column;align-items:center;gap:1px;padding:3px 8px;border-radius:5px;
  border:1px solid color-mix(in srgb,var(--uni) 50%,transparent);background:color-mix(in srgb,var(--uni) 14%,transparent);
  color:var(--uni);font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.bu-time .rel i{font-style:normal}
.bu-time .rel b{font-family:'Big Shoulders Display','BSD repli';font-size:17px;letter-spacing:.02em;line-height:1}
.bu-end{grid-column:4;align-self:center;justify-content:center}
.bu-tags{gap:6px;margin-bottom:6px}
.bu-tags .b{clip-path:none;border-radius:5px;border:2px solid var(--ink);padding:1px 7px;font-size:10.5px;font-weight:800}
.bu-tags .ft{border-radius:5px}
.bu-tags .lv{display:inline-grid;place-items:center;line-height:0}
.bu-tags .lv .ic{width:20px;height:20px}
.bu-title{font-size:25px;line-height:1}
.bu-meta{margin-top:6px}
.bu-meta .dur{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.1em}
.bu-meta .dur::before{content:'';width:10px;height:10px;border-radius:50%;border:2px solid currentColor;
  box-sizing:border-box;background:linear-gradient(currentColor,currentColor) 50% 20%/2px 40% no-repeat}
.bu-meta:empty{display:none}
.bu-done{place-items:end start;padding:7px}
.bu-done span{transform:none;border-radius:5px;font-size:13px;padding:2px 8px;letter-spacing:.14em}
.bu.done .bu-title{color:rgba(255,253,247,.66)}
.bu.done .bu-time .d{color:color-mix(in srgb,var(--hot) 60%,var(--ink));text-shadow:none}
.bu-sub{padding:0 16px 13px 338px}
.si{border-radius:4px}
.bu-panel{border-top:2px dashed var(--line);padding:16px 16px 16px 136px}
.expand-trailer-link{clip-path:none;border-radius:6px}
.faq{border-radius:0 8px 8px 0}

/* « Vous en êtes là » : le train, posé sur le trait */
.rows>.ici{position:relative;z-index:1;display:grid;grid-template-columns:var(--rail) auto minmax(0,1fr);
  column-gap:14px;align-items:center;margin:-4px 0;padding:6px 0;color:var(--hot);font-size:12px;letter-spacing:.18em}
.rows>.ici::before{justify-self:center;width:38px;height:20px;transform:none;border-radius:7px 10px 10px 7px;
  background:linear-gradient(var(--ink),var(--ink)) 8px 5px/6px 6px no-repeat,
             linear-gradient(var(--ink),var(--ink)) 17px 5px/6px 6px no-repeat,var(--hot);
  border:2px solid var(--ink);box-shadow:0 0 10px var(--hot)}
.rows>.ici::after{height:0;border-top:2px dashed currentColor;background:none;opacity:.55}

/* le terminus */
.terminus{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:14px;align-items:center;padding-top:26px}
.terminus p{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap}
.terminus b{font-family:'Big Shoulders Display','BSD repli';font-weight:900;font-size:34px;text-transform:uppercase;letter-spacing:.03em}
.terminus span{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,253,247,.62)}
.terminus.fin .stn-dot{background:var(--uni);border-color:var(--paper);box-shadow:0 0 0 4px var(--ink)}

/* ── les badges : un carnet de tickets ── */
.bx{background:rgba(8,8,12,.72);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.bx-in{max-width:760px;border:3px solid var(--paper);border-radius:14px;padding:0;overflow:auto;
  box-shadow:8px 8px 0 var(--ink);background:var(--ink)}
.bx-h{position:sticky;top:0;z-index:2;margin:0;padding:16px 18px 14px;gap:12px;
  background:var(--led),var(--board);border-bottom:2px dashed rgba(255,253,247,.2)}
.bx-h h3{font-size:28px;letter-spacing:.03em}
.bx-h .n{order:3;margin-left:auto;background:none;color:var(--hot);padding:0;
  font-family:'Big Shoulders Display','BSD repli';font-weight:900;font-size:22px;letter-spacing:.02em;
  text-shadow:0 0 10px rgba(240,201,124,.4)}
.bx-h button{order:4;margin-left:6px;border-radius:50%;width:36px;height:36px;font-weight:700}
.bx-g{padding:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.bg1{position:relative;padding:0;gap:0;align-items:stretch;border:2px dashed rgba(255,253,247,.28);border-radius:4px;
  background:none;opacity:1;filter:none;min-height:86px}
.bg1 .bg-stub{flex:none;width:66px;display:grid;place-items:center;border-right:2px dashed rgba(255,253,247,.28)}
.bg1 .i{font-size:28px;filter:grayscale(1);opacity:.4}
.bg1 .bg-b{display:flex;flex-direction:column;justify-content:center;padding:10px 12px 10px 14px;min-width:0}
.bg1 .t{font-size:18px;color:rgba(255,253,247,.55)}
.bg1 .d{color:rgba(255,253,247,.5)}
.bg1 .st{margin-top:7px;font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,253,247,.4)}
.bg1.on{border:0;border-radius:0;background:var(--paper);color:var(--ink);box-shadow:5px 5px 0 var(--c);
  transform:rotate(-.8deg);
  -webkit-mask:radial-gradient(circle 8px at 66px 0,#0000 98%,#000) top/100% 51% no-repeat,
               radial-gradient(circle 8px at 66px 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle 8px at 66px 0,#0000 98%,#000) top/100% 51% no-repeat,
               radial-gradient(circle 8px at 66px 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.bg1.on:nth-child(even){transform:rotate(.8deg)}
.bg1.on .bg-stub{background:var(--c);border-right:2px dashed var(--ink)}
.bg1.on .i{filter:none;opacity:1}
.bg1.on .t{color:var(--ink)}
.bg1.on .d{color:#3a3548}
.bg1.on .st{color:var(--ink)}
.bg1.on .st::before{content:'✓ '}
.bpop{border-radius:12px;border-width:3px}

@media(max-width:720px){
  :root{--rail:40px}
  .ln-hero .wrap{padding-top:28px;padding-bottom:30px}
  .ln-head h1{font-size:clamp(50px,15vw,68px)}
  .ln-head h1 .tag{font-size:11px;padding:4px 9px;margin-bottom:9px}
  .ln-hero .dek{font-size:14.5px}
  .ln-map{padding:26px 8px 12px;margin-top:10px}
  .lm-dep,.lm-cnt{display:none}
  .lm-lb{display:none}
  .lm-st.tm{width:22px;height:22px;border-width:3px}
  .lm-now{display:block;margin-top:18px;font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:16px;
    letter-spacing:.06em;text-transform:uppercase}
  .lm-now em{font-style:normal;color:var(--hot);text-transform:uppercase}
  .ln-board{width:100%;margin-top:14px}
  .ln-board .s{flex:1 1 0;padding:9px 6px}
  .ln-board b{font-size:22px}
  .ln-board span{font-size:8.5px;letter-spacing:.04em}
  .ticket{gap:12px;padding-right:10px;width:100%;
    -webkit-mask:radial-gradient(circle 8px at 58px 0,#0000 98%,#000) top/100% 51% no-repeat,
                 radial-gradient(circle 8px at 58px 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
            mask:radial-gradient(circle 8px at 58px 0,#0000 98%,#000) top/100% 51% no-repeat,
                 radial-gradient(circle 8px at 58px 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
  .t-stub{width:58px}
  .t-stub span{font-size:21px}
  .t-txt{flex:1}
  .t-nm{font-size:21px;white-space:normal}
  .t-st{font-size:11.5px}
  .ticket .start.t-go{font-size:14px;padding:10px 10px;letter-spacing:.06em}
  .ln-hero .par-b{gap:6px}
  .ln-hero .par-b button{font-size:13px;padding:6px 9px 7px}
  .stn{padding-top:26px;column-gap:10px}
  .stn-dot{width:34px;height:34px;border-width:5px;box-shadow:0 0 0 3px var(--rest)}
  .era-sec.reach .stn-dot{box-shadow:0 0 0 3px var(--uni)}
  .stn-plate{min-height:0}
  .stn-img{opacity:.6}
  .stn-img::before{background:linear-gradient(90deg,color-mix(in srgb,var(--era) 88%,var(--ink)) 25%,
    color-mix(in srgb,var(--era) 45%,transparent))}
  .stn-txt{padding:14px 14px 15px}
  .stn-k{font-size:12px;letter-spacing:.14em}
  .stn-nm{font-size:clamp(28px,9vw,40px)}
  .stn-meta{font-size:11.5px}
  .rows{gap:10px;padding-top:14px}
  .bu{column-gap:10px}
  .bu-side .bu-chk{top:9px}
  .bu-side::after{top:21px;left:calc(50% + 13px);right:-10px}
  .bu-chk{width:26px;height:26px}
  .bu-head{grid-template-columns:92px minmax(0,1fr) 22px;column-gap:10px;padding:0 8px 0 10px}
  .bu-time{grid-row:1;grid-column:1/-1;flex-direction:row;justify-content:space-between;gap:10px;
    margin:0 -8px 0 -10px;padding:7px 12px;border-right:0;border-bottom:2px dashed rgba(255,253,247,.16)}
  .bu-fig{grid-row:2;grid-column:1;width:92px;margin:10px 0}
  .bu-txt{grid-row:2;grid-column:2;padding:10px 0 11px}
  .bu-end{grid-row:2;grid-column:3}
  .bu-time .d{font-size:19px}
  .bu-time .rel{flex-direction:row;gap:5px;padding:1px 6px}
  .bu-time .rel b{font-size:13px}
  .bu-title{font-size:19px}
  .bu-done span{font-size:10px;padding:1px 5px}
  .bu-sub{padding:0 10px 11px 12px}
  .bu-panel{padding:14px 12px}
  .rows>.ici{column-gap:10px}
  .rows>.ici::before{width:32px;height:17px;background:linear-gradient(var(--ink),var(--ink)) 6px 4px/5px 5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 14px 4px/5px 5px no-repeat,var(--hot)}
  .terminus{column-gap:10px}
  .terminus b{font-size:26px}
  .bx{padding:12px}
  .bx-g{padding:14px;grid-template-columns:1fr}
  .bx-h h3{font-size:22px}
}
@media(max-width:400px){
  .ln-hero .par-b button{font-size:12px;padding:6px 7px}
  .ticket .start.t-go{font-size:12.5px;padding:9px 8px}
}
@media(prefers-reduced-motion:reduce){.lm-train .ping{display:none}}
:root{--sw:#4d9fff; --mcu:#e23636; --dc:#f5c842; --av:#7dd3fc; --st:#b48cf2; --twd:#a8bf4f;
  --da:#e07b39; --ac:#d4a02c; --dca:#2dd4bf; --jw:#45c46b; --wi:#b0bec5; --re:#dc0000; --br:#ff5f1f; --soon:#8a8ab0;
  --doss-deep:#5c2060}
/* ══ MAQUETTE — les bandes revues ═══════════════════════════════════
   Le badge de ligne du pied de page : carré, à l'encre de l'univers,
   cerné de noir, comme sur le plan. */
.f-uni i{font-style:normal;display:inline-grid;place-items:center;
  min-width:34px;height:22px;padding:0 5px;flex:none;background:var(--k);color:var(--ink);
  font-family:'Big Shoulders Display','BSD repli',sans-serif;font-weight:900;font-size:13px;letter-spacing:.04em;
  line-height:1;border:2px solid var(--ink)}
.f-uni i.w{color:#fff}

/* ── les deux correspondances : Dossiers et export, en panneaux ─────
   Deux cartes de même hauteur, côte à côte, un filet d'encre en tête
   comme une ligne. L'export est posé par e-app.js après .deep : il
   tombe tout seul dans la seconde case. */
.duo{padding:8px 0 50px}
.duo-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:22px;align-items:stretch}
.duo .deep,.duo .sy{position:relative;border:2px solid var(--paper);box-shadow:6px 6px 0 rgba(0,0,0,.55);
  padding:22px 24px 26px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.duo .deep{background:color-mix(in srgb,var(--doss-deep) 52%,var(--ink));border-top:8px solid var(--c-doss)}
.duo .sy{background:color-mix(in srgb,var(--hot) 8%,var(--ink));border-top:8px solid var(--hot)}
.duo .sy .wrap{padding:0;max-width:none;width:100%;gap:14px}
.k-lab,.duo .sy .sy-txt::before{display:inline-flex;align-items:center;gap:8px;
  font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:12.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,253,247,.66)}
.duo .sy .sy-txt::before{content:'Your pass';display:block;margin-bottom:10px}
.k-bdg{font-style:normal;background:var(--c-doss);color:var(--ink);font-weight:900;font-size:13px;
  letter-spacing:.04em;padding:2px 6px;border:2px solid var(--ink);line-height:1}
.duo .deep h2{font-size:clamp(28px,3.4vw,40px);color:var(--c-doss);text-shadow:3px 3px 0 var(--ink)}
.duo .sy h2{font-size:clamp(24px,2.8vw,32px);color:var(--hot);text-shadow:3px 3px 0 var(--ink)}
.duo .deep p{margin:0 auto;max-width:44ch;font-size:14.5px}
.k-meta{font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,253,247,.66)}
.k-meta b{color:var(--c-doss);font-size:1.3em;font-weight:900}
.duo .deep .go{margin:auto 0 0}

/* ── le pied : les douze lignes en tête, tout au centre ───────────── */
footer{border-top:0;padding:0 0 30px}
.f-lines{display:flex;height:10px;border-top:2px solid var(--paper)}
.f-lines i{flex:1}
footer .foot{grid-template-columns:1fr;justify-items:center;text-align:center;gap:24px;padding-top:32px}
footer .foot>div:first-child{grid-column:auto}
.f-head{display:flex;flex-direction:column;align-items:center;gap:12px}
.f-logo{width:min(300px,72vw);height:auto}
footer .f-head p{max-width:58ch;margin:0 auto;font-size:13.5px}
footer .f-uni{width:100%;max-width:1080px}
footer .f-uni h4{font-size:13px;letter-spacing:.22em;color:rgba(255,253,247,.55);margin-bottom:12px}
.f-uni ul{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
footer .f-uni a{display:flex;align-items:center;gap:9px;height:100%;padding:8px 10px;border:2px solid var(--line);
  text-decoration:none;font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:15px;text-transform:uppercase;
  letter-spacing:.03em;line-height:1.05;color:var(--paper);text-align:left}
footer .f-uni a:hover{border-color:var(--k);background:color-mix(in srgb,var(--k) 15%,transparent);text-decoration:none}
.f-more ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 28px}
footer .f-more a{font-family:'Big Shoulders Display','BSD repli';font-weight:800;font-size:16px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--paper)}
footer .f-more a.doss{color:var(--c-doss)}
footer .f-more a.upc{color:var(--c-upc)}
footer .f-more a.news{color:var(--c-news)}
footer .legal{width:100%;max-width:1080px;text-align:center}
@media(max-width:1080px){
  .f-uni ul{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .f-uni ul{grid-template-columns:1fr 1fr;gap:6px}
  footer .f-uni a{font-size:14px;padding:7px 8px;gap:7px}
  footer .f-uni li a{display:flex}
  footer .f-more a{font-size:15px}
  .duo .deep,.duo .sy{padding:18px 16px 22px}
}

/* ══ retouches — barre A, tiroir, légende, réseaux ═════════════════
   La barre prend toute la largeur : le logo au bord gauche, le drapeau
   au bord droit, les liens au centre de l'écran — trois colonnes, les
   deux du bord de même largeur, sans quoi le centre ne l'est pas. */
header .wrap{max-width:none;display:grid;grid-template-columns:1fr auto 1fr;
  padding-left:clamp(14px,2vw,32px);padding-right:clamp(14px,2vw,32px)}
header .brand{justify-self:start;width:clamp(170px,16vw,310px);flex:none}
header .brand img{max-height:none}
header .nav-links{margin-left:0;justify-content:center;flex-wrap:nowrap}
header .nav-tools{margin-left:0;justify-self:end}
@media(max-width:1080px){
  header .wrap{grid-template-columns:1fr auto}
  header .brand{width:min(260px,58vw)}
}
/* le tiroir : le menu de l'ordinateur, dans le même ordre, en boutons
   du pied de page — les neuf autres univers sous « More universes » */
.dw-list{display:flex;flex-direction:column;gap:6px;padding:12px 16px 16px}
.dw-list>a,.dw-more>summary,.dw-pop a{display:flex;align-items:center;gap:9px;min-height:44px;padding:8px 12px;
  border:2px solid var(--line);text-decoration:none;font-family:'Big Shoulders Display','BSD repli';font-weight:800;
  font-size:17px;text-transform:uppercase;letter-spacing:.05em;line-height:1.05;color:var(--paper)}
.dw-list>a:hover,.dw-pop a:hover{border-color:var(--paper)}
.dw-list>a.u:hover,.dw-pop a:hover{border-color:var(--k);background:color-mix(in srgb,var(--k) 15%,transparent)}
.dw-list>a.home[aria-current]{color:var(--hot);border-color:var(--hot)}
.dw-list a i{font-style:normal;display:inline-grid;place-items:center;min-width:34px;height:22px;padding:0 5px;flex:none;
  background:var(--k);color:var(--ink);font-family:'Big Shoulders Display','BSD repli',sans-serif;font-weight:900;font-size:13px;
  letter-spacing:.04em;line-height:1;border:2px solid var(--ink)}
.dw-list a i.w{color:#fff}
.dw-more>summary{list-style:none;cursor:pointer;justify-content:space-between}
.dw-more>summary::-webkit-details-marker{display:none}
.dw-more>summary::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.dw-more[open]>summary{border-color:var(--paper)}
.dw-more[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.dw-pop{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:6px}
.dw-pop a{font-size:15px;padding:7px 9px;gap:8px;min-height:40px}
/* au-dessus du téléphone, ni burger ni tiroir, même resté ouvert */
@media(min-width:720.02px){
  .burger{display:none!important}
  .drawer,.drawer.open{display:none!important}
}
/* le menu de l'ordinateur tient jusqu'à 721 px : le burger est pour
   le téléphone seul. Entre 721 et 1080, le logo et les liens se serrent. */
@media(min-width:720.02px) and (max-width:1080px){
  .nav-links{display:flex}
  header .wrap{grid-template-columns:auto 1fr auto;gap:12px}
  header .brand{width:clamp(118px,15vw,170px)}
  header .nav-links{gap:10px}
  .nav-links a,.nav-more>summary{font-size:13.5px;letter-spacing:.05em}
}
/* la case « en chantier » : tout au centre */
.l-grid .lock .lock-bd{flex:1;align-items:center;text-align:center}
.l-grid .lock .sg-p{display:flex;justify-content:center}
/* les réseaux : leur propre rangée, au centre */
footer .f-more li.soc{flex:0 0 100%;display:flex;justify-content:center}
@media(max-width:720px){
  .m-foot{justify-content:center}
  .m-leg{justify-content:center;text-align:center}
}
/* la page en cours, dans le tiroir */
.dw-list a.u[aria-current]{border-color:var(--k);color:var(--k)}
footer .f-uni a[aria-current]{border-color:var(--k);background:color-mix(in srgb,var(--k) 15%,transparent)}

/* ══ Retouches du 28 septembre 2026 ══════════════════════════════════
   Le mot « Départ » se calait à gauche du plan et passait sous le premier
   arrêt dès qu'il s'allongeait (« Departure ») : il se cale maintenant
   par la droite, à distance fixe de la voie. L'accroche s'élargit pour
   que sa première phrase tienne sur une ligne. */
.ln-map{padding-left:132px}
.lm-dep{left:auto;right:calc(100% - 100px)}
.ln-hero .dek{max-width:800px;text-wrap:pretty}

/* La colonne horaire sort du bouton et devient une colonne de la bulle :
   ses pointillés descendent jusqu'en bas quelle que soit la hauteur (les
   saisons, les notes), et la date se centre dans toute la hauteur. La
   fiche TMDB, dessous, prend la largeur entière, collée à gauche. */
.bu-card{display:grid;grid-template-columns:118px minmax(0,1fr);position:relative}
.bu-card>.bu-time{grid-column:1;grid-row:1/span 2;cursor:pointer}
.bu-card>.bu-head{grid-column:2;grid-row:1;grid-template-columns:184px minmax(0,1fr) 34px;padding-left:18px}
.bu-card>.bu-sub{grid-column:2;grid-row:2;padding-left:220px}
.bu-card>.bu-panel{grid-column:1/-1;grid-row:3;padding-left:16px}
.bu-card>.bu-head .bu-fig{grid-column:1}
.bu-card>.bu-head .bu-txt{grid-column:2}
.bu-card>.bu-head .bu-end{grid-column:3}
/* l'arrêt suit la date : au milieu de la bulle (fiche ouverte, au milieu
   de la partie haute — le script pose --mid) */
.bu{--cy:var(--mid,50%)}
.bu-side .bu-chk{top:var(--cy);transform:translate(-50%,-50%)}
.bu-side::after{top:calc(var(--cy) - 2.5px)}
@media(max-width:720px){
  .bu-card{grid-template-columns:minmax(0,1fr)}
  .bu-card>.bu-time{grid-column:1;grid-row:1;margin:0}
  .bu-card>.bu-head{grid-column:1;grid-row:2;grid-template-columns:92px minmax(0,1fr) 22px;padding-left:10px}
  .bu-card>.bu-sub{grid-column:1;grid-row:3;padding-left:12px}
  .bu-card>.bu-panel{grid-column:1;grid-row:4;padding-left:12px}
  .bu-card>.bu-head .bu-fig,.bu-card>.bu-head .bu-txt,.bu-card>.bu-head .bu-end{grid-row:1}
  .bu{--cy:22px}
  .bu-side .bu-chk{top:9px;transform:translateX(-50%)}
  .bu-side::after{top:21px}
}

/* ══ Retouches du 28 septembre 2026, deuxième passe ══════════════════
   L'affiche se cale en haut de la bulle, en face de la première ligne
   du texte : centrée, elle descendait dès que le titre prenait deux
   lignes. */
.bu-card>.bu-head .bu-fig{align-self:start}
/* « terminés » masqué, le train de la barre du bas se collait au nombre */
.hud .bar{margin-left:14px}
@media(max-width:720px){
  /* la date se centre dans son bandeau : à droite, elle passait sous le
     lien de partage de la bulle */
  .bu-card>.bu-time{justify-content:center;gap:14px}
  /* la fiche TMDB : le texte à côté de l'affiche, et dessous s'il est long */
  .expand-inner{display:block}
  .expand-inner::after{content:'';display:block;clear:both}
  .expand-poster{float:left;width:96px;margin:0 12px 8px 0}
  .expand-info{min-width:0}
}
/* ══ Retouches du 28 septembre 2026, troisième passe ════════════════
   La ligne est un seul trait SVG, tracé par le script d'arrêt en arrêt :
   devant une œuvre d'un autre univers il dévie à 45°, longe la voie, et
   revient. Plus de ligne principale doublée, plus de raccords à caler —
   une seule couleur, celle de la ligne, et l'encre de l'univers jusqu'au
   train. */
#timeline::before,#timeline::after{display:none}
.ln-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.ln-svg path{fill:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.ln-svg .r{stroke:var(--rest)}
.ln-svg .f{stroke:var(--uni);transition:stroke-dasharray .35s cubic-bezier(.3,.9,.3,1)}
/* le train de « Vous en êtes là » roule dans le sens de la marche */
.rows>.ici::before{transform:rotate(90deg)}
@media(max-width:720px){
  /* le plan du haut reprend sa largeur : le décalage de « Départ » ne
     vaut que là où le mot s'affiche */
  .ln-map{padding-left:8px}
  /* les stations du plan au deux tiers : pleine taille, elles se chevauchaient */
  .lm-st{width:calc(var(--s) * .62);height:calc(var(--s) * .62);border-width:2px}
  /* l'arrêt reste à gauche du bandeau, la date au milieu */
  .bu-card>.bu-time{display:grid;grid-template-columns:1fr auto auto 1fr;column-gap:8px;align-items:center}
  .bu-card>.bu-time .bu-n{grid-column:1;justify-self:start}
  .bu-card>.bu-time .d{grid-column:2}
  /* L'année de sortie prend une ligne à elle, sous la date et centrée
     avec elle : sur la même ligne, elle passait sous le lien de partage dès
     que la date du monde est longue (« ~1235-1253 p.R. », « 9:30-9:37 »).
     Star Wars l'avait déjà sur Épisode IV. */
  .bu-card>.bu-time:has(.rel) .d{grid-column:2/4}
  .bu-card>.bu-time .rel{grid-column:2/4;grid-row:2;justify-self:center}
  .bu-link{top:4px}
}
/* ══ Les animations de l'accueil, sur le plan et sur la ligne ═══════
   Au premier affichage le plan du haut se dessine depuis le départ, ses
   stations s'allument quand le tracé les atteint, puis le train paraît.
   Des impulsions de lumière filent sur le parcouru, vers le terminus. La
   ligne verticale se dessine à mesure qu'on descend et ne s'efface pas en
   remontant ; ses impulsions courent jusqu'au train, qui émet son onde. */
.lm-fill::after{content:'';position:absolute;inset:0;border-radius:5px;opacity:.75;
  background:radial-gradient(circle,#fffdf7 1.7px,transparent 2.3px) 0 50%/16px 100% repeat-x;
  animation:lm-flow .8s linear infinite}
@keyframes lm-flow{to{background-position:16px 50%}}
.ln-map.go .lm-track{animation:lm-draw 1.15s cubic-bezier(.65,0,.25,1) both}
@keyframes lm-draw{from{clip-path:inset(-140px 100% -140px -220px)}to{clip-path:inset(-140px -220px -140px -220px)}}
.ln-map.go .lm-st{animation:lm-pop .4s cubic-bezier(.2,1.6,.4,1) both;animation-delay:var(--d,0s)}
@keyframes lm-pop{from{transform:translate(-50%,-50%) scale(0)}}
.ln-map.go .lm-train,.ln-map.go .lm-cnt,.ln-map.go .lm-now{animation:lm-in .45s ease-out both;animation-delay:1.1s}
@keyframes lm-in{from{opacity:0}}
.ln-svg .r{transition:stroke-dasharray .6s ease-out}
.ln-svg .p{fill:none;stroke:#fffdf7;stroke-width:3.4;opacity:.7;stroke-dasharray:.1 16;
  animation:ln-flow .8s linear infinite}
@keyframes ln-flow{to{stroke-dashoffset:-16.1}}
.rows>.ici::before{animation:ici-ping 1.8s ease-out infinite}
@keyframes ici-ping{from{box-shadow:0 0 10px var(--hot),0 0 0 0 rgba(240,201,124,.85)}
  to{box-shadow:0 0 10px var(--hot),0 0 0 13px rgba(240,201,124,0)}}
@media(prefers-reduced-motion:reduce){
  .lm-fill::after,.ln-svg .p,.rows>.ici::before{animation:none}
  .ln-svg .r{transition:none}
}
/* le nombre suffit : « terminés » est masqué, et reste lu par la carte de partage */#hud-btn>b+.lbl{display:none}
/* ══ Les étiquettes du plan ne se chevauchent plus ════════════════════
   Deux rangs (dessus, dessous) ne suffisaient pas dès que trois stations
   se suivent de près — les ères courtes d'Avatar, ou n'importe quelle
   ligne sur une tablette. Le script (etage) range chaque étiquette au
   premier étage libre, de son côté d'abord, et pose --lv ; le plan
   grandit d'autant. */
.lm-st .lm-lb{bottom:calc(100% + 11px + var(--lv,0px))}
.lm-st.lo .lm-lb{bottom:auto;top:calc(100% + 11px + var(--lv,0px))}
.net .lm-st:not(.lo) .lm-lb{top:auto;bottom:calc(var(--s) / 2 + var(--hh, 44px) + var(--lv,0px))}
.net .lm-st.lo .lm-lb{bottom:auto;top:calc(var(--s) / 2 + var(--hh, 44px) + var(--lv,0px))}

.f-fil{font-size:12.5px;color:rgba(255,253,247,.72);margin-bottom:22px}
.f-fil a{color:inherit;text-decoration:none;display:inline-block;padding:3px 0}.f-fil a:hover{color:var(--paper);text-decoration:underline}
.f-hero .ln-head h1 .nm{overflow-wrap:anywhere;text-wrap:balance}
.f-hero .ln-head h1 .nm.l2{font-size:.72em;line-height:.9}
.f-hero .ln-head h1 .nm.l3{font-size:.5em;line-height:.95}
.f-hero .ln-head h1 .nm.l4{font-size:.36em;line-height:1}
.f-fin{display:block;font-size:clamp(20px,3vw,32px);line-height:1.1;letter-spacing:.02em;color:var(--uni);margin-top:12px;text-shadow:none}
.ln-board.f-board{display:flex;flex-wrap:wrap;justify-content:center;width:fit-content;max-width:100%;margin-top:24px}
.f-hero .ln-bg{filter:blur(16px) saturate(.9);opacity:.42}
.f-board b{font-size:clamp(21px,2.6vw,30px);white-space:nowrap}
.f-plan{max-width:760px;margin:28px auto 0;padding:0 9px}
.f-voie{position:relative;height:8px;border-radius:9px;background:var(--rest)}
.f-fait{position:absolute;left:0;top:0;bottom:0;border-radius:9px;background:var(--uni)}
.f-st{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--paper);border:3px solid var(--ink)}
.f-pt{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--hot);border:4px solid var(--ink);box-shadow:0 0 0 3px var(--hot)}
.f-bouts{display:flex;justify-content:space-between;margin-top:12px;font-family:'Big Shoulders Display';font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,253,247,.72)}
.f-corps{max-width:900px;padding-top:44px;padding-bottom:60px}
.f-sec{margin-top:48px}.f-sec:first-child{margin-top:0}
.f-h2{font-family:'Big Shoulders Display';font-weight:900;font-size:clamp(30px,4.4vw,42px);line-height:1;text-transform:uppercase;letter-spacing:.01em}
.f-dek{margin-top:7px;color:rgba(255,253,247,.72);font-size:14.5px}
.f-rail{list-style:none;position:relative;margin-top:22px;padding-left:38px}
.f-rail::before{content:'';position:absolute;left:12px;top:14px;bottom:14px;width:6px;border-radius:6px;background:var(--uni)}
.f-rail>li{position:relative;margin-top:12px}.f-rail>li:first-child{margin-top:0}
.f-rail>li.f-a::before{content:'';position:absolute;left:-35px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:var(--ink);border:6px solid var(--uni)}
.f-rail>li.f-ici::before{left:-40px;width:34px;height:34px;margin-top:-17px;background:var(--hot);border:7px solid var(--ink);box-shadow:0 0 0 4px var(--hot)}
.f-card{display:grid;grid-template-columns:96px 112px minmax(0,1fr);align-items:stretch;border:2px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(255,253,247,.035);color:inherit;text-decoration:none;transition:transform .12s,border-color .12s}
a.f-card:hover{border-color:var(--hot);transform:translate(-3px,-3px)}
.f-hor{display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;border-right:2px dashed var(--line);font-family:'Big Shoulders Display';font-weight:800;font-size:16px;line-height:1.05;color:var(--uni)}
.f-card img{display:block;width:100%;height:100%;min-height:63px;object-fit:cover;background:var(--ink)}
.f-tx{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;padding:9px 14px}
.f-tx b{font-family:'Big Shoulders Display';font-weight:800;font-size:21px;line-height:1.05;text-transform:uppercase;overflow-wrap:anywhere}
.f-tx small{font-size:12.5px;line-height:1.35;color:rgba(255,253,247,.72)}
.f-k{font-family:'Big Shoulders Display';font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--hot)}
.f-ici .f-card{grid-template-columns:96px 190px minmax(0,1fr);border-color:var(--hot);background:color-mix(in srgb,var(--hot) 9%,var(--ink));box-shadow:6px 6px 0 color-mix(in srgb,var(--hot) 40%,transparent)}
.f-ici .f-tx{padding:13px 16px}.f-ici .f-tx b{font-size:30px}
.f-ici ul{list-style:none;margin-top:3px;font-size:13.5px;line-height:1.4;color:rgba(255,253,247,.82)}
.f-stn{font-family:'Big Shoulders Display';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);padding:10px 0 2px}
.f-stn::before{content:'';position:absolute;left:-29px;top:14px;width:12px;height:12px;border-radius:3px;background:var(--paper);outline:3px solid var(--ink)}
.f-saut{font-size:12.5px;color:rgba(255,253,247,.66);padding:2px 0;font-style:italic}
.f-saut::before{content:'';position:absolute;left:-26px;top:0;bottom:0;width:6px;background:repeating-linear-gradient(var(--ink) 0 4px,transparent 4px 9px)}
.f-bout{font-family:'Big Shoulders Display';font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,253,247,.72);padding:6px 0}
.f-bout::before{content:'';position:absolute;left:-35px;top:6px;width:24px;height:24px;border-radius:6px;background:var(--uni);border:5px solid var(--ink)}
.f-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px}
.f-iti{display:inline-block;font-family:'Big Shoulders Display';font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink);background:var(--hot);padding:10px 18px;border-radius:7px}
.f-iti:hover{filter:brightness(1.1)}
.f-grille{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:20px}
.f-grille a{display:block;height:100%;border:2px solid var(--line);border-radius:10px;overflow:hidden;color:inherit;text-decoration:none;background:rgba(255,253,247,.035);transition:transform .12s,border-color .12s}
.f-grille a:hover{border-color:var(--hot);transform:translate(-3px,-3px)}
.f-grille img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ink)}
.f-grille span{display:block;padding:7px 9px 9px;font-family:'Big Shoulders Display';font-weight:700;font-size:16px;line-height:1.08;text-transform:uppercase;overflow-wrap:anywhere}
.f-plus{margin-top:12px}.f-plus summary{cursor:pointer;font-weight:700;color:var(--hot);padding:8px 0}
.f-plus ul{list-style:none;columns:2;column-gap:26px;font-size:14px;margin-top:4px}
.f-plus li{break-inside:avoid;padding:3px 0}.f-plus a{color:inherit}
.f-qr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.f-q{border:2px solid var(--line);border-radius:10px;padding:13px 15px;background:rgba(255,253,247,.03)}
.f-q h3{font-size:14.5px;line-height:1.3;font-weight:700;margin-bottom:5px;color:var(--paper)}
.f-q p{font-size:14.5px;line-height:1.5;color:rgba(255,253,247,.8)}
.f-q.n{grid-column:1/-1;border-color:color-mix(in srgb,var(--uni) 55%,transparent);border-left-width:6px}
@media(max-width:640px){
  .f-board b{font-size:21px}.ln-board.f-board .s{flex:1 1 30%;padding:8px 10px}
  .ticket-row .f-go-t{display:none}.ticket-row .t-nm{white-space:normal;font-size:24px}.ticket-row .t-st{font-size:12px}
  .f-rail{padding-left:32px}.f-rail::before{left:9px}
  .f-rail>li.f-a::before{left:-32px;width:22px;height:22px;margin-top:-11px;border-width:5px}
  .f-rail>li.f-ici::before{left:-35px;width:28px;height:28px;margin-top:-14px;border-width:6px}
  .f-stn::before{left:-26px}.f-saut::before{left:-23px}.f-bout::before{left:-32px;width:22px;height:22px}
  .f-card,.f-ici .f-card{grid-template-columns:82px minmax(0,1fr)}
  .f-hor{grid-column:1/-1;justify-content:flex-start;border-right:0;border-bottom:2px dashed var(--line);padding:5px 12px;font-size:15px}
  .f-tx b{font-size:19px}.f-ici .f-tx b{font-size:24px}.f-tx{padding:8px 11px}
  .f-qr{grid-template-columns:minmax(0,1fr)}.f-plus ul{columns:1}
}