/* Automatismes — séries de pratique (première spé)
   Feuille commune à toutes les fiches cm_NN_1.html : ne rien copier dans les fiches.
   Issue du gabarit modele_pratique_premiere_spe.html, sans changement de règle. */
:root{
  --paper:#F1F3FB;
  --card:#FFFFFF;
  --ink:#115670;
  --ink-soft:#4C7086;
  --line:#D6E4EC;
  --accent:#115670;
  --accent-soft:#E4EEF3;
  --fig:#3E7CA0;
  --gold:#C9A961;
  --tool:#9A6F1C;
  --blue:#145E8C;    --blue-bg:#E4F1FA;
  --green:#146B38;   --green-bg:#E6F9E2;
  --red:#B33A28;     --red-bg:#FBEAE5;
  --radius:18px;
  --shadow:0 1px 2px rgba(17,86,112,.08), 0 18px 44px -22px rgba(17,86,112,.45);
  --charter:"Bitstream Charter", Charter, "XCharter", "MathACoeur Serif", "Charis SIL", "Sitka Text", Cambria, Georgia, serif;
  --charter-math:"Bitstream Charter", Charter, "XCharter", "MathACoeur Serif", "Charis SIL", KaTeX_Main, "Sitka Text", Cambria, Georgia, serif;
  --display:var(--charter);
  --body:var(--charter);
  --fs:1;              /* facteur d'agrandissement piloté par l'ajustement automatique */
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--body);
  color:var(--ink);
  background:
    radial-gradient(1400px 620px at 100% -12%, #E3EAF7 0%, transparent 60%),
    var(--paper);
  -webkit-font-smoothing:antialiased;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  overflow:hidden;
  padding:clamp(10px,1.6vh,22px) clamp(18px,2.6vw,46px);
}
.wrap{
  width:100%;max-width:1660px;margin:0 auto;
  flex:1;display:flex;flex-direction:column;min-height:0;
}

/* ==========================================================
   EN-TÊTE UNIQUE : titre à gauche · série au centre · chrono
   et lien Menu à droite. Plus de barre interne dans le quiz.
   ========================================================== */
header.brand{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(10px,1.4vw,22px);flex:none;margin-bottom:clamp(8px,1.2vh,16px);
}
.brand .kicker{
  justify-self:start;margin:0;line-height:normal;
  font-family:var(--body);font-weight:600;font-size:clamp(.72rem,.92vw,.9rem);letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap;
  border:1.5px solid var(--accent);border-left:3px solid var(--gold);border-radius:6px;padding:5px 11px;
}
.brand .hmid{
  justify-self:center;text-align:center;
  font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,1.7vw,1.6rem);
  color:var(--ink);white-space:nowrap;
}
.brand .hmid .no{color:var(--accent);}
.brand .hmid .mode{color:var(--ink-soft);font-weight:400;}
.brand .hend{justify-self:end;display:flex;align-items:center;gap:clamp(8px,.8vw,14px);}
.timer{
  font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.35vw,1.3rem);color:var(--accent);
  display:inline-flex;align-items:baseline;gap:3px;padding:4px clamp(11px,.9vw,15px);
  border-radius:999px;background:var(--accent-soft);min-width:60px;justify-content:center;
  transition:color .2s, background .2s;
}
.timer small{font-size:.62em;font-weight:600;}
.timer.done{color:var(--ink-soft);background:transparent;border:1.5px solid var(--line);}
.btn-quit{
  font-family:var(--body);font-size:clamp(.82rem,.95vw,.98rem);font-weight:600;color:var(--ink-soft);
  background:transparent;border:1.5px solid var(--line);border-radius:9px;padding:8px 14px;cursor:pointer;
  white-space:nowrap;
}
.btn-quit:hover{color:var(--ink);border-color:var(--ink-soft);}
[hidden]{display:none !important;}

/* ---- Panneau : remplit l'écran, ne défile jamais en grand écran ---- */
.panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:clamp(16px,2.4vh,34px) clamp(20px,2.8vw,44px);
  flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
}
.hidden{display:none !important;}
#quiz:focus{outline:none;}  /* focus posé par le script à chaque question, pas un arrêt du clavier */
/* Verdict lu par les lecteurs d'écran, invisible à l'écran (automatismes.js, annoncer). */
.annonce{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}

