/*
 * Kailli — feuille unique (public/styles.css, URL stable).
 * Ordre : polices · jetons · socle · utilitaires · sections dans l'ordre du DOM · blocs motion:*.
 * DA : sérigraphie trois encres (marine, magenta, orange) sur crème, Mona Sans VF seule.
 * Règles : magenta et orange jamais en texte courant (contraste < 3:1 sur crème, docs/05).
 * Aucun style inline : la CSP n'autorise que 'self' pour style-src.
 */

/* ── Police ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Mona Sans";
  src: url("/fonts/MonaSansVF.woff2") format("woff2-variations"),
       url("/fonts/MonaSansVF.woff2") format("woff2");
  font-weight: 430 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
/* Repli à métriques ajustées (CLS) : pendant le swap de Mona Sans, le texte système (Arial Regular) prend la même largeur que Mona Sans.
   size-adjust mesuré (largeur Mona / Arial 400) par plage de graisse et de font-stretch, puis ajusté sur le titre du hero (mobile 390 px : 230→276 px sans repli ajusté ; réglé pour que le nombre de lignes soit identique avant/après le swap). */
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica"); font-weight: 200 599; font-stretch: 75% 79%; size-adjust: 67%; }
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica"); font-weight: 200 599; font-stretch: 80% 84%; size-adjust: 74%; }
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica"); font-weight: 200 599; font-stretch: 85% 89%; size-adjust: 81%; }
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica"); font-weight: 200 599; font-stretch: 90% 94%; size-adjust: 87%; }
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica"); font-weight: 200 599; font-stretch: 95% 100%; size-adjust: 95%; }
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica"); font-weight: 600 799; font-stretch: 75% 79%; size-adjust: 72%; }
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica"); font-weight: 600 799; font-stretch: 80% 84%; size-adjust: 79%; }
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica"); font-weight: 600 799; font-stretch: 85% 89%; size-adjust: 85%; }
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica"); font-weight: 600 799; font-stretch: 90% 94%; size-adjust: 91%; }
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica"); font-weight: 600 799; font-stretch: 95% 100%; size-adjust: 98%; }
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica"); font-weight: 800 900; font-stretch: 75% 79%; size-adjust: 78%; }
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica"); font-weight: 800 900; font-stretch: 80% 84%; size-adjust: 78%; }
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica"); font-weight: 800 900; font-stretch: 85% 89%; size-adjust: 89%; }
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica"); font-weight: 800 900; font-stretch: 90% 94%; size-adjust: 99%; }
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica"); font-weight: 800 900; font-stretch: 95% 100%; size-adjust: 101%; }

/* ── Jetons (docs/05_TOKENS_DA.md) ──────────────────────────────────────── */
:root {
  --cream: #F5E9D5;
  --cream-gen: #F3EBDD;
  --navy: #25336F;
  --magenta: #FF4F9E;
  --orange: #F07A3A;
  --faint: #5E648A;
  --rule: #CEC4BA;
  --rule-alt: #CDC2B6;
  --sheet: #FAF3E5;
  /* Orange « encre de texte » : l'orange #F07A3A ne fait que 2,32:1 sur crème (échec WCAG gros texte 3:1).
     Variante plus dense, même teinte, réservée aux mots orange en display : 3,27:1 crème, 3,55:1 feuille. */
  --orange-ink: #DA5711;

  --font: "Mona Sans", "Mona Sans Fallback", system-ui, sans-serif;

  /* Échelle fluide (maquette 1536 px) */
  --fs-display-xl: clamp(48px, 6.8vw, 104px);
  --fs-display: clamp(40px, 5.6vw, 86px);
  --fs-h3: clamp(24px, 2.2vw, 34px);
  --fs-h3-small: clamp(20px, 1.75vw, 27px);
  --fs-quote: clamp(26px, 2.6vw, 40px);
  --fs-lead: clamp(18px, 1.63vw, 25px);
  --fs-body: clamp(16px, 1.3vw, 20px);
  --fs-label: clamp(13px, 1.04vw, 16px);
  --fs-meta: clamp(12px, 1.1vw, 17px);
  --fs-num: clamp(36px, 3.8vw, 58px);
  --fs-small: clamp(13px, 1.04vw, 16px);

  /* Grille et rythme */
  --shell: 1312px;
  --thread-margin: clamp(16px, 4.2vw, 64px);
  --pad: max(calc(var(--thread-margin) + 16px), clamp(24px, 7.8vw, 120px));
  --gap-head: clamp(18px, 2vw, 30px);
  --gap-art: clamp(40px, 4.6vw, 70px);
  --bay: clamp(64px, 7.3vw, 112px);
  --col-gap: clamp(24px, 2.6vw, 40px);
  --art-max: 1600px;

  /* Repasse images : ratio de l'illustration BeforeAfter défini une seule fois (motion.css y renvoie),
     hauteur max de la scène seule (901–1199 px), plafond du hero débordant. */
  --ba-ratio: calc(1536 / 1752);
  --ba-max-h: min(640px, 78svh);
  --hero-scene-max: 1000px;

  /* Fil (préparation ; non utilisé tant que motion:thread est vide) */
  --thread-color: var(--orange);
  --thread-echo: var(--magenta);
  --thread-width: clamp(4px, 0.59vw, 9px);
  --thread-echo-offset-x: 3px;
  --thread-echo-offset-y: 2px;

  /* « only » : interdit au navigateur d'assombrir le site (mode sombre forcé Chrome/Android, Samsung Internet). */
  color-scheme: only light;
}

/* ── Socle ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--cream);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 430;
  font-stretch: 100%;
  font-optical-sizing: auto;
  line-height: 1.45;
  overflow-x: clip;
}
/* Grain papier : une seule couche fixe, texture statique, faible opacité. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background-image: url("/textures/grain.png");
  background-size: 200px 200px;
  opacity: 0.16;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--orange); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
/* Anneau double pour rester visible sur fond orange / marine (crème autour du marine). */
.button:focus-visible, .topbar-cta:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; box-shadow: 0 0 0 3px var(--cream); }
h1, h2, h3 { overflow-wrap: break-word; }
p, li, dd, summary { text-wrap: pretty; }
::selection { background: var(--magenta); color: var(--navy); }
button { font: inherit; color: inherit; }

/* ── Utilitaires typographiques ─────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: calc(var(--shell) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}
.display-xl, .display {
  font-weight: 900;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.display-xl { font-size: var(--fs-display-xl); font-stretch: 90%; line-height: 0.96; }
.display { font-size: var(--fs-display); font-stretch: 92%; line-height: 0.98; }
.h3 { font-size: var(--fs-h3); font-weight: 820; font-stretch: 96%; line-height: 1.1; }
.h3-small { font-size: var(--fs-h3-small); font-weight: 800; font-stretch: 96%; line-height: 1.14; }
.quote { font-size: var(--fs-quote); font-weight: 880; font-stretch: 92%; line-height: 1.12; text-wrap: balance; }
.lead { font-size: var(--fs-lead); font-weight: 430; line-height: 1.42; max-width: 40em; }
.label {
  font-size: var(--fs-label);
  font-weight: 800;
  font-stretch: 86%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
}
/* Les labels « sérigraphiés » portent un repère magenta à côté, pas un texte magenta. */
.label::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.45em;
  background: var(--magenta);
  vertical-align: 0.02em;
}
.meta { font-size: var(--fs-meta); font-weight: 600; font-stretch: 90%; letter-spacing: 0.05em; color: var(--faint); }
.small { font-size: var(--fs-small); font-weight: 450; color: var(--faint); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Emphases (docs/05) : bande magenta derrière texte marine (display), mots orange (display seulement). */
.em { font-style: normal; }
.em--band-magenta {
  /* Bande limitée au cœur des lettres pour ne pas mordre sur la ligne du dessus (interlignage 0,96). */
  background: linear-gradient(to bottom, transparent 20%, var(--magenta) 20%, var(--magenta) 92%, transparent 92%);
  color: var(--navy);
  padding: 0 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.em--ink-orange { color: var(--orange-ink); }

/* Boutons : fond orange, texte marine gras ≥ 18,66 px (navy/orange 4,24:1, gros texte). */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.6em 1.1em;
  border: 0;
  border-radius: 0;
  font-size: max(19px, var(--fs-body));
  font-weight: 760;
  font-stretch: 96%;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
}
.button.primary { background: var(--orange); color: var(--navy); box-shadow: 4px 4px 0 var(--magenta); }
.button.primary:hover { box-shadow: 2px 2px 0 var(--magenta); transform: translate(2px, 2px); }

.dash-list li { position: relative; padding-left: 1.4em; }
.dash-list li + li { margin-top: 0.3em; }
.dash-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.85em;
  height: 2px;
  background: var(--orange);
}

/* Méta de section : filet de 54 px puis numéro, en pied à droite. */
.section-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6em;
  margin-top: var(--gap-art);
  font-size: var(--fs-meta);
  font-weight: 600;
  font-stretch: 90%;
  letter-spacing: 0.05em;
  color: var(--faint);
}
.section-meta::before { content: ""; width: 54px; height: 2px; background: var(--faint); }

/* ── Couche du fil (structure seulement) ────────────────────────────────── */
.page { position: relative; display: block; }
.thread-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.thread-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.page > :not(.thread-layer) { position: relative; z-index: 1; }

/* ── Scènes : emplacements des illustrations (placeholders crème) ───────── */
.scene {
  position: relative;
  width: 100%;
  max-width: var(--art-max);
  margin: var(--gap-art) auto 0;
  aspect-ratio: 16 / 9;
  background: var(--cream);
  overflow: hidden;
}
.scene-placeholder {
  position: absolute;
  inset: clamp(8px, 1.2vw, 18px);
  border: 2px dashed var(--rule);
  background: var(--sheet);
  opacity: 0.55;
}
.scene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene .scene-base { z-index: 0; }
.scene .scene-thread { z-index: 1; }
.scene .scene-front { z-index: 2; pointer-events: none; }
/* ── Topbar ─────────────────────────────────────────────────────────────── */
.topbar { position: relative; z-index: 2; border-bottom: 2px solid var(--navy); background: var(--cream); }
.topbar-inner { display: flex; align-items: center; gap: var(--col-gap); min-height: 72px; }
.wordmark, .footer-wordmark {
  font-size: clamp(26px, 2.3vw, 36px);
  font-weight: 900;
  font-stretch: 88%;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.wordmark:hover, .footer-wordmark:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; }
/* Wordmark Kailli : le « I » majuscule est un I à empattements (barres haut et bas), jamais confondu avec un « l »
 * (sinon « kAllli »). Police de 1 glyphe (public/fonts/KailliI-v3.woff2, U+0049) placée en tête de pile du wordmark ;
 * le texte reste « kAIlli » dans le HTML (copy gate, lecteurs d'écran, copier-coller). */
@font-face { font-family: "Kailli I"; src: url("/fonts/KailliI-v3.woff2") format("woff2"); unicode-range: U+0049; font-display: block; }
.wordmark, .footer-wordmark { font-family: "Kailli I", var(--font); }
.topbar-tagline { flex: 1; min-width: 0; font-size: var(--fs-small); font-weight: 600; color: var(--faint); }
.topbar-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: max(15px, var(--fs-small));
  font-weight: 800;
  font-stretch: 96%;
  line-height: 1.15;
  padding: 0.45em 0.95em;
  border: 2px solid var(--navy);
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--orange);
}
/* Survol : marine plein, texte crème (9,82:1) — l'orange sous du texte marine de 15 px ne ferait que 4,24:1. */
.topbar-cta:hover { background: var(--navy); color: var(--cream); }

/* ── Hero + Problem (wrapper commun, panneau P1) ────────────────────────── */
.hero-problem { position: relative; overflow: clip; }
.hero { padding-block: var(--bay) 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--col-gap); align-items: start; }
.hero-title { font-size: var(--fs-display-xl); font-stretch: 90%; line-height: 0.96; }
.hero-lead { margin-top: var(--gap-head); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: var(--gap-head); }
.thread-origin { width: 1px; height: var(--gap-art); }
.hero .scene { margin-top: 0; }

/* Repasse : l'illustration du hero est coupée net à droite et en haut dans le fichier. Sur grand écran elle
   déborde donc de sa colonne jusqu'au bord de la fenêtre (droite) et jusqu'au filet du topbar (haut) ;
   .hero-problem (pleine largeur, overflow: clip) écrête. --hero-bleed-x = marge réelle entre la colonne et le
   bord de la fenêtre (pad + marge de la coquille plafonnée), sans 100vw (barre de défilement exclue). */
/* Phase D : dès 761 px le hero est en mode maquette (bloc mk:generated) ; plus de débordement ad hoc. */

.section { padding-block: var(--bay); }
.section-head { max-width: 1040px; }
.section-head > * + * { margin-top: var(--gap-head); }

.problem-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--col-gap); margin-top: var(--gap-art); align-items: start; }
.problem-body .scene { margin-top: 0; }
.signals { display: grid; gap: clamp(20px, 2vw, 32px); }
.signal { border-top: 2px solid var(--navy); padding-top: 0.6em; }
.signal p { margin-top: 0.35em; }
.problem-verdict { margin-top: var(--gap-art); max-width: 26em; }

/* ── BeforeAfter ────────────────────────────────────────────────────────── */
.change-note { max-width: 40em; }
.change-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--col-gap);
  margin-top: var(--gap-art);
}
.change-col { padding-bottom: 0.8em; border-bottom: 2px solid var(--navy); }
.change-col--after, .change-after { padding-inline: 1em; }
.change-col .label { display: block; }
.change-col-title { display: block; margin-top: 0.3em; font-size: var(--fs-h3-small); font-weight: 800; font-stretch: 96%; }
.change-before, .change-after { padding-block: 1em; border-bottom: 1px solid var(--rule); }
.change-after { background: var(--sheet); }
.change-tag { font-size: var(--fs-label); font-weight: 800; font-stretch: 86%; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); }
.change-time { font-weight: 800; }
.change-statement { margin-top: var(--gap-art); max-width: 36em; }

/* Repasse : le padding-bas de Problem suffit entre les deux sections (plus de double --bay). */
.hero-problem + .change { padding-top: 0; }
/* Scène seule (901–999 px) : boîte réduite en largeur, ratio conservé (--ba-w sert de largeur unique). */
@media (min-width: 901px) and (max-width: 999px) {
  .change .scene--beforeafter { --ba-w: min(100%, calc(var(--ba-max-h) * var(--ba-ratio))); width: var(--ba-w); }
}
/* Mode maquette (bloc mk:generated en fin de fichier) : hero >= 761 px, Problem/BeforeAfter >= 1000 px, reste >= 1200 px. */

/* ── Method ─────────────────────────────────────────────────────────────── */
.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); margin-top: var(--gap-art); }
.stage { border-top: 3px solid var(--orange); padding-top: 1em; }
.stage > * + * { margin-top: 0.5em; }
.stage .method-block-label { margin-top: 1.1em; }
.stage-num { color: var(--orange-ink); }
.method-get-lead { font-weight: 700; }
.method-foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--col-gap); margin-top: var(--gap-art); align-items: start; }
.decision-sheet { margin-top: 1rem; padding: clamp(18px, 2.4vw, 36px); background: var(--sheet); border: 2px solid var(--navy); box-shadow: 6px 6px 0 var(--magenta); }
.decision-tag { display: inline-block; padding: 0.2em 0.6em; border: 2px solid var(--magenta); font-size: var(--fs-small); font-weight: 700; }
.decision-title { margin-top: 0.8em; }
.decision-list { margin-top: 0.8em; }
.decision-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 1em; padding-block: 0.6em; border-top: 1px solid var(--rule); }
.decision-row dt { font-weight: 800; font-size: var(--fs-small); }
.studio .button { margin-top: 1.2em; }

/* ── Team ───────────────────────────────────────────────────────────────── */
.flag { display: inline-block; padding: 0.35em 0.8em; border: 2px dashed var(--navy); font-size: var(--fs-small); font-weight: 700; margin-bottom: var(--gap-head); }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); margin-top: var(--gap-art); }
.team-portrait { display: block; margin-bottom: 0.6em; }
/* Run 3 : les cadres sont dessinés dans la scène Team ; plus de grand carré vide en doublon. La mention reste visible. */
.team-portrait-placeholder { font-size: var(--fs-small); font-weight: 700; color: var(--faint); }
/* Portraits réels : dans les cadres dessinés de team-nothread (1536 × 716). Intérieurs mesurés :
 * x 419–626 / 795–1003 / 1181–1389, y 202–471. En % : justes à toutes les largeurs (la scène garde son ratio). */
.team-photo { position: absolute; z-index: 0; top: 28.21%; height: 37.57%; width: 13.54%; overflow: hidden; }
.team-photo--remi2 { left: 27.28%; width: 13.48%; }
.team-photo--morgan { left: 51.76%; }
.team-photo--gabriel3 { left: 76.89%; }
.team-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.team-num { display: block; margin-top: 0.4em; font-size: var(--fs-num); font-weight: 900; font-stretch: 85%; line-height: 1; color: var(--orange-ink); }
.team-name { margin-top: 0.2em; }
.team-role { margin-top: 0.3em; }
.team-bio { margin-top: 0.6em; }

/* ── Engineering / Systems (3 colonnes) ─────────────────────────────────── */
.columns-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); margin-top: var(--gap-art); }
.audience, .system { border-top: 2px solid var(--navy); padding-top: 1em; }
.audience > * + *, .system > * + * { margin-top: 0.6em; }
.diagram-plate { text-transform: uppercase; }
.badge { display: inline-block; padding: 0.15em 0.6em; background: var(--navy); color: var(--cream); font-size: var(--fs-label); font-weight: 800; letter-spacing: 0.04em; }
.sys-human { font-weight: 700; }
.system { display: flex; flex-direction: column; }
.sys-badge { align-self: flex-start; justify-self: start; }
/* Schémas à hauteur égale entre les trois colonnes (alignés en pied). */
.sys-diagram { flex: 1 0 auto; padding: 1em; border: 2px solid var(--navy); background: var(--sheet); }
.sys-actor { font-weight: 800; }
.sys-core { margin-top: 0.4em; padding: 0.3em 0.6em; border: 2px solid var(--orange); font-weight: 700; display: inline-block; }
.sys-inputs { margin-top: 0.6em; display: flex; flex-wrap: wrap; gap: 0.4em; }
.sys-inputs li { padding: 0.15em 0.55em; border: 1px solid var(--navy); font-size: var(--fs-small); }
.sys-note { margin-top: var(--gap-head); max-width: 40em; }

/* ── Laboratory ─────────────────────────────────────────────────────────── */
.veille-intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
.veille-gates { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: var(--gap-art); }
.veille .diagram-plate { margin-top: var(--gap-head); }
.veille-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--col-gap); margin-top: 1rem; }
.veille-step { border-top: 3px solid var(--orange); padding-top: 0.8em; }
.veille-step > * + * { margin-top: 0.45em; }
.veille-step-num { font-size: var(--fs-h3); font-weight: 900; font-stretch: 85%; color: var(--navy); }
.veille-out { padding-top: 0.45em; border-top: 1px solid var(--rule); }

/* ── Qualification ──────────────────────────────────────────────────────── */
.qual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); margin-top: var(--gap-art); }
.qual-col { padding: clamp(18px, 2.2vw, 32px); border: 2px solid var(--navy); }
.qual-col--yes { background: var(--sheet); }
.qual-col .dash-list { margin-top: 1em; }
.qual-col--no .dash-list li::before { background: var(--navy); }
.qual-cta { margin-top: var(--gap-art); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--col-gap); align-items: start; }
.faq-item { border-top: 2px solid var(--rule-alt); padding-block: 1em; }
.faq-item:last-child { border-bottom: 2px solid var(--rule-alt); }
.faq-item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-question { font-size: var(--fs-h3-small); }
.faq-item summary::after {
  content: "+";
  flex: none;
  width: 1.1em;
  font-size: var(--fs-h3-small);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: var(--navy);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover .faq-question { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.faq-item summary:focus-visible { outline-offset: 6px; }
.faq-item p { margin-top: 0.6em; max-width: 40em; }

/* ── Closing ────────────────────────────────────────────────────────────── */
.closing { padding-block: var(--bay); border-top: 2px solid var(--navy); }
.closing-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--col-gap); align-items: center; }
.closing-lead { margin-top: var(--gap-head); }
.closing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: var(--gap-head); }
.closing-link { background: none; border: 0; padding: 0; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; cursor: pointer; }
.prototype-note { margin-top: var(--gap-head); padding-left: 0.8em; border-left: 3px solid var(--magenta); }
.closing .scene { margin-top: 0; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer { position: relative; z-index: 2; border-top: 2px solid var(--navy); background: var(--cream); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem var(--col-gap); padding-block: 28px; }
.footer-inner .small { flex: 1; }
.footer-up { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
/* Run 7 (P2-6) : zone de clic >= 44 px sans décaler la mise en page (liens texte posés en mode maquette). */
.closing-link, .footer-up, .faq-item summary { position: relative; }
.closing-link::before, .footer-up::before, .faq-item summary::before { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: max(100%, 44px); transform: translateY(-50%); }
/* Run 7 (P1-1) : le bouton de rendez-vous n'est pas encore branché ; au clic, la note qui le dit prend la main. */
.prototype-note.is-flagged { color: var(--navy); outline: 3px solid var(--magenta); outline-offset: 6px; }
.prototype-note:focus { outline: 3px solid var(--magenta); outline-offset: 6px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .veille-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(28px, 3vw, 40px); }
}
/* Tablette (761–960 px) : trois colonnes trop étroites (≈ 190 px) → une carte par ligne,
   en deux colonnes internes (en-tête | détail). Ordre DOM inchangé. */
@media (min-width: 761px) and (max-width: 960px) {
  .columns-3 { grid-template-columns: minmax(0, 1fr); row-gap: clamp(32px, 4vw, 48px); }
  .audience, .system {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--col-gap);
    align-content: start;
  }
  .audience > *, .system > * { grid-column: 1; }
  .audience > .diagram-plate, .audience > .dash-list, .system > .sys-diagram { grid-column: 2; }
  .audience > .diagram-plate { grid-row: 1; margin-top: 0; }
  .audience > .dash-list { grid-row: 2 / span 4; }
  .system > .sys-diagram { grid-row: 1 / span 5; margin-top: 0; align-self: start; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .topbar-tagline { display: none; }
  .topbar-inner { justify-content: space-between; min-height: 60px; }
  .hero-grid, .problem-body, .method-foot, .closing-grid, .faq-grid,
  .stages, .team-grid, .columns-3, .qual-grid, .veille-intro { grid-template-columns: minmax(0, 1fr); }
  .veille-steps { grid-template-columns: minmax(0, 1fr); }
  /* Avant/Après : en-têtes côte à côte, puis chaque paire Avant → Après sur toute la largeur. */
  .change-before, .change-after { grid-column: 1 / -1; }
  .change-before { border-bottom: 0; padding-bottom: 0.5em; }
  .change-after { margin-bottom: 0.8em; border-left: 3px solid var(--orange); }
  .change-col--after { padding-inline: 0; }
  .footer-inner { padding-block: 20px; }
  .footer-inner .small { flex-basis: 100%; order: 3; }
  .problem-body .scene, .closing .scene { margin-top: var(--gap-art); }
  /* Hero mobile : le bord droit coupé du fichier va jusqu'au bord de l'écran ; le haut, coupé net lui aussi,
     est fondu (statique, calque de base seulement) ; .thread-origin donne déjà l'écart au-dessus. */
  .hero .scene { margin-top: 0; margin-right: calc(-1 * var(--pad)); width: calc(100% + var(--pad)); max-width: none; }
  .hero .scene > .scene-base {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 10%);
  }
  .decision-row { grid-template-columns: minmax(0, 1fr); gap: 0.2em; }
}

/* ── Fidélité maquette (run 2) : décors communs à toutes les largeurs ───────────────────────────
 * Bandes pinceau (SVG statiques /art/ui/, même tracé que compose.py) sous des fins de phrase : découpe
 * calculée dans les composants (aucun texte ajouté). Le fil continu de la maquette (.mk-thread) n'existe
 * qu'en mode maquette (>= 1200 px). */
