/* ═══════════════════════════════════════════════════════════════════════════
   EasyPDF — landing v3 · direction cartoon épuré, structure direct-response
   Direction  : docs/marketing/DIRECTION_LANDING_V3.fr.md (laurent, 2026-07-30)
   Identité   : docs/marketing/IDENTITE_VISUELLE.fr.md — palette MESURÉE §3
   Wizard     : landing/wizard-spec.md — chrome navy, blocs clairs, curseur = focus
   Copy       : docs/marketing/LANDING_COPY_V3.fr.md

   Sémantique couleur : bleu = ce qui est accessible · rouge = frontière/limite.
   Sémantique typo    : sérif = le document du créateur · grotesque = le chrome EasyPDF.

   ⚠️ ORDRE DES RÈGLES. À spécificité égale, la règle déclarée PLUS BAS gagne.
      C'est le défaut exact qui a fait déborder le CTA d'en-tête à 360 px en v2.
      Toute règle qui MASQUE un élément que `.btn` ou `.wz-block` réaffiche ensuite
      porte deux classes (`.hdr .hdr__cta`), jamais une seule.

   ⚠️ CACHE. `_headers` sert `/assets/*` en `immutable, max-age=31536000`.
      Le nom de ce fichier porte donc sa version (`-v3`). Une modification de fond
      doit changer le nom du fichier, pas seulement son contenu.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── encres — --ink sert à la fois de texte et de contour cartoon ── */
  --ink:#14263d; --ink-2:#3d536f; --ink-3:#4c5e75;
  /* --ink-3 : valeur PLANCHER. 6,63:1 sur blanc · 5,88 sur --sky · 5,39 sur --sky-2
     · 4,79 sur --sky-3 · 5,37 sur --blue-soft. Ne jamais l'éclaircir. */
  --white:#fff;
  --sky:#eaf2fd; --sky-2:#dbe9fb; --sky-3:#c9ddf7;
  --blue:#2b5fc9; --blue-ink:#1e4699; --blue-soft:#dce8fc;
  /* --red : APLATS ET CONTOURS UNIQUEMENT (3,95:1 sur --sky ⩾ 3:1 non-texte).
     Tout TEXTE rouge utilise --red-ink. Sur le chrome navy : NI l'un NI l'autre
     (2,38:1 et 3,43:1 — wizard-spec §12.1). */
  --red:#d8412b; --red-ink:#b02f1d; --red-soft:#fce4e0;
  --blush:#f6c0b6; /* décoratif dans une illustration déjà contournée — exempt WCAG 1.4.11 */
  --line:#c2d6ee;

  --font-doc:"Iowan Old Style","Palatino Linotype","Source Serif 4",Charter,Georgia,"Times New Roman",serif;
  --font-ui:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --measure:64ch;
  --pad-x:clamp(1.25rem,5vw,3rem);
  --gap-section:clamp(3.25rem,7vw,5.5rem);
  --r:18px; --r-sm:12px; --pill:999px;
  --shadow:0 2px 0 rgba(20,38,61,.05), 0 14px 30px -22px rgba(20,38,61,.42);
  --shadow-lift:0 3px 0 rgba(20,38,61,.06), 0 22px 40px -24px rgba(20,38,61,.45);

  /* Durées. Sous `reduce`, elles passent toutes à 1 ms — l'état final est atteint,
     l'élément n'est JAMAIS supprimé (DIRECTION §7 ; wizard-spec §7.5). */
  --t-fast:120ms; --t-mid:180ms; --t-slow:320ms; --t-reward:600ms;
}
@media(prefers-reduced-motion:reduce){
  :root{--t-fast:1ms; --t-mid:1ms; --t-slow:1ms; --t-reward:1ms}
}

*,*::before,*::after{box-sizing:border-box}
/* `scroll-padding-top` réserve la hauteur de l'en-tête collant : sans lui, un saut
   d'ancre ou un défilement provoqué par le focus place la cible SOUS l'en-tête, et
   l'élément focalisé devient invisible — SC 2.4.11 Focus Not Obscured. */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; color:var(--ink); background:var(--sky);
  font-family:var(--font-ui); font-size:clamp(1.0625rem,.4vw + 1rem,1.125rem);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; line-height:1.14; letter-spacing:-.022em; font-weight:700}
h1{font-size:clamp(2rem,1rem + 3.2vw,3.75rem); line-height:1.04; letter-spacing:-.032em}
h2{font-size:clamp(1.6rem,1rem + 1.8vw,2.3rem)}
h3{font-size:1.1875rem; letter-spacing:-.014em}
p{margin:0}
ul,ol{margin:0; padding:0}
a{color:var(--blue); text-underline-offset:.18em; text-decoration-thickness:.06em}
a:hover{color:var(--blue-ink)}
strong,b{font-weight:680}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px}

.wrap{max-width:1140px; margin-inline:auto; padding-inline:var(--pad-x)}
.prose{max-width:var(--measure)}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--white);
  padding:.7rem 1.1rem; z-index:100; border-radius:0 0 var(--r-sm) 0; text-decoration:none;
}
.skip:focus{left:0}
.eyebrow{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue-ink); background:var(--white); border:1.5px solid var(--line);
  border-radius:var(--pill); padding:.4rem .85rem; margin:0 0 1.1rem;
}
.eyebrow svg{width:16px; height:16px}
.lede{font-size:clamp(1.0625rem,.3vw + 1rem,1.25rem); color:var(--ink-2); line-height:1.55}
.todo{color:var(--ink-3); font-style:italic}

/* Repli sans JavaScript. `boot-v3.js` pose `.js` sur <html> AVANT le premier rendu
   (script non différé dans le <head>) : sans lui, c'est la variante sans script qui
   s'affiche, et il n'y a jamais de clignotement. */
/* ⚠️ On MASQUE, on ne réaffiche jamais. Une première version posait
   `.nojs-only{display:none}` puis `display:revert` sans script — et `revert` rendait
   un `.btn` en `inline` au lieu de `inline-flex` : le bouton pilule perdait sa forme
   exactement dans le cas que personne ne regarde. MESURÉ, puis corrigé. */
html.js .nojs-only{display:none !important}
html:not(.js) .js-only{display:none !important}

/* ── Illustrations ─────────────────────────────────────────────────────── */
.ico{display:block; width:60px; height:60px; flex:none; color:var(--ink)}

