/* ============================================================================
   DISRUPTIVE CLOSING — Formulaire
   Tous les réglages de la direction artistique sont centralisés dans :root.
   Palette, typo et composants suivent la charte graphique Disruptive Closing.
   ========================================================================== */

:root {
  /* --- Couleurs : 5 couleurs, 1 identité -------------------------------- */
  --c-deep:        #0A1520;   /* Bleu Profond  — fond dominant */
  --c-warm:        #F8F5F0;   /* Blanc Chaud   — texte principal */
  --c-green:       #3BD851;   /* Vert          — identité, CTA, validation */
  --c-green-alt:   #1EC85A;   /* Vert plein    — dégradés, ombres */
  --c-red:         #E85D40;   /* Rouge Doux    — accents, erreurs */
  --c-amber:       #F5A623;   /* Ambre         — mise en avant */

  /* Nuances dérivées (fonds teintés, bordures, textes secondaires) */
  --c-surface:      #101F2E;
  --c-surface-hi:   #16293B;
  --c-line:         rgba(248, 245, 240, .13);
  --c-line-strong:  rgba(248, 245, 240, .26);
  --c-muted:        rgba(248, 245, 240, .62);
  --c-faint:        rgba(248, 245, 240, .42);
  --c-green-tint:   rgba(59, 216, 81, .11);
  --c-green-line:   rgba(59, 216, 81, .55);
  --c-red-tint:     rgba(232, 93, 64, .11);
  --c-amber-tint:   rgba(245, 166, 35, .11);

  /* --- Typographie ------------------------------------------------------ */
  --f-display: "Nunito", system-ui, -apple-system, sans-serif;          /* titrage */
  --f-body:    Calibri, "Carlito", "Nunito", system-ui, sans-serif;     /* corps & UI */

  --t-h1:      clamp(1.85rem, 1.15rem + 3.1vw, 3.35rem);
  --t-h2:      clamp(1.5rem,  1.05rem + 2.1vw, 2.4rem);
  --t-lead:    clamp(1.02rem, .96rem + .35vw, 1.18rem);
  --t-body:    clamp(.98rem,  .94rem + .2vw,  1.06rem);
  --t-small:   .875rem;
  --t-tag:     .6875rem;

  --lh-tight:  1.14;
  --lh-body:   1.62;

  /* --- Espacements ------------------------------------------------------ */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.75rem; --s-8: 4rem;
  --gutter: clamp(1.25rem, .6rem + 3vw, 2.5rem);
  --measure: 34rem;               /* largeur de lecture confortable */

  /* --- Rayons ----------------------------------------------------------- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-pill: 999px;

  /* --- Animations ------------------------------------------------------- */
  --d-fast:  140ms;
  --d-base:  240ms;
  --d-slow:  420ms;
  --d-enter: 320ms;
  --d-leave: 170ms;
  --ease:      cubic-bezier(.22, .68, .32, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);

  /* --- Ombres (colorées, conformes à la charte) ------------------------- */
  --sh-green: 0 6px 22px -6px rgba(30, 200, 90, .55);
  --sh-red:   0 6px 22px -6px rgba(232, 93, 64, .5);
}

/* ============================================================================
   BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--c-deep);
  color: var(--c-warm);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, fieldset, legend, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input, textarea { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--c-green); color: var(--c-deep); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Focus : toujours visible, jamais sur simple clic souris */
:focus { outline: none; }

/* Le titre reçoit le focus à chaque changement d'écran pour repositionner les
   lecteurs d'écran. Ce n'est pas un élément interactif : pas de contour. */
#screen-title:focus,
#screen-title:focus-visible { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ============================================================================
   FOND DÉCORATIF — grille + orbes (charte, section « éléments graphiques »)
   ========================================================================== */

.backdrop {
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none; overflow: hidden;
}

.backdrop__grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(to right,  var(--c-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--c-line) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .16;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
}

/* L'opacité de l'orbe verte est pilotée en JS : elle croît très légèrement
   avec la progression. Voir CONFIG.orbGrowsWithProgress dans script.js. */
