/* Germania — feuille unique, sans étape de construction.
 *
 * Deux contraintes ont dicté la mise en page :
 *
 *  - 375 px d'abord. Une séance de révision se fait debout dans un train, à
 *    une main. Les cibles tactiles font 44 px au minimum, et rien d'important
 *    ne se trouve en haut de l'écran, hors de portée du pouce.
 *  - L'écran large ne doit pas être une version étirée du téléphone. La
 *    colonne est plafonnée, et la barre de navigation passe sur le côté.
 *
 * Les couleurs de genre sont le seul élément non négociable : elles portent du
 * sens et sont apprises avec la langue. Voir js/format.js.
 */

/* --------------------------------------------------------------- couleurs */

:root {
  color-scheme: light dark;

  --fond: #fbfaf9;
  --fond-carte: #ffffff;
  --fond-creux: #f2efec;
  --bordure: #e0dbd5;
  --texte: #1c1917;
  --texte-doux: #6b625a;
  --accent: #8a4b2a;
  --accent-texte: #ffffff;

  --masculin: #1d5f9e;
  --feminin: #b03474;
  --neutre: #1e7a4a;
  --pluriel: #6b3fa0;
  --notion: #8a5a00;
  --piege: #b04a10;
  --faux: #b42318;
  --juste: #1e7a4a;

  --masculin-fond: #e6f0f9;
  --feminin-fond: #fbe8f1;
  --neutre-fond: #e4f4ec;
  --pluriel-fond: #efe8f9;
  --notion-fond: #fbf1dc;
  --piege-fond: #fceee5;

  --rayon: 14px;
  --ombre: 0 1px 2px rgba(28, 25, 23, .06), 0 4px 14px rgba(28, 25, 23, .05);
  --colonne: 46rem;
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #17140f;
    --fond-carte: #221e18;
    --fond-creux: #2b261f;
    --bordure: #3a342b;
    --texte: #f0ebe4;
    --texte-doux: #a89e91;
    --accent: #d9915f;
    --accent-texte: #17140f;

    --masculin: #7dc4f5;
    --feminin: #f5a0c8;
    --neutre: #86d9a8;
    --pluriel: #c0a4f0;
    --notion: #e8bf6a;
    --piege: #f0a072;
    --faux: #f08a80;
    --juste: #86d9a8;

    --masculin-fond: #16283a;
    --feminin-fond: #35182a;
    --neutre-fond: #16302280;
    --pluriel-fond: #291f3d;
    --notion-fond: #322715;
    --piege-fond: #33200f;

    --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  }
}

:root[data-theme="sombre"] {
  --fond: #17140f;
  --fond-carte: #221e18;
  --fond-creux: #2b261f;
  --bordure: #3a342b;
  --texte: #f0ebe4;
  --texte-doux: #a89e91;
  --accent: #d9915f;
  --accent-texte: #17140f;

  --masculin: #7dc4f5;
  --feminin: #f5a0c8;
  --neutre: #86d9a8;
  --pluriel: #c0a4f0;
  --notion: #e8bf6a;
  --piege: #f0a072;
  --faux: #f08a80;
  --juste: #86d9a8;

  --masculin-fond: #16283a;
  --feminin-fond: #35182a;
  --neutre-fond: #163022;
  --pluriel-fond: #291f3d;
  --notion-fond: #322715;
  --piege-fond: #33200f;

  --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
}

/* --------------------------------------------------------------- socle */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  /* La barre de navigation est fixée en bas : sans cette réserve, le dernier
     bouton d'une page passerait dessous et deviendrait inatteignable. */
  padding-bottom: calc(4.6rem + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.25; margin: 0 0 .4em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }
p { margin: 0 0 .8em; }
a { color: inherit; }

#tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(.7rem + env(safe-area-inset-top)) 1rem .7rem;
  max-width: var(--colonne);
  margin: 0 auto;
}
.marque { text-decoration: none; }
.marque-nom {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.tete-reglages {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  margin-right: -.5rem;
  border-radius: 50%;
  color: var(--texte-doux);
}
.tete-reglages svg { width: 22px; height: 22px; stroke: currentColor; }
.tete-reglages:hover { background: var(--fond-creux); color: var(--texte); }

#vue {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

.entete-vue { margin: .2rem 0 1.2rem; }
.sous-titre { color: var(--texte-doux); margin: 0; }
.titre-section {
  margin: 1.8rem 0 .7rem;
  font-size: 1.05rem;
  color: var(--texte-doux);
  font-family: var(--sans);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: .02em;
}
.menu-detail { color: var(--texte-doux); font-size: .88rem; line-height: 1.45; }
.chargement { color: var(--texte-doux); padding: 3rem 0; text-align: center; }
.retour-lien {
  display: inline-block;
  color: var(--texte-doux);
  text-decoration: none;
  font-size: .9rem;
  padding: .5rem 0;
}
.retour-lien:hover { color: var(--texte); }

/* --------------------------------------------------------------- couleurs de genre */

.b-masculin, .b-feminin, .b-neutre, .b-pluriel, .b-notion, .b-piege {
  border-radius: 5px;
  padding: 0 .18em;
  font-weight: 600;
}
.b-masculin { color: var(--masculin); background: var(--masculin-fond); }
.b-feminin  { color: var(--feminin);  background: var(--feminin-fond); }
.b-neutre   { color: var(--neutre);   background: var(--neutre-fond); }
.b-pluriel  { color: var(--pluriel);  background: var(--pluriel-fond); }
.b-notion   { color: var(--notion);   background: var(--notion-fond); }
.b-piege    { color: var(--piege);    background: var(--piege-fond); font-style: italic; }
.b-faux     { color: var(--faux); text-decoration-thickness: 2px; }
.mot-nu     { font-weight: 600; }

/* Un balisage imbriqué — « [[**den Mann**]] » — empilerait deux fonds colorés
   et donnerait une bouillie. Le fond extérieur gagne, l'intérieur ne garde que
   sa graisse : c'est le genre qui porte l'information, pas l'insistance. */
.b-masculin span, .b-feminin span, .b-neutre span,
.b-pluriel span, .b-notion span, .b-piege span {
  background: none;
  color: inherit;
  padding: 0;
}

.lecon em, .question em { font-style: italic; color: var(--texte-doux); }

.legende-couleurs {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 1.5rem 0;
  font-size: .78rem;
}
.legende-couleurs span { padding: .2rem .5rem; border-radius: 6px; }

/* --------------------------------------------------------------- boutons */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .6rem 1.1rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-carte);
  color: var(--texte);
  font: inherit;
  font-size: .96rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.bouton:hover:not(:disabled) { background: var(--fond-creux); }
.bouton:disabled { opacity: .5; cursor: default; }
.bouton-fort {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-texte);
  font-weight: 600;
  width: 100%;
  margin-top: .8rem;
}
.bouton-fort:hover:not(:disabled) { filter: brightness(1.08); background: var(--accent); }
.boutons-ligne { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }

button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- navigation */

#barre {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: .1rem;
  padding: .3rem .3rem calc(.3rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--bordure);
  z-index: 20;
}
.onglet {
  flex: 1 1 0;
  max-width: 6rem;
  min-height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  padding: .3rem .1rem;
  border-radius: 10px;
  color: var(--texte-doux);
  text-decoration: none;
  font-size: .68rem;
}
.onglet .icone svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.onglet.actif { color: var(--accent); }
.onglet.actif .etiquette { font-weight: 600; }

.etat-reseau {
  max-width: var(--colonne);
  margin: 0 auto .5rem;
  padding: .5rem 1rem;
  font-size: .85rem;
  text-align: center;
  color: var(--piege);
  background: var(--piege-fond);
}
.etat-reseau[hidden] { display: none; }

/* --------------------------------------------------------------- accueil */

.accueil-tete {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.1rem;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  margin-bottom: 1rem;
}
.serie { text-align: center; min-width: 4.4rem; }
.serie-nombre {
  display: block;
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--accent);
}
.serie-mot { display: block; font-size: .74rem; color: var(--texte-doux); }
.objectif { flex: 1; min-width: 0; }
.objectif-ligne { margin: 0 0 .4rem; font-size: .92rem; }
.objectif-fait { margin: .4rem 0 0; font-size: .82rem; color: var(--juste); }