/* ── En-tête ───────────────────────────────────────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--sky) 90%, transparent);
  backdrop-filter:blur(10px); border-bottom:1.5px solid var(--line);
}
@supports not (backdrop-filter:blur(4px)){.hdr{background:var(--sky)}}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:68px}
.brand{display:flex; align-items:center; gap:.55rem; color:var(--ink); text-decoration:none; font-weight:750; letter-spacing:-.028em; font-size:1.125rem}
.brand svg{display:block; width:34px; height:34px}
.brand__dom{color:var(--ink-3); font-weight:500}
.hdr__nav{display:none; gap:1.5rem; font-size:.9375rem}
.hdr__nav a{color:var(--ink-2); text-decoration:none; font-weight:550; padding-block:.35rem}
.hdr__nav a:hover{color:var(--ink)}
@media(min-width:980px){.hdr__nav{display:flex}}
/* C-5 — le CTA d'en-tête n'apparaît QUE lorsque celui du hero est sorti de l'écran.
   Il ne duplique jamais l'action visible : il y ramène.
   ⚠️ Sélecteur à deux classes : `.btn{display:inline-flex}` est déclaré plus bas. */
.hdr .hdr__cta{display:none}
.hdr.is-stuck .hdr__cta{display:inline-flex}
/* Pages secondaires : le sélecteur de fichiers vit sur l'accueil, il n'y a donc
   pas de CTA de hero à observer. Le CTA d'en-tête y est permanent et RAMÈNE à
   l'accueil — il ne promet pas un dépôt que la page ne peut pas ouvrir.
   ⚠️ Déclaré APRÈS `.hdr .hdr__cta{display:none}` : même spécificité (0,2,1),
      c'est l'ordre qui tranche. Le déplacer plus haut le rendrait inopérant —
      c'est le défaut exact qui a fait déborder le CTA en v2. */
.hdr .hdr__cta--always{display:inline-flex}
@media(max-width:479px){
  .hdr.is-stuck .hdr__cta{display:none}
  .hdr .hdr__cta--always{display:none}
}

/* ── Boutons pilule ────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font:inherit; font-weight:680; font-size:1rem; letter-spacing:-.008em;
  padding:.82rem 1.55rem; border-radius:var(--pill); border:2px solid transparent;
  min-height:48px; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn--primary{background:var(--blue); color:var(--white); box-shadow:0 3px 0 var(--blue-ink)}
.btn--primary:hover{background:var(--blue-ink); color:var(--white); box-shadow:0 2px 0 var(--blue-ink); transform:translateY(1px)}
.btn--ghost{background:var(--white); color:var(--ink); border-color:var(--line); box-shadow:0 3px 0 var(--sky-3)}
.btn--ghost:hover{border-color:var(--ink); box-shadow:0 2px 0 var(--sky-3); transform:translateY(1px)}
.btn--sm{padding:.55rem 1.15rem; font-size:.9375rem; min-height:40px; box-shadow:0 2px 0 var(--blue-ink)}
.btn--sm:hover{box-shadow:0 1px 0 var(--blue-ink)}
.btn--xl{font-size:1.125rem; padding:1.05rem 2.1rem; min-height:60px; box-shadow:0 4px 0 var(--blue-ink)}
.btn--xl:hover{box-shadow:0 2px 0 var(--blue-ink)}
.btn svg{width:26px; height:26px; flex:none}
@media(prefers-reduced-motion:reduce){.btn:hover{transform:none}}
.btn[disabled]{opacity:.55; cursor:default; box-shadow:none}
/* `.btn{display:inline-flex}` est une règle d'auteur : elle BAT `[hidden]` de la
   feuille du navigateur. Sans cette ligne, `btn.hidden = true` ne cache rien —
   c'est exactement le piège qui a déjà coûté `.wz__fbtn[hidden]` plus bas. */
.btn[hidden]{display:none}
.link-plain{color:var(--blue); font-size:.9375rem; font-weight:600; display:inline-block; padding-block:.3rem}
.cta-row{display:flex; flex-wrap:wrap; gap:.85rem; align-items:center}
.cta-note{font-size:.9375rem; color:var(--ink-3); margin-top:.85rem; max-width:52ch; line-height:1.5}

/* ── Sections + festons de nuage ───────────────────────────────────────── */
.sec{padding-block:var(--gap-section); position:relative}
.sec--white{background:var(--white)}
.sec__head{max-width:40rem}
.sec__head .lede{margin-top:.9rem; max-width:36rem}
.scallop{display:block; width:100%; height:clamp(28px,4vw,52px); color:var(--white)}
.scallop--sky{color:var(--sky)}
.scallop svg{display:block; width:100%; height:100%}

/* ═══ HERO ══════════════════════════════════════════════════════════════
   DIRECTION §2 : les mascottes cartoon EN GROS. En v2 elles étaient réduites à
   des icônes de 60 px — c'était l'erreur. Ici la scène est un objet de premier
   plan, dessinée à l'échelle du hero (contours 3,2–4 unités sur une grille de
   620, soit ~3-4 px au rendu : la même graisse optique que la liseuse v2).
   Elle est INTÉGRÉE au flux, jamais posée en position absolue par-dessus le
   texte — règle héritée du nuage qui masquait « lecture dans le navigateur ».
   ═══════════════════════════════════════════════════════════════════════ */
.hero{padding-block:clamp(1.5rem,3vw,2.75rem) clamp(2.25rem,4vw,3.5rem); position:relative; overflow:hidden}
.hero__grid{display:grid; gap:clamp(1.75rem,4vw,3rem); align-items:center; position:relative; z-index:1}
/* Le ratio des colonnes est un ARBITRAGE MESURE, pas un gout : elargir la colonne
   de la scene retrecit celle du texte, le <h1> gagne une ligne, et le bloc d'etat
   tombe SOUS la ligne de flottaison a 1280x800. Un essai a 1fr/1.08fr l'a fait
   passer de 799 a 858 px pour un viewport de 800. Ne pas y toucher sans rejouer
   `verify-v3/behave.mjs`, qui mesure les quatre tailles. */
@media(min-width:1000px){.hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:2.5rem}}
.hero h1{max-width:16ch}
.hero__mech{margin-top:1.15rem; max-width:46ch}
.hero__cta{margin-top:1.6rem}
.hero__example{margin-top:.85rem}
/* `home.hero.etat` — le « produit en construction » doit être lisible SANS DÉFILER
   à 360 px comme à 1680 px (GOAL.md). Compact par conception : deux lignes, pas
   d'encadré épais qui pousserait le reste sous la ligne de flottaison. */
.state{
  display:flex; gap:.7rem; align-items:flex-start;
  margin-top:1.35rem; padding:.75rem .9rem; background:var(--white);
  border:2px solid var(--ink); border-radius:var(--r-sm); box-shadow:0 3px 0 var(--sky-3);
  font-size:.875rem; color:var(--ink); max-width:52ch; line-height:1.45;
}
.state .ico{width:30px; height:30px; margin-top:1px}

/* ── Le budget vertical du hero à 360 × 640 ─────────────────────────────────
   MESURÉ : en taille pleine, le bas du bloc d'état tombait à 777 px sur un
   viewport de 640 px — donc « produit en construction » demandait de défiler, ce
   que GOAL.md interdit. Ces réductions sont un BUDGET, pas une préférence
   esthétique : chaque ligne gagnée l'a été contre cette mesure. Le harnais la
   rejoue à 360, 390, 1280 et 1680 px.
   Aucune réorganisation du DOM : l'ordre de lecture reste l'ordre visuel. */
