/* Geneva Vice — site officiel.
   Direction depuis le 09.11.2026 : l'esthétique des supports Fnac (V4, « collage au coucher de soleil ») — ciel tramé en
   encres de risographie (violet, rose, orange, sable), captures du jeu dans la même trame, bandeaux noirs en Anton,
   tirages encadrés avec étiquette CAM, tampons crème, personnages imprimés avec leur second passage violet, logo couleur.
   Reste de la bible (GenevaVice_UI_Handoff) : polices, grain, tampons, papier crème, mouvement sec « en deux » (12 i/s),
   pas d'arrondis ni d'ombres portées. Les dégradés n'existent que dans les images tramées (ciel), jamais en CSS décoratif. */

@font-face { font-family: "Anton GV"; src: url("../fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo GV"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Plex Mono GV"; src: url("../fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono GV"; src: url("../fonts/plex-mono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* --- Jetons : encres des supports Fnac (FNAC_POPUP/_src/v2/gvriso.py), ne pas écrire de couleur en dur ---------- */
:root {
  color-scheme: dark;
  /* Fond noir chaud de la bible (retour du 09.11 : « trop coloré ») ; la couleur des supports Fnac est réservée à
     l'ouverture, à la section Fnac et aux dossiers actifs. */
  --bg: #0F0D0C;
  --bg-rgb: 15, 13, 12;
  --bg-2: #151311;
  --panel: #1A1816;
  --panel-2: #23201D;
  --line: #3E3A35;
  --line-strong: #908A82;
  --ink: #ECE6DC;
  --ink-2: #A9A297;
  --ink-3: #8F887E;
  --noir: #110E0C;          /* plaques et bandeaux */
  --noir-rgb: 17, 14, 12;
  --creme: #EDE3D1;
  --tampon: #FFF8EC;
  --sable: #EDBB7E;
  --violet: #3B3268;
  --paper: #EDE3D1;
  --paper-2: #E0D4BE;
  --paper-ink: #110E0C;
  --paper-ink-rgb: 17, 14, 12;
  --paper-ink-2: #4B463F;
  --red: #FA1E91;
  --red-2: #C2136C;
  --red-deep: #5A0B33;
  --on-red: #110E0C;
  --accent-ink: #FF4DA8;
  --ok: #A8C49A;
  --warn: #E3B341;

  --font-display: "Anton GV", Anton, Impact, "Arial Narrow Bold", sans-serif;
  --font-ui: "Archivo GV", Archivo, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "Plex Mono GV", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --tick: 9px;
  --frame: 83ms;
  --ease-twos: steps(3, end);
  --ease-snap: cubic-bezier(.2, 1.4, .4, 1);

  --gutter: clamp(16px, 4vw, 56px);
  --nav-h: 64px;
  --max: 1680px;
}

/* --- Base --------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: clamp(16px, 1.05vw, 18px); line-height: 1.55; font-weight: 400;
  overflow-x: clip; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, canvas, svg, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-ink); }
button { font: inherit; color: inherit; }
::selection { background: var(--red); color: var(--on-red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
h1, h2, h3, h4, p, dl, dd, ul, ol, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: fixed; left: var(--gutter); top: 12px; z-index: 100; padding: 12px 18px;
  background: var(--red); color: var(--on-red); font: 600 13px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
  transform: translateY(-200%);
}
.skip:focus { transform: none; color: var(--on-red); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Grain global (bible § 9 : grain.png, 5,5 %). Calque fixe, déplacé à 12 i/s, composité seul. */
.grain {
  position: fixed; inset: -60px; z-index: 90; pointer-events: none;
  background: url("../tex/grain.png") repeat; opacity: .05;
  animation: grain .5s steps(1) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-23px, 11px); } 33% { transform: translate(17px, -29px); }
  50% { transform: translate(-31px, -7px); } 67% { transform: translate(9px, 27px); } 83% { transform: translate(29px, -17px); }
}

/* --- Typographie -------------------------------------------------------------------------------------------- */
.t-display, .t-title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  line-height: .88; letter-spacing: .005em;
}
.t-display { font-size: clamp(56px, 11.5vw, 210px); }
.t-title { font-size: clamp(40px, 6.6vw, 118px); }
.t-h {
  font-family: var(--font-ui); font-weight: 900; font-stretch: 72%; text-transform: uppercase;
  font-size: clamp(22px, 2.3vw, 36px); line-height: 1; letter-spacing: .01em;
}
.t-mono {
  font-family: var(--font-mono); font-weight: 400; text-transform: uppercase;
  font-size: clamp(11px, .78vw, 13px); letter-spacing: .09em; line-height: 1.5; font-variant-numeric: tabular-nums;
}
.t-mono b, .t-mono strong { font-weight: 600; }
.t-body { color: var(--ink-2); max-width: 58ch; }
.t-body strong { color: var(--ink); font-weight: 600; }
.t-lede { font-size: clamp(19px, 1.6vw, 26px); line-height: 1.4; max-width: 34ch; color: var(--ink); font-weight: 500; }
.t-accent { color: var(--accent-ink); }
.t-worn {
  -webkit-mask: url("../tex/usure.png") 0 0 / 260px repeat;
  mask: url("../tex/usure.png") 0 0 / 260px repeat;
}

/* Intitulé de section suivi d'un filet (bible § 5) */
.sec-label {
  display: flex; align-items: center; gap: 14px; color: var(--ink-3);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.sec-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sec-label b { color: var(--accent-ink); font-weight: 600; }

/* --- Grammaire des supports Fnac ---------------------------------------------------------------------------- */
/* Coins de cadrage décalés autour des tirages (supports Fnac : .ticks). Noirs sur le ciel, crème sur l'encre. */
.ticks, .framed { position: relative; --tc: var(--creme); --tg: clamp(8px, 1vw, 16px); --tl: clamp(22px, 2.4vw, 40px); --ts: clamp(3px, .25vw, 4px); }
.ticks::before, .framed::before {
  content: ""; position: absolute; inset: calc(var(--tg) * -1); pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--tc), var(--tc)) left top / var(--tl) var(--ts) no-repeat,
    linear-gradient(var(--tc), var(--tc)) left top / var(--ts) var(--tl) no-repeat,
    linear-gradient(var(--tc), var(--tc)) right top / var(--tl) var(--ts) no-repeat,
    linear-gradient(var(--tc), var(--tc)) right top / var(--ts) var(--tl) no-repeat,
    linear-gradient(var(--tc), var(--tc)) left bottom / var(--tl) var(--ts) no-repeat,
    linear-gradient(var(--tc), var(--tc)) left bottom / var(--ts) var(--tl) no-repeat,
    linear-gradient(var(--tc), var(--tc)) right bottom / var(--tl) var(--ts) no-repeat,
    linear-gradient(var(--tc), var(--tc)) right bottom / var(--ts) var(--tl) no-repeat;
}
.sky .ticks, .sky .framed, .ouverture .framed { --tc: var(--noir); }

/* Ciel tramé (image générée par tools/build_fnac.py) */
.sky { background: var(--violet) url("../fnac/ciel-section-lg.webp") center top / cover no-repeat; }
.sky--palmiers { background-image: url("../fnac/ciel-palmiers-lg.webp"); background-position: center bottom; }
@media (orientation: portrait) and (max-width: 900px) {
  .sky, .sky--palmiers { background-image: url("../fnac/ciel-section-por.webp"); background-position: center top; }
}
.sky .sec-label { color: var(--creme); }
.sky .sec-label::after { background: rgba(237, 227, 209, .45); }
.sky .sec-label b { color: var(--sable); }

/* Bandeaux : capitales Anton crème sur noir, une ligne par bandeau */
.strips { line-height: 1.02; }
.strip {
  display: inline-block; padding: .08em .16em .02em; background: var(--noir); color: var(--creme);
  font-family: var(--font-display); text-transform: uppercase; line-height: .92; white-space: nowrap;
}
.strips .strip + br + .strip { margin-top: .06em; }
.strip--creme { background: var(--creme); color: var(--noir); }     /* bandeau inversé, sur fond noir */
.t-sable { color: var(--sable); }
.strip.t-sable { color: var(--sable); }

