/* Thème « Lagune » : fond blanc, roses et jaunes pastel, turquoise de lagon (voir DESIGN.md). */
:root{--fond:#fffbfc;--surface:#fff;--texte:#3b2a3f;--doux:#7a6276;--bord:#f1dce5;--accent:#b03a6a;--accent-txt:#fff;--accent-pale:#fdeaf1;--rose:#f9c8da;--rose-bord:#f2abc6;--rose-encre:#5a1a37;--citron:#fff3c4;--citron-fort:#f0cf63;--lagon:#d6f1ec;--lagon-fort:#8fd3c8;--barre-fond:linear-gradient(180deg,#fff4f8 0%,#fffaf0 100%);--ok:#2b7a6b;--ko:#c0503a;--danger:#b4234a;--ombre:0 2px 12px rgba(176,58,106,.07);--titre:'Young Serif',Georgia,serif;--texte-police:'Nunito','Segoe UI',system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--fond:#151a2c;--surface:#1d2338;--texte:#f6ecf2;--doux:#bcaec4;--bord:#323a57;--accent:#f6a9c7;--accent-txt:#3a0f22;--accent-pale:#3a2440;--rose:#f6a9c7;--rose-bord:#f6a9c7;--rose-encre:#3a0f22;--citron:#3b3522;--citron-fort:#d9b94e;--lagon:#1f3a44;--lagon-fort:#5fb3a7;--barre-fond:linear-gradient(180deg,#1b2136 0%,#1a2233 100%);--ok:#86d4c1;--ko:#f5a58c;--danger:#ff8fa3;--ombre:none}}
:root[data-theme="dark"]{--fond:#151a2c;--surface:#1d2338;--texte:#f6ecf2;--doux:#bcaec4;--bord:#323a57;--accent:#f6a9c7;--accent-txt:#3a0f22;--accent-pale:#3a2440;--rose:#f6a9c7;--rose-bord:#f6a9c7;--rose-encre:#3a0f22;--citron:#3b3522;--citron-fort:#d9b94e;--lagon:#1f3a44;--lagon-fort:#5fb3a7;--barre-fond:linear-gradient(180deg,#1b2136 0%,#1a2233 100%);--ok:#86d4c1;--ko:#f5a58c;--danger:#ff8fa3;--ombre:none}
*{box-sizing:border-box}
body{margin:0;display:flex;height:100vh;background:var(--fond);color:var(--texte);font:15px/1.55 "Segoe UI",system-ui,sans-serif}
.logo{font-weight:700;font-size:18px}
#arbre{flex:1;overflow:auto}
.matiere{margin-top:10px}
.matiere>.nom{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--doux);font-weight:600;padding:4px 6px}
.chap{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:8px;cursor:pointer;gap:6px;width:100%;border:none;background:none;color:inherit;font:inherit;text-align:left}
.chap:hover{background:var(--fond)}.chap.actif{background:var(--accent-pale);font-weight:600}
.pastille{font-size:12px;font-weight:700;background:var(--pastille);color:var(--pastille-txt);border-radius:10px;padding:0 7px;font-variant-numeric:tabular-nums}
.bas{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--bord);padding-top:10px}
#contenu{flex:1;overflow:auto;padding:28px 36px}
.vue{max-width:900px;margin:0 auto}
h1{margin:0 0 12px;font-size:24px}h2{font-size:16px;margin:0 0 10px}
.doux{color:var(--doux)}.cache{display:none!important}
.btn{border:1px solid var(--bord);background:var(--surface);color:var(--texte);padding:8px 14px;border-radius:8px;cursor:pointer;font:inherit}
.btn:hover{filter:brightness(.96)}.btn:disabled{opacity:.5;cursor:default}
.btn.principal{background:var(--accent);color:var(--accent-txt);border-color:var(--accent);font-weight:600}
.btn.ok{background:var(--ok);color:var(--sur-couleur);border-color:var(--ok)}.btn.ko{background:var(--ko);color:var(--sur-couleur);border-color:var(--ko)}
.btn.danger{color:var(--danger);border-color:var(--danger);background:transparent}
.btn.lien{border:none;background:none;text-align:left;padding:6px}.btn.petit{padding:4px 10px;font-size:13px}.plein{width:100%}
a{color:var(--accent)}
input:not([type=checkbox],[type=radio],[type=color],[type=range]),textarea{width:100%;font:inherit;color:var(--texte);background:var(--surface);border:1px solid var(--bord);border-radius:8px;padding:8px 10px}
textarea{resize:vertical}
label{display:block;margin:8px 0;font-weight:500}label input,label textarea{margin-top:4px;font-weight:400}
label.radio{display:flex;gap:8px;align-items:center;font-weight:400}label.radio input{width:auto;margin:0}
.ligne{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ligne>label{flex:1;min-width:min(200px,100%)}.ligne.fin{justify-content:flex-end}.ligne.centre{justify-content:center}
/* seuls les champs de saisie s'étirent ; cases à cocher, boutons radio et couleurs gardent leur taille */
.ligne input:not([type=checkbox],[type=radio],[type=color],[type=range]){flex:1;min-width:min(200px,100%)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
input[type=color]{flex:none;width:44px;height:38px;padding:2px;border:1px solid var(--bord);border-radius:8px;background:var(--surface);cursor:pointer}
.depot{display:block;border:2px dashed var(--bord);border-radius:12px;padding:40px;text-align:center;cursor:pointer;background:var(--surface);font-weight:400}
.depot.survol{border-color:var(--accent);background:var(--accent-pale)}
.alerte{background:var(--accent-pale);border-radius:8px;padding:12px;margin-top:16px}
.entete{display:flex;justify-content:space-between;align-items:flex-start}
.onglets,.sous-onglets{display:flex;gap:4px;border-bottom:1px solid var(--bord);margin-bottom:16px;flex-wrap:wrap}
.onglets button,.sous-onglets button{border:none;background:none;padding:10px 14px;cursor:pointer;color:var(--doux);font:inherit;border-bottom:2px solid transparent}
.onglets button.actif,.sous-onglets button.actif{color:var(--texte);border-color:var(--accent);font-weight:600}
.fil{display:flex;flex-direction:column;gap:10px;min-height:200px;max-height:58vh;overflow:auto;padding:4px}
.msg{padding:10px 14px;border-radius:12px;max-width:85%;box-shadow:var(--ombre)}
.msg.user{align-self:flex-end;background:var(--accent);color:var(--accent-txt)}
.msg.assistant{align-self:flex-start;background:var(--surface);border:1px solid var(--bord)}
.msg p{margin:.3em 0}.msg ul,.msg ol{margin:.3em 0;padding-left:1.3em}.msg h3,.msg h4{margin:.5em 0 .2em}
.msg code{background:var(--fond);padding:0 4px;border-radius:4px}
.saisie{display:flex;gap:8px;margin-top:12px}.saisie textarea{flex:1}
.carte{background:var(--surface);border:1px solid var(--bord);border-radius:14px;padding:32px;margin:16px 0;min-height:180px;box-shadow:var(--ombre);text-align:center;display:flex;flex-direction:column;justify-content:center;gap:16px}
.carte .q{font-size:19px;font-weight:600}.carte .r{border-top:1px solid var(--bord);padding-top:16px}
.ligne-carte{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin:6px 0;align-items:start}
.ligne-carte textarea{font-size:14px}
details{margin-top:20px}summary{cursor:pointer;color:var(--doux)}
.question{background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:16px;margin:12px 0}
.question .choix{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-radius:8px;font-weight:400;margin:2px 0;cursor:pointer}
.question .choix input{width:auto;margin-top:5px}
.choix.bonne{background:color-mix(in srgb,var(--ok) 16%,transparent)}.choix.fausse{background:rgba(194,65,12,.18)}
.explication{margin-top:8px;padding:10px;background:var(--fond);border-radius:4px}
.score{font-size:20px;font-weight:700;margin:12px 0}
.bloc{background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:16px;margin-bottom:14px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--texte);color:var(--fond);padding:10px 18px;border-radius:8px;z-index:20;max-width:80vw}
#toast.erreur{background:var(--danger);color:var(--sur-couleur)}
#attente{position:fixed;inset:0;background:rgba(16,21,27,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;z-index:10;font-weight:600}
.spinner{width:42px;height:42px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:t 1s linear infinite}
@keyframes t{to{transform:rotate(360deg)}}
.etat{font-size:12px;color:var(--doux);margin-top:4px}.etat .savait{color:var(--ok);font-weight:600}.etat .a_revoir{color:var(--ko);font-weight:600}
.histo{width:100%;border-collapse:collapse;margin:8px 0}.histo td,.histo th{padding:6px 8px;border-bottom:1px solid var(--bord);text-align:left;font-size:14px}
.histo tr.actif td{background:var(--accent-pale)}
/* ---- V2 ---- */
/* --sur-couleur : texte posé sur les aplats vert / orange / rouge (foncé en mode sombre, où ces aplats sont clairs) */
:root{--sur-couleur:#fff;--attention:#b45309;--attention-txt:#b45309;--pastille:#c2410c;--pastille-txt:#fff;--ia:#6941c6;--ia-txt:#fff;--ia-pale:#f4f0ff;--ia-bord:#cbb8f5;--mark:#fde68a;--faible:#c2410c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sur-couleur:#12151b;--attention-txt:#f59f4a;--pastille:#f08a4b;--pastille-txt:#2a1204;--ia:#b69cf5;--ia-txt:#1a1033;--ia-pale:#251d3a;--ia-bord:#4b3a78;--mark:#7a5a00;--faible:#f08a4b}}
:root[data-theme="dark"]{--sur-couleur:#12151b;--attention-txt:#f59f4a;--pastille:#f08a4b;--pastille-txt:#2a1204;--ia:#b69cf5;--ia-txt:#1a1033;--ia-pale:#251d3a;--ia-bord:#4b3a78;--mark:#7a5a00;--faible:#f08a4b}
.recherche input{padding:7px 10px}
mark{background:var(--mark);color:inherit;border-radius:3px;padding:0 1px}
.cours{background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:20px 26px;margin-top:12px}
.cours .l{margin:.35em 0;border-radius:6px;padding:1px 4px;transition:background .6s}
.cours h3.l{margin-top:1em}.cours .l.liste{padding-left:1.2em;text-indent:-.8em}
.cours .l.tableau{font-family:ui-monospace,Consolas,monospace;font-size:13px;white-space:pre-wrap}
.flash{background:var(--mark)!important}
.ajout{border:1.5px dashed var(--ia);background:var(--ia-pale);border-radius:8px;padding:10px 12px;margin:8px 0;color:var(--texte)}
.ajout.accepte{border:1px solid var(--ia-bord);padding:6px 12px}
.badge{display:inline-block;font-size:11px;font-weight:700;color:var(--ia);border:1px solid var(--ia);border-radius:10px;padding:0 7px;margin-right:6px;vertical-align:1px}
.ajout .raison{font-size:12px;color:var(--doux)}
.ajout .actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.ajout textarea{margin-top:6px}
/* Actions qui appellent l'IA (payantes avec l'API Claude) : toujours violettes, jamais vertes.
   .ia = action principale de l'écran, .ia-sec = action secondaire. Le coût estimé s'affiche dans une étiquette. */
.btn.ia{background:var(--ia);border-color:var(--ia);color:var(--ia-txt);font-weight:600}
.btn.ia-sec{background:var(--surface);border-color:var(--ia-bord);color:var(--ia)}
.btn[data-cout-txt]::after{content:attr(data-cout-txt);display:inline-block;margin-left:8px;padding:0 7px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.6;white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--ia-pale);color:var(--ia)}
.btn.ia[data-cout-txt]::after{background:color-mix(in srgb,var(--ia-txt) 18%,transparent);color:inherit}
.fiche{background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:22px 30px;margin-top:12px}
.fiche h2{font-size:17px;margin:1.1em 0 .4em;color:var(--accent);border-bottom:1px solid var(--bord);padding-bottom:3px}
.fiche h2:first-child{margin-top:0}.fiche ul,.fiche ol{margin:.3em 0;padding-left:1.3em}.fiche p{margin:.35em 0}
.fiche .fiche-titre{font-size:22px;font-weight:700;margin-bottom:2px}
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;margin-bottom:16px}
.tuile{background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:12px 14px}
.tuile .v{font-size:26px;font-weight:700}.tuile .n{font-size:13px;color:var(--doux)}
.faibles{background:var(--surface);border:1px solid color-mix(in srgb,var(--c-bloc,var(--faible)) 45%,var(--bord));border-radius:12px;padding:12px 16px}
.faibles li{margin:4px 0}
.prog{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--bord);border-radius:12px;overflow:hidden}
.prog th,.prog td{padding:8px 10px;border-bottom:1px solid var(--bord);text-align:left;font-size:14px;vertical-align:middle}
.prog th{font-size:12px;color:var(--doux);font-weight:600}
.prog tr.cliquable{cursor:pointer}.prog tr.cliquable:hover td{background:var(--fond)}
.jauge{height:8px;background:var(--fond);border-radius:4px;overflow:hidden;min-width:70px}.jauge>div{height:100%;background:var(--accent);border-radius:4px}
.spark{display:block}.spark .ligne-s{fill:none;stroke:var(--accent);stroke-width:2}.spark circle{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.spark .base{stroke:var(--bord);stroke-width:1}.spark circle.cible{fill:transparent;stroke:none;cursor:pointer}.spark{overflow:visible}
#infobulle{position:fixed;pointer-events:none;background:var(--texte);color:var(--fond);font-size:12px;padding:4px 8px;border-radius:6px;z-index:30}
.groupe{background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:12px 16px;margin-bottom:12px}
.groupe h3{margin:0 0 6px;font-size:16px}.resultat{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.resultat:hover{background:var(--fond)}.resultat .type{font-size:11px;font-weight:700;color:var(--doux);text-transform:uppercase;margin-right:6px}
@media print{
  body{display:block;height:auto;background:#fff;color:#000}
  body.impression #entete,body.impression #navbas,body.impression .vue:not(#vue-chapitre),body.impression .entete,body.impression .onglets,body.impression #o-fiche>.ligne,body.impression #toast{display:none!important}
  body.impression #contenu{padding:0;overflow:visible}body.impression .fiche{border:none;padding:0;color:#000;background:#fff}
  body.impression .fiche h2{color:#000}
}
.table-defil{overflow-x:auto;margin:.5em 0}
table.md{border-collapse:collapse;font-size:14px;min-width:50%}
table.md th,table.md td{border:1px solid var(--bord);padding:5px 9px;text-align:left;vertical-align:top}
table.md th{background:var(--fond);font-weight:600}
.fiche h3{font-size:15px;margin:.8em 0 .3em}
/* ---- import en images ---- */
.vue.large{max-width:1250px}
.grille-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:12px 0}
.carte-page{background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px}
.carte-page.image{border-color:var(--ia-bord);background:var(--ia-pale)}
.carte-page img{width:100%;aspect-ratio:1/1.41;object-fit:contain;background:#fff;border-radius:6px;border:1px solid var(--bord)}
.carte-page .raison{font-size:12px;color:var(--doux);min-height:2.4em}
.bascule{display:flex;border:1px solid var(--bord);border-radius:8px;overflow:hidden}
.bascule button{flex:1;border:none;background:var(--surface);color:var(--texte);padding:5px;font:inherit;font-size:13px;cursor:pointer}
.bascule button.actif{background:var(--accent);color:var(--accent-txt);font-weight:600}
.bascule button.actif[data-mode=image]{background:var(--ia);color:var(--ia-txt)}
.bascule button:disabled{opacity:.4;cursor:not-allowed}
.cout-bloc{position:sticky;bottom:0;box-shadow:0 -4px 12px rgba(0,0,0,.08)}
#ip-cout{font-size:15px;margin-bottom:8px}
.ligne.prix label{min-width:120px}
.barre{height:10px;background:var(--fond);border-radius:5px;overflow:hidden;margin:10px 0}
.barre>div{height:100%;width:0;background:var(--ia);border-radius:5px;transition:width .3s}
.rang-page{display:grid;grid-template-columns:minmax(260px,42%) 1fr;gap:16px;background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:14px;margin-bottom:14px;align-items:start}
.rang-page img{width:100%;border-radius:6px;border:1px solid var(--bord);background:#fff;cursor:zoom-in}
.rang-page textarea{min-height:420px;font-size:14px;line-height:1.45}
.rang-page .entete-page{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.statut{font-size:12px;font-weight:700;border-radius:10px;padding:1px 8px;border:1px solid}
.statut.ok{color:var(--ok)}.statut.en_attente{color:var(--doux)}.statut.erreur{color:var(--danger)}.statut.cours{color:var(--ia)}
.rang-page .err{color:var(--danger);font-size:13px;margin:4px 0}
.cours .repere-page{font-size:12px;font-weight:700;color:var(--doux);border-top:1px dashed var(--bord);padding-top:8px;margin-top:14px;text-transform:uppercase;letter-spacing:.05em}
.cours .schema{background:color-mix(in srgb,var(--lagon) 55%,var(--surface));margin:0;padding:3px 12px;border-radius:0}
.cours .schema-titre{margin-top:10px;border-radius:6px 6px 0 0;padding-top:8px}
.cours .schema-fin{margin-bottom:10px;border-radius:0 0 6px 6px;padding-bottom:6px;font-size:0;height:6px}
.pastille.attente{background:var(--ia)}
/* ---- V4 : aujourd'hui, planning, examen blanc, étiquettes, sauvegardes ---- */
.vue#vue-chapitre{max-width:1120px}
.objectif-mini{display:block;text-decoration:none;color:var(--texte);background:var(--fond);border:1px solid var(--bord);border-radius:10px;padding:7px 10px;font-size:13px}
.objectif-mini .ligne{flex-wrap:nowrap}
.barre.mini{height:6px;margin:5px 0 0}.barre.grande{height:14px;border-radius:7px}
.barre.mini>div,.barre.grande>div{background:var(--accent)}
.barre>div.atteint{background:var(--ok)}
.serie{font-weight:700;font-size:15px}
.tache{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--bord)}
.tache:last-child{border-bottom:none}.tache .infos{flex:1}.tache .infos .doux{font-size:13px}
.tache.faite .infos strong{text-decoration:line-through;color:var(--doux)}
.tache input[type=checkbox]{width:18px;height:18px;flex:0 0 auto}
.jauge-mini{display:inline-block;font-size:11px;border-radius:8px;padding:0 6px;border:1px solid var(--bord);color:var(--doux);margin-left:4px}
.compte{font-weight:700;font-size:13px;border-radius:8px;padding:2px 8px;background:var(--accent-pale);white-space:nowrap}
.compte.proche{background:rgba(201,42,42,.15);color:var(--danger)}
.choix-chapitres{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 16px;max-height:260px;overflow:auto;border:1px solid var(--bord);border-radius:8px;padding:8px 10px;background:var(--fond)}
.choix-chapitres .mat{grid-column:1/-1;font-weight:700;font-size:13px;margin-top:4px}
.choix-chapitres label{margin:0;font-weight:400;font-size:14px;display:flex;gap:6px;align-items:center}
.choix-chapitres label input{width:auto;margin:0}
label.inline{display:flex;align-items:center;gap:6px;margin:0}
.jour-pl{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:7px 0;border-bottom:1px solid var(--bord);align-items:start}
.jour-pl.aujourdhui{background:var(--accent-pale);border-radius:8px;padding:7px 8px}
.jour-pl .date{font-size:13px;font-weight:600}
.puce{display:inline-flex;align-items:center;gap:4px;font-size:13px;border:1px solid var(--bord);border-radius:12px;padding:2px 9px;margin:2px 4px 2px 0;background:var(--surface);cursor:pointer}
.puce.blanc{border-color:var(--ia);color:var(--ia)}.puce.exam{background:var(--danger);color:var(--sur-couleur);border-color:var(--danger)}
.puce.faite{text-decoration:line-through;opacity:.6}
.examen-ligne{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--bord)}
.minuteur{position:sticky;top:0;z-index:5;display:flex;gap:14px;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:10px 16px;margin-bottom:10px;box-shadow:var(--ombre)}
#eb-temps{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
#eb-temps.urgent{color:var(--danger)}
.question .src{font-size:12px;color:var(--doux);margin-bottom:4px}
.question .redaction{display:flex;gap:6px;align-items:flex-start;margin-top:6px}.question .redaction textarea{flex:1}
.comparaison{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.comparaison>div{background:var(--fond);border-radius:8px;padding:8px 10px;font-size:14px}
.comparaison .t{font-size:11px;font-weight:700;color:var(--doux);text-transform:uppercase}
.juge{display:flex;gap:6px;margin-top:8px}.juge .btn.choisi{outline:3px solid var(--accent)}
.note-finale{font-size:40px;font-weight:800}
.btn.micro{padding:8px 11px}.btn.micro.ecoute{background:var(--danger);color:var(--sur-couleur);border-color:var(--danger);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.6}}
.puces-etiquettes{display:flex;flex-wrap:wrap;gap:6px}
.etq{display:inline-flex;align-items:center;gap:6px;border-radius:14px;padding:3px 10px;font-size:13px;font-weight:600;border:2px solid var(--c);color:var(--texte);background:var(--surface);cursor:pointer}
.etq.actif{background:var(--c);color:#fff}.etq .x{opacity:.6;font-weight:400}
.cours-zone{display:grid;grid-template-columns:1fr 210px;gap:10px;position:relative}
.marge{position:relative}
.note-marge{position:absolute;left:0;right:0;background:#fff8c5;color:#3b3200;border:1px solid #f0d860;border-radius:8px;padding:6px 8px;font-size:12.5px;box-shadow:var(--ombre);cursor:pointer;white-space:pre-wrap}
:root[data-theme="dark"] .note-marge{background:#3b3413;color:#f5e9b0;border-color:#6b5c1c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .note-marge{background:#3b3413;color:#f5e9b0;border-color:#6b5c1c}}
.note-marge .etq{font-size:11px;padding:0 6px;margin-bottom:3px}
mark.annot{background:color-mix(in srgb,var(--c) 28%,transparent);border-bottom:2px solid var(--c);cursor:pointer;color:inherit}
.l.annote{box-shadow:inset 3px 0 0 var(--c);background:color-mix(in srgb,var(--c) 10%,transparent);cursor:pointer}
.cours .masque{display:none}
#sel-bouton{position:absolute;z-index:40;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.pop{position:absolute;z-index:41;width:320px;background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:12px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.pop label{margin:6px 0}#ap-extrait{font-size:12.5px;max-height:60px;overflow:hidden;font-style:italic}
select{font:inherit;color:var(--texte);background:var(--surface);border:1px solid var(--bord);border-radius:8px;padding:6px 8px;max-width:100%}
.pop select{width:100%;margin-top:4px}
.sauvegarde{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--bord);font-size:14px}
.rev-chap{font-size:13px;margin-top:2px}
label.inline input{flex:0 0 70px;min-width:0;width:70px}
/* ---- méthode Feynman ---- */
#o-feynman .redaction{display:flex;gap:6px;align-items:flex-start;margin-top:4px}#o-feynman .redaction textarea{flex:1}
.note-fy{display:inline-block;font-size:13px;font-weight:700;border-radius:12px;padding:2px 10px;color:var(--sur-couleur)}
.note-fy.a_retravailler{background:var(--danger)}.note-fy.partiel{background:var(--attention)}.note-fy.maitrise{background:var(--ok)}
.retour-fy{background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:16px 20px;margin:14px 0}
.retour-fy h3{font-size:15px;margin:14px 0 6px}.retour-fy ul{margin:0;padding-left:1.3em}.retour-fy li{margin:4px 0}
#o-feynman .citation{border:1px solid var(--bord);background:var(--fond);padding:4px 10px;margin:4px 0;font-size:14px;font-style:italic;border-radius:8px}
#o-feynman .citation.douteuse{border-color:var(--attention);background:color-mix(in srgb,var(--citron) 60%,var(--surface))}
.retour-fy .hors{border:1px dashed var(--attention);border-radius:8px;padding:6px 10px;background:rgba(230,119,0,.08)}
.retour-fy .relance{background:var(--accent-pale);border-radius:8px;padding:10px 12px;font-weight:600}
.etq .note-pt{display:inline-block;width:9px;height:9px;border-radius:50%}
.tentative{border-bottom:1px solid var(--bord);padding:8px 0}.tentative summary{cursor:pointer}
.fy-prog li{margin:3px 0}
/* ---- cartes inversées, confiance, révision mélangée ---- */
.rev-badges{display:flex;gap:6px;justify-content:center;min-height:0}
.badge-sens{font-size:12px;font-weight:700;color:var(--ia);border:1px solid var(--ia);border-radius:10px;padding:0 8px}
.badge-piege{font-size:12px;font-weight:700;color:#fff;background:var(--attention);border-radius:10px;padding:0 8px}
.btn.conf{min-width:120px}
.centre-txt{text-align:center;font-size:12px;margin:6px 0 0}
.carte .chap-apres{font-size:13px;color:var(--doux);border-top:1px dashed var(--bord);padding-top:8px}
.piege-msg{color:var(--attention-txt);font-weight:600;text-align:center}
.inv-case{font-size:12px;font-weight:400;display:flex;gap:4px;align-items:center;margin:4px 0 0}.inv-case input{width:auto;margin:0}
.calib{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 10px}.calib .tuile{flex:1;min-width:150px}
/* ---- masquage de schémas ---- */
.grille-schemas{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:12px}
.carte-schema{background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px}
.carte-schema .mini{position:relative;border-radius:6px;overflow:hidden;background:#fff;border:1px solid var(--bord)}
.carte-schema .mini img{width:100%;display:block}
.carte-schema .mini i{position:absolute;background:var(--accent);opacity:.85;border-radius:2px}
.carte-schema .ligne .btn{flex:1}
.sc-edition{display:grid;grid-template-columns:1fr 260px;gap:14px;align-items:start}
.sc-scene{position:relative;user-select:none;-webkit-user-select:none;touch-action:none;background:#fff;border:1px solid var(--bord);border-radius:8px;overflow:hidden;line-height:0}
.sc-scene img{width:100%;display:block;pointer-events:none}
.sc-scene:not(.revision){cursor:crosshair}
.sc-zone{position:absolute;background:rgba(176,58,106,.85);border:2px solid #8a2a52;border-radius:3px;cursor:move;display:flex;align-items:center;justify-content:center;color:#fff;font:700 14px/1 "Segoe UI",sans-serif}
.sc-zone.choisie{outline:3px solid #f59f00;outline-offset:1px}
.sc-zone .poignee{position:absolute;width:14px;height:14px;background:#fff;border:2px solid #f59f00;border-radius:50%;display:none}
.sc-zone.choisie .poignee{display:block}
.sc-zone .poignee.nw{left:-8px;top:-8px;cursor:nwse-resize}.sc-zone .poignee.ne{right:-8px;top:-8px;cursor:nesw-resize}
.sc-zone .poignee.sw{left:-8px;bottom:-8px;cursor:nesw-resize}.sc-zone .poignee.se{right:-8px;bottom:-8px;cursor:nwse-resize}
@media (pointer:coarse){.sc-zone .poignee{width:26px;height:26px}.sc-zone .poignee.nw,.sc-zone .poignee.sw{left:-14px}.sc-zone .poignee.ne,.sc-zone .poignee.se{right:-14px}.sc-zone .poignee.nw,.sc-zone .poignee.ne{top:-14px}.sc-zone .poignee.sw,.sc-zone .poignee.se{bottom:-14px}}
.sc-panneau{background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:12px;max-height:75vh;overflow:auto}
.sc-ligne-zone{display:flex;gap:6px;align-items:center;margin:6px 0;padding:4px;border-radius:8px}
.sc-ligne-zone.choisie{background:var(--accent-pale)}
.sc-ligne-zone .n{font-weight:700;width:22px;text-align:center}
.sc-ligne-zone input{flex:1;min-width:0;padding:6px 8px}
/* révision : masques opaques */
.sc-masque{position:absolute;background:#b03a6a;border:2px solid #8a2a52;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font:700 15px/1 "Segoe UI",sans-serif;transition:background .2s}
.sc-masque.cible{background:var(--attention);border-color:#a34f00;box-shadow:0 0 0 3px rgba(230,119,0,.35)}
.sc-masque.autre{background:#868e96;border-color:#495057;cursor:default}
.sc-masque.revele{background:transparent;border:3px solid #f59f00;cursor:default}
.sc-masque.revele.savait{border-color:var(--ok)}.sc-masque.revele.a_revoir{border-color:var(--danger)}
.sc-masque .etiq{position:absolute;left:0;top:100%;margin-top:3px;background:var(--texte);color:var(--fond);font:600 12px/1.3 "Segoe UI",sans-serif;padding:3px 6px;border-radius:4px;white-space:nowrap;z-index:2;pointer-events:none}
.sc-masque .juge{position:absolute;right:0;top:100%;margin-top:3px;display:flex;gap:3px;z-index:3}
.sc-masque .juge button{border:none;border-radius:4px;padding:4px 7px;font-size:13px;cursor:pointer;color:#fff}
.sc-masque .juge .o{background:var(--ok)}.sc-masque .juge .k{background:var(--danger)}
.sc-masque .juge button.choisi{outline:2px solid var(--texte)}
#rev-q .sc-scene,#rev-r .sc-scene{max-width:720px;margin:0 auto}
@media (max-width:900px){.sc-edition{grid-template-columns:1fr}}
.sc-scene.revision{overflow:visible;margin-bottom:34px}
/* le schéma entier reste visible sans défiler : la scène épouse l'image */
.sc-scene{display:inline-block;max-width:100%;vertical-align:top}
.sc-scene img{width:auto;max-width:100%;max-height:78vh}
#rev-q .sc-scene img{max-height:55vh}
.sc-edition>div:first-child{text-align:center}
#sc-rev-scene{display:block;width:fit-content;margin:0 auto 34px}
.sc-masque .juge{top:auto;bottom:100%;margin:0 0 3px}
/* ---- « Explique-moi autrement » ---- */
.sel-barre{position:absolute;z-index:40;display:flex;gap:6px}.sel-barre .btn{box-shadow:0 4px 12px rgba(0,0,0,.2)}
#sel-bouton{box-shadow:none}
.pop.large{width:min(520px,calc(100vw - 20px));max-height:75vh;overflow:auto}
.expl-types{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.expl-types .btn{flex:1;min-width:140px;font-size:14px}
.expl-types .btn.choisi{border-color:var(--ia);background:var(--ia-pale);font-weight:600}
.expl-texte{background:var(--fond);border-radius:8px;padding:10px 12px;font-size:14.5px}
.expl-texte p{margin:.35em 0}.expl-texte ol,.expl-texte ul{margin:.3em 0;padding-left:1.3em}
.expl-hors{border:1px dashed var(--attention);border-radius:8px;padding:6px 10px;background:rgba(230,119,0,.08);margin-top:8px;font-size:13.5px}
.expl-hors ul{margin:.2em 0;padding-left:1.2em}
.note-marge{max-height:180px;overflow:auto}
.spinner-mini{display:inline-block;width:12px;height:12px;border:2px solid var(--bord);border-top-color:var(--ia);border-radius:50%;animation:t 1s linear infinite;margin-right:6px;vertical-align:-1px}
/* ---- questions et quiz sur les schémas ---- */
.scq-grille{display:grid;grid-template-columns:minmax(260px,1fr) 1fr;gap:16px;align-items:start;margin-top:12px}
.scq-grille .sc-scene img,.scq-img img{max-height:70vh}
.scq-img{display:inline-block;max-width:100%;border:1px solid var(--bord);border-radius:8px;overflow:hidden;background:#fff;line-height:0}
.scq-img img{max-width:100%;width:auto;display:block}
.scq-q{font-size:17px;font-weight:600;margin-top:4px}
#sc-question .redaction{display:flex;gap:6px}#sc-question .redaction textarea{flex:1}
.note-q{display:inline-block;font-size:13px;font-weight:700;border-radius:12px;padding:2px 10px;color:var(--sur-couleur)}
.note-q.juste{background:var(--ok)}.note-q.partiel{background:var(--attention)}.note-q.faux{background:var(--danger)}
.corr-q{background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:14px 18px;margin-top:10px}
.corr-q h3{font-size:14px;margin:10px 0 4px}.corr-q ul{margin:0;padding-left:1.3em}
.corr-q .attendu{background:var(--accent-pale);border-radius:8px;padding:8px 10px;margin-top:8px}
.question .q-img{margin:6px 0 8px}.question .q-img .scq-img img,.question .q-img .sc-scene img{max-height:300px}
.carte-schema .ligne.q .btn{font-size:13px}
@media (max-width:900px){.scq-grille{grid-template-columns:1fr}}

/* examen blanc rédigé */
.er-q{border:1px solid var(--bord);border-radius:10px;padding:12px 14px;margin:12px 0;background:var(--surface)}
.er-q .tete{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--doux);margin-bottom:6px}
.er-q .type{font-weight:600;color:var(--accent)}
.er-q textarea{width:100%;min-height:150px}
.er-q .points{font-weight:700;white-space:nowrap}
.er-doc{max-width:680px;margin:10px 0}
.er-liste{margin:4px 0 8px;padding-left:20px}
.er-liste.ok li::marker{content:"✔ ";color:var(--ok)}
.er-liste.ko li::marker{content:"✘ ";color:var(--ko)}
.er-liste.oubli li::marker{content:"◌ "}
.er-corrige{border:1px solid var(--bord);background:var(--fond);border-radius:10px;padding:6px 12px;margin-top:8px}
.er-consignes{white-space:pre-wrap}
.eb-schema,.er-doc{max-width:640px;margin:8px 0}

/* jeu « Remettre dans l'ordre » */
.seq-liste{list-style:none;padding:0;margin:10px 0}
.seq-item{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:6px 0;border:1px solid var(--bord);border-radius:10px;background:var(--surface);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;transition:background .15s,border-color .15s}
.seq-item.edit{cursor:default;touch-action:auto;align-items:flex-start}
.seq-item.edit .poignee{cursor:grab;touch-action:none;padding:8px 2px}
.seq-item .poignee{color:var(--doux);font-size:18px;line-height:1}
.seq-item .num{min-width:22px;height:22px;border-radius:11px;background:var(--accent-pale);color:var(--texte);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.seq-item.edit .num{margin-top:8px}
.seq-item .txt{flex:1}
.seq-item .champs{flex:1;display:flex;flex-direction:column;gap:4px}
.seq-item .fleches{display:flex;gap:4px;flex-shrink:0}
.seq-item .fleches .btn{padding:2px 8px}
.seq-item.glisse{position:relative;z-index:5;cursor:grabbing;box-shadow:0 6px 18px rgba(0,0,0,.18);border-color:var(--accent);transition:none}
.seq-item.juste{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,var(--surface))}
.seq-item.faux{border-color:var(--ko);background:color-mix(in srgb,var(--ko) 15%,var(--surface))}
.seq-liste.fige .seq-item{cursor:default}
.seq-liste.fige .fleches{display:none}
.seq-score{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:8px 0}
.seq-correction{padding-left:22px}
.seq-correction li{margin:6px 0;padding:6px 10px;border-radius:10px;border:1px solid color-mix(in srgb,var(--ok) 50%,var(--bord));background:color-mix(in srgb,var(--ok) 10%,var(--surface))}
.seq-correction li.faux{border-color:color-mix(in srgb,var(--ko) 50%,var(--bord));background:color-mix(in srgb,var(--ko) 10%,var(--surface))}
.seq-ligne{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--bord);flex-wrap:wrap}
.seq-ligne:last-child{border-bottom:none}
.seq-ligne .savait,.seq-score .savait,.histo .savait,#prog-seq-bloc .savait{color:var(--ok);font-weight:600}.seq-ligne .a_revoir,.seq-score .a_revoir,#prog-seq-bloc .a_revoir{color:var(--ko);font-weight:600}

/* ------------------------------------------------------------------ écrans étroits et tactiles
   L'ordinateur reste la cible principale : rien ne change au-dessus de 820 px.
   En dessous, la barre latérale devient un tiroir ouvert par ☰ depuis la barre du haut. */
.cours{overflow-wrap:anywhere}  /* lignes de pointillés des sommaires importés : elles ne doivent pas élargir la page */
@media (max-width:820px){
  body{flex-direction:column;height:100dvh}
  #contenu{padding:18px 16px 32px}
  h1{font-size:21px;overflow-wrap:anywhere}
  .entete{gap:12px}
  /* onglets du chapitre : une bande qui défile au doigt plutôt que deux lignes */
  .onglets,.sous-onglets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 12px;scroll-padding:0 12px}
  .onglets::-webkit-scrollbar,.sous-onglets::-webkit-scrollbar{display:none}
  .onglets button,.sous-onglets button{white-space:nowrap;flex-shrink:0}
  .minuteur{flex-wrap:wrap;gap:8px 14px}
  /* cours : la marge des notes passe sous chaque passage annoté */
  .cours-zone{grid-template-columns:minmax(0,1fr)}
  .marge{display:none}
  #cours-lecture>.note-marge{position:static;margin:2px 0 12px;max-height:none}
  /* grands tableaux (Progression) : ils défilent dans leur cadre au lieu d'élargir la page */
  .prog{display:block;overflow-x:auto}
}

/* Au doigt (écran tactile, à n'importe quelle largeur) : cibles d'au moins 44 px */
@media (pointer:coarse){
  .btn{min-height:44px}
  .btn.petit{min-height:40px;padding:6px 12px}
  .chap{min-height:44px;padding:8px 10px}
  .onglets button,.sous-onglets button{min-height:44px}
  input,select,textarea{font-size:16px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
}

/* ------------------------------------------------------------------ clavier et lecteurs d'écran */
/* Texte lu par les lecteurs d'écran mais invisible à l'écran */
.lecteur{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Lien « Aller au contenu » : apparaît seulement quand on arrive dessus avec Tab */
.evitement{position:fixed;top:8px;left:8px;z-index:50;padding:10px 14px;border-radius:8px;background:var(--accent);color:var(--accent-txt);font-weight:600;text-decoration:none;transform:translateY(-200%)}
.evitement:focus{transform:none}
/* Contour de focus au clavier, aux couleurs du site (vert, violet pour les actions IA) */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.ia:focus-visible,.btn.ia-sec:focus-visible{outline-color:var(--ia)}
.onglets button:focus-visible,.sous-onglets button:focus-visible,.chap:focus-visible{outline-offset:-2px}
h1:focus,#contenu:focus,#attente:focus{outline:none}
.sc-masque:focus-visible{outline:3px solid var(--texte);outline-offset:2px}
#attente-long{max-width:28em;text-align:center;font-weight:400;font-size:14px}

/* Textes d'exemple des champs : couleur « douce » du thème (le gris par défaut du navigateur était à 3,5:1) */
::placeholder{color:var(--doux);opacity:1}

/* ------------------------------------------------------------------ en-tête de chapitre : menu « ⋯ » */
.entete-titre{flex:1;min-width:0}
#ch-renommer-form{margin:4px 0 12px;justify-content:flex-start}
#ch-renommer-form input{font-size:18px;font-weight:600}
.menu-plus{position:relative;flex-shrink:0}
.menu-plus>summary{list-style:none;display:grid;place-items:center;min-width:40px;min-height:36px;padding:0 10px;color:var(--doux)}
.menu-plus>summary::-webkit-details-marker{display:none}
.menu-plus[open]>summary{color:var(--texte);background:var(--fond)}
.menu-liste{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:230px;display:flex;flex-direction:column;padding:6px;
  background:var(--surface);border:1px solid var(--bord);border-radius:10px;box-shadow:0 8px 24px rgba(16,24,40,.16)}
.menu-liste .btn.lien{padding:9px 10px;border-radius:6px}
.menu-liste .btn.lien:hover{background:var(--fond);filter:none}
.btn.lien.danger{color:var(--danger)}

/* ------------------------------------------------------------------ Réglages : choix de modèle groupés */
.choix-modele{border:none;padding:0;margin:14px 0 0}
.choix-modele>legend{font-weight:600;padding:0;margin-bottom:4px}
.choix-modele .aide{margin:0 0 4px;font-size:14px}
.avance{margin-top:18px;border-top:1px solid var(--bord);padding-top:12px}
.avance>summary{cursor:pointer;font-weight:600;color:var(--accent);padding:4px 0}
.avance[open]>summary{margin-bottom:2px}

/* l'orange « attention » reste foncé dans les deux thèmes : texte blanc dessus */
.note-fy.partiel,.note-q.partiel,.badge-piege{color:#fff}

/* flashcards faites main */
.modale{position:fixed;inset:0;z-index:45;background:rgba(16,21,27,.45);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:5vh 12px}
.modale-boite{background:var(--surface);color:var(--texte);border:1px solid var(--bord);border-radius:14px;padding:18px;width:min(760px,100%);box-shadow:0 12px 32px rgba(0,0,0,.25)}
.cm-face{margin-top:10px}.cm-face textarea{margin-top:4px}
.cm-outils{display:flex;gap:4px}.cm-outils .btn{padding:2px 10px;min-width:34px}
.cm-image{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.cm-apercu-img{display:flex;align-items:center;gap:8px}.cm-apercu-img img{max-height:70px;max-width:140px;border-radius:6px;border:1px solid var(--bord)}
.cm-apercu .carte{margin:8px 0 0;min-height:0}
.cm-apercu .r{border-top:1px dashed var(--bord);margin-top:10px;padding-top:10px}
.carte-img{display:block;max-width:100%;max-height:40vh;margin:10px auto 0;border-radius:8px;border:1px solid var(--bord);background:#fff}
.carte .q p,.carte .r p{margin:.2em 0}.carte .q ul,.carte .r ul,.carte .q ol,.carte .r ol{text-align:left;display:inline-block;margin:.3em 0}
.badge-origine{display:inline-block;font-size:11px;font-weight:700;border-radius:10px;padding:0 7px;margin:4px 6px 0 0;border:1px solid var(--bord);color:var(--doux)}
.badge-origine.main{color:var(--ok);border-color:var(--ok)}
.badge-origine.ia{color:var(--ia);border-color:var(--ia)}
.ligne-carte .k-imgs{display:flex;gap:6px;margin-top:4px}.ligne-carte .k-imgs img{max-height:48px;max-width:90px;border-radius:4px;border:1px solid var(--bord)}
.ra-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:10px}.ra-table td,.ra-table th{border-bottom:1px solid var(--bord);padding:5px 6px;text-align:left;vertical-align:top}
.ra-table tr.ko td{color:var(--doux)}.ra-etat.ok{color:var(--ok);font-weight:600}.ra-etat.ko{color:var(--ko);font-weight:600}
.tr-passage{line-height:2.1;font-size:16px;padding:10px 12px;border:1px solid var(--bord);border-radius:10px;background:var(--fond);max-height:40vh;overflow:auto}
.tr-mot{cursor:pointer;border-radius:4px;padding:1px 2px}.tr-mot:hover{background:var(--accent-pale)}
.tr-mot.trou{background:var(--accent);color:var(--accent-txt)}
.trou-blanc{display:inline-block;min-width:3.5em;border-bottom:2px solid var(--accent);color:var(--accent);font-weight:700;text-align:center}
.sel-barre{flex-wrap:wrap;max-width:calc(100vw - 16px)}


/* ================================================================== identité visuelle « Lagune »
   Pastel apaisant sur fond blanc : rose, jaune, turquoise de lagon ; motifs de biologie marine et cellulaire.
   Les règles de confiance ne changent pas : violet = IA (payant), coût affiché sur le bouton. */
body{font-family:var(--texte-police);font-size:15px;line-height:1.6}
h1,h2,.logo,.carte .q,.note-finale,.score{font-family:var(--titre);font-weight:400;letter-spacing:-.005em}
h1{font-size:28px;font-weight:400;margin-bottom:14px}
h2{font-size:18px;font-weight:400}
::selection{background:var(--rose);color:var(--rose-encre)}
html{scrollbar-color:var(--bord) transparent}

/* barre latérale : dégradé rose → jaune, logo cellule, vague au-dessus du menu */
.logo{display:flex;align-items:center;gap:9px;font-size:21px;font-weight:400}
.logo svg{flex-shrink:0}
.chap{border-radius:12px}
.chap.actif{background:var(--surface);box-shadow:0 1px 0 var(--bord),0 2px 10px rgba(176,58,106,.08)}
.objectif-mini{background:var(--surface);border-color:var(--bord);border-radius:14px}

/* zone de contenu : illustration discrète en bas à droite (ne défile pas) */
#contenu{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 300' fill='none' stroke-linecap='round'%3E%3Cg stroke='%23f2a9c4' stroke-width='2.2'%3E%3Cpath d='M96 92c0-30 22-52 50-52s50 22 50 52c-9 6-17-2-25 3s-16-3-25 2-16-3-25 1-16-2-25-6z' fill='%23fde3ec'/%3E%3Cpath d='M112 100c-4 18 6 30-1 48s4 30-2 46'/%3E%3Cpath d='M134 104c3 20-6 32 1 50s-4 32 2 48'/%3E%3Cpath d='M158 104c-3 18 6 30-1 48s4 28-1 44'/%3E%3Cpath d='M180 99c4 16-5 28 1 44'/%3E%3C/g%3E%3Cg stroke='%238fd3c8' stroke-width='2'%3E%3Ccircle cx='60' cy='70' r='9'/%3E%3Ccircle cx='42' cy='112' r='5'/%3E%3Ccircle cx='70' cy='140' r='3.5'/%3E%3Ccircle cx='226' cy='40' r='6'/%3E%3C/g%3E%3Cg stroke='%23f0cf63' stroke-width='2'%3E%3Ccircle cx='62' cy='236' r='26' fill='%23fff6d6'/%3E%3Ccircle cx='62' cy='236' r='9'/%3E%3Cpath d='M62 210v52M36 236h52M44 218l36 36M80 218l-36 36'/%3E%3C/g%3E%3Cg stroke='%23f2a9c4' stroke-width='2'%3E%3Cellipse cx='200' cy='238' rx='40' ry='30' fill='%23fff1f6'/%3E%3Ccircle cx='206' cy='236' r='11' fill='%23fbd3e2'/%3E%3Cpath d='M176 228c6-4 10 2 14-2M182 252c5 3 9-1 13 2' stroke='%238fd3c8'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 28px bottom 20px/230px auto}
@media (max-width:820px){#contenu{background-size:120px auto;background-position:right 10px bottom 10px}}
@media print{#contenu{background:none}}

/* blocs, cartes, champs : arrondis doux, ombre rosée */
.bloc,.question,.cours{border-radius:18px;box-shadow:var(--ombre)}
.bloc{padding:18px 20px}
.carte{border-radius:22px;background:linear-gradient(180deg,var(--surface) 70%,color-mix(in srgb,var(--rose) 18%,var(--surface)))}
.btn{border-radius:12px;transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover{filter:none;border-color:var(--rose-bord)}
.btn.petit{border-radius:10px}
.btn.principal{background:var(--rose);color:var(--rose-encre);border-color:var(--rose-bord);font-weight:700}
.btn.principal:hover{background:color-mix(in srgb,var(--rose) 82%,var(--accent))}
.btn.lien:hover{background:color-mix(in srgb,var(--rose) 25%,transparent)}
input:not([type=checkbox],[type=radio],[type=color],[type=range]),textarea,select{border-radius:12px}
input:not([type=checkbox],[type=radio],[type=color],[type=range]):focus,textarea:focus,select:focus{border-color:var(--accent)}
.msg{border-radius:18px}
.msg.user{background:var(--rose);color:var(--rose-encre)}
.alerte{background:var(--citron);border-radius:14px}
.explication{background:color-mix(in srgb,var(--citron) 70%,var(--surface));border-radius:12px}

/* onglets : pastille rose douce sous l'onglet actif */
.onglets button.actif,.sous-onglets button.actif{border-color:var(--accent);background:color-mix(in srgb,var(--rose) 22%,transparent);border-radius:12px 12px 0 0}

/* barres d'objectif : dégradé rose → jaune, lagon une fois l'objectif atteint */
.barre{background:color-mix(in srgb,var(--bord) 60%,var(--surface))}
.barre.mini>div,.barre.grande>div{background:linear-gradient(90deg,var(--rose-bord),var(--citron-fort))}
.barre>div.atteint{background:linear-gradient(90deg,var(--lagon-fort),var(--ok))}

/* mode sombre : l'illustration passe en simple trait, plus discrète sur le bleu nuit */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #contenu{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 300' fill='none' stroke-linecap='round' opacity='.55'%3E%3Cg stroke='%23f2a9c4' stroke-width='2.2'%3E%3Cpath d='M96 92c0-30 22-52 50-52s50 22 50 52c-9 6-17-2-25 3s-16-3-25 2-16-3-25 1-16-2-25-6z' fill='none'/%3E%3Cpath d='M112 100c-4 18 6 30-1 48s4 30-2 46'/%3E%3Cpath d='M134 104c3 20-6 32 1 50s-4 32 2 48'/%3E%3Cpath d='M158 104c-3 18 6 30-1 48s4 28-1 44'/%3E%3Cpath d='M180 99c4 16-5 28 1 44'/%3E%3C/g%3E%3Cg stroke='%238fd3c8' stroke-width='2'%3E%3Ccircle cx='60' cy='70' r='9'/%3E%3Ccircle cx='42' cy='112' r='5'/%3E%3Ccircle cx='70' cy='140' r='3.5'/%3E%3Ccircle cx='226' cy='40' r='6'/%3E%3C/g%3E%3Cg stroke='%23f0cf63' stroke-width='2'%3E%3Ccircle cx='62' cy='236' r='26' fill='none'/%3E%3Ccircle cx='62' cy='236' r='9'/%3E%3Cpath d='M62 210v52M36 236h52M44 218l36 36M80 218l-36 36'/%3E%3C/g%3E%3Cg stroke='%23f2a9c4' stroke-width='2'%3E%3Cellipse cx='200' cy='238' rx='40' ry='30' fill='none'/%3E%3Ccircle cx='206' cy='236' r='11' fill='none'/%3E%3Cpath d='M176 228c6-4 10 2 14-2M182 252c5 3 9-1 13 2' stroke='%238fd3c8'/%3E%3C/g%3E%3C/svg%3E")}}
:root[data-theme="dark"] #contenu{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 300' fill='none' stroke-linecap='round' opacity='.55'%3E%3Cg stroke='%23f2a9c4' stroke-width='2.2'%3E%3Cpath d='M96 92c0-30 22-52 50-52s50 22 50 52c-9 6-17-2-25 3s-16-3-25 2-16-3-25 1-16-2-25-6z' fill='none'/%3E%3Cpath d='M112 100c-4 18 6 30-1 48s4 30-2 46'/%3E%3Cpath d='M134 104c3 20-6 32 1 50s-4 32 2 48'/%3E%3Cpath d='M158 104c-3 18 6 30-1 48s4 28-1 44'/%3E%3Cpath d='M180 99c4 16-5 28 1 44'/%3E%3C/g%3E%3Cg stroke='%238fd3c8' stroke-width='2'%3E%3Ccircle cx='60' cy='70' r='9'/%3E%3Ccircle cx='42' cy='112' r='5'/%3E%3Ccircle cx='70' cy='140' r='3.5'/%3E%3Ccircle cx='226' cy='40' r='6'/%3E%3C/g%3E%3Cg stroke='%23f0cf63' stroke-width='2'%3E%3Ccircle cx='62' cy='236' r='26' fill='none'/%3E%3Ccircle cx='62' cy='236' r='9'/%3E%3Cpath d='M62 210v52M36 236h52M44 218l36 36M80 218l-36 36'/%3E%3C/g%3E%3Cg stroke='%23f2a9c4' stroke-width='2'%3E%3Cellipse cx='200' cy='238' rx='40' ry='30' fill='none'/%3E%3Ccircle cx='206' cy='236' r='11' fill='none'/%3E%3Cpath d='M176 228c6-4 10 2 14-2M182 252c5 3 9-1 13 2' stroke='%238fd3c8'/%3E%3C/g%3E%3C/svg%3E")}

/* titre de l'accueil : centré, avec une petite vague rose (choisi en mode live) */
#auj-titre{text-align:center;font-size:34px;line-height:1.25;margin:6px 0 26px;padding-bottom:22px;text-wrap:balance;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' fill='none'%3E%3Cpath d='M2 6c12-7 22 7 34 0s22-7 34 0 22 7 34 0 14-5 14-5' stroke='%23e58aae' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center bottom/120px 12px}
@media (max-width:820px){#auj-titre{font-size:26px;margin-bottom:20px}}


/* ================================================================== icônes dessinées (remplacent les émojis du menu et des onglets) */
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:8px}
.onglets button,.sous-onglets button{display:flex;align-items:center}
.onglets .ic,.sous-onglets .ic,.escales h2 .ic{color:var(--accent)}
.objectif-mini .ic,.serie .ic{width:16px;height:16px;margin-right:4px;color:var(--accent)}
.titre-ia .ic,.badge-origine .ic{color:var(--ia);margin-right:5px}

/* symbole de l'IA : un radiolaire (plancton), dessiné devant chaque bouton qui appelle l'IA */
.btn.ia::before,.btn.ia-sec::before{content:"";display:inline-block;width:1.05em;height:1.05em;margin-right:7px;vertical-align:-.17em;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='black'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='black'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/svg%3E") center/contain no-repeat}

/* ================================================================== accueil « carnet de plongée » */
.plongee{display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:stretch;padding:22px 24px;margin-bottom:30px;border-radius:24px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--rose) 30%,var(--surface)),color-mix(in srgb,var(--citron) 70%,var(--surface)));}
.plongee h2{font-size:22px;margin:2px 0 6px}
.plongee-txt p{margin:4px 0}
.plongee .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.profondeur{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--doux);font-variant-numeric:tabular-nums}
.profondeur .eau{position:relative;flex:1;width:16px;min-height:120px;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--surface) 70%,transparent);box-shadow:inset 0 0 0 1.5px var(--rose-bord)}
.profondeur #auj-barre{position:absolute;left:0;right:0;top:0;height:0;border-radius:999px;transition:height .6s cubic-bezier(.22,1,.36,1);
  background:linear-gradient(180deg,var(--rose-bord),var(--lagon-fort))}
.profondeur #auj-barre::after{content:"";position:absolute;left:50%;bottom:-2px;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:var(--surface);box-shadow:0 0 0 2px var(--accent)}
.profondeur #auj-barre.atteint{background:linear-gradient(180deg,var(--lagon-fort),var(--ok))}
.serie{display:flex;align-items:center;font-size:14px;color:var(--texte)}

.escales{margin:0 0 28px}
.escales>h2{display:flex;align-items:center;font-size:19px;margin-bottom:8px}
.escales .tache{position:relative;border-bottom:none;padding:10px 6px 10px 26px}
.escales .tache::before{content:"";position:absolute;left:7px;top:0;bottom:0;border-left:2px dotted var(--rose-bord)}
.escales .tache::after{content:"";position:absolute;left:3px;top:17px;width:10px;height:10px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 2px var(--accent)}
.escales .tache.examen-jour::after{background:var(--accent)}
.escales .tache input[type=checkbox]{order:2}
.escales .examen-ligne{border-bottom:1px dashed var(--bord)}
#auj-reprendre{margin-top:6px;font-size:15px}
@media (max-width:520px){.plongee{grid-template-columns:44px 1fr;gap:14px;padding:18px 16px}}


/* ================================================================== disposition « carnet » (navigation en 4 rubriques) */
:root{--teinte-0:var(--rose);--teinte-1:var(--citron);--teinte-2:var(--lagon);--teinte-3:#ffdcca;--teinte-4:#dcefd2;--part-teinte:55%}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--teinte-3:#f2b79a;--teinte-4:#a9d39a;--part-teinte:24%}}
:root[data-theme="dark"]{--teinte-3:#f2b79a;--teinte-4:#a9d39a;--part-teinte:24%}
body{flex-direction:column}
.vue{max-width:960px}

/* en-tête : logo, 4 rubriques, outils */
#entete{display:flex;align-items:center;gap:18px;flex-shrink:0;padding:10px 24px 14px;background:var(--barre-fond);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' fill='none'%3E%3Cpath d='M0 6c20-8 40 8 60 0s40-8 60 0 40 8 60 0 40-8 60 0' stroke='%23f2a9c4' stroke-width='2'/%3E%3C/svg%3E"),var(--barre-fond);
  background-repeat:repeat-x,no-repeat;background-position:left bottom,0 0;background-size:240px 10px,auto}
#entete .logo{text-decoration:none;color:var(--texte);white-space:nowrap}
.nav-principale{display:flex;gap:4px}
.nav-principale button{display:flex;align-items:center;border:none;background:none;font:inherit;font-weight:600;color:var(--doux);padding:8px 14px;border-radius:999px;cursor:pointer}
.nav-principale button:hover{color:var(--texte);background:color-mix(in srgb,var(--rose) 25%,transparent)}
.nav-principale button.actif{color:var(--rose-encre);background:var(--rose)}
.nav-principale .ic{margin-right:7px}
.nav-principale button.actif .ic{color:inherit}
.entete-outils{display:flex;align-items:center;gap:8px;margin-left:auto}
.entete-outils .recherche{width:220px}
.entete-outils .recherche input{border-radius:999px;padding:7px 14px}
.btn-icone{display:grid;place-items:center;width:38px;height:38px;border:none;border-radius:50%;background:none;color:var(--accent);cursor:pointer}
.btn-icone:hover{background:color-mix(in srgb,var(--rose) 30%,transparent)}
.btn-icone .ic{margin:0;width:20px;height:20px}
#recherche-ouvrir{display:none}
.objectif-mini{display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.objectif-mini .barre.mini{display:block;width:46px;height:6px;margin:0;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--bord) 60%,var(--surface))}
.objectif-mini #om-barre{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rose-bord),var(--citron-fort))}
.objectif-mini #om-barre.atteint{background:linear-gradient(90deg,var(--lagon-fort),var(--ok))}
#navbas{display:none}
#concentration-menu{display:none}

/* « Mes cours » : le classeur */
.classeur{display:grid;grid-template-columns:minmax(0,1fr) 200px;align-items:start;margin-top:8px}
.intercalaires{order:2;display:flex;flex-direction:column;gap:6px;padding-top:28px}
.intercalaire{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px;margin-left:-14px;padding:12px 14px 12px 26px;
  border:1px solid color-mix(in srgb,var(--teinte) 70%,var(--bord));border-left:none;border-radius:0 14px 14px 0;cursor:pointer;font:inherit;font-weight:600;text-align:left;
  color:var(--texte);background:color-mix(in srgb,var(--teinte) var(--part-teinte),var(--surface));transition:transform .2s cubic-bezier(.22,1,.36,1)}
.intercalaire:hover{transform:translateX(4px)}
.intercalaire.actif{transform:translateX(10px);font-weight:700}
.intercalaire .nb{font-size:12px;font-weight:700;color:var(--doux);font-variant-numeric:tabular-nums}
.feuillet{order:1;position:relative;z-index:1;min-height:340px;padding:28px 34px 34px 64px;border-radius:6px 18px 18px 6px;background:var(--surface);
  box-shadow:var(--ombre),0 0 0 1px var(--bord),inset 0 6px 0 color-mix(in srgb,var(--teinte) 80%,var(--surface))}
/* trous de classeur et marge rose, comme une copie double */
.feuillet::before{content:"";position:absolute;left:18px;top:40px;bottom:40px;width:14px;
  background:radial-gradient(circle,var(--fond) 0 6px,color-mix(in srgb,var(--bord) 90%,var(--texte)) 6.5px 7px,transparent 7.5px) center top/14px 33.3% repeat-y}
.feuillet::after{content:"";position:absolute;left:48px;top:0;bottom:0;border-left:1.5px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.feuillet h2{font-size:24px;margin-bottom:14px}
.pages{list-style:none;margin:0;padding:0}
.pages li{border-bottom:1px solid color-mix(in srgb,var(--lagon-fort) 30%,transparent)}
.pages .chap{padding:12px 6px;border-radius:8px;font-size:16px}
.pages .chap .titre{flex:1}
.pages .chap:hover{background:color-mix(in srgb,var(--teinte) 25%,transparent)}
.fil-ariane{display:inline-block;color:var(--doux);text-decoration:none;font-weight:600;font-size:14px}
.fil-ariane::before{content:"‹ Mes cours · "}
.fil-ariane:hover{color:var(--accent)}

/* « S'entraîner » : une liste d'exercices, pas une grille de cartes */
.exercices{list-style:none;margin:8px 0 0;padding:0;max-width:640px}
.exercices li{border-bottom:1px solid var(--bord)}
.exercice{display:flex;align-items:center;gap:16px;width:100%;padding:16px 8px;border:none;background:none;font:inherit;color:var(--texte);text-align:left;cursor:pointer;border-radius:12px}
.exercice:hover:not(:disabled){background:color-mix(in srgb,var(--rose) 18%,transparent)}
.exercice:disabled{opacity:.55;cursor:default}
.exercice .ic{width:26px;height:26px;margin:0;color:var(--accent)}
.exercice>span{display:flex;flex-direction:column}
.exercice strong{font-family:var(--titre);font-weight:400;font-size:19px}
.exercice.principal{background:color-mix(in srgb,var(--rose) 28%,var(--surface));padding:18px 16px}

/* chapitre : deux modes */
.modes{display:inline-flex;gap:4px;padding:4px;margin:4px 0 14px;border-radius:999px;background:color-mix(in srgb,var(--bord) 55%,var(--surface))}
.modes button{border:none;background:none;font:inherit;font-weight:700;padding:8px 20px;border-radius:999px;color:var(--doux);cursor:pointer}
.modes button.actif{background:var(--surface);color:var(--texte);box-shadow:0 1px 6px rgba(176,58,106,.12)}
#vue-chapitre[data-mode="apprendre"] .onglets [data-groupe="entrainer"],#vue-chapitre[data-mode="entrainer"] .onglets [data-groupe="apprendre"]{display:none}
#vue-chapitre:not([data-mode="entrainer"]) .onglets .desc{display:none}
.onglets .desc{display:block;font-size:12.5px;font-weight:400;color:var(--doux)}
.panneaux{min-width:0}
/* S'entraîner : quatre exercices en ligne */
#vue-chapitre[data-mode="entrainer"] .onglets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;border-bottom:none}
#vue-chapitre[data-mode="entrainer"] .onglets button{flex-direction:column;align-items:flex-start;gap:2px;padding:14px;border:1px solid var(--bord);border-radius:16px;text-align:left;background:var(--surface)}
#vue-chapitre[data-mode="entrainer"] .onglets button.actif{border-color:var(--accent);background:color-mix(in srgb,var(--rose) 22%,var(--surface))}
#vue-chapitre[data-mode="entrainer"] .onglets .ic{width:22px;height:22px;margin:0 0 4px}
/* Apprendre (grand écran) : le cours au centre, les outils dans une colonne à droite */
@media (min-width:1100px){
  #vue-chapitre{max-width:1180px}
  #vue-chapitre[data-mode="apprendre"] .chapitre-corps{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:28px;align-items:start}
  #vue-chapitre[data-mode="apprendre"] .onglets{order:2;position:sticky;top:0;flex-direction:column;flex-wrap:nowrap;gap:2px;margin:0;padding-left:14px;border-bottom:none;border-left:1px solid var(--bord)}
  #vue-chapitre[data-mode="apprendre"] .onglets button{border-bottom:none;border-radius:12px;padding:10px 12px}
  #vue-chapitre[data-mode="apprendre"] .onglets button.actif{background:color-mix(in srgb,var(--rose) 30%,transparent)}
  #vue-chapitre[data-mode="apprendre"] .panneaux{order:1}
}

/* accueil : double page de carnet (grand écran) */
#vue-accueil{max-width:1120px}
@media (min-width:1100px){
  .double-page{display:grid;grid-template-columns:1fr 1fr;gap:56px;position:relative}
  .double-page::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;border-left:2px dotted var(--rose-bord)}
}
.lien-discret{margin-left:auto;font-family:var(--texte-police);font-size:13px;font-weight:600}

/* progression : le récif */
.recif{margin:4px 0 22px}
.corails{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:14px 18px;padding:18px 8px 6px}
.corail{display:flex;flex-direction:column;align-items:center;gap:6px;width:calc(var(--taille) + 40px);border:none;background:none;font:inherit;color:var(--texte);cursor:pointer}
.corail .bulle{display:grid;place-items:center;width:var(--taille);height:var(--taille);border-radius:var(--forme);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;
  transition:transform .3s cubic-bezier(.22,1,.36,1);box-shadow:inset 0 -6px 0 rgba(0,0,0,.05)}
.corail:hover .bulle{transform:scale(1.05) rotate(-2deg)}
.corail:nth-child(2n) .bulle{margin-bottom:14px}
.corail .nom{font-size:12.5px;line-height:1.3;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.corail.solide .bulle,.legende .pt.solide{background:color-mix(in srgb,var(--lagon-fort) 55%,var(--surface))}
.corail.moyen .bulle,.legende .pt.moyen{background:color-mix(in srgb,var(--citron-fort) 60%,var(--surface))}
.corail.fragile .bulle,.legende .pt.fragile{background:color-mix(in srgb,var(--ko) 38%,var(--surface))}
.corail.jamais .bulle,.legende .pt.jamais{background:color-mix(in srgb,var(--bord) 80%,var(--surface))}
.legende{text-align:center;font-size:13px}
.legende .pt{display:inline-block;width:11px;height:11px;border-radius:50%;margin:0 4px 0 10px;vertical-align:-1px}

/* mode concentration : pendant une révision, un examen blanc ou un défi */
body.concentration:not(.menu-visible) #entete,body.concentration:not(.menu-visible) #navbas{display:none}
body.concentration #concentration-menu{display:inline-flex;position:fixed;top:12px;right:14px;z-index:15;opacity:.75}
body.concentration #concentration-menu:hover,body.concentration #concentration-menu:focus-visible{opacity:1}
body.concentration #vue-chapitre .entete,body.concentration .modes,body.concentration #vue-chapitre .onglets,body.concentration #o-cartes>:not(#revision){display:none}
body.concentration #vue-chapitre .chapitre-corps{display:block}
body.concentration #contenu{padding-top:48px}

/* écrans étroits : barre de navigation en bas, en-tête compact */
@media (max-width:820px){
  #entete{gap:8px;padding:8px 10px 12px;flex-wrap:wrap}
  #entete .logo{font-size:18px}
  #entete .nav-principale{display:none}
  .entete-outils{gap:2px}
  .entete-outils .libelle{display:none}
  .entete-outils .recherche{display:none;order:9;width:100%}
  body.recherche-ouverte .entete-outils{flex-wrap:wrap}
  body.recherche-ouverte .entete-outils .recherche{display:block}
  #recherche-ouvrir{display:grid}
  .objectif-mini .barre.mini{display:none}
  #navbas{display:flex;justify-content:space-around;flex-shrink:0;padding:4px 4px calc(4px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--bord)}
  #navbas button{flex-direction:column;gap:2px;padding:6px 4px;min-width:64px;min-height:52px;font-size:11.5px;border-radius:14px}
  #navbas .ic{margin:0;width:22px;height:22px}
  #navbas button.actif{background:color-mix(in srgb,var(--rose) 45%,transparent)}
  .classeur{grid-template-columns:minmax(0,1fr)}
  .intercalaires{order:0;flex-direction:row;overflow-x:auto;padding:0 0 0 6px;gap:4px;scrollbar-width:none}
  .intercalaire{margin:0;flex-shrink:0;border:1px solid color-mix(in srgb,var(--teinte) 70%,var(--bord));border-bottom:none;border-radius:14px 14px 0 0;padding:10px 14px}
  .intercalaire:hover,.intercalaire.actif{transform:none}
  .intercalaire.actif{padding-bottom:14px}
  .feuillet{padding:20px 16px 24px 44px;border-radius:0 0 16px 16px}
  .feuillet::before{left:12px;width:12px}
  .feuillet::after{left:34px}
  #vue-chapitre[data-mode="entrainer"] .onglets{grid-template-columns:repeat(2,minmax(0,1fr));margin-left:0;margin-right:0;padding:0;overflow:visible}
  #vue-chapitre[data-mode="entrainer"] .onglets button{white-space:normal}
}

/* en-tête : rien ne passe à la ligne ; sous 1280 px la recherche s'ouvre avec la loupe */
#entete .logo,.nav-principale button,.objectif-mini,.entete-outils .btn{white-space:nowrap;flex-shrink:0}
.nav-principale button{padding:8px 12px}
@media (min-width:821px) and (max-width:1280px){
  #entete{flex-wrap:wrap;row-gap:8px}
  .entete-outils .recherche{display:none;order:9;width:100%}
  body.recherche-ouverte .entete-outils{flex-wrap:wrap}
  body.recherche-ouverte .entete-outils .recherche{display:block}
  #recherche-ouvrir{display:grid}
  .objectif-mini .barre.mini{display:none}
}
@media (min-width:821px) and (max-width:1020px){
  .entete-outils .libelle{display:none}
  .nav-principale .ic{display:none}
}

#arbre.classeur{overflow:visible;flex:none}


/* ================================================================== ajouts : définitions, explications, corrections */
.ajout.correction{border-color:var(--attention);background:color-mix(in srgb,var(--attention) 8%,var(--surface))}
.ajout.correction .badge{color:var(--attention-txt);border-color:var(--attention-txt)}
.ajout.correction .raison{display:block;margin-top:4px;color:var(--texte)}
.ajout .txt p{margin:.3em 0}

/* schéma : écrire les légendes */
.sc-ecrire{display:flex;flex-direction:column;gap:8px;width:100%;max-width:560px;margin:0 auto}
.sc-ecr{display:grid;grid-template-columns:70px minmax(0,1fr);gap:4px 10px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--bord)}
.sc-ecr label{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.sc-ecr .verdict{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px}
.sc-ecr .juge-ecr{display:inline-flex;gap:4px;margin-left:auto}
.sc-ecr .juge-ecr .choisi{border-color:var(--accent);background:var(--accent-pale);font-weight:700}
.sc-ecr.savait{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--surface))}
.sc-ecr.a_revoir{border-color:var(--ko);background:color-mix(in srgb,var(--ko) 9%,var(--surface))}

/* « Mes cours » : titre et accès au lexique */
.titre-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.titre-ligne .btn{display:inline-flex;align-items:center;text-decoration:none}

/* lexique */
.lx-outils,.lx-extraire{display:flex;flex-wrap:wrap;align-items:end;gap:10px 14px;margin-bottom:10px}
.lx-outils input[type=search]{flex:1;min-width:200px}
.lx-extraire label{flex:1;min-width:220px;margin:0}
.lx-extraire select,.lx-outils select{width:100%;max-width:100%}
.lx-note{font-size:13.5px;margin:4px 0 12px}
.lx-lettres{position:sticky;top:-28px;z-index:2;display:flex;flex-wrap:wrap;gap:2px;padding:8px 0;background:var(--fond)}
.lx-lettres a{display:grid;place-items:center;min-width:30px;height:30px;border-radius:8px;font-family:var(--titre);text-decoration:none;color:var(--accent)}
.lx-lettres a:hover{background:color-mix(in srgb,var(--rose) 35%,transparent)}
.lx-groupe{scroll-margin-top:52px}
.lx-groupe>h2{font-size:26px;color:var(--accent);margin:18px 0 4px;border-bottom:1px solid var(--bord)}
.lx-groupe dl{margin:0}
.lx-terme{padding:10px 0;border-bottom:1px dashed var(--bord)}
.lx-terme dt{font-weight:700;font-size:16px}
.lx-terme .en{font-weight:400;font-style:italic;color:var(--doux);margin-left:6px}
.lx-terme .en::before{content:"EN · ";font-style:normal;font-size:11px;font-weight:700;letter-spacing:.05em}
.lx-terme dd{margin:3px 0 0}
.lx-source{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px;font-size:13px}
.lx-source a{color:var(--doux)}
.lx-edition{display:flex;flex-direction:column;gap:6px}
@media (max-width:820px){.lx-lettres{top:-18px}}


/* ================================================================== mise au propre */
#o-propre .sous-onglets{margin-bottom:10px}
.pr-barre{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:6px 0 4px}
.pr-options{display:flex;flex-wrap:wrap;gap:4px 16px}
.pr-options label{margin:0}
.pr-boutons{display:flex;flex-wrap:wrap;gap:8px}
#pr-word{text-decoration:none;display:inline-flex;align-items:center}
.btn.desactive{opacity:.5;pointer-events:none}
.pr-apercu h2{font-size:21px;margin-top:22px}.pr-apercu h3{font-size:17px;margin-top:16px}
.pr-ajout{margin:8px 0;padding:6px 12px;border-radius:10px;background:var(--ia-pale);color:var(--texte)}
.pr-ajout .badge{margin-right:8px}
#pr-texte{font-family:ui-monospace,Consolas,monospace;font-size:13.5px;line-height:1.55}

/* ---------- « En relief » : molécules en 3D */
.mo-ajout{margin:14px 0}
.mo-ajout .ligne{align-items:flex-end}
.mo-props{display:flex;flex-direction:column;gap:8px}
.mo-prop{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--ia-pale);border:1px solid var(--ia-bord);border-radius:12px;padding:10px 14px}
.mo-prop>div:first-child{flex:1;min-width:min(260px,100%)}
.grille-molecules{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:14px}
.carte-molecule{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;font:inherit;color:var(--texte);background:var(--surface);border:1px solid var(--bord);border-radius:14px;padding:12px 14px;cursor:pointer}
.carte-molecule:hover{border-color:var(--accent)}
.carte-molecule .ic{width:26px;height:26px;color:var(--accent);margin-bottom:4px}
.carte-molecule .doux{font-size:13px}
.mo-formule{font-size:14px;color:var(--doux)}
.mo-barre{justify-content:flex-start;margin-bottom:10px}
.mo-barre>label{flex:0 1 auto;min-width:0}
.mo-barre select{margin-left:6px}
.mo-scenes{display:grid;grid-template-columns:1fr;gap:10px}
.mo-scenes.duo{grid-template-columns:1fr 1fr}
.mo-scene{position:relative;height:min(62vh,520px);min-height:300px;border:1px solid var(--bord);border-radius:14px;overflow:hidden;background:var(--surface);touch-action:none}
.mo-scene.rev{height:min(46vh,380px);min-height:240px;margin-top:4px}
.mo-attente{padding:20px;margin:0}
.mo-legende{position:absolute;left:10px;top:8px;z-index:2;background:var(--surface);border:1px solid var(--bord);border-radius:8px;padding:2px 8px;font-size:13px;font-weight:600;pointer-events:none}
.mo-info{margin:10px 0 0;min-height:1.5em}
.mo-info form{align-items:flex-end}
.mo-rev:not(:empty){margin-top:10px;background:var(--citron);border-radius:12px;padding:10px 14px}
.mo-rev p{margin:0 0 8px}
.mo-liste-et{padding-left:22px;margin:6px 0}
.mo-liste-et li{margin:4px 0;font-size:14px}
.mo-liste-et .btn.lien{padding:2px 0;font-weight:600;color:var(--accent)}
.mo-source{font-size:13px;margin-top:12px}
@media (max-width:820px){.mo-scene,.mo-scenes.duo .mo-scene{height:min(92vw,58vh);min-height:240px}.mo-scenes.duo{grid-template-columns:1fr}}

/* ---------- Quiz « Quelle est cette molécule ? » */
.mq-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;margin-top:12px}
.mq-rep{text-align:left;justify-content:flex-start}
.mq-rep.bon{border-color:var(--ok);color:var(--ok);font-weight:700}
.mq-rep.faux{border-color:var(--ko);color:var(--ko);text-decoration:line-through}
.mq-rep:disabled{opacity:1;cursor:default}
.mq-retour:not(:empty){margin-top:12px}
.mq-retour p{margin:6px 0}

/* ---------- Lecture à voix haute */
.voix-barre{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:40;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;
  background:var(--surface);border:1px solid var(--bord);border-radius:16px;padding:8px 12px;box-shadow:0 6px 24px rgba(59,42,63,.18);max-width:calc(100vw - 32px)}
.voix-barre label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--doux)}
.voix-barre select{padding:4px 6px;font-size:13px}
.lu-voix{background:var(--citron);border-radius:6px;box-shadow:0 0 0 4px var(--citron)}
@media (max-width:820px){.voix-barre{left:12px;right:12px;transform:none;max-width:none;bottom:calc(72px + env(safe-area-inset-bottom));gap:6px;padding:6px 8px}.voix-barre label{font-size:12px}}

/* boutons à icône seule (micro, lecture à voix haute) */
.ic-seul .ic{margin-right:0}
.btn .ic{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
h2 .ic,h3 .ic{color:var(--accent)}

/* ---------- Flashcards : la pile du jour (un seul objet encadré : la pile) et les outils à côté */
.cartes-tete{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:28px 40px;align-items:start;margin-bottom:18px}
.pile{position:relative;background:var(--surface);border:1px solid var(--bord);border-radius:16px;padding:22px 22px 18px;margin:0 12px 12px 0;
  box-shadow:6px 6px 0 -1px var(--surface),6px 6px 0 0 var(--bord),12px 12px 0 -1px var(--surface),12px 12px 0 0 var(--rose)}  /* les cartes empilées dessous */
.pile-fond{display:none}
.pile-nb{font-family:"Young Serif",Georgia,serif;font-size:64px;line-height:1;margin:0;color:var(--accent)}
.pile-lib{font-size:18px;font-weight:700;margin:6px 0 2px}
.pile-stats{margin:0 0 14px;font-size:14px}
.pile-actions{display:flex;flex-wrap:wrap;gap:8px}
.cartes-outils h2{font-family:inherit;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--doux);margin:6px 0 8px;font-weight:700}
.cartes-outils h2:not(:first-child){margin-top:20px}
.outils-ligne{display:flex;flex-wrap:wrap;gap:8px}
.cartes-outils .radio{display:block;margin:0 0 8px}
.outils-filtre{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.outils-filtre select{width:auto}
.cartes-outils .btn.lien{display:inline-flex;align-items:center;margin-top:6px;padding:4px 0;color:var(--accent)}
@media (max-width:820px){.cartes-tete{grid-template-columns:1fr;gap:18px}.pile-nb{font-size:52px}}

/* ---------- En relief : catalogue (nom ……… formule) et colonne d'outils, sans grille de boîtes */
.mo-accueil{display:grid;grid-template-columns:1fr minmax(240px,300px);gap:28px 40px;align-items:start}
.cat-titre{margin:0 0 6px}
.catalogue{display:flex;flex-direction:column}
.cat-ligne{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"nom points formule" "et et et";column-gap:8px;align-items:baseline;
  width:100%;text-align:left;font:inherit;color:var(--texte);background:none;border:none;border-bottom:1px solid var(--bord);padding:10px 2px;cursor:pointer}
.cat-ligne:hover .cat-nom,.cat-ligne:focus-visible .cat-nom{color:var(--accent)}
.cat-nom{grid-area:nom;font-weight:700}
.cat-points{grid-area:points;border-bottom:2px dotted var(--bord);transform:translateY(-4px)}
.cat-formule{grid-area:formule;color:var(--doux);font-variant-numeric:tabular-nums}
.cat-et{grid-area:et;font-size:13px}
.cat-et:empty{display:none}
.mo-cote{display:flex;flex-direction:column;gap:10px;position:sticky;top:12px}
.mo-cote>.doux{margin:0 0 4px;font-size:14px}
.mo-cote .mo-ajout{margin:10px 0 0;padding-top:14px;border-top:1px solid var(--bord);display:flex;flex-direction:column;gap:8px}
.mo-cote .mo-ajout h2{margin:0;font-size:15px}
.mo-cote .mo-ajout .btn{align-self:flex-start}
@media (max-width:820px){.mo-accueil{grid-template-columns:1fr}.mo-cote{position:static}}

/* ---------- Articles scientifiques : une liste de lecture, comme une bibliographie annotée */
.ar-intro{margin:0 0 12px;max-width:70ch}
.ar-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:6px}
.ar-form label{flex:1;min-width:min(280px,100%)}
#ar-liste h2{margin:22px 0 4px}
.ar-article{padding:16px 0 14px;border-bottom:1px solid var(--bord);max-width:80ch}
.ar-titre{margin:0;font-size:17px;line-height:1.35}
.ar-titre a{color:var(--texte);text-decoration-color:var(--rose)}
.ar-titre a:hover{color:var(--accent)}
.ar-titre-fr{margin:3px 0 0;color:var(--doux);font-style:italic}
.ar-ref{margin:6px 0 0;font-size:14px;color:var(--doux)}
.ar-badge{display:inline-block;font-size:12px;padding:0 7px;border-radius:9px;background:var(--lagon);color:var(--texte)}
.ar-apport{margin:10px 0 0}
.ar-apport p{margin:4px 0 0}
.ar-ia{font-size:12px;font-weight:700;color:var(--ia);text-transform:uppercase;letter-spacing:.04em}
.ar-ia .ic{width:14px;height:14px;margin-right:5px}
.ar-resume{margin-top:8px;font-size:14px}
.ar-resume p{margin:6px 0 0;color:var(--doux)}
.ar-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.ar-garde{font-size:13px;font-weight:700;color:var(--ok)}
.ar-actions a.btn{text-decoration:none}
.ar-ia-court{font-size:11px;font-weight:700;color:var(--ia);text-transform:uppercase;letter-spacing:.04em;margin-left:6px}

/* ---------- QCM type médecine (QRM) */
fieldset.question.qrm{border:none;padding:0;margin:0 0 22px;min-width:0}
fieldset.question.qrm legend{padding:0;margin-bottom:4px}
.qrm-prop{display:flex;gap:10px;align-items:flex-start;padding:6px 8px;border-radius:8px;margin-top:4px}
.qrm-prop.vraie{background:color-mix(in srgb,var(--ok) 12%,transparent)}
.qrm-prop.erreur{outline:2px solid var(--ko);outline-offset:-2px}
.qrm-case{font-size:18px;line-height:1.2}
.qrm-vf{font-size:12px;font-weight:700;margin-left:6px;color:var(--doux);text-transform:uppercase}
.qrm-prop.vraie .qrm-vf{color:var(--ok)}
.qrm-err{font-size:12px;font-weight:700;margin-left:6px;color:var(--ko)}
.qrm-expl{font-size:14px;color:var(--doux);margin-top:2px}

/* ---------- Minuteur Pomodoro : panneau flottant, visible sur toutes les pages */
.pomo-bouton{position:relative}
.pomo-bouton.actif{color:var(--accent)}
.pomo-mini{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;margin-left:2px}
.pomo-mini:empty{display:none}
.pomo{position:fixed;right:16px;bottom:16px;z-index:45;width:min(320px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--bord);
  border-radius:16px;padding:12px 14px 14px;box-shadow:0 8px 28px rgba(59,42,63,.18)}
.pomo-tete{display:flex;align-items:center;gap:8px}
.pomo-tete strong{font-size:15px}
.pomo-tete .doux{font-size:13px;flex:1}
.pomo-temps{font-family:"Young Serif",Georgia,serif;font-size:52px;line-height:1.1;text-align:center;margin:6px 0 10px;color:var(--accent);font-variant-numeric:tabular-nums}
.pomo[data-phase="pause"] .pomo-temps,.pomo[data-phase="longue"] .pomo-temps{color:var(--ok)}
.pomo-boutons{display:flex;flex-wrap:wrap;gap:6px}
.pomo-boutons .btn{flex:1 1 auto;justify-content:center}
.pomo-boutons #pomo-demarrer{flex-basis:100%}
.pomo-chap{display:block;margin-top:10px;font-size:13px}
.pomo-chap select{width:100%;margin-top:4px}
@media (max-width:820px){.pomo{left:12px;right:12px;width:auto;bottom:calc(72px + env(safe-area-inset-bottom));padding:10px 12px}.pomo-temps{font-size:38px;margin:2px 0 8px}.pomo-boutons #pomo-demarrer{flex-basis:auto}.pomo-chap{margin-top:8px}}

/* ---------- Progression : temps de travail (une série : barres fines, une seule couleur) */
.prog-temps{margin-top:18px}
.prog-temps h2 .ic{color:var(--accent)}
.pt-barres{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;height:170px;align-items:end;margin:10px 0 16px;border-bottom:1px solid var(--bord);padding-bottom:0}
.pt-jour{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;min-width:0}
.pt-barre{width:min(28px,70%);min-height:2px;background:var(--accent);border-radius:4px 4px 0 0}
.pt-val{font-size:12px;color:var(--doux);white-space:nowrap}
.pt-lib{font-size:12px;color:var(--doux);white-space:nowrap;transform:translateY(20px);margin-top:-16px}
.pt-table{margin-top:28px}

/* ---------- Catégories de cartes : badges */
.badge-origine.lexique{color:var(--attention-txt);border-color:var(--attention)}
.badge-origine.erreur{color:var(--ko);border-color:var(--ko)}
.mel-categorie{display:flex;align-items:center;gap:8px;margin:10px 0}
.lx-cartes{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0}
.lx-cartes .doux{font-size:13px;flex:1;min-width:min(260px,100%)}

/* ---------- Carnet d'erreurs : une liste de lecture, imprimable */
.carnet-barre{margin:8px 0 14px}
.carnet-chap{margin:0 0 26px;padding-bottom:6px;border-bottom:1px solid var(--bord)}
.carnet-chap h2{margin:14px 0 4px}
.carnet-chap h2 .doux{font-family:inherit;font-size:14px;font-weight:400}
.carnet-chap h3{font-size:15px;margin:14px 0 6px}
.carnet-liste{margin:0}
.carnet-liste>div{padding:7px 0;border-top:1px dashed var(--bord)}
.carnet-liste dt{font-weight:700}
.carnet-liste dd{margin:3px 0 0 14px}
.carnet-src{font-size:12px;font-weight:400}
.carnet-juste{color:var(--ok);font-weight:700}
.carnet-faux{color:var(--ko)}
@media print{
  body.impression-carnet #entete,body.impression-carnet #navbas,body.impression-carnet .vue:not(#vue-carnet),body.impression-carnet .carnet-barre,
  body.impression-carnet #toast,body.impression-carnet #pomo-panneau,body.impression-carnet #voix-barre{display:none!important}
  body.impression-carnet{display:block;height:auto;background:#fff;color:#000}
  body.impression-carnet #contenu{padding:0;overflow:visible;background:none}
  body.impression-carnet .carnet-chap{break-inside:auto}
  body.impression-carnet .carnet-liste>div{break-inside:avoid}
}
.carnet-barre a.btn{text-decoration:none}

/* ===================================================================== Typographie
   Échelle de tailles (rapport ~1,2), interlignes, largeur de lecture, césure, chiffres alignés.
   Les espaces insécables françaises (avant : ; ? ! et dans « ») sont posées par app.js. */
:root{--t-petit:13px;--t-texte:15px;--t-lecture:16px;--t-h3:16px;--t-h2:20px;--t-h1:30px}
h1{font-size:var(--t-h1);line-height:1.2;text-wrap:balance}
h2{font-size:var(--t-h2);line-height:1.25;text-wrap:balance}
h3{font-size:var(--t-h3);line-height:1.3;font-weight:700;margin:1.1em 0 .4em}
p,li,dd{text-wrap:pretty}
.doux{line-height:1.5}
/* lecture : le cours, la fiche, la mise au propre et les articles en 16 px, lignes de 70 caractères au plus */
.cours,.fiche,.pr-apercu{font-size:var(--t-lecture);line-height:1.65;hyphens:auto;-webkit-hyphens:auto}
.cours .l,.cours .ajout,.fiche>*,.pr-apercu>*,.ar-article,.carnet-liste,.mo-info{max-width:70ch}
.cours .l.tableau,.fiche>.table-defil,.pr-apercu>.table-defil{max-width:none}
.fiche h2,.pr-apercu h2{font-size:18px}
.fiche h3,.pr-apercu h3{font-size:var(--t-h3)}
.ar-intro,.carnet-chap>p,#vue-carnet>p.doux{max-width:70ch}
/* chiffres de même largeur là où on compare des nombres */
table.prog,table.histo,.tuile .v,.note-finale,.minuteur,.pile-nb,.pt-barres,.cat-formule,.pomo-mini{font-variant-numeric:tabular-nums}
@media (max-width:820px){:root{--t-h1:25px;--t-h2:18px}}

/* ---------- Organes en 3D */
.organes-titre{margin-top:22px}
.org-grille{display:grid;grid-template-columns:1fr minmax(240px,300px);gap:16px;align-items:start}
.org-scene{height:min(68vh,560px)}
.org-scene canvas{display:block;width:100%;height:100%;touch-action:none}
.org-info{min-height:3em;margin-bottom:10px}
.org-info p{margin:4px 0 0;font-size:14px}
.org-transp{display:flex;flex-direction:column;gap:4px;font-size:14px;margin-bottom:8px}
.org-parties{list-style:none;padding:0;margin:10px 0 0;max-height:min(46vh,380px);overflow:auto}
.org-parties li{display:flex;align-items:center;gap:8px;padding:2px 0}
.org-parties .btn.lien{padding:3px 0;text-align:left}
.org-parties .btn.lien.choisi{color:var(--accent);font-weight:700}
.org-pastille{width:12px;height:12px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.15)}
.org-choix{grid-template-columns:1fr}
@media (max-width:820px){.org-grille{grid-template-columns:1fr}.org-scene{height:min(92vw,58vh)}.org-parties{max-height:none}}

/* ---- Calendrier d'activité (Progression) : une case par jour, de plus en plus rose selon le travail */
.prog-cal{margin-top:18px}
.prog-cal h2 .ic{color:var(--accent)}
.cal-resume{margin:0 0 10px}
.cal-cadre{--c:14px;--g:3px;display:flex;gap:6px;max-width:100%;overflow-x:auto;padding:2px 2px 6px}
.cal-jours{display:grid;grid-template-rows:repeat(7,var(--c));gap:var(--g);margin-top:calc(var(--c) + 6px);font-size:10.5px;line-height:var(--c);color:var(--doux)}
.cal-mois{display:grid;grid-auto-flow:column;grid-auto-columns:var(--c);gap:var(--g);height:calc(var(--c) + 2px);margin-bottom:4px;font-size:10.5px;line-height:var(--c);color:var(--doux);white-space:nowrap}
.cal-mois span{min-width:0;grid-row:1}
.cal-grille{display:grid;grid-template-rows:repeat(7,var(--c));grid-auto-flow:column;grid-auto-columns:var(--c);gap:var(--g)}
.cal-j{display:inline-block;width:var(--c);height:var(--c);padding:0;border:0;border-radius:3px;cursor:pointer}
.cal-j.n0{background:color-mix(in srgb,var(--bord) 80%,var(--surface))}
.cal-j.n1{background:color-mix(in srgb,var(--accent) 25%,var(--surface))}
.cal-j.n2{background:color-mix(in srgb,var(--accent) 45%,var(--surface))}
.cal-j.n3{background:color-mix(in srgb,var(--accent) 70%,var(--surface))}
.cal-j.n4{background:var(--accent)}
.cal-j.auj{box-shadow:0 0 0 1.5px var(--texte)}
.cal-j:focus-visible{outline:2px solid var(--texte);outline-offset:2px}
.cal-legende{--c:12px;display:flex;align-items:center;gap:3px;font-size:12px;margin:4px 0 0}
.cal-legende .cal-j{cursor:default}
.cal-bulle{position:fixed;z-index:40;max-width:260px;background:var(--texte);color:var(--fond);font-size:12.5px;line-height:1.4;padding:6px 9px;border-radius:8px;pointer-events:none}
@media (max-width:480px){.cal-cadre{--c:9px;--g:2px}.cal-jours,.cal-mois{font-size:9.5px}}

/* ---- Astuces (moyens mnémotechniques) */
.intro-onglet{margin:0 0 12px}
.as-form label{font-weight:600;margin:6px 0 4px}
.as-form select{width:100%}
.as-form .ligne.fin{margin-top:10px}
.as-titre{margin:22px 0 6px}
.as-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:8px}
.as-carte{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--bord);border-radius:18px;padding:14px 16px}
.as-carte.propose{background:var(--ia-pale);border-color:var(--ia-bord)}
.as-carte .badge-origine{align-self:flex-start;margin:0}
.as-carte .badge-origine .ic{width:12px;height:12px;margin-right:4px;vertical-align:-2px}
.as-astuce{margin:0;font-family:var(--titre);font-size:18px;line-height:1.4}
.as-expl{margin:0;font-size:14px}
.as-carte .ligne.fin{margin-top:auto}
.as-liste summary{cursor:pointer;color:var(--accent);font-size:13px}
.as-liste p{margin:6px 0 0;font-size:14px}

/* ---- Lexique dans le cours : termes soulignés, définition au survol ou au toucher */
.lx-mot{text-decoration:underline dotted color-mix(in srgb,var(--accent) 75%,transparent);text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:help;border-radius:3px}
.lx-mot:hover,.lx-mot.ouvert{background:var(--accent-pale)}
.lx-mot:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.lx-pop{position:fixed;z-index:45;max-width:min(340px,calc(100vw - 16px));background:var(--surface);color:var(--texte);border:1px solid var(--bord);border-radius:14px;box-shadow:0 6px 24px rgba(59,42,63,.16);padding:10px 14px;font-size:14px;line-height:1.5}
.lx-pop strong{font-family:var(--titre);font-weight:400;font-size:16px}
.lx-pop .en{color:var(--doux);font-style:italic}
.lx-pop p{margin:4px 0 0}

/* ---- Diagnostic des erreurs (carnet d'erreurs) */
.ca-diag{margin:14px 0 18px}
.ca-diag-tete{align-items:flex-start}
.ca-diag h2{margin:0 0 4px}
.ca-diag-tete p{margin:0}
.ca-diag-par{display:flex;align-items:center;gap:6px;margin:14px 0 0;font-size:13px}
.ca-diag-par .ic{color:var(--ia)}
.diag-conf{border-top:1px solid var(--bord);padding:14px 0 4px;margin-top:12px}
.diag-conf h3{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-family:var(--titre);font-weight:400;font-size:18px}
.diag-num{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--ia-pale);color:var(--ia);font:700 14px var(--texte-police)}
.diag-chap{margin:0 0 6px;font-size:13px}
.diag-conf > p{margin:6px 0}
.diag-erreurs summary,.diag-q summary{cursor:pointer;color:var(--accent);font-size:14px}
.diag-erreurs ul{margin:6px 0;font-size:14px;color:var(--doux)}
.diag-conf h4{margin:12px 0 4px;font-size:15px}
.diag-q{margin:0;padding-left:22px}
.diag-q li{margin-bottom:8px}
.diag-q p{margin:0}
.diag-q details p{margin:4px 0 0;color:var(--doux)}
.diag-q details,.diag-erreurs,.as-liste{margin-top:4px}
@media (max-width:640px){.ca-diag-tete{flex-direction:column;align-items:stretch}.ca-diag-tete .btn{width:100%}}

/* ---- Voies métaboliques en schéma fléché */
.vo-form{margin-bottom:16px}
.vo-form label{font-weight:600;margin:0 0 6px}
.vo-ligne{flex-wrap:nowrap}
.vo-ligne input{flex:1;min-width:0}
@media (max-width:560px){.vo-ligne{flex-wrap:wrap}.vo-ligne .btn{width:100%}}
.vo-cartes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.vo-carte{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--bord);border-radius:16px;background:var(--surface);color:var(--texte);font:inherit;text-align:left;cursor:pointer}
.vo-carte:hover{border-color:var(--accent)}
.vo-carte .ic{flex:none;width:24px;height:24px;color:var(--accent)}
.vo-carte span span{display:block;font-size:13px}
.vo-tete{align-items:center;flex-wrap:wrap;margin-top:6px}
.vo-tete h2{margin:0}
.vo-info{font-size:13px}
.vo-info .badge-origine{margin:0 2px 0 0}
.vo-info .badge-origine .ic{width:12px;height:12px;margin-right:4px;vertical-align:-2px}
.vo-consigne{margin:6px 0}
.vo-schema{max-width:420px;margin:10px auto 14px}
.vo-svg{display:block;width:100%;height:auto}
.vo-mol rect{fill:var(--surface);stroke:var(--accent);stroke-width:1.6}
.vo-mol text{fill:var(--texte);font:600 14px var(--texte-police)}
.vo-fleche{fill:none;stroke:var(--doux);stroke-width:1.8}
.vo-pointe{fill:var(--doux)}
.vo-lien{stroke:var(--doux);stroke-width:1.5;stroke-dasharray:3 4}
.vo-enz{fill:var(--accent);font:italic 600 13px var(--texte-police)}
.vo-cof{fill:var(--doux);font:13px var(--texte-police)}
[data-trou]{cursor:pointer}
.vo-mol.trou rect{fill:var(--citron);stroke:var(--citron-fort);stroke-dasharray:5 4}
.vo-enz.trou{fill:var(--attention-txt)}
.vo-mol.trou.juste rect,.vo-mol.trou.orthographe rect{fill:color-mix(in srgb,var(--ok) 14%,var(--surface));stroke:var(--ok);stroke-dasharray:none}
.vo-mol.trou.faux rect,.vo-mol.trou.partiel rect,.vo-mol.trou.vide rect{fill:color-mix(in srgb,var(--ko) 14%,var(--surface));stroke:var(--ko);stroke-dasharray:none}
.vo-enz.trou.juste,.vo-enz.trou.orthographe{fill:var(--ok)}
.vo-enz.trou.faux,.vo-enz.trou.partiel,.vo-enz.trou.vide{fill:var(--ko)}
.vo-trous ol{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.vo-trous label{font-weight:600;margin:0 0 4px}
.vo-n{display:inline-block;min-width:36px;margin-right:4px;padding:0 6px;border:1px dashed var(--citron-fort);border-radius:8px;background:var(--citron);color:var(--texte);text-align:center;font-weight:700}
.vo-verdict{display:block;margin-top:4px;font-size:13.5px}
.vo-verdict.juste,.vo-verdict.orthographe{color:var(--ok)}
.vo-verdict.faux,.vo-verdict.partiel,.vo-verdict.vide{color:var(--ko)}
.vo-trous .ligne.fin{margin-top:12px}

/* ---- Export Anki (onglet Flashcards) */
#cartes-anki{display:flex;width:fit-content;margin-top:8px}
.aide-anki{margin:2px 0 6px;font-size:13px}

/* ---- Page Aujourd'hui : question du jour et « Le savais-tu ? » */
.qdj{margin:4px 0 28px;padding:18px 20px;border:1px solid var(--bord);border-radius:18px;background:var(--surface);box-shadow:var(--ombre)}
.qdj h2,.savais h2{display:flex;align-items:center;margin:0 0 4px;font-size:19px}
.qdj h2 .ic,.savais h2 .ic{color:var(--accent)}
.qdj-chap{margin:0;font-size:13px}
.qdj-q{margin:10px 0 0;font-family:var(--titre);font-size:18px;line-height:1.45}
.qdj-r{margin-top:10px;padding-top:10px;border-top:1px dashed var(--bord)}
.qdj .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.qdj-fin{margin:12px 0 0;color:var(--ok);font-weight:600}
.savais{margin:0 0 28px}
.savais p{margin:0;line-height:1.6}

/* ---- Chat : conversations en onglets (chapitre, matière, tous les cours) */
.conv-barre{display:flex;align-items:flex-end;gap:10px;border-bottom:1px solid var(--bord);margin-bottom:8px}
.conv-onglets{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}
.conv-onglet{flex:none;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:none;background:none;padding:9px 12px;font:inherit;font-size:14px;color:var(--doux);cursor:pointer;border-bottom:2px solid transparent;border-radius:10px 10px 0 0}
.conv-onglet.actif{color:var(--texte);font-weight:600;border-color:var(--accent);background:color-mix(in srgb,var(--rose) 22%,transparent)}
.conv-onglet:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.conv-barre .btn{flex:none;margin-bottom:6px}
.conv-outils{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0 0 6px}
.conv-outils .ic{width:14px;height:14px;margin-right:4px}
.source-ch{padding:1px 6px;border-radius:8px;background:var(--accent-pale);color:var(--accent);font-size:13px;font-weight:600;text-decoration:none;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.source-ch:hover{text-decoration:underline}
.source-ch .ic{width:13px;height:13px;margin-right:3px;vertical-align:-2px}
.feuillet-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.feuillet-tete .ic{width:16px;height:16px;margin-right:5px}
.chat-retour{display:inline-block;margin-bottom:4px}
#vue-chat .fil{max-height:62vh}
@media (max-width:560px){.conv-barre{flex-direction:column;align-items:stretch;gap:4px}.conv-barre .btn{align-self:flex-start}.conv-onglet{max-width:160px}}
.qdj-histo{margin:0 0 28px}
.qdj:not(.cache)+.qdj-histo{margin-top:-14px}
.qdj-histo>summary{color:var(--accent);font-weight:600;font-size:14px}
.qdj-histo ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.qdj-histo li{padding:10px 14px;border:1px solid var(--bord);border-radius:14px;background:var(--surface)}
.qdj-h-tete{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.qdj-h-q{margin:4px 0 0;font-weight:600}
.qdj-histo li details{margin-top:4px}
.qdj-histo li summary{font-size:13.5px;color:var(--accent)}
.qdj-h-r{margin-top:4px;padding-top:4px;border-top:1px dashed var(--bord)}
.qdj-h-chap{display:inline-block;margin-top:4px;font-size:12.5px}
.qdj-etat{padding:0 8px;border-radius:999px;border:1px solid currentColor;font-size:12px;font-weight:700;white-space:nowrap}
.qdj-etat.sue{color:var(--ok)}.qdj-etat.revoir{color:var(--ko)}.qdj-etat.vide{color:var(--doux)}
.sv-telecharger{margin-top:12px;padding-top:10px;border-top:1px dashed var(--bord);flex-wrap:nowrap}
.sv-telecharger .btn{flex:none;text-decoration:none}
@media (max-width:560px){.sv-telecharger{flex-wrap:wrap}}

/* ---- Cours à partir d'exercices */
.titre-ligne .ligne{gap:8px;flex-wrap:wrap}
.ex-form .depot{padding:28px 16px}
.ex-liste{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.ex-liste li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.ex-champs{align-items:flex-start}
.ex-champs label{flex:1;min-width:200px}
.ex-apercu{white-space:pre-wrap;font-size:13px;max-height:220px;overflow:auto;background:var(--fond);border:1px solid var(--bord);border-radius:10px;padding:8px 10px}
#ex-prepare h2{margin-top:0}
.cours-origine{margin:0 0 10px;font-size:14px}
.cours-origine .ic,#o-exercices .badge-origine .ic{width:12px;height:12px;margin-right:4px;vertical-align:-2px}
.exo{padding:14px 0;border-bottom:1px solid var(--bord)}
.exo h3{margin:0 0 6px;font-family:var(--titre);font-weight:400;font-size:18px}
.exo-enonce p{margin:.35em 0}
.exo-notions{margin:8px 0 0;font-size:13px}
.exo-notion{display:inline-block;margin:2px 2px 0 0;padding:0 8px;border-radius:999px;background:var(--accent-pale);color:var(--accent);font-weight:600}
.exo-correction{margin-top:10px}
.exo-correction>summary{display:inline-block;padding:6px 12px;border:1px solid var(--rose-bord);border-radius:10px;color:var(--texte);font-weight:600;background:var(--surface)}
.exo-correction[open]>summary{background:color-mix(in srgb,var(--rose) 30%,var(--surface))}
.exo-corr-texte{margin-top:8px;padding:10px 14px;border-radius:12px;background:var(--fond);border:1px solid var(--bord)}
@media (min-width:900px){#vue-chapitre[data-mode="entrainer"] .onglets:has([data-onglet="exercices"]:not(.cache)){grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ---- Formules : indices, exposants, fractions (mises en forme par app.js) */
sub,sup{font-size:.72em;line-height:0}
.math{font-family:"Cambria Math","STIX Two Math",Cambria,Georgia,serif;font-size:1.05em}
.math i{font-style:italic}
.math .txt{font-style:normal}
.math-bloc{display:block;text-align:center;margin:.5em 0;overflow-x:auto;overflow-y:hidden;padding:.15em 0}
.frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;margin:0 .15em;font-size:.9em;line-height:1.2}
.frac .num{border-bottom:1px solid currentColor;padding:0 .25em .05em}
.frac .den{padding:.05em .25em 0}
.rad{border-top:1px solid currentColor;padding:1px 1px 0}

/* ---- Formulaire (mêmes blocs que le lexique) */
.fo-formule{margin:4px 0 2px;font-size:17px;overflow-x:auto}
.fo-variables{margin:4px 0 0;padding-left:1.2em;font-size:14px}
.fo-variables li{margin:1px 0}
.fo-utilisation{margin:4px 0 0;font-size:14px}
.fo-terme .badge-origine{margin:0 0 0 6px;vertical-align:2px}
.fo-ajout h2{margin-top:0}
.fo-champs{align-items:flex-start}
.fo-champs label{flex:1;min-width:200px}
.fo-champs select{width:100%}
.fo-aide{margin:-2px 0 4px;font-size:13px}
.fo-apercu{min-height:1.4em;margin:0 0 6px;font-size:17px}