@media(max-width:599px){
  .hero{padding-block:1rem 2rem}
  .eyebrow{margin-bottom:.65rem; font-size:.6875rem; padding:.3rem .7rem}
  .hero h1{font-size:1.625rem; letter-spacing:-.026em}
  .hero__mech{margin-top:.8rem; font-size:1rem; line-height:1.5}
  .hero__cta{margin-top:1.05rem}
  .hero__cta .btn--xl{font-size:1rem; padding:.85rem 1.5rem; min-height:50px}
  .cta-note{margin-top:.6rem; font-size:.8125rem; line-height:1.45}
  .hero__example{margin-top:.5rem}
  .state{margin-top:.85rem; padding:.6rem .7rem; font-size:.8125rem; line-height:1.4}
  .state .ico{width:26px; height:26px}
  /* `.scene{max-width:320px}` retiré le 2026-07-31 avec le reste du bloc `.scene`
     (voir plus bas) : plus aucun `class="scene"` dans les neuf HTML. */
}
/* Un libellé de bouton ne se coupe jamais (IDENTITE_VISUELLE §5) : c'est donc le
   REMBOURRAGE qui cède sur les petits écrans, jamais le texte.
   MESURÉ : à 360 px, un `btn--xl` en `white-space:nowrap` imposait 337 px de
   largeur minimale à son conteneur en grille et faisait déborder la page de 23 px.
   Un `min-width` de grille ne se voit pas à la relecture — seul le harnais l'attrape. */
@media(max-width:599px){
  .btn--xl{font-size:1rem; padding:.9rem 1.35rem; min-height:52px}
}

/* ── La légende des scènes cartoon ─────────────────────────────────────── */
/* ⚠️ SUPPRIMÉ LE 2026-07-31 : `.scene`, `.scene-wrap`, `.scene .float-a`,
   `.scene .float-b` et `@keyframes bob`. C'était du CODE MORT depuis que le hero
   v4 a remplacé la grande scène v3 par le sélecteur de cas.
   MESURÉ avant suppression, sur les neuf HTML du dossier (verify exclu) :
   `grep -rn 'class="scene"\|float-a\|float-b\|scene-wrap' --include=*.html .`
   → **0 occurrence**. La seule correspondance était `class="scene-cap"`, qui
   reste et qui est conservée ci-dessous.

   ET C'EST AUSSI LA FIN D'UNE AFFIRMATION FAUSSE QU'IL FAUT ÉTEINDRE ICI.
   `LANDING_COPY_V4.fr.md` §4.1 écrivait « WCAG 2.2.2 échoue AUJOURD'HUI dans le
   hero livré » à cause de ces deux règles `animation: bob … infinite`, et
   ordonnançait un correctif `HERO_PAUSE`. C'était vrai en v3 ; ce ne l'est plus
   depuis que la scène a été retirée. MESURÉ le 2026-07-31, Chrome, HTTP + CSP de
   production, SANS aucune émulation de préférence, `document.getAnimations()`
   relevé 2 s après chargement : **0 sur les NEUF pages du dossier** (/, /pourquoi/,
   /le-parcours/, /publish/, /capture/, /sell/, /nos-limites/, /le-pilote/,
   /candidature-recue.html), dont **0 animation infinie** — 2.2.2 ne s'applique nulle
   part, il n'y a plus un seul mouvement automatique de plus de cinq secondes dans
   le site. Le correctif `HERO_PAUSE` n'a plus de cible, et §4.1 est requalifiée
   RÉSOLUE. Ce qui tient la ligne désormais : `HERO_NO_AUTOPLAY`, qui relève
   `getAnimations()` au repos SANS émulation — l'ancien contrôle ne le faisait que
   SOUS émulation `reduce`, donc il prouvait l'atténuation, jamais la conformité. */
.scene-cap{
  margin-top:.7rem; text-align:center; font-size:.8125rem; color:var(--ink-3);
  letter-spacing:.01em;
}

/* ═══ DÉMONSTRATION — dépôt + analyse locale ════════════════════════════ */
.demo__proof{
  margin-top:1.5rem; padding:1rem 1.15rem; background:var(--white);
  border:1.5px solid var(--line); border-radius:var(--r); max-width:60ch;
  font-size:.9375rem; color:var(--ink-2); line-height:1.55; display:flex; gap:.85rem;
}
.sec--white .demo__proof{background:var(--sky)}
.demo__proof .ico{width:40px; height:40px}
.drop{
  margin-top:2rem; border:2.5px dashed var(--ink); border-radius:20px;
  background:var(--white); padding:clamp(1.5rem,4vw,2.5rem); text-align:center;
  box-shadow:0 5px 0 var(--sky-3); transition:background-color var(--t-fast), border-color var(--t-fast);
}
.sec--white .drop{background:var(--sky)}
.drop.is-over{background:var(--blue-soft); border-color:var(--blue); border-style:solid}
.drop__ill{display:block; width:min(150px,42vw); height:auto; margin:0 auto 1rem; color:var(--ink)}
.drop__hint{margin-top:.85rem; font-size:.9375rem; color:var(--ink-3)}
.drop input[type=file]{
  /* Contrôle réel, focalisable, ≥ 24 px : la cible satisfait SC 2.5.8 par elle-même.
     Jamais `display:none` — il sortirait de l'ordre de tabulation. */
  position:absolute; width:1.5rem; height:1.5rem; opacity:0; pointer-events:none;
}
.status-line{
  margin-top:1.1rem; font-size:.9375rem; color:var(--ink-2); min-height:1.5em;
  display:flex; gap:.6rem; align-items:center; justify-content:center;
}
.spinner{
  width:20px; height:20px; border-radius:50%; flex:none;
  border:3px solid var(--sky-3); border-top-color:var(--blue);
}
@media(prefers-reduced-motion:no-preference){.spinner{animation:spin .9s linear infinite}}
@keyframes spin{to{transform:rotate(1turn)}}
.alert{
  margin-top:1.2rem; padding:1rem 1.15rem; border:2px solid var(--red);
  background:var(--red-soft); border-radius:var(--r); color:var(--ink);
  font-size:.9375rem; line-height:1.55; text-align:left;
}
.alert b{color:var(--red-ink); display:block; margin-bottom:.25rem; font-weight:750}