/* Plaque noire pour les textes posés sur une image ou sur le ciel */
.plaque { background: var(--noir); color: var(--creme); padding: clamp(20px, 2.4vw, 36px); }
.plaque .t-body { color: var(--ink-2); }
.plaque-txt { display: inline-block; background: var(--noir); padding: .5em .7em; }

/* Étiquette CAM en bas à gauche d'un tirage */
.cam { position: absolute; z-index: 3; left: 0; bottom: 0; margin: 0; }
.cam > span {
  display: inline-block; padding: 5px 9px 4px; background: var(--noir); color: var(--creme);
  font-family: var(--font-mono); font-size: clamp(10px, .78vw, 13px); letter-spacing: .08em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Personnages découpés : jamais d'interaction, coupe éventuelle cachée par une plaque ou le bord de la section */
.perso { position: relative; display: block; pointer-events: none; user-select: none; height: auto; max-width: none; }
.frame { border: 1px solid var(--line); }

/* Croix de repérage de 15 px */
.cross { position: absolute; width: 15px; height: 15px; color: var(--line-strong); pointer-events: none; }
.cross::before, .cross::after { content: ""; position: absolute; background: currentColor; }
.cross::before { left: 7px; top: 0; width: 1px; height: 100%; }
.cross::after { top: 7px; left: 0; height: 1px; width: 100%; }
.cross--red { color: var(--red); }
.cross--tl { left: -7px; top: -7px; } .cross--tr { right: -7px; top: -7px; }
.cross--bl { left: -7px; bottom: -7px; } .cross--br { right: -7px; bottom: -7px; }

/* Tampon : capitales grasses, cadre aux coins à peine arrondis, encre usée, incliné */
.stamp {
  --rot: -4deg;
  display: inline-block; padding: .2em .5em .12em; border: 3px solid currentColor; border-radius: 5px;
  font-family: var(--font-ui); font-weight: 900; font-stretch: 72%; text-transform: uppercase; line-height: 1;
  letter-spacing: .02em; font-size: clamp(18px, 1.7vw, 28px); color: var(--red);
  transform: rotate(var(--rot));
  -webkit-mask: url("../tex/usure.png") 0 0 / 170px repeat;
  mask: url("../tex/usure.png") 0 0 / 170px repeat;
}
.stamp--ink { color: var(--paper-ink); }
.stamp--cream { color: var(--ink); }
.stamp--creme, .dossier__fig .stamp { color: var(--tampon); }
.stamp--l { font-size: clamp(30px, 3.6vw, 60px); border-width: 4px; }
.js [data-stamp] { opacity: 0; }
.js [data-stamp].is-in { animation: stamp calc(var(--frame) * 3) steps(1) forwards; }
@keyframes stamp {
  0% { opacity: 1; transform: rotate(calc(var(--rot) - 3deg)) scale(1.45); }
  34% { opacity: 1; transform: rotate(calc(var(--rot) + 1deg)) scale(.96); }
  67%, 100% { opacity: 1; transform: rotate(var(--rot)) scale(1); }
}

/* Papier crème des dossiers (bible : .paper) */
.paper { background: var(--paper) url("../tex/papier.png") 0 0 / 420px repeat; color: var(--paper-ink); }
.paper .t-mono { color: var(--paper-ink-2); }
.paper a:hover { color: var(--red-2); }
.paper .sec-label { color: var(--paper-ink-2); }
.paper .sec-label::after { background: rgba(var(--paper-ink-rgb), .25); }
.paper .sec-label b { color: var(--red-2); }

/* Boutons. Plaque magenta « coup de pinceau » (masque pinceau-selection.png), texte noir. */
.btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 48px; padding: 12px 22px; border: 1px solid var(--line-strong); background: none; cursor: pointer;
  font-family: var(--font-ui); font-weight: 900; font-stretch: 72%; font-size: 17px; letter-spacing: .03em;
  text-transform: uppercase; text-decoration: none; color: var(--ink); line-height: 1;
}
.btn:hover { color: var(--ink); border-color: var(--ink); }
.btn--plate { border-color: transparent; color: var(--on-red); }
.btn--plate::before {
  content: ""; position: absolute; inset: -5px -12px; z-index: -1; background: var(--red);
  -webkit-mask: url("../tex/pinceau.png") center / 100% 100% no-repeat;
  mask: url("../tex/pinceau.png") center / 100% 100% no-repeat;
}
.btn--plate:hover { color: var(--on-red); }
.btn--plate:hover::before { animation: jitter calc(var(--frame) * 2) steps(1) infinite; }
.btn[aria-disabled="true"] { color: var(--ink-3); border-style: dashed; cursor: not-allowed; }
.btn .t-mono { font-size: 11px; color: inherit; opacity: .8; }
@keyframes jitter { 0% { transform: translate(0, 0); } 50% { transform: translate(1px, -1px); } }

/* Pastilles d'état */
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 5px; border: 1px solid currentColor;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; line-height: 1; white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.chip--dev { color: var(--accent-ink); }
.chip--plan { color: var(--ink); }
.chip--tbc { color: var(--ink-3); }
.chip--tbc::before { background: none; border: 1px solid currentColor; }
.paper .chip--dev { color: var(--red-2); }
.paper .chip--plan { color: var(--paper-ink); }
.paper .chip--tbc { color: var(--paper-ink-2); }

/* Apparitions : coupe sèche en 3 images (pas de fondu lent) */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity calc(var(--frame) * 3) var(--ease-twos), transform calc(var(--frame) * 3) var(--ease-twos); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-type] { clip-path: inset(0 100% 0 0); }
.js [data-type].is-in { clip-path: inset(0 0 0 0); transition: clip-path calc(var(--frame) * 8) steps(8, end); }

/* --- Navigation --------------------------------------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 80; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--gutter);
  border-bottom: 1px solid transparent; transition: background-color calc(var(--frame) * 2) steps(2), border-color calc(var(--frame) * 2) steps(2);
}
.nav.is-solid { background: rgba(var(--noir-rgb), .96); border-bottom-color: var(--line); }
.nav__logo { display: block; flex: none; transition: opacity calc(var(--frame) * 2) steps(2); }
.nav.on-ouverture:not(.is-open) .nav__logo { opacity: 0; }   /* l'ouverture montre déjà le grand logo */
.nav__logo img { height: 42px; width: auto; }
.nav__menu { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); }
.nav__links { display: flex; gap: clamp(14px, 2vw, 30px); list-style: none; margin: 0; padding: 0; }
.nav__links a {
  position: relative; display: inline-block; padding: 8px 0; text-decoration: none; color: var(--ink-2);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--ink); }
.nav__links a[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--red); }
.nav__cta { min-height: 40px; padding: 10px 18px; font-size: 15px; }
.nav__toggle {
  display: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.nav__time { color: var(--ink-3); white-space: nowrap; }

@media (max-width: 960px) {
  .nav__time { display: none; }
}
@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; align-items: center; }
  .nav__menu {
    position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 28px; background: var(--bg); border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav.is-open { background: var(--bg); border-bottom-color: var(--line); }
  .nav.is-open .nav__menu { display: flex; }
  .nav__links { flex-direction: column; gap: 0; }
  .nav__links a { display: block; padding: 16px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
  .nav__links a[aria-current="true"]::after { display: none; }
  .nav__cta { margin-top: 20px; min-height: 52px; }
}

/* --- Scènes épinglées (séquences pilotées par le défilement) ------------------------------------------------ */
.scrolly { position: relative; height: calc(var(--len, 4) * 100vh); }
.scrolly__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--bg); }
.scrolly__poster, .scrolly__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scrolly__canvas { opacity: 0; }
.scrolly.is-ready .scrolly__canvas { opacity: 1; }
.scrolly.is-ready .scrolly__poster { visibility: hidden; }
/* Voiles fonctionnels pour la lisibilité des textes (haut et bas), pas de dégradé décoratif. */
.scrolly__stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--bg-rgb), .55) 0, rgba(var(--bg-rgb), 0) 22%, rgba(var(--bg-rgb), 0) 58%, rgba(var(--bg-rgb), .8) 100%);
}