.orb--green {
  width: 600px; height: 600px; top: -100px; right: -100px;
  background: radial-gradient(circle, rgba(30, 200, 90, .12), transparent 68%);
  transition: opacity var(--d-slow) var(--ease);
}
.orb--amber {
  width: 400px; height: 400px; bottom: 100px; left: -80px;
  background: radial-gradient(circle, rgba(245, 166, 35, .12), transparent 68%);
}
.orb--red {
  width: 300px; height: 300px; top: 200px; right: 200px;
  background: radial-gradient(circle, rgba(232, 93, 64, .12), transparent 68%);
}

/* ============================================================================
   BARRE SUPÉRIEURE — logo + progression
   ========================================================================== */

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-4) var(--gutter);
  padding-top: max(var(--s-4), env(safe-area-inset-top));
}

.topbar__brand { flex: none; line-height: 0; }
.topbar__brand img { width: 104px; height: auto; opacity: .95; }

.topbar__progress {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: 340px;
  margin-left: auto;
  opacity: 0;
  transition: opacity var(--d-base) var(--ease);
}
.topbar__progress.is-visible { opacity: 1; }

.progress {
  flex: 1;
  height: 2px;
  background: var(--c-line);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progress__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--c-green);
  border-radius: var(--r-pill);
  transition: width var(--d-slow) var(--ease-out);
}

.topbar__step {
  flex: none;
  font-size: var(--t-tag);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-faint);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   SCÈNE & TRANSITIONS D'ÉCRAN
   ========================================================================== */

.stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--s-5) var(--gutter) var(--s-7);
  padding-bottom: max(var(--s-7), calc(env(safe-area-inset-bottom) + var(--s-5)));
}

.screen {
  width: 100%;
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.screen--wide { max-width: 40rem; }

/* Le contenu porte le rythme vertical de l'écran. */
.screen__content {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
/* Un indice colle à ce qu'il précède, il ne flotte pas au milieu. */
.screen__content > .eyebrow + .title { margin-top: calc(var(--s-5) * -1 + var(--s-2)); }
.screen__content > .title + .question { margin-top: calc(var(--s-5) * -1 + var(--s-3)); }
.screen__content > .title--setup + .question--hero { margin-top: calc(var(--s-5) * -1 + var(--s-4)); }
.screen__content > .question + .hint,
.screen__content > .title + .hint { margin-top: calc(var(--s-5) * -1 + var(--s-2)); }

/* Entrée / sortie. La direction s'inverse quand on revient en arrière. */
@keyframes screen-in-fwd  { from { opacity: 0; transform: translateY(14px);  } to { opacity: 1; transform: none; } }
@keyframes screen-in-back { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes screen-out-fwd  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-12px); } }
@keyframes screen-out-back { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(12px);  } }

.screen.is-entering            { animation: screen-in-fwd  var(--d-enter) var(--ease-out) both; }
.screen.is-entering.is-back    { animation-name: screen-in-back; }
.screen.is-leaving             { animation: screen-out-fwd var(--d-leave) var(--ease) both; }
.screen.is-leaving.is-back     { animation-name: screen-out-back; }

/* Apparition en cascade des blocs d'un écran */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.stagger > * { animation: rise var(--d-base) var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 40ms; }
.stagger > *:nth-child(2) { animation-delay: 90ms; }
.stagger > *:nth-child(3) { animation-delay: 140ms; }
.stagger > *:nth-child(4) { animation-delay: 190ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 290ms; }
.stagger > *:nth-child(7) { animation-delay: 340ms; }
.stagger > *:nth-child(8) { animation-delay: 380ms; }
.stagger > *:nth-child(9) { animation-delay: 420ms; }
.stagger > *:nth-child(n+10) { animation-delay: 460ms; }

/* ============================================================================
   TYPOGRAPHIE DES ÉCRANS
   ========================================================================== */

.eyebrow {
  font-family: var(--f-body);
  font-size: var(--t-tag);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-green);
}

.title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  letter-spacing: -.015em;
  text-wrap: balance;
}
.title--hero { font-size: var(--t-h1); }