/* ── Résultat d'analyse ────────────────────────────────────────────────── */
.report{margin-top:1.9rem; display:grid; gap:1.25rem; text-align:left}
@media(min-width:760px){.report{grid-template-columns:minmax(0,auto) minmax(0,1fr); align-items:start}}
.report__thumb{
  border:2px solid var(--ink); border-radius:var(--r-sm); background:var(--white);
  box-shadow:0 4px 0 var(--sky-3); overflow:hidden; width:min(180px,46vw); margin-inline:auto;
}
.report__thumb img{display:block; width:100%; height:auto}
.facts{display:grid; gap:.6rem; margin:0}
.facts div{display:flex; gap:.7rem; align-items:baseline; flex-wrap:wrap}
.facts dt{font-size:.75rem; text-transform:uppercase; letter-spacing:.09em; font-weight:750; color:var(--ink-3); min-width:7.5rem}
.facts dd{margin:0; font-weight:700; font-size:1.0625rem}
.report__note{margin-top:.9rem; font-size:.875rem; color:var(--ink-3); line-height:1.5; max-width:62ch}
.report__privacy{
  margin-top:1rem; padding:.8rem 1rem; border-radius:var(--r-sm);
  background:var(--blue-soft); border:1.5px solid var(--blue);
  font-size:.875rem; color:var(--ink); line-height:1.5; max-width:62ch;
}
@media(prefers-reduced-motion:no-preference){
  .report.is-in > *{animation:rise .4s cubic-bezier(.22,.68,.36,1) both}
  .report.is-in > *:nth-child(2){animation-delay:.09s}
  @keyframes rise{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
}

/* ═══ WIZARD — écran de configuration façon console 16 bits ═════════════
   wizard-spec §2 : sept zones, toujours les mêmes. Chrome NAVY, blocs CLAIRS —
   seule combinaison qui donne l'écran de menu ET des illustrations lisibles
   (les 27 symboles sont contournés en `currentColor` navy).
   ⚠️ Sur le chrome navy : anneau de focus BLANC (15,28:1). Le bleu mesure 2,61:1
      et le rouge encre 2,38:1 — les deux échouent (wizard-spec §12.1).
   ═══════════════════════════════════════════════════════════════════════ */
.wz{
  border:2.5px solid var(--ink); border-radius:20px; background:var(--sky);
  box-shadow:0 6px 0 var(--sky-3), 0 26px 44px -30px rgba(20,38,61,.5);
  overflow:hidden; max-width:940px; margin-inline:auto; text-align:left;
  /* la barre de titre du wizard ne doit jamais finir sous l'en-tête collant
     quand un focus provoque un défilement (SC 2.4.11) */
  scroll-margin-top:84px;
}
/* Un enfant en grille ne descend pas sous sa largeur min-content : sans ceci, un
   libellé long dans le panneau élargit la page au lieu d'être contenu. */
.wz__body,.wz__blocks,.wz-block,.report,.report > *{min-width:0}
.wz *:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
.wz__chrome *:focus-visible,
.wz__map *:focus-visible,
.wz__foot *:focus-visible{outline-color:var(--white)}

/* 1 — barre de titre */
.wz__chrome{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  background:var(--ink); color:var(--white); padding:.5rem .7rem;
}
.wz__title{
  font-size:.75rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.5rem; padding-left:.3rem;
}
.wz__title::before{content:""; width:6px; height:16px; background:var(--sky-2); border-radius:2px}
.wz__chrome-actions{display:flex; align-items:center; gap:.4rem}
.wz__cbtn{
  font:inherit; font-size:.8125rem; font-weight:680; color:var(--white);
  background:transparent; border:2px solid var(--sky-3); border-radius:var(--pill);
  min-height:44px; min-width:44px; padding:.35rem .9rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  transition:background-color var(--t-fast), border-color var(--t-fast);
}
.wz__cbtn:hover{background:rgba(255,255,255,.14); border-color:var(--white)}
.wz__cbtn--icon{padding:.35rem; font-size:1.05rem; line-height:1}

/* 2 — map de progression, permanente, avec deux nœuds VERROUILLÉS visibles dès
   le premier écran (wizard-spec §4.2 : dispositif anti-mensonge central). */
.wz__map{background:var(--ink); color:var(--sky-2); padding:.15rem .7rem .8rem}
.wz__nodes{
  display:flex; align-items:flex-start; gap:.15rem; list-style:none;
  overflow-x:auto; padding-bottom:.2rem; scrollbar-width:thin;
}
.wz__node{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:.3rem;
  flex:0 0 auto; min-width:5.75rem; padding-inline:.15rem;
}
/* Le CHEMIN entre les nœuds. Dessiné en fond de chaque nœud puis rogné aux deux
   extrémités : aucun élément de DOM en plus, et la coupure au niveau du séparateur
   « APRÈS » se fait toute seule, puisque le séparateur ne porte pas ce fond.
   Le rail est une FORME (plein / tireté), pas seulement une couleur — §4.3. */
.wz__node::before{
  content:""; position:absolute; top:14px; left:0; right:0; height:3px;
  background:var(--sky-3); border-radius:2px;
}
.wz__node:first-child::before{left:50%}
.wz__node:last-child::before{right:50%}
.wz__node--done::before{background:var(--blue)}
.wz__node--locked::before{background:none; border-top:3px dashed var(--sky-3); height:0}
.wz__node > *{position:relative; z-index:1}
.wz__dot{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--sky-2); color:var(--ink); font-size:.8125rem; font-weight:750;
  font-variant-numeric:tabular-nums; border:2px solid var(--sky-2);
  transition:background-color var(--t-mid), transform var(--t-mid);
}
.wz__node--done .wz__dot{background:var(--blue); border-color:var(--white); color:var(--white)}
.wz__node--current .wz__dot{background:var(--white); border-color:var(--white); transform:scale(1.25)}
.wz__node--locked .wz__dot{background:transparent; border-style:dashed; border-color:var(--sky-3); color:var(--sky-3)}
.wz__dot svg{width:18px; height:18px; color:currentColor}
button.wz__dot{cursor:pointer; min-width:32px}
button.wz__dot:hover{background:var(--white); color:var(--ink)}
.wz__nlabel{
  font-size:.5625rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  color:var(--sky-3); text-align:center; max-width:6.25rem; line-height:1.2;
  overflow-wrap:break-word;
}
.wz__node--current .wz__nlabel{color:var(--white)}
.wz__sep{
  align-self:center; flex:0 0 auto; padding-inline:.45rem; font-size:.5625rem;
  letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--sky-3);
}
.wz__locked-note{margin-top:.5rem; font-size:.75rem; color:var(--sky-3); line-height:1.4; max-width:62ch}
@media(max-width:719px){
  .wz__nlabel{display:none}
  .wz__node--current .wz__nlabel{display:block}
}

/* 3+4 — numéro d'étape et question */
.wz__body{padding:clamp(1.1rem,3vw,1.7rem)}
.wz__stage{
  font-size:.6875rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:.4rem;
}
/* `inline-block` pour que l'anneau de focus épouse le titre au lieu de tracer un
   cadre sur toute la largeur du panneau : le focus doit désigner un élément, pas
   une zone. */
.wz__q{display:inline-block; font-size:clamp(1.25rem,.6vw + 1.1rem,1.65rem); letter-spacing:-.02em; line-height:1.16}
.wz__q:focus-visible{outline:3px solid var(--blue); outline-offset:4px}
.wz__help{margin-top:.5rem; font-size:.9375rem; color:var(--ink-3); max-width:62ch; line-height:1.5}

