/* ============================================================================
   AVANT LES SECOURS : main.css — direction artistique v2 « NUIT D'INTERVENTION »
   Archétype composé « SCÈNE D'URGENCE » (fiche §🎨), poussé au grade cinéma.
   La scène est SOMBRE, le site est VIF. Rouge pompier pour les actes et les
   verdicts d'erreur, jaune haute visibilité en SIGNALÉTIQUE seulement
   (chevrons, liserés, touches clavier), vert secours pour le geste juste,
   BLEU DE GYROPHARE réservé à la lumière des secours (température de lumière,
   jamais une encre d'interface). Chevrons diagonaux = motif d'identité.
   Géométrie angulaire, coins coupés, filets francs, zéro ombre molle.

   LA COUCHE CINÉMA (nouvelle en v2) : letterbox qui se ferme sur les phases
   regardées, grain de film (bruit feTurbulence pré-rasterisé en data-URI,
   déplacé par steps() : jamais un filtre live), vignettage double, grade
   colorimétrique nuit, équerres de cadre HUD, flash d'impact, voile de coupe.
   Tout est ORNEMENT : chaque effet meurt proprement en animations réduites.
   Zéro dépendance : polices locales, aucune requête vers un tiers.
   ========================================================================== */

/* ------------------------------------------------------------------ POLICES */
/* Display : Big Shoulders Display (SIL OFL) — condensée, aplomb d'affiche de
   caserne, chiffres qui font signature. Choix libre du builder (fiche §🎨). */
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/big-shoulders-display-latin-700-normal.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: 800; font-display: swap;
  src: url("../fonts/big-shoulders-display-latin-800-normal.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;
}
/* Corps : Source Sans 3 (SIL OFL) — humaniste, très lisible à 18 px et plus. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/source-sans-3-latin-400-normal.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: "Source Sans 3";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/source-sans-3-latin-600-normal.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: "Source Sans 3";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/source-sans-3-latin-700-normal.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;
}

/* ------------------------------------------------------- JETONS DU CONTRAT */
:root {
  /* la nuit : le plateau de la scène */
  --nuit: #0B1220;
  --nuit-2: #111A2E;
  --nuit-3: #1B263F;      /* neutre teinté bleu nuit, dérivé pour les filets de scène */
  --noir-cine: #02050B;   /* le noir du letterbox et des coupes : plus noir que la nuit */
  /* le jour : les pages vitrines */
  --jour: #FAFBFD;
  --jour-2: #F1F4F9;      /* neutre teinté, section alternée */
  /* encres */
  --encre: #0E1626;
  --encre-2: #3A4358;
  --encre-3: #5E6884;     /* dérivé AA sur --jour : 5,35:1 */
  --filet: #D8DDE7;
  /* accent maître */
  --rouge: #E2001A;
  --rouge-h: #B50015;
  --rouge-fond: #FDEBED;
  --rouge-clair: #FF5A66; /* dérivé d'accessibilité : rouge lisible SUR la nuit, 6,1:1 */
  /* signalétique */
  --jaune: #FFD500;       /* jamais en texte sur blanc, jamais en nappe */
  /* verdicts */
  --vert: #0E9F6E;
  --vert-txt: #0A7D56;    /* dérivé AA sur --jour : 5,15:1 */
  --vert-fond: #E7F6F0;
  /* température de lumière des secours : le bleu gyrophare. LUMIÈRE seulement
     (halos, lueurs de scène), jamais un texte, jamais un fond d'interface. */
  --gyro-bleu: #4E8CFF;

  /* rôles, réassignés par les thèmes */
  --fond: var(--jour);
  --fond-2: var(--jour-2);
  --texte: var(--encre);
  --texte-2: var(--encre-2);
  --texte-3: var(--encre-3);
  --bord: var(--filet);
  --acc-txt: var(--rouge);

  /* échelle 4/8 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 88px; --s10: 120px; --s11: 160px;

  --wrap: 1280px;
  --gout: 24px;
  --mesure: 66ch;
  --r: 2px;
  --trait: 2px;
  --coupe: 14px;          /* la coupe d'angle : géométrie de panneau */

  --corps: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --display: "Big Shoulders Display", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
  --duree: 200ms;
  --vitesse: 1;           /* réglage « vitesse des scènes », piloté par le panneau */

  /* LE GRAIN DE FILM : bruit feTurbulence rasterisé UNE FOIS par le navigateur
     (data-URI), puis déplacé en steps() par transform. Jamais de filtre SVG
     vivant sur la scène : un feTurbulence animé coûte, une tuile déplacée non. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .82 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* thème sombre : le site entier passe sur le plateau de la scène */
:root[data-theme="sombre"], :root[data-theme="auto"] { color-scheme: dark; }
:root[data-theme="sombre"] {
  --fond: #0B1220; --fond-2: #111A2E; --texte: #EDF1F8; --texte-2: #B4BFD3;
  --texte-3: #8B96AE; --bord: #26314B; --acc-txt: var(--rouge-clair);
  --rouge-fond: #2A0F16; --vert-fond: #0C2A22; --vert-txt: #35C795;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --fond: #0B1220; --fond-2: #111A2E; --texte: #EDF1F8; --texte-2: #B4BFD3;
    --texte-3: #8B96AE; --bord: #26314B; --acc-txt: var(--rouge-clair);
    --rouge-fond: #2A0F16; --vert-fond: #0C2A22; --vert-txt: #35C795;
  }
}
:root[data-contraste="haut"] {
  --texte: #000710; --texte-2: #0D1424; --texte-3: #1E2740; --bord: #7A849B;
  --acc-txt: #B50015; --trait: 3px;
}
:root[data-contraste="haut"][data-theme="sombre"] {
  --texte: #FFFFFF; --texte-2: #E9EEF8; --texte-3: #C8D1E2; --bord: #8E9AB4;
  --acc-txt: #FF8A93;
}
:root[data-taille="l"] { font-size: 112.5%; }
:root[data-taille="xl"] { font-size: 125%; }
:root[data-aeration="large"] { --mesure: 58ch; }
:root[data-aeration="large"] body { line-height: 1.85; letter-spacing: .012em; }
:root[data-aeration="large"] p + p { margin-block-start: var(--s6); }
:root[data-liens="marques"] main a { text-decoration: underline; text-underline-offset: 3px; }
:root[data-vitesse="lente"] { --vitesse: 1.55; }
:root[data-vitesse="rapide"] { --vitesse: .68; }

/* -------------------------------------------------------------------- SOCLE */
*, *::before, *::after { box-sizing: border-box; }
/* [hidden] doit gagner sur les display de composant (flex, grid) : sans cette
   ligne, un élément caché par le moteur reste visible. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 clamp(1.0625rem, 1rem + .3vw, 1.1875rem)/1.65 var(--corps);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--acc-txt); text-decoration-thickness: from-font; text-underline-offset: 2px; }
a:hover { color: var(--rouge-h); }
:root[data-theme="sombre"] a:hover { color: #FF8A93; }
::selection { background: var(--jaune); color: var(--encre); }
:focus-visible {
  outline: 3px solid var(--rouge);
  outline-offset: 2px;
  border-radius: 1px;
}
/* cibles de focus PROGRAMMATIQUE (titres qu'on donne au lecteur d'écran après
   une bascule d'écran) : elles reçoivent le focus, pas l'anneau. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.saut {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--rouge); color: #fff; padding: var(--s3) var(--s5);
  font: 700 1rem/1 var(--corps);
}
.saut:focus { left: var(--s4); top: var(--s4); }
.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gout); }
.wrap--mince { max-width: 940px; }

h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 800;
  line-height: .92;
  letter-spacing: .006em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.125rem, 1rem + 5.2vw, 6rem); }
/* l'en-tête est collante : les ancres se posent EN DESSOUS d'elle */
[id] { scroll-margin-block-start: 96px; }
h2 { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.75rem); }
h3 { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); }
h4 { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); letter-spacing: .03em; }
p { margin: 0 0 var(--s5); max-width: var(--mesure); }
.chapeau {
  font-size: clamp(1.125rem, 1rem + .55vw, 1.4375rem);
  line-height: 1.5;
  color: var(--texte-2);
}
.surtitre {
  font: 700 .8125rem/1.2 var(--corps);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin: 0 0 var(--s4);
  display: flex; align-items: center; gap: var(--s3);
}
.surtitre::before {
  content: ""; width: 26px; height: 8px; flex: none;
  background: repeating-linear-gradient(115deg, var(--rouge) 0 5px, var(--jaune) 5px 10px);
}

/* --------------------------------------------------- LE MOTIF : CHEVRONS */
/* Les bandes diagonales rouge / jaune des véhicules de secours. Motif
   d'identité : séparateurs, barres de progression, liserés. Jamais en nappe
   sur du texte : c'est de la signalétique, elle borde, elle ne remplit pas. */
.chevrons {
  height: 12px;
  background: repeating-linear-gradient(115deg,
    var(--rouge) 0 18px, var(--jaune) 18px 36px);
}
.chevrons--fin { height: 6px; }
.chevrons--epais { height: 20px; }
.chevrons--rouge {
  background: repeating-linear-gradient(115deg,
    var(--rouge) 0 18px, var(--rouge-h) 18px 36px);
}

/* la vraie flèche de chevron, en SVG répété : signature du hero et du plateau */
.bande-fleches {
  height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='26' viewBox='0 0 34 26'%3E%3Cpath d='M0 0h13l13 13-13 13H0l13-13z' fill='%23E2001A'/%3E%3Cpath d='M17 0h13l13 13-13 13H17l13-13z' fill='%23FFD500'/%3E%3C/svg%3E");
  background-size: 34px 26px;
  background-repeat: repeat-x;
}