/* Habillage « caméra de surveillance » */
.hud {
  position: absolute; z-index: 3; inset: calc(var(--nav-h) + 18px) var(--gutter) 22px; pointer-events: none;
  color: var(--ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.hud > span { position: absolute; display: block; line-height: 1.6; }
.hud__tl { left: 18px; top: 14px; } .hud__tr { right: 18px; top: 14px; text-align: right; }
.hud__bl { left: 18px; bottom: 14px; } .hud__br { right: 18px; bottom: 14px; text-align: right; }
@media (max-width: 600px) {
  .hud { inset: calc(var(--nav-h) + 8px) 12px 16px; }
  .hud__tl { left: 8px; top: 8px; } .hud__tr { right: 8px; top: 30px; }
  .hud__bl { left: 8px; } .hud__br { right: 8px; }
}
.rec::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--red); vertical-align: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Légendes : apparaissent par paliers selon la progression (attribut data-at="début-fin") */
.cap { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); }
.js .cap { opacity: 0; transform: translateY(16px); transition: opacity calc(var(--frame) * 3) var(--ease-twos), transform calc(var(--frame) * 3) var(--ease-twos); }
.js .cap.is-on { opacity: 1; transform: none; }
.cap--bl { bottom: clamp(56px, 12vh, 140px); max-width: 980px; }
.cap--br { bottom: clamp(56px, 12vh, 140px); left: auto; max-width: 760px; text-align: right; }
.cap--center { top: 50%; transform: translateY(-50%); text-align: center; }
.js .cap--center { transform: translateY(calc(-50% + 16px)); }
.js .cap--center.is-on { transform: translateY(-50%); }
.cap .t-body { margin-top: 18px; color: var(--ink); }
.cap .t-title.strips { font-size: clamp(34px, 6.6vw, 118px); }
.cap--br .t-body { margin-left: auto; }
.cap .sec-label { margin-bottom: 18px; max-width: 520px; }
.cap--br .sec-label { margin-left: auto; }

/* Ouverture : composition de l'écran Fnac de Lausanne (1920 × 1080) sur ordinateur, de l'écran de la Fnac Rive
   (1080 × 1920) sur mobile. Le cadre joue la séquence ; le bas du cygne passe derrière la plaque. */
.ouverture .scrolly__stage {
  --plate: max(140px, 22svh);
  background: var(--violet) url("../fnac/ciel-ouverture-lg.webp") center / cover no-repeat;
}
.ouverture .scrolly__stage::after { display: none; }
.ouverture__gauche {
  position: absolute; z-index: 4; left: var(--gutter); top: calc(var(--nav-h) + 2svh); bottom: calc(var(--plate) + 5svh);
  width: 46vw; display: flex; flex-direction: column; justify-content: space-between; gap: 3svh;
}
.ouverture__logo { width: min(33vw, 34svh * 2.2, 660px); }
.ouverture__logo img { width: 100%; height: auto; }
.ouverture__logo p { margin-top: 6px; padding-left: 1.2%; color: var(--creme); }
.ouverture__accroche { margin: 0; font-family: var(--font-display); line-height: 1.02; }
.ouverture__accroche .strip--1 { font-size: clamp(28px, 3.35vw, 74px); }
.ouverture__accroche .strip--2 { font-size: clamp(34px, 4.65vw, 102px); margin-top: .04em; }
.ouverture__cadre {
  position: absolute; z-index: 2; right: calc(var(--gutter) + 1vw); top: calc(var(--nav-h) + 4svh);
  width: min(45vw, (100svh - var(--plate) - var(--nav-h) - 10svh) * 1.7778); aspect-ratio: 16 / 9; background: var(--violet);
}
.ouverture__cadre .scrolly__poster, .ouverture__cadre .scrolly__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ouverture__tampon { position: absolute; z-index: 4; left: 4.5%; top: 8%; font-size: clamp(18px, 2.3vw, 44px); border-width: .12em; }
.ouverture__cygne {
  position: absolute; z-index: 3; right: calc(var(--gutter) * .6); bottom: var(--plate);
  height: min(54svh, 36vw); width: auto; transform: translateY(calc(16.6% + 18px));
}
.ouverture__plaque {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: var(--plate);
  display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; align-content: center;
  padding: 0 var(--gutter); background: var(--noir); color: var(--creme);
}
.ouverture__date { margin: 0; font-family: var(--font-display); text-transform: uppercase; line-height: .9; font-size: clamp(34px, 4.6vw, 96px); }
.ouverture__date-sm { display: none; }
/* Pas de malentendu : « précommande » se lit avec la date, pas en petit à côté */
.ouverture__precommande {
  display: inline-block; margin: .35em 0 0; padding: .1em .22em .04em; background: var(--red); color: var(--noir);
  font-family: var(--font-display); text-transform: uppercase; line-height: .92; font-size: clamp(20px, 2.3vw, 46px);
}
.ouverture__plateformes { margin: 0 0 0 auto; color: var(--ink-2); }
html.reduced .ouverture .motion-note { display: none; }   /* l'affiche est complète ; le réglage reste dans le pied de page */

@media (orientation: portrait) and (max-width: 900px) {
  .ouverture .scrolly__stage { --plate: max(150px, 20svh); background-image: url("../fnac/ciel-ouverture-por.webp"); }
  .ouverture__gauche { inset: calc(var(--nav-h) + 1.5svh) var(--gutter) auto; width: auto; display: block; }
  .ouverture__logo { width: min(74vw, 23svh * 2.2); margin: 0 auto; }
  .ouverture__logo p { text-align: center; padding: 0; }
  .ouverture__accroche { position: absolute; left: 12px; top: calc(min(74vw, 23svh * 2.2) / 2.2 + 7svh + 14px); }
  .ouverture__accroche .strip--1 { font-size: min(6.2vw, 3.4svh); }
  .ouverture__accroche .strip--2 { font-size: min(8.6vw, 4.6svh); }
  .ouverture__cadre {
    left: var(--gutter); right: var(--gutter); width: auto;
    top: calc(var(--nav-h) + 1.5svh + min(74vw, 23svh * 2.2) / 2.2 + 7svh);
  }
  .ouverture__tampon { left: auto; right: 4%; top: auto; bottom: -28%; font-size: min(5.6vw, 3svh); }
  .ouverture__cygne { right: 0; height: min(34svh, 62vw); transform: translateY(calc(16.6% + 14px)); }
  .ouverture__plaque { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }
  .ouverture__date { font-size: min(12vw, 6svh); }
  .ouverture__precommande { font-size: min(6.4vw, 3.2svh); margin-top: .25em; }
  .ouverture__date-lg { display: none; }
  .ouverture__date-sm { display: inline; }
  .ouverture__plateformes { margin: 0; }
  .ouverture__cta { display: none; }
}

/* --- Sections courantes ------------------------------------------------------------------------------------ */
.section { position: relative; padding-block: clamp(56px, 7vw, 112px); }   /* 12.11 : vides entre blocs réduits de moitié (était 96–220 px) */
.section--tight { padding-block: clamp(44px, 5vw, 80px); }   /* était 72–140 px */
.section > .wrap > .sec-label { margin-bottom: clamp(36px, 5vw, 72px); }

/* Manifeste */
.manifeste__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.manifeste__title { margin-bottom: clamp(28px, 3.5vw, 48px); }
.manifeste__text { display: grid; gap: 22px; }
.fiche { position: relative; padding: clamp(24px, 2.6vw, 40px); transform: rotate(1.2deg); }
.fiche__head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.fiche dl { display: grid; grid-template-columns: auto 1fr; }
.fiche dt, .fiche dd { padding: 11px 0; border-top: 1px solid rgba(var(--paper-ink-rgb), .2); }
.fiche dt { padding-right: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-ink-2); }
.fiche dd { font-weight: 800; font-stretch: 78%; text-transform: uppercase; font-size: 17px; line-height: 1.25; }
.fiche__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 24px; }
.fiche__code { display: grid; gap: 6px; }
.fiche__code img { width: 160px; height: 40px; filter: invert(1); opacity: .85; }
@media (max-width: 860px) {
  .manifeste__grid { grid-template-columns: 1fr; }
  .fiche { transform: rotate(.6deg); }
}

