/* ==========================================================================
   style.css — apparence commune des pages d'exercices et des sommaires.
   ========================================================================== */
:root{
  --page:#FFFFFF; --paper:#F5F8FC; --surface:#FFFFFF;
  color-scheme:light;
  --ink:#1D3275; --text:#1F2533; --muted:#556079; --rule:#9AA7BD;
  --ok:#1E7346; --ok-bg:#E5F3EB; --ko:#B0261D; --ko-bg:#FBE9E7; --focus:#D99A00;
  --math:"STIX Two Text","Cambria Math","Times New Roman",serif;
  --ui:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#111827; --paper:#111827; --surface:#172033;
    color-scheme:dark;
    --ink:#9DB6FF; --text:#E6EAF2; --muted:#A3AEC4; --rule:#4A5670;
    --ok:#6FD39C; --ok-bg:#15392A; --ko:#FF8A80; --ko-bg:#3D1C1A; --focus:#FFC83D;
  }
}
:root[data-theme="dark"]{
  --page:#111827; --paper:#111827; --surface:#172033;
  color-scheme:dark;
  --ink:#9DB6FF; --text:#E6EAF2; --muted:#A3AEC4; --rule:#4A5670;
  --ok:#6FD39C; --ok-bg:#15392A; --ko:#FF8A80; --ko-bg:#3D1C1A; --focus:#FFC83D;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0; font-family:var(--ui); color:var(--text); line-height:1.55; font-size:1.0625rem;
  background-color:var(--page);
}
.m{font-family:var(--math)}
.wrap{max-width:860px; margin:0 auto; padding:0 1.25rem}

/* En-tête : le schéma des ensembles est l'élément fort de la page */
.topbar{display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:.6rem; padding-top:.8rem}
.back-link{margin-right:auto; font-size:.95rem; font-weight:700; color:var(--ink); text-decoration:none; padding:.3rem .2rem}
.back-link:hover{text-decoration:underline; text-underline-offset:.2em}
.back-link:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:3px}

.theme-btn{font:inherit; font-size:.85rem; color:var(--ink); background:var(--surface); border:1.5px solid var(--rule); border-radius:999px; padding:.3rem .85rem; cursor:pointer}
.theme-btn:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
header{padding:1rem 0 1.5rem; display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:center}
@media (min-width:760px){ header{grid-template-columns:1.1fr 1fr} }
h1{font-family:var(--math); font-weight:600; font-size:clamp(1.9rem,4.5vw,2.6rem); line-height:1.12; margin:0 0 .6rem; color:var(--ink)}
.lede{margin:0; color:var(--muted); max-width:38ch}
.lede strong{color:var(--text)}
.diagram{width:100%; max-width:420px; justify-self:center}
.diagram ellipse{fill:none; stroke:var(--ink); stroke-width:2}
.dlab{height:100%; display:flex; align-items:center; color:var(--text); line-height:1; white-space:nowrap}
.dlab.set{color:var(--ink)}
.dlab .katex{font-size:1em}

/* Navigation */
nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--page); border-bottom:2px solid var(--ink)}
/* Onglets sur plusieurs lignes si nécessaire : tous restent visibles, sans défilement horizontal */
.tabs{display:flex; flex-wrap:wrap; gap:.4rem; padding:.6rem 0}
.tab{
  flex:0 0 auto; font:inherit; font-size:.95rem; color:var(--text); background:var(--surface);
  border:1.5px solid var(--rule); border-radius:999px;
  padding:.4rem .9rem; cursor:pointer; white-space:nowrap;
}
.tab:hover{border-color:var(--ink)}
.tab:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.tab[aria-selected="true"]{color:var(--surface); background:var(--ink); border-color:var(--ink); font-weight:700}
.tab .count{font-size:.8rem; color:var(--muted); margin-left:.35rem; font-weight:400}
.tab[aria-selected="true"] .count{color:var(--surface)}
/* Sur téléphone, la barre d'onglets (plusieurs lignes) ne reste pas collée en haut : elle prendrait trop de place */
@media (max-width: 700px){ nav{position:static} }
.scorebar{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.5rem 0; font-size:.9rem; color:var(--muted)}
.scorebar b{color:var(--text)}

