:root {
  --blue-900: #10243e;
  --blue-700: #1c3f66;
  --blue-600: #2a5788;
  --blue-500: #3b74ac;
  --blue-100: #eaf2fa;
  --ink: #1c2530;
  --ink-soft: #4a5568;
  --paper: #ffffff;
  --paper-soft: #f6f8fb;
  --line: #dde5ee;
  --accent: #d97a2b;
  --accent-dark: #b8621e;
  --success: #2f8f5b;
  --fail: #c0392b;
  --radius: 10px;
  --maxw: 760px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Verdana, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper-soft);
  line-height: 1.65;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

h1, h2, h3 { font-weight: 700; color: var(--blue-900); line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; }
p { margin: 0 0 1rem; }
.lead { color: var(--ink-soft); }

a { color: var(--blue-600); }

.proto-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 999px;
  padding: .2rem .6rem;
  margin-bottom: .8rem;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  margin: 1.2rem 0;
}

.btn {
  display: inline-block;
  padding: .7rem 1.3rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: .98rem;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-outline-dark { background: transparent; border-color: var(--blue-500); color: var(--blue-700); }
.btn-outline-dark:hover { background: var(--blue-100); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #256e46; }
.btn-fail { background: var(--fail); color: #fff; }
.btn-fail:hover { background: #96271b; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Accueil : les deux entrées du logiciel (le test, le tutoriel) côte à côte et de même poids
   visuel, le test restant le bouton plein. Passe en colonne sur téléphone. */
.accueil-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
@media (max-width: 480px) {
  .accueil-actions { flex-direction: column; align-items: stretch; }
  .accueil-actions .btn { text-align: center; }
}

.form-row { margin-bottom: 1.1rem; }
.form-row label { display: block; font-weight: 600; color: var(--blue-700); margin-bottom: .35rem; }
select, input[type="number"], input[type="text"] {
  width: 100%;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  color: inherit;
  background: #fff;
}

/* Regroupe deux .form-row côte à côte sur les écrans assez larges (ex. Nom+Prénom, Sexe+Classe)
   pour un formulaire moins étiré verticalement. */
.form-row-group { display: flex; gap: 1rem; }

/* Signale un champ dont la valeur, une fois complète, ne correspond à rien de réel (ex. une date
   de naissance inexistante comme "31/02/2018") — ajouté 2026-08-27. */
.input-invalid { border-color: var(--fail); background: #fdf1ef; }
.form-row-group .form-row { flex: 1; margin-bottom: 1.1rem; }
@media (max-width: 480px) {
  .form-row-group { flex-direction: column; gap: 0; }
}

/* Choix binaire (ex. Sexe) sous forme de deux boutons plutôt qu'un menu déroulant — un clic
   au lieu de deux, et le choix actif reste visible en permanence. */
.toggle-group { display: flex; gap: .6rem; }
.toggle-btn {
  flex: 1;
  padding: .6rem .8rem;
  border: 1px solid var(--blue-500);
  border-radius: var(--radius);
  background: #fff;
  color: var(--blue-700);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.toggle-btn:hover { background: var(--blue-100); }
.toggle-btn[aria-pressed="true"] {
  background: var(--blue-700);
  border-color: var(--blue-700);
  color: #fff;
}

/* Carte-lien : le cadre entier est l'hyperlien (comme les boutons Garçon/Fille), pas juste le
   texte à l'intérieur — plus grande zone cliquable, et le survol se voit sur tout le cadre.
   Plus court qu'une .card ordinaire, puisqu'il ne contient qu'un titre, pas de paragraphe. */
.card-link {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .7rem 1.2rem;
  margin: .7rem 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blue-700);
  text-decoration: none;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.card-link:hover { border-color: var(--blue-500); background: var(--blue-100); }

.item-display {
  text-align: center;
  padding: 2.5rem 1rem;
  margin: 1.2rem 0;
  background: var(--blue-100);
  border-radius: var(--radius);
  cursor: pointer;
  user-select: none;
}
.click-hint {
  text-align: center;
  font-size: .85rem;
}
.item-display .item-label {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blue-700);
  margin-bottom: .6rem;
}
.item-display .item-value {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--blue-900);
}
.item-display .hand-image {
  max-width: 100%;
  max-height: 14rem;
}

/* ---------------------------------------------------------------------------------------------
   MODE EXAMINATEUR (par défaut) vs MODE DÉVELOPPEMENT (`?dev=1`).

   Pendant une vraie passation, l'écran ne doit montrer que ce que Mediator montre : la scène et
   le texte de consigne. Tout le reste (titre, encadré explicatif, nom de la page Mediator,
   destinations des branches, bouton "Continuer", raccourcis de relecture) est du confort de mise
   au point : utile pour comparer avec le .md8, mais à ne surtout pas afficher devant un enfant
   (demande de Marc, 2026-08-24). Ces éléments ne sont pas supprimés — ils restent accessibles en
   ajoutant `?dev=1` à l'URL — et surtout, RIEN ne change côté enregistrement : le journal des
   questions posées et les variables continuent d'être écrits exactement pareil, puisque c'est ce
   qui servira au rapport et, plus tard, aux normes.
   --------------------------------------------------------------------------------------------- */
body:not([data-dev]) .dev-only { display: none !important; }

/* En mode examinateur, la consigne devient le seul élément de la page : plus grande, centrée,
   sans l'encadré bleu qui la faisait ressembler à une note de bas de page. */
body:not([data-dev]) #story-text {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: .5rem 0 0;
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.75;
}
/* Corrigé le 2026-08-25 (Marc, essai11) : cette carte est LA zone cliquable de tout l'écran
   (clic gauche/droit sur un point de décision, clic simple pour continuer un relais) — la rendre
   transparente et sans bordure, comme avant, faisait disparaître toute indication visuelle de ce
   qui est cliquable, obligeant l'examinateur à cliquer au hasard sur la page ("je ne peux cliquer
   que sur l'image"). Reprend l'apparence déjà établie de `.item-display` (fond bleu clair,
   curseur pointeur) utilisée partout ailleurs dans le prototype pour signaler une zone de clic —
   priorité donnée à la clarté du clic sur l'esthétique "texte nu" tentée précédemment. */
body:not([data-dev]) #screen-story {
  background: var(--blue-100);
  border-radius: var(--radius);
  cursor: pointer;
}

/* Bloc affiché dans la zone de clic sur un point de décision — remplace le bouton "Continuer"
   masqué, qui laissait sinon un encadré vide sans aucune indication. */
.fork-choice { text-align: center; line-height: 1.8; color: var(--blue-900); }
.fork-choice .fork-left { color: var(--success); font-weight: 700; }
.fork-choice .fork-right { color: var(--fail); font-weight: 700; }
.fork-choice small { color: var(--ink-soft); }

/* Nom de la page Mediator en cours — repère de comparaison avec le vrai logiciel. */
.page-nom {
  font-family: Consolas, "Courier New", monospace;
  font-size: .8rem;
  color: var(--ink-soft);
  text-transform: none;
  margin: 0 0 .6rem;
}

/* Consigne lue à voix haute par l'examinateur (items semi-concrets : énoncé verbal, aucune
   opération affichée). Volontairement en taille de lecture normale, pas en gros chiffres —
   c'est un texte que l'adulte lit, pas un stimulus présenté à l'enfant. */
.item-consigne {
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  max-width: 34rem;
  margin: 1.6rem auto 0;
}

.action-row { display: flex; gap: 1rem; margin-top: 1.5rem; }
.action-row .btn { flex: 1; text-align: center; padding: 1rem; font-size: 1.1rem; }

table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .92rem; }
th, td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; }
th { background: var(--blue-100); color: var(--blue-900); }
.res-success { color: var(--success); font-weight: 700; }
.res-fail { color: var(--fail); font-weight: 700; }