.question {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--c-warm);
  text-wrap: pretty;
}

/* Préambule long : il pose le décor sans voler la vedette à la question. */
.title--setup {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.05rem, .97rem + .5vw, 1.28rem);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--c-muted);
}
.question--hero {
  font-weight: 800;
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  letter-spacing: -.015em;
  text-wrap: balance;
}

.lead  { font-size: var(--t-lead); color: var(--c-muted); text-wrap: pretty; }
.lead p + p { margin-top: var(--s-3); }
.lead strong { color: var(--c-warm); font-weight: 600; }

.hint {
  font-size: var(--t-small);
  color: var(--c-faint);
  text-wrap: pretty;
}

.accent { color: var(--c-green); }

/* ============================================================================
   CHAMPS TEXTE — style « ligne d'écriture », pas de boîte administrative
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: var(--s-2); }

.field__label {
  font-size: var(--t-tag);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-faint);
}

.field__input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-line-strong);
  border-radius: 0;
  padding: var(--s-3) 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.75rem);
  color: var(--c-warm);
  transition: border-color var(--d-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field__input::placeholder { color: rgba(248, 245, 240, .22); font-weight: 600; }
.field__input:focus { border-bottom-color: var(--c-green); }
.field__input:focus-visible { outline: none; }

.field__textarea {
  width: 100%;
  min-height: 8.5rem;
  resize: vertical;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--c-warm);
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.field__textarea::placeholder { color: rgba(248, 245, 240, .3); }
.field__textarea:focus {
  border-color: var(--c-green-line);
  background: var(--c-surface-hi);
  outline: none;
}

.field.has-error .field__input    { border-bottom-color: var(--c-red); }
.field.has-error .field__textarea { border-color: var(--c-red); }

.field__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  min-height: 1.25rem;
}

.counter {
  margin-left: auto;
  font-size: var(--t-tag);
  color: var(--c-faint);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease);
}
.counter.is-visible { opacity: 1; }
.counter.is-near    { color: var(--c-amber); }

.error {
  font-size: var(--t-small);
  color: var(--c-red);
  display: none;
}
.error.is-visible { display: block; animation: rise var(--d-fast) var(--ease-out) both; }

/* ============================================================================
   OPTIONS — radios & cases à cocher (vrais inputs, stylés)
   ========================================================================== */

.options { display: flex; flex-direction: column; gap: var(--s-2); }
.options--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }

.option { position: relative; display: block; }

.option input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.option__body {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 3.5rem;
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition:
    border-color var(--d-fast) var(--ease),
    background    var(--d-fast) var(--ease),
    transform     var(--d-fast) var(--ease);
}

.option__key {
  flex: none;
  display: none;                 /* affiché uniquement au pointeur fin, cf. media query */
  width: 1.5rem; height: 1.5rem;
  align-items: center; justify-content: center;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  font-size: var(--t-tag);
  font-weight: 700;
  color: var(--c-faint);
  transition: all var(--d-fast) var(--ease);
}

/* Le bloc texte d'une option : le libellé, plus éventuellement une ligne
   d'explication (voir les styles de closing dans content.js). */
.option__texte {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;                 /* autorise le retour à la ligne, jamais de débordement */
}

.option__label { text-wrap: pretty; }

.option__desc {
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--c-faint);
  text-wrap: pretty;
}
.option input:checked + .option__body .option__desc { color: var(--c-muted); }

/* Avec une description, la ligne est plus haute : on aligne en haut. */
.option__body:has(.option__desc) { align-items: flex-start; }
.option__body:has(.option__desc) .option__key,
.option__body:has(.option__desc) .option__mark { margin-top: 2px; }

.option__mark {
  flex: none;
  width: 1.15rem; height: 1.15rem;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  transition: all var(--d-fast) var(--ease);
}
.option--multi .option__mark { border-radius: var(--r-sm); }

/* États */
.option input:hover + .option__body { border-color: var(--c-line-strong); background: var(--c-surface-hi); }

.option input:focus-visible + .option__body {
  outline: 2px solid var(--c-green);
  outline-offset: 3px;
}

