/* VECTVR — régie de rejeu et balisage routier. Le noir d'asphalte domine, l'orange de chantier signale,
   le papier sert aux respirations éditoriales. Une seule famille variable (Archivo) dont la chasse
   s'étire, plus une mono pour tout ce qui est mesure : ticks, timecodes, statuts. */

@font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

:root {
  --ink: #0b0c0b;
  --ink-2: #121412;
  --ink-3: #1b1e1b;
  --line: rgba(244, 241, 234, 0.12);
  --line-strong: rgba(244, 241, 234, 0.26);
  --paper: #efebe1;
  --paper-2: #e4dfd2;
  --text: #f4f1ea;
  --muted: rgba(244, 241, 234, 0.62);
  --dark-text: #0b0c0b;
  --dark-muted: rgba(11, 12, 11, 0.64);
  --signal: #ff5a1f;
  --signal-ink: #d63f08;
  --verge: #b8f03c;
  --sky: #4fb3ff;
  --today: #b8f03c;
  --next: #ffd23f;
  --vision: #c48bff;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --display: 'Archivo', 'Arial Narrow', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font-family: var(--display); font-stretch: 100%; font-weight: 400; font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--signal); color: var(--ink); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--signal); color: var(--ink); padding: 10px 14px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); }

/* ---------- Typographie de titrage ---------- */
.display {
  font-family: var(--display); font-weight: 900; font-stretch: 66%; text-transform: uppercase;
  line-height: 0.86; letter-spacing: -0.01em; margin: 0;
}
.display span { display: block; }
.display .hl { color: var(--signal); }
.d-xxl { font-size: clamp(44px, min(7vw, 10.5vh), 140px); }
.d-xl { font-size: clamp(42px, 6.4vw, 112px); }
.d-l { font-size: clamp(36px, 4.8vw, 84px); }
.d-m { font-size: clamp(32px, 4vw, 64px); }
.lede { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.42; font-stretch: 96%; max-width: 38ch; margin: 0; }
.body-l { font-size: clamp(17px, 1.25vw, 19px); color: var(--muted); max-width: 52ch; }
.paper .body-l, .signal .body-l { color: var(--dark-muted); }

/* Étiquette mono de section, façon repère de timeline. */
.cue {
  display: flex; align-items: center; gap: 12px; margin: 0 0 28px;
  font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.paper .cue, .signal .cue { color: var(--dark-muted); }
.cue::before { content: ''; width: 9px; height: 9px; background: var(--signal); transform: rotate(45deg); flex: none; }
.signal .cue::before { background: var(--ink); }
.cue b { font-weight: 700; color: var(--text); }
.paper .cue b, .signal .cue b { color: var(--dark-text); }

/* Puce de statut honnête : fonctionne / en construction / vision. */
.status {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px 5px 8px; border: 1px solid currentColor;
  font: 600 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-today { color: var(--today); }
.status-next { color: var(--next); }
.status-vision { color: var(--vision); }
.paper .status-today, .signal .status-today { color: #3d6b00; }
.paper .status-next, .signal .status-next { color: #8a6a00; }
.paper .status-vision, .signal .status-vision { color: #6a2fc0; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px; border: 1.5px solid var(--text);
  background: transparent; color: var(--text); text-decoration: none; cursor: pointer;
  font: 700 15px/1 var(--display); font-stretch: 88%; letter-spacing: 0.04em; text-transform: uppercase;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--text); color: var(--ink); }
.btn-signal { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.btn-signal:hover { background: var(--text); border-color: var(--text); }
.btn .arrow { font-family: var(--mono); transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.paper .btn, .signal .btn { border-color: var(--ink); color: var(--ink); }
.paper .btn:hover, .signal .btn:hover { background: var(--ink); color: var(--paper); }
.link { font: 600 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }

/* ---------- En-tête ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 64px;
  background: linear-gradient(var(--ink), rgba(11, 12, 11, 0.86)); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 900 22px/1 var(--display); font-stretch: 72%; letter-spacing: 0.06em; }
.wordmark svg { width: 26px; height: 26px; }
.main-nav { display: flex; gap: 26px; margin-left: auto; }
.main-nav a { text-decoration: none; font: 600 13px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 8px 0; }
.main-nav a:hover, .main-nav a[aria-current] { color: var(--text); }
.main-nav a[aria-current]::before { content: '◆ '; color: var(--signal); }
.lang { display: flex; gap: 2px; font: 600 12px/1 var(--mono); }
.lang a { text-decoration: none; padding: 8px 7px; color: var(--muted); border: 1px solid transparent; }
.lang a[aria-current] { color: var(--ink); background: var(--text); }
.rec { display: flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); color: var(--muted); min-width: 156px; justify-content: flex-end; }
.rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .rec i { animation: none; } }
.menu-toggle { display: none; }
main { display: block; }

/* ---------- Rail de chapitres : la page elle-même est une timeline ---------- */
.chapter-rail {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 14px;
  mix-blend-mode: difference;
}
.chapter-rail a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-decoration: none; color: #fff; }
.chapter-rail a span { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateX(6px); transition: .2s var(--ease); }
.chapter-rail a i { width: 14px; height: 2px; background: #fff; opacity: .45; transition: .2s var(--ease); }
.chapter-rail a:hover span, .chapter-rail a.on span { opacity: 1; transform: none; }
.chapter-rail a.on i { width: 28px; opacity: 1; }
@media (max-width: 1100px) { .chapter-rail { display: none; } }

/* ---------- Héros : rejeu en direct ---------- */
.hero-replay { position: relative; min-height: 100svh; max-height: max(100svh, 640px); padding-top: 64px; display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.hero-canvas { position: absolute; inset: 64px 0 0 0; width: 100%; height: calc(100% - 64px); cursor: ew-resize; touch-action: pan-y; }
.hero-grid-bg { position: absolute; inset: 64px 0 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; opacity: .35; mask-image: radial-gradient(ellipse at 70% 50%, #000 20%, transparent 75%); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; align-self: end; padding-top: clamp(72px, 14vh, 200px); padding-bottom: clamp(16px, 2.5vh, 28px); pointer-events: none; }
.hero-copy > * { pointer-events: auto; }
.hero-copy .display { text-shadow: 0 2px 40px rgba(11, 12, 11, .6); }
.hero-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; margin-top: clamp(16px, 3vh, 34px); }
.hero-sub .lede { font-size: clamp(16px, min(1.35vw, 2.2vh), 21px); max-width: 44ch; }
.hero-sub .lede { text-shadow: 0 1px 18px rgba(11, 12, 11, .9); }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.kicker { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 clamp(12px, 2.4vh, 26px); padding: 0; list-style: none; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kicker li:first-child { color: var(--signal); }

.scrubber { position: relative; z-index: 3; border-top: 1px solid var(--line); background: rgba(11, 12, 11, .82); backdrop-filter: blur(6px); }
.scrubber-inner { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 58px; }
.scrub-play { width: 40px; height: 40px; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; display: grid; place-items: center; }
.scrub-play:hover { border-color: var(--text); }
.scrub-play svg { width: 14px; height: 14px; fill: currentColor; }
.scrub-tc { font: 500 13px/1.2 var(--mono); white-space: nowrap; }
.scrub-tc b { color: var(--signal); font-weight: 600; }
.scrub-tc small { display: block; color: var(--muted); font-size: 11px; }
.scrub-track { position: relative; height: 40px; cursor: pointer; touch-action: none; }
.scrub-track svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scrub-head { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--signal); pointer-events: none; }
.scrub-head::before { content: ''; position: absolute; top: -5px; left: -5px; width: 12px; height: 12px; background: var(--signal); transform: rotate(45deg); }
.scrub-leader { font: 500 12px/1.3 var(--mono); color: var(--muted); text-align: right; white-space: nowrap; }
.scrub-leader b { color: var(--text); font-weight: 600; display: block; }
.hero-caption { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 24px; padding-top: 8px; padding-bottom: 10px; font: 400 12px/1.5 var(--mono); color: var(--muted); }
.hero-caption p { margin: 0; max-width: 92ch; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.legend li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend i { width: 7px; height: 7px; transform: rotate(45deg); }

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(96px, 13vw, 200px) 0; }
.section-tight { padding: clamp(72px, 9vw, 128px) 0; }
.paper { background: var(--paper); color: var(--dark-text); }
.signal { background: var(--signal); color: var(--ink); }
.ink-2 { background: var(--ink-2); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.paper .rule { border-color: rgba(11, 12, 11, .16); }

/* Règle graduée : séparateur façon timeline, avec un tick majeur toutes les dix graduations. */
.ticks { height: 22px; background-image: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 12px); opacity: .3; mask-image: linear-gradient(transparent 50%, #000 50%); }
.ticks::after { content: ''; display: block; height: 100%; background-image: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 120px); }

/* Problème : lignes qui s'allument au défilement. */
.problem { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.problem-lines { font: 800 clamp(30px, 4.4vw, 76px)/1 var(--display); font-stretch: 74%; margin: 0; letter-spacing: -0.015em; }
.problem-lines span { display: block; color: rgba(11, 12, 11, .18); transition: color .6s var(--ease); }
.problem-lines span.lit { color: var(--dark-text); }
.problem-lines .quote { color: rgba(214, 63, 8, .2); font-style: italic; font-stretch: 80%; }
.problem-lines .quote.lit { color: var(--signal-ink); }
.problem-turn { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; border-top: 1px solid rgba(11, 12, 11, .16); padding-top: 32px; }
.problem-turn p { margin: 0; font-size: clamp(18px, 1.5vw, 22px); max-width: 40ch; }

/* Thèse : bandeau orange plein cadre. */
.thesis { overflow: hidden; }
.thesis .display { font-size: clamp(44px, 6.6vw, 118px); }
.thesis .display span:nth-child(3), .thesis .display span:nth-child(4) { color: var(--paper); }
.thesis-foot { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 40px; margin-top: 56px; align-items: end; }
.thesis-foot p { margin: 0; font-size: clamp(18px, 1.4vw, 21px); }
.hashline { font: 600 clamp(14px, 1.3vw, 18px)/1.4 var(--mono); }
.hashline code { background: var(--ink); color: var(--signal); padding: 4px 8px; }

/* Boucle ReplayLab : mots collants à gauche, cartes à droite. */
.loop { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.loop-words { position: sticky; top: 120px; align-self: start; }
/* Le mot actif change de couleur, jamais de chasse : il ne doit pas déborder sous les cartes. */
.loop-words .display { font-size: clamp(38px, 4.6vw, 84px); }
.loop-words .display span { color: rgba(244, 241, 234, .14); transition: color .4s var(--ease); }
.loop-words .display span.on { color: var(--text); }
.loop-cards { display: grid; gap: 28px; }
.loop-card { border: 1px solid var(--line); background: var(--ink-2); display: grid; grid-template-rows: auto auto; }
.loop-card .viz { position: relative; border-bottom: 1px solid var(--line); min-height: 340px; overflow: hidden; background: var(--ink); }
.loop-card .copy { padding: clamp(24px, 3vw, 40px); display: grid; gap: 16px; align-content: start; }
.loop-card h3 { margin: 0; font: 800 clamp(28px, 3vw, 44px)/1 var(--display); font-stretch: 76%; text-transform: uppercase; }
.loop-card p { margin: 0; color: var(--muted); max-width: 54ch; }
.loop-card .note { font: 400 12px/1.5 var(--mono); color: var(--muted); border-left: 2px solid var(--line-strong); padding-left: 12px; }
.loop-card .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.loop-card .idx { font: 500 12px/1 var(--mono); color: var(--muted); }

/* Visuels animés des cartes (SVG/CSS, sans dépendance). */
.viz svg { width: 100%; height: 100%; position: absolute; inset: 0; }
.viz-capture .chip { font: 500 11px/1 var(--mono); }
.viz-ask { padding: 36px 40px; display: grid; align-content: center; gap: 14px; position: relative; }
.ask-q { font: 500 15px/1.4 var(--mono); color: var(--text); border: 1px solid var(--line-strong); padding: 14px 16px; }
.ask-q::before { content: '> '; color: var(--signal); }
.ask-a { font-size: 15px; color: var(--muted); line-height: 1.6; }
.cite { display: inline-block; font: 600 11px/1 var(--mono); color: var(--ink); background: var(--verge); padding: 4px 6px; margin: 0 2px; vertical-align: 1px; text-decoration: none; cursor: pointer; border: 0; }
.cite:hover { background: var(--text); }
.viz-prove { padding: 28px; display: grid; align-content: center; gap: 10px; }
.contract { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; font: 400 13px/1.4 var(--mono); padding: 12px 14px; border: 1px solid var(--line); }
.contract .ok { color: var(--verge); } .contract .ko { color: #ff5c8a; }
.contract small { color: var(--muted); }

/* Preuves chiffrées. */
.proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 56px; }
.proof-grid div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 24px 24px; }
.proof-grid strong { display: block; font: 900 clamp(48px, 6vw, 96px)/0.9 var(--display); font-stretch: 66%; }
.proof-grid span { font: 500 12px/1.3 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }

/* Bandeau AccoBolide plein cadre. */
.game-band { position: relative; min-height: 92vh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.game-band video, .game-band .band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.game-band::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,12,11,.1) 30%, rgba(11,12,11,.92)), linear-gradient(90deg, rgba(11,12,11,.55), transparent 60%); }
.game-band .wrap { padding-bottom: clamp(40px, 6vw, 88px); }
.game-band .display { font-size: clamp(36px, 5.4vw, 96px); max-width: 16ch; }
.game-band .display span:last-child { color: var(--verge); }
.game-band-foot { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-top: 32px; flex-wrap: wrap; }
.game-band-foot p { margin: 0; max-width: 52ch; font-size: clamp(17px, 1.3vw, 20px); }
.hazard { height: 14px; background: repeating-linear-gradient(-45deg, var(--signal) 0 14px, var(--paper) 14px 28px); }

/* Studio & principes. */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 64px; border-top: 1px solid rgba(11,12,11,.16); }
.principles article { padding: 28px 28px 8px 0; border-right: 1px solid rgba(11,12,11,.16); }
.principles article + article { padding-left: 28px; }
.principles article:last-child { border-right: 0; }
.principles .n { font: 500 12px/1 var(--mono); color: var(--signal-ink); }
.principles h3 { margin: 18px 0 10px; font: 800 clamp(24px, 2.2vw, 32px)/1.02 var(--display); font-stretch: 78%; text-transform: uppercase; }
.principles p { margin: 0; color: var(--dark-muted); }
.founder { margin-top: 48px; font: 400 13px/1.6 var(--mono); color: var(--dark-muted); }

/* Feuille de route. */
.roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 64px; position: relative; }
.roadmap::before { content: ''; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--today) 0 33%, var(--next) 33% 66%, var(--vision) 66%); }
.roadmap section { padding: 44px 32px 0 0; position: relative; }
.roadmap section::before { content: ''; position: absolute; top: 3px; left: 0; width: 14px; height: 14px; transform: rotate(45deg); background: var(--ink); border: 2px solid var(--c); }
.roadmap section:nth-child(1) { --c: var(--today); } .roadmap section:nth-child(2) { --c: var(--next); } .roadmap section:nth-child(3) { --c: var(--vision); }
.roadmap h3 { margin: 0 0 18px; font: 800 28px/1 var(--display); font-stretch: 76%; text-transform: uppercase; color: var(--c); }
.roadmap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.roadmap li { color: var(--muted); padding-left: 18px; position: relative; }
.roadmap li::before { content: '—'; position: absolute; left: 0; color: var(--c); }

/* Contact. */
.contact { overflow: hidden; }
.contact .display { font-size: clamp(44px, 7vw, 120px); }
.contact-mail { display: inline-block; margin-top: 48px; font: 800 clamp(26px, 4.2vw, 70px)/1 var(--display); font-stretch: 80%; text-decoration: none; color: var(--ink); border-bottom: 5px solid var(--ink); padding-bottom: 6px; word-break: break-all; transition: color .2s, border-color .2s; }
.contact-mail:hover { color: var(--paper); border-color: var(--paper); }
.contact-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; margin-top: 40px; align-items: end; }
.contact-foot p { margin: 0; max-width: 52ch; font-size: clamp(17px, 1.3vw, 20px); }

/* ---------- Pied de page ---------- */
.site-footer { padding: 64px 0 28px; border-top: 1px solid var(--line); }
.footer-top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font: 500 12px/1.5 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.footer-mark { margin: 48px 0 24px; }
.footer-mark svg { width: 100%; height: auto; }
.footer-mark path { fill: none; stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 3000; stroke-dashoffset: 3000; transition: stroke-dashoffset 3.2s var(--ease); }
.footer-mark.in path { stroke-dashoffset: 0; }
.footer-mark .fill { fill: var(--text); stroke: none; opacity: 0; transition: opacity 1.2s 2.4s; }
.footer-mark.in .fill { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .footer-mark path { stroke-dashoffset: 0; transition: none; } .footer-mark .fill { opacity: 1; transition: none; } }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; font: 400 12px/1.5 var(--mono); color: var(--muted); }
.footer-bottom nav { display: flex; gap: 20px; }
.footer-bottom a { text-decoration: none; } .footer-bottom a:hover { color: var(--text); }

/* ---------- Page ReplayLab ---------- */
.page-head { padding: calc(64px + clamp(56px, 9vw, 120px)) 0 clamp(48px, 6vw, 80px); position: relative; }
.page-head .display { margin-bottom: 40px; }
.page-head .split { align-items: end; }
.film { position: relative; background: #000; border: 1px solid var(--line); aspect-ratio: 16 / 9; overflow: hidden; }
.film video, .film img, .film canvas { width: 100%; height: 100%; object-fit: cover; }
.film-bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 0; font: 400 12px/1.5 var(--mono); color: var(--muted); }
.film-controls { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 8px; }
.film-controls button { height: 38px; padding: 0 14px; background: rgba(11,12,11,.8); border: 1px solid var(--line-strong); font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.film-controls button:hover { background: var(--text); color: var(--ink); }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.three h3 { margin: 0 0 12px; font: 800 clamp(24px, 2.2vw, 32px)/1.02 var(--display); font-stretch: 78%; text-transform: uppercase; }
.three p { margin: 0; color: var(--muted); }
.paper .three p { color: var(--dark-muted); }
.three article { border-top: 2px solid currentColor; padding-top: 22px; }

.caps-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 40px 0 28px; }
.caps-filter button { border: 1px solid var(--line-strong); background: transparent; padding: 10px 14px; font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; color: var(--muted); }
.caps-filter button[aria-pressed='true'] { background: var(--text); color: var(--ink); border-color: var(--text); }
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cap { background: var(--ink); padding: 26px 24px 28px; display: grid; gap: 12px; align-content: start; min-height: 230px; transition: background .2s, opacity .3s; }
.cap:hover { background: var(--ink-2); }
.cap[hidden] { display: none; }
.cap .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cap .stage { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.cap h3 { margin: 6px 0 0; font: 800 26px/1.02 var(--display); font-stretch: 78%; text-transform: uppercase; }
.cap p { margin: 0; color: var(--muted); font-size: 16px; }

.who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(11,12,11,.16); border: 1px solid rgba(11,12,11,.16); margin-top: 48px; }
.who div { background: var(--paper); padding: 24px; }
.who h3 { margin: 0 0 10px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--signal-ink); }
.who p { margin: 0; font: 700 clamp(19px, 1.6vw, 24px)/1.2 var(--display); font-stretch: 90%; }

/* ---------- Lecteur de session (prototype réel) ---------- */
.lab-app { border: 1px solid var(--line-strong); background: var(--ink-2); margin-top: 48px; }
.app-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 500 12px/1.4 var(--mono); }
.app-bar .file { display: flex; align-items: center; gap: 10px; }
.app-bar .file::before { content: ''; width: 8px; height: 8px; background: var(--verge); border-radius: 50%; }
.app-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.app-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); background: transparent; font: 600 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; text-decoration: none; color: var(--text); }
.app-btn:hover { background: var(--text); color: var(--ink); }
.app-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.app-btn:focus-within { outline: 2px solid var(--signal); outline-offset: 2px; }
.app-status { padding: 8px 16px; font: 400 12px/1.4 var(--mono); color: var(--muted); border-bottom: 1px solid var(--line); margin: 0; }
.app-status.error { color: #ff8aa8; }
.app-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.app-map { position: relative; border-right: 1px solid var(--line); min-height: 420px; }
.app-map canvas { width: 100%; height: 100%; position: absolute; inset: 0; }
.app-map .label { position: absolute; left: 12px; top: 10px; font: 500 11px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.app-side { display: grid; grid-template-rows: auto auto 1fr; min-width: 0; }
.app-facts, .live { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid var(--line); }
.app-facts div, .live div { padding: 12px 14px; border-right: 1px solid var(--line); min-width: 0; }
.app-facts div:last-child, .live div:last-child { border-right: 0; }
.app-facts dt, .live dt { font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.app-facts dd, .live dd { margin: 6px 0 0; font: 600 15px/1.2 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-driver { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font: 500 12px/1 var(--mono); }
.app-driver select, .app-filter select { background: var(--ink); color: var(--text); border: 1px solid var(--line-strong); height: 32px; padding: 0 8px; font: 500 12px/1 var(--mono); max-width: 100%; }
.chart { padding: 8px 0 0; border-bottom: 1px solid var(--line); }
.chart svg { width: 100%; height: 170px; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .speed { fill: none; stroke: var(--signal); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart .area { fill: rgba(255, 90, 31, .12); }
.chart .axis { font: 400 11px var(--mono); fill: var(--muted); }
.chart .head { stroke: var(--text); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart .mark { stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .7; }
.app-timeline { padding: 14px 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.app-timeline output { font: 600 14px/1 var(--mono); min-width: 120px; }
.app-timeline input[type=range] { width: 100%; accent-color: var(--signal); }
.app-timeline .nav { display: flex; gap: 6px; }
.app-lower { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border-top: 1px solid var(--line); }
.app-events { border-right: 1px solid var(--line); min-width: 0; }
.app-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.event-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow: auto; }
.event-list button { width: 100%; display: grid; grid-template-columns: 76px 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; font: 400 13px/1.3 var(--mono); }
.event-list button:hover { background: var(--ink-3); }
.event-list button[aria-current='true'] { background: rgba(255, 90, 31, .14); box-shadow: inset 2px 0 var(--signal); }
.event-list .t { color: var(--muted); }
.event-list .d { width: 8px; height: 8px; transform: rotate(45deg); }
.event-list .by { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.evidence { min-width: 0; }
.evidence p { margin: 0; padding: 12px 14px; font: 600 14px/1.4 var(--mono); }
.evidence pre { margin: 0; padding: 0 14px 14px; font: 400 12px/1.5 var(--mono); color: var(--muted); white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow: auto; }
.app-foot { padding: 14px 16px; border-top: 1px solid var(--line); font: 400 12px/1.6 var(--mono); color: var(--muted); }
.app-foot details { margin-top: 8px; }
.app-foot summary { cursor: pointer; color: var(--text); }
.app-foot ul { margin: 8px 0 0; padding-left: 18px; }

.ask { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); border: 1px solid var(--line-strong); }
.ask-list { display: grid; align-content: start; border-right: 1px solid var(--line); }
.ask-list button { text-align: left; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; font: 500 14px/1.4 var(--mono); color: var(--muted); }
.ask-list button::before { content: '> '; color: var(--signal); }
.ask-list button[aria-pressed='true'] { color: var(--text); background: var(--ink-2); }
.ask-out { padding: 22px 24px; min-height: 220px; }
.ask-out p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; }
.ask-out .src { font: 400 12px/1.5 var(--mono); color: var(--muted); }
.ask-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px 18px; border: 1px solid var(--line-strong); border-bottom: 0; margin-top: 48px; font: 500 12px/1.4 var(--mono); color: var(--muted); flex-wrap: wrap; }

/* ---------- Page AccoBolide ---------- */
.game-hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; padding-top: 64px; }
.game-hero video, .game-hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.game-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,12,11,.5), transparent 30%, transparent 45%, rgba(11,12,11,.95)); }
.game-hero .wrap { padding-bottom: 40px; }
.logo-acco { font: 900 clamp(64px, 14vw, 250px)/0.82 var(--display); font-stretch: 62%; letter-spacing: -0.02em; margin: 0; text-transform: uppercase; }
.logo-acco .b { color: var(--signal); }
.game-hero .tag { margin: 18px 0 0; font: 800 clamp(22px, 2.6vw, 40px)/1 var(--display); font-stretch: 78%; text-transform: uppercase; }
.game-hero-foot { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-top: 28px; }
.facts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts-row div { padding: 18px 20px; border-right: 1px solid var(--line); }
.facts-row div:last-child { border-right: 0; }
.facts-row dt { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.facts-row dd { margin: 8px 0 0; font: 700 20px/1.1 var(--display); font-stretch: 86%; }
.trades { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 56px; border-top: 2px solid var(--ink); }
.trade { padding: 22px 18px 24px 0; border-right: 1px solid rgba(11,12,11,.16); position: relative; }
.trade + .trade { padding-left: 18px; }
.trade:last-child { border-right: 0; }
.trade .verb { font: 900 clamp(34px, 3.6vw, 60px)/0.9 var(--display); font-stretch: 64%; display: block; margin-bottom: 14px; }
.trade h3 { margin: 0 0 8px; font: 600 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--signal-ink); }
.trade p { margin: 0; color: var(--dark-muted); font-size: 15px; }
.trade .sw { height: 6px; margin-bottom: 18px; }
.note-line { margin-top: 28px; font: 400 13px/1.6 var(--mono); color: var(--dark-muted); }
.risk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.risk article { padding: 0 32px 0 0; }
.risk article + article { padding-left: 32px; border-left: 1px solid var(--line); }
.risk h3 { margin: 0 0 12px; font: 800 clamp(28px, 3vw, 44px)/1 var(--display); font-stretch: 72%; text-transform: uppercase; }
.risk p { margin: 0; color: var(--muted); }
.atlas { list-style: none; margin: 48px 0 0; padding: 0; columns: 2; column-gap: 48px; }
.atlas li { break-inside: avoid; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.atlas .n { font: 500 12px/1 var(--mono); color: var(--muted); }
.atlas .name { font: 700 clamp(18px, 1.5vw, 22px)/1.15 var(--display); font-stretch: 86%; }
.atlas .kind { display: block; font: 400 12px/1.4 var(--mono); color: var(--muted); margin-top: 4px; }
.atlas li.play .name { color: var(--verge); }
.gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.gallery figure { margin: 0; grid-column: span 2; position: relative; }
.gallery figure.big { grid-column: span 4; grid-row: span 2; }
.gallery a { display: block; height: 100%; overflow: hidden; background: #000; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery a:hover img { transform: scale(1.04); }
.gallery figcaption { position: absolute; left: 10px; bottom: 10px; font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; background: rgba(11,12,11,.8); padding: 6px 8px; }
.gallery figcaption.art::before { content: '◆ '; color: var(--vision); }
.gallery figcaption.shot::before { content: '◆ '; color: var(--verge); }
.case-steps { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.case-steps li { display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 24px; align-items: start; padding: 26px 0; border-top: 1px solid var(--line); }
.case-steps .n { font: 900 44px/0.9 var(--display); font-stretch: 66%; color: var(--signal); }
.case-steps h3 { margin: 0; font: 800 clamp(22px, 2vw, 30px)/1.05 var(--display); font-stretch: 78%; text-transform: uppercase; }
.case-steps p { margin: 0; color: var(--muted); }
.case-steps li.vision .n { color: var(--vision); }
.case-data { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.case-data > div { background: var(--ink); padding: 20px; min-width: 0; }
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 70px; gap: 12px; align-items: center; font: 400 12px/1.2 var(--mono); }
.bar .track { height: 14px; background: var(--ink-3); position: relative; }
.bar .fill { position: absolute; inset: 0; background: var(--verge); transform-origin: left; transform: scaleX(0); }
.no-js .bar .fill { transform: none; }
.bar .val { text-align: right; color: var(--muted); }
.bar .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-data h3 { margin: 0 0 16px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.next-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.next-list li { padding: 20px 20px 0 0; font: 700 20px/1.15 var(--display); font-stretch: 86%; }
.next-list li::before { content: '→ '; color: var(--signal); font-family: var(--mono); }

/* Fenêtre d'image. */
.media-dialog { border: 0; padding: 0; background: transparent; max-width: min(1400px, 94vw); width: 100%; color: var(--text); }
.media-dialog::backdrop { background: rgba(0,0,0,.9); }
.media-dialog .bar { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font: 500 12px/1.4 var(--mono); }
.media-dialog button { background: transparent; border: 1px solid var(--line-strong); padding: 8px 12px; cursor: pointer; font: 600 11px/1 var(--mono); text-transform: uppercase; }
.media-dialog img { width: 100%; height: auto; }

/* ---------- Pages légales et 404 ---------- */
.legal { padding: calc(64px + 72px) 0 96px; max-width: 900px; }
.legal h1 { font: 900 clamp(40px, 7vw, 96px)/0.9 var(--display); font-stretch: 66%; text-transform: uppercase; margin: 0 0 32px; overflow-wrap: anywhere; hyphens: auto; }
.legal h2 { font: 800 24px/1.1 var(--display); font-stretch: 80%; text-transform: uppercase; margin: 40px 0 12px; }
.legal p, .legal dd { color: var(--muted); }
.legal-facts { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.legal-facts div { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.legal-facts dt { font: 500 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.legal-facts dd { margin: 0; }
.legal-draft { border: 1px solid var(--next); color: var(--next); padding: 14px 16px; font: 400 13px/1.5 var(--mono); }
.not-found { min-height: 100svh; display: grid; align-content: center; padding-top: 64px; }

/* ---------- Apparitions au défilement ---------- */
/* Apparitions sobres (retour de Victor : trop d'animation sur le texte) : un fondu court, sans glissé ni étirement. */
.reveal { opacity: 0; transition: opacity .5s var(--ease); }
.reveal.in { opacity: 1; }
.stretch span { display: block; }
.no-js .reveal { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transition: none; }
  .problem-lines span { color: var(--dark-text); }
  .problem-lines .quote { color: var(--signal-ink); }
}

/* ---------- Réactif ---------- */
@media (max-width: 1100px) {
  .loop { grid-template-columns: minmax(0, 1fr); }
  .loop-words { position: relative; top: 0; }
  .loop-words .display span { color: var(--text); }
  .loop-card { min-height: 0; }
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trade, .trade + .trade { padding: 22px 18px 24px 0; border-right: 0; border-bottom: 1px solid rgba(11,12,11,.16); }
  .app-grid, .app-lower { grid-template-columns: minmax(0, 1fr); }
  .app-map { border-right: 0; border-bottom: 1px solid var(--line); min-height: 360px; }
  .app-events { border-right: 0; border-bottom: 1px solid var(--line); }
  .who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-steps li { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .case-steps li p { grid-column: 2 / -1; }
}
@media (max-width: 860px) {
  .main-nav { display: none; }
  .rec { display: none; }
  .lang { margin-left: auto; }
  .menu-toggle { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); background: transparent; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
  .site-header.open { height: auto; }
  .site-header.open .header-inner { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px; }
  .site-header.open .main-nav { display: flex; flex-direction: column; width: 100%; order: 5; gap: 0; }
  .site-header.open .main-nav a { padding: 14px 0; border-top: 1px solid var(--line); font-size: 14px; }
  .header-inner { gap: 12px; }
  .hero-sub, .split, .problem-turn, .thesis-foot, .contact-foot { grid-template-columns: minmax(0, 1fr); }
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principles, .roadmap, .three, .risk, .case-data { grid-template-columns: minmax(0, 1fr); }
  .principles article, .principles article + article { padding: 24px 0; border-right: 0; border-bottom: 1px solid rgba(11,12,11,.16); }
  .roadmap::before { display: none; }
  .roadmap section { padding: 32px 0 0 28px; }
  .roadmap section::before { top: 34px; }
  .risk article, .risk article + article { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); }
  .caps { grid-template-columns: minmax(0, 1fr); }
  .atlas { columns: 1; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery figure, .gallery figure.big { grid-column: auto; grid-row: auto; }
  .facts-row, .app-facts, .live { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts-row div:nth-child(2), .app-facts div:nth-child(2), .live div:nth-child(2) { border-right: 0; }
  .facts-row div:nth-child(-n+2), .app-facts div:nth-child(-n+2), .live div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .next-list { grid-template-columns: minmax(0, 1fr); }
  .ask { grid-template-columns: minmax(0, 1fr); }
  .ask-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .scrubber-inner { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding-top: 10px; padding-bottom: 10px; }
  .scrub-track { grid-column: 1 / -1; order: 3; }
  .scrub-leader { display: none; }
  .hero-caption { flex-direction: column; }
  .hero-copy { padding-top: 46vh; }
  .legal-facts div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .who { grid-template-columns: minmax(0, 1fr); }
  .app-timeline { grid-template-columns: minmax(0, 1fr); }
  .bar { grid-template-columns: 110px minmax(0, 1fr) 56px; }
  .event-list button { grid-template-columns: 64px 10px minmax(0, 1fr); }
  .event-list .by { display: none; }
}
@media (max-width: 420px) {
  .trades { grid-template-columns: minmax(0, 1fr); }
  .proof-grid div { padding: 20px 14px; }
  .btn { width: 100%; justify-content: space-between; }
  .wordmark span { display: none; }
}

/* ---------- Compléments : légende, vignettes, nuancier des métiers ---------- */
.lg-boost { background: #ffd23f; } .lg-hit { background: #ff5c8a; } .lg-throw { background: #c48bff; } .lg-work { background: #b8f03c; } .lg-finish { background: #f4f1ea; }
.sw-herbe { background: #7fbf2a; } .sw-gravillons { background: #8d939a; } .sw-branches { background: #a77b45; } .sw-fosse { background: #2f8fd8; } .sw-trous { background: #1b1e1b; }
.gap-top { margin-top: 72px; }
.viz-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.viz-tag { position: absolute; right: 14px; top: 12px; font-size: 12px; color: var(--signal); background: rgba(11,12,11,.8); padding: 6px 8px; letter-spacing: .06em; }
.viz-capture svg { font-family: var(--mono); }
.viz-capture .chip rect { fill: var(--ink-3); stroke: var(--line-strong); }
.viz-capture .chip text { fill: var(--muted); font-size: 11px; }
.viz-capture .chip { animation: chip 4.8s var(--ease) infinite; }
.viz-capture .chip:nth-child(2n) text { fill: var(--text); }
.viz-capture .flow { stroke: var(--signal); stroke-width: 2; stroke-dasharray: 6 8; animation: flow 1s linear infinite; }
.viz-capture .file rect { fill: var(--signal); }
.viz-capture .file path { fill: none; stroke: var(--ink); stroke-width: 2; }
.viz-capture .file text { fill: var(--ink); font-size: 11px; }
.viz-capture .file .big { font: 900 34px var(--display); font-stretch: 70%; }
@keyframes chip { 0%, 8% { opacity: .25; } 30%, 70% { opacity: 1; } 100% { opacity: .25; } }
@keyframes flow { to { stroke-dashoffset: -14; } }
@media (prefers-reduced-motion: reduce) { .viz-capture .chip, .viz-capture .flow { animation: none; } }
.case-map-wrap { position: relative; min-height: 320px; padding: 0 !important; }
.case-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.film canvas { position: absolute; inset: 0; }
.ask-a .cite { margin: 0 2px; }
.viz-capture .chip:nth-child(1) { animation-delay: 0.0s; }
.viz-capture .chip:nth-child(2) { animation-delay: 0.32s; }
.viz-capture .chip:nth-child(3) { animation-delay: 0.64s; }
.viz-capture .chip:nth-child(4) { animation-delay: 0.96s; }
.viz-capture .chip:nth-child(5) { animation-delay: 1.28s; }
.viz-capture .chip:nth-child(6) { animation-delay: 1.6s; }
.viz-capture .chip:nth-child(7) { animation-delay: 1.92s; }
.viz-capture .chip:nth-child(8) { animation-delay: 2.24s; }
.viz-capture .chip:nth-child(9) { animation-delay: 2.56s; }
.viz-capture .chip:nth-child(10) { animation-delay: 2.88s; }
.viz-capture .chip:nth-child(11) { animation-delay: 3.2s; }
.viz-capture .chip:nth-child(12) { animation-delay: 3.52s; }
.lab-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.lab-cards article { background: var(--ink); padding: 24px 20px 28px; display: grid; gap: 12px; align-content: start; }
.lab-cards .n { font: 500 12px/1 var(--mono); color: var(--today); }
.lab-cards h3 { margin: 0; font: 800 24px/1.02 var(--display); font-stretch: 78%; text-transform: uppercase; }
.lab-cards p { margin: 0; color: var(--muted); font-size: 15px; }
.lab-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.lab-next li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
@media (max-width: 1100px) { .lab-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .lab-cards { grid-template-columns: minmax(0, 1fr); } .lab-next li { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

.ask-cites { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-meta { font: 400 11px/1.4 var(--mono); color: var(--muted); margin: 0; }
.trailer { margin-top: clamp(40px, 6vw, 80px); }

/* Vitesse de lecture du rejeu d'accueil. */
.scrub-speed { display: inline-flex; border: 1px solid var(--line-strong); }
.scrub-speed button { background: transparent; border: 0; padding: 0 9px; height: 30px; font: 600 11px/1 var(--mono); color: var(--muted); cursor: pointer; }
.scrub-speed button[aria-pressed='true'] { background: var(--text); color: var(--ink); }
.scrub-leader { display: grid; justify-items: end; gap: 6px; }

/* Accueil : les deux projets côte à côte, chacun avec son film. */
.project-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.project-card { display: grid; gap: 24px; align-content: start; }
.project-copy { display: grid; gap: 14px; justify-items: start; }
.project-tag { margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.project-name { margin: 0; font: 900 clamp(44px, 5vw, 88px)/0.86 var(--display); font-stretch: 66%; }
.project-lab .project-name { color: var(--signal); }
.project-game .project-name { color: var(--verge); }
.project-title { margin: 0; font: 800 clamp(22px, 2vw, 30px)/1.1 var(--display); font-stretch: 80%; text-transform: uppercase; }
.project-copy .body-l { margin: 0 0 8px; }
@media (max-width: 860px) { .project-cards { grid-template-columns: minmax(0, 1fr); } }