.callout {
  border-left: 4px solid var(--blue-500);
  background: var(--blue-100);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
}
.callout.warn { border-left-color: var(--accent); background: #fdf1e6; }
.callout p:last-child { margin-bottom: 0; }

.score-box {
  text-align: center;
  padding: 1.5rem;
  background: var(--paper);
  border: 2px solid var(--blue-500);
  border-radius: var(--radius);
  margin: 1.2rem 0;
}
.score-box .score-value { font-size: 2.4rem; font-weight: 800; color: var(--blue-900); }
.score-box .score-label { color: var(--ink-soft); font-size: .9rem; }

#stage {
  text-align: center;
  padding: 2rem 1rem;
  margin: 1.2rem 0;
  background: var(--blue-100);
  border-radius: var(--radius);
  user-select: none;
}
#mascot {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  border-radius: 50%;
  transition: box-shadow .2s ease;
}
#mascot.talking {
  animation: mascot-pulse .5s ease-in-out infinite alternate;
  box-shadow: 0 0 0 8px rgba(217, 122, 43, .18);
}
@keyframes mascot-pulse {
  from { box-shadow: 0 0 0 4px rgba(217, 122, 43, .12); }
  to { box-shadow: 0 0 0 14px rgba(217, 122, 43, .22); }
}
.mascot-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: .8rem 0 1.4rem; flex-wrap: wrap; }
#replay-btn { margin: 0; }
/* Filet de secours si la synthèse vocale échoue (dictee-nombres) : le mot n'apparaît qu'au
   survol/focus clavier — jamais affiché en permanence, donc jamais lu par l'enfant qui n'a pas
   la souris en main. */
