/* Scribo — page de l'élève.
   Règles PONTET pour ce qui est remis à l'élève : sans empattement, 14 pt au
   moins (19 px), interligne 1,5 au moins, aligné à gauche, jamais justifié,
   pas de césure, pas d'italique, pas de mots entièrement en majuscules.
   Couleurs : jetons de la charte Socle ; --fs-scribo est provisoire (à ajouter
   à la charte si Victor la valide). */

:root {
  /* L'or des récompenses (médaille, anneau d'un décor légendaire, avatar en
     fête). Hors charte à dessein : c'est une marque de jeu, pas une couleur
     d'interface. Déclaré dans couleurs-en-dur.json avec son motif. */
  --or: #F5C518;
  --fs-scribo: #7A3E8E;
  /* Boutons de matière (accueil) : texte blanc sur couleur foncée, en clair comme en sombre. */
  --mat-texte: #FFFFFF;
  --mat-orthographe: #7A3E8E;
  --mat-grammaire: #1B5FA8;
  --mat-conjugaison: #2E6B2E;
  --mat-vocabulaire: #B34B18;
  --mat-comprehension: #A31B36;
  --mat-sons: #18189E;
  --juste: #1F6B45;
  --juste-doux: #E8F4EC;
  --faux: #8A4B08;
  --faux-doux: #FCF1E3;
  --test: #1F5FA8;
  --test-doux: #EAF1FB;
  --c3: #5B3FA3;
  --c3-doux: #EFEAFA;
  --c4: #A12B5B;
  --c4-doux: #FBE8F0;
  --taille: 19px;
  --interligne: 1.6;
  --police: var(--fs-sans);
  --espacement: 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fs-scribo: #C69BDB;
    --juste: #6DC194;
    --juste-doux: #16281E;
    --faux: #E6B06A;
    --faux-doux: #2E2415;
    --test: #8DB6EC;
    --test-doux: #1B2638;
    --c3: #B9A2F0;
    --c3-doux: #231B3A;
    --c4: #F0A0C0;
    --c4-doux: #35182A;
  }
}
:root[data-theme="dark"] {
    --fs-scribo: #C69BDB;
  --juste: #6DC194;
  --juste-doux: #16281E;
  --faux: #E6B06A;
  --faux-doux: #2E2415;
  --test: #8DB6EC;
  --test-doux: #1B2638;
  --c3: #B9A2F0;
  --c3-doux: #231B3A;
  --c4: #F0A0C0;
  --c4-doux: #35182A;
}
:root, [data-outil="scribo"], .eleve { --t: var(--fs-scribo); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fs-fond);
  color: var(--fs-encre);
  font-family: var(--police);
  font-size: var(--taille);
  line-height: var(--interligne);
  letter-spacing: var(--espacement);
  word-spacing: calc(var(--espacement) * 2);
  text-align: left;
  hyphens: none;
  -webkit-font-smoothing: antialiased;
}
em, i { font-style: normal; }
button, input { font: inherit; letter-spacing: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--police); font-weight: 700; line-height: 1.3; margin: 0; }
h1 { font-size: 1.45em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.05em; }
p { margin: 0; }
.cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Largeurs (décision de Victor, 23.09.2026) : la page va jusqu'à 1280 px, mais
   un paragraphe ne dépasse jamais 90 signes — au-delà, l'œil perd la ligne
   suivante en revenant à la marge. Les grilles de cartes, elles, profitent de
   toute la largeur. */
.eleve { max-width: 1280px; margin: 0 auto; padding: 16px 16px 64px; }
.eleve p, .eleve li, .eleve h1, .eleve h2, .message { max-width: 90ch; }
.eleve .gains li, .eleve .motifs li, .eleve .liste-notions li, .eleve .tableau-verbe li { max-width: none; }

/* Barre du haut */
.barre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0 18px; }
.barre__titre { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.barre__titre small { display: block; font-weight: 400; font-size: .8em; color: var(--fs-gris); }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 10px 22px; border-radius: 12px;
  border: 2px solid var(--t); background: var(--t); color: var(--fs-sur-couleur);
  font-weight: 700; cursor: pointer; text-decoration: none;
  touch-action: manipulation;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .45; cursor: default; filter: none; }
.btn--leger { background: var(--fs-papier); color: var(--t); }
.btn--discret { background: transparent; color: var(--fs-gris); border-color: var(--fs-trait-fort); font-weight: 600; }
.btn--petit { min-height: 44px; padding: 6px 14px; font-size: .9em; }
.btn--large { width: 100%; }
.btn svg { width: 22px; height: 22px; flex: none; }
:focus-visible { outline: 3px solid var(--fs-cadre); outline-offset: 3px; }

.ecouter {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid var(--fs-trait-fort); background: var(--fs-papier); color: var(--t); cursor: pointer;
}
.ecouter svg { width: 24px; height: 24px; }
.ecouter:hover { border-color: var(--t); }

/* Blocs */
.bloc {
  background: var(--fs-papier); border: 1px solid var(--fs-trait); border-radius: 14px;
  padding: 20px 22px; box-shadow: var(--fs-ombre);
}
.pile { display: flex; flex-direction: column; gap: 16px; }
.rangee { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.gris { color: var(--fs-gris); }
.message { padding: 14px 18px; border-radius: 12px; background: var(--fs-cadre-doux); border: 1px solid var(--fs-cadre-bord); }
.message--faux { background: var(--faux-doux); border-color: var(--faux); }

/* Connexion */
.connexion { max-width: 520px; margin: 6vh auto 0; }
.connexion h1 { margin-bottom: 6px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-weight: 700; }
.champ input {
  min-height: 56px; padding: 10px 16px; border-radius: 12px;
  border: 2px solid var(--fs-trait-fort); background: var(--fs-papier); font-size: 1.1em;
}
.champ input:focus { border-color: var(--t); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 25%, transparent); }
.champ small { color: var(--fs-gris); font-size: .85em; }

/* Accueil : sections et notions */
.onglets { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
.onglet {
  min-height: 48px; padding: 8px 18px; border-radius: 99px; cursor: pointer;
  border: 2px solid var(--fs-trait-fort); background: var(--fs-papier); font-weight: 600;
}
.onglet[aria-selected="true"] { border-color: var(--t); background: var(--t); color: var(--fs-sur-couleur); }
.onglet:disabled { opacity: .55; cursor: default; }

.groupe { margin-top: 26px; }
.groupe h2 { margin-bottom: 12px; }
/* Les grilles se règlent en « ch » : leurs colonnes suivent la taille du texte
   choisie par l'élève, au lieu d'un nombre de pixels fixe qui coupait les mots
   dès qu'il agrandissait (24.09.2026). */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22ch), 1fr)); gap: 14px; }
.carte {
  display: flex; flex-direction: column; gap: 10px; text-align: left; cursor: pointer;
  min-height: 112px; padding: 16px 18px; border-radius: 14px;
  background: var(--fs-papier); border: 2px solid var(--fs-trait); border-left: 6px solid var(--t);
}
.carte:hover { border-color: var(--t); }
.carte__titre { font-weight: 700; font-size: 1.05em; }
.carte--devoir { background: color-mix(in srgb, var(--t) var(--fs-teinte), var(--fs-papier)); }
.etiquette {
  display: inline-block; align-self: flex-start; font-size: .8em; font-weight: 700;
  padding: 2px 10px; border-radius: 99px; background: var(--t); color: var(--fs-sur-couleur);
}

/* Paliers : trois marches */
.marches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85em; color: var(--fs-gris); }
/* Pas de nowrap : « Palier 1 : Découverte · en cours » se faisait couper sur
   une carte quand l'élève agrandit le texte (24.09.2026). */
.marches > span:last-child { margin-left: 4px; }

/* Le but du palier : ce qu'il faut faire pour monter d'une marche. Il se lit
   sous les marches, en texte courant — c'est une information, pas une note. */
.but-palier { margin: 6px 0 0; max-width: 68ch; }
.progres-phrase { font-size: 1.15em; font-weight: 600; }
.marche { width: 26px; height: 12px; border-radius: 4px; border: 2px solid var(--t); background: transparent; }
.marche--faite { background: var(--t); }
.marche--ici { background: color-mix(in srgb, var(--t) 35%, var(--fs-papier)); }
.maitrise { color: var(--juste); font-weight: 700; }