.grand-bouton {
  display: block;
  padding: 1.1rem 1.2rem;
  margin: 1rem 0;
  background: var(--accent);
  color: var(--accent-texte);
  border-radius: var(--rayon);
  text-decoration: none;
  box-shadow: var(--ombre);
}
.grand-bouton.fini {
  background: var(--fond-carte);
  color: var(--texte);
  border: 1px solid var(--bordure);
}
.grand-bouton-titre { display: block; font-family: var(--serif); font-size: 1.22rem; font-weight: 700; }
.grand-bouton-detail { display: block; font-size: .86rem; opacity: .88; margin-top: .15rem; }
.grand-bouton-zone { margin-top: .2rem; }

.grille-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.tuile, .ligne-theme, .ligne-lecon, .sujet {
  display: block;
  padding: .9rem;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  text-decoration: none;
  color: inherit;
}
.tuile:hover, .ligne-theme:hover, .ligne-lecon:hover, .sujet:hover { border-color: var(--accent); }
.tuile.inactive { opacity: .55; }
.tuile-titre { display: block; font-family: var(--serif); font-size: 1.06rem; font-weight: 700; }
.tuile-detail { display: block; font-size: .82rem; color: var(--texte-doux); margin: .15rem 0 .5rem; }
.tuile-compte { display: block; font-size: .76rem; color: var(--texte-doux); margin-top: .35rem; }
.pied-accueil { margin-top: 1.4rem; font-size: .82rem; color: var(--texte-doux); text-align: center; }

.jauge {
  height: 7px;
  background: var(--fond-creux);
  border-radius: 99px;
  overflow: hidden;
}
.jauge span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

.bienvenue { margin: 1.5rem 0; }
.formulaire { display: flex; flex-direction: column; gap: .6rem; }
.separateur { text-align: center; color: var(--texte-doux); font-size: .84rem; margin: .3rem 0; }

/* --------------------------------------------------------------- listes */

.liste-themes, .liste-lecons { display: flex; flex-direction: column; gap: .6rem; }
.ligne-theme, .ligne-lecon { display: flex; align-items: center; gap: .8rem; }
.ligne-theme-texte, .ligne-lecon-texte { flex: 1; min-width: 0; }
.ligne-lecon.lue .tuile-titre { color: var(--texte-doux); }
.coche { color: var(--juste); font-size: 1.2rem; }

/* --------------------------------------------------------------- séances */

.seance-barre {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: .3rem 0 1.2rem;
}
.seance-barre .jauge { flex: 1; }
.seance-compte { font-size: .8rem; color: var(--texte-doux); font-variant-numeric: tabular-nums; }

.carte {
  padding: 1.6rem 1.2rem;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  text-align: center;
}
.carte-mot { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.mot-principal { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; }
.carte-cat { margin: .5rem 0 0; font-size: .8rem; color: var(--texte-doux); }
.phrase-fr { font-family: var(--serif); font-size: 1.32rem; margin: 0 0 .5rem; }

.pastille {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 99px;
  background: var(--fond-creux);
  color: var(--texte-doux);
  font-size: .72rem;
}
.pastille-neuve { background: var(--notion-fond); color: var(--notion); margin-bottom: .6rem; }

.haut-parleur {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--bordure);
  border-radius: 50%;
  background: var(--fond-carte);
  color: var(--texte-doux);
  cursor: pointer;
}
.haut-parleur svg { width: 19px; height: 19px; fill: currentColor; stroke: currentColor; }
.haut-parleur:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.haut-parleur:disabled { opacity: .35; cursor: default; }
.haut-parleur-fin { width: 32px; height: 32px; border: none; background: none; }
.haut-parleur-fin svg { width: 16px; height: 16px; }

.gros-haut-parleur {
  display: grid; place-items: center;
  width: 108px; height: 108px;
  margin: 0 auto;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-texte);
  cursor: pointer;
}
.gros-haut-parleur svg { width: 46px; height: 46px; fill: currentColor; stroke: currentColor; }

/* Le serveur synthétise un énoncé encore absent du cache en une à trois
   secondes. Sans marqueur, le bouton paraît mort et on le reclique — ce qui
   annule la lecture en cours. */