/* ------------------------------------------------------------ BARRE D'UTILITÉ */
.utilite {
  background: var(--noir-cine);
  color: #C6CFE0;
  font: 600 .8125rem/1 var(--corps);
  letter-spacing: .04em;
}
.utilite__in {
  max-width: var(--wrap); margin-inline: auto;
  padding: var(--s3) var(--gout);
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
}
.utilite a { color: #C6CFE0; text-decoration: none; }
.utilite a:hover { color: var(--jaune); }
/* Langue : en français seul, une simple mention. Le sélecteur (le <details>)
   n'existe dans le HTML que si deux langues au moins sont construites : ces
   règles dorment jusque-là, et n'ajoutent aucun hex au contrat. */
.utilite__langue { color: #8B96AE; }
.langues { position: relative; }
.langues__b {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  list-style: none; color: #C6CFE0; min-height: 32px;
}
.langues__b::-webkit-details-marker { display: none; }
.langues[open] .langues__b, .langues__b:hover { color: var(--jaune); }
.langues__liste {
  position: absolute; z-index: 50; inset-inline-start: 0; inset-block-start: 100%;
  margin: 0; padding: var(--s2); list-style: none;
  background: var(--nuit); border: var(--trait) solid #26314B; min-width: 168px;
}
.langues__liste a { display: block; padding: var(--s2) var(--s3); }
.langues__liste a[aria-current] { color: var(--jaune); }

.utilite__urgence {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: var(--s2);
  color: #EDF1F8;
}
.utilite__urgence b {
  font-family: var(--display); font-size: 1.25rem; font-weight: 800;
  color: var(--jaune); letter-spacing: .02em;
}

/* --------------------------------------------------------------- L'EN-TÊTE */
.entete {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  border-block-end: var(--trait) solid var(--bord);
  backdrop-filter: saturate(150%) blur(6px);
}
.entete__in {
  max-width: var(--wrap); margin-inline: auto;
  padding: var(--s3) var(--gout);
  display: flex; align-items: center; gap: var(--s5);
}
.marque { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; color: inherit; }
.marque svg { display: block; }
.marque__txt { display: flex; flex-direction: column; gap: 1px; }
.marque__nom {
  font: 800 1.5rem/.86 var(--display);
  text-transform: uppercase; letter-spacing: .012em; color: var(--texte);
  white-space: nowrap;
}
.marque__base {
  font: 600 .625rem/1 var(--corps); letter-spacing: .14em;
  text-transform: uppercase; color: var(--texte-3);
}
.nav { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s2); }
.nav a {
  font: 700 .9375rem/1 var(--corps); letter-spacing: .04em; text-transform: uppercase;
  color: var(--texte-2); text-decoration: none;
  padding: var(--s3) var(--s4); position: relative;
}
.nav a:hover { color: var(--texte); }
.nav a::after {
  content: ""; position: absolute; inset-inline: var(--s4); bottom: 2px; height: 3px;
  background: var(--rouge); transform: scaleX(0); transform-origin: left;
  transition: transform var(--duree) ease;
}
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }

/* ------------------------------------------- L'EN-TÊTE AU POUCE (mobile-first)
   Conçu au pouce : la marque reste sur une ligne, la navigation passe sous elle
   et défile horizontalement DANS SON PROPRE conteneur. Le corps de page, lui,
   ne défile jamais latéralement. */
@media (max-width: 52rem) {
  .entete__in { flex-wrap: wrap; gap: var(--s3); padding-block: var(--s2); }
  .marque { flex: 1 1 auto; }
  .marque svg { width: 34px; height: 34px; }
  .marque__nom { font-size: 1.25rem; }
  .marque__base { display: none; }
  .nav {
    order: 3; width: 100%; min-width: 0; margin-inline-start: 0;
    overflow-x: auto; scrollbar-width: none;
    border-block-start: 1px solid var(--bord); padding-block-start: var(--s2);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; padding-inline: var(--s3); font-size: .8125rem; }
  .utilite__in { gap: var(--s2) var(--s4); font-size: .75rem; padding-block: var(--s2); }
  .utilite__urgence { margin-inline-start: 0; }
  .utilite__urgence b { font-size: 1.0625rem; }
}
/* garde-fou : aucune page ne défile latéralement, quoi qu'il arrive */
html, body { max-width: 100%; overflow-x: clip; }
/* au pouce, les actes prennent toute la largeur plutôt que de déborder */
@media (max-width: 34rem) {
  .btn { width: 100%; padding-inline: var(--s4); text-align: center; }
  .btn--gros { font-size: 1.0625rem; padding-inline: var(--s5); min-height: 58px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .final__actions { flex-direction: column; align-items: stretch; }
  .titrecard__actions { flex-direction: column; align-items: stretch; }
  .verdict .btn { width: auto; }
}

/* -------------------------------------------------------------- LES BOUTONS */
.btn {
  --btn-fond: var(--rouge); --btn-txt: #fff; --btn-bord: var(--rouge);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  min-height: 52px; padding: var(--s3) var(--s6);
  background: var(--btn-fond); color: var(--btn-txt);
  border: var(--trait) solid var(--btn-bord); border-radius: var(--r);
  font: 700 1.0625rem/1.1 var(--corps); letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  clip-path: polygon(var(--coupe) 0, 100% 0, 100% calc(100% - var(--coupe)), calc(100% - var(--coupe)) 100%, 0 100%, 0 var(--coupe));
  transition: background var(--duree) ease, color var(--duree) ease, translate var(--duree) ease;
}
.btn:hover { --btn-fond: var(--rouge-h); --btn-bord: var(--rouge-h); color: #fff; translate: 0 -2px; }
.btn:active { translate: 0 1px; }
.btn--gros { min-height: 64px; font-size: 1.1875rem; padding-inline: var(--s7); }
.btn--creux {
  --btn-fond: transparent; --btn-txt: var(--texte); --btn-bord: var(--texte);
}
.btn--creux:hover { --btn-fond: var(--texte); --btn-txt: var(--fond); }
.btn--nuit {
  --btn-fond: transparent; --btn-txt: #EDF1F8; --btn-bord: #47546F;
}
.btn--nuit:hover { --btn-fond: #EDF1F8; --btn-txt: var(--nuit); --btn-bord: #EDF1F8; }
.btn--jaune { --btn-fond: var(--jaune); --btn-txt: var(--encre); --btn-bord: var(--jaune); }
.btn--jaune:hover { --btn-fond: #E6C000; --btn-bord: #E6C000; --btn-txt: var(--encre); }
.btn[disabled] { opacity: .45; cursor: not-allowed; translate: none; }

/* ============================================================================
   L'ACCUEIL
   ========================================================================= */

/* ------------------------------------------------------------------- HERO
   Un PLAN de nuit, pas une bannière : la scène SVG v2 (lune voilée, brume,
   phares volumétriques, chaussée mouillée), deux lueurs de gyrophare (une
   rouge chaude, une bleue froide, déphasées, 0,85 Hz), le grain de film, un
   dégradé d'assise pour le texte. Le titre est monumental. */
.hero {
  position: relative; overflow: clip;
  background: var(--nuit);
  color: #EDF1F8;
  isolation: isolate;
}
.hero__scene { position: absolute; inset: 0; z-index: 0; }
.hero__scene svg { width: 100%; height: 100%; }
/* l'assise du texte : la nuit remonte du bord gauche et du bas */
.hero__scene::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--noir-cine) 55%, transparent), transparent 26%, transparent 62%, color-mix(in srgb, var(--noir-cine) 88%, transparent)),
    linear-gradient(100deg, color-mix(in srgb, var(--noir-cine) 72%, transparent) 0%, transparent 55%);
}
/* le halo de gyrophare : lent, jamais stroboscopique (0,85 Hz = 1 flash par
   1,18 s, très en dessous du plafond de 3 flashs/s, sécurité photosensibilité) */
.hero__gyro {
  position: absolute; z-index: 1; pointer-events: none;
  inset-block-start: -18%; inset-inline-end: -12%;
  width: 62vw; aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--rouge) 52%, transparent) 0%,
    color-mix(in srgb, var(--rouge) 16%, transparent) 34%,
    transparent 66%);
  mix-blend-mode: screen;
  animation: gyro 1180ms ease-in-out infinite alternate;
}
.hero__gyro--2 {
  inset-block-start: 22%; inset-inline-start: -24%; inset-inline-end: auto;
  width: 52vw;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--gyro-bleu) 38%, transparent) 0%,
    color-mix(in srgb, var(--gyro-bleu) 12%, transparent) 40%,
    transparent 64%);
  animation-duration: 1780ms; animation-delay: 380ms;
}
@keyframes gyro { from { opacity: .2; } to { opacity: .72; } }
/* le grain du hero : même tuile que la scène du jeu, opacité douce */
.hero::after {
  content: ""; position: absolute; inset: -60%; z-index: 2; pointer-events: none;
  background-image: var(--grain);
  background-size: 260px 260px;
  opacity: .5; mix-blend-mode: overlay;
  animation: grain 1.4s steps(7) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-3%, -6%); }
  30% { transform: translate(4%, 2%); }
  45% { transform: translate(-2%, 5%); }
  60% { transform: translate(5%, -3%); }
  75% { transform: translate(-5%, 1%); }
  90% { transform: translate(2%, 4%); }
}