/* Projet, Fnac, Suivre : sections sur le ciel avec un personnage posé sur le bord bas (sa coupe y disparaît) */
.projet, .fnac, .suivre { overflow: hidden; padding-bottom: 0; }
.projet__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .62fr); gap: clamp(24px, 3vw, 56px); align-items: end; }
.projet__texte { display: grid; gap: clamp(22px, 2.6vw, 36px); align-self: start; padding-bottom: clamp(64px, 8vw, 140px); }
.projet__texte .plaque { display: grid; gap: 18px; max-width: 760px; }
.projet .fiche { align-self: start; margin-top: clamp(40px, 7vw, 130px); }
.projet__perso { width: 100%; max-width: 430px; justify-self: end; }
@media (max-width: 1180px) {
  .projet__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .projet__perso { grid-column: 2; width: 70%; margin-top: -40px; }
}
@media (max-width: 860px) {
  .projet__grid { grid-template-columns: 1fr; }
  .projet__texte { padding-bottom: 0; }
  .projet .fiche { margin-top: 8px; }
  .projet__perso { grid-column: 1; width: 62vw; margin-top: 8px; }
}

/* Deux ciels qui se suivent : bande noire entre les deux, comme les plaques des supports (pas de raccord sable/violet) */
.sky + .sky { border-top: clamp(10px, 1.2vw, 18px) solid var(--noir); }
.fnac .t-display { font-size: clamp(52px, 8vw, 150px); }
.fnac__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 72px); align-items: end; }
.fnac__texte { display: grid; gap: clamp(24px, 3vw, 44px); padding-bottom: clamp(64px, 8vw, 130px); }
.agenda { list-style: none; margin: 0; padding: clamp(6px, .8vw, 12px) clamp(20px, 2.4vw, 36px); background: var(--noir); color: var(--creme); }
.agenda ol { list-style: none; margin: 0; padding: 0; }
.agenda__tete { display: flex; align-items: center; gap: 18px; padding: clamp(14px, 1.6vw, 22px) 0; border-bottom: 1px solid rgba(237, 227, 209, .16); }
.agenda__tete .t-mono { color: var(--ink-2); }
.agenda__fnac { width: clamp(64px, 5.6vw, 96px); height: auto; flex: none; }
.agenda li { display: grid; grid-template-columns: clamp(108px, 12vw, 220px) minmax(0, 1fr); gap: 6px 24px; align-items: baseline; padding: clamp(14px, 1.6vw, 22px) 0; border-bottom: 1px solid rgba(237, 227, 209, .16); }
.agenda li:last-child { border-bottom: 0; }
.agenda__date { font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 56px); line-height: .9; color: var(--sable); font-variant-numeric: tabular-nums; white-space: nowrap; }
.agenda__lieu { font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.05; }
.agenda__detail { margin-top: 4px; color: var(--ink-2); }
.fnac__perso { width: 100%; max-width: 560px; justify-self: center; }
@media (max-width: 860px) {
  .fnac__grid { grid-template-columns: 1fr; }
  .fnac__texte { padding-bottom: 0; }
  .agenda li { grid-template-columns: 1fr; }
  .fnac__perso { width: 66vw; justify-self: end; margin-top: 12px; }
}

.suivre .follow { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: end; }
.suivre .follow > div { display: grid; gap: 22px; align-self: start; padding-bottom: clamp(72px, 9vw, 140px); }
.suivre .follow__links { padding: 4px clamp(18px, 2vw, 28px); border-top: 0; }
.suivre .follow__links li:last-child a { border-bottom: 0; }
.suivre .follow__links a { border-bottom-color: rgba(237, 227, 209, .16); }
.suivre__presse { justify-self: start; display: inline-block; background: var(--noir); padding: .6em .8em; color: var(--ink-2); }
.suivre__perso { width: 100%; max-width: 640px; justify-self: end; }
@media (max-width: 860px) {
  .suivre .follow { grid-template-columns: 1fr; }
  .suivre .follow > div { padding-bottom: 0; }
  .suivre__perso { width: 80vw; margin-top: 12px; }
}

/* Quartiers : défilement horizontal épinglé (bureau), pile verticale (mobile) */
.hscroll { position: relative; }
.hscroll__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 3vh, 40px); padding-top: var(--nav-h); }
.hscroll__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.hscroll__track { display: flex; gap: clamp(20px, 2.6vw, 44px); padding-inline: var(--gutter); width: max-content; will-change: transform; }
.hscroll__count { color: var(--ink-3); }

/* La carte tient dans la hauteur de l'écran : en-tête (~300 px) + image 16:9 + texte (~130 px). */
.dossier { position: relative; flex: 0 0 auto; width: min(58vw, 760px, calc((100vh - 440px) * 1.7778)); min-width: min(420px, 80vw); }
.dossier__bar { display: flex; justify-content: space-between; gap: 12px; padding: 0 0 10px; color: var(--ink-3); }
.dossier__fig { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel); }
.dossier__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dossier__copie { transition: opacity calc(var(--frame) * 3) var(--ease-twos); }
.dossier.is-active .dossier__copie { opacity: 0; }
.dossier__fig .stamp { position: absolute; z-index: 3; right: 18px; top: 16px; }
.dossier__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; padding-top: 18px; align-items: start; }
.dossier__body .t-title { font-size: clamp(36px, 4.2vw, 72px); }
.dossier__body .t-body { font-size: 16px; }
.dossier__fig .cross { z-index: 3; color: var(--ink); }
.dossier.is-active .dossier__fig .cross { color: var(--red); }
.dossier__note { position: absolute; z-index: 3; left: 0; bottom: 0; color: var(--creme); background: var(--noir); padding: 5px 9px 4px; }

@media (max-width: 860px) {
  .hscroll { height: auto !important; }
  .hscroll__stage { position: relative; height: auto; padding-block: 96px 40px; display: block; }
  .hscroll__head { margin-bottom: 36px; padding-inline: var(--gutter); }
  .hscroll__track { flex-direction: column; width: auto; gap: 64px; transform: none !important; will-change: auto; }
  .dossier { width: 100%; }
  .dossier__body { grid-template-columns: 1fr; }
}

/* Jour / nuit : volet piloté par le défilement */
.wipe .scrolly__stage::after { display: none; }
.wipe__img { position: absolute; inset: 0; }
.wipe__img img { width: 100%; height: 100%; object-fit: cover; }
.wipe__night { clip-path: inset(0 0 0 calc((1 - var(--p, 0)) * 100%)); }
.wipe__line {
  position: absolute; z-index: 3; top: 0; bottom: 0; left: calc((1 - var(--p, 0)) * 100%); width: 2px; margin-left: -1px;
  background: var(--red);
}
.wipe__line span { position: absolute; top: 42%; right: 10px; padding: 5px 8px; background: var(--red); color: var(--on-red); white-space: nowrap; }
.wipe__clock {
  position: absolute; z-index: 4; left: var(--gutter); top: calc(var(--nav-h) + 40px);
  font-family: var(--font-display); font-size: clamp(64px, 11vw, 190px); line-height: .85; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wipe__clock small { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--ink); }
.wipe .cap--bl { background: var(--noir); padding: 22px 24px; max-width: 640px; }
.wipe .cap--bl .t-body { color: var(--ink-2); }