:root { --magenta-ink: #C8186E; }
.problem-title-b { color: var(--orange-ink); }
.problem-verdict-band, .change-title-band {
  padding: 0 0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: url("/art/ui/band-orange.svg") 0 62% / 100% 74% no-repeat;
}
.change-title-band { background-image: url("/art/ui/band-magenta.svg"); font-style: italic; font-variation-settings: "ital" 1; }
.em--band-magenta { background: url("/art/ui/band-magenta.svg") 0 62% / 100% 78% no-repeat; }
.mk-thread { display: none; }

/* Run 7 (Impeccable, P1-2) : l'orange du fil (#F07A3A, 2,32:1) ne sert plus au texte ; tout texte orange = --orange-ink
 * (#DA5711, 3,27:1 crème, gros texte WCAG 1.4.3). Le fil, les bandes et les tirets gardent l'orange vif. */
/* Coutures : le fond des illustrations (≈ #F3EADB) diffère du crème de page ; l'image est fondue en « darken »
 * sur un fond crème propre à la scène (isolé), donc les bords disparaissent sans toucher aux fichiers. */
.page .scene--art { background: var(--cream); isolation: isolate; }
.page .scene--art > .scene-base { mix-blend-mode: darken; }

/* ── Mode maquette : chaque section = grille empilée (une cellule), éléments posés aux coordonnées de la
 * maquette × --u (bloc mk:generated plus bas). Hero dès 761 px, Problem/BeforeAfter dès 1000 px, reste dès 1200 px. */
@media (min-width: 761px) {
  .page, .topbar, .footer { container-type: inline-size; }
  /* --u sur 100vw (barre de défilement comprise) : hauteur de page indépendante de la présence d'une barre
   * classique (sinon 17 739 px au lieu de 17 911 et pied de page rogné par les captures pleine page). */
  .page, .topbar, .footer { --u: min(1px, 100vw / 1536); --x0: max(0px, (100cqw - 1536px) / 2); }
  .page, .topbar, .footer { overflow-x: clip; }
  .page > section, .hero-problem > section { overflow: visible; }
  .page section > *, .page section .shell > *, .topbar-inner > * { position: relative; z-index: 2; }
  .page section .scene { z-index: 0; }
  .em--band-magenta, .problem-verdict-band, .change-title-band { padding: 0 calc(8 * var(--u)); margin: 0 calc(-8 * var(--u)); }

  /* Hero */
  .hero { padding: 0; }
  .hero .hero-cta::after { content: ""; display: inline-block; margin-left: calc(26 * var(--u)); vertical-align: middle; width: calc(56 * var(--u)); height: calc(20 * var(--u)); background: url("/art/ui/arrow-navy.svg") center / contain no-repeat; }
  .hero .hero-cta:hover { transform: none; box-shadow: none; filter: saturate(1.1); }
  /* Hero : « ce qui marche. » insécable sur sa ligne, bande pinceau débordante comme la maquette. */
  .hero .hero-title .em--band-magenta {
    display: inline-block; font-size: 0.895em; padding: calc(12 * var(--u)) calc(128 * var(--u)) calc(25 * var(--u)) calc(42 * var(--u));
    margin: 0 0 0 calc(-31 * var(--u)); background-size: 100% 100%; background-position: 0 0;
  }
}
@media (min-width: 1000px) {
  /* Problem */
  .problem .signal { border: 0; padding: 0; }
  .problem .signal h3 { font-size: calc(38.4 * var(--u)); font-weight: 840; font-stretch: 80%; line-height: 1.3; }
  .problem .signal p { margin-top: calc(8 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 450; font-stretch: 84%; line-height: 1.1; max-width: none; }
  .problem .problem-title-b { display: block; }
  .problem .problem-verdict { font-style: italic; }

  /* BeforeAfter */
  .change-col { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0; border: 0;
    font-size: calc(30 * var(--u)); font-weight: 820; font-stretch: 84%; line-height: 1.1; }
  .change-col .label { font-size: calc(32 * var(--u)); letter-spacing: 0; color: inherit; }
  .change-col .label::before { display: none; }
  .change-col-title { margin-top: calc(4 * var(--u)); font-size: inherit; font-weight: inherit; font-stretch: inherit; }
  .change-col--before { color: var(--cream); background: url("/art/ui/pill-navy.svg") center / 100% 100% no-repeat; }
  .change-col--after { color: var(--orange-ink); background: url("/art/ui/stripes-orange.svg") center / 100% 100% no-repeat; padding-inline: 0; }
  .change-col--after > span { background: var(--cream); padding: 0 calc(12 * var(--u)); }
  .change-before, .change-after { padding: 0; border: 0; background: none; font-size: calc(28.3 * var(--u)); font-weight: 600; font-stretch: 80%; line-height: 1.17; }
  .change-tag { display: block; margin-bottom: calc(6 * var(--u)); font-size: calc(29.5 * var(--u)); font-weight: 840; font-stretch: 80%; color: var(--navy); letter-spacing: 0; line-height: 1.1; }
  .change-time { float: left; margin: calc(-6 * var(--u)) calc(14 * var(--u)) 0 0; font-size: calc(66 * var(--u)); font-weight: 900; font-stretch: 78%; line-height: 1; color: var(--orange-ink); }
  .change-after { display: grid; grid-template-columns: calc(127 * var(--u)) 1fr; }
  .change-after .change-tag { grid-column: 1 / -1; }
  .change-after .change-time { float: none; margin: calc(-8 * var(--u)) 0 0; font-size: calc(80 * var(--u)); }
  .change-after .change-text { padding-top: calc(5 * var(--u)); }
  .change-after::before {
    content: ""; position: absolute; left: calc(-118 * var(--u)); top: calc(36 * var(--u)); width: calc(38 * var(--u)); height: calc(38 * var(--u));
    border-radius: 50%; background: radial-gradient(circle at 38% 36%, #FF9A5C 0 22%, #F26A2E 50%, #E0457A 100%); box-shadow: 0 0 0 calc(2 * var(--u)) var(--cream);
  }
  .change-after::after {
    content: ""; position: absolute; left: calc(-80 * var(--u)); top: calc(54 * var(--u)); width: calc(56 * var(--u)); height: calc(2 * var(--u));
    background: repeating-linear-gradient(90deg, var(--orange) 0 calc(6 * var(--u)), transparent 0 calc(11 * var(--u)));
  }
  .change-statement { font-style: italic; }
  .change .change-col .label { text-transform: uppercase; }
  .change .change-text { font-size: calc(26.9 * var(--u)); line-height: 1.23; }
  .change .change-text .mk-l, .change .change-note .mk-l { display: block; white-space: nowrap; }
  .change .change-before .change-time { margin-right: calc(9 * var(--u)); }
  .problem .problem-title-b { white-space: nowrap; color: var(--orange-ink); }
  .problem .problem-verdict-end { display: block; white-space: nowrap; }
  .problem .problem-verdict-band { padding: calc(4 * var(--u)) calc(14 * var(--u)) calc(6 * var(--u)) calc(16 * var(--u)); margin: 0 0 0 calc(-2 * var(--u)); }
}
@media (min-width: 1200px) {
  .thread-links { display: none; }
  .mk-thread {
    display: block; grid-area: 1 / 1; align-self: stretch; z-index: 1 !important;
    position: relative; margin-left: var(--x0); width: calc(1536 * var(--u)); height: 100%;
    pointer-events: none; overflow: visible;
  }
  .mk-thread path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .mk-thread-body { stroke: var(--orange); stroke-width: calc(9 * var(--u)); }
  .mk-thread-echo { stroke: var(--magenta); stroke-width: calc(2 * var(--u)); }

  /* Topbar */
  .topbar .wordmark::after {
    content: ""; position: absolute; width: 0.3em; height: 0.3em; margin-left: 0.02em; top: 0.02em;
    background: url("/art/ui/star-orange.svg") center / contain no-repeat;
  }
  .topbar .topbar-cta:hover { background: var(--navy); color: var(--cream); text-decoration: underline; text-decoration-color: var(--orange); }

  /* Phases B/C : labels de la maquette = texte magenta (encre dense 4,6:1), sans carré ni capitales. */
  .page .label::before { display: none; }
  .page .label, .page .diagram-plate { text-transform: none; }
  .team .team-portrait-placeholder { text-align: center; }
  .page .section-meta { margin-top: 0; }
  .page .section-meta::before { flex: none; }
  .veille .veille-steps, .veille .veille-gates { margin: 0; }
  .veille .veille-step > * + * { margin-top: 0; }
  .systems .sys-badge { color: var(--magenta-ink); }
  .closing .closing-copy { max-width: none; }
  .veille .veille-step-num { color: var(--orange-ink); }
  .team [data-b="1"] .em--ink-orange { display: block; }
}

/* >>> mk:generated (.work/mk/gen_mk.py — ne pas éditer à la main) */
@media (min-width: 1200px) {
  .topbar { display: grid; grid-template-columns: 100%; grid-template-rows: auto; align-items: start; padding: 0; margin: 0; min-height: calc(104 * var(--u)); border: 0; position: relative; }
  .topbar .topbar-inner { display: contents; }
  .topbar { border-bottom: 0; }
  .topbar::after { content: ""; grid-area: 1 / 1; align-self: end; margin-left: calc(var(--x0) + 17 * var(--u)); width: calc(1503 * var(--u)); height: calc(3 * var(--u)); background: var(--navy); }
  .topbar .wordmark { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(14 * var(--u)); margin-left: calc(var(--x0) + 34 * var(--u)); font-size: calc(70 * var(--u)); font-weight: 900; font-stretch: 88%; line-height: 1.0; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 58.3; letter-spacing: 0; letter-spacing: calc(-1.2 * var(--u)); }
  .topbar .topbar-tagline { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(41 * var(--u)); margin-left: calc(var(--x0) + 476 * var(--u)); width: calc(560 * var(--u)); font-size: calc(21.7 * var(--u)); font-weight: 650; font-stretch: 96%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 18.1; letter-spacing: 0; color: var(--navy); }
  .topbar .topbar-cta { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(17 * var(--u)); margin-left: calc(var(--x0) + 1209 * var(--u)); width: calc(280 * var(--u)); height: calc(71 * var(--u)); justify-content: center; background: var(--navy); color: var(--cream); font-size: calc(30.5 * var(--u)); font-weight: 800; font-stretch: 90%; border: 0; box-shadow: none; padding: 0; min-height: 0; }
  .method { display: grid; grid-template-columns: 100%; grid-template-rows: auto; align-items: start; padding: 0; margin: 0; min-height: calc(2596 * var(--u)); border: 0; position: relative; }
  .method .shell, .method .section-head, .method .stages, .method .stage, .method .method-foot, .method .decision, .method .studio { display: contents; }
  .method .scene { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(583 * var(--u)); margin-left: calc(var(--x0) + 0 * var(--u)); width: calc(1536 * var(--u)); max-width: none; z-index: 0; height: calc(751 * var(--u)); aspect-ratio: auto; }
  .method [data-b="0"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(178.49 * var(--u)); margin-left: calc(var(--x0) + 120 * var(--u)); width: calc(1182.75 * var(--u)); font-size: calc(86 * var(--u)); font-weight: 900; font-stretch: 92%; line-height: 0.98; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 71.7; letter-spacing: 0; }
  .method [data-b="1"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(357.88 * var(--u)); margin-left: calc(var(--x0) + 120 * var(--u)); width: calc(885.5 * var(--u)); font-size: calc(25 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.42; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 20.8; letter-spacing: 0; }
  .method [data-b="2"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1419.27 * var(--u)); margin-left: calc(var(--x0) + 430 * var(--u)); width: calc(311.5 * var(--u)); font-size: calc(34 * var(--u)); font-weight: 820; font-stretch: 96%; line-height: 1.1; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 28.3; letter-spacing: 0; }
  .method [data-b="3"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1475.88 * var(--u)); margin-left: calc(var(--x0) + 430 * var(--u)); width: calc(311.5 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); color: var(--magenta-ink); }
  .method [data-b="4"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1496.6 * var(--u)); margin-left: calc(var(--x0) + 430 * var(--u)); width: calc(311.5 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .method [data-b="5"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1573.88 * var(--u)); margin-left: calc(var(--x0) + 430 * var(--u)); width: calc(311.5 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); color: var(--magenta-ink); }
  .method [data-b="6"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1594.6 * var(--u)); margin-left: calc(var(--x0) + 430 * var(--u)); width: calc(311.5 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 700; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .method [data-bl="7"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1658.6 * var(--u)); margin-left: calc(var(--x0) + 430 * var(--u)); width: calc(300 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .method [data-bl="7"] > li { padding-left: calc(26 * var(--u)); margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; padding-block: 0; border: 0; }
  .method [data-bl="7"] > li + li { margin-top: calc(2 * var(--u)); }
  .method [data-bl="7"] > li::before { top: calc(14.35 * var(--u)); width: calc(14 * var(--u)); height: calc(4 * var(--u)); background: var(--orange); }
  .method [data-b="10"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1419.27 * var(--u)); margin-left: calc(var(--x0) + 770 * var(--u)); width: calc(311.5 * var(--u)); font-size: calc(34 * var(--u)); font-weight: 820; font-stretch: 96%; line-height: 1.1; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 28.3; letter-spacing: 0; }
  .method [data-b="11"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1475.88 * var(--u)); margin-left: calc(var(--x0) + 770 * var(--u)); width: calc(311.5 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); color: var(--magenta-ink); }
  .method [data-b="12"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1496.6 * var(--u)); margin-left: calc(var(--x0) + 770 * var(--u)); width: calc(311.5 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .method [data-b="13"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1602.88 * var(--u)); margin-left: calc(var(--x0) + 770 * var(--u)); width: calc(311.5 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); color: var(--magenta-ink); }
  .method [data-b="14"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1623.6 * var(--u)); margin-left: calc(var(--x0) + 770 * var(--u)); width: calc(311.5 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 700; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .method [data-bl="15"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1687.6 * var(--u)); margin-left: calc(var(--x0) + 770 * var(--u)); width: calc(300 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .method [data-bl="15"] > li { padding-left: calc(26 * var(--u)); margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; padding-block: 0; border: 0; }
  .method [data-bl="15"] > li + li { margin-top: calc(2 * var(--u)); }
  .method [data-bl="15"] > li::before { top: calc(14.35 * var(--u)); width: calc(14 * var(--u)); height: calc(4 * var(--u)); background: var(--orange); }
  .method [data-b="18"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1419.27 * var(--u)); margin-left: calc(var(--x0) + 1110 * var(--u)); width: calc(317.65 * var(--u)); font-size: calc(34 * var(--u)); font-weight: 820; font-stretch: 96%; line-height: 1.1; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 28.3; letter-spacing: 0; }
  .method [data-b="19"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1475.88 * var(--u)); margin-left: calc(var(--x0) + 1110 * var(--u)); width: calc(317.65 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); color: var(--magenta-ink); }
  .method [data-b="20"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1496.6 * var(--u)); margin-left: calc(var(--x0) + 1110 * var(--u)); width: calc(317.65 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .method [data-b="21"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1573.88 * var(--u)); margin-left: calc(var(--x0) + 1110 * var(--u)); width: calc(317.65 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); color: var(--magenta-ink); }
  .method [data-b="22"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1594.6 * var(--u)); margin-left: calc(var(--x0) + 1110 * var(--u)); width: calc(317.65 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 700; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .method [data-bl="23"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1658.6 * var(--u)); margin-left: calc(var(--x0) + 1110 * var(--u)); width: calc(306 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .method [data-bl="23"] > li { padding-left: calc(26 * var(--u)); margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; padding-block: 0; border: 0; }
  .method [data-bl="23"] > li + li { margin-top: calc(2 * var(--u)); }
  .method [data-bl="23"] > li::before { top: calc(14.35 * var(--u)); width: calc(14 * var(--u)); height: calc(4 * var(--u)); background: var(--orange); }
  .method [data-b="26"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1898.88 * var(--u)); margin-left: calc(var(--x0) + 120 * var(--u)); width: calc(619 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); color: var(--magenta-ink); }
  .method [data-b="39"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(2183.8 * var(--u)); margin-left: calc(var(--x0) + 1010 * var(--u)); height: calc(59.4 * var(--u)); padding: 0 calc(54 * var(--u)) 0 calc(20 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 800; font-stretch: 96%; line-height: 1; min-height: 0; box-shadow: none; display: inline-flex; align-items: center; color: var(--navy); border: 0; white-space: nowrap; text-decoration: none; background: url("/art/ui/band-orange.svg") center / 100% 100% no-repeat; }
  .method [data-b="39"]::after { content: ""; position: absolute; right: calc(16 * var(--u)); top: 50%; width: calc(22 * var(--u)); height: calc(16 * var(--u)); transform: translateY(-50%); background: url("/art/ui/arrow-navy.svg") center / contain no-repeat; }
  .method [data-b="39"]:hover { transform: none; box-shadow: none; text-decoration: underline; }
  .method .section-meta { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(2534.93 * var(--u)); margin-left: calc(var(--x0) + 0 * var(--u)); width: calc(1416 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; font-stretch: 90%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 14.2; letter-spacing: calc(0.8 * var(--u)); color: var(--faint); display: flex; justify-content: flex-end; gap: calc(14 * var(--u)); }
  .method .decision-sheet { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1953 * var(--u)); margin-left: calc(var(--x0) + 160 * var(--u)); width: calc(770 * var(--u)); height: calc(521 * var(--u)); display: grid; grid-template-columns: 100%; padding: 0; box-shadow: none; border: calc(3 * var(--u)) solid var(--navy); background: var(--sheet); transform: rotate(-0.25deg); }
  .method .decision-list, .method .decision-row { display: contents; }
  .method [data-b="27"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(39 * var(--u)); margin-left: calc(36 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 780; font-stretch: 86%; line-height: 1.2; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(1.2 * var(--u)); color: var(--magenta-ink); padding: calc(7.68 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)); border: calc(3 * var(--u)) solid var(--magenta); background: none; display: inline-block; white-space: nowrap; }
  .method [data-b="28"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(97.64 * var(--u)); margin-left: calc(48 * var(--u)); width: calc(694.85 * var(--u)); font-size: calc(27 * var(--u)); font-weight: 800; font-stretch: 96%; line-height: 1.14; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 22.5; letter-spacing: 0; }
  .method [data-b="29"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(142.88 * var(--u)); margin-left: calc(48 * var(--u)); width: calc(198.75 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); }
  .method [data-b="30"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(138.6 * var(--u)); margin-left: calc(260 * var(--u)); width: calc(475.5 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .method [data-b="31"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(211.88 * var(--u)); margin-left: calc(48 * var(--u)); width: calc(198.75 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); }
  .method [data-b="32"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(207.6 * var(--u)); margin-left: calc(260 * var(--u)); width: calc(475.5 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .method [data-b="33"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(309.88 * var(--u)); margin-left: calc(48 * var(--u)); width: calc(198.75 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); }
  .method [data-b="34"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(305.6 * var(--u)); margin-left: calc(260 * var(--u)); width: calc(475.5 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .method [data-b="35"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(378.88 * var(--u)); margin-left: calc(48 * var(--u)); width: calc(198.75 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); }
  .method [data-b="36"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(374.6 * var(--u)); margin-left: calc(260 * var(--u)); width: calc(475.5 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .method [data-b="37"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(447.88 * var(--u)); margin-left: calc(48 * var(--u)); width: calc(198.75 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); }
  .method [data-b="38"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(443.6 * var(--u)); margin-left: calc(260 * var(--u)); width: calc(475.5 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .method .decision-row dd, .method .decision-row dt { border: 0; padding: 0; }
  .method .decision-sheet::before { content: ""; position: absolute; left: calc(70 * var(--u)); top: calc(-18 * var(--u)); width: calc(36 * var(--u)); height: calc(38 * var(--u)); background: var(--magenta); }
  .method .method-stage-head::before { content: ""; position: absolute; left: 0; top: calc(-28 * var(--u)); width: calc(40 * var(--u)); height: calc(4 * var(--u)); background: var(--orange); }
  .method .stage { border: 0; padding: 0; }
  .team { display: grid; grid-template-columns: 100%; grid-template-rows: auto; align-items: start; padding: 0; margin: 0; min-height: calc(1482 * var(--u)); border: 0; position: relative; }
  .team .shell, .team .section-head, .team .team-grid, .team .team-card, .team .team-portrait { display: contents; }
  .team .scene { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(386 * var(--u)); margin-left: calc(var(--x0) + 0 * var(--u)); width: calc(1536 * var(--u)); max-width: none; z-index: 0; height: calc(716 * var(--u)); aspect-ratio: auto; }
  .team [data-b="0"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(32 * var(--u)); margin-left: calc(var(--x0) + 120 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 780; font-stretch: 86%; line-height: 1.2; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 14.2; letter-spacing: calc(1.2 * var(--u)); color: var(--magenta-ink); padding: calc(7.79 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)); border: calc(3 * var(--u)) solid var(--magenta); background: none; display: inline-block; white-space: nowrap; }
  .team [data-b="1"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(118.49 * var(--u)); margin-left: calc(var(--x0) + 120 * var(--u)); width: calc(742 * var(--u)); font-size: calc(86 * var(--u)); font-weight: 900; font-stretch: 92%; line-height: 0.98; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 71.7; letter-spacing: 0; }
  .team [data-b="2"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(105.88 * var(--u)); margin-left: calc(var(--x0) + 900 * var(--u)); width: calc(532.9 * var(--u)); font-size: calc(25 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.42; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 20.8; letter-spacing: 0; }
  .team [data-b="3"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(673.78 * var(--u)); margin-left: calc(var(--x0) + 468.648 * var(--u)); width: calc(115.42 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 650; font-stretch: 90%; line-height: 1.2; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 14.2; letter-spacing: 0; }
  .team [data-b="8"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(673.78 * var(--u)); margin-left: calc(var(--x0) + 846.648 * var(--u)); width: calc(115.42 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 650; font-stretch: 90%; line-height: 1.2; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 14.2; letter-spacing: 0; }
  .team [data-b="13"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(673.78 * var(--u)); margin-left: calc(var(--x0) + 1239.65 * var(--u)); width: calc(115.42 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 650; font-stretch: 90%; line-height: 1.2; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 14.2; letter-spacing: 0; }
  .team [data-b="4"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1163.89 * var(--u)); margin-left: calc(var(--x0) + 372 * var(--u)); width: calc(311.5 * var(--u)); font-size: calc(58 * var(--u)); font-weight: 900; font-stretch: 85%; line-height: 1.0; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 48.3; letter-spacing: 0; color: var(--orange-ink); }
  .team [data-b="5"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1219.27 * var(--u)); margin-left: calc(var(--x0) + 372 * var(--u)); width: calc(332 * var(--u)); font-size: calc(34 * var(--u)); font-weight: 820; font-stretch: 96%; line-height: 1.1; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 28.3; letter-spacing: 0; }
  .team [data-b="6"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1253.88 * var(--u)); margin-left: calc(var(--x0) + 372 * var(--u)); width: calc(332 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); color: var(--magenta-ink); }
  .team [data-b="7"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1282.6 * var(--u)); margin-left: calc(var(--x0) + 372 * var(--u)); width: calc(342.25 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .team [data-b="9"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1163.89 * var(--u)); margin-left: calc(var(--x0) + 750 * var(--u)); width: calc(311.5 * var(--u)); font-size: calc(58 * var(--u)); font-weight: 900; font-stretch: 85%; line-height: 1.0; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 48.3; letter-spacing: 0; color: var(--orange-ink); }
  .team [data-b="10"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1219.27 * var(--u)); margin-left: calc(var(--x0) + 750 * var(--u)); width: calc(332 * var(--u)); font-size: calc(34 * var(--u)); font-weight: 820; font-stretch: 96%; line-height: 1.1; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 28.3; letter-spacing: 0; }
  .team [data-b="11"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1253.88 * var(--u)); margin-left: calc(var(--x0) + 750 * var(--u)); width: calc(332 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); color: var(--magenta-ink); }
  .team [data-b="12"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1282.6 * var(--u)); margin-left: calc(var(--x0) + 750 * var(--u)); width: calc(342.25 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .team [data-b="14"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1163.89 * var(--u)); margin-left: calc(var(--x0) + 1143 * var(--u)); width: calc(311.5 * var(--u)); font-size: calc(58 * var(--u)); font-weight: 900; font-stretch: 85%; line-height: 1.0; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 48.3; letter-spacing: 0; color: var(--orange-ink); }
  .team [data-b="15"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1219.27 * var(--u)); margin-left: calc(var(--x0) + 1143 * var(--u)); width: calc(332 * var(--u)); font-size: calc(34 * var(--u)); font-weight: 820; font-stretch: 96%; line-height: 1.1; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 28.3; letter-spacing: 0; }
  .team [data-b="16"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1253.88 * var(--u)); margin-left: calc(var(--x0) + 1143 * var(--u)); width: calc(332 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); color: var(--magenta-ink); }
  .team [data-b="17"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1282.6 * var(--u)); margin-left: calc(var(--x0) + 1143 * var(--u)); width: calc(342.25 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .team .section-meta { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1420.93 * var(--u)); margin-left: calc(var(--x0) + 0 * var(--u)); width: calc(1416 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; font-stretch: 90%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 14.2; letter-spacing: calc(0.8 * var(--u)); color: var(--faint); display: flex; justify-content: flex-end; gap: calc(14 * var(--u)); }
  .team .team-portrait { border: 0; background: none; aspect-ratio: auto; }
  .audiences { display: grid; grid-template-columns: 100%; grid-template-rows: auto; align-items: start; padding: 0; margin: 0; min-height: calc(1772 * var(--u)); border: 0; position: relative; }
  .audiences .shell, .audiences .section-head, .audiences .columns-3, .audiences .audience { display: contents; }
  .audiences .scene { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(453 * var(--u)); margin-left: calc(var(--x0) + 0 * var(--u)); width: calc(1536 * var(--u)); max-width: none; z-index: 0; height: calc(742 * var(--u)); aspect-ratio: auto; }
  .audiences [data-b="0"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(98.49 * var(--u)); margin-left: calc(var(--x0) + 120 * var(--u)); width: calc(1213.5 * var(--u)); font-size: calc(86 * var(--u)); font-weight: 900; font-stretch: 92%; line-height: 0.98; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 71.7; letter-spacing: 0; }
  .audiences [data-b="1"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(277.88 * var(--u)); margin-left: calc(var(--x0) + 120 * var(--u)); width: calc(926.5 * var(--u)); font-size: calc(25 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.42; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 20.8; letter-spacing: 0; }
  .audiences [data-b="2"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1235.88 * var(--u)); margin-left: calc(var(--x0) + 130 * var(--u)); width: calc(383.25 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); color: var(--magenta-ink); }
  .audiences [data-b="3"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1262.64 * var(--u)); margin-left: calc(var(--x0) + 130 * var(--u)); width: calc(383.25 * var(--u)); font-size: calc(27 * var(--u)); font-weight: 800; font-stretch: 96%; line-height: 1.14; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 22.5; letter-spacing: 0; }
  .audiences [data-b="4"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1360.6 * var(--u)); margin-left: calc(var(--x0) + 130 * var(--u)); width: calc(383.25 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .audiences [data-b="5"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1470.88 * var(--u)); margin-left: calc(var(--x0) + 130 * var(--u)); width: calc(383.25 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); }
  .audiences [data-bl="6"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1495.6 * var(--u)); margin-left: calc(var(--x0) + 130 * var(--u)); width: calc(370 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 700; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .audiences [data-bl="6"] > li { padding-left: calc(26 * var(--u)); margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; padding-block: 0; border: 0; }
  .audiences [data-bl="6"] > li + li { margin-top: 0; }
  .audiences [data-bl="6"] > li::before { top: calc(14.35 * var(--u)); width: calc(14 * var(--u)); height: calc(4 * var(--u)); background: var(--orange); }
  .audiences [data-b="9"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1235.88 * var(--u)); margin-left: calc(var(--x0) + 560 * var(--u)); width: calc(414 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); color: var(--magenta-ink); }
  .audiences [data-b="10"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1262.64 * var(--u)); margin-left: calc(var(--x0) + 560 * var(--u)); width: calc(414 * var(--u)); font-size: calc(27 * var(--u)); font-weight: 800; font-stretch: 96%; line-height: 1.14; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 22.5; letter-spacing: 0; }
  .audiences [data-b="11"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1330.6 * var(--u)); margin-left: calc(var(--x0) + 560 * var(--u)); width: calc(414 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .audiences [data-b="12"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1411.88 * var(--u)); margin-left: calc(var(--x0) + 560 * var(--u)); width: calc(414 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); }
  .audiences [data-bl="13"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1436.6 * var(--u)); margin-left: calc(var(--x0) + 560 * var(--u)); width: calc(400 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 700; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .audiences [data-bl="13"] > li { padding-left: calc(26 * var(--u)); margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; padding-block: 0; border: 0; }
  .audiences [data-bl="13"] > li + li { margin-top: 0; }
  .audiences [data-bl="13"] > li::before { top: calc(14.35 * var(--u)); width: calc(14 * var(--u)); height: calc(4 * var(--u)); background: var(--orange); }
  .audiences [data-b="17"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1235.88 * var(--u)); margin-left: calc(var(--x0) + 1010 * var(--u)); width: calc(393.5 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); color: var(--magenta-ink); }
  .audiences [data-b="18"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1262.64 * var(--u)); margin-left: calc(var(--x0) + 1010 * var(--u)); width: calc(393.5 * var(--u)); font-size: calc(27 * var(--u)); font-weight: 800; font-stretch: 96%; line-height: 1.14; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 22.5; letter-spacing: 0; }
  .audiences [data-b="19"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1360.6 * var(--u)); margin-left: calc(var(--x0) + 1010 * var(--u)); width: calc(393.5 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .audiences [data-b="20"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1441.88 * var(--u)); margin-left: calc(var(--x0) + 1010 * var(--u)); width: calc(393.5 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); }
  .audiences [data-bl="21"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1466.6 * var(--u)); margin-left: calc(var(--x0) + 1010 * var(--u)); width: calc(380 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 700; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .audiences [data-bl="21"] > li { padding-left: calc(26 * var(--u)); margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; padding-block: 0; border: 0; }
  .audiences [data-bl="21"] > li + li { margin-top: 0; }
  .audiences [data-bl="21"] > li::before { top: calc(14.35 * var(--u)); width: calc(14 * var(--u)); height: calc(4 * var(--u)); background: var(--orange); }
  .audiences .section-meta { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1710.93 * var(--u)); margin-left: calc(var(--x0) + 0 * var(--u)); width: calc(1416 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; font-stretch: 90%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 14.2; letter-spacing: calc(0.8 * var(--u)); color: var(--faint); display: flex; justify-content: flex-end; gap: calc(14 * var(--u)); }
  .audiences .audience { border: 0; padding: 0; }
  .veille { display: grid; grid-template-columns: 100%; grid-template-rows: auto; align-items: start; padding: 0; margin: 0; min-height: calc(1462 * var(--u)); border: 0; position: relative; }
  .veille .shell, .veille .section-head, .veille .veille-intro, .veille .veille-gates, .veille .veille-steps { display: contents; }
  .veille .scene { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(298 * var(--u)); margin-left: calc(var(--x0) + 0 * var(--u)); width: calc(1536 * var(--u)); max-width: none; z-index: 0; height: calc(964 * var(--u)); aspect-ratio: auto; }
  .veille [data-b="0"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(93.4 * var(--u)); margin-left: calc(var(--x0) + 120 * var(--u)); width: calc(1336.5 * var(--u)); font-size: calc(104 * var(--u)); font-weight: 900; font-stretch: 90%; line-height: 0.96; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 86.7; letter-spacing: 0; }
  .veille [data-b="1"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(317.6 * var(--u)); margin-left: calc(var(--x0) + 120 * var(--u)); width: calc(578 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .veille [data-b="2"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(447.6 * var(--u)); margin-left: calc(var(--x0) + 120 * var(--u)); width: calc(578 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .veille [data-b="6"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(562.2 * var(--u)); margin-left: calc(var(--x0) + 120 * var(--u)); width: calc(578 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.25; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 12.5; letter-spacing: calc(0.8 * var(--u)); }
  .veille .section-meta { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1332.93 * var(--u)); margin-left: calc(var(--x0) + 0 * var(--u)); width: calc(1416 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; font-stretch: 90%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 14.2; letter-spacing: calc(0.8 * var(--u)); color: var(--faint); display: flex; justify-content: flex-end; gap: calc(14 * var(--u)); }
  .veille .veille-step[data-b="7"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(830 * var(--u)); margin-left: calc(var(--x0) + 81 * var(--u)); width: calc(240 * var(--u)); height: calc(440 * var(--u)); text-align: center; border: 0; padding: 0; display: block; }
  .veille .veille-step[data-b="7"] .veille-out { left: calc(55 * var(--u)); top: calc(301 * var(--u)); transform: rotate(-5deg); }
  .veille .veille-step[data-b="10"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(830 * var(--u)); margin-left: calc(var(--x0) + 320 * var(--u)); width: calc(240 * var(--u)); height: calc(440 * var(--u)); text-align: center; border: 0; padding: 0; display: block; }
  .veille .veille-step[data-b="10"] .veille-out { left: calc(49 * var(--u)); top: calc(315 * var(--u)); transform: rotate(-5deg); }
  .veille .veille-step[data-b="13"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(830 * var(--u)); margin-left: calc(var(--x0) + 548 * var(--u)); width: calc(240 * var(--u)); height: calc(440 * var(--u)); text-align: center; border: 0; padding: 0; display: block; }
  .veille .veille-step[data-b="13"] .veille-out { left: calc(53 * var(--u)); top: calc(314 * var(--u)); transform: rotate(-4deg); }
  .veille .veille-step[data-b="16"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(830 * var(--u)); margin-left: calc(var(--x0) + 775 * var(--u)); width: calc(240 * var(--u)); height: calc(440 * var(--u)); text-align: center; border: 0; padding: 0; display: block; }
  .veille .veille-step[data-b="16"] .veille-out { left: calc(70 * var(--u)); top: calc(315 * var(--u)); transform: rotate(-5deg); }
  .veille .veille-step[data-b="19"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(830 * var(--u)); margin-left: calc(var(--x0) + 1037 * var(--u)); width: calc(240 * var(--u)); height: calc(440 * var(--u)); text-align: center; border: 0; padding: 0; display: block; }
  .veille .veille-step[data-b="19"] .veille-out { left: calc(29 * var(--u)); top: calc(313 * var(--u)); transform: rotate(-4deg); }
  .veille .veille-step-num { font-size: calc(64 * var(--u)); font-weight: 900; font-stretch: 78%; line-height: 1; position: relative; z-index: 1; }
  .veille .veille-step:not(:first-child) .veille-step-num::before { content: ""; position: absolute; left: 50%; top: calc(-34 * var(--u)); width: calc(136 * var(--u)); height: calc(100 * var(--u)); margin-left: calc(-68 * var(--u)); border: calc(2.5 * var(--u)) dashed var(--magenta); border-bottom: 0; border-radius: 50% 50% 0 0 / 70% 70% 0 0; z-index: -1; }
  .veille .veille-step h3 { margin-top: calc(14 * var(--u)); font-size: calc(36 * var(--u)); font-weight: 840; font-stretch: 76%; line-height: 1.1; }
  .veille .veille-out { position: absolute; width: calc(138 * var(--u)); height: calc(84 * var(--u)); margin: 0; padding: 0 calc(4 * var(--u)); display: flex; align-items: center; justify-content: center; border: calc(3 * var(--u)) solid var(--magenta); color: var(--magenta-ink); font-size: calc(23 * var(--u)); font-weight: 760; font-stretch: 80%; line-height: 1.12; background: none; }
  .veille .veille-step::after { display: none; }
  .veille .veille-gates > [data-b="3"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(756 * var(--u)); margin-left: calc(var(--x0) + 860 * var(--u)); width: calc(132 * var(--u)); height: calc(80 * var(--u)); display: flex; align-items: center; justify-content: center; border: calc(3 * var(--u)) solid var(--magenta); border-radius: 50%; transform: rotate(-3deg); }
  .veille .veille-gates > [data-b="4"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(756 * var(--u)); margin-left: calc(var(--x0) + 1004 * var(--u)); width: calc(132 * var(--u)); height: calc(80 * var(--u)); display: flex; align-items: center; justify-content: center; border: calc(3 * var(--u)) solid var(--magenta); border-radius: 50%; transform: rotate(-3deg); }
  .veille .veille-gates > [data-b="5"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(756 * var(--u)); margin-left: calc(var(--x0) + 1154 * var(--u)); width: calc(132 * var(--u)); height: calc(80 * var(--u)); display: flex; align-items: center; justify-content: center; border: calc(3 * var(--u)) solid var(--magenta); border-radius: 50%; transform: rotate(-3deg); }
  .veille .veille-gate-label { font-size: calc(28 * var(--u)); font-weight: 700; font-style: italic; font-variation-settings: "ital" 1; font-stretch: 84%; letter-spacing: 0; text-transform: none; color: var(--magenta-ink); }
  .veille .diagram-plate { color: var(--magenta-ink); }
  .veille .veille-gate-label::before { display: none; }
  .systems { display: grid; grid-template-columns: 100%; grid-template-rows: auto; align-items: start; padding: 0; margin: 0; min-height: calc(1463 * var(--u)); border: 0; position: relative; }
  .systems .shell, .systems .section-head, .systems .columns-3, .systems .system, .systems .sys-diagram { display: contents; }
  .systems .scene { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(310 * var(--u)); margin-left: calc(var(--x0) + 0 * var(--u)); width: calc(1536 * var(--u)); max-width: none; z-index: 0; height: calc(604 * var(--u)); aspect-ratio: auto; }
  .systems [data-b="0"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(78.49 * var(--u)); margin-left: calc(var(--x0) + 120 * var(--u)); width: calc(1234 * var(--u)); font-size: calc(86 * var(--u)); font-weight: 900; font-stretch: 92%; line-height: 0.98; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 71.7; letter-spacing: 0; }
  .systems [data-b="1"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(169.88 * var(--u)); margin-left: calc(var(--x0) + 120 * var(--u)); width: calc(926.5 * var(--u)); font-size: calc(25 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.42; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 20.8; letter-spacing: 0; }
  .systems [data-b="2"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(957.64 * var(--u)); margin-left: calc(var(--x0) + 400 * var(--u)); width: calc(301.25 * var(--u)); font-size: calc(27 * var(--u)); font-weight: 800; font-stretch: 96%; line-height: 1.14; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 22.5; letter-spacing: 0; }
  .systems [data-b="3"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(994 * var(--u)); margin-left: calc(var(--x0) + 400 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 780; font-stretch: 86%; line-height: 1.2; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 12.5; letter-spacing: calc(1.2 * var(--u)); color: var(--magenta-ink); padding: calc(7.57 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)); border: calc(3 * var(--u)) solid var(--magenta); background: none; display: inline-block; white-space: nowrap; }
  .systems [data-b="4"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1049.6 * var(--u)); margin-left: calc(var(--x0) + 414 * var(--u)); width: calc(286.9 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 700; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .systems [data-b="5"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1126.88 * var(--u)); margin-left: calc(var(--x0) + 400 * var(--u)); width: calc(301.25 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); }
  .systems [data-b="6"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1170.88 * var(--u)); margin-left: calc(var(--x0) + 400 * var(--u)); width: calc(301.25 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); color: var(--magenta-ink); }
  .systems [data-bl="7"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1195.6 * var(--u)); margin-left: calc(var(--x0) + 400 * var(--u)); width: calc(290 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .systems [data-bl="7"] > li { padding-left: calc(26 * var(--u)); margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; padding-block: 0; border: 0; }
  .systems [data-bl="7"] > li + li { margin-top: 0; }
  .systems [data-bl="7"] > li::before { top: calc(14.35 * var(--u)); width: calc(14 * var(--u)); height: calc(4 * var(--u)); background: var(--orange); }
  .systems [data-b="11"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(957.64 * var(--u)); margin-left: calc(var(--x0) + 720 * var(--u)); width: calc(301.25 * var(--u)); font-size: calc(27 * var(--u)); font-weight: 800; font-stretch: 96%; line-height: 1.14; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 22.5; letter-spacing: 0; }
  .systems [data-b="12"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(994 * var(--u)); margin-left: calc(var(--x0) + 720 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 780; font-stretch: 86%; line-height: 1.2; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 12.5; letter-spacing: calc(1.2 * var(--u)); color: var(--magenta-ink); padding: calc(7.57 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)); border: calc(3 * var(--u)) solid var(--magenta); background: none; display: inline-block; white-space: nowrap; }
  .systems [data-b="13"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1049.6 * var(--u)); margin-left: calc(var(--x0) + 734 * var(--u)); width: calc(286.9 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 700; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .systems [data-b="14"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1097.88 * var(--u)); margin-left: calc(var(--x0) + 720 * var(--u)); width: calc(301.25 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); }
  .systems [data-b="15"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1141.88 * var(--u)); margin-left: calc(var(--x0) + 720 * var(--u)); width: calc(301.25 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); color: var(--magenta-ink); }
  .systems [data-bl="16"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1166.6 * var(--u)); margin-left: calc(var(--x0) + 720 * var(--u)); width: calc(290 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .systems [data-bl="16"] > li { padding-left: calc(26 * var(--u)); margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; padding-block: 0; border: 0; }
  .systems [data-bl="16"] > li + li { margin-top: 0; }
  .systems [data-bl="16"] > li::before { top: calc(14.35 * var(--u)); width: calc(14 * var(--u)); height: calc(4 * var(--u)); background: var(--orange); }
  .systems [data-b="20"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(957.64 * var(--u)); margin-left: calc(var(--x0) + 1090 * var(--u)); width: calc(311.5 * var(--u)); font-size: calc(27 * var(--u)); font-weight: 800; font-stretch: 96%; line-height: 1.14; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 22.5; letter-spacing: 0; }
  .systems [data-b="21"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(994 * var(--u)); margin-left: calc(var(--x0) + 1090 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 780; font-stretch: 86%; line-height: 1.2; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 12.5; letter-spacing: calc(1.2 * var(--u)); color: var(--magenta-ink); padding: calc(7.57 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)); border: calc(3 * var(--u)) solid var(--magenta); background: none; display: inline-block; white-space: nowrap; }
  .systems [data-b="22"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1049.6 * var(--u)); margin-left: calc(var(--x0) + 1104 * var(--u)); width: calc(297.15 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 700; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .systems [data-b="23"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1126.88 * var(--u)); margin-left: calc(var(--x0) + 1090 * var(--u)); width: calc(311.5 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); }
  .systems [data-b="24"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1170.88 * var(--u)); margin-left: calc(var(--x0) + 1090 * var(--u)); width: calc(311.5 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: calc(0.8 * var(--u)); color: var(--magenta-ink); }
  .systems [data-bl="25"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1195.6 * var(--u)); margin-left: calc(var(--x0) + 1090 * var(--u)); width: calc(300 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .systems [data-bl="25"] > li { padding-left: calc(26 * var(--u)); margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; padding-block: 0; border: 0; }
  .systems [data-bl="25"] > li + li { margin-top: 0; }
  .systems [data-bl="25"] > li::before { top: calc(14.35 * var(--u)); width: calc(14 * var(--u)); height: calc(4 * var(--u)); background: var(--orange); }
  .systems [data-b="29"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1347.68 * var(--u)); margin-left: calc(var(--x0) + 400 * var(--u)); width: calc(926.5 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 450; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: 0; color: var(--faint); }
  .systems .section-meta { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1401.93 * var(--u)); margin-left: calc(var(--x0) + 0 * var(--u)); width: calc(1416 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; font-stretch: 90%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 14.2; letter-spacing: calc(0.8 * var(--u)); color: var(--faint); display: flex; justify-content: flex-end; gap: calc(14 * var(--u)); }
  .systems .system { border: 0; padding: 0; }
  .systems .sys-diagram { border: 0; padding: 0; background: none; }
  .systems .sys-core { border: 0; padding: 0; display: block; }
  .systems .sys-inputs { display: block; }
  .systems .sys-inputs li { border: 0; position: relative; }
  .systems .sys-inputs li::before { content: ""; position: absolute; left: 0; }
  .systems .sys-human::before { content: ""; position: absolute; left: calc(-14 * var(--u)); top: calc(4 * var(--u)); width: calc(4 * var(--u)); height: calc(22 * var(--u)); background: var(--magenta); }
  .qualification { display: grid; grid-template-columns: 100%; grid-template-rows: auto; align-items: start; padding: 0; margin: 0; min-height: calc(1671 * var(--u)); border: 0; position: relative; }
  .qualification .shell, .qualification .section-head, .qualification .qual-grid, .qualification .qual-col, .qualification .qual-cta { display: contents; }
  .qualification .scene { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(298 * var(--u)); margin-left: calc(var(--x0) + 0 * var(--u)); width: calc(1536 * var(--u)); max-width: none; z-index: 0; height: calc(759 * var(--u)); aspect-ratio: auto; }
  .qualification [data-b="0"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(78.49 * var(--u)); margin-left: calc(var(--x0) + 120 * var(--u)); width: calc(1336.5 * var(--u)); font-size: calc(86 * var(--u)); font-weight: 900; font-stretch: 92%; line-height: 0.98; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 71.7; letter-spacing: 0; }
  .qualification [data-b="1"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1102.27 * var(--u)); margin-left: calc(var(--x0) + 260 * var(--u)); width: calc(537 * var(--u)); font-size: calc(34 * var(--u)); font-weight: 820; font-stretch: 96%; line-height: 1.1; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 28.3; letter-spacing: 0; }
  .qualification [data-bl="2"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1149.6 * var(--u)); margin-left: calc(var(--x0) + 260 * var(--u)); width: calc(520 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .qualification [data-bl="2"] > li { padding-left: calc(26 * var(--u)); margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; padding-block: 0; border: 0; }
  .qualification [data-bl="2"] > li + li { margin-top: calc(8 * var(--u)); }
  .qualification [data-bl="2"] > li::before { top: calc(14.35 * var(--u)); width: calc(14 * var(--u)); height: calc(4 * var(--u)); background: var(--orange); }
  .qualification .qual-cta > a { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1500 * var(--u)); margin-left: calc(var(--x0) + 260 * var(--u)); height: calc(59.4 * var(--u)); padding: 0 calc(54 * var(--u)) 0 calc(20 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 800; font-stretch: 96%; line-height: 1; min-height: 0; box-shadow: none; display: inline-flex; align-items: center; color: var(--navy); border: 0; white-space: nowrap; text-decoration: none; background: url("/art/ui/band-orange.svg") center / 100% 100% no-repeat; }
  .qualification .qual-cta > a::after { content: ""; position: absolute; right: calc(16 * var(--u)); top: 50%; width: calc(22 * var(--u)); height: calc(16 * var(--u)); transform: translateY(-50%); background: url("/art/ui/arrow-navy.svg") center / contain no-repeat; }
  .qualification .qual-cta > a:hover { transform: none; box-shadow: none; text-decoration: underline; }
  .qualification [data-b="7"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1102.27 * var(--u)); margin-left: calc(var(--x0) + 860 * var(--u)); width: calc(537 * var(--u)); font-size: calc(34 * var(--u)); font-weight: 820; font-stretch: 96%; line-height: 1.1; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 28.3; letter-spacing: 0; }
  .qualification [data-bl="8"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1149.6 * var(--u)); margin-left: calc(var(--x0) + 860 * var(--u)); width: calc(520 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .qualification [data-bl="8"] > li { padding-left: calc(26 * var(--u)); margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; padding-block: 0; border: 0; }
  .qualification [data-bl="8"] > li + li { margin-top: calc(8 * var(--u)); }
  .qualification [data-bl="8"] > li::before { top: calc(14.35 * var(--u)); width: calc(14 * var(--u)); height: calc(4 * var(--u)); background: var(--navy); }
  .qualification .section-meta { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1609.93 * var(--u)); margin-left: calc(var(--x0) + 0 * var(--u)); width: calc(1416 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; font-stretch: 90%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 14.2; letter-spacing: calc(0.8 * var(--u)); color: var(--faint); display: flex; justify-content: flex-end; gap: calc(14 * var(--u)); }
  .qualification .qual-col { border: 0; padding: 0; background: none; }
  .faq { display: grid; grid-template-columns: 100%; grid-template-rows: auto; align-items: start; padding: 0; margin: 0; min-height: calc(1276 * var(--u)); border: 0; position: relative; }
  .faq .faq-grid, .faq .shell { display: contents; }
  .faq [data-b="0"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(78.49 * var(--u)); margin-left: calc(var(--x0) + 120 * var(--u)); width: calc(434.5 * var(--u)); font-size: calc(86 * var(--u)); font-weight: 900; font-stretch: 92%; line-height: 0.98; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 71.7; letter-spacing: 0; width: calc(470.5 * var(--u)); }
  .faq .section-meta { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1194.93 * var(--u)); margin-left: calc(var(--x0) + 0 * var(--u)); width: calc(1416 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; font-stretch: 90%; line-height: 1.3; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 14.2; letter-spacing: calc(0.8 * var(--u)); color: var(--faint); display: flex; justify-content: flex-end; gap: calc(14 * var(--u)); }
  .faq .section-head { display: contents; }
  .faq .faq-list { display: contents; }
  .faq .faq-item:nth-child(1) { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(52 * var(--u)); margin-left: calc(var(--x0) + 560 * var(--u)); width: calc(856 * var(--u)); }
  .faq .faq-item:nth-child(2) { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(223 * var(--u)); margin-left: calc(var(--x0) + 560 * var(--u)); width: calc(856 * var(--u)); }
  .faq .faq-item:nth-child(3) { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(394 * var(--u)); margin-left: calc(var(--x0) + 560 * var(--u)); width: calc(856 * var(--u)); }
  .faq .faq-item:nth-child(4) { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(565 * var(--u)); margin-left: calc(var(--x0) + 560 * var(--u)); width: calc(856 * var(--u)); }
  .faq .faq-item:nth-child(5) { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(765 * var(--u)); margin-left: calc(var(--x0) + 560 * var(--u)); width: calc(856 * var(--u)); }
  .faq .faq-item:nth-child(6) { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(995 * var(--u)); margin-left: calc(var(--x0) + 560 * var(--u)); width: calc(856 * var(--u)); }
  .faq .faq-item { padding: calc(14.36 * var(--u)) 0 0 calc(36 * var(--u)); border-top: calc(2 * var(--u)) solid var(--rule-alt); border-bottom: 0; position: relative; }
  .faq .faq-item::before { content: ""; position: absolute; left: 0; top: calc(26 * var(--u)); width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: var(--orange); }
  .faq .faq-item summary::after { display: none; }
  .faq .faq-question { font-size: calc(27 * var(--u)); font-weight: 800; font-stretch: 96%; line-height: 1.14; font-variation-settings: "opsz" 22.5; }
  .faq .faq-answer { margin-top: calc(6.75 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.45; width: calc(780 * var(--u)); max-width: none; text-wrap: wrap; font-variation-settings: "opsz" 16.7; }
  .closing { display: grid; grid-template-columns: 100%; grid-template-rows: auto; align-items: start; padding: 0; margin: 0; min-height: calc(1154 * var(--u)); border: 0; position: relative; }
  .closing .closing-grid, .closing .closing-copy, .closing .closing-actions { display: contents; }
  .closing .scene { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(318 * var(--u)); margin-left: calc(var(--x0) + 0 * var(--u)); width: calc(1536 * var(--u)); max-width: none; z-index: 0; height: calc(836 * var(--u)); aspect-ratio: auto; }
  .closing [data-b="0"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(73.4 * var(--u)); margin-left: calc(var(--x0) + 120 * var(--u)); width: calc(1336.5 * var(--u)); font-size: calc(104 * var(--u)); font-weight: 900; font-stretch: 90%; line-height: 0.96; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 86.7; letter-spacing: 0; }
  .closing [data-b="1"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(387.6 * var(--u)); margin-left: calc(var(--x0) + 90 * var(--u)); width: calc(393.5 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 16.7; letter-spacing: 0; }
  .closing [data-b="2"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(561 * var(--u)); margin-left: calc(var(--x0) + 90 * var(--u)); height: calc(59.4 * var(--u)); padding: 0 calc(54 * var(--u)) 0 calc(20 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 800; font-stretch: 96%; line-height: 1; min-height: 0; box-shadow: none; display: inline-flex; align-items: center; color: var(--navy); border: 0; white-space: nowrap; text-decoration: none; background: url("/art/ui/band-orange.svg") center / 100% 100% no-repeat; }
  .closing [data-b="2"]::after { content: ""; position: absolute; right: calc(16 * var(--u)); top: 50%; width: calc(22 * var(--u)); height: calc(16 * var(--u)); transform: translateY(-50%); background: url("/art/ui/arrow-navy.svg") center / contain no-repeat; }
  .closing [data-b="2"]:hover { transform: none; box-shadow: none; text-decoration: underline; }
  .closing [data-b="3"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(634 * var(--u)); margin-left: calc(var(--x0) + 90 * var(--u)); height: calc(54 * var(--u)); padding: 0 calc(54 * var(--u)) 0 calc(20 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 800; font-stretch: 96%; line-height: 1; min-height: 0; box-shadow: none; display: inline-flex; align-items: center; color: var(--navy); border: 0; white-space: nowrap; text-decoration: none; background: url("/art/ui/band-orange.svg") left 20px bottom 8px / calc(100% - 36px) 4px no-repeat; }
  .closing [data-b="3"]::after { content: ""; position: absolute; right: calc(16 * var(--u)); top: 50%; width: calc(22 * var(--u)); height: calc(16 * var(--u)); transform: translateY(-50%); background: url("/art/ui/arrow-navy.svg") center / contain no-repeat; }
  .closing [data-b="3"]:hover { transform: none; box-shadow: none; text-decoration: underline; }
  .closing [data-b="4"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(717.68 * var(--u)); margin-left: calc(var(--x0) + 90 * var(--u)); width: calc(373 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 450; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: 0; color: var(--faint); }
  .closing { border-top: 0; }
  .closing .prototype-note { border-left: 0; padding-left: 0; }
  .closing .closing-link { text-decoration: none; }
  .footer { display: grid; grid-template-columns: 100%; grid-template-rows: auto; align-items: start; padding: 0; margin: 0; min-height: calc(170 * var(--u)); border: 0; position: relative; }
  .footer .footer-inner { display: contents; }
  .footer [data-b="0"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(72.2 * var(--u)); margin-left: calc(var(--x0) + 120 * var(--u)); width: calc(209 * var(--u)); font-size: calc(40 * var(--u)); font-weight: 900; font-stretch: 100%; line-height: 1.0; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 33.3; letter-spacing: 0; }
  .footer [data-b="1"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(77.68 * var(--u)); margin-left: calc(var(--x0) + 420 * var(--u)); width: calc(721.5 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 450; font-stretch: 100%; line-height: 1.45; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 13.3; letter-spacing: 0; color: var(--faint); }
  .footer [data-b="2"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(77.89 * var(--u)); margin-left: calc(var(--x0) + 1280.62 * var(--u)); width: calc(146.86 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 700; font-stretch: 96%; line-height: 1.2; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 15.0; letter-spacing: 0; }
  .footer { border-top: 0; background: transparent; }
  .footer::after { content: ""; grid-area: 1 / 1; align-self: start; margin: calc(30 * var(--u)) 0 0 calc(var(--x0) + 120 * var(--u)); width: calc(1296 * var(--u)); height: calc(2 * var(--u)); background: var(--navy); }
  .footer .footer-up { min-height: 0; text-decoration: none; }
}
@media (min-width: 761px) {
  .hero { display: grid; grid-template-columns: 100%; grid-template-rows: auto; align-items: start; padding: 0; margin: 0; min-height: calc(1100 * var(--u)); border: 0; position: relative; }
  .hero .hero-grid, .hero .hero-copy, .hero .hero-actions { display: contents; }
  .hero .scene { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: 0; margin-left: calc(var(--x0) + 0 * var(--u)); width: calc(1536 * var(--u)); max-width: none; z-index: 0; height: calc(1100 * var(--u)); aspect-ratio: auto; }
  .hero .thread-origin { display: none; }
  .hero .hero-title { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(79 * var(--u)); margin-left: calc(var(--x0) + 44 * var(--u)); width: calc(840 * var(--u)); font-size: calc(141 * var(--u)); font-weight: 900; font-stretch: 75%; line-height: 0.832; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 100.0; letter-spacing: 0; letter-spacing: calc(-0.5 * var(--u)); }
  .hero .hero-lead { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(694 * var(--u)); margin-left: calc(var(--x0) + 60 * var(--u)); width: calc(556 * var(--u)); font-size: calc(32.3 * var(--u)); font-weight: 430; font-stretch: 82%; line-height: 1.22; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 26.9; letter-spacing: 0; }
  .hero .hero-cta { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(891 * var(--u)); margin-left: calc(var(--x0) + 34 * var(--u)); width: calc(469 * var(--u)); height: calc(151 * var(--u)); padding: calc(17 * var(--u)) 0 0 calc(42 * var(--u)); font-size: calc(46.5 * var(--u)); font-weight: 800; font-stretch: 86%; line-height: 1.2; box-shadow: none; background: url("/art/ui/band-orange.svg") center / 100% 100% no-repeat; color: var(--navy); min-height: 0; display: block; }
}
@media (min-width: 1000px) {
  .problem { display: grid; grid-template-columns: 100%; grid-template-rows: auto; align-items: start; padding: 0; margin: 0; min-height: calc(1532 * var(--u)); border: 0; position: relative; }
  .problem .shell, .problem .section-head, .problem .problem-body, .problem .signals { display: contents; }
  .problem .scene { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: 0; margin-left: calc(var(--x0) + 0 * var(--u)); width: calc(1536 * var(--u)); max-width: none; z-index: 0; height: calc(1532 * var(--u)); aspect-ratio: auto; }
  .problem .section-meta { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(23 * var(--u)); margin-left: calc(var(--x0) + 35 * var(--u)); z-index: 2; }
  .problem .problem-title { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(114 * var(--u)); margin-left: calc(var(--x0) + 55 * var(--u)); width: calc(640 * var(--u)); font-size: calc(54 * var(--u)); font-weight: 900; font-stretch: 75%; line-height: 1.2; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 45.0; letter-spacing: 0; }
  .problem .section-lead { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(335 * var(--u)); margin-left: calc(var(--x0) + 60 * var(--u)); width: calc(500 * var(--u)); font-size: calc(27.5 * var(--u)); font-weight: 430; font-stretch: 84%; line-height: 1.18; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 22.9; letter-spacing: 0; }
  .problem .signal[data-b="2"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(188 * var(--u)); margin-left: calc(var(--x0) + 1204 * var(--u)); width: calc(250 * var(--u)); }
  .problem .signal[data-b="4"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(530 * var(--u)); margin-left: calc(var(--x0) + 1074 * var(--u)); width: calc(250 * var(--u)); }
  .problem .signal[data-b="6"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(769 * var(--u)); margin-left: calc(var(--x0) + 960 * var(--u)); width: calc(250 * var(--u)); }
  .problem .signal[data-b="8"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1020 * var(--u)); margin-left: calc(var(--x0) + 1189 * var(--u)); width: calc(250 * var(--u)); }
  .problem .problem-verdict { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1312 * var(--u)); margin-left: calc(var(--x0) + 57 * var(--u)); width: calc(800 * var(--u)); font-size: calc(56.8 * var(--u)); font-weight: 880; font-stretch: 96%; line-height: 1.02; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 47.3, "ital" 1; letter-spacing: 0; }
  .change { display: grid; grid-template-columns: 100%; grid-template-rows: auto; align-items: start; padding: 0; margin: 0; min-height: calc(1902 * var(--u)); border: 0; position: relative; }
  .change .shell, .change .section-head, .change .change-table { display: contents; }
  .change .scene--beforeafter { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(150 * var(--u)); margin-left: calc(var(--x0) + 0 * var(--u)); width: calc(1536 * var(--u)); max-width: none; z-index: 0; height: calc(1752 * var(--u)); aspect-ratio: auto; }
  .change .section-meta { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(169 * var(--u)); margin-left: calc(var(--x0) + 35 * var(--u)); z-index: 2; }
  .change .change-title { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(264 * var(--u)); margin-left: calc(var(--x0) + 126 * var(--u)); width: calc(1100 * var(--u)); font-size: calc(127 * var(--u)); font-weight: 900; font-stretch: 92%; line-height: 1.0; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 100.0; letter-spacing: 0; }
  .change .change-note { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(520 * var(--u)); margin-left: calc(var(--x0) + 130 * var(--u)); width: calc(560 * var(--u)); font-size: calc(31 * var(--u)); font-weight: 500; font-stretch: 91%; line-height: 1.1; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 25.8; letter-spacing: 0; color: var(--navy); }
  .change .change-col--before { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(616 * var(--u)); margin-left: calc(var(--x0) + 306 * var(--u)); width: calc(392 * var(--u)); height: calc(111 * var(--u)); }
  .change .change-col--after { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(620 * var(--u)); margin-left: calc(var(--x0) + 866 * var(--u)); width: calc(441 * var(--u)); height: calc(105 * var(--u)); }
  .change .change-before[data-b="4"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(760 * var(--u)); margin-left: calc(var(--x0) + 474 * var(--u)); width: calc(300 * var(--u)); }
  .change .change-after[data-b="5"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(755 * var(--u)); margin-left: calc(var(--x0) + 867 * var(--u)); width: calc(387 * var(--u)); }
  .change .change-before[data-b="6"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(962 * var(--u)); margin-left: calc(var(--x0) + 474 * var(--u)); width: calc(300 * var(--u)); }
  .change .change-after[data-b="7"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(957 * var(--u)); margin-left: calc(var(--x0) + 867 * var(--u)); width: calc(387 * var(--u)); }
  .change .change-before[data-b="8"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1154 * var(--u)); margin-left: calc(var(--x0) + 474 * var(--u)); width: calc(300 * var(--u)); }
  .change .change-after[data-b="9"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1149 * var(--u)); margin-left: calc(var(--x0) + 867 * var(--u)); width: calc(387 * var(--u)); }
  .change .change-before[data-b="10"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1359 * var(--u)); margin-left: calc(var(--x0) + 474 * var(--u)); width: calc(300 * var(--u)); }
  .change .change-after[data-b="11"] { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1354 * var(--u)); margin-left: calc(var(--x0) + 867 * var(--u)); width: calc(387 * var(--u)); }
  .change .change-statement { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 0; position: relative; z-index: 2; margin-top: calc(1674 * var(--u)); margin-left: calc(var(--x0) + 72 * var(--u)); width: calc(560 * var(--u)); font-size: calc(28.7 * var(--u)); font-weight: 500; font-stretch: 88%; line-height: 1.4; text-wrap: wrap; max-width: none; font-variation-settings: "opsz" 23.9, "ital" 1; letter-spacing: 0; }
}
/* <<< mk:generated */

/* ── Run 4 (fidélité maquette) : surcharges après le bloc généré ───────────────────────────────
 * Bandes pinceau : /art/ui/brush-*.svg (coup de pinceau sec, fibres) et mark-*.svg (marqueur à bords déchirés),
 * générés par .work/mk/gen_brush.py ; grain = filtre SVG statique interne à l'image (rien d'animé). */
.em--band-magenta { background: url("/art/ui/mark-magenta.svg") 0 60% / 100% 80% no-repeat; }
.change-title-band { background: url("/art/ui/brush-magenta.svg") 0 70% / 100% 86% no-repeat; }
.problem-verdict-band { background: url("/art/ui/brush-orange.svg") 0 62% / 100% 92% no-repeat; }
@media (min-width: 761px) {
  /* Hero : encre marine dense du panneau maquette, H1 moins gras/large, 2e phrase plus petite et détachée. */
  .hero .hero-title, .hero .hero-lead, .hero .hero-cta { color: #14245E; }
  .hero .hero-title { font-weight: 800; font-stretch: 80%; line-height: 0.83; margin-top: calc(76 * var(--u)); }
  .hero .hero-title-a, .hero .hero-title-b { display: block; }
  .hero .hero-title-b { font-size: 0.89em; font-stretch: 85%; margin-top: calc(24 * var(--u)); line-height: 0.85; }
  .hero .hero-title .em--band-magenta { font-size: 1em; font-stretch: 80%; background: url("/art/ui/brush-magenta.svg") 0 0 / 100% 100% no-repeat; }
  .hero .hero-cta { background: url("/art/ui/mark-orange.svg") center / 100% 100% no-repeat; }
  .hero .hero-cta::after { margin-left: calc(80 * var(--u)); width: calc(80 * var(--u)); height: calc(26 * var(--u)); background-image: url("/art/ui/arrow-long-navy.svg"); }
}
@media (min-width: 1000px) {
  /* BeforeAfter : titre à la taille maquette (capitale 90 px, interligne 109 px), pastilles pinceau, boules hachurées. */
  .change .change-title { font-size: calc(121.6 * var(--u)); line-height: 0.896; letter-spacing: calc(2.5 * var(--u)); }
  .change .change-col--before { background: none; isolation: isolate; }
  .change .change-col--before::before {
    content: ""; position: absolute; inset: -6% -11%; z-index: -1;
    background: url("/art/ui/pill-navy-brush.svg") center / 100% 100% no-repeat;
  }
  .change .change-col--after { background-image: url("/art/ui/stripes-orange-hand.svg"); }
  .change .change-after::before {
    left: calc(-122 * var(--u)); top: calc(32 * var(--u)); width: calc(46 * var(--u)); height: calc(46 * var(--u));
    background: url("/art/ui/ball-orange.svg") center / contain no-repeat; box-shadow: 0 0 0 calc(5 * var(--u)) var(--cream);
  }
  /* Fil : comme la maquette, il s'interrompt derrière le titre (pas de pont vectoriel sur le 1er trou). */
  .scene--beforeafter .thread-gaps line:first-child { display: none; }
}
@media (min-width: 1000px) {
  .change .change-title-band { padding-right: calc(70 * var(--u)); margin-right: calc(-70 * var(--u)); background-size: 100% 90%; }
}
/* Encre marine dense des panneaux à lettrage généré de la maquette (Problem, BeforeAfter, Laboratory ≈ #0A1E50) ;
 * Method→Footer gardent la marine #25336F (lettrage composé). */
@media (min-width: 1000px) {
  .problem, .change { --navy: #13235C; color: var(--navy); }
}
@media (min-width: 1200px) {
  .veille .veille-steps, .veille .veille-gates { --navy: #13235C; color: var(--navy); }
}
@media (min-width: 1000px) {
  .change .change-statement { width: calc(528 * var(--u)); }
  .change .change-col--after { color: var(--orange-ink); }
}
@media (min-width: 1200px) {
  /* Laboratory : tampons des feuilles = rotations et largeurs de la maquette (mesure du bord haut), double filet ;
   * ovales Éprouvé/Comparé/Optimisé séparés, trait épais doublé, fond crème qui masque l'arc pointillé derrière. */
  .veille .veille-out { outline: calc(1.4 * var(--u)) solid rgba(255, 79, 158, 0.55); outline-offset: calc(-6 * var(--u)); }
  .veille .veille-step[data-b="7"] .veille-out { transform: rotate(-6.8deg); }
  .veille .veille-step[data-b="10"] .veille-out { transform: rotate(-6.5deg); }
  .veille .veille-step[data-b="13"] .veille-out { transform: rotate(-6.2deg); width: calc(158 * var(--u)); margin-left: calc(-10 * var(--u)); }
  .veille .veille-step[data-b="16"] .veille-out { transform: rotate(-6.6deg); }
  .veille .veille-step[data-b="19"] .veille-out { transform: rotate(-7.1deg); font-size: calc(20.5 * var(--u)); font-stretch: 70%; padding: 0 calc(2 * var(--u)); }
  .veille .veille-gates > li { z-index: 3 !important; width: calc(122 * var(--u)) !important; height: calc(72 * var(--u)) !important; background: var(--cream);
    border-width: calc(4 * var(--u)) !important; box-shadow: 0 0 0 calc(2 * var(--u)) var(--cream), 0 0 0 calc(3.5 * var(--u)) rgba(255, 79, 158, 0.7); }
  .veille .veille-gates > [data-b="3"] { transform: rotate(4deg) !important; margin-left: calc(var(--x0) + 866 * var(--u)) !important; }
  .veille .veille-gates > [data-b="4"] { transform: rotate(-2deg) !important; margin-left: calc(var(--x0) + 1009 * var(--u)) !important; }
  .veille .veille-gates > [data-b="5"] { transform: rotate(-5deg) !important; margin-left: calc(var(--x0) + 1152 * var(--u)) !important; }
  .veille .veille-gate-label { font-size: calc(26 * var(--u)); }
}
@media (min-width: 1200px) {
  /* Goutte rose du tube jusqu'au haut du « 02 » (maquette x 439-447, y 11462-11512). */
  .veille .veille-step[data-b="10"] .veille-step-num::after {
    content: ""; position: absolute; left: 50%; top: calc(-31 * var(--u)); width: calc(8 * var(--u)); height: calc(50 * var(--u));
    margin-left: calc(-2 * var(--u)); background: var(--magenta); border-radius: calc(3 * var(--u)); z-index: -1; opacity: 0.9;
  }
}
@media (min-width: 1000px) {
  /* Problem : « Des documents internes » sur une ligne (maquette 1075-1313) ; bande de la phrase finale calée sur la
   * maquette (x 174-769, y 2638-2706) et collée à « c'est ». */
  .problem .signal { translate: 0 calc(7 * var(--u)); }
  .problem .signal p { font-stretch: 80%; letter-spacing: calc(0.2 * var(--u)); }
  .problem .signal[data-b="4"] { width: calc(262 * var(--u)); }
  .problem .problem-verdict-band { margin-left: calc(-18 * var(--u)); background-position: 0 85%; background-size: 100% 96%; }
}
/* ── Run 6 : illustrations complètes, dépassement hors conteneur ─────────────────────────────────
 * Hero : base complète 1536×1024 (.work/regen/r6_hero.py), affichée à la hauteur maquette (1100) donc
 * 1650 × 1100, posée à x +150 : elle dépasse à droite du conteneur 1536 jusqu'au bord de la fenêtre
 * (.page overflow-x: clip ⇒ aucune barre horizontale) ; le papier de l'image est fondu (darken + fondu des bords). */
@media (min-width: 761px) {
  .hero .scene { margin-left: calc(var(--x0) + 150 * var(--u)); width: calc(1650 * var(--u)); height: calc(1100 * var(--u)); }
  .hero .scene > .scene-base {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 96%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 96%, transparent 100%);
  }
}
/* BeforeAfter : toile élargie de 420 px à gauche (1956 × 1752, amas complet de ba1.png, .work/regen/r6_ba.py).
 * Conteneur de page inchangé : la scène sort à gauche du conteneur (x0 − 420), le fil reste au même x page ;
 * bord gauche du papier fondu dans le crème. Flux empilé (< 1000 px) : même dépassement à gauche, même taille
 * d'illustration qu'avant (boîte = partie 1536 d'origine), coupe verticale seulement. */
.change .scene--beforeafter > .scene-base {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%);
  mask-image: linear-gradient(to right, transparent 0, #000 5%);
}
@media (min-width: 1000px) {
  .change .scene--beforeafter { margin-left: calc(var(--x0) - 420 * var(--u)); width: calc(1956 * var(--u)); }
}
/* Mobile / tablette (< 1000 px, flux empilé) : le haut de l'illustration BeforeAfter (≈ 29 % = zone du titre dans la
 * maquette, vide dans le fichier) laissait un trou de 110-400 px. La boîte est recadrée sur la partie dessinée
 * (y 500-1752) ; les calques restent à la taille de l'image, calés en bas (fil et base alignés). */
@media (max-width: 999px) {
  /* Run 6 : boîte = partie 1536 d'origine (y 500-1752) ; la toile élargie (1956) dépasse à gauche, coupe verticale seule. */
  .change .scene--beforeafter { --ba-ratio: calc(1536 / 1252); overflow: visible; overflow-y: clip; }
  .change .scene--beforeafter > .scene-base, .change .scene--beforeafter > .scene-thread {
    inset: auto auto 0 calc(-100% * 420 / 1536); width: calc(100% * 1956 / 1536); height: calc(100% * 1752 / 1252);
  }
}
/* Flux empilé (< 1200 px) : entre deux sections, méta de fin + double --bay = 128-162 px de vide (fil seul)
 * selon la largeur ; ramené sous 120 px (390 → 1199). */
@media (max-width: 1199px) {
  .section { padding-block: calc(var(--bay) * 0.62); }
}

/* ── Run 7 bis, lot D (Impeccable) : rythme, repères, états ─────────────────────────────────────
 * P3-7 : un seul traitement des repères de section à toutes les largeurs (marqueur discret de fin, filet + numéro,
 * aligné à droite). Les pastilles roses « 01 » / « 02 » en tête de Problème et Avant/Après faisaient doublon de
 * sur-titre et concurrençaient les H2. */
@media (min-width: 1000px) {
  .problem .section-meta, .change .section-meta {
    justify-content: flex-start; gap: calc(14 * var(--u)); width: max-content; white-space: nowrap;
    font-size: calc(17 * var(--u)); letter-spacing: calc(0.8 * var(--u));
  }
  /* Placés dans les zones sans encre de la scène (mesure sur capture 1536) : Problème = après le 4e symptôme, à droite ;
   * Avant/Après = sous la phrase de conclusion, à gauche (l'illustration occupe le bas droit). */
  .problem .section-meta { margin-top: calc(1238 * var(--u)); margin-left: calc(var(--x0) + 1189 * var(--u)); }
  .change .section-meta { margin-top: calc(1846 * var(--u)); margin-left: calc(var(--x0) + 72 * var(--u)); }
}
/* FAQ ≥ 1200 : les réponses restent ouvertes par défaut, mais le « − / + » revient : le repli n'est plus invisible. */
@media (min-width: 1200px) {
  .faq .faq-item summary::after { display: block; font-size: calc(27 * var(--u)); color: var(--navy); }
}
/* FAQ ≥ 1200 : les questions suivent le flux (et non plus des positions fixes de la maquette), si bien qu'une
 * réponse repliée libère sa place : la question suivante remonte. Ouvertes, l'écart reste proche de la maquette. */
@media (min-width: 1200px) {
  /* L'espace bas est dans la grille (marge de la liste), pas en padding : le fil (.mk-thread, height 100 % de la
   * zone de grille) doit couvrir toute la hauteur de la section, sinon il se coupe avant la section suivante. */
  .faq { min-height: 0; padding-bottom: 0; }
  .faq .faq-list {
    display: block; grid-area: 1 / 1; align-self: start; justify-self: start; position: relative; z-index: 2;
    margin: calc(52 * var(--u)) 0 calc(96 * var(--u)) calc(var(--x0) + 560 * var(--u)); width: calc(856 * var(--u));
  }
  .faq .faq-list > .faq-item:nth-child(n) { grid-area: auto; margin: 0; width: 100%; box-sizing: border-box; padding-bottom: calc(44 * var(--u)); }
  .faq .faq-list > .faq-item:not([open]) { padding-bottom: calc(14 * var(--u)); }
  .faq .faq-list > .faq-item:last-child { border-bottom: calc(2 * var(--u)) solid var(--rule-alt); }
}
/* Pied de page sans mention : « Retour en haut » reste calé à droite. */
.footer-inner .footer-up { margin-left: auto; }
/* Fenêtres vidéo et rendez-vous ouvertes ensemble : la dernière touchée passe devant (classe posée par script.js). */
.video-window.is-front, .booking-window.is-front { z-index: 62; }
/* États : les liens d'action texte (défiler, préparer l'échange, retour en haut) prennent le même soulignement orange
 * que les autres liens au survol. */
.closing-link:hover, .footer-up:hover { text-decoration: underline; text-decoration-color: var(--orange-ink); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }

/* ── Run 8 : bouton « Voir notre vidéo » + fenêtre vidéo style Windows 98 aux couleurs de la page ─────────
 * Bouton : biseau clair/sombre, ombre dure marine, icône ▶ en escalier de pixels. Fenêtre : position fixed
 * (déplacée sous <body> par script.js), position posée en CSSOM (--vw-x / --vw-y), aucune image, aucun filtre.
 * Animations (reflet, rebond, pulsation, ouverture) : bloc motion:video de motion.css. */
.hero-video {
  --hv-shadow: var(--navy);
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 48px;
  margin: 0;
  padding: 0.4em 1em 0.4em 0.45em;
  overflow: hidden;
  border: 3px solid var(--navy);
  border-radius: 2px;
  background: var(--sheet);
  color: #14245E;
  box-shadow: inset 2px 2px 0 #FFFDF7, inset -3px -3px 0 #D9C6A4, 4px 4px 0 var(--hv-shadow);
  font-size: max(17px, var(--fs-body));
  font-weight: 850;
  font-stretch: 84%;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s steps(2), box-shadow 0.12s steps(2);
}
.hero-video:hover { transform: translate(2px, 2px); box-shadow: inset 2px 2px 0 #FFFDF7, inset -3px -3px 0 #D9C6A4, 2px 2px 0 var(--hv-shadow); text-decoration: none; }
.hero-video:active, .hero-video[aria-expanded="true"] {
  transform: translate(4px, 4px);
  box-shadow: inset 3px 3px 0 #D9C6A4, inset -2px -2px 0 #FFFDF7, 0 0 0 var(--hv-shadow);
}
.hero-video:focus-visible { outline: 3px solid var(--magenta); outline-offset: 4px; }
.hero-video-icon {
  position: relative;
  flex: none;
  width: 1.7em;
  height: 1.7em;
  border: 2px solid var(--navy);
  background: var(--magenta);
  box-shadow: inset 2px 2px 0 #FF8CC0, inset -2px -2px 0 #C8186E;
}
.hero-video-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #14245E;
  /* ▶ en escalier de pixels (grille de 10 %). */
  clip-path: polygon(32% 20%, 42% 20%, 42% 30%, 52% 30%, 52% 40%, 62% 40%, 62% 45%, 72% 45%, 72% 55%, 62% 55%, 62% 60%, 52% 60%, 52% 70%, 42% 70%, 42% 80%, 32% 80%);
}
.hero-video-label { position: relative; }
@media (min-width: 761px) {
  .hero .hero-video {
    grid-area: 1 / 1; align-self: start; justify-self: start;
    margin-top: calc(933 * var(--u)); margin-left: calc(var(--x0) + 552 * var(--u));
    min-height: max(44px, calc(66 * var(--u)));
    font-size: max(15px, calc(25 * var(--u)));
    border-width: max(2px, calc(3 * var(--u)));
  }
}

.video-window {
  --vw-x: 8px;
  --vw-y: 8px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(calc(100vw - 16px), 880px, calc((100dvh - 96px) * 16 / 9 + 26px));
  max-height: calc(100dvh - 16px);
  border: 3px solid var(--navy);
  border-radius: 2px;
  background: var(--cream);
  color: var(--navy);
  box-shadow: inset 2px 2px 0 #FFFDF7, inset -3px -3px 0 #D9C6A4, 8px 8px 0 var(--navy);
  transform: translate3d(var(--vw-x), var(--vw-y), 0);
}
.video-window[hidden] { display: none; }
.video-window:focus { outline: none; }
.video-window:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
.video-window-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 3px 3px 0;
  padding: 4px 4px 4px 12px;
  background: linear-gradient(90deg, var(--magenta), var(--orange));
  color: #14245E;
  cursor: move;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.video-window-bar:focus-visible { outline: 3px solid var(--navy); outline-offset: -6px; }
.video-window-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.55em;
  min-width: 0;
  overflow: hidden;
  font-size: 19px;
  font-weight: 900;
  font-stretch: 80%;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Petite étoile en pixels (touche rétro sobre). */
.video-window-title::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--cream);
  clip-path: polygon(43% 0, 57% 0, 57% 29%, 71% 29%, 71% 43%, 100% 43%, 100% 57%, 71% 57%, 71% 71%, 57% 71%, 57% 100%, 43% 100%, 43% 71%, 29% 71%, 29% 57%, 0 57%, 0 43%, 29% 43%, 29% 29%, 43% 29%);
}
.video-window-close {
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 2px solid var(--navy);
  border-radius: 0;
  background: var(--cream);
  box-shadow: inset 2px 2px 0 #FFFDF7, inset -2px -2px 0 #C9B48F;
  cursor: pointer;
}
/* Zone de clic portée à 44 px sans grossir le bouton. */
.video-window-close::after { content: ""; position: absolute; inset: -5px; }
.video-window-close::before {
  content: "";
  position: absolute;
  inset: 9px;
  background: #14245E;
  /* ✕ en escalier de pixels (grille de 6). */
  clip-path: polygon(0 0, 33.3% 0, 33.3% 16.6%, 66.6% 16.6%, 66.6% 0, 100% 0, 100% 33.3%, 83.3% 33.3%, 83.3% 66.6%, 100% 66.6%, 100% 100%, 66.6% 100%, 66.6% 83.3%, 33.3% 83.3%, 33.3% 100%, 0 100%, 0 66.6%, 16.6% 66.6%, 16.6% 33.3%, 0 33.3%);
}
.video-window-close:hover { background: var(--sheet); }
.video-window-close:active { box-shadow: inset 2px 2px 0 #C9B48F, inset -2px -2px 0 #FFFDF7; }
.video-window-close:active::before { transform: translate(1px, 1px); }
.video-window-close:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: 0 0 0 2px var(--cream), inset 2px 2px 0 #FFFDF7; }
.video-window-body { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 8px; }
.video-window-screen {
  aspect-ratio: 16 / 9;
  border: 2px solid var(--navy);
  background: var(--navy);
  /* Écran « enfoncé » : biseau inversé. */
  box-shadow: -2px -2px 0 #C9B48F, 2px 2px 0 #FFFDF7;
}
.video-window-screen video { display: block; width: 100%; height: 100%; background: var(--navy); object-fit: contain; }
.video-window-fallback { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--navy); }
.video-window-fallback a { font-weight: 800; }
/* Avec JS, le texte de repli n'apparaît que si la lecture échoue. */
.video-window:not([data-state="error"]) .video-window-fallback { display: none; }
@media (max-width: 760px), (pointer: coarse) {
  .video-window-close { width: 44px; height: 44px; }
  .video-window-close::before { inset: 11px; }
  .video-window-title { font-size: 18px; }
}

/* ── Run 9 : écran de fin cliquable + barre « Rejouer la vidéo » ─────────────────────────────────────────
 * L'écran de fin (image = dernière image du film décodée par Chrome) est posé sur la boîte de contenu de l'écran,
 * 100 % × 100 %, object-fit: fill (même ratio 16:9 que la vidéo) : aucun pixel ne bouge à la bascule.
 * Le lien transparent couvre la boîte mesurée du bouton rose (.work/video/FIN-NOTES.md : 341,592 → 938,703 sur 1280×720).
 * La barre d'état (Rejouer) est SOUS l'écran, hors de l'image ; sa hauteur est réservée dans la largeur de la fenêtre
 * (150 px au lieu de 96 px) pour que la fenêtre tienne en hauteur sans jamais redimensionner l'écran à la bascule. */
.video-window { width: min(calc(100vw - 16px), 880px, calc((100dvh - 150px) * 16 / 9 + 26px)); }
/* Ratio 16:9 sur la boîte de CONTENU (et non bordure comprise) : l'écran garde exactement la taille que la vidéo lui
 * donnait (largeur × 9/16), que la vidéo soit affichée ou masquée ; l'image de fin occupe donc la même boîte au pixel près. */
.video-window-screen { position: relative; box-sizing: content-box; }
.video-window-screen video.is-ended-hidden { display: none; }
.video-window-end { position: absolute; inset: 0; }
.video-window-end[hidden] { display: none; }
.video-window-end-img { display: block; width: 100%; height: 100%; object-fit: fill; }
.video-window-cta {
  position: absolute;
  left: 26.6406%;
  top: 82.2222%;
  width: 46.7188%;
  height: 15.5556%;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Anneau orange autour de la pilule (statique sans mouvement ; pulsation sous js-motion, voir motion.css). */
.video-window-cta::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  box-shadow: 0 0 0 3px var(--orange);
  pointer-events: none;
}
/* Zone tactile portée à 44 px de haut, vers le haut seulement (le bas de l'image est proche), transparente. */
.video-window-cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: min(0px, calc(100% - 44px)); }
.video-window-cta-shine { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.video-window-cta:hover::before { inset: -4px; box-shadow: 0 0 0 4px var(--navy); }
.video-window-cta:active { box-shadow: inset 0 4px 0 rgba(20, 36, 94, 0.5), inset 0 -2px 0 rgba(255, 253, 247, 0.35); }
.video-window-cta:active::before { inset: -2px; box-shadow: 0 0 0 3px var(--navy); }
.video-window-cta:focus { outline: none; }
/* Focus clavier : anneau crème collé à la pilule + contour marine net autour (aucun filtre). */
.video-window-cta:focus-visible { outline: 3px solid var(--navy); outline-offset: 6px; }
.video-window-cta:focus-visible::before { inset: -3px; box-shadow: 0 0 0 3px var(--cream); }
/* Barre d'état « Windows 98 » sous l'écran : visible seulement sur l'écran de fin. */
.video-window-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4px;
  border: 2px solid var(--navy);
  background: var(--cream);
  box-shadow: inset 2px 2px 0 #FFFDF7, inset -2px -2px 0 #C9B48F;
}
.video-window-status[hidden] { display: none; }
.video-window-replay {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 34px;
  margin: 0 4px 4px 0;
  padding: 0.25em 0.8em 0.25em 0.35em;
  border: 2px solid var(--navy);
  border-radius: 0;
  background: var(--orange);
  color: #14245E;
  box-shadow: inset 2px 2px 0 #FFB487, inset -2px -2px 0 #B8521F, 3px 3px 0 var(--navy);
  font: inherit;
  font-size: 15px;
  font-weight: 850;
  font-stretch: 84%;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.1s steps(2), box-shadow 0.1s steps(2);
}
/* Zone de clic portée à 44 px de haut sans grossir le bouton. */
.video-window-replay::after { content: ""; position: absolute; left: -4px; right: -4px; top: -5px; bottom: -5px; }
.video-window-replay:hover { transform: translate(1px, 1px); box-shadow: inset 2px 2px 0 #FFB487, inset -2px -2px 0 #B8521F, 2px 2px 0 var(--navy); }
.video-window-replay:active { transform: translate(3px, 3px); box-shadow: inset 2px 2px 0 #B8521F, inset -2px -2px 0 #FFB487, 0 0 0 var(--navy); }
.video-window-replay:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.video-window-replay-icon {
  position: relative;
  flex: none;
  width: 1.45em;
  height: 1.45em;
  border: 2px solid var(--navy);
  background: var(--navy);
}
.video-window-replay-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cream);
  /* ▶ en escalier de pixels (même grille que le bouton « Voir notre vidéo »). */
  clip-path: polygon(32% 20%, 42% 20%, 42% 30%, 52% 30%, 52% 40%, 62% 40%, 62% 45%, 72% 45%, 72% 55%, 62% 55%, 62% 60%, 52% 60%, 52% 70%, 42% 70%, 42% 80%, 32% 80%);
}
@media (max-width: 760px), (pointer: coarse) {
  .video-window-replay { font-size: 14px; }
}

/* ── Run 10 : fenêtre de prise de rendez-vous (« jeu rétro », avatar de la rousse) ───────────────────────────
 * Même châssis que la fenêtre vidéo (classes .video-window-bar / -title / -close réutilisées) : bordure marine,
 * biseau crème, ombre dure sans flou. Position fixed posée en CSSOM (--bw-x / --bw-y), hauteur limitée à la zone
 * visible (--bw-vh, suit le clavier virtuel) avec défilement INTERNE du corps. Aucune image hors avatar, aucun filtre.
 * Animations (ouverture, curseur, ▼, hochement) : bloc motion:booking de motion.css. */
.booking-window {
  --bw-x: 8px;
  --bw-y: 8px;
  --bw-vh: 100dvh;
  --bw-ink: #14245E;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: min(calc(100vw - 16px), 980px);
  max-height: calc(var(--bw-vh) - 16px);
  border: 3px solid var(--navy);
  border-radius: 2px;
  background: var(--cream);
  color: var(--bw-ink);
  box-shadow: inset 2px 2px 0 #FFFDF7, inset -3px -3px 0 #D9C6A4, 8px 8px 0 var(--navy);
  transform: translate3d(var(--bw-x), var(--bw-y), 0);
  font-size: 17px;
  line-height: 1.35;
}
.booking-window[hidden] { display: none; }
.booking-window:focus { outline: none; }
.booking-window[data-step="2"] { width: min(calc(100vw - 16px), 1040px); }
.booking-window[data-step="3"] { width: min(calc(100vw - 16px), 820px); }
.booking-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 22px 28px;
  align-items: start;
  min-height: 0;
  margin: 3px;
  padding: 22px 24px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 3px solid var(--navy);
  /* Trame rose discrète (points), comme les maquettes ; dégradé CSS, aucune image. */
  background:
    radial-gradient(circle, rgba(255, 79, 158, 0.22) 1.1px, transparent 1.6px) 0 0 / 9px 9px,
    var(--cream);
}
.booking-window[data-step="2"] .booking-body, .booking-window[data-step="3"] .booking-body { grid-template-columns: minmax(0, 1fr); }
.booking-step[hidden] { display: none; }
.booking-step:focus { outline: none; }

/* Guide : avatar rond + bulle. Étape 1 : colonne (bulle sous l'avatar) ; étapes 2 et 3 : ligne (bulle à droite). */
.booking-guide { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.booking-window[data-step="2"] .booking-guide, .booking-window[data-step="3"] .booking-guide { flex-direction: row; align-items: center; gap: 26px; }
.booking-avatar {
  flex: none;
  width: 180px;
  height: 180px;
  overflow: hidden;
  border: 5px solid var(--navy);
  border-radius: 50%;
  background: var(--sheet);
  box-shadow: 6px 6px 0 var(--navy);
}
.booking-window[data-step="2"] .booking-avatar, .booking-window[data-step="3"] .booking-avatar { width: 140px; height: 140px; }
.booking-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.booking-bubble {
  position: relative;
  align-self: stretch;
  padding: 16px 20px 26px;
  border: 3px solid var(--navy);
  background: #FFFDF7;
  box-shadow: 5px 5px 0 var(--navy);
  color: var(--bw-ink);
  font-size: 19px;
  font-weight: 760;
  line-height: 1.32;
  cursor: default;
}
.booking-bubble[role="button"] { cursor: pointer; }
.booking-bubble:focus-visible { outline: 3px solid var(--magenta); outline-offset: 4px; }
/* Queue de bulle en escalier de pixels, vers l'avatar (haut à l'étape 1, gauche ensuite). */
.booking-bubble::before {
  content: "";
  position: absolute;
  left: 34px;
  top: -17px;
  width: 26px;
  height: 17px;
  background: var(--navy);
  clip-path: polygon(0 100%, 0 0, 23% 0, 23% 23%, 46% 23%, 46% 46%, 69% 46%, 69% 69%, 92% 69%, 92% 100%);
}
.booking-bubble::after {
  content: "";
  position: absolute;
  left: 37px;
  top: -11px;
  width: 17px;
  height: 14px;
  background: #FFFDF7;
  clip-path: polygon(0 100%, 0 0, 25% 0, 25% 28%, 50% 28%, 50% 56%, 75% 56%, 75% 84%, 100% 84%, 100% 100%);
}
.booking-window[data-step="2"] .booking-bubble::before, .booking-window[data-step="3"] .booking-bubble::before {
  left: -17px; top: 30px; width: 17px; height: 26px;
  clip-path: polygon(100% 0, 0 0, 0 23%, 23% 23%, 23% 46%, 46% 46%, 46% 69%, 69% 69%, 69% 92%, 100% 92%);
}
.booking-window[data-step="2"] .booking-bubble::after, .booking-window[data-step="3"] .booking-bubble::after {
  left: -11px; top: 33px; width: 14px; height: 17px;
  clip-path: polygon(100% 0, 0 0, 0 25%, 28% 25%, 28% 50%, 56% 50%, 56% 75%, 84% 75%, 84% 100%, 100% 100%);
}
.booking-window[data-step="2"] .booking-bubble, .booking-window[data-step="3"] .booking-bubble { flex: 1; align-self: center; font-size: 22px; }
/* Taille finale réservée (texte complet invisible dessous) : la bulle ne bouge pas pendant la frappe. */
.booking-bubble-text { display: grid; }
.booking-bubble-sizer, .booking-bubble-live { grid-area: 1 / 1; }
.booking-bubble-sizer { visibility: hidden; }
.booking-caret {
  display: inline-block;
  width: 0.5em;
  height: 1.02em;
  margin-left: 0.12em;
  vertical-align: -0.16em;
  background: var(--navy);
}
.booking-more {
  position: absolute;
  right: 12px;
  bottom: 8px;
  width: 16px;
  height: 10px;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 100% 20%, 87.5% 20%, 87.5% 40%, 75% 40%, 75% 60%, 62.5% 60%, 62.5% 80%, 50% 80%, 50% 100%, 50% 100%, 37.5% 80%, 37.5% 60%, 25% 60%, 25% 40%, 12.5% 40%, 12.5% 20%, 0 20%);
  visibility: hidden;
}
.booking-bubble.is-done .booking-more { visibility: visible; }

/* Fiche */
.booking-card {
  padding: 20px 22px 22px;
  border: 3px solid var(--navy);
  background: var(--sheet);
  box-shadow: 6px 6px 0 var(--navy);
}
.booking-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.booking-h {
  font-size: 30px;
  font-weight: 900;
  font-stretch: 80%;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.booking-h:focus { outline: none; }
.booking-h:focus-visible { outline: 3px solid var(--magenta); outline-offset: 4px; }
.booking-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 4px 10px;
  border: 3px solid var(--orange);
  border-radius: 6px;
  background: #FFFDF7;
  font-size: 15px;
  font-weight: 850;
  font-stretch: 84%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.booking-badge-clock {
  position: relative;
  width: 1em;
  height: 1em;
  border: 2px solid var(--orange-ink);
  border-radius: 50%;
}
.booking-badge-clock::before { content: ""; position: absolute; left: 42%; top: 15%; width: 2px; height: 40%; background: var(--orange-ink); }
.booking-badge-clock::after { content: ""; position: absolute; left: 42%; top: 48%; width: 32%; height: 2px; background: var(--orange-ink); }
.booking-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; }
.booking-form > :not(.booking-field), .booking-field[data-field="email"] { grid-column: 1 / -1; }
.booking-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.booking-label {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  font-size: 15px;
  font-weight: 850;
  font-stretch: 86%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.booking-star { color: var(--magenta); font-weight: 900; }
.booking-star[hidden], .booking-optional[hidden] { display: none; }
.booking-optional { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--faint); }
.booking-input {
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 3px solid var(--navy);
  border-radius: 0;
  background: #FFFDF7;
  color: var(--bw-ink);
  box-shadow: inset 3px 3px 0 #E7D8BE;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
}
.booking-input:focus { outline: 3px solid var(--magenta); outline-offset: 2px; }
.booking-field.is-invalid .booking-input { border-color: var(--magenta); box-shadow: inset 3px 3px 0 #FFD3E6; }
.booking-err { font-size: 15px; font-weight: 700; line-height: 1.3; }
.booking-err:empty { display: none; }
/* Pastille « ! » en pixels avant le message (le texte reste marine : contraste AA). */
.booking-err::before {
  content: "!";
  display: inline-block;
  width: 1.3em;
  margin-right: 0.45em;
  border: 2px solid var(--navy);
  background: var(--magenta);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}
/* Champ-piège anti-robot : hors écran, invisible et ignoré des lecteurs d'écran (aria-hidden), non tabulable. */
.booking-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.booking-legend { font-size: 14px; font-weight: 550; color: var(--faint); }
.booking-summary { font-size: 16px; font-weight: 750; }
.booking-summary:empty { display: none; }
.booking-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 18px; margin-top: 4px; }
.booking-consent { flex: 1 1 15em; font-size: 15px; font-weight: 550; line-height: 1.35; color: var(--faint); }

/* Boutons « jeu » (même famille que « Voir notre vidéo » et « Rejouer ») */
.booking-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 52px;
  padding: 0.35em 1.2em;
  border: 3px solid var(--navy);
  border-radius: 0;
  background: var(--cream);
  color: var(--bw-ink);
  box-shadow: inset 2px 2px 0 #FFFDF7, inset -3px -3px 0 #D9C6A4, 4px 4px 0 var(--navy);
  font: inherit;
  font-size: 20px;
  font-weight: 900;
  font-stretch: 82%;
  line-height: 1.05;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.1s steps(2), box-shadow 0.1s steps(2);
}
.booking-btn--go { background: var(--magenta); box-shadow: inset 2px 2px 0 #FF8CC0, inset -3px -3px 0 #C8186E, 4px 4px 0 var(--navy); }
.booking-btn:hover { transform: translate(2px, 2px); box-shadow: inset 2px 2px 0 #FFFDF7, inset -3px -3px 0 #D9C6A4, 2px 2px 0 var(--navy); }
.booking-btn--go:hover { box-shadow: inset 2px 2px 0 #FF8CC0, inset -3px -3px 0 #C8186E, 2px 2px 0 var(--navy); }
.booking-btn:active { transform: translate(4px, 4px); box-shadow: inset 3px 3px 0 rgba(20, 36, 94, 0.35), 0 0 0 var(--navy); }
.booking-btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.booking-btn[disabled], .booking-btn[disabled]:hover {
  transform: none;
  background: #E9DDC8;
  color: #4A5180;
  box-shadow: inset 2px 2px 0 #F6EEDF, inset -3px -3px 0 #CDBD9F, 4px 4px 0 #9AA0BE;
  cursor: not-allowed;
}
.booking-btn--small { min-height: 44px; padding: 0.3em 0.9em; font-size: 16px; }
.booking-btn--wide { flex: 1 1 18em; }
.booking-play {
  flex: none;
  width: 0.8em;
  height: 0.9em;
  background: currentColor;
  clip-path: polygon(0 0, 25% 0, 25% 12.5%, 50% 12.5%, 50% 25%, 75% 25%, 75% 37.5%, 100% 37.5%, 100% 62.5%, 75% 62.5%, 75% 75%, 50% 75%, 50% 87.5%, 25% 87.5%, 25% 100%, 0 100%);
}
.booking-btn[aria-busy="true"] .booking-play { display: none; }
.booking-busy[hidden] { display: none; }
.booking-btn[aria-busy="true"] > span:first-child { display: none; }
.booking-link { font-weight: 800; color: var(--bw-ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }

/* Étape 2 : calendrier pixel + objectifs + horaires */
.booking-plan { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px 26px; align-items: start; }
.booking-cal {
  padding: 14px 14px 16px;
  border: 3px solid var(--navy);
  background: #FFFDF7;
  box-shadow: 6px 6px 0 var(--navy);
}
.booking-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.booking-cal-month {
  flex: 1;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  font-stretch: 82%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.booking-cal-nav {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.booking-cal-nav::before {
  content: "";
  position: absolute;
  inset: 10px 13px;
  background: var(--orange-ink);
  clip-path: polygon(100% 0, 100% 100%, 75% 100%, 75% 87.5%, 50% 87.5%, 50% 75%, 25% 75%, 25% 62.5%, 0 62.5%, 0 37.5%, 25% 37.5%, 25% 25%, 50% 25%, 50% 12.5%, 75% 12.5%, 75% 0);
}
.booking-cal-nav--next::before { transform: scaleX(-1); }
.booking-cal-nav:hover::before { background: var(--magenta); }
.booking-cal-nav:focus-visible { outline: 3px solid var(--navy); outline-offset: -2px; }
.booking-cal-nav[disabled] { cursor: not-allowed; }
.booking-cal-nav[disabled]::before { background: #C9BFB0; }
.booking-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.booking-cal-dow { padding-bottom: 2px; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.booking-day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 42px;
  padding: 0;
  border: 2px solid var(--navy);
  border-radius: 0;
  background: #FFFDF7;
  color: var(--bw-ink);
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.booking-day[disabled] { border: 2px dashed #CBBFAE; background: transparent; color: #8C8FA8; cursor: default; }
.booking-day.is-open { background: var(--orange); box-shadow: inset 2px 2px 0 #FFB487, inset -2px -2px 0 #B8521F; cursor: pointer; }
.booking-day.is-open:hover { background: #F69560; }
.booking-day[aria-pressed="true"] { background: var(--magenta); box-shadow: inset 2px 2px 0 #FF8CC0, inset -2px -2px 0 #C8186E, 0 0 0 2px var(--navy); }
.booking-day:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; position: relative; z-index: 1; }
.booking-day-pad { min-height: 42px; }
.booking-cal-state:empty { display: none; }
/* Repli « ouvrent bientôt » (eventSlug vide) : ni flèches ni grille, seulement le message. */
.booking-cal.is-soon .booking-cal-head, .booking-cal.is-soon .booking-cal-grid { display: none; }
.booking-cal.is-soon .booking-note { margin-top: 0; }
.booking-note { margin-top: 12px; font-size: 16px; font-weight: 650; line-height: 1.4; }
.booking-note[hidden] { display: none; }
.booking-note > * + * { margin-top: 8px; }
.booking-note--warn { padding: 10px 12px; border: 3px solid var(--magenta); background: #FFF0F6; }
.booking-note-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.booking-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.booking-quests { display: flex; flex-direction: column; gap: 10px; }
.booking-quest {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 8px 14px;
  border: 3px solid var(--navy);
  background: var(--sheet);
  font-size: 19px;
  font-weight: 900;
  font-stretch: 82%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.booking-quest::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border: 3px solid var(--navy);
  background: #FFFDF7;
}
.booking-quest.is-done::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 50%;
  width: 18px;
  height: 14px;
  margin-top: -8px;
  background: var(--magenta);
  clip-path: polygon(0 50%, 17% 50%, 17% 64%, 33% 64%, 33% 79%, 50% 79%, 50% 50%, 67% 50%, 67% 29%, 83% 29%, 83% 0, 100% 0, 100% 29%, 83% 29%, 83% 50%, 67% 50%, 67% 79%, 50% 79%, 50% 100%, 33% 100%, 33% 86%, 17% 86%, 17% 71%, 0 71%);
}
.booking-quest.is-current { background: var(--magenta); box-shadow: inset 2px 2px 0 #FF8CC0, inset -3px -3px 0 #C8186E; }
.booking-times-box { padding: 12px 14px; border: 3px solid var(--navy); background: #FFFDF7; }
.booking-hint { font-size: 16px; font-weight: 650; }
.booking-hint[hidden], [data-times-wrap][hidden] { display: none; }
.booking-times-h { margin-bottom: 8px; font-size: 15px; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase; }
.booking-times { display: flex; flex-wrap: wrap; gap: 8px; max-height: 172px; overflow-y: auto; padding: 2px 4px 4px 2px; }
.booking-time {
  min-width: 5.2em;
  min-height: 44px;
  padding: 0 10px;
  border: 2px solid var(--navy);
  border-radius: 0;
  background: var(--sheet);
  color: var(--bw-ink);
  box-shadow: 2px 2px 0 var(--navy);
  font: inherit;
  font-size: 17px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.booking-time:hover { background: #FFE0C9; }
.booking-time[aria-pressed="true"] { background: var(--magenta); box-shadow: inset 2px 2px 0 #FF8CC0, inset -2px -2px 0 #C8186E, 2px 2px 0 var(--navy); }
.booking-time:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.booking-tz { margin-top: 10px; font-size: 14px; font-weight: 550; color: var(--faint); }
.booking-tz-name { font-weight: 800; color: var(--bw-ink); }
.booking-alert:empty { display: none; }
.booking-alert .booking-note { margin-top: 0; }
.booking-actions--plan { margin-top: 20px; justify-content: flex-start; }

/* Étape 3 : confirmation */
.booking-card--done { display: flex; flex-direction: column; gap: 10px; }
.booking-recap-label { font-size: 15px; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase; }
.booking-recap { font-size: 24px; font-weight: 880; font-stretch: 90%; line-height: 1.2; }
.booking-recap::first-letter { text-transform: uppercase; }
.booking-mail { font-size: 17px; font-weight: 600; }

/* Mobile (≤ 760 px) : colonnes empilées, avatar + bulle compacts en haut, défilement interne du corps. */
@media (max-width: 760px) {
  .booking-window, .booking-window[data-step="2"], .booking-window[data-step="3"] { width: calc(100vw - 16px); }
  .booking-body, .booking-window[data-step="2"] .booking-body { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px 12px 18px; }
  .booking-guide, .booking-window[data-step="2"] .booking-guide, .booking-window[data-step="3"] .booking-guide { flex-direction: row; align-items: flex-start; gap: 16px; }
  .booking-avatar, .booking-window[data-step="2"] .booking-avatar, .booking-window[data-step="3"] .booking-avatar { width: 84px; height: 84px; border-width: 4px; box-shadow: 4px 4px 0 var(--navy); }
  .booking-bubble, .booking-window[data-step="2"] .booking-bubble, .booking-window[data-step="3"] .booking-bubble { flex: 1; align-self: flex-start; padding: 10px 12px 20px; font-size: 16px; }
  .booking-bubble::before, .booking-window[data-step="2"] .booking-bubble::before, .booking-window[data-step="3"] .booking-bubble::before {
    left: -15px; top: 18px; width: 15px; height: 22px;
    clip-path: polygon(100% 0, 0 0, 0 23%, 23% 23%, 23% 46%, 46% 46%, 46% 69%, 69% 69%, 69% 92%, 100% 92%);
  }
  .booking-bubble::after, .booking-window[data-step="2"] .booking-bubble::after, .booking-window[data-step="3"] .booking-bubble::after {
    left: -9px; top: 21px; width: 12px; height: 15px;
    clip-path: polygon(100% 0, 0 0, 0 25%, 28% 25%, 28% 50%, 56% 50%, 56% 75%, 84% 75%, 84% 100%, 100% 100%);
  }
  .booking-card { padding: 14px 12px 16px; box-shadow: 4px 4px 0 var(--navy); }
  .booking-h { font-size: 24px; }
  .booking-card-head { flex-wrap: wrap; }
  .booking-form { grid-template-columns: minmax(0, 1fr); }
  .booking-plan { grid-template-columns: minmax(0, 1fr); }
  .booking-cal { padding: 10px 8px 12px; box-shadow: 4px 4px 0 var(--navy); }
  .booking-cal-grid { gap: 4px; }
  .booking-quests { gap: 6px; }
  .booking-quest { min-height: 40px; gap: 10px; padding: 4px 10px; font-size: 15px; }
  .booking-quest::before { width: 20px; height: 20px; }
  .booking-quest.is-done::after { left: 16px; width: 14px; height: 11px; margin-top: -6px; }
  .booking-btn { font-size: 18px; }
  .booking-btn--wide, .booking-actions .booking-btn--go { flex: 1 1 100%; }
  .booking-actions--plan .booking-btn--back { flex: 1 1 100%; }
  .booking-recap { font-size: 20px; }
}
/* >>> layout:nav
 * En-tête commun (src/components/Topbar.astro, docs/seo/header-navigation.md). Remplace l'ancien .topbar (les règles
 * .topbar de layout.css / mk:generated ne s'appliquent plus : la classe a disparu du HTML).
 * ≥ 1024 px : barre wordmark + 5 entrées + CTA, panneaux mega-menu (bordure marine 2 px, ombre décalée magenta).
 * < 1024 px : wordmark, pilule « 20 min », bouton menu ; menu plein écran en accordéon.
 * États : sans JS = <details open> / :target ; avec JS = [hidden] sur .nav-mega, .is-open sur .nav-item,
 * .is-menu-open sur .site-header, html.nav-locked (défilement bloqué). Transitions : bloc motion:nav (motion.css). */
:root { --header-h: 60px; }
@media (min-width: 761px) { :root { --header-h: 72px; } }
@media (min-width: 1200px) { :root { --header-h: calc(104 * min(1px, 100vw / 1536)); } }
html { scroll-padding-top: calc(var(--header-h) + 12px); }
html.nav-locked { overflow: hidden; }

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--cream);
  border-bottom: 2px solid var(--navy);
}
/* Unités de la maquette (≥ 1200 px). Pas de container-type ici : il ferait de l'en-tête le bloc conteneur du menu
 * mobile en position fixed. 100vw (barre de défilement comprise) comme --u de la page. */
@media (min-width: 1024px) {
  .site-header { --u: min(1px, 100vw / 1536); --x0: max(0px, (100vw - 1536px) / 2); }
}
.site-header-bar {
  position: relative;
  display: flex; align-items: center; gap: clamp(16px, 2vw, 32px);
  width: 100%; max-width: calc(var(--shell) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad);
  min-height: var(--header-h);
}
.site-header .wordmark { position: relative; flex: none; line-height: 1; }
.site-header .wordmark::after {
  content: ""; position: absolute; width: 0.3em; height: 0.3em; margin-left: 0.02em; top: -0.08em;
  background: url("/art/ui/star-orange.svg") center / contain no-repeat;
}
.site-header .topbar-cta { background: var(--navy); color: var(--cream); box-shadow: none; white-space: nowrap; }
.site-header .topbar-cta:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; }
.nav-list { display: flex; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 750; font-stretch: 92%; color: var(--navy); text-decoration: none;
  list-style: none;
}
.nav-trigger::-webkit-details-marker { display: none; }
.nav-item--group > .nav-trigger::after, .nav-details > .nav-trigger::after {
  content: ""; width: 0.42em; height: 0.42em; margin-top: -0.2em; flex: none;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg);
}
.nav-item.is-open > .nav-trigger::after, .nav-details[open] > .nav-trigger::after { margin-top: 0.2em; transform: rotate(-135deg); }
.nav-mega[hidden] { display: none; }
.nav-col-title { font-weight: 900; font-stretch: 88%; line-height: 1; letter-spacing: -0.01em; }
.nav-link { display: block; text-decoration: none; color: var(--navy); }
.nav-link-label { display: block; font-weight: 750; font-stretch: 94%; line-height: 1.2; }
.nav-link-desc { display: block; font-size: 14px; font-weight: 450; line-height: 1.3; color: var(--faint); margin-top: 0.2em; }
.nav-link:hover .nav-link-label, .nav-link[aria-current] .nav-link-label { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
.nav-link[aria-current] .nav-link-label::before {
  content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.45em; border-radius: 50%;
  background: var(--orange); vertical-align: 0.08em;
}
.nav-card-art { display: block; border: 2px solid var(--navy); background: var(--cream); isolation: isolate; }
.nav-card-art img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; mix-blend-mode: darken; }
.nav-card-text { margin-top: 0.8em; font-size: 16px; font-weight: 700; font-stretch: 94%; line-height: 1.3; }
.nav-card-link {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px;
  font-size: 18px; font-weight: 800; font-stretch: 92%; color: var(--navy); white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 0.25em;
}
.nav-card-link::after { content: ""; width: 1.3em; height: 0.8em; background: url("/art/ui/arrow-navy.svg") center / contain no-repeat; }
.nav-pill, .nav-toggle, .nav-close-nojs { display: none; }
.nav-panel-foot { display: none; }

/* ── Bureau (≥ 1024 px) ─────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .site-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
  .nav-list { gap: clamp(20px, 2.6vw, 44px); }
  .nav-trigger { position: relative; font-size: clamp(16px, 1.25vw, 19px); }
  /* Entrée active (section de la page courante) : soulignement orange façon maquette. */
  .nav-trigger[aria-current]::before, [data-nav-current] > .nav-trigger::before, [data-nav-current] .nav-details > .nav-trigger::before {
    content: ""; position: absolute; left: -2px; right: -2px; bottom: 4px; height: 4px; border-radius: 2px;
    background: var(--orange); transform: rotate(-1deg);
  }
  .nav-item.is-open > .nav-trigger, .nav-details[open] > .nav-trigger { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
  .nav-mega {
    position: absolute; top: calc(100% - 1px); left: 50%; z-index: 2; translate: -50% 0;
    display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)) 316px;
    width: min(var(--mega-w), calc(100vw - 2 * var(--pad)));
    background: var(--cream); border: 2px solid var(--navy); box-shadow: 9px 9px 0 var(--magenta);
    text-align: left;
  }
  .nav-mega--1 { --cols: 1; --mega-w: 760px; }
  .nav-mega--2 { --cols: 2; --mega-w: 1100px; }
  .nav-col, .nav-card { padding: 30px 32px 28px; }
  .nav-col + .nav-col, .nav-card { border-left: 2px solid var(--navy); }
  .nav-col-title { font-size: 30px; margin-bottom: 14px; }
  .nav-links { display: grid; gap: 4px; }
  .nav-link { position: relative; padding: 9px 34px 9px 0; }
  .nav-link-label { font-size: 17px; }
  .nav-link::after {
    content: ""; position: absolute; right: 2px; top: 50%; width: 20px; height: 14px; margin-top: -7px;
    background: var(--orange); -webkit-mask: url("/art/ui/arrow-navy.svg") center / contain no-repeat; mask: url("/art/ui/arrow-navy.svg") center / contain no-repeat;
  }
  .nav-card { display: flex; flex-direction: column; align-items: flex-start; }
  .nav-card-text { text-wrap: balance; }
  .nav-card-art { width: 100%; }
}
@media (min-width: 1200px) {
  /* Même géométrie que l'ancien en-tête de la maquette (wordmark 70 u, CTA 280 × 71 u, filet à 17 u du bord). */
  .site-header { border-bottom: 0; }
  .site-header::after {
    content: ""; position: absolute; left: calc(var(--x0) + 17 * var(--u)); bottom: 0;
    width: calc(1503 * var(--u)); height: calc(3 * var(--u)); background: var(--navy);
  }
  .site-header-bar { max-width: none; padding-inline: calc(var(--x0) + 34 * var(--u)) calc(var(--x0) + 47 * var(--u)); }
  .site-header .wordmark { font-size: calc(70 * var(--u)); letter-spacing: calc(-1.2 * var(--u)); }
  .site-header .topbar-cta {
    width: calc(280 * var(--u)); height: calc(71 * var(--u)); justify-content: center; padding: 0; border: 0;
    font-size: calc(30.5 * var(--u)); font-weight: 800; font-stretch: 90%;
  }
  .nav-trigger { font-size: calc(21 * var(--u)); }
  .nav-mega { top: 100%; }
}

/* ── Mobile et tablette (< 1024 px) ─────────────────────────────────────── */
@media (max-width: 1023.98px) {
  .site-header-bar { justify-content: space-between; gap: 12px; }
  .site-header .wordmark { margin-right: auto; }
  .site-header .topbar-cta { display: none; }
  .nav-pill {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px;
    background: var(--navy); color: var(--cream); font-weight: 800; font-stretch: 92%; font-size: 17px; text-decoration: none; white-space: nowrap;
  }
  .nav-toggle, .nav-close-nojs {
    width: 44px; height: 44px; margin-right: -6px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--navy);
    align-items: center; justify-content: center;
  }
  .nav-toggle { display: inline-flex; }
  .nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after {
    display: block; width: 26px; height: 3px; border-radius: 2px; background: currentColor;
  }
  .nav-toggle-icon { position: relative; }
  .nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-icon::before { top: -8px; }
  .nav-toggle-icon::after { top: 8px; }
  .is-menu-open .nav-toggle-icon, .nav-close-nojs .nav-toggle-icon { background: transparent; }
  .is-menu-open .nav-toggle-icon::before, .nav-close-nojs .nav-toggle-icon::before { top: 0; transform: rotate(45deg); }
  .is-menu-open .nav-toggle-icon::after, .nav-close-nojs .nav-toggle-icon::after { top: 0; transform: rotate(-45deg); }
  .is-menu-open .nav-pill { visibility: hidden; }

  /* Menu plein écran sous la barre ; sans JS : #site-nav:target. */
  .site-nav {
    display: none; position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 1;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--cream); border-top: 2px solid var(--navy);
    padding: 8px var(--pad) 0;
  }
  .is-menu-open .site-nav, .site-nav:target { display: flex; flex-direction: column; }
  .site-nav:target ~ .nav-toggle { display: none; }
  .site-nav:target ~ .nav-close-nojs { display: inline-flex; }
  .nav-list { flex-direction: column; width: 100%; max-width: 640px; margin-inline: auto; }
  .nav-item { border-bottom: 2px solid var(--navy); }
  .nav-trigger {
    width: 100%; justify-content: space-between; min-height: 72px;
    font-size: clamp(28px, 7.4vw, 36px); font-weight: 900; font-stretch: 86%; letter-spacing: -0.01em; text-align: left;
  }
  .nav-item--group > .nav-trigger::after, .nav-details > .nav-trigger::after { width: 12px; height: 12px; margin-right: 6px; border-width: 3px; }
  .nav-direct::after {
    content: ""; width: 24px; height: 16px; margin-right: 2px; background: url("/art/ui/arrow-navy.svg") center / contain no-repeat;
  }
  .nav-direct[aria-current] { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 4px; text-underline-offset: 0.15em; }
  .nav-mega { display: block; padding: 0 0 18px 20px; }
  .nav-mega--1 .nav-col-title { display: none; }
  .nav-col + .nav-col { margin-top: 12px; }
  .nav-col-title { font-size: 14px; font-weight: 800; font-stretch: 86%; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); margin: 6px 0 2px; }
  .nav-link { display: flex; align-items: center; min-height: 44px; }
  .nav-link-label { font-size: 18px; font-weight: 450; }
  .nav-link[aria-current] { margin-left: -20px; }
  .nav-link[aria-current] .nav-link-label { font-weight: 750; text-decoration: none; }
  .nav-link[aria-current] .nav-link-label::before { width: 12px; height: 12px; margin-right: 8px; vertical-align: 0; }
  .nav-link-desc, .nav-card { display: none; }
  .nav-panel-foot {
    position: relative; display: block; width: 100%; max-width: 640px; margin: 28px auto 0; padding-bottom: 28px; min-height: 236px;
  }
  .nav-panel-cta {
    display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 20px;
    background: var(--navy); color: var(--cream); font-size: 21px; font-weight: 800; font-stretch: 90%; text-decoration: none;
  }
  .nav-panel-cta::after { content: ""; width: 26px; height: 18px; background: var(--cream); -webkit-mask: url("/art/ui/arrow-navy.svg") center / contain no-repeat; mask: url("/art/ui/arrow-navy.svg") center / contain no-repeat; }
  .nav-panel-cta:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; box-shadow: 0 0 0 3px var(--cream); }
  .nav-panel-tagline { position: relative; z-index: 1; margin-top: 26px; padding-top: 14px; border-top: 2px solid var(--navy); width: 58%; font-size: 14px; font-weight: 650; }
  .nav-panel-mention { position: relative; z-index: 1; margin-top: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--faint); }
  .nav-panel-heroine {
    position: absolute; right: 0; bottom: 8px; width: 140px; height: auto; mix-blend-mode: darken; pointer-events: none;
    -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  }
  .nav-panel-foot { isolation: isolate; }
}
@media (min-width: 761px) and (max-width: 1023.98px) {
  .site-header .wordmark { font-size: 36px; }
}
@media (max-width: 760px) {
  .site-header .wordmark { font-size: 30px; }
}

/* ── Pied de page : colonnes de maillage alignées sur l'en-tête (Conseil, Formations, Guides, liens directs) ── */
.footer-cols { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 0.7fr); gap: 0.6em clamp(20px, 2.4vw, 40px); align-items: start; }
.footer-col-title { font-size: var(--fs-small); font-weight: 800; font-stretch: 86%; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.1em; }
.footer-col-list { display: grid; }
.footer-col--direct { padding-top: calc(var(--fs-small) * 1.45 + 0.1em); }
.footer-cols .ce-footer-link { min-height: 36px; font-size: var(--fs-small); }
.footer-cols .ce-footer-link[aria-current] { text-decoration: none; color: var(--faint); }
@media (min-width: 1000px) {
  .footer-cols { grid-template-columns: repeat(4, auto); justify-content: start; column-gap: clamp(24px, 2.6vw, 40px); }
  .footer-cols .ce-footer-link { white-space: nowrap; }
}
@media (min-width: 1200px) {
  .footer [data-b="1"] { width: calc(840 * var(--u)); }
  .footer .footer-cols .ce-footer-link { font-size: calc(16 * var(--u)); min-height: calc(34 * var(--u)); }
  .footer .footer-col-title { font-size: calc(14 * var(--u)); }
  .footer .footer-col--direct { padding-top: calc(14 * 1.45 * var(--u) + 0.1em); }
}
@media (max-width: 760px) {
  .footer-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 1.2em; }
  .footer-col--guides { grid-column: 1 / -1; }
  .footer-col--direct { padding-top: 0; }
  .footer-cols .ce-footer-link { min-height: 44px; }
}
/* <<< layout:nav */
/* ── Mouvement : blocs par section ──────────────────────────────────────────
 * Convention : l'état masqué de départ n'existe QUE sous html.js-motion,
 * classe posée par public/script.js si prefers-reduced-motion n'est pas « reduce »
 * et si IntersectionObserver existe. Sans JS ou en mouvement réduit : page entière.
 */

/* >>> motion:reveal */
html.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js-motion [data-reveal].is-visible { opacity: 1; transform: none; }
/* <<< motion:reveal */

/* >>> motion:hero */
/* <<< motion:hero */

/* >>> motion:problem */
/* <<< motion:problem */

/* >>> motion:change */
/* <<< motion:change */

/* >>> motion:method */
/* <<< motion:method */

/* >>> motion:team */
/* <<< motion:team */

/* >>> motion:audiences */
/* <<< motion:audiences */

/* >>> motion:veille */
/* <<< motion:veille */

/* >>> motion:systems */
/* <<< motion:systems */

/* >>> motion:qualification */
/* <<< motion:qualification */

/* >>> motion:faq */
/* <<< motion:faq */

/* >>> motion:closing */
/* <<< motion:closing */

/* >>> motion:video */
/* Bouton « Voir notre vidéo » : reflet qui traverse, rebond en pixels de l'icône ▶, pulsation de l'ombre.
 * Uniquement sous html.js-motion (donc jamais sous prefers-reduced-motion : reduce). Pas de filtre, pas de flou. */
html.js-motion .hero-video { animation: hv-pulse 2.4s steps(1, end) infinite; }
html.js-motion .hero-video::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 1.4em;
  background: linear-gradient(90deg, transparent, rgba(255, 253, 247, 0.85) 30%, rgba(255, 253, 247, 0.85) 55%, transparent);
  transform: translateX(-3em) skewX(-20deg);
  animation: hv-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}
html.js-motion .hero-video-icon::before { animation: hv-hop 1.6s steps(1, end) infinite; }
html.js-motion .hero-video:hover, html.js-motion .hero-video:active, html.js-motion .hero-video[aria-expanded="true"] { animation: none; }
@keyframes hv-pulse {
  0%, 100% { --hv-shadow: var(--navy); }
  50% { --hv-shadow: var(--magenta); }
}
@keyframes hv-shine {
  0%, 55% { transform: translateX(-3em) skewX(-20deg); }
  100% { transform: translateX(16em) skewX(-20deg); }
}
@keyframes hv-hop {
  0%, 60%, 100% { transform: translate(0, 0); }
  70% { transform: translate(0, -3px); }
  80% { transform: translate(2px, -3px); }
  90% { transform: translate(2px, 0); }
}
/* Ouverture de la fenêtre : apparition en 3 paliers (effet rétro), sans flou. */
html.js-motion .video-window.is-opening { animation: vw-open 0.18s steps(3, end); }
@keyframes vw-open {
  from { clip-path: inset(0 50% 100% 50%); }
  to { clip-path: inset(0 0 0 0); }
}
/* Run 9 : bouton final de l'écran de fin : anneau orange qui pulse (paliers) + reflet clair clippé dans la pilule.
 * Ne joue que lorsque l'écran de fin est affiché (sinon display:none). Transform/opacity seulement, aucun filtre. */
html.js-motion .video-window-cta::before { animation: vw-cta-ring 1.6s steps(1, end) infinite; }
html.js-motion .video-window-cta-shine::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20%;
  width: 14%;
  background: linear-gradient(90deg, transparent, rgba(255, 253, 247, 0.6) 35%, rgba(255, 253, 247, 0.6) 60%, transparent);
  transform: translateX(0) skewX(-20deg);
  animation: vw-cta-shine 2.8s ease-in-out infinite;
}
html.js-motion .video-window-cta:hover::before, html.js-motion .video-window-cta:active::before,
html.js-motion .video-window-cta:focus-visible::before { animation: none; opacity: 1; }
@keyframes vw-cta-ring {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.014, 1.09); }
}
@keyframes vw-cta-shine {
  0%, 45% { transform: translateX(0) skewX(-20deg); }
  100% { transform: translateX(1000%) skewX(-20deg); }
}
/* <<< motion:video */

/* >>> motion:booking */
/* Run 10 : fenêtre de rendez-vous. Sous html.js-motion uniquement (jamais sous prefers-reduced-motion : reduce) :
 * ouverture en paliers, curseur bloc qui clignote, ▼ qui sautille, hochement de l'avatar PENDANT la frappe.
 * Transform/opacity/clip-path seulement, aucun filtre, aucun flou. */
html.js-motion .booking-window.is-opening { animation: vw-open 0.18s steps(3, end); }
html.js-motion .booking-caret { animation: bw-caret 1s steps(1, end) infinite; }
html.js-motion .booking-bubble.is-done .booking-more { animation: bw-more 0.9s steps(1, end) infinite; }
html.js-motion .booking-avatar.is-talking img { animation: bw-nod 0.36s steps(1, end) infinite; }
@keyframes bw-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes bw-more { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes bw-nod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
/* <<< motion:booking */

/* >>> motion:scenes */
/* Ratios = width/height de src/content/thread-anchors.json (check : node .work/s1/check-aspect.mjs).
 * hero/problem/method/team/closing/engineering/systems/qualification : dimensions RÉELLES des fichiers
 * public/art/scenes/<id>/ (à valider Carbo). S4 : beforeafter 1536×1752 (export), laboratory 1536×964 (export-v2),
 * hero 1536×1205 (export-v2) : 10 scènes, 9 illustrées (problem = maquette P1).
 * Mise à jour par .work/s3/install-scene.mjs (--write). */
.scene--hero { aspect-ratio: 1536 / 1024; }
.scene--problem { aspect-ratio: 1536 / 1532; }
.scene--beforeafter { aspect-ratio: var(--ba-ratio); }
.scene--method { aspect-ratio: 1536 / 751; }
.scene--team { aspect-ratio: 1536 / 716; }
.scene--engineering { aspect-ratio: 1536 / 742; }
.scene--laboratory { aspect-ratio: 1536 / 964; }
.scene--systems { aspect-ratio: 1536 / 604; }
.scene--qualification { aspect-ratio: 1536 / 759; }
.scene--closing { aspect-ratio: 1536 / 836; }
/* <<< motion:scenes */

/* >>> motion:thread */
/* Technique B (PROTOTYPE-SPEC.md, animation-prep) : fil RGBA isolé (.thread-raster) révélé par un
 * <mask> SVG dont deux éléments lisent des variables CSS posées par script.js (CSSOM) :
 *   --thread-off  : stroke-dashoffset du tracé .thread-reveal (1 = rien, 0 = tout) ;
 *   --thread-wipe : position du rideau .thread-wipe (0 = rien, 1 = tout).
 * ÉTAT PAR DÉFAUT = FIL ENTIER (sans JS, prefers-reduced-motion) : l'état « non dessiné »
 * n'existe que sous html.js-thread, classe posée par le JS APRÈS le premier calcul de géométrie.
 * Ordre z : base 0 < fil 1 < avant-plan 2 (aucun avant-plan livré). */
.scene--art { background: transparent; }
.scene--art > .scene-base,
.scene--art > .scene-thread,
.scene--art > .scene-front { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* La boîte a exactement le ratio de l'image : contain = aucun rognage (aucun personnage coupé). */
.scene--art > .scene-base > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
.scene--art > .scene-thread { z-index: 1; overflow: hidden; pointer-events: none; }
.scene--art > .scene-front { z-index: 2; object-fit: contain; }
/* Repli sans JS (<noscript><img>) : fil entier au-dessus de la base, même boîte que le SVG. Absent du DOM quand le JS est actif. */
.scene--art .scene-thread-nojs { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; pointer-events: none; }
.thread-wipe { transform-box: fill-box; transform: translateY(100%); }
.thread-reveal { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.thread-gaps line { stroke: var(--thread-color, #F07A3A); stroke-opacity: 0.92; }
html.js-thread .thread-wipe {
  transform: translateY(calc(var(--thread-wipe, 0) * 100%));
  transition: transform 120ms cubic-bezier(0.2, 0, 0, 1);
}
html.js-thread .thread-reveal {
  stroke-dashoffset: var(--thread-off, 1);
  transition: stroke-dashoffset 120ms cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-reduced-motion: reduce) {
  html.js-thread .thread-wipe { transform: translateY(100%); transition: none; }
  html.js-thread .thread-reveal { stroke-dashoffset: 0; transition: none; }
}
/* Raccords .thread-link (S3, option A de la spec) : groupes <g> créés par script.js dans
 * svg[data-thread-links] (posé par index.astro dans [data-thread-layer], SOUS les sections : le fil semble
 * entrer dans l'image). Géométrie (d, stroke-width) calculée en JS depuis les ancres out/in du DOM.
 * Sans JS : aucun tracé (dégradation documentée). Matière : écho magenta décalé (+3,+2), trait orange,
 * frange sèche plus large et translucide (2 tracés de largeurs voisines). Pas de filter.
 * Révélation : --link-off (1 = rien, 0 = tout) sous html.js-thread seulement ; défaut = raccord entier. */
.thread-link path { stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.thread-link-dry { stroke: var(--thread-color, #F07A3A); stroke-opacity: 0.4; }
.thread-link-body { stroke: var(--thread-color, #F07A3A); }
.thread-link-echo { stroke: var(--thread-echo, #FF4F9E); stroke-opacity: 0.85; }
html.js-thread .thread-link path {
  stroke-dashoffset: var(--link-off, 1);
  transition: stroke-dashoffset 120ms cubic-bezier(0.2, 0, 0, 1);
}
/* Halo de pointe (spec §8) : halo papier (dégradé radial crème, pas d'ombre portée) posé à la tête du
 * raccord en cours de révélation ; script.js écrit --tip-x/--tip-y/--tip-o et l'éteint 200 ms après le
 * dernier mouvement ; fondu de 200 ms. Une seule accroche visible à la fois. */
.thread-tip {
  opacity: 0;
  transform: translate(var(--tip-x, -999px), var(--tip-y, -999px));
}
html.js-thread .thread-tip { opacity: var(--tip-o, 0); transition: opacity 200ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  html.js-thread .thread-link path { stroke-dashoffset: 0; transition: none; }
  html.js-thread .thread-tip { opacity: 0; transition: none; }
}
/* Run 5 : fil continu des marges .mk-thread (mode maquette >= 1200 px, sinon display:none) déroulé au scroll.
 * Tracés pathLength=1 ; script.js écrit --mk-off par tracé (1,01 = rien, 0 = tout ; la tête suit la ligne de
 * lecture K = 0,65 comme le rideau des scènes) et --tip-x/--tip-y/--tip-o sur le svg (halo .mk-tip, unités
 * du viewBox). Défaut (sans JS, mouvement réduit, impression) : tracé entier, halo masqué. */
.mk-tip { opacity: 0; transform: translate(var(--tip-x, -999px), var(--tip-y, -999px)); pointer-events: none; }
html.js-thread .mk-thread path {
  stroke-dasharray: 1 2;
  stroke-dashoffset: var(--mk-off, 1.01);
  transition: stroke-dashoffset 120ms cubic-bezier(0.2, 0, 0, 1);
}
html.js-thread .mk-tip { opacity: var(--tip-o, 0); transition: opacity 200ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  html.js-thread .mk-thread path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  html.js-thread .mk-tip { opacity: 0; transition: none; }
}
@media print {
  html.js-thread .thread-wipe { transform: translateY(100%); transition: none; }
  html.js-thread .thread-reveal, html.js-thread .thread-link path { stroke-dashoffset: 0; transition: none; }
  html.js-thread .mk-thread path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  html.js-thread .thread-tip, html.js-thread .mk-tip { opacity: 0; transition: none; }
}
/* <<< motion:thread */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js-motion [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* >>> motion:nav
 * En-tête : apparition courte des panneaux du mega-menu (bureau) et du menu plein écran (mobile). Uniquement sous
 * html.js-motion (posée si le mouvement est autorisé) ; aucun état masqué de départ (le panneau fermé est [hidden]). */
@keyframes nav-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (min-width: 1024px) {
  html.js-motion .nav-mega:not([hidden]) { animation: nav-drop 160ms cubic-bezier(0.2, 0, 0, 1); }
  html.js-motion .nav-link::after { transition: transform 120ms ease-out; }
  html.js-motion .nav-link:hover::after { transform: translateX(3px); }
}
@media (max-width: 1023.98px) {
  html.js-motion .is-menu-open .site-nav { animation: nav-drop 180ms cubic-bezier(0.2, 0, 0, 1); }
}
@media (prefers-reduced-motion: reduce) {
  html.js-motion .nav-mega:not([hidden]), html.js-motion .is-menu-open .site-nav { animation: none; }
}
/* <<< motion:nav */

/* >>> page:claude-entreprise */
/* Page SEO /claude-entreprise (src/pages/claude-entreprise.astro). Classes ce- uniquement, portée body.ce-page
 * (+ .ce-footer-link, lien discret du pied de page de la home). Aucune règle existante modifiée : ce bloc ne fait
 * qu'ajouter. Jetons, échelle typo, bandes, boutons, tirets et FAQ repliable = ceux de la home.
 * Pas de fil des marges ici ; le fil de l'illustration du Closing (repris tel quel) est affiché entier, sans déroulé. */

/* Pied de page (home) : lien de maillage, zone de clic ≥ 44 px, marine sur crème. */
.ce-footer-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.ce-footer-link:hover { text-decoration-thickness: 3px; }

/* Fil : aucun tracé de marge, fil de la scène du Closing entier et immobile. */
.ce-page .mk-thread { display: none !important; }
html.js-thread .ce-page .thread-wipe { transform: translateY(100%); transition: none; }
html.js-thread .ce-page .thread-reveal { stroke-dashoffset: 0; transition: none; }

.ce-page {
  --ce-title: clamp(34px, 4.3vw, 66px);
  --ce-hero-title: clamp(42px, 5.5vw, 84px);
  --ce-rule: 2px solid var(--navy);
}

/* ── Typo commune ── */
.ce-page .ce-kicker {
  font-size: var(--fs-label); font-weight: 800; font-stretch: 86%; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy);
}
.ce-page .ce-cap {
  font-size: var(--fs-label); font-weight: 800; font-stretch: 86%; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint);
}
.ce-page .ce-eyebrow { display: flex; align-items: center; gap: 0.9em; }
.ce-page .ce-eyebrow .ce-num {
  font-size: var(--fs-h3); font-weight: 900; font-stretch: 85%; line-height: 1; color: var(--orange-ink);
}
.ce-page .ce-eyebrow .ce-num + .ce-kicker::before {
  content: ""; display: inline-block; width: 36px; height: 2px; margin-right: 0.9em; vertical-align: 0.3em; background: var(--navy);
}
.ce-page .ce-title { font-size: var(--ce-title); line-height: 1; max-width: 18em; }
.ce-page .ce-head { max-width: 1040px; }
.ce-page .ce-head .ce-lead { max-width: 38em; }
.ce-page .ce-link {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 750; color: var(--navy);
  text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 0.22em;
}
.ce-page .ce-link::after { content: ""; flex: none; width: 1.3em; height: 0.8em; margin-left: 0.5em; background: url("/art/ui/arrow-navy.svg") center / contain no-repeat; }
.ce-page .ce-link:hover { text-decoration-color: var(--navy); }
.ce-page .ce-section { border-top: 2px solid var(--navy); }

/* ── Fil d'Ariane ── */
.ce-crumbs { padding-top: clamp(18px, 2vw, 30px); }
.ce-crumbs-list { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--fs-small); font-weight: 600; color: var(--faint); }
.ce-crumbs-list li { display: inline-flex; align-items: center; }
.ce-crumbs-list li + li::before { content: "/"; margin: 0 0.7em; color: var(--rule); font-weight: 800; }
.ce-crumbs-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); text-decoration-color: var(--orange); }
.ce-crumbs-list [aria-current] { color: var(--faint); }

/* ── Hero ── */
.ce-hero { padding-block: clamp(8px, 1.5vw, 24px) clamp(48px, 5vw, 80px); }
.ce-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--col-gap); align-items: center; }
.ce-hero-title { margin-top: var(--gap-head); font-size: var(--ce-hero-title); font-weight: 900; font-stretch: 88%; line-height: 0.98; letter-spacing: -0.01em; text-wrap: balance; }
.ce-hero-title .em--band-magenta { padding: 0 0.12em; margin: 0 -0.06em; }
.ce-hero-title-a, .ce-hero-title-b { display: block; }
.ce-hero-title-b { margin-top: 0.14em; font-size: 0.86em; font-stretch: 90%; }
.ce-hero-lead { margin-top: var(--gap-head); }
.ce-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin-top: calc(var(--gap-head) * 1.3); }

/* Illustrations : papier recoloré au crème exact (#F5E9D5, .work/ce/process.py) + fondu « darken » sur un fond crème
 * isolé : aucun rectangle, même avec la dérive de couleur du codage AVIF/WebP ; bords légèrement fondus en plus. */
.ce-art { position: relative; margin: 0; background: var(--cream); isolation: isolate; }
.ce-art img { display: block; width: 100%; height: auto; mix-blend-mode: darken; }
.ce-art--hero { margin-right: calc(-1 * var(--pad) + 8px); }
.ce-art--hero img {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 97%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 97%, transparent 100%);
}

/* ── En bref : 5 faits à filets ── */
.ce-brief { border-top: var(--ce-rule); border-bottom: var(--ce-rule); background: var(--sheet); }
.ce-brief .shell { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: clamp(22px, 2.4vw, 36px); }
.ce-brief-title { color: var(--navy); }
.ce-brief-title::before { content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.5em; background: var(--magenta); vertical-align: 0.02em; }
.ce-brief-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1rem; }
.ce-brief-item { padding: 0.2em clamp(14px, 1.4vw, 22px); border-left: 2px solid var(--rule-alt); }
.ce-brief-item:first-child { padding-left: 0; border-left: 0; }
.ce-brief-item dt { font-size: var(--fs-h3-small); font-weight: 820; font-stretch: 92%; line-height: 1.1; }
.ce-brief-item dd { margin: 0.4em 0 0; font-size: var(--fs-small); font-weight: 480; line-height: 1.4; color: var(--navy); }

/* ── 01 Le plafond ── */
.ce-plafond-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--col-gap); margin-top: var(--gap-art); align-items: start; }
.ce-plafond-intro { font-size: var(--fs-lead); font-weight: 600; line-height: 1.38; max-width: 22em; padding-left: 0.9em; border-left: 4px solid var(--magenta); }
.ce-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 2.2vw, 34px) var(--col-gap); }
.ce-limit { border-top: var(--ce-rule); padding-top: 0.7em; }
.ce-limit p { margin-top: 0.35em; }

/* ── 02 Quatre chantiers ── */
.ce-chantier-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 3.6vw, 56px) var(--col-gap); margin-top: var(--gap-art); counter-reset: ce-chantier; }
.ce-chantier { counter-increment: ce-chantier; display: flex; flex-direction: column; border-top: 3px solid var(--orange); padding-top: 1em; }
.ce-chantier::before {
  content: counter(ce-chantier, decimal-leading-zero); display: block; margin-bottom: 0.25em;
  font-size: var(--fs-num); font-weight: 900; font-stretch: 85%; line-height: 1; color: var(--orange-ink);
}
.ce-chantier-title { max-width: 20em; }
.ce-chantier-text { margin-top: 0.6em; max-width: 34em; }
.ce-receive { margin-top: auto; padding-top: 1.1em; }
.ce-receive .ce-cap { display: block; padding-top: 0.8em; border-top: 1px solid var(--rule); }
.ce-receive-text { margin-top: 0.35em; font-weight: 700; max-width: 34em; }

/* ── 03 Service par service ── */
.ce-note { margin-top: var(--gap-head); font-size: var(--fs-small); font-weight: 600; font-style: italic; color: var(--faint); padding-left: 0.8em; border-left: 3px solid var(--magenta); }
.ce-rows { margin-top: var(--gap-art); border-bottom: 2px solid var(--rule-alt); }
.ce-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--col-gap); padding-block: clamp(16px, 1.6vw, 24px); border-top: 2px solid var(--rule-alt); }
.ce-row:first-child { border-top: var(--ce-rule); }
.ce-row-label { position: relative; padding-left: 1.4em; }
.ce-row-label::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 0.85em; height: 3px; background: var(--orange); }
.ce-row-body p { max-width: 40em; }
.ce-row-body .ce-link { margin-top: 0.4em; }

/* ── 04 Formation ── */
.ce-formation-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--col-gap); align-items: center; }
.ce-art--training { margin-right: calc(-1 * var(--pad) + 8px); }
.ce-art--training img {
  -webkit-mask-image: radial-gradient(ellipse 54% 56% at 50% 50%, #000 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 54% 56% at 50% 50%, #000 82%, transparent 100%);
}
.ce-formation-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: calc(var(--col-gap) * 1.5); margin-top: var(--gap-art); align-items: start; }
.ce-format-list { margin-top: 0.8em; }
.ce-format { padding-block: 1em; border-top: var(--ce-rule); }
.ce-format:last-child { border-bottom: 2px solid var(--rule-alt); }
.ce-format dd { margin: 0.35em 0 0; max-width: 34em; }
.ce-aside { display: inline-block; margin-left: 0.2em; padding: 0.05em 0.55em; border: 1.5px dashed var(--faint); font-size: var(--fs-small); font-weight: 650; color: var(--faint); white-space: nowrap; }
.ce-sheet { padding: clamp(20px, 2.4vw, 36px); background: var(--sheet); border: 2px solid var(--navy); box-shadow: 6px 6px 0 var(--magenta); }
.ce-sheet > .ce-cap { color: var(--navy); }
.ce-info-list { margin-top: 0.6em; }
.ce-info { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 0.4em 1em; padding-block: 0.7em; border-top: 1px solid var(--rule); }
.ce-info dt { font-weight: 800; }
.ce-info dd { margin: 0; font-size: var(--fs-body); }
.ce-sheet-cta { margin-top: 1.3em; }

/* ── 05 Comparatif ── */
.ce-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); margin-top: var(--gap-art); }
.ce-tool { border-top: 3px solid var(--navy); padding-top: 0.9em; }
.ce-tool:first-child { border-top-color: var(--orange); }
.ce-tool p { margin-top: 0.4em; }
.ce-compare-foot { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: calc(var(--col-gap) * 1.5); margin-top: var(--gap-art); align-items: start; }
.ce-compare-foot p { max-width: 36em; }
.ce-compare-veille { font-size: var(--fs-h3-small); font-weight: 760; font-stretch: 94%; line-height: 1.25; padding-left: 0.9em; border-left: 4px solid var(--orange); }

/* ── 06 Formateurs ── */
.ce-trainer-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); margin-top: var(--gap-art); }
.ce-trainer { display: grid; grid-template-columns: clamp(120px, 13vw, 200px) minmax(0, 1fr); gap: clamp(16px, 1.8vw, 28px); align-items: start; border-top: var(--ce-rule); padding-top: 1.2em; }
.ce-portrait { aspect-ratio: 207 / 268; border: 3px solid var(--navy); overflow: hidden; background: var(--sheet); }
.ce-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ce-portrait--empty { display: flex; align-items: center; justify-content: center; padding: 0.6em; border-style: dashed; border-color: var(--faint); }
.ce-portrait--empty .team-portrait-placeholder { text-align: center; }
.ce-trainer-role { margin-top: 0.35em; }
.ce-trainer-bio { margin-top: 0.7em; max-width: 30em; }
.ce-rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em 0.8em; margin-top: 1em; padding-top: 0.7em; border-top: 1px solid var(--rule); }
.ce-rating-value { font-weight: 800; }

/* ── 07 Avis (emplacements vides, aucun avis inventé) ── */
.ce-review-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); margin-top: var(--gap-art); }
.ce-review { display: flex; align-items: center; justify-content: center; min-height: clamp(140px, 13vw, 200px); padding: 1em; border: 2px dashed var(--faint); background: var(--sheet); }
.ce-review p { font-size: var(--fs-small); font-weight: 700; color: var(--faint); }

