/* Couleurs vérifiées (RGAA 3.2, 3.3), fond « bleu brume » : texte 1c2333/f3f6fb 14,5:1 ; blanc/1f3fae 8,8:1 ;
   aide 4a5368/f3f6fb 7,1:1 ; erreur b3261e/f3f6fb 6,0:1 ; bordures 6b7891 ≥ 3,8:1. */
:root {
  --fond: #f3f6fb;
  --surface: #ffffff;
  --texte: #1c2333;
  --texte-doux: #4a5368;
  --bordure: #6b7891;
  --accent: #1f3fae;
  --accent-survol: #16307f;
  --accent-ombre: #142a78;
  --accent-texte: #ffffff;
  --focus: #b3261e;
  --erreur: #b3261e;
  --puce: #e6edfb;
  --puce-cochee: #e4ecfb;
  --ombre: #dbe3ef;
  --epaisseur: 2px;
  --epaisseur-etiquette: 3px;
  --bien: #1f6b4a;
  --fond-bien: #e6f4ec;
  --attention: #8a4b00;
  --fond-attention: #fdf0d8;
  font-family: Andika, Luciole, "Atkinson Hyperlegible", system-ui, sans-serif;
  line-height: 1.4;
}
* { box-sizing: border-box; }
/* Fond « aurore » : dégradé statique bleu brume vers lavande, sans animation ni motif.
   Pires cas sur les trois teintes du dégradé (f3f6fb, e9eefb, eee9fb) : texte 1c2333 13,2:1 ; aide 4a5368 6,5:1 ; accent 1f3fae 7,4:1 ; bordures 6b7891 3,7:1.
   Mode contraste : fond blanc uni, le dégradé est retiré. */
/* L'en-tête et l'écran se partagent la hauteur de la fenêtre : l'écran ne fait plus à lui seul
   100 % de la hauteur sous un en-tête, ce qui poussait son bas (bouton « Question suivante ») hors de la vue. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.entete, .ecran { width: 100%; }
body { margin: 0; background: var(--fond); background: linear-gradient(160deg, #f3f6fb 0%, #e9eefb 55%, #eee9fb 100%) fixed; color: var(--texte); }
html.r-contraste body { background: var(--fond); }
.ecran {
  max-width: clamp(44rem, 68vw, 64rem); flex: 1 0 auto; margin: 0 auto; padding: 2.5rem 1rem 2rem;
  display: flex; flex-direction: column; gap: 2rem;
}
.ecran:focus { outline: none; }
.plumi-bulle { display: flex; align-items: flex-end; gap: 1rem; animation: arrivee .4s ease-out both; }
.plumi { flex: none; width: clamp(80px, 22vw, 150px); height: auto; }
.bulle {
  flex: 1; min-width: 0; margin: 0 0 2rem; padding: 1rem 1.5rem;
  background: var(--surface); border: var(--epaisseur) solid var(--bordure); border-radius: 28px;
  font-size: clamp(1.25rem, 4vw, 1.875rem); font-weight: 700; overflow-wrap: anywhere;
}
.formulaire { flex: 1; display: flex; flex-direction: column; gap: .75rem; animation: arrivee .4s ease-out .2s both; }
h1 { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.15; margin: 0; }
.aide { margin: 0 0 .5rem; font-size: clamp(1.125rem, 3.5vw, 1.5rem); color: var(--texte-doux); }
.champ {
  width: 100%; min-height: 88px; padding: .75rem 1.5rem; font: inherit; font-size: 2.5rem; font-weight: 700;
  color: var(--texte); background: var(--surface); border: 3px solid var(--bordure); border-radius: 20px;
}
.champ-erreur { border: 4px solid var(--erreur); }
.erreur { margin: 0; min-height: 2.2rem; font-size: clamp(1.125rem, 3.5vw, 1.5rem); font-weight: 700; color: var(--erreur); }
.gros-bouton {
  margin-top: auto; min-width: 48px; min-height: 80px; padding: 1rem clamp(.75rem, 4vw, 2rem); font: inherit;
  /* ADS-52 : à 320 px avec le texte agrandi, le libellé tenait sur 377 px (RGAA 10.11). */
  font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 700; max-width: 100%; overflow-wrap: break-word;
  background: var(--accent); color: var(--accent-texte); border: 0; border-radius: 20px;
  box-shadow: 0 6px 0 var(--accent-ombre); cursor: pointer;
}
.gros-bouton:hover { background: var(--accent-survol); }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.lien-evitement { position: absolute; left: -9999px; }
.lien-evitement:focus { left: 1rem; top: 1rem; background: var(--surface); color: var(--accent); padding: .75rem; z-index: 10; }
/* Les départs d'animation gardent une opacité de .01 et non 0 : Lighthouse ne mesure aucun LCP (NO_LCP) sur du texte à opacité 0.
   ADS-19 / ADS-46 : lancement (animations finies en moins de 2 s, sans flash) et bienvenue, d'après la maquette.
   Contrastes : blanc/1f3fae 8,8:1 ; blanc/2647b8 8,0:1 ; blanc/2d50c4 6,9:1 (mode contraste : cercles retirés, 8,8:1) ;
   focus du lancement f6c344/1f3fae 5,4:1 (≥ 3:1 exigé pour un repère) et f6c344/2647b8 4,8:1 ;
   bouton blanc/1f3fae 8,8:1 (l'ombre c9d4f0, 6,0:1 sur 1f3fae, est décorative : le bord du bouton est déjà lisible) ;
   icône « À ton rythme » 1f6b4a/e2f2ea 5,6:1 ; autres icônes 1f3fae/e6edfb 7,5:1 (≥ 3:1 exigé pour un composant). */