/* 5 — les blocs de choix. Contrôles RÉELS : `input[type=radio|checkbox]`,
   jamais un `div[role=radio]` (wizard-spec §7.1, contrôle WIZARD_REAL_CONTROLS). */
.wz__group{border:0; padding:0; margin:1.25rem 0 0; min-width:0}
.wz__blocks{display:grid; gap:.85rem}
@media(min-width:560px){.wz__blocks{grid-template-columns:repeat(3,1fr)}}
.wz__blocks--2{grid-template-columns:1fr}
@media(min-width:560px){.wz__blocks--2{grid-template-columns:repeat(2,1fr)}}
.wz-block{
  position:relative; display:flex; gap:.85rem; align-items:flex-start;
  padding:1rem .95rem; min-height:88px; cursor:pointer;
  background:var(--white); border:2px solid var(--ink); border-radius:var(--r);
  box-shadow:0 4px 0 var(--sky-3);
  transition:background-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
@media(min-width:560px){
  .wz-block{flex-direction:column; align-items:center; text-align:center; gap:.55rem; padding:1.15rem 1rem}
}
.wz-block:hover{background:var(--sky); box-shadow:0 2px 0 var(--sky-3); transform:translateY(2px)}
@media(prefers-reduced-motion:reduce){.wz-block:hover{transform:none}}
.wz-block input{
  /* effacé visuellement, mais RÉEL, focalisable et ≥ 24 px */
  position:absolute; top:.5rem; left:.5rem; width:1.5rem; height:1.5rem; opacity:0; margin:0;
}
.wz-block__ill{width:72px; height:72px; flex:none; color:var(--ink)}
@media(min-width:560px){.wz-block__ill{width:88px; height:88px}}
@media(min-width:860px){.wz-block__ill{width:112px; height:112px}}
.wz-block__label{
  display:block; font-weight:750; font-size:1rem; letter-spacing:-.012em; line-height:1.25;
  /* i18n règle 10 : un libellé plus long en EN/ES passe sur deux lignes ;
     il ne se tronque jamais et ne rétrécit jamais la police. */
  overflow-wrap:break-word; hyphens:auto;
}
.wz-block__sub{display:block; margin-top:.3rem; font-size:.875rem; color:var(--ink-2); line-height:1.4}
.wz-block__seats{display:block; margin-top:.35rem; font-size:.75rem; font-weight:700; color:var(--ink-3)}
/* état SÉLECTIONNÉ, franc — et jamais porté par la seule couleur : la coche du
   coin est une FORME, en plus du fond et de la bordure. */
.wz-block:has(input:checked){background:var(--blue-soft); border-color:var(--blue-ink); box-shadow:0 4px 0 var(--blue)}
.wz-block:has(input:checked)::after{
  content:""; position:absolute; top:.65rem; right:.7rem; width:15px; height:9px;
  border-left:3px solid var(--blue-ink); border-bottom:3px solid var(--blue-ink);
  transform:rotate(-45deg); border-radius:1px;
}
/* LE CURSEUR. C'est le focus clavier lui-même, pas un artifice dessiné à côté :
   il ne peut donc pas se désynchroniser du contrôle réellement actif. Le survol
   souris ne le déplace jamais (`:focus-visible` ne matche pas au clic). */
.wz-block:has(input:focus-visible){
  outline:3px solid var(--blue); outline-offset:3px;
  box-shadow:0 4px 0 var(--blue), 0 0 0 7px var(--blue-soft);
}
.wz-block:has(input:focus-visible)::before{
  content:""; position:absolute; left:-2px; top:50%; margin-top:-9px;
  border-top:9px solid transparent; border-bottom:9px solid transparent;
  border-left:12px solid var(--blue-ink); transform:translateX(-9px);
}
@media(min-width:560px){
  .wz-block:has(input:focus-visible)::before{
    left:50%; top:-2px; margin:0 0 0 -9px;
    border:0; border-left:9px solid transparent; border-right:9px solid transparent;
    border-top:12px solid var(--blue-ink); transform:translateY(-11px);
  }
}

/* 6 — ligne de valeur + aide clavier */
.wz__value{
  margin-top:1.15rem; padding:.85rem 1rem; border-radius:var(--r-sm);
  background:var(--blue-soft); border:1.5px solid var(--blue);
  font-size:.9375rem; color:var(--ink); line-height:1.5; min-height:1.5em;
}
.wz__value:empty{display:none}
.wz__keys{margin-top:.8rem; font-size:.8125rem; color:var(--ink-3)}

/* 7 — pied */
.wz__foot{
  display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; justify-content:space-between;
  background:var(--ink); padding:.7rem;
}
/* Un pied vide est une bande navy de 60 px qui ne dit rien. Le premier écran n'a ni
   retour ni bouton primaire : on le retire, plutôt que de laisser une zone morte. */
.wz__foot--empty{display:none}
.wz__fbtn{
  font:inherit; font-size:.875rem; font-weight:680; color:var(--white);
  background:transparent; border:2px solid var(--sky-3); border-radius:var(--pill);
  min-height:44px; padding:.4rem 1.05rem; cursor:pointer;
  transition:background-color var(--t-fast), border-color var(--t-fast);
}
.wz__fbtn:hover{background:rgba(255,255,255,.14); border-color:var(--white)}
.wz__fbtn--primary{background:var(--blue); border-color:var(--white); color:var(--white)}
.wz__fbtn--primary:hover{background:var(--blue-ink)}
.wz__fbtn[hidden]{display:none}

/* transition d'écran — porte la progression, pas la décoration */
@media(prefers-reduced-motion:no-preference){
  .wz__screen.is-enter{animation:wzin var(--t-mid) cubic-bezier(.22,.68,.36,1) both}
  .wz__screen.is-enter-back{animation:wzback var(--t-mid) cubic-bezier(.22,.68,.36,1) both}
  @keyframes wzin{from{opacity:0; transform:translateX(14px)} to{opacity:1; transform:none}}
  @keyframes wzback{from{opacity:0; transform:translateX(-14px)} to{opacity:1; transform:none}}
}

/* ── Écran d'arrivée : la récompense ───────────────────────────────────── */
.wz__reward{text-align:center}
.wz__sparks{display:block; width:min(132px,36%); height:auto; margin:0 auto .35rem; color:var(--ink)}
@media(prefers-reduced-motion:no-preference){
  .wz__reward.is-in .wz__sparks{animation:pop var(--t-reward) cubic-bezier(.2,1.4,.5,1) both}
  @keyframes pop{from{opacity:0; transform:scale(.55)} to{opacity:1; transform:none}}
}
.card-sheet{
  position:relative; margin:1.3rem auto 0; max-width:34rem; text-align:left;
  background:var(--white); border:2.5px solid var(--ink); border-radius:var(--r);
  box-shadow:0 6px 0 var(--sky-3); padding:1.2rem 1.3rem;
}
.card-sheet__title{
  font-size:.6875rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-ink); margin-bottom:.9rem;
}
.card-sheet dl{display:grid; gap:.6rem; margin:0}
.card-sheet dl > div{display:grid; gap:.15rem}
@media(min-width:520px){.card-sheet dl > div{grid-template-columns:8.5rem minmax(0,1fr); gap:.2rem .9rem; align-items:baseline}}
.card-sheet dt{font-size:.6875rem; text-transform:uppercase; letter-spacing:.09em; font-weight:750; color:var(--ink-3)}
.card-sheet dd{margin:0; font-weight:640; line-height:1.4}
.stamp{
  display:inline-block; margin-top:1rem; padding:.5rem .9rem;
  border:3px solid var(--red); border-radius:8px; color:var(--red-ink);
  font-size:.8125rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase;
  transform:rotate(-6deg); transform-origin:left center;
}
@media(prefers-reduced-motion:no-preference){
  .wz__reward.is-in .stamp{animation:stampin var(--t-slow) cubic-bezier(.2,1.5,.5,1) both .18s}
  @keyframes stampin{from{opacity:0; transform:rotate(-26deg) scale(1.7)} to{opacity:1; transform:rotate(-6deg) scale(1)}}
}
.wz__truth{
  margin:1.2rem auto 0; max-width:52ch; padding:.85rem 1rem; border-radius:var(--r-sm);
  background:var(--sky-2); border:1.5px solid var(--line);
  font-size:.875rem; color:var(--ink); line-height:1.5; text-align:left;
}
.wz__reward-cta{margin-top:1.4rem}
.wz__reward-list{margin:1.1rem auto 0; max-width:46ch; text-align:left; display:grid; gap:.5rem; counter-reset:r}
.wz__reward-list li{counter-increment:r; padding-left:2rem; position:relative; font-size:.9375rem; color:var(--ink-2); line-height:1.45}
.wz__reward-list li::before{
  content:counter(r); position:absolute; left:0; top:-.05em; width:24px; height:24px;
  border-radius:50%; background:var(--blue); color:var(--white); border:2px solid var(--ink);
  display:grid; place-items:center; font-size:.75rem; font-weight:750;
}

