/* ==========================================================================
   Racines grecques 11VP2 : feuille de style

   Base : « Warm parchment atelier » (cf. DESIGN.md). Crème, encre chaude,
   accent ember réservé au texte.
   Par-dessus : un traitement « liquid glass ». Les surfaces deviennent des
   plaques de verre translucides posées sur un fond coloré diffus : flou
   d'arrière-plan, reflet clair en haut de chaque plaque, ombre portée douce
   et angles adoucis. Cela s'écarte volontairement du « flat, 4 px, sans
   dégradé » de DESIGN.md, à la demande expresse pour ce site.
   ========================================================================== */

:root {
  /* Couleurs de base */
  --color-parchment: #f7f7f4;
  --color-bone: #f2f1ed;
  --color-linen: #e6e5e0;
  --color-stone: #cdcdc9;
  --color-mist: #a1a19f;
  --color-driftwood: #84847e;
  --color-ash: #7a7974;
  --color-ink: #26251e;
  --color-ember: #f54e00;
  --color-amber: #c08532;
  --color-forest: #34785c;
  --color-verdant: #1f8a65;
  --color-crimson: #cf2d56;

  /* --- Verre ----------------------------------------------------------- *
     Le verre a besoin de quelque chose à réfracter : le fond de page porte
     des halos chauds très diffus, que le flou vient capter.                */
  --verre-teinte: 253, 252, 248;              /* crème, jamais blanc pur */
  --verre-fond: rgba(var(--verre-teinte), 0.54);
  --verre-fond-dense: rgba(var(--verre-teinte), 0.72);
  --verre-fond-actif: rgba(var(--verre-teinte), 0.86);
  --verre-bord: rgba(255, 255, 255, 0.58);
  --verre-flou: blur(26px) saturate(190%);
  --verre-flou-leger: blur(14px) saturate(170%);
  /* Reflet : une ligne claire en haut, une ombre interne discrète en bas. */
  --verre-lustre: inset 0 1px 0 rgba(255, 255, 255, 0.90),
                  inset 0 -1px 0 rgba(38, 37, 30, 0.06);
  --verre-ombre: 0 8px 24px rgba(38, 37, 30, 0.10),
                 0 2px 5px rgba(38, 37, 30, 0.06);
  --verre-ombre-haute: 0 18px 48px rgba(38, 37, 30, 0.14),
                       0 4px 12px rgba(38, 37, 30, 0.08);

  /* Espacements */
  --e4: 4px;  --e8: 8px;   --e12: 12px; --e16: 16px; --e20: 20px;
  --e24: 24px; --e32: 32px; --e48: 48px; --e56: 56px; --e64: 64px;

  /* Formes : arrondies pour que les plaques lisent comme du verre. */
  --r: 14px;
  --r-petit: 8px;
  --r-modale: 22px;

  --largeur-max: 1040px;
  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--color-ink);
  font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;

  /* Halos chauds fixes : c'est ce que le verre réfracte en défilant. */
  background-color: var(--color-parchment);
  background-image:
    radial-gradient(42rem 30rem at 10% -6%,  rgba(192, 133, 50, 0.40), transparent 64%),
    radial-gradient(34rem 26rem at 96% 4%,   rgba(245, 78, 0, 0.26),   transparent 62%),
    radial-gradient(38rem 30rem at 86% 60%,  rgba(52, 120, 92, 0.22),  transparent 64%),
    radial-gradient(30rem 24rem at 0% 72%,   rgba(207, 45, 86, 0.14),  transparent 60%),
    radial-gradient(30rem 24rem at 50% 108%, rgba(192, 133, 50, 0.26), transparent 64%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Polices : variables pour rester lisibles dans les règles ci-dessous. */
:root {
  --font-ui: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-serif: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

::selection { background: #8BC4F8; }

h1, h2, h3 { font-weight: 400; margin: 0; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }

/* Les racines sont notées en translittération latine sur les planches ;
   la classe reste prête si des caractères grecs sont ajoutés un jour. */
.grec {
  font-family: 'EB Garamond', 'GFS Didot', 'Noto Serif', 'DejaVu Serif',
               'Palatino Linotype', ui-serif, Georgia, serif;
}

/* ---------- La plaque de verre ----------
   Classe utilitaire interne : toutes les surfaces translucides l'appliquent. */

.verre,
.carte-tranche,
.choix,
.segment span,
.carte,
.option-qcm,
.score-global,
.erreur,
.avertissement,
.modale__boite {
  background: var(--verre-fond);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  border: 1px solid var(--verre-bord);
  border-radius: var(--r);
  box-shadow: var(--verre-lustre), var(--verre-ombre);
}

/* Sans backdrop-filter (navigateurs anciens), on rend les surfaces opaques
   pour que le texte reste lisible sur les halos colorés. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .verre,
  .carte-tranche,
  .choix,
  .segment span,
  .carte,
  .option-qcm,
  .score-global,
  .erreur,
  .avertissement,
  .modale__boite,
  .bouton--secondaire,
  .entete,
  .zone-lancement { background: var(--color-bone); }
}

/* ---------- Utilitaires ---------- */

.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--e16);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lien-evitement {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-ink); color: var(--color-parchment);
  padding: var(--e8) var(--e16); border-radius: var(--r-petit);
}
.lien-evitement:focus { left: var(--e8); top: var(--e8); }

:focus-visible {
  outline: 2px solid var(--color-ember);
  outline-offset: 2px;
  border-radius: var(--r-petit);
}

/* ---------- En-tête ---------- */

.entete {
  position: sticky; top: 0; z-index: 20;
  background: rgba(var(--verre-teinte), 0.50);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  border-bottom: 1px solid rgba(38, 37, 30, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.entete__interieur {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px; gap: var(--e16);
}
.marque { display: flex; align-items: baseline; gap: var(--e12); min-width: 0; }
.marque__nom {
  font-size: 20px; font-weight: 500; letter-spacing: -0.01em;
  white-space: nowrap;
}
.marque__meta {
  font-family: var(--font-mono); font-size: 12px; color: var(--color-ash);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e8);
  min-height: 44px;
  padding: 0.7em 1.3em;
  border-radius: var(--r);
  border: 1px solid transparent;
  background: transparent;
  font-size: 14px; font-weight: 400; line-height: 1.2;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
.bouton:disabled { opacity: 0.45; cursor: not-allowed; }
.bouton:not(:disabled):active { transform: scale(0.985); }

/* Verre sombre : la même recette, teintée encre. */
.bouton--principal {
  background: rgba(38, 37, 30, 0.86);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  color: #faf9f5;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20),
              inset 0 -1px 0 rgba(0, 0, 0, 0.18),
              var(--verre-ombre);
}
.bouton--principal:not(:disabled):hover { background: rgba(38, 37, 30, 0.94); }

.bouton--secondaire {
  color: var(--color-ink);
  background: var(--verre-fond);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  border-color: var(--verre-bord);
  box-shadow: var(--verre-lustre), var(--verre-ombre);
}
.bouton--secondaire:not(:disabled):hover {
  background: var(--verre-fond-dense);
  box-shadow: var(--verre-lustre), var(--verre-ombre-haute);
}

.bouton--fantome { color: var(--color-ink); opacity: 0.7; padding: 0.5em 0.8em; }
.bouton--fantome:hover { opacity: 1; background: rgba(var(--verre-teinte), 0.55); }

.bouton--danger {
  background: rgba(207, 45, 86, 0.07);
  color: var(--color-crimson);
  border: 1px solid rgba(207, 45, 86, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.bouton--danger:hover { background: rgba(207, 45, 86, 0.14); }

.bouton--grand { width: 100%; min-height: 56px; font-size: 16px; }

/* Bouton de l'en-tête : compact, pour tenir à côté du titre sur téléphone. */
.bouton--entete {
  min-height: 38px;
  padding: 0.45em 0.9em;
  font-size: 13px;
}

/* ---------- Structure des écrans ---------- */

.ecran { padding: var(--e32) 0 var(--e64); }

.titre-page {
  font-size: 40px; line-height: 1.15; letter-spacing: -0.9px;
  margin-bottom: var(--e8);
}
.chapeau {
  font-family: var(--font-serif); font-size: 19px; line-height: 1.45;
  color: var(--color-driftwood); max-width: 60ch; margin-bottom: var(--e48);
}

.etape { margin-bottom: var(--e48); }

.etape__entete {
  display: flex; align-items: center; gap: var(--e12);
  margin-bottom: var(--e16);
  padding-bottom: var(--e12);
  border-bottom: 1px solid rgba(38, 37, 30, 0.10);
}
.etape__num {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: rgba(var(--verre-teinte), 0.72);
  border: 1px solid var(--verre-bord);
  border-radius: var(--r-petit);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  font-family: var(--font-mono); font-size: 12px; color: var(--color-ash);
}
.etape__titre { font-size: 22px; line-height: 1.3; letter-spacing: -0.11px; }

/* ---------- Étape 1 : tranches ---------- */

.barre-outils {
  display: flex; flex-wrap: wrap; gap: var(--e8);
  margin-bottom: var(--e16);
}

.grille-tranches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--e12);
}

.carte-tranche {
  position: relative;
  display: block; width: 100%; text-align: left;
  padding: var(--e12) var(--e16);
  cursor: pointer;
  /* 18 plaques floutées à l'écran : on allège le flou ici pour que le
     défilement reste fluide sur téléphone. */
  -webkit-backdrop-filter: var(--verre-flou-leger);
  backdrop-filter: var(--verre-flou-leger);
  transition: background var(--transition), border-color var(--transition),
              box-shadow var(--transition), transform var(--transition);
}
.carte-tranche:hover {
  background: var(--verre-fond-dense);
  box-shadow: var(--verre-lustre), var(--verre-ombre-haute);
}
.carte-tranche:active { transform: scale(0.99); }
/* Sélection : anneau d'encre net, plaque plus dense et pastille cochée.
   Sur du verre, un simple changement de teinte ne se repère pas assez. */
.carte-tranche[aria-pressed="true"] {
  background: var(--verre-fond-actif);
  border-color: rgba(38, 37, 30, 0.62);
  box-shadow: inset 0 0 0 1px rgba(38, 37, 30, 0.34),
              inset 0 1px 0 rgba(255, 255, 255, 0.85),
              var(--verre-ombre-haute);
}
.carte-tranche__haut {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e8); min-height: 20px;
}
.carte-tranche__num { font-size: 16px; }
.carte-tranche[aria-pressed="true"] .carte-tranche__num { font-weight: 500; }
.carte-tranche__coche {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  background: var(--color-ink); color: #faf9f5;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font-size: 11px; line-height: 1;
  visibility: hidden;
}
.carte-tranche[aria-pressed="true"] .carte-tranche__coche { visibility: visible; }
.carte-tranche__meta {
  display: block; margin-top: var(--e4);
  font-family: var(--font-mono); font-size: 12px; color: var(--color-ash);
}

.jauge {
  margin-top: var(--e8);
  height: 5px; border-radius: 3px;
  background: rgba(38, 37, 30, 0.10);
  box-shadow: inset 0 1px 1px rgba(38, 37, 30, 0.08);
  overflow: hidden;
}
.jauge__remplissage {
  height: 100%; width: 0;
  background: var(--color-forest);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: width var(--transition);
}
.jauge__legende {
  display: block; margin-top: var(--e4);
  font-family: var(--font-mono); font-size: 11px; color: var(--color-ash);
}

.compteur {
  margin-top: var(--e16);
  font-family: var(--font-mono); font-size: 13px; color: var(--color-ash);
}

/* ---------- Choix (cases et radios) ---------- */

.choix-liste { display: grid; gap: var(--e12); }

.choix {
  display: flex; align-items: flex-start; gap: var(--e12);
  padding: var(--e16);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              box-shadow var(--transition);
}
.choix:hover {
  background: var(--verre-fond-dense);
  box-shadow: var(--verre-lustre), var(--verre-ombre-haute);
}
.choix:has(input:checked) {
  background: var(--verre-fond-actif);
  border-color: rgba(38, 37, 30, 0.62);
  box-shadow: inset 0 0 0 1px rgba(38, 37, 30, 0.34),
              inset 0 1px 0 rgba(255, 255, 255, 0.85),
              var(--verre-ombre-haute);
}
.choix:has(input:disabled) {
  cursor: not-allowed; opacity: 0.45;
  background: rgba(var(--verre-teinte), 0.35);
  box-shadow: none;
}
.choix:has(input:focus-visible) { outline: 2px solid var(--color-ember); outline-offset: 2px; }

.choix input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--color-ink); }
.choix__corps { display: block; min-width: 0; }
.choix__titre { display: block; font-size: 16px; }
.choix:has(input:checked) .choix__titre { font-weight: 500; }
.choix__aide {
  display: block; margin-top: 2px;
  font-size: 13px; color: var(--color-ash); line-height: 1.45;
}
.choix__aide em { font-style: normal; color: var(--color-ember); }
.choix__raison {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: 12px; color: var(--color-ash);
}
.choix--seul { margin-top: var(--e8); }