@keyframes cercle { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes envol { 0% { transform: translateY(300px) scale(.6); opacity: 0; } 55% { transform: translateY(-30px) scale(1.04); opacity: 1; } 75% { transform: translateY(8px); } 100% { transform: none; opacity: 1; } }
@keyframes battement-g { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-28deg); } }
@keyframes battement-d { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(28deg); } }
@keyframes clin { 0%, 100% { transform: scaleY(0); } 50% { transform: scaleY(1); } }
@keyframes lettre { 0% { transform: translateY(40px) scale(.4); opacity: .01; } 70% { transform: translateY(-8px) scale(1.12); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes fondu { from { opacity: .01; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes eclat { 0% { transform: scale(0) rotate(0); opacity: 0; } 60% { transform: scale(1.4) rotate(45deg); opacity: 1; } 100% { transform: scale(1) rotate(45deg); opacity: 1; } }
.lancement {
  position: relative; overflow: hidden; align-items: center; justify-content: center; text-align: center; cursor: pointer;
  max-width: none; background: #1f3fae; color: #ffffff; gap: 1.5rem;
}
.lancement > * { position: relative; }
.lancement > .lancement-decor { position: absolute; inset: 0; width: 100%; height: 100%; }
.lancement .cercle, .lancement .eclat { transform-box: fill-box; transform-origin: center; }
.lancement .c1 { animation: cercle .9s ease-out both; }
.lancement .c2 { animation: cercle 1s ease-out .15s both; }
.lancement .eclat { animation: eclat .5s ease-out both; }
.lancement .e1 { animation-delay: .6s; } .lancement .e2 { animation-delay: .7s; } .lancement .e3 { animation-delay: .8s; }
.lancement .e4 { animation-delay: .9s; } .lancement .e5 { animation-delay: .75s; }
.lancement .plumi-lancement { width: clamp(150px, 36vw, 260px); height: auto; overflow: visible; animation: envol .9s cubic-bezier(.2, .8, .3, 1) .1s both; }
.lancement .aile-g { transform-box: fill-box; transform-origin: 100% 20%; animation: battement-g .22s ease-in-out .3s 3 both; }
.lancement .aile-d { transform-box: fill-box; transform-origin: 0% 20%; animation: battement-d .22s ease-in-out .3s 3 both; }
.lancement .paupiere { transform: scaleY(0); transform-box: fill-box; transform-origin: center top; animation: clin .25s ease-in-out 1.2s 1 both; }
.lancement-nom { font-size: clamp(3rem, 12vw, 5.75rem); font-weight: 700; letter-spacing: 1px; line-height: 1.1; }
.lancement-nom .lettres span { display: inline-block; animation: lettre .45s cubic-bezier(.2, .8, .3, 1) both; }
.lancement-nom .lettres span:nth-child(1) { animation-delay: .6s; } .lancement-nom .lettres span:nth-child(2) { animation-delay: .66s; }
.lancement-nom .lettres span:nth-child(3) { animation-delay: .72s; } .lancement-nom .lettres span:nth-child(4) { animation-delay: .78s; }
.lancement-nom .lettres span:nth-child(5) { animation-delay: .84s; } .lancement-nom .lettres span:nth-child(6) { animation-delay: .9s; }
.lancement-nom .lettres span:nth-child(7) { animation-delay: .96s; } .lancement-nom .lettres span:nth-child(8) { animation-delay: 1.02s; }
.lancement-devise { margin: 0; font-size: clamp(1.5rem, 5vw, 2rem); color: #dbe7fb; animation: fondu .4s ease-out 1.1s both; }
.lancement .bouton-clair { margin-top: 1.5rem; background: #ffffff; color: var(--accent); box-shadow: 0 6px 0 #c9d4f0; animation: fondu .4s ease-out 1.5s both; }
.lancement .bouton-clair:hover { background: #e6edfb; }
.lancement :focus-visible { outline-color: #f6c344; }
html.r-contraste .lancement .cercle { display: none; }
html.r-contraste .lancement-devise { color: #ffffff; }
.bienvenue { gap: 1.75rem; }
.bienvenue-tete { display: flex; align-items: center; gap: 1.5rem; }
.bienvenue-tete .plumi { width: clamp(72px, 18vw, 110px); }
@media (max-width: 480px) { .bienvenue-tete { flex-direction: column; align-items: flex-start; gap: 1rem; } }
html.r-grand-texte .bienvenue-tete { flex-direction: column; align-items: flex-start; }
.bienvenue h1, .point-texte { overflow-wrap: anywhere; }
.bienvenue-intro { margin: .5rem 0 0; font-size: clamp(1.125rem, 3.5vw, 1.625rem); }
.points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.125rem; }
.point {
  display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem 1.75rem; background: var(--surface);
  border-radius: 24px; box-shadow: 0 5px 0 var(--ombre); animation: arrivee .3s ease-out both; /* sans opacité : axe mesure le contraste en cours d'animation */
}
.point-1 { animation-delay: .3s; } .point-2 { animation-delay: .6s; } .point-3 { animation-delay: .9s; }
.point-icone { flex: none; width: 72px; height: 72px; border-radius: 20px; background: var(--puce); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.point-2 .point-icone { background: #e2f2ea; color: #1f6b4a; }
.point-texte { display: flex; flex-direction: column; min-width: 0; }
.point-titre { font-size: clamp(1.375rem, 4.4vw, 1.875rem); font-weight: 700; }
.point-explication { font-size: clamp(1.125rem, 3.5vw, 1.5rem); color: var(--texte-doux); }
html.r-contraste .point { box-shadow: none; border: var(--epaisseur) solid var(--bordure); }
html.r-contraste .point-icone, html.r-contraste .point-2 .point-icone { background: #ffffff; color: #000000; border: var(--epaisseur) solid #000000; }
html.r-contraste .point-explication { color: #000000; }
/* ADS-20 : correction du prénom dans « Mes réglages ». */
.formulaire-prenom { display: flex; flex-direction: column; gap: .75rem; }
.formulaire-prenom label { font-size: clamp(1.25rem, 4vw, 1.75rem); font-weight: 700; }
.formulaire-prenom .gros-bouton { margin-top: 0; }
/* ADS-21 : choix de la classe. « Bientôt » et « ✓ Choisi » sont écrits, la couleur n'est jamais seule. */
.etiquette-classe { flex-direction: column; }
/* ADS-41 : les cinq cartes ont toujours la même taille, quelle que soit la taille du texte ou leur état (« Choisi », « Bientôt »). */
.etiquettes.etiquettes-classe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); grid-auto-rows: 1fr; }
.etiquettes-classe .etiquette-classe { width: 100%; min-width: 0; box-sizing: border-box; overflow-wrap: normal; word-break: keep-all; }
.etiquette-bientot { border-style: dashed; color: var(--texte-doux); }
.classe-etat { display: block; font-size: 1.125rem; font-weight: 400; }
/* ADS-45 : compteurs d'étoiles et synthèse d'une séance. Le nombre d'étoiles est toujours écrit.
   Contrastes : texte 4a5368/f3f6fb 7,1:1 ; texte 1c2333/ffffff 15,7:1 ; étoile 8a6a00/ffffff 5,1:1 ; bordure 6b7891/f3f6fb 4,1:1 ; survol 1c2333/e9eef7 13,5:1. */
.compteur { margin: -.5rem 0 0; font-size: clamp(1.125rem, 3.5vw, 1.5rem); color: var(--texte-doux); }
.compteur-synthese { margin: 0; font-size: clamp(1.75rem, 6vw, 2.5rem); font-weight: 700; }
.detail-synthese { padding: 1rem 1.5rem; background: var(--surface); border-radius: 24px; box-shadow: 0 6px 0 var(--ombre); }
.detail-synthese h2 { margin: 0 0 .5rem; font-size: 1.5rem; }
.detail-synthese ul { list-style: none; margin: 0; padding: 0; }
.detail-synthese li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; font-size: 1.375rem; border-top: 1px solid var(--ombre); }
.detail-synthese li:first-child { border-top: 0; }
.etoiles-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; font-weight: 700; }
.etoiles-ligne span { color: #8a6a00; font-size: 1.75rem; letter-spacing: .1em; }
.bouton-secondaire-gros { max-width: 100%; overflow-wrap: break-word; min-height: 72px; padding: .5rem clamp(.75rem, 4vw, 1.5rem); font: inherit; font-size: 1.625rem; color: var(--texte); background: var(--surface); border: var(--epaisseur-etiquette) solid var(--bordure); border-radius: 28px; cursor: pointer; }
.bouton-secondaire-gros:hover { background: #e9eef7; }
html.r-gros-boutons .bouton-secondaire-gros { min-height: 96px; }
html.r-contraste .etoiles-ligne span { color: #000000; }
/* Glissement sans fondu : le contenu est peint dès le premier affichage (FCP, LCP). */
@keyframes arrivee { from { transform: translateY(24px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* --- ADS-7 : réglages des difficultés ---
   Contrastes vérifiés : libellé 1c2333/e4ecfb 13,2:1 ; aide 4a5368/e4ecfb 6,5:1 ; aide 4a5368/ffffff 7,7:1 ;
   légende de l'aperçu 4a5368/ffffff 7,7:1 ; réponses 1c2333/e6edfb 13,4:1, bordure 6b7891/e6edfb 3,8:1 (≥ 3:1). */
.ecran-reglages { gap: 1.75rem; }
.ecran-reglages h1 { font-size: clamp(1.75rem, 5.5vw, 2.875rem); }
/* Titres et textes recevant le focus par script (tabindex="-1") pour que le lecteur d'écran annonce
   le nouvel écran : ce ne sont pas des commandes, on ne peut pas les atteindre au clavier ; un contour
   rouge y ferait croire à un bouton (RGAA 10.7 vise les éléments que l'on peut actionner). Les maquettes
   n'en montrent pas. */
:is(h1, h2, p, main)[tabindex="-1"]:is(:focus, :focus-visible) { outline: none; }
.intro { margin: .5rem 0 0; font-size: clamp(1.125rem, 3.5vw, 1.5rem); }
.apercu {
  display: flex; flex-direction: column; gap: .875rem; padding: 1.25rem 1.75rem;
  background: var(--surface); border: var(--epaisseur) solid var(--bordure); border-radius: 24px;
}
.apercu-legende { margin: 0; font-size: 1.125rem; color: var(--texte-doux); }
.apercu-consigne { display: flex; align-items: center; gap: .875rem; }
.apercu-question { margin: 0; font-size: 2rem; font-weight: 700; overflow-wrap: anywhere; }
.apercu-voix {
  flex: none; width: 52px; height: 52px; border-radius: 26px; background: var(--puce); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.apercu-reponses { display: flex; flex-wrap: wrap; gap: .875rem; }
.reponse {
  display: flex; align-items: center; justify-content: center; width: 96px; height: 68px; border-radius: 16px;
  font-size: 2rem; font-weight: 700; background: var(--puce); color: var(--texte);
  border: var(--epaisseur) solid var(--bordure);
}
.familles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem; }
.famille {
  margin: 0; border: 0; padding: 1.25rem; min-width: 0; background: var(--surface); border-radius: 24px;
  box-shadow: 0 5px 0 var(--ombre); display: flex; flex-direction: column; gap: .625rem;
}
.famille legend { float: left; width: 100%; padding: 0 0 .25rem; font-size: 1.625rem; font-weight: 700; }
.ligne {
  display: flex; align-items: center; gap: .875rem; min-height: 72px; padding: .5rem .625rem; border-radius: 14px;
  cursor: pointer;
}
.ligne-cochee { background: var(--puce-cochee); }
.ligne input { width: 32px; height: 32px; flex: none; margin: 0; accent-color: var(--accent); cursor: pointer; }
.ligne input:focus-visible { outline: none; }
.ligne:has(input:focus-visible) { outline: 4px solid var(--focus); outline-offset: 3px; }
.ligne-textes { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ligne-libelle { font-size: 1.375rem; font-weight: 700; }
.ligne-aide { font-size: 1.125rem; color: var(--texte-doux); }
.message { margin: -.5rem 0 0; min-height: 2.2rem; font-size: 1.375rem; font-weight: 700; }
.entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; padding: 1.5rem 1rem 0; max-width: clamp(44rem, 68vw, 64rem); margin: 0 auto; }
/* « Mon niveau » et « Mes réglages » côte à côte (maquette « 7 · Accueil du jour ») ; la classe en
   gras bleu comme sur la maquette : 1f3fae sur blanc 8,8:1. */
.entete-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.niveau-classe { font-weight: 700; color: var(--accent); }
html.r-contraste .niveau-classe { color: var(--texte); }
.marque { margin: 0; font-size: 1.625rem; font-weight: 700; color: var(--accent); }
.bouton-entete {
  min-height: 56px; padding: .5rem 1.25rem; font: inherit; font-size: 1.375rem; cursor: pointer;
  background: var(--surface); color: var(--texte); border: var(--epaisseur) solid var(--bordure); border-radius: 28px;
}

/* Effets des réglages, posés sur <html> par l'application.
   ADS-8, mode contraste : tout texte ≥ 7:1 (noir sur blanc 21:1, blanc sur 1f3fae 8,8:1, erreur 8b0000 10,0:1),
   bordures de 3 px. */
/* Grand écran avec souris : le gros bouton suit le contenu au lieu d'être poussé en bas de la fenêtre.
   Tablette et téléphone (pointeur tactile) gardent le bouton en bas, sous le pouce. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { .ecran .gros-bouton { margin-top: 0; } }
html.r-grand-texte { font-size: 137.5%; } /* consignes et réponses de 32 à 44 px, tout le texte agrandi */
html.r-contraste {
  --fond: #ffffff; --surface: #ffffff; --texte: #000000; --texte-doux: #000000; --bordure: #000000;
  --puce: #ffffff; --puce-cochee: #ffffff; --ombre: #000000; --epaisseur: 3px;
  --bien: #000000; --fond-bien: #ffffff; --attention: #000000; --fond-attention: #ffffff;
  --erreur: #8b0000; /* ADS-8 : 10,0:1 sur blanc ; b3261e donnait 6,5:1 sur blanc (6,0:1 sur f3f6fb) */
}
html.r-contraste .famille { box-shadow: none; border: 3px solid #000000; }
html.r-contraste .ligne-cochee { outline: 3px solid #000000; outline-offset: -3px; }
/* Le focus garde la priorité sur le contour de ligne cochée (RGAA 10.7). */
html.r-contraste .ligne:has(input:focus-visible) { outline: 4px solid var(--focus); outline-offset: 3px; }
html.r-contraste .reponse { background: #000000; color: #ffffff; }
html.r-calme *, html.r-calme *::before, html.r-calme *::after { animation: none !important; transition: none !important; }
html.r-calme .plumi { display: none; } /* moins d'images : la mascotte décorative disparaît */
html.r-gros-boutons .reponse { width: 128px; height: 96px; }
html.r-gros-boutons .gros-bouton { min-height: 96px; }
html.r-gros-boutons .bouton-entete { min-height: 72px; }

/* --- ADS-10 : exercice à étiquettes ---
   Contrastes vérifiés : texte 1c2333/ffffff 15,7:1 ; bonne réponse 1c2333/e6f4ec 13,8:1, bordure 1f6b4a/e6f4ec 5,7:1 ;
   essayée (--puce e6edfb, --accent 1f3fae) 1c2333/e6edfb 13,4:1, bordure 1f3fae/e6edfb 7,5:1 ; progression 4a5368/f3f6fb 7,1:1. */
.progression { margin: .25rem 0 0; font-size: 1.25rem; color: var(--texte-doux); }
.ecran-exercice { gap: 1.5rem; }
.ecran-exercice h1 { font-size: clamp(2rem, 6vw, 2.75rem); overflow-wrap: anywhere; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.etiquette {
  display: flex; align-items: center; justify-content: center; gap: .75rem; min-width: 96px; min-height: 96px; max-width: 100%;
  padding: .75rem 1.75rem; font: inherit; font-size: 2.75rem; font-weight: 700; overflow-wrap: anywhere; text-align: center;
  color: var(--texte); background: var(--surface); border: var(--epaisseur-etiquette) solid var(--bordure); border-radius: 24px; cursor: pointer;
}
.etiquette-symbole:empty { display: none; }
.etiquette-juste { background: var(--fond-bien); border: 4px solid var(--bien); }
.etiquette-essayee { background: var(--puce); border: 4px solid var(--accent); }
.explication { margin: 0; font-size: clamp(1.25rem, 4vw, 1.75rem); }
.bulle-bien { background: var(--fond-bien); border-color: var(--bien); }
html.r-gros-boutons .etiquette { min-width: 128px; min-height: 112px; }

/* --- ADS-11 : classement par tap ---
   Contrastes vérifiés : numéro de case 4a5368/f3f6fb 7,1:1 ; nombre 1c2333/ffffff 15,7:1, bordure 6b7891/f3f6fb 3,8:1 ;
   case vide 4a5368/f3f6fb 7,1:1, tirets 6b7891 3,8:1 ; case juste 1c2333/e6f4ec 13,8:1, bordure 1f6b4a 5,7:1.
   Mode contraste : noir sur blanc 21:1, bordures de 3 px. */
.cases { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.case-ligne { display: flex; flex-direction: column; gap: .5rem; }
.case-nom { font-size: 1.25rem; font-weight: 700; color: var(--texte-doux); }
.case {
  display: flex; align-items: center; justify-content: center; gap: .75rem; min-width: 128px; min-height: 96px; max-width: 100%;
  padding: .75rem 1.5rem; font: inherit; font-size: 2.75rem; font-weight: 700; text-align: center; overflow-wrap: anywhere;
  border-radius: 24px;
}
.case-vide { font-size: 1.5rem; font-weight: 400; color: var(--texte-doux); border: var(--epaisseur-etiquette) dashed var(--bordure); }
.case-remplie { color: var(--texte); background: var(--surface); border: var(--epaisseur-etiquette) solid var(--bordure); cursor: pointer; }
.case-remplie:disabled { cursor: default; }
.case-juste { background: var(--fond-bien); border: 4px solid var(--bien); color: var(--texte); }
.nombres { margin-top: .5rem; }
.nombre-place { visibility: hidden; }
html.r-gros-boutons .case { min-width: 144px; min-height: 112px; }

/* --- ADS-9 : lecture vocale et relance ---
   Contrastes vérifiés : haut-parleur 1c2333/ffffff 15,7:1, bordure 6b7891/f3f6fb 4,1:1 ; en lecture 1c2333/e6edfb 13,4:1,
   bordure 1f3fae 8,1:1 ; halo 1f3fae/f3f6fb 8,1:1 (≥ 3:1 exigé), fixe, sans clignotement.
   Mode contraste : noir sur blanc 21:1, halo 1f3fae/ffffff 8,8:1. */
.consigne-ligne { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.consigne-ligne h1 { flex: 1 1 12rem; min-width: 0; }
.haut-parleur {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem;
  min-width: 72px; min-height: 72px; padding: .5rem .75rem; font: inherit; font-size: 1.125rem; font-weight: 700; cursor: pointer;
  color: var(--texte); background: var(--surface); border: var(--epaisseur-etiquette) solid var(--bordure); border-radius: 24px;
}
.haut-parleur-actif { background: var(--puce); border-color: var(--accent); }
.halo { outline: 6px solid var(--accent); outline-offset: 10px; border-radius: 24px; }
html.r-gros-boutons .haut-parleur { min-width: 96px; min-height: 96px; }

/* --- ADS-12 : abaque coloré ---
   Contrastes vérifiés : lettre blanche sur jeton M 6b3fa0 7,4:1, C b3261e 6,5:1, D 1f3fae 8,8:1, U 1b6e3a 6,3:1 ;
   jeton sur fond f3f6fb : 6,8:1, 6,0:1, 8,1:1, 5,8:1 (≥ 3:1 exigé) ; emplacement vide 6b7891 4,1:1.
   Mode contraste : jetons noirs, lettre blanche 21:1. */
.ecran-abaque { gap: 1.5rem; }
.abaque { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.colonne { display: flex; flex-direction: column; align-items: center; gap: .75rem; min-width: 0; }
.col-milliers { --col: #6b3fa0; }
.col-centaines { --col: #b3261e; }
.col-dizaines { --col: #1f3fae; }
.col-unites { --col: #1b6e3a; }
.colonne-nom { margin: 0; font-size: .9rem; font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.jetons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; width: 100%; max-width: 132px; }
.jeton {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; min-width: 0; overflow: hidden;
  border: 1px dashed var(--bordure); font-size: clamp(.55rem, 3.4vw, 1rem); font-weight: 700; color: #ffffff;
}
.jeton-plein { background: var(--col); border: 1px solid var(--col); }
.pm {
  min-width: 64px; min-height: 64px; max-width: 100%; padding: 0; font: inherit; font-size: 2rem; font-weight: 700; line-height: 1; cursor: pointer;
  color: var(--texte); background: var(--surface); border: var(--epaisseur-etiquette) solid var(--bordure); border-radius: 20px;
}
.nombre-ecrit { margin: 0; font-size: clamp(2.5rem, 10vw, 4rem); font-weight: 700; text-align: center; }
html.r-contraste .jeton-plein { background: #000000; border-color: #000000; }
html.r-gros-boutons .pm { min-height: 88px; }

/* --- ADS-15 : progression et maîtrise ---
   Contrastes vérifiés : maîtrisée 1f6b4a/e6f4ec 5,7:1 ; en cours 1f3fae/e6edfb 7,5:1 ; à découvrir 4a5368/ffffff 7,7:1 ;
   à réviser 8a4b00/fdf0d8 6,0:1 ; effacer b3261e/ffffff 6,5:1 ; segment plein 1f6b4a/ffffff 6,4:1 ;
   segment vide (bordure 6b7891/ffffff) 4,5:1. Mode contraste : tout en noir sur blanc (21:1). */
.bonnes-reponses { margin: 0; font-size: clamp(1.375rem, 4.5vw, 1.75rem); font-weight: 700; }
.carte-progres { padding: 1.25rem 1.5rem; background: var(--surface); border-radius: 24px; box-shadow: 0 6px 0 var(--ombre); }
.carte-progres h2 { margin: 0 0 .75rem; font-size: 1.625rem; }
.barre-progres { display: flex; gap: .5rem; }
.segment { flex: 1; height: 24px; border-radius: 12px; border: var(--epaisseur) solid var(--bordure); background: var(--surface); }
.segment-plein { background: var(--bien); border-color: var(--bien); }
.phrase-progres { margin: .75rem 0 0; font-size: 1.375rem; }
.liste-progres { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.liste-progres li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 80px; padding: .75rem 1.5rem; background: var(--surface); border: var(--epaisseur) solid var(--bordure); border-radius: 24px;
}
.nom-notion { font-size: clamp(1.375rem, 4.5vw, 1.75rem); font-weight: 700; overflow-wrap: anywhere; }
.pastille { padding: .375rem 1rem; border-radius: 999px; border: var(--epaisseur) solid currentColor; font-size: 1.25rem; font-weight: 700; }
.pastille-maitrisee { color: var(--bien); background: var(--fond-bien); }
.pastille-maitrisee::after { content: " \2713"; }
.pastille-en-cours { color: var(--accent); background: var(--puce); }
.pastille-decouvrir { color: var(--texte-doux); background: var(--surface); }
.pastille-reviser { color: var(--attention); background: var(--fond-attention); }
.pour-adulte { margin-top: 2rem; padding: 1.25rem 1.5rem; border: var(--epaisseur) dashed var(--bordure); border-radius: 24px; display: flex; flex-direction: column; gap: .75rem; }
.pour-adulte h2 { margin: 0; font-size: 1.5rem; }
.pour-adulte p { margin: 0; font-size: 1.25rem; color: var(--texte-doux); }
.bouton-effacer {
  align-self: flex-start; min-height: 64px; padding: .5rem 1.5rem; font: inherit; font-size: 1.375rem; font-weight: 700;
  color: var(--erreur); background: var(--surface); border: var(--epaisseur-etiquette) solid var(--erreur); border-radius: 28px; cursor: pointer;
  max-width: 100%; overflow-wrap: break-word;
}
.confirmation { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.confirmation p { flex-basis: 100%; font-weight: 700; color: var(--texte); }
html.r-gros-boutons .bouton-effacer { min-height: 96px; }