/* ── Écran email (candidature) ─────────────────────────────────────────── */
.wz__field{margin-top:1.25rem; max-width:34rem}
.wz__field label{display:block; font-weight:700; font-size:.9375rem; margin-bottom:.3rem}
.wz__field .hint{display:block; font-size:.875rem; color:var(--ink-3); margin-bottom:.5rem; line-height:1.45}
.wz__field input[type=email]{
  width:100%; font:inherit; font-size:1rem; padding:.78rem .9rem; color:var(--ink);
  background:var(--white); border:2px solid var(--ink); border-radius:var(--r-sm); min-height:48px;
}
.wz__field input[aria-invalid=true]{border-color:var(--red)}
.wz__err{margin-top:.4rem; font-size:.875rem; color:var(--red-ink); font-weight:640}
.wz__err:empty{display:none}
.wz__check{
  display:flex; gap:.7rem; align-items:flex-start; margin-top:1rem; max-width:44rem;
  font-size:.9375rem; line-height:1.5; color:var(--ink-2); cursor:pointer;
}
.wz__check input{margin:.05rem 0 0; accent-color:var(--blue); flex:none; width:1.5rem; height:1.5rem}
.wz__recap{margin-top:1.1rem; display:grid; gap:.55rem; max-width:44rem}
.wz__recap-row{
  display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:baseline;
  padding:.6rem .8rem; background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-sm);
}
.wz__recap-key{font-size:.6875rem; text-transform:uppercase; letter-spacing:.09em; font-weight:750; color:var(--ink-3); min-width:7rem}
.wz__recap-val{font-weight:640; flex:1 1 12rem; font-size:.9375rem}
.wz__recap-edit{
  font:inherit; font-size:.8125rem; font-weight:680; color:var(--blue); background:transparent;
  border:2px solid var(--line); border-radius:var(--pill); min-height:44px; padding:.3rem .9rem; cursor:pointer;
}
.wz__recap-edit:hover{border-color:var(--blue); background:var(--blue-soft)}
.wz__unwired{
  margin-top:1.1rem; padding:.9rem 1rem; border:2px solid var(--red); background:var(--red-soft);
  border-radius:var(--r-sm); font-size:.9375rem; color:var(--ink); line-height:1.5; max-width:46rem;
}
.wz__preview-band{
  background:var(--red); color:var(--white); text-align:center; padding:.5rem .8rem;
  font-size:.8125rem; font-weight:750; letter-spacing:.06em;
}

/* ── Le wizard en modale (candidature) ─────────────────────────────────── */
dialog.wz-dialog{
  border:0; padding:0; background:transparent; max-width:min(100vw - 1.5rem, 980px);
  width:100%; max-height:calc(100dvh - 1.5rem); overflow:auto; color:var(--ink);
}
dialog.wz-dialog::backdrop{background:rgba(20,38,61,.62)}
dialog.wz-dialog .wz{max-width:none}

