/* ============================================================
   Mission CEB — styles de l'application
   3 ambiances au choix : Cahier (défaut), Tableau, Lecture (confort de lecture)
   ============================================================ */
:root {
  --texte: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --titre: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --manuscrit: 'Playwrite BE WAL', 'Segoe Script', cursive;   /* écriture scolaire belge */
  --r: 14px;
  --juste: #2e7d32; --faux: #b3261e;
}
/* Lecture : confort de lecture — fond crème uni (moins d'éblouissement), texte plus grand et plus aéré,
   aucune écriture cursive. Pensée pour les enfants qui se fatiguent vite à lire. */
[data-theme="lecture"] {
  --manuscrit: var(--texte);
  --fond:#f8f3e6; --deco: none;
  --panel:#fffcf4; --panel2:#f3ecdb; --ligne:#e0d6bf; --txt:#1f2430; --mute:#545a66;
  --accent:#2b5797; --accent-txt:#fff; --prog:#2b5797; --or:#8a5d00;
  --hero:#fffcf4; --hero-txt:#1f2430; --hero-accent:#2b5797;
  --m1:#2b5797; --m2:#9a6418; --m3:#2e6a4f; --m4:#8e3a46; --m5:#5b4a8a; --m-txt:#fff;
  --mat:#fffcf4; --mat-sel:#e9eef8;
  --cta:#2b5797; --cta-txt:#fff; --cta-ombre:0 3px 0 #1b3b6b;
  --bord:1px solid var(--ligne); --bord-fort:2px solid #d3c7aa; --ombre:0 1px 2px rgba(60,50,30,.05); --ombre-bouton:inset 0 -3px 0 rgba(0,0,0,.16);
  --nav-actif:#2b5797; --nav-actif-txt:#fff; --champ:#fffefa; --modal:#fffcf4;
}
/* Cahier : page Seyès (lignes bleues, marge rouge), stylo bleu et surligneur jaune. */
[data-theme="cahier"] {
  --fond:#fdfdfa; --deco:
    linear-gradient(90deg, transparent 64px, rgba(214,72,72,.55) 64px, rgba(214,72,72,.55) 66px, transparent 66px),
    repeating-linear-gradient(180deg, transparent 0 31px, #c3d0ea 31px 32px),
    repeating-linear-gradient(180deg, transparent 0 7px, #e7edf8 7px 8px),
    repeating-linear-gradient(90deg, transparent 0 31px, #edf1f9 31px 32px);
  --panel:#ffffff; --panel2:#f4f7fc; --ligne:#cbd6ec; --txt:#1c2333; --mute:#566078;
  --accent:#1c3faa; --accent-txt:#fff; --prog:#1c3faa; --or:#9a5b00;
  --hero:#ffffff; --hero-txt:#1c2333; --hero-accent:#1c3faa;
  --m1:#2451c4; --m2:#c96a12; --m3:#1d7f55; --m4:#c2362c; --m5:#6a3fb5; --m-txt:#fff;
  --mat:#ffffff; --mat-sel:#fff3a0;
  --cta:#1c3faa; --cta-txt:#fff; --cta-ombre:0 3px 0 #10276f;
  --bord:1px solid var(--ligne); --bord-fort:2px solid #b9c7e4; --ombre:0 1px 2px rgba(28,35,51,.06), 0 6px 16px rgba(28,35,51,.06); --ombre-bouton:inset 0 -3px 0 rgba(0,0,0,.18);
  --nav-actif:#1c3faa; --nav-actif-txt:#fff; --champ:#fff; --modal:#fff;
}
/* Tableau : tableau vert de la classe, craie blanche et craie jaune. */
[data-theme="tableau"] {
  --juste: #8bd88f; --faux: #ff9a8f;
  --fond:#1e3a2f; --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"), radial-gradient(120% 90% at 50% 30%, rgba(255,255,255,.05), transparent 60%), radial-gradient(140% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.28) 100%);
  --panel:rgba(255,255,255,.045); --panel2:rgba(255,255,255,.08); --ligne:rgba(240,237,226,.22); --txt:#f2efe4; --mute:#b6c6ba;
  --accent:#f3d36b; --accent-txt:#1e3a2f; --prog:#f3d36b; --or:#f3d36b;
  --hero:rgba(0,0,0,.16); --hero-txt:#f2efe4; --hero-accent:#f3d36b;
  --m1:#9cc4e8; --m2:#f2bd86; --m3:#a9dcb6; --m4:#f2a7a7; --m5:#c9b6ef; --m-txt:#14261f;
  --mat:rgba(255,255,255,.045); --mat-sel:rgba(243,211,107,.16);
  --cta:#f3d36b; --cta-txt:#1e3a2f; --cta-ombre:0 3px 0 #b39532;
  --bord:1.5px solid var(--ligne); --bord-fort:2px solid rgba(240,237,226,.32); --ombre:none; --ombre-bouton:inset 0 -3px 0 rgba(0,0,0,.18);
  --nav-actif:#f3d36b; --nav-actif-txt:#1e3a2f; --champ:rgba(0,0,0,.18); --modal:#21402f;
}

/* ---------- Base ---------- */
* { box-sizing:border-box; }
html, body { margin:0; overflow-x:clip; }
body { background:var(--deco), var(--fond); color:var(--txt); font-family:var(--texte); min-height:100vh; -webkit-tap-highlight-color:transparent; }
h1, h2, h3 { font-family:var(--titre); margin:0; line-height:1.12; letter-spacing:-.01em; }
button { font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
button:disabled { cursor:default; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
.ecran { min-height:100vh; }
.carte { background:var(--panel); border:var(--bord); box-shadow:var(--ombre); border-radius:var(--r); padding:18px; backdrop-filter:blur(10px); }
.mute { color:var(--mute); }
.barre { height:12px; background:rgba(127,127,127,.25); border-radius:999px; overflow:hidden; }
.barre i { display:block; height:100%; border-radius:999px; background:var(--prog); transition:width .6s ease; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--titre); font-weight:800; font-size:17px; padding:12px 20px; border-radius:14px; background:var(--panel2); border:var(--bord); color:var(--txt); }
.btn-cta { font-weight:800; background:var(--cta); color:var(--cta-txt); box-shadow:var(--cta-ombre); border:0; }
.btn-cta:disabled { opacity:.4; filter:grayscale(.6); box-shadow:none; }
.btn:disabled { opacity:.45; cursor:default; }
.btn:active:not(:disabled) { transform:translateY(2px); }
.lien { color:var(--mute); text-decoration:underline; font-size:14px; padding:6px; }
.champ { width:100%; font:inherit; font-size:19px; padding:13px 14px; border-radius:14px; border:var(--bord-fort); background:var(--champ); color:var(--txt); }
textarea.champ { resize:vertical; min-height:90px; line-height:1.4; }
.champ:focus { outline:none; border-color:var(--accent); }
.pastille-ava { display:grid; place-items:center; border-radius:50%; flex:none; }

/* ---------- Connexion ---------- */
.connexion { display:grid; grid-template-columns:minmax(0,1fr); place-items:center; padding:24px 16px 40px; }
.connexion-boite { width:100%; max-width:520px; display:flex; flex-direction:column; gap:18px; }
.marque { display:flex; align-items:center; gap:12px; font-family:var(--titre); font-weight:900; font-size:30px; letter-spacing:-.02em; }
.marque .pastille { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; background:var(--accent); color:var(--accent-txt); font-size:28px; box-shadow:var(--ombre-bouton); }
.marque small { display:block; font-family:var(--texte); font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--mute); }
.connexion h1 { font-size:30px; font-weight:900; }
.connexion p { margin:0; }
.joueurs { display:flex; flex-direction:column; gap:10px; }
.joueur-ligne { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:16px; background:var(--panel2); border:var(--bord); text-align:left; width:100%; }
.joueur-ligne b { font-family:var(--titre); font-size:19px; display:block; }
.joueur-ligne small { color:var(--mute); }
.joueur-ligne .fleche { margin-left:auto; font-size:22px; color:var(--mute); }
.etape-titre { font-weight:800; font-family:var(--titre); font-size:18px; margin:4px 0 8px; }
.grille-avatars { display:grid; grid-template-columns:repeat(8,1fr); gap:8px; }
.grille-avatars button { min-width:0; aspect-ratio:1; border-radius:14px; font-size:28px; background:var(--panel2); border:var(--bord-fort); display:grid; place-items:center; }
.grille-avatars button.sel { border-color:var(--accent); background:var(--mat-sel); transform:scale(1.06); }
.couleurs { display:flex; gap:10px; flex-wrap:wrap; }
.couleurs button { width:38px; height:38px; border-radius:50%; border:3px solid transparent; }
.couleurs button.sel { border-color:var(--txt); transform:scale(1.1); }
.ambiances { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ambiances button { border-radius:14px; padding:10px; border:var(--bord-fort); background:var(--panel2); font-weight:800; font-family:var(--titre); display:flex; flex-direction:column; align-items:center; gap:6px; }
.ambiances button.sel { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.ambiances .apercu { width:100%; height:36px; border-radius:8px; }
.ap-lecture { background:#f8f3e6; border:1px solid #d3c7aa; box-shadow:inset 0 -9px 0 -6px #2b5797, inset 0 -14px 0 -10px #c9bfa8, inset 0 -19px 0 -15px #c9bfa8; }
.ap-cahier { background:linear-gradient(90deg, transparent 14px, #e07a7a 14px 16px, transparent 16px), repeating-linear-gradient(180deg, #fff 0 7px, #c3d0ea 7px 8px); border:1px solid #cbd6ec; }
.ap-tableau { background:#1e3a2f; border:3px solid #8a6a43; box-shadow:inset 10px -8px 0 -6px #f2efe4; }
.apercu-joueur { display:flex; align-items:center; gap:14px; }
.erreur { color:var(--faux); font-weight:700; font-size:14px; min-height:1.2em; }

/* ---------- Application (accueil) ---------- */
.app { display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
.side { padding:22px 14px; display:flex; flex-direction:column; gap:6px; position:sticky; top:0; height:100vh; border-right:var(--bord); }
.side .marque { font-size:22px; padding:4px 8px 18px; }
.side .marque .pastille { width:40px; height:40px; font-size:20px; border-radius:12px; }
.nav a, .nav button { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px; color:var(--mute); text-decoration:none; font-weight:600; width:100%; text-align:left; }
.nav span { font-size:19px; width:24px; text-align:center; }
.nav .actif { background:var(--nav-actif); color:var(--nav-actif-txt); font-weight:700; }
.nav :is(a, button):hover:not(.actif) { background:var(--panel2); color:var(--txt); }
.nav .bientot { opacity:.55; }
.nav .bientot::after { content:'bientôt'; margin-left:auto; font-size:10px; font-weight:800; text-transform:uppercase; border:1px solid currentColor; border-radius:6px; padding:1px 5px; }
.side .niveau { margin-top:auto; }
.side .niveau b { font-family:var(--titre); font-size:16px; }
.side .niveau p { margin:2px 0 8px; color:var(--mute); font-size:13px; }

.main { padding:22px 26px 40px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-content:start; }
.top { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.salut h1 { font-size:30px; font-weight:800; }
.salut p { margin:2px 0 0; color:var(--mute); }
.salut p b { color:var(--txt); }
.stats { display:flex; gap:4px; background:var(--panel); border:var(--bord); box-shadow:var(--ombre); border-radius:16px; padding:6px; backdrop-filter:blur(10px); }
.stat { display:flex; align-items:center; gap:8px; padding:6px 12px; }
.stat .i { font-size:21px; }
.stat b { font-family:var(--titre); font-size:20px; display:block; line-height:1; font-weight:800; }
.stat small { color:var(--mute); font-size:12px; }
.col-gauche { display:flex; flex-direction:column; gap:20px; min-width:0; }
.col-droite { display:flex; flex-direction:column; gap:16px; }

.hero { position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; padding:24px 28px; background:var(--hero); color:var(--hero-txt); }
.hero-visuel { position:relative; }
.hero .grand-ava { width:140px; height:140px; font-size:78px; box-shadow:0 0 0 6px rgba(255,255,255,.25), 0 0 0 12px rgba(255,255,255,.08); }
.niv-badge { position:absolute; right:-4px; bottom:4px; background:var(--hero-accent); color:#111; font-family:var(--titre); font-weight:900; font-size:15px; padding:4px 10px; border-radius:999px; border:3px solid rgba(0,0,0,.15); }
.hero small.sur { font-weight:700; font-size:14px; opacity:.85; }
.hero h2 { font-family:var(--manuscrit); font-size:32px; font-weight:400; line-height:1.5; margin:10px 0 14px; padding-bottom:.15em; }
.hero h2 span { color:var(--hero-accent); }
.hero p { margin:0 0 14px; opacity:.92; }
.prog { display:flex; align-items:center; gap:12px; background:rgba(0,0,0,.2); padding:10px 14px; border-radius:14px; max-width:440px; }
.prog .barre { flex:1; }
.prog b { font-family:var(--titre); color:var(--hero-accent); font-size:20px; font-weight:900; white-space:nowrap; }

.section-titre { display:flex; align-items:center; gap:8px; font-size:20px; font-weight:800; margin:0 0 12px; }
.modes { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.mode { border-radius:16px; padding:16px 12px 14px; text-align:left; color:var(--m-txt); position:relative; transition:transform .15s; box-shadow:var(--ombre-bouton); }
.mode:hover:not(:disabled) { transform:translateY(-3px); }
.mode.sel { outline:3px solid var(--txt); outline-offset:3px; }
.mode:disabled { opacity:.5; filter:grayscale(.5); }
.mode .e { font-size:34px; display:block; margin-bottom:10px; }
.mode b { font-family:var(--titre); font-size:19px; font-weight:800; display:block; }
.mode small { display:block; opacity:.92; font-size:13px; margin-top:2px; line-height:1.35; }
.m1 { background:var(--m1); } .m2 { background:var(--m2); } .m3 { background:var(--m3); } .m4 { background:var(--m4); }
.etiq { position:absolute; top:10px; right:10px; background:rgba(0,0,0,.28); color:#fff; font-size:11px; font-weight:800; padding:3px 8px; border-radius:999px; }
.matieres { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.matiere { border-radius:16px; padding:14px 12px; text-align:left; background:var(--mat); border:var(--bord); transition:transform .15s; }
.matiere:hover { transform:translateY(-3px); }
.matiere.sel { background:var(--mat-sel); border-color:var(--accent); }
.matiere .e { font-size:30px; display:block; }
.matiere b { font-family:var(--titre); font-size:17px; font-weight:800; display:block; margin-top:6px; }
.matiere small { color:var(--mute); font-size:12px; display:block; }
.mini { height:6px; background:rgba(127,127,127,.25); border-radius:999px; margin-top:10px; overflow:hidden; }
.mini i { display:block; height:100%; background:var(--prog); }
.sources { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; }
.sources-titre { font-weight:700; font-family:var(--titre); margin-right:2px; }
.options-examen { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.puce { border-radius:999px; padding:8px 14px; border:var(--bord-fort); background:var(--panel2); font-weight:700; }
.puce.sel { border-color:var(--accent); background:var(--mat-sel); }
.puce:disabled { opacity:.45; }
.livrets { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; }
.livret { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:10px 12px; border-radius:14px; border:var(--bord-fort); background:var(--panel2); color:inherit; font:inherit; cursor:pointer; }
.livret .e { font-size:20px; }
.livret b { font-size:14px; line-height:1.25; }
.livret small { opacity:.75; font-size:12px; }
.livret.sel { border-color:var(--accent); background:var(--mat-sel); }
.go { display:flex; justify-content:center; }
.go .btn-cta { font-size:22px; padding:16px 52px; }

.col-droite h3 { font-size:18px; font-weight:800; margin-bottom:12px; }
.coffre { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.coffre span { font-size:46px; }
.coffre p { margin:0; color:var(--mute); font-size:14px; }
.coffre p b { color:var(--txt); }
.defi { display:grid; grid-template-columns:30px 1fr auto; gap:6px 10px; align-items:center; padding:10px 0; border-top:var(--bord); }
[data-theme="tableau"] .defi { border-top-style:dashed; }
.defi:first-of-type { border-top:0; padding-top:0; }
.defi .e { font-size:22px; grid-row:span 2; }
.defi span.t { font-size:14px; font-weight:600; }
.defi .xp { font-size:12px; color:var(--or); font-weight:800; grid-row:span 2; text-align:right; }
.defi.fait .t { text-decoration:line-through; opacity:.7; }
.defi .barre { height:7px; }
.collection { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.collection div { aspect-ratio:1; border-radius:14px; display:grid; place-items:center; font-size:26px; background:var(--panel2); border:var(--bord); }
.collection div.lock { opacity:.3; filter:grayscale(1); }
.collection div.obtenu { background:linear-gradient(135deg,#ffd23f,#ff9f1c); }
.navbas { display:none; }

/* ---------- Quiz ---------- */
.quiz { max-width:760px; margin:0 auto; padding:16px 16px 150px; }
.quiz-haut { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.quiz-haut .fermer { width:44px; height:44px; border-radius:12px; font-size:22px; background:var(--panel); border:var(--bord); flex:none; }
.quiz-haut .barre { flex:1; height:16px; }
.quiz-haut .compteur { font-family:var(--titre); font-weight:800; white-space:nowrap; }
.puces-etat { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.puces-etat span { font-size:13px; font-weight:700; padding:5px 10px; border-radius:999px; background:var(--panel); border:var(--bord); }
.puces-etat .chrono { font-family:var(--titre); font-size:15px; }
.puces-etat .chrono.urgent { background:var(--faux); color:#fff; border-color:var(--faux); }
.serie-flamme { transition:transform .3s; }
.serie-flamme.pop { transform:scale(1.35); }
.question h2 { font-size:25px; font-weight:800; margin:4px 0 16px; line-height:1.3; white-space:pre-line; }
.question .origine { font-size:13px; color:var(--mute); font-weight:700; }
.doc-btn { margin-bottom:12px; }
.doc { margin:0 0 14px; }
.doc img { width:100%; border-radius:12px; border:var(--bord); background:#fff; }
.doc figcaption { font-size:13px; color:var(--mute); margin-top:4px; }
.consigne { color:var(--mute); font-size:14px; margin:0 0 8px; font-weight:600; }
.choix { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choix.duo { grid-template-columns:1fr 1fr; }
.rep { display:flex; align-items:center; gap:12px; text-align:left; padding:14px; border-radius:16px; background:var(--panel); border:var(--bord-fort); font-weight:600; font-size:17px; min-height:64px; transition:transform .1s, border-color .15s; }
.rep:hover:not(:disabled) { border-color:var(--accent); }
.rep .lettre { width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; font-family:var(--titre); font-weight:900; background:var(--panel2); border:var(--bord); }
.rep.sel { border-color:var(--accent); background:var(--mat-sel); }
.rep.sel .lettre { background:var(--accent); color:var(--accent-txt); }
.rep.juste { border-color:var(--juste); background:color-mix(in srgb, var(--juste) 22%, var(--panel)); }
.rep.juste .lettre { background:var(--juste); color:#fff; }
.rep.faux { border-color:var(--faux); background:color-mix(in srgb, var(--faux) 22%, var(--panel)); }
.rep.faux .lettre { background:var(--faux); color:#fff; }
.rep.eteint { opacity:.5; }
.ordre-rep { display:flex; flex-direction:column; gap:8px; }
.saisie-ligne { display:flex; align-items:center; gap:10px; }
.saisie-ligne .unite { font-family:var(--titre); font-weight:800; font-size:20px; }
.texte-trous { font-size:19px; line-height:2.4; }
.texte-trous .trou { width:150px; display:inline-block; padding:6px 10px; font-size:17px; }
.grille-rep { display:flex; flex-direction:column; gap:10px; }
.grille-ligne { background:var(--panel); border:var(--bord); border-radius:14px; padding:12px; }
.grille-ligne p { margin:0 0 8px; font-weight:600; }
.grille-opts { display:flex; flex-wrap:wrap; gap:8px; }
.opt { padding:8px 12px; border-radius:10px; border:var(--bord-fort); background:var(--panel2); font-weight:700; font-size:14px; }
.opt.sel { border-color:var(--accent); background:var(--mat-sel); }
.opt.juste { border-color:var(--juste); background:color-mix(in srgb, var(--juste) 25%, var(--panel)); }
.opt.faux { border-color:var(--faux); background:color-mix(in srgb, var(--faux) 25%, var(--panel)); }
.opt.eteint { opacity:.45; }
.asso { display:flex; flex-direction:column; gap:10px; }
.asso-ligne { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center; background:var(--panel); border:var(--bord); border-radius:14px; padding:10px 12px; }
.asso-ligne p { margin:0; font-weight:600; }
.asso-ligne .champ { font-size:15px; padding:9px; }

.pied-quiz { position:fixed; left:0; right:0; bottom:0; z-index:10; padding:14px 16px calc(14px + env(safe-area-inset-bottom)); background:var(--fond); border-top:var(--bord); }
.pied-quiz .in { max-width:760px; margin:0 auto; display:flex; gap:10px; align-items:center; }
.pied-quiz .btn-cta { flex:1; font-size:19px; padding:15px; }
.pied-quiz.juste { background:color-mix(in srgb, var(--juste) 18%, var(--fond)); border-top:3px solid var(--juste); }
.pied-quiz.faux { background:color-mix(in srgb, var(--faux) 15%, var(--fond)); border-top:3px solid var(--faux); }
.pied-quiz.ouvert { background:color-mix(in srgb, var(--accent) 14%, var(--fond)); border-top:3px solid var(--accent); }
.retour { max-width:760px; margin:0 auto 12px; }
.retour b { font-family:var(--titre); font-size:22px; font-weight:900; display:block; }
.juste .retour b { color:var(--juste); } .faux .retour b { color:var(--faux); }
.retour p { margin:4px 0 0; font-size:15px; }
.retour .bonne { font-weight:700; white-space:pre-line; }
.retour .xp-gagne { float:right; font-family:var(--titre); font-weight:900; color:var(--or); font-size:18px; }

/* ---------- Résultat ---------- */
.resultat { max-width:620px; margin:0 auto; padding:28px 16px 60px; display:flex; flex-direction:column; gap:16px; text-align:center; }
.resultat .grand-emoji { font-size:72px; line-height:1; animation:rebond .8s ease; }
@keyframes rebond { 0% { transform:scale(.3); } 60% { transform:scale(1.15); } 100% { transform:scale(1); } }
.resultat h1 { font-size:34px; font-weight:900; }
.score-grand { font-family:var(--titre); font-weight:900; font-size:56px; line-height:1; }
.gains { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.gains div { background:var(--panel); border:var(--bord); border-radius:16px; padding:12px 6px; }
.gains b { font-family:var(--titre); font-size:24px; font-weight:900; display:block; }
.gains small { color:var(--mute); font-weight:600; }
.recompenses { display:flex; flex-direction:column; gap:10px; text-align:left; }
.recompense { display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:16px; background:var(--mat-sel); border:var(--bord-fort); border-color:var(--accent); animation:rebond .6s ease both; }
.recompense .e { font-size:36px; }
.recompense b { font-family:var(--titre); font-size:18px; display:block; }
.recompense small { color:var(--mute); }
.par-domaine { text-align:left; }
.par-domaine .ligne { display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; margin-bottom:10px; }
.par-domaine .ligne .barre { grid-column:1 / -1; height:8px; }
.actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.actions .btn { flex:1; min-width:160px; }

/* ---------- Réglages ---------- */
.reglages { max-width:620px; margin:0 auto; padding:20px 16px 100px; display:flex; flex-direction:column; gap:16px; }
.reglages h1 { font-size:28px; font-weight:900; }
.reglages textarea { width:100%; min-height:90px; font-family:monospace; font-size:12px; border-radius:12px; border:var(--bord-fort); background:var(--champ); color:var(--txt); padding:10px; }
.danger { color:var(--faux); }

/* ---------- Toast & confettis ---------- */
.toast { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:50; background:var(--panel); border:var(--bord-fort); border-color:var(--accent); color:var(--txt); padding:10px 16px; border-radius:14px; font-weight:700; box-shadow:0 10px 30px rgba(0,0,0,.3); animation:toast 2.6s ease forwards; }
@keyframes toast { 0% { opacity:0; transform:translate(-50%,-20px); } 10%,85% { opacity:1; transform:translate(-50%,0); } 100% { opacity:0; transform:translate(-50%,-20px); } }
.confetti { position:fixed; top:-12px; width:10px; height:14px; z-index:40; pointer-events:none; animation:tombe linear forwards; }
@keyframes tombe { to { transform:translateY(110vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } .confetti { display:none; } }

/* ---------- Responsive ---------- */
@media (max-width:1180px) {
  .main { grid-template-columns:1fr; }
  .col-droite { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
}
@media (max-width:1024px) {
  .app { grid-template-columns:1fr; }
  .side { display:none; }
  .main { padding:20px 20px 170px; }
  .modes { grid-template-columns:1fr 1fr; }
  .go { position:fixed; left:0; right:0; bottom:74px; padding:0 20px; z-index:5; }
  .go .btn-cta { width:100%; max-width:560px; margin:0 auto; display:flex; }
  .navbas { display:flex; position:fixed; bottom:0; left:0; right:0; height:64px; background:var(--fond); border-top:var(--bord); justify-content:space-around; align-items:center; z-index:6; padding-bottom:env(safe-area-inset-bottom); }
  .navbas button { color:var(--mute); font-size:12px; font-weight:700; display:flex; flex-direction:column; align-items:center; gap:2px; }
  .navbas button span { font-size:22px; }
  .navbas button.actif { color:var(--txt); }
}
@media (max-width:760px) {
  .app { grid-template-columns:1fr; }
  .side { display:none; }
  .main { padding:16px 16px 160px; gap:16px; }
  .salut h1 { font-size:25px; }
  .stats { width:100%; justify-content:space-between; }
  .stat { padding:4px 6px; gap:2px; flex-direction:column; text-align:center; }
  .stat b { font-size:17px; }
  .stat-ava { display:none; }
  .hero { grid-template-columns:1fr; text-align:center; padding:20px 18px; justify-items:center; }
  .hero .grand-ava { width:100px; height:100px; font-size:56px; }
  .hero h2 { font-size:30px; }
  .prog { margin:0 auto; width:100%; }
  .modes { grid-template-columns:1fr 1fr; }
  .matieres { grid-template-columns:repeat(3,1fr); }
  .matiere small { display:none; }
  .go { position:fixed; left:0; right:0; bottom:70px; padding:0 16px; z-index:5; }
  .go .btn-cta { width:100%; font-size:19px; padding:14px; }
  .navbas { display:flex; position:fixed; bottom:0; left:0; right:0; height:64px; background:var(--fond); border-top:var(--bord); justify-content:space-around; align-items:center; z-index:6; padding-bottom:env(safe-area-inset-bottom); }
  .navbas button { color:var(--mute); font-size:11px; font-weight:700; display:flex; flex-direction:column; align-items:center; gap:2px; }
  .navbas button span { font-size:22px; }
  .navbas button.actif { color:var(--txt); }
  .grille-avatars { grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
  .grille-avatars button { font-size:24px; }
  .choix { grid-template-columns:1fr; }
  .question h2 { font-size:21px; }
  .asso-ligne { grid-template-columns:1fr; }
  .gains b { font-size:20px; }
  .toast { top:auto; bottom:150px; max-width:calc(100% - 32px); text-align:center; }
}

/* ---------- Coach ---------- */
.coach { border-color:var(--accent); }
.coach { border:2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.coach-tete { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.coach-ico { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:26px; background:var(--accent); color:var(--accent-txt); flex:none; }
.coach h3 { font-size:20px; font-weight:800; }
.coach p { margin:0 0 10px; }
.coach-liste { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.coach-ligne { display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; background:var(--panel2); border:var(--bord); border-radius:14px; padding:8px 10px; }
.coach-ligne .e { font-size:24px; text-align:center; }
.coach-ligne b { font-size:15px; display:block; margin-bottom:5px; }
.coach-ligne .barre { height:8px; }
.coach-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.btn.petit { padding:8px 10px; font-size:15px; border-radius:10px; }
.btn-fiche { font-size:14px; padding:8px 12px; margin-top:4px; }

/* ---------- Fiche (fenêtre) ---------- */
.modal-fond { position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.55); display:grid; place-items:center; padding:16px; animation:apparait .15s ease; }
@keyframes apparait { from { opacity:0; } }
.modal { width:100%; max-width:540px; max-height:calc(100vh - 32px); overflow:auto; background:var(--modal); }

.modal .sur { font-weight:700; font-size:14px; color:var(--mute); }
.modal h2 { font-size:26px; font-weight:900; margin:6px 0 10px; }
.regle { margin:0 0 12px; padding-left:20px; }
.regle li { margin-bottom:6px; }
.encart { background:var(--panel2); border:var(--bord); border-radius:14px; padding:10px 12px; margin-bottom:10px; }
.encart p { margin:4px 0 0; }
.encart.astuce { border-color:var(--accent); }
.modal-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.modal-actions .btn { flex:1; min-width:140px; }

/* ---------- Mes progrès ---------- */
.progres { max-width:820px; margin:0 auto; padding:20px 16px 100px; display:flex; flex-direction:column; gap:16px; }
.progres h1 { font-size:30px; font-weight:900; }
.legende { display:flex; gap:14px; flex-wrap:wrap; margin:0; color:var(--mute); font-size:14px; font-weight:600; }
.notions { display:flex; flex-direction:column; gap:8px; }
.notion { display:grid; grid-template-columns:34px 1fr auto auto; gap:10px; align-items:center; padding:10px; border-radius:14px; background:var(--panel2); border:var(--bord); }
.notion .e { font-size:24px; text-align:center; }
.notion .nom b { display:block; }
.notion .nom small { color:var(--mute); display:block; margin-bottom:6px; }
.notion .barre { height:8px; }
.notion.st-fragile { border-left:5px solid #f97316; }
.notion.st-progres { border-left:5px solid #eab308; }
.notion.st-maitrise { border-left:5px solid var(--juste); }
@media (max-width:760px) {
  .modal-actions { flex-direction:column-reverse; }
  .modal h2 { font-size:22px; }
  .notion { grid-template-columns:30px 1fr auto; }
  .notion [data-fiche] { display:none; } /* sur téléphone : on touche 🎯, la fiche s'ouvre avant la mission */
}
.mute a { color:var(--txt); font-weight:700; }
a.btn { text-decoration:none; }

/* ---------- Espace parents (Lot D) ---------- */
.lien-parents { align-self:center; }
.temps-jour { margin:6px 0 0; font-size:14px; font-weight:700; color:var(--mute); }
.temps-jour.fini { color:var(--or); }
.pause { text-align:center; max-width:440px; }
.pause-e { font-size:56px; line-height:1; margin-bottom:6px; }
.pause .modal-actions { justify-content:center; flex-wrap:wrap; }
.parents { max-width:820px; margin:0 auto; padding:20px 16px 100px; display:flex; flex-direction:column; gap:16px; }
.parents h1 { font-size:30px; font-weight:900; }
.parents h2 { font-size:20px; font-weight:800; margin:0 0 10px; }
.parents .carte p { line-height:1.5; }
.parents-pin { max-width:440px; padding-top:48px; }
.parents-pin .carte { display:flex; flex-direction:column; gap:8px; }
.parents-pin .champ.pin { font-size:24px; letter-spacing:.4em; text-align:center; max-width:180px; }
.p-pin-actions { display:flex; gap:10px; justify-content:space-between; margin-top:6px; }
.p-note { font-size:13px; margin:6px 0 0; }
.p-barre { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.p-actions { display:flex; gap:8px; flex-wrap:wrap; }
.p-tete p { margin:4px 0 0; }
.p-rebours { display:flex; align-items:center; gap:18px; background:var(--hero); color:var(--hero-txt); flex-wrap:wrap; }
.p-rebours small.sur { display:block; font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:12px; opacity:.85; }
.p-rebours > div > b { font-family:var(--titre); font-size:40px; line-height:1; color:var(--hero-accent); }
.p-rebours p { margin:0; flex:1 1 280px; }
.p-enfants { display:flex; gap:8px; flex-wrap:wrap; }
.p-enfant-titre { display:flex; align-items:center; gap:10px; font-size:24px !important; margin:6px 0 -4px !important; }
.p-kpis { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:14px; }
.p-kpis div { background:var(--panel2); border:var(--bord); border-radius:14px; padding:10px 12px; }
.p-kpis b { display:block; font-family:var(--titre); font-size:26px; }
.p-kpis small { color:var(--mute); font-size:12.5px; }
.p-graph { display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; align-items:end; height:190px; }
.p-col { display:flex; flex-direction:column; align-items:center; gap:3px; height:100%; min-width:0; }
.p-val { font-size:12px; font-weight:700; min-height:15px; }
.p-barre-v { flex:1; width:100%; max-width:38px; display:flex; align-items:flex-end; border-bottom:2px solid var(--ligne); }
.p-barre-v i { display:block; width:100%; background:var(--accent); border-radius:4px 4px 0 0; min-height:0; }
.p-col small { font-size:11.5px; color:var(--mute); white-space:nowrap; }
.p-col .p-pct { font-weight:700; color:var(--txt); min-height:14px; }
.p-legende { font-size:12.5px; margin:8px 0 0; }
.p-table { width:100%; border-collapse:collapse; margin-top:12px; font-size:14px; }
.p-table th, .p-table td { text-align:left; padding:6px 8px; border-bottom:var(--bord); }
.p-table th { color:var(--mute); font-weight:600; font-size:12.5px; }
.p-seuils { display:flex; flex-direction:column; gap:10px; margin:10px 0; }
.p-seuil { display:grid; grid-template-columns:110px 1fr 52px 190px; gap:10px; align-items:center; font-size:14px; }
.p-seuil .etat { font-size:13px; color:var(--mute); }
.p-jauge { position:relative; height:12px; border-radius:999px; background:rgba(127,127,127,.22); overflow:visible; }
.p-jauge i { display:block; height:100%; border-radius:999px; background:var(--accent); }
.p-trait { position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--txt); opacity:.7; }
.p-faibles { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.p-faibles li { display:grid; grid-template-columns:1fr 140px 48px; gap:10px; align-items:center; }
.p-plan { padding-left:22px; margin:10px 0; display:flex; flex-direction:column; gap:10px; }
.p-plan li > b { display:block; margin-bottom:4px; }
.p-plan li > span { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.p-plan .p-fiche-sem { font-size:13px; color:var(--txt); font-weight:700; margin-left:4px; }
.p-notion { font-size:13px; padding:3px 9px; border-radius:999px; background:var(--panel2); border:var(--bord); }
.p-limite { display:flex; flex-direction:column; gap:6px; font-weight:700; max-width:320px; }
.p-bonus { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.p-pin-ligne { display:flex; gap:8px; max-width:320px; }
.p-comprendre details { border-top:var(--bord); padding:8px 0; }
.p-comprendre summary { cursor:pointer; font-weight:700; }
.p-comprendre ul { margin:8px 0; padding-left:20px; line-height:1.5; }
.p-sources { font-size:13px; }
.p-sources a { color:var(--txt); }
@media (max-width:760px) {
  .p-kpis { grid-template-columns:repeat(2, 1fr); }
  .p-seuil { grid-template-columns:90px 1fr 44px; }
  .p-seuil .etat { grid-column:1 / -1; margin-top:-6px; }
  .p-faibles li { grid-template-columns:1fr 80px 42px; }
  .p-graph { gap:4px; }
  .p-col small { font-size:10.5px; }
}
@media print {
  body { background:#fff !important; color:#111 !important; }
  .ecran:not(#ecran-parents), .navbas, .no-print, .p-comprendre, .toast { display:none !important; }
  .parents { max-width:none; padding:0; gap:10px; }
  .parents .carte { background:#fff !important; border:1px solid #bbb !important; box-shadow:none !important; backdrop-filter:none; color:#111; break-inside:avoid; }
  .p-rebours, .p-rebours b { color:#111 !important; }
  .mute, .p-kpis small, .p-col small, .p-seuil .etat { color:#444 !important; }
  .p-kpis div, .p-notion { background:#f4f4f4 !important; border:1px solid #ccc !important; }
  .p-barre-v i, .p-jauge i { background:#333 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .p-jauge { background:#ddd !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .p-trait { background:#111 !important; }
}
.p-barre .btn { padding:8px 12px; font-size:15px; }
.p-faibles b, .p-seuil b { white-space:nowrap; }
.print-only { display:none; }
@media print { .print-only { display:block; } }

/* ---------- Ambiances « école » : titres manuscrits, détails ---------- */
.salut h1, .connexion h1, .resultat h1, .progres h1, .reglages h1, .parents h1 { font-family:var(--manuscrit); font-weight:400; line-height:1.5; letter-spacing:0; padding-bottom:.3em; }
[data-theme="lecture"] :is(.salut h1, .connexion h1, .resultat h1, .progres h1, .reglages h1, .parents h1, .hero h2) { font-weight:700; line-height:1.2; }
.salut h1 { font-size:27px; } .connexion h1 { font-size:26px; } .resultat h1 { font-size:30px; }
/* Cahier : carte « page » avec marge rouge pour le héros, sélection au surligneur. */
[data-theme="cahier"] .hero { border:1px solid var(--ligne); box-shadow:var(--ombre); background:linear-gradient(90deg, transparent 18px, rgba(214,72,72,.55) 18px 20px, transparent 20px), #fff; }
[data-theme="cahier"] .hero .grand-ava { box-shadow:0 0 0 5px #e7edf8, 0 0 0 10px #f4f7fc; }
[data-theme="cahier"] .prog { background:#f4f7fc; border:1px solid var(--ligne); }
[data-theme="cahier"] :is(.rep.sel, .opt.sel, .matiere.sel, .puce.sel, .livret.sel) { border-color:#1c3faa; }
/* Tableau : cadre en bois autour du tableau, traits de craie. */
[data-theme="tableau"] body { box-shadow:inset 0 0 0 10px #7a5a37, inset 0 0 0 12px #5d4227; }
[data-theme="tableau"] .hero { border:2px solid rgba(242,239,228,.35); }
[data-theme="tableau"] .collection div.obtenu, [data-theme="cahier"] .collection div.obtenu, [data-theme="lecture"] .collection div.obtenu { background:linear-gradient(135deg,#f3d36b,#e3a43c); }
.niv-badge { color:#1c2333; }
[data-theme="cahier"] .side { background:#fdfdfa; border-right:2px solid rgba(214,72,72,.55); }
[data-theme="tableau"] .side { background:rgba(0,0,0,.12); }
[data-theme="tableau"] :is(.rep.juste, .rep.faux) .lettre { color:#14261f; }
/* Lecture : texte plus grand, interlignes et espacement des mots plus larges, pas d'effets. */
/* La mise en page reste identique aux autres ambiances : seul le texte à lire (questions, réponses, explications, fiches) grandit. */
[data-theme="lecture"] .carte { backdrop-filter:none; }
[data-theme="lecture"] .hero { border:1px solid var(--ligne); border-left:6px solid #2b5797; }
[data-theme="lecture"] .hero .grand-ava { box-shadow:0 0 0 5px #f3ecdb; }
[data-theme="lecture"] .prog { background:#f3ecdb; }
[data-theme="lecture"] .question h2 { font-size:27px; line-height:1.5; font-weight:700; }
[data-theme="lecture"] .rep { font-size:19px; line-height:1.45; }
[data-theme="lecture"] :is(.grille-ligne p, .asso-ligne p, .texte-trous, .retour p, .regle li, .encart p) { font-size:19px; line-height:1.6; word-spacing:.05em; }
[data-theme="lecture"] .doc img { filter:none; }
[data-theme="lecture"] :is(.salut h1, .connexion h1, .resultat h1, .progres h1, .reglages h1, .parents h1) { padding-bottom:.1em; }
[data-theme="lecture"] .hero h2 { padding-bottom:0; margin-bottom:8px; }
@media (max-width:760px) {
  [data-theme="lecture"] .question h2 { font-size:23px; }
  [data-theme="lecture"] .rep { font-size:18px; }
  .hero h2 { font-size:28px; }
}

/* Figure d'une question générée (SVG : graphique, développement, frise…), toujours sur fond blanc pour rester lisible dans toutes les ambiances. */
.figure-q { margin:0 0 16px; background:#fff; border:var(--bord); border-radius:12px; padding:10px; }
.figure-q svg { display:block; width:100%; height:auto; max-height:360px; margin:0 auto; }

/* ---------- Examen réel ---------- */
.info-reel { margin-top:12px; padding:12px 14px; border-radius:14px; background:var(--mat-sel); border:var(--bord-fort); border-color:var(--accent); }
.info-reel p { margin:0; font-size:15px; }
.reprise-reel { border:var(--bord-fort); border-color:var(--accent); }
.reprise-reel p { margin:0 0 12px; }
.reprise-reel .actions { justify-content:flex-start; }
.entracte { display:flex; flex-direction:column; gap:14px; padding-bottom:40px; }
.entracte .quiz-haut { margin-bottom:0; }
.entracte .quiz-haut h1, .revue-reel .quiz-haut h1 { font-size:22px; font-weight:900; margin:0; }
.entracte h2 { font-size:24px; font-weight:900; margin:4px 0 8px; }
.entracte .sur { font-weight:700; font-size:14px; color:var(--mute); }
.annonce { border:var(--bord-fort); border-color:var(--juste); background:color-mix(in srgb, var(--juste) 12%, var(--panel)); }
.annonce.temps { border-color:var(--or); background:color-mix(in srgb, var(--or) 12%, var(--panel)); }
.annonce b { font-family:var(--titre); font-size:19px; }
.annonce p { margin:4px 0 0; }
.infos-livret { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px; }
.infos-livret span { font-weight:800; font-family:var(--titre); padding:6px 12px; border-radius:999px; background:var(--panel2); border:var(--bord); }
.regles { margin:10px 0 0; padding-left:20px; }
.regles li { margin:4px 0; }
.suivi-livrets { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.suivi-livrets li { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; border:var(--bord); background:var(--panel2); }
.suivi-livrets li .e { font-size:20px; }
.suivi-livrets li b { display:block; font-size:15px; }
.suivi-livrets li small { color:var(--mute); }
.suivi-livrets li.suivant { border:var(--bord-fort); border-color:var(--accent); background:var(--mat-sel); }
.suivi-livrets li.fait { opacity:.75; }
.chrono-reel { font-family:var(--titre); font-weight:900; font-size:19px; white-space:nowrap; padding:6px 12px; border-radius:999px; background:var(--panel); border:var(--bord); font-variant-numeric:tabular-nums; }
.chrono-reel.urgent { background:var(--faux); color:#fff; border-color:var(--faux); }
.origine-livret { font-size:14px; font-weight:800; color:var(--mute); margin:0 0 8px; }
.nav-q { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.nav-q button { min-width:38px; height:38px; padding:0 6px; border-radius:10px; border:var(--bord-fort); background:var(--panel); color:var(--txt); font-weight:800; font-family:var(--titre); }
.nav-q button.ok { background:var(--mat-sel); border-color:var(--accent); }
.nav-q button.ok::after { content:'✓'; font-size:11px; margin-left:2px; }
.nav-q button.cur { background:var(--accent); color:var(--accent-txt); border-color:var(--accent); }
.livret-reel .pied-quiz .btn { flex:1; }
.barre.seuil { position:relative; overflow:visible; }
.barre.seuil i { overflow:hidden; }
.barre .repere { position:absolute; top:-4px; bottom:-4px; width:3px; margin-left:-1px; border-radius:2px; background:var(--txt); opacity:.7; }
.revue-reel { max-width:760px; margin:0 auto; padding:16px 16px 60px; display:flex; flex-direction:column; gap:12px; }
.revue-reel .quiz-haut { margin-bottom:0; }
.titre-livret { font-size:19px; font-weight:900; margin:12px 0 0; }
.revue h3 { font-size:18px; font-weight:800; margin:4px 0 10px; line-height:1.35; white-space:pre-line; }
.revue p { margin:6px 0; }
.revue .origine { font-size:13px; color:var(--mute); font-weight:700; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.revue .pre { white-space:pre-line; }
.badge-revue { font-weight:800; font-size:12px; padding:3px 9px; border-radius:999px; border:var(--bord-fort); }
.revue.juste .badge-revue { border-color:var(--juste); color:var(--juste); }
.revue.faux, .revue.partiel { border-left:5px solid var(--faux); }
.revue.faux .badge-revue, .revue.partiel .badge-revue { border-color:var(--faux); color:var(--faux); }
.revue.ouvert { border-left:5px solid var(--accent); }
.revue .bonne b { color:var(--juste); }
@media (max-width:760px) {
  .chrono-reel { font-size:16px; padding:5px 9px; }
  .nav-q button { min-width:34px; height:34px; }
  .livret-reel .pied-quiz .btn { font-size:16px; padding:13px 8px; }
}

/* ---------- Confort de lecture (Mon style) ---------- */
/* Taille : agrandit les écrans de travail (questions, résultats, fiches), pas la navigation. */
:root[data-taille="grand"] :is(.quiz, .pied-quiz .in, .retour, .resultat, .revue-reel, .modal, .reglages .apercu-texte) { zoom:1.15; }
:root[data-taille="tres-grand"] :is(.quiz, .pied-quiz .in, .retour, .resultat, .revue-reel, .modal, .reglages .apercu-texte) { zoom:1.3; }
/* Espacement aéré : lettres, mots et lignes plus espacés (aide les lecteurs fragiles). */
:root[data-espace="aere"] :is(.question, .rep, .opt, .texte-trous, .retour, .modal, .revue, .entracte, .apercu-texte) { letter-spacing:.04em; word-spacing:.14em; line-height:1.75; }
:root[data-espace="aere"] .question h2 { line-height:1.6; }
.confort .ligne-reglage { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:8px 0; border-top:var(--bord); }
.confort .ligne-reglage:first-of-type { border-top:0; }
.confort .ligne-reglage > span { font-weight:700; }
.apercu-texte { margin-top:10px; padding:12px 14px; border-radius:12px; background:var(--panel2); border:var(--bord); }
.apercu-texte p { margin:4px 0 0; font-size:19px; font-weight:700; }
.btn-voix { margin:2px 0 6px; }
.btn-voix.lit { background:var(--mat-sel); border-color:var(--accent); }
.voix-off { font-size:13px; color:var(--mute); font-weight:700; margin:2px 0 6px; }
.puce-son { margin-left:auto; width:36px; height:32px; border-radius:999px; background:var(--panel); border:var(--bord); font-size:16px; }

/* ---------- Zoom des documents ---------- */
.doc img { cursor:zoom-in; }
.zoom-fond { position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; background:rgba(15,18,25,.92); }
.zoom-outils { display:flex; align-items:center; justify-content:center; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-top, 0px)); flex-wrap:wrap; }
.zoom-outils .btn { min-width:48px; }
.zoom-outils .btn:disabled { opacity:.4; }
.zoom-niveau { color:#fff; font-family:var(--titre); font-weight:800; min-width:64px; text-align:center; }
.zoom-boite { flex:1; overflow:auto; padding:0 8px 16px; -webkit-overflow-scrolling:touch; }
.zoom-boite img { display:block; width:100%; max-width:none; margin:0 auto; background:#fff; border-radius:8px; }

/* ---------- Bibliothèque des fiches + cartes-mémoire ---------- */
.cartes-memoire { border:var(--bord-fort); border-color:var(--accent); }
.cm-tete { display:flex; gap:14px; align-items:flex-start; margin-bottom:12px; }
.cm-e { font-size:40px; line-height:1; }
.cm-tete h3 { font-size:20px; font-weight:900; margin:0 0 4px; }
.cm-tete p { margin:0; font-size:15px; }
.cartes-memoire .actions { justify-content:flex-start; }
.filtres-fiches { display:flex; flex-direction:column; gap:10px; }
.recherche { display:flex; align-items:center; gap:8px; }
.recherche span { font-size:20px; }
.recherche .champ { flex:1; min-width:0; }
.grille-fiches { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:8px; }
.fiche-tuile { display:flex; align-items:center; gap:10px; text-align:left; padding:10px 12px; border-radius:14px; background:var(--panel); border:var(--bord-fort); color:var(--txt); font:inherit; cursor:pointer; min-height:64px; }
.fiche-tuile:hover { border-color:var(--accent); }
.fiche-tuile .e { font-size:26px; flex:none; width:34px; text-align:center; }
.fiche-tuile b { display:block; font-size:15px; line-height:1.25; }
.fiche-tuile small { color:var(--mute); font-size:12px; }
.fiche-tuile.st-fragile { border-left:5px solid #e07b00; }
.fiche-tuile.st-maitrise { border-left:5px solid var(--juste); }
.cartes-jeu .carte-flip { perspective:1400px; display:grid; }
.cartes-jeu .face { grid-area:1 / 1; backface-visibility:hidden; -webkit-backface-visibility:hidden; transition:transform .45s ease; min-height:320px; margin:0; }
.cartes-jeu .recto { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; cursor:pointer; }
.cartes-jeu .recto h2 { font-size:28px; font-weight:900; margin:4px 0; }
.cartes-jeu .recto p { max-width:440px; margin:6px 0 0; }
.cartes-jeu .verso { transform:rotateY(180deg); }
.cartes-jeu .retournee .recto { transform:rotateY(-180deg); }
.cartes-jeu .retournee .verso { transform:rotateY(0); }
.cartes-jeu .sur { font-weight:700; font-size:14px; color:var(--mute); display:block; margin-bottom:8px; }
.cm-grand-e { font-size:64px; line-height:1.1; }
.cartes-jeu .verso .regle { font-size:17px; }
.cartes-jeu .pied-quiz .btn { flex:1; }
.ligne-revoir { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-top:var(--bord); text-align:left; }
.ligne-revoir:first-of-type { border-top:0; }
@media (prefers-reduced-motion: reduce) { .cartes-jeu .face { transition:none; } }
@media (max-width:760px) {
  .grille-fiches { grid-template-columns:1fr; }
  .cartes-jeu .recto h2 { font-size:24px; }
  .navbas button { font-size:10.5px; }
}

/* ---------- Signaler une erreur ---------- */
.lien-signaler { font-size:13px; color:var(--mute); font-weight:700; margin-top:6px; padding:4px 0; background:none; border:0; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.lien-signaler:hover { color:var(--txt); }
.retour .lien-signaler { display:inline-block; }

/* ---------- Défi entre amis + niveau adaptatif ---------- */
.m5 { background:var(--m5); }
.mode-large { grid-column:1 / -1; display:flex; align-items:center; gap:14px; }
.mode-large .e { margin:0; font-size:30px; }
.defi-recu { border:var(--bord-fort); border-color:var(--m5); background:color-mix(in srgb, var(--m5) 12%, var(--panel)); }
.defi-recu p { margin:0 0 10px; }
.defi-recu .actions { justify-content:flex-start; }
.defi-resultat { text-align:left; border:var(--bord-fort); border-color:var(--m5); }
.defi-resultat h3 { font-size:20px; font-weight:900; margin-bottom:10px; }
.defi-resultat .actions { justify-content:flex-start; }
.duel { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin:0 0 12px; text-align:center; }
.duel > div:not(.vs) { background:var(--panel2); border:var(--bord); border-radius:14px; padding:10px 6px; }
.duel b { display:block; font-size:15px; overflow-wrap:anywhere; }
.duel span { display:block; font-family:var(--titre); font-weight:900; font-size:26px; }
.duel small { color:var(--mute); }
.duel .vs { font-family:var(--titre); font-weight:900; color:var(--mute); }
.niveau-change { font-weight:800; margin-top:6px !important; }