/* Dossier en cours (la vie à Genève) */
.vie__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.vie__intro { position: sticky; top: calc(var(--nav-h) + 40px); display: grid; gap: 26px; }
.sheet { position: relative; padding: clamp(24px, 3vw, 48px); }
.sheet__head { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding-bottom: 20px; border-bottom: 2px solid var(--paper-ink); }
.sheet__list { list-style: none; margin: 0; padding: 0; }
.sheet__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 22px 0; border-bottom: 1px solid rgba(var(--paper-ink-rgb), .22); }
.sheet__box { width: 18px; height: 18px; margin-top: 4px; border: 2px solid var(--paper-ink); }
.sheet__list h3 { font-family: var(--font-ui); font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: clamp(22px, 2vw, 30px); line-height: 1; }
.sheet__list p { margin-top: 6px; color: var(--paper-ink-2); font-size: 16px; }
.sheet__foot { margin-top: 22px; color: var(--paper-ink-2); }
.sheet > .stamp { position: absolute; right: clamp(18px, 3vw, 42px); top: -22px; }
@media (max-width: 860px) {
  .vie__grid { grid-template-columns: 1fr; }
  .vie__intro { position: static; }
  .sheet__list li { grid-template-columns: 22px minmax(0, 1fr); }
  .sheet__list .chip { grid-column: 2; justify-self: start; }
}

/* Radio */
.radio { border-block: 1px solid var(--line); background: var(--bg-2); }
.radio__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.radio__copy { display: grid; gap: 24px; }
.tuner { padding: clamp(20px, 2.4vw, 36px); background: var(--panel); }
.tuner__screen { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.tuner__freq { font-family: var(--font-display); font-size: clamp(54px, 6vw, 96px); line-height: .9; font-variant-numeric: tabular-nums; }
.tuner__freq small { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; margin-left: 8px; color: var(--ink-2); }
.tuner__scale {
  position: relative; height: 54px; margin: 22px 0 8px;
  background:
    repeating-linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px 10%) 0 100% / 100% 22px no-repeat,
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 2%) 0 100% / 100% 10px no-repeat;
  border-bottom: 1px solid var(--line-strong);
}
.tuner__needle { position: absolute; top: -6px; bottom: -6px; left: var(--pos, 22%); width: 3px; margin-left: -1px; background: var(--red); transition: left calc(var(--frame) * 4) steps(4, end); }
.tuner__labels { display: flex; justify-content: space-between; color: var(--ink-3); }
.tuner__wave { width: 100%; height: 64px; margin-top: 20px; background: var(--paper); }
.stations { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); }
.stations button {
  width: 100%; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  min-height: 52px; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer;
}
.stations button:hover .stations__name { color: var(--ink); }
.stations__f { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.stations__name { font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: 20px; color: var(--ink-2); line-height: 1; }
.stations button[aria-pressed="true"] { position: relative; isolation: isolate; }
.stations button[aria-pressed="true"]::before {
  content: ""; position: absolute; inset: 4px -6px; z-index: -1; background: var(--red);
  -webkit-mask: url("../tex/pinceau.png") center / 100% 100% no-repeat; mask: url("../tex/pinceau.png") center / 100% 100% no-repeat;
}
.stations button[aria-pressed="true"] .stations__name, .stations button[aria-pressed="true"] .stations__f, .stations button[aria-pressed="true"] .t-mono { color: var(--on-red); }
@media (max-width: 860px) { .radio__grid { grid-template-columns: 1fr; } }

/* Trailer */
.trailer__frame { position: relative; aspect-ratio: 16 / 9; background: var(--panel); overflow: hidden; }
.trailer__frame img, .trailer__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.trailer__play {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  width: 100%; border: 0; background: rgba(var(--bg-rgb), .35); cursor: pointer; color: var(--ink);
}
.trailer__play[disabled] { cursor: default; }
.trailer__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.trailer__meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; color: var(--ink-3); }
.trailer__frame .cross { z-index: 3; color: var(--ink); }

/* Plateformes */
.platforms { border-top: 1px solid var(--line); }
.platform { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); }
.platform__name { font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: clamp(26px, 2.8vw, 44px); line-height: 1; }
.platform__store { color: var(--ink-2); }
.platform--phare .platform__name { color: var(--accent-ink); }
.platforms__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: start; margin-top: 40px; }
.platforms__foot .btn { justify-self: end; }
.platforms__legal { color: var(--ink-3); max-width: 70ch; display: grid; gap: 8px; }
.rating { display: inline-grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); margin-top: 28px; }
.rating__box { display: grid; place-items: center; width: 52px; height: 62px; border: 2px dashed var(--ink-3); font-family: var(--font-display); font-size: 20px; color: var(--ink-3); }
@media (max-width: 700px) {
  .platform { grid-template-columns: 1fr auto; }
  .platform__store { grid-column: 1; grid-row: 2; }
  .platform .chip { grid-row: 1 / span 2; grid-column: 2; }
  .platforms__foot { grid-template-columns: 1fr; }
  .platforms__foot .btn { justify-self: start; }
}

/* Suivre */
.follow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: end; }
.follow__links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.follow__links a, .follow__links span.is-soon {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0;
  border-bottom: 1px solid var(--line); text-decoration: none;
  font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: clamp(24px, 2.6vw, 40px); line-height: 1;
}
.follow__links .t-mono { color: var(--ink-3); font-weight: 400; }
.follow__links a:hover { color: var(--accent-ink); }
.follow__links span.is-soon { color: var(--ink-3); }
@media (max-width: 860px) { .follow { grid-template-columns: 1fr; } }

/* --- Pied de page --------------------------------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); padding: 56px 0 40px; background: var(--bg); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
.footer__brand img { width: 220px; height: auto; margin-bottom: 18px; }
.footer h2 { margin-bottom: 14px; color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer ul a { display: inline-block; padding: 6px 0; text-decoration: none; color: var(--ink-2); }
.footer ul a:hover { color: var(--ink); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-3); }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }

/* --- Pages documents (support, confidentialité, etc.) ------------------------------------------------------- */
.doc { padding: calc(var(--nav-h) + clamp(48px, 7vw, 110px)) 0 clamp(72px, 9vw, 140px); }
.doc__head { display: grid; gap: 22px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 1100px; }
.doc__layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.doc__toc { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 2px; }
.doc__toc a { display: block; padding: 7px 0 7px 12px; border-left: 1px solid var(--line); text-decoration: none; color: var(--ink-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.doc__toc a:hover { color: var(--ink); border-left-color: var(--red); }
.doc__sheet { padding: clamp(24px, 4vw, 64px); max-width: 920px; }
.doc__sheet h2 { margin: 48px 0 14px; padding-top: 16px; border-top: 2px solid var(--paper-ink); font-family: var(--font-ui); font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; scroll-margin-top: calc(var(--nav-h) + 20px); }
.doc__sheet h2:first-of-type { margin-top: 0; }
.doc__sheet h3 { margin: 26px 0 8px; font-weight: 800; font-stretch: 85%; font-size: 19px; }
.doc__sheet p, .doc__sheet li { max-width: 68ch; }
.doc__sheet p + p { margin-top: 12px; }
.doc__sheet ul, .doc__sheet ol { margin: 10px 0; padding-left: 22px; display: grid; gap: 6px; }
.doc__sheet table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.doc__sheet th, .doc__sheet td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-top: 1px solid rgba(var(--paper-ink-rgb), .25); }
.doc__sheet th { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-ink-2); }
.doc__sheet .summary { padding: 18px 20px; border: 2px solid var(--paper-ink); margin-bottom: 36px; }
.doc__sheet .summary ul { margin-bottom: 0; }
.todo { background: var(--warn); color: var(--paper-ink); padding: 0 .3em; font-family: var(--font-mono); font-size: .86em; }
.doc__updated { margin-top: 40px; color: var(--paper-ink-2); }
.faq details { border-top: 1px solid rgba(var(--paper-ink-rgb), .25); }
.faq details:last-child { border-bottom: 1px solid rgba(var(--paper-ink-rgb), .25); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-weight: 800; font-stretch: 85%; font-size: 19px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-weight: 600; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 20px; }
@media (max-width: 860px) {
  .doc__layout { grid-template-columns: 1fr; }
  .doc__toc { position: static; grid-template-columns: 1fr 1fr; }
}

/* --- Mouvement réduit (réglage de l'appareil, ou choix du visiteur) et sans JavaScript ------------------------
   Rien n'est épinglé, aucune séquence n'est chargée : chaque scène devient une affiche plein écran, textes empilés. */