/* Page d'une notion */
.notion-tete { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
/* Avec son image : le carré à gauche, le titre et les marches à droite. */
.notion-tete--image { flex-direction: row; align-items: center; gap: 18px; }
.notion-tete__texte { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.notion-tete__image { width: 104px; height: 104px; flex: none; border-radius: 12px; object-fit: cover;
  background: var(--fs-papier-2); }
@media (max-width: 560px) { .notion-tete--image { gap: 12px; } .notion-tete__image { width: 76px; height: 76px; } }
.choix-notion { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.grand-choix {
  display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 16px 20px; cursor: pointer;
  border-radius: 14px; border: 2px solid var(--fs-trait-fort); background: var(--fs-papier); text-align: left;
}
.grand-choix:hover { border-color: var(--t); }
.grand-choix img { width: 64px; height: 64px; flex: none; border-radius: 8px; }
.grand-choix strong { display: block; font-size: 1.1em; }

/* Fiche */
.fiche .bloc h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.fiche ul { margin: 0; padding-left: 1.2em; }
.fiche li + li { margin-top: 6px; }
.astuce { border-left: 6px solid var(--t); background: color-mix(in srgb, var(--t) var(--fs-teinte), var(--fs-papier)); }
.exemple { padding: 12px 0; border-top: 1px solid var(--fs-trait); }
.exemple:first-of-type { border-top: 0; }
.exemple__phrase { font-weight: 700; }
.essai { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px solid var(--fs-trait); }
.essai:first-of-type { border-top: 0; }
.essai__resultat { padding: 12px 16px; border-radius: 10px; }
.essai__resultat--oui { background: var(--juste-doux); border-left: 5px solid var(--juste); }
.essai__resultat--non { background: var(--faux-doux); border-left: 5px solid var(--faux); }
.essai__resultat--neutre { background: var(--fs-papier-2); border-left: 5px solid var(--t); }

/* Série */
.progression { display: flex; gap: 6px; margin: 4px 0 18px; }
/* En pilule, quelle que soit la hauteur : les barres plus petites n'ont ainsi
   pas à redire l'arrondi, et la forme carrée de .fait-faux n'est écrasée nulle part. */
.progression span { flex: 1; height: 10px; border-radius: 999px; background: var(--fs-papier-2); border: 1px solid var(--fs-trait); }
/* Juste et faux ne se séparent pas par la seule couleur (WCAG 1.4.1) : la case
   juste reste ronde et pleine, l'erreur devient carrée et creusée. Un élève qui
   confond le vert et l'orange voit quand même la différence. */
.progression .fait-juste { background: var(--juste); border-color: var(--juste); }
.progression .fait-faux { background: var(--faux); border-color: var(--faux);
  border-radius: 2px; box-shadow: inset 0 0 0 2px var(--fs-papier); }
.progression .en-cours { background: color-mix(in srgb, var(--t) 40%, var(--fs-papier)); border-color: var(--t); }

.consigne { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.consigne img { width: 60px; height: 60px; flex: none; border-radius: 8px; background: #fff; }
.consigne p { flex: 1; font-weight: 700; font-size: 1.1em; }

.phrase { font-size: 1.25em; line-height: 1.8; margin: 6px 0 22px; }
.trou {
  display: inline-block; min-width: 3.2em; padding: 0 .3em; margin: 0 .1em;
  border-bottom: 3px solid var(--t); text-align: center; font-weight: 700; color: var(--t);
}
.indice { color: var(--fs-gris); font-size: .85em; }

.options { display: flex; flex-wrap: wrap; gap: 12px; }
.option {
  min-width: 96px; min-height: 60px; padding: 10px 22px; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--fs-trait-fort); background: var(--fs-papier); font-size: 1.15em; font-weight: 700;
  touch-action: manipulation;
}
.option:hover { border-color: var(--t); }
.option[aria-pressed="true"] { border-color: var(--t); background: color-mix(in srgb, var(--t) 14%, var(--fs-papier)); }
.option--juste { border-color: var(--juste) !important; background: var(--juste-doux) !important; }
.option--faux { border-color: var(--faux) !important; background: var(--faux-doux) !important; }

.saisie input {
  min-height: 60px; width: min(100%, 360px); padding: 8px 16px; border-radius: 12px;
  border: 2px solid var(--fs-trait-fort); background: var(--fs-papier); font-size: 1.2em;
}
.saisie input:focus { border-color: var(--t); outline: none; }

/* Mots touchables (repérer, chaines) */
.mots { display: flex; flex-wrap: wrap; gap: 10px 8px; font-size: 1.2em; margin: 6px 0 22px; }
.mot {
  min-height: 52px; padding: 6px 12px; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--fs-trait); background: var(--fs-papier); touch-action: manipulation;
}
.mot:hover { border-color: var(--t); }
.mot[aria-pressed="true"] { border-color: var(--t); background: color-mix(in srgb, var(--t) 16%, var(--fs-papier)); font-weight: 700; }
.mot--cible { border-color: var(--fs-cadre); background: var(--fs-cadre-doux); font-weight: 700; cursor: default; }
.mot--juste { border-color: var(--juste) !important; background: var(--juste-doux) !important; }
.mot--faux { border-color: var(--faux) !important; background: var(--faux-doux) !important; }
.mot--oubli { border-style: dashed !important; border-color: var(--juste) !important; }

/* Tri : on touche un élément puis une colonne (pas de glisser-déposer : plus sûr sur iPad) */
.tri { display: flex; flex-direction: column; gap: 18px; }
.tri__elements { display: flex; flex-direction: column; gap: 10px; }
.tri__element {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 12px; border: 2px solid var(--fs-trait); background: var(--fs-papier);
}
.tri__element p { flex: 1 1 220px; }
.tri__boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.tri__element--juste { border-color: var(--juste); background: var(--juste-doux); }
.tri__element--faux { border-color: var(--faux); background: var(--faux-doux); }

/* Retour après une réponse */
.retour { margin-top: 22px; padding: 18px 20px; border-radius: 14px; display: flex; flex-direction: column; gap: 10px; }
.retour--juste { background: var(--juste-doux); border: 2px solid var(--juste); }
.retour--faux { background: var(--faux-doux); border: 2px solid var(--faux); }
.retour__titre { font-weight: 700; font-size: 1.15em; display: flex; align-items: center; gap: 10px; }
.retour__titre svg { width: 28px; height: 28px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* Bilan */
.bilan { text-align: left; }
.bilan__score { font-size: 2.2em; font-weight: 700; color: var(--t); }

/* Réglages d'affichage */
dialog.reglages {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  border: 1px solid var(--fs-trait); border-radius: 16px; padding: 22px;
  background: var(--fs-papier); color: var(--fs-encre);
}
dialog.reglages::backdrop { background: rgba(0, 0, 0, .35); }
.reglage { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--fs-trait); }
.reglage:first-of-type { border-top: 0; }
.reglage__choix { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille {
  min-height: 48px; padding: 6px 16px; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--fs-trait-fort); background: var(--fs-papier);
}
.pastille[aria-pressed="true"] { border-color: var(--t); background: color-mix(in srgb, var(--t) 14%, var(--fs-papier)); font-weight: 700; }

/* L'attribution ARASAAC est une mention légale, pas du décor : elle se lit.
   --fs-gris-clair la laissait à 3,83 sur le papier clair (4,5 exigés), et la
   paire n'était mesurée nulle part — trouvée le 25.09.2026 en comptant ce que
   bin/contrastes.mjs couvrait vraiment. */
.credit { margin-top: 40px; font-size: .8em; color: var(--fs-gris); }

@media (max-width: 560px) {
  .eleve { padding: 12px 16px 48px; }
  .phrase, .mots { font-size: 1.1em; }
  .consigne img { width: 48px; height: 48px; }
}

/* Points et niveaux */
.niveau-bandeau {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 14px 18px; border-radius: 16px; border: 2px solid var(--fs-trait); background: var(--fs-papier); cursor: pointer; text-align: left; width: 100%;
}
.niveau-bandeau:hover { border-color: var(--t); }
.niveau-bandeau svg, .niveau-bandeau .scene, .petite-scene svg { width: 96px; height: 96px; display: block; }
.niveau-bandeau__titre { font-weight: 700; font-size: 1.1em; }
.niveau-bandeau__etape { color: var(--fs-gris); }
.barre-niveau { height: 14px; border-radius: 7px; background: var(--fs-papier-2); border: 1px solid var(--fs-trait); overflow: hidden; margin: 8px 0 4px; }
.barre-niveau span { display: block; height: 100%; background: var(--t); border-radius: 7px; }
.points-texte { font-size: .85em; color: var(--fs-gris); }
@media (max-width: 560px) { .niveau-bandeau { grid-template-columns: 72px minmax(0, 1fr); } .niveau-bandeau svg, .niveau-bandeau .scene { width: 72px; height: 72px; } .niveau-bandeau__fleche { display: none; } }

.grande-scene svg, .grande-scene .scene { width: min(360px, 100%); height: auto; display: block; margin: 0 auto; }
.prochaine svg, .prochaine .scene { width: 120px; height: 120px; display: block; filter: grayscale(1) opacity(.45); }
.gains { list-style: none; margin: 0; padding: 0; }
.gains li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 8px 0; border-top: 1px solid var(--fs-trait); }
.gains li:first-child { border-top: 0; }
.gains b { color: var(--t); white-space: nowrap; }
.gains__total { font-size: 1.2em; font-weight: 700; color: var(--t); }

.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18ch), 1fr)); gap: 14px; }
.theme-carte {
  display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; cursor: pointer; text-align: left;
  border: 3px solid var(--fs-trait); background: var(--fs-papier);
}
.theme-carte:hover, .theme-carte[aria-pressed="true"] { border-color: var(--t); }
.theme-carte svg, .theme-carte .scene { width: 100%; height: auto; display: block; }
.theme-carte strong { font-size: 1.05em; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
  padding: 12px 20px; border-radius: 99px; background: var(--t); color: var(--fs-sur-couleur); font-weight: 700;
  box-shadow: var(--fs-ombre); max-width: calc(100vw - 32px);
}
@media (prefers-reduced-motion: no-preference) { .toast { animation: toast-in .35s ease-out; } }
@keyframes toast-in { from { transform: translate(-50%, 30px); opacity: 0; } }