/* ---------- Options de session ---------- */

.options { display: grid; gap: var(--e16); }
.option { margin: 0; padding: 0; border: 0; }
.option legend {
  padding: 0 0 var(--e8);
  font-family: var(--font-mono); font-size: 12px;
  color: var(--color-ash); text-transform: uppercase; letter-spacing: 0.04em;
}
.segment { display: flex; flex-wrap: wrap; gap: var(--e8); }
.segment label { position: relative; }
.segment input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.segment span {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--e20);
  font-size: 14px;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition);
}
.segment input:checked + span {
  background: rgba(38, 37, 30, 0.86);
  color: #faf9f5;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20),
              inset 0 -1px 0 rgba(0, 0, 0, 0.18),
              var(--verre-ombre);
}
.segment input:focus-visible + span { outline: 2px solid var(--color-ember); outline-offset: 2px; }

/* ---------- Zone de lancement ---------- */

.zone-lancement {
  position: sticky; bottom: 0; z-index: 10;
  margin: 0 calc(-1 * var(--e16));
  padding: var(--e16);
  background: rgba(var(--verre-teinte), 0.45);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  border-top: 1px solid rgba(var(--verre-teinte), 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              0 -6px 20px rgba(38, 37, 30, 0.06);
}
.zone-lancement__message {
  min-height: 20px; margin-bottom: var(--e8);
  font-family: var(--font-mono); font-size: 12px; color: var(--color-crimson);
}

/* ---------- Session ---------- */

.session-entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e8); margin-bottom: var(--e12);
}
.session-compteur {
  font-family: var(--font-mono); font-size: 13px; color: var(--color-ash);
  font-variant-numeric: tabular-nums;
}
.session-score {
  font-family: var(--font-mono); font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.session-score .score-ok { color: var(--color-forest); }

.progression {
  height: 5px; border-radius: 3px;
  background: rgba(38, 37, 30, 0.10);
  box-shadow: inset 0 1px 1px rgba(38, 37, 30, 0.08);
  overflow: hidden; margin-bottom: var(--e32);
}
.progression__barre {
  height: 100%; width: 0;
  background: rgba(38, 37, 30, 0.80);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: width var(--transition);
}

.zone-carte { display: grid; gap: var(--e16); }

.carte { padding: var(--e24); }

.carte__origine {
  font-family: var(--font-mono); font-size: 12px; color: var(--color-ash);
  margin-bottom: var(--e16);
}
.carte__etiquette {
  font-family: var(--font-mono); font-size: 12px; color: var(--color-ash);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: var(--e8);
}
.carte__question {
  font-size: 26px; line-height: 1.25; letter-spacing: -0.312px;
  overflow-wrap: break-word;
}
.carte__question--long {
  font-family: var(--font-serif); font-size: 19px; line-height: 1.45;
  letter-spacing: normal;
}
.carte__complement {
  margin-top: var(--e8);
  font-family: var(--font-serif); font-size: 17px; color: var(--color-driftwood);
}
.carte__note {
  margin-top: var(--e12);
  font-family: var(--font-mono); font-size: 12px; color: var(--color-ash);
}

.actions-carte { display: grid; gap: var(--e8); }

.raccourci { font-family: var(--font-mono); font-size: 11px; opacity: 0.6; }

/* QCM */
.liste-qcm { display: grid; gap: var(--e12); }
.option-qcm {
  display: flex; align-items: flex-start; gap: var(--e12);
  width: 100%; text-align: left;
  padding: var(--e16);
  cursor: pointer; font-size: 16px; line-height: 1.45;
  transition: background var(--transition), border-color var(--transition),
              box-shadow var(--transition), transform var(--transition);
}
.option-qcm:not(:disabled):hover {
  background: var(--verre-fond-dense);
  box-shadow: var(--verre-lustre), var(--verre-ombre-haute);
}
.option-qcm:not(:disabled):active { transform: scale(0.99); }
.option-qcm__num {
  flex: none; width: 24px; height: 24px;
  display: grid; place-items: center;
  background: rgba(38, 37, 30, 0.07);
  border-radius: var(--r-petit);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono); font-size: 12px; color: var(--color-ash);
}
.option-qcm__texte { min-width: 0; overflow-wrap: break-word; }