.option input:checked + .option__body {
  border-color: var(--c-green-line);
  background: var(--c-green-tint);
}
.option input:checked + .option__body .option__mark {
  border-color: var(--c-green);
  background: var(--c-green);
  box-shadow: inset 0 0 0 3px var(--c-deep);
}
.option--multi input:checked + .option__body .option__mark {
  box-shadow: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230A1520' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 82% no-repeat,
    var(--c-green);
}
.option input:checked + .option__body .option__key {
  border-color: var(--c-green-line);
  color: var(--c-green);
}
.option input:active + .option__body { transform: scale(.99); }

/* ============================================================================
   MICRO-RÉACTIONS — apparaissent sous les options, jamais bloquantes
   ========================================================================== */

.reaction {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--c-amber-tint);
  border: 1px solid rgba(245, 166, 35, .3);
  border-radius: var(--r-md);
  font-size: var(--t-small);
  color: var(--c-warm);
  animation: rise var(--d-base) var(--ease-out) both;
}
.reaction::before {
  content: "";
  flex: none;
  width: 3px; align-self: stretch;
  margin: 2px 0;
  background: var(--c-amber);
  border-radius: var(--r-pill);
}

/* ============================================================================
   RÉVÉLATION CONDITIONNELLE (« Autre », « On t'écoute »)
   ========================================================================== */

.reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--d-base) var(--ease-out),
    opacity var(--d-base) var(--ease);
}
.reveal > * { overflow: hidden; }
.reveal.is-open { grid-template-rows: 1fr; opacity: 1; }

/* ============================================================================
   ACTIONS — boutons (pill + ombre portée colorée, cf. charte)
   ========================================================================== */

.actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 3.25rem;                /* confortable au pouce */
  padding: 0 var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-body);
  line-height: 1;
  cursor: pointer;
  transition:
    transform var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease),
    background var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease),
    color var(--d-fast) var(--ease);
}

.btn--primary {
  background: var(--c-green);
  color: var(--c-deep);
  box-shadow: var(--sh-green);
}
.btn--primary:hover  { transform: translateY(-1px); box-shadow: 0 10px 28px -6px rgba(30, 200, 90, .68); }
.btn--primary:active { transform: translateY(0) scale(.985); }

.btn--secondary {
  background: var(--c-red);
  color: var(--c-warm);
  box-shadow: var(--sh-red);
}
.btn--secondary:hover { transform: translateY(-1px); }

.btn--ghost {
  background: transparent;
  border-color: var(--c-line-strong);
  color: var(--c-muted);
  min-height: 2.75rem;
  padding: 0 var(--s-5);
}
.btn--ghost:hover { border-color: var(--c-line-strong); color: var(--c-warm); background: rgba(248,245,240,.04); }

/* Retour arrière : discret, jamais concurrent du CTA */
.btn--back {
  background: none;
  border: 0;
  padding: var(--s-2) 0;
  min-height: 2.5rem;
  font-family: var(--f-body);
  font-size: var(--t-small);
  color: var(--c-faint);
  cursor: pointer;
  transition: color var(--d-fast) var(--ease);
}
.btn--back:hover { color: var(--c-warm); }

/* Lien texte discret — « Je préfère passer » */
.btn--skip {
  background: none;
  border: 0;
  padding: var(--s-2);
  font-family: var(--f-body);
  font-size: var(--t-small);
  color: var(--c-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--d-fast) var(--ease);
}
.btn--skip:hover { color: var(--c-warm); }

.kbd-tip {
  margin-left: auto;
  font-size: var(--t-tag);
  color: var(--c-faint);
  display: none;                       /* pointeur fin uniquement */
}
.kbd-tip kbd {
  font-family: var(--f-body);
  font-size: inherit;
  padding: .15em .45em;
  border: 1px solid var(--c-line-strong);
  border-radius: 5px;
  color: var(--c-muted);
}

/* ============================================================================
   ÉCRANS PARTICULIERS — intro, interstitiels, final
   ========================================================================== */