/* ── FAQ (structure et repli de la home : details/summary, « + / − ») ── */
.ce-faq .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.ce-faq .ce-title { font-size: clamp(32px, 3.6vw, 56px); }
.ce-faq-more { margin-top: 0.4em; }

/* ── Closing : composant de la home ; < 1200 px, il suit le flux ordinaire ── */

/* ── Responsive ── */
@media (max-width: 1100px) {
  .ce-brief-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.2em; }
  .ce-brief-item:nth-child(4) { padding-left: 0; border-left: 0; }
}
@media (max-width: 999px) {
  .ce-hero-grid, .ce-formation-top { grid-template-columns: minmax(0, 1fr); }
  .ce-hero .ce-art--hero { margin-top: var(--gap-head); }
  .ce-art--training { margin-top: var(--gap-art); max-width: 760px; justify-self: center; margin-right: 0; }
  .ce-plafond-body, .ce-formation-grid, .ce-compare-foot, .ce-faq .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .ce-trainer-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ce-brief-list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .ce-brief-item, .ce-brief-item:first-child, .ce-brief-item:nth-child(4) { padding: 0.8em 0; border-left: 0; border-top: 1px solid var(--rule-alt); }
  .ce-brief-item:first-child { border-top: 0; }
  .ce-limits, .ce-chantier-list, .ce-tools, .ce-review-list { grid-template-columns: minmax(0, 1fr); }
  .ce-row { grid-template-columns: minmax(0, 1fr); gap: 0.4em; }
  .ce-info { grid-template-columns: minmax(0, 1fr); gap: 0.15em; }
  .ce-review { min-height: 96px; }
  .ce-trainer { grid-template-columns: 112px minmax(0, 1fr); }
  .ce-art--hero { margin-left: calc(-1 * var(--pad) + 4px); margin-right: calc(-1 * var(--pad) + 4px); }
  .ce-art--hero img { -webkit-mask-image: none; mask-image: none; }
  .ce-actions .button { width: 100%; justify-content: center; }
}
@media (min-width: 1200px) {
  .ce-page .ce-section { padding-block: clamp(88px, 7.3vw, 112px); }
}
/* ── 03 Claude Team ou Enterprise : tableau Pro/Team/Enterprise (styles fcc-table), source datée, migration ── */
.ce-plans .ce-plans-table thead th:nth-child(2) { box-shadow: none; }
.ce-plans .ce-plans-table thead th:nth-child(3) { box-shadow: inset 0 -4px 0 var(--orange); }
.ce-plans .ce-plans-table tbody th { width: 16%; }
.ce-plans-src { margin-top: 0.8em; font-size: var(--fs-small); color: var(--faint); max-width: 48em; }
.ce-plans-migrate { margin-top: var(--gap-art); max-width: 46em; border-top: 3px solid var(--navy); padding-top: 0.9em; }
@media (max-width: 760px) {
  .ce-plans .ce-plans-table, .ce-plans .ce-plans-table tbody, .ce-plans .ce-plans-table tr { display: block; }
  .ce-plans .ce-plans-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ce-plans .ce-plans-table tr { border-top: 2px solid var(--navy); }
  .ce-plans .ce-plans-table tr:first-child { border-top: 0; }
  .ce-plans .ce-plans-table tbody th { display: block; width: auto; padding: 0.7em 0.8em 0.3em; border-top: 0; font-size: var(--fs-body); }
  .ce-plans .ce-plans-table td { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 0.6em; padding: 0.35em 0.8em; border-top: 1px solid var(--rule); font-size: var(--fs-small); }
  .ce-plans .ce-plans-table td:last-child { padding-bottom: 0.7em; }
  .ce-plans .ce-plans-table td::before { content: attr(data-label); font-weight: 800; }
}
/* <<< page:claude-entreprise */