/* Section d'exercices */
main{padding:1.75rem 0 4rem}
h2{font-family:var(--math); font-weight:600; font-size:1.6rem; color:var(--ink); margin:0 0 .75rem}
.rappel{background:var(--surface); border-left:4px solid var(--ink); padding:.9rem 1.1rem; margin:0 0 1.5rem; border-radius:0 6px 6px 0}
.rappel p{margin:.35rem 0}
.actions{display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:.6rem 1rem; margin-bottom:.5rem}

ol.questions{list-style:none; margin:0; padding:0; counter-reset:q; background:var(--surface); border:1px solid var(--rule); border-radius:6px}
li.q{counter-increment:q; padding:1.15rem 1.15rem 1.15rem 3.1rem; position:relative; border-top:1px dotted var(--rule)}
li.q:first-child{border-top:none}
li.q::before{content:counter(q); position:absolute; left:1.1rem; top:1.15rem; font-family:var(--math); font-weight:600; color:var(--ink); font-size:1.05rem}
.prompt{margin:0 0 .75rem}
.prompt .stmt{display:block; font-size:1.25rem; margin-top:.35rem; color:var(--ink)}

.opts{border:none; margin:0 0 .75rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.opts.col{flex-direction:column; align-items:stretch}
.opt{position:relative}
.opt input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.opt > span{
  display:block; padding:.45rem .9rem; border:1.5px solid var(--rule); border-radius:6px;
  background:var(--paper); cursor:pointer; min-width:3rem; text-align:center;
}
.opts.col .opt > span{text-align:left}
.opt.set > span{font-family:var(--math); font-size:1.3rem; min-width:3.4rem}
.opt input:checked + span{border-color:var(--ink); background:var(--ink); color:var(--surface)}
.opt input:focus-visible + span{outline:3px solid var(--focus); outline-offset:2px}
.opt input:disabled{cursor:default}
.opt input:disabled + span{cursor:default}
.opt.good > span, .opt.good input:checked + span{border-color:var(--ok); background:var(--ok-bg); color:var(--ok); font-weight:700}
.opt.bad > span, .opt.bad input:checked + span{border-color:var(--ko); background:var(--ko-bg); color:var(--ko)}
.opt.bad > span{position:relative}
.opt.bad > span::after{content:""; position:absolute; left:12%; right:12%; top:50%; border-top:2px solid currentColor; transform:rotate(-14deg)}
.opts.col .opt.bad > span::after{left:2%; right:2%; transform:rotate(-1.5deg)}
.opt.missed > span{border-style:dashed; border-color:var(--ok); color:var(--ok)}
.opt > span{height:100%; display:flex; align-items:center; justify-content:center}
.opts.col .opt > span{justify-content:flex-start}


button.check, button.ghost{
  font:inherit; font-weight:700; cursor:pointer; border-radius:6px; padding:.5rem 1.1rem;
}
button.check{background:var(--ink); color:var(--surface); border:1.5px solid var(--ink)}
button.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--ink)}
button:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
button:disabled{opacity:.45; cursor:default}

.fb{margin-top:.8rem; padding:.7rem .9rem; border-radius:0 6px 6px 0; border-left:4px solid}
.fb.ok{border-color:var(--ok); background:var(--ok-bg)}
.fb.ko{border-color:var(--ko); background:var(--ko-bg)}
.fb.sol{border-color:var(--ink); background:var(--surface)}
.fb.sol .verdict{color:var(--ink)}
.fb.warn{border-color:var(--focus); background:transparent}
.fb .verdict{font-weight:700}
.fb.ok .verdict{color:var(--ok)}
.fb.ko .verdict{color:var(--ko)}