.intro__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-tag);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-faint);
}
.intro__meta span { display: inline-flex; align-items: center; gap: .5em; }
.intro__meta span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: var(--r-pill);
  background: var(--c-green);
}

/* Interstitiel : une seule phrase, beaucoup d'air, aucun bruit visuel */
.screen--interstitial { gap: var(--s-4); text-align: left; }
.screen--interstitial .title { font-size: var(--t-h2); }
.interstitial__cue {
  font-size: var(--t-tag);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-faint);
  margin-top: var(--s-4);
}

/* Cercle : élément graphique de la marque, point d'ancrage qui rayonne */
.pulse {
  width: 46px; height: 46px;
  border: 1.5px solid var(--c-green-line);
  border-radius: var(--r-pill);
  position: relative;
}
.pulse::after {
  content: "";
  position: absolute; inset: -1.5px;
  border: 1.5px solid var(--c-green);
  border-radius: var(--r-pill);
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.85); opacity: 0;  }
  100% { transform: scale(1.85); opacity: 0;  }
}

.screen--end .title { font-size: var(--t-h1); }
.screen--end .flame { display: inline-block; animation: flame-in var(--d-slow) var(--ease-out) both; animation-delay: 260ms; }
@keyframes flame-in { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }

.rule {
  height: 1px;
  background: var(--c-line);
  border: 0;
  margin: var(--s-2) 0;
}

/* Bandeau de reprise de session */
.resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 2px solid var(--c-amber);
  border-radius: var(--r-md);
  font-size: var(--t-small);
  color: var(--c-muted);
}
.resume__text { flex: 1 1 14rem; }
.resume .btn--ghost { min-height: 2.4rem; font-size: var(--t-small); padding: 0 var(--s-4); }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 30rem) {
  .options--grid { grid-template-columns: 1fr; }
  .topbar { gap: var(--s-3); }
  .topbar__brand img { width: 88px; }
  .actions { gap: var(--s-3); }
  .actions .btn--primary { flex: 1 1 100%; }
  .btn { min-height: 3.4rem; }        /* cible tactile généreuse */

  /* Rythme resserré : sur un écran de 812 px, l'intro doit montrer son CTA
     sans obliger à scroller. C'est l'écran qui décide si la personne joue. */
  .screen__content { gap: var(--s-4); }
  .title--hero { font-size: clamp(1.65rem, 1.05rem + 2.6vw, 2.2rem); }
  .lead { line-height: 1.5; }
  .lead p + p { margin-top: var(--s-2); }
  .rule { margin: 0; }
  .stage { padding-top: var(--s-3); }

  /* Sur les écrans longs (10 terrains de jeu, scénarios), le CTA reste
     atteignable sans remonter. `sticky` plutôt que `fixed` : la barre reste
     dans le flux, donc le clavier mobile ne passe jamais par-dessus. */
  .actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    gap: var(--s-2) var(--s-4);
    margin-inline: calc(var(--gutter) * -1);
    padding: var(--s-3) var(--gutter);
    padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
    background: var(--c-deep);        /* opaque : rien ne transparaît dessous */
  }
  /* Fondu court au-dessus de la barre, pour que le contenu s'y efface. */
  .actions::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 100%;
    height: var(--s-6);
    background: linear-gradient(to top, var(--c-deep), rgba(10, 21, 32, 0));
    pointer-events: none;
  }
  /* Le CTA occupe sa propre ligne, retour et « passer » se partagent la suivante. */
  .actions .btn--primary { order: -1; flex: 1 1 100%; }
  .actions .btn--back    { order: 0; }
  .actions .btn--skip    { order: 1; margin-left: auto; }
}

/* Écrans hauts : on centre vraiment. `safe` évite qu'un écran plus haut que la
   fenêtre déborde par le haut et devienne inatteignable. */
@media (min-height: 46rem) {
  .stage { align-items: center; align-items: safe center; }
}

/* Desktop / souris : raccourcis clavier visibles */
@media (pointer: fine) {
  .option__key { display: inline-flex; }
  .kbd-tip     { display: block; }
}