/* La fête du nouveau niveau */
.fete { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--t) 55%, #000) 0%, rgba(10, 8, 20, .88) 70%); }
.fete__confettis { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fete__carte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 26px 30px; border-radius: 24px; background: var(--fs-papier); color: var(--fs-encre); width: min(420px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.fete__sur { font-weight: 700; color: var(--t); font-size: 1.1em; }
.fete__scenes { position: relative; width: 240px; height: 240px; max-width: 70vw; max-height: 70vw; }
.fete__scenes > div { position: absolute; inset: 0; }
.fete__scenes svg, .fete__scenes .scene { width: 100%; height: 100%; display: block; }
.fete__niveau { font-size: 2.4em; font-weight: 700; color: var(--t); line-height: 1.1; }
.fete__etape { font-size: 1.1em; }
.fete__bouton { margin-top: 8px; min-width: 180px; }
.fete .fete__avant { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .fete:not(.fete--calme) .fete__carte { animation: fete-carte .5s cubic-bezier(.2, 1.4, .4, 1); }
  .fete:not(.fete--calme) .fete__avant { animation: fete-avant 1.4s ease-in forwards; }
  .fete:not(.fete--calme) .fete__apres { animation: fete-apres 1.6s cubic-bezier(.2, 1.5, .4, 1) forwards; }
  .fete:not(.fete--calme) .fete__niveau { animation: fete-pouls 1.2s ease-in-out 1.4s 2; }
}
@keyframes fete-carte { from { transform: scale(.6); opacity: 0; } }
@keyframes fete-avant { 0% { opacity: 1; } 55% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.85); } }
@keyframes fete-apres { 0%, 55% { opacity: 0; transform: scale(.6) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
@keyframes fete-pouls { 50% { transform: scale(1.15); } }

/* Scènes en image (thèmes générés avec Draw Things) */
.scene { position: relative; display: block; aspect-ratio: 1; border-radius: 9%; overflow: hidden; background: var(--fs-papier-2); }
.scene img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scene--legende { box-shadow: inset 0 0 0 4px var(--or); outline: 4px solid var(--or); outline-offset: -4px; }
.scene__etoiles { position: absolute; top: 6%; left: 6%; right: 6%; color: var(--or); font-size: 1.1em; line-height: 1;
  text-shadow: 0 0 3px #7a5a00, 0 0 6px rgba(0,0,0,.4); letter-spacing: .05em; }
.grande-scene .scene { width: min(360px, 100%); margin: 0 auto; }
.prochaine .scene { filter: grayscale(1) opacity(.45); }

/* Tableau de référence d'une notion (conjugaison, accords…) */
.tableaux { display: flex; flex-direction: column; gap: 14px; }
.tableaux h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tableau-verbe { border: 1px solid var(--fs-trait); border-left: 5px solid var(--t); border-radius: 12px; padding: 12px 16px; }
.tableau-verbe h3 { color: var(--t); margin-bottom: 6px; }
.tableau-verbe ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 2px 18px; }
.tableau-verbe li { padding: 4px 0; border-bottom: 1px solid var(--fs-trait); }
@media (max-width: 600px) { .tableau-verbe ul { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; } }
.tableau-verbe ul.tableau-court { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; }

/* Texte court à lire, au-dessus de la question (vocabulaire) */
.texte-court { margin-bottom: 16px; border-left: 6px solid var(--fs-cadre); background: var(--fs-cadre-doux); }
.texte-court h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.texte-court p { font-size: 1.05em; }

/* ————————————————— Mon tableau de bord (« Ma progression »)
   Une couleur par domaine, prise dans la famille Socle. La couleur ne porte
   jamais l'information seule : le nombre est toujours écrit à côté. */
:root {
  --dom-orthographe: #7A3E8E;
  --dom-grammaire: #1F5FA8;
  --dom-conjugaison: #1F6B45;
  --dom-vocabulaire: #8F6A08;
  --dom-comprehension: #0F5C63;
  --dom-sons: #18189E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dom-orthographe: #C69BDB;
    --dom-grammaire: #78ADE8;
    --dom-conjugaison: #6DC194;
    --dom-vocabulaire: #D8B24A;
    --dom-comprehension: #5FC2BF;
    --dom-sons: #9293FC;
  }
}
:root[data-theme="dark"] {
  --dom-orthographe: #C69BDB;
  --dom-grammaire: #78ADE8;
  --dom-conjugaison: #6DC194;
  --dom-vocabulaire: #D8B24A;
  --dom-comprehension: #5FC2BF;
  --dom-sons: #9293FC;
}

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16ch), 1fr)); gap: 12px; }
.tuile {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px;
  background: var(--fs-papier-2); border: 1px solid var(--fs-trait); border-left: 6px solid var(--t);
}
.tuile__nombre { font-size: 1.9em; font-weight: 700; line-height: 1.2; color: var(--t); }
.tuile__libelle { font-weight: 600; }
.tuile__precision { color: var(--fs-gris); font-size: 1em; }
.tuile--juste, .tuile--maitrise { border-left-color: var(--juste); }
.tuile--juste .tuile__nombre, .tuile--maitrise .tuile__nombre { color: var(--juste); }
.tuile--faux { border-left-color: var(--faux); }
.tuile--faux .tuile__nombre { color: var(--faux); }

.jauge {
  display: block; height: 14px; border-radius: 7px; margin: 8px 0;
  background: var(--fs-papier-2); border: 1px solid var(--fs-trait); overflow: hidden;
}
.jauge > span { display: block; height: 100%; background: var(--t); border-radius: 7px; }
.jauge--orthographe > span { background: var(--dom-orthographe); }
.jauge--grammaire > span { background: var(--dom-grammaire); }
.jauge--conjugaison > span { background: var(--dom-conjugaison); }
.jauge--vocabulaire > span { background: var(--dom-vocabulaire); }
.jauge--comprehension > span { background: var(--dom-comprehension); }
.jauge--sons > span { background: var(--dom-sons); }

.domaine + .domaine { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fs-trait); }
.domaine__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.domaine__tete b { font-size: 1.1em; }
.domaine__points { font-weight: 700; white-space: nowrap; }
.domaine__detail { color: var(--fs-gris); margin-bottom: 4px; }

.detail summary { padding: 11px 0; cursor: pointer; font-weight: 600; color: var(--t); }
.detail summary::marker { color: var(--fs-gris); }
.liste-notions { list-style: none; margin: 0; padding: 0; }
.liste-notions li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 10px 0; border-top: 1px solid var(--fs-trait);
}
.liste-notions .marches { flex: 1 1 100%; }
.lien-notion {
  flex: 1 1 200px; padding: 6px 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--fs-encre);
  text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.lien-notion:hover { color: var(--t); }

.chiffres { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.chiffre {
  font-size: .85em; padding: 2px 10px; border-radius: 99px; white-space: nowrap;
  background: var(--fs-papier-2); border: 1px solid var(--fs-trait); color: var(--fs-gris);
}
.chiffre--juste { color: var(--juste); background: var(--juste-doux); border-color: var(--juste); }
.chiffre--faux { color: var(--faux); background: var(--faux-doux); border-color: var(--faux); }
.carte .chiffres { margin-top: 2px; }
/* Pas de nowrap : à très grande taille de texte, « +245 aujourd’hui » se
   faisait couper au bord de la carte (24.09.2026). L'espace insécable interne
   suffit à ne pas séparer le nombre de son mot. */
.points-jour { color: var(--juste); }

/* Autant de colonnes que de jours affichés (quatorze, ou sept sur un petit
   écran) : une grille figée à quatorze laissait des colonnes de 18 px. */
.jours { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; align-items: end; }
.jour { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.jour__barre {
  display: flex; align-items: flex-end; width: 100%; height: 96px; overflow: hidden;
  border-radius: 6px; background: var(--fs-papier-2); border: 1px solid var(--fs-trait);
}
.jour__barre > span { display: block; width: 100%; background: var(--t); }
.jour__nombre { font-size: .8em; font-weight: 700; color: var(--t); min-height: 1.3em; }
.jour__jour { font-size: .8em; color: var(--fs-gris); }
@media (max-width: 620px) { .jours { gap: 3px; } .jour__nombre { display: none; } .jour__barre { height: 76px; } }

.motifs { list-style: none; margin: 0; padding: 0; }
.motifs li {
  display: grid; grid-template-columns: minmax(140px, 1fr) minmax(90px, 1.6fr) auto;
  gap: 4px 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--fs-trait);
}
.motifs li:first-child { border-top: 0; }
.motifs b { color: var(--t); white-space: nowrap; }
@media (max-width: 620px) {
  .motifs li { grid-template-columns: minmax(0, 1fr) auto; }
  .motifs .jauge { grid-column: 1 / -1; margin: 2px 0 0; }
}

.trophees { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15ch), 1fr)); gap: 12px; }
.trophee {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 14px 10px; border-radius: 14px; border: 2px solid var(--fs-trait);
  background: var(--fs-papier-2); color: var(--fs-gris);
}
.trophee__icone svg { width: 40px; height: 40px; display: block; color: var(--fs-trait-fort); }
.trophee__nom { font-weight: 700; }
.trophee__but { font-size: .85em; }
.trophee--pris {
  border-color: var(--t); color: var(--fs-encre);
  background: color-mix(in srgb, var(--t) var(--fs-teinte), var(--fs-papier));
}
.trophee--pris .trophee__icone svg { color: var(--t); }
.trophee--secret { border-style: dashed; }

/* ————————————————— L'annonce des trophées, en spectacle (fete.js)
   Décision de Victor, 21.09.2026 : « annonce animée, paillettes et tout ».
   La médaille tombe en tournant, les rayons tournent derrière, un reflet
   passe sur l'or ; un trophée secret s'ouvre d'abord sur un point
   d'interrogation. Sans mouvement si l'élève a choisi « Calmes ». */
.spectacle { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--or) 38%, #2A1640) 0%, rgba(12, 8, 24, .9) 68%); }
.spectacle__paillettes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.spectacle__carte + .spectacle__paillettes, .fete__carte + .fete__confettis { z-index: 2; }
.spectacle__carte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 26px 28px 24px; border-radius: 24px; background: var(--fs-papier); color: var(--fs-encre);
  width: min(430px, 100%); box-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 0 0 3px var(--or); }