/* >>> page:formation-claude-code */
/* Page SEO /formation-claude-code. Réutilise les styles ce- de /claude-entreprise (body.ce-page.fcc-page) ; ce bloc
 * n'ajoute que les composants propres (programme, livrables, tableau, pour qui, infos pratiques) + liens de copy
 * (.rich-link, home comprise) et la rangée de liens du pied de page. Aucune règle existante modifiée. */

/* Liens posés sur une sous-chaîne de copy (variant « link ») : marine, soulignement orange. */
.rich-link { color: var(--navy); font-weight: 650; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.rich-link:hover { text-decoration-thickness: 3px; }

/* Pied de page : liens vers les pages SEO publiées, sur une rangée. */
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.6em; margin: 0; }
a.ce-aside { color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange); }

/* ── Hero ── */
.fcc-hero-note { margin-top: calc(var(--gap-head) * 1.1); font-size: var(--fs-small); font-weight: 520; max-width: 34em; }
.fcc-updated { margin-top: 0.5em; font-size: var(--fs-small); font-weight: 600; color: var(--faint); }

/* ── En bref : 5 faits ── */
.fcc-page .ce-brief-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── 02 Programme : 6 modules en grille ── */
.fcc-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 3vw, 48px) var(--col-gap); margin-top: var(--gap-art); }
.fcc-module { display: flex; flex-direction: column; border-top: 3px solid var(--navy); padding-top: 0.9em; }
.fcc-module:nth-child(3n + 1) { border-top-color: var(--orange); }
.fcc-module-title { max-width: 22em; }
.fcc-points { margin-top: 0.7em; display: grid; gap: 0.5em; }
.fcc-points li { position: relative; padding-left: 1.2em; max-width: 36em; }
.fcc-points li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.65em; height: 3px; background: var(--orange); }
.fcc-practice { margin-top: auto; padding-top: 1em; }
.fcc-practice .ce-cap { display: block; padding-top: 0.7em; border-top: 1px solid var(--rule); }
.fcc-practice-text { margin-top: 0.3em; font-weight: 700; }