/* ============================================================================
   PRÉFÉRENCES UTILISATEUR
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .pulse::after { display: none; }
}

@media (prefers-contrast: more) {
  :root {
    --c-line:        rgba(248, 245, 240, .35);
    --c-line-strong: rgba(248, 245, 240, .6);
    --c-muted:       rgba(248, 245, 240, .85);
    --c-faint:       rgba(248, 245, 240, .7);
  }
  .backdrop { display: none; }
}

/* Emplacement réservé quand l'option n'a pas de raccourci (au-delà de 9) */
.option__key--empty { border-color: transparent; }

/* ============================================================================
   ÉTAT D'ENVOI
   ========================================================================== */

/* Échec d'envoi : un message humain, jamais le détail technique de Supabase. */
.submit-error {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--c-red-tint);
  border: 1px solid rgba(232, 93, 64, .32);
  border-radius: var(--r-md);
  font-size: var(--t-small);
  color: var(--c-warm);
  animation: rise var(--d-base) var(--ease-out) both;
}
.submit-error::before {
  content: "";
  flex: none;
  width: 3px;
  align-self: stretch;
  margin: 2px 0;
  background: var(--c-red);
  border-radius: var(--r-pill);
}

/* Envoi en cours : le bouton ne peut plus être cliqué deux fois. */
.btn:disabled {
  cursor: progress;
  opacity: .7;
  transform: none;
  box-shadow: none;
}

/* ============================================================================
   V2 — FICHE PROFIL
   ========================================================================== */

.profil {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 2px solid var(--c-green);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-5) var(--s-4);
}

.profil__nom {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin-bottom: var(--s-4);
  overflow-wrap: anywhere;      /* un nom très long ne déborde jamais */
}

.profil__liste { display: flex; flex-direction: column; }

.profil__ligne {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-line);
}
.profil__ligne:first-child { border-top: 0; padding-top: 0; }

.profil__intitule {
  font-size: var(--t-tag);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-faint);
}

.profil__valeur {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--c-warm);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* Les réponses libres sont longues : corps de texte plutôt que titrage. */
.profil__valeur--texte {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--c-muted);
}

/* Sur écran large, l'intitulé passe en colonne de gauche. */
@media (min-width: 34rem) {
  .profil__ligne {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: var(--s-4);
    align-items: baseline;
  }
  .profil__intitule { padding-top: .15em; }
}

/* ============================================================================
   V2 — ÉLÉMENTS DE PRÉSENTATION (5 cartes Oui / Pas encore)
   ========================================================================== */

.checklist { display: flex; flex-direction: column; gap: var(--s-2); }

.checklist__ligne {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.checklist__label {
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--c-warm);
  text-wrap: pretty;
}

.checklist__choix { display: flex; gap: var(--s-2); }

.checklist__option { position: relative; flex: 1 1 0; display: block; }

.checklist__option input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.checklist__pastille {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;                 /* confortable au pouce */
  padding: 0 var(--s-4);
  background: transparent;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-small);
  color: var(--c-muted);
  text-align: center;
  transition: all var(--d-fast) var(--ease);
}

.checklist__option input:hover + .checklist__pastille { border-color: var(--c-warm); color: var(--c-warm); }
.checklist__option input:focus-visible + .checklist__pastille { outline: 2px solid var(--c-green); outline-offset: 3px; }
.checklist__option input:active + .checklist__pastille { transform: scale(.98); }

/* Réponse « Oui » : vert. Réponse « Pas encore » : neutre, jamais rouge —
   ce n'est pas une faute, seulement un élément à préparer. */
.checklist__option:first-child input:checked + .checklist__pastille {
  background: var(--c-green-tint);
  border-color: var(--c-green-line);
  color: var(--c-green);
}
.checklist__option:last-child input:checked + .checklist__pastille {
  background: rgba(248, 245, 240, .07);
  border-color: var(--c-line-strong);
  color: var(--c-warm);
}

.checklist.has-error .checklist__ligne { border-color: rgba(232, 93, 64, .4); }