.spectacle__sur { font-weight: 700; font-size: 1.15em; color: var(--t); }
.spectacle__medaille { position: relative; width: 190px; height: 190px; display: grid; place-items: center; margin: 6px 0 4px; }
.spectacle__disque {
  position: relative; z-index: 1; width: 148px; height: 148px; border-radius: 50%; overflow: hidden; color: #6B4300;
  background: radial-gradient(circle at 34% 28%, #FFF7CF 0%, var(--or) 42%, #C98F0A 100%);
  box-shadow: inset 0 0 0 7px rgb(255 255 255 / .35), inset 0 -10px 18px rgb(120 70 0 / .35), 0 12px 30px rgb(0 0 0 / .35);
}
.spectacle__face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; }
.spectacle__face svg { width: 78px; height: 78px; display: block; filter: drop-shadow(0 2px 0 rgb(255 255 255 / .45)); }
.spectacle__medaille--secret .spectacle__face--icone { opacity: 0; }
.spectacle--calme .spectacle__medaille--secret .spectacle__face--mystere { opacity: 0; }
.spectacle--calme .spectacle__medaille--secret .spectacle__face--icone { opacity: 1; }
.spectacle__nom { font-size: 1.6em; line-height: 1.25; }
.spectacle__but { color: var(--fs-gris); }
.spectacle__compte { font-size: .9em; color: var(--fs-gris); }
.spectacle__bouton { margin-top: 10px; min-width: 190px; }

/* Les rayons de lumière : derrière la médaille, et derrière la scène du nouveau niveau. */
.rayons { position: absolute; inset: -46px; z-index: 0; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgb(245 197 24 / .55) 0deg 9deg, transparent 9deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 70%); mask: radial-gradient(circle, #000 28%, transparent 70%); }
.fete__scenes .rayons { inset: -90px;
  -webkit-mask: radial-gradient(circle, #000 48%, transparent 76%); mask: radial-gradient(circle, #000 48%, transparent 76%); }
.fete__scenes > div { z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .spectacle:not(.spectacle--calme) .spectacle__carte { animation: spectacle-carte .45s cubic-bezier(.2, 1.4, .4, 1); }
  .spectacle:not(.spectacle--calme) .spectacle__medaille { perspective: 700px; }
  .spectacle:not(.spectacle--calme) .spectacle__disque { animation: medaille-tombe .75s cubic-bezier(.25, 1.35, .45, 1) both; }
  .spectacle:not(.spectacle--calme) .spectacle__disque::after {
    content: ""; position: absolute; inset: -40%; z-index: 2;
    background: linear-gradient(115deg, transparent 42%, rgb(255 255 255 / .8) 50%, transparent 58%);
    transform: translateX(-120%); animation: reflet 2.6s ease-in-out .8s infinite; }
  .spectacle:not(.spectacle--calme) .rayons { animation: rayons-arrivent .6s ease-out .45s both, rayons-tournent 14s linear infinite; }
  .spectacle:not(.spectacle--calme) .spectacle__nom { animation: nom-arrive .5s cubic-bezier(.2, 1.5, .4, 1) .55s both; }
  .spectacle:not(.spectacle--calme) .spectacle__but { animation: nom-arrive .5s ease-out .75s both; }
  /* Le secret : le point d'interrogation tremble, puis la pièce se retourne. */
  .spectacle:not(.spectacle--calme) .spectacle__medaille--secret .spectacle__face--mystere { animation: mystere 1.4s ease-in-out both; }
  .spectacle:not(.spectacle--calme) .spectacle__medaille--secret .spectacle__face--icone { animation: devoile .5s ease-out 1.3s both; }
  .spectacle:not(.spectacle--calme) .spectacle__medaille--secret ~ .spectacle__nom { animation-delay: 1.5s; }
  .spectacle:not(.spectacle--calme) .spectacle__medaille--secret ~ .spectacle__but { animation-delay: 1.7s; }
  .fete:not(.fete--calme) .fete__scenes .rayons { animation: rayons-arrivent .6s ease-out 1.1s both, rayons-tournent 14s linear infinite; }
}
.fete--calme .fete__scenes .rayons { display: none; }
@keyframes spectacle-carte { from { transform: scale(.7); opacity: 0; } }
@keyframes medaille-tombe {
  0% { transform: translateY(-70vh) rotateY(900deg) scale(.5); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: none; opacity: 1; } }
@keyframes reflet { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }
@keyframes rayons-arrivent { from { opacity: 0; transform: scale(.4); } }
@keyframes rayons-tournent { to { rotate: 360deg; } }
@keyframes nom-arrive { from { transform: translateY(12px) scale(.9); opacity: 0; } }
@keyframes mystere {
  0%, 45% { transform: none; }
  52% { transform: rotate(-12deg); } 60% { transform: rotate(12deg); } 68% { transform: rotate(-9deg); } 76% { transform: rotate(9deg); }
  88% { transform: rotateY(0deg); opacity: 1; }
  100% { transform: rotateY(90deg); opacity: 0; } }
@keyframes devoile { from { transform: rotateY(-90deg) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }

/* ————————————————— La barre de points, à côté des exercices
   Demandée par Victor le 20.09.2026 : elle monte à chaque bonne réponse, et
   les gains de fin de série viennent s'y ajouter en volant. La portion pâle
   est ce que la série rapportera à la fin ; la pleine est déjà acquise. */
.barre-points {
  position: sticky; top: 4px; z-index: 5;
  display: grid; grid-template-columns: auto auto minmax(60px, 1fr) auto; align-items: center; gap: 6px 14px;
  margin: 0 0 18px; padding: 8px 16px 8px 10px; border-radius: 12px;
  background: var(--fs-papier); border: 1px solid var(--fs-trait); box-shadow: var(--fs-ombre);
}
.barre-points__niveau { font-weight: 700; white-space: nowrap; }
.barre-points__jauge {
  display: flex; height: 14px; border-radius: 7px; overflow: hidden;
  background: var(--fs-papier-2); border: 1px solid var(--fs-trait);
}
.barre-points__fait { background: var(--t); }
.barre-points__attente {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--t) 70%, var(--fs-papier)) 0 5px,
    color-mix(in srgb, var(--t) 42%, var(--fs-papier)) 5px 10px);
}
.barre-points__fait, .barre-points__attente { transition: width .45s cubic-bezier(.2, .8, .3, 1); }
.barre-points__total { font-size: .85em; color: var(--fs-gris); }
.barre-points--proche .barre-points__total { color: var(--juste); font-weight: 700; }
@media (max-width: 620px) {
  .barre-points { grid-template-columns: auto auto minmax(0, 1fr); }
  .barre-points__total { grid-column: 2 / -1; white-space: normal; }
  .barre-points__avatar { grid-row: span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .barre-points__fait, .barre-points__attente { transition: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .barre-points--pouls .barre-points__jauge { animation: pouls-jauge .5s ease-out; }
}
@keyframes pouls-jauge { 45% { transform: scaleY(1.5); } }

.jeton-points {
  position: fixed; z-index: 60; pointer-events: none; white-space: nowrap;
  padding: 6px 15px; border-radius: 99px; font-weight: 700;
  background: var(--t); color: var(--fs-sur-couleur); box-shadow: var(--fs-ombre);
}

/* Compréhension de l'oral : bloc d'écoute (jamais de transcription). */
.ecoute { margin-bottom: 16px; border-left: 6px solid var(--fs-cadre); background: var(--fs-cadre-doux); }
.ecoute h2 { margin-bottom: 8px; }
.ecoute .rangee { flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.ecoute .btn[aria-pressed="true"] { outline: 3px solid var(--fs-teinte); outline-offset: 2px; }
.ecoute-video { width: 100%; max-width: 960px; aspect-ratio: 16 / 9; margin: 10px 0; border-radius: 12px; overflow: hidden; background: #000; }
.ecoute-video iframe, .ecoute-video > div { display: block; width: 100%; height: 100%; border: 0; }
/* La vidéo ne se clique pas : toute la commande passe par nos boutons. Sans
   cela, l'élève peut cliquer le titre ou « Regarder sur YouTube » que YouTube
   pose sur l'image d'attente, et quitter Scribo (constaté le 23.09.2026). */
.ecoute-video iframe { pointer-events: none; }
.ecoute-bornes { font-weight: 700; }
.ecoute-compte { color: var(--fs-gris); }

/* ————————————————— L'avatar de l'élève (avatar-pieces.js, avatar.js)
   Décision de Victor, 21.09.2026 : composé pièce par pièce, à son image,
   jamais de nom. Il apparait sur l'accueil, dans « Ma progression », dans la
   barre de points, dans les fêtes et dans l'espace enseignant. */
svg.avatar { display: block; border-radius: 50%; flex: none; }
.barre-points__avatar svg { width: 34px; height: 34px; }

/* L'accueil : l'avatar posé sur le coin du décor. */
.bandeau-visuel { position: relative; display: block; }
.bandeau-visuel__avatar { position: absolute; right: -10px; bottom: -8px; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--fs-papier), 0 2px 6px rgb(0 0 0 / .25); }
/* Plus précis que « .niveau-bandeau svg », qui met toutes les images du bandeau à la taille du décor. */
.niveau-bandeau .bandeau-visuel__avatar svg { width: 46px; height: 46px; }
@media (max-width: 560px) { .niveau-bandeau .bandeau-visuel__avatar svg { width: 36px; height: 36px; } }

.bloc-avatar__dessin svg { width: 112px; height: 112px; }

/* Les fêtes : l'avatar saute de joie à côté de l'annonce. */
.fete__tete { display: flex; align-items: center; justify-content: center; gap: 12px; }
.avatar-saute { display: block; border-radius: 50%; box-shadow: 0 0 0 3px var(--or); }
@media (prefers-reduced-motion: no-preference) {
  .fete:not(.fete--calme) .avatar-saute, .spectacle:not(.spectacle--calme) .avatar-saute { animation: saute .55s cubic-bezier(.3, 0, .4, 1) .3s 3; }
}
@keyframes saute { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px) rotate(-6deg); } 60% { transform: translateY(-14px) rotate(6deg); } }

/* L'atelier. */
.atelier__corps { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.atelier__gauche { position: sticky; top: 8px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.atelier__apercu svg { width: 220px; height: 220px; box-shadow: 0 6px 24px -10px rgb(0 0 0 / .35); }
.atelier__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.atelier__actions .btn { width: 100%; }
.atelier__onglets { margin-top: 0; }
.atelier__panneau { display: flex; flex-direction: column; gap: 18px; }
.atelier__piece h2 { font-size: 1.05em; margin-bottom: 8px; }
.atelier__choisi { font-weight: 400; color: var(--fs-gris); }
.atelier__options { display: flex; flex-wrap: wrap; gap: 10px; }
.pastille-couleur {
  position: relative; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--c); border: 3px solid var(--fs-papier); box-shadow: 0 0 0 2px var(--fs-trait-fort);
  display: grid; place-items: center; color: #fff;
}
.pastille-couleur[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--t); }
.pastille-couleur svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .6)); }
.vignette {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: clamp(104px, 9ch, 190px); padding: 8px 4px 6px;
  border-radius: 14px; border: 2px solid var(--fs-trait); background: var(--fs-papier); cursor: pointer; color: var(--fs-encre);
}
.vignette:hover { border-color: var(--t); }
.vignette[aria-pressed="true"] { border-color: var(--t); box-shadow: 0 0 0 2px var(--t); background: color-mix(in srgb, var(--t) var(--fs-teinte), var(--fs-papier)); }
.vignette__dessin svg { width: 76px; height: 76px; }
.vignette__nom { font-size: .8em; line-height: 1.25; text-align: center; }
.atelier__verrou .vignette__dessin, .pastille-couleur.atelier__verrou { filter: grayscale(1) opacity(.55); }
.atelier__verrou .vignette__nom { color: var(--fs-gris); }
.vignette__cadenas { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--fs-encre); color: var(--fs-papier); }
.vignette__cadenas svg { width: 14px; height: 14px; }
@media (max-width: 700px) {
  .atelier__corps { grid-template-columns: minmax(0, 1fr); }
  .atelier__gauche { position: static; }
  .atelier__apercu svg { width: 170px; height: 170px; }
  .atelier__actions { flex-direction: row; flex-wrap: wrap; }
  .atelier__actions .btn { flex: 1 1 140px; width: auto; }
  .vignette { width: 92px; }
}