.gros-haut-parleur.charge, .haut-parleur.charge { animation: pulse 1s ease-in-out infinite; }
.gros-haut-parleur.charge { cursor: progress; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.ecoute-zone { display: flex; flex-direction: column; align-items: center; gap: .8rem; margin: 1.4rem 0; }
.bouton-lent { min-height: 40px; font-size: .86rem; }

.champ {
  width: 100%;
  padding: .75rem .85rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-carte);
  color: var(--texte);
  font: inherit;
  /* 17 px minimum : en dessous, iOS zoome à la mise au point et l'écran saute. */
  font-size: 17px;
}
.champ-reponse, .champ-dictee { margin-top: 1rem; text-align: center; }
.champ-dictee { text-align: left; resize: vertical; line-height: 1.5; }

.clavier-de {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
  margin: .6rem 0 .2rem;
}
.touche-de {
  min-width: 44px;
  min-height: 40px;
  padding: .3rem .5rem;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: var(--fond-carte);
  color: var(--texte);
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.touche-de:hover { border-color: var(--accent); color: var(--accent); }
.touche-de:active { background: var(--fond-creux); }

.carte-verso, .retour { margin-top: 1rem; }
.verso-ligne { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.verso-mot { font-family: var(--serif); font-size: 1.45rem; font-weight: 700; }
.verso-fr { text-align: center; font-size: 1.05rem; margin: .3rem 0; }
.verso-pluriel { text-align: center; font-size: .86rem; color: var(--texte-doux); }
.verso-exemple {
  margin-top: 1rem;
  padding: .8rem;
  background: var(--fond-creux);
  border-radius: var(--rayon);
}
.exemple-de { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 600; }
.exemple-fr { margin: .2rem 0 0; font-size: .88rem; color: var(--texte-doux); }

.verdict { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; margin: 0 0 .3rem; }
.verdict-juste { color: var(--juste); }
.verdict-presque { color: var(--notion); }
.verdict-faux { color: var(--faux); }
.verdict-note { font-size: .88rem; color: var(--texte-doux); margin: 0 0 .5rem; }
.verdict-attendu { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: 1.15rem; }
.verdict-corrige { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.etiquette-corrige {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texte-doux);
  margin-right: .2rem;
}
.attente { color: var(--texte-doux); font-style: italic; }
.dictee-solution { margin-top: .8rem; padding: .8rem; background: var(--fond-creux); border-radius: var(--rayon); }

.comparaison {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .55rem;
  margin-top: .7rem;
  font-size: .95rem;
}
.paire { display: inline-flex; align-items: baseline; gap: .25rem; }
.paire-corrigee {
  padding: 0 .3rem;
  border-radius: 6px;
  background: var(--piege-fond);
}
.mot-juste { color: var(--juste); }
.mot-faux { color: var(--faux); text-decoration: line-through; }
.mot-attendu { color: var(--juste); font-weight: 600; }
.mot-manquant { color: var(--juste); font-weight: 600; border-bottom: 2px dotted var(--juste); }

.notes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1.2rem; }
.note {
  min-height: 58px;
  padding: .5rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-carte);
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: center;
}
.note:hover:not(:disabled) { border-color: var(--accent); }
.note-bloquee { opacity: .3; cursor: default; }
.note-libelle { display: block; font-weight: 600; font-size: .95rem; }
.note-detail { display: block; font-size: .72rem; color: var(--texte-doux); }
.note-encore .note-libelle { color: var(--faux); }
.note-facile .note-libelle { color: var(--juste); }
.note-explication { grid-column: 1 / -1; font-size: .8rem; color: var(--texte-doux); margin: .2rem 0 0; text-align: center; }

.question { font-family: var(--serif); font-size: 1.32rem; margin: 0 0 1.2rem; }
.titre-exercices { margin: .4rem 0 1rem; }
.choix { display: flex; flex-direction: column; gap: .5rem; }
.choix-bouton {
  min-height: 52px;
  padding: .7rem 1rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-carte);
  color: inherit;
  font: inherit;
  font-size: 1.05rem;
  cursor: pointer;
  text-align: left;
}
.choix-bouton:hover:not(:disabled) { border-color: var(--accent); }
.choix-juste { border-color: var(--juste); background: var(--neutre-fond); color: var(--juste); font-weight: 600; }
.choix-faux { border-color: var(--faux); color: var(--faux); text-decoration: line-through; }
.pourquoi { font-size: .92rem; color: var(--texte-doux); margin: 0; }