/* ── 03 Livrables ── */
.fcc-livrables-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--col-gap); align-items: center; }
.fcc-deliverables { margin-top: var(--gap-head); counter-reset: fcc-d; border-bottom: 2px solid var(--rule-alt); }
.fcc-deliverables li { counter-increment: fcc-d; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); align-items: baseline; padding-block: 0.75em; border-top: 2px solid var(--rule-alt); font-weight: 650; }
.fcc-deliverables li:first-child { border-top: var(--ce-rule); }
.fcc-deliverables li::before { content: counter(fcc-d, decimal-leading-zero); font-weight: 900; font-stretch: 85%; color: var(--orange-ink); }
.fcc-art--livrables img {
  -webkit-mask-image: radial-gradient(ellipse 56% 58% at 50% 50%, #000 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 56% 58% at 50% 50%, #000 82%, transparent 100%);
}

/* ── 04 Claude Code ou Cursor : tableau ── */
.fcc-table-wrap { margin-top: var(--gap-art); overflow-x: auto; }
.fcc-table { width: 100%; border-collapse: collapse; background: var(--sheet); border: 2px solid var(--navy); }
.fcc-table th, .fcc-table td { padding: 0.8em 1em; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.fcc-table thead th { border-top: 0; border-bottom: 2px solid var(--navy); font-size: var(--fs-h3-small); font-weight: 820; font-stretch: 92%; }
.fcc-table thead th:nth-child(2) { box-shadow: inset 0 -4px 0 var(--orange); }
.fcc-table tbody th { font-weight: 800; width: 18%; }

/* ── 05 Pour qui ── */
.fcc-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); margin-top: var(--gap-art); }
.fcc-who-col { border-top: 3px solid var(--navy); padding-top: 0.9em; }
.fcc-who-col--yes { border-top-color: var(--orange); }
.fcc-who-col--no .fcc-points li::before { background: var(--navy); }