/* Bouton de navigation en tête de chaque page élève : « revenir à Paideia »
   sur l'accueil, « revenir à l'accueil » ailleurs. Texte seul, normes élève. */
.retour-nav {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 12px; padding: 6px 14px;
  font: inherit; font-size: var(--taille, 19px); font-weight: 600; line-height: 1.5;
  color: var(--fs-encre); background: transparent; border: 2px solid var(--fs-trait); border-radius: 12px;
  text-decoration: none; cursor: pointer;
}
.retour-nav:hover, .retour-nav:focus-visible { border-color: var(--fs-scribo); color: var(--fs-scribo); }

/* ————————————————— Nouveaux types d'items (21.09.2026) */
.phrase-source { margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; background: var(--fs-cadre-doux); }
.options--phrases { flex-direction: column; align-items: stretch; }
.option--phrase { text-align: left; white-space: normal; }
.phrase--champs { line-height: 2.2; }
.champ-trou {
  font: inherit; margin: 0 4px; padding: 2px 8px; min-width: 4ch; max-width: 100%;
  border: 2px solid var(--fs-trait-fort); border-radius: 8px; background: var(--fs-papier); color: var(--fs-encre);
}
.champ-trou:focus { outline: 3px solid var(--fs-scribo); outline-offset: 1px; }
.champ--juste { border-color: var(--juste); }
.champ--faux { border-color: var(--faux); }
.reecrire {
  width: 100%; font: inherit; line-height: 1.5; padding: 10px 12px; resize: vertical;
  border: 2px solid var(--fs-trait-fort); border-radius: 12px; background: var(--fs-papier); color: var(--fs-encre);
}
.dictee__ecoute { flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }

.relier { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.relier__col { display: flex; flex-direction: column; gap: 10px; }
.relier__el {
  font: inherit; text-align: left; min-height: 48px; padding: 8px 12px; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--fs-trait-fort); background: var(--fs-papier); color: var(--fs-encre); position: relative;
}
.relier__el[aria-pressed="true"] { outline: 3px solid var(--fs-scribo); outline-offset: 2px; }
.relier__el[data-paire]:not([data-paire=""])::before {
  content: attr(data-paire); display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: 8px;
  border-radius: 50%; background: var(--fs-scribo); color: var(--fs-sur-couleur, #fff); font-weight: 700; font-size: .85em;
}
.relier__el--juste { border-color: var(--juste); }
.relier__el--faux { border-color: var(--faux); }
.relier__attendu { font-weight: 700; }
@media (max-width: 560px) { .relier { grid-template-columns: 1fr; } }

.ordre__ligne {
  display: flex; flex-wrap: wrap; gap: 8px; min-height: 60px; padding: 10px; margin-bottom: 14px;
  border: 2px dashed var(--fs-trait-fort); border-radius: 12px;
}
.ordre__reserve { display: flex; flex-wrap: wrap; gap: 8px; }
.etiquette {
  font: inherit; min-height: 44px; padding: 6px 14px; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--fs-trait-fort); background: var(--fs-papier); color: var(--fs-encre);
}
.etiquette--placee { border-color: var(--fs-scribo); }