.bilan { text-align: center; padding: 2.5rem 0; }
.bilan-chiffre { font-family: var(--serif); font-size: 3rem; font-weight: 700; color: var(--accent); margin: .2rem 0; }
.bilan-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.5rem; }

.vide, .alerte, .note-info {
  padding: 1.5rem;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  text-align: center;
}
.alerte { border-color: var(--faux); color: var(--faux); text-align: left; }
.note-info { text-align: left; background: var(--notion-fond); border-color: var(--notion); }
.note-info p { margin: 0; font-size: .88rem; }

/* --------------------------------------------------------------- leçons */

.lecon { font-size: 1.02rem; }
.lecon h3 {
  margin: 1.8rem 0 .5rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--bordure);
}
.lecon h4 { margin: 1.3rem 0 .4rem; color: var(--texte-doux); }
.lecon ul { padding-left: 1.2rem; margin: 0 0 .9em; }
.lecon li { margin-bottom: .35em; }
.lecon blockquote {
  margin: 1rem 0;
  padding: .8rem 1rem;
  background: var(--notion-fond);
  border-left: 3px solid var(--notion);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.lecon blockquote p:last-child { margin: 0; }

/* Un tableau de déclinaisons est plus large qu'un téléphone : il défile dans
   son propre cadre, sinon c'est la page entière qui part de travers. */
.tableau { overflow-x: auto; margin: 1rem 0; -webkit-overflow-scrolling: touch; }
.tableau table { border-collapse: collapse; width: 100%; min-width: 22rem; font-size: .92rem; }
.tableau th, .tableau td {
  padding: .45rem .6rem;
  border: 1px solid var(--bordure);
  text-align: left;
  vertical-align: top;
}
.tableau th { background: var(--fond-creux); font-weight: 600; white-space: nowrap; }
.lecon-suite { display: flex; flex-direction: column; gap: .5rem; margin: 2rem 0 1rem; }

/* --------------------------------------------------------------- conversation */

.grille-sujets { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.sujet { cursor: pointer; font: inherit; text-align: left; }
.sujet-amorce {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
  color: var(--texte-doux);
  font-style: italic;
}

.fil { display: flex; flex-direction: column; gap: .7rem; margin: 1rem 0 1.2rem; }
.fil-note { color: var(--texte-doux); font-size: .88rem; text-align: center; }
.bulle {
  max-width: 88%;
  padding: .7rem .9rem;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
}
.bulle-moi { align-self: flex-end; background: var(--fond-creux); }
.bulle-tuteur { align-self: flex-start; background: var(--fond-carte); }
.bulle-erreur { align-self: stretch; border-color: var(--faux); color: var(--faux); }
.bulle-texte { display: flex; align-items: flex-start; gap: .3rem; margin: 0; }
.bulle-tuteur .bulle-texte span { font-size: 1.06rem; }

.traduction { margin-top: .4rem; }
.traduction summary {
  font-size: .78rem;
  color: var(--texte-doux);
  cursor: pointer;
  list-style: none;
}
.traduction summary::-webkit-details-marker { display: none; }
.traduction summary::before { content: '▸ '; }
.traduction[open] summary::before { content: '▾ '; }
.traduction p { margin: .3rem 0 0; font-size: .9rem; color: var(--texte-doux); }

.correction {
  align-self: flex-end;
  max-width: 88%;
  padding: .6rem .8rem;
  background: var(--piege-fond);
  border: 1px solid var(--piege);
  border-radius: var(--rayon);
  font-size: .88rem;
}
.correction-titre {
  margin: 0 0 .3rem;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--piege);
}
.correction-version { display: flex; align-items: center; gap: .3rem; margin: 0 0 .4rem; font-weight: 600; }
.correction-fautes { margin: 0; padding-left: 1.1rem; }
.correction-fautes li { margin-bottom: .25rem; }
.correction-pourquoi { color: var(--texte-doux); }

.amorces { align-self: flex-start; max-width: 100%; }
.amorces-titre { font-size: .74rem; color: var(--texte-doux); margin: 0 0 .3rem; }
.amorce {
  display: block;
  width: 100%;
  margin-bottom: .35rem;
  padding: .5rem .7rem;
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.amorce:hover { border-color: var(--accent); border-style: solid; }
.amorce-de { display: block; font-size: .95rem; }
.amorce-fr { display: block; font-size: .78rem; color: var(--texte-doux); }

.saisie { display: flex; gap: .5rem; align-items: flex-end; }
.champ-message { flex: 1; resize: none; }
.saisie .bouton-fort { width: auto; margin: 0; flex: 0 0 auto; }

.points { display: inline-flex; gap: .25rem; }
.points i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--texte-doux);
  animation: sautille 1.1s infinite;
}
.points i:nth-child(2) { animation-delay: .15s; }
.points i:nth-child(3) { animation-delay: .3s; }
@keyframes sautille { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* --------------------------------------------------------------- réglages */

.reglage-bloc { margin-bottom: 2rem; }
.reglage { display: block; margin-bottom: 1.1rem; }
.reglage-libelle { display: flex; justify-content: space-between; font-size: .92rem; margin-bottom: .3rem; }
.reglage-valeur { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.reglage input[type="range"] { width: 100%; accent-color: var(--accent); }
.reglage-bascule { display: flex; gap: .7rem; align-items: flex-start; }
.reglage-bascule input { width: 22px; height: 22px; margin-top: .15rem; accent-color: var(--accent); }
.reglage .menu-detail { display: block; margin-top: .2rem; }

.code-profil {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 1.35rem;
  letter-spacing: .06em;
  padding: .7rem;
  background: var(--fond-creux);
  border-radius: var(--rayon);
  text-align: center;
  user-select: all;
}
.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.2rem; }
.chiffre {
  padding: .8rem;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  text-align: center;
}
.chiffre-valeur {
  display: block;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--accent);
}
.chiffre-libelle { display: block; font-size: .74rem; color: var(--texte-doux); }
.detail-progression { display: flex; flex-direction: column; gap: .7rem; }
.detail-libelle { display: block; font-size: .88rem; margin-bottom: .2rem; }
.detail-compte { display: block; font-size: .74rem; color: var(--texte-doux); margin-top: .2rem; }
.danger { margin-top: 1rem; }
.danger summary { cursor: pointer; color: var(--texte-doux); font-size: .88rem; }

