:root {
  --bg: #fbf7f0;
  --card: #ffffff;
  --ink: #1f2a37;
  --on-ink: #ffffff;
  --muted: #6b7280;
  --accent: #e8573a;
  --blue: #2f5bd3;
  --line: #ece5d8;
  --danger: #b42318;
  --danger-soft: #fff5f4;
  --ok-bg: #dcf3e4;
  --ok-ink: #17633a;
  --soon-ink: #9aa1ab;
  --soon-a: #fbfaf7;
  --soon-b: #f5f2ec;
  --soon-badge: #efeae1;
  --soon-badge-ink: #8a8273;
  --soon-border: #c9c2b4;
  --voile: rgba(31, 42, 55, .5);
  --wip-bg: #fff3dc;
  --wip-ink: #b26a00;
  --accent-soft: color-mix(in srgb, var(--accent) 15%, var(--card));
  --blue-soft: color-mix(in srgb, var(--blue) 14%, var(--card));
  color-scheme: light;
}
html[data-accent="bleu"]   { --accent: #2f6fe0; }
html[data-accent="vert"]   { --accent: #1f9d63; }
html[data-accent="violet"] { --accent: #8250df; }
html[data-accent="rose"]   { --accent: #d6407f; }

html[data-theme="sombre"] {
  --bg: #121417; --card: #1b1f25; --ink: #ebe7df; --on-ink: #15181d; --muted: #9aa1ab;
  --blue: #6f8ff0; --line: #262b33;
  --danger: #ff8a7a; --danger-soft: #3a1d1a; --ok-bg: #163a25; --ok-ink: #7fdca0;
  --soon-ink: #6f7681; --soon-a: #1c2026; --soon-b: #21262d; --soon-badge: #2a2f37; --soon-badge-ink: #9a9488; --soon-border: #4a505a;
  --voile: rgba(0, 0, 0, .65);
  --wip-bg: #33280f; --wip-ink: #f3b450;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg: #121417; --card: #1b1f25; --ink: #ebe7df; --on-ink: #15181d; --muted: #9aa1ab;
    --blue: #6f8ff0; --line: #262b33;
    --danger: #ff8a7a; --danger-soft: #3a1d1a; --ok-bg: #163a25; --ok-ink: #7fdca0;
    --soon-ink: #6f7681; --soon-a: #1c2026; --soon-b: #21262d; --soon-badge: #2a2f37; --soon-badge-ink: #9a9488; --soon-border: #4a505a;
    --voile: rgba(0, 0, 0, .65);
  --wip-bg: #33280f; --wip-ink: #f3b450;
    color-scheme: dark;
  }
}
html[data-taille="grande"] { font-size: 115%; }
body { transition: background-color .25s, color .25s; }
* { box-sizing: border-box; margin: 0; }
body {
  min-height: 100vh;
  background: var(--bg);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 16px 40px;
}

.topbar {
  width: 100%; max-width: 520px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 36px; flex-wrap: wrap;
}
header { display: flex; align-items: center; gap: 12px; }

.compte {
  position: relative; padding: 0; border: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center;
}
.compte .roue {
  position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); color: var(--on-ink); font-size: 11px; display: grid; place-items: center;
  border: 2px solid var(--bg);
}
.avatar-lettre { display: grid; place-items: center; font-weight: 700; color: var(--ink); }
.btn-google {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border: 2px solid var(--ink); border-radius: 12px;
  padding: 8px 12px; font: inherit; font-weight: 600; font-size: .9rem; color: var(--ink);
  cursor: pointer; box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, box-shadow .15s;
}
.btn-google:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn-google:disabled { opacity: .6; cursor: wait; }
.avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; background: var(--accent-soft); }

.panneau-voile { position: fixed; inset: 0; background: var(--voile); z-index: 40; animation: fondu .2s ease; }
.panneau-voile[hidden], .panneau[hidden] { display: none; }
.panneau {
  position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 380px; z-index: 41;
  background: var(--card); border-left: 2px solid var(--ink);
  display: flex; flex-direction: column; padding: 20px; overflow-y: auto;
  animation: glisse .25s ease;
}
@keyframes glisse { from { transform: translateX(100%); } to { transform: none; } }
.panneau-haut { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.panneau-haut h2 { font-family: "Fraunces", Georgia, serif; font-size: 1.4rem; }
.fermer { background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--ink); line-height: 1; padding: 4px 8px; border-radius: 8px; }
.fermer:hover { background: var(--bg); }
.profil { display: flex; align-items: center; gap: 14px; padding: 16px; border: 2px solid var(--ink); border-radius: 16px; background: var(--accent-soft); margin-bottom: 20px; }
.profil .avatar { width: 56px; height: 56px; flex-shrink: 0; }
.profil strong { display: block; font-size: 1.05rem; }
.profil small { color: var(--muted); word-break: break-all; }
.rubriques { display: grid; gap: 8px; }
.rubrique {
  display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid var(--line); border-radius: 12px;
  color: var(--muted); font-weight: 500;
}
.rubrique span:first-child { font-size: 1.2rem; }
.rubrique-active { color: var(--ink); border-color: var(--ink); cursor: pointer; }
.trait-accent { stroke: var(--accent); }
.reglage { border: 2px solid var(--ink); border-radius: 12px; padding: 14px; }
.reglage-titre { display: flex; align-items: center; gap: 12px; font-weight: 600; margin-bottom: 4px; }
.reglage-titre span:first-child { font-size: 1.2rem; }
.reglage-label { font-size: .8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 8px; }
.segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.segment button {
  border: none; background: none; border-radius: 9px; padding: 9px 4px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .88rem; color: var(--muted); transition: background .15s, color .15s;
}
.segment button.actif { background: var(--card); color: var(--ink); box-shadow: 0 1px 0 var(--line), 0 0 0 2px var(--ink); }
.segment .aa-grand { font-size: 1.05rem; }
.segment-classe button { font-size: 1rem; padding: 11px 4px; }
.segment-classe button.actif { background: var(--accent); color: #fff; box-shadow: 0 0 0 2px var(--ink); }
.pastilles { display: flex; gap: 12px; flex-wrap: wrap; }
.pastilles button {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 3px solid var(--card);
  box-shadow: 0 0 0 2px var(--line); transition: transform .15s, box-shadow .15s; position: relative;
}
.pastilles button:hover { transform: scale(1.08); }
.pastilles button.actif { box-shadow: 0 0 0 3px var(--ink); }
.pastilles button.actif::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; }
.alerte-classe { background: var(--accent-soft); border: 2px dashed var(--accent); border-radius: 12px; padding: 10px 12px; font-size: .9rem; margin-bottom: 12px; }
.alerte-classe[hidden] { display: none; }
.rubrique em { margin-left: auto; font-style: normal; font-size: .75rem; background: var(--bg); padding: 3px 8px; border-radius: 99px; }
.btn-deconnexion {
  margin-top: auto; padding: 14px; border: 2px solid var(--danger); border-radius: 12px;
  background: var(--danger-soft); color: var(--danger); font: inherit; font-weight: 600; cursor: pointer;
}
.btn-deconnexion:hover { background: var(--danger); color: var(--card); }
.espace { flex: 1; min-height: 24px; }
.compte[hidden], .btn-google[hidden] { display: none; }
.bonjour { color: var(--accent); font-weight: 600; margin-bottom: 10px; min-height: 1.4em; }
.erreur-auth { color: var(--danger); font-size: .85rem; width: 100%; max-width: 520px; margin: -24px 0 20px; text-align: right; min-height: 0; }
/* Logo Kiffelesmaths : deux masques (img/logo-encre.png, img/logo-les.png) colorés par les variables,
   donc il suit le thème clair / sombre et la couleur d'accent choisie par l'élève. */
/* Largeur écrite en dur (et pas seulement aspect-ratio) : sur iPhone, Safari réduisait le logo à 0 de large dans la barre du haut */
.logo-kif { --h-logo: 34px; position: relative; display: block; height: var(--h-logo); width: calc(var(--h-logo) * 480 / 67); flex-shrink: 0; }
.logo-encre, .logo-les { position: absolute; inset: 0; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.logo-encre { background: var(--ink); -webkit-mask-image: url("../img/logo-encre.png"); mask-image: url("../img/logo-encre.png"); }
.logo-les {
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 70%, var(--card)) 20%, var(--accent) 80%);
  -webkit-mask-image: url("../img/logo-les.png"); mask-image: url("../img/logo-les.png");
}
html[data-accent="orange"] .logo-les { background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 55%, var(--or)) 20%, var(--accent) 80%); }
@media (max-width: 480px) { .logo-kif { --h-logo: 28px; } }

main {
  width: 100%; max-width: 520px;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 22px;
  box-shadow: 8px 8px 0 var(--ink);
  padding: 32px 22px;
  text-align: center;
}
h1 { font-family: "Fraunces", Georgia, serif; font-size: clamp(1.6rem, 6vw, 2.1rem); line-height: 1.2; }
.sub { color: var(--muted); margin-top: 8px; }