/* ═══ Blocs de contenu (recyclés de la v2, inchangés) ═══════════════════ */
.grid{display:grid; gap:1.35rem; margin-top:2.5rem}
@media(min-width:700px){.grid--2{grid-template-columns:1fr 1fr}}
@media(min-width:940px){.grid--3{grid-template-columns:repeat(3,1fr)}}
.tile{
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--r);
  padding:1.45rem 1.4rem; box-shadow:var(--shadow);
  transition:box-shadow var(--t-mid), transform var(--t-mid);
}
.sec--white .tile{background:var(--sky)}
.tile:hover{box-shadow:var(--shadow-lift); transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.tile:hover{transform:none}}
.tile .ico{width:64px; height:64px; margin-bottom:.85rem}
.tile h3{margin-bottom:.4rem}
.tile p{color:var(--ink-2); font-size:1rem}
.tile__link{margin-top:.9rem; display:inline-block}
.pivot{
  margin-top:2.4rem; font-family:var(--font-doc);
  font-size:clamp(1.2rem,.6vw + 1.05rem,1.5rem); line-height:1.4; max-width:42ch; letter-spacing:-.01em;
}
.card{
  background:var(--white); border:2px solid var(--ink); border-radius:var(--r);
  padding:1.55rem 1.5rem; display:flex; flex-direction:column; box-shadow:0 5px 0 var(--sky-3);
}
.card__top{display:flex; align-items:center; gap:.8rem; margin-bottom:.85rem}
.card__top .ico{width:54px; height:54px}
.card h3{font-size:1.1875rem}
.card > p{color:var(--ink-2); font-size:.9875rem}
.card ul{list-style:none; margin:1.1rem 0 0; display:grid; gap:.55rem; font-size:.9375rem; color:var(--ink-2)}
.card li{padding-left:1.5rem; position:relative}
.card li::before{
  content:""; position:absolute; left:0; top:.42em; width:14px; height:8px;
  border-left:2.5px solid var(--blue); border-bottom:2.5px solid var(--blue);
  transform:rotate(-45deg); border-radius:1px;
}
.card__seats{margin-top:1.4rem; padding-top:1rem; border-top:1.5px solid var(--line); font-size:.875rem; font-weight:700; color:var(--ink)}
.cols{display:grid; gap:1.35rem; margin-top:2.5rem}
@media(min-width:860px){.cols{grid-template-columns:1fr 1fr; gap:1.75rem}}
.col{background:var(--white); border:1.5px solid var(--line); border-radius:var(--r); padding:1.6rem; box-shadow:var(--shadow)}
.sec--white .col{background:var(--sky)}
.col__head{display:flex; align-items:center; gap:.7rem; margin-bottom:1.2rem}
.col__head .ico{width:48px; height:48px}
.col h3{font-size:1.0625rem; letter-spacing:-.01em}
.col ul{list-style:none; display:grid; gap:.85rem; font-size:.9875rem; color:var(--ink-2)}
.col li{padding-left:1.65rem; position:relative; line-height:1.55}
.col--yes li::before{
  content:""; position:absolute; left:.1rem; top:.4em; width:12px; height:7px;
  border-left:2.5px solid var(--blue); border-bottom:2.5px solid var(--blue);
  transform:rotate(-45deg); border-radius:1px;
}
.col--no li::before{content:""; position:absolute; left:.1rem; top:.62em; width:13px; height:3px; background:var(--ink-3); border-radius:2px}
.col--wont{border:2px solid var(--red); box-shadow:0 5px 0 var(--red-soft)}
.col--wont li::before{content:""; position:absolute; left:.1rem; top:.62em; width:13px; height:3px; background:var(--red); border-radius:2px}
.col b{color:var(--ink); font-weight:700}
.closing{margin-top:2.4rem; font-size:1rem; color:var(--ink-2)}

/* « Ce que nous ne promettrons jamais » — six lignes, jamais repliées dans un
   accordéon, jamais adoucies, jamais déplacées sous le pied de page (copy §4). */
.wont{
  margin-top:2.2rem; max-width:62rem; border:2px solid var(--red); border-radius:var(--r);
  background:var(--white); box-shadow:0 5px 0 var(--red-soft); padding:1.5rem 1.6rem;
}
.sec--white .wont{background:var(--sky)}
.wont ul{list-style:none; display:grid; gap:.9rem}
@media(min-width:820px){.wont ul{grid-template-columns:1fr 1fr; gap:.9rem 2rem}}
.wont li{padding-left:1.7rem; position:relative; line-height:1.55; font-size:.9875rem; color:var(--ink-2)}
.wont li::before{content:""; position:absolute; left:.1rem; top:.62em; width:13px; height:3px; background:var(--red); border-radius:2px}
.wont__link{margin-top:1.3rem}

.notes{display:grid; gap:1.2rem; margin-top:2.4rem}
@media(min-width:860px){.notes{grid-template-columns:1fr 1fr; gap:1.5rem}}
.note{
  padding:1.2rem 1.3rem; background:var(--white); border:1.5px solid var(--line);
  border-radius:var(--r); font-size:.9375rem; color:var(--ink-2); line-height:1.55; box-shadow:var(--shadow);
}
.sec--white .note{background:var(--sky)}
.note b{color:var(--ink); display:block; margin-bottom:.3rem; font-weight:700}
.flow{
  display:flex; gap:.9rem; align-items:flex-start; margin-top:2.4rem; padding:1.1rem 1.25rem;
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--r);
  font-size:.9375rem; color:var(--ink-2); line-height:1.65;
}
.sec--white .flow{background:var(--sky)}
.flow .ico{width:46px; height:46px}
.steps{margin-top:2.4rem; counter-reset:s; display:grid; gap:1rem; list-style:none}
.step{
  counter-increment:s; display:grid; grid-template-columns:auto auto 1fr; gap:1.15rem; align-items:start;
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--r);
  padding:1.25rem 1.35rem; box-shadow:var(--shadow);
}
.sec--white .step{background:var(--sky)}
.step::before{
  content:counter(s); display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--blue); color:var(--white); border:2px solid var(--ink);
  font-size:.9375rem; font-weight:750; font-variant-numeric:tabular-nums;
}
.step .ico{width:52px; height:52px; margin-top:-3px}
.step--plain{grid-template-columns:auto 1fr}
.step h3{margin-bottom:.35rem}
.step p{color:var(--ink-2); font-size:1rem; max-width:58ch}
.aha{
  display:flex; gap:1rem; align-items:flex-start; margin-top:2.4rem; padding:1.4rem 1.55rem;
  border:2px solid var(--ink); background:var(--blue-soft); border-radius:var(--r);
  max-width:60ch; box-shadow:0 4px 0 var(--sky-3);
}
.aha .ico{width:46px; height:46px}
.aha p{font-size:1.0625rem; line-height:1.55}
.aha--quiet{border-color:var(--line); background:var(--white); box-shadow:var(--shadow)}
.sec--white .aha--quiet{background:var(--sky)}
.ctrl{margin-top:1.7rem; font-size:.9375rem; color:var(--ink-2); max-width:58ch}
.seats-wrap{
  margin-top:2.4rem; overflow-x:auto; background:var(--white);
  border:1.5px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
}
.sec--white .seats-wrap{background:var(--sky)}
.seats{width:100%; min-width:31rem; border-collapse:collapse; font-size:.9375rem}
.seats th,.seats td{text-align:left; padding:.95rem 1.1rem; border-bottom:1.5px solid var(--line); vertical-align:top}
.seats tbody tr:last-child td{border-bottom:0}
.seats thead th{font-size:.75rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); font-weight:750}
.seats td:nth-child(2){font-variant-numeric:tabular-nums; font-weight:750; white-space:nowrap}
.seats td:first-child{font-weight:700; white-space:nowrap}
.seats td:last-child{color:var(--ink-2)}
.warn{
  display:flex; gap:1rem; align-items:flex-start; margin-top:2.4rem; padding:1.4rem 1.55rem;
  border:2px solid var(--red); background:var(--red-soft); border-radius:var(--r);
  max-width:64ch; font-size:.9875rem; line-height:1.6; box-shadow:0 4px 0 rgba(216,65,43,.18);
}
.warn .ico{width:48px; height:48px}
.warn b{font-weight:750}
.faq{margin-top:2.6rem; max-width:76ch; display:grid; gap:.85rem}
.qa{background:var(--white); border:1.5px solid var(--line); border-radius:var(--r); padding:1.25rem 1.4rem; box-shadow:var(--shadow)}
.sec--white .qa{background:var(--sky)}
.qa h3{margin-bottom:.55rem; font-size:1.0625rem; display:flex; gap:.6rem; align-items:flex-start}
.qa h3::before{
  content:"?"; flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--blue-soft); border:2px solid var(--ink); font-size:.875rem; font-weight:750; margin-top:-1px;
}
.qa p{color:var(--ink-2); font-size:.9875rem; line-height:1.62}