/* Fiche : un bouton d'écoute par phrase de règle, par exemple et par verbe (22.09.2026). */
.liste-ecoutable li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.liste-ecoutable li > span { flex: 1 1 auto; }
.exemple--ecoutable { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.exemple--ecoutable > div { flex: 1 1 auto; }
.tableau-verbe h3.ecoutable { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.liste-ecoutable { list-style: none; padding-left: 0; }
.liste-ecoutable li > span::before { content: "•"; display: inline-block; width: 1.2em; font-weight: 700; }
.liste-ecoutable li + li { margin-top: 6px; }

/* ————————————————— Série laissée en route (décision de Victor, 22.09.2026)
   Les dix cases de la série, comme pendant l'exercice, sur la carte de la
   notion, en grand sur sa page, et dans le bloc « À finir » de l'accueil. */
.serie-attente { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.serie-attente .progression { margin: 0; gap: 4px; }
.serie-attente .progression span { height: 8px; }
.serie-attente__texte { font-size: .85em; color: var(--fs-gris); }
.serie-attente--grande .progression span { height: 14px; }
.serie-attente--grande .serie-attente__texte { font-size: 1em; }
.serie-en-cours { margin-bottom: 18px; border-left: 6px solid var(--t); }

/* Défi surprise en fin de série (22.09.2026). */
.defi { border: 3px solid var(--fs-scribo); background: color-mix(in srgb, var(--fs-scribo) 10%, var(--fs-papier)); }
.defi h2 { color: var(--fs-scribo); margin-bottom: 6px; }
.defi .rangee { flex-wrap: wrap; gap: 12px; margin-top: 10px; }

/* Étiquettes à poser, vrai ou faux (22.09.2026). */
.trou-etiquette {
  font: inherit; min-width: 5ch; min-height: 40px; margin: 0 4px; padding: 2px 10px; border-radius: 8px; cursor: pointer;
  border: 2px dashed var(--fs-trait-fort); background: var(--fs-papier); color: var(--fs-gris);
}
.trou-etiquette--plein { border-style: solid; border-color: var(--fs-scribo); color: var(--fs-encre); }
/* Le trou qui recevra la prochaine étiquette. Il se signale par l'épaisseur du
   trait et un liseré — une forme, pas une couleur seule (règle commune). */
.trou-etiquette--vise { border-width: 3px; outline: 2px solid var(--fs-scribo); outline-offset: 2px; }
.vraifaux__pourquoi { font-weight: 700; margin: 14px 0 6px; }

/* Vidéo à questionnaire (décision de Victor, 23.09.2026). La vidéo d'abord en
   grand ; pendant les questions, le lecteur reste à côté de la question, et
   passe au-dessus d'elle sur un écran étroit. */
.video-page { max-width: 960px; }
.video-page h1 { margin-bottom: 4px; }
.video-travail { display: grid; grid-template-columns: minmax(320px, 1.05fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.video-travail__lecteur { position: sticky; top: 12px; }
.video-travail__lecteur .ecoute-video { margin: 0; }
.video-travail__question { background: var(--fs-papier); border: 1px solid var(--fs-trait); border-radius: 14px; padding: 18px; }
.video-travail__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.video-travail__tete p { margin: 0; }
/* Pas de « nowrap » sur ces deux-là : à la taille de texte maximale, un libellé
   long s'y faisait couper au lieu de passer à la ligne (signalé par GAMIFICATION,
   24.09.2026). Une information ne se coupe jamais — elle a le droit de revenir
   à la ligne. */
.btn.passage { white-space: normal; }
.carte--video .gris { font-size: .92em; }
@media (max-width: 900px) {
  .video-travail { grid-template-columns: minmax(0, 1fr); }
  .video-travail__lecteur { position: static; }
}
.carte--video { text-align: left; }
.carte__resume { font-size: .95em; line-height: 1.5; color: var(--fs-encre); }
.etiquette--vue { background: var(--fs-papier-2); color: var(--fs-gris); border: 1px solid var(--fs-trait); }

/* Notre barre de lecture, sous la vidéo : YouTube n'en montre aucune, pour que
   l'élève ne trouve ni le titre de la chaine ni le lien vers YouTube. */
.lecteur { display: block; }
.lecture { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.lecture__jouer { min-width: 96px; }
.lecture__temps { font-variant-numeric: tabular-nums; color: var(--fs-gris); white-space: nowrap; }
.lecture__barre { flex: 1 1 120px; min-width: 0; height: 28px; accent-color: var(--t); cursor: pointer; }
.lecture__barre:focus-visible { outline: 3px solid var(--fs-teinte); outline-offset: 2px; }
@media (max-width: 480px) { .lecture__jouer { min-width: 80px; } }
/* L'image déborde le rembourrage de la carte, pour tenir toute la largeur. */
.carte--video { overflow: hidden; }
.carte__image { display: block; width: calc(100% + 36px); margin: -16px -18px 12px; height: 136px; object-fit: cover;
  background: var(--fs-papier-2); }
@media (max-width: 560px) { .carte__image { height: 118px; } }
/* La bande d'une notion est plus basse que celle d'une vidéo, et l'image y est
   posée entière (« contain ») : elle est carrée, la rogner couperait l'objet
   qui rappelle la notion. Le titre reste ce qu'on lit en premier. */
.carte__image--notion { height: 112px; object-fit: contain; padding: 6px 0; }
@media (max-width: 560px) { .carte__image--notion { height: 96px; } }

/* Une série finie dont des erreurs n'ont jamais été reprises : même place que
   les activités en cours, mais reconnaissable au premier coup d'œil. */
.carte--erreurs { border-left-color: var(--faux); }
.etiquette--erreurs { background: color-mix(in srgb, var(--faux) 16%, var(--fs-papier));
  color: var(--faux); border: 1px solid color-mix(in srgb, var(--faux) 45%, var(--fs-papier)); }
/* Le défi : même forme que les autres choix, une couleur qui le distingue. */
.grand-choix--defi { border-color: var(--t); background: color-mix(in srgb, var(--t) 8%, var(--fs-papier)); }

/* Une couleur par section (décision de Victor, 23.09.2026). Contraste vérifié
   sur fond clair et sur fond sombre (4,5 au moins), et couleurs choisies pour
   rester distinctes en deutéranopie et en protanopie. La couleur ne porte
   jamais seule une information : l'onglet garde son nom, la carte son titre. */
[data-section="orthographe"]   { --t: #7A3E8E; }
[data-section="grammaire"]     { --t: #1B5FA8; }
[data-section="conjugaison"]   { --t: #2E6B2E; }
[data-section="vocabulaire"]   { --t: #C0521C; }
[data-section="comprehension"] { --t: #A31B36; }
[data-section="sons"]          { --t: #18189E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-section="orthographe"]   { --t: #C69BDB; }
  :root:not([data-theme="light"]) [data-section="grammaire"]     { --t: #9CC4EC; }
  :root:not([data-theme="light"]) [data-section="conjugaison"]   { --t: #8FD08F; }
  :root:not([data-theme="light"]) [data-section="vocabulaire"]   { --t: #F0A87A; }
  :root:not([data-theme="light"]) [data-section="comprehension"] { --t: #F09BAE; }
  :root:not([data-theme="light"]) [data-section="sons"]          { --t: #9293FC; }
}
:root[data-theme="dark"] [data-section="orthographe"]   { --t: #C69BDB; }
:root[data-theme="dark"] [data-section="grammaire"]     { --t: #9CC4EC; }
:root[data-theme="dark"] [data-section="conjugaison"]   { --t: #8FD08F; }
:root[data-theme="dark"] [data-section="vocabulaire"]   { --t: #F0A87A; }
:root[data-theme="dark"] [data-section="comprehension"] { --t: #F09BAE; }
:root[data-theme="dark"] [data-section="sons"]          { --t: #9293FC; }
/* L'indice se demande : un bouton discret, qui laisse la place au texte une
   fois touché (décision de Victor, 23.09.2026). */
.indice-demande { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.indice-demande .indice { margin: 0; }

/* Le test montré comme un schéma de décision. En HTML : il suit la police, la
   taille et le mode sombre de l'élève, et se lit au lecteur d'écran. */
.schema { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.schema__question { margin: 0; font-weight: 700; text-align: center;
  padding: 10px 18px; border: 2px solid var(--t); border-radius: 12px;
  background: color-mix(in srgb, var(--t) 8%, var(--fs-papier)); }
.schema__branches { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; width: 100%; }
.schema__branche { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px;
  padding: 12px 16px; border-radius: 12px; border: 2px solid var(--fs-trait); position: relative; }
.schema__branche::before { content: ""; position: absolute; top: -16px; left: 50%;
  width: 2px; height: 14px; background: var(--fs-trait-fort); }
.schema__branche--oui { border-color: var(--juste); background: color-mix(in srgb, var(--juste) 10%, var(--fs-papier)); }
.schema__branche--non { border-color: var(--faux); background: color-mix(in srgb, var(--faux) 10%, var(--fs-papier)); }
.schema__etiquette { font-weight: 700; }
.schema__suite { font-size: 1.05em; }
@media (max-width: 560px) { .schema__branche { flex: 1 1 100%; } }

/* Section « Les sons » (23.09.2026). L'élève entend un mot, ou nomme une image,
   et le range dans la colonne de son son. Le mot ne s'écrit qu'à la correction :
   l'écrire avant donnerait la réponse. Le bouton d'écoute d'une image est à sa
   main (décision de Victor) : il sert à l'élève qui ne connait pas le mot, et il
   rend l'exercice faisable par un élève qui n'entend pas comme par un élève qui
   ne voit pas. */
.ecoute-mot { display: flex; justify-content: center; margin: 18px 0; }
.ecoute-mot .btn-ecouter { transform: scale(1.6); }
.tri__mot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* « .tri__element p » étire le texte d'un mot rangé sur 220 px de large : dans la
   colonne d'une image, cette même règle l'étirait sur 220 px de HAUT, et chaque
   ligne devenait un grand vide. Ici, le mot ne prend que sa place. */
.tri__mot p { flex: 0 0 auto; }
.tri__image { width: 108px; height: 108px; object-fit: cover; border-radius: 10px;
  background: var(--fs-papier-2); display: block; }
.tri__element--cache { align-items: center; }
.mot-revele { margin: 4px 0 0; font-weight: 600; color: var(--t); }
/* Le mot ÉCRIT d'un tri et son bouton d'écoute : côte à côte, le texte aligné à
   gauche. « .tri__mot » empile et centre, ce qui convient au mot caché sous une
   image mais pas à une phrase qu'on lit (25.09.2026). */
.tri__ecrit { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; }
.tri__ecrit p { flex: 1 1 auto; margin: 0; text-align: left; }
@media (max-width: 560px) { .tri__image { width: 84px; height: 84px; } }

/* Les formes de la section « Les sons » qui montrent une image plutôt qu'un mot
   (décision de Victor, 23.09.2026) : l'intrus parmi quatre images, associer une
   image et un mot, écrire la partie du son sous un dessin. L'image ne nomme
   jamais son mot : le mot ne s'écrit qu'à la correction. */
.options--images { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }
.option--image { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; }
.option__image { width: 104px; height: 104px; object-fit: cover; border-radius: 10px;
  background: var(--fs-papier-2); display: block; }
.image-mot { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 16px; }
.image-mot img { width: 132px; height: 132px; object-fit: cover; border-radius: 12px;
  background: var(--fs-papier-2); display: block; }
.relier__el--image { padding: 8px; }
.relier__image { width: 88px; height: 88px; object-fit: cover; border-radius: 10px;
  background: var(--fs-papier-2); display: block; }
@media (max-width: 560px) {
  .option__image { width: 84px; height: 84px; }
  .image-mot img { width: 108px; height: 108px; }
  .relier__image { width: 70px; height: 70px; }
}

/* Recherche et groupes repliés (décisions de Victor, 24.09.2026). L'accueil
   portait 32 groupes et 108 notions d'un seul tenant : l'élève faisait défiler
   pour trouver. Les groupes se replient, et la recherche porte sur tout Scribo. */
.recherche { margin: 16px 0 32px; }
.recherche-haut:empty { display: none; }
.recherche__champ {
  width: 100%; min-height: 48px; padding: 10px 16px; font: inherit;
  font-size: var(--taille, 19px); line-height: 1.5; color: var(--fs-encre);
  background: var(--fs-papier); border: 2px solid var(--fs-trait-fort); border-radius: 12px;
}
.recherche__champ:focus-visible { outline: 3px solid var(--t); outline-offset: 2px; }
.recherche__champ::placeholder { color: var(--fs-gris); }

/* « details » plutôt qu'un pli fait à la main : le clavier et le lecteur d'écran
   le connaissent, et l'état ouvert ou fermé est annoncé sans qu'on l'écrive. */
.groupe--pli { border: 2px solid var(--fs-trait); border-radius: 14px; background: var(--fs-papier); }
.groupe--pli > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 56px; padding: 12px 18px; cursor: pointer;
  font-size: 1.15em; font-weight: 700; border-radius: 12px;
}
.groupe--pli > summary:hover { background: var(--fs-papier-2); }
.groupe--pli > summary:focus-visible { outline: 3px solid var(--t); outline-offset: -3px; }
.groupe--pli[open] > summary { border-bottom: 2px solid var(--fs-trait); border-radius: 12px 12px 0 0; }
.groupe--pli > .cartes { padding: 16px 18px 18px; }

/* Ce qu'il faut rendre, au-dessus du champ de réécriture (décision de Victor,
   25.09.2026). La consigne dit ce qu'il faut changer ; cette ligne dit qu'on
   recopie la phrase entière — le malentendu le plus fréquent du palier 3. */
.reecrire__dire { display: block; margin: 0 0 8px; font-weight: 600; color: var(--fs-encre); }

/* Synthèse métacognitive (pilote o-ponctuation, décision de Victor, 27.09.2026).
   Le panneau à côté des exercices, les choix de fin de palier, et la fiche
   imprimable de fin de parcours. */
.synthese-panneau { border-color: var(--fs-scribo); }
.synthese__ligne { display: flex; gap: 12px; align-items: flex-start; }
.synthese__ligne img { width: 32px; height: 32px; flex: 0 0 auto; }
.synthese__ligne p { margin: 0; min-width: 0; }

.synthese__choix { display: flex; flex-direction: column; gap: 10px; }
/* Chaque choix : le bouton de sélection et son écouter côte à côte, jamais
   l'un sous l'autre — un texte plus long que les autres suffit à faire passer
   l'écouter à la ligne si le bouton ne peut pas rétrécir sous son contenu
   (min-width auto par défaut sur un item flexible). Constaté le 28.09.2026
   en comparant deux choix de longueurs différentes côte à côte. */
.synthese__choix > .rangee { flex-wrap: nowrap; }
.synthese__bouton {
  display: flex; gap: 14px; align-items: center; text-align: left;
  min-height: 60px; padding: 10px 18px; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--fs-trait-fort); background: var(--fs-papier); font: inherit;
  touch-action: manipulation; min-width: 0;
}
.synthese__bouton:hover { border-color: var(--t); }
.synthese__bouton img { width: 32px; height: 32px; flex: 0 0 auto; }
.synthese__bouton span:last-child { min-width: 0; }
.synthese__bouton--choisi { border-color: var(--juste); background: var(--juste-doux); }

/* La fiche imprimable : cachée à l'écran (on la voit dans son propre écran de
   toute façon), reprise en grand à l'impression, hors des règles d'écran
   habituelles — règles du document remis à l'élève : sans empattement, 14 pt au
   moins, interligne 1,5, jamais justifié, pas d'italique. */
.synthese-imprimee { display: none; }
@media print {
  @page { size: A4; margin: 15mm; }
  /* Un rappel de classe, pas un pari sur l'ordre du DOM : « ~ » ne cache que ce
     qui suit dans le HTML, et la barre comme le bloc d'instructions viennent
     AVANT la fiche elle-même — un piège trouvé en le vérifiant plutôt qu'en le
     supposant. */
  .barre, .no-print { display: none; }
  .synthese-imprimee {
    display: block; font-family: Archivo, Arial, sans-serif; color: #000; font-size: 14pt; line-height: 1.5;
    text-align: left;
  }
  .synthese-imprimee h1 { font-size: 20pt; margin: 0 0 8mm; }
  .synthese-imprimee h2 { font-size: 15pt; margin: 6mm 0 2mm; }
  .synthese-imprimee__ligne { break-inside: avoid; margin-bottom: 6mm; }
  .synthese-imprimee__ligne img { width: 14mm; height: 14mm; }
  /* Une icône geste (SVG, span) et une icône concept (PNG, img) doivent sortir
     à la même taille sur le papier — sans cette ligne, la première restait à
     32px (taille écran) pendant que la seconde suivait le mm de l'impression. */
  .synthese-imprimee__ligne .geste-icone { width: 14mm; height: 14mm; }
  .synthese-imprimee p { margin: 0; }
}

/* Les gestes de la fiche, et le verdict du test de manipulation (pilote
   o-ponctuation, décision de Victor, 27.09.2026 : plus de repères visuels et
   de verbalisation des processus, inspirés du moyen d'enseignement romand
   « Texte et langue »). Jamais d'italique (règle du document remis à
   l'élève) : l'exemple se distingue par la couleur, pas par la casse. */
.gestes__liste { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.geste { display: flex; gap: 14px; align-items: flex-start; }
.geste-icone { display: inline-flex; width: 32px; height: 32px; flex: 0 0 auto; color: var(--t); }
.geste-icone svg, img.geste-icone { width: 100%; height: 100%; }
.geste > div { flex: 1 1 auto; }
.geste__verbe { font-weight: 700; margin: 0 0 2px; color: var(--fs-encre); }

.essai__verdict { display: flex; align-items: center; gap: 8px; margin: 0; }
.essai__icone { display: inline-flex; width: 22px; height: 22px; flex: 0 0 auto; }
.essai__icone svg { width: 100%; height: 100%; }
.essai__resultat--oui .essai__icone { color: var(--juste); }
.essai__resultat--non .essai__icone { color: var(--faux); }

.arbre { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; }
.arbre__racine {
  font-weight: 700; text-align: center; padding: 8px 18px; border-radius: 999px;
  background: var(--fs-papier-2); border: 2px solid var(--fs-trait-fort);
}
.arbre__fleche { width: 22px; height: 22px; color: var(--t); }
.arbre__fleche svg { width: 100%; height: 100%; }
.arbre__branches { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; width: 100%; }
.arbre__branche {
  flex: 1 1 220px; max-width: 320px; padding: 12px 16px; border-radius: 12px;
  border: 2px solid var(--fs-trait-fort); background: var(--fs-papier);
}
.arbre__etiquette {
  display: inline-block; font-weight: 700; padding: 3px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--t) var(--fs-teinte), var(--fs-papier)); margin: 0 0 8px;
}
.arbre__exemple {
  padding: 6px 10px; border-radius: 8px; margin: 0 0 8px; font-weight: 600;
  background: color-mix(in srgb, var(--t) var(--fs-teinte), var(--fs-papier));
  border-left: 4px solid var(--t);
}

/* Fiche visuelle « deux portes » (fiche.visuel) : peu de texte, forme + couleur + mot. */
.visuel { display: grid; gap: 10px; }
.visuel__question { text-align: center; font-size: 1.35em; margin: 0; display: flex; justify-content: center; align-items: center; gap: .3em; flex-wrap: wrap; }
.visuel .trou { display: inline-block; min-width: 1.4em; border-bottom: 4px solid currentColor; text-align: center; font-weight: 700; }
.visuel__test { display: flex; justify-content: center; align-items: center; gap: .4em; flex-wrap: wrap; margin: 0; }
.mot-test { background: var(--test-doux); color: var(--test); border: 2px solid var(--test); border-radius: 6px; padding: .2em .8em; font-weight: 700; font-size: 1.25em; }
.visuel__fleches svg { display: block; width: 100%; height: auto; max-height: 80px; }
.fleche { fill: none; stroke-width: 4; }
.fleche--oui { stroke: var(--juste); color: var(--juste); }
.fleche--non { stroke: var(--faux); color: var(--faux); stroke-dasharray: 9 6; }
.portes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.porte { border: 3px solid; border-radius: 14px; padding: .7em .8em; text-align: center; }
.porte--oui { border-color: var(--juste); background: var(--juste-doux); }
.porte--non { border-color: var(--faux); background: var(--faux-doux); }
.porte p { margin: 0; }
.porte__verdict { font-weight: 700; font-size: 1.1em; }
.porte--oui .porte__verdict { color: var(--juste); }
.porte--non .porte__verdict { color: var(--faux); }
.signe { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; height: 2.2em; padding: 0 .4em; border: 3px solid; font-weight: 700; font-size: 2.2em; }
.signe--oui { border-radius: 999px; color: var(--juste); border-color: var(--juste); background: var(--juste-doux); }
.signe--non { border-radius: 6px; color: var(--faux); border-color: var(--faux); background: var(--faux-doux); }
.porte__signe { margin: .2em 0 !important; }
.porte__exemple { display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; margin-top: .4em; }
.mot { padding: 0 .45em; font-weight: 700; border: 2px solid; }
.mot--oui { color: var(--juste); border-color: var(--juste); background: var(--juste-doux); border-radius: 999px; }
.mot--non { color: var(--faux); border-color: var(--faux); background: var(--faux-doux); border-radius: 4px; }
.piege-visuel { display: flex; gap: .6em; align-items: center; padding: .6em .9em; border: 2px dashed var(--faux); border-radius: 10px; background: var(--faux-doux); }
.piege-visuel p { margin: 0; flex: 1; }
@media (max-width: 520px) { .portes { gap: 8px; } .porte { padding: .5em .4em; } }

/* Fiche visuelle, suite (08.11.2026) : scènes dessinées, cartes, lignes avant ➜ après. */
.scene { display: block; width: 100%; max-width: 230px; aspect-ratio: 1; object-fit: contain; margin: .5em auto; border-radius: 16px; background: #fff; border: 3px solid var(--fs-trait); }
.scene--petit { max-width: 160px; }
.scene--large { max-width: 240px; margin-bottom: 18px; }
.porte__sous { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: .6em; }
.porte__sous-cas { display: flex; flex-direction: column; align-items: center; gap: .3em; }
.signe--petit { font-size: 1.3em; }
.porte--oui, .porte--non, .carte { padding: 1em .8em; }
.visuel { gap: 26px; }
.cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.carte { border: 3px solid; border-radius: 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6em; }
.carte--oui { border-color: var(--juste); background: var(--juste-doux); }
.carte--non { border-color: var(--faux); background: var(--faux-doux); }
.carte p { margin: 0; }
.carte__mot { font-size: 2.2em; font-weight: 700; line-height: 1; }
.carte--oui .carte__mot { color: var(--juste); }
.carte--non .carte__mot { color: var(--faux); }
.carte__nom { font-weight: 700; }
.carte__test { font-size: 1.1em; }
.visuel__regle { display: flex; align-items: center; justify-content: center; gap: .5em; flex-wrap: wrap; margin: 0; font-size: 1.1em; }
.visuel__cle { display: flex; justify-content: center; align-items: center; gap: .5em; flex-wrap: wrap; margin: 0; }
.verbe { font-weight: 700; border-bottom: 4px solid currentColor; }
.visuel__credit { margin: 0; text-align: center; font-size: .8em; color: var(--fs-gris); }
.lignes__entetes, .ligne { display: grid; grid-template-columns: 1fr 2.2em 1fr; gap: 10px; align-items: center; }
.lignes__entetes { font-weight: 700; padding: 0 .9em; }
.lignes__entetes span:first-child { color: var(--juste); }
.lignes__entetes span:last-child { color: var(--faux); }
.ligne { border: 3px solid var(--juste); border-radius: 14px; padding: .6em .8em; background: var(--juste-doux); }
.ligne__avant, .ligne__apres { padding: .3em .5em; border-radius: 10px; }
.ligne__fleche { text-align: center; font-size: 1.6em; color: var(--fs-gris); }
.ligne__signe { grid-column: 1 / -1; justify-self: center; font-weight: 700; font-size: 1.2em; border: 3px solid currentColor; border-radius: 999px; padding: 0 .8em; background: var(--fs-papier); }
.ligne > .ecouter { grid-column: 1 / -1; justify-self: end; }
.ligne:not([class*="ligne--c"]) .ligne__apres { background: var(--faux-doux); border: 3px solid var(--faux); }
.ligne:not([class*="ligne--c"]) .ligne__avant { background: var(--juste-doux); }
.ligne--c1 { border-color: var(--juste); background: var(--juste-doux); color: var(--juste); }
.ligne--c2 { border-color: var(--faux); background: var(--faux-doux); color: var(--faux); }
.ligne--c3 { border-color: var(--c3); background: var(--c3-doux); color: var(--c3); }
.ligne--c4 { border-color: var(--c4); background: var(--c4-doux); color: var(--c4); }
.ligne[class*="ligne--c"] .ligne__avant, .ligne[class*="ligne--c"] .ligne__apres { color: var(--fs-encre); }
.mot--avant { color: inherit; border-color: currentColor; background: var(--fs-papier); border-radius: 8px; }
.mot--apres { color: var(--test); border-color: var(--test); background: var(--test-doux); border-radius: 8px; }
.ligne:not([class*="ligne--c"]) .mot--avant { color: var(--juste); }
.ligne:not([class*="ligne--c"]) .mot--apres { color: var(--faux); background: var(--faux-doux); }
@media (max-width: 600px) {
  .cartes, .porte__sous { grid-template-columns: 1fr; gap: 24px; }
  .lignes__entetes, .ligne { grid-template-columns: 1fr; gap: 4px; }
  .lignes__entetes span:nth-child(2), .lignes__entetes { display: none; }
  .ligne__fleche { transform: rotate(90deg); }
}

/* Disposition « grille » (08.11.2026) : 2 à 4 cartes, chacune sa couleur ET sa forme (● ■ ▲ ◆). */
.cartes--3 { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cartes--4 { gap: 24px; }
.carte--g1 { border-color: var(--juste); background: var(--juste-doux); }
.carte--g2 { border-color: var(--faux); background: var(--faux-doux); }
.carte--g3 { border-color: var(--c3); background: var(--c3-doux); }
.carte--g4 { border-color: var(--c4); background: var(--c4-doux); }
.carte--g1 .carte__mot, .mot--g1 { color: var(--juste); }
.carte--g2 .carte__mot, .mot--g2 { color: var(--faux); }
.carte--g3 .carte__mot, .mot--g3 { color: var(--c3); }
.carte--g4 .carte__mot, .mot--g4 { color: var(--c4); }
.mot--g1, .mot--g2, .mot--g3, .mot--g4 { border-color: currentColor; background: var(--fs-papier); border-radius: 8px; }
.porte__plus { font-size: 1em; color: var(--fs-gris); margin-top: .4em !important; }
.carte .porte__exemple { width: 100%; }
@media (max-width: 600px) { .cartes--3, .cartes--4 { grid-template-columns: 1fr; gap: 24px; } }

/* ————————————————————————— Accueil refait le 09.11.2026 (maquettes « accueil 3 » et « B »)
   À gauche : l'élève et ses matières. À droite : l'accueil, ou la matière choisie. */
/* Fond de bouton de matière : la couleur claire du mode sombre ne tiendrait pas le texte blanc. */
[data-section="orthographe"]   { --mat: var(--mat-orthographe); }
[data-section="grammaire"]     { --mat: var(--mat-grammaire); }
[data-section="conjugaison"]   { --mat: var(--mat-conjugaison); }
[data-section="vocabulaire"]   { --mat: var(--mat-vocabulaire); }
[data-section="comprehension"] { --mat: var(--mat-comprehension); }
[data-section="sons"]          { --mat: var(--mat-sons); }

.cadre-acc { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 8px; }
.gauche {
  position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--fs-papier-2); border: 2px solid var(--fs-trait); border-radius: 18px;
}
.moi {
  display: flex; align-items: center; gap: 12px; padding: 10px; text-align: left; cursor: pointer;
  font: inherit; color: var(--fs-encre); background: var(--fs-papier); border: 2px solid var(--fs-trait); border-radius: 16px;
}
.moi[aria-current="true"] { border-color: var(--fs-encre); }
.moi:focus-visible, .mat:focus-visible, .pastilles button:focus-visible, .ligne:focus-visible { outline: 3px solid var(--fs-encre); outline-offset: 2px; }
/* Carte de l'élève (maquette 2a, 09.11.2026) : décor choisi en grand, avatar posé sur son coin bas-gauche. */
.moi-carte { display: grid; gap: 8px; padding: 10px 10px 12px; border-width: 3px; }
.moi-carte__visuel { position: relative; display: block; }
.moi-carte__decor, .moi-carte__decor .scene { display: block; width: 100%; }
.moi-carte__decor { border-radius: 12px; overflow: hidden; }
.moi-carte__decor .scene { border-radius: 0; }
.moi-carte__decor svg { display: block; width: 100%; height: auto; }
.moi-carte__avatar { position: absolute; left: 6px; bottom: -43px; width: 92px; height: 92px; border-radius: 50%; overflow: hidden;
  background: var(--fs-papier); border: 3px solid var(--fs-encre); box-shadow: 0 0 0 4px var(--fs-papier); }
.moi-carte__avatar svg { display: block; width: 100%; height: 100%; color: var(--fs-encre); }
.moi-carte__infos { display: flex; flex-direction: column; min-width: 0; }
.moi-carte__niveau { font-size: 1.5rem; line-height: 1.2; }
.moi-carte__niveau, .moi-carte__etape { padding-left: 100px; }
.moi-carte__etape, .moi-carte__points, .moi-carte .points-jour { font-size: 1em; }
.moi-carte .barre-niveau { height: 16px; border-radius: 8px; margin: 18px 0 6px; }
.moi-carte .barre-niveau span { border-radius: 8px; }
.mat {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 4px 10px; text-align: left; cursor: pointer;
  font: inherit; font-size: 1.1875rem; font-weight: 700; color: var(--mat-texte); background: var(--mat);
  border: 3px solid transparent; border-radius: 16px;
}
.mat img { flex: none; width: 42px; height: 42px; object-fit: cover; border-radius: 8px; border: 2px solid var(--mat-texte); }
.mat[aria-current="true"] { border-color: var(--fs-encre); outline: 3px solid var(--mat-texte); outline-offset: -6px; }
.mat:disabled { opacity: .55; cursor: not-allowed; }

.droite { min-width: 0; }
.droite .recherche { margin: 0 0 20px; }

/* Accueil (maquette 2a) : « à reprendre » en haut sur toute la largeur, résultats et badges côte à côte, succès en bas. */
.acc { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "rep rep" "res bad" "suc suc"; gap: 16px; }
.g-rep { grid-area: rep; align-self: start; border-left: 6px solid var(--fs-encre); }
.g-res { grid-area: res; } .g-bad { grid-area: bad; } .g-suc { grid-area: suc; }
.acc .bloc h2 { margin-bottom: 12px; }
.reprise { display: flex; flex-direction: column; gap: 10px; }
.ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; text-align: left; cursor: pointer;
  font: inherit; color: var(--fs-encre); background: var(--fs-papier); border: 2px solid var(--fs-trait); border-left: 8px solid var(--t); border-radius: 12px;
}
.ligne:hover { background: var(--fs-papier-2); }
.ligne__texte { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-width: 0; }
.ligne__go { flex: none; font-weight: 700; color: var(--t); white-space: nowrap; }
.voir-plus { align-self: flex-start; }
/* Dans l'accueil, rien sous 19 px ; l'état d'une ligne est un simple mot, plus une pastille. */
.reprise .etiquette { background: none; border: 0; padding: 0; border-radius: 0; font-size: 1em; font-weight: 700; color: var(--t); }
.acc .btn--petit { font-size: 1em; min-height: 40px; padding: 2px 14px; }
.acc .tuile { padding: 6px 10px; }
.acc .tuile__libelle { font-size: 1em; }
.acc .tuile__nombre { font-size: 1.4em; }
.acc .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
.badges, .succes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.badge { display: flex; align-items: center; gap: 10px; }
.badge__icone { flex: none; width: 40px; height: 40px; }
.badge__icone svg { width: 100%; height: 100%; }
.succes li { padding: 8px 12px; border-left: 6px solid var(--t); background: var(--fs-papier); border-radius: 0 10px 10px 0; }

/* Matière : en-tête collant, pastilles de groupes sur une seule ligne. */
.entete {
  position: sticky; top: 0; z-index: 3; display: flex; flex-direction: column; gap: 8px; padding: 8px 0 12px;
  background: var(--fs-fond); border-bottom: 6px solid var(--t);
}
.entete h1 { margin: 0; }
.pastilles { display: flex; gap: 6px; flex-wrap: nowrap; width: 100%; }
.pastilles button {
  flex: 0 1 auto; min-height: 48px; padding: 6px 10px; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 1.1875rem; font-weight: 700; color: var(--t); background: var(--fs-papier);
  border: 2px solid var(--t); border-radius: 999px;
}
.pastilles button[aria-pressed="true"] { color: var(--fs-fond); background: var(--t); }

/* État d'une notion, en mots. */
.etat { align-self: flex-start; padding: 2px 10px; font-size: 1rem; font-weight: 700; border-radius: 999px; border: 2px solid var(--fs-trait-fort); color: var(--fs-encre); background: var(--fs-papier); }
.etat--maitrisee { border-color: var(--juste); }
.etat--commencee { border-style: dashed; }

@media (max-width: 900px) {
  .cadre-acc { grid-template-columns: 1fr; }
  .gauche { position: static; }
  .moi-carte { width: min(100%, 300px); align-self: center; }
  .acc { grid-template-columns: 1fr; grid-template-areas: "rep" "res" "bad" "suc"; }
  .pastilles { flex-wrap: wrap; }
}