@media (prefers-reduced-motion: reduce) {
  .grain, .rec::before, .hero-cue i { animation: none; }
}
/* « Calme » : l'appareil demande moins d'animations, mais les séquences restent pilotées par le défilement (le visiteur
   garde la main). Seules les animations automatiques s'arrêtent : apparitions, tampons, grain, clignotements. */
html.calme [data-reveal], html.calme [data-stamp], html.calme [data-type] { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; transition: none !important; }
html.calme .grain, html.calme .rec::before { animation: none; }
html.calme .cap { transition: none; }
html.reduced .grain, html.reduced .rec::before, html.reduced .hero-cue i { animation: none; }

html.reduced .scrolly, html:not(.js) .scrolly,
html.reduced .hscroll, html:not(.js) .hscroll { height: auto !important; }
html.reduced .scrolly__stage, html:not(.js) .scrolly__stage {
  position: relative; height: auto; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 44px;
  padding: calc(var(--nav-h) + 72px) 0 72px;
}
html.reduced .scrolly__canvas, html:not(.js) .scrolly__canvas { display: none; }
html.reduced .scrolly__stage::after, html:not(.js) .scrolly__stage::after { background: rgba(var(--bg-rgb), .55); }
html.reduced .cap, html:not(.js) .cap {
  position: relative; inset: auto; top: auto; bottom: auto; left: auto; right: auto;
  margin-inline: var(--gutter); opacity: 1; transform: none; transition: none;
}
html.reduced .cap--br, html:not(.js) .cap--br { margin-left: auto; }
/* L'ouverture garde sa composition (affiche fixe, le cadre montre la première image de la séquence) */
html.reduced .ouverture .scrolly__stage, html:not(.js) .ouverture .scrolly__stage {
  display: block; height: 100vh; height: 100svh; min-height: 620px; padding: 0;
}
html.reduced .hud, html:not(.js) .hud { position: absolute; }
html.reduced .hud [data-hud], html:not(.js) .hud [data-hud] { display: none; }

html.reduced .hscroll__stage, html:not(.js) .hscroll__stage { position: relative; height: auto; display: block; padding-block: 96px 40px; }
html.reduced .hscroll__head, html:not(.js) .hscroll__head { margin-bottom: 36px; }
html.reduced .hscroll__track, html:not(.js) .hscroll__track { flex-direction: column; width: auto; gap: 72px; transform: none !important; will-change: auto; }
html.reduced .hscroll__count, html:not(.js) .hscroll__count { display: none; }
html.reduced .dossier, html:not(.js) .dossier { width: 100%; max-width: 1000px; }
html.reduced .dossier__copie { display: none; }

html.reduced .wipe__night, html:not(.js) .wipe__night { clip-path: inset(0 0 0 50%); }
html.reduced .wipe__line, html:not(.js) .wipe__line { left: 50%; }
html.reduced .wipe .cap--bl, html:not(.js) .wipe .cap--bl { margin-top: 30vh; }

html.reduced [data-reveal], html.reduced [data-stamp], html.reduced [data-type] { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; transition: none !important; }
html.reduced .tuner__needle { transition: none; }

/* Avis + bouton pour activer les séquences quand le mouvement est réduit */
.motion-note { display: none; }
html.reduced .motion-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; position: relative; z-index: 4;
  margin: 0 var(--gutter); padding: 12px 14px; border: 1px solid var(--line-strong); background: rgba(var(--bg-rgb), .85); color: var(--ink-2);
  align-self: flex-start;
}
.motion-note button, .motion-toggle {
  min-height: 40px; padding: 0 14px; border: 1px solid var(--ink); background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.motion-note button:hover, .motion-toggle:hover { border-color: var(--red); color: var(--accent-ink); }
.motion-toggle { min-height: 32px; border-color: var(--line-strong); color: var(--ink-3); }

/* Impression des pages documents */
@media print {
  .nav, .grain, .footer, .doc__toc, .skip { display: none !important; }
  .paper { background: #fff; }
  .doc { padding: 0; }
}

/* --- Précommande (09.11.2026) : formulaire du site, papier crème sur fond noir ------------------------------------ */
.precommande { border-bottom: 1px solid var(--line); }
.precommande__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.precommande__texte { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.precommande__texte .sec-label { margin-bottom: 0; }
.etapes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.etapes li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.etapes b { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--accent-ink); }
.etapes span { font-weight: 800; font-stretch: 80%; text-transform: uppercase; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.1; }
.appstore { display: grid; gap: 10px; padding: 20px 22px; border: 1px solid var(--line-strong); }
.appstore .t-mono { color: var(--accent-ink); }
.appstore p:not(.t-mono) { color: var(--ink-2); max-width: 52ch; }
.appstore__btn { justify-self: start; }
.precommande__legal { color: var(--ink-3); }

.inscription { position: relative; display: grid; gap: 18px; padding: clamp(24px, 3vw, 44px); transform: rotate(.6deg); }
.inscription > .stamp { position: absolute; right: clamp(18px, 3vw, 40px); top: -20px; }
.inscription fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.inscription legend, .inscription .champ > .t-mono { display: block; margin-bottom: 8px; color: var(--paper-ink-2); }
.inscription__plateformes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inscription__plateformes legend { grid-column: 1 / -1; }
.inscription__plateformes label { position: relative; cursor: pointer; }
.inscription__plateformes input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.inscription__plateformes label > span { display: grid; gap: 2px; min-height: 64px; align-content: center; padding: 10px 14px; border: 2px solid var(--paper-ink); }
.inscription__plateformes b { font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: 19px; line-height: 1; }
.inscription__plateformes small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--paper-ink-2); }
.inscription__plateformes input:checked + span { background: var(--paper-ink); color: var(--paper); }
.inscription__plateformes input:checked + span small { color: var(--paper-2); }
.inscription__plateformes input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.inscription__champs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.inscription input[type="text"], .inscription input[type="email"], .inscription select {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 2px solid var(--paper-ink); border-radius: 0; background: #fffaf0;
  color: var(--paper-ink); font: 500 17px/1.2 var(--font-ui); appearance: none;
}
.inscription select { background-image: linear-gradient(45deg, transparent 50%, var(--paper-ink) 50%), linear-gradient(135deg, var(--paper-ink) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 12px) 21px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 34px; }
.inscription input:focus-visible, .inscription select:focus-visible { outline: 3px solid var(--red); outline-offset: 0; }
.inscription [aria-invalid="true"] { border-color: var(--red-2); background: #ffeef5; }
.case { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; font-size: 16px; }
.case input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--paper-ink); }
.piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inscription__erreur { margin: 0; padding: 10px 12px; background: var(--red); color: var(--noir); font-weight: 700; }
.inscription__envoyer { justify-self: start; min-height: 54px; font-size: 19px; }
.inscription__envoyer[disabled] { opacity: .6; cursor: progress; }
.inscription__note { color: var(--paper-ink-2); }
.inscription__ok { display: grid; gap: 12px; }
.inscription__ok .t-title { font-size: clamp(40px, 5vw, 80px); }
.inscription.is-ok > :not(.inscription__ok):not(.stamp) { display: none; }
@media (max-width: 860px) {
  .precommande__grid { grid-template-columns: 1fr; }
  .inscription { transform: none; }
}
@media (max-width: 520px) {
  .inscription__plateformes, .inscription__champs { grid-template-columns: 1fr; }
}

