/* Héros du CM2 — styles
   Concept : chaque univers est une "peau" complète (papier, encre, accent, police de titre).
   Ninjas = planche de manga (cases à bord épais, trames, sceau vermillon).
   Détectives = dossier d'enquête la nuit (papier kraft, machine à écrire, tampon rouge).
   Accueil = tableau neutre et calme avant le choix. */
:root {
  --fond: #1e2238;
  --papier: #ffffff;
  --encre: #1b1d29;
  --doux: #5b6078;
  --accent: #ff6b4a;
  --second: #3d7bfd;
  --peau: #f2c9a0;
  --ok: #1f9d55;
  --ko: #d64545;
  --trame: radial-gradient(rgba(0,0,0,.08) 1px, transparent 1.2px) 0 0/7px 7px;
  --f-titre: "Lexend", "Segoe UI", system-ui, sans-serif;
  --f-texte: "Lexend", "Segoe UI", system-ui, sans-serif;
  --bord: 2px solid var(--encre);
  --ombre: 0 6px 18px rgba(0,0,0,.18);
  --rayon: 14px;
  color-scheme: light;
}

/* ---------- Univers : Ninjas & Mangas ---------- */
[data-univers="ninjas"] {
  --fond: #f4f4f1;
  --papier: #ffffff;
  --encre: #141416;
  --doux: #55565c;
  --accent: #e03131;
  --second: #141416;
  --peau: #f5d2b0;
  --trame: radial-gradient(rgba(20,20,22,.13) 1.1px, transparent 1.3px) 0 0/6px 6px;
  --f-titre: "Dela Gothic One", "Arial Black", Impact, sans-serif;
  --bord: 3px solid var(--encre);
  --ombre: 5px 5px 0 var(--encre);
  --rayon: 4px;
}
/* ---------- Univers : Détectives & Enquêtes ---------- */
[data-univers="detectives"] {
  --fond: #22303c;
  --papier: #f6ecd2;
  --encre: #2a2118;
  --doux: #6b5d48;
  --accent: #b3261e;
  --second: #2f6f73;
  --peau: #f0c9a4;
  --trame: repeating-linear-gradient(0deg, rgba(42,33,24,.06) 0 1px, transparent 1px 26px);
  --f-titre: "Special Elite", "Courier New", monospace;
  --bord: 1.5px solid #c9b98f;
  --ombre: 0 10px 24px rgba(0,0,0,.35);
  --rayon: 6px;
}

/* ---------- Univers : Animaux & Vétérinaires (v0.58) ----------
   Carnet de terrain d'un soigneur : papier crème, encre brune, orange savane, vert jungle, coins bien arrondis. */
[data-univers="animaux"] {
  --fond: #f3ead3;
  --papier: #fffdf6;
  --encre: #2b2618;
  --doux: #625a44;
  --accent: #c2570c;
  --second: #2f7d3b;
  --peau: #e9b88c;
  --trame: radial-gradient(rgba(47,125,59,.10) 1.4px, transparent 1.6px) 0 0/11px 11px;
  --f-titre: "Fredoka", "Lexend", "Segoe UI", system-ui, sans-serif;
  --bord: 2px solid #4a3d24;
  --ombre: 0 4px 0 #cdb98c;
  --rayon: 18px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--fond); }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: 17px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
body.lisible { letter-spacing: .04em; word-spacing: .12em; line-height: 1.75; }
body.lisible .titre, body.lisible h1, body.lisible h2 { font-family: var(--f-texte) !important; font-weight: 700; }

#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100%;
  padding-inline: 16px;
  padding-block: 12px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--second); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; line-height: 1.15; }