.option-qcm--juste {
  background: rgba(52, 120, 92, 0.16);
  border-color: rgba(52, 120, 92, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), var(--verre-ombre);
}
.option-qcm--juste .option-qcm__num { background: var(--color-forest); color: #faf9f5; }
.option-qcm--faux {
  background: rgba(207, 45, 86, 0.13);
  border-color: rgba(207, 45, 86, 0.50);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), var(--verre-ombre);
}
.option-qcm--faux .option-qcm__num { background: var(--color-crimson); color: #faf9f5; }
.option-qcm:disabled { cursor: default; }

/* Correction du QCM */
.verdict {
  font-family: var(--font-mono); font-size: 13px;
  margin-bottom: var(--e8);
}
.verdict--juste { color: var(--color-verdant); }
.verdict--faux { color: var(--color-crimson); }

.rappel-reponse {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.45;
}
.rappel-reponse strong { font-weight: 500; }

/* ---------- Résultats ---------- */

.score-global {
  padding: var(--e32) var(--e24);
  margin-bottom: var(--e24);
  text-align: center;
  box-shadow: var(--verre-lustre), var(--verre-ombre-haute);
}
.score-global__etiquette {
  font-family: var(--font-mono); font-size: 12px; color: var(--color-ash);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: var(--e4);
}
.score-global__chiffre {
  font-size: 72px; line-height: 1.1; letter-spacing: -2.16px;
  font-variant-numeric: tabular-nums;
}
.score-global__detail {
  font-family: var(--font-mono); font-size: 13px; color: var(--color-ash);
  margin-top: var(--e4);
}

.bloc-resultats { margin-bottom: var(--e32); }
.bloc-resultats h2 {
  font-size: 22px; letter-spacing: -0.11px;
  padding-bottom: var(--e8); margin-bottom: var(--e12);
  border-bottom: 1px solid rgba(38, 37, 30, 0.10);
}

.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th, .tableau td {
  text-align: left; padding: var(--e8) var(--e8) var(--e8) 0;
  border-bottom: 1px solid rgba(38, 37, 30, 0.08);
}
.tableau th {
  font-family: var(--font-mono); font-size: 12px; font-weight: 400;
  color: var(--color-ash); text-transform: uppercase; letter-spacing: 0.04em;
}
.tableau td:last-child, .tableau th:last-child {
  text-align: right; font-variant-numeric: tabular-nums;
}

.liste-erreurs { display: grid; gap: var(--e12); list-style: none; padding: 0; margin: 0; }
.erreur {
  padding: var(--e16);
  border-left: 3px solid rgba(207, 45, 86, 0.65);
}
.erreur__intitule {
  font-family: var(--font-mono); font-size: 11px; color: var(--color-ash);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.erreur__question {
  font-size: 17px; line-height: 1.4; overflow-wrap: break-word;
  margin-top: var(--e4);
}
/* Deux lignes « clé → valeur » : ce qui a été répondu, puis la bonne réponse. */
.erreur__ligne {
  display: flex; gap: var(--e8); align-items: baseline;
  margin-top: var(--e8);
  font-family: var(--font-serif); font-size: 17px; line-height: 1.4;
}
.erreur__cle {
  flex: none; width: 110px;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-ash);
}
.erreur__valeur { min-width: 0; overflow-wrap: break-word; }
.erreur__ligne--faux .erreur__valeur { color: var(--color-crimson); }
.erreur__ligne--juste .erreur__valeur { color: var(--color-ink); }
.erreur__meta {
  font-family: var(--font-mono); font-size: 12px; color: var(--color-ash);
  margin-top: var(--e12);
}

.actions-resultats { display: grid; gap: var(--e8); }

/* ---------- État vide et avertissement ---------- */

.etat-vide {
  padding: var(--e48) var(--e24);
  text-align: center;
  background: rgba(var(--verre-teinte), 0.45);
  -webkit-backdrop-filter: var(--verre-flou-leger);
  backdrop-filter: var(--verre-flou-leger);
  border: 1px dashed rgba(38, 37, 30, 0.16);
  border-radius: var(--r);
}
.etat-vide p { color: var(--color-ash); font-family: var(--font-serif); font-size: 19px; }

.avertissement {
  padding: var(--e12) var(--e16); margin-bottom: var(--e16);
  background: rgba(192, 133, 50, 0.16);
  border-color: rgba(192, 133, 50, 0.40);
  border-left: 3px solid rgba(192, 133, 50, 0.75);
  font-size: 14px; color: var(--color-ink);
}

/* ---------- Modale ---------- */

.modale {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: var(--e16);
}
/* `display:grid` ci-dessus l'emporte sur la règle [hidden] du navigateur :
   il faut masquer explicitement, sinon les modales s'affichent au chargement. */
.modale[hidden], [hidden] { display: none !important; }

.modale__fond {
  position: absolute; inset: 0;
  background: rgba(38, 37, 30, 0.28);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.modale__boite {
  position: relative;
  width: 100%; max-width: 480px; max-height: 90vh;
  display: flex; flex-direction: column;
  background: rgba(var(--verre-teinte), 0.82);
  border-radius: var(--r-modale);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), var(--verre-ombre-haute);
  overflow: hidden;
}
.modale__entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e8);
  padding: var(--e12) var(--e12) var(--e12) var(--e20);
  border-bottom: 1px solid rgba(38, 37, 30, 0.08);
}
.modale__titre { font-size: 16px; }
.modale__corps { padding: var(--e20); overflow: auto; }
.modale__actions { display: flex; flex-wrap: wrap; gap: var(--e8); margin-top: var(--e16); }
.note-modale {
  margin-top: var(--e12);
  font-family: var(--font-mono); font-size: 12px; color: var(--color-mist);
}
.message-modale {
  margin-top: var(--e12);
  font-family: var(--font-mono); font-size: 12px; color: var(--color-verdant);
}
.zone-danger {
  margin-top: var(--e24); padding-top: var(--e16);
  border-top: 1px solid rgba(38, 37, 30, 0.08);
}

