/* amm-ardoise — système de design « cahier ».
 *
 * Intention : un enfant de six ans, seul devant une tablette posée sur la table
 * de la cuisine, qui ne sait pas encore lire couramment. Il doit aller au bout
 * de dix questions sans appeler un adulte. La page doit ressembler à un cahier
 * d'exercices — papier, encre, marge imprimée — jamais à une application.
 *
 * Trois règles portent tout le reste :
 *   1. Toute valeur vient d'une échelle. Aucun nombre magique.
 *   2. Deux cibles tactiles ne se touchent jamais : 16 px les séparent au moins.
 *   3. La profondeur est une ombre nette et décalée, comme une étiquette collée
 *      sur la page. Jamais de flou.
 */

@layer socle, base, briques, ecrans;

/* ═══════════════════════════════════════════════════════════════════
   SOCLE — les jetons
   ═══════════════════════════════════════════════════════════════════ */

@layer socle {
  :root {
    color-scheme: light;

    /* ---- Primitives : les couleurs du cahier (§7 du PRD) ---- */
    --papier: #fbf9f3;
    --papier-creux: #f3efe4;
    --encre: #1f2e3d;
    --encre-pale: #8c99a6;
    --seyes-bleu: #9cc3e0;
    --seyes-rose: #f2d8dd;
    --quadrillage: #c9dceb;
    --marge: #d94f4f;
    --maths: #e2701f;
    --francais: #1b8c63;
    --logique: #5b47b8;
    --juste: #1b8c63;
    --faux: #c94a4a;
    --retenu-fond: #fdf1e4;
    --pose-fond: #e8f4ee;

    /* ---- Sémantique : à quoi servent ces couleurs ---- */
    --texte-fort: var(--encre);
    --texte: var(--encre);
    --texte-doux: var(--encre-pale);
    --texte-inverse: var(--papier);

    --surface-page: var(--papier);
    --surface-carte: var(--papier);
    --surface-creuse: var(--papier-creux);
    --surface-retenue: var(--retenu-fond);
    --surface-posee: var(--pose-fond);
    --surface-ligne: color-mix(in srgb, var(--seyes-bleu) 14%, transparent);

    --bord-fin: 1.5px;
    --bord: 2.5px;
    --bord-fort: 3px;
    --bord-couleur: var(--encre);
    --bord-focus: var(--marge);

    /* ---- Rythme : base 4 px, tout est un multiple ---- */
    --pas-1: 4px;   /* micro : icône contre texte */
    --pas-2: 8px;   /* serré : à l'intérieur d'une étiquette */
    --pas-3: 12px;  /* interne : contenu d'une carte */
    --pas-4: 16px;  /* standard : écart minimal entre deux cibles */
    --pas-5: 20px;  /* confortable : marges de section */
    --pas-6: 24px;  /* écart de groupe */
    --pas-8: 32px;  /* écart entre zones d'écran */
    --pas-10: 40px; /* respiration de page */
    --pas-12: 48px;

    /* Écart minimal entre deux choses que le doigt peut toucher.
       Le PRD en fait une contrainte, pas une préférence. */
    --ecart-cibles: var(--pas-4);

    /* ---- Cibles tactiles ---- */
    --cible: 72px;          /* tout ce qui se tape */
    --cible-reponse: 88px;  /* ce qui vaut une réponse */
    --hauteur-barre: calc(var(--cible) + var(--pas-4) * 2);

    /* ---- Typographie : palier net entre chaque niveau ---- */
    --txt-s: 20px;    /* numéro d'exercice, mention discrète */
    --txt-m: 24px;    /* corps — plancher du PRD */
    --txt-l: 28px;    /* consigne, titre de vignette */
    --txt-xl: 36px;   /* titre de section */
    --txt-2xl: 44px;  /* chiffres et mots-cibles — plancher du PRD */
    --txt-3xl: 64px;  /* saisie en cours */
    --txt-hero: clamp(64px, 9vw, 96px); /* le score, au bilan */

    --gras-normal: 400;
    --gras-appuye: 700;
    --interligne-titre: 1.15;
    --interligne-corps: 1.4;

    /* ---- Arrondis : amical, jamais mou ---- */
    --arrondi-s: 8px;
    --arrondi-m: 12px;
    --arrondi-l: 18px;
    --arrondi-plein: 999px;

    /* ---- Relief : l'ombre est nette et décalée, comme une gommette ---- */
    --relief-1: 3px 3px 0 var(--encre);  /* posé sur la page */
    --relief-2: 5px 5px 0 var(--encre);  /* ce qu'on peut toucher */
    --relief-3: 8px 8px 0 var(--encre);  /* le héros de l'écran */
    --relief-enfonce: 1px 1px 0 var(--encre);
    --enfoncement: translate(2px, 2px);

    /* ---- Réglure : un carreau de 5 mm à l'échelle de l'écran ---- */
    --carreau: 28px;
    --interligne: var(--carreau);
    --ligne-seyes: calc(var(--carreau) * 4);

    --vitesse: 120ms;
    --detente: cubic-bezier(0.2, 0, 0, 1);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════ */

@layer base {
  @font-face {
    font-family: "Andika";
    src: url("/fonts/Andika-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
  }
  @font-face {
    font-family: "Andika";
    src: url("/fonts/Andika-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
  }
  @font-face {
    font-family: "CursiveEcole";
    src: url("/fonts/CursiveEcole.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: var(--surface-page);
    color: var(--texte);
    font-family: "Andika", "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
    font-size: var(--txt-m);
    line-height: var(--interligne-corps);
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    overscroll-behavior: none;
  }

  button {
    font: inherit;
    color: inherit;
    line-height: var(--interligne-corps);
    cursor: pointer;
    touch-action: manipulation;
  }

  /* Un enfant tape, mais un adulte peut brancher un clavier :
     rien de focusable ne doit être invisible. */
  :focus-visible {
    outline: var(--bord-fort) solid var(--bord-focus);
    outline-offset: 3px;
  }

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

/* ═══════════════════════════════════════════════════════════════════
   BRIQUES — ce qui se répète d'un écran à l'autre
   ═══════════════════════════════════════════════════════════════════ */

@layer briques {
  .cahier {
    height: 100%;
    display: flex;
  }

  .ecran {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* La barre est fixe : l'écran commence dessous, avec de l'air. */
    padding: calc(var(--hauteur-barre) + var(--pas-6)) var(--pas-6) var(--pas-6);
    overflow: hidden;
  }

  /* ---- Fonds de page : la réglure dit la matière ---- */
  .fond-quadrille {
    background-image:
      repeating-linear-gradient(to right, var(--quadrillage) 0 1px, transparent 1px var(--carreau)),
      repeating-linear-gradient(to bottom, var(--quadrillage) 0 1px, transparent 1px var(--carreau));
  }

  .fond-seyes {
    /* Une ligne d'écriture de 8 mm, quatre interlignes de 2 mm. La ligne de
       base bleue est posée par-dessus les interlignes roses : dans l'autre
       ordre, la hiérarchie du Seyès s'inverse. */
    background-image:
      repeating-linear-gradient(to bottom, var(--seyes-bleu) 0 2.5px, transparent 2.5px var(--ligne-seyes)),
      repeating-linear-gradient(to bottom, var(--seyes-rose) 0 1px, transparent 1px var(--interligne));
  }

  .fond-seyes::before,
  .fond-quadrille::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: calc(var(--cible) + var(--pas-6) * 2);
    width: 2px;
    background: var(--marge);
    opacity: 0.5;
    pointer-events: none;
  }

  /* ---- Les deux boutons toujours au même pixel ---- */
  .retour,
  .haut-parleur {
    position: fixed;
    top: var(--pas-4);
    width: var(--cible);
    height: var(--cible);
    padding: var(--pas-3);
    display: grid;
    place-items: center;
    background: var(--surface-carte);
    border: var(--bord-fort) solid var(--bord-couleur);
    border-radius: var(--arrondi-m);
    box-shadow: var(--relief-1);
    transition: box-shadow var(--vitesse) var(--detente), transform var(--vitesse) var(--detente);
    z-index: 20;
  }

  .retour { left: var(--pas-4); }
  .haut-parleur { right: var(--pas-4); color: var(--francais); }
  .retour svg,
  .haut-parleur svg { width: 100%; height: 100%; }

  .retour:active,
  .haut-parleur:active {
    transform: var(--enfoncement);
    box-shadow: var(--relief-enfonce);
  }

  /* ---- Le bouton qui engage ---- */
  .valider {
    min-height: var(--cible-reponse);
    min-width: 240px;
    padding-inline: var(--pas-8);
    font-size: var(--txt-l);
    font-weight: var(--gras-appuye);
    color: var(--texte-inverse);
    background: var(--francais);
    border: var(--bord-fort) solid var(--bord-couleur);
    border-radius: var(--arrondi-l);
    box-shadow: var(--relief-2);
    transition: box-shadow var(--vitesse) var(--detente), transform var(--vitesse) var(--detente);
  }

  .valider:active {
    transform: var(--enfoncement);
    box-shadow: var(--relief-enfonce);
  }

  .valider[disabled] {
    color: var(--texte-doux);
    background: var(--surface-creuse);
    border-color: var(--encre-pale);
    box-shadow: none;
    transform: none;
  }

  .valider.secondaire {
    background: var(--surface-carte);
    color: var(--texte-fort);
  }

  /* ---- Étoiles ---- */
  .etoiles {
    display: inline-flex;
    gap: var(--pas-1);
    color: var(--maths);
  }
  .etoile.vide { opacity: 0.3; }
}

/* ═══════════════════════════════════════════════════════════════════
   ÉCRAN 1 — les profils
   ═══════════════════════════════════════════════════════════════════ */

@layer ecrans {
  /* Ces deux écrans n'ont pas de barre fixe : rien ne justifie de réserver
     sa hauteur en haut de page. */
  .ecran-avatars,
  .ecran-bilan {
    padding-top: var(--pas-6);
  }

  /* Le cahier ne s'ouvre qu'une fois les profils lus : pas de grille vide
     qui se remplit sous les yeux de l'enfant. */
  .ecran-avatars { opacity: 0; }
  .ecran-avatars.pret {
    opacity: 1;
    transition: opacity 180ms var(--detente);
  }

  .grille-profils {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-8);
    justify-content: center;
    align-content: center;
    height: 100%;
  }

  .profil {
    width: 208px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pas-3);
    padding: var(--pas-5) var(--pas-4);
    background: var(--surface-carte);
    border: var(--bord-fort) solid var(--bord-couleur);
    border-radius: var(--arrondi-l);
    box-shadow: var(--relief-3);
    transition: box-shadow var(--vitesse) var(--detente), transform var(--vitesse) var(--detente);
  }

  .profil:active {
    transform: var(--enfoncement);
    box-shadow: var(--relief-enfonce);
  }

  .profil-avatar { line-height: 0; }
  .profil-avatar svg { width: 112px; height: 112px; }

  .profil-prenom {
    font-size: var(--txt-l);
    font-weight: var(--gras-appuye);
    line-height: var(--interligne-titre);
  }

  .profil-etoiles {
    display: flex;
    align-items: center;
    gap: var(--pas-2);
    color: var(--maths);
    font-size: var(--txt-m);
    font-weight: var(--gras-appuye);
  }

  .profil-neuf {
    justify-content: center;
    min-height: 248px;
    color: var(--francais);
    border-style: dashed;
    box-shadow: var(--relief-1);
  }
  .profil-neuf svg { width: 96px; height: 96px; }

  /* ---- Création d'un profil ---- */
  .ecran-nouveau {
    justify-content: center;
    gap: var(--pas-6);
  }

  .prenom-cadre {
    min-width: 440px;
    min-height: var(--cible-reponse);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pas-1);
    padding-inline: var(--pas-5);
    background: var(--surface-creuse);
    border: var(--bord-fort) solid var(--bord-couleur);
    border-radius: var(--arrondi-m);
    box-shadow: var(--relief-2);
  }

  .prenom-tape {
    font-size: var(--txt-3xl);
    font-weight: var(--gras-appuye);
    letter-spacing: 0.02em;
    line-height: var(--interligne-titre);
  }

  .curseur {
    width: 3px;
    height: 44px;
    background: var(--marge);
    animation: clignote 1s steps(2) infinite;
  }

  @keyframes clignote {
    50% { opacity: 0; }
  }

  .clavier {
    display: flex;
    flex-direction: column;
    gap: var(--ecart-cibles);
    align-items: center;
  }

  .clavier-rangee {
    display: flex;
    gap: var(--ecart-cibles);
  }

  .touche,
  .touche-chiffre {
    width: var(--cible);
    height: var(--cible);
    font-size: var(--txt-l);
    font-weight: var(--gras-appuye);
    background: var(--surface-carte);
    border: var(--bord) solid var(--bord-couleur);
    border-radius: var(--arrondi-m);
    box-shadow: var(--relief-1);
    transition: box-shadow var(--vitesse) var(--detente), transform var(--vitesse) var(--detente);
  }

  .touche:active,
  .touche-chiffre:active {
    transform: var(--enfoncement);
    box-shadow: var(--relief-enfonce);
  }

  .touche-large { width: calc(var(--cible) * 2 + var(--ecart-cibles)); }

  .choix-avatars {
    display: flex;
    gap: var(--ecart-cibles);
    flex-wrap: wrap;
    justify-content: center;
  }

  .avatar-choix {
    width: var(--cible-reponse);
    height: var(--cible-reponse);
    padding: var(--pas-2);
    background: var(--surface-carte);
    border: var(--bord) solid var(--bord-couleur);
    border-radius: var(--arrondi-m);
    box-shadow: var(--relief-1);
  }
  .avatar-choix svg { width: 100%; height: 100%; }

  .avatar-choix.retenu {
    background: var(--surface-retenue);
    border-color: var(--maths);
    border-width: var(--bord-fort);
    box-shadow: var(--relief-2);
  }

  /* ═════════════════════════════════════════════════════════════════
     ÉCRAN 2 — le sommaire
     ═════════════════════════════════════════════════════════════════ */

  .ecran-sommaire {
    justify-content: flex-start;
    gap: var(--pas-6);
  }

  /* Un onglet par matière : trois choix, jamais plus (Hick). La couleur
     porte l'information, le mot la confirme pour l'adulte. */
  .onglets {
    display: flex;
    gap: var(--ecart-cibles);
    justify-content: center;
    width: 100%;
  }

  .onglet {
    min-height: var(--cible);
    min-width: 200px;
    padding-inline: var(--pas-6);
    font-size: var(--txt-l);
    font-weight: var(--gras-appuye);
    color: var(--texte-fort);
    background: var(--surface-carte);
    border: var(--bord) solid var(--bord-couleur);
    border-radius: var(--arrondi-m);
    box-shadow: var(--relief-1);
    transition: box-shadow var(--vitesse) var(--detente), transform var(--vitesse) var(--detente);
  }

  .onglet.actif {
    color: var(--texte-inverse);
    border-width: var(--bord-fort);
    box-shadow: var(--relief-2);
  }
  .onglet.maths.actif { background: var(--maths); }
  .onglet.francais.actif { background: var(--francais); }
  .onglet.logique.actif { background: var(--logique); }

  .onglet:active {
    transform: var(--enfoncement);
    box-shadow: var(--relief-enfonce);
  }

  /* Les vingt exercices ne tiennent pas en colonne : en grille, la matière
     entière est visible d'un coup d'œil, sans un seul balayage. */
  .vignettes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    gap: var(--ecart-cibles);
    width: 100%;
    flex: 1;
    min-height: 0;
  }

  .vignette {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: var(--pas-2);
    padding: var(--pas-4) var(--pas-3) var(--pas-3);
    background: var(--surface-carte);
    border: var(--bord) solid var(--bord-couleur);
    border-radius: var(--arrondi-m);
    box-shadow: var(--relief-2);
    transition: box-shadow var(--vitesse) var(--detente), transform var(--vitesse) var(--detente);
  }

  .vignette:active {
    transform: var(--enfoncement);
    box-shadow: var(--relief-enfonce);
  }

  /* Le numéro est dans la marge, comme la pastille d'un manuel. */
  .vignette-numero {
    position: absolute;
    top: calc(var(--pas-2) * -1);
    left: calc(var(--pas-2) * -1);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--marge);
    color: var(--texte-inverse);
    border: var(--bord) solid var(--bord-couleur);
    border-radius: var(--arrondi-plein);
    font-size: var(--txt-s);
    font-weight: var(--gras-appuye);
  }

  .vignettes.maths .vignette-numero { background: var(--maths); }
  .vignettes.francais .vignette-numero { background: var(--francais); }
  .vignettes.logique .vignette-numero { background: var(--logique); }

  .vignette-dessin {
    display: grid;
    place-items: center;
    flex: 1;
    min-height: 0;
    width: 100%;
    line-height: 0;
  }
  .vignette-dessin svg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
  }

  .vignette-titre {
    font-size: var(--txt-m);
    line-height: var(--interligne-titre);
    text-align: center;
  }

  /* ═════════════════════════════════════════════════════════════════
     ÉCRAN 3 — la question
     ═════════════════════════════════════════════════════════════════ */

  .barre {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--hauteur-barre);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
  }
  .barre > * { pointer-events: auto; }

  .pastilles {
    display: flex;
    gap: var(--pas-3);
  }

  .pastille {
    width: 22px;
    height: 22px;
    border-radius: var(--arrondi-plein);
    border: var(--bord) solid var(--bord-couleur);
    background: var(--surface-carte);
    transition: background var(--vitesse) var(--detente);
  }
  .pastille.juste { background: var(--juste); border-color: var(--juste); }
  .pastille.faux { background: var(--faux); border-color: var(--faux); }

  /* L'énoncé est le point d'accroche : il prend la place, la réponse suit. */
  .enonce {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--pas-6);
    width: 100%;
    min-height: 0;
  }

  .consigne {
    margin: 0;
    font-size: var(--txt-l);
    font-weight: var(--gras-appuye);
    line-height: var(--interligne-titre);
    text-align: center;
  }

  .support {
    flex: 1;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 0;
    overflow: hidden;
  }
  /* Le support ne déborde jamais de sa zone : sinon il recouvre la consigne. */
  .support svg {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
  }

  .reponse {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: var(--pas-8);
  }

  .choix {
    display: flex;
    gap: var(--ecart-cibles);
    flex-wrap: wrap;
    justify-content: center;
  }

  .choix-bouton {
    min-width: var(--cible-reponse);
    min-height: var(--cible-reponse);
    padding: var(--pas-3) var(--pas-6);
    display: grid;
    place-items: center;
    background: var(--surface-carte);
    border: var(--bord-fort) solid var(--bord-couleur);
    border-radius: var(--arrondi-l);
    box-shadow: var(--relief-2);
    transition: box-shadow var(--vitesse) var(--detente), transform var(--vitesse) var(--detente);
  }

  .choix-bouton:active {
    transform: var(--enfoncement);
    box-shadow: var(--relief-enfonce);
  }
  .choix-bouton[disabled] { opacity: 0.45; }
  .choix-texte {
    font-size: var(--txt-2xl);
    font-weight: var(--gras-appuye);
    line-height: var(--interligne-titre);
  }
  .choix-bouton svg { height: 64px; width: auto; max-width: 240px; }

  /* ---- Pavé numérique ---- */
  .pave {
    display: flex;
    align-items: center;
    gap: var(--pas-6);
  }

  .pave-ecran {
    min-width: 176px;
    height: calc(var(--cible) * 2 + var(--ecart-cibles));
    display: grid;
    place-items: center;
    padding-inline: var(--pas-5);
    font-size: var(--txt-3xl);
    font-weight: var(--gras-appuye);
    background: var(--surface-creuse);
    border: var(--bord-fort) dashed var(--marge);
    border-radius: var(--arrondi-m);
    box-shadow: none;
    transition: box-shadow var(--vitesse) var(--detente);
  }

  .pave-ecran.rempli {
    border-style: solid;
    border-color: var(--bord-couleur);
    box-shadow: var(--relief-2);
  }

  .pave-touches {
    display: grid;
    grid-template-columns: repeat(5, var(--cible));
    gap: var(--ecart-cibles);
  }

  .touche-effacer { grid-column: 1 / 3; width: auto; }
  .touche-valider { grid-column: 4 / 6; width: auto; }

  .touche-chiffre[disabled] {
    color: var(--texte-doux);
    background: var(--surface-creuse);
    box-shadow: none;
  }
  .touche-valider {
    background: var(--francais);
    color: var(--texte-inverse);
    border-width: var(--bord-fort);
  }
  .touche-effacer { color: var(--marge); }

  /* ---- Étiquettes : tap-source puis tap-destination ---- */
  .etiquettes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pas-6);
    width: 100%;
  }

  .ligne-phrase {
    min-height: var(--cible-reponse);
    min-width: 60%;
    display: flex;
    align-items: center;
    gap: var(--pas-3);
    padding: var(--pas-3) var(--pas-5);
    background: var(--surface-ligne);
    border-bottom: var(--bord-fort) solid var(--bord-couleur);
  }
  /* Un emplacement par mot qui reste à poser : l'enfant voit combien il
     en manque sans avoir à compter les étiquettes. */
  .emplacement {
    flex: 1;
    min-width: 72px;
    height: var(--cible);
    border: var(--bord) dashed var(--encre-pale);
    border-radius: var(--arrondi-m);
  }

  .reserve {
    display: flex;
    gap: var(--ecart-cibles);
    flex-wrap: wrap;
    justify-content: center;
  }

  .etiquette {
    /* Un mot court comme « le » doit rester aussi facile à viser qu'un long. */
    min-height: var(--cible);
    min-width: var(--cible);
    padding-inline: var(--pas-5);
    font-size: var(--txt-l);
    background: var(--surface-carte);
    border: var(--bord) solid var(--bord-couleur);
    border-radius: var(--arrondi-m);
    box-shadow: var(--relief-1);
    transition: box-shadow var(--vitesse) var(--detente), transform var(--vitesse) var(--detente);
  }

  .etiquette.retenue {
    background: var(--surface-retenue);
    border-color: var(--maths);
    border-width: var(--bord-fort);
    transform: translateY(-4px);
    box-shadow: var(--relief-2);
  }
  .etiquette.posee { background: var(--surface-posee); }

  /* ---- Ardoise ---- */
  .trace {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pas-6);
  }

  .ardoise-cadre {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ecart-cibles);
  }

  .ardoise-modele {
    position: absolute;
    inset: 0 calc(var(--cible) + var(--ecart-cibles)) 0 0;
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  .ardoise-modele svg { width: 100%; height: 100%; }

  .ardoise {
    /* Assez haute pour qu'un doigt de six ans trace la lettre sans viser. */
    width: min(84vw, 880px);
    height: 300px;
    background: transparent;
    border: var(--bord-fort) solid var(--bord-couleur);
    border-radius: var(--arrondi-m);
    touch-action: none;
  }

  .gomme {
    width: var(--cible);
    height: var(--cible);
    padding: var(--pas-3);
    color: var(--marge);
    background: var(--surface-carte);
    border: var(--bord) solid var(--bord-couleur);
    border-radius: var(--arrondi-m);
    box-shadow: var(--relief-1);
  }
  .gomme svg { width: 100%; height: 100%; }

  /* ---- Feedback : jamais une modale, jamais une croix rouge ---- */
  .feedback {
    min-height: var(--cible);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pas-6);
    margin-top: var(--pas-4);
  }
  .feedback.vide { visibility: hidden; }

  .feedback-mot {
    font-size: var(--txt-l);
    font-weight: var(--gras-appuye);
  }
  .feedback.juste { color: var(--juste); }
  .feedback.faux { color: var(--texte); }

  .feedback-reponse {
    padding: var(--pas-1) var(--pas-5);
    font-size: var(--txt-2xl);
    font-weight: var(--gras-appuye);
    color: var(--juste);
    border: var(--bord-fort) solid var(--juste);
    border-radius: var(--arrondi-m);
  }

  /* ═════════════════════════════════════════════════════════════════
     ÉCRAN 4 — le bilan
     ═════════════════════════════════════════════════════════════════ */

  .ecran-bilan {
    justify-content: center;
    gap: var(--pas-8);
  }

  .bilan-etoiles {
    color: var(--maths);
    line-height: 0;
  }

  .bilan-score {
    margin: 0;
    font-size: var(--txt-hero);
    font-weight: var(--gras-appuye);
    line-height: var(--interligne-titre);
  }

  .bilan-record {
    margin: 0;
    font-size: var(--txt-l);
    font-weight: var(--gras-appuye);
    color: var(--marge);
  }

  .bilan-boutons {
    display: flex;
    gap: var(--ecart-cibles);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--pas-4);
  }

  .bilan-score + .bilan-record { margin-top: calc(var(--pas-8) * -1 + var(--pas-2)); }

  /* ═════════════════════════════════════════════════════════════════
     Écrans étroits : le sommaire passe en colonnes empilées
     ═════════════════════════════════════════════════════════════════ */

  /* ═════════════════════════════════════════════════════════════════
     Téléphone en paysage
     ═════════════════════════════════════════════════════════════════

     Moins de 560 px de haut : un iPhone couché offre 390 px, alors que la
     mise en page de tablette en réserve 344 rien qu'en barre, marges et zone
     de feedback. La hauteur devient la ressource rare, la largeur est en
     excès — on passe donc de l'empilement à deux colonnes, et la barre du
     haut cesse de réserver sa hauteur : les deux boutons restent posés dans
     les coins, le contenu se décale simplement pour ne pas passer dessous.

     Les cibles gardent leurs 72 px et les 16 px qui les séparent : c'est ce
     qui rend l'application utilisable par un enfant, pas un réglage
     d'affichage. Seul le clavier de création de profil y déroge (voir plus
     bas). */
  @media (max-height: 560px) {
    .barre {
      height: calc(var(--cible) + var(--pas-4));
      align-items: flex-start;
      padding-top: var(--pas-3);
    }

    .retour,
    .haut-parleur {
      top: var(--pas-2);
    }
    .retour { left: var(--pas-2); }
    .haut-parleur { right: var(--pas-2); }

    /* Les coins appartiennent aux deux boutons : le contenu s'en écarte. */
    .ecran {
      padding: var(--pas-8) calc(var(--cible) + var(--pas-4)) var(--pas-2);
    }

    /* ---- Question : énoncé à gauche, réponse à droite ---- */
    /* Les deux boutons n'occupent que les coins hauts, et l'énoncé est centré
       verticalement : il peut donc reprendre toute la largeur. Sans cela sa
       colonne l'écrase, et les chiffres du support passent sous les 44 px. */
    .ecran-question {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "enonce reponse"
        "retour reponse";
      align-items: center;
      column-gap: var(--pas-6);
      row-gap: var(--pas-2);
      padding: var(--pas-6) var(--pas-2) var(--pas-2)
               calc(var(--cible) + var(--pas-4));
    }

    .ecran-question .enonce {
      grid-area: enonce;
      align-self: center;
      gap: var(--pas-3);
    }

    .ecran-question .reponse {
      grid-area: reponse;
      margin-top: 0;
    }

    .ecran-question .feedback {
      grid-area: retour;
      min-height: 0;
      margin-top: 0;
      justify-content: flex-start;
      gap: var(--pas-4);
    }
    .feedback-mot { font-size: var(--txt-m); }
    .feedback-reponse { font-size: var(--txt-l); padding: 0 var(--pas-3); }

    /* Le pavé perd son grand cadre de réponse : le chiffre tapé se lit
       au-dessus des touches. */
    .pave {
      flex-direction: column;
      align-items: center;
      gap: var(--pas-3);
    }
    /* Moins large que la colonne : sinon il passe sous le haut-parleur,
       posé dans le coin. */
    .pave-ecran {
      min-width: 0;
      width: 55%;
      height: var(--cible);
      font-size: var(--txt-2xl);
    }

    /* 12 px sépareraient la ligne de la réserve : ce sont deux rangées de cibles. */
    .etiquettes { gap: var(--ecart-cibles); }
    .ligne-phrase {
      min-width: 100%;
      gap: var(--ecart-cibles);
      padding: var(--pas-2) var(--pas-3);
    }
    .reserve { gap: var(--ecart-cibles); }
    .emplacement { min-width: 56px; }

    .ardoise { height: 200px; width: min(56vw, 520px); }
    .trace { gap: var(--pas-3); }

    /* ---- Sommaire : les onglets se logent dans la bande du haut ---- */
    /* Pas de haut-parleur sur cet écran : seule la marge du bouton retour
       est nécessaire. */
    .ecran-sommaire {
      padding-top: var(--pas-2);
      padding-right: var(--pas-2);
      gap: var(--ecart-cibles);
    }
    .vignette { padding: var(--pas-2); }
    .vignette-numero {
      width: 34px;
      height: 34px;
      font-size: var(--txt-s);
      top: calc(var(--pas-1) * -1);
      left: calc(var(--pas-1) * -1);
    }
    .vignette-titre { font-size: var(--txt-m); }

    /* ---- Profils ---- */
    .grille-profils { gap: var(--pas-4); }
    .profil {
      width: 168px;
      gap: var(--pas-2);
      padding: var(--pas-3);
    }
    .profil-avatar svg { width: 72px; height: 72px; }
    .profil-neuf { min-height: 0; }
    .profil-neuf svg { width: 64px; height: 64px; }

    /* ---- Création d'un profil ----
       Deux colonnes, et c'est le seul endroit où une cible descend sous
       72 px : vingt-huit lettres ne tiennent pas autrement sur un téléphone
       couché. 48 px reste au-dessus du minimum tactile des plateformes, et
       cet écran ne sert qu'une fois, à l'inscription. */
    .ecran-nouveau {
      display: grid;
      grid-template-columns: auto auto;
      grid-template-areas:
        "prenom avatars"
        "clavier avatars"
        "clavier valider";
      justify-content: center;
      align-content: center;
      gap: var(--pas-3) var(--pas-6);
      padding-top: var(--pas-2);
    }
    .prenom-cadre {
      grid-area: prenom;
      min-width: 0;
      /* Décalé du bouton retour, posé dans le coin. */
      width: calc(100% - var(--cible));
      margin-left: var(--cible);
      min-height: var(--cible);
    }
    .prenom-tape { font-size: var(--txt-2xl); }
    .curseur { height: 30px; }
    .clavier { grid-area: clavier; gap: var(--pas-2); }
    .clavier-rangee { gap: var(--pas-2); }
    .touche {
      width: 48px;
      height: 48px;
      font-size: var(--txt-m);
      border-radius: var(--arrondi-s);
    }
    .touche-large { width: calc(48px * 2 + var(--pas-2)); }
    .choix-avatars {
      grid-area: avatars;
      display: grid;
      grid-template-columns: repeat(3, var(--cible));
      gap: var(--pas-2);
      align-content: start;
    }
    .avatar-choix { width: var(--cible); height: var(--cible); }
    .ecran-nouveau .valider {
      grid-area: valider;
      min-width: 0;
      width: 100%;
      min-height: var(--cible);
      font-size: var(--txt-m);
      padding-inline: var(--pas-4);
    }

    /* ---- Bilan ---- */
    .ecran-bilan { gap: var(--pas-4); padding-top: var(--pas-2); }
    .bilan-etoiles svg { width: 64px; height: 64px; }
    .bilan-score { font-size: var(--txt-2xl); }
    .bilan-record { font-size: var(--txt-m); }
  }

  /* Téléphone court ET étroit (un iPhone SE couché fait 667 px de large).
     La mise en page précédente y déborde : le clavier sort de l'écran par la
     gauche et trois lettres deviennent inatteignables. On resserre.

     C'est le seul endroit du cahier où des cibles passent sous 72 px. Aucune
     ne descend sous le minimum tactile des plateformes, et l'alternative
     serait du contenu hors d'atteinte. Sur un écran aussi court, le support
     de l'énoncé passe également sous les 44 px voulus par le PRD : un
     téléphone de cette taille est un dépannage, pas la cible. */
  @media (max-height: 560px) and (max-width: 760px) {
    /* Le pavé garde ses cinq colonnes : à quatre, il prend une rangée de plus
       et sort par le bas. C'est donc l'énoncé qui reprend la marge du bouton
       retour — il est centré verticalement, loin du coin. */
    .ecran-question { padding-left: var(--pas-2); }
    .support svg { max-height: 132px; }
    .pave-ecran { width: 100%; }

    .touche {
      width: 40px;
      height: 40px;
      font-size: var(--txt-s);
    }
    .touche-large { width: calc(40px * 2 + var(--pas-2)); }
    .choix-avatars { grid-template-columns: repeat(3, 56px); }
    .avatar-choix { width: 56px; height: 56px; padding: var(--pas-1); }
    .ecran-nouveau .valider { min-height: var(--cible); }
    .prenom-tape { font-size: var(--txt-l); }

    .profil { width: 140px; }
    .profil-avatar svg { width: 56px; height: 56px; }

    /* Trois onglets de 200 px ne tiennent pas dans 571 : ils débordaient sous
       le bouton retour. */
    .onglet {
      min-width: 140px;
      font-size: var(--txt-m);
      padding-inline: var(--pas-3);
    }
    .vignettes { gap: var(--pas-3); }
    .vignette { gap: var(--pas-1); }
    .vignette-dessin svg { max-height: 44px; }
    .vignette-titre { font-size: 20px; line-height: 1.1; }
    .vignette .etoile { width: 20px; height: 20px; }
  }

  /* Le cahier est fait pour être posé à plat, en paysage : en portrait sur
     un téléphone, rien ne tient. On le dit avec un dessin, pas une phrase. */
  .tourner { display: none; }

  @media (orientation: portrait) and (max-width: 560px) {
    .cahier > .ecran { display: none; }
    .tourner {
      position: fixed;
      inset: 0;
      display: grid;
      place-content: center;
      justify-items: center;
      gap: var(--pas-6);
      background: var(--surface-page);
      color: var(--texte);
      z-index: 100;
    }
    .tourner svg { width: 128px; height: 128px; }
    .tourner span { font-size: var(--txt-l); font-weight: var(--gras-appuye); }
  }

  @media (max-width: 900px) and (min-height: 561px) {
    .sommaire-pages {
      grid-template-columns: 1fr;
      gap: var(--pas-4);
    }
  }
}