/* ── Formulaire classique (repli sans JS, /le-pilote/#candidature) ─────── */
.form{
  margin-top:2.6rem; max-width:660px; background:var(--white);
  border:2px solid var(--ink); border-radius:var(--r);
  padding:clamp(1.35rem,3vw,2rem); box-shadow:0 6px 0 var(--sky-3);
}
.sec--white .form{background:var(--sky)}
.fld{margin-bottom:1.7rem}
.fld:last-of-type{margin-bottom:1.1rem}
.fld > label,.fld__legend{display:block; font-weight:700; font-size:.9375rem; margin-bottom:.3rem}
.hint{display:block; font-size:.875rem; color:var(--ink-3); margin-bottom:.6rem; font-weight:400; line-height:1.45}
.req{color:var(--red-ink); font-weight:750}
.form input[type=text],.form input[type=email],.form select{
  width:100%; font:inherit; font-size:1rem; padding:.78rem .9rem; color:var(--ink);
  background:var(--white); border:2px solid var(--line); border-radius:var(--r-sm); min-height:48px;
}
.form input:hover,.form select:hover{border-color:var(--ink-3)}
.form input:focus-visible,.form select:focus-visible{border-color:var(--blue); outline-offset:1px}
fieldset{border:0; padding:0; margin:0; min-width:0}
.opts{display:grid; gap:.72rem; margin-top:.3rem}
@media(min-width:620px){.opts--3{grid-template-columns:repeat(3,1fr)}}
.opt{
  display:flex; gap:.7rem; align-items:flex-start; padding:.85rem .95rem;
  border:2px solid var(--line); border-radius:var(--r-sm); cursor:pointer; background:var(--white);
  font-size:.9375rem; line-height:1.45; transition:border-color var(--t-fast), background-color var(--t-fast);
}
.opt:hover{border-color:var(--ink-3); background:var(--sky)}
.opt:has(input:checked){border-color:var(--blue); background:var(--blue-soft)}
/* 1,5 rem = 24 px : la commande satisfait SC 2.5.8 par elle-même. */
.opt input{margin:.1rem 0 0; accent-color:var(--blue); flex:none; width:1.5rem; height:1.5rem}
.opt b{display:block; font-weight:700; margin-bottom:.12rem}
.opt .seats-note{display:block; color:var(--ink-3); font-size:.8125rem; margin-top:.2rem}
.opts--check{display:grid; gap:.6rem}
@media(min-width:620px){.opts--check{grid-template-columns:1fr 1fr}}
.fld > label.check-inline{display:flex; gap:.7rem; align-items:flex-start; font-size:.9375rem; font-weight:400; line-height:1.5; color:var(--ink-2); margin-bottom:0}
.check-inline input{margin:.1rem 0 0; accent-color:var(--blue); flex:none; width:1.5rem; height:1.5rem}
.form__submit{margin-top:2rem}

/* ── Pied de page ──────────────────────────────────────────────────────── */
.ftr{background:var(--white); border-top:1.5px solid var(--line); padding-block:2.5rem; font-size:.875rem; color:var(--ink-3)}
.ftr__grid{display:grid; gap:1.75rem}
/* La 4e colonne est plus large que les autres depuis le 2026-07-31 : elle porte
   la ligne d'editeur, qui est une ADRESSE POSTALE. A 1fr elle cassait sur
   « Ealing Cross 1st / Floor » — un siege social coupe au milieu de son propre
   nom se lit mal et se recopie mal. */
@media(min-width:760px){.ftr__grid{grid-template-columns:1.2fr 1fr .9fr 1.6fr}}
.ftr__brand{display:flex; align-items:center; gap:.6rem; color:var(--ink); font-weight:750; letter-spacing:-.02em; font-size:1.0625rem}
.ftr__brand svg{width:32px; height:32px; flex:none}
.ftr h2{font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:750; margin-bottom:.7rem}
.ftr ul{list-style:none; display:grid; gap:.45rem}
.ftr a{color:var(--ink-2); text-decoration:none; display:inline-block; padding-block:.25rem}
.ftr a:hover{color:var(--blue-ink); text-decoration:underline}
.ftr__state{margin-top:.9rem; max-width:32ch; line-height:1.5}
/* Mentions legales. `--ink-3` sur `--white` = 6,63:1 (mesure) : au-dessus du
   4,5:1 exige pour du texte de 14 px. Une mention legale illisible n'est pas
   une mention legale. */
.ftr__legal{margin-bottom:.7rem; line-height:1.55; max-width:46ch}
.ftr__copy{margin-top:.35rem; line-height:1.6; max-width:74ch}
/* La phrase qui compte ne se distingue PAS par la couleur seule (1.4.1) : elle
   est en `--ink-2` ET en 500, et elle demeure une phrase autonome sans style. */
.ftr__vous{color:var(--ink-2); font-weight:500}
.ftr__bottom{margin-top:2rem; padding-top:1.25rem; border-top:1.5px solid var(--line); display:grid; gap:.6rem}
.lang{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; list-style:none}
/* ⚠️ SPÉCIFICITÉ. `.ftr ul` vaut (0,1,1), `.lang` vaut (0,1,0) : la règle
   ci-dessus était ÉCRASÉE et le sélecteur de langue se rendait en `display:grid`
   d'une seule colonne — trois pastilles empilées, avec le `gap` de `.ftr ul`
   (7,2 px) au lieu du sien (8 px). MESURÉ sur le DOM rendu :
   `display=grid`, `grid-template-columns=1044px`, `gap=7.2px`, trois `<li>` de
   1044 px de large empilés à 4458/4501/4544 px.
   Aucun contrôle mécanique ne pouvait le voir : pas de débordement, contraste
   intact, cibles ≥ 24 px, zéro erreur console. Il a fallu REGARDER une capture —
   la même leçon que la mascotte du hero. La rangée est rétablie par une règle de
   spécificité égale à celle qui la battait, pas par un `!important`. */
.ftr .lang{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center}
.lang li{display:inline-flex}
.lang a,.lang span{
  display:inline-flex; align-items:center; min-height:36px; padding:.3rem .75rem;
  border:1.5px solid var(--line); border-radius:var(--pill); font-size:.8125rem; font-weight:640;
  text-decoration:none; color:var(--ink-2); background:var(--white);
}
.lang a:hover{border-color:var(--blue); color:var(--blue-ink)}
.lang [aria-current=true]{background:var(--blue-soft); border-color:var(--blue); color:var(--ink)}
.lang span[aria-disabled=true]{color:var(--ink-3); background:transparent; font-style:italic}