.stats-prog { display: grid; gap: var(--e8); margin-bottom: var(--e8); }
.stat-ligne {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e8);
  font-size: 14px;
}
.stat-ligne__valeur { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Petits écrans ---------- */

@media (max-width: 479px) {
  .marque__meta { display: none; }
  /* Les clés passent au-dessus pour laisser toute la largeur au texte. */
  .erreur__ligne { display: block; }
  .erreur__cle { display: block; width: auto; margin-bottom: 2px; }
}

/* ---------- Bureau ---------- */

@media (min-width: 720px) {
  .conteneur { padding: 0 var(--e24); }
  .ecran { padding: var(--e48) 0 var(--e64); }
  .titre-page { font-size: 52px; letter-spacing: -1.4px; }
  .marque__nom { font-size: 22px; }
  .options { grid-template-columns: 1fr 1fr; align-items: start; }
  .option:nth-child(n+3), .choix--seul { grid-column: 1 / -1; }
  .choix-liste { grid-template-columns: 1fr 1fr; }
  .actions-resultats { grid-auto-flow: column; justify-content: start; }
  .zone-lancement {
    display: flex; align-items: center; gap: var(--e16);
    flex-direction: row-reverse; justify-content: flex-end;
    margin: 0 calc(-1 * var(--e24));
    padding: var(--e16) var(--e24);
  }
  .zone-lancement__message { margin: 0; }
  .bouton--grand { width: auto; min-width: 260px; }
}

@media (min-width: 1000px) {
  .grille-tranches { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}