/* --- Ouverture plein écran (10.11.2026) : la séquence prend toute la page, le reste se pose dessus ------------------ */
.ouverture .scrolly__stage { background: var(--bg); }
.ouverture .ouverture__cadre { inset: 0; left: 0; right: 0; top: 0; width: auto; height: auto; aspect-ratio: auto; z-index: 1; background: var(--bg); }
.ouverture .ouverture__cadre::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;   /* voile de lisibilité, pas décoratif */
  background: linear-gradient(to bottom, rgba(var(--bg-rgb), .6) 0, rgba(var(--bg-rgb), 0) 28%, rgba(var(--bg-rgb), 0) 58%, rgba(var(--bg-rgb), .5) 100%);
}
.ouverture .ouverture__tampon { left: auto; right: calc(var(--gutter) + 2vw); top: calc(var(--nav-h) + 5svh); bottom: auto; }
.ouverture .cam { left: var(--gutter); bottom: calc(var(--plate) + 14px); }
@media (orientation: portrait) and (max-width: 900px) {
  .ouverture .ouverture__cadre { inset: 0; left: 0; right: 0; top: 0; width: auto; }
  .ouverture .ouverture__tampon { right: 5vw; left: auto; top: auto; bottom: calc(var(--plate) + min(34svh, 62vw) * .9); }
}

/* --- Boutiques (10.11) ------------------------------------------------------------------------------------------- */
.appstore__btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- « Ce qu'on fait à Genève » (10.11) : une liste courte en bandeaux, qui se lit d'un coup d'œil ----------------- */
.faire .t-title { margin-top: 18px; }
.faire__liste { list-style: none; margin: clamp(28px, 4vw, 52px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 14px; max-width: 1400px; }
.faire__liste .strip { font-size: clamp(26px, 3.6vw, 58px); white-space: normal; }
.strip--mag { background: var(--red); color: var(--noir); }
.faire__note { margin-top: 26px; color: var(--ink-3); }
/* L'attribut hidden doit gagner sur les display: grid des messages du formulaire (10.11) */
.inscription__ok[hidden], .inscription__erreur[hidden] { display: none; }
@media (orientation: portrait) and (max-width: 900px) { .ouverture .cam { display: none; } }

/* --- Communiqué de presse (11.11.2026, page /communique/) -------------------------------------------------------- */
.cp-tete { overflow: hidden; padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 96px)); padding-bottom: 0; }
.cp-tete__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 72px); align-items: end; }
.cp-tete__texte { display: grid; gap: clamp(22px, 2.6vw, 38px); padding-bottom: clamp(72px, 9vw, 150px); }
.cp-tete .t-display { font-size: clamp(48px, 7.4vw, 136px); }
.cp-tete .sec-label { justify-self: start; padding: 6px 10px 5px; background: var(--noir); }
.cp-tete .sec-label::after { display: none; }
.cp-tete__lede { max-width: 46ch; color: var(--creme); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.45; }
.cp-tete__perso { width: 100%; max-width: 640px; justify-self: end; }
.cp-tete__logo { display: none; }                      /* logo central : seulement sur la une du PDF */
.cp-texte { padding-top: clamp(56px, 7vw, 110px); }
.cp-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: clamp(24px, 3vw, 48px); align-items: start; }
.cp-feuille { max-width: none; }
.cp-feuille a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cp-chapeau { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.5; font-weight: 500; max-width: 64ch; margin-bottom: 40px; }
.cp-chapeau strong { font-weight: 800; }
.cp-feuille .platforms { margin: 18px 0; border-top-color: rgba(var(--paper-ink-rgb), .25); }
.cp-feuille .platform { padding: 16px 0; border-bottom-color: rgba(var(--paper-ink-rgb), .25); }
.cp-feuille .platform__name { font-size: clamp(20px, 1.9vw, 30px); }
.cp-feuille .platform__store { color: var(--paper-ink-2); }
.cp-feuille .chip--dev { color: var(--red-2); }
.cp-feuille .chip--plan { color: var(--paper-ink); }
.cp-feuille .chip--tbc { color: var(--paper-ink-2); }
.cp-liens-texte { list-style: none; padding-left: 0 !important; }
.cp-liens-texte a { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.cp-note { margin-top: 8px; }
.cp-fiche { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 18px; }
.cp-fiche__titre { color: var(--sable); }
.cp-fiche__liste { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; }
.cp-fiche__liste dt, .cp-fiche__liste dd { margin: 0; padding: 10px 0; border-top: 1px solid rgba(237, 227, 209, .16); }
.cp-fiche__liste dt { padding-right: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cp-fiche__liste dd { font-weight: 600; }
.cp-fiche__btn { justify-self: start; margin-top: 6px; }
.cp-images .t-title { margin-top: 18px; }
.cp-grille { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(16px, 2vw, 32px); margin-top: clamp(32px, 4vw, 56px); }
.cp-img { grid-column: span 2; margin: 0; }
.cp-img--l { grid-column: span 3; }
.cp-img__fig { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel); }
.cp-img__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-grille--2 .cp-img { grid-column: auto; }
.cp-baraka__haut { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.45fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.cp-baraka__texte { display: grid; gap: clamp(18px, 2vw, 28px); justify-items: start; }
.cp-baraka__texte .t-body { max-width: 38ch; color: var(--ink-2); }
.cp-baraka__texte .btn .t-mono { margin-left: 8px; font-size: 11px; }
.cp-video { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--panel); }
.cp-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-video__lecture { position: absolute; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); display: grid; place-items: center; width: clamp(56px, 6vw, 92px); aspect-ratio: 1; background: var(--red); transition: transform 120ms var(--ease-snap); }
.cp-video__triangle { width: 0; height: 0; margin-left: 12%; border-style: solid; border-width: calc(clamp(56px, 6vw, 92px) * .2) 0 calc(clamp(56px, 6vw, 92px) * .2) calc(clamp(56px, 6vw, 92px) * .32); border-color: transparent transparent transparent var(--on-red); }
.cp-video:hover .cp-video__lecture, .cp-video:focus-visible .cp-video__lecture { transform: scale(1.08); }
.cp-img figcaption { margin-top: 12px; color: var(--ink-3); }
.cp-images__note { margin-top: clamp(28px, 3vw, 44px); color: var(--ink-3); }
.cp-suivre { background: var(--violet) url("../fnac/ciel-section-lg.webp") center top / cover no-repeat; }
.cp-suivre .sec-label { color: var(--creme); }
.cp-suivre .sec-label b { color: var(--sable); }
.cp-suivre .follow__links a { color: var(--creme); }
.cp-suivre .follow__links .t-mono { color: var(--ink-2); }
@media (max-width: 1100px) {
  .cp-corps { grid-template-columns: 1fr; }
  .cp-fiche { position: static; }
}
@media (max-width: 860px) {
  .cp-tete__grid { grid-template-columns: 1fr; }
  .cp-tete__texte { padding-bottom: 0; }
  .cp-tete__perso { width: 82vw; margin-top: 8px; }
  .cp-grille { grid-template-columns: 1fr; }
  .cp-img, .cp-img--l { grid-column: auto; }
  .cp-baraka__haut { grid-template-columns: 1fr; }
  .cp-grille--2 { grid-template-columns: 1fr; }
}