/* Formules LaTeX (KaTeX) */
.katex{font-size:1.12em}
.prompt .katex{font-size:1.22em; color:var(--ink)}
.opt .katex{font-size:1.18em}
.fb .katex{font-size:1.06em}
.rappel .katex{font-size:1.08em}

footer{color:var(--muted); font-size:.85rem; padding-bottom:2rem}
@media (prefers-reduced-motion: no-preference){
  .fb{animation:reveal .18s ease-out}
  @keyframes reveal{from{opacity:0; transform:translateY(-3px)} to{opacity:1; transform:none}}
}

/* Remarques */
.rm{margin-top:.8rem}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* Commentaire de l'onglet : texte gras et rouge sur fond blanc (dans les deux thèmes) */
.q-origin{margin:0 0 .4rem; font-size:.82rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
ol.questions:empty{display:none}
.rm-tab{display:flex; flex-wrap:wrap; align-items:flex-start; gap:.7rem; margin:0 0 1.5rem; padding:.9rem 1rem; background:#FFFFFF; border:2px solid #B0261D; border-radius:8px}
.rm-tab .rm-title{flex:0 0 auto; margin:.15rem 0 0; color:#B0261D}
.warn-ico{display:block; width:1.9rem; height:1.9rem}
.rm.rm-tab textarea{flex:1 1 12rem; width:auto}
.rm-tab .rm-note{flex-basis:100%}
.rm.rm-tab textarea{font-size:1.05rem; font-weight:700; color:#B0261D; background:#FFFFFF; min-height:3.2rem; border:1.5px solid #B0261D; color-scheme:light}
.rm-tab .rm-note{color:#B0261D}
.rm.rm-tab textarea:focus-visible{outline-color:#B0261D}
.tab-cm{display:inline-block; vertical-align:-.15em; margin-left:.35rem; color:#B0261D}
.tab-cm .warn-ico{width:1.05em; height:1.05em}
.rm-title{display:block; margin:0 0 .3rem; font-size:.9rem; font-weight:700; color:var(--ink)}
.rm textarea{display:block; width:100%; font:inherit; font-size:.95rem; line-height:1.45; color:var(--text); background:var(--surface); border:1.5px solid var(--rule); border-radius:6px; padding:.45rem .6rem; resize:none; overflow:hidden}
.rm textarea:focus-visible{outline:3px solid var(--focus); outline-offset:1px}
.rm-note{margin:.35rem 0 0; font-size:.85rem; color:var(--ko)}
.rm-note:empty{display:none}
.jsonbox{padding-bottom:1.5rem}
.jsonbox summary{cursor:pointer; color:var(--ink); font-weight:700; padding:.3rem 0}
.jsonbox summary:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.jsonbox p{color:var(--muted); font-size:.9rem; max-width:70ch}
.jsonbox pre{max-height:24rem; overflow:auto; background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:.8rem; font-size:.8rem; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere}
.jsonbox .ghost{margin:.2rem 0 .6rem}
.jsonbox code{font-size:.85em}

/* Calcul en escalier de l'en-tête */
.stairs{background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:1rem 1.2rem; font-family:var(--math); font-size:1.3rem; justify-self:center; width:100%; max-width:430px}
.stairs .row{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.2rem 0}
.stairs .row + .row{border-top:1px dotted var(--rule)}
.stairs .row:nth-child(2){padding-left:.8rem}
.stairs .row:nth-child(3){padding-left:1.6rem}
.stairs .row:nth-child(4){padding-left:2.4rem}
.stairs .row:nth-child(5){padding-left:3.2rem}
.stairs .underline{color:var(--ink)}
.stairs .underline-line{border-bottom-width:.1em !important}
.stairs small{font-family:var(--ui); font-size:.8rem; color:var(--muted); white-space:nowrap}
.stairs .res{color:var(--ink); font-weight:600}

/* Formule de l'en-tête */
.hero-formula{background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:1.1rem 1.2rem .9rem; color:var(--ink); justify-self:center; width:100%; max-width:430px; overflow-x:auto}
.hero-formula .katex-display{margin:.2rem 0 .6rem}
.hero-formula .katex{font-size:1.3em}
.hero-formula p{margin:0; font-size:.9rem; color:var(--muted); text-align:center}

/* Droites graduées (intervalles) */
.nl{display:block; max-width:100%; height:auto}
.opt > span{--bg:var(--paper)}
.opt input:checked + span{--bg:var(--ink)}
.opt.good > span, .opt.good input:checked + span{--bg:var(--ok-bg)}
.opt.bad > span, .opt.bad input:checked + span{--bg:var(--ko-bg)}
.opt.bad > span:has(svg.nl)::after, .opts.col .opt.bad > span:has(svg.nl)::after{left:14px; right:auto; width:250px; transform:rotate(-8deg)}

/* Identifiant de l'élève et déconnexion */
.session{display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--muted)}
.session[hidden]{display:none}
.session .id-num{font-family:var(--math); font-size:1.05rem; font-weight:600; color:var(--text); letter-spacing:.06em}
.session .logout{font:inherit; font-size:.85rem; color:var(--ko); background:var(--surface); border:1.5px solid var(--rule); border-radius:999px; padding:.3rem .85rem; cursor:pointer}
.session .logout:hover{border-color:var(--ko)}
.session .logout:focus-visible{outline:3px solid var(--focus); outline-offset:2px}

/* ---------- Sommaires (liste des chapitres d'une matière) et page de départ ---------- */
.sommaire main{padding:1rem 0 3rem}
.chapitres{list-style:none; margin:1.6rem 0 1rem; padding:0; background:var(--surface); border:1px solid var(--rule); border-radius:8px}
.chapitres li{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; padding:.9rem 1.1rem; border-top:1px dotted var(--rule)}
.chapitres li:first-child{border-top:none}
.chapitres .chap{display:flex; align-items:baseline; gap:.8rem; flex:1 1 18rem; color:var(--ink); text-decoration:none; font-size:1.1rem; font-weight:700}
.chapitres .chap:hover .titre{text-decoration:underline; text-underline-offset:.2em}
.chapitres .chap:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:3px}
.chapitres .num{font-family:var(--math); font-size:1.3rem; color:var(--muted); min-width:2ch}
.chapitres .stats{display:flex; align-items:center; gap:.8rem; font-size:.9rem}
.chapitres .stats .warn-ico{display:block; width:1.3rem; height:1.3rem; color:var(--ko)}
.s-ok{color:var(--ok); font-weight:700}
.s-ko{color:var(--ko); font-weight:700}
.chapitres .doublon{color:var(--ko); font-weight:700; font-size:.85rem}
.total{margin:0; color:var(--muted); font-size:.95rem}
.total:empty, .mode:empty{display:none}
.mode{color:var(--muted); font-size:.85rem}
/* Bandeau de danger (texte rouge gras sur fond blanc) */
.danger{display:flex; gap:.8rem; align-items:flex-start; margin:1.6rem 0 0; padding:1rem 1.1rem; background:#FFFFFF; color:#B0261D; border:3px solid #B0261D; border-radius:8px; font-weight:700}
.danger[hidden]{display:none}
.danger .warn-ico{flex:0 0 auto; width:2rem; height:2rem; color:#B0261D}
.danger p{margin:0 0 .4rem}
.danger ul{margin:.2rem 0 0; padding-left:1.2rem}
.danger li{margin:.15rem 0}

/* 5 dernières tentatives : points à droite de l'exercice (vert réussie, rouge ratée, la plus récente plus grande) */
.essais{position:absolute; top:1.2rem; right:1.15rem; display:flex; align-items:center; gap:5px}
.essais[hidden]{display:none}
.essais span{display:block; width:10px; height:10px; border-radius:50%; background:var(--ok)}
.essais span.ko{background:var(--ko)}
.essais span.dernier{width:18px; height:18px}
li.q.a-essais .prompt{padding-right:6rem}
#alerte-serveur{color:var(--ko); font-weight:700}

/* ---------- Explication de la mauvaise réponse ---------- */
.fb .pourquoi{display:inline-block; margin:.15rem 0 .2rem}

/* ---------- Suggestion « acquis » après 3 réussites de suite ---------- */

/* ---------- Clavier : question active et aide ---------- */
li.q.actif{box-shadow:inset 4px 0 0 var(--ink)}
li.q:focus{outline:none}
li.q:focus-visible{outline:3px solid var(--focus); outline-offset:-3px}
.clavier{margin:.2rem 0 .6rem; font-size:.8rem; color:var(--muted)}
.clavier kbd{font-family:var(--ui); font-size:.75rem; padding:.05rem .35rem; border:1px solid var(--rule); border-bottom-width:2px; border-radius:4px; background:var(--surface)}
@media (hover: none){ .clavier{display:none} }

/* ---------- QR code (continuer sur un autre appareil) ---------- */
.session .qr-btn{font:inherit; font-size:.85rem; color:var(--ink); background:var(--surface); border:1.5px solid var(--rule); border-radius:999px; padding:.3rem .85rem; cursor:pointer}
.session .qr-btn:hover{border-color:var(--ink)}
.session .qr-btn:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.qr-dialog{max-width:min(92vw, 380px); border:1px solid var(--rule); border-radius:10px; padding:1.2rem 1.3rem; background:var(--surface); color:var(--text); text-align:center}
.qr-dialog::backdrop{background:rgba(0,0,0,.45)}
.qr-dialog h2{font-size:1.15rem; margin:0 0 .6rem}
.qr-img{background:#FFFFFF; padding:.6rem; border-radius:6px; margin:0 auto .6rem; width:min(100%, 260px)}
.qr-img svg{display:block; width:100%; height:auto}
.qr-url{font-size:.8rem; color:var(--muted); word-break:break-all}

/* ---------- Sommaire : progression ---------- */
.s-prog{display:inline-flex; align-items:center; gap:.4rem; color:var(--muted); font-weight:700}
.s-prog .barre{display:inline-block; width:4.5rem; height:.5rem; border-radius:999px; background:var(--ko-bg); overflow:hidden}
.s-prog .barre > span{display:block; height:100%; background:var(--ok)}

/* ---------- Fiche à imprimer ---------- */
#fiche{display:none}
@media print{
  body > *:not(#fiche){display:none !important}
  #fiche{display:block; color:#000; font-family:var(--ui); font-size:11pt}
  #fiche .fiche-tete h1{font-size:16pt; margin:.2rem 0 .4rem; color:#000}
  #fiche .fiche-tete p{margin:0 0 .4rem}
  #fiche ol.fiche-q > li{break-inside:avoid; margin:0 0 1rem}
  #fiche .fiche-opts{list-style:none; padding:0; margin:.4rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem 1.6rem}
  #fiche .fiche-opts .lettre{font-weight:700; margin-right:.35rem}
  #fiche .fiche-lignes{height:3.2rem; border-bottom:1px dotted #888}
  #fiche .fiche-sol{break-before:page}
  #fiche .fiche-sol li{margin:0 0 .6rem; break-inside:avoid}
  #fiche svg.nl{max-width:300px}
}

/* ----- Tentatives : « Vérifier », « Voir la réponse » et le nombre de tentatives restantes ----- */
.q-actions{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .7rem; margin-top:.6rem}
.tentatives{font-size:.9rem; color:var(--muted)}
.tentatives:empty{display:none}