/* ── 06 Informations pratiques ── */
.fcc-pratique-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: calc(var(--col-gap) * 1.5); align-items: start; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .fcc-page .ce-brief-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fcc-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .fcc-livrables-grid, .fcc-pratique-grid { grid-template-columns: minmax(0, 1fr); }
  .fcc-art--livrables { max-width: 680px; justify-self: center; }
}
@media (max-width: 760px) {
  .fcc-page .ce-brief-list { grid-template-columns: minmax(0, 1fr); }
  .fcc-modules, .fcc-who { grid-template-columns: minmax(0, 1fr); }
  .fcc-table th, .fcc-table td { padding: 0.6em 0.6em; font-size: var(--fs-small); }
  .fcc-table thead th { font-size: var(--fs-small); }
  .fcc-table tbody th { width: auto; }
}
/* <<< page:formation-claude-code */

/* >>> page:formation-claude */
/* Page SEO /formation-claude (équipes métier). Réutilise les styles ce- (/claude-entreprise) et fcc- (/formation-claude-code)
 * via body.ce-page.fcc-page.fc-page ; ce bloc n'ajoute que les sections propres (compétences, formats, seul ou en équipe).
 * Aucune règle existante modifiée. */

/* ── 01 Compétences : 5 lignes numérotées + illustration ── */
.fc-skills { margin-top: var(--gap-head); counter-reset: fc-s; border-bottom: 2px solid var(--rule-alt); }
.fc-skill { counter-increment: fc-s; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); column-gap: 0; padding-block: 0.75em; border-top: 2px solid var(--rule-alt); }
.fc-skill:first-child { border-top: var(--ce-rule); }
.fc-skill::before { content: counter(fc-s, decimal-leading-zero); grid-row: span 2; font-weight: 900; font-stretch: 85%; color: var(--orange-ink); line-height: 1.25; }
.fc-skill p { margin-top: 0.2em; max-width: 36em; }
.fc-art--controle img {
  -webkit-mask-image: radial-gradient(ellipse 56% 58% at 50% 50%, #000 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 56% 58% at 50% 50%, #000 82%, transparent 100%);
}

/* ── 02 Programme : 5 modules (3 + 2) ── */
.fc-page .fcc-modules { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fc-page .fcc-module { grid-column: span 2; }
.fc-page .fcc-module:nth-child(4) { grid-column: 2 / span 2; }

/* ── 05 Seul ou en équipe : la colonne marquée est celle de Kailli (3e) ── */
.fc-seul .fcc-table thead th:nth-child(2) { box-shadow: none; }
.fc-seul .fcc-table thead th:nth-child(3) { box-shadow: inset 0 -4px 0 var(--orange); }
.fc-seul-lead { margin-top: var(--gap-head); max-width: 38em; }
.fc-seul-foot { margin-top: var(--gap-art); max-width: 36em; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .fc-page .fcc-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-page .fcc-module, .fc-page .fcc-module:nth-child(4) { grid-column: auto; }
}
@media (max-width: 999px) {
  .fc-art--controle { max-width: 680px; justify-self: center; }
}
@media (max-width: 760px) {
  .fc-page .fcc-modules { grid-template-columns: minmax(0, 1fr); }
}
/* <<< page:formation-claude */

/* >>> page:claude-vs-chatgpt */
/* Page SEO /claude-vs-chatgpt (comparatif). Réutilise les styles ce- (/claude-entreprise) et fcc- (tableau, points, hero)
 * via body.ce-page.fcc-page.cvc-page ; ce bloc n'ajoute que le tableau à 4 colonnes, les cartes par tâche et les duels.
 * Aucune règle existante modifiée. */

/* Fil d'Ariane : niveau sans page (« Ressources ») en texte simple, comme le niveau courant. */
.ce-crumbs-list [data-crumb-static] { color: var(--faint); min-height: 44px; }

/* ── 01 Tableau : 3 outils, aucune colonne mise en avant (pas de gagnant) ── */
.cvc-compare thead th:nth-child(2) { box-shadow: none; }
.cvc-compare tbody th { width: 15%; }
.cvc-compare td { width: 28.3%; }
.cvc-src { max-width: 52em; }

/* ── Sections texte : chapô, paragraphes, cartes par tâche ── */
.cvc-body { display: grid; gap: 1.1em; margin-top: var(--gap-head); }
.cvc-text { max-width: 40em; }
.cvc-legal { font-size: var(--fs-small); color: var(--faint); font-weight: 600; }
.cvc-points { margin-top: 0; }
.cvc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 2.6vw, 40px) var(--col-gap); margin-top: calc(var(--gap-art) - 1.1em); }
.cvc-group { border-top: 3px solid var(--navy); padding-top: 0.9em; }
.cvc-cards .cvc-group:nth-child(3n + 1) { border-top-color: var(--orange); }
.cvc-group p { margin-top: 0.4em; max-width: 36em; }
.cvc-groups { display: grid; gap: 1.2em; }
.cvc-groups .cvc-group { max-width: 44em; }
.cvc-duel .cvc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* CTA intermédiaire (« Vous avez déjà choisi ? ») : feuille à ombre magenta, texte marine. */
.cvc-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: var(--gap-art); }
.cvc-cta-text { font-size: var(--fs-h3-small); font-weight: 760; font-stretch: 94%; line-height: 1.25; max-width: 28em; }