.hero__in {
  position: relative; z-index: 3;
  max-width: var(--wrap); margin-inline: auto;
  min-height: clamp(540px, 78svh, 820px);
  padding: clamp(var(--s8), 7vw, var(--s11)) var(--gout) clamp(var(--s7), 5vw, var(--s9));
  display: grid; gap: var(--s7);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
}
@media (max-width: 62rem) { .hero__in { grid-template-columns: 1fr; align-items: start; min-height: 0; } }
.hero__surtitre {
  font: 700 .8125rem/1 var(--corps); letter-spacing: .18em; text-transform: uppercase;
  color: var(--jaune); margin: 0 0 var(--s5);
  display: inline-flex; align-items: center; gap: var(--s3);
}
.hero h1 { color: #fff; text-shadow: 0 2px 0 var(--noir-cine); }
.hero h1 em { font-style: normal; color: var(--jaune); display: block; }
/* chaque temps de la punchline est un BLOC : la coupure de ligne est voulue,
   et un temps trop long pour l'écran peut malgré tout se replier. */
.hero h1 .l { display: block; }
.hero__chapeau {
  margin: var(--s6) 0 0; max-width: 46ch;
  color: #C6CFE0; font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem); line-height: 1.55;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin-block-start: var(--s7); align-items: center; }
.hero__note { font: 600 .875rem/1.4 var(--corps); color: #8B96AE; letter-spacing: .02em; }
.hero__bandeau {
  position: relative; z-index: 3; margin: 0;
  border-block-start: var(--trait) solid #26314B;
  background: var(--noir-cine);
  font: 700 .75rem/1 var(--corps); letter-spacing: .2em; text-transform: uppercase;
  color: #8B96AE;
  padding: var(--s3) var(--gout);
  display: flex; align-items: center; gap: var(--s3);
  max-width: 100%;
}
.hero__bandeau::before {
  content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%;
  background: var(--jaune);
}

/* la carte « ordre d'intervention » posée dans le hero : bande hazard en tête,
   numéro en héros, coupe d'angle franche. */
.carte-cas {
  position: relative;
  background: color-mix(in srgb, var(--noir-cine) 86%, transparent);
  border: var(--trait) solid #2E3A57;
  padding: var(--s6);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  backdrop-filter: blur(3px);
}
.carte-cas::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 8px;
  background: repeating-linear-gradient(115deg, var(--rouge) 0 14px, var(--jaune) 14px 28px);
}
.carte-cas__num {
  font: 800 clamp(4rem, 9vw, 6.5rem)/.8 var(--display);
  color: var(--rouge-clair); letter-spacing: -.01em;
  margin: var(--s2) 0 0;
}
.carte-cas__niveau {
  font: 700 .75rem/1 var(--corps); letter-spacing: .16em; text-transform: uppercase;
  color: var(--jaune); margin-block: var(--s4) var(--s3);
}
.carte-cas h2 { font-size: clamp(1.75rem, 3vw, 2.625rem); color: #fff; }
.carte-cas p:not([class]) { color: #B4BFD3; font-size: 1rem; margin-block: var(--s4) var(--s5); max-width: 38ch; }
.carte-cas__meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  font: 600 .8125rem/1 var(--corps); letter-spacing: .06em; text-transform: uppercase;
  color: #8B96AE; padding-block-start: var(--s4); border-block-start: 1px solid #26314B;
}

/* --------------------------------------------------------- BANDE DE CHIFFRES */
.chiffres { background: var(--jour-2); border-block: var(--trait) solid var(--bord); }
:root[data-theme="sombre"] .chiffres, :root[data-theme="auto"] .chiffres { background: var(--fond-2); }
.chiffres__in {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gout);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 56rem) { .chiffres__in { grid-template-columns: repeat(2, 1fr); } }
.chiffre {
  padding: var(--s7) var(--s5) var(--s7) 0;
  border-inline-start: var(--trait) solid var(--bord);
  padding-inline-start: var(--s5);
}
.chiffre:first-child { border-inline-start: 0; padding-inline-start: 0; }
@media (max-width: 56rem) {
  .chiffre:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .chiffre { padding-block: var(--s6); }
}
.chiffre b {
  display: block; font: 800 clamp(3rem, 6.5vw, 5rem)/.85 var(--display);
  color: var(--texte); letter-spacing: -.005em;
}
.chiffre span {
  display: block; margin-block-start: var(--s3);
  font: 700 .9375rem/1.25 var(--corps); letter-spacing: .06em; text-transform: uppercase;
  color: var(--texte);
}
.chiffre small { display: block; margin-block-start: var(--s2); color: var(--texte-3); font-size: .875rem; }
.chiffre::after {
  content: ""; display: block; width: 40px; height: 6px; margin-block-start: var(--s4);
  background: repeating-linear-gradient(115deg, var(--rouge) 0 6px, var(--jaune) 6px 12px);
}

/* ------------------------------------------------------------- LES MÉCANIQUES */
.section { padding-block: clamp(var(--s8), 7vw, var(--s10)); }
.section--nuit { background: var(--nuit); color: #EDF1F8; }
.section--nuit h2, .section--nuit h3 { color: #fff; }
.section--nuit .chapeau, .section--nuit p { color: #B4BFD3; }
.section--nuit .surtitre { color: #8B96AE; }
.section--alt { background: var(--fond-2); }
.section__tete { max-width: 62ch; margin-block-end: var(--s8); }

.meca { display: grid; gap: var(--s7); }
.meca__item {
  display: grid; gap: var(--s6) var(--s7);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  padding-block: var(--s6);
  border-block-start: var(--trait) solid #26314B;
}
.meca__item:first-child { border-block-start: 0; padding-block-start: 0; }
.meca__item:nth-child(even) .meca__fig { order: -1; }
@media (max-width: 60rem) {
  .meca__item { grid-template-columns: 1fr; }
  .meca__item:nth-child(even) .meca__fig { order: 0; }
}
.meca__num {
  font: 800 1.125rem/1 var(--display); letter-spacing: .1em;
  color: var(--jaune);
}
.meca__txt h3 { margin-block: var(--s3) var(--s5); }
.meca__fig { position: relative; }
.meca__fig img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border: var(--trait) solid #2E3A57;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}
.meca__fig figcaption {
  margin-block-start: var(--s3); font-size: .8125rem; color: #8B96AE;
}
.meca__fig::before {
  content: ""; position: absolute; z-index: 1;
  inset-block-start: -10px; inset-inline-start: 26px; width: 96px; height: 10px;
  background: repeating-linear-gradient(115deg, var(--rouge) 0 8px, var(--jaune) 8px 16px);
}

/* ------------------------------------------------------------- LE PLATEAU */
.plateau { display: grid; gap: var(--s8); }
.niveau {
  display: grid; gap: var(--s5);
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
}
@media (max-width: 58rem) { .niveau { grid-template-columns: 1fr; } }
.niveau__tete { position: relative; padding-inline-start: var(--s6); }
.niveau__tete::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 10px;
  background: repeating-linear-gradient(180deg, var(--rouge) 0 14px, var(--jaune) 14px 28px);
}
.niveau__num {
  font: 700 .75rem/1 var(--corps); letter-spacing: .18em; text-transform: uppercase;
  color: var(--texte-3);
}
.niveau__tete h3 { margin-block: var(--s3) var(--s4); }
.niveau__tete p { font-size: .9375rem; color: var(--texte-2); margin: 0; }
.cases { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
/* une case = un dossier d'intervention. Le numéro est un héros discret, la
   coupe d'angle une constante, l'état une ligne de signalétique. */
.case {
  position: relative; display: flex; flex-direction: column; text-decoration: none;
  padding: var(--s4);
  border: var(--trait) solid var(--bord);
  background: var(--fond);
  color: var(--texte-3);
  min-height: 128px;
  overflow: clip;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.case__num {
  font: 800 1.875rem/1 var(--display); color: var(--texte-3);
}
.case__titre {
  display: block; margin-block: var(--s3) var(--s3);
  font: 700 .9375rem/1.25 var(--corps); color: var(--texte-2);
}
.case__etat {
  margin-block-start: auto; position: relative; z-index: 1;
  font: 600 .6875rem/1.2 var(--corps); letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-3);
  display: inline-flex; align-items: center; gap: 5px;
}
.case--verrou { background: var(--fond-2); }
.case--verrou::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg,
    color-mix(in srgb, var(--texte-3) 8%, transparent) 0 7px,
    transparent 7px 14px);
  pointer-events: none;
}
/* une situation déjà terminée (app.js pose data-fait) : le liseré du geste juste */
.case[data-fait="oui"] { border-color: var(--vert); }
.case[data-fait="oui"] .case__etat { color: var(--vert-txt); }
.case--ouvert {
  background: var(--rouge); border-color: var(--rouge); color: #fff;
  min-height: 152px;
  transition: background var(--duree) ease, translate var(--duree) ease;
}
.case--ouvert .case__num { color: #fff; font-size: 3rem; }
.case--ouvert .case__titre { color: #fff; font-size: 1.0625rem; }
.case--ouvert .case__etat { color: var(--jaune); }
.case--ouvert:hover { background: var(--rouge-h); border-color: var(--rouge-h); translate: 0 -3px; }
.case--ouvert::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 8px;
  background: repeating-linear-gradient(115deg, var(--jaune) 0 8px, transparent 8px 16px);
}
.case--ouvert[data-fait="oui"] { border-color: var(--rouge); }
.case--ouvert[data-fait="oui"] .case__etat { color: #fff; }
.plateau__note { margin-block-start: var(--s6); color: var(--texte-3); font-size: .9375rem; }

/* ----------------------------------------------- POURQUOI : photo plein cadre */
.pourquoi { position: relative; overflow: clip; background: var(--nuit); color: #EDF1F8; }
.pourquoi__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; opacity: .5;
}
.pourquoi::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, var(--nuit) 8%, color-mix(in srgb, var(--nuit) 72%, transparent) 52%, color-mix(in srgb, var(--nuit) 30%, transparent) 100%);
}
.pourquoi__in {
  position: relative; z-index: 2;
  max-width: var(--wrap); margin-inline: auto; padding: clamp(var(--s9), 8vw, var(--s11)) var(--gout);
}
.pourquoi__txt { max-width: 60ch; }
.pourquoi h2 { color: #fff; }
.pourquoi p { color: #C6CFE0; }
.pourquoi p:first-of-type {
  font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem);
  border-inline-start: 5px solid var(--rouge);
  padding-inline-start: var(--s5);
  margin-block-start: var(--s6);
}

/* ------------------------------------------------------------------- LE CANON */
.canon h2 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem); }
.canon { display: grid; gap: var(--s7); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 60rem) { .canon { grid-template-columns: 1fr; } }
.sources { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.sources li {
  border: var(--trait) solid var(--bord); padding: var(--s4) var(--s5);
  background: var(--fond);
  border-inline-start-width: 5px; border-inline-start-color: var(--rouge);
}
.sources b { display: block; font: 700 1rem/1.3 var(--corps); color: var(--texte); }
.sources span { display: block; font-size: .875rem; color: var(--texte-3); margin-block-start: 3px; }
.sources a { font-size: .875rem; }

/* --------------------------------------------------------------- DISCLAIMER */
.disclaimer {
  border: 3px solid var(--rouge);
  background: var(--rouge-fond);
  padding: var(--s7);
  position: relative;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
.disclaimer h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); color: var(--texte); }
.disclaimer__fort {
  font: 600 clamp(1.125rem, 1rem + .6vw, 1.375rem)/1.5 var(--corps);
  color: var(--texte); margin-block: var(--s5) var(--s5); max-width: 62ch;
}
.disclaimer__fort b { color: var(--rouge-h); }
:root[data-theme="sombre"] .disclaimer__fort b { color: var(--rouge-clair); }
.disclaimer p:last-child { color: var(--texte-2); font-size: 1rem; margin: 0; }

/* ---------------------------------------------------------------- DOCTRINE */
.doctrine { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.doctrine__i { border-block-start: 5px solid var(--vert); padding-block-start: var(--s4); }
.doctrine__i:nth-child(2) { border-color: var(--rouge); }
.doctrine__i:nth-child(3) { border-color: var(--jaune); }
.doctrine__i:nth-child(4) { border-color: var(--texte-3); }
.doctrine__i h3 { font-size: 1.25rem; margin-block-end: var(--s3); }
.doctrine__i p { font-size: .9375rem; color: var(--texte-2); margin: 0; }

/* ------------------------------------------------------------- PIED DE PAGE */
.pied { background: var(--nuit); color: #B4BFD3; font-size: .9375rem; }
.pied a { color: #C6CFE0; text-decoration: none; }
.pied a:hover { color: var(--jaune); text-decoration: underline; }
.pied__in {
  max-width: var(--wrap); margin-inline: auto; padding: var(--s9) var(--gout) var(--s6);
  display: grid; gap: var(--s7); grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}
@media (max-width: 62rem) { .pied__in { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .pied__in { grid-template-columns: 1fr; } }
.pied h2 { font-size: 1rem; letter-spacing: .14em; color: #EDF1F8; margin-block-end: var(--s4); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.pied__urgence {
  border: var(--trait) solid #26314B; padding: var(--s4) var(--s5); margin-block-start: var(--s5);
  color: #EDF1F8;
}
.pied__urgence b { font-family: var(--display); font-size: 1.5rem; color: var(--jaune); letter-spacing: .02em; }
.pied__bas {
  border-block-start: 1px solid #26314B; margin-block-start: var(--s6);
  padding: var(--s5) var(--gout) var(--s7);
  max-width: var(--wrap); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); align-items: center;
  font-size: .8125rem; color: #8B96AE;
}

/* ============================================================================
   LE JEU — plateau de scène, décisions, verdicts. LA COUCHE CINÉMA.
   ========================================================================= */
/* Le jeu occupe la fenêtre moins l'en-tête : la décision reste TOUJOURS à
   l'écran, sans défilement. En plein écran, il prend tout. */
.jeu {
  position: relative;
  background: var(--nuit);
  color: #EDF1F8;
  height: calc(100svh - 108px);
  min-height: 620px;
  display: flex; flex-direction: column;
}
.jeu.est-plein {
  position: fixed; inset: 0; z-index: 200; height: 100svh; min-height: 0;
}
@media (max-width: 40rem) { .jeu { height: calc(100svh - 92px); min-height: 560px; } }
.jeu.est-fini { height: auto; }
/* bandeau permanent : rien n'est réel */
.jeu__bandeau {
  flex: none;
  /* wrap : à 320 px, « rien n'est réel » et les deux outils ne tiennent pas
     sur une ligne — le bandeau se replie au lieu de pousser hors de l'écran */
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
  padding: var(--s2) var(--s4);
  background: var(--noir-cine); border-block-end: 1px solid #1B263F;
  font: 700 .6875rem/1 var(--corps); letter-spacing: .18em; text-transform: uppercase;
  color: #8B96AE;
}
.jeu__bandeau b { color: var(--jaune); letter-spacing: .18em; }
.jeu__clavier { color: #5B6786; letter-spacing: .1em; }
@media (max-width: 52rem) { .jeu__clavier { display: none; } }
.jeu__outils { margin-inline-start: auto; display: flex; gap: var(--s2); align-items: center; }
.jeu__outil {
  background: transparent; border: 1px solid #2E3A57; color: #C6CFE0;
  font: 700 .6875rem/1 var(--corps); letter-spacing: .1em; text-transform: uppercase;
  padding: 7px var(--s3); cursor: pointer; border-radius: var(--r);
  min-height: 32px; display: inline-flex; align-items: center; gap: 6px;
}
.jeu__outil:hover { border-color: var(--jaune); color: var(--jaune); }
/* le son coupé se VOIT : liseré pointillé, texte en retrait, barre oblique */
.jeu__outil.est-coupe { border-style: dashed; color: #8B96AE; position: relative; }
.jeu__outil.est-coupe::after {
  content: ""; position: absolute; inset-inline-start: 6px; inset-inline-end: 6px;
  top: 50%; height: 2px; background: currentColor; opacity: .55;
  transform: rotate(-8deg); pointer-events: none;
}

/* la barre de progression : des segments fléchés (le motif chevron devient
   la géométrie même de la barre). Le segment courant respire à 0,85 Hz. */
.progres { flex: none; display: flex; gap: 3px; padding: var(--s2) var(--s4); background: var(--noir-cine); }
.progres__p {
  flex: 1; height: 9px; background: #1B263F; position: relative; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%, 6px 50%);
}
.progres__p:first-child { clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%); }
.progres__p[data-etat="fait"] { background: var(--vert); }
.progres__p[data-etat="courant"] { background: var(--jaune); animation: respire 1180ms ease-in-out infinite alternate; }
.progres__p[data-etat="rate"] { background: var(--rouge); }
@keyframes respire { from { opacity: .55; } to { opacity: 1; } }

/* --------------------------------------------------------------- LA SCÈNE */
.scene {
  position: relative; flex: 1 1 auto;
  min-height: min(46svh, 380px);
  overflow: clip;
  background: linear-gradient(180deg, #04070E 0%, var(--nuit) 42%, #04070E 100%);
}
.scene svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* Les acteurs et la caméra : la POSE est une propriété CSS, donc elle
   s'interpole. Origine en 0 0 pour que translate/scale gardent la sémantique
   des attributs SVG d'origine. Le moteur pilote la durée au cas par cas. */
.scene svg [data-e] {
  transform-origin: 0 0;
  transition: transform 600ms cubic-bezier(.35, 0, .2, 1), opacity 520ms ease;
}
/* les plans de parallaxe : même origine, même courbe. Le moteur leur applique
   un correctif inverse du travelling (data-prof, voir moteur.parallaxe). */
.scene svg [data-prof] {
  transform-origin: 0 0;
  transition: transform 600ms cubic-bezier(.35, 0, .2, 1);
}
.scene svg [data-plan="pluie"] { animation: pluie 900ms linear infinite; }
@keyframes pluie { from { transform: translate(0, -30px); } to { transform: translate(-10px, 0); } }
:root[data-animations="off"] .scene svg [data-plan="pluie"] { animation: none; }
/* quand le canvas de pluie tourne, la pluie SVG s'efface aux deux tiers :
   elle reste la matière du fond, le canvas fait le mouvement. */
.scene.a-fx svg [data-plan="pluie"] { animation: none; opacity: .1; }
.scene__fx {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  pointer-events: none;
}
/* les feux de détresse et les gyrophares dessinés DANS les décors : l'enfant
   .k-cligno clignote, le wrapper data-e reste pilotable par les poses.
   0,85 Hz strict (1180 ms), alternance par déphasage. */
.k-cligno { animation: k-cligno 1180ms steps(1) infinite; }
.k-cligno--2 { animation-delay: 590ms; }
@keyframes k-cligno { 0%, 100% { opacity: 1; } 50% { opacity: .12; } }
.k-gyro { animation: k-gyro 1180ms ease-in-out infinite alternate; }
.k-gyro--2 { animation-delay: 590ms; animation-direction: alternate-reverse; }
@keyframes k-gyro { from { opacity: .15; } to { opacity: 1; } }

/* les lueurs de gyrophare sur la scène : une bleue (les secours), une rouge
   chaude en écho, déphasées, en mode screen : la lumière S'AJOUTE à la nuit. */
.scene__gyro {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(circle at 22% 24%,
    color-mix(in srgb, var(--gyro-bleu) 44%, transparent) 0%, transparent 52%);
  opacity: 0; mix-blend-mode: screen;
}
.scene__gyro--2 {
  background: radial-gradient(circle at 78% 20%,
    color-mix(in srgb, var(--rouge) 34%, transparent) 0%, transparent 48%);
}
.scene.a-gyro .scene__gyro { animation: gyro 1180ms ease-in-out infinite alternate; }
.scene.a-gyro .scene__gyro--2 { animation-delay: 590ms; animation-direction: alternate-reverse; }

/* LE GRADE : la correction colorimétrique du plan. Deux nappes : une montée
   bleu-acier par le haut (screen), une assise sombre : c'est ce calque qui
   unifie tous les décors dans la même pellicule. */
.scene__grade {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background:
    radial-gradient(ellipse at 50% -10%, color-mix(in srgb, #2E4A7A 36%, transparent), transparent 58%),
    linear-gradient(200deg, color-mix(in srgb, #16304F 26%, transparent), transparent 46%);
  mix-blend-mode: screen;
  opacity: .8;
}
/* le vignettage : double — une ellipse douce + les bords écrasés */
.scene__vignettage {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 44%, transparent 40%, color-mix(in srgb, var(--noir-cine) 58%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--noir-cine) 42%, transparent), transparent 14%, transparent 82%, color-mix(in srgb, var(--noir-cine) 55%, transparent));
}
/* LE GRAIN : la pellicule respire. Tuile pré-rasterisée, déplacée en steps(). */
.scene__grain {
  position: absolute; inset: -60%; z-index: 5; pointer-events: none;
  background-image: var(--grain);
  background-size: 260px 260px;
  opacity: .55; mix-blend-mode: overlay;
  animation: grain 1.4s steps(7) infinite;
}
/* LES ÉQUERRES DE CADRE : quatre coins de visée, jaune signalétique éteint.
   Elles disent « ceci est un cadre » sans jamais gêner la lecture. */
.scene__cadre {
  position: absolute; inset: 10px; z-index: 6; pointer-events: none;
  opacity: .38;
  background:
    linear-gradient(var(--jaune), var(--jaune)) 0 0 / 22px 2px,
    linear-gradient(var(--jaune), var(--jaune)) 0 0 / 2px 22px,
    linear-gradient(var(--jaune), var(--jaune)) 100% 0 / 22px 2px,
    linear-gradient(var(--jaune), var(--jaune)) 100% 0 / 2px 22px,
    linear-gradient(var(--jaune), var(--jaune)) 0 100% / 22px 2px,
    linear-gradient(var(--jaune), var(--jaune)) 0 100% / 2px 22px,
    linear-gradient(var(--jaune), var(--jaune)) 100% 100% / 22px 2px,
    linear-gradient(var(--jaune), var(--jaune)) 100% 100% / 2px 22px;
  background-repeat: no-repeat;
}
/* LE LETTERBOX : les barres se ferment sur les phases regardées (classe
   est-cine posée par le moteur), s'ouvrent quand la décision revient. */
.scene__lb {
  position: absolute; inset-inline: 0; z-index: 8; pointer-events: none;
  height: clamp(18px, 6.5%, 42px);
  background: var(--noir-cine);
  transform: scaleY(0);
  transition: transform 700ms cubic-bezier(.65, 0, .35, 1);
}
.scene__lb--h { inset-block-start: 0; transform-origin: top; }
.scene__lb--b { inset-block-end: 0; transform-origin: bottom; }
.scene.est-cine .scene__lb { transform: scaleY(1); }
/* le flash d'impact (hit-stop) et le voile de coupe : la classe s'ALLUME sans
   transition et s'éteint en fondu ; le moteur la retire par minuteur. Si une
   transition ne joue pas (recette sous temps virtuel), l'état de base reprend
   la main : jamais de voile noir résiduel. */
.scene__flash {
  position: absolute; inset: 0; z-index: 65; pointer-events: none;
  background: #fff; opacity: 0; mix-blend-mode: overlay;
  transition: opacity 220ms ease-out;
}
.scene__flash.est-flash { opacity: .85; transition: opacity 40ms ease-in; }
.scene__coupe {
  position: absolute; inset: 0; z-index: 70; pointer-events: none;
  background: var(--noir-cine); opacity: 0;
  transition: opacity 300ms ease-out;
}
.scene__coupe.est-coupe { opacity: 1; transition: none; }

.scene__narration {
  position: absolute; z-index: 9; inset-inline: 0; inset-block-end: 0;
  padding: var(--s7) var(--s5) var(--s5);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--noir-cine) 92%, transparent) 62%);
}
.scene__narration p {
  max-width: 58ch; margin: 0 auto var(--s3);
  font-size: clamp(1rem, .95rem + .4vw, 1.1875rem); line-height: 1.5; color: #EDF1F8;
  text-shadow: 0 1px 0 var(--noir-cine);
  animation: nar-entre 600ms ease both;
}
.scene__narration p:nth-child(2) { animation-delay: 240ms; }
.scene__narration p:nth-child(3) { animation-delay: 480ms; }
@keyframes nar-entre {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.scene__st {
  position: absolute; z-index: 9; inset-block-end: var(--s2); inset-inline: 0; text-align: center;
  font: 600 .8125rem/1.3 var(--corps); color: #8B96AE; padding-inline: var(--s4);
}
/* la légende de plan : un cartouche HUD, liseré jaune, haut-gauche */
.scene__legende {
  position: absolute; z-index: 9; inset-block-start: var(--s3); inset-inline-start: var(--s4);
  margin: 0; max-width: 46%;
  font: 700 .6875rem/1.3 var(--corps); letter-spacing: .14em; text-transform: uppercase;
  color: #B4BFD3;
  padding: 6px var(--s3);
  border-inline-start: 3px solid var(--jaune);
  background: color-mix(in srgb, var(--noir-cine) 72%, transparent);
}
.scene__legende:empty { display: none; }

/* le chrono et le minuteur : des instruments de HUD, pas des textes posés */
.chrono {
  position: absolute; z-index: 9; inset-block-start: var(--s3); inset-inline-end: var(--s4);
  display: flex; align-items: baseline; gap: var(--s3);
  font-family: var(--display); font-weight: 800; letter-spacing: .02em;
  padding: 6px var(--s3);
  background: color-mix(in srgb, var(--noir-cine) 72%, transparent);
  border-inline-end: 3px solid var(--jaune);
}
.chrono__v { font-size: 2rem; line-height: 1; color: #EDF1F8; }
.chrono__l { font: 600 .6875rem/1 var(--corps); letter-spacing: .14em; text-transform: uppercase; color: #8B96AE; }
.minuteur {
  position: absolute; z-index: 9; inset-block-start: var(--s3); inset-inline: var(--s4);
  display: flex; flex-direction: column; gap: 5px; align-items: center;
}
.minuteur__barre {
  width: min(340px, 70%); height: 10px; background: color-mix(in srgb, var(--noir-cine) 80%, transparent);
  border: 1px solid #1B263F;
}
.minuteur__jauge {
  height: 100%; width: 100%;
  background: repeating-linear-gradient(115deg, var(--jaune) 0 10px, #C8A800 10px 14px);
  transition: width 240ms linear;
}
.minuteur[data-urgent="oui"] .minuteur__jauge {
  background: repeating-linear-gradient(115deg, var(--rouge) 0 10px, var(--rouge-h) 10px 14px);
}
.minuteur[data-urgent="oui"] .minuteur__barre { animation: respire 1180ms ease-in-out infinite alternate; }
.minuteur__l {
  font: 700 .6875rem/1 var(--corps); letter-spacing: .14em; text-transform: uppercase; color: #C6CFE0;
  background: color-mix(in srgb, var(--noir-cine) 72%, transparent);
  padding: 4px var(--s3);
}

/* ------------------------------------------------------ LA CARTE-TITRE
   L'écran d'ouverture du cas : un carton de film posé sur le décor. */
.titrecard {
  position: absolute; inset: 0; z-index: 75;
  display: grid; place-items: center;
  padding: var(--s5);
  overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--noir-cine) 82%, transparent),
    color-mix(in srgb, var(--noir-cine) 45%, transparent) 42%,
    color-mix(in srgb, var(--noir-cine) 86%, transparent));
}
.titrecard__in {
  position: relative; width: min(680px, 100%);
  background: color-mix(in srgb, var(--noir-cine) 82%, transparent);
  border: var(--trait) solid #2E3A57;
  padding: clamp(var(--s5), 4vw, var(--s7));
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  backdrop-filter: blur(3px);
  animation: carte-entre 700ms cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes carte-entre {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.titrecard__in::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 8px;
  background: repeating-linear-gradient(115deg, var(--rouge) 0 14px, var(--jaune) 14px 28px);
}
.titrecard__sur {
  display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap;
  font: 700 .75rem/1 var(--corps); letter-spacing: .18em; text-transform: uppercase;
  color: var(--jaune); margin: var(--s2) 0 var(--s4);
}
.titrecard__num {
  font: 800 clamp(2.5rem, 6vw, 3.75rem)/.8 var(--display);
  color: var(--rouge-clair); letter-spacing: 0;
}
.titrecard__titre { font-size: clamp(2.25rem, 6.5vw, 4.25rem); color: #fff; }
.titrecard__punch {
  margin: var(--s4) 0 0; max-width: 52ch;
  color: #C6CFE0; font-size: clamp(1rem, .95rem + .4vw, 1.1875rem); line-height: 1.55;
}
.titrecard__meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin: var(--s5) 0 0;
  font: 600 .8125rem/1 var(--corps); letter-spacing: .08em; text-transform: uppercase;
  color: #8B96AE;
  padding-block-start: var(--s4); border-block-start: 1px solid #26314B;
}
.titrecard__actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin-block-start: var(--s5); }
/* la sortie de la carte : un fondu de transition (le retrait est un minuteur
   du moteur : jamais suspendu à un événement d'animation) */
.titrecard { transition: opacity 440ms ease-out; }
.titrecard--sort { opacity: 0; }

/* ------------------------------------------------------------ LES DÉCISIONS */
.decision {
  flex: none;
  background: linear-gradient(180deg, #08101C, var(--noir-cine));
  border-block-start: var(--trait) solid #1B263F;
  max-height: 56%; overflow-y: auto; overscroll-behavior: contain;
}
.decision__in { max-width: 1080px; margin-inline: auto; padding: var(--s5) var(--s4) var(--s6); }
.decision__q {
  font: 800 clamp(1.25rem, 1.1rem + .9vw, 1.75rem)/1.05 var(--display);
  text-transform: uppercase; letter-spacing: .01em; color: #fff;
  margin: 0 0 var(--s5);
  display: flex; align-items: center; gap: var(--s4);
}
.decision__q::before {
  content: ""; flex: none; width: 34px; height: 12px;
  background: repeating-linear-gradient(115deg, var(--rouge) 0 6px, var(--jaune) 6px 12px);
}
/* pendant la conséquence : l'étiquette respire, on regarde */
.decision__q--attente { color: #B4BFD3; animation: respire 1180ms ease-in-out infinite alternate; }
.choix { display: grid; gap: var(--s3); }
.choix__b {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: center; gap: var(--s4);
  width: 100%; text-align: start; cursor: pointer;
  background: color-mix(in srgb, var(--nuit-2) 88%, transparent); color: #EDF1F8;
  border: var(--trait) solid #2E3A57; border-radius: var(--r);
  border-inline-start-width: 4px;
  padding: var(--s4) var(--s5);
  font: 400 clamp(1rem, .96rem + .3vw, 1.125rem)/1.4 var(--corps);
  min-height: 58px;
  transition: background var(--duree) ease, border-color var(--duree) ease, translate var(--duree) ease;
}
.choix__b:hover, .choix__b:focus-visible {
  border-color: var(--jaune); background: #16223B; translate: 4px 0;
}
.choix__b kbd {
  font: 800 1.25rem/1 var(--display); color: var(--jaune);
  background: transparent; border: var(--trait) solid #2E3A57; border-radius: var(--r);
  width: 40px; height: 40px; display: grid; place-items: center;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: background var(--duree) ease, color var(--duree) ease, border-color var(--duree) ease;
}
.choix__b:hover kbd, .choix__b:focus-visible kbd {
  background: var(--jaune); color: var(--encre); border-color: var(--jaune);
}
/* la flèche d'armement : n'apparaît qu'au survol, pur signal */
.choix__b::after {
  content: ""; width: 12px; height: 12px; justify-self: end;
  border-block-start: 3px solid var(--jaune); border-inline-end: 3px solid var(--jaune);
  transform: rotate(45deg) translate(-4px, 4px); opacity: 0;
  transition: opacity var(--duree) ease, transform var(--duree) ease;
}
.choix__b:hover::after, .choix__b:focus-visible::after { opacity: 1; transform: rotate(45deg) translate(0, 0); }
.choix__b[disabled] { opacity: .4; cursor: wait; translate: none; }
.choix__b[data-vu="oui"] { border-style: dashed; border-inline-start-style: solid; opacity: .72; }

.suite { display: flex; justify-content: center; padding-block: var(--s5); }

/* --------------------------------------------------- LE VERDICT PLEIN ÉCRAN
   Trois entrées, trois caractères : le rouge SLAM (il frappe), le vert MONTE
   (il récompense), le jaune TAMPONNE (il toise). Fond texturé en diagonales
   sombres + vignette : un aplat vivant, jamais un aplat mort. */
.verdict {
  position: absolute; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: var(--s6) var(--s5);
  overflow-y: auto; overscroll-behavior: contain;
}
.verdict[hidden] { display: none; }
.verdict::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(135deg, transparent 0 26px, rgba(0, 0, 0, .07) 26px 52px),
    radial-gradient(ellipse at 50% 40%, transparent 44%, rgba(0, 0, 0, .28) 100%);
}
.verdict--rouge { background: var(--rouge); color: #fff; animation: v-slam 340ms cubic-bezier(.16, .84, .3, 1) both; }
.verdict--vert { background: var(--vert); color: #04241A; animation: v-monte 460ms cubic-bezier(.2, .8, .3, 1) both; }
.verdict--jaune { background: var(--jaune); color: var(--encre); animation: v-tampon 380ms cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes v-slam {
  0% { opacity: 0; transform: scale(1.1); clip-path: inset(46% 0 46% 0); }
  55% { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 1; transform: scale(1); clip-path: inset(0 0 0 0); }
}
@keyframes v-monte {
  from { opacity: 0; transform: translateY(34px); }
  to { opacity: 1; transform: none; }
}
@keyframes v-tampon {
  0% { opacity: 0; transform: scale(1.12) rotate(-1.2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.verdict__in { position: relative; max-width: 62ch; text-align: start; }
.verdict__etiq {
  font: 700 .75rem/1 var(--corps); letter-spacing: .2em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--s3); margin-block-end: var(--s5);
  opacity: .9;
}
.verdict__etiq::before { content: ""; width: 30px; height: 3px; background: currentColor; }
.verdict h2 {
  font-size: clamp(2.25rem, 1.5rem + 4.6vw, 4.5rem); color: inherit; margin-block-end: var(--s5);
}
/* l'aberration chromatique du choc : deux ombres de canal (cyan / rouge sombre)
   qui se résorbent. Portée par le titre du verdict rouge, 700 ms, une fois. */
.verdict__choc { animation: choc 700ms ease-out both; }
@keyframes choc {
  0% { text-shadow: -7px 0 rgba(64, 224, 255, .85), 7px 0 rgba(120, 0, 20, .9); transform: translateX(3px); }
  40% { text-shadow: -3px 0 rgba(64, 224, 255, .5), 3px 0 rgba(120, 0, 20, .55); transform: translateX(-1px); }
  100% { text-shadow: 0 0 rgba(64, 224, 255, 0), 0 0 rgba(120, 0, 20, 0); transform: none; }
}
.verdict p {
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem); line-height: 1.45; max-width: 46ch;
  margin-block-end: var(--s6);
}
.verdict__src {
  font: 600 .8125rem/1.45 var(--corps); opacity: .92;
  border-block-start: 2px solid currentColor; padding-block-start: var(--s3);
  max-width: 58ch; margin-block-end: var(--s6);
}
.verdict__src a { color: inherit; }
.verdict .btn { --btn-fond: transparent; --btn-txt: currentColor; --btn-bord: currentColor; }
.verdict .btn:hover { --btn-fond: currentColor; }
.verdict--rouge .btn:hover { color: var(--rouge); }
.verdict--vert .btn:hover { color: var(--vert); }
.verdict--jaune .btn:hover { color: var(--jaune); }
/* le focus clavier DANS un verdict : l'anneau rouge du site disparaîtrait sur
   le fond rouge du slam — currentColor le rend visible sur les trois fonds. */
.verdict :focus-visible { outline-color: currentColor; }

/* ============================================================================
   LE MINI-JEU DU DISPOSITIF CARDIAQUE
   Deux épreuves, un seul langage : cartouches noir-ciné à liseré jaune (le HUD
   du contrat), jauge HACHURÉE comme le minuteur, chevrons pour la géométrie,
   zéro ombre molle. Le vert dit « dans la fenêtre », le rouge dit « hors »,
   le jaune reste la signalétique. Rien n'est porté par la couleur seule :
   la jauge porte un état data-dans, et les chiffres disent tout.
   ========================================================================= */
.epreuve { display: grid; gap: var(--s4); }
.epreuve__consigne { color: #B4BFD3; font-size: 1rem; margin: 0; max-width: 62ch; }

/* la jauge de cadence : la piste, la FENÊTRE du canon en clair, l'aiguille */
.jauge { display: grid; gap: var(--s2); }
.jauge__l { margin: 0; font: 600 .75rem/1 var(--corps); letter-spacing: .14em; text-transform: uppercase; color: #8B96AE; }
.jauge__l b { font: 800 2.25rem/1 var(--display); color: #EDF1F8; margin-inline-end: var(--s2); letter-spacing: 0; }
.jauge__piste {
  position: relative; height: 30px; background: var(--noir-cine);
  border: var(--trait) solid #2E3A57;
  background-image: repeating-linear-gradient(115deg, transparent 0 8px, color-mix(in srgb, #2E3A57 55%, transparent) 8px 10px);
}
.jauge__zone {
  position: absolute; inset-block: 0;
  background: color-mix(in srgb, var(--vert) 26%, transparent);
  border-inline: var(--trait) solid var(--vert);
}
.jauge__aig {
  position: absolute; inset-block: -4px; width: 5px; margin-inline-start: -2px;
  background: var(--jaune); transition: inset-inline-start 90ms linear;
}
.jauge__piste[data-dans="oui"] .jauge__aig { background: #fff; }
.jauge__piste[data-dans="non"] .jauge__aig { background: var(--jaune); }
.jauge__ech { margin: 0; display: flex; justify-content: space-between;
  font: 600 .6875rem/1 var(--corps); color: #5B6786; letter-spacing: .1em; }

/* les compteurs de l'épreuve : même grammaire que les chiffres de l'écran final */
.epreuve__cpt {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--s4);
  border-block: var(--trait) solid #1B263F; padding-block: var(--s3);
}
.epreuve__cpt b { display: block; font: 800 1.75rem/1 var(--display); color: #fff; }
.epreuve__cpt span { font: 600 .6875rem/1.2 var(--corps); letter-spacing: .1em; text-transform: uppercase; color: #8B96AE; }

/* LA FATIGUE : elle se remplit, et passe en signalétique au seuil */
.epreuve__fatigue-l { margin: 0; font: 600 .6875rem/1 var(--corps); letter-spacing: .14em;
  text-transform: uppercase; color: #8B96AE; }
.epreuve__fatigue { height: 10px; background: var(--noir-cine); border: var(--trait) solid #2E3A57; }
.epreuve__fatigue-j { height: 100%; width: 0%; background: #2E3A57; transition: width 120ms linear; }
.epreuve__fatigue[data-etat="oui"] .epreuve__fatigue-j { background: var(--jaune); }
.epreuve__etat { margin: 0; min-height: 1.4em; color: var(--jaune); font-weight: 600; font-size: .9375rem; }

/* LE BOUTON D'APPUI : la plus grande cible du jeu. Un carré franc, à angles
   coupés, qui s'enfonce visiblement au contact (et pas en animations réduites). */
.epreuve__acts { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: stretch; }
.epreuve__b {
  flex: 1 1 260px; min-height: 104px; cursor: pointer;
  background: var(--rouge); color: #fff; border: var(--trait) solid var(--rouge);
  display: grid; place-content: center; gap: var(--s1); text-align: center;
  clip-path: polygon(var(--coupe) 0, 100% 0, 100% calc(100% - var(--coupe)), calc(100% - var(--coupe)) 100%, 0 100%, 0 var(--coupe));
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.epreuve__b-t { font: 800 2rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.epreuve__b-k { font: 600 .75rem/1 var(--corps); letter-spacing: .12em; opacity: .8; }
.epreuve__b:hover { background: var(--rouge-h); }
.epreuve__b:active { background: var(--rouge-h); translate: 0 3px; }
.epreuve__b[disabled] { opacity: .45; cursor: default; translate: none; }
.epreuve__outil {
  flex: 0 0 auto; min-height: 104px; padding-inline: var(--s5); cursor: pointer;
  background: transparent; color: #B4BFD3; border: var(--trait) dashed #47546F;
  font: 700 .8125rem/1.3 var(--corps); letter-spacing: .1em; text-transform: uppercase;
}
.epreuve__outil:hover { border-color: var(--jaune); color: var(--jaune); }
.epreuve__outil.est-actif { border-style: solid; border-color: var(--jaune); color: var(--jaune); }
.epreuve__outil[disabled] { opacity: .4; cursor: default; }

/* L'APPAREIL QUI PARLE : un cartouche d'écran. Ses mots sont SOUVERAINS —
   le son ne dit rien qu'il ne dise ici (règle audio : jamais de voix). */
.dispo {
  background: var(--noir-cine); border: var(--trait) solid #2E3A57;
  border-inline-start: 5px solid #0E7A55;
  padding: var(--s4) var(--s5); display: grid; gap: var(--s2);
}
.dispo__etiq { margin: 0; font: 700 .6875rem/1 var(--corps); letter-spacing: .2em;
  text-transform: uppercase; color: #6E86AE; display: flex; align-items: center; gap: var(--s3); }
.dispo__etiq::before { content: ""; width: 9px; height: 9px; background: #0E7A55; flex: none;
  animation: respire 1180ms ease-in-out infinite alternate; }
.dispo__voix { margin: 0; font: 700 1.25rem/1.35 var(--corps); color: #8FE3C0; }
.dispo__pas { margin: 0; font: 600 .6875rem/1 var(--corps); letter-spacing: .14em;
  text-transform: uppercase; color: #5B6786; }
.dispo[data-etat="ok"] { border-inline-start-color: var(--vert); }
.dispo[data-etat="faux"] { border-inline-start-color: var(--rouge); }
.dispo[data-etat="faux"] .dispo__voix { color: var(--rouge-clair); }

/* la mesure d'une épreuve, dans le verdict : factuelle, en retrait du message */
.verdict__mesure {
  font: 600 .9375rem/1.5 var(--corps); opacity: .85;
  border-inline-start: 3px solid currentColor; padding-inline-start: var(--s4);
}

/* le pavé « point sûr » */
.checkpoint {
  position: absolute; z-index: 55; inset-block-end: var(--s5); inset-inline-start: 50%;
  translate: -50% 0;
  background: var(--noir-cine); border: var(--trait) solid var(--vert); color: #EDF1F8;
  padding: var(--s3) var(--s5);
  font: 700 .75rem/1 var(--corps); letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--s3);
  animation: cp 3200ms ease-in-out both;
}
.checkpoint::before { content: ""; width: 9px; height: 9px; background: var(--vert); flex: none; }
@keyframes cp {
  0% { opacity: 0; translate: -50% 14px; }
  12%, 74% { opacity: 1; translate: -50% 0; }
  100% { opacity: 0; translate: -50% -8px; }
}

/* ---------------------------------------------------------- LE VERDICT FINAL
   Le débriefing : étiquette, verdict en très grand, badges, chiffres,
   actions. Tout entre en cascade (retards croissants). */
.final { flex: 1 1 auto; padding: var(--s8) var(--s5) var(--s9); background: var(--nuit); position: relative; overflow: clip; }
.final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, #2E4A7A 22%, transparent), transparent 52%);
}
.final__in { position: relative; max-width: 900px; margin-inline: auto; }
.final__in > * { animation: nar-entre 560ms ease both; }
.final__in > :nth-child(2) { animation-delay: 140ms; }
.final__in > :nth-child(3) { animation-delay: 300ms; }
.final__in > :nth-child(4) { animation-delay: 460ms; }
.final__in > :nth-child(5) { animation-delay: 620ms; }
.final__etiq { font: 700 .75rem/1 var(--corps); letter-spacing: .2em; text-transform: uppercase; color: var(--jaune);
  display: inline-flex; align-items: center; gap: var(--s3); }
.final__etiq::before { content: ""; width: 34px; height: 10px;
  background: repeating-linear-gradient(115deg, var(--rouge) 0 6px, var(--jaune) 6px 12px); }
.final h2 { color: #fff; margin-block: var(--s4) var(--s6); font-size: clamp(2rem, 1.4rem + 3.2vw, 3.5rem); }
.badges { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-end: var(--s7); }
.badge {
  display: inline-flex; align-items: center; gap: var(--s3);
  border: var(--trait) solid #2E3A57; color: #8B96AE;
  padding: var(--s3) var(--s5);
  font: 700 .8125rem/1 var(--corps); letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.badge::before { content: ""; width: 9px; height: 9px; background: #2E3A57; flex: none; }
.badge[data-obtenu="oui"] { border-color: var(--vert); color: #fff; background: color-mix(in srgb, var(--vert) 18%, transparent); }
.badge[data-obtenu="oui"]::before { background: var(--vert); }
.badge svg { flex: none; }
.final__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s5);
  border-block: var(--trait) solid #1B263F; padding-block: var(--s5); margin-block-end: var(--s7);
}
.final__stats b { display: block; font: 800 clamp(2.5rem, 5vw, 3.5rem)/1 var(--display); color: #fff; }
.final__stats span { font: 600 .75rem/1 var(--corps); letter-spacing: .12em; text-transform: uppercase; color: #8B96AE; }
.final__actions { display: flex; flex-wrap: wrap; gap: var(--s4); }

/* ------------------------------------------------------ LA FICHE IMPRIMABLE */
.fiche { background: var(--fond); color: var(--texte); padding-block: var(--s9); }
.fiche__in { max-width: 860px; margin-inline: auto; padding-inline: var(--gout); }
.fiche__tete { border-block-end: 4px solid var(--rouge); padding-block-end: var(--s5); margin-block-end: var(--s7); }
.fiche__tete p { color: var(--texte-2); margin-block-start: var(--s4); }
.regles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); counter-reset: r; }
.regle {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: var(--s5);
  border-block-start: var(--trait) solid var(--bord); padding-block-start: var(--s5);
}
.regle__n {
  font: 800 2.75rem/.8 var(--display); color: var(--rouge);
}
.regle h3 { font-size: 1.375rem; margin-block-end: var(--s3); }
.regle p { font-size: 1rem; color: var(--texte-2); margin: 0 0 var(--s3); }
.regle cite { display: block; font-size: .8125rem; font-style: normal; color: var(--texte-3); }
.fiche__avert {
  margin-block-start: var(--s7); border: var(--trait) solid var(--rouge);
  background: var(--rouge-fond); padding: var(--s5); font-weight: 600;
}
.fiche__qr { display: flex; align-items: center; gap: var(--s5); margin-block-start: var(--s7); }
.fiche__qr small { color: var(--texte-3); }

/* ============================================================================
   LES PAGES VITRINES AUTOUR DU JEU (fiche §4)
   Un système de BLOCS, dans la même géométrie que le reste : coins coupés,
   filets francs, chevrons, zéro ombre molle. La tête de page est sur la NUIT
   (c'est la scène), les blocs sont sur le jour et alternent.
   ========================================================================= */
.tete-page {
  background: var(--nuit); color: #fff; position: relative; overflow: clip;
  padding-block: var(--s9) var(--s8);
}
.tete-page::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 18% 0%, color-mix(in srgb, #2E4A7A 26%, transparent), transparent 58%);
}
.tete-page .wrap { position: relative; }
.tete-page .surtitre { color: var(--jaune); }
.tete-page h1 { color: #fff; max-width: 30ch; margin-block: var(--s4) 0; }
.tete-page__chapeau {
  margin-block-start: var(--s5); max-width: 62ch;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); color: #B4BFD3;
}
.bloc__t { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-block-end: var(--s5); }
.bloc__t::before {
  content: ""; display: block; width: 46px; height: 4px; margin-block-end: var(--s4);
  background: repeating-linear-gradient(115deg, var(--rouge) 0 7px, var(--jaune) 7px 14px);
}
.liste-p { margin: 0; padding-inline-start: var(--s5); display: grid; gap: var(--s3); }
.liste-p li { color: var(--texte-2); }
.liste-p li::marker { color: var(--rouge); }

/* les cartes de liens : la même carte tactique que les choix du jeu, en clair */
.cartes-liens { display: grid; gap: var(--s3); }
.carte-lien {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5); text-decoration: none;
  background: var(--fond); color: var(--texte);
  border: var(--trait) solid var(--bord); border-inline-start: 5px solid var(--rouge);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.carte-lien:hover { border-color: var(--rouge); background: var(--rouge-fond); }
.carte-lien span { font-weight: 700; font-size: 1.0625rem; grid-column: 1; }
.carte-lien small { grid-column: 1; color: var(--texte-3); font-size: .875rem; }
.carte-lien .ic { grid-column: 2; grid-row: 1 / span 2; color: var(--rouge); }
.carte-lien__n {
  grid-column: 1; font: 800 1.25rem/1 var(--display); color: var(--rouge); letter-spacing: .04em;
}
.cartes-liens--fiches { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }

/* questions fréquentes : des dépliants francs, le premier ouvert */
.qr { border-block-start: var(--trait) solid var(--bord); padding-block: var(--s4); }
.qr:last-of-type { border-block-end: var(--trait) solid var(--bord); }
.qr > summary { cursor: pointer; list-style: none; display: flex; gap: var(--s4); align-items: baseline; }
.qr > summary::-webkit-details-marker { display: none; }
.qr > summary::before {
  content: "+"; flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  font: 700 1.125rem/1 var(--corps); color: var(--rouge);
  border: var(--trait) solid var(--rouge);
}
.qr[open] > summary::before { content: "\2013"; background: var(--rouge); color: #fff; }
.qr > summary h3 { display: inline; font-size: 1.1875rem; }
.qr > div { padding-block-start: var(--s4); padding-inline-start: calc(26px + var(--s4)); }
.qr > div p { color: var(--texte-2); margin-block-end: var(--s3); }

/* un tableau : filets francs, en-tête sur la nuit, défilement propre au pouce */
.tableau-hote { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 30rem; }
.tableau th, .tableau td { text-align: start; padding: var(--s3) var(--s4); border: 1px solid var(--bord); }
.tableau th { background: var(--nuit); color: #fff; font: 700 .75rem/1.2 var(--corps); letter-spacing: .1em; text-transform: uppercase; }
.tableau td { color: var(--texte-2); }

/* l'encart d'avertissement : la même valeur que la fiche imprimable */
.encart {
  display: flex; gap: var(--s4); align-items: flex-start;
  border: var(--trait) solid var(--rouge); background: var(--rouge-fond);
  padding: var(--s5); font-weight: 600; color: var(--texte);
}
.encart .ic { flex: none; color: var(--rouge); margin-block-start: 2px; }

/* la bande de chiffres, en page : elle sort du hero sans son fond de scène */
.chiffres--page { background: transparent; border-block: var(--trait) solid var(--bord); }

/* le journal : une date en colonne, un bloc de lignes en face */
.journal { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); }
.journal__e {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s5);
  border-block-start: var(--trait) solid var(--bord); padding-block-start: var(--s5);
}
.journal__d { margin: 0; font: 700 .8125rem/1.3 var(--corps); letter-spacing: .08em;
  text-transform: uppercase; color: var(--rouge); }
.journal__e h3 { font-size: 1.25rem; margin-block-end: var(--s3); }

/* le plan du site : quatre colonnes de liens */
.plan-site { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--s6); }
.plan-site h3 { font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3);
  padding-block-end: var(--s2); border-block-end: 1px solid var(--bord); margin-block-end: var(--s4); }

/* LE TABLEAU DE BORD DES ACQUIS */
.progres-hote { display: grid; gap: var(--s5); }
.progres-resume { margin: 0; font: 700 1.125rem/1.4 var(--corps); }
.progres-vide { margin: 0; color: var(--texte-2); max-width: 60ch; }
.progres-hote .badges { margin-block-end: 0; }
.progres-hote .badge { border-color: var(--bord); color: var(--texte-2); }
.progres-hote .badge::before { background: var(--bord); }
.progres-gt { font: 700 .8125rem/1 var(--corps); letter-spacing: .14em; text-transform: uppercase;
  color: var(--texte-3); margin-block-end: calc(var(--s3) * -1); }
.progres-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.progres-l {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s4); border: 1px solid var(--bord); border-inline-start: 4px solid var(--bord);
}
.progres-l[data-mode="fait"] { border-inline-start-color: var(--vert); }
.progres-l[data-mode="encours"] { border-inline-start-color: var(--jaune); }
.progres-n { font: 800 1.375rem/1 var(--display); color: var(--texte-3); }
.progres-l[data-mode="fait"] .progres-n { color: var(--vert-txt); }
.progres-t { margin: 0; font-weight: 700; }
.progres-m { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s3);
  font-size: .8125rem; color: var(--texte-3); }
.progres-b { color: var(--vert-txt); font-weight: 700; }
.progres-v { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.btn--petit { min-height: 40px; padding: 0 var(--s4); font-size: .8125rem; }
.progres-actions { margin-block-start: var(--s5); }

@media (max-width: 40rem) {
  .journal__e { grid-template-columns: 1fr; gap: var(--s3); }
  .progres-l { grid-template-columns: 2rem minmax(0, 1fr); }
  .progres-l > :last-child { grid-column: 1 / -1; justify-self: start; }
}

/* ============================================================================
   PANNEAU LATÉRAL UNIVERSEL
   ========================================================================= */
.panneau-b {
  position: fixed; z-index: 90; inset-block-start: 46%; inset-inline-end: 0;
  translate: 0 -50%;
  width: 46px; min-height: 132px;
  background: var(--rouge); color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center; gap: var(--s2);
  clip-path: polygon(0 12px, 100% 0, 100% 100%, 0 calc(100% - 12px));
}
.panneau-b:hover { background: var(--rouge-h); }
.panneau-b span {
  writing-mode: vertical-rl; text-orientation: mixed;
  font: 700 .6875rem/1 var(--corps); letter-spacing: .18em; text-transform: uppercase;
}
.panneau {
  position: fixed; z-index: 95; inset-block: 0; inset-inline-end: 0;
  width: min(400px, 100vw);
  background: var(--fond); color: var(--texte);
  border-inline-start: var(--trait) solid var(--bord);
  /* fermé = INVISIBLE pour le clavier aussi : sans visibility, la tabulation
     traversait tous les boutons du panneau translaté hors écran */
  translate: 101% 0; visibility: hidden;
  transition: translate 260ms cubic-bezier(.2,.8,.3,1), visibility 0s linear 260ms;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}
.panneau[data-ouvert="oui"] { translate: 0 0; visibility: visible; transition-delay: 0s, 0s; }
.panneau__tete {
  position: sticky; top: 0; background: var(--nuit); color: #fff;
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5);
}
.panneau__tete h2 { font-size: 1.25rem; color: #fff; margin-inline-end: auto; letter-spacing: .1em; }
.panneau__x {
  background: transparent; border: var(--trait) solid #47546F; color: #fff;
  width: 40px; height: 40px; cursor: pointer; display: grid; place-items: center; border-radius: var(--r);
}
.panneau__x:hover { border-color: var(--jaune); color: var(--jaune); }
.panneau__corps { padding: var(--s5); display: grid; gap: var(--s6); }
.groupe > h3 {
  font: 700 .75rem/1 var(--corps); letter-spacing: .16em; text-transform: uppercase;
  color: var(--texte-3); margin-block-end: var(--s3);
  padding-block-end: var(--s2); border-block-end: 1px solid var(--bord);
}
.seg { display: flex; gap: 0; flex-wrap: wrap; }
.seg__b {
  flex: 1 1 auto; min-height: 46px; padding: var(--s3) var(--s4);
  background: var(--fond); color: var(--texte-2);
  border: var(--trait) solid var(--bord); margin-inline-start: calc(var(--trait) * -1);
  font: 700 .875rem/1 var(--corps); cursor: pointer;
}
.seg__b:first-child { margin-inline-start: 0; }
.seg__b:hover { border-color: var(--rouge); color: var(--texte); z-index: 1; position: relative; }
.seg__b[aria-pressed="true"] { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.rangee { display: grid; gap: var(--s2); }
.lien-p {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  min-height: 46px; padding: var(--s3) var(--s4);
  background: transparent; border: 1px solid var(--bord); border-radius: var(--r);
  font: 600 .9375rem/1.3 var(--corps); color: var(--texte); text-align: start;
  text-decoration: none; cursor: pointer;
}
.lien-p:hover { border-color: var(--rouge); color: var(--rouge); }
.lien-p--danger:hover { border-color: var(--rouge); background: var(--rouge-fond); }
.panneau__note { font-size: .8125rem; color: var(--texte-3); margin: 0; }
.panneau__glisse {
  width: 100%; accent-color: var(--rouge);
}
.voile {
  position: fixed; inset: 0; z-index: 92; background: color-mix(in srgb, #060B14 62%, transparent);
  opacity: 0; pointer-events: none; transition: opacity 220ms ease;
}
.voile[data-ouvert="oui"] { opacity: 1; pointer-events: auto; }

/* mode lecture : on retire la scénographie, on garde le texte */
:root[data-lecture="oui"] .hero__gyro,
:root[data-lecture="oui"] .hero__scene,
:root[data-lecture="oui"] .pourquoi__img,
:root[data-lecture="oui"] .meca__fig,
:root[data-lecture="oui"] .chevrons,
:root[data-lecture="oui"] .bande-fleches { display: none !important; }
:root[data-lecture="oui"] .hero::after { display: none !important; }
:root[data-lecture="oui"] .hero, :root[data-lecture="oui"] .section--nuit,
:root[data-lecture="oui"] .pourquoi { background: var(--fond); color: var(--texte); }
:root[data-lecture="oui"] .hero h1, :root[data-lecture="oui"] .pourquoi h2 { color: var(--texte); }
:root[data-lecture="oui"] .hero h1 { text-shadow: none; }
:root[data-lecture="oui"] .hero__chapeau, :root[data-lecture="oui"] .pourquoi p { color: var(--texte-2); }
:root[data-lecture="oui"] .hero__in { min-height: 0; }
:root[data-lecture="oui"] .section { padding-block: var(--s7); }

/* ============================================================================
   ANIMATIONS RÉDUITES : la scène devient des VIGNETTES FIXES séquencées.
   Le jeu reste 100 % jouable (fiche §2). Les calques de cinéma se figent :
   grain immobile (un bruit fixe n'est pas un mouvement), letterbox ouvert,
   pas de flash, pas de coupe, pas de pluie canvas (jamais montée), pas de
   clignotement dans les décors.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__gyro { opacity: .4; }
  .hero::after { animation: none; opacity: .35; }
  .scene.a-gyro .scene__gyro { opacity: .3; animation: none; }
  .scene__grain { animation: none; opacity: .4; }
  .scene__lb { transform: scaleY(0) !important; }
  .k-cligno, .k-cligno--2 { animation: none; opacity: 1; }
  .k-gyro, .k-gyro--2 { animation: none; opacity: .8; }
}
:root[data-animations="off"] .hero__gyro { animation: none; opacity: .4; }
:root[data-animations="off"] .hero::after { animation: none; opacity: .35; }
:root[data-animations="off"] .scene.a-gyro .scene__gyro { animation: none; opacity: .3; }
:root[data-animations="off"] .scene__grain { animation: none; opacity: .4; }
:root[data-animations="off"] .scene__lb { transform: scaleY(0) !important; transition: none; }
:root[data-animations="off"] .k-cligno, :root[data-animations="off"] .k-cligno--2 { animation: none; opacity: 1; }
:root[data-animations="off"] .k-gyro, :root[data-animations="off"] .k-gyro--2 { animation: none; opacity: .8; }
:root[data-animations="off"] .verdict--rouge, :root[data-animations="off"] .verdict--vert,
:root[data-animations="off"] .verdict--jaune, :root[data-animations="off"] .verdict__choc { animation: none; }
:root[data-animations="off"] .checkpoint { animation: none; }
:root[data-animations="off"] .titrecard__in { animation: none; }
:root[data-animations="off"] .scene__narration p { animation: none; }
:root[data-animations="off"] .final__in > * { animation: none; }
:root[data-animations="off"] .progres__p[data-etat="courant"] { animation: none; }
:root[data-animations="off"] .minuteur[data-urgent="oui"] .minuteur__barre { animation: none; }
:root[data-animations="off"] .decision__q--attente { animation: none; }
/* le mini-jeu en animations réduites : la jauge et la fatigue se POSENT (une
   largeur qui saute n'est pas une animation), le bouton ne s'enfonce plus, le
   voyant de l'appareil ne bat plus. L'épreuve reste entièrement jouable :
   la cadence se joue au clic ou à la barre espace, et tout se lit en chiffres. */
@media (prefers-reduced-motion: reduce) {
  .jauge__aig, .epreuve__fatigue-j { transition: none !important; }
  .epreuve__b:active { translate: none; }
  .dispo__etiq::before { animation: none; }
}
:root[data-animations="off"] .jauge__aig,
:root[data-animations="off"] .epreuve__fatigue-j { transition: none; }
:root[data-animations="off"] .epreuve__b:active { translate: none; }
:root[data-animations="off"] .dispo__etiq::before { animation: none; }
.vignette-nav {
  position: absolute; z-index: 10; inset-block-end: var(--s4); inset-inline-end: var(--s4);
  display: flex; gap: var(--s2); align-items: center;
}
.vignette-pt { width: 12px; height: 12px; background: #2E3A57; border: 0; padding: 0; cursor: pointer; }
.vignette-pt[aria-current="true"] { background: var(--jaune); }

/* ============================================================================
   IMPRESSION : la fiche récap sort propre, le reste disparaît.
   ========================================================================= */
@media print {
  .utilite, .entete, .pied, .panneau, .panneau-b, .voile, .jeu__bandeau,
  .progres, .scene, .decision, .verdict, .final__actions, .hero__scene,
  .hero__gyro, .chevrons, .bande-fleches, .saut, .jeu__outils, .titrecard { display: none !important; }
  .hero::after, .final::before, .tete-page::before, .bloc__t::before,
  .surtitre::before, .decision__q::before { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  /* les pages vitrines sortent à l'encre noire : jamais une tête de page en
     pavé nuit pleine encre sur le papier */
  .tete-page, .section--nuit, .pourquoi { background: #fff !important; color: #000 !important; }
  .tete-page h1, .section--nuit h2, .section--nuit h3, .pourquoi h2 { color: #000 !important; }
  .tete-page__chapeau, .tete-page .surtitre, .section--nuit p, .section--nuit .chapeau,
  .pourquoi p { color: #222 !important; }
  .pourquoi__img { display: none !important; }
  .pourquoi::after { display: none !important; }
  .final h2, .final__stats b { color: #000 !important; }
  .final__etiq, .final__stats span { color: #444 !important; }
  .badge { color: #000; border-color: #666; }
  .fiche, .final { padding: 0 !important; background: #fff !important; color: #000 !important; }
  .fiche__in { max-width: none; padding: 0; }
  .fiche__tete { border-block-end: 3pt solid #000; }
  .regle { break-inside: avoid; page-break-inside: avoid; border-block-start: 1pt solid #666; }
  .regle__n { color: #000; }
  .regle p, .regle cite, .fiche__tete p { color: #222; }
  .fiche__avert { border: 2pt solid #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
  h1, h2, h3 { color: #000 !important; }
  @page { margin: 16mm; }
}

/* ------------------------------------------------------------------ DIVERS */
.sans-js-note {
  border: var(--trait) solid var(--jaune); background: var(--fond-2);
  padding: var(--s5); margin-block: var(--s5);
}
.ic { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.ic--g { width: 1.35em; height: 1.35em; }