.word-fallback { font-size: .85rem; color: var(--ink-soft); cursor: default; outline-offset: 2px; }
.word-fallback-icon { font-size: 1.4rem; vertical-align: middle; }
.word-fallback-text { opacity: 0; margin-left: .3rem; font-weight: 700; color: var(--blue-900); transition: opacity .15s ease; }
.word-fallback:hover .word-fallback-text, .word-fallback:focus .word-fallback-text { opacity: 1; }
.word-fallback-caption { text-align: center; font-size: .8rem; color: var(--ink-soft); margin-top: -.6rem; }

.lecture-consigne { text-align: center; font-size: 1.05rem; color: var(--ink); margin: 0 0 1rem; }
.options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  max-width: 420px;
  margin: 0 auto;
}
.option-cell {
  background: #fff;
  border: 2px solid var(--blue-600);
  border-radius: 8px;
  padding: .9rem .5rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--blue-900);
  cursor: pointer;
}
.option-cell:hover { background: var(--blue-100); }

/* Scène papillons/maison — calcul-mental/additions-concret et soustractions-concret. Les
   éléments SVG (papillons, maison) sont persistants dans le DOM ; seuls leurs transform/opacity
   changent d'une étape à l'autre, ce qui permet à `transition` d'animer automatiquement le
   déplacement plutôt que de faire un remplacement HTML sans animation. */
.scene-box {
  background: var(--blue-100);
  border-radius: var(--radius);
  padding: .5rem;
  margin: 1.2rem 0;
}
.scene-svg { width: 100%; height: auto; display: block; }
/* Occultation réelle, pas un fondu — voir la vidéo du vrai Mediator envoyée par Marc
   (2026-08-24) : un papillon "caché" reste parfaitement opaque, il est juste positionné DERRIÈRE
   la maison (dessinée après lui dans le DOM SVG — donc visuellement par-dessus — et jamais avant).
   Ni Mediator ni ce prototype n'animent d'opacité pour ça — seule la position (`transform`) est
   animée, via `Animer le long d'un tracé` côté Mediator. `.scene-instant` place un papillon d'un
   coup (apparition, sans survol du reste de la scène) avant de le laisser voler normalement.
   Corrige aussi, par construction, la plainte "les papillons se confondent en se cachant" : deux
   papillons occultés sont juste invisibles, peu importe qu'ils partagent la même position. */
.scene-butterfly { transition: transform 2.6s ease-in-out; }
/* La maison ne "disparaît" plus d'un coup : elle SE SOULÈVE lentement, comme un rideau, pour
   découvrir les papillons restés derrière (retour de Marc, 2026-08-24 : « elle disparaît trop
   vite, il vaudrait beaucoup mieux qu'elle se soulève lentement »). C'est aussi plus lisible
   pédagogiquement : l'enfant voit apparaître les papillons un à un plutôt que d'un bloc. */
.scene-house { transition: transform 3s ease-in-out, opacity 1s ease; }
/* Coupe net toute transition, le temps d'un placement instantané (apparition d'un papillon,
   remise à zéro de la scène). Volontairement écrit avec la classe RÉPÉTÉE 3 fois : ça n'a aucun
   effet sur le ciblage (c'est le même élément) mais ça monte la spécificité à (0,3,0), donc
   cette règle bat `.scene-butterfly` ET `.scene-house` quel que soit leur ORDRE dans le fichier.
   Sans ça, la règle perd le départage à égalité de spécificité selon sa position — piège déjà
   rencontré une fois ici (la maison continuait de faire son fondu de 1s malgré la classe posée,
   `getComputedStyle` renvoyait toujours "1s"). Ne pas "simplifier". */
.scene-instant.scene-instant.scene-instant { transition: none; }
/* Battement d'ailes continu — demandé par Marc, papillons trop statiques. Chaque aile est un
   sous-groupe animé indépendamment de la position (qui reste sur le <g> parent). */
.scene-wing { transform-box: fill-box; transform-origin: center; animation: wing-flap .5s ease-in-out infinite alternate; }
.scene-wing.right { animation-delay: .05s; }
@keyframes wing-flap {
  from { transform: scaleX(1); }
  to   { transform: scaleX(.55); }
}