/* Méthode + signature */
.cvc-one .cvc-groups { margin-top: var(--gap-art); }
.cvc-one .cvc-group { padding: clamp(20px, 2.4vw, 32px); background: var(--sheet); border: 2px solid var(--navy); border-top-width: 2px; box-shadow: 6px 6px 0 var(--orange); }
.cvc-author { margin-top: 1em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.6em; }
.cvc-author-name { font-weight: 800; }
.cvc-author-role { color: var(--faint); font-size: var(--fs-small); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .cvc-cards, .cvc-duel .cvc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cvc-cards, .cvc-duel .cvc-cards { grid-template-columns: minmax(0, 1fr); }
  /* Tableau en cartes : une ligne = un critère, libellé de colonne (data-label) affiché par CSS. */
  .cvc-compare, .cvc-compare tbody, .cvc-compare tr { display: block; }
  .cvc-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cvc-compare tr { border-top: 2px solid var(--navy); }
  .cvc-compare tr:first-child { border-top: 0; }
  .cvc-compare tbody th { display: block; width: auto; padding: 0.7em 0.8em 0.3em; border-top: 0; font-size: var(--fs-body); }
  .cvc-compare td { display: grid; width: auto; grid-template-columns: 5.5em minmax(0, 1fr); gap: 0.6em; padding: 0.35em 0.8em; border-top: 1px solid var(--rule); font-size: var(--fs-small); }
  .cvc-compare td:last-child { padding-bottom: 0.7em; }
  .cvc-compare td::before { content: attr(data-label); font-weight: 800; }
  .cvc-cta { flex-direction: column; align-items: flex-start; }
}
/* <<< page:claude-vs-chatgpt */

/* >>> page:charte-ia */
/* Page SEO /charte-ia (guide + modèle). Réutilise les styles ce- (/claude-entreprise) et fcc- (hero, points, date)
 * via body.ce-page.fcc-page.ci-page ; ce bloc n'ajoute que les cartes, les étapes, la feuille du modèle et le bouton
 * « Copier ». Aucune règle existante modifiée. */

/* Fil d'Ariane : niveau sans page (« Ressources ») en texte simple (même règle que page:claude-vs-chatgpt). */
.ci-page .ce-crumbs-list [data-crumb-static] { color: var(--faint); min-height: 44px; }

/* ── Sections texte ── */
.ci-body { display: grid; gap: 1.1em; margin-top: var(--gap-head); }
.ci-text { max-width: 40em; }
.ci-points { margin-top: 0; }
.ci-src { font-size: var(--fs-small); color: var(--faint); }
.ci-legal { justify-self: start; max-width: 40em; padding: 0.7em 1em; border: 2px dashed var(--navy); font-size: var(--fs-small); font-weight: 650; }
.ci-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 2.6vw, 40px) var(--col-gap); }
.ci-group { border-top: 3px solid var(--navy); padding-top: 0.9em; }
.ci-cards .ci-group:first-child { border-top-color: var(--orange); }
.ci-group p { margin-top: 0.4em; max-width: 36em; }

/* ── 03 Modèle : une feuille (papier clair, ombre orange), deux colonnes de rubriques sur grand écran ── */
.ci-model-wrap { margin-top: var(--gap-head); }
.ci-copy-row { margin-bottom: 1rem; }
.ci-copy[hidden] { display: none; }
.ci-copy { position: relative; background: var(--sheet); border: 2px solid var(--navy); color: var(--navy); }
.ci-copy.is-copied::after { content: "\2713"; margin-left: 0.5em; font-weight: 800; }
.ci-model { padding: clamp(22px, 3vw, 48px); background: var(--sheet); border: 2px solid var(--navy); box-shadow: 8px 8px 0 var(--orange); columns: 2 22em; column-gap: calc(var(--col-gap) * 1.4); }
.ci-model-title { column-span: all; font-size: var(--fs-h3); font-weight: 800; font-stretch: 94%; line-height: 1.15; }
.ci-model-meta { column-span: all; margin: 0.5em 0 1.4em; padding-bottom: 1em; border-bottom: 1px solid var(--rule); font-size: var(--fs-small); color: var(--faint); font-weight: 600; }
.ci-rubrique { break-inside: avoid; padding-bottom: 1.1em; }
.ci-rubrique-title { margin-bottom: 0.35em; }
.ci-rubrique-list { display: grid; gap: 0.35em; }
.ci-rubrique-list li { position: relative; padding-left: 1.1em; }
.ci-rubrique-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.55em; height: 3px; background: var(--navy); }

/* ── 04 Étapes : liste ordonnée, numéros dessinés en CSS (compteur, pas de texte de copy) ── */
.ci-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--col-gap); counter-reset: ci-step; }
.ci-step { counter-increment: ci-step; }
.ci-step .ci-group-title::before { content: counter(ci-step); display: grid; place-items: center; width: 1.9em; height: 1.9em; margin-bottom: 0.5em; border-radius: 50%; background: var(--orange); color: var(--navy); font-weight: 800; }
.ci-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: calc(var(--gap-art) - 1.1em); }
.ci-cta-text { font-size: var(--fs-h3-small); font-weight: 760; font-stretch: 94%; line-height: 1.25; max-width: 28em; }

/* ── 05 Erreurs + signature ── */
.ci-erreurs .ci-points li::before { background: var(--magenta); }
.ci-author { margin-top: 0.6em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.6em; }
.ci-author-name { font-weight: 800; }
.ci-author-role { color: var(--faint); font-size: var(--fs-small); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .ci-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ci-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ci-cards, .ci-steps { grid-template-columns: minmax(0, 1fr); }
  .ci-model { columns: auto; box-shadow: 5px 5px 0 var(--orange); }
  .ci-cta { flex-direction: column; align-items: flex-start; }
}
/* <<< page:charte-ia */

/* >>> page:a-propos */
/* Page entité /a-propos. Réutilise les styles ce- (/claude-entreprise : hero, en bref, formateurs, feuille) et fcc-
 * (hero, points, date) via body.ce-page.fcc-page.ap-page ; ce bloc n'ajoute que les colonnes, les étapes de la méthode,
 * la fiche d'identité légale et la grille de l'équipe à trois. Aucune règle existante modifiée. */

/* ── Sections texte ── */
.ap-body { display: grid; gap: 1.1em; margin-top: var(--gap-head); }
.ap-text { max-width: 40em; }
.ap-points { margin-top: 0; }
.ap-src { font-size: var(--fs-small); color: var(--faint); }
.ap-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 2.6vw, 40px) var(--col-gap); }
.ap-group { border-top: 3px solid var(--navy); padding-top: 0.9em; }
.ap-cards .ap-group:first-child { border-top-color: var(--orange); }
.ap-group > p { margin-top: 0.4em; max-width: 36em; }
.ap-perimetre .ap-group:last-child .fcc-points li::before { background: var(--navy); }

/* ── 02 Méthode : liste ordonnée, numéros dessinés en CSS (compteur, pas de texte de copy) ── */
.ap-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); counter-reset: ap-step; }
.ap-step { counter-increment: ap-step; border-top: 3px solid var(--navy); padding-top: 0.9em; }
.ap-step .ap-group-title::before { content: counter(ap-step); display: grid; place-items: center; width: 1.9em; height: 1.9em; margin-bottom: 0.5em; border-radius: 50%; background: var(--orange); color: var(--navy); font-weight: 800; }
.ap-more { font-weight: 650; }
.ap-more .rich-link { display: inline-block; min-height: 44px; padding-block: 0.6em; }

/* ── 03 Équipe : trois cartes ── */
.ap-team .ap-team-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ap-team .ce-trainer { grid-template-columns: minmax(0, 1fr); align-content: start; scroll-margin-top: 2rem; }
.ap-team .ce-portrait { max-width: 200px; }
.ap-team .ce-portrait--empty { aspect-ratio: 414 / 536; }

/* ── 06 Identité légale : fiche ── */
.ap-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em var(--col-gap); padding: clamp(18px, 2.4vw, 32px); max-width: 64em; }
.ap-fact dt { font-size: var(--fs-small); color: var(--faint); font-weight: 650; }
.ap-fact dd { margin-top: 0.15em; font-weight: 750; }
.ap-mentions .ap-text .rich-link { display: inline-block; min-height: 44px; padding-block: 0.6em; }

/* En bref : 9 faits sur 3 colonnes (le gabarit fcc- en prévoit 4 ou 8). */
@media (min-width: 1101px) {
  .ap-page .ce-brief-list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.2em; }
  .ap-page .ce-brief-item:nth-child(3n+1) { padding-left: 0; border-left: 0; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .ap-page .ce-brief-item:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .ap-steps, .ap-team .ap-team-list { grid-template-columns: minmax(0, 1fr); }
  .ap-team .ce-trainer { grid-template-columns: 112px minmax(0, 1fr); }
  .ap-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ap-cards, .ap-facts { grid-template-columns: minmax(0, 1fr); }
}
/* <<< page:a-propos */

/* >>> page:claude-cowork-entreprise */
/* Page SEO /claude-cowork-entreprise (guide). Réutilise les styles ce- (/claude-entreprise), fcc- (hero, points, date) et
 * cvc- (tableau en cartes sur mobile) via body.ce-page.fcc-page.cvc-page.cw-page ; ce bloc n'ajoute que les cartes, la
 * limite, le CTA et la signature. Aucune règle existante modifiée. */

/* ── Sections texte ── */
.cw-body { display: grid; gap: 1.1em; margin-top: var(--gap-head); }
.cw-text { max-width: 40em; }
.cw-points { margin-top: 0; }
.cw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 2.6vw, 40px) var(--col-gap); }
.cw-group { border-top: 3px solid var(--navy); padding-top: 0.9em; }
.cw-cards .cw-group:nth-child(3n + 1) { border-top-color: var(--orange); }
.cw-group p { margin-top: 0.4em; max-width: 36em; }
.cw-rules .cw-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 01 Définition : la limite, encadré pointillé (texte marine) */
.cw-limit { justify-self: start; max-width: 44em; margin-top: 0.4em; padding: 0.8em 1.1em; border: 2px dashed var(--navy); font-weight: 650; }

/* 02 Tableau : 3 colonnes, Cowork mis en avant par un filet orange (pas de texte coloré) */
.cw-compare thead th:nth-child(3) { box-shadow: inset 0 -4px 0 var(--orange); }
.cw-next { margin-top: 1.1em; }

/* 06 Règles : mention légale + CTA intermédiaire (feuille à ombre, texte marine) */
.cw-legal { justify-self: start; font-size: var(--fs-small); color: var(--faint); font-weight: 600; }
.cw-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.cw-cta-text { font-size: var(--fs-h3-small); font-weight: 760; font-stretch: 94%; line-height: 1.25; max-width: 28em; }

/* 07 Former : lien vers la formation, méthode, signature */
.cw-more { margin: 0; }
.cw-method { font-size: var(--fs-small); color: var(--faint); font-weight: 600; }
.cw-author { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.6em; }
.cw-author-name { font-weight: 800; }
.cw-author-role { color: var(--faint); font-size: var(--fs-small); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .cw-cards, .cw-rules .cw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cw-cards, .cw-rules .cw-cards { grid-template-columns: minmax(0, 1fr); }
  .cw-compare thead th:nth-child(3) { box-shadow: none; }
  .cw-cta { flex-direction: column; align-items: flex-start; }
}
/* <<< page:claude-cowork-entreprise */

/* >>> page:cabinet-conseil-ia */
/* Page offre /cabinet-conseil-ia. Réutilise les styles ce- (/claude-entreprise), fcc- (hero, points, date, tableau) et
 * cvc- (tableau en cartes sur mobile) via body.ce-page.fcc-page.cvc-page.cc-page ; ce bloc n'ajoute que les étapes, les
 * cartes, la fiche de décision et les colonnes du tableau à quatre acteurs. Aucune règle existante modifiée. */

/* ── Sections texte ── */
.cc-body { display: grid; gap: 1.1em; margin-top: var(--gap-head); }
.cc-text { max-width: 40em; }
.cc-points { margin-top: 0; max-width: 46em; }
.cc-aside { font-size: var(--fs-small); color: var(--faint); font-weight: 600; }
.cc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 2.6vw, 40px) var(--col-gap); }
.cc-group { border-top: 3px solid var(--navy); padding-top: 0.9em; }
.cc-cards .cc-group:first-child { border-top-color: var(--orange); }
.cc-group > p { margin-top: 0.4em; max-width: 36em; }

/* ── 02 Méthode : liste ordonnée, numéros dessinés en CSS (compteur, pas de texte de copy) ; « Vous recevez » en gras ── */
.cc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); counter-reset: cc-step; }
.cc-step { counter-increment: cc-step; border-top: 3px solid var(--navy); padding-top: 0.9em; }
.cc-step .cc-group-title::before { content: counter(cc-step); display: grid; place-items: center; width: 1.9em; height: 1.9em; margin-bottom: 0.5em; border-radius: 50%; background: var(--orange); color: var(--navy); font-weight: 800; }
.cc-step .cc-get { font-weight: 700; padding-left: 0.8em; border-left: 3px solid var(--magenta); }

/* Exemple de décision écrite (feuille à ombre, texte marine ; mention « exemple illustratif » discrète) */
.cc-decision { justify-self: start; width: 100%; max-width: 46em; margin-top: 0.6em; padding: clamp(18px, 2.4vw, 30px); }
.cc-dec-tag { font-size: var(--fs-small); color: var(--faint); font-weight: 650; }
.cc-dec-title { margin-top: 0.3em; font-weight: 800; }
.cc-dec-list { display: grid; gap: 0.5em; margin-top: 0.8em; }
.cc-dec-row { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 1em; padding-top: 0.5em; border-top: 1px solid var(--rule); }
.cc-dec-row dt { font-weight: 800; }

/* ── 03 Tableau : 4 acteurs, le cabinet mis en avant par un filet orange (pas de texte coloré) ── */
.cc-compare thead th:nth-child(2) { box-shadow: inset 0 -4px 0 var(--orange); }
.cc-compare tbody th { width: 16%; }
.cc-compare td { width: 21%; }
.cc-next { margin-top: 1.1em; font-weight: 650; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .cc-steps { grid-template-columns: minmax(0, 1fr); }
  .cc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cc-cards { grid-template-columns: minmax(0, 1fr); }
  .cc-compare thead th:nth-child(2) { box-shadow: none; }
  .cc-compare tbody th, .cc-compare td { width: auto; }
  .cc-dec-row { grid-template-columns: minmax(0, 1fr); gap: 0.2em; }
  .cc-compare td { grid-template-columns: 7.2em minmax(0, 1fr); }
}
/* <<< page:cabinet-conseil-ia */

/* >>> page:formation-ia-entreprise */
/* Hub formation /formation-ia-entreprise. Réutilise les styles ce- (/claude-entreprise), fcc- (hero, points, date, tableau,
 * note du hero) et cvc- (tableaux en cartes sur mobile) via body.ce-page.fcc-page.cvc-page.fi-page ; ce bloc n'ajoute que
 * les cartes de formations, les étapes, la fiche prix et les colonnes des deux tableaux. Aucune règle existante modifiée. */

/* ── Sections texte ── */
.fi-body { display: grid; gap: 1.1em; margin-top: var(--gap-head); }
.fi-text { max-width: 40em; }
.fi-points { margin-top: 0; max-width: 46em; }
.fi-aside { font-size: var(--fs-small); color: var(--faint); font-weight: 600; }

/* ── 02 Formations : 4 cartes (public en capitale discrète, lien vers la page fille, carte « à venir » sans lien) ── */
.fi-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(26px, 2.6vw, 40px) var(--col-gap); }
.fi-card { border-top: 3px solid var(--navy); padding-top: 0.9em; }
.fi-cards .fi-card:first-child, .fi-cards .fi-card:nth-child(2) { border-top-color: var(--orange); }
.fi-card > p { margin-top: 0.4em; max-width: 36em; }
.fi-card .fi-for { margin-top: 0.2em; font-size: var(--fs-small); font-weight: 750; color: var(--faint); }
.fi-card .fi-more { margin-top: 0.6em; }
.fi-card .fi-more .rich-link { display: inline-block; min-height: 44px; padding-block: 0.6em; }
.fi-card .fi-soon { margin-top: 0.6em; font-size: var(--fs-small); font-weight: 650; color: var(--faint); }

/* ── 04 Déroulé : liste ordonnée, numéros dessinés en CSS (compteur, pas de texte de copy) ── */
.fi-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); counter-reset: fi-step; }
.fi-step { counter-increment: fi-step; }
.fi-step .fi-card-title::before { content: counter(fi-step); display: grid; place-items: center; width: 1.9em; height: 1.9em; margin-bottom: 0.5em; border-radius: 50%; background: var(--orange); color: var(--navy); font-weight: 800; }