@media (min-width: 34rem) {
  .checklist__ligne {
    flex-direction: row;
    align-items: center;
    gap: var(--s-4);
  }
  .checklist__label { flex: 1; }
  .checklist__choix { flex: none; width: 16rem; }
}

/* ============================================================================
   V2 — BILAN DE PRÉPARATION (écran final)
   ========================================================================== */

.bilan {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-5);
}

.bilan__titre {
  font-size: var(--t-tag);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-faint);
}

.bilan__score {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.3rem);
  line-height: 1.1;
  color: var(--c-green);
  margin: var(--s-3) 0 var(--s-4);
}
.bilan__suffixe {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--c-muted);
}

.bilan__liste { display: flex; flex-direction: column; gap: var(--s-2); }

.bilan__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-body);
  color: var(--c-muted);
  text-wrap: pretty;
}
.bilan__item.is-pret { color: var(--c-warm); }

.bilan__marque {
  flex: none;
  width: 1.15rem;
  font-weight: 700;
  color: var(--c-faint);
}
.bilan__item.is-pret .bilan__marque { color: var(--c-green); }

/* ============================================================================
   V2 — RESSOURCES (affichées seulement pour ce qui manque)
   ========================================================================== */

.ressources { display: flex; flex-direction: column; gap: var(--s-3); }

.ressource {
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 2px solid var(--c-amber);
  border-radius: var(--r-md);
}

.ressource__titre {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--c-warm);
  margin-bottom: var(--s-2);
}

.ressource__texte {
  font-size: var(--t-small);
  line-height: var(--lh-body);
  color: var(--c-muted);
  text-wrap: pretty;
}

.ressource__lien {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  margin-top: var(--s-3);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-small);
  color: var(--c-green);
  text-decoration: none;
  border-bottom: 1px solid var(--c-green-line);
  transition: color var(--d-fast) var(--ease);
}
.ressource__lien:hover { color: var(--c-warm); border-bottom-color: var(--c-warm); }

/* ============================================================================
   V2.1 — FICHE PROFIL : en-tête et groupes
   ========================================================================== */

.profil__entete { margin-bottom: var(--s-5); }

.profil__niveau {
  display: inline-block;
  margin-top: var(--s-2);
  padding: .3em .9em;
  background: var(--c-green-tint);
  border: 1px solid var(--c-green-line);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--t-tag);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-green);
  text-wrap: pretty;
}

.profil__groupe + .profil__groupe { margin-top: var(--s-5); }

.profil__groupe-titre {
  font-size: var(--t-tag);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-green);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-line);
}

/* Le trait de séparation du groupe suffit : la première ligne n'en remet pas. */
.profil__groupe .profil__ligne:first-child { border-top: 0; padding-top: 0; }

/* ============================================================================
   V2.1 — BOUTON DE RESSOURCE EN ATTENTE D'URL
   ========================================================================== */

.bilan__conclusion {
  margin-top: var(--s-4);
  font-size: var(--t-small);
  line-height: var(--lh-body);
  color: var(--c-muted);
  text-wrap: pretty;
}

/* Tant qu'aucune adresse n'est renseignée dans content.js, le bouton reste
   visible mais clairement inactif — jamais de lien qui ne mène nulle part. */
button.ressource__lien {
  background: none;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--c-green-line);
  cursor: pointer;
  font: inherit;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-small);
  color: var(--c-green);
}

.ressource__lien.is-inactive,
.ressource__lien:disabled {
  color: var(--c-faint);
  border-bottom-color: transparent;
  border-bottom-style: dashed;
  border-bottom-color: var(--c-line-strong);
  cursor: default;
}
.ressource__lien.is-inactive:hover { color: var(--c-faint); }

/* ============================================================================
   V3 — RÉCAPITULATIF DU FAST TRACK (écran final court)
   Réutilise la fiche profil, en plus sobre : pas d'en-tête, pas de bordure
   d'accent, c'est une synthèse et non une carte de présentation.
   ========================================================================== */

.profil--recap {
  border-left-color: var(--c-line);
  padding: var(--s-4) var(--s-5);
}
.profil--recap .profil__groupe-titre { margin-bottom: var(--s-2); }