/* --------------------------------------------------------------- brume */

.brume {
  position: fixed;
  left: 50%;
  bottom: calc(5.4rem + env(safe-area-inset-bottom));
  transform: translate(-50%, 1rem);
  max-width: min(28rem, calc(100vw - 2rem));
  padding: .6rem 1rem;
  border-radius: var(--rayon);
  background: var(--texte);
  color: var(--fond);
  font-size: .88rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  z-index: 40;
}
.brume.visible { opacity: 1; transform: translate(-50%, 0); }
.brume-juste { background: var(--juste); color: #fff; }
.brume-faux { background: var(--faux); color: #fff; }

/* --------------------------------------------------------------- écran large */

@media (min-width: 48rem) {
  body { padding-bottom: 2rem; padding-left: 8.5rem; }
  #tete { padding-left: 1rem; }

  /* La barre passe sur le côté : sur un écran large, une barre en bas est
     loin de tout et le pouce n'a plus rien à faire là. */
  #barre {
    top: 0; bottom: 0; right: auto;
    width: 8.5rem;
    flex-direction: column;
    justify-content: flex-start;
    gap: .2rem;
    padding: 5rem .6rem 1rem;
    border-top: none;
    border-right: 1px solid var(--bordure);
  }
  .onglet {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    gap: .6rem;
    padding: .6rem .7rem;
    font-size: .9rem;
  }
  .grille-modes, .grille-sujets { grid-template-columns: 1fr 1fr 1fr; }
  .chiffres { grid-template-columns: repeat(4, 1fr); }
  .notes { grid-template-columns: repeat(4, 1fr); }
  .bilan-actions { flex-direction: row; justify-content: center; }
  .bouton-fort { width: auto; }
  .champ-reponse { max-width: 26rem; margin-inline: auto; }
  .mot-principal { font-size: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}