.ecran { display: none; animation: entree .35s ease; }
.ecran.visible { display: block; }
@keyframes entree { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.niveaux { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.niveau {
  border: 2px solid var(--ink); border-radius: 18px; padding: 22px 10px;
  background: var(--accent-soft); cursor: pointer;
  font: inherit; color: inherit;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 4px 4px 0 var(--ink);
}
.niveau.lycee { background: var(--blue-soft); }
/* Niveau « Autre » : sur toute la largeur, icône à gauche */
.niveau.autre { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 16px; text-align: left; }
.niveau.autre .icone { margin: 0; font-size: 1.9rem; }
.niveau:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.niveau:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.niveau .icone { font-size: 2.2rem; display: block; margin-bottom: 8px; }
.niveau strong { font-size: 1.2rem; display: block; }
.niveau small { color: var(--muted); }

.classes { display: grid; gap: 12px; margin-top: 26px; }
.classe {
  display: flex; align-items: center; justify-content: space-between;
  border: 2px solid var(--ink); border-radius: 14px; padding: 16px 18px;
  background: var(--card); cursor: pointer; font: inherit; font-weight: 600; font-size: 1.1rem; color: inherit;
  transition: background .15s, transform .15s;
}
.classe::after { content: "→"; color: var(--accent); font-size: 1.3rem; }
.classe:hover { background: var(--accent-soft); transform: translateX(3px); }
.classe.choisie { background: var(--ink); color: var(--on-ink); }
.classe.choisie::after { content: "✓"; color: var(--on-ink); }

.retour {
  margin-top: 22px; background: none; border: none; cursor: pointer;
  font: inherit; color: var(--muted); font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px;
}
.retour:hover { color: var(--ink); background: var(--bg); }

.confirmation { margin-top: 18px; font-weight: 600; color: var(--accent); min-height: 1.5em; }

.familles { margin-top: 24px; display: grid; gap: 26px; text-align: left; }
/* Chaque famille a sa couleur (--c), comme le parcours du sommaire */
.famille h2 {
  font-family: "Fraunces", Georgia, serif; font-size: 1.08rem; line-height: 1.2;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 12px;
}
.famille-icone {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0;
  background: color-mix(in srgb, var(--c) 18%, var(--card)); border: 2px solid var(--c); transform: rotate(-4deg);
}
.famille-compte {
  white-space: nowrap; font-family: "Inter", system-ui, sans-serif; font-size: .74rem; font-weight: 700;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--card)); padding: 3px 9px; border-radius: 99px;
}
.chapitres { display: grid; gap: 9px; }
.chapitre {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; font: inherit; color: inherit;
  border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--card);
  transition: transform .15s, box-shadow .15s, border-color .15s, background .15s;
}
.chapitre-icone {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0;
  background: color-mix(in srgb, var(--c) 14%, var(--card));
}
.chapitre-nom { flex: 1; min-width: 0; }
.badge-chapitre { flex-shrink: 0; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.chapitre.dispo { border-color: var(--ink); border-left: 6px solid var(--c); box-shadow: 3px 3px 0 var(--c); font-weight: 600; }
.chapitre.dispo:hover { transform: translate(-1px, -2px); box-shadow: 5px 5px 0 var(--c); }
.chapitre.dispo:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--c); }
.chapitre.dispo .badge-chapitre { background: var(--c); color: var(--card); width: 30px; height: 30px; padding: 0; display: grid; place-items: center; font-size: .8rem; }
.chapitre.commence .badge-chapitre { width: auto; height: auto; padding: 4px 10px; }
.chapitre.commence .badge-chapitre { background: var(--ok-bg); color: var(--ok-ink); border: 1.5px solid var(--ok-ink); }
.chapitre.choisie { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.chapitre.choisie .badge-chapitre { background: var(--on-ink); color: var(--ink); }
.chapitre.bientot { color: var(--soon-ink); border-style: dashed; padding: 7px 12px; font-size: .94rem; background: var(--soon-a); }
.chapitre.bientot .chapitre-icone { width: 30px; height: 30px; font-size: 1rem; filter: grayscale(1); opacity: .6; background: var(--soon-b); }
.chapitre.bientot:hover { border-color: var(--soon-border); background: var(--soon-b); }
.chapitre.bientot .badge-chapitre { background: var(--soon-badge); color: var(--soon-badge-ink); font-weight: 600; }
.chapitre.bientot .badge-chapitre::before { content: "⏳ "; }
.popup .btn-ok {
  border: 2px solid var(--ink); border-radius: 12px; background: var(--ink); color: var(--on-ink);
  font: inherit; font-weight: 600; padding: 12px 26px; cursor: pointer; box-shadow: 3px 3px 0 var(--accent);
}
.popup .nom-chapitre { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 99px; background: var(--accent-soft); color: var(--ink); font-weight: 600; }

.voile {
  position: fixed; inset: 0; background: var(--voile);
  display: grid; place-items: center; padding: 16px; z-index: 50;
  animation: fondu .2s ease;
}
.voile[hidden] { display: none; }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
.popup {
  width: 100%; max-width: 400px; background: var(--card);
  border: 2px solid var(--ink); border-radius: 20px; box-shadow: 8px 8px 0 var(--ink);
  padding: 28px 22px; text-align: center; animation: entree .3s ease;
}
.popup .icone-popup { font-size: 2.4rem; }
.popup h2 { font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; margin: 8px 0 10px; }
.popup p { color: var(--muted); line-height: 1.5; margin-bottom: 22px; }
.popup .btn-google { font-size: 1rem; padding: 12px 18px; }

/* Sommaire du chapitre */
#ecran-sommaire { text-align: left; }
#ecran-sommaire .sub { margin: 0 0 4px; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; font-weight: 600; color: var(--accent); }
.sommaire-aide { color: var(--muted); margin: 8px 0 18px; }
.sommaire-liste { display: grid; gap: 10px; }
.sommaire-item {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px;
  border: 2px solid var(--ink); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
  transition: transform .12s, background .15s;
}
button.sommaire-item:hover { background: var(--accent-soft); transform: translateX(3px); }
.sommaire-num {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); border: 2px solid var(--ink); font-weight: 700;
}
.sommaire-progres { border: 2px solid var(--ink); border-radius: 14px; padding: 12px 14px; margin: 14px 0 4px; background: var(--bg); }
.sommaire-progres-haut { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: 8px; color: var(--muted); }
.sommaire-progres-haut strong { color: var(--ink); }
#sommaire-progres-barre { background: var(--ok-ink); }
.pastille-etat { display: inline-block; margin-left: 6px; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; vertical-align: 2px; text-transform: uppercase; letter-spacing: .03em; }
.etat-a-faire .pastille-etat { background: var(--soon-badge); color: var(--soon-badge-ink); }
.etat-a-faire .sommaire-num { background: var(--card); }
.etat-en-cours { border-color: var(--wip-ink); background: var(--wip-bg); }
.etat-en-cours .sommaire-num { background: var(--card); border-color: var(--wip-ink); color: var(--wip-ink); }
.etat-en-cours .pastille-etat { background: var(--wip-ink); color: var(--card); }
.etat-validee { border-color: var(--ok-ink); background: var(--ok-bg); }
.etat-validee .sommaire-num { background: var(--ok-ink); color: var(--card); border-color: var(--ok-ink); }
.etat-validee .pastille-etat { background: var(--ok-ink); color: var(--card); }
.auto-eval {
  margin-top: 24px; border: 2px solid var(--ink); border-radius: 20px; padding: 20px 16px 16px;
  background: var(--card); text-align: center; animation: entree .3s ease; box-shadow: 5px 5px 0 var(--ink);
  position: relative; overflow: hidden;
}
.auto-eval::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(90deg, var(--ok-ink) 0 50%, var(--wip-ink) 50% 100%);
}
.auto-eval[hidden] { display: none; }
.auto-eval-sur { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.auto-eval-q { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 1.4rem; margin: 2px 0 4px; }
.auto-eval-aide { font-size: .88rem; color: var(--muted); margin-bottom: 14px; }
.auto-eval-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auto-eval-btns button {
  display: grid; justify-items: center; align-content: center; gap: 4px; aspect-ratio: 1 / 1; min-height: 130px;
  padding: 12px 8px; border: 2px solid var(--ink); border-radius: 18px; color: var(--ink);
  font: inherit; cursor: pointer; box-shadow: 3px 3px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.auto-eval-btns [data-etat="validee"] { background: var(--ok-bg); }
.auto-eval-btns [data-etat="en-cours"] { background: var(--wip-bg); }
.auto-eval-btns button:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.auto-eval-btns button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.ae-emoji { font-size: 2.2rem; line-height: 1; transition: transform .25s ease; }
.auto-eval-btns strong { font-size: .98rem; line-height: 1.25; }
.auto-eval-btns small { font-size: .78rem; color: var(--muted); font-weight: 600; }
.auto-eval-btns button.actif { color: var(--card); transform: scale(1.03); }
.auto-eval-btns button.actif small { color: var(--card); opacity: .9; }
.auto-eval-btns button.actif .ae-emoji { transform: scale(1.2) rotate(-8deg); }
.auto-eval-btns [data-etat="validee"].actif { background: var(--ok-ink); border-color: var(--ok-ink); }
.auto-eval-btns [data-etat="en-cours"].actif { background: var(--wip-ink); border-color: var(--wip-ink); }
.auto-eval-msg { margin-top: 12px; font-size: .95rem; font-weight: 600; color: var(--ink); min-height: 1.2em; }
.auto-eval-msg:not(:empty) { animation: entree .3s ease; }
@media (prefers-reduced-motion: reduce) { .auto-eval-btns button, .ae-emoji { transition: none; } }
.sommaire-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sommaire-txt small { color: var(--muted); font-size: .9rem; }
.sommaire-fleche { color: var(--accent); font-size: 1.2rem; font-weight: 700; }
.bientot-item { border-style: dashed; border-color: var(--soon-border); color: var(--soon-ink); cursor: default; background: none; }
.bientot-item .sommaire-num { background: var(--soon-badge); border-color: var(--soon-border); }
#ecran-sommaire .retour { display: block; margin: 16px auto 0; }

/* Intro et étapes de chapitre */
#ecran-intro, #ecran-etape { text-align: left; }
.intro-emoji { font-size: 3rem; text-align: center; margin-bottom: 6px; }
#ecran-intro .sub, #ecran-intro h1 { text-align: center; }
#ecran-intro .sub { margin: 0 0 4px; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; font-weight: 600; color: var(--accent); }
.intro-texte { margin: 20px 0 24px; display: grid; gap: 12px; line-height: 1.6; }
.intro-texte p:last-child { color: var(--muted); font-size: .95rem; }
.btn-principal {
  display: block; width: 100%; margin-top: 18px; padding: 15px; border: 2px solid var(--ink); border-radius: 14px;
  background: var(--accent); color: #fff; font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink); transition: transform .12s, box-shadow .12s;
}
.btn-principal:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-principal[hidden], .btn-secondaire[hidden], .quiz[hidden], .bilan[hidden], .quiz-retour[hidden] { display: none; }
.btn-secondaire {
  display: block; width: 100%; margin-top: 10px; padding: 13px; border: 2px solid var(--line); border-radius: 14px;
  background: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
#ecran-intro .retour, #ecran-etape > .retour { display: block; margin: 16px auto 0; }
.etape-entete {
  display: flex; align-items: center; gap: 12px; margin: -10px -6px 18px; padding: 10px 6px;
  position: sticky; top: 0; z-index: 5; background: var(--card); border-bottom: 2px solid var(--line);
}
.btn-sommaire {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 9px 14px;
  border: 2px solid var(--ink); border-radius: 99px; background: var(--accent); color: #fff;
  font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; box-shadow: 2px 2px 0 var(--ink);
}
.btn-sommaire:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.intro-haut { margin-bottom: 12px; }
.etape-progres { flex: 1; height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; }
.etape-barre { height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .4s ease; }
.etape-num { font-size: .8rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.etape-titre { font-size: clamp(1.4rem, 5.5vw, 1.8rem); margin-bottom: 14px; }
.cours { display: grid; gap: 14px; line-height: 1.6; }
.katex { font-size: 1.1em; white-space: nowrap; }
.katex-display .katex { white-space: normal; }
.katex-display { margin: .35em 0; padding: .25em 0 .4em; overflow-x: auto; overflow-y: hidden; }   /* le padding évite de rogner le bas des fractions et des indices (défilement horizontal = coupe verticale) */
main, .ecran, .cours, .cours > *, .onglet-corps, .onglet-corps > *, .exo, .exo-correction, .exo-correction > *, .bloc-exos, .quiz, .quiz-retour { min-width: 0; }
.katex-display > .katex { max-width: 100%; }
/* Dans les énoncés et les corrections, une longue formule dans une phrase passe à la ligne
   (après un =, un +…) au lieu de sortir de l'écran du téléphone. */
.exo-enonce .katex, .exo-correction .katex, .corr-item .katex { white-space: normal; }
/* Formule centrée encore trop large après réduction (ajusterFormules, app.js) : ombre sur le bord
   qui montre qu'il faut la faire glisser (fond « local » : l'ombre disparaît au bout du défilement). */
:root { --fond-formule: var(--card); }
.exo-correction { --fond-formule: var(--ok-bg); }
.bloc-regle { --fond-formule: var(--accent-soft); }
.bloc-probleme { --fond-formule: var(--blue-soft); }
.bloc-attention { --fond-formule: var(--bg); }
.katex-display.formule-defile {
  background:
    linear-gradient(to right, var(--fond-formule), var(--fond-formule)) left / 24px 100% no-repeat local,
    linear-gradient(to left, var(--fond-formule), var(--fond-formule)) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .22), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .22), transparent) right / 12px 100% no-repeat scroll;
}
.maths { font-family: "Fraunces", Georgia, serif; font-weight: 600; white-space: nowrap; font-size: 1.08em; }
.bloc-regle { border: 2px solid var(--ink); border-radius: 14px; padding: 14px 16px; background: var(--accent-soft); }
.bloc-regle h3, .bloc-exemples h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.bloc-regle ul, .bloc-exemples ul { padding-left: 18px; display: grid; gap: 6px; }
.bloc-attention { border-left: 4px solid var(--accent); padding: 10px 14px; background: var(--bg); border-radius: 0 12px 12px 0; }
.bloc-attention::before { content: "⚠️ Attention"; display: block; font-weight: 700; font-size: .85rem; margin-bottom: 4px; }
.bloc-exemples { border: 2px dashed var(--line); border-radius: 14px; padding: 14px 16px; }
.bloc-probleme { display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--ink); border-radius: 14px; padding: 14px 16px; background: var(--blue-soft); }
.bloc-probleme > span { font-size: 1.6rem; line-height: 1; }
.bloc-onglets { border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; }
/* Onglets = de vrais boutons (22 oct. 2026) : consigne, compteur « 1 / 3 vu », ✓ sur les cas ouverts, pulsation des cas pas encore vus */
.onglets-haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 10px 12px 0; }
.onglets-consigne { margin: 0; font-weight: 700; font-size: .95rem; color: var(--ink); }
.onglets-compteur { flex-shrink: 0; font-size: .8rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--bg); color: var(--muted); border: 2px solid var(--line); }
.onglets-finis .onglets-compteur { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-ink); }
.onglets-tetes { display: grid; grid-template-columns: repeat(var(--col, 2), minmax(0, 1fr)); gap: 8px; padding: 10px 12px 12px; border-bottom: 2px solid var(--ink); }
.onglet-tete {
  position: relative; min-height: 46px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); color: var(--ink);
  font: inherit; font-weight: 700; font-size: .92rem; padding: 10px 6px; cursor: pointer; line-height: 1.25; min-width: 0; overflow-wrap: anywhere;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .12s, box-shadow .12s, background .2s; touch-action: manipulation;
}
.onglet-tete:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.onglet-tete:not(.onglet-vu) { animation: onglet-appel 1.6s ease-in-out infinite; }
.onglet-tete.actif { background: var(--accent); color: var(--card); border-color: var(--ink); box-shadow: 1px 1px 0 var(--ink); transform: translate(2px, 2px); }
.onglet-coche { display: none; margin-right: 4px; font-weight: 900; }
.onglet-tete.onglet-vu:not(.actif) .onglet-coche { display: inline; color: var(--ok-ink); }
.onglet-tete.onglet-vu:not(.actif) { background: var(--ok-bg); }
@keyframes onglet-appel { 0%, 100% { box-shadow: 3px 3px 0 var(--ink); } 50% { box-shadow: 3px 3px 0 var(--ink), 0 0 0 4px var(--accent-soft); } }
@media (prefers-reduced-motion: reduce) { .onglet-tete:not(.onglet-vu) { animation: none; } }
@media (max-width: 420px) { .onglets-tetes { gap: 6px; padding: 10px 8px 12px; } .onglet-tete { font-size: .82rem; padding: 10px 3px; } }
.onglet-tete.actif em { color: var(--card); }
.onglet-tete em { display: block; font-style: normal; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-top: 2px; }
.onglet-corps { padding: 14px 16px; display: grid; gap: 10px; }
.onglet-corps[hidden], .exo-correction[hidden], #btn-fin-etape[hidden] { display: none; }
.cours[hidden] { display: none; }
#etape-pratique { margin-top: 18px; }
.methode { padding-left: 20px; display: grid; gap: 6px; }
.bloc-exos { display: grid; gap: 14px; margin-top: 6px; }
.bloc-exos h3 { font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; }
.exo-consigne { background: var(--accent-soft); border-radius: 12px; padding: 10px 14px; font-weight: 500; }
.exo { border: 2px solid var(--ink); border-radius: 14px; padding: 14px 16px; }
.exo-num { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 4px; }
.exo-enonce { font-size: 1.05rem; }
.btn-correction {
  margin-top: 12px; width: 100%; padding: 11px; border: 2px dashed var(--ink); border-radius: 12px; background: none;
  color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
.btn-correction.ouvert { border-style: solid; background: var(--bg); }
.exo-correction { margin-top: 12px; padding: 12px 14px; border-left: 4px solid var(--ok-ink); background: var(--ok-bg); border-radius: 0 12px 12px 0; display: grid; gap: 6px; animation: entree .25s ease; }
.quiz, .bilan { margin-top: 22px; border-top: 2px dashed var(--line); padding-top: 18px; animation: entree .3s ease; }
.quiz-haut { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.quiz-label { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.quiz-compteur { font-size: .85rem; color: var(--muted); font-weight: 600; }
.quiz-question { font-size: 1.15rem; font-weight: 600; margin-bottom: 14px; line-height: 1.5; }
.quiz-choix { display: grid; gap: 10px; }
.quiz-choix button {
  text-align: left; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card);
  color: var(--ink); font: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer; transition: background .15s;
}
.quiz-choix button:hover:not(:disabled) { background: var(--accent-soft); }
.quiz-choix button:disabled { cursor: default; opacity: .55; }
.quiz-choix button.juste { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-ink); opacity: 1; }
.quiz-choix button.faux { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); opacity: 1; }
.quiz-retour { margin-top: 14px; padding: 12px 14px; border-radius: 12px; line-height: 1.5; animation: entree .25s ease; }
.quiz-retour.ok { background: var(--ok-bg); color: var(--ok-ink); }
.quiz-retour.ko { background: var(--danger-soft); color: var(--danger); }
.quiz-retour strong { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.bilan { text-align: center; }
.bilan-emoji { font-size: 3.2rem; animation: saut .6s ease; }
@keyframes saut { 0% { transform: scale(.3); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.bilan h2 { font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; margin: 6px 0; }
.bilan p { color: var(--muted); }

footer { margin-top: 28px; color: var(--muted); font-size: .85rem; }

.btn-pdf {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid var(--ink);
  border-radius: 14px; background: var(--ink); color: var(--on-ink); text-decoration: none;
  box-shadow: 4px 4px 0 var(--accent); transition: transform .12s, box-shadow .12s;
}
.btn-pdf .pdf-icone {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 1.5rem;
}
.btn-pdf .pdf-texte { display: grid; gap: 2px; }
.btn-pdf strong { font-size: 1.02rem; }
.btn-pdf small { font-size: .85rem; opacity: .75; font-weight: 500; }
.btn-pdf .pdf-fleche { margin-left: auto; font-size: 1.3rem; font-weight: 700; color: var(--accent); }
.btn-pdf:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--accent); }
.exo-indice { margin-top: 6px; font-size: .9rem; color: var(--muted); }

/* Vidéo (chargée seulement au clic, pour rester léger) */
.bloc-video { border: 2px solid var(--ink); border-radius: 16px; padding: 14px; background: var(--card); box-shadow: 4px 4px 0 var(--ink); }
.video-entete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.video-badge { background: #e62117; color: #fff; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; text-transform: uppercase; letter-spacing: .04em; }
.video-titre { display: block; font-size: 1.02rem; margin-top: 8px; }
.video-passage { font-size: .8rem; font-weight: 700; color: var(--ink); background: var(--bg); border: 1px solid var(--line); padding: 3px 9px; border-radius: 99px; }
.video-accroche { color: var(--muted); font-size: .92rem; margin: 6px 0 12px; }
.video-cadre, .video-iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; border: none; overflow: hidden; background: #000;
}
.video-cadre { position: relative; padding: 0; cursor: pointer; background: radial-gradient(circle at 30% 30%, #2b3a4d, #10161f); }
.video-cadre img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s, filter .3s; }
.video-cadre:hover img { transform: scale(1.03); filter: brightness(.85); }
.video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center; border: 3px solid #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .15s;
}
.video-play svg { margin-left: 4px; }
.video-cadre:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
.video-lecteur { position: relative; border-radius: 12px; overflow: hidden; }
.video-fin {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 8px;
  background: rgba(16, 22, 31, .94); color: #fff; animation: fondu .2s ease;
}
.video-fin[hidden] { display: none; }
.video-fin-icone { font-size: 1.1rem; line-height: 1; }
.video-fin strong { display: block; font-size: .92rem; margin: 2px 0; }
.video-fin p { font-size: .78rem; opacity: .8; margin-bottom: 8px; line-height: 1.35; }
.video-fin-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.video-fin-btns button {
  border: 2px solid #fff; border-radius: 99px; padding: 5px 12px; font: inherit; font-weight: 700; font-size: .8rem; cursor: pointer;
  background: transparent; color: #fff;
}
.video-fin-btns [data-video-action="suite"] { background: var(--accent); border-color: var(--accent); }

/* ===== Calculatrice ===== */
.calc-fab {
  position: fixed; right: 16px; bottom: 18px; z-index: 30; width: 56px; height: 56px; border-radius: 18px;
  border: 2px solid var(--ink); background: var(--accent); color: #fff; display: grid; place-items: center;
  box-shadow: 3px 3px 0 var(--ink); cursor: pointer; transition: transform .15s;
}
.calc-fab:hover { transform: translateY(-2px); }
.calc-fab:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
footer { margin-bottom: 70px; }
.calc-voile { position: fixed; inset: 0; z-index: 44; background: var(--voile); animation: fondu .2s ease; }
.calc-voile[hidden], .calc[hidden], .calc-sci[hidden], .calc-angle[hidden] { display: none; }
.calc-angle:disabled { cursor: default; opacity: .85; }
.calc {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 45; width: 100%; max-width: 420px;
  background: var(--card); border: 2px solid var(--ink); border-bottom: none; border-radius: 22px 22px 0 0;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0,0,0,.25);
  max-height: 100vh; max-height: 100dvh; overflow-y: auto;   /* 100vh : iPhone avant iOS 15.4 */
  animation: monte .25s ease;
}
@keyframes monte { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
.calc-haut { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.calc-onglets { display: flex; gap: 4px; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.calc-onglets button {
  border: none; background: none; border-radius: 9px; padding: 7px 12px; font: inherit; font-weight: 600; font-size: .88rem;
  color: var(--muted); cursor: pointer;
}
.calc-onglets button.actif { background: var(--card); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.calc-angle {
  margin-left: auto; border: 2px solid var(--ink); border-radius: 99px; padding: 5px 10px; background: var(--accent-soft);
  color: var(--ink); font: inherit; font-weight: 700; font-size: .75rem; cursor: pointer;
}
.calc-fermer { margin-left: 0; border: none; background: none; font-size: 1.7rem; line-height: 1; color: var(--ink); cursor: pointer; padding: 0 6px; }
.calc-ecran {
  background: #10161f; color: #f2f0ea; border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; text-align: right;
  min-height: 104px; display: grid; align-content: space-between; gap: 6px; overflow: hidden;
}
.calc-saisie { text-align: left; min-height: 48px; }
.calc-saisie math-field {
  display: block; width: 100%; background: transparent; border: none; color: #f2f0ea; font-size: 1.55rem; outline: none;
  --caret-color: #ffb199; --selection-background-color: rgba(232, 87, 58, .45); --contains-highlight-background-color: rgba(255, 255, 255, .08);
  --placeholder-color: #8fa0b3; --primary-color: #ffb199; --smart-fence-color: #8fa0b3;
}
.calc-saisie math-field::part(virtual-keyboard-toggle), .calc-saisie math-field::part(menu-toggle) { display: none; }
.calc-chargement { opacity: .6; font-size: .95rem; }
.calc-res { min-height: 1.6em; font-size: 1.5rem; color: #fff; overflow-x: auto; overflow-y: hidden; }
.calc-res.apercu { opacity: .55; font-size: 1.15rem; }
.calc-res.erreur { color: #ff8a7a; font-size: 1.15rem; font-weight: 600; }
.calc-touches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }

.calc-touches button {
  height: 42px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink);
  font: inherit; font-size: 1.2rem; font-weight: 600; cursor: pointer; transition: transform .08s, background .12s;
}
.calc-touches button:active { transform: scale(.95); }
.calc-touches .f { background: var(--bg); font-size: 1rem; }
.calc-touches .o { background: var(--accent-soft); color: var(--accent); font-size: 1.4rem; border-color: var(--accent-soft); }
.calc-touches .e { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-soft); }
.calc-touches .egal { background: var(--accent); color: #fff; border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); font-size: 1.5rem; }
.calc[data-mode="scientifique"] .calc-touches button { height: 40px; }
.calc-touches .t { background: var(--blue-soft); }
.calc-touches + .calc-touches { margin-top: 7px; }
.calc-touches .n { background: var(--bg); color: var(--ink); font-size: 1rem; }
.calc-touches .fr { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); display: grid; place-items: center; }
.calc-touches .bascule { font-size: .78rem; font-weight: 700; line-height: 1.1; }
.btn-deconnexion[hidden] { display: none; }

/* Droite graduée (bloc "droite") */
.bloc-droite { margin: 16px 0; padding: 12px 8px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.bloc-droite svg { display: block; width: 100%; height: auto; max-width: 460px; margin: 0 auto; overflow: visible; }
.droite-axe { stroke: var(--ink); stroke-width: 1.6; }
.droite-graduation { fill: var(--muted); font-size: 12px; text-anchor: middle; font-family: inherit; }
.droite-point { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.droite-ecart { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; }
.droite-distance { fill: var(--accent); font-size: 15px; font-weight: 700; text-anchor: middle; font-family: inherit; }
.bloc-droite figcaption { text-align: center; font-size: .9rem; color: var(--muted); margin-top: 6px; }
.droite-zone { stroke: var(--accent); stroke-width: 7; stroke-linecap: butt; opacity: .45; }
.droite-crochet { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: miter; }
.droite-centre { fill: var(--ink); stroke: var(--card); stroke-width: 2; }

/* ===== Habillage de Noël (html[data-saison="noel"]) =====
   Remplace la couleur d'accent par un rouge de Noël, ajoute une touche de vert sapin,
   une guirlande en haut, un bonnet sur le logo et une neige légère (coupée si l'élève
   a demandé moins d'animations). Tout est en CSS : aucun poids en plus pour le téléphone. */
html[data-saison="noel"] {
  --accent: #c8202f;
  --sapin: #1d6b45;
  --neige: rgba(150, 175, 200, .55);
  --bg: #fcf7f2;
  --line: #f1e3da;
}
html[data-saison="noel"][data-theme="sombre"] { --accent: #ff5d64; --sapin: #4cc98a; --neige: rgba(255, 255, 255, .5); --bg: #10161a; --line: #1f2a2e; }
@media (prefers-color-scheme: dark) {
  html[data-saison="noel"][data-theme="auto"] { --accent: #ff5d64; --sapin: #4cc98a; --neige: rgba(255, 255, 255, .5); --bg: #10161a; --line: #1f2a2e; }
}
/* Guirlande rouge / blanc / vert en haut de l'écran */
html[data-saison="noel"] body::after {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 50; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--accent) 0 18px, var(--card) 18px 26px, var(--sapin) 26px 44px, var(--card) 44px 52px);
}
/* Neige légère */
html[data-saison="noel"] body::before {
  content: ""; position: fixed; inset: -200px 0 0 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle, var(--neige) 0 2px, transparent 2.5px),
    radial-gradient(circle, var(--neige) 0 1.5px, transparent 2px),
    radial-gradient(circle, var(--neige) 0 1px, transparent 1.5px);
  background-size: 160px 200px, 110px 140px, 70px 90px;
  background-position: 10px 0, 60px 40px, 30px 70px;
  animation: klm-neige 18s linear infinite;
  opacity: .8;
}
@keyframes klm-neige {
  to { transform: translateY(200px); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-saison="noel"] body::before { animation: none; }
}
/* Bonnet sur le logo */
html[data-saison="noel"] .logo-accueil { position: relative; }
html[data-saison="noel"] .logo-accueil::after {
  content: ""; position: absolute; width: 42px; height: 34px; top: -22px; left: -10px; transform: rotate(-16deg); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 34'%3E%3Cpath d='M7 25 Q11 5 30 5 Q37 7 36 16 Q27 12 25 25 Z' fill='%23c8202f'/%3E%3Ccircle cx='36' cy='17' r='4.2' fill='%23fff' stroke='%23d9dde2'/%3E%3Crect x='3' y='22' width='26' height='8' rx='4' fill='%23fff' stroke='%23d9dde2'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Touches de vert sapin */
html[data-saison="noel"] footer::before { content: "🎄 Joyeuses fêtes ! "; color: var(--sapin); font-weight: 600; }

/* Encart cadenas « termine le quiz » : une case par question, le cadenas s'ouvre à la dernière réponse */
.encart-quiz {
  display: flex; gap: 12px; align-items: center; margin: 22px 0 12px; padding: 12px 14px;
  background: var(--accent-soft); border: 2px solid var(--accent); border-radius: 14px; color: var(--ink);
  transition: background .4s, border-color .4s;
}
.quiz .encart-quiz { margin: 4px 0 14px; }
.encart-quiz[hidden] { display: none; }
.encart-quiz-icone { font-size: 1.9rem; line-height: 1; display: inline-block; transform-origin: 50% 20%; animation: cadenas-secoue 3.2s ease-in-out infinite; }
.encart-quiz strong { display: block; font-size: .95rem; line-height: 1.3; }
.encart-points { display: flex; gap: 6px; margin-top: 8px; }
.encart-points span { width: 26px; height: 8px; border-radius: 99px; background: var(--card); border: 1.5px solid var(--accent); transition: background .3s, transform .3s; }
.encart-points span.fait { background: var(--accent); transform: scaleY(1.25); }
/* Mini-quiz 2 (champ quiz2 d'une étape) : « je sais m'en servir », après les exercices */
.carte-quiz2 {
  margin: 26px 0 8px; padding: 16px 16px 4px; border: 2px solid var(--blue); border-radius: 16px;
  background: var(--blue-soft); box-shadow: 4px 4px 0 var(--blue); animation: entree .3s ease;
}
.carte-quiz2[hidden] { display: none; }
.q2-badge { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--blue); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.q2-titre { margin: 8px 0 2px; font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; font-weight: 700; }
.q2-texte { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.4; }
.q2-score { white-space: pre-line; margin: 8px 0 0; font-weight: 700; color: var(--blue); }
.q2-score[hidden] { display: none; }
/* Meilleur score et dernier essai d'un quiz (sous le bouton, dans le bilan, dans le sommaire) */
.quiz-scores { white-space: pre-line; margin: 10px 0 0; text-align: center; font-weight: 700; color: var(--blue); font-size: 1rem; }
.quiz-scores[hidden] { display: none; }
.bilan .quiz-scores { margin: 4px 0 12px; }
/* Dernière question : le bouton qui termine le quiz se voit tout de suite (retour testeurs du 19 oct.) */
#quiz-suivant.quiz-fin { font-size: 1.15rem; padding: 18px 16px; width: 100%; animation: fin-appel 1.6s ease-in-out infinite; }
@keyframes fin-appel { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { #quiz-suivant.quiz-fin { animation: none; } }
.sommaire-score { display: block; margin-top: 3px; font-weight: 700; color: var(--blue); }
/* Grand quiz final (quiz2 de la dernière étape) : carte dorée, compteur et encouragements */
.carte-quiz2.carte-grand-quiz { border-color: var(--or); background: var(--card); }
.carte-grand-quiz .q2-badge { background: var(--or); color: var(--card); }
.carte-quiz2.carte-grand-quiz .btn-principal { background: var(--accent); }
.quiz-encourage { margin: 0 0 10px; font-size: .85rem; font-weight: 700; color: var(--muted); }
.quiz-encourage-gros { padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-size: .98rem; border: 2px solid var(--accent); animation: encourage-entree .35s ease-out; }
@keyframes encourage-entree { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .quiz-encourage-gros { animation: none; } }
.carte-quiz2 .btn-principal { margin-top: 12px; margin-bottom: 12px; background: var(--blue); }
.encart-quiz.ouvert { background: var(--ok-bg); border-color: var(--ok-ink); }
.encart-quiz.ouvert .encart-points span { background: var(--ok-ink); border-color: var(--ok-ink); }
.encart-quiz.ouvert .encart-quiz-icone { animation: cadenas-ouvre .7s cubic-bezier(.3, .8, .3, 1.5); }
.pratique-debloquee { animation: pratique-arrive .6s ease-out; }
@keyframes cadenas-secoue { 0%, 78%, 100% { transform: rotate(0); } 82% { transform: rotate(-14deg); } 86% { transform: rotate(12deg); } 90% { transform: rotate(-8deg); } 94% { transform: rotate(5deg); } }
@keyframes cadenas-ouvre { 0% { transform: scale(1); } 40% { transform: scale(1.5) rotate(-12deg); } 100% { transform: scale(1); } }
@keyframes pratique-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .encart-quiz-icone, .encart-quiz.ouvert .encart-quiz-icone, .pratique-debloquee { animation: none; } }

/* ===== Habillage Ramadan (html[data-saison="ramadan"]) =====
   Or et bleu nuit, guirlande de lanternes en haut, croissant de lune sur le logo,
   étoiles qui scintillent doucement en fond (immobiles si l'élève a demandé moins d'animations). */
html[data-saison="ramadan"] {
  --accent: #b27a12;
  --nuit: #1f2b5c;
  --etoile: rgba(190, 140, 40, .55);
  --bg: #fbf6ea;
  --line: #efe5cf;
}
html[data-saison="ramadan"][data-theme="sombre"] { --accent: #e8b84a; --nuit: #9fb0f0; --etoile: rgba(240, 200, 110, .7); --bg: #0c1330; --card: #141d42; --line: #1d2850; }
@media (prefers-color-scheme: dark) {
  html[data-saison="ramadan"][data-theme="auto"] { --accent: #e8b84a; --nuit: #9fb0f0; --etoile: rgba(240, 200, 110, .7); --bg: #0c1330; --card: #141d42; --line: #1d2850; }
}
/* Guirlande de lanternes */
html[data-saison="ramadan"] body::after {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 26px; z-index: 50; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='26' viewBox='0 0 64 26'%3E%3Cpath d='M0 2 Q32 10 64 2' fill='none' stroke='%23c9952e' stroke-width='1.2'/%3E%3Cpath d='M32 6 V10' stroke='%23c9952e' stroke-width='1.2'/%3E%3Cpath d='M29 10 h6 l1.5 2 v7 l-1.5 2 h-6 l-1.5 -2 v-7 Z' fill='%23d9a63c' stroke='%23a8771c' stroke-width='.8'/%3E%3Crect x='30.2' y='12.5' width='3.6' height='6' rx='1.2' fill='%23fff3c4'/%3E%3Cpath d='M30.5 23 h3 l-1.5 2.5 Z' fill='%23a8771c'/%3E%3C/svg%3E") repeat-x 0 0 / 64px 26px;
}
/* Étoiles en fond */
html[data-saison="ramadan"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle, var(--etoile) 0 1.6px, transparent 2px),
    radial-gradient(circle, var(--etoile) 0 1.1px, transparent 1.5px),
    radial-gradient(circle, var(--etoile) 0 .8px, transparent 1.2px);
  background-size: 170px 190px, 120px 130px, 80px 95px;
  background-position: 20px 30px, 70px 90px, 40px 10px;
  animation: klm-scintille 4s ease-in-out infinite alternate;
}
@keyframes klm-scintille { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html[data-saison="ramadan"] body::before { animation: none; }
}
/* Croissant et étoile sur le logo */
html[data-saison="ramadan"] .logo-accueil { position: relative; }
html[data-saison="ramadan"] .logo-accueil::after {
  content: ""; position: absolute; width: 28px; height: 28px; top: -14px; right: -14px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M17 3a11 11 0 1 0 8 18A9 9 0 1 1 17 3z' fill='%23e3b04b' stroke='%23a8771c' stroke-width='.8'/%3E%3Cpath d='M21.5 8l.9 2.1 2.3.2-1.7 1.5.5 2.2-2-1.2-2 1.2.5-2.2-1.7-1.5 2.3-.2z' fill='%23e3b04b'/%3E%3C/svg%3E") no-repeat center / contain;
}
html[data-saison="ramadan"] header { padding-top: 14px; }
html[data-saison="ramadan"] footer::before { content: "🌙 Ramadan Moubarak ! "; color: var(--accent); font-weight: 600; }

/* ===== Résultat du quiz (fenêtre animée) ===== */
.popup-resultat { position: relative; z-index: 1; animation: resultat-entree .45s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes resultat-entree { from { opacity: 0; transform: scale(.7) translateY(30px); } to { opacity: 1; transform: none; } }
.score-anneau { position: relative; width: 120px; height: 120px; margin: 0 auto 6px; }
.score-anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anneau-fond { fill: none; stroke: var(--line); stroke-width: 10; }
.anneau-plein { fill: none; stroke: var(--niveau, var(--accent)); stroke-width: 10; stroke-linecap: round; }
.score-texte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.score-texte strong { font-family: "Fraunces", Georgia, serif; font-size: 2.6rem; color: var(--niveau, var(--ink)); }
.score-texte span { font-size: .9rem; color: var(--muted); margin-top: 2px; }
.popup-resultat.niveau-top, .popup-resultat.niveau-bon { --niveau: var(--ok-ink); }
.popup-resultat.niveau-moyen { --niveau: var(--wip-ink); }
.popup-resultat.niveau-faible { --niveau: var(--danger); }
.popup-resultat h2 { color: var(--ink); }
.popup-resultat p { margin-bottom: 14px; }
.resultat-conseil {
  text-align: left; background: var(--accent-soft); border-left: 4px solid var(--niveau, var(--accent));
  border-radius: 10px; padding: 12px 14px; font-size: .93rem; line-height: 1.5; margin-bottom: 20px; color: var(--ink);
}
.resultat-boutons { display: grid; gap: 8px; justify-items: center; }
.resultat-boutons .btn-ok { width: 100%; }
.btn-lien { background: none; border: 0; font: inherit; font-weight: 600; color: var(--muted); padding: 8px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.confettis { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.confettis span {
  position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; opacity: .9;
  animation-name: confetti-chute; animation-timing-function: ease-in; animation-fill-mode: forwards;
}
@keyframes confetti-chute {
  to { transform: translate(var(--derive, 0), 105vh) rotate(540deg); opacity: .2; }
}
@media (prefers-reduced-motion: reduce) {
  .popup-resultat { animation: none; }
}

/* Bouton « Changer de classe » en haut de la liste des chapitres */
.barre-classe {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 18px; padding: 7px 7px 7px 12px; background: var(--accent-soft);
  border: 2px solid var(--ink); border-radius: 14px;
}
.classe-actuelle { font-size: 1rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-changer-classe {
  border: 2px solid var(--ink); border-radius: 10px; background: var(--ink); color: var(--on-ink);
  font: inherit; font-weight: 600; font-size: .86rem; padding: 8px 11px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  box-shadow: 3px 3px 0 var(--accent); min-height: 44px;
}
.btn-changer-classe:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--accent); }
/* Feuille de choix de classe : glisse depuis le bas sur téléphone */
.voile-feuille { place-items: end center; padding: 0; }
.feuille {
  width: 100%; max-width: 520px; background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); border-bottom: 0; border-radius: 22px 22px 0 0;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 4px;
  animation: feuille-monte .28s ease-out;
}
@keyframes feuille-monte { from { transform: translateY(100%); } to { transform: none; } }
.feuille-poignee { width: 44px; height: 5px; border-radius: 99px; background: var(--line); margin: 0 auto 8px; }
.feuille h2 { font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; margin-bottom: 4px; }
.feuille .segment button { min-height: 46px; font-size: 1rem; }
.feuille .btn-lien { justify-self: center; margin-top: 8px; }
@media (min-width: 600px) {
  .voile-feuille { place-items: center; padding: 16px; }
  .feuille { border-bottom: 2px solid var(--ink); border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) { .feuille { animation: none; } }

/* ===== Quiz final : choix sélectionné et correction détaillée ===== */
.quiz-choix button.choisi { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }
.quiz-choix button.choisi::after { content: "✓"; float: right; color: var(--accent); font-weight: 800; }
.correction-finale { display: grid; gap: 12px; margin-top: 22px; }
.correction-finale[hidden] { display: none; }
.correction-finale h3 { font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; }
.correction-aide { color: var(--muted); font-size: .93rem; line-height: 1.5; }
.a-revoir { background: var(--wip-bg); border: 2px solid var(--wip-ink); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; color: var(--ink); }
.a-revoir-liste { display: grid; gap: 6px; }
.btn-revoir {
  text-align: left; font: inherit; font-weight: 600; font-size: .92rem; color: var(--ink); cursor: pointer;
  background: var(--card); border: 2px solid var(--ink); border-radius: 10px; padding: 9px 12px;
}
.btn-revoir::after { content: " →"; color: var(--accent); }
.corr-item { border: 2px solid var(--line); border-left-width: 6px; border-radius: 12px; padding: 12px 14px; background: var(--card); display: grid; gap: 6px; }
.correction-finale > *, .corr-item > * { min-width: 0; }   /* un long calcul ou un programme ne doit pas élargir la correction */
.corr-item.ok { border-left-color: var(--ok-ink); }
.corr-item.ko { border-left-color: var(--danger); }
.corr-tete { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .9rem; }
.corr-tete em { font-style: normal; font-weight: 600; font-size: .75rem; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; }
.corr-question { font-weight: 600; }
.corr-rep { font-size: .95rem; }
.corr-faux { color: var(--danger); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.corr-explication { font-size: .93rem; line-height: 1.55; background: var(--danger-soft); border-radius: 8px; padding: 8px 10px; }
.corr-item details summary { cursor: pointer; color: var(--ok-ink); font-weight: 600; font-size: .9rem; }
.corr-item details p { font-size: .93rem; line-height: 1.55; margin-top: 6px; }

/* Navigation en bas d'une étape : « Passer à l'étape N » + retour à l'étape précédente */
.nav-etapes { display: grid; gap: 6px; margin-top: 18px; }
.nav-etapes .btn-principal { margin-top: 0; }
.btn-precedente {
  justify-self: center; background: none; border: 0; font: inherit; font-weight: 600; font-size: .95rem;
  color: var(--muted); padding: 10px 12px; cursor: pointer; min-height: 44px;
}
.btn-precedente:hover { color: var(--ink); }

/* ===== Tablette et ordinateur =====
   Téléphone (< 760 px) : inchangé, une colonne de 520 px.
   Tablette et petits écrans (≥ 760 px) : carte plus large, chapitres et classes en 2 colonnes (sommaire : une étape par ligne).
   Ordinateur et tablette à l'horizontale (≥ 1100 px) : dans les étapes, la liste des étapes reste à gauche
   et la calculatrice s'ouvre en panneau à droite sans cacher le cours.
   Le texte du cours garde une largeur de lecture confortable (pas plus de ~75 caractères par ligne). */
.etapes-laterales { display: none; }
body { --largeur: 520px; }
main, .topbar, .erreur-auth { max-width: var(--largeur); }

@media (min-width: 760px) {
  body { --largeur: 760px; padding-top: 36px; }
  main { padding: 40px 48px; }
  .chapitres { grid-template-columns: 1fr 1fr; }
  .classes { grid-template-columns: 1fr 1fr; }
  .niveau { padding: 32px 16px; }
  .niveau .icone { font-size: 2.8rem; }
  .niveau.autre { padding: 16px; }
  .niveau.autre .icone { font-size: 2.2rem; }
  #ecran-etape .cours, #ecran-intro { font-size: 1.05rem; }
}

@media (min-width: 1100px) {
  body[data-ecran="ecran-etape"] { --largeur: 1180px; }
  #ecran-etape.visible {
    display: grid; grid-template-columns: 270px minmax(0, 1fr); column-gap: 40px; align-items: start; text-align: left;
  }
  #ecran-etape.visible > * { grid-column: 2; }
  #ecran-etape.visible > .etapes-laterales {
    display: grid; gap: 6px; grid-column: 1; grid-row: 1 / span 40;
    position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto;
    padding: 0 6px 6px 0;
  }
  /* En-tête de l'étape dans la colonne de droite */
  #ecran-etape .etape-entete { margin: 0 0 18px; padding: 6px 0 10px; }
  /* Calculatrice : panneau à droite, le cours reste visible et utilisable */
  .calc-voile { display: none !important; }
  .calc {
    left: auto; right: 24px; bottom: 24px; transform: none; max-width: 400px; max-height: calc(100vh - 48px);
    border-bottom: 2px solid var(--ink); border-radius: 20px; animation: calc-glisse .25s ease;
  }
  @keyframes calc-glisse { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
}

/* ===== Menu des étapes repliable (retour d'une testeuse sur iPad, 21 oct. 2026) =====
   Téléphone (< 760 px) : pas de menu ni de bouton, rien ne change.
   Écran étroit (760 à 1099 px, iPad en portrait) : menu caché, « ☰ Les étapes » l'ouvre en tiroir par-dessus le cours.
   Écran large (≥ 1100 px, iPad en paysage, ordinateur) : menu à gauche, « ◀ Replier le menu » le replie et le cours prend toute la largeur.
   Menu fermé : l'en-tête collant garde « ☰ Les étapes » et « Étape 3 / 8 ». État posé par js/app.js sur html[data-menu-etapes]. */
.btn-menu-etapes, .etapes-voile, .laterale-replier { display: none; }
@media (min-width: 760px) {
  .laterale-chapitre { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
  .etapes-laterales h2 { font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; margin-bottom: 8px; }
  .laterale-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px;
    border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink);
    font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.3; cursor: pointer; transition: background .15s, border-color .15s;
  }
  .laterale-item:hover { background: var(--accent-soft); border-color: var(--ink); }
  .laterale-item small { display: block; font-size: .7rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
  .laterale-item .sommaire-num { width: 30px; height: 30px; font-size: .85rem; }
  .laterale-item.etat-en-cours { border-color: var(--wip-ink); background: var(--wip-bg); }
  .laterale-item.etat-validee { border-color: var(--ok-ink); background: var(--ok-bg); }
  .laterale-item.actif { border-color: var(--ink); box-shadow: 3px 3px 0 var(--accent); }
  .laterale-item .katex { font-size: 1em; }

  /* Bouton d'ouverture, bien visible dans l'en-tête collant */
  .btn-menu-etapes {
    display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; padding: 9px 16px; min-height: 44px;
    border: 2px solid var(--ink); border-radius: 99px; background: var(--ink); color: var(--on-ink);
    font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; box-shadow: 2px 2px 0 var(--accent);
    animation: menu-bouton .3s ease;
  }
  .btn-menu-etapes:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--accent); }
  .btn-menu-etapes:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--accent); }
  html[data-menu-etapes="ouvert"] .btn-menu-etapes { display: none; }
  @keyframes menu-bouton { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
  /* Menu fermé : l'étape en cours se lit d'un coup d'œil */
  html[data-menu-etapes="replie"] #ecran-etape .etape-num { font-size: .95rem; color: var(--ink); }

  /* Bouton pour replier ou fermer, en haut du menu */
  .laterale-replier {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-bottom: 6px; padding: 9px 12px;
    border: 2px solid var(--ink); border-radius: 12px; background: var(--card); color: var(--ink);
    font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; box-shadow: 2px 2px 0 var(--ink);
  }
  .laterale-replier:hover { background: var(--accent-soft); }
  .laterale-replier:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
  .replier-large { display: none; }
}

/* Écran étroit : tiroir qui glisse depuis la gauche, par-dessus le cours */
@media (min-width: 760px) and (max-width: 1099.98px) {
  #ecran-etape > .etapes-laterales {
    display: grid; align-content: start; gap: 6px; text-align: left;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 43; width: min(340px, 86vw);
    padding: 18px 16px 28px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--card); border-right: 2px solid var(--ink); box-shadow: 6px 0 0 var(--accent);
    transform: translateX(-110%); visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  html[data-menu-etapes="ouvert"] #ecran-etape > .etapes-laterales { transform: none; visibility: visible; transition: transform .3s ease; }
  .etapes-voile {
    display: block; position: fixed; inset: 0; z-index: 42; background: var(--voile);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
  }
  html[data-menu-etapes="ouvert"] .etapes-voile { opacity: 1; visibility: visible; transition: opacity .3s ease; }
}

/* Écran large : colonne de gauche qui se replie en douceur */
@media (min-width: 1100px) {
  .replier-large { display: inline; }
  .replier-etroit { display: none; }
  #ecran-etape.visible { transition: grid-template-columns .35s ease, column-gap .35s ease; }
  #ecran-etape.visible > .etapes-laterales { transition: opacity .3s ease, transform .35s ease; }
  html[data-menu-etapes="replie"] #ecran-etape.visible { grid-template-columns: 0px minmax(0, 1fr); column-gap: 0; }
  html[data-menu-etapes="replie"] #ecran-etape.visible > .etapes-laterales {
    opacity: 0; transform: translateX(-30px); visibility: hidden; overflow: hidden; pointer-events: none; padding: 0;
    transition: opacity .2s ease, transform .35s ease, visibility 0s linear .35s;
  }
}

/* ===== Blocs interactifs : démonstration, triangle de Pascal, décideur, diagramme, arbre ===== */
.bloc-demo { border: 2px solid var(--blue); border-radius: 14px; padding: 14px 16px; background: var(--blue-soft); text-align: left; display: grid; gap: 10px; }
.bloc-demo h3 { font-size: 1rem; }
.demo-lignes { padding-left: 22px; display: grid; gap: 10px; }
.demo-lignes li { animation: entree .3s ease; }
.demo-lignes li[hidden] { display: none; }
.demo-calcul { overflow-x: auto; }
.demo-pourquoi { font-size: .9rem; color: var(--muted); margin-top: 2px; }
.demo-pourquoi::before { content: "↳ "; color: var(--blue); }
.demo-conclusion { font-weight: 600; }
.demo-conclusion[hidden] { display: none; }
.demo-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-boutons[hidden] { display: none; }
.demo-boutons button {
  font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; border-radius: 10px; padding: 9px 14px; min-height: 44px;
  border: 2px solid var(--ink); background: var(--ink); color: var(--on-ink);
}
.demo-boutons .demo-tout { background: var(--card); color: var(--ink); }

.bloc-pascal { display: grid; gap: 10px; }
.pascal-defile { overflow-x: auto; }
.pascal { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; }
.pascal th { font-size: .78rem; color: var(--muted); font-weight: 700; padding: 4px; }
.pascal .pascal-coin { font-style: italic; }
.pascal td { padding: 2px; }
.pascal td button {
  min-width: 36px; height: 36px; border-radius: 8px; border: 2px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; transition: background .15s, border-color .15s;
}
.pascal td button:hover { border-color: var(--ink); }
.pascal td button.parent { background: var(--accent-soft); border-color: var(--accent); }
.pascal td button.cible { background: var(--ok-bg); border-color: var(--ok-ink); color: var(--ok-ink); }
.pascal-info { text-align: center; font-size: .95rem; min-height: 2.4em; }
.pascal-legende { text-align: center; font-size: .88rem; color: var(--muted); }

.bloc-decideur { border: 2px solid var(--ink); border-radius: 16px; padding: 16px; background: var(--bg); display: grid; gap: 12px; text-align: left; }
.bloc-decideur h3 { font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; }
.dec-q { display: grid; gap: 8px; animation: entree .3s ease; }
.dec-q[hidden], .dec-resultat[hidden], .dec-recommencer[hidden] { display: none; }
.dec-q small { display: block; color: var(--muted); font-size: .85rem; }
.dec-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dec-choix button {
  font: inherit; font-weight: 700; padding: 11px; border-radius: 12px; cursor: pointer; min-height: 46px;
  border: 2px solid var(--ink); background: var(--card); color: var(--ink);
}
.dec-choix button.actif { background: var(--ink); color: var(--on-ink); }
.dec-resultat {
  display: grid; gap: 6px; padding: 14px; border-radius: 12px; border: 2px solid var(--ok-ink); background: var(--ok-bg);
  color: var(--ink); animation: entree .3s ease;
}
.dec-resultat strong { font-size: 1.1rem; color: var(--ok-ink); }
.dec-resultat small { color: var(--ink); font-size: .9rem; line-height: 1.5; }
.dec-recommencer { justify-self: start; }

.venn-univers { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.venn-a { fill: var(--accent); fill-opacity: .12; stroke: var(--accent); stroke-width: 2; }
.venn-b { fill: var(--blue); fill-opacity: .12; stroke: var(--blue); stroke-width: 2; }
.venn-nb { fill: var(--ink); font-size: 17px; font-weight: 700; text-anchor: middle; font-family: inherit; }
.venn-titre { fill: var(--muted); font-size: 12px; font-weight: 600; font-family: inherit; }
.venn-nom { font-size: 13px; font-weight: 700; text-anchor: middle; font-family: inherit; }
.venn-nom-a { fill: var(--accent); }
.venn-nom-b { fill: var(--blue); }

.arbre-trait { stroke: var(--muted); stroke-width: 1.3; }
.arbre-noeud { fill: var(--accent); }
.arbre-texte { fill: var(--ink); font-size: 12px; font-family: inherit; }
.arbre-texte-haut { text-anchor: middle; font-weight: 600; paint-order: stroke; stroke: var(--card); stroke-width: 4px; }
.pascal .pascal-coin { white-space: nowrap; font-size: .7rem; }
.pascal td { padding: 1px; }
.pascal td button { min-width: 31px; height: 32px; padding: 0 2px; font-size: .85rem; }
.bloc-demo, .demo-lignes, .demo-lignes li, .demo-calcul { min-width: 0; }

/* Logo cliquable : retour à l'accueil */
.logo-accueil { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; border-radius: 14px; }
.logo-accueil:hover .logo-kif { transform: scale(1.03); }
.logo-accueil:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.logo-kif { transition: transform .2s ease; }

/* Options de Terminale (spécialité, complémentaires, expertes) */
.classe-option { text-align: left; }
.classe-option span { display: grid; gap: 2px; }
.classe-option small { font-weight: 500; font-size: .85rem; color: var(--muted); }
.classe-option.choisie small { color: var(--on-ink); }
@media (max-width: 420px) { .btn-changer-classe .texte-large { display: none; } }

/* Encart « À l'étape suivante » */
.encart-suite {
  margin-top: 24px; padding: 16px 18px; border-radius: 16px; text-align: left;
  background: var(--blue-soft); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--accent);
  display: grid; gap: 4px; animation: entree .35s ease;
}
.encart-suite[hidden] { display: none; }
.suite-label { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.suite-titre { font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; line-height: 1.3; color: var(--ink); }
.suite-texte { font-size: 1rem; line-height: 1.5; color: var(--ink); }
.encart-suite + .nav-etapes { margin-top: 12px; }
/* Sur tablette et ordinateur : tuiles d'auto-évaluation de taille fixe (pas de carrés géants) */
@media (min-width: 560px) {
  .auto-eval-btns { grid-template-columns: repeat(2, 190px); justify-content: center; gap: 14px; }
  .auto-eval-btns button { aspect-ratio: auto; min-height: 0; height: 150px; }
}

/* ===== Sommaire en « parcours » coloré ===== */
:root { --p1: var(--accent); --p2: #2f6fe0; --p3: #8250df; --p4: #0f9488; --p5: #d6407f; --p6: #c77700; --or: #c99a06; }
html[data-theme="sombre"] { --p2: #6f9cf0; --p3: #b08cf0; --p4: #3cc4b4; --p5: #f07aaa; --p6: #f3b450; --or: #f5c842; }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] { --p2: #6f9cf0; --p3: #b08cf0; --p4: #3cc4b4; --p5: #f07aaa; --p6: #f3b450; --or: #f5c842; }
}
.parcours { position: relative; gap: 12px; }
.parcours::before {   /* le chemin qui relie les étapes */
  content: ""; position: absolute; left: 33px; top: 24px; bottom: 24px; width: 0;
  border-left: 3px dotted var(--line);
}
.parcours .sommaire-item {
  --c: var(--p1); position: relative; padding: 12px 14px; border: 2px solid var(--line); border-left: 6px solid var(--c);
  background: color-mix(in srgb, var(--c) 8%, var(--card)); border-radius: 16px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.parcours .couleur-1 { --c: var(--p1); } .parcours .couleur-2 { --c: var(--p2); } .parcours .couleur-3 { --c: var(--p3); }
.parcours .couleur-4 { --c: var(--p4); } .parcours .couleur-5 { --c: var(--p5); } .parcours .couleur-6 { --c: var(--p6); }
.parcours .parcours-final { --c: var(--or); }
.parcours .parcours-intro { --c: var(--ink); background: var(--card); }
.parcours button.sommaire-item:hover { transform: translateX(4px); box-shadow: 3px 3px 0 var(--c); background: color-mix(in srgb, var(--c) 14%, var(--card)); }
.parcours .sommaire-num {
  width: 40px; height: 40px; background: var(--c); color: var(--card); border: 3px solid var(--card); box-shadow: 0 0 0 2px var(--c);
  font-size: 1rem; position: relative; z-index: 1;
}
.parcours .parcours-intro .sommaire-num { background: var(--card); box-shadow: 0 0 0 2px var(--ink); }
.parcours-label {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: .72rem !important; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--c) !important;
}
.parcours .sommaire-txt strong { font-size: 1rem; line-height: 1.3; color: var(--ink); }
.parcours-emoji { font-size: 1.6rem; flex-shrink: 0; }
.parcours .pastille-etat { margin-left: 0; font-size: .64rem; }
/* États */
.parcours .etat-validee { border-color: var(--ok-ink); border-left-color: var(--ok-ink); background: var(--ok-bg); }
.parcours .etat-validee .sommaire-num { background: var(--ok-ink); box-shadow: 0 0 0 2px var(--ok-ink); color: var(--card); }
.parcours .etat-validee .parcours-label { color: var(--ok-ink) !important; }
.parcours .etat-en-cours { border-color: var(--wip-ink); }
.parcours .etat-a-faire .sommaire-num { background: var(--c); }
.parcours .parcours-ici { border-color: var(--c); box-shadow: 4px 4px 0 var(--c); }
.parcours .pastille-ici { background: var(--c); color: var(--card); }
.parcours .parcours-ici .sommaire-num { animation: pulse-ici 1.8s ease-in-out infinite; }
@keyframes pulse-ici { 0%, 100% { box-shadow: 0 0 0 2px var(--c); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c) 30%, transparent); } }
@media (prefers-reduced-motion: reduce) { .parcours .parcours-ici .sommaire-num { animation: none; } }
/* Intro pas encore vue : c'est elle qu'on montre (22 oct. 2026) */
.parcours .parcours-intro.intro-a-voir { --c: var(--accent); border-color: var(--accent); background: var(--accent-soft); animation: intro-appel 1.4s ease-in-out infinite; }
.parcours .intro-a-voir .sommaire-num { background: var(--accent); color: var(--card); }
.intro-a-voir-txt { display: block; margin-top: 3px; font-size: .84rem !important; font-weight: 700; color: var(--ink) !important; }
@keyframes intro-appel { 0%, 45%, 100% { transform: translateX(0); } 10% { transform: translateX(12px); } 20% { transform: translateX(0); } 30% { transform: translateX(12px); } }
@media (prefers-reduced-motion: reduce) { .parcours .parcours-intro.intro-a-voir { animation: none; } }
.intro-raz { justify-self: start; margin: -4px 0 4px; padding: 6px 12px; border: 1px dashed var(--muted); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.parcours .sommaire-fleche { color: var(--c); }
.parcours .etat-validee .sommaire-fleche { color: var(--ok-ink); }

/* ===== Figures de géométrie ===== */
.fig-svg { display: block; width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.fig-trait { stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.fig-point { fill: var(--ink); }
.fig-nom { fill: var(--ink); font-size: 14px; font-weight: 700; text-anchor: middle; font-family: inherit; font-style: italic; }
.fig-cote { fill: var(--accent); font-size: 13px; font-weight: 700; text-anchor: middle; font-family: inherit; }
.exo-figure { margin: 10px auto 4px; max-width: 320px; padding: 8px; background: var(--bg); border-radius: 12px; }

/* ===== Thalès animé ===== */
.bloc-thales { border: 2px solid var(--ink); border-radius: 16px; padding: 12px; background: var(--card); display: grid; gap: 10px; box-shadow: 4px 4px 0 var(--accent); }
.thales-svg { width: 100%; max-width: 420px; height: auto; margin: 0 auto; display: block; overflow: hidden; }
.th-grand { fill: var(--blue); fill-opacity: .08; stroke: var(--blue); stroke-width: 2.2; stroke-linejoin: round; }
.th-petit { fill: var(--accent); fill-opacity: .14; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; }
.th-droite { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; }
.th-droite-pleine { stroke: var(--ink); stroke-width: 2; }
.th-para { stroke-width: 4; stroke-linecap: round; }
.th-para-grand { stroke: var(--blue); }
.th-para-petit { stroke: var(--ok-ink); }
.th-ok { stroke: var(--ok-ink); }
.th-ko { stroke: var(--danger); }
.th-nom { fill: var(--ink); font-size: 15px; font-weight: 700; font-style: italic; font-family: inherit; }
.th-nom-petit { fill: var(--accent); }
.thales-curseur { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.thales-curseur input { width: 100%; accent-color: var(--accent); height: 32px; }
/* Curseurs bien visibles (tous les curseurs des animations) : piste épaisse remplie jusqu'au rond (--pct posé par app.js),
   gros rond avec des flèches ; tant que l'élève n'y a pas touché, le rond « appelle » et une pastille dit quoi faire. */
.thales-curseur input[type="range"] { -webkit-appearance: none; appearance: none; height: 44px; margin: 0; padding: 0;
  background: transparent; cursor: grab; --pct: 50%; }
.thales-curseur input[type="range"]:active { cursor: grabbing; }
.thales-curseur input[type="range"]::-webkit-slider-runnable-track { height: 12px; border-radius: 99px;
  background: linear-gradient(to right, var(--accent) var(--pct), var(--line) var(--pct)); box-shadow: inset 0 0 0 2px var(--ink); }
.thales-curseur input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 34px; height: 34px; margin-top: -11px;
  border-radius: 50%; border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E") center / 18px no-repeat; }
.thales-curseur input[type="range"]::-moz-range-track { height: 12px; border-radius: 99px; background: var(--line); box-shadow: inset 0 0 0 2px var(--ink); }
.thales-curseur input[type="range"]::-moz-range-progress { height: 12px; border-radius: 99px; background: var(--accent); }
.thales-curseur input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.thales-curseur input[type="range"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.bloc-thales:not(.curseurs-touches) .thales-curseur:not(.curseur-touche) input[type="range"]::-webkit-slider-thumb { animation: curseur-appel 1.4s ease-out infinite; }
.bloc-thales:not(.curseurs-touches) .thales-curseur:not(.curseur-touche) input[type="range"]::-moz-range-thumb { animation: curseur-appel 1.4s ease-out infinite; }
@keyframes curseur-appel {
  0% { box-shadow: 2px 2px 0 var(--ink), 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%, 100% { box-shadow: 2px 2px 0 var(--ink), 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.bloc-thales:not(.curseurs-touches) .thales-curseur:not(.curseur-touche)::after { content: "↔ Fais glisser le rond"; justify-self: center; margin-top: -4px; padding: 3px 10px;
  border-radius: 99px; background: var(--accent-soft); border: 2px dashed var(--accent); font-size: .78rem; font-weight: 700; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .thales-curseur input[type="range"]::-webkit-slider-thumb { animation: none !important; }
  .thales-curseur input[type="range"]::-moz-range-thumb { animation: none !important; }
  .bloc-cartes .carte .carte-recto { animation: none; }
}
.thales-rapports { display: grid; gap: 6px; }
.th-mode { font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.th-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 10px; border-radius: 10px; background: var(--bg); }
.th-ligne strong { color: var(--ok-ink); font-size: 1.05rem; }
.th-bilan { font-weight: 700; text-align: center; color: var(--ok-ink); }
.th-bilan-ko { color: var(--danger); }
.thales-legende { font-size: .88rem; color: var(--muted); text-align: center; }

/* Figures dans les quiz */
.fig-para { stroke: var(--ok-ink); stroke-width: 2.6; stroke-linecap: round; }
.fig-chevron { fill: none; stroke: var(--ok-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.quiz-figure { display: block; margin: 12px auto 0; max-width: 300px; padding: 8px; background: var(--bg); border-radius: 12px; font-weight: 400; }
.quiz-choix button.choix-figure { display: grid; justify-items: center; gap: 4px; padding: 8px; }
.choix-fig { display: block; width: 100%; max-width: 170px; }
.choix-figure small { font-weight: 700; color: var(--muted); }

/* ===== Pythagore animé + angle droit ===== */
.fig-droit { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.pyth-svg { max-width: 360px; }
.py-carre { stroke-width: 2; stroke-linejoin: round; }
.py-a { fill: var(--blue); fill-opacity: .16; stroke: var(--blue); }
.py-b { fill: var(--accent); fill-opacity: .16; stroke: var(--accent); }
.py-c { fill: var(--ok-ink); fill-opacity: .14; stroke: var(--ok-ink); }
.py-tri { fill: var(--card); stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.py-aire { fill: var(--ink); font-size: 15px; font-weight: 800; text-anchor: middle; font-family: inherit; }
.py-droit { stroke-width: 1.6; }

/* ===== Balance des équations ===== */
.bal-equation { text-align: center; font-size: 1.2rem; font-weight: 700; margin: 0; }
.bal-svg { max-width: 360px; }
.bal-pied { fill: var(--ink); stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.bal-fleau { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.bal-axe { fill: var(--accent); stroke: var(--ink); stroke-width: 2; }
.bal-fil { stroke: var(--muted, var(--ink)); stroke-width: 1.4; opacity: .7; }
.bal-plateau { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 2; }
.bal-poids { stroke: var(--ink); stroke-width: 1.5; }
.bal-gauche { fill: var(--accent); }
.bal-droite { fill: var(--blue); }
.bal-val { fill: var(--card); font-size: 15px; font-weight: 800; text-anchor: middle; font-family: inherit; }
.bal-x { color: var(--accent); }

/* ===== Animations (js/animations.js) ===== */
.anim-svg { max-width: 380px; }
.anim-val { color: var(--accent); }
.dist-axe { stroke: var(--ink); stroke-width: 2; fill: none; }
.dist-grad { stroke: var(--ink); stroke-width: 1.5; }
.dist-nb { fill: var(--muted); font-size: 12px; text-anchor: middle; font-family: inherit; }
.dist-zone { stroke: var(--ok-ink); stroke-width: 9; stroke-linecap: round; opacity: .35; }
.dist-ecart { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.dist-ko { stroke: var(--danger); }
.dist-lab { fill: var(--accent); font-size: 14px; font-weight: 800; text-anchor: middle; font-family: inherit; }
.dist-ko-t { fill: var(--danger); }
.dist-a { fill: var(--ink); }
.dist-x { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.dist-ico { font-size: 22px; text-anchor: middle; }
.ord-choix { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; font-weight: 600; font-size: .92rem; }
.ord-choix div { display: flex; gap: 6px; }
.ord-choix button { border: 2px solid var(--ink); background: var(--card); color: var(--ink); border-radius: 999px; padding: 5px 12px; font: inherit; font-weight: 700; cursor: pointer; }
.ord-choix button.actif { background: var(--ink); color: var(--card); }
.ord-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ord-groupe { border: 2px dashed var(--line); border-radius: 12px; padding: 6px; display: grid; gap: 4px; transition: border-color .4s, background .4s; }
.ord-ligne { display: flex; gap: 4px; max-height: 40px; overflow: hidden; transition: max-height .5s ease, opacity .4s ease, margin .5s; }
.ord-chip { flex: 1; text-align: center; font-size: .8rem; font-weight: 700; color: var(--card); background: var(--c); border-radius: 8px; padding: 3px 2px; }
.ord-fusion .ord-groupe { border: 2px solid var(--ok-ink); background: var(--ok-bg); }
.ord-fusion .ord-ligne:not(:first-child) { max-height: 0; opacity: 0; margin-top: -4px; }
.prod-tuiles { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.prod-tuile { min-width: 72px; border: 2px solid var(--ink); border-radius: 12px; padding: 6px 8px; text-align: center; background: var(--bg); transition: background .3s, border-color .3s, transform .3s; }
.prod-tuile small { display: block; font-size: .8rem; color: var(--muted); }
.prod-tuile b { font-size: 1.3rem; }
.prod-op { font-size: 1.3rem; font-weight: 800; }
.prod-zero { background: var(--ok-bg); border-color: var(--ok-ink); color: var(--ok-ink); transform: scale(1.08); }
.prod-res { border-style: dashed; }
.car-courbe { fill: none; stroke: var(--blue); stroke-width: 3; }
.car-droite { stroke: var(--accent); stroke-width: 2.5; }
.car-ko { stroke: var(--danger); stroke-dasharray: 6 5; }
.car-tir { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.car-nom { fill: var(--blue); font-size: 13px; font-weight: 700; font-family: inherit; }
.car-a { fill: var(--accent); }
.ech-mur { fill: var(--line); stroke: var(--ink); stroke-width: 1.5; }
.ech-sol { stroke: var(--ink); stroke-width: 2.5; }
.ech-montant { stroke: var(--p6); stroke-width: 4; stroke-linecap: round; }
.ech-barreau { stroke: var(--p6); stroke-width: 3; }
.ech-h { fill: var(--blue); }
.omb-rayon { stroke: var(--or); stroke-width: 2; stroke-dasharray: 7 5; }
.omb-soleil { fill: var(--or); }
.omb-ombre { stroke: var(--muted); stroke-width: 7; opacity: .45; }
.omb-lampe { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.omb-tete { fill: var(--or); stroke: var(--ink); stroke-width: 2; }
.omb-nour { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.omb-nour-t { fill: var(--accent); }
.omb-p { fill: var(--accent); }
.ord-fusion .ord-groupe { gap: 0; }

/* ===== Mobile : la barre du haut (logo) reste visible quand on fait défiler ===== */
@media (max-width: 759px) {
  .topbar {
    position: sticky; top: 0; z-index: 20; align-self: stretch; width: auto; max-width: none;
    margin: -28px -16px 24px; padding: 10px 16px; background: var(--bg); border-bottom: 2px solid var(--line);
  }
  /* l'en-tête d'une étape se colle juste sous la barre du haut */
  .etape-entete { top: var(--haut-topbar, 0px); }
  html { scroll-padding-top: calc(var(--haut-topbar, 0px) + 72px); }
}

/* ===== Feuille « Change de classe » : une couleur par cycle, une tuile par classe ===== */
.feuille { gap: 10px; }
.feuille h2 { margin-bottom: 0; }
.feuille-sous-titre { color: var(--muted); font-size: .9rem; margin: -6px 0 2px; }
.cycle { display: grid; gap: 7px; }
.cycle-titre { display: flex; align-items: baseline; gap: 6px; font-weight: 800; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c); margin: 0; }
.cycle-titre small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); font-size: .8rem; }
.cycle-tuiles { display: grid; gap: 8px; }
.cycle-4 { grid-template-columns: repeat(4, 1fr); }
.cycle-2 { grid-template-columns: repeat(2, 1fr); }
.cycle-3 { grid-template-columns: repeat(3, 1fr); }
.tuile-classe {
  display: grid; justify-items: center; gap: 1px; padding: 9px 4px 8px; min-height: 74px; cursor: pointer;
  font: inherit; color: var(--ink); border-radius: 14px; border: 2px solid color-mix(in srgb, var(--c) 45%, var(--card));
  background: color-mix(in srgb, var(--c) 10%, var(--card)); transition: transform .15s, box-shadow .15s, background .15s;
}
.tuile-classe b { font-family: "Fraunces", Georgia, serif; font-size: 1.45rem; line-height: 1.1; color: var(--c); }
.tuile-classe small { font-size: .68rem; font-weight: 600; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-nb { font-style: normal; font-size: .64rem; font-weight: 700; color: var(--c); margin-top: 3px; }
.tc-nb.tc-vide { color: var(--muted); opacity: .7; }
.tuile-classe:hover { transform: translateY(-2px); box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 35%, transparent); }
.tuile-classe:active { transform: translateY(1px); box-shadow: none; }
.tuile-classe.actif { background: var(--c); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.tuile-classe.actif b, .tuile-classe.actif small, .tuile-classe.actif .tc-nb { color: var(--card); }
.tuile-classe:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }

/* Dans les animations, le curseur passe sous les résultats : le doigt ne cache plus rien */
.bloc-thales > .thales-curseur { order: 2; }
.bloc-thales > .thales-legende { order: 3; }

/* Balance : verdict bien visible au-dessus, qui « éclate » à l'équilibre */
.bal-etat {
  text-align: center; font-weight: 800; font-size: 1rem; padding: 8px 12px; border-radius: 14px;
  border: 2px dashed var(--line); color: var(--muted); background: var(--bg); transition: background .25s, color .25s, border-color .25s;
}
.bal-etat span { display: block; font-weight: 600; font-size: .85rem; }
.bal-equilibre .bal-etat { background: var(--ok-bg); color: var(--ok-ink); border: 2px solid var(--ok-ink); font-size: 1.15rem; box-shadow: 3px 3px 0 var(--ok-ink); }
.bal-pop { animation: bal-pop .55s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes bal-pop { 0% { transform: scale(.85); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }
.bal-equilibre .bal-plateau { fill: var(--ok-bg); stroke: var(--ok-ink); }
.bal-equilibre .bal-axe { fill: var(--ok-ink); }
@media (prefers-reduced-motion: reduce) { .bal-pop { animation: none; } }

/* ===== Blocs « faciles à lire » (js/animations.js : cartes, etapes, essaie) ===== */
.bloc-cartes h3, .bloc-essaie h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
/* « Les mots à connaître » : carte dorée bien visible (différente des règles, problèmes, méthodes et « À toi »), compteur de cartes retournées */
.bloc-cartes { display: grid; gap: 10px; border: 2px solid var(--ink); border-radius: 16px; padding: 14px 14px 16px;
  background: color-mix(in srgb, var(--p6) 12%, var(--card)); box-shadow: 4px 4px 0 var(--p6); }
.bloc-cartes h3 { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px;
  border-radius: 12px; background: var(--p6); color: var(--card); font-size: .95rem; line-height: 1.3; }
.bloc-cartes h3::before { content: "📖"; font-size: 1.05rem; }
.bloc-cartes .cartes-aide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px;
  margin: 0; font-size: .9rem; font-weight: 600; color: var(--ink); }
.cartes-compte { padding: 3px 10px; border-radius: 99px; background: var(--card); border: 2px solid var(--p6); font-size: .8rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.cartes-fini .cartes-compte { background: var(--ok-bg); border-color: var(--ok-ink); color: var(--ok-ink); }
/* Les cartes doivent se reconnaître comme des cartes à retourner (retour testeurs du 19 oct.) :
   consigne en gros, liseré pointillé comme un dos de carte, « 👆 Touche-moi » tant qu'elle n'a pas été vue,
   et elles se balancent jusqu'à ce que l'élève en touche une */
.bloc-cartes .cartes-aide > span:first-child { font-size: 1.05rem; font-weight: 800; }
.bloc-cartes .carte-recto { outline: 2px dashed var(--accent); outline-offset: -8px; }
.carte-touche { display: inline-block; justify-self: center; margin-top: 4px; padding: 2px 9px; border-radius: 99px; background: var(--card); border: 1.5px solid var(--accent); font-size: .74rem; font-weight: 800; color: var(--accent); }
.carte.vue .carte-touche { display: none; }
.bloc-cartes:not(.cartes-entame) .carte .carte-recto { animation: carte-appel 2.8s ease-in-out .8s infinite; }
@media (prefers-reduced-motion: reduce) { .bloc-cartes .carte .carte-recto { animation: none !important; } }
@keyframes carte-appel { 0%, 80%, 100% { transform: none; } 86% { transform: rotate(-2deg) scale(1.03); } 93% { transform: rotate(2deg) scale(1.03); } }
.cartes-aide { font-size: .82rem; color: var(--muted); margin: -2px 0 8px; }
.cartes-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cartes-grille .carte:last-child:nth-child(odd) { grid-column: 1 / -1; }
.carte { display: grid; perspective: 700px; border: none; background: none; padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: center; }
.carte-face {
  grid-area: 1 / 1; display: grid; place-content: center; gap: 4px; min-height: 104px; padding: 10px 8px; border-radius: 14px;
  border: 2px solid var(--ink); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .45s cubic-bezier(.3, .8, .3, 1.1);
}
.carte-recto { background: var(--accent-soft); box-shadow: 3px 3px 0 var(--accent); }
.carte-recto b { font-size: 1.12rem; }
.carte-icone { font-size: 1.7rem; line-height: 1; }
.carte-verso { background: var(--card); transform: rotateY(180deg); box-shadow: 3px 3px 0 var(--ok-ink); font-size: .92rem; line-height: 1.35; }
.carte-verso b { color: var(--accent); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.carte.retournee .carte-recto { transform: rotateY(-180deg); }
.carte.retournee .carte-verso { transform: rotateY(0); }
.carte:focus-visible .carte-face { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Méthode en gestes : carte turquoise (différente des règles orange, problèmes bleus, « À toi » violets), gestes tous visibles */
.bloc-etapes { border: 2px solid var(--ink); border-radius: 16px; padding: 14px 14px 16px;
  background: color-mix(in srgb, var(--p4) 10%, var(--card)); box-shadow: 4px 4px 0 var(--p4); display: grid; gap: 10px; }
.bloc-etapes .geste-tag { justify-self: start; margin: 0; padding: 4px 10px; border-radius: 99px; background: var(--p4); color: var(--card);
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.bloc-etapes h3 { font-size: 1.12rem; text-transform: none; letter-spacing: 0; margin: 0; line-height: 1.3; }
.bloc-etapes ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: none; }
.bloc-etapes li { position: relative; display: grid; gap: 6px; background: var(--card); border: 2px solid color-mix(in srgb, var(--p4) 45%, var(--card));
  border-radius: 14px; padding: 10px 12px; transition: border-color .25s, box-shadow .25s, transform .25s; }
.bloc-etapes li + li::before { content: ""; position: absolute; left: 26px; top: -12px; width: 3px; height: 10px; background: var(--p4); border-radius: 2px; }
.geste-num { justify-self: start; padding: 3px 10px; border-radius: 8px; background: var(--p4); color: var(--card); border: 2px solid var(--ink);
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.geste-txt { font-size: 1.02rem; line-height: 1.4; }
.bloc-etapes b { color: var(--ink); }
.geste-exemple { margin: 0; font-weight: 600; }
.geste-exemple span { color: var(--p4); font-weight: 800; }
.geste-ex { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; padding: 7px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--p4) 12%, var(--card)); border-left: 4px solid var(--p4); font-size: .97rem; }
.geste-ex-tag { flex-shrink: 0; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--p4); }
.geste-ex > span:last-child { flex: 1; min-width: 0; }
.geste-copie { background: var(--card); border: 2px solid var(--ink); border-radius: 14px; padding: 10px 14px 6px;
  background-image: linear-gradient(transparent 27px, color-mix(in srgb, var(--p2) 18%, transparent) 28px); background-size: 100% 28px; }
.geste-copie-titre { margin: 0 0 2px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--p4); }
.geste-copie .katex-display { margin: .4em 0; }
@keyframes geste-entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* « À toi » : carte violette bien visible (différente des règles orange et des problèmes bleus), questions numérotées */
.bloc-essaie { display: grid; gap: 12px; border: 2px solid var(--ink); border-radius: 16px; padding: 14px 14px 16px;
  background: color-mix(in srgb, var(--p3) 10%, var(--card)); box-shadow: 4px 4px 0 var(--p3); counter-reset: essai; }
.bloc-essaie h3 { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px;
  border-radius: 12px; background: var(--p3); color: var(--card); line-height: 1.3; }
.bloc-essaie h3::before { content: "🧠"; font-size: 1rem; }
.essai { border: 2px solid color-mix(in srgb, var(--p3) 45%, var(--card)); background: var(--card); border-radius: 14px;
  padding: 12px 14px; display: grid; gap: 10px; counter-increment: essai; }
.essai::before { content: "Question " counter(essai); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--p3); }
.essai-q { font-weight: 600; margin: 0; font-size: 1.02rem; }
.essai-voir { justify-self: start; border: 2px solid var(--ink); background: var(--accent); color: var(--card); border-radius: 99px; padding: 7px 14px; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.essai-voir[hidden], .essai-r[hidden] { display: none; }
.essai-r { background: var(--ok-bg); color: var(--ink); border-radius: 10px; padding: 8px 12px; animation: geste-entree .3s ease-out; }
@media (prefers-reduced-motion: reduce) { .carte-face { transition: none; } .bloc-etapes li, .essai-r { animation: none; } }

/* Verdict d'animation affiché au-dessus (ANIMS_OUTILS.etat) */
.anim-etat {
  text-align: center; font-weight: 800; font-size: 1rem; padding: 8px 12px; border-radius: 14px;
  border: 2px dashed var(--line); color: var(--muted); background: var(--bg); transition: background .25s, color .25s, border-color .25s;
}
.anim-etat > span, .anim-etat > small { display: block; font-weight: 600; font-size: .85rem; }
.anim-etat-ok { background: var(--ok-bg); color: var(--ok-ink); border: 2px solid var(--ok-ink); font-size: 1.1rem; box-shadow: 3px 3px 0 var(--ok-ink); }

/* Figures : repère, courbes, polygones, cercles, textes (figureSVG) */
.fig-grille { stroke: var(--line); stroke-width: 1; }
.fig-axe { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.fig-grad { fill: var(--muted); font-size: 11px; text-anchor: middle; font-family: inherit; }
.fig-pointille { stroke-dasharray: 5 4; }
.fig-texte { fill: var(--ink); font-size: 13px; font-weight: 600; text-anchor: middle; font-family: inherit; }
.fig-courbe { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.fig-cercle { fill: none; stroke-width: 2; }
.fig-poly { stroke-width: 2; stroke-linejoin: round; fill-opacity: .18; }
.fig-c-accent { --fc: var(--accent); } .fig-c-bleu { --fc: var(--p2); } .fig-c-vert { --fc: var(--ok-ink); } .fig-c-violet { --fc: var(--p3); }
.fig-courbe, .fig-cercle, .fig-poly { stroke: var(--fc); }
.fig-vec, .fig-vec-tete, .fig-vec-nom, .fig-vec-fl { --fc: var(--accent); }
.fig-vec.fig-c-bleu, .fig-vec-tete.fig-c-bleu, .fig-vec-nom.fig-c-bleu, .fig-vec-fl.fig-c-bleu { --fc: var(--p2); }
.fig-vec.fig-c-vert, .fig-vec-tete.fig-c-vert, .fig-vec-nom.fig-c-vert, .fig-vec-fl.fig-c-vert { --fc: var(--ok-ink); }
.fig-vec.fig-c-violet, .fig-vec-tete.fig-c-violet, .fig-vec-nom.fig-c-violet, .fig-vec-fl.fig-c-violet { --fc: var(--p3); }
.fig-arc { fill: var(--fc); fill-opacity: .16; stroke: var(--fc); stroke-width: 1.8; }
.fig-arc-sup { fill: none; }
.fig-vec { stroke: var(--fc); stroke-width: 2.6; stroke-linecap: round; }
.fig-vec-tete { fill: var(--fc); }
.fig-vec-nom { fill: var(--fc); font-size: 15px; font-weight: 700; font-style: italic; text-anchor: middle; font-family: Georgia, serif; }
.fig-vec-fl { fill: none; stroke: var(--fc); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fig-arc-txt { fill: var(--fc); font-size: 12.5px; font-weight: 700; text-anchor: middle; font-family: inherit; }
.fig-poly { fill: var(--fc); }
/* Schémas électriques (figure.circuit, js/app.js circuitSVG) */
.fig-circ { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.fig-circ-fond { fill: var(--card); }
.fig-circ-epais { stroke-width: 5; stroke-linecap: butt; }
.fig-circ-bout, .fig-noeud { fill: var(--ink); }
.fig-circ-t { fill: var(--ink); font-size: 14px; font-weight: 800; text-anchor: middle; font-family: inherit; }
.fig-circ-lettre { font-size: 15px; }
.fig-circ-nom { fill: var(--accent); font-size: 13px; font-weight: 800; text-anchor: middle; font-family: inherit; }
text.fig-cote.fig-c-bleu, text.fig-cote.fig-c-vert, text.fig-cote.fig-c-violet { fill: var(--fc); }

/* ===== Animations du chapitre 3e : arithmetique ===== */
/* ===== Arithmétique (3e) : animations ar- ===== */

/* Boutons de choix et d'action (cibles tactiles ≥ 44 px) */

/* Listes de diviseurs trouvés */

/* La grenouille */

/* Les critères : le nombre en chiffres */

/* Les chaises */

/* Le crible */

/* L'arbre de décomposition */

/* Les sachets */

/* La fraction à simplifier */

/* ===== Animations du chapitre 3e : calculs-numeriques ===== */
/* ===== Calculs numériques (3e) : animations cn-* ===== */
/* Boutons communs */

/* Droite graduée des relatifs */

/* Règle des signes : facteurs à toucher */

/* Priorités : expression à toucher */

/* Barres de fractions */

/* Produit de fractions en aire */

/* Escalier des puissances */

/* Puissances de 10 */

/* Notation scientifique : la virgule qui bouge */

/* ===== Animations du chapitre 3e : developpements ===== */
/* ===== Développements (chapitres/troisieme-developpements.js) : animations dev-* ===== */

/* Rectangles découpés (modèle des aires) */

/* Tuiles algébriques (réduire) */

/* Flèches de distribution */

/* Signe devant une parenthèse */

/* Trouve l'erreur */

/* (a + b)(a − b) = a² − b² : découpe et déplace */

/* ===== Animations du chapitre 3e : espace ===== */
/* ===== Chapitre Espace (3e) : animations es-* ===== */

/* Traits et faces */

/* Liquides, couches, grilles */

/* Terrasse */

/* Boule, sphère, globe */

/* Repère dans le pavé */

/* Textes */

/* ===== Animations du chapitre 3e : factorisations ===== */
/* ===== Factorisations (chapitres/troisieme-factorisations.js) : animations fac- ===== */

/* Maths dans le bandeau de verdict : « .anim-etat span { display: block } » casserait les formules KaTeX.
   :where() garde une spécificité basse, pour ne pas écraser les règles propres à KaTeX. */
:where(.bloc-anim[data-anim^="fac-"]) .anim-etat span span { display: inline; }
:where(.bloc-anim[data-anim^="fac-"]) .anim-etat span:has(> .katex) { display: inline; }
:where(.bloc-anim[data-anim^="fac-"]) .anim-etat .katex { font-size: 1.2em; }

/* Plaques de brownie (facteur commun) */

/* Brownie croqué : a² − b² */

/* Chasse au facteur commun */

/* Vérification par une valeur */

/* Parenthèse cachée sous un emoji */

/* ===== Animations du chapitre 3e : fonctions-affines ===== */
/* ===== Fonctions affines (3e) : animations fa-* (chapitres/troisieme-fonctions-affines.js) ===== */

/* Boutons des animations */

/* Étape 1 : barres de prix des trois formules */

  

/* Étape 2 : le jeu du tri */

/* Étape 3 : la machine */

/* Repères et droites */

/* Étape 7 : tableau de proportionnalité */

.anim-etat i { font-family: "Times New Roman", serif; font-size: 1.08em; }

/* ===== Animations du chapitre 3e : notion-de-fonction ===== */
/* ===== Notion de fonction (chapitres/troisieme-notion-de-fonction.js) : animations nf- ===== */

/* Boutons des animations */

/* 1. Programme de calcul */

/* 2. Machine f */

/* 3 et 4. Tableaux de valeurs */

/* 6, 7, 8. Repères et courbes */

/* ===== Animations du chapitre 3e : probabilites ===== */
/* ===== Probabilités (3e) : animations pb-* ===== */
.bloc-anim[data-anim^="pb-"] [hidden] { display: none !important; }

/* Objets : dé, pièce, boules */

/* Tuiles : faces de dé, tickets */

/* Roue de la chance */

/* Fréquence */

/* Tableau à double entrée */

/* Arbre */

/* Tableaux dans les corrections */

/* ===== Animations du chapitre 3e : proportionnalite ===== */
/* ===== Proportionnalité (chapitres/troisieme-proportionnalite.js), préfixe pr- ===== */
/* Tableau qui se vérifie (pr-tableau) */

/* Boutons de choix (méthode, situation) */

/* Tableau 2 × 2 et flèches (pr-croix) */

/* Repère (pr-points, pr-lecture) */

/* Crêpes à colorier (pr-grille) */

/* Barres de prix (pr-evol, pr-piege) et machine (pr-retour) */

/* ===== Animations du chapitre 3e : statistiques ===== */
/* ===== Statistiques (3e) : animations st- ===== */

/* Textes et traits SVG */

/* Collecte : file des données et carrés qui tombent */

/* Moyenne : barres, surplus, trous, lignes */

/* Coefficients : lignes de réglage, jetons empilés, pivot */

/* Médiane : jetons qui se rangent */

/* Étendue : points et crochets */

/* Fréquences : lignes de vote, barres, bande 100 % */

/* Histogramme */

/* ===== Animations du chapitre 3e : transformations ===== */
/* ===== Transformations (3e) : animations tr-* ===== */

/* Le voilier : figure de départ (orange) et image (bleue) */

/* Éléments de construction */

/* Triangles des constructions */

/* Briques (aires) */

/* Motifs des frises, rosaces, pavages */

/* Boutons */

/* ===== Animations du chapitre 3e : triangles-semblables ===== */
/* ===== Triangles semblables (chapitres/troisieme-triangles-semblables.js) : animations ts- ===== */

   

/* ===== Animations du chapitre 3e : trigonometrie ===== */
/* ===== Trigonométrie (3e) : animations du chapitre (préfixe tg-) ===== */

/* Côtés à toucher (jeu) : zone tactile large et invisible */

  

/* Boutons des animations */

/* Score du jeu : 5 pastilles */

/* SOH CAH TOA */

/* Équation à isoler */

/* Calculatrice */

/* Cerf-volant, phare : décor */

/* ===== Animations du chapitre 3e : scratch ===== */
/* ===== Scratch (chapitres/troisieme-scratch.js) : blocs façon Scratch et mini-scène sc-* ===== */

/* Couleurs par catégorie (assombries en clair, éclaircies en sombre grâce au mélange avec --ink) */

/* Un script : piles de blocs */

/* Un bloc : rectangle arrondi avec un petit tenon en bas (pièce de puzzle simplifiée) */

/* Chapeau (événement, définition) : dessus bombé */

/* Blocs « C » (boucles, conditions) : bras coloré, corps creusé */

/* Valeurs : ovales blancs, reporters colorés, conditions hexagonales, menus, cases à compléter */

/* Bloc en cours d'exécution */

/* Petit dessin du tracé (corrections, choix) */

/* ===== La mini-scène ===== */

/* Comète, la fusée */

/* Bulle « dire » */

/* Variables affichées sur la scène, comme dans Scratch */

/* « demander et attendre » */

/* Boutons de commande */

/* Devine : choix de figures / de réponses */

/* Remettre dans l'ordre : réserve de blocs */

/* Modulo : jetons rangés en paquets */

/* Sur grand écran : le script à gauche, la scène à droite */

/* ===== Accès par classe : classes hors accès grisées avec cadenas ===== */
.verrou { opacity: .45; filter: grayscale(1); cursor: not-allowed; position: relative; }
.classe.verrou::after { content: "🔒"; }
.tuile-classe.verrou { box-shadow: none; }
.tuile-classe.verrou .tc-nb { visibility: hidden; }
.tuile-classe.verrou::after, .reglage button.verrou::after, .segment button.verrou::after { content: "🔒"; position: absolute; top: 2px; right: 4px; font-size: .7rem; }
#popup-acces .btn-google, #popup-acces .btn-ok { margin-top: 6px; }
#popup-acces .btn-lien { display: block; margin: 10px auto 0; }

/* Suppression du compte */
.btn-supprimer { margin-top: 10px; font-size: .88rem; color: var(--danger); align-self: center; }
.btn-supprimer[hidden] { display: none; }
.popup .btn-danger {
  border: 2px solid var(--danger); border-radius: 12px; background: var(--danger); color: var(--card);
  font: inherit; font-weight: 600; padding: 12px 22px; cursor: pointer; box-shadow: 3px 3px 0 var(--ink);
}
.popup .btn-danger[hidden] { display: none; }
.popup .btn-danger:disabled { opacity: .6; cursor: wait; }
#popup-suppression .btn-lien { display: block; margin: 10px auto 0; }
#popup-suppression .btn-lien[hidden] { display: none; }
.erreur-suppression { color: var(--danger) !important; font-weight: 600; margin-bottom: 14px !important; }
.erreur-suppression:empty { display: none; }

/* ===== Cinquième · Angles (an-) ===== */
/* ===== Cinquième · Angles (préfixe an-) ===== */

  

  

/* Hexagone de triangles équilatéraux */

     

/* Droites, sécante, rails */

/* « Trouve la paire » */

/* Boutons */

/* Les maths ne passent jamais en majuscules (titres en capitales) */
.katex { text-transform: none; }

/* ===== Seconde · Les vecteurs (vec-) ===== */
/* ===== Seconde · Les vecteurs (préfixe vec-) ===== */

/* Couleur d'une flèche : variable --vc, posée par vec-c-* */
  
   

/* Flèche qui se dessine (somme, raccourci) */

/* Points, noms, poignées */

/* Fusée, hangar, étoile */

/* Quadrilatères, droites, segments */

/* Croix de direction (pavé) et boutons */

/* Pastilles direction / sens / norme */

/* ===== Interros et DS (sommaire d'un chapitre) ===== */
.ev-zone { display: grid; gap: 10px; margin-top: 14px; text-align: left; }
.ev-ouvrir { --c: var(--p3); width: 100%; padding: 12px 14px; border: 2px solid var(--line); border-left: 6px solid var(--c); background: color-mix(in srgb, var(--c) 8%, var(--card)); border-radius: 16px; }
.ev-titre { font-weight: 700; margin: 10px 0 2px; }
.ev-titre small { display: block; font-weight: 500; color: var(--muted); font-size: .85rem; margin-top: 2px; }
.ev-carte { --c: var(--p2); border: 2px solid var(--ink); border-radius: 16px; background: var(--card); padding: 14px; box-shadow: 4px 4px 0 var(--c); display: grid; gap: 10px; }
.ev-carte.ev-ds { --c: var(--accent); }
.ev-haut { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ev-haut strong { font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; }
.ev-badge { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--c) 16%, var(--card)); color: var(--ink); border: 1.5px solid var(--c); }
.ev-infos { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .88rem; color: var(--muted); }
.ev-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ev-btn { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.ev-btn:hover { background: var(--accent-soft); }
.ev-btn-corrige { background: var(--ink); color: var(--on-ink); }
.ev-btn-corrige:hover { background: var(--ink); opacity: .9; }
#popup-corrige .btn-ok { display: inline-block; text-decoration: none; }

/* ===== Fiche mémo (sommaire d'un chapitre) ===== */
.memo-ouvrir { --c: var(--p5); display: flex; width: 100%; margin-top: 14px; padding: 12px 14px; border: 2px solid var(--line); border-left: 6px solid var(--c); background: color-mix(in srgb, var(--c) 8%, var(--card)); border-radius: 16px; color: var(--ink); text-decoration: none; text-align: left; }
.memo-ouvrir .memo-sous { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
#popup-corrige .btn-lien { display: block; margin: 10px auto 0; }

/* Lien direct : étape visée mise en avant dans le sommaire */
.parcours .parcours-cible { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent), 4px 4px 0 var(--c); }

/* ===== Espace libre « Je veux réviser » (rv-) ===== */
.btn-reviser {
  display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 16px; padding: 16px 18px; text-align: left;
  border: 2px solid var(--ink); border-radius: 18px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
  box-shadow: 4px 4px 0 var(--p3); transition: transform .15s ease, box-shadow .15s ease;
}
.btn-reviser:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--p3); }
.btn-reviser:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--p3); }
.btn-reviser .icone { font-size: 1.7rem; flex-shrink: 0; }
.btn-reviser strong { display: block; font-size: 1.08rem; }
.btn-reviser small { display: block; color: var(--muted); font-size: .86rem; margin-top: 2px; }
.btn-reviser .fleche { margin-left: auto; font-weight: 700; color: var(--p3); }
.btn-reviser[hidden] { display: none; }
.btn-algebra { margin-top: 12px; }
.btn-reviser-mini { margin: 0 0 18px; padding: 11px 14px; box-shadow: 3px 3px 0 var(--p3); }
.btn-reviser-mini .icone { font-size: 1.35rem; }
.btn-reviser-mini strong { font-size: 1rem; }
#ecran-revision { text-align: left; }
#ecran-revision h1 { text-align: left; }
.rv-recherche {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; padding: 4px 6px 4px 14px;
  border: 2px solid var(--ink); border-radius: 14px; background: var(--card); box-shadow: 3px 3px 0 var(--accent);
}
.rv-recherche input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 1.05rem; padding: 12px 4px; outline: none; }
.rv-recherche input::placeholder { color: var(--muted); }
.rv-recherche:focus-within { box-shadow: 3px 3px 0 var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.rv-aide { color: var(--muted); font-size: .9rem; margin: 14px 0 8px; }
.rv-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-puce {
  border: 1.5px solid var(--line); border-radius: 99px; background: var(--card); color: var(--ink); font: inherit; font-size: .9rem;
  padding: 9px 14px; min-height: 40px; cursor: pointer;
}
.rv-puce:hover { border-color: var(--accent); background: var(--accent-soft); }
.rv-liste { display: grid; gap: 8px; }
.rv-choix {
  display: block; width: 100%; text-align: left; border: 2px solid var(--line); border-left: 6px solid var(--accent); border-radius: 14px;
  background: var(--card); color: var(--ink); font: inherit; padding: 11px 14px; cursor: pointer;
}
.rv-choix:hover { border-color: var(--accent); background: var(--accent-soft); }
.rv-choix strong { font-size: 1.02rem; }
.rv-choix small { display: block; color: var(--muted); margin-top: 3px; font-size: .86rem; }
.rv-classe { display: inline-block; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--bg); color: var(--muted); vertical-align: 2px; }
.rv-bulle { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 10px; }
.rv-avatar { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); border: 2px solid var(--ink); font-size: 1.2rem; }
.rv-bulle p { margin: 0; padding: 11px 14px; background: var(--accent-soft); border: 2px solid var(--ink); border-radius: 4px 16px 16px 16px; line-height: 1.45; color: var(--ink); }
.rv-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 4px 48px; }
.rv-mode {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 6px; min-height: 76px; text-align: center;
  border: 2px solid var(--ink); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  box-shadow: 3px 3px 0 var(--line);
}
.rv-mode span { font-size: 1.4rem; }
.rv-mode.actif { background: var(--ink); color: var(--on-ink); box-shadow: 3px 3px 0 var(--accent); }
@media (max-width: 420px) { .rv-modes { margin-left: 0; } }
.rv-section { margin-top: 16px; }
.rv-section h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; font-weight: 700; }
.rv-section > button + button { margin-top: 8px; }
.rv-carte {
  --c: var(--p1); display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px;
  border: 2px solid var(--line); border-left: 6px solid var(--c); border-radius: 16px;
  background: color-mix(in srgb, var(--c) 8%, var(--card)); color: var(--ink); font: inherit; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.rv-carte:hover { transform: translateX(4px); box-shadow: 3px 3px 0 var(--c); }
.rv-carte-txt { flex: 1; min-width: 0; }
.rv-carte small { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c); }
.rv-carte strong { display: block; font-size: 1rem; margin-top: 1px; }
.rv-carte em { display: block; font-style: normal; font-size: .84rem; color: var(--muted); margin-top: 2px; }
.rv-fleche { color: var(--c); font-weight: 700; }
.rv-autre { display: block; margin: 22px auto 0; }
.rv-carte.rv-vu { opacity: .78; }
.rv-vu-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--ok-bg); color: var(--ok-ink); font-size: .68rem; letter-spacing: 0; text-transform: none; }
/* Bouton flottant « Mon plan de révision » (en bas à gauche, la calculatrice est à droite) */
.retour-plan {
  position: fixed; left: 16px; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 10px 16px; border: 2px solid var(--ink); border-radius: 99px;
  background: var(--ink); color: var(--on-ink); font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer;
  box-shadow: 3px 3px 0 var(--p3); animation: entree .3s ease;
}
.retour-plan[hidden] { display: none; }
.retour-plan:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--p3); }
body:has(.retour-plan:not([hidden])) main { padding-bottom: 80px; }
body.avec-retour-plan main { padding-bottom: 80px; }   /* même chose sans :has (iPhone avant iOS 15.4), classe posée par app.js */

/* ===== Intro en « story » (une phrase par écran, tap pour avancer) ===== */
.intro-story .intro-emoji { display: none; }
.intro-story .intro-texte { margin: 16px 0 20px; gap: 14px; }
.story-traits { display: flex; gap: 6px; }
.story-traits span { flex: 1; height: 5px; border-radius: 99px; background: var(--line); transition: background .3s; }
.story-traits span.vu { background: var(--accent); }
.story-carte { display: grid; place-items: center; align-content: center; gap: 14px; min-height: 260px; width: 100%; padding: 24px 20px 16px;
  border: 2px solid var(--ink); border-radius: 22px; background: var(--card); box-shadow: 5px 5px 0 var(--accent); color: var(--ink);
  font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.story-emoji { font-size: 3.4rem; line-height: 1; }
.story-texte { font-family: "Fraunces", Georgia, serif; font-size: 1.45rem; font-weight: 700; line-height: 1.3; }
.story-suite { font-size: .8rem; color: var(--muted); align-self: end; animation: story-clignote 1.6s ease-in-out infinite; }
.story-fin .story-suite { visibility: hidden; }
.story-entre .story-emoji { animation: story-pop .4s cubic-bezier(.3, .8, .3, 1.4); }
.story-entre .story-texte { animation: story-monte .35s ease-out; }
.story-savais[hidden] { display: none; }
.story-savais .carte-face { min-height: 120px; }
.story-savais .carte-recto span:last-child { font-size: .9rem; color: var(--muted); }
.story-savais .carte-verso { text-align: left; padding: 12px 14px; }
.intro-story #intro-go { animation: story-pop .4s ease-out; }
@keyframes story-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes story-monte { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes story-clignote { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .story-entre .story-emoji, .story-entre .story-texte, .story-suite, .intro-story #intro-go { animation: none; } }

/* ===== Mascotte « Monsieur Boukili » (js/mascotte.js, poses dans img/mascotte/) ===== */
.btn-son { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); font-size: 1.05rem; line-height: 1; cursor: pointer; }
.btn-son[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.intro-haut { display: flex; justify-content: space-between; align-items: center; }
/* Intro : la carte devient une bulle, Monsieur Boukili raconte en dessous */
.intro-story .story-carte { position: relative; margin-bottom: 4px; }
.intro-story .story-carte::after { content: ""; position: absolute; left: 38px; bottom: -13px; width: 22px; height: 22px; background: var(--card);
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
.story-masc { display: block; width: auto; height: 128px; margin: -4px 0 -8px 6px; filter: drop-shadow(3px 4px 0 color-mix(in srgb, var(--ink) 18%, transparent)); }
.story-masc-entre { animation: masc-saute .5s cubic-bezier(.3, .8, .3, 1.4); }
/* Quiz : un petit visage qui réagit */
.masc-visage { float: left; width: 64px; height: 64px; margin: -4px 12px 4px -4px; border-radius: 50%; object-fit: cover; object-position: top;
  border: 2.5px solid currentColor; background: var(--card); animation: masc-pop .45s cubic-bezier(.3, .8, .3, 1.5); }
.quiz-retour::after { content: ""; display: block; clear: both; }
.masc-ko { animation: masc-pop .45s cubic-bezier(.3, .8, .3, 1.5), masc-non .5s .45s ease-in-out; }
/* Résultat : il sort du haut de la fenêtre */
.resultat-masc { display: block; height: 130px; width: auto; margin: -78px auto 4px; animation: masc-saute .6s .15s cubic-bezier(.3, .8, .3, 1.4) both; }
.resultat-masc-debout { height: 190px; margin-top: -120px; }
.resultat-masc[hidden] { display: none; }
@keyframes masc-saute { 0% { transform: translateY(24px) scale(.85); opacity: 0; } 60% { transform: translateY(-8px) scale(1.03); opacity: 1; } 100% { transform: none; } }
@keyframes masc-pop { from { transform: scale(.3) rotate(-15deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes masc-non { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .story-masc-entre, .masc-visage, .masc-ko, .resultat-masc { animation: none; } }

/* Mascotte désactivée dans Paramètres, ou compte qui n'y a pas encore accès (en préparation, admins seulement) */
/* Voix en pause (js/mascotte.js, VOIX = false) : pas de bouton 🔇/🔊 */
.btn-son { display: none !important; }
/* Résultat : Monsieur Boukili et l'avatar de l'élève ensemble, l'avatar en petit à sa droite */
.popup-resultat.duo .resultat-masc { margin-bottom: -40px; }
.popup-resultat.duo .resultat-masc-debout { margin-bottom: -40px; }
.popup-resultat.duo .resultat-avatar { width: 76px; height: 76px; margin: 0 auto 8px; position: relative; left: 62px; }
html[data-mascotte="off"] .btn-son, html[data-mascotte="off"] .story-masc, html[data-mascotte="off"] .masc-visage,
html[data-mascotte="off"] .resultat-masc,
html:not([data-mascotte-ok]) .btn-son, html:not([data-mascotte-ok]) .story-masc, html:not([data-mascotte-ok]) .masc-visage,
html:not([data-mascotte-ok]) .resultat-masc, html:not([data-mascotte-ok]) .reglage-mascotte { display: none !important; }
html[data-mascotte="off"] .intro-story .story-carte::after, html:not([data-mascotte-ok]) .intro-story .story-carte::after { display: none; }
.segment-egal { display: grid; grid-template-columns: repeat(3, 1fr); }
.segment-egal button { min-width: 0; }

/* ===== Animations du chapitre quatrieme-calcul-litteral ===== */
/* ===== Calcul littéral 4e (chapitres/quatrieme-calcul-litteral.js) : animations cl-* ===== */

/* Textes des SVG */

/* Étape 1 : tapis et guirlande */

  
 

/* Morceaux colorés par famille (x², x, nombres) */

/* Étape 4 : dalles */

/* Étape 5 : calcul révélé */

/* Étape 6 : termes et cartons */

/* Étape 7 : développer en touchant les termes */

/* ===== Animations du chapitre quatrieme-divisibilite ===== */
/* ===== Divisibilité et nombres premiers (4e) : animations dv- ===== */

/* Boutons de choix et d'action (cibles tactiles ≥ 44 px) */

/* Listes (diviseurs, tailles trouvées) */

/* Joueurs, équipes, poules */

  
  

/* Le billet */

/* Le chiffre caché : nombre en tuiles, bande des sommes, badges */

/* Le détecteur : le nombre rangé en rectangle */

/* Le crible : une couleur par nombre premier */

  
 

/* La décomposition en colonne */

/* ===== Animations du chapitre quatrieme-equations ===== */
/* ===== Quatrième · Équations (préfixe eqq-) ===== */
/* Maths dans le bandeau de verdict : garder les formules KaTeX en ligne */
:where(.bloc-anim[data-anim^="eqq-"]) .anim-etat span span { display: inline; }
:where(.bloc-anim[data-anim^="eqq-"]) .anim-etat span:has(> .katex) { display: inline; }
:where(.bloc-anim[data-anim^="eqq-"]) .anim-etat .katex { font-size: 1.15em; }

/* Boutons communs */

/* Cartes à retourner (tester un nombre) */

/* Programme de calcul */

/* Balance à tuiles */

/* Tri des cartes : les x à gauche, les nombres à droite */

/* Carnet de Théo : chasse à l'erreur */

/* Le devin */

/* ===== Animations du chapitre quatrieme-fractions ===== */
/* ===== Fractions (4e) : animations frc-* (chapitres/quatrieme-fractions.js) ===== */
/* Boutons communs */

/* Fractions écrites en HTML (boutons, tuiles) */

/* SVG communs */

/* Barrer les facteurs communs */

/* Une heure de scène */

  

/* Plaque de gâteau */

/* Problème « du reste » */

/* Machine à inverse */

/* Gobelets */

/* Priorités avec des fractions */

/* ===== Animations du chapitre quatrieme-puissances ===== */
/* ===== Puissances 4e (chapitres/quatrieme-puissances.js) : animations pui-* ===== */

/* Tuiles de facteurs */

/* 1. Arbre des partages */

/* 2. Escalier */

/* 3. Signes */

/* 4. Compteur de vues */

/* 5. Microscope */

/* 6. Jeu des préfixes */

/* 7. Tableau qui glisse */

/* 8. Notation scientifique */

/* 9. Classement */

/* ===== Animations du chapitre quatrieme-relatifs ===== */
/* ===== Nombres relatifs (4e) : animations rel-* ===== */

/* 1. Jetons qui s'annulent */

/* 2. Altimètre (soustraction = écart) */

/* 3. Signes qui se suivent */

/* 4. Le motif des produits */

/* 5. Demi-tour à chaque facteur négatif */

/* 6. Carrés et cubes */

/* 7. Le facteur caché (division) */

/* 8. Priorités */


/* ===== Accès de test (js/acces-test.js) : rien n'est visible tant que le code n'est pas validé ===== */
html:not([data-acces-ok]) body > *:not(.porte) { visibility: hidden; }
.porte { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: var(--bg); }
.porte[hidden] { display: none; }
.porte-carte { width: 100%; max-width: 380px; display: grid; gap: 12px; text-align: center; padding: 28px 22px; background: var(--card);
  border: 2px solid var(--ink); border-radius: 20px; box-shadow: 6px 6px 0 var(--accent); color: var(--ink); }
.porte-logo { height: 34px; width: auto; margin: 0 auto 4px; }
html[data-theme="sombre"] .porte-logo { filter: brightness(0) invert(1); }
.porte-carte h1 { font-family: "Fraunces", Georgia, serif; font-size: 1.6rem; margin: 0; }
.porte-carte p { margin: 0; color: var(--muted); }
.porte-carte input { font: inherit; font-size: 1.15rem; text-align: center; letter-spacing: .08em; text-transform: uppercase; padding: 12px; border: 2px solid var(--line);
  border-radius: 12px; background: var(--bg); color: var(--ink); }
.porte-carte input:focus { outline: none; border-color: var(--accent); }
.porte-msg { min-height: 1.4em; color: var(--danger) !important; font-weight: 600; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .porte-logo { filter: brightness(0) invert(1); } }

/* ===== Bienvenue : carrousel de la première connexion (non désactivable, une seule fois par compte) ===== */
.bienvenue { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: var(--bg); overflow-y: auto; }
.bienvenue[hidden] { display: none; }
.bienvenue-boite { width: 100%; max-width: 420px; display: grid; gap: 16px; text-align: center; }
.bienvenue-carte { min-height: 380px; gap: 14px; }
.bienvenue-carte .story-texte { font-size: 1.55rem; }
.bienvenue-etiquette:empty { display: none; }
.bienvenue-etiquette { justify-self: center; padding: 4px 12px; border-radius: 99px; background: var(--accent); color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .02em; }
.bienvenue-texte { font-size: 1.3rem; font-weight: 600; line-height: 1.45; color: var(--ink); max-width: 24ch; padding: 14px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); }
.bienvenue-texte b { color: var(--accent); font-weight: 800; white-space: nowrap; }
.bienvenue-carte.story-entre .bienvenue-texte { animation: story-monte .45s ease-out; }
.bienvenue-go { font-size: 1.15rem; padding: 14px; animation: story-pop .4s ease-out; }
.bienvenue-photo { display: block; width: 150px; height: auto; margin: -6px auto -4px; }
.bienvenue-slogan { margin: 0; font-family: "Fraunces", Georgia, serif; font-weight: 700; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .bienvenue-go, .bienvenue-carte.story-entre .bienvenue-texte { animation: none; } }

/* ===== Avatar de l'élève (js/avatar.js) : petites places dans le site. L'éditeur est dans css/avatar.css ===== */
.avatar.avatar-perso { object-fit: contain; background: var(--card); }
.salut { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.salut .bonjour { margin: 0; }
.salut-avatar { flex-shrink: 0; width: 64px; height: 64px; padding: 0; border: 3px solid var(--ink); border-radius: 50%; overflow: hidden; background: var(--card); box-shadow: 3px 3px 0 var(--accent); cursor: pointer; }
.salut-avatar[hidden] { display: none; }
.salut-avatar img { width: 100%; height: 100%; display: block; }
.btn-avatar { width: 100%; margin: -8px 0 18px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; font-weight: 800; box-shadow: 3px 3px 0 var(--accent); cursor: pointer; }
.btn-avatar[hidden] { display: none; }
.resultat-avatar { width: 104px; height: 104px; margin: -70px auto 6px; border-radius: 50%; overflow: hidden; border: 3px solid var(--ink); background: var(--card); animation: masc-saute .6s .15s cubic-bezier(.3, .8, .3, 1.4) both; }
.resultat-avatar[hidden] { display: none; }
.resultat-avatar img { width: 100%; height: 100%; display: block; }
.ra-top img { animation: ra-joie .7s .6s ease-in-out 2; }
@keyframes ra-joie { 50% { transform: translateY(-8px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .resultat-avatar, .ra-top img { animation: none; } }

/* Thèmes à gagner : choix dans Paramètres */
#reglage-themes[hidden] { display: none; }
.themes-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.theme-carte { display: grid; gap: 4px; padding: 8px; border: 2px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.theme-carte.actif { border-color: var(--ink); box-shadow: 0 0 0 2px var(--accent); }
.theme-carte.verrou { opacity: 1; filter: none; cursor: pointer; }
.theme-carte.verrou .theme-apercu { opacity: .55; }
.theme-carte.verrou .theme-nom { color: var(--muted); }
.theme-carte small { color: var(--muted); font-size: .72rem; line-height: 1.25; }
.theme-nom { font-weight: 800; font-size: .9rem; }
.theme-apercu { height: 34px; border-radius: 9px; border: 1px solid rgba(0, 0, 0, .15); }
[data-apercu="classique"] { background: linear-gradient(135deg, #fbf7f0 60%, #e8573a 60%); }
[data-apercu="espace"] { background: radial-gradient(circle at 80% 40%, #f2b705 0 7px, transparent 8px), radial-gradient(circle, #fff 0 1px, transparent 1.5px) 0 0 / 12px 12px, #0f1435; }
[data-apercu="ocean"] { background: linear-gradient(transparent 55%, #2fb3c9 55%), #dff4f7; }
[data-apercu="neon"] { background: #0b0b12; box-shadow: inset 0 0 0 3px #ff2bd6, inset 0 0 0 6px #21e6ff; }
[data-apercu="foret"] { background: linear-gradient(135deg, #eef5e8 60%, #2f8f4e 60%); }
[data-apercu="sahara"] { background: radial-gradient(ellipse at 30% 120%, #e3a95c 50%, transparent 51%), #fbefdc; }
[data-apercu="retro"] { background: conic-gradient(#ff3c7e 25%, #1d1b3a 0 50%, #ffcc00 0 75%, #1d1b3a 0) 0 0 / 12px 12px; }
[data-apercu="sakura"] { background: radial-gradient(ellipse, #f7a8c4 0 4px, transparent 5px) 0 0 / 16px 14px, #fff1f5; }

/* Thèmes à gagner : couleurs et décor. Ils imposent clair ou sombre (apparence.js), puis remplacent les couleurs. */
html[data-decor="espace"] { --bg: #0f1435; --card: #1b2252; --ink: #eef1ff; --on-ink: #0f1435; --muted: #aab3e6; --line: #2a3270; --accent: #8c7bff; }
html[data-decor="neon"] { --bg: #0b0b12; --card: #15151f; --ink: #f4f4ff; --on-ink: #0b0b12; --muted: #9b9bb8; --line: #262638; --accent: #ff2bd6; }
html[data-decor="retro"] { --bg: #1d1b3a; --card: #2b2856; --ink: #fffbe0; --on-ink: #1d1b3a; --muted: #c7c2f0; --line: #3a3770; --accent: #ff3c7e; }
html[data-decor="ocean"] { --bg: #dff4f7; --card: #ffffff; --ink: #0b3b4c; --muted: #4a7686; --line: #bfe3ea; --accent: #0f8aa0; }
html[data-decor="foret"] { --bg: #eef5e8; --card: #ffffff; --ink: #1f3b2a; --muted: #5c7a66; --line: #d4e4cc; --accent: #2f8f4e; }
html[data-decor="sahara"] { --bg: #fbefdc; --card: #fffaf2; --ink: #4a2c14; --muted: #8a6a4a; --line: #efdcbf; --accent: #c8701d; }
html[data-decor="sakura"] { --bg: #fff1f5; --card: #ffffff; --ink: #4a1f33; --muted: #9a6a80; --line: #f6d6e2; --accent: #d9467f; }
html:not([data-decor="classique"]) body { background-image: none; }
html:not([data-decor="classique"]) body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-repeat: repeat; }
html[data-decor="espace"] body::before { background-image: radial-gradient(circle, #fff 0 1px, transparent 1.6px), radial-gradient(circle, rgba(255, 255, 255, .55) 0 1px, transparent 1.4px); background-size: 140px 140px, 90px 90px; background-position: 0 0, 40px 60px; animation: decor-scintille 4s ease-in-out infinite alternate; }
html[data-decor="neon"] body::before { box-shadow: inset 0 0 0 3px #ff2bd6, inset 0 0 26px rgba(33, 230, 255, .35); }
html[data-decor="retro"] body::before { background-image: linear-gradient(rgba(255, 204, 0, .16) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 60, 126, .16) 2px, transparent 2px); background-size: 20px 20px; }
/* Rétro pixel bien reconnaissable (sinon il ressemble au mode sombre, retour d'Adam) : titres façon jeu vidéo, ombres en escalier jaunes */
html[data-decor="retro"] h1, html[data-decor="retro"] h2 { font-family: ui-monospace, "Courier New", monospace; letter-spacing: .02em; text-shadow: 2px 2px 0 #ff3c7e; }
html[data-decor="retro"] main { box-shadow: 8px 8px 0 #ffcc00; border-radius: 6px; }
html[data-decor="retro"] .btn-principal { box-shadow: 4px 4px 0 #ffcc00; border-radius: 6px; }
html[data-decor="ocean"] body::before { background: linear-gradient(transparent 82%, rgba(47, 179, 201, .25) 82%, rgba(47, 179, 201, .25) 88%, rgba(127, 211, 224, .4) 88%); }
html[data-decor="foret"] body::before { background: linear-gradient(transparent 85%, rgba(47, 143, 78, .12) 85%); }
html[data-decor="sahara"] body::before { background: radial-gradient(ellipse 70% 20% at 25% 100%, rgba(227, 169, 92, .35) 99%, transparent 100%), radial-gradient(ellipse 60% 16% at 85% 100%, rgba(240, 201, 138, .45) 99%, transparent 100%); }
html[data-decor="sakura"] body::before { background-image: radial-gradient(ellipse 5px 3.5px, rgba(247, 168, 196, .7) 99%, transparent 100%); background-size: 90px 110px; animation: decor-petales 18s linear infinite; }
@keyframes decor-scintille { to { opacity: .55; } }
@keyframes decor-petales { to { background-position: 90px 330px; } }
@media (prefers-reduced-motion: reduce) { html body::before { animation: none !important; } }

/* ===== Auto-évaluation d'un exercice, sous la correction (js/app.js : autoEvalExo) ===== */
.ae { margin-top: 12px; padding: 12px; border: 2px dashed var(--line); border-radius: 14px; background: var(--card); animation: ae-entre .25s ease-out; }
@keyframes ae-entre { from { opacity: 0; transform: translateY(6px); } }
.ae-q { font-weight: 800; margin: 0 0 8px; color: var(--ink); }
.ae-btns { display: grid; gap: 8px; }
.ae-btns button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 12px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-weight: 700; box-shadow: 2px 2px 0 var(--accent); cursor: pointer; }
.ae-btns button:active { transform: translate(2px, 2px); box-shadow: none; }
.ae-btns button span:first-child { font-size: 1.3rem; }
.ae-btns small { display: block; font-weight: 500; color: var(--muted); font-size: .8rem; }
.ae.ae-ok { border: 2px solid var(--ok-ink); background: var(--ok-bg); color: var(--ok-ink); font-weight: 800; }
.ae.ae-aide { border: 2px solid var(--ink); background: var(--accent-soft); }
.ae-aide p { margin: 0 0 10px; font-weight: 600; color: var(--ink); }
.ae-b1, .ae-b2 { display: block; width: 100%; padding: 12px; border: 2px solid var(--ink); border-radius: 12px; font: inherit; font-weight: 800; cursor: pointer; }
.ae-b1 { background: var(--accent); color: #fff; box-shadow: 3px 3px 0 var(--ink); margin-bottom: 8px; }
.ae-b2 { background: var(--card); color: var(--ink); }
.exo-reussi { display: inline-block; margin-left: 8px; background: var(--ok-bg); color: var(--ok-ink); border-radius: 99px; padding: 1px 8px; font-size: .78rem; letter-spacing: 0; text-transform: none; }
@media (prefers-reduced-motion: reduce) { .ae { animation: none; } }

/* ===== Connexion (js/connexion.js) : « Tu as un compte Gmail ? », compte sans Gmail, nom secret + code ===== */
.cx-voile { position: fixed; inset: 0; z-index: 98; background: var(--bg); overflow-y: auto; display: flex; justify-content: center; animation: fondu .2s ease; }
.cx-voile[hidden] { display: none; }
html.cx-ouvert, html.cx-ouvert body { overflow: hidden; }
.cx-boite { width: 100%; max-width: 440px; min-height: 100%; box-sizing: border-box; padding: max(16px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 18px; color: var(--ink); }
.cx-haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.cx-rond, .cx-rond-vide { width: 46px; height: 46px; flex-shrink: 0; }
.cx-rond { display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; }
.cx-logo { --h-logo: 24px; }
.cx-progres { display: flex; justify-content: center; gap: 6px; }
.cx-progres span { width: 8px; height: 8px; border-radius: 4px; background: var(--line); transition: width .2s; }
.cx-progres span.fait { background: var(--accent); }
.cx-progres span.actif { width: 28px; background: var(--accent); }
.cx-titre { font-family: "Fraunces", Georgia, serif; font-size: 2rem; line-height: 1.15; margin: 10px 0 0; }
.cx-titre-centre, .cx-centre .cx-titre { text-align: center; }
.cx-centre { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.cx-bulle { width: 112px; height: 112px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.cx-texte { font-size: 1.15rem; line-height: 1.4; margin: 0; text-align: center; }
.cx-texte-gauche { text-align: left; margin-top: -8px; }
.cx-aide { color: var(--muted); font-size: .95rem; margin: 0; }
.cx-erreur { color: var(--danger); font-weight: 600; min-height: 1.3em; margin: 0; text-align: center; }
.cx-erreur:empty { min-height: 0; }
.cx-bas { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.cx-espace { flex: 1; }
.cx-btn { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 2px solid var(--ink); border-radius: 18px; background: var(--accent); color: #fff; font: inherit; font-size: 1.25rem; font-weight: 700; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.cx-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.cx-btn:disabled { opacity: .5; cursor: wait; }
.cx-btn-blanc { background: var(--card); color: var(--ink); }
.cx-btn-encre { background: var(--ink); color: var(--on-ink); box-shadow: 4px 4px 0 var(--accent); }
.cx-lien { background: none; border: 0; padding: 10px; font: inherit; font-size: 1.05rem; font-weight: 600; color: var(--blue); text-decoration: underline; cursor: pointer; }
.cx-champ { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: .95rem; }
.cx-champ input { height: 62px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 16px; background: var(--card); color: var(--ink); padding: 0 18px; font: inherit; font-size: 1.4rem; font-weight: 600; width: 100%; }
.cx-champ input::placeholder { color: var(--soon-ink); font-weight: 500; }
.cx-classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cx-classe { min-height: 64px; border: 2px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); font: inherit; font-size: 1.3rem; font-weight: 700; cursor: pointer; }
.cx-classe.choisie { border: 3px solid var(--accent); background: var(--accent-soft); }
.cx-carte-nom { background: var(--card); border: 2px solid var(--ink); border-radius: 24px; box-shadow: 5px 5px 0 var(--ink); padding: 28px 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cx-renard { width: 88px; height: 88px; }
.cx-nom { font-size: 1.9rem; font-weight: 800; letter-spacing: -.5px; text-align: center; word-break: break-word; }
.cx-ronds { display: flex; justify-content: center; gap: 14px; padding: 8px 0; }
.cx-ronds span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--soon-border); box-sizing: border-box; transition: background .1s, border-color .1s; }
.cx-ronds span.plein { background: var(--ink); border-color: var(--ink); }
.cx-pave { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cx-touche { min-height: 64px; border: 2px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); font: inherit; font-size: 1.7rem; font-weight: 600; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.cx-touche:active { background: var(--accent-soft); border-color: var(--accent); }
.cx-touche-effacer { border-color: transparent; background: transparent; }
.cx-carte { background: var(--ink); color: var(--on-ink); border-radius: 24px; border-bottom: 6px solid var(--accent); padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.cx-carte-haut { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cx-carte-marque { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-style: italic; font-size: 1.2rem; }
.cx-carte-marque span { color: var(--accent); }
.cx-carte-qui { font-weight: 600; font-size: .9rem; padding: 5px 12px; border-radius: 12px; background: color-mix(in srgb, var(--on-ink) 15%, transparent); }
.cx-carte-ligne { display: flex; flex-direction: column; gap: 2px; }
.cx-carte-ligne span { font-size: .9rem; opacity: .8; }
.cx-carte-ligne strong { font-size: 1.6rem; word-break: break-word; }
.cx-carte-code { flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--on-ink) 12%, transparent); }
.cx-carte-code strong { letter-spacing: 3px; }
.cx-capture { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--card); border: 2px solid var(--line); color: var(--accent); }
.cx-capture span { color: var(--ink); font-weight: 700; font-size: 1.15rem; }
.cx-roue { width: 54px; height: 54px; border-radius: 50%; border: 6px solid var(--line); border-top-color: var(--accent); animation: cx-tour 0.9s linear infinite; }
@keyframes cx-tour { to { transform: rotate(360deg); } }
.cx-resultat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; border-radius: 18px; background: var(--ok-bg); color: var(--ok-ink); text-align: center; }
.cx-resultat strong { font-size: 2.2rem; letter-spacing: 4px; }
/* Admin : ouvrir une classe à un élève (js/connexion.js, écrans eleves / eleve) */
.cx-ligne-chercher { display: flex; flex-direction: column; gap: 10px; }
/* Admin : les testeurs (js/connexion.js, écrans testeurs et testeur) */
.cx-testeurs { display: flex; flex-direction: column; gap: 8px; }
.cx-onglets-t { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 4px 0 12px; }
.cx-onglet-t { min-height: 44px; padding: 6px 4px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.cx-onglet-t b { display: block; font-size: 1.15rem; }
.cx-onglet-t.actif { border-color: var(--ink); background: var(--ink); color: var(--card); }
/* Étiquettes des testeurs : BOOKMANIA (bleu) et Kiffelesmaths Cours Particuliers (couleur d'accent) */
.cx-etiq-filtre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
.cx-etiq-fiche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 4px 0 12px; }
.cx-etiq-choix { min-height: 44px; padding: 6px 4px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-size: .8rem; font-weight: 700; line-height: 1.2; cursor: pointer; }
.cx-etiq-choix b { display: block; font-size: 1rem; }
.cx-etiq-choix.actif { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.cx-etiq-choix.cx-etiq-bookmania.actif { background: var(--blue-soft); }
.cx-etiq-choix.cx-etiq-kiffelesmaths-cp.actif { background: var(--accent-soft); }
.cx-badge-etiq { align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: .72rem !important; font-weight: 800; color: var(--card) !important; }
.cx-badge-etiq.cx-etiq-bookmania { background: var(--blue); }
.cx-badge-etiq.cx-etiq-kiffelesmaths-cp { background: var(--accent); }
.cx-champ-titre { margin: 8px 0 0; color: var(--muted); font-size: .9rem; }
.cx-testeur { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border: 2px solid var(--line); border-radius: 16px; background: var(--card); }
.cx-testeur.actif { border-color: var(--ok-ink); background: var(--ok-bg); }
.cx-testeur-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: none; background: none; padding: 4px 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cx-testeur-nom strong { font-size: 1.1rem; overflow-wrap: anywhere; }
.cx-testeur-nom span { color: var(--muted); font-size: .85rem; }
.cx-testeur-nom .cx-testeur-com { color: var(--ink); font-size: .85rem; overflow-wrap: anywhere; }
.cx-testeur-nom .cx-testeur-modif { color: var(--accent); font-weight: 700; font-size: .8rem; }
.cx-fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.cx-fiche .cx-champ-large { grid-column: 1 / -1; }
.cx-fiche textarea { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 14px; background: var(--card); color: var(--ink); resize: vertical; box-sizing: border-box; margin-top: 4px; }
@media (max-width: 420px) { .cx-fiche { grid-template-columns: 1fr; } }
.cx-interrupteur { flex-shrink: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 10px 4px 4px; border: 2px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted); font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; }
.cx-interrupteur-rond { width: 30px; height: 30px; border-radius: 50%; background: var(--line); transition: background .2s; }
.cx-interrupteur.on { border-color: var(--ok-ink); color: var(--ok-ink); background: var(--card); flex-direction: row-reverse; padding: 4px 4px 4px 10px; }
.cx-interrupteur.on .cx-interrupteur-rond { background: var(--ok-ink); }
.cx-verrou { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding: 12px 14px; border: 2px dashed var(--line); border-radius: 16px; font-weight: 700; }
.cx-btn-petit { min-height: 44px; font-size: .95rem; }
input[type="date"] { font-size: 16px; }
.cx-eleves { display: flex; flex-direction: column; gap: 10px; }
.cx-eleve { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 12px 16px; border: 2px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cx-eleve strong { font-size: 1.2rem; }
.cx-eleve span { color: var(--muted); font-size: .95rem; overflow-wrap: anywhere; }
.cx-eleve .cx-ouvertes { color: var(--ok-ink); font-weight: 600; }
.cx-classe.ouverte { border-color: var(--ok-ink); color: var(--ok-ink); }
.cx-classe.ouverte.choisie { border-color: var(--accent); }
.cx-btn-fermer { background: var(--danger); }
.cx-resultat .cx-resultat-petit { font-size: 1.15rem; letter-spacing: 0; }
@media (max-height: 700px) { .cx-titre { font-size: 1.6rem; } .cx-touche, .cx-btn { min-height: 54px; } .cx-bulle { width: 88px; height: 88px; } }
@media (prefers-reduced-motion: reduce) { .cx-roue { animation-duration: 3s; } }
.cx-bulle-g { background: var(--card); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.cx-bulle-cle { width: 150px; height: 150px; background: color-mix(in srgb, #f4b740 22%, var(--card)); }
.cx-mb { display: flex; align-items: center; gap: 10px; text-align: left; }
.cx-mb img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--accent-soft); border: 2px solid var(--ink); flex-shrink: 0; }
.cx-mb p { margin: 0; background: var(--card); border: 2px solid var(--ink); border-radius: 4px 16px 16px 16px; padding: 10px 14px; font-weight: 600; line-height: 1.35; }
html[data-mascotte="off"] .cx-mb { display: none; }
/* Barre du haut sur téléphone : logo, « Se connecter » et la roue sur une seule ligne */
@media (max-width: 480px) {
  .topbar { flex-wrap: nowrap; gap: 8px; }
  .topbar header { flex: 0 0 auto; }
  .topbar .logo-kif { --h-logo: 24px; }
  #btn-connexion { padding: 8px 10px; white-space: nowrap; flex-shrink: 0; margin-left: auto; }
  #btn-connexion svg { display: none; }
  .topbar .compte { flex-shrink: 0; }
}
@media (max-width: 370px) {
  .topbar .logo-kif { --h-logo: 20px; }
  #btn-connexion { font-size: .85rem; padding: 7px 9px; }
}
@media (max-width: 340px) {
  .topbar { padding-left: 12px; padding-right: 12px; margin-left: -12px; margin-right: -12px; gap: 6px; }
  .topbar .logo-kif { --h-logo: 17px; }
}
.cx-aide-centre { text-align: center; margin: -4px 0 4px; }
.cx-consigne { margin: -4px 0 0; padding: 12px 16px; border: 2px solid var(--accent); border-radius: 14px; background: var(--accent-soft); color: var(--ink); font-size: 1.1rem; line-height: 1.35; }
.cx-consigne strong { color: var(--accent); font-weight: 800; }
.cx-ou { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .95rem; }
.cx-ou span { flex: 1; height: 2px; background: var(--line); }
.cx-pose { width: 170px; height: auto; }
html[data-mascotte="off"] .cx-pose { display: none; }
/* Story (intro des chapitres, bienvenue) : boutons Retour / Suivant visibles sous la carte */
.story-nav { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 4px; }
.story-nav button { min-height: 52px; padding: 0 22px; border: 2px solid var(--ink); border-radius: 14px; font: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.story-prec { background: var(--card); color: var(--ink); }
.story-suiv { margin-left: auto; background: var(--ink); color: var(--on-ink); box-shadow: 3px 3px 0 var(--accent); }
.story-nav .story-nav-cache { visibility: hidden; }
.story-nav button[hidden] { display: none; }
.cx-enregistre { margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--ok-bg); color: var(--ok-ink); border: 2px solid var(--ok-ink); text-align: center; display: flex; flex-direction: column; gap: 2px; }
.cx-enregistre strong { font-size: 1.35rem; font-weight: 800; }
.cx-enregistre span { font-size: 1.05rem; font-weight: 600; }

/* ===== Vieux iPhone (avant iOS 16.2) : color-mix() inconnu =====
   Sans ce bloc, les fonds clairs calculés (--accent-soft, --blue-soft, utilisés partout) deviendraient transparents.
   Couleurs approchées, fixes par couleur d'accent ; les autres color-mix() tombent proprement (fond de carte). */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root { --accent-soft: #fce0d9; --blue-soft: #e2e9f9; }
  html[data-accent="bleu"] { --accent-soft: #dde8fb; }
  html[data-accent="vert"] { --accent-soft: #d9f0e5; }
  html[data-accent="violet"] { --accent-soft: #ece4fa; }
  html[data-accent="rose"] { --accent-soft: #f9e0ea; }
  html[data-theme="sombre"] { --accent-soft: #2e2826; --blue-soft: #1f2740; }
  @media (prefers-color-scheme: dark) { html[data-theme="auto"] { --accent-soft: #2e2826; --blue-soft: #1f2740; } }
}

/* Outils du compte admin, en haut du menu (index.html #admin-outils) */
.admin-outils { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; padding: 14px; border: 2px solid var(--accent); border-radius: 18px; background: var(--accent-soft); }
.admin-outils[hidden] { display: none; }
.admin-outils-titre { margin: 0; font-weight: 800; font-size: 1rem; color: var(--ink); }
.admin-outil { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 16px; border: 2px solid var(--ink); border-radius: 14px; background: var(--accent); color: #fff; font: inherit; font-size: 1.08rem; font-weight: 700; text-align: left; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.admin-outil:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.admin-outil span:first-child { font-size: 1.4rem; }
.admin-outil + .admin-outil { background: var(--card); color: var(--ink); }
.admin-outil[hidden] { display: none; }

/* Classes en anglais (classesAnglais, js/programmes.js) : textes écrits par le CSS, en anglais, et pas de « Je veux réviser » (réservé aux chapitres en français) */
html[data-langue="en"] .bloc-attention::before { content: "⚠️ Watch out"; }
html[data-langue="en"] .bloc-thales:not(.curseurs-touches) .thales-curseur:not(.curseur-touche)::after { content: "↔ Drag the circle"; }
html[data-langue="en"] #ecran-chapitre [data-reviser] { display: none; }
/* Élève dont la classe est en anglais : l'accueil ne propose que ses cours (pas Collège / Lycée, pas « Je veux réviser ») */
html[data-compte="en"] #ecran-niveau .niveau:not(.autre), html[data-compte="en"] #ecran-niveau [data-reviser] { display: none; }

/* ===== Physique-chimie : blocs « C'est des maths ! », « Expérience à la maison », « Boîte à outils » (js/app.js) ===== */
:root { --outil: #4b6178; }
html[data-theme="sombre"] { --outil: #9db3c9; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --outil: #9db3c9; } }
.bm-tag, .xp-tag, .bo-tag {
  justify-self: start; margin: 0; padding: 5px 12px; border-radius: 99px; border: 2px solid var(--ink);
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--card); line-height: 1.3;
}
.bloc-maths h3, .bloc-experience h3, .bloc-outil h3 { margin: 0; font-family: "Fraunces", Georgia, serif; font-size: 1.12rem; line-height: 1.3; }
/* « C'est des maths ! » : feuille quadrillée bleue, comme un cahier de maths */
.bloc-maths {
  --fond-formule: var(--card); display: grid; gap: 10px; padding: 14px 14px 16px; border: 2px solid var(--ink); border-radius: 16px;
  background-color: var(--card); box-shadow: 4px 4px 0 var(--p2);
  background-image: linear-gradient(transparent 23px, color-mix(in srgb, var(--p2) 16%, transparent) 24px), linear-gradient(90deg, transparent 23px, color-mix(in srgb, var(--p2) 16%, transparent) 24px);
  background-size: 24px 24px;
}
.bm-tag { background: var(--p2); }
/* Corps en bloc (pas en grille) : un texte avec du gras ou des formules KaTeX reste sur une seule ligne qui coule */
.bm-corps, .bo-corps { display: block; min-width: 0; line-height: 1.55; }
.bm-corps p, .bo-corps p { margin: 0; }
.bm-corps ul, .bm-corps ol, .bo-corps ul, .bo-corps ol { margin: 0; padding-left: 20px; }
.bm-corps > * + p, .bm-corps > * + ul, .bm-corps > * + ol, .bm-corps > * + table, .bm-corps > * + div,
.bo-corps > * + p, .bo-corps > * + ul, .bo-corps > * + ol, .bo-corps > * + table, .bo-corps > * + div { margin-top: 6px; }
/* Boîte à outils : gris-bleu, comme une caisse à outils */
.bloc-outil {
  --fond-formule: var(--card); display: grid; gap: 10px; padding: 14px 14px 16px; border: 2px dashed var(--outil); border-radius: 16px;
  background: var(--card); background: color-mix(in srgb, var(--outil) 9%, var(--card)); box-shadow: 4px 4px 0 var(--outil);
}
.bo-tag { background: var(--outil); }
/* Bouton vers un autre chapitre (maths ou boîte à outils) */
.lien-chapitre {
  justify-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 100%;
  min-height: 48px; padding: 9px 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); color: var(--ink);
  font: inherit; font-weight: 700; font-size: .95rem; text-align: left; cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.lien-chapitre small { font-weight: 500; font-size: .8rem; color: var(--muted); }
.bm-lien { box-shadow: 3px 3px 0 var(--p2); }
.bo-lien { box-shadow: 3px 3px 0 var(--outil); }
.lien-chapitre:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
/* Expérience à la maison : vert « labo » */
.bloc-experience {
  display: grid; gap: 12px; padding: 14px 14px 16px; border: 2px solid var(--ink); border-radius: 16px;
  background: var(--ok-bg); box-shadow: 4px 4px 0 var(--ok-ink);
}
.xp-tag { background: var(--ok-ink); }
.xp-sur { margin: -4px 0 0; font-size: .86rem; font-weight: 700; color: var(--ok-ink); }
.xp-partie { background: var(--card); border: 2px solid var(--ok-ink); border-radius: 14px; padding: 10px 12px 12px; }
.xp-titre { margin: 0 0 6px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ok-ink); }
.xp-materiel { margin: 0; padding-left: 20px; display: grid; gap: 3px; }
.xp-etapes { margin: 0; padding: 0; list-style: none; counter-reset: xp; display: grid; gap: 8px; }
.xp-etapes li { counter-increment: xp; display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; }
.xp-etapes li::before {
  content: counter(xp); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ok-ink); color: var(--card); font-weight: 800; font-size: .9rem;
}
.xp-cartes { display: grid; gap: 10px; }
.xp-carte .carte-face { min-height: 96px; }
.xp-carte .carte-recto { background: var(--card); box-shadow: 3px 3px 0 var(--ok-ink); }
.xp-carte .carte-recto small { color: var(--muted); font-size: .8rem; }
.xp-carte .carte-verso { font-size: .95rem; text-align: left; place-content: center start; padding: 12px 14px; }
.xp-carte .carte-verso b { color: var(--ok-ink); }
@media (min-width: 560px) { .xp-cartes { grid-template-columns: 1fr 1fr; } }

/* ===== Classe des étapes (champ `classe` : 5e, 4e, 3e) ===== */
.pastille-classe {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 99px; border: 1.5px solid var(--ink);
  background: var(--card); color: var(--ink); font-family: "Inter", system-ui, sans-serif; font-size: .74rem; font-weight: 800;
  letter-spacing: .02em; vertical-align: 2px; white-space: nowrap;
}
.pastille-classe.plus-loin { border-style: dashed; color: var(--muted); }
.pastille-loin { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: .64rem; font-weight: 800; background: var(--card); color: var(--ink); border: 1.5px dashed var(--ink); letter-spacing: .03em; }
.parcours .etape-plus-loin { border-style: dashed; border-left-style: solid; }
.etape-classe { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.etape-classe[hidden] { display: none; }
.etape-classe .pastille-classe { margin-left: 0; font-size: .82rem; padding: 2px 10px; }
.etape-classe-txt { font-size: .82rem; font-weight: 700; color: var(--muted); }
#ecran-etape .etape-classe { text-align: left; }
.laterale-item .pastille-classe { margin-left: 6px; font-size: .66rem; padding: 0 6px; }
/* Sélecteur « Je suis en : 5e / 4e / 3e » */
.pc-niveau {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 6px; padding: 12px 14px;
  border: 2px solid var(--ink); border-radius: 16px; background: var(--card); text-align: left;
}
.pc-niveau[hidden] { display: none; }
.pcn-label { font-weight: 800; }
.pcn-boutons { display: grid; grid-template-columns: repeat(3, 56px); gap: 6px; }
.pcn-boutons button {
  width: 56px; min-height: 44px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); color: var(--ink);
  font: inherit; font-weight: 800; font-size: 1.02rem; cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.pcn-boutons button.actif { background: var(--accent); color: #fff; box-shadow: 2px 2px 0 var(--ink); }
.pcn-boutons button:active { transform: translate(1px, 1px); }
.pcn-aide { flex-basis: 100%; margin: 0; font-size: .86rem; color: var(--muted); line-height: 1.4; }
.pcn-aide:empty { display: none; }
#ecran-sommaire .pc-niveau { margin: 12px 0 0; }
/* Classe connue : une seule ligne discrète */
.pc-niveau.compact { flex-wrap: nowrap; justify-content: space-between; padding: 6px 6px 6px 14px; border-width: 1.5px; border-color: var(--line); border-radius: 999px; }
.pcn-parcours { font-size: .95rem; color: var(--muted); }
.pcn-parcours strong { color: var(--ink); }
.pcn-changer {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--accent);
  font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
/* Bouton flottant « Revenir à ma leçon » (au-dessus de « Mon plan de révision » s'ils sont tous les deux là) */
.retour-lecon { box-shadow: 3px 3px 0 var(--p2); }
body.avec-retour-plan .retour-lecon { bottom: 76px; }
body.avec-retour-lecon main { padding-bottom: 80px; }

/* ===== Accueil : Maths ou Physique-chimie (index.html .vue-accueil, js/app.js vueAccueil) ===== */
.accueil-mb { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 14px; }
.accueil-mb-visage { width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%; background: var(--accent-soft); border: 2px solid var(--ink); object-fit: cover; }
.accueil-mb-bulle {
  position: relative; margin: 0; padding: 9px 14px; border: 2px solid var(--ink); border-radius: 16px; background: var(--card);
  font-weight: 700; font-size: .95rem; text-align: left; box-shadow: 3px 3px 0 var(--ink); line-height: 1.3;
}
.accueil-mb-bulle::before {   /* la pointe de la bulle, vers le visage */
  content: ""; position: absolute; left: -9px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: var(--card); border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg);
}
html[data-mascotte="off"] .accueil-mb, html:not([data-mascotte-ok]) .accueil-mb { display: none; }
.matieres { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.matiere {
  --c: var(--accent); position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 0; padding: 18px 8px 16px; border: 2px solid var(--ink); border-radius: 20px; cursor: pointer;
  font: inherit; color: var(--ink); background: var(--accent-soft); box-shadow: 5px 5px 0 var(--ink);
  transition: transform .15s, box-shadow .15s;
}
.matiere-pc { --c: var(--p4); background: var(--blue-soft); background: color-mix(in srgb, var(--p4) 16%, var(--card)); }
.matiere:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.matiere:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.matiere-dessin {
  position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 6px;
  border-radius: 50%; background: var(--card); border: 2px solid var(--ink); box-shadow: 0 0 0 5px var(--c);
}
.matiere-icone { font-size: 2.5rem; line-height: 1; }
.matiere-symbole {
  position: absolute; right: -10px; top: -8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--c); color: var(--card); border: 2px solid var(--ink); font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 1.05rem;
  transform: rotate(8deg);
}
.matiere strong { font-family: "Fraunces", Georgia, serif; font-size: clamp(1.08rem, 4.6vw, 1.45rem); line-height: 1.15; overflow-wrap: anywhere; }
.matiere small { color: var(--muted); font-size: .84rem; line-height: 1.3; }
.matiere-fleche {
  display: grid; place-items: center; width: 34px; height: 34px; margin-top: 8px; border-radius: 50%;
  background: var(--ink); color: var(--on-ink); font-weight: 800;
}
.matiere-nouveau {
  position: absolute; left: -6px; top: 10px; padding: 3px 9px; border-radius: 8px; border: 2px solid var(--ink);
  background: var(--p6); color: var(--card); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; transform: rotate(-8deg);
}
@media (prefers-reduced-motion: no-preference) {
  .vue-accueil:not([hidden]) .matiere { animation: matiere-entree .45s cubic-bezier(.3, .8, .3, 1.2) both; }
  .vue-accueil:not([hidden]) .matiere-pc { animation-delay: .08s; }
}
@keyframes matiere-entree { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
/* Étiquette de la matière au-dessus du choix du niveau */
.accueil-matiere {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 4px 12px; border-radius: 99px;
  border: 2px solid var(--ink); background: var(--accent-soft); font-weight: 800; font-size: .86rem;
}
.accueil-matiere-pc { background: var(--blue-soft); background: color-mix(in srgb, var(--p4) 16%, var(--card)); }
.niveaux-pc .niveau-pc:not(.lycee) { background: var(--blue-soft); background: color-mix(in srgb, var(--p4) 16%, var(--card)); }
.niveau.niveau-en-cours { border-style: dashed; box-shadow: none; background: var(--soon-a); color: var(--soon-ink); cursor: default; }
.niveau.niveau-en-cours:hover, .niveau.niveau-en-cours:active { transform: none; box-shadow: none; }
.niveau-en-cours .icone { filter: grayscale(1); opacity: .6; }
.badge-en-cours { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 99px; background: var(--soon-badge); color: var(--soon-badge-ink) !important; font-weight: 700; }
.badge-en-cours::before { content: "⏳ "; }
.niveau-pc.verrou { position: relative; }
.niveau-pc.verrou::after { content: "🔒"; position: absolute; top: 8px; right: 10px; font-size: 1rem; }
.accueil-retour { display: inline-flex; }
.btn-changer-classe[hidden] { display: none; }
@media (min-width: 760px) {
  .matiere { padding: 26px 16px 20px; }
  .matiere-dessin { width: 104px; height: 104px; }
  .matiere-icone { font-size: 3rem; }
}
html[data-compte="en"] #ecran-niveau .accueil-retour, html[data-compte="en"] #ecran-niveau .accueil-matiere { display: none; }

/* ===== Haut-parleur de la barre du haut (coupe ou remet tous les sons, 22 oct. 2026) ===== */
.btn-sons {
  margin-left: auto; flex-shrink: 0; width: 42px; height: 42px; padding: 0; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--card); color: var(--ink); font-size: 1.2rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); touch-action: manipulation;
}
.btn-sons:active { transform: translate(2px, 2px); box-shadow: none; }
.btn-sons .sons-off { display: none; }
html[data-sons="off"] .btn-sons { background: var(--line); }
html[data-sons="off"] .btn-sons .sons-on { display: none; }
html[data-sons="off"] .btn-sons .sons-off { display: inline; }
.btn-sons.btn-sons-tape { animation: sons-tape .3s ease-out; }
@keyframes sons-tape { 40% { transform: scale(1.15); } }
@media (max-width: 480px) {
  .btn-sons { width: 38px; height: 38px; font-size: 1.05rem; }
  .btn-sons ~ #btn-connexion { margin-left: 0; }
}

/* ===== Auto-évaluation : les trois réponses côte à côte, et confettis sur « J'avais trouvé pareil » ===== */
.ae-btns.ae-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ae-btns.ae-trio button { flex-direction: column; justify-content: flex-start; gap: 4px; text-align: center; padding: 10px 6px; font-size: .9rem; line-height: 1.2; }
.ae-btns.ae-trio button span:first-child { font-size: 1.6rem; }
.ae-btns.ae-trio button[data-ae="ok"] { border-color: var(--ok-ink); box-shadow: 2px 2px 0 var(--ok-ink); }
.confettis-bouton { position: fixed; width: 0; height: 0; pointer-events: none; z-index: 60; }
.confettis-bouton span {
  position: absolute; left: -4px; top: -6px; width: 8px; height: 12px; border-radius: 2px; opacity: 0;
  animation: confetti-jaillit .9s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes confetti-jaillit {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 60px)) rotate(var(--rot)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .confettis-bouton { display: none; } .btn-sons.btn-sons-tape { animation: none; } }

/* ===== Guide des animations (js/guide-anims.js, 22 oct. 2026) : démo, « À toi ! », élément qui pulse, indice ===== */
.bloc-thales { position: relative; }
.guide-calque { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.guide-calque:empty { display: none; }
.guide-main { position: absolute; left: 0; top: 0; margin: -4px 0 0 -14px; font-size: 32px; line-height: 1; opacity: 0;
  filter: drop-shadow(1px 2px 0 var(--card)) drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); will-change: transform; }
.guide-bulle { position: absolute; max-width: 240px; padding: 7px 14px; border-radius: 999px; background: var(--ink); color: var(--card);
  font-weight: 800; font-size: 1.05rem; line-height: 1.25; text-align: center; box-shadow: 3px 3px 0 var(--accent);
  opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .25s, transform .25s; white-space: normal; }
.guide-bulle.guide-bulle-on { opacity: 1; transform: none; }
.guide-pulse { animation: guide-pulse 1.3s ease-out infinite; border-radius: 12px; }
input[type="range"].guide-pulse { animation: none; outline: 3px solid var(--accent); outline-offset: 6px; border-radius: 999px; }
@keyframes guide-pulse {
  0% { box-shadow: 0 0 0 0 var(--accent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.guide-pied { display: flex; justify-content: flex-end; margin: 4px 2px 0; }
.guide-revoir { border: 0; background: none; color: var(--muted); font: inherit; font-size: .85rem; font-weight: 700; padding: 6px 8px; min-height: 36px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.guide-revoir:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .guide-pulse { animation: none; outline: 3px solid var(--accent); outline-offset: 3px; } .guide-bulle { transition: none; } }
/* Consigne de l'animation (au-dessus) : en gros, la phrase d'aide en petit dessous */
.anim-etat { font-size: 1.12rem; line-height: 1.3; }
.anim-etat-ok { font-size: 1.15rem; }

/* ===== Exercices « Défi » (22 oct. 2026) : carte à part, bandeau, écran « Prêt ? », célébration, badge ===== */
.exo.exo-defi { position: relative; border: 3px solid var(--p6, var(--accent)); background: var(--card); box-shadow: 4px 4px 0 var(--ink); padding-top: 26px; margin-top: 12px; }
.defi-bandeau {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  padding: 4px 18px; border: 2px solid var(--ink); border-radius: 999px; background: var(--p6, var(--accent)); color: var(--ink);
  font-weight: 900; font-size: 1.05rem; letter-spacing: .14em; white-space: nowrap; box-shadow: 2px 2px 0 var(--ink);
}
.defi-bandeau span { letter-spacing: 0; }
.exo-defi .exo-num { color: var(--ink); }
.defi-porte { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 14px 6px 6px; }
.defi-porte[hidden], .defi-contenu[hidden] { display: none; }
.defi-porte-titre { margin: 0; font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; font-weight: 800; color: var(--ink); }
.defi-porte-texte { margin: 0; color: var(--muted); font-weight: 600; }
.defi-go {
  margin-top: 6px; min-height: 48px; padding: 10px 22px; border: 2px solid var(--ink); border-radius: 999px; background: var(--accent); color: var(--card);
  font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); animation: defi-appel 1.6s ease-in-out infinite;
}
.defi-go:active { transform: translate(2px, 2px); box-shadow: none; }
@keyframes defi-appel { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.defi-contenu.defi-entree { animation: entree .35s ease; }
.ae.ae-defi { font-size: 1.05rem; border-width: 3px; box-shadow: 3px 3px 0 var(--ok-ink); }
.exo-reussi.exo-reussi-defi { background: var(--p6, var(--ok-bg)); color: var(--ink); border: 2px solid var(--ink); font-weight: 800; }
.exo-defi.defi-fete { animation: defi-fete .7s ease-out; }
@keyframes defi-fete { 0% { transform: scale(1); } 30% { transform: scale(1.03) rotate(-.6deg); } 60% { transform: scale(1.01) rotate(.4deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .defi-go, .exo-defi.defi-fete, .defi-contenu.defi-entree { animation: none; } }

/* Porte de l'accès de test : lien discret pour le compte administrateur (connexion Gmail sans code) */
.porte-admin { justify-self: center; margin-top: 4px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; padding: 8px; min-height: 40px; cursor: pointer; }
.porte-admin:disabled { opacity: .5; cursor: wait; }

/* Boutons d'action des animations (« ▶️ Lancer… », « 🚀 Lancer », « Lâcher »…) : gros, couleur forte, bien en avant
   (retour testeurs du 19 oct.). Tout bouton data-v="go" d'une animation de chapitre en profite. */
.bloc-thales button[data-v="go"]:not(:disabled), .bloc-thales .su-btn.su-suivante:not(:disabled), .bloc-thales .an-btn.an-btn-go:not(:disabled) {
  min-height: 52px; padding: 12px 22px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 1.08rem; font-weight: 800; box-shadow: 3px 3px 0 var(--ink); }
.bloc-thales button[data-v="go"]:not(:disabled):active, .bloc-thales .su-btn.su-suivante:not(:disabled):active, .bloc-thales .an-btn.an-btn-go:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* Confirmation quand on choisit un thème (js/avatar.js, choisirTheme) */
.theme-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 9999; max-width: calc(100vw - 32px);
  padding: 12px 18px; border-radius: 14px; border: 2px solid var(--ink); background: var(--card); color: var(--ink);
  font-weight: 800; box-shadow: 4px 4px 0 var(--accent); animation: fondu .25s ease-out; }