/* Impression / PDF A4 du communiqué : 6 pages (une, texte, images, Baraka, liens). La page A4 fait ~794 px de large, donc
   les règles « mobile » s'appliquent : on remet ici une mise en page à deux colonnes. */
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: var(--bg) !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .nav, .footer, .grain, .skip, .motion-toggle, .cp-images__note { display: none !important; }
  .wrap { padding-inline: 12mm !important; }
  .section { padding-block: 12mm !important; }
  /* 1 — la une : ciel plein page */
  .cp-tete { height: 297mm; display: flex; padding: 16mm 0 0 !important; break-after: page; }
  .cp-tete { background: var(--violet) url("../fnac/ciel-palmiers-lg.webp") 38% bottom / cover no-repeat !important; }
  .cp-suivre { background: var(--violet) url("../fnac/ciel-section-lg.webp") center top / cover no-repeat !important; }
  .cp-tete__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) !important; gap: 4mm !important; align-items: end; width: 100%; }
  .cp-tete__texte { gap: 7mm !important; padding-bottom: 16mm !important; align-self: stretch; display: flex !important; flex-direction: column; }
  .cp-tete__texte .agenda { margin-top: auto; }
  .cp-tete .sec-label { align-self: flex-start; }      /* sinon la plaque s'étire sur toute la colonne */
  .cp-tete .t-display { font-size: 66px !important; }
  .cp-tete__lede { font-size: 14px !important; }
  /* Une : le cygne agrandi et poussé hors de la page (bas et droite), pour cacher les découpes de l'illustration
     (dessous de la voiture, aile gauche derrière l'agenda) ; le logo au centre */
  .cp-tete { position: relative; }
  .cp-tete__texte { position: relative; z-index: 2; }
  .cp-tete__perso { position: absolute !important; right: -34mm; bottom: -20mm; width: 150mm !important; max-width: none !important;
                    margin: 0 !important; z-index: 1; }
  .cp-tete__logo { display: block !important; position: absolute; left: 50%; top: 53%; width: 125mm; height: auto;
                   transform: translate(-50%, -50%); z-index: 1; }
  .cp-tete .agenda li { grid-template-columns: 22mm minmax(0, 1fr) !important; padding: 3.2mm 0 !important; }
  .cp-tete .agenda__date { font-size: 26px !important; }
  .cp-tete .agenda__lieu { font-size: 16px !important; }
  .cp-tete .agenda__detail { font-size: 12px; }
  /* 2 — le texte : feuille pleine largeur, fiche dessous */
  .cp-texte { padding-top: 0 !important; padding-bottom: 0 !important; }   /* la bordure de la feuille fait la marge */
  .cp-corps { grid-template-columns: 1fr !important; gap: 8mm !important; }
  .cp-feuille { padding: 10mm 11mm !important; font-size: 13px; }
  /* La feuille court sur 3 pages : chaque morceau garde ses marges intérieures (clone) et une bande sombre en haut
     et en bas (bordure couleur du fond), sinon le texte colle au bord de la page à chaque coupure. */
  .cp-feuille { -webkit-box-decoration-break: clone; box-decoration-break: clone; background-clip: padding-box !important;
                border-top: 12mm solid var(--bg) !important; border-bottom: 12mm solid var(--bg) !important; }
  .cp-chapeau { font-size: 15.5px !important; margin-bottom: 7mm !important; }
  .doc__sheet h2 { font-size: 20px !important; margin-top: 6.5mm !important; break-after: avoid; }
  .cp-feuille .platform { padding: 1.9mm 0 !important; }
  .cp-feuille .platform__name { font-size: 17px !important; }
  .platform, .agenda li, .cp-fiche, .cp-feuille p { break-inside: avoid; }
  .cp-fiche { display: none !important; }        /* les mêmes infos sont dans le texte ; le zip est dans les liens */
  /* 3 — les images, en couleur */
  .cp-images { break-before: page; }
  .cp-grille { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7mm 6mm !important; margin-top: 8mm !important; }
  .cp-img, .cp-img--l { grid-column: auto !important; break-inside: avoid; }
  /* 3 bis — la bande-annonce au Baraka : miniature pleine largeur, 2 images dessous */
  .cp-baraka { break-before: page; }
  .cp-baraka__haut { grid-template-columns: 1fr !important; gap: 6mm !important; }
  .cp-baraka__texte { gap: 4mm !important; }
  .cp-baraka__texte .t-body { font-size: 13px; max-width: none; }
  .cp-video { width: 100%; }
  .cp-grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6mm 6mm !important; margin-top: 7mm !important; }
  /* 4 — liens et contact : ciel plein page */
  .cp-suivre { break-before: page; height: 297mm; display: flex; align-items: flex-end; padding-bottom: 0 !important; }
  .cp-suivre .follow { grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) !important; width: 100%; }
  .cp-suivre .follow > div { padding-bottom: 14mm !important; }
  .cp-suivre .suivre__perso { width: 100% !important; max-width: none !important; margin: 0 !important; }
  .cp-suivre .follow__links a { padding-block: 3mm; font-size: 18px; }
}

/* --- 12.11.2026 : démo jouable dans le navigateur (section 00 de l'accueil et page /jouer/) --------------------------- */
.demo { border-bottom: 1px solid var(--line); }
.demo__grid, .jouer__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.demo__texte, .jouer__texte { display: grid; gap: clamp(18px, 2.2vw, 28px); justify-items: start; }
.demo__texte .sec-label, .jouer__texte .sec-label { margin-bottom: 0; justify-self: stretch; }
.demo__note { color: var(--ink-3); max-width: 62ch; }
/* 13.11 : avertissement « Bêta » à côté de chaque bouton pour jouer */
.beta { margin: 0; max-width: 62ch; padding: .85em 1em; border: 1.5px solid currentColor; line-height: 1.55; }
.beta b { display: inline-block; margin-right: .7em; padding: .12em .5em .05em; background: var(--red); color: var(--on-red); font-weight: 600; }
.demo .beta { color: var(--ink-2); }
.jouer__carte .beta { color: var(--paper-ink); }
.demo__fiche { transform: rotate(-1deg); }
.demo__quand { color: var(--red-2); }
.demo__fiche .fiche__foot .t-mono { align-self: center; }

.jouer { padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 120px)); }
.jouer__carte { position: relative; display: grid; gap: 18px; justify-items: start; padding: clamp(26px, 3.6vw, 52px); transform: rotate(1deg); }
.jouer__carte > .stamp { position: absolute; top: -16px; right: 18px; font-size: clamp(18px, 1.8vw, 28px); }
.jouer__statut { margin: 0; }
.jouer__date { margin: 0; font-family: var(--font-display); text-transform: uppercase; line-height: .88; font-size: clamp(64px, 9vw, 150px); }
.jouer__carte { container-type: inline-size; }
.jouer__date.is-long { font-size: min(92px, 20cqi); }
/* 15.11 : « ÇA BOUCHONNE ! » (pause, parties épuisées) tient sur une ligne : 5,96 em de large → 16,4cqi */
.jouer__carte.is-pause .jouer__date.is-long { white-space: nowrap; font-size: min(92px, 16.4cqi); line-height: 1.05; }   /* « Aujourd'hui » (13.11) : tient dans la largeur de la carte */
.jouer__carte.is-ouvert .jouer__date { color: var(--red-2); }
/* 14.11 : démo en pause ou complète (état lu chez Vagon) */
.jouer__etat { margin: 0; max-width: 46ch; font-size: 1.02rem; line-height: 1.45; color: var(--paper-ink); }
.jouer__etat b { color: var(--red-2); }
.jouer__carte.is-pause .jouer__date { color: var(--paper-ink-2); }
.jouer__lancer { font-size: clamp(18px, 1.5vw, 22px); padding-block: .9em; }
.jouer__lancer[aria-disabled="true"] { color: var(--paper-ink-2); border-color: var(--paper-ink-2); }
.jouer__lancer[aria-disabled="true"]::before { display: none; }   /* pas de plaque rose tant que la démo n'est pas ouverte */
.jouer__places { margin: 0; max-width: 46ch; }
.jouer__conseils { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid rgba(var(--paper-ink-rgb), .2); justify-self: stretch; }
.jouer__conseils p { margin: 0; }
.jouer__conseils ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.jouer-demo { border-top: 1px solid var(--line); }
.jouer__suite { align-self: center; }
.jouer__suite .btn { justify-self: start; }
.jouer-savoir .doc__sheet { margin-inline: auto; }
.jouer-savoir .doc__sheet strong { font-weight: 800; }

@media (max-width: 860px) {
  .demo__grid, .jouer__grid { grid-template-columns: 1fr; }
  .demo__fiche, .jouer__carte { transform: none; }
}

/* 12.11.2026 : communiqué, la première image des quartiers en grand (écran et PDF) */
.cp-grille .cp-img--hero { grid-column: 1 / -1 !important; }
@media print {
  /* 12.11 : 7 images des quartiers sur une seule page A4 (une grande, puis deux rangées de trois) */
  .cp-images .cp-grille { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5mm 5mm !important; }
  .cp-images .cp-img figcaption { margin-top: 2mm; font-size: 7.5px; line-height: 1.35; }
}

/* Captcha Turnstile du formulaire de précommande (14.11.2026) : vide et sans place la plupart du temps. */
.inscription__captcha:empty { display: none; }
.inscription__captcha { margin: 0.75rem 0; }