p { margin: 0; }
.petit { font-size: .86rem; color: var(--doux); }
.centre { text-align: center; }
.nowrap { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Fractions empilées ---------- */
.frac {
  display: inline-flex; flex-direction: column; align-items: center;
  vertical-align: middle; line-height: 1.05; margin: 0 .12em; font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.frac-n { padding: 0 .2em .06em; border-bottom: 2px solid currentColor; }
.frac-d { padding: .06em .2em 0; }
.frac.grand { font-size: 1.7em; }
.frac.grand .frac-n { border-bottom-width: 3px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 12px 22px;
  border: var(--bord); border-radius: var(--rayon);
  background: var(--papier); color: var(--encre);
  font-weight: 700; font-size: 1.05rem;
  box-shadow: var(--ombre);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active { transform: translate(2px, 2px); }
.btn.principal { background: var(--accent); color: #fff; border-color: var(--encre); }
.btn.plein { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-icone {
  width: 46px; height: 46px; display: inline-grid; place-items: center;
  border-radius: 50%; border: var(--bord); background: var(--papier); color: var(--encre); padding: 0;
}
.btn-icone svg, .btn svg { width: 22px; height: 22px; }
.lien { background: none; border: 0; padding: 6px 0; text-decoration: underline; color: inherit; font-weight: 600; }

/* ---------- Cases (panneaux) ---------- */
.case {
  background: var(--papier); border: var(--bord); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 18px; position: relative;
}
[data-univers="ninjas"] .case.trame::before {
  content: ""; position: absolute; inset: 0; background: var(--trame); pointer-events: none; border-radius: inherit;
}
[data-univers="detectives"] .case { background-image: var(--trame); }

/* ---------- En-tête ---------- */
.entete { display: flex; align-items: center; gap: 12px; }
.entete .titre { flex: 1; min-width: 0; font-family: var(--f-titre); font-size: 1.25rem; }
[data-univers="detectives"] .entete .titre { color: var(--papier); }
.compteur {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px; background: var(--papier); border: var(--bord);
  font-variant-numeric: tabular-nums;
}
.compteur svg { width: 18px; height: 18px; color: var(--accent); }

/* ---------- Guide + bulle ---------- */
.scene { display: flex; align-items: flex-end; gap: 10px; }
.guide-svg { width: 84px; height: 84px; flex: none; }
.scene.mini .guide-svg { width: 58px; height: 58px; }
.bulle {
  position: relative; flex: 1; min-width: 0;
  background: #fff; color: #141416; border: var(--bord); border-radius: 18px;
  padding: 12px 14px; font-size: 1.02rem;
}
[data-univers="detectives"] .bulle { background: var(--papier); color: var(--encre); border-color: var(--encre); border-width: 2px; }
.bulle::before {
  content: ""; position: absolute; left: -12px; bottom: 16px; width: 18px; height: 18px;
  background: inherit; border-left: inherit; border-bottom: inherit; transform: rotate(45deg) skew(10deg, 10deg);
}
.bulle .nom { display: block; font-family: var(--f-titre); font-size: .82rem; color: var(--accent); margin-bottom: 2px; letter-spacing: .03em; }

/* ---------- Écran d'accueil ---------- */
.bienvenue h1 { font-size: 2.1rem; color: #fff; }
.bienvenue .sous { color: #c9cde3; }
.grille-univers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.carte-univers {
  text-align: left; padding: 14px; min-height: 120px; border-radius: 14px; border: 2px solid transparent;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
}
.carte-univers .nom-u { font-size: 1.05rem; line-height: 1.15; }
.carte-univers.u-ninjas { background: #fff var(--trame); color: #141416; border: 3px solid #141416; box-shadow: 4px 4px 0 #e03131; }
.carte-univers.u-ninjas .nom-u { font-family: "Dela Gothic One", "Arial Black", sans-serif; }
.carte-univers.u-detectives { background: #f6ecd2; color: #2a2118; border: 2px solid #c9b98f; }
.carte-univers.u-detectives .nom-u { font-family: "Special Elite", "Courier New", monospace; font-size: 1.1rem; }
.carte-univers.u-animaux { background: #fffdf6 radial-gradient(rgba(47,125,59,.10) 1.4px, transparent 1.6px) 0 0/11px 11px; color: #2b2618; border: 2px solid #4a3d24; box-shadow: 0 4px 0 #c2570c; border-radius: 18px; }
.carte-univers.u-animaux .nom-u { font-family: "Fredoka", "Lexend", sans-serif; font-weight: 600; font-size: 1.1rem; }
.carte-univers.verrou { background: rgba(255,255,255,.06); color: #aab0cc; border: 2px dashed rgba(255,255,255,.18); cursor: default; }
.carte-univers.selection { outline: 4px solid #ffd43b; outline-offset: 2px; }
.badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.badge.bientot { background: rgba(255,255,255,.1); color: #c9cde3; }
[data-univers="ninjas"] .badge.bientot { background: #e4e4df; color: #55565c; }
.badge.dispo { background: #e03131; color: #fff; }
.u-detectives .badge.dispo { background: #2f6f73; }
.u-animaux .badge.dispo { background: #2f7d3b; }
.champ-nom label { display: block; color: #fff; font-weight: 600; margin-bottom: 6px; }
.champ-nom input {
  width: 100%; min-height: 52px; font: inherit; font-size: 1.1rem; padding: 10px 14px;
  border-radius: 12px; border: 2px solid #3a4066; background: #fff; color: #1b1d29;
}

/* ---------- Base (dojo / bureau) ---------- */
.rang { display: flex; flex-direction: column; gap: 8px; }
.rang .nom-rang { font-family: var(--f-titre); font-size: 1.15rem; }
.jauge { height: 12px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; border: 2px solid var(--encre); }
.jauge > span { display: block; height: 100%; background: var(--accent); }
.cta-mission { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.cta-mission .btn { min-height: 64px; font-size: 1.2rem; }
.section-titre { font-family: var(--f-titre); font-size: 1.1rem; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
[data-univers="detectives"] .section-titre { color: var(--papier); }
[data-univers="detectives"] .section-titre .petit { color: #b9c4cc; }
.grille-comp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.comp {
  text-align: left; padding: 12px; border: var(--bord); border-radius: var(--rayon); background: var(--papier);
  display: flex; flex-direction: column; gap: 6px; min-height: 104px;
}
[data-univers="ninjas"] .comp { box-shadow: 3px 3px 0 var(--encre); }
.comp .t { font-weight: 700; line-height: 1.2; }
.comp .r { font-size: .8rem; color: var(--doux); line-height: 1.3; flex: 1; }
.pips { display: flex; gap: 5px; align-items: center; }
.pip { width: 18px; height: 8px; border-radius: 4px; background: rgba(0,0,0,.12); }
.pip.on { background: var(--accent); }
.couronne { font-size: .72rem; font-weight: 700; color: var(--second); margin-left: auto; letter-spacing: .04em; text-transform: uppercase; }
[data-univers="detectives"] .couronne { color: var(--second); }
.matieres { display: grid; gap: 10px; }
.matiere-verrou {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px;
  border-radius: var(--rayon); border: 2px dashed rgba(127,127,127,.45); color: var(--doux);
}
[data-univers="detectives"] .matiere-verrou { color: #b9c4cc; }
.defi {
  display: flex; gap: 14px; align-items: center; text-align: left; width: 100%;
  background: var(--encre); color: #fff; border: var(--bord); border-radius: var(--rayon); padding: 16px; box-shadow: var(--ombre);
}
.defi .titre-defi { font-family: var(--f-titre); font-size: 1.15rem; color: #ffd43b; }
.defi svg { width: 44px; height: 44px; flex: none; color: #ffd43b; }
.defi.verrouille { opacity: .82; }
[data-univers="detectives"] .defi { background: #121b23; border-color: #121b23; }
.pied { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
[data-univers="detectives"] .pied .lien { color: var(--papier); }

/* ---------- Exercice ---------- */
.progression { flex: 1; display: flex; gap: 5px; }
.progression span { flex: 1; height: 10px; border-radius: 5px; background: rgba(127,127,127,.25); }
.progression span.fait { background: var(--accent); }
.progression span.rate { background: var(--doux); }
.progression span.courant { background: var(--encre); }
[data-univers="detectives"] .progression span.courant { background: var(--papier); }
.enonce { font-size: 1.12rem; }
.enonce .frac { font-size: 1.15em; }
.revision-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--second); margin-bottom: 4px; }
.zone { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.zone.bloque .touche, .zone.bloque .choix, .zone.bloque .signe { pointer-events: none; }
.visuel { display: flex; justify-content: center; }
.vis-disque { width: 170px; height: 170px; }
.vis-barres { width: 100%; max-width: 360px; height: auto; }
.part { fill: var(--papier); stroke: var(--encre); stroke-width: 2; }
.part.pleine { fill: var(--accent); }
.contour { fill: none; stroke: var(--encre); stroke-width: 3; }
.qcm { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choix, .signe {
  min-height: 84px; border: var(--bord); border-radius: var(--rayon); background: var(--papier);
  display: grid; place-items: center; font-size: 1.1rem;
}
[data-univers="ninjas"] .choix, [data-univers="ninjas"] .signe { box-shadow: 3px 3px 0 var(--encre); }
.choix.choisi, .signe.choisi { background: var(--encre); color: #fff; }
[data-univers="detectives"] .choix.choisi, [data-univers="detectives"] .signe.choisi { background: var(--second); color: #fff; }
.choix.juste, .signe.juste { background: var(--ok) !important; color: #fff !important; }
.duel { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px 0; }
.duel-slot {
  width: 64px; height: 64px; display: grid; place-items: center; font-size: 2rem; font-weight: 800;
  border: 3px dashed var(--accent); border-radius: 50%;
}
.op { font-size: 1.7rem; font-weight: 700; padding: 0 .15em; }
.op.gros { font-size: 2.4rem; }
.signes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.signe { font-size: 2.2rem; font-weight: 800; min-height: 70px; }
.ligne-calcul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; min-height: 96px; font-size: 1.05rem; }
.champ {
  min-width: 52px; height: 52px; padding: 0 10px; border-radius: 10px; font-size: 1.5rem; font-weight: 800;
  border: 3px dashed var(--accent); background: transparent; color: var(--doux); font-variant-numeric: tabular-nums;
}
.frac .champ { min-width: 46px; height: 44px; font-size: 1.25rem; margin-bottom: 3px; }
.champ.large { min-width: 110px; }
.champ.rempli { color: var(--encre); border-style: solid; }
.champ.actif { border-style: solid; background: rgba(224,49,49,.1); box-shadow: 0 0 0 3px var(--accent); }
.champ.juste { border-color: var(--ok); color: var(--ok); border-style: solid; }
.pave { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.touche {
  min-height: 56px; border-radius: 12px; border: var(--bord); background: var(--papier); font-size: 1.45rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.touche.fn { background: rgba(127,127,127,.14); }
.touche:active { transform: translateY(2px); }
.droite-zone { overflow-x: auto; }
.droite { width: 100%; height: auto; display: block; cursor: pointer; touch-action: manipulation; }
.corde { stroke: var(--encre); stroke-width: 4; stroke-linecap: round; }
.fleche { fill: var(--encre); }
.grad { stroke: var(--encre); stroke-width: 2; }
.grad-u { stroke: var(--encre); stroke-width: 3.5; }
.grad-txt { font: 700 16px var(--f-texte); fill: var(--encre); text-anchor: middle; }
.marque { transition: transform .15s ease; }
.pt-ok { fill: var(--ok); stroke: #fff; stroke-width: 2; }
.actions { display: flex; gap: 10px; }
.actions .btn.principal { flex: 1; }

/* ---------- Retour (bravo / erreur) ---------- */
.retour { display: flex; flex-direction: column; gap: 12px; animation: monte .25s ease-out; }
.retour.bien { border-color: var(--ok); }
.retour .titre-retour { font-family: var(--f-titre); font-size: 1.3rem; }
.retour.bien .titre-retour { color: var(--ok); }
.retour.mal .titre-retour { color: var(--ko); }
.retour .explication { line-height: 1.8; }
.toast {
  align-self: center; background: var(--encre); color: #fff; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .92rem;
}
[data-univers="detectives"] .toast { background: var(--second); }
@keyframes monte { from { transform: translateY(12px); opacity: .3; } to { transform: none; opacity: 1; } }

/* ---------- Bilan ---------- */
.score { font-family: var(--f-titre); font-size: 3.2rem; text-align: center; line-height: 1; }
.score small { font-size: 1.2rem; color: var(--doux); }
.tampon {
  align-self: center; transform: rotate(-6deg); border: 4px solid var(--accent); color: var(--accent);
  font-family: var(--f-titre); font-size: 1.3rem; padding: 6px 16px; border-radius: 8px; letter-spacing: .05em; text-transform: uppercase;
}

/* ---------- Espace parents (sobre, quel que soit l'univers) ---------- */
.parents { --papier: #ffffff; --encre: #1b1d29; --doux: #5b6078; --accent: #3d5afe; --second: #3d5afe; color: #1b1d29; }
html.mode-parents, html.mode-parents body { background: #eef0f6; }
.parents .case { border: 1px solid #d9dce8; box-shadow: none; border-radius: 12px; background: #fff; }
.parents .case::before { display: none; }
.parents .entete .titre { color: #1b1d29 !important; font-family: var(--f-texte); font-weight: 700; }
.parents .btn { border: 1px solid #c9cde0; box-shadow: none; border-radius: 10px; }
.parents .btn.principal { background: #3d5afe; border-color: #3d5afe; }
.parents .btn-icone { border: 1px solid #c9cde0; background: #fff; color: #1b1d29; }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.chiffres div { display: flex; flex-direction: column; }
.chiffres b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.tableau { display: flex; flex-direction: column; gap: 12px; }
.ligne-comp { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.ligne-comp .barre { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: #e6e8f0; overflow: hidden; }
.ligne-comp .barre span { display: block; height: 100%; background: #3d5afe; }
.etat { font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.etat.maitrise { background: #dff5e7; color: #13693a; }
.etat.progres { background: #e4e9ff; color: #2a3fb8; }
.etat.fragile { background: #ffe6e1; color: #a3271a; }
.etat.vide { background: #eceef4; color: #5b6078; }
.reglage { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.interrupteur { width: 54px; height: 32px; border-radius: 999px; border: 0; background: #c9cde0; position: relative; flex: none; }
.interrupteur::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .15s; }
.interrupteur[aria-checked="true"] { background: #3d5afe; }
.interrupteur[aria-checked="true"]::after { left: 26px; }
.liste-missions { display: flex; flex-direction: column; gap: 6px; font-variant-numeric: tabular-nums; }
.liste-missions div { display: flex; justify-content: space-between; gap: 8px; font-size: .92rem; border-bottom: 1px solid #eef0f6; padding-bottom: 6px; }
.porte { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; padding-top: 40px; }
.maintenir { position: relative; overflow: hidden; }
.maintenir .remplissage { position: absolute; inset: 0; width: 0; background: rgba(255,255,255,.3); }
.danger { color: #a3271a; }

/* ---------- v0.2 : fiches, cours, Hardcore, question du soir ---------- */
.nouveau-cours { align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.fiche { display: flex; flex-direction: column; gap: 8px; }
.fiche .accroche { font-size: 1.05rem; font-weight: 600; }
.cours { display: flex; flex-direction: column; gap: 14px; }
.cours-tete { padding-right: 56px; }
.cours-tete h2 { font-family: var(--f-titre); font-size: 1.45rem; margin-top: 2px; }
.cours > p, .cours .sert p { line-height: 1.65; }
.lire-cours { position: absolute; top: 14px; right: 14px; }
.grand { text-align: center; font-size: 1.25rem; font-weight: 700; padding: 6px 0; }
.grand .frac { font-size: 1.3em; }
.astuce {
  border: 2px dashed var(--accent); border-radius: var(--rayon); padding: 12px 14px; background: rgba(224,49,49,.06);
  display: flex; flex-direction: column; gap: 4px;
}
[data-univers="detectives"] .astuce { border-color: var(--second); background: rgba(47,111,115,.08); }
.astuce b { font-family: var(--f-titre); color: var(--accent); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
[data-univers="detectives"] .astuce b { color: var(--second); }
.etapes { margin: 0; padding: 0; list-style: none; counter-reset: et; display: flex; flex-direction: column; gap: 10px; }
.etapes li { counter-increment: et; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; line-height: 1.6; }
.etapes li::before {
  content: counter(et); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--encre); color: #fff; font-weight: 800; font-size: .95rem;
}
[data-univers="detectives"] .etapes li::before { background: var(--second); }
.sert { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid rgba(127,127,127,.25); }
.sert b { font-family: var(--f-titre); font-size: 1.02rem; color: var(--accent); }
.metiers { display: flex; flex-wrap: wrap; gap: 8px; }
.metier { font-size: .86rem; padding: 6px 10px; border-radius: 10px; border: var(--bord); background: var(--papier); line-height: 1.3; }
.cours .vis-disque { width: 140px; height: 140px; }
.etapes-erreur { margin: 10px 0 0; padding-left: 0; list-style: none; counter-reset: er; display: flex; flex-direction: column; gap: 8px; font-size: .95rem; }
.etapes-erreur li { counter-increment: er; padding: 8px 10px; border-radius: 10px; background: rgba(127,127,127,.12); line-height: 1.6; }
.etapes-erreur li::before { content: "Étape " counter(er) " · "; font-weight: 800; }
.defi.hardcore { background: #0b0b0d; border-color: #e03131; box-shadow: 0 0 0 2px #e03131 inset, 0 0 18px rgba(224,49,49,.35); }
.defi.hardcore .titre-defi { color: #ff4d4d; letter-spacing: .03em; }
.hc-logo {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: #e03131; color: #0b0b0d; font-weight: 900; font-size: 1.2rem; letter-spacing: -.02em; transform: rotate(-6deg);
}
.soir { border: 2px solid #3d5afe !important; }
.q-soir { font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
.parents details summary { cursor: pointer; font-weight: 600; color: #3d5afe; }

.enonce-long .enonce { font-size: 1.08rem; line-height: 1.7; }
.enonce-long .etapes-erreur { font-size: 1rem; }

/* ---------- v0.2.1 : repère de page, accès aux cours ---------- */
.contexte { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: -6px; }
.contexte-titre { font-family: var(--f-titre); font-size: 1.15rem; }
[data-univers="detectives"] .contexte-titre { color: var(--papier); }
[data-univers="detectives"] .contexte .petit { color: #b9c4cc; }
.actions .btn:not(.principal) { padding-inline: 14px; }
.aide-cours {
  display: flex; gap: 14px; align-items: center; text-align: left; width: 100%; padding: 14px 16px;
  background: var(--papier); color: var(--encre); border: var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre);
}
.aide-cours svg { width: 36px; height: 36px; flex: none; color: var(--accent); }
.aide-cours b { font-size: 1.02rem; }
.liste-cours { display: flex; flex-direction: column; gap: 10px; }
.ligne-cours {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 14px 16px;
  background: var(--papier); color: var(--encre); border: var(--bord); border-radius: var(--rayon);
}
.ligne-cours > span:first-child { min-width: 0; }
.statut-cours { flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }

/* ---------- v0.2.2 : version et mises à jour ---------- */
.version { text-align: center; font-size: .78rem; color: var(--doux); font-variant-numeric: tabular-nums; margin-top: -6px; }
[data-univers="detectives"] .version { color: #b9c4cc; }
.maj {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #fff7d6; color: #1b1d29; border: 2px solid #e0b100; border-radius: 12px; padding: 12px 14px;
}
.maj .petit { color: #5b6078; }
.maj .btn { min-height: 44px; padding: 8px 16px; box-shadow: none; }
.nouveautes { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.nouveautes ul { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: .92rem; }
.nouveau-cours.vu { color: var(--doux); }

/* ---------- v0.2.6 : bouton de lecture actif = croix rouge pour arrêter ---------- */
.btn-icone.parle { background: var(--ko); color: #fff; border-color: var(--ko); animation: parle 1.2s ease-in-out infinite; }
@keyframes parle { 0%, 100% { box-shadow: 0 0 0 0 rgba(214,69,69,.45); } 50% { box-shadow: 0 0 0 7px rgba(214,69,69,0); } }

/* ---------- v0.2.7 : pas de sélection de texte sur les boutons (appui long sur mobile) ---------- */
button, .btn, .choix, .signe, .touche, .champ, .comp, .defi {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.maintenir { touch-action: none; }
.maintenir, .maintenir * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; pointer-events: auto; }
.maintenir span { pointer-events: none; }

/* ---------- v0.3.0 : chrono au bilan ---------- */
.chrono { display: flex; justify-content: center; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; }
.chrono span { color: var(--doux); font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.chrono b { font-family: var(--f-titre); font-size: 1.6rem; }

/* ---------- v0.4 : chapitres ---------- */
.chapitres { display: flex; flex-direction: column; gap: 12px; }
.chapitre {
  text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 16px;
  background: var(--papier); color: var(--encre); border: var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre);
}
.chap-haut { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chap-titre { font-family: var(--f-titre); font-size: 1.2rem; }
.chapitre .r { color: var(--doux); font-size: .9rem; }
.chap-jauge { height: 8px; border-radius: 4px; background: rgba(127,127,127,.2); overflow: hidden; }
.chap-jauge span { display: block; height: 100%; background: var(--accent); }
.chap-bas { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chap-defis { display: inline-flex; gap: 6px; align-items: center; }
.chap-defis svg { width: 20px; height: 20px; color: #e0a800; }
.hc-mini { font-size: .66rem; font-weight: 900; background: #e03131; color: #0b0b0d; padding: 2px 5px; border-radius: 4px; }
.chap-avenir { font-style: italic; }
.comp-verrou { opacity: .55; border-style: dashed !important; box-shadow: none !important; }

/* ---------- v0.4 : le cahier ---------- */
.cahier-zone { overflow-x: auto; display: flex; justify-content: center; padding: 4px 0; }
.cahier { display: inline-flex; flex-direction: column; --case: min(44px, calc((100vw - 84px) / var(--cols))); }
.c-ligne { display: grid; grid-template-columns: repeat(var(--cols), var(--case)); }
.c-case {
  width: var(--case); height: calc(var(--case) * 1.1); border: 0; padding: 0; background: transparent; position: relative;
  font: 700 calc(var(--case) * .62) / 1 var(--f-texte); color: var(--encre); font-variant-numeric: tabular-nums;
  border-left: 1px dashed rgba(127,127,127,.28);
}
.c-case:last-child { border-right: 1px dashed rgba(127,127,127,.28); }
.c-case:first-child { border-left-color: transparent; }
.c-ret .c-case { height: calc(var(--case) * .62); font-size: calc(var(--case) * .38); color: var(--accent); font-weight: 800; }
.c-trait .c-case { border-bottom: 3px solid var(--encre); }
.c-res .c-case { background: rgba(127,127,127,.06); }
.c-fixe { cursor: default; }
.c-sel { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 6px; background: rgba(224,49,49,.08) !important; }
.c-virg { position: absolute; right: -4px; bottom: 2px; font-style: normal; font-size: .9em; line-height: 1; z-index: 1; }
.c-ok { color: var(--ok) !important; }
.c-ko { color: var(--ko) !important; text-decoration: line-through; }
.c-surligne { background: rgba(224,49,49,.15); }
.c-outils { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.c-outil { min-height: 42px; padding: 6px 12px; font-size: .9rem; box-shadow: none; }
.c-aide { margin-top: -6px; }
.cahier.statique { --case: min(36px, calc((100vw - 84px) / var(--cols))); margin: 6px auto; }
.cahier.statique .c-case { cursor: default; }
.cours-cahier, .explication .cahier.statique { display: flex; justify-content: center; }
.explication .cahier.statique { display: inline-flex; }
.c-etapes { margin: 8px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: .95rem; line-height: 1.5; }
.diag { background: rgba(214,69,69,.08); border-left: 4px solid var(--ko); padding: 10px 12px; border-radius: 6px; line-height: 1.6; }
.enonce-long .cahier.statique { margin-top: 10px; }

/* ---------- v0.4.1 : cahier plus lisible (cases visibles, retenues, signes, colonne de droite, gomme) ---------- */
.cahier:not(.statique) .c-case { border-left: 0; border-right: 0 !important; }
.cahier:not(.statique) .c-case:not(.c-fixe):not(.c-etiquette)::before {
  content: ""; position: absolute; inset: 3px; border-radius: 7px; pointer-events: none; z-index: -1;
  border: 1.5px solid rgba(127,127,127,.5); background: rgba(255,255,255,.55);
}
[data-univers="detectives"] .cahier:not(.statique) .c-case:not(.c-fixe):not(.c-etiquette)::before { background: rgba(255,255,255,.4); border-color: rgba(42,33,24,.4); }
.cahier:not(.statique) .c-ret .c-case:not(.c-etiquette)::before { inset: 3px 7px; border: 1.5px dashed var(--accent); background: transparent; }
.c-etiquette { font: 700 8px/1.05 var(--f-texte) !important; white-space: normal; text-align: right; hyphens: manual; color: var(--accent) !important; text-transform: uppercase; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 2px; writing-mode: horizontal-tb; overflow: hidden; }
.cahier:not(.statique) .c-signe::before { background: rgba(127,127,127,.16) !important; border-style: dashed !important; }
.c-signe-vide::after { content: "+"; color: rgba(127,127,127,.38); font-weight: 700; }
.cahier:not(.statique) .c-droite::before { background: rgba(224,49,49,.09) !important; border-color: rgba(224,49,49,.55) !important; }
[data-univers="detectives"] .cahier:not(.statique) .c-droite::before { background: rgba(47,111,115,.12) !important; border-color: rgba(47,111,115,.6) !important; }
.c-sel::before { border: 3px solid var(--accent) !important; background: rgba(224,49,49,.1) !important; }
.c-sel { outline: none !important; background: transparent !important; }
.c-case > * , .c-case { z-index: 0; }
.c-aide.c-alerte { color: var(--ko); font-weight: 700; }
.touche .i-gomme { width: 26px; height: 26px; }
.touche[data-k="eff"] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 1rem; }
.t-gomme { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
/* v0.5.1 : confirmation de « Tout effacer » */
.c-outil.c-confirmer { background: var(--ko) !important; color: #fff !important; border-color: var(--ko) !important; }

/* ---------- v0.5.2 : profils et code secret ---------- */
.lien-clair { color: #c9cde3; }
.erreur-nom { color: #ff8787; font-weight: 600; margin-top: 8px; }
.reglage-clair { color: #fff; }
.reglage-clair .petit { color: #aab0cc; }
.carte-profil { min-height: 128px; }
.carte-profil .nom-u { display: flex; align-items: center; justify-content: space-between; gap: 6px; overflow-wrap: anywhere; }
.cadenas-profil svg { width: 20px; height: 20px; flex: none; }
.carte-nouveau { background: rgba(255,255,255,.06); color: #fff; border: 2px dashed rgba(255,255,255,.35); align-items: flex-start; }
.carte-nouveau .plus { font-size: 2rem; line-height: 1; font-weight: 700; }
.carte-nouveau .petit { color: #aab0cc; }
.ecran-code h1 { font-size: 1.7rem; }
.code-points { display: flex; gap: 18px; justify-content: center; padding: 8px 0; }
.code-points span { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; transition: background .1s; }
.code-points span.plein { background: #ffd43b; border-color: #ffd43b; }
.code-points.secoue { animation: secoue .4s; }
@keyframes secoue { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-10px); } 40%,80% { transform: translateX(10px); } }
.pave-code { width: 100%; max-width: 300px; }
.pave-code .touche { background: #fff; color: #1b1d29; border: 2px solid #3a4066; min-height: 60px; }
.pave-code .touche.fn { background: #d9dcef; }

/* v0.5.3 : soustraction, les petites cases s'allument d'une touche */
.cahier:not(.statique) .c-ret .c-case.c-actif::before { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.cahier:not(.statique) .c-ret .c-case.c-actif { color: var(--accent); }

/* v0.6 : multiplication */
.ligne-calcul .saut { flex-basis: 100%; height: 6px; }
.c-etiq-mul { font-size: calc(var(--case) * .3) !important; white-space: nowrap; }
.c-etiq-s { font-size: .75em; }
.groupe-comp { grid-column: 1 / -1; font-family: var(--f-titre); font-size: .95rem; margin-top: 6px; opacity: .85; }
[data-univers="detectives"] .groupe-comp { color: var(--papier); }
.c-sous .c-signe-vide::after { content: "−"; }
.c-mul .c-signe-vide::after { content: "×"; }

/* v0.7 : la division en potence */
.cahier.c-div { flex-direction: row; align-items: flex-start; }
.c-div .d-gauche { display: flex; flex-direction: column; }
.c-div .d-droite { display: flex; flex-direction: column; border-left: 3px solid var(--encre); margin-left: 2px; }
.c-div .d-quotient { border-top: 3px solid var(--encre); }
.c-div .d-moins { color: var(--encre); font-weight: 700; }
.c-div .d-produit .d-souligne, .cahier.statique.c-div .d-souligne { box-shadow: inset 0 -2px 0 var(--encre); }
/* la grille peut être haute : le pavé reste collé en bas de l'écran pendant qu'on fait défiler */
.d-collant { position: sticky; bottom: 0; z-index: 3; background: var(--papier); padding: 6px 0 4px; box-shadow: 0 -6px 10px -8px rgba(0,0,0,.35); }
.d-collant .c-outils { margin-bottom: 6px; }
.d-zone { max-height: none; }

/* v0.7.3 : le Dojo des tables */
.d-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.d-tuile { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px; background: var(--papier); color: var(--encre); border: var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); }
.d-tuile.large { grid-column: span 2; }
.d-titre { font-family: var(--f-titre); font-size: 1.05rem; }
.d-ligne { display: flex; align-items: center; gap: 8px; }
.d-ligne.centre { justify-content: center; }
.d-grade { width: 18px; height: 18px; border-radius: 50%; background: var(--gc); border: 2px solid var(--encre); flex: none; display: inline-block; vertical-align: middle; }
.d-grade.vide { border-style: dashed; opacity: .5; }
.d-legende { display: flex; flex-direction: column; gap: 6px; }
.d-chrono { font-family: var(--f-titre); font-variant-numeric: tabular-nums; font-size: 1.1rem; margin-left: auto; }
.d-question { text-align: center; padding: 22px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.d-question.secoue { animation: secoue .4s; }
.d-calcul { font-family: var(--f-titre); font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.d-reponse { font-family: var(--f-titre); font-size: 2.4rem; min-width: 110px; padding: 6px 14px; border: 3px solid var(--accent); border-radius: 14px; font-variant-numeric: tabular-nums; }
.d-reponse.vide { color: var(--doux); border-style: dashed; }
.d-reponse.faux { border-color: var(--ko); color: var(--ko); text-decoration: line-through; }
.d-correction { min-height: 1.4em; font-weight: 700; color: var(--ko); font-size: 1.2rem; }
.d-pave { margin-top: 12px; }
.d-pave .d-ok { background: var(--accent); color: #fff; }
.d-rates { background: rgba(214,69,69,.08); border-radius: 10px; padding: 8px 12px; text-align: center; }
.d-barre { height: 10px; border-radius: 5px; background: rgba(127,127,127,.25); margin: 6px 0 12px; overflow: hidden; }
.d-barre span { display: block; height: 100%; background: var(--accent); transition: width .2s; }

/* v0.7.4 : succès secrets */
.succes-banniere {
  position: fixed; left: 50%; top: 12px; z-index: 50; width: min(92vw, 420px); transform: translate(-50%, -140%);
  display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px;
  background: #1b1d29; color: #fff; border: 3px solid #ffd43b; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .35s ease;
}
.succes-banniere.visible { transform: translate(-50%, 0); }
.succes-banniere svg { width: 40px; height: 40px; color: #ffd43b; flex: none; }
.succes-banniere .petit { color: #d6d8e4; }
.trophees-btn svg { color: #e0a800; }
.trophees { display: grid; grid-template-columns: 1fr; gap: 10px; }
.trophee { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--rayon); background: var(--papier); color: var(--encre); border: var(--bord); }
.trophee svg { width: 34px; height: 34px; flex: none; }
.trophee.obtenu svg { color: #e0a800; }
.trophee.secret { opacity: .6; border-style: dashed; }
.trophee.secret svg { color: var(--doux); }
.trophee .date { opacity: .75; }

/* v0.8 : comparer de grands nombres (l'un au-dessus de l'autre) */
.duel.long { flex-direction: column; gap: 8px; }
.duel.long .duel-f .op { font-size: 1.35rem; white-space: nowrap; }
.champ.xl { min-width: 150px; }
.duel.long .duel-f.mots .op { white-space: normal; text-align: center; display: block; font-size: 1.15rem; line-height: 1.3; }

/* ===== v0.9 — Géométrie : la planche, les outils, les figures ===== */
.geo-svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.geo-svg.statique { max-width: 340px; margin: 0 auto; touch-action: manipulation; }
.geo-svg.touchable { cursor: pointer; }
.geo-planche { border: var(--bord); border-radius: var(--rayon); overflow: hidden; background: #fff; }
.g-papier { fill: #fffef8; }
.g-quad { stroke: #9fc3e8; stroke-width: .02; }
.g-trait { stroke: #1b1d29; stroke-width: .045; stroke-linecap: round; fill: none; }
.g-donne { stroke: #1b1d29; }
.g-eleve { stroke: #e8590c; stroke-width: .065; }
.g-bout { stroke: #e8590c; stroke-width: .045; stroke-linecap: round; }
.g-point.g-eleve path { stroke: #e8590c; stroke-width: .06; }
.g-point.g-eleve text { fill: #e8590c; }
.g-encours { stroke: #e8590c; stroke-width: .065; }
.g-pointille { stroke-dasharray: .15 .1; }
.g-axe { stroke: #d64545; stroke-width: .05; stroke-dasharray: .3 .15; }
.g-cercle { fill: none; }
.g-centre { fill: #e8590c; }
.g-pointe { fill: none; stroke: #ff6b4a; stroke-width: .05; }
.g-bras { stroke: #ff6b4a; stroke-width: .04; stroke-dasharray: .12 .08; }
.g-ref { stroke: #3d8bfd; stroke-width: .16; opacity: .35; stroke-linecap: round; }
.g-regle rect { fill: rgba(255, 230, 140, .72); stroke: #8a6d1d; stroke-width: .02; }
.g-regle line { stroke: #4a3b10; stroke-width: .015; }
.g-regle text { font-size: .3px; fill: #4a3b10; text-anchor: middle; font-family: var(--f-texte); }
.g-equerre path { fill: rgba(120, 190, 255, .35); stroke: #2b6cb0; stroke-width: .03; }
.g-equerre path.trou { fill: rgba(255, 255, 255, .6); }
.g-equerre-verif path { fill: rgba(120, 190, 255, .4); stroke: #2b6cb0; stroke-width: .035; }
.g-equerre-verif path.coin { fill: none; stroke-width: .03; }
.g-code { stroke: #d64545; stroke-width: .035; fill: none; }
.g-nom { stroke: none; font-size: .45px; fill: #1b1d29; font-family: var(--f-texte); font-weight: 600; }
.g-point path { stroke: #1b1d29; stroke-width: .045; stroke-linecap: round; }
.g-poly { fill: rgba(61, 123, 253, .08); stroke: #1b1d29; stroke-width: .045; stroke-linejoin: round; }
.g-poly.g-plein { fill: rgba(255, 107, 74, .25); }
.g-solution .g-trait, .g-solution .g-poly, .g-solution .g-point path { stroke: #1f9d55; stroke-dasharray: .2 .12; }
.g-solution .g-nom { fill: #1f9d55; }
.geo-barre { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; position: sticky; top: 0; z-index: 3; background: var(--papier); padding: 4px 0; }
.geo-outil { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; padding: 6px 6px 4px; border: var(--bord); border-radius: var(--rayon); background: var(--papier); color: var(--encre); font: 600 .72rem var(--f-texte); cursor: pointer; }
.geo-outil svg { width: 24px; height: 24px; }
.geo-outil.actif { background: var(--second); color: #fff; border-color: var(--second); }
.geo-lecture { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 2.4em; font-size: .9rem; color: var(--doux); flex-wrap: wrap; }
.geo-ajust { display: flex; gap: 6px; }
.geo-ajust[hidden] { display: none; }
.geo-ajust .btn { padding: 4px 10px; font-size: .85rem; min-height: 0; }
.zone.bloque .geo-svg, .zone.bloque .geo-outil, .zone.bloque .geo-ajust { pointer-events: none; }
.visuel-figure { flex-direction: column; align-items: center; }
.geo-astuce-eq { text-align: center; margin: 4px 0 0; }
.cours-figure { margin: 10px 0; text-align: center; }
.cours-figure .geo-svg { border: 1px solid rgba(0,0,0,.12); border-radius: 8px; background: #fffef8; }

.qcm.mots .choix { min-height: 56px; padding: 6px 10px; text-align: center; }
.qcm.mots .choix, .qcm.mots .choix * { font-size: 1.02rem; line-height: 1.25; }
.case.zone-geo { padding: 10px 8px; }
.visuel-figure .geo-svg { background: #fffef8; border-radius: 8px; }
.g-trait.g-epais { stroke-width: .075; }

/* ===== v0.10 — Grandeurs et mesures : horloge, pavé décimal ===== */
.horloge { display: block; width: 100%; max-width: 240px; margin: 0 auto; height: auto; }
.horloge.petite { max-width: 150px; }
.horloge.interactive { max-width: 300px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.h-cadran { fill: #fffef8; stroke: #1b1d29; stroke-width: 4; }
.h-grad { stroke: #1b1d29; stroke-width: 1.2; }
.h-grad5 { stroke: #1b1d29; stroke-width: 3; }
.h-num { font: 700 17px var(--f-texte); fill: #1b1d29; text-anchor: middle; }
.h-min { font: 600 9.5px var(--f-texte); fill: #3d7bfd; text-anchor: middle; }
.h-heure { stroke: #1b1d29; stroke-width: 8; stroke-linecap: round; }
.h-minute { stroke: #e8590c; stroke-width: 5; stroke-linecap: round; }
.h-seconde { stroke: #d64545; stroke-width: 1.6; stroke-linecap: round; }
.h-axe { fill: #1b1d29; }
.h-solution line { stroke: #1f9d55 !important; opacity: .75; stroke-dasharray: 6 4; }
.visuel-horloges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.h-carte { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 140px; max-width: 170px; text-align: center; }
.zone.bloque .horloge.interactive { pointer-events: none; }
.touche.virgule { font-size: 1.8rem; font-weight: 800; }
.touche.large3 { grid-column: span 3; }
.cours-horloge { margin: 10px 0; }
.g-poly.g-case { fill: rgba(255, 107, 74, .32); stroke: #1b1d29; stroke-width: .03; }
.g-trait.g-sep { stroke: #5b6078; stroke-width: .04; stroke-dasharray: .2 .12; }

/* ===== v0.11 — L'échelle des rangs ===== */
button.rang { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.rang-voir { float: right; color: var(--accent); font-weight: 600; }
.echelle-rangs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.echelle-rangs li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: var(--bord); border-radius: var(--rayon); background: var(--papier); }
.echelle-rangs .n { font-family: var(--f-titre); text-align: center; }
.echelle-rangs .s { display: flex; align-items: center; gap: 4px; font-size: .85rem; color: var(--doux); }
.echelle-rangs .s svg { width: 14px; height: 14px; }
.echelle-rangs .atteint { opacity: .6; }
.echelle-rangs .atteint .s { color: var(--ok); font-weight: 700; }
.echelle-rangs .actuel { background: var(--accent); color: #fff; box-shadow: var(--ombre); }
.echelle-rangs .actuel .s { color: #fff; font-weight: 700; }
.echelle-rangs .avenir .nom { color: var(--doux); }

/* ===== v0.12 — Français : « touche les mots », analyse en couleurs ===== */
.phrase-mots { display: flex; flex-wrap: wrap; gap: 8px 6px; justify-content: center; align-items: center; padding: 6px 0; font-size: 1.25rem; line-height: 1.3; }
.phrase-mots .mot { font: inherit; padding: 6px 10px; border: 2px dashed rgba(0,0,0,.25); border-radius: 10px; background: var(--papier); color: var(--encre); cursor: pointer; }
.phrase-mots .mot.choisi { background: var(--second); color: #fff; border: 2px solid var(--second); }
.phrase-mots .mot.juste { background: var(--ok); color: #fff; border: 2px solid var(--ok); }
.phrase-mots .mot.faux { background: var(--ko); color: #fff; border: 2px solid var(--ko); text-decoration: line-through; }
.phrase-mots .ponct { font-weight: 700; margin-left: -4px; }
.zone.bloque .phrase-mots .mot { pointer-events: none; }
.enonce u, .explication u { text-decoration-thickness: 3px; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.analyse { display: flex; flex-wrap: wrap; gap: 10px 6px; justify-content: center; margin: 12px 0; }
.analyse .grp { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.analyse .grp .txt { padding: 4px 8px; border-radius: 8px; font-size: 1.05rem; border-bottom: 4px solid currentColor; background: rgba(127,127,127,.08); }
.analyse .grp .lab { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.analyse .S { color: #2456c9; } .analyse .V { color: #d64545; } .analyse .C { color: #1f9d55; } .analyse .CC { color: #8a5a00; } .analyse .A { color: #8e44ad; } .analyse .N { color: var(--encre); }

/* ===== v0.13 — Clavier AZERTY de l'appli, conjugueur ===== */
.ligne-texte { flex-wrap: wrap; gap: 6px; font-size: 1.15rem; }
.champ-texte { min-width: 140px; padding: 6px 12px; font-size: 1.15rem; text-align: left; letter-spacing: .02em; }
.champ-texte.juste { background: var(--ok); color: #fff; border-color: var(--ok); }
.champ-texte.faux { background: #fff3f3; color: var(--ko); border-color: var(--ko); }
.champ-texte.faux s { color: #a33; }
.clavier { display: flex; flex-direction: column; gap: 6px; user-select: none; -webkit-user-select: none; }
.tc-rang { display: flex; gap: 4px; justify-content: center; }
.tc { flex: 1 1 0; min-width: 0; max-width: 44px; height: 46px; padding: 0; border: 2px solid var(--encre); border-radius: 8px; background: var(--papier); color: var(--encre); font: 600 1.15rem var(--f-texte); cursor: pointer; touch-action: manipulation; }
.tc:active { transform: translateY(2px); }
.tc.fn { max-width: 64px; flex-grow: 1.5; background: rgba(127,127,127,.14); }
.tc.espace { max-width: none; flex-grow: 6; font-size: .9rem; }
.accents .tc { background: #fff7e6; height: 42px; font-size: 1.1rem; }
.zone.bloque .tc { pointer-events: none; opacity: .6; }
.conj-table { border-collapse: collapse; margin: 8px auto; font-size: 1.05rem; min-width: 220px; }
.conj-table caption { font-weight: 700; padding-bottom: 6px; }
.conj-table td { padding: 3px 8px; border-bottom: 1px solid rgba(0,0,0,.08); }
.conj-table td:first-child { color: var(--doux); text-align: right; }
.conj-table .term { color: var(--accent); font-weight: 700; }
.conj-tables { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; }
.conj-choix { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0; }
.conj-choix button { padding: 6px 10px; border: 2px solid var(--encre); border-radius: 999px; background: var(--papier); color: var(--encre); font: 600 .85rem var(--f-texte); cursor: pointer; }
.conj-choix button.actif { background: var(--encre); color: #fff; }
.capture-clavier { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* ===== v0.14 — Dictée ===== */
.dictee-audio { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.d-boutons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.d-boutons .btn { padding: 8px 12px; font-size: .9rem; min-height: 0; }
.d-adulte { font-size: .8rem; }
.d-texte { background: #fff7e6; border: 2px dashed #8a6d1d; border-radius: 10px; padding: 8px 12px; font-size: 1.05rem; }
.ligne-texte.bloc { display: block; }
.champ-texte.champ-bloc { display: block; width: 100%; min-height: 4.5em; text-align: left; white-space: pre-wrap; line-height: 1.5; font-size: 1.1rem; }
.tc-rang.ponct .tc { background: #eef4ff; }
.tc.maj { max-width: 76px; flex-grow: 2; font-size: .85rem; }
.tc.maj.actif { background: var(--second); color: #fff; }
.correction-dictee { line-height: 1.9; font-size: 1.05rem; }
.correction-dictee del { color: var(--ko); text-decoration: line-through; }
.correction-dictee ins { color: var(--ok); text-decoration: none; font-weight: 700; border-bottom: 2px solid var(--ok); }
.correction-dictee .petite { color: #b26b00; font-weight: 700; }
.note-dictee { font-family: var(--f-titre); font-size: 2rem; text-align: center; }
.fautes-cat { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.fautes-cat span { padding: 3px 10px; border-radius: 999px; background: rgba(127,127,127,.12); font-size: .85rem; }
.champ-texte.champ-bloc { height: auto !important; min-height: 4.5em; overflow-wrap: anywhere; display: block; }
.ligne-texte .op { font-size: 1.15rem; font-weight: 500; padding: 0 2px; }
.ligne-texte { align-items: center; row-gap: 8px; }
.ligne-texte .champ-texte:not(.champ-bloc) { min-width: 96px; height: auto; min-height: 44px; }
.champ-texte.champ-bloc { font-weight: 600; color: var(--encre); }
.d-allure { margin: 2px 0; }
.d-allure button { padding: 4px 10px; font-size: .78rem; }

/* ===== v0.14.3 — Curseur dans les cases de texte ===== */
.champ-texte .caret { display: inline-block; width: 2px; height: 1.15em; margin: 0 -1px; background: var(--accent); vertical-align: text-bottom; animation: clignote 1s steps(1) infinite; }
.champ-texte .ch { white-space: pre; }
.champ-texte .vide { color: var(--doux); }
@keyframes clignote { 50% { opacity: 0; } }
.tc.fleche { max-width: 52px; flex-grow: 1; }
.champ-texte .mot-c { white-space: nowrap; }
.champ-texte .ch { white-space: pre-wrap; }
.d-boutons .btn.stop { background: var(--encre); color: #fff; }
/* l’attribut hidden doit toujours gagner, même sur un élément qui a son propre display */
[hidden] { display: none !important; }
/* v0.15 — Vocabulaire : ranger des mots, l'article du dictionnaire, le dictionnaire du héros */
.ordre-ligne { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ordre-case { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px; border: 2px dashed #b8bccb; border-radius: 12px; background: var(--papier); cursor: pointer; }
.ordre-case.rempli { border-style: solid; border-color: var(--encre); }
.ordre-case.juste { border-color: var(--ok); background: #e6f6ec; }
.ordre-case.faux { border-color: #d64545; background: #fdeaea; }
.ordre-case s { color: #d64545; }
.ordre-n { width: 26px; height: 26px; border-radius: 50%; background: var(--encre); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex: none; }
.ordre-mot { font-size: 1.1rem; font-weight: 600; }
.ordre-reserve { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.ordre-choix.pris { opacity: .25; }
.v-mot { color: #2456c9; }
.article-dico { text-align: left; background: #fffdf5; border: 2px solid #e2d8b8; border-left: 6px solid #c99a2e; border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: .98rem; line-height: 1.45; color: #2a2617; }
.article-dico p { margin: 4px 0; }
.article-dico .a-mot { font-size: 1.2rem; }
.article-dico .a-nat { color: #8a5a00; }
.article-dico .a-ex { font-style: italic; color: #5b6078; }
.article-dico .a-plus { font-size: .85rem; color: #5b6078; }
.analyse.colle { gap: 10px 0; }
.analyse.colle .grp .txt { border-radius: 0; padding: 4px 3px; }
.dico-lettres { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 8px 0 12px; }
.dico-lettres button { min-width: 34px; min-height: 34px; border-radius: 8px; border: 2px solid var(--encre); background: var(--papier); font-weight: 800; color: var(--encre); }
.dico-lettre-titre { font-weight: 800; font-size: 1.3rem; margin: 14px 4px 4px; color: #c99a2e; }
.dico-ouvert { position: relative; }
.dico-ouvert .dico-voix { position: absolute; top: 8px; right: 8px; }
.mot-decoupe { text-align: center; margin: 12px 0; }
.md-mot { font-size: 1.8rem; font-weight: 800; letter-spacing: .02em; margin: 0; }
.md-mot .md { padding: 0 1px; border-bottom: 4px solid currentColor; }
.md-leg { margin: 6px 0 0; font-size: .9rem; }
.mot-decoupe .S { color: #2456c9; } .mot-decoupe .C { color: #1f9d55; } .mot-decoupe .A { color: #8e44ad; } .mot-decoupe .N { color: var(--encre); }
/* v0.16 — Lecture et écriture */
.passage { text-align: left; line-height: 1.6; font-size: 1.02rem; }
.passage p { margin: 0 0 .6em; }
.case .passage { background: rgba(127,127,127,.06); border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.fiche-texte .passage { background: none; padding: 0; font-size: 1.08rem; line-height: 1.7; }
.illus { width: 100%; height: auto; display: block; border-radius: 10px; }
.fiche-illus { margin: -4px -4px 10px; }
.fiche-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fiche-titre { font-size: 1.3rem; margin: 6px 0; }
.fiche-mini { width: 74px; flex: none; }
.fiche-mini .illus { border-radius: 6px; }
.fiche-ligne { display: flex; align-items: center; gap: 10px; }
.fiche-etape { margin: 6px 0; }
.fiche-q { font-weight: 600; }
.relire { margin: 10px 0; }
.relire summary { cursor: pointer; font-weight: 700; padding: 8px 0; }
.trou { display: inline-block; min-width: 50px; border-bottom: 3px solid currentColor; }
.ordre-choix { white-space: normal; text-align: left; }
.mm-grille { display: grid; gap: 3px; max-width: 360px; margin: 0 auto; }
.mm-case { aspect-ratio: 1; border: 2px solid #c9c9d6; border-radius: 6px; background: var(--papier); font-weight: 800; font-size: 1.05rem; color: var(--encre); padding: 0; }
.mm-case.choisie { background: #ffe08a; border-color: #c99a2e; }
.mm-case.trouvee { background: #cfe9da; border-color: #7cc49a; color: #1d5a35; }
.mm-case.reste { background: #ff6f61; border-color: #c0392b; color: #fff; }
.mm-liste { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; margin: 12px 0 4px; }
.mm-mot { font-weight: 700; font-size: .9rem; letter-spacing: .03em; }
.mm-mot.barre { text-decoration: line-through; opacity: .45; }
.mm-rate .mm-grille, .secoue { animation: secoue .35s; }
@keyframes secoue { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.flu-texte { font-size: 1.15rem; line-height: 1.9; text-align: left; }
.flu-mot { border-radius: 4px; padding: 1px 1px; cursor: pointer; }
.flu-mot.faux { background: #ffb3ab; text-decoration: line-through; }
.flu-mot.lu { background: #d8efe0; }
.choix-dernier .flu-mot { outline: 1px dashed #c99a2e; }
.flu-temps { font-variant-numeric: tabular-nums; }
.flu-histo { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 140px; margin: 14px 0 4px; padding-top: 18px; }
.flu-barre { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.flu-barre span { width: 100%; background: #9bb4d6; border-radius: 6px 6px 0 0; }
.flu-barre span.presque { background: #f0b45b; } .flu-barre span.ok { background: #1f9d55; }
.flu-barre b { font-size: .75rem; }
.flu-repere { position: absolute; left: 0; right: 0; border-top: 2px dashed #c0392b; }
.flu-repere span { position: absolute; right: 0; top: -16px; font-size: .7rem; color: #c0392b; font-weight: 700; }
.prepa { display: block; margin: 10px 0; }
.prepa span { display: block; font-weight: 700; margin-bottom: 4px; }
.prepa-champ, .ecrit-champ { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.05rem; line-height: 1.6; padding: 10px; border: 2px solid var(--encre); border-radius: 10px; background: #fffdf8; color: #222; }
.ecrit-compte { margin: 6px 0 0; }
.aides-ecrit { padding-left: 18px; margin: 8px 0 0; }
.aides-ecrit li { margin: 6px 0; }
.grille-ligne { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.grille-ligne input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.ecrit-final { white-space: normal; line-height: 1.7; }
.illus.photo { max-height: 340px; object-fit: contain; background: #f3efe6; }
.fiche-mini img.illus { height: 52px; object-fit: cover; }
.source { margin: 10px 0 0; font-style: italic; opacity: .85; }
.fiche-mini img.illus { object-position: 50% 80%; }
/* v0.17 — Les décors : fonds d'accueil, personnages qui passent, portail des univers */
#decor { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
#app { position: relative; z-index: 1; }
.decor-fond { position: absolute; inset: 0; background-size: cover; background-position: center top; opacity: .22;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 95%); mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 95%); }
.decor-detectives .decor-fond { opacity: .2; filter: sepia(.4); }
.lutin { position: absolute; display: block; }
.ninja-court { width: 104px; bottom: 6px; left: -150px; opacity: .3; animation: lutin-court 26s linear infinite, lutin-saut .45s ease-in-out infinite alternate; }
@keyframes lutin-court { 0% { transform: translateX(0); } 30% { transform: translateX(calc(100vw + 300px)); } 100% { transform: translateX(calc(100vw + 300px)); } }
@keyframes lutin-saut { from { translate: 0 0; } to { translate: 0 -7px; } }
.shuriken { width: 34px; top: 86px; right: 8px; opacity: .16; animation: lutin-tourne 10s linear infinite; }
@keyframes lutin-tourne { to { transform: rotate(360deg); } }
.petale { width: 14px; top: -24px; opacity: .55; animation: lutin-tombe 16s linear infinite; }
.petale.p0 { left: 6%; animation-delay: 0s; } .petale.p1 { left: 22%; animation-delay: 5s; } .petale.p2 { left: 78%; animation-delay: 2.5s; } .petale.p3 { left: 92%; animation-delay: 9s; } .petale.p4 { left: 50%; animation-delay: 12s; }
@keyframes lutin-tombe { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(30px, 52vh) rotate(160deg); } 100% { transform: translate(-10px, 105vh) rotate(330deg); } }
.loupe { width: 88px; right: -6px; top: 26%; opacity: .26; animation: lutin-fouille 24s ease-in-out infinite alternate; }
@keyframes lutin-fouille { 0% { transform: translate(0, 0) rotate(0); } 35% { transform: translate(-46px, 18vh) rotate(-12deg); } 70% { transform: translate(6px, 34vh) rotate(8deg); } 100% { transform: translate(-30px, 50vh) rotate(-4deg); } }
.monocle { width: 66px; left: 2px; top: 58%; opacity: .24; transform-origin: 34% 34%; animation: lutin-balance 5s ease-in-out infinite alternate; }
@keyframes lutin-balance { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
.pas { bottom: 10px; left: 14px; width: 220px; height: 44px; }
.empreinte { position: absolute; width: 15px; opacity: 0; transform: rotate(90deg); animation: lutin-pas 14s infinite; }
.empreinte.e0 { animation-delay: 0s; } .empreinte.e1 { animation-delay: .7s; } .empreinte.e2 { animation-delay: 1.4s; } .empreinte.e3 { animation-delay: 2.1s; } .empreinte.e4 { animation-delay: 2.8s; } .empreinte.e5 { animation-delay: 3.5s; }
@keyframes lutin-pas { 0% { opacity: 0; } 4% { opacity: .35; } 40% { opacity: .35; } 55% { opacity: 0; } 100% { opacity: 0; } }
/* v0.58 : Animaux — le renard trotte, les papillons volettent */
.renard-court { width: 112px; bottom: 4px; left: -150px; opacity: .32; animation: lutin-court 30s linear infinite, lutin-saut .32s ease-in-out infinite alternate; animation-delay: 4s, 0s; }
.papillon { width: 22px; opacity: .5; animation: lutin-vole 18s ease-in-out infinite; }
.papillon.v0 { left: 8%; top: 30%; } .papillon.v1 { left: 80%; top: 18%; animation-delay: 4s; } .papillon.v2 { left: 60%; top: 62%; animation-delay: 9s; } .papillon.v3 { left: 20%; top: 75%; animation-delay: 13s; }
@keyframes lutin-vole { 0% { transform: translate(0, 0) scaleX(1); } 25% { transform: translate(40px, -30px) scaleX(.6); } 50% { transform: translate(10px, -60px) scaleX(1); } 75% { transform: translate(-30px, -20px) scaleX(.6); } 100% { transform: translate(0, 0) scaleX(1); } }
.decor-animaux .decor-fond { opacity: .24; }
.decor-matiere.decor-animaux .decor-fond { opacity: .3; }
.decor-matiere.decor-animaux.decor-t-rangs .decor-fond { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .ninja-court, .renard-court, .petale, .papillon, .pas { display: none; } }
.portail { width: min(230px, 62vw); margin: -6px auto -10px; }
.portail > svg { width: 100%; height: auto; display: block; overflow: visible; }
.p-anneau { transform-box: view-box; transform-origin: 50% 50%; animation: lutin-tourne 70s linear infinite; }
.p-tourbillon { transform-box: view-box; transform-origin: 50% 50%; animation: lutin-tourne 12s linear infinite reverse; }
.p-coeur { transform-box: view-box; transform-origin: 50% 50%; animation: portail-souffle 4s ease-in-out infinite alternate; }
@keyframes portail-souffle { from { transform: scale(.9); opacity: .8; } to { transform: scale(1.05); opacity: 1; } }
.glyphe-u { width: 22px; height: 22px; vertical-align: -4px; margin-right: 7px; flex: none; }
.carte-univers.verrou .glyphe-u { opacity: .5; }

/* v0.18 : petit lexique sous les textes d'auteurs */
.lexique-fiche { margin: 12px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--fond-doux, rgba(127,127,127,.08)); }
.lexique-fiche summary { cursor: pointer; font-weight: 700; }
.lexique-fiche dl { margin: 8px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; }
.lexique-fiche dt { font-weight: 700; }
.lexique-fiche dd { margin: 0; }
@media (max-width: 420px) { .lexique-fiche dl { grid-template-columns: 1fr; } .lexique-fiche dd { margin: 0 0 6px; } }

/* v0.19 : histoire — frise chronologique et documents */
.visuel-frise { overflow: hidden; }
.visuel-frise svg.frise { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; }
.visuel-doc { margin: 8px 0; text-align: center; display: block; }
.visuel-doc img { max-width: 100%; max-height: 320px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.visuel-doc .doc-texte { margin: 6px 0; padding: 10px 14px; border-left: 4px solid var(--accent, #c0392b); background: rgba(127,127,127,.08); border-radius: 8px; font-style: italic; text-align: left; }
.visuel-doc figcaption { margin-top: 6px; opacity: .8; font-style: italic; }

/* v0.20 : géographie — les cartes */
.visuel-carte { width: 100%; }
.visuel-carte svg.carte { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; border-radius: 12px; border: 2px solid var(--encre, #222); }
.carte.a-toucher .cible { cursor: pointer; transition: fill .15s; }
.carte.a-toucher path.cible:hover { filter: brightness(.93); }
.carte .cible.choisi { fill: #2b6cb0 !important; fill-opacity: .9 !important; }
.carte .cible.trait.choisi { fill: none !important; stroke: #2b6cb0; stroke-opacity: .55; }
.carte circle.cible.choisi { fill: #2b6cb0 !important; fill-opacity: .55 !important; }
.carte .cible.juste { fill: #2e9e5b !important; fill-opacity: .9 !important; }
.carte .cible.trait.juste { fill: none !important; stroke: #2e9e5b; stroke-opacity: .7; }
.carte circle.cible.juste { fill: #2e9e5b !important; fill-opacity: .6 !important; }
.zone.bloque .carte .cible { pointer-events: none; }
.carte-aide { margin-top: 6px; }

/* v0.21 : Trésors du patrimoine — le carnet de voyage */
.tresors-btn { width: 100%; }
.tr-progres .barre { height: 10px; border-radius: 6px; background: rgba(127,127,127,.2); margin: 8px 0; overflow: hidden; }
.tr-progres .barre span { display: block; height: 100%; background: #f2c14e; }
.tr-carte svg.carte { max-width: 560px; }
.tr-pin { cursor: pointer; }
.tr-pin:hover circle:last-child { stroke: #000; }
/* v0.42 : la bulle d'un trésor sur la carte (premier toucher = aperçu, second = ouverture) */
.tr-carte { position: relative; }
.tr-pin.choisi .tr-point { stroke: #1b1d29; stroke-width: 2.4; r: 7.5; }
.tr-pin:focus { outline: none; }
.tr-pin:focus-visible .tr-point { stroke: #1b1d29; stroke-width: 2.4; }
.tr-bulle { position: absolute; z-index: 5; max-width: 230px; font-size: 15px; line-height: 1.3; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 12px; background: #fffef8; color: #1b1d29; border: 2px solid #1b1d29; border-radius: 10px; box-shadow: 3px 3px 0 rgba(0,0,0,.25); font: inherit; cursor: pointer; }
.tr-bulle::after { content: ''; position: absolute; left: calc(var(--fleche, 50%) - 7px); bottom: -8px; border: 7px solid transparent; border-bottom: 0; border-top-color: #1b1d29; }
.tr-bulle.dessous::after { bottom: auto; top: -8px; border-top: 0; border-bottom: 7px solid #1b1d29; border-left-color: transparent; border-right-color: transparent; }
.tr-bulle b { font-size: 16px; }
.tr-bulle .tr-voir { margin-top: 4px; font-weight: 700; color: var(--accent, #c92a2a); }
.tr-famille { border-left: 6px solid var(--fam); padding-left: 8px; }
.tr-sous { margin: -4px 0 6px 14px; opacity: .8; }
.tr-vignette { width: 64px; height: 48px; flex: none; border-radius: 8px; overflow: hidden; display: inline-flex; margin-right: 10px; }
.tr-vignette img { width: 100%; height: 100%; object-fit: cover; }
.tr-sans { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.4rem; }
.tr-ligne { display: flex; align-items: center; text-align: left; }
.tr-fiche { border-top: 6px solid var(--fam); }
.tr-image { margin: -4px -4px 8px; background: rgba(127,127,127,.10); border-radius: 10px; }
.tr-photo { display: block; width: auto; height: auto; max-width: 100%; max-height: 360px; margin: 0 auto; border-radius: 10px; } /* v0.46.1 : l'image entière, jamais recadrée */
.tr-famille-nom { color: var(--fam); font-weight: 800; text-transform: uppercase; font-size: .8rem; letter-spacing: .04em; margin: 6px 0 0; }
.tr-lieu { line-height: 1.5; }
.tr-unesco { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 10px; background: #1f5fa8; color: #fff; font-weight: 700; }
.tr-savais { border-color: var(--fam); }
.tr-deja { text-align: center; }
.tr-deja svg.tr-cachet { width: 120px; height: 120px; }
.tr-tampons { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tr-tampon { background: none; border: none; padding: 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; color: inherit; }
.tr-tampon svg.tr-cachet { width: 84px; height: 84px; }
.tr-badge { border: 3px solid var(--fam); text-align: center; }
.tr-tampons .tr-tampon, [data-univers] .tr-tampons .tr-tampon { border: none !important; box-shadow: none !important; background: none !important; min-height: 0; }

/* v0.22 : l'accueil par matières */
.matiere .chap-titre { display: inline-flex; align-items: center; gap: 10px; }
.mat-icone svg { width: 28px; height: 28px; color: var(--accent); display: block; }
.matieres-bientot { opacity: .75; margin: 4px 0 14px; }
[data-univers="detectives"] .matieres-bientot { color: #b9c4cc; opacity: 1; }

/* v0.23 : espace parents en accordéons */
.parents .acc { padding: 0; }
.parents .acc > summary { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 14px 40px 14px 16px; position: relative; color: #1b1d29; font-weight: 400; }
.parents .acc > summary::-webkit-details-marker { display: none; }
.parents .acc > summary::after { content: ''; position: absolute; right: 16px; top: 22px; width: 9px; height: 9px; border-right: 2.5px solid #3d5afe; border-bottom: 2.5px solid #3d5afe; transform: rotate(45deg); transition: transform .2s; }
.parents .acc[open] > summary::after { transform: rotate(-135deg); top: 26px; }
.parents .acc-titre { display: flex; flex-direction: column; gap: 2px; }
.parents .acc-titre b { font-size: 1.05rem; }
.parents .acc-badges { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.parents .acc-jauge { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #e6e8f0; overflow: hidden; }
.parents .acc-jauge span { display: block; height: 100%; background: #3d5afe; }
.parents .acc-corps { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.parents .etat.nouveau { background: #fff3cd; color: #7a5a00; }
.parents .acc-matiere { display: flex; flex-direction: column; gap: 8px; }
.parents .acc-matiere h3 { margin: 6px 2px 0; }
.parents .acc-matiere h3 .petit { font-weight: 400; }
.parents .acc-defis { margin-top: 2px; }
@media (max-width: 420px) { .parents .acc > summary { grid-template-columns: 1fr; } .parents .acc-badges { flex-direction: row; flex-wrap: wrap; align-items: flex-start; } }
.parents details.acc-matiere { background: #f4f6fc; border: 1px solid #d9dce8; border-radius: 14px; }
.parents details.acc-matiere > summary .acc-titre b { display: inline-flex; align-items: center; gap: 8px; font-size: 1.12rem; }
.parents details.acc-matiere .mat-icone svg { width: 22px; height: 22px; color: #3d5afe; }
.parents details.acc-matiere > .acc-corps { padding: 0 10px 12px; }
.parents .acc-intro { margin: 4px 2px -4px; }

/* v0.24 : les cours par matière, chapitres repliables */
.cours-chap { background: var(--papier); color: var(--encre); border: var(--bord); border-radius: var(--rayon); margin-bottom: 12px; }
[data-univers="ninjas"] .cours-chap { box-shadow: 4px 4px 0 var(--encre); }
.cours-chap > summary { list-style: none; cursor: pointer; padding: 14px 44px 14px 16px; position: relative; }
.cours-chap > summary::-webkit-details-marker { display: none; }
.cours-chap > summary b { font-family: var(--f-titre); font-size: 1.1rem; }
.cours-chap > summary::after { content: ''; position: absolute; right: 18px; top: 50%; margin-top: -7px; width: 10px; height: 10px; border-right: 3px solid var(--accent); border-bottom: 3px solid var(--accent); transform: rotate(45deg); transition: transform .2s; }
.cours-chap[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.cours-chap > .liste-cours { padding: 0 12px 14px; }
.credits-app { margin-top: 2px; line-height: 1.5; padding: 0 12px; }
.credits-app a { color: inherit; font-weight: 700; text-decoration: underline; }

/* v0.25 : l'espace et le repérage (solides, patrons, programmes, quadrillage) */
.g-pointille { stroke: #5b6078; stroke-dasharray: .16 .12; stroke-width: .035; }
.visuel-svg { margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.visuel-svg > .esp-svg { width: 100%; max-width: 300px; height: auto; background: #fffef8; border-radius: 8px; }
.visuel-svg > .esp-solide { max-width: 220px; padding: 6px; }
.visuel-svg > .esp-grille { max-width: 320px; }
.visuel-svg figcaption { margin-top: 4px; }
.esp-svg .e-face { fill: rgba(61, 123, 253, .12); stroke: none; }
.esp-svg .e-face.e-arete { stroke: #1b1d29; }
.esp-svg .e-arete { stroke: #1b1d29; stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.esp-svg .e-cache { stroke: #5b6078; stroke-width: 1.4; stroke-dasharray: 5 4; fill: none; }
.esp-svg .e-reflet { fill: rgba(255, 255, 255, .7); }
.esp-patron .e-carre { fill: #eef3ff; stroke: #1b1d29; stroke-width: .05; }
.esp-patron path.e-carre, .esp-patron circle.e-carre, .esp-patron polygon.e-carre { stroke-width: 1.6; }
.esp-patron rect.e-carre { stroke-width: .05; }
.esp-patron .e-marque { fill: #ff9f68; }
.esp-patron .e-lettre { font-size: .55px; font-weight: 700; text-anchor: middle; fill: #1b1d29; font-family: var(--f-texte); }
.esp-grille .e-case { fill: #fffef8; stroke: #b9bccb; stroke-width: .03; }
.esp-grille .e-repere { font-size: .42px; font-weight: 700; text-anchor: middle; fill: #5b6078; font-family: var(--f-texte); }
.esp-grille .e-etoile { fill: #f2c14e; stroke: #b07d12; stroke-width: .03; }
.esp-grille .e-nez { fill: #e0412f; }
.esp-grille .e-heros { stroke: #fff; stroke-width: .04; }
.esp-grille .e-chemin { stroke: #2e9e5b; stroke-width: .08; stroke-linecap: round; }
.esp-grille.a-toucher .cible { cursor: pointer; }
.esp-grille .cible.choisi { fill: #9cc0ff; }
.esp-grille .cible.juste { fill: #8fd6a9; }
.esp-grille circle, .esp-grille rect:not(.e-case), .esp-grille polygon, .esp-grille text { pointer-events: none; }
.zone.bloque .esp-grille .cible, .zone.bloque .panneau.cible { pointer-events: none; }
.visuel-svg.panneaux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 380px; }
.panneau { margin: 0; min-width: 0; background: #fffef8; border: 2px solid rgba(0, 0, 0, .12); border-radius: 10px; padding: 4px; display: flex; flex-direction: column; align-items: center; }
.panneau .esp-svg, .panneau .geo-svg { width: 100%; height: auto; }
.panneau figcaption { font-weight: 700; font-size: .9rem; margin-top: 2px; }
.panneau.cible { cursor: pointer; }
.panneau.choisi { border-color: #2b6cb0; box-shadow: 0 0 0 3px rgba(43, 108, 176, .25); }
.panneau.juste { border-color: #2e9e5b; background: #eaf7ef; }
ol.programme { text-align: left; margin: 6px 0 6px 1.3em; padding: 0; }
ol.programme li { margin: 2px 0; }
.code-fleches { font-size: 1.25em; letter-spacing: .08em; white-space: nowrap; font-weight: 700; }
.qcm.fleches .choix { font-size: 1.35rem; line-height: 1.2; padding: 6px 4px; white-space: normal; }
.panneau .g-nom { font-size: .7px; }
.enonce-solide { margin: 6px auto; }
.enonce-solide .esp-solide { max-width: 170px; background: #fffef8; border-radius: 8px; padding: 4px; }

/* v0.26 : l'anglais (écoute, micro, images, cours) */
.en { font-weight: 700; }
.en-ecoute { flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.en-boutons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.en-play { font-size: 1.15rem; padding: 12px 22px; display: inline-flex; align-items: center; gap: 8px; }
.en-play svg, .en-repete svg { width: 24px; height: 24px; }
.en-texte { font-size: 1.35rem; font-weight: 700; text-align: center; margin: 2px 0; }
.en-micro { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: 100%; border-top: 1px dashed rgba(0, 0, 0, .15); padding-top: 8px; }
.en-micro .micro-etat { flex-basis: 100%; text-align: center; margin: 0; }
.en-repete { display: inline-flex; align-items: center; gap: 6px; }
.en-micro .micro-stop { display: none; }
.en-micro.enregistre .micro-stop { display: inline-block; background: var(--ko); color: #fff; }
.en-micro.enregistre .en-repete { animation: micro-pulse 1s infinite; background: #ffe3dd; }
@keyframes micro-pulse { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .en-micro.enregistre .en-repete { animation: none; } }
.micro-ok { color: var(--ok); }
.en-image { flex-direction: column; align-items: center; }
.en-emoji { font-size: 4.6rem; line-height: 1.1; font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
.en-couleur { display: block; width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--encre); }
.zone .qcm.emojis .choix, .qcm.emojis .choix * { font-size: 2.6rem !important; line-height: 1.2; padding: 8px; font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
.qcm.anglais .choix { text-transform: none; }
.mots-en { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin: 6px 0; }
.mot-en { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid rgba(0, 0, 0, .12); border-radius: 10px; background: #fffef8; min-width: 0; }
.mot-en .me-img { font-size: 1.7rem; font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
.mot-en .me-coul { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--encre); flex: none; }
.mot-en .me-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow-wrap: break-word; }
.mot-en .me-txt b { font-size: .95rem; line-height: 1.2; }
.mot-en .me-txt .petit { line-height: 1.2; }
.en-hp { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--encre); background: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; color: var(--encre); vertical-align: middle; }
.en-hp svg { width: 20px; height: 20px; }
.phrases-en { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.phrase-en { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 10px; background: #fffef8; border: 1px solid rgba(0, 0, 0, .12); }
.cours-micro { margin-top: 8px; text-align: center; }
.pourquoi-en { margin: 10px 0; padding: 10px 12px; }
.pourquoi-en summary { cursor: pointer; }
.pourquoi-en p { margin-top: 8px; line-height: 1.45; }
@media (max-width: 360px) { .mots-en { grid-template-columns: 1fr; } }
.en-emoji.multi { font-size: 2.3rem; white-space: nowrap; letter-spacing: .05em; }
.en-trou { white-space: normal; }
.en-trou .trou { display: inline-block; min-width: 2.6em; border-bottom: 3px solid var(--accent); margin: 0 3px; }
.dialogue-en p { margin: 3px 0; text-align: left; }
.doc-en { white-space: pre-line; text-align: left; font-family: var(--f-texte); position: relative; padding-right: 44px; }
.doc-hp { position: absolute; top: 6px; right: 6px; }
.en-drapeau { max-width: 220px !important; border: 1px solid rgba(0,0,0,.2); border-radius: 4px; padding: 0 !important; }
.panneau .en-drapeau { max-width: 100% !important; }
/* v0.29 : fonds des matières (un par matière et par univers) — estompés, jamais pendant un exercice */
.decor-matiere .decor-fond { opacity: .27; background-position: center center; }
.decor-matiere.decor-detectives .decor-fond { opacity: .36; filter: sepia(.3); }
.decor-corbeau { filter: none !important; opacity: .34 !important; }
.decor-corbeau .decor-svg { width: 100%; height: 100%; display: block; }
/* v0.30 : Trésors du patrimoine — carte de 1789 et montgolfières (même décor pour tous les univers) */
.decor-tresors .decor-fond { opacity: .3; filter: sepia(.25); background-position: center center; -webkit-mask-image: none; mask-image: none; }
.ballon { width: 46px; opacity: .55; bottom: -110px; animation: ballon-monte 48s linear infinite, ballon-balance 5s ease-in-out infinite alternate; }
.ballon.b1 { left: 8%; }
.ballon.b2 { left: 72%; width: 34px; animation-delay: -22s, -2s; animation-duration: 60s, 6s; }
@keyframes ballon-monte { 0% { transform: translate(0, 0); } 100% { transform: translate(40px, calc(-100vh - 220px)); } }
@keyframes ballon-balance { from { rotate: -4deg; } to { rotate: 4deg; } }
.boussole { width: 120px; right: -26px; bottom: 40px; opacity: .22; animation: boussole-tourne 90s linear infinite; }
@keyframes boussole-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ballon, .boussole { animation: none; } .ballon { bottom: 30%; } }
.decor-tr-carnet .decor-fond { opacity: .13; }
/* v0.31 : les dessins de l’EMC (drapeaux, Marianne, hémicycle, urne) restent à taille raisonnable */
.esp-svg.emc-svg { max-width: 200px; display: block; margin: 0 auto; }
.visuel-svg > .esp-svg.don-svg { max-width: 360px; }
/* v0.33.2 : dans les réglages, l'accent choisi prend le bleu des interrupteurs activés */
.reglage .conj-choix button.choisi { background: #3d5afe; border-color: #3d5afe; color: #fff; }
/* v0.35.1 : le mot pour les parents (leçon « Mon corps grandit ») */
.note-parents { border-left: 5px solid #3d5afe; padding: 10px 14px; margin: 10px 0; }
.note-parents p { margin: 4px 0; }
/* v0.37 : le livre des légendes — blason */
.blason-svg { width: 100%; height: auto; display: block; margin: 0 auto; }
.aide-cours .blason-svg { width: 40px; flex: none; }
.blason-atelier { text-align: center; }
.blason-apercu { max-width: 170px; margin: 0 auto 6px; }
.blason-alerte { color: #b3541e; }
.emaux { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 24px; justify-content: center; margin: 6px 0 12px; }
.email-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #1b1d29; cursor: pointer; position: relative; padding: 0; }
.email-btn span { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); font-size: .62rem; color: var(--encre, #1b1d29); white-space: nowrap; }
.emaux { padding-bottom: 14px; }
.email-btn.choisi { outline: 3px solid #3d5afe; outline-offset: 3px; }
.reglage-blason .conj-choix button.choisi { background: #3d5afe; border-color: #3d5afe; color: #fff; }
/* v0.42 : le nom de l'appli en haut de l'accueil, et les boutons du choix du héros */
.marque { margin: 0 0 8px; text-align: center; font-family: var(--f-titre); font-size: 1.05rem; letter-spacing: .03em; }
.marque span { display: block; font-family: inherit; font-size: .72rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-top: 1px; }
.marque-clair { color: #fff; }
.bv-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; }
.bv-actions.seul { grid-template-columns: 1fr; }
[data-univers="detectives"] .marque { color: var(--papier); }
/* v0.43 : le globe des Trésors du monde */
.globe { position: relative; display: flex; justify-content: center; margin: 0 auto; max-width: 560px; }
.globe-canvas { display: block; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.globe-canvas:active { cursor: grabbing; }
.globe-zoom { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; gap: 8px; z-index: 4; }
.globe-zoom .btn-icone { width: 40px; height: 40px; font-size: 1.4rem; font-weight: 700; line-height: 1; }
.globe-bulle { cursor: default; gap: 6px; }
.globe-choix { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; background: none; border: 0; padding: 2px 0; font: inherit; color: inherit; cursor: pointer; }
.globe-choix + .globe-choix { border-top: 1px dashed #b9b2a0; padding-top: 6px; }
/* v0.44 : Arts et musique — les sons à écouter, le carillon, l'atelier collage */
.visuel-son { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btn-son { min-height: 48px; padding: 10px 18px; gap: 8px; }
.btn-son .son-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .8rem; }
.btn-son.joue { background: #fff3bf; }
.btn-son.joue .son-ico { animation: parle 1s ease-in-out infinite; }
.esp-svg.arts-svg { max-width: 260px; display: block; margin: 0 auto; background: #fffef8; }
.carillon { display: flex; gap: 5px; align-items: center; justify-content: center; height: 210px; padding: 8px 2px; background: linear-gradient(#7a5a3a, #5c4128); border-radius: 12px; touch-action: manipulation; }
.lame { flex: 1; max-width: 46px; height: var(--h); border: 0; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%, rgba(0,0,0,.15)), var(--c); box-shadow: 0 3px 0 rgba(0,0,0,.35); color: #fff; font-weight: 800; font-size: .85rem; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; text-shadow: 0 1px 2px rgba(0,0,0,.5); cursor: pointer; transition: transform .08s; position: relative; }
.lame::before, .lame::after { content: ''; position: absolute; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #d9d2c5; }
.lame::before { top: 10px; } .lame::after { bottom: 30px; }
.lame.frappe { transform: translateY(3px) scale(.97); filter: brightness(1.35); box-shadow: 0 0 0 rgba(0,0,0,.35), 0 0 18px var(--c); }
.lame { -webkit-tap-highlight-color: transparent; }
.lame:focus { outline: none; }
.lame.indice:focus { outline: 4px solid #fff; }
.lame.indice { outline: 4px solid #fff; outline-offset: 2px; animation: indice-lame 1s ease-in-out infinite; }
@keyframes indice-lame { 50% { filter: brightness(1.4); } }
.car-jeu.ecoute .lame { cursor: default; }
.car-etat { text-align: center; font-weight: 800; font-size: 1.15rem; margin: 0 0 10px; min-height: 1.5em; }
.car-etoiles { color: #ced4da; font-size: 1.3rem; letter-spacing: 2px; white-space: nowrap; }
.car-etoiles .on { color: #f59f00; }
.car-libre .reglage { margin-top: 10px; }
.collage-atelier { display: flex; flex-direction: column; gap: 6px; }
.collage-feuille { display: flex; justify-content: center; }
.collage-svg { width: 100%; max-width: 320px; height: auto; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.18); touch-action: none; user-select: none; -webkit-user-select: none; }
.collage-svg.mini { max-width: 110px; box-shadow: none; border: 2px solid #1b1d29; touch-action: auto; }
.collage-outils { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.collage-outils[hidden] { display: none; }
.collage-outils .btn-icone { width: 40px; height: 40px; font-size: 1.1rem; }
.collage-couleurs { display: flex; flex-wrap: wrap; gap: 8px; }
.collage-couleurs button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #1b1d29; padding: 0; }
.collage-couleurs button.choisi { outline: 3px solid var(--accent); outline-offset: 2px; }
.collage-formes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.collage-atelier { min-width: 0; }
.actions.colonne { flex-direction: column; }
.collage-formes button { aspect-ratio: 1; border: 2px solid #1b1d29; border-radius: 8px; background: #fffef8; padding: 4px; color: inherit; }
.collage-formes svg { width: 100%; height: 100%; }
.collage-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.collage-cadre { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.collage-cadre > button:first-child { background: none; border: 0; padding: 0; }
.collage-cadre.actif .collage-svg { outline: 3px solid var(--accent); }
/* v0.45 : EPS — la pause active, et les dessins (panneaux, drapeaux, boussole) */
.esp-svg.eps-svg { max-width: 150px; display: block; margin: 0 auto; background: transparent; }
.panneau .esp-svg.eps-svg { max-width: 110px; }
.pause-zone { text-align: center; }
.pause-etape { margin: 0; font-weight: 700; color: var(--accent); }
.pause-nom { margin: 6px 0 0; font-family: var(--f-titre); font-size: 1.5rem; }
.pause-chrono { margin: 8px 0; font-size: 4.2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.pause-chrono.repos { color: #2f9e44; }
.pause-barre { height: 10px; border-radius: 6px; background: #e3e5ee; overflow: hidden; margin-top: 10px; }
.pause-barre span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .9s linear; }

/* v0.46 : poésie — poèmes vers par vers, atelier « Ma récitation » */
.passage.poeme p { margin: 0; }
.passage.poeme .strophe { margin-bottom: .8em; }
.passage.poeme .strophe:last-of-type { margin-bottom: .2em; }
.recit-auteur { margin: 0 0 8px; }
.recit-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.recit-modes .puce { border: 2px solid var(--encre); border-radius: 999px; background: transparent; color: inherit; padding: 5px 11px; font: inherit; font-size: .85rem; }
.recit-modes .puce.actif { background: var(--accent); color: #fff; }
.recit-aide { margin: 4px 0 10px; }
.recit-texte { font-size: 1.08rem; line-height: 1.75; }
.mot-cache { border: 0; border-bottom: 2px dotted currentColor; background: rgba(127,127,127,.22); color: transparent; border-radius: 4px; padding: 0 2px; font: inherit; cursor: pointer; }
.vers-cache { opacity: .55; font-style: italic; cursor: pointer; }
.recit-grille { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.recit-critere { display: flex; gap: 8px; align-items: flex-start; line-height: 1.35; }
.recit-critere input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
#ecoute audio { width: 100%; margin-top: 8px; }
.btn.rouge { background: #d6312b; color: #fff; }
.fiche-mini img.illus.recit-mini { object-position: 50% 25%; } /* v0.46.1 : les portraits gardent leur visage */
/* v0.47 : l'atelier poterie */
.pot-defis .puce { font-size: .82rem; }
.pot-et { color: #e8a317; letter-spacing: 1px; }
.puce.actif .pot-et { color: #fff3c4; }
.pot-etapes { display: flex; gap: 6px; margin: 4px 0 10px; }
.pot-etape { flex: 1; border: 2px solid var(--encre); border-radius: 10px; background: var(--papier, #fff); color: inherit; font: inherit; font-size: .85rem; padding: 7px 4px; }
.pot-etape b { display: inline-block; width: 20px; height: 20px; line-height: 20px; border-radius: 50%; background: var(--encre); color: #fff; font-size: .75rem; }
.pot-etape.actif { background: var(--accent); color: #fff; }
.pot-zone { padding: 8px; }
.pot-tour { touch-action: none; user-select: none; -webkit-user-select: none; max-width: 340px; margin: 0 auto; border-radius: 12px; background: radial-gradient(circle at 50% 35%, #f6efe3, #e4d6c1); }
.poterie-svg { width: 100%; height: auto; display: block; }
.poterie-svg.tourne .tour-marques { animation: pot-tour 1s linear infinite; }
.poterie-svg.tourne .tour-reflet { animation: pot-reflet 1.2s linear infinite; }
@keyframes pot-tour { to { stroke-dashoffset: -40; } }
@keyframes pot-reflet { 0% { transform: translateX(-90px); } 100% { transform: translateX(90px); } }
.pot-tour.au-four { filter: sepia(.4) brightness(.8); transition: filter .4s; }
.pot-boutons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
.pot-boutons .btn { padding: 8px 2px; font-size: .82rem; min-width: 0; }
.pot-emaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 6px 0 10px; }
.pot-email { display: flex; align-items: center; gap: 6px; border: 2px solid transparent; border-radius: 10px; background: rgba(127,127,127,.08); color: inherit; font: inherit; font-size: .82rem; padding: 6px; }
.pot-email span { width: 20px; height: 20px; border-radius: 50%; background: var(--c); border: 1px solid rgba(0,0,0,.3); flex: none; }
.pot-email.actif { border-color: var(--accent); }
.pot-four { display: flex; align-items: center; gap: 14px; }
.pot-four-porte { width: 90px; height: 70px; border-radius: 40px 40px 8px 8px; background: #4a3b33; border: 4px solid #2b211c; position: relative; overflow: hidden; flex: none; }
.pot-flammes { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, #ffb703, #fb5607 60%, transparent); transition: height .5s; }
.pot-four.allume .pot-flammes { height: 85%; animation: pot-feu .35s ease-in-out infinite alternate; }
@keyframes pot-feu { to { transform: scaleY(.85); transform-origin: bottom; } }
.pot-temp { margin: 0; font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pot-etagere { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 8px; border-bottom: 8px solid #8d6a4a; background: rgba(127,127,127,.06); border-radius: 10px 10px 0 0; }
.pot-cadre { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.pot-cadre .petit { font-size: .7rem; line-height: 1.2; }
.pot-savais summary { cursor: pointer; }
.visuel-svg > .esp-svg.schema-svg { max-width: 420px; background: transparent; } /* v0.48 : les schémas des cours */
.visuel-svg > .esp-svg.sci-dessin { max-width: 380px; }
.visuel-svg > .esp-svg.sci-dessin.petit { max-width: 170px; }
/* v0.49 : le nom de héros (le dé) et le formulaire de contact */
.nom-ligne { display: flex; gap: 8px; align-items: stretch; }
.nom-ligne input { flex: 1; min-width: 0; }
.btn.nom-de { flex: none; width: 52px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn.nom-de svg { width: 26px; height: 26px; }
.contact-case textarea, .contact-case input[type=email] { width: 100%; box-sizing: border-box; font: inherit; padding: 10px; border: 2px solid var(--encre); border-radius: 10px; background: #fff; color: #1b1d29; margin: 4px 0 10px; }
.ct-label { display: block; font-weight: 700; margin-top: 6px; }
.ct-ajout { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 10px; cursor: pointer; }
.ct-ajout svg { width: 20px; height: 20px; }
.ct-captures { display: flex; gap: 8px; flex-wrap: wrap; }
.ct-vignette { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; border: 2px solid var(--encre); }
.ct-vignette img { width: 100%; height: 100%; object-fit: cover; }
.ct-nom { display: grid; place-items: center; height: 100%; padding: 4px; font-size: .7rem; text-align: center; overflow-wrap: anywhere; background: rgba(127,127,127,.12); }
.ct-vignette .btn-icone { position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; padding: 3px; background: #fff; }
.ct-piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* v0.49.3 : qui lit les messages du Contact */
.ct-qui { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.ct-qui img { width: 88px; height: 88px; flex: none; border-radius: 50%; object-fit: cover; border: var(--bord); background: #fff; }
.ct-qui p { font-size: .95rem; line-height: 1.45; }

/* ===== v0.50 — Sauvegarde en ligne, compte parent, confidentialité ===== */
.sauvegarde-case { display: flex; flex-direction: column; gap: 12px; }
.titre-section { font-family: var(--f-titre); font-size: 1.25rem; }
.code-sauvegarde { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px; margin: 4px 0; font: 800 clamp(1.05rem, 5.2vw, 1.7rem)/1.1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; }
.code-sauvegarde span { padding: 7px 7px; border: 3px solid var(--encre); border-radius: 10px; background: #fff; color: #141416; }
.code-sauvegarde i { font-style: normal; color: var(--doux); }
.code-liaison { font-size: 2rem; }
.code-cache { font: 700 1.3rem ui-monospace, Consolas, monospace; letter-spacing: .08em; color: var(--doux); text-align: center; }
.rang-nuage { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px; border-radius: 12px; background: rgba(127,127,127,.1); }
.rang-nuage b { font-family: var(--f-titre); font-size: 1.5rem; color: var(--accent); }
.sauvegarde-btn svg { color: var(--second); }
.liste-points { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.case-cocher { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 4px; font-weight: 600; line-height: 1.35; cursor: pointer; }
.case-cocher input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--accent); }
.champ-parent, .champ-code { width: 100%; min-height: 50px; font: inherit; font-size: 1.05rem; padding: 10px 14px; border-radius: 10px; border: 1px solid #c9cde0; background: #fff; color: #1b1d29; }
.champ-code { font-family: ui-monospace, Consolas, monospace; font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase; border: 2px solid #3a4066; }
.heros-parent { border-top: 1px solid #e3e6f0; padding-top: 10px; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.boutons-parent { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.boutons-parent .btn { min-height: 44px; padding: 8px 14px; font-size: .92rem; }
.ligne-liaison { display: flex; gap: 8px; }
.ligne-liaison .champ-parent { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.interrupteur:disabled { opacity: .4; cursor: not-allowed; }
.msg-compte { background: #e4e9ff; color: #2a3fb8; padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; }
.confidentialite ul { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; line-height: 1.5; }
.confidentialite h3 { margin-bottom: 6px; }
.maj.renommer { background: #ffe6e1; border-color: var(--ko); }

/* v0.51 : écrans des rangs et des trophées — le décor se voit davantage, les cases le laissent transparaître */
.decor-matiere.decor-t-rangs .decor-fond { opacity: .55; }
.decor-matiere.decor-detectives.decor-t-rangs .decor-fond { opacity: .6; filter: sepia(.35); }
.decor-t-rangs ~ #app .echelle-rangs li:not(.actuel), .decor-t-rangs ~ #app .trophee { background: color-mix(in srgb, var(--papier) 80%, transparent); }

/* v0.52 : noms uniques et définitifs */
.nom-libre { font-weight: 700; margin-top: 6px; }
.nom-libre.libre { color: #4fd18b; }
.nom-libre.pris { color: #ff8787; }
.contact-case .nom-libre.libre, .parents .nom-libre.libre { color: var(--ok); }
.contact-case .nom-libre.pris { color: var(--ko); }
.nom-definitif { margin-top: 8px; color: #c9cde3; }
.nom-definitif b { color: #ffd43b; }
#nom-heros[readonly] { background: #d9dcef; color: #3a4066; }
#ct-nom { width: 100%; min-height: 48px; font: inherit; padding: 10px 14px; border-radius: 10px; border: var(--bord); background: #fff; color: #1b1d29; }

.label-meninges { font-weight: 400; color: #c9cde3; }

/* ===== v0.53 — Le grand classement ===== */
.classement-btn svg { color: #e0a800; }
.classement-onglets { display: flex; flex-direction: column; gap: 8px; }
.classement-onglets .puce svg { width: 14px; height: 14px; vertical-align: -2px; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin-top: 4px; }
.pod { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 10px 6px 0; background: color-mix(in srgb, var(--papier) 88%, transparent); border: var(--bord); border-radius: var(--rayon) var(--rayon) 0 0; min-width: 0; }
.pod-nom { font-size: .92rem; line-height: 1.15; overflow-wrap: anywhere; }
.pod-medaille { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; font: 800 1.3rem var(--f-titre); color: #3a2a00; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.pod-or .pod-medaille { background: radial-gradient(circle at 35% 30%, #fff5b0, #f2c200 60%, #b88a00); width: 52px; height: 52px; font-size: 1.6rem; }
.pod-argent .pod-medaille { background: radial-gradient(circle at 35% 30%, #ffffff, #c9d0da 60%, #8a94a3); }
.pod-bronze .pod-medaille { background: radial-gradient(circle at 35% 30%, #ffe0c2, #d08a4e 60%, #8f5526); }
.pod-etoiles { font-weight: 800; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 3px; }
.pod-etoiles svg, .cl-etoiles svg { width: 14px; height: 14px; color: var(--accent); }
.pod-socle { align-self: stretch; margin: 6px -6px 0; border-top: var(--bord); background: var(--accent); opacity: .85; }
.pod-or .pod-socle { height: 46px; } .pod-argent .pod-socle { height: 30px; } .pod-bronze .pod-socle { height: 18px; }
.pod-moi { outline: 3px solid #ffd43b; outline-offset: 2px; }
.cl-liste { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cl-liste li { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 8px; padding: 9px 10px; border: var(--bord); border-radius: var(--rayon); background: color-mix(in srgb, var(--papier) 88%, transparent); }
.cl-liste li.cl-moi { background: #ffd43b; color: #1b1d29; }
.cl-n { font-family: var(--f-titre); text-align: center; }
.cl-nom { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.cl-etoiles { font-variant-numeric: tabular-nums; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.cl-drapeau { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--doux); border-radius: 50%; }
.cl-drapeau svg { width: 18px; height: 18px; }
.pod .cl-drapeau, .pod .cl-signale { position: absolute; top: 2px; right: 2px; }
.cl-signale { color: var(--doux); font-size: .8rem; width: 30px; text-align: center; }
.badge-createur { display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: linear-gradient(#ffd23f, #ff8a00); color: #3a1d00; vertical-align: 2px; }
.badge-toi { display: inline-block; font-size: .64rem; font-weight: 800; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: var(--encre); color: #fff; vertical-align: 2px; }
.cl-toi { margin-top: 12px; border-color: #ffd43b; }
.cl-signaler { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.cl-note { margin-top: 10px; }
[data-univers="detectives"] .cl-note { color: #b9c4cc; }
.pod { grid-row: 1; } .pod-or { grid-column: 2; } .pod-argent { grid-column: 1; } .pod-bronze { grid-column: 3; }

/* v0.53.2 : la case « Ma demande concerne mon compte » est verte quand elle est cochée */
.case-cocher input { accent-color: var(--ok); }
.case-cocher .oblig { display: none; font-size: .78rem; font-weight: 700; color: var(--ok); margin-top: 2px; }
.case-cocher.force .oblig { display: block; }

/* ===== v0.57 : ancien et nouveau programme ===== */
.badge-prog { display: inline-block; align-self: flex-start; font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; line-height: 1.4; white-space: nowrap; }
.badge-prog.nouveau { background: #0b7285; color: #fff; }
.badge-prog.enrichi { background: #e7f5ff; color: #1c4f7a; border: 1px solid #74a9d8; }
.note-prog.enrichi { background: #f1f8ff; border-color: #a5c8e8; }
.badge-prog.ancien { background: #f1e3c6; color: #5c3d0e; border: 1px solid #c9a86a; }
.note-prog { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: #eef8fa; color: #1d2b30; border: 1px solid #8cc7d1; }
.note-prog .petit { color: #1d2b30; }
.note-prog.ancien { background: #fbf4e6; border-color: #d9c09a; }
.legende-prog { padding: 10px 12px; border-radius: 12px; background: #fffaf0; color: #2b2622; border: 1px solid #d9c9a3; display: flex; flex-direction: column; gap: 4px; }
.legende-prog .petit { color: #3d3630; }
.legende-prog .lien { color: #0b7285; }
.legende-prog .badge-prog { vertical-align: 1px; }
.legende-prog .lien { align-self: flex-start; }
.table-prog { display: flex; flex-direction: column; gap: 10px; }
.ligne-prog { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid rgba(127,127,127,.25); }
.ligne-prog:last-child { border-bottom: 0; padding-bottom: 0; }
.programmes ul { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

/* ===== v0.58 : univers Animaux — quelques touches ===== */
[data-univers="animaux"] .titre, [data-univers="animaux"] h1, [data-univers="animaux"] h2 { font-weight: 600; letter-spacing: .01em; }
[data-univers="animaux"] .comp { box-shadow: 0 3px 0 #cdb98c; }
[data-univers="animaux"] .choix, [data-univers="animaux"] .signe { box-shadow: 0 3px 0 #cdb98c; }
[data-univers="animaux"] .choix.choisi, [data-univers="animaux"] .signe.choisi { background: var(--second); color: #fff; }
[data-univers="animaux"] .astuce { border-color: var(--second); background: rgba(47,125,59,.08); }
[data-univers="animaux"] .astuce b { color: var(--second); }
[data-univers="animaux"] .etapes li::before { background: var(--second); }
[data-univers="animaux"] .toast { background: var(--second); }
[data-univers="animaux"] .couronne { color: var(--second); }
[data-univers="animaux"] .badge.bientot { background: #e9dfc4; color: #5d5440; }
[data-univers="animaux"] .defi { background: #2e3b26; border-color: #2e3b26; }

/* v0.59 : écran de démarrage (logo CM2 et ses éclairs, 1,9 s, ne bloque jamais les clics) */
.splash { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, #24357f 0%, #141416 70%); animation: sp-fond 1.9s ease-in forwards; }
.splash .sp-logo { --t: min(58vmin, 300px); --pad: calc(var(--t) * .12); position: relative; width: var(--t); height: var(--t); padding: var(--pad);
  box-sizing: content-box; animation: sp-zoom 1.9s cubic-bezier(.3, .7, .4, 1) forwards; }
.splash .sp-logo img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 6px rgba(76, 110, 245, .9)) drop-shadow(0 0 22px rgba(245, 159, 0, .55)); }
.splash .sp-fx { position: absolute; inset: 0; filter: drop-shadow(0 0 1px #e8590c) drop-shadow(0 0 5px rgba(92, 124, 250, .95)); }
.splash .sp-fx span { position: absolute; opacity: 0; }
.splash .sp-a { width: calc(var(--pad) * 2.2); height: calc(var(--pad) * 2.2); background: #ff922b; animation: sp-zap .55s linear 3;
  clip-path: polygon(98.8% 94.7%,74.7% 56.6%,60.3% 69.2%,43.9% 32.7%,28.9% 42.1%,8.2% 4.1%,3% 7%,26.7% 50.5%,41.3% 41.3%,58.2% 78.9%,73.4% 65.6%,93.8% 97.9%); }
.splash .sp-a1 { top: 0; left: 0; animation-delay: .35s; }
.splash .sp-a2 { top: 0; right: 0; transform: scaleX(-1); animation-delay: .5s; }
.splash .sp-a3 { bottom: 0; right: 0; transform: scale(-1, -1); animation-delay: .42s; }
.splash .sp-a4 { bottom: 0; left: 0; transform: scaleY(-1); animation-delay: .58s; }
.splash .sp-b { width: calc(var(--pad) * .85); height: calc(var(--pad) * .85); background: linear-gradient(#ffe066, #fab005); animation: sp-pop .7s ease-out 2;
  clip-path: polygon(55% 4%,10% 54%,40% 54%,30% 96%,85% 37.5%,55% 37.5%); }
.splash .sp-b1 { top: 4%; left: 30%; animation-delay: .4s; } .splash .sp-b2 { top: 4%; left: 64%; rotate: 12deg; animation-delay: .62s; }
.splash .sp-b3 { right: 2%; top: 30%; rotate: 80deg; animation-delay: .5s; } .splash .sp-b4 { right: 2%; top: 64%; rotate: 100deg; animation-delay: .7s; }
.splash .sp-b5 { bottom: 4%; left: 62%; rotate: 180deg; animation-delay: .45s; } .splash .sp-b6 { bottom: 4%; left: 28%; rotate: 168deg; animation-delay: .66s; }
.splash .sp-b7 { left: 2%; top: 62%; rotate: -100deg; animation-delay: .55s; } .splash .sp-b8 { left: 2%; top: 28%; rotate: -80deg; animation-delay: .75s; }
@keyframes sp-fond { 0%, 72% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes sp-zoom { 0% { transform: scale(.15); opacity: 0; } 24% { transform: scale(1.12); opacity: 1; } 34% { transform: scale(1); } 66% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(.08) rotate(-12deg); opacity: 0; } }
@keyframes sp-zap { 0% { opacity: 0; } 8% { opacity: 1; } 20% { opacity: .2; } 30% { opacity: 1; } 55% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sp-pop { 0% { opacity: 0; scale: .4; } 15% { opacity: 1; scale: 1.35; } 30% { opacity: 1; scale: 1.1; } 70% { opacity: 0; scale: .9; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .splash { display: none; } }