/* ---- Menu ---- */
#menu{justify-content:safe center;}
.mfit{width:100%;}
.menu-lead{
  font-size:calc(var(--fs)*clamp(1.15rem,1.7vw,1.5rem));color:var(--ink-soft);line-height:1.5;
  margin:0 auto calc(var(--fs)*clamp(20px,3vh,34px));max-width:56ch;text-align:center;
}
.serie-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,340px));
  gap:calc(var(--fs)*clamp(16px,1.6vw,26px));justify-content:center;width:100%;
}
@media(max-width:560px){.serie-grid{grid-template-columns:1fr;}}
.serie-card{
  text-align:left;cursor:pointer;font-family:var(--body);
  background:var(--card);border:1.5px solid var(--line);border-radius:16px;
  padding:calc(var(--fs)*clamp(18px,2vw,26px)) calc(var(--fs)*clamp(18px,1.8vw,24px));
  transition:transform .15s, border-color .15s, box-shadow .15s;
  display:flex;flex-direction:column;gap:8px;color:inherit;
}
.serie-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 32px -20px rgba(17,86,112,.55);}
.serie-card:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.serie-card .num{
  font-family:var(--display);font-weight:800;font-size:calc(var(--fs)*clamp(2rem,2.9vw,2.7rem));
  line-height:1;color:var(--accent);display:flex;align-items:baseline;gap:10px;
}
.serie-card .num small{font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.serie-card .theme{color:var(--ink-soft);font-size:calc(var(--fs)*clamp(1rem,1.2vw,1.18rem));line-height:1.4;}
.serie-card .count{margin-top:4px;font-size:calc(var(--fs)*1rem);font-weight:600;color:var(--accent);}

/* ---- Page de garde d'une série : numéro, thème, inventaire (SKILLS),
   nombre de questions et durée indicative, bouton « Commencer ». ---- */
.slide.garde{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:calc(var(--fs)*clamp(14px,2.4vh,30px));}
.garde .g-num{font-family:var(--display);font-weight:800;line-height:1;color:var(--accent);
  font-size:calc(var(--fs)*clamp(2.4rem,4.4vw,4.2rem));}
.garde .g-num small{display:block;margin-bottom:6px;font-size:.36em;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.garde .g-theme{margin:0;max-width:32ch;line-height:1.3;font-weight:600;color:var(--ink);
  font-size:calc(var(--fs)*clamp(1.3rem,2.2vw,2.3rem));}
.garde .g-bloc{width:min(100%,64ch);display:flex;flex-direction:column;
  gap:calc(var(--fs)*clamp(7px,1vh,12px));text-align:left;}
.garde .g-lbl{font-family:var(--display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tool);font-size:calc(var(--fs)*clamp(.78rem,1vw,.95rem));}
.garde .g-inv{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:calc(var(--fs)*clamp(7px,1vh,12px));}
.garde .g-inv li{background:#fbfcfe;border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:12px;line-height:1.35;font-size:calc(var(--fs)*clamp(1.05rem,1.6vw,1.6rem));
  padding:calc(var(--fs)*clamp(9px,1.3vh,14px)) calc(var(--fs)*clamp(13px,1.2vw,19px));}
.garde .g-meta{margin:0;color:var(--ink-soft);font-size:calc(var(--fs)*clamp(1rem,1.3vw,1.3rem));}
.garde .nav{justify-content:center;}

/* ---- Progression ---- */
.progress{display:flex;gap:8px;margin-bottom:clamp(12px,1.8vh,22px);flex:none;}
.progress .seg{
  flex:1;height:clamp(9px,1.2vh,13px);border-radius:6px;background:var(--accent-soft);
  border:1px solid var(--line);transition:background .2s,border-color .2s;
}
.progress .seg.current{border-color:var(--accent);background:#fff;box-shadow:inset 0 0 0 2px var(--accent);}
.progress .seg.ok{background:var(--green);border-color:var(--green);}
.progress .seg.no{background:var(--red);border-color:var(--red);}
.progress .seg.done{background:var(--accent);border-color:var(--accent);}
/* L'ajustement automatique agrandit le contenu jusqu'à remplir exactement
   la zone : sans ce retrait, une formule haute vient toucher la barre de
   progression. Le retrait est déduit de la hauteur disponible (fitBox
   retranche le rembourrage), donc il ne provoque aucun débordement. */
#stage{flex:1;min-height:0;display:flex;align-items:center;overflow:hidden;
  padding:10px 0;}

/* ---- Diapositive ---- */
.slide{animation:fade .3s ease both;width:100%;height:auto;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ==========================================================
   BLOC DE MISE EN PAGE — propre à la variante
   ========================================================== */

/* VARIANTE C — « Énoncé en bandeau »
   L'énoncé (et sa figure à côté) occupe toute la largeur en haut ;
   les quatre propositions s'étalent en dessous sur deux colonnes
   pleine largeur. C'est la variante qui donne la plus grosse police
   aux propositions. */
.qgrid{
  display:grid;width:100%;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"left" "right" "foot";
  grid-template-rows:auto auto auto;
  gap:calc(var(--fs)*clamp(14px,2.4vh,30px));
  align-items:center;
}
.q-left{
  grid-area:left;min-width:0;
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:calc(var(--fs)*clamp(20px,3vw,52px));text-align:center;
}
.q-left .qtext{flex:0 1 auto;max-width:26ch;}
.q-left:not(:has(.fig-wrap)) .qtext{max-width:40ch;}
.fig-wrap{margin-top:0;flex:0 0 auto;display:flex;justify-content:center;}
/* Énoncé + tableau : empilés et centrés, comme sur l'écran d'explication. */
.q-left.stack{flex-direction:column;align-items:center;
              gap:calc(var(--fs)*clamp(11px,1.7vh,22px));}
.q-left.stack .qtext{max-width:46ch;}
.q-left.stack .fig-wrap{width:100%;}
.q-right{grid-area:right;min-width:0;}
svg.fig{width:calc(var(--fs)*min(400px,29vw));height:auto;display:block;}
.slide.expl .q-left{flex-direction:column;text-align:left;align-items:stretch;
                    gap:calc(var(--fs)*clamp(7px,1.1vh,13px));}
/* Sur l'écran d'explication, la figure (SVG ou tableau) est centrée
   dans la colonne, alors que le texte reste aligné à gauche. */
.slide.expl .fig-wrap{display:flex;justify-content:center;width:100%;}
.slide.expl .fig-wrap > *{margin-left:auto;margin-right:auto;}
.slide.expl .q-left .qtext{max-width:none;}
.slide.expl svg.fig{width:calc(var(--fs)*min(300px,22vw));}


.qtext{font-size:calc(var(--fs)*clamp(1.6rem,2.9vw,3rem));font-weight:500;line-height:1.28;margin:0;}
.fig-wrap{margin-top:calc(var(--fs)*clamp(12px,2.2vh,28px));}
.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:calc(var(--fs)*clamp(9px,1.2vh,15px)) calc(var(--fs)*clamp(10px,1vw,16px));}
.options.long{grid-template-columns:minmax(0,1fr);}
@media(max-width:760px),(pointer:coarse) and (max-width:1400px){.options{grid-template-columns:1fr;}}
.opt{
  font-family:var(--body);font-size:calc(var(--fs)*clamp(1.3rem,2.1vw,2.3rem));text-align:left;
  cursor:pointer;color:var(--ink);
  background:var(--card);border:2px solid var(--line);border-radius:14px;
  padding:calc(var(--fs)*clamp(11px,1.6vh,19px)) calc(var(--fs)*clamp(14px,1.2vw,22px));
  display:flex;align-items:center;gap:calc(var(--fs)*14px);
  transition:border-color .15s, background .15s;min-width:0;
}
.opt:hover:not(:disabled){border-color:var(--accent);}
.opt:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.opt:disabled{cursor:default;}
.opt .key{
  flex:none;width:calc(var(--fs)*clamp(32px,2.6vw,42px));height:calc(var(--fs)*clamp(32px,2.6vw,42px));
  border-radius:10px;display:grid;place-items:center;
  font-weight:700;font-size:calc(var(--fs)*clamp(1.05rem,1.4vw,1.4rem));background:var(--accent-soft);color:var(--accent);
}
.opt.correct{border-color:var(--green);background:var(--green-bg);}
.opt.correct .key{background:var(--green);color:#fff;}
.opt.wrong{border-color:var(--red);background:var(--red-bg);}
.opt.wrong .key{background:var(--red);color:#fff;}
.opt .txt{min-width:0;overflow-wrap:anywhere;}
.opt .mark{margin-left:auto;font-weight:700;font-size:1.25em;padding-left:6px;}
.opt.correct .mark{color:var(--green);}
.opt.wrong .mark{color:var(--red);}

/* ---- Réponse saisie (questions portant un champ rep) ----
   Le champ n'est pas un <input> : aucun clavier système ne s'ouvre sur
   téléphone. La saisie passe par le pavé ou par le clavier physique. */
.saisie{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:calc(var(--fs)*clamp(16px,2.4vw,40px));}
.champ-bloc{display:flex;flex-direction:column;align-items:stretch;
  gap:calc(var(--fs)*clamp(10px,1.5vh,18px));}
.champ-row{display:flex;align-items:center;justify-content:center;gap:calc(var(--fs)*12px);}
.champ{
  font-family:var(--body);font-weight:600;color:var(--ink);text-align:center;white-space:nowrap;
  font-size:calc(var(--fs)*clamp(1.6rem,2.7vw,2.9rem));line-height:1.2;font-variant-numeric:tabular-nums;
  min-width:6ch;background:var(--card);border:2px solid var(--accent);border-radius:14px;
  padding:calc(var(--fs)*clamp(10px,1.4vh,16px)) calc(var(--fs)*clamp(14px,1.4vw,22px));
}
/* Le curseur est celui de l'éditeur structuré (.mcaret), pour les nombres
   comme pour les expressions : pas de second curseur dessiné en CSS. */
@keyframes caret{50%{opacity:0;}}
.champ.expr{font-weight:400;min-width:8ch;cursor:text;
  font-size:calc(var(--fs)*clamp(1.4rem,2.3vw,2.5rem));
  padding:calc(var(--fs)*clamp(6px,1vh,12px)) calc(var(--fs)*clamp(14px,1.4vw,22px));}
.champ .mcaret{color:var(--accent);animation:caret 1s steps(1) infinite;}
.champ .mph{color:#A9BFCC;}
.champ.fige{border-color:var(--line);}
.champ.correct{border-color:var(--green);background:var(--green-bg);}
.champ.wrong{border-color:var(--red);background:var(--red-bg);}
.unite,.lhs{font-size:calc(var(--fs)*clamp(1.6rem,2.7vw,2.9rem));font-weight:600;color:var(--ink);white-space:nowrap;}
.lhs{font-weight:400;font-size:calc(var(--fs)*clamp(1.4rem,2.3vw,2.5rem));}
.pad-wrap{display:flex;flex-direction:column;gap:calc(var(--fs)*clamp(6px,.8vh,10px));}
.pad{display:grid;grid-template-columns:repeat(4,calc(var(--fs)*clamp(48px,4.4vw,66px)));
  gap:calc(var(--fs)*clamp(6px,.8vh,10px));}
.pad.pad5{grid-template-columns:repeat(5,calc(var(--fs)*clamp(46px,4vw,62px)));}
.pad-lettres{display:flex;gap:calc(var(--fs)*clamp(6px,.8vh,10px));}
.pad button,.pad-lettres button{
  font-family:var(--body);font-weight:600;color:var(--ink);cursor:pointer;
  font-size:calc(var(--fs)*clamp(1.15rem,1.7vw,1.7rem));height:calc(var(--fs)*clamp(42px,5.4vh,60px));
  background:var(--card);border:2px solid var(--line);border-radius:12px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0;
}
.pad-lettres button{flex:1;border-color:var(--accent);font-weight:400;}
.pad button:hover:not(:disabled),.pad-lettres button:hover:not(:disabled){border-color:var(--accent);}
.pad button:focus-visible,.pad-lettres button:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.pad button.fn,.pad-lettres button.fn{background:var(--accent-soft);color:var(--accent);}
.pad button.frac .formule{font-size:1.1em;}
.pad button.w2{grid-column:span 2;}
.pad button:disabled,.pad-lettres button:disabled{cursor:default;opacity:.5;}
.btn-next:disabled{opacity:.45;cursor:default;transform:none;filter:none;}

/* ---- Pied : « Je ne sais pas » puis « Réponse » à sa droite ---- */
.q-foot{grid-area:foot;display:flex;gap:calc(var(--fs)*clamp(14px,1.4vw,24px));align-items:center;}
.feedback{flex:1;display:flex;gap:calc(var(--fs)*clamp(10px,1vw,16px));flex-wrap:wrap;min-width:0;}
.fbox{
  flex:1 1 280px;border-radius:14px;
  padding:calc(var(--fs)*clamp(11px,1.5vh,18px)) calc(var(--fs)*clamp(14px,1.2vw,22px));
  font-size:calc(var(--fs)*clamp(1.1rem,1.6vw,1.7rem));line-height:1.35;border:1.5px solid;
}
.fbox .lbl{font-family:var(--display);font-weight:700;font-size:calc(var(--fs)*clamp(.78rem,1vw,.95rem));letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:4px;}
.fbox.good{background:var(--green-bg);border-color:#C3E6D0;color:var(--ink);}
.fbox.good .lbl{color:var(--green);}
.fbox.bad{background:var(--red-bg);border-color:#F0C7BC;color:var(--ink);}
.fbox.bad .lbl{color:var(--red);}
.fbox.method{background:var(--blue-bg);border-color:#C7E0F0;color:var(--ink);}
.fbox.method .lbl{color:var(--blue);}
.nav{flex:none;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;
     gap:calc(var(--fs)*clamp(8px,.9vw,14px));flex-wrap:nowrap;
     /* petit retrait : le bouton et son décalage au survol restent dans le cadre */
     padding-right:4px;}
.idk{
  flex:none;width:auto;margin:0;font-family:var(--body);font-weight:600;white-space:nowrap;
  font-size:calc(var(--fs)*clamp(.95rem,1.15vw,1.15rem));color:var(--ink-soft);cursor:pointer;text-align:center;
  background:#F7F9FC;border:1.5px dashed var(--line);border-radius:999px;
  padding:calc(var(--fs)*clamp(9px,1.1vh,13px)) calc(var(--fs)*clamp(14px,1.2vw,20px));
  transition:border-color .15s, color .15s, background .15s;
}
.idk:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.idk:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.idk:disabled{cursor:default;opacity:.55;}
.idk.picked{background:var(--red-bg);border-color:var(--red);border-style:solid;color:var(--red);opacity:1;}
.btn-next{
  flex:none;font-family:var(--display);font-weight:700;
  font-size:calc(var(--fs)*clamp(1.15rem,1.7vw,1.75rem));cursor:pointer;color:#fff;
  background:var(--accent);border:none;border-radius:13px;
  padding:calc(var(--fs)*clamp(13px,1.8vh,22px)) calc(var(--fs)*clamp(20px,2vw,34px));
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:transform .12s, filter .12s;
}
.btn-next:hover{filter:brightness(1.07);transform:translateX(2px);}
.btn-next:focus-visible{outline:3px solid var(--ink);outline-offset:2px;}
.btn-ok, .btn-no{
  flex:none;font-family:var(--display);font-weight:700;
  font-size:calc(var(--fs)*clamp(1.05rem,1.45vw,1.45rem));cursor:pointer;
  border-radius:13px;padding:calc(var(--fs)*clamp(12px,1.6vh,20px)) calc(var(--fs)*clamp(16px,1.6vw,26px));
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:transform .12s, filter .12s;
}
.btn-ok{background:var(--green);color:#fff;border:none;}
.btn-no{background:var(--card);color:var(--red);border:1.5px solid var(--red);}
.btn-ok:hover, .btn-no:hover{transform:translateY(-2px);filter:brightness(1.06);}
.btn-ok:focus-visible, .btn-no:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
.prep-note{
  font-family:var(--body);font-weight:600;font-size:calc(var(--fs)*clamp(.78rem,.95vw,.92rem));
  color:#7A5717;text-align:right;max-width:calc(var(--fs)*250px);line-height:1.3;
}

/* ---- Écran d'explication ---- */
.slide.expl .qtext{font-size:calc(var(--fs)*clamp(1.05rem,1.8vw,1.9rem));line-height:1.3;}
.slide.expl .fig-wrap{margin-top:calc(var(--fs)*clamp(8px,1.4vh,18px));}
.ansrow{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 12px;border:1.5px solid;border-radius:12px;
  padding:calc(var(--fs)*clamp(7px,1vh,12px)) calc(var(--fs)*clamp(11px,1vw,17px));
  font-size:calc(var(--fs)*clamp(1rem,1.4vw,1.45rem));line-height:1.32;
}
.ansrow .lbl{
  font-family:var(--display);font-weight:700;font-size:calc(var(--fs)*clamp(.7rem,.9vw,.86rem));
  letter-spacing:.12em;text-transform:uppercase;flex:none;
}
.ansrow .val{font-weight:600;display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;}
.ansrow.bad{background:var(--red-bg);border-color:#F0C7BC;}
.ansrow.bad .lbl{color:var(--red);}
.ansrow.good{background:var(--green-bg);border-color:#C3E6D0;}
.ansrow.good .lbl{color:var(--green);}
.expl-text{
  font-size:calc(var(--fs)*clamp(.95rem,1.3vw,1.32rem));line-height:1.48;
  background:var(--blue-bg);border:1.5px solid #C7E0F0;border-radius:14px;
  padding:calc(var(--fs)*clamp(11px,1.4vh,17px)) calc(var(--fs)*clamp(13px,1.2vw,21px));
}
.expl-text p{margin:0 0 .55em;}
.expl-text p:last-child{margin-bottom:0;}

/* ---- Questions « libres » (construction) ---- */
.slide.libre{display:flex;flex-direction:column;height:auto;gap:calc(var(--fs)*clamp(10px,1.5vh,18px));}
.anim-stage{display:flex;align-items:center;justify-content:center;min-height:0;}
.qtext-center{
  font-size:calc(var(--fs)*clamp(1.6rem,2.9vw,3rem));font-weight:500;line-height:1.32;
  text-align:center;max-width:900px;margin:0 auto;
}
svg.canim{width:calc(var(--fs)*min(760px,72vw));height:auto;display:block;}
.slide.expl svg.canim{width:calc(var(--fs)*min(520px,100%));}

/* ---- Résultats ---- */
#results{justify-content:safe center;overflow:auto;}
.rfit{width:100%;}
.score{text-align:center;padding:2px 0;}
.score .ring{
  font-family:var(--display);font-weight:800;font-size:calc(var(--fs)*clamp(2.6rem,5.2vw,4.6rem));color:var(--accent);
  display:inline-flex;align-items:baseline;
}
.score .ring small{font-size:.4em;color:var(--ink-soft);font-weight:700;}
.score .msg{font-size:calc(var(--fs)*clamp(1.15rem,1.7vw,1.7rem));color:var(--ink-soft);margin-top:4px;}
.recap{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--fs)*clamp(9px,.9vw,15px));
       margin:calc(var(--fs)*clamp(14px,2.4vh,28px)) 0;}
@media(max-width:720px){.recap{grid-template-columns:repeat(2,1fr);}}
.recap .row{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  font-size:calc(var(--fs)*clamp(1.02rem,1.35vw,1.38rem));
  padding:calc(var(--fs)*clamp(10px,1.4vh,16px)) calc(var(--fs)*clamp(12px,1.1vw,17px));
  border:1px solid var(--line);border-radius:12px;background:#fbfcfe;
}
.recap .rtop{display:flex;align-items:center;gap:10px;width:100%;}
.recap .rtop .lab{margin-left:auto;}
.recap .dot{flex:none;width:calc(var(--fs)*clamp(22px,1.9vw,28px));height:calc(var(--fs)*clamp(22px,1.9vw,28px));border-radius:7px;display:grid;place-items:center;color:#fff;font-weight:700;}
.recap .dot.ok{background:var(--green);}
.recap .dot.no{background:var(--red);}
.recap .dot.done{background:var(--accent);}
.recap .row .lab{color:var(--ink-soft);}
.recap .qn{font-weight:600;}
.recap .sk{color:var(--ink);font-weight:500;line-height:1.3;}
.recap .ansline{display:flex;align-items:center;flex-wrap:wrap;gap:10px;line-height:1.35;}
.recap .ans{font-weight:700;color:var(--ink);display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;}
.recap .ans svg.fig{width:min(96px,22vw);height:auto;}
.recap .eq{font-weight:700;}
.recap.list{grid-template-columns:1fr;gap:calc(var(--fs)*clamp(8px,1.1vh,13px));}
.recap.list .row{gap:6px;}
.recap.list .expl-mini{color:var(--ink-soft);line-height:1.42;}
.recap.list .expl-mini p{margin:0 0 .35em;}
.recap.list .expl-mini p:last-child{margin-bottom:0;}
.results-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.btn-ghost{
  font-family:var(--display);font-weight:700;font-size:calc(var(--fs)*clamp(.95rem,1.3vw,1.25rem));cursor:pointer;color:var(--accent);
  background:transparent;border:2px solid var(--accent);border-radius:13px;
  padding:calc(var(--fs)*clamp(11px,1.5vh,17px)) calc(var(--fs)*clamp(18px,1.7vw,26px));
}
.btn-ghost:hover{background:var(--accent-soft);}
.btn-ghost:focus-visible,.btn-solid:focus-visible{outline:3px solid var(--ink);outline-offset:2px;}
.btn-solid{
  font-family:var(--display);font-weight:700;font-size:calc(var(--fs)*clamp(.95rem,1.3vw,1.25rem));cursor:pointer;color:#fff;
  background:var(--accent);border:none;border-radius:13px;
  padding:calc(var(--fs)*clamp(11px,1.5vh,17px)) calc(var(--fs)*clamp(20px,1.9vw,28px));
}
.synth{max-width:82ch;margin:calc(var(--fs)*clamp(14px,2.4vh,26px)) auto;display:flex;flex-direction:column;gap:calc(var(--fs)*clamp(9px,1.2vh,15px));}
.synth li{list-style:none;}
.synth ul{margin:0;padding:0;display:flex;flex-direction:column;gap:calc(var(--fs)*clamp(8px,1.1vh,13px));}
.synth ul li{
  font-size:calc(var(--fs)*clamp(1.1rem,1.55vw,1.55rem));line-height:1.42;background:#fbfcfe;
  border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;
  padding:calc(var(--fs)*clamp(10px,1.4vh,15px)) calc(var(--fs)*clamp(13px,1.2vw,19px));
}

/* ---- Écritures mathématiques (rendu KaTeX natif) ---- */
/* Une fraction ou un exposant est plus haut qu'une ligne de texte ordinaire.
   En display:inline, cette hauteur ne compte pas dans la hauteur de la ligne :
   le haut de la formule est alors rogné par le cadre qui la contient (énoncé,
   proposition, feedback, explication, synthèse, récapitulatif). inline-block
   fait compter cette hauteur, et l'ajustement automatique la prend en compte. */
/* Chaque formule est enveloppée dans <span class="formule"> par tex() :
   c'est la seule classe visée ici et dans le script. Les classes internes de
   KaTeX (.katex, .katex-html, .base, .mord…) ne sont jamais nommées, car
   elles changent d'une version à l'autre.
   - .formule : Charter, appliquée à la formule et à tous ses descendants.
     KaTeX_Main suit Charter dans la pile : il ne sert qu'aux glyphes absents
     de Charter (barre de \neq, \notin…). Le premier enfant reçoit 1em, ce
     qui annule l'agrandissement propre à KaTeX, inutile avec Charter.
   - .formule.formule-katex : polices et taille de KaTeX, pour une formule à
     grand opérateur ou à délimiteurs \left … \right ; tex() l'ajoute seul. */
.formule{font-size:1.04em;white-space:nowrap;overflow-wrap:normal;word-break:keep-all;
  display:inline-block;vertical-align:middle;}
.formule:not(.formule-katex),.formule:not(.formule-katex) *{font-family:var(--charter-math);}
.formule:not(.formule-katex) > *{font-size:1em;}
/* Formule + ponctuation qui la suit (« A(x) ? ») : insécables ensemble,
   sans quoi le signe peut partir seul à la ligne. Voir typo(). */
.formule-ponct{white-space:nowrap;}

/* ---- Tableaux d'énoncé ---- */
table.qtab{
  border-collapse:collapse;font-size:calc(var(--fs)*clamp(1.05rem,1.5vw,1.55rem));background:var(--card);
  border:1.5px solid var(--ink-soft);
}
table.qtab th, table.qtab td{
  border:1px solid var(--line);
  padding:calc(var(--fs)*clamp(5px,.8vh,10px)) calc(var(--fs)*clamp(8px,.9vw,16px));text-align:center;
}
table.qtab th{background:var(--accent-soft);color:var(--accent);font-weight:700;}
table.qtab th.rowh{text-align:left;background:#F7FAFC;color:var(--ink);}
table.qtab tr.tot td, table.qtab tr.tot th{font-weight:700;border-top:1.5px solid var(--ink-soft);}
table.qtab.signes{border:1.5px solid var(--ink-soft);}
table.qtab.signes th, table.qtab.signes td{border:none;padding:calc(var(--fs)*clamp(6px,.9vh,11px)) calc(var(--fs)*clamp(5px,.6vw,11px));}
table.qtab.signes th.rowh{
  border-right:1.5px solid var(--ink-soft);background:#F7FAFC;color:var(--ink);
  text-align:left;font-weight:700;white-space:nowrap;
}
table.qtab.signes tr:first-child th, table.qtab.signes tr:first-child td{
  border-bottom:1.5px solid var(--ink-soft);background:transparent;color:var(--ink);
}
table.qtab.signes tr:first-child th.rowh{background:#F7FAFC;}
table.qtab.signes td.gap{min-width:calc(var(--fs)*clamp(30px,3.6vw,52px));}
table.qtab.signes td.root{position:relative;min-width:calc(var(--fs)*clamp(26px,3vw,42px));}
table.qtab.signes td.root::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px solid var(--ink-soft);
}
table.qtab.signes td.root span{
  position:relative;z-index:1;background:var(--card);padding:0 4px;color:var(--ink-soft);
}
table.qtab.signes td.sign{font-size:1.15em;font-weight:700;}

/* ==========================================================
   TABLETTE / SMARTPHONE — affichage conservé tel quel
   (empilement vertical, défilement normal, pas d'ajustement)
   Une tablette tactile (pointer:coarse) jusqu'à 1400 px suit ce
   même régime, puis reçoit les ajustements des deux blocs suivants.
   ========================================================== */
@media(max-width:760px),(pointer:coarse) and (max-width:1400px){
  :root{--gapm:14px;--fs:1 !important;}
  html,body{height:auto;}
  body{
    height:auto;min-height:100vh;min-height:100dvh;overflow:visible;
    padding:14px 14px clamp(80px,14vh,110px);
  }
  .wrap{flex:0 1 auto;min-height:0;}
  .panel{flex:0 1 auto;min-height:0;overflow:visible;padding:18px 16px;}
  #menu,#results{justify-content:flex-start;overflow:visible;}
  header.brand{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;}
  .brand .kicker{width:100%;text-align:center;white-space:normal;}
  .brand .hmid{font-size:1.15rem;margin-right:auto;}
  .brand .hend{margin-left:auto;}
  .timer{min-width:58px;}
  .btn-quit{padding:11px 16px;}
  #stage{display:block;overflow:visible;align-items:stretch;}
  .slide{height:auto;}
  .qgrid{display:block;height:auto;}
  .q-left,.q-right,.q-foot{display:block;max-width:none;width:auto;}
  .q-left{margin:0;}
  .q-right{margin-top:var(--gapm);}
  .q-foot{margin-top:var(--gapm);gap:var(--gapm);}
  .qtext{font-size:1.35rem;line-height:1.45;}
  .qtext .formule{line-height:1.9;}
  .qtext-center{font-size:1.35rem;}
  .fig-wrap{margin-top:var(--gapm);}
  svg.fig{width:min(320px,84vw);margin:0 auto;}
  .opt{font-size:1.15rem;padding:14px 16px;min-height:56px;gap:12px;}
  .options.long .opt{font-size:1.05rem;}
  .opt .key{width:34px;height:34px;font-size:1rem;}
  .idk{width:100%;min-height:48px;font-size:1rem;}
  .feedback{display:block;}
  .fbox{font-size:1.05rem;margin-bottom:10px;}
  .nav{flex-direction:column;align-items:stretch;margin-top:var(--gapm);gap:var(--gapm);}
  .prep-note{max-width:none;text-align:left;}
  .btn-next,.btn-ok,.btn-no{width:100%;justify-content:center;font-size:1.1rem;padding:15px 18px;min-height:52px;}
  .slide.libre{display:block;height:auto;}
  .slide.expl .qtext{font-size:1.2rem;margin:0;}
  .slide.expl .fig-wrap{margin-top:var(--gapm);}
  .slide.expl .ansrow{margin-top:var(--gapm);}
  .slide.expl svg.fig{width:min(280px,72vw);}
  .ansrow{font-size:1rem;}
  .expl-text{font-size:1rem;margin-top:var(--gapm);}
  .anim-stage{display:block;margin:14px 0;}
  svg.canim{width:100%;max-height:none;}
  .recap{grid-template-columns:1fr;}
  .synth ul li{font-size:1.02rem;}
  .results-btns .btn-solid,.results-btns .btn-ghost{min-height:50px;font-size:1rem;}
  .saisie{flex-direction:column;align-items:stretch;gap:14px;}
  .champ-bloc{display:contents;}
  .champ,.unite,.lhs{font-size:1.6rem;}
  .champ{flex:1;min-width:0;}
  .champ.expr{font-size:1.45rem;overflow-x:auto;}
  .pad,.pad.pad5{grid-template-columns:repeat(4,1fr);gap:8px;}
  .pad.pad5{grid-template-columns:repeat(5,1fr);}
  .pad button,.pad-lettres button{height:50px;font-size:1.3rem;}
  .pad-lettres{gap:8px;}
  .garde .g-num{font-size:2.6rem;}
  .garde .g-theme{font-size:1.3rem;}
  .garde .g-inv li{font-size:1.05rem;}
}

@media(min-width:761px) and (pointer:coarse) and (max-width:1400px){
  .options{grid-template-columns:repeat(2,minmax(0,1fr));}
  .saisie{max-width:30rem;margin-inline:auto;}
  .qtext,.qtext-center{font-size:1.5rem;}
  .q-left .qtext,.q-left:not(:has(.fig-wrap)) .qtext,.q-left.stack .qtext{max-width:none;}
  svg.fig{width:min(420px,60vw);}
  .nav{flex-direction:row;justify-content:flex-end;align-items:center;}
  .nav .btn-next,.nav .btn-ok,.nav .btn-no,.nav .idk{width:auto;}
}
@media(min-width:761px) and (orientation:landscape) and (pointer:coarse) and (max-width:1400px){
  .qgrid{display:grid;grid-template-areas:"left right" "foot foot";grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:2rem;align-items:start;}
  .q-right{margin-top:0;}
  .options{grid-template-columns:1fr;}
  svg.fig{max-width:100%;}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}