/* ── 05 Prix et financement : fiche ── */
.fi-sheet { justify-self: start; width: 100%; max-width: 52em; }
.fi-sheet .rich-link { display: inline; }

/* ── 03 / 06 Tableaux : 2 ou 3 colonnes ── */
.fi-choose .fi-compare tbody th { width: 62%; font-weight: 650; }
.fi-choose .fi-compare td { font-weight: 800; }
.fi-format .fi-compare tbody th { width: 22%; }
.fi-next { margin-top: 1.1em; font-weight: 650; }
.fi-next .rich-link, .fi-steps .rich-link { display: inline-block; min-height: 44px; padding-block: 0.6em; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .fi-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fi-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .fi-cards { grid-template-columns: minmax(0, 1fr); }
  .fi-choose .fi-compare tbody th, .fi-format .fi-compare tbody th { width: auto; }
  .fi-compare td { grid-template-columns: 7.2em minmax(0, 1fr); }
}
/* <<< page:formation-ia-entreprise */

/* >>> page:cursor-vs-claude-code */
/* Page SEO /cursor-vs-claude-code (comparatif). Réutilise les styles ce- (/claude-entreprise), fcc- (hero, points, date) et
 * cvc- (tableau en cartes sur mobile, cartes, CTA, signature) via body.ce-page.fcc-page.cvc-page.cvx-page ; ce bloc
 * n'ajoute que le tableau à 2 colonnes, la grille de la section 01 et le lien vers la formation. Aucune règle existante modifiée. */

/* 02 Tableau : 2 outils, aucune colonne mise en avant (pas de gagnant) */
.cvx-compare thead th:nth-child(2) { box-shadow: none; }
@media (min-width: 761px) {
  .cvx-compare tbody th { width: 18%; }
  .cvx-compare td { width: 41%; }
}

/* 01 Éditeur ou agent : trois cartes */
.cvx-two .cvc-cards { margin-top: 0; }

/* 05 En équipe : lien vers la formation sous la liste */
.cvx-more { margin: 0; }
.cvx-team .cvc-points { max-width: 46em; }
/* <<< page:cursor-vs-claude-code */

/* >>> page:shadow-ia */
/* Page SEO /shadow-ia (guide risque → méthode). Réutilise les styles ce- (/claude-entreprise), fcc- (hero, tableau, points,
 * date) et ci- (sections, étapes numérotées, CTA, signature, encadré juridique) via body.ce-page.fcc-page.ci-page.si-page ;
 * ce bloc n'ajoute que le tableau shadow IT / shadow IA, la statistique sourcée et la note « ce qu'on surestime ».
 * Aucune règle existante modifiée. */

/* ── 01 Définition : tableau à 2 colonnes, aucune mise en avant de colonne ── */
.si-compare thead th:nth-child(2) { box-shadow: none; }
.si-compare thead th:nth-child(3) { box-shadow: inset 0 -4px 0 var(--orange); }
@media (min-width: 761px) {
  .si-compare tbody th { width: 20%; }
  .si-compare td { width: 40%; }
}

/* ── 02 Statistique sourcée : filet orange à gauche, texte marine ── */
.si-stat { max-width: 40em; padding-left: 1em; border-left: 4px solid var(--orange); font-size: var(--fs-small); font-weight: 560; }

/* ── 03 Risques : quatre cartes, puis « ce qu'on surestime » sur feuille ── */
.si-risks .ci-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.si-over { max-width: 44em; padding: 0.9em 1.1em; background: var(--sheet); border: 2px solid var(--navy); box-shadow: 5px 5px 0 var(--magenta); font-weight: 560; }

/* ── 05 Gouvernance : liste des rôles puis paragraphe ── */
.si-gov .ci-text { max-width: 44em; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .si-risks .ci-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .si-risks .ci-cards { grid-template-columns: minmax(0, 1fr); }
  .si-over { box-shadow: 4px 4px 0 var(--magenta); }
  /* Tableau en cartes : une ligne = un critère, libellé de colonne (data-label) affiché par CSS. */
  .si-compare, .si-compare tbody, .si-compare tr { display: block; }
  .si-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .si-compare tr { border-top: 2px solid var(--navy); }
  .si-compare tr:first-child { border-top: 0; }
  .si-compare tbody th { display: block; width: auto; padding: 0.7em 0.8em 0.3em; border-top: 0; font-size: var(--fs-body); }
  .si-compare td { display: grid; width: auto; grid-template-columns: 5.5em minmax(0, 1fr); gap: 0.6em; padding: 0.35em 0.8em; border-top: 1px solid var(--rule); font-size: var(--fs-small); }
  .si-compare td:last-child { padding-bottom: 0.7em; }
  .si-compare td::before { content: attr(data-label); font-weight: 800; }
}
/* <<< page:shadow-ia */

/* >>> page:formation-agents-ia */
/* Page SEO /formation-agents-ia. Réutilise les styles ce- (/claude-entreprise), fcc- (hero, programme, pratique, tableau)
 * et cvc- (tableau à 4 colonnes, lignes en cartes sur mobile) via body.ce-page.fcc-page.cvc-page.fa-page ; ce bloc n'ajoute
 * que la colonne « Agent IA » marquée, les deux parcours et la liste des systèmes internes. Aucune règle existante modifiée. */

/* ── 01 Définition : la colonne marquée est celle de l'agent (4e) ── */
.fa-compare thead th:nth-child(4) { box-shadow: inset 0 -4px 0 var(--orange); }
.fa-def-foot { margin-top: var(--gap-art); max-width: 40em; font-weight: 650; }

/* ── 02 Programme : 5 objectifs (3 + 2), comme /formation-claude ── */
.fa-page .fcc-modules { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fa-page .fcc-module { grid-column: span 2; }
.fa-page .fcc-module:nth-child(4) { grid-column: 2 / span 2; }

/* ── 03 Deux parcours ── */
.fa-tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fa-tracks .rich-link { display: inline; }
.fa-parcours-foot { margin-top: var(--gap-art); max-width: 40em; font-weight: 650; }

/* ── 04 Chez nous : trois systèmes, puis lien vers la home ── */
.fa-systems { margin-top: var(--gap-head); max-width: 46em; }
.fa-systemes-more { margin-top: 1.1em; font-weight: 650; }
.fa-systemes-more .rich-link { display: inline-block; min-height: 44px; padding-block: 0.6em; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .fa-page .fcc-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fa-page .fcc-module, .fa-page .fcc-module:nth-child(4) { grid-column: auto; }
}
@media (max-width: 760px) {
  .fa-page .fcc-modules, .fa-tracks { grid-template-columns: minmax(0, 1fr); }
  .fa-compare td { grid-template-columns: 8.6em minmax(0, 1fr); }
}
/* <<< page:formation-agents-ia */

/* >>> page:poc-ia */
/* Page SEO /poc-ia (guide méthode). Réutilise les styles ce- (/claude-entreprise), fcc- (hero, tableau, points, date),
 * ci- (sections, cartes, CTA, signature) et cc- (fiche de décision) via body.ce-page.fcc-page.ci-page.pi-page ; ce bloc
 * n'ajoute que les deux tableaux, la fiche POC et la grille des causes. Aucune règle existante modifiée. */

/* ── Fil d'Ariane : « Ressources » sans page ── */
.pi-page .ce-crumbs-list [data-crumb-static] { color: var(--faint); min-height: 44px; }

/* ── Fiche de décision (copie des règles cc-, page cabinet-conseil-ia) ── */
.pi-page .cc-decision { justify-self: start; width: 100%; max-width: 46em; margin-top: 0.6em; padding: clamp(18px, 2.4vw, 30px); }
.pi-page .cc-dec-tag { font-size: var(--fs-small); color: var(--faint); font-weight: 650; }
.pi-page .cc-dec-title { margin-top: 0.3em; font-weight: 800; }
.pi-page .cc-dec-list { display: grid; gap: 0.5em; margin-top: 0.8em; }
.pi-page .cc-dec-row { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 1em; padding-top: 0.5em; border-top: 1px solid var(--rule); }
.pi-page .cc-dec-row dt { font-weight: 800; }

/* ── 02 Causes : quatre cartes ── */
.pi-why .ci-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── 03 Fiche POC : feuille à ombre orange, lignes libellé / consigne ── */
.pi-sheet { justify-self: start; width: 100%; max-width: 52em; box-shadow: 8px 8px 0 var(--orange); scroll-margin-top: 90px; }
.pi-sheet-title { font-weight: 800; padding-bottom: 0.6em; border-bottom: 2px solid var(--navy); }
.pi-sheet-list { display: grid; gap: 0; margin-top: 0.4em; }
.pi-sheet-row { display: grid; grid-template-columns: 12em minmax(0, 1fr); gap: 1em; padding: 0.65em 0; border-top: 1px solid var(--rule); }
.pi-sheet-row:first-child { border-top: 0; }
.pi-sheet-row dt { font-weight: 800; }
.pi-sheet-row dt::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.5em; border: 2px solid var(--navy); vertical-align: -0.05em; }

/* ── Tableaux : POC/pilote/MVP (01, colonne POC soulignée), indicateurs (05) ── */
.pi-def .pi-compare thead th:nth-child(2) { box-shadow: inset 0 -4px 0 var(--orange); }
.pi-roi .pi-compare thead th:nth-child(2) { box-shadow: none; }
.pi-table-wrap { margin-top: 0; }
@media (min-width: 761px) {
  .pi-def .pi-compare tbody th { width: 16%; }
  .pi-def .pi-compare td { width: 28%; }
  .pi-roi .pi-compare tbody th { width: 18%; }
  .pi-roi .pi-compare td { width: 41%; }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .pi-why .ci-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pi-why .ci-cards { grid-template-columns: minmax(0, 1fr); }
  .pi-sheet { box-shadow: 5px 5px 0 var(--orange); }
  .pi-sheet-row, .pi-page .cc-dec-row { grid-template-columns: minmax(0, 1fr); gap: 0.2em; }
  /* Tableaux en cartes : une ligne = un critère, libellé de colonne (data-label) affiché par CSS. */
  .pi-compare, .pi-compare tbody, .pi-compare tr { display: block; }
  .pi-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pi-compare tr { border-top: 2px solid var(--navy); }
  .pi-compare tr:first-child { border-top: 0; }
  .pi-compare tbody th { display: block; width: auto; padding: 0.7em 0.8em 0.3em; border-top: 0; font-size: var(--fs-body); }
  .pi-compare td { display: grid; width: auto; grid-template-columns: 6.5em minmax(0, 1fr); gap: 0.6em; padding: 0.35em 0.8em; border-top: 1px solid var(--rule); font-size: var(--fs-small); }
  .pi-compare td:last-child { padding-bottom: 0.7em; }
  .pi-compare td::before { content: attr(data-label); font-weight: 800; }
}
/* <<< page:poc-ia */

/* >>> page:ia-rgpd */
/* Page SEO /ia-rgpd (guide conformité). Réutilise les styles ce- (/claude-entreprise), fcc- (hero, tableau, points, date)
 * et ci- (sections, cartes, CTA, signature, sources, encadré juridique) via body.ce-page.fcc-page.ci-page.ir-page ; ce bloc
 * n'ajoute que la grille des cartes, le tableau données × offres et la checklist. Aucune règle existante modifiée. */

/* ── Fil d'Ariane : « Ressources » sans page ── */
.ir-page .ce-crumbs-list [data-crumb-static] { color: var(--faint); min-height: 44px; }

/* ── 01 Cadre (5 cartes) et 04 Réglages (6 cartes) ── */
.ir-frame .ci-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ir-points .ci-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ir-note { max-width: 46em; }

/* ── 06 Checklist : feuille à ombre orange, lignes étape / consigne ── */
.ir-sheet { justify-self: start; width: 100%; max-width: 52em; box-shadow: 8px 8px 0 var(--orange); scroll-margin-top: 90px; }
.ir-sheet-title { font-weight: 800; padding-bottom: 0.6em; border-bottom: 2px solid var(--navy); }
.ir-sheet-list { display: grid; gap: 0; margin-top: 0.4em; }
.ir-sheet-row { display: grid; grid-template-columns: 12em minmax(0, 1fr); gap: 1em; padding: 0.65em 0; border-top: 1px solid var(--rule); }
.ir-sheet-row:first-child { border-top: 0; }
.ir-sheet-row dt { font-weight: 800; }
.ir-sheet-row dt::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.5em; border: 2px solid var(--navy); vertical-align: -0.05em; }

/* ── 03 Tableau données × offres : colonne « offre professionnelle » soulignée ── */
.ir-data .ir-compare thead th:nth-child(3) { box-shadow: inset 0 -4px 0 var(--orange); }
.ir-table-wrap { margin-top: 0; }
@media (min-width: 761px) {
  .ir-data .ir-compare tbody th { width: 36%; }
  .ir-data .ir-compare td:nth-of-type(1) { width: 24%; }
  .ir-data .ir-compare td:nth-of-type(2) { width: 40%; }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .ir-frame .ci-cards, .ir-points .ci-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ir-frame .ci-cards, .ir-points .ci-cards { grid-template-columns: minmax(0, 1fr); }
  .ir-sheet { box-shadow: 5px 5px 0 var(--orange); }
  .ir-sheet-row { grid-template-columns: minmax(0, 1fr); gap: 0.2em; }
  /* Tableau en cartes : une ligne = un type de donnée, libellé de colonne (data-label) affiché par CSS. */
  .ir-compare, .ir-compare tbody, .ir-compare tr { display: block; }
  .ir-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ir-compare tr { border-top: 2px solid var(--navy); }
  .ir-compare tr:first-child { border-top: 0; }
  .ir-compare tbody th { display: block; width: auto; padding: 0.7em 0.8em 0.3em; border-top: 0; font-size: var(--fs-body); }
  .ir-compare td { display: grid; width: auto; grid-template-columns: 9em minmax(0, 1fr); gap: 0.6em; padding: 0.35em 0.8em; border-top: 1px solid var(--rule); font-size: var(--fs-small); }
  .ir-compare td:last-child { padding-bottom: 0.7em; }
  .ir-compare td::before { content: attr(data-label); font-weight: 800; }
}
/* <<< page:ia-rgpd */

/* >>> page:veille-ia */
/* Page SEO /veille-ia (sommaire du blog de veille) et gabarit des notes /veille-ia/<slug>. Réutilise les styles ce-
 * (/claude-entreprise), fcc- (hero, tableau, points, date) et ci- (sections, cartes, signature) via
 * body.ce-page.fcc-page.ci-page.vi-page ; ce bloc n'ajoute que les cartes de méthode, le tableau des verdicts, la fiche
 * type, la liste des notes (ou son état vide) et la mise en page d'une note. Aucune règle existante modifiée. */

/* ── 01 Méthode (4 cartes) ── */
.vi-method .ci-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── 02 Verdicts : pastille de couleur par verdict (sur le libellé, texte marine) ── */
.vi-verdicts .vi-compare tbody th::before,
.vi-verdict::before { content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.45em; border: 2px solid var(--navy); border-radius: 50%; vertical-align: -0.02em; }
.vi-verdicts .vi-compare tbody tr:nth-child(2) th::before, .vi-verdict[data-verdict="eprouve"]::before { background: var(--cream); }
.vi-verdicts .vi-compare tbody tr:nth-child(3) th::before, .vi-verdict[data-verdict="compare"]::before { background: var(--orange); }
.vi-verdicts .vi-compare tbody tr:nth-child(4) th::before, .vi-verdict[data-verdict="optimise"]::before { background: var(--magenta); }
.vi-verdicts .vi-compare tbody tr:nth-child(1) th::before, .vi-verdict[data-verdict="non-retenu"]::before { background: var(--rule); }
.vi-table-wrap { margin-top: 0; }
@media (min-width: 761px) {
  .vi-verdicts .vi-compare tbody th { width: 18%; }
  .vi-verdicts .vi-compare td:nth-of-type(1) { width: 46%; }
}
.vi-verdict { font-weight: 800; white-space: nowrap; }

/* ── 03 Fiche type d'une note ── */
.vi-sheet { justify-self: start; width: 100%; max-width: 52em; box-shadow: 8px 8px 0 var(--orange); scroll-margin-top: 90px; }
.vi-sheet-title { font-weight: 800; padding-bottom: 0.6em; border-bottom: 2px solid var(--navy); }
.vi-sheet-list { display: grid; gap: 0; margin-top: 0.4em; }
.vi-sheet-row { display: grid; grid-template-columns: 14em minmax(0, 1fr); gap: 1em; padding: 0.65em 0; border-top: 1px solid var(--rule); }
.vi-sheet-row:first-child { border-top: 0; }
.vi-sheet-row dt { font-weight: 800; }
.vi-rythm { color: var(--faint); font-size: var(--fs-small); font-weight: 600; }

/* ── 04 Notes : liste datée, ou état vide (feuille) ── */
.vi-list { display: grid; gap: 0; max-width: 52em; }
.vi-note { padding: 1.1em 0; border-top: 1px solid var(--rule); }
.vi-note:first-child { border-top: 2px solid var(--navy); }
.vi-note-title a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.vi-note-meta { margin-top: 0.35em; display: flex; flex-wrap: wrap; gap: 0.2em 0.6em; font-size: var(--fs-small); font-weight: 600; color: var(--faint); }
.vi-note-meta .vi-verdict { color: var(--navy); }
.vi-note-reason { margin-top: 0.35em; max-width: 40em; }
.vi-empty-sheet { justify-self: start; max-width: 46em; display: grid; gap: 0.7em; }
.vi-empty { font-weight: 700; }
.vi-empty-links { margin-top: 0; }

/* ── Note /veille-ia/<slug> ── */
.vn-article { padding-top: clamp(16px, 2vw, 28px); }
.vn-shell { max-width: 52em; display: grid; gap: clamp(22px, 2.6vw, 36px); }
.vn-title { font-size: clamp(34px, 4.4vw, 64px); font-weight: 900; font-stretch: 88%; line-height: 1; letter-spacing: -0.01em; text-wrap: balance; }
.vn-lead { margin-top: 0.6em; }
.vn-byline { margin-top: 0.8em; }
.vn-byline a { color: inherit; }
.vn-card { display: grid; gap: 0; box-shadow: 8px 8px 0 var(--orange); }
.vn-card-row { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 1em; padding: 0.6em 0; border-top: 1px solid var(--rule); }
.vn-card-row:first-child { border-top: 0; }
.vn-card-row dt { font-weight: 800; }
.vn-part { display: grid; gap: 0.7em; }
.vn-part p { max-width: 40em; }
.vn-part-title { font-weight: 800; }
.vn-more .ci-points { margin-top: 0; }

/* ── Couverture optionnelle (champ cover) : figure de la note, vignette de la liste ── */
.vn-cover { margin: 0; }
.vn-cover img { display: block; width: 100%; height: auto; }
.vi-note--cover article { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 1.2em; align-items: start; }
.vi-note-thumb { display: block; }
.vi-note-thumb img { display: block; width: 100%; height: auto; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .vi-method .ci-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .vi-method .ci-cards { grid-template-columns: minmax(0, 1fr); }
  .vi-sheet, .vn-card { box-shadow: 5px 5px 0 var(--orange); }
  .vi-sheet-row, .vn-card-row { grid-template-columns: minmax(0, 1fr); gap: 0.2em; }
  .vi-note--cover article { grid-template-columns: minmax(0, 1fr); gap: 0.7em; }
  /* Tableau en cartes : une ligne = un verdict, libellé de colonne (data-label) affiché par CSS. */
  .vi-compare, .vi-compare tbody, .vi-compare tr { display: block; }
  .vi-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vi-compare tr { border-top: 2px solid var(--navy); }
  .vi-compare tr:first-child { border-top: 0; }
  .vi-compare tbody th { display: block; width: auto; padding: 0.7em 0.8em 0.3em; border-top: 0; font-size: var(--fs-body); }
  .vi-compare td { display: grid; width: auto; grid-template-columns: 8em minmax(0, 1fr); gap: 0.6em; padding: 0.35em 0.8em; border-top: 1px solid var(--rule); font-size: var(--fs-small); }
  .vi-compare td:last-child { padding-bottom: 0.7em; }
  .vi-compare td::before { content: attr(data-label); font-weight: 800; }
}
/* ── Note au format 2 (format: 2, components/veille-ia/NoteV2.astro) : blocs courts et lisibles pour un dirigeant ──
 * En bref (feuille + bouton site officiel), usages en puces, points forts / limites en deux colonnes distinctes,
 * cas type en encadré marine (récit en trois temps), FAQ ouverte, liens officiels datés. Format 1 non touché. */
.vn2-brief { display: grid; gap: 0.9em; box-shadow: 8px 8px 0 var(--orange); }
.vn2-brief-title { font-size: var(--fs-label); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--magenta-ink); }
.vn2-summary { font-size: var(--fs-lead); font-weight: 700; line-height: 1.3; max-width: 34em; text-wrap: pretty; }
.vn2-facts { display: grid; gap: 0; border-top: 2px solid var(--navy); }
.vn2-fact { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 1em; padding: 0.65em 0; border-top: 1px solid var(--rule); }
.vn2-fact:first-child { border-top: 0; }
.vn2-fact dt { font-weight: 800; }
.vn2-fact dd { max-width: 38em; }
.vn2-checked { color: var(--faint); font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
.vn2-official { margin-top: 0.2em; }
.vn2-official .button::after { content: ""; flex: none; width: 1.1em; height: 0.75em; margin-left: 0.55em; background: url("/art/ui/arrow-navy.svg") center / contain no-repeat; }
.vn2-part { gap: 0.8em; }
.vn2-part p { max-width: 38em; }
.vn2-part > .vn-part-title { padding-top: 0.35em; border-top: 2px solid var(--navy); }
.vn2-uses { margin-top: 0; gap: 0.7em; }
.vn2-uses li { max-width: 38em; }
/* Ce qu'on en pense : deux colonnes, filet de tête et marque de puce différents (magenta plein / marine creux). */
.vn2-balance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); }
.vn2-col { padding: 1em 1.1em 1.15em; background: var(--sheet); border: 2px solid var(--navy); }
.vn2-col--pros { border-top: 8px solid var(--magenta); }
.vn2-col--cons { border-top: 8px solid var(--navy); }
.vn2-col-title { margin-bottom: 0.55em; }
.vn2-marks { display: grid; gap: 0.75em; }
.vn2-marks li { position: relative; padding-left: 1.5em; }
.vn2-marks li::before { content: ""; position: absolute; left: 0; top: 0.32em; width: 0.8em; height: 0.8em; border-radius: 50%; border: 2px solid var(--navy); box-sizing: border-box; }
.vn2-col--pros .vn2-marks li::before { background: var(--magenta); }
.vn2-col--cons .vn2-marks li::before { background: transparent; }
/* Un cas type : encadré marine, récit en trois temps (situation, ce qu'on a fait, résultat). */
.vn2-case { padding: clamp(20px, 2.6vw, 38px); background: var(--navy); color: var(--cream); box-shadow: 8px 8px 0 var(--magenta); }
.vn2-case-title { color: var(--cream); max-width: 30em; text-wrap: balance; }
.vn2-steps { display: grid; gap: 0; margin-top: 1.1em; counter-reset: vn2; }
.vn2-step { counter-increment: vn2; display: grid; grid-template-columns: 12em minmax(0, 1fr); gap: 1em; padding: 0.85em 0; border-top: 2px solid var(--orange); }
.vn2-step-label { padding-top: 0.2em; }
.vn2-step-label { font-size: var(--fs-label); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream); }
.vn2-step-label::before { content: counter(vn2) " · "; color: var(--orange); }
.vn2-step p { color: var(--cream); max-width: 36em; }
.vn2-case ::selection { background: var(--orange); color: var(--navy); }
.vn2-faq { display: grid; }
.vn2-faq .faq-question { font-size: var(--fs-body); font-weight: 800; }
.vn2-start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); }
.vn2-links { margin-top: 0; gap: 0.6em; }
.vn2-links .vn2-checked { display: block; margin-top: 0.15em; }
@media (max-width: 760px) {
  .vn2-brief, .vn2-case { box-shadow: 5px 5px 0 var(--orange); }
  .vn2-case { box-shadow: 5px 5px 0 var(--magenta); }
  .vn2-fact { grid-template-columns: minmax(0, 1fr); gap: 0.2em; }
  .vn2-official .button { width: 100%; justify-content: center; }
  .vn2-balance, .vn2-step, .vn2-start-grid { grid-template-columns: minmax(0, 1fr); }
  .vn2-step { gap: 0.4em; }
  .vn2-checked { white-space: normal; }
}
/* <<< page:veille-ia */

/* >>> page:legal */
/* Pages légales (/mentions-legales, /confidentialite, /cgv, /reglement-interieur), gabarit src/components/page/LegalPage.astro.
 * Réutilise les styles ce- et fcc- (fil d'Ariane, kicker, titre, date, puces) via body.ce-page.fcc-page.lg-page ; ce bloc
 * n'ajoute qu'une mise en page de lecture sobre (sommaire collant + colonne de texte) et la ligne « Légal » du pied de page.
 * Aucune règle existante modifiée. */

/* ── En-tête : texte seul, sans illustration ── */
.lg-hero { padding-block: clamp(8px, 1.5vw, 24px) clamp(32px, 3.6vw, 56px); border-bottom: 2px solid var(--navy); }
.lg-hero-inner { max-width: 60rem; }
.lg-page .lg-title { font-size: clamp(40px, 5vw, 76px); }
.lg-lead { margin-top: var(--gap-head); max-width: 42em; }

/* ── Sommaire + corps ── */
.lg-layout { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 46rem); gap: clamp(32px, 5vw, 96px); align-items: start; padding-block: clamp(36px, 4vw, 64px) var(--bay); }
.lg-toc { position: sticky; top: 1.5rem; padding-top: 0.2em; }
.lg-toc-list { margin-top: 0.7em; display: grid; counter-reset: lg-toc; border-left: 2px solid var(--navy); }
.lg-toc-list li { counter-increment: lg-toc; }
.lg-toc-list a { display: flex; align-items: center; min-height: 44px; padding: 0.15em 0 0.15em 0.9em; font-size: var(--fs-small); font-weight: 600; line-height: 1.25; color: var(--navy); text-decoration: none; }
.lg-toc-list a:hover, .lg-toc-list a:focus-visible { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }

.lg-section { padding-block: 0 clamp(28px, 3vw, 44px); scroll-margin-top: 1.5rem; }
.lg-section + .lg-section { padding-top: clamp(24px, 2.6vw, 36px); border-top: 1px solid var(--rule); }
.lg-h2 { max-width: 30em; }
.lg-section > .lg-h2 + * { margin-top: 0.8em; }
.lg-text { max-width: 42em; margin-top: 0.75em; }
.lg-points { margin-top: 0.75em; }
.lg-points li { max-width: 40em; }
.lg-section .rich-link { overflow-wrap: anywhere; }

/* Fiches (dl) : libellé à gauche, valeur à droite ; feuille crème, ombre dure discrète. */
.lg-facts { margin-top: 0.9em; display: grid; border: 2px solid var(--navy); background: var(--sheet); }
.lg-fact { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0.3em 1.2em; padding: 0.7em 1em; }
.lg-fact + .lg-fact { border-top: 1px solid var(--rule); }
.lg-fact dt { font-size: var(--fs-small); font-weight: 650; color: var(--faint); padding-top: 0.15em; }
.lg-fact dd { font-weight: 650; overflow-wrap: anywhere; }

@media (max-width: 960px) {
  .lg-layout { grid-template-columns: minmax(0, 1fr); }
  .lg-toc { position: static; }
  .lg-toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1em; }
}
@media (max-width: 760px) {
  .lg-toc-list { grid-template-columns: minmax(0, 1fr); }
  .lg-fact { grid-template-columns: minmax(0, 1fr); }
}

/* ── Pied de page : ligne « Légal » sous les liens de maillage (toutes les pages) ── */
.footer-nav { display: grid; gap: 0.6em; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.2em; margin: 0; font-size: var(--fs-small); color: var(--faint); }
.footer-legal-label { font-weight: 800; font-stretch: 86%; letter-spacing: 0.06em; text-transform: uppercase; }
.footer-legal-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--faint); text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.footer-legal-link:hover { color: var(--navy); text-decoration-color: var(--orange); }
.footer-legal-link[aria-current] { color: var(--navy); text-decoration: none; }
@media (min-width: 1200px) {
  .footer .footer-legal { font-size: calc(14 * var(--u)); }
}
/* <<< page:legal */