/* ============================================================================
   Ékole — Parcours Secondaire 1 — moteur V1 (feuille de style, ekole-s1-workshops)
   Copiée telle quelle de ekole-s2-workshops @ 2687e4b (lignée ekole-g4-6-workshops @ 0bd1bf5 →
   ekole-s3-workshops → ekole-s2-workshops → S1 ; écarts et reports : STANDARD.md) :
   sans blocs Scratch, mini-jeux, dépôt du héros ni diplôme ; avec voies, bloc prompt,
   constructeur et planche. Aucune règle propre à S1 à ce jour.
   Une page = un écran. Gabarit calculé pour la fenêtre d'un Chromebook d'école
   (≈ 1280×600) : en-tête 56 + piste 44 + scène + navigation 76.
   Ce fichier est la SOURCE : build.py le copie dans public/assets/ekole-s1-v1.css.
   ============================================================================ */
/* Polices auto-hébergées (SIL OFL 1.1, voir fonts/OFL.txt) */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/BricolageGrotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/BricolageGrotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/Manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/Manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --blue:#2B7FE0;--btn:#1F66BF;--red:#E63946;--yellow:#F4C430;--sky:#4DB5E3;--green:#5CB339;
  --bg:#FAFAF7;--bg1:#F2F1EC;--bg2:#E6E4DC;--card:#FFFFFF;
  --ink:#07090E;--mute:#434959;--soft:#646C81;   /* 3lik7n : 4,64:1 sur --bg1 (titres des blocs de requête), #687085 faisait 4,37:1 */
  --line:rgba(7,9,14,.09);--line2:rgba(7,9,14,.17);
  /* S1 (WCAG 1.4.11 ; C099) : le bord d'un champ de saisie, le rond d'un choix et la case d'une coche — 4,2:1 sur blanc,
     3,7:1 sur --bg1 ; --line2 (1,5:1) reste pour les séparateurs et les bords des boutons à texte. */
  --field:#767C8A;
  --ok:#2F6B1B;--bad:#B3202C;--warn:#7A5B00;--act:#1F66BF;
  --okbg:rgba(92,179,57,.15);--badbg:rgba(230,57,70,.10);--warnbg:rgba(244,196,48,.22);--actbg:rgba(43,127,224,.10);--skybg:rgba(77,181,227,.18);
  --shadow:0 1px 2px rgba(7,9,14,.05),0 14px 34px -16px rgba(7,9,14,.22);
  --display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --body:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
  /* alias lus par le widget ⚠️ (widget.js?v=12) pour son bouton en ligne */
  --bg-1:#F2F1EC;--line-2:rgba(7,9,14,.17);--c-blue:#2B7FE0;
}
:root[data-theme="dark"]{
  --bg-1:#0C1018;--line-2:rgba(255,255,255,.16);
  --bg:#07090E;--bg1:#0C1018;--bg2:#171C29;--card:#0F141E;
  --ink:#F2F1EC;--mute:#B7BDCB;--soft:#8B93A7;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.16);
  --field:#6B7385;   /* 3,9:1 sur --card, 4,0:1 sur --bg1 (C099) */
  --ok:#93D873;--bad:#FF8A93;--warn:#F4C430;--act:#7DB6F5;
  --okbg:rgba(92,179,57,.17);--badbg:rgba(230,57,70,.17);--warnbg:rgba(244,196,48,.15);--actbg:rgba(43,127,224,.2);--skybg:rgba(77,181,227,.17);
  --shadow:0 0 0 1px rgba(255,255,255,.05);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:400 18px/1.55 var(--body);-webkit-font-smoothing:antialiased}
button{font-family:inherit}
a{color:var(--act)}
/* GUIDE A2 (reprise 4 du 3/11) : UN anneau de focus pour tout le kit — 3 px, --blue, décalé de 2 px, jour et nuit — sur les
   boutons, liens, cartes, champs (cases de mesure, cases à trous, points du constructeur, réponse collée, sujet « ✎ »),
   aperçu de la demande et ❓ des consignes : les variantes (2 px --act décalées de 1 px, 2 px --blue, 3 px --act) sont
   retirées. Quand la garde réduit une colonne (zoom), le moteur y pose --z (le facteur de zoom) : l'anneau reste à 3 px
   d'ÉCRAN (3 px × 0,98 s'arrondissait à 2 px, et 2 px à 1). Sans --z : 3 px. La case à trous en « alerte » (contour ambre)
   reprend l'anneau quand elle a le focus. */
:focus-visible{outline:calc(3px / var(--z, 1)) solid var(--blue);outline-offset:calc(2px / var(--z, 1));border-radius:8px}
pre.a-trous .trou-f.alerte:focus-visible{outline:calc(3px / var(--z, 1)) solid var(--blue);outline-offset:calc(2px / var(--z, 1))}
.mark span:nth-child(1){color:var(--act)}.mark span:nth-child(2){color:var(--red)}.mark span:nth-child(3){color:#C99A00}
.mark span:nth-child(4){color:var(--sky)}.mark span:nth-child(5){color:var(--green)}
:root[data-theme="dark"] .mark span:nth-child(3){color:var(--yellow)}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.12s}

/* ------------------------------------------------------------ écran d'atelier */
.scr{height:100vh;height:100dvh;display:grid;grid-template-rows:56px 44px minmax(0,1fr) 76px;overflow:hidden}
.s-head{display:flex;align-items:center;gap:12px;padding:0 20px;border-bottom:1px solid var(--line);background:var(--bg)}
/* pastille de marque (même identité que le hub : tuile dégradée + emoji de l'atelier) */
.s-logo{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;text-decoration:none;font-size:19px;
  background:linear-gradient(135deg,var(--blue),var(--sky));box-shadow:0 2px 10px rgba(43,127,224,.28)}
.s-brand{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.s-brand b{font:700 17px var(--display);letter-spacing:-.01em;white-space:nowrap}
.s-brand span{font-size:13.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-sp{flex:1}
/* retour discret en haut à gauche (avant le logo) : petit, gris, sans cadre */
.s-back{display:inline-flex;align-items:center;gap:4px;height:44px;padding:0 8px;margin:0 -6px 0 -8px;border-radius:9px;color:var(--mute);font:600 13.5px var(--body);text-decoration:none;white-space:nowrap;flex-shrink:0}
.s-back:hover{background:var(--bg1);color:var(--ink)}
.s-tool{display:inline-flex;gap:8px;align-items:center;height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line2);
  color:var(--ink);text-decoration:none;font:700 15px var(--body);background:var(--card);white-space:nowrap}
.s-ico{width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);background:var(--bg1);color:var(--ink);font-size:18px;cursor:pointer;display:grid;place-items:center;flex-shrink:0}
.s-track{display:grid;grid-template-columns:104px minmax(0,1fr) 124px;gap:18px;align-items:center;padding:0 22px;border-bottom:1px solid var(--line);background:var(--bg1)}
.s-count{font:700 15px var(--mono);color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.s-line{position:relative;height:44px;margin:0 12px}
.s-rail{position:absolute;left:0;right:0;top:31px;height:4px;border-radius:2px;background:var(--bg2)}
.s-fill{position:absolute;left:0;top:31px;height:4px;border-radius:2px;background:var(--green)}
.s-dot{position:absolute;top:22px;width:22px;height:22px;margin-left:-11px;border-radius:50%;border:3px solid var(--bg2);background:var(--card);padding:0;cursor:pointer;display:block}
.s-dot::before{content:"";position:absolute;inset:-11px}
.s-dot.done{background:var(--green);border-color:var(--green)}
.s-dot.cur{border-color:var(--blue)}
.s-dot.flag{border:0;background:transparent;font-size:15px;line-height:22px;text-align:center}
.s-dot.locked{cursor:not-allowed;opacity:.55}
.s-clock{justify-self:end;display:inline-flex;gap:7px;align-items:center;font:700 18px var(--mono);font-variant-numeric:tabular-nums;
  padding:5px 11px;border-radius:10px;background:var(--card);border:1px solid var(--line);color:var(--ink);cursor:pointer}
.s-clock.idle{color:var(--soft)}.s-clock.low{background:var(--warnbg)}.s-clock.paused{opacity:.6}
.s-stage{position:relative;padding:16px 48px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:42px;align-items:center;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;max-width:1380px;width:100%;margin:0 auto}
.s-kick{font:700 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.s-kick i{font-style:normal;padding:3px 8px;border-radius:7px;letter-spacing:.03em;color:var(--ink)}
.s-left h1{font:700 32px/1.1 var(--display);letter-spacing:-.02em;margin:10px 0 14px;text-wrap:balance}
.s-left p{font:600 20px/1.48 var(--body);margin:0}
.s-left .tip{margin-top:14px;font:500 17px/1.45 var(--body);color:var(--mute)}
.s-left ul.pts{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.s-left ul.pts li{font:600 18px/1.4 var(--body);display:grid;grid-template-columns:28px 1fr;gap:6px}
.s-left ul.pts li b{font:800 15px var(--mono);color:var(--act);padding-top:2px}
.s-panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow);min-width:0}
.s-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;padding:0 24px;border-top:1px solid var(--line);background:var(--bg1)}
.s-nav > :first-child{justify-self:start}
.s-nav > :last-child{justify-self:end;text-align:right}
.s-mid{display:flex;gap:10px;justify-content:center;align-items:center}
[hidden]{display:none!important}   /* 4hntbi (TPS-11) : `.sb{display:inline-flex}` écrasait l'attribut hidden (« ↺ Tout reprendre » restait visible) */
.sb{min-height:56px;padding:0 22px;border-radius:14px;border:2px solid transparent;font:800 18px var(--body);cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center;text-decoration:none}
.sb.ghost{background:var(--card);border-color:var(--line2);color:var(--ink)}
.sb.soft{background:transparent;border-color:var(--line2);color:var(--ink);min-height:48px;font-size:16px;padding:0 16px}
.sb.next{background:var(--btn);color:#fff;min-width:240px}
.sb.next[aria-disabled="true"]{background:var(--bg2);color:var(--mute);cursor:not-allowed}
.sb[disabled]{opacity:.35;cursor:default}
.saved{font:700 13px var(--mono);color:var(--ok);opacity:0;transition:opacity .3s}
.saved.on{opacity:1}
.saved.bad{color:var(--bad)}
.sb.next.nudge{animation:shake .35s}
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);max-width:min(560px,92vw);padding:12px 18px;border-radius:14px;background:var(--ink);color:var(--bg);
  font:700 17px/1.35 var(--body);text-align:center;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
.toast.on{opacity:1}.toast.good{background:var(--ok);color:var(--bg)}
.restart{border:0;background:transparent;color:var(--mute);font:600 15px var(--body);text-decoration:underline;cursor:pointer;justify-self:start;min-height:44px;padding:0 8px}
.restart .sm{display:none}

/* familles de type (puce du coin) */
.f-frame{background:var(--bg2)}.f-make{background:var(--actbg)}.f-learn{background:var(--skybg)}
.f-build{background:var(--okbg)}.f-meas{background:var(--warnbg)}.f-check{background:var(--badbg)}

/* ------------------------------------------------------------ intro */
.s-stage.intro{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:stretch}
.intro h1{font:800 40px/1.06 var(--display);letter-spacing:-.025em;margin:10px 0 16px;text-wrap:balance}
.goal{font:700 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ok)}
.goal-t{font:600 22px/1.42 var(--body);margin:6px 0 0}
/* [Ton nom] sans prénom noté : « ton prénom » en italique (4teiak, 05/10) */
.ph-nom{font-style:italic}
/* Atelier 1 : le prénom se note au départ, sous le livrable */
.who-intro{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0 0}
.who-intro .lab{font:700 15px var(--body);margin:0}
.who-intro input{height:44px;border-radius:12px;border:2px solid var(--field);background:var(--card);color:var(--ink);font:700 17px var(--body);padding:0 12px;width:220px;max-width:100%}
.teaser{display:flex;gap:12px;align-items:flex-start;margin-top:18px;font:600 17px/1.45 var(--body);color:var(--mute)}
.teaser .e{font-size:26px;line-height:1.1;flex-shrink:0}
.intro-r{display:grid;grid-template-rows:1fr auto;gap:14px}
/* S1 (C047, C097, C108) : les deux faces sont DANS la grille de la carte (même case) : la carte prend la hauteur de sa face
   la plus haute, et le dos ne se coupe plus à 1024×600. La face cachée est hors de vue ET hors de l'arbre d'accessibilité
   (visibility, rendue à la fin du retournement) : le dos n'est plus lu ni atteint au clavier avant d'être retourné. */
.flip{position:relative;perspective:900px;cursor:pointer;border:0;padding:0;background:transparent;text-align:left;color:inherit;font:inherit;min-height:176px;display:grid;width:100%}
.flip .fc{position:relative;grid-area:1/1;min-width:0;border-radius:18px;padding:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .5s var(--ease),visibility .5s;display:flex;flex-direction:column;justify-content:space-between;gap:8px;overflow:hidden}
.flip:not(.on) .back,.flip.on .front{visibility:hidden}
.flip .front{background:var(--warnbg);border:1px solid var(--line)}
.flip .back{background:var(--card);border:1px solid var(--line2);transform:rotateY(180deg)}
.flip.on .front{transform:rotateY(180deg)}.flip.on .back{transform:rotateY(360deg)}
.flip .lbl{font:700 12.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--warn)}
.flip .word{font:800 30px/1.05 var(--display)}
.flip .hint{font:600 14px var(--body);color:var(--mute)}
.flip .def{font:600 17px/1.42 var(--body)}
.toolcard{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.toolcard .lg{width:50px;height:50px;border-radius:12px;background:var(--bg1);display:grid;place-items:center;font-size:25px;flex-shrink:0}
.toolcard b{display:block;font:700 18px var(--display)}
.toolcard span span{font-size:15.5px;color:var(--mute)}

/* voies (Histoire / Sciences) : choix obligatoire sur l'intro, rappel ensuite */
.voies{margin-top:20px}
.voies .vt{font:700 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-bottom:8px}
.voie-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.voie-card{display:flex;flex-direction:column;gap:6px;text-align:left;padding:14px 16px;border-radius:16px;border:2px solid var(--line2);
  background:var(--bg1);color:var(--ink);cursor:pointer;min-height:96px}
.voie-card b{font:800 19px/1.2 var(--display)}
.voie-card span{font:600 15px/1.35 var(--body);color:var(--mute)}
.voie-card[aria-pressed="true"]{border-color:var(--blue);background:var(--actbg);box-shadow:var(--shadow)}
.voie-card[aria-pressed="true"] span{color:var(--ink)}
.voie-now{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:12px;font:600 15.5px var(--body);color:var(--mute)}
.voie-now b{color:var(--ink)}
.voie-now button{border:0;background:transparent;color:var(--act);font:700 15px var(--body);text-decoration:underline;cursor:pointer}
/* sélecteur compact, sur les écrans variés */
.voie-pick{display:inline-flex;gap:4px;padding:3px;border-radius:999px;background:var(--bg1);border:1px solid var(--line2)}
.voie-pick button{border:0;background:transparent;color:var(--mute);font:700 13px var(--body);padding:3px 11px;border-radius:999px;cursor:pointer;white-space:nowrap}
.voie-pick button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}

/* ------------------------------------------------------------ tri */
.tri-cards{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.tri-card{min-height:48px;border-radius:12px;border:2px solid var(--line2);background:var(--bg1);color:var(--ink);font:600 15px/1.28 var(--body);padding:7px 11px;text-align:left;cursor:pointer;transition:transform .15s var(--ease),border-color .15s}
.tri-card.sel{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--shadow)}
.tri-card.shake{animation:shake .35s}
/* ordre : une seule colonne numérotée ; après un essai raté, chaque geste porte ✓ ou ✗ (vo1ds9) */
#ord-out{grid-template-columns:1fr}
#ord-out .tri-card{display:flex;align-items:center;gap:8px}
/* S1 (reprise 1) : la place d'un geste retiré, une ligne fine en pointillés (des places qui se suivent : une seule ligne) —
   le prochain geste choisi la remplit, les autres ne bougent pas ; la scène garde sa hauteur */
#ord-out .ord-trou{display:block;padding:2px 11px;border:2px dashed var(--field);border-radius:12px;font:600 14px/1.25 var(--body);color:var(--mute)}
.tri-card.good{border-color:var(--green);background:var(--okbg)}.tri-card.bad{border-color:var(--red);background:var(--badbg)}
.tri-card .mk{margin-left:auto;font:800 17px var(--body)}
.tri-card.good .mk{color:var(--ok)}.tri-card.bad .mk{color:var(--bad)}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.tri-bins{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.bin{border-radius:14px;border:2px dashed var(--line2);background:transparent;color:var(--ink);padding:9px 12px;text-align:left;cursor:pointer;min-height:76px;display:flex;flex-direction:column;gap:6px}
.bin b{font:700 15.5px var(--body)}
.bin .got{display:flex;flex-wrap:wrap;gap:4px}
.bin .got i{font:600 12.5px var(--body);font-style:normal;background:var(--okbg);color:var(--ok);padding:2px 7px;border-radius:6px}
.fb{margin-top:10px;min-height:24px;font:600 15.5px var(--body)}
.fb.ok{color:var(--ok)}.fb.ko{color:var(--bad)}

/* ------------------------------------------------------------ qcm / vrai-faux */
.q{display:grid;gap:9px}
.q + .q{margin-top:12px}
.q .qq{font:700 17.5px/1.35 var(--body);margin-bottom:2px}
.opt{display:flex;gap:12px;align-items:center;min-height:52px;padding:9px 14px;border-radius:13px;border:2px solid var(--line2);background:var(--bg1);color:var(--ink);font:600 16.5px/1.3 var(--body);text-align:left;cursor:pointer;width:100%}
.opt .r{width:22px;height:22px;border-radius:50%;border:2px solid var(--field);flex-shrink:0;background:var(--card)}
.opt[aria-checked="true"]{border-color:var(--blue)}.opt[aria-checked="true"] .r{border:7px solid var(--blue)}
.opt.good{border-color:var(--green);background:var(--okbg)}.opt.bad{border-color:var(--red);background:var(--badbg)}
.opt .mk{margin-left:auto;font:800 17px var(--body)}
.opt.good .mk{color:var(--ok)}.opt.bad .mk{color:var(--bad)}
.q-imgs{display:flex;gap:10px;flex-wrap:wrap}
.q-imgs figure{flex:1 1 140px;margin:0;min-width:0}
.q-imgs img{width:100%;height:auto;max-height:150px;object-fit:contain;border-radius:10px;border:1px solid var(--line);background:#fff;display:block}
.q-imgs figcaption{font:600 12.5px/1.3 var(--body);color:var(--mute);margin-top:4px}
.why{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--actbg);font:600 15.5px/1.4 var(--body);color:var(--ink)}
.why.ko{background:var(--warnbg)}   /* dx5rvx : l'explication d'une réponse encore fausse, après un essai raté */
.tries{font:700 13px var(--mono);color:var(--soft);margin-left:auto;white-space:nowrap}
.q-nav{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.q-nav .qn{width:38px;height:38px;border-radius:10px;border:2px solid var(--line2);background:var(--bg1);color:var(--ink);font:700 14px var(--body);cursor:pointer;flex-shrink:0}
.q-nav .qn:disabled{opacity:.35;cursor:default}
.q-pos{font:700 14px var(--mono);color:var(--soft);white-space:nowrap}
.q-dots{display:flex;gap:6px;margin-left:auto;margin-right:6px}
.q-dots i{width:11px;height:11px;border-radius:50%;border:2px solid var(--line2);background:var(--card);display:block;box-sizing:border-box}
.q-dots i.ans{background:var(--blue);border-color:var(--blue)}
.q-dots i.cur{box-shadow:0 0 0 3px var(--actbg)}
.q-dots i.good{background:var(--green);border-color:var(--green)}
.q-dots i.bad{background:var(--red);border-color:var(--red)}
.vf{display:grid;gap:8px}
.vf-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;min-height:56px;padding:6px 8px 6px 14px;border-radius:13px;background:var(--bg1);border:1px solid var(--line)}
.vf-row > span:first-child{font:600 16px/1.35 var(--body)}
.vf-row.checked{min-height:0;padding-top:3px;padding-bottom:3px}.vf-row.miss{background:var(--badbg)}
.vf-row .exp{display:block;font:600 13.5px/1.3 var(--body);color:var(--mute);margin-top:2px}
.vf-btns button.good{border-color:var(--green);background:var(--okbg);color:var(--ok)}.vf-btns button.bad{border-color:var(--red);background:var(--badbg);color:var(--bad)}
.vf-btns button[disabled],.vf-btns button[aria-disabled="true"]{cursor:default}
.vf-btns{display:flex;gap:6px}
.vf-btns button{min-width:68px;height:46px;border-radius:10px;border:2px solid var(--line2);background:var(--card);color:var(--ink);font:700 15px var(--body);cursor:pointer}
.vf-btns button[aria-pressed="true"]{border-color:var(--blue);background:var(--actbg)}
.valid{margin-top:12px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.valid .fb{margin-top:0}
.sb.go{background:var(--ink);color:var(--bg);min-height:52px;font-size:17px}

/* ------------------------------------------------------------ cta, image de fichier, bloc prompt */
.art{border-radius:14px;border:1px solid var(--line);background:#fff;overflow:hidden}
.art svg{display:block;width:100%;height:auto;max-height:230px}
.s-left .art{margin-top:12px}
.s-left .chk{margin-top:14px}
.s-left .chk button{min-height:46px;font-size:15.5px;padding:6px 12px}
.s-panel .art svg{max-height:270px}
:root[data-theme="dark"] .art{box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.sb.tool{width:100%;margin-top:12px;background:var(--btn);color:#fff;font-size:19px}   /* --btn : blanc à 5,7:1 (le --blue faisait 4,03:1) */
.sb.tool + .chk{margin-top:14px}   /* 4alvzm : les cases « c'est fait » viennent après les requêtes et le bouton de l'outil */
.fig{margin:0;border-radius:14px;border:1px solid var(--line);background:var(--card);overflow:hidden}
.fig img{display:block;width:100%;height:auto;max-height:280px;object-fit:contain;background:#fff}
.fig figcaption{font:600 14px/1.35 var(--body);color:var(--mute);padding:8px 12px}
.s-left .fig{margin-top:12px}
.s-left .fig img{max-height:190px}
/* bloc prompt copiable : monospace, jamais compté dans le budget de mots */
.prompt-box{margin-top:14px;border-radius:14px;border:1px solid var(--line2);background:var(--bg1);overflow:hidden}
.prompt-box .ph{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);font:700 12.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.prompt-box .ph button{margin-left:auto;min-height:36px;padding:0 12px;border-radius:9px;border:1px solid var(--line2);background:var(--card);color:var(--ink);font:700 13.5px var(--body);cursor:pointer}
.prompt-box .ph button.ok{border-color:var(--green);color:var(--ok)}
.prompt-box pre{margin:0;padding:12px;font:500 14px/1.5 var(--mono);white-space:pre-wrap;word-break:break-word;max-height:190px;overflow:auto;color:var(--ink)}
/* F1 complet (1/11, port de S3) : les [trous] sont des cases DANS le bloc — fond jaune et pointillé tant qu'elles sont
   vides, vert une fois remplies ; « alerte » (contour AMBRE : un avertissement, pas une erreur) quand l'élève copie avec
   une case vide. Le message reste dans l'en-tête du bloc (.ph-warn) tant qu'une case est vide. */
.prompt-box .trous{margin:0;padding:8px 12px;border-top:1px solid var(--line);font:600 14.5px/1.4 var(--body);color:var(--ink)}
.prompt-box .trous.ok{color:var(--ok)}
pre.a-trous .trou-f{font:600 13.5px/1.35 var(--body);color:var(--ink);background:var(--warnbg);border:0;border-bottom:2px dashed var(--warn);
  border-radius:4px;padding:2px 6px;margin:1px 0;min-height:26px;max-width:100%;box-sizing:border-box;vertical-align:baseline}
pre.a-trous select.trou-f{cursor:pointer}
pre.a-trous textarea.trou-f{display:block;width:100%;min-height:54px;margin:4px 0;resize:vertical}
pre.a-trous .trou-f:not(.vide){background:var(--okbg);border-bottom:2px solid var(--ok)}
pre.a-trous .trou-f.alerte{outline:2px solid var(--warn);outline-offset:1px;background:var(--warnbg)}
pre.a-trous .trou-f::placeholder,.colle textarea::placeholder,.sujet .sj-autre::placeholder,.cx-field textarea::placeholder,
.who-intro input::placeholder,.meas input[type="text"]::placeholder,.carnet .who input::placeholder{color:var(--mute);font-weight:600}   /* revue du 19/10 : --soft sur le jaune faisait 4,25:1, le gris du navigateur 4,0:1 en nuit ; S1 (C051) : le prénom du départ et du carnet, et le texte d'une mesure, aussi */
.prompt-box .ph .ph-warn{font:700 12.5px/1.3 var(--body);letter-spacing:0;text-transform:none;color:var(--warn);background:var(--warnbg);border-radius:8px;padding:3px 8px}
.prompt-box .ph .ph-warn[hidden]{display:none}
.prompt-box textarea.copie-manuelle{display:block;width:calc(100% - 24px);margin:6px 12px 10px;min-height:70px;font:500 13px/1.4 var(--mono);color:var(--ink);background:var(--card);border:2px solid var(--act);border-radius:8px;padding:6px}
.s-stage.tight .prompt-box .trous{padding:5px 10px;font-size:13.5px;line-height:1.3}
.s-stage.tight .prompt-box:has(.trous) pre{max-height:120px;font-size:13px}
/* le sujet que l'élève écrit lui-même (option « autre » d'un constructeur : « ✎ Mon chapitre ») */
.sujet .sj-autre{display:block;width:100%;box-sizing:border-box;margin:8px 0 2px;min-height:calc(44px / var(--z, 1));padding:6px 10px;font:600 15px var(--body);color:var(--ink);background:var(--card);border:2px solid var(--field);border-radius:10px}
.s-left .tip.repli{color:var(--mute)}

/* ------------------------------------------------------------ checklist */
.chk{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.chk button{width:100%;display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:center;text-align:left;min-height:52px;padding:8px 14px;border-radius:13px;border:2px solid var(--line2);background:var(--bg1);color:var(--ink);font:600 16.5px/1.35 var(--body);cursor:pointer}
.chk .tk{width:30px;height:30px;border-radius:9px;border:2px solid var(--field);background:var(--card);display:grid;place-items:center;font-size:17px;color:transparent}
.chk button[aria-checked="true"]{border-color:var(--green);background:var(--okbg)}
.chk button[aria-checked="true"] .tk{background:var(--green);border-color:var(--green);color:#07090E}

/* ------------------------------------------------------------ mesure */
.meas{display:grid;gap:14px}
.meas label,.meas .lab{display:block;font:700 17px var(--body);margin-bottom:6px}
.stepper{display:flex;gap:10px;align-items:center}
.stepper button{width:56px;height:56px;border-radius:14px;border:2px solid var(--line2);background:var(--bg1);color:var(--ink);font:800 24px var(--body);cursor:pointer}
.stepper output{min-width:82px;height:56px;padding:0 10px;border-radius:14px;border:2px solid var(--blue);display:grid;place-items:center;font:800 26px var(--mono);font-variant-numeric:tabular-nums}
.stepper output .ini{color:var(--soft)}   /* la valeur de départ, pas encore choisie (dx5rvx, RTC-13) */
.stepper .unit{font:700 19px var(--mono);color:var(--mute)}
.meas input[type="text"]{width:100%;height:54px;border-radius:14px;border:2px solid var(--field);background:var(--card);color:var(--ink);font:600 18px var(--body);padding:0 14px}
.meas input:focus{border-color:var(--blue)}   /* l'anneau : celui du kit (A2) */

/* ------------------------------------------------------------ cartes (flash) */
.flashes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.flashes.n2{grid-template-columns:repeat(2,1fr)}.flashes.n4{grid-template-columns:repeat(2,1fr)}
.flashes .flip{min-height:214px}
.flashes.n4 .flip{min-height:158px}
.flashes .flip .front{background:var(--skybg)}
.flashes .flip .lbl{color:var(--act)}
.flashes .flip .e{font-size:28px}
.flashes .flip .word{font-size:21px}
.flashes .flip .def{font-size:15.5px}
.flashes .flip .front img{width:100%;max-height:74px;object-fit:contain;border-radius:8px;background:#fff}
.flashes .flip .ex{font:600 14px/1.35 var(--body);color:var(--act)}
.flashes .flip .note{font:500 13px/1.3 var(--body);color:var(--mute)}
.flashes.n4 .flip .def{font-size:14.5px}

/* ------------------------------------------------------------ constructeur (briques → prompt) */
/* Deux colonnes dans le panneau : les briques à gauche, l'aperçu et les boutons à droite —
   c'est ce qui fait tenir un écran de formulaire dans les 600 px d'un Chromebook. */
.cx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 18px;align-items:start}
.cx-a,.cx-b{display:grid;gap:10px;align-content:start;min-width:0}
.cx-sj .sujet{display:grid;gap:8px}
.cx-sj .sujet .st{font:700 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}   /* 13 px (S1, C110) : lisible même réduit par la garde */
.cx-sj .sujet .opts{display:grid;gap:8px}
/* Le sujet : sous la consigne, dans la colonne de gauche (S1, C110 ; en S2 : en tête du panneau, abzgi5). */
.cx-sj{margin-top:14px}
/* Panneau du constructeur ancré en haut : une aide qui s'ouvre l'allonge vers le bas sans déplacer le « ? » cliqué (revue A11Y-01). */
.s-stage:has(> #cx){align-items:start}
.fin-go{min-height:44px;font-size:15px;margin-bottom:6px}
.cx-sj .sujet .opts.n2,.cx-sj .sujet .opts.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.cx-sj .sujet .opts.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cx-sj .sujet .opt{align-items:flex-start;padding:8px 10px;gap:8px;font-size:15px}
.cx-sj .sujet .opt .r{margin-top:1px}
.cx-sj .sujet .opt .d{display:block;margin-top:2px;font:500 13px/1.3 var(--body);color:var(--mute)}
/* § 5.3 (23/10) : le sujet sauté en rattrapage express, redemandé dans la colonne de l'écran qui s'en sert */
.sj-redemande{display:grid;gap:6px;margin-top:12px;padding:10px 12px;border-radius:14px;border:2px dashed var(--act);background:var(--actbg)}
.sj-redemande .st{font:700 12.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.sj-redemande .sj-why{font:600 15px/1.35 var(--body);margin:0}
.sj-redemande .opts{display:grid;gap:6px;grid-template-columns:repeat(2,minmax(0,1fr))}
.sj-redemande .opts.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sj-redemande .opt{align-items:center;min-height:44px;padding:6px 10px;gap:8px;font-size:15px}
.sj-redemande .opt .d{display:block;margin-top:2px;font:500 13px/1.3 var(--body);color:var(--mute)}
.sj-redemande #sjr-ok{justify-self:start}
/* Les éléments d'une grille ne rétrécissent pas sous leur contenu par défaut : sans min-width:0,
   un libellé long pousse le bouton « ? » HORS de sa colonne, par-dessus le choix de sujet voisin
   (vérifié le 22/09 : le clic sur « ? » sélectionnait un sujet). */
.cx-fields{display:grid;gap:10px;min-width:0}
.cx-field{min-width:0}
.cx-lab{min-width:0}
/* La rangée doit être au moins aussi haute que le bouton « ? » : sinon, en mode compact,
   le bouton déborde sur le champ et sa cible tactile passe sous la norme WCAG 2.2 AA. */
.cx-lab{display:flex;align-items:center;gap:8px;margin-bottom:4px;min-height:28px}
.cx-field label{display:flex;align-items:center;gap:8px;font:700 15px var(--body);min-width:0;flex:1 1 auto}
/* Le libellé doit pouvoir rétrécir : sinon il déborde sur le bouton « ? » et le recouvre
   (cible tactile ramenée à 9 px de large, sous la norme WCAG 2.2 AA). */
.cx-field label .lt{min-width:0;overflow-wrap:anywhere}
.cx-field .qmark{flex:0 0 auto}
.cx-field .k{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font:800 13px var(--mono);background:var(--actbg);color:var(--act);flex-shrink:0}
.cx-field .qmark{margin-left:auto;width:28px;height:28px;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--mute);font:800 14px var(--body);cursor:pointer;position:relative}
/* Zone cliquable de 44 × 36 px autour du « ? » de 28 px (S1, GUIDE A3 : 44 de large ; rien vers le bas, voir ci-dessous) : elle reste au-dessus de 24 px même si la garde réduit le panneau (WCAG 2.5.8). */
.cx-field .qmark::before{content:"";position:absolute;inset:-9px -9px 0 -9px}   /* rien vers le bas : le champ commence 2 px dessous (revue M4) */
.cx-field textarea{width:100%;min-height:52px;border-radius:12px;border:2px solid var(--field);background:var(--card);color:var(--ink);font:600 15.5px/1.35 var(--body);padding:9px 12px;resize:vertical}
.cx-field textarea:focus{border-color:var(--blue)}   /* l'anneau : celui du kit (A2 ; 2 px --act avant) */
.cx-aide{font:600 14px/1.35 var(--body);color:var(--act);background:var(--actbg);border-radius:9px;padding:7px 10px;margin-bottom:6px}
.cx-aide .cx-aide-ex{display:block;margin-top:4px;font-weight:500;color:var(--ink)}
/* S1 (C020, C110) : au-dessus de 760 px, l'aide d'un point s'ouvre PAR-DESSUS ce qui précède (fond opaque), au lieu de
   pousser les champs : le champ ③ ne passe plus sous la barre du bas pendant qu'on lit son exemple. */
@media (min-width:761px){
  .cx-field{position:relative}
  .cx-aide{position:absolute;left:0;right:0;bottom:calc(100% - 2px);z-index:6;margin:0;border:1px solid var(--act);background-color:var(--card);background-image:linear-gradient(var(--actbg),var(--actbg));box-shadow:0 6px 18px rgba(7,9,14,.22)}
  /* reprise 1 (3/11) : l'aide qui sortirait du panneau par le haut (celle du point 1 : sous la frise, coupée par la scène)
     s'ouvre vers le bas, sous son champ (engine.js, placeAide) */
  .cx-aide.bas{top:calc(100% + 4px);bottom:auto}
}
.cx-prev{border-radius:12px;border:1px dashed var(--line2);background:var(--bg1);padding:11px 12px;font:500 14px/1.5 var(--mono);white-space:pre-wrap;word-break:break-word;max-height:min(40vh,260px);overflow:auto}
.cx-head{font:700 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
.btn-row .sb{min-height:48px;font-size:16px;padding:0 16px}
.gate-hint{font:600 14.5px var(--body);color:var(--mute)}
.gate-hint.ok{color:var(--ok)}

/* Écran court et étroit (1024×600, la 2e taille de la porte 2 du GUIDE) : la description d'un sujet ne s'affiche que pour le
   sujet choisi — la colonne de gauche tient sans réduire son texte sous 12 px (S1, C110). */
@media (min-width:761px) and (max-width:1180px) and (max-height:700px){.cx-sj .sujet .opt:not([aria-checked="true"]) .d{display:none}
  .cx-sj{margin-top:10px}.cx-sj .sujet,.cx-sj .sujet .opts{gap:6px}.cx-sj .sujet .sj-autre{min-height:calc(44px / var(--z, 1));margin:2px 0 0;padding:4px 10px}   /* reprise 4 (s1, A3) : 44 px d'écran, zoom de la garde compris (--z) ; MOT-JUSTE é6 a raccourci son texte pour la place */
  .s-stage.tight:has(> #cx) .s-left h1{margin:4px 0 6px}.s-stage.tight:has(> #cx) .s-left .tip{margin-top:6px}
  .cx-b{gap:8px}.btn-row{gap:6px}.btn-row .sb{min-height:44px}
  .s-stage:has(> #cx) .s-kick,.cx-sj .sujet .st,.cx-sj .sujet .opt .d{font-size:13.5px}}   /* réduits à 90 % au pire (LOUPE é5, « ✎ ») : 12,2 px */

/* ------------------------------------------------------------ planche (bande d'images + sondage) */
.planche{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}
.planche figure{margin:0;min-width:0;scroll-snap-align:start}
.planche img{width:100%;height:auto;max-height:190px;object-fit:contain;border-radius:12px;border:1px solid var(--line);background:#fff;display:block}
.planche figcaption{font:600 13px/1.3 var(--body);color:var(--mute);margin-top:5px}
.planche figcaption b{color:var(--ink)}
.sondage{margin-top:14px}
.sondage .sq{margin-bottom:9px}
.sond-o{display:grid;gap:9px}   /* le groupe radio du sondage (C044) ; l'explication suit dans .sond-why, zone vivante */
.sondage .sq{font:700 17px/1.35 var(--body)}


/* ------------------------------------------------------------ fin */
.recap{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.recap i{font:700 15px var(--body);font-style:normal;background:var(--okbg);color:var(--ok);padding:6px 11px;border-radius:9px}
.bye{margin-top:12px;font:600 15px var(--body);color:var(--mute)}
.quote{margin:4px 0 0;font:700 21px/1.4 var(--body)}
.bonus{margin-top:12px;display:grid;gap:8px}
.bonus .bt{font:700 12.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.bonus details{border-radius:12px;border:1px solid var(--line2);background:var(--bg1);padding:0 12px}
.bonus summary{cursor:pointer;padding:10px 0;font:700 15.5px var(--body);list-style:none;display:flex;gap:8px;align-items:center}
.bonus summary::-webkit-details-marker{display:none}
.bonus summary::after{content:"＋";margin-left:auto;color:var(--soft);font:800 16px var(--mono)}
.bonus details[open] summary::after{content:"−"}
.bonus .bonus-all>summary small{font:600 12.5px var(--mono);color:var(--soft);margin-left:6px}
.bonus .bonus-all[open]{padding-bottom:10px}
.bonus .bonus-all details{margin-top:8px}
.s-panel ul.pts{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.s-panel ul.pts li{font:600 18px/1.4 var(--body);display:grid;grid-template-columns:30px 1fr;gap:8px}
.s-panel ul.pts li b{font:800 15px var(--mono);color:var(--act);padding-top:2px}
.s-stage.tight .s-panel ul.pts{gap:8px}.s-stage.tight .s-panel ul.pts li{font-size:16.5px}
.bonus p{margin:0 0 12px;font:600 15px/1.45 var(--body);color:var(--mute)}

/* ------------------------------------------------------------ aide */
.s-help{position:fixed;inset:0;background:rgba(7,9,14,.45);display:none;z-index:50}
.s-help.on{display:block}
.s-help aside{position:absolute;right:0;top:56px;bottom:0;width:440px;max-width:100%;background:var(--card);color:var(--ink);padding:24px;display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--line2);overflow-y:auto}
.s-help h2{font:700 22px var(--display);margin:0}
.s-help ul{margin:0;padding-left:20px;font:500 17px/1.55 var(--body)}
.s-help li{margin:6px 0}
.s-help .raise{font:600 15.5px var(--body);color:var(--mute)}
.s-help #helpok{margin-top:auto;width:100%}
/* F2 (23/10) : le ❓ « Avant de commencer » à côté du titre, et son grand format dans le tiroir de l'aide (un seul tiroir) */
#aide-box,.ca-box{display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
#aide-box[hidden],.ca-box[hidden]{display:none}
.s-tt{display:flex;align-items:flex-start;gap:10px}
.s-tt h1{flex:1 1 auto;min-width:0}
.ca-q{flex:0 0 auto;margin-top:8px;width:44px;height:44px;border-radius:50%;border:2px solid var(--act);background:var(--actbg);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.ca-q:hover{background:var(--card)}
.ca-q.pulse{animation:caPulse 1.2s ease-in-out 3}
/* rgba, jamais color-mix ni oklch, lab, lch, color : html2canvas 1.4.1 (capture du ⚠️) ne les lit pas, et pendant le
   pouls du ❓ le formateur ne pouvait plus signaler (s4, relayé par Class, 31/10) */
@keyframes caPulse{0%,100%{box-shadow:0 0 0 0 rgba(43,127,224,0)}50%{box-shadow:0 0 0 8px rgba(43,127,224,.35)}}
@media (prefers-reduced-motion:reduce){.ca-q.pulse{animation:none;border-width:3px}}
.s-help aside.big{width:min(760px,100%)}
.ca-box h2{font:800 30px var(--display);margin:0}
.ca-box .ca-t{font:700 18px var(--body);color:var(--mute);margin:0}
.ca-box .ca-l{margin:4px 0 0;padding-left:34px;font:600 24px/1.45 var(--body)}
.ca-box .ca-l li{margin:10px 0}
.ca-box .ca-ok{font:600 22px/1.45 var(--body);margin:8px 0 0;padding:12px 14px;border-radius:12px;background:var(--okbg);color:var(--ink)}
.ca-box .ca-acts{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
/* revue du 24/10 : un texte trop long défile DANS sa zone ; titre et boutons restent visibles (« C'est parti » jamais sous l'écran) */
.ca-box{min-height:0}
.ca-corps{display:flex;flex-direction:column;gap:inherit;flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.ca-box .ca-acts .sb{flex:1 1 200px}
@media (max-width:560px){.ca-box h2{font-size:24px}.ca-box .ca-l{font-size:19px;padding-left:28px}.ca-box .ca-ok{font-size:18px}}
/* F6 (24/10) : « Ton avis », troisième usage du tiroir de l'aide */
#av-box{display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
#av-box[hidden]{display:none}
#av-box h2{font:800 28px var(--display);margin:0}
#av-box .av-t{font:600 16px/1.4 var(--body);color:var(--mute);margin:0}
.av-q{display:grid;gap:6px}
.av-l{font:700 19px/1.3 var(--body)}
.av-n{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.av-b{min-height:48px;border-radius:12px;border:2px solid var(--line2);background:var(--card);color:var(--ink);font:800 20px var(--body);cursor:pointer}
.av-b[aria-checked="true"]{border-color:var(--act);background:var(--actbg)}
.av-e{display:flex;justify-content:space-between;font:600 13px var(--body);color:var(--mute)}
.av-quoi{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:0;display:grid;gap:6px}
.av-quoi legend{font:700 16px var(--body);padding:0 4px}
.av-quoi label{display:flex;gap:10px;align-items:flex-start;font:600 16px/1.35 var(--body);min-height:32px;cursor:pointer}
.av-quoi input{width:20px;height:20px;margin-top:1px;flex:0 0 auto;accent-color:var(--act)}
.av-acts{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
.av-acts .sb{flex:1 1 180px}
.av-merci{flex:1 1 100%;font:800 22px var(--display);color:var(--ok);margin:0}
#help #av-ouvre{width:100%}
/* revue a11y du 24/10 : texte pour lecteur d'écran seulement ; « Envoyer » grisé qui dit ce qui manque ; note manquante */
.sr,.av-merci:empty{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.av-acts .sb.go[aria-disabled="true"]{background:var(--bg2);color:var(--mute);cursor:not-allowed}
.av-l.manque{color:var(--bad)}
#av-titre:focus,#ca-titre:focus,#av-merci:focus{outline:none}
/* le ✕ passe dans le coin : sa ligne à lui seul ferait défiler l'avis sur un écran de 600 px */
.s-help aside.avis #helpx{position:absolute;top:12px;right:14px}
.s-help aside.avis #av-box h2{padding-right:56px}
/* écran court (1280 × 600) : tout le panneau tient, boutons compris, sans défiler */
@media (max-height:720px) and (min-width:561px){#av-box{gap:7px}#av-box h2{font-size:23px}#av-box .av-t{font-size:14.5px}.av-l{font-size:16.5px}.av-b{min-height:40px;font-size:18px}.av-quoi{padding:6px 10px;gap:3px}.av-quoi label{font-size:14.5px;min-height:26px}.av-quoi legend{font-size:14.5px}}
@media (max-height:720px) and (min-width:561px){.s-help aside.big{padding:16px 24px;gap:8px}.ca-box{gap:8px}.ca-box h2{font-size:25px}.ca-box .ca-l{font-size:20px;line-height:1.38}.ca-box .ca-l li{margin:6px 0}.ca-box .ca-ok{font-size:18.5px;padding:10px 12px;margin-top:4px}}

/* Signalement Ékole : widget.js?v=12 cherche #ekTheme, prend la classe .ekfb-inline et
   s'insère juste APRÈS lui, dans le même conteneur. Les deux boutons sont donc toujours
   côte à côte, au même coin — ici on leur donne la même taille et le même arrondi. */
.s-head .ekfb-inline{width:44px!important;height:44px!important;border-radius:12px!important;font-size:18px!important}

/* ------------------------------------------------------------ verrou d'atelier */
.s-exp{margin-left:12px;padding:4px 10px;border-radius:999px;background:var(--actbg);color:var(--act);font:800 12.5px var(--mono);white-space:nowrap}
button.s-exp{border:0;cursor:pointer}   /* « 👁 Aperçu ✕ » : la sortie de l'aperçu */
/* reprise 4 (s1, A3) : la puce d'aperçu se clique sur 44 px de haut (25 px visibles), sans rien déplacer : zone ::before */
button.s-exp.apr{position:relative}button.s-exp.apr::before{content:"";position:absolute;inset:-10px -2px}
.s-lock{flex:1;display:grid;place-items:center;padding:24px}
.s-lock .s-panel{max-width:560px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.s-lock .big{font-size:44px;margin:0}.s-lock h1{font:700 29px/1.12 var(--display);margin:0}
.s-lock p{font:600 17px/1.45 var(--body);margin:0;color:var(--mute)}.s-lock .acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:6px 0}
.s-lock .hint{font-size:14.5px}.s-lock .back{font:700 14px var(--body);color:var(--act)}
/* « 👁 Aperçu ✕ » est la SORTIE de l'aperçu : elle reste au téléphone (port de S3 cf90b0c, dlgevi — ❌ de Paul
   sur zpcqiu, même défaut en S2) ; la marque se masque à côté. */
@media (max-width:560px){.s-exp:not(button){display:none}button.s-exp{margin-left:4px;padding:4px 8px;font-size:12px}
  .s-head:has(button.s-exp) .s-brand{display:none}}
/* Reprise 2 (3/11) : le badge express et la puce d'aperçu s'affichent ensemble (headHtml). Sous 901 px, ils ne tiennent pas
   tous les deux à côté de la marque et de l'outil (de 6 à 152 px de trop, mesuré de 561 à 830 px) : la puce reste — témoin
   et sortie de l'aperçu —, le badge cède sa place. Seul, le badge poussait déjà l'outil hors de l'écran de 561 à 585 px
   (MOT-JUSTE, jusqu'à 28 px) : il se masque dès 600 px. */
@media (max-width:900px){.s-head:has(.s-exp.apr) .s-exp:not(.apr){display:none}}
@media (max-width:600px){.s-exp:not(.apr){display:none}}

/* ------------------------------------------------------------ téléphone */
@media (max-width:760px){
  .scr{grid-template-rows:52px 40px minmax(0,1fr) 68px}
  .s-head{padding:0 10px;gap:8px}.s-brand > span{display:none}.s-tool span{display:none}.s-tool{padding:0 10px}
  .s-back{margin:0 -4px 0 -6px;padding:0 6px}   /* « Accueil » reste écrit (C068) : seul, le « ← » ressemblait à « ← Avant » */
  .s-track{grid-template-columns:auto minmax(0,1fr) 88px;gap:10px;padding:0 10px}.s-count .lg{display:none}.s-dot{display:none}
  .s-help aside{top:52px}.toast{bottom:78px;font-size:15.5px}
  .s-clock{font-size:14px;padding:4px 8px}
  .s-stage,.s-stage.intro{grid-template-columns:1fr;padding:18px 16px 24px;gap:18px;align-items:start;overflow-y:auto}
  .s-left h1,.intro h1{font-size:25px}.s-left p{font-size:17.5px}.goal-t{font-size:19px}
  /* La barre du bas doit tenir dans 390 px : « ✓ gardé » passe au-dessus (sinon la
     colonne du milieu vole la place du bouton Suivant et la barre déborde). */
  .s-nav{position:relative;padding:0 8px;gap:6px;grid-template-columns:auto auto minmax(0,1fr)}
  .s-mid{gap:6px}.s-mid .sb.soft span{display:none}.s-mid .sb.soft{padding:0 11px;min-height:44px}
  .s-nav .sb.ghost{padding:0 11px;font-size:15px;min-height:44px}
  .saved{position:absolute;top:-17px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--bg1);padding:0 8px;border-radius:7px;z-index:5}
  .sb.next{min-width:0;padding:0 12px;font-size:15px;min-height:46px}
  .restart .lg{display:none}.restart .sm{display:inline;font-size:24px;text-decoration:none}
  .sb.next .lg{display:none}   /* « ✓ J'ai fini cet atelier » sans la suite, à l'étroit */
  .flashes,.flashes.n2,.flashes.n4,.tri-cards,.voie-cards,.cx{grid-template-columns:1fr}
  .cx-sj .sujet .opts.n2,.cx-sj .sujet .opts.n3,.cx-sj .sujet .opts.n4{grid-template-columns:1fr}
  /* S1 (C049, C054) : au téléphone et en zoom, la planche passe en 2 × 2 — les quatre figures se voient sans glisser, et la
     bande ne défile plus à l'horizontale sans accès au clavier. */
  .planche{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));overflow-x:visible;scroll-snap-type:none}
  .planche img{max-height:140px}
  .q-imgs figure{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}   /* 51956z (ERA-19) : le fondu entre écrans aussi */

/* ------------------------------------------------------------ carnet */
.page{min-height:100vh;display:flex;flex-direction:column}
.page .s-head{position:sticky;top:0;z-index:10}
.wrap{max-width:1160px;width:100%;margin:0 auto;padding:0 28px}
.sb.primary{background:var(--btn);color:#fff}
.foot{margin-top:auto;border-top:1px solid var(--line);padding:18px 28px 26px;text-align:center;color:var(--soft);font-size:14px}
.foot a{color:var(--act)}
.carnet h1{font:800 clamp(30px,4vw,42px)/1.05 var(--display);letter-spacing:-.02em;margin:26px 0 6px}
.carnet .lead{font:600 18px/1.5 var(--body);color:var(--mute);margin:0 0 18px;max-width:64ch}
/* S1 (reprise 1) : le témoin d'aperçu du carnet, à l'écran ET sur le papier (la puce de l'en-tête ne s'imprime pas) */
.carnet .apr-print{font:700 15px/1.4 var(--body);color:var(--act);background:var(--actbg);border:1px solid var(--act);border-radius:10px;padding:6px 12px;margin:-6px 0 18px;width:max-content;max-width:100%}
.carnet .who{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.carnet .who .lab{font:700 15px var(--body);margin:0}
.carnet .who input{height:52px;border-radius:12px;border:2px solid var(--field);background:var(--card);color:var(--ink);font:700 18px var(--body);padding:0 14px;min-width:240px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px;margin-bottom:8px}
.ccard{border-radius:16px;border:1px solid var(--line);background:var(--card);padding:16px 18px;display:grid;gap:8px;align-content:start;break-inside:avoid}
.ccard .h{display:flex;gap:10px;align-items:baseline}
.ccard .h .e{font-size:22px}
.ccard .h b{font:700 18px/1.2 var(--display)}
.ccard .st2{font:700 12px var(--mono);padding:3px 9px;border-radius:999px;white-space:nowrap;width:max-content}
.ccard .st2.ok{background:var(--okbg);color:var(--ok)}.ccard .st2.go{background:var(--actbg);color:var(--act)}.ccard .st2.no{background:var(--bg1);color:var(--mute)}
.ccard .chips{display:flex;flex-wrap:wrap;gap:6px}
.ccard .chips i{font:700 13.5px var(--body);font-style:normal;background:var(--bg1);border:1px solid var(--line);padding:3px 9px;border-radius:8px}
.ccard .badge{font:800 13px var(--body);background:var(--warnbg);color:var(--warn);padding:4px 10px;border-radius:999px;width:max-content}
.ccard .qd{font:600 14.5px/1.4 var(--body);color:var(--mute)}
.ccard .qd b{color:var(--ink)}
.ccard pre{margin:0;font:500 12.5px/1.45 var(--mono);white-space:pre-wrap;word-break:break-word;background:var(--bg1);border-radius:10px;padding:8px 10px;max-height:150px;overflow:auto}
.carnet .actions{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 34px}
@media (max-width:560px){.wrap{padding:0 16px}}
@media print{
  .s-head,.actions,.foot,#ekfb-btn,.ekfb-inline,.fiche-acts,.fiche-nom,.toast{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .page{min-height:0}
  /* une carte après l'autre (C157) : deux colonnes laissaient la page 1 vide et cinq pages pour trois fiches */
  .cards{display:block}
  .ccard{border-color:#bbb;break-inside:auto;margin:0 0 10px}
  /* carnet imprimé depuis un poste en thème sombre (C153) : les jetons du jour, encre noire sur papier blanc */
  :root[data-theme="dark"]{--bg:#FAFAF7;--bg1:#F2F1EC;--bg2:#E6E4DC;--card:#FFFFFF;--ink:#07090E;--mute:#434959;--soft:#646C81;--line:rgba(7,9,14,.09);--line2:rgba(7,9,14,.17);--field:#767C8A;
    --ok:#2F6B1B;--bad:#B3202C;--warn:#7A5B00;--act:#1F66BF;--okbg:rgba(92,179,57,.15);--badbg:rgba(230,57,70,.10);--warnbg:rgba(244,196,48,.22);--actbg:rgba(43,127,224,.10);--skybg:rgba(77,181,227,.18)}
  .carnet .who input{border:1px solid #999}
  /* Le prompt entier sur le papier : la limite de hauteur de l'écran le coupait (7sagh8). */
  .ccard pre{max-height:none;overflow:visible}
  *:focus,*:focus-visible{outline:none!important}   /* l'anneau de focus ne s'imprime pas (revue A11Y-07) */
}

/* Resserrement automatique quand la scène déborde à 1280×600 : le moteur pose « tight »
   avant de signaler un débordement (data-overflow). Ce qui déborde encore après ce
   resserrement est un écran trop chargé — c'est au contenu de le couper en deux. */
.s-stage.tight{padding-top:8px;padding-bottom:8px}
.s-stage.tight .s-left p{font-size:18px}.s-stage.tight .s-left h1{font-size:28px;margin:6px 0 10px}
.s-stage.tight .s-left .tip{font-size:15.5px;margin-top:8px}
.s-stage.tight .s-panel{padding:14px 16px}
/* l'intro EST la scène (main.s-stage.intro) : « .s-stage.tight .intro h1 » ne visait rien (23/10, relevé par Apps (s3)) */
.s-stage.intro.tight h1{font-size:33px;margin:6px 0 10px}
.s-stage.intro.tight .goal-t{font-size:20px}
.s-stage.intro.tight .teaser{margin-top:12px}
.s-stage.intro.tight .voies{margin-top:14px}
.s-stage.tight .flashes .flip{min-height:190px}
.s-stage.tight .opt{min-height:44px;padding:6px 12px;font-size:15.5px}
.s-stage.tight .q .qq{font-size:16px}
.s-stage.tight .q + .q{margin-top:8px}
.s-stage.tight .q-imgs img{max-height:88px}
.s-stage.tight .why{padding:7px 10px;font-size:14.5px}
/* 23/10 — CO-PILOTE é6 (vrai/faux à choix, 6 lignes) débordait de 30 px à 1024×600 après la validation, le panneau déjà
   au plancher de zoom : on resserre les lignes validées, en mode resserré seulement. */
.s-stage.tight .vf{gap:4px}
.s-stage.tight .vf-row.checked .vf-btns button{height:34px}
.s-stage.tight .vf-row .exp{font-size:13px;line-height:1.22}
.s-stage.tight .vf-row.checked{padding-top:1px;padding-bottom:1px;gap:8px}
.s-stage.tight .vf-row.vf-choix.checked > span:first-child{font-size:14px;line-height:1.28}
/* S1 (reprise 1 du 3/11) : validé avec des réponses fausses, LOUPE é3 réduisait son panneau à 0,94 à 1024×600 (explications
   à 11,75 px). La place se gagne sur la phrase (15 px), les boutons, qui ne servent plus (56 × 30 px, aria-disabled), et les
   marges du panneau ; l'explication reste à 13 px. Mesuré, toutes réponses fausses : zoom 1 à 1024×600 et 1280×600. */
.s-stage.tight .vf-row.checked:not(.vf-choix) > span:first-child{font-size:15px;line-height:1.28}
.s-stage.tight .vf-row.checked:not(.vf-choix) .vf-btns button{min-width:56px;height:30px;padding:0 8px}
.s-stage.tight .s-panel:has(> .vf){padding-top:10px;padding-bottom:10px}
.s-stage.tight .vf ~ .valid{margin-top:6px}
.s-stage.tight .valid{margin-top:8px}
.s-stage.tight .sb.go{min-height:44px;font-size:15.5px}
.s-stage.tight .chk button{min-height:46px;font-size:15.5px}
.s-stage.tight .meas input[type="text"]{height:46px;font-size:16px}
.s-stage.tight .stepper button,.s-stage.tight .stepper output{width:auto;min-width:64px;height:46px;font-size:20px}
.s-stage.tight .cx-field textarea{height:48px;min-height:48px;font-size:14px;line-height:1.3;padding:5px 10px}   /* deux lignes visibles : une brique pré-remplie (18/10) ne doit pas paraître coupée */
.s-stage.tight .cx-field label{font-size:13.5px;margin-bottom:2px}
.s-stage.tight .cx-lab{min-height:28px;margin-bottom:2px}
.s-stage.tight .cx-prev{max-height:min(36vh,220px);font-size:13px}
.s-stage.tight .fig figcaption{font-size:12.5px;padding:5px 10px}
/* S1 (assemblage du 3/11, C030) : la légende de la planche reste à 14 px, les figures cèdent la place (80 px) — après le
   vote, la garde ne réduit plus le panneau qu'à 0,98 à 1024×600 (légendes à 11,8 px avant). Après la règle .fig : même poids. */
.s-stage.tight .planche img{max-height:80px}
.s-stage.tight .planche figcaption{font-size:14px;padding:4px 8px}
.s-stage.tight .sondage .sq{font-size:15.5px}
.s-stage.tight .bin{min-height:64px}
.s-stage.tight .tri-card{min-height:42px;font-size:14.5px}
.s-stage.tight .bonus summary{padding:7px 0;font-size:14.5px}

/* fin : une ligne vers le carnet à la place des puces (tient dans 600 px) */
.carnet-link{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:8px 12px;border-radius:10px;background:var(--actbg);font:600 15px/1.3 var(--body);color:var(--ink);text-decoration:none;max-width:100%}
.carnet-link b{color:var(--act);white-space:nowrap}
.s-stage.tight .carnet-link{margin-top:8px;padding:6px 10px;font-size:14px}
/* constructeur : l'exemple tient sur une ligne, il se déplie sous le champ qu'on remplit */

/* écran de fin : trois colonnes */
.s-stage.fin3{grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:28px}
.fin-side{min-width:0;display:grid;gap:10px;align-content:center}
.fin-side .bt{font:700 12.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.fin-side .chk{gap:8px}
.fin-side .chk button{min-height:44px;font-size:14.5px;line-height:1.3;padding:6px 10px;grid-template-columns:26px 1fr;gap:8px}
.fin-side .chk .tk{width:24px;height:24px;font-size:14px;border-radius:7px}
.fin-side .carnet-link{margin-top:0;font-size:14px}
.fin-side .bonus{margin-top:0}
.fin-side .bonus summary{font-size:14.5px;padding:8px 0}
@media (max-width:760px){.s-stage.fin3{grid-template-columns:minmax(0,1fr);gap:16px}.fin-side{align-content:start}}

/* Retours de la séance de test du 29/09 (S2) */
/* 6o348v — V/F corrigé : la couleur juste/faux l'emporte sur le bleu du choix (la règle
   [aria-pressed] est déclarée après .good/.bad, à spécificité égale : la mauvaise réponse restait bleue) */
.vf-row.checked .vf-btns button.good{border-color:var(--green);background:var(--okbg);color:var(--ok)}
.vf-row.checked .vf-btns button.bad{border-color:var(--red);background:var(--badbg);color:var(--bad)}
/* En-tête sous 420 px : depuis le 🔒 formateur (unlock.js, 28/09), le ⚠️ sortait de l'écran à 375 px (60 px de trop) —
   le nom de l'atelier lui cède la place (il reste dans le titre de l'écran). Même règle que S3 et S5. */
@media (max-width:560px){.s-head .s-brand{display:none}}   /* S1 (C068) : 560 px (420 en S2) — « ← Accueil » garde son libellé, la marque cède la place */

/* 18/10 — écran « au tableau » (formateur: true) : l'élève voit seulement l'invitation à regarder le tableau. */
.s-tableau{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.s-tableau .big{font-size:56px;line-height:1;margin:0}
.s-tableau p{font:600 17px/1.45 var(--body);margin:0;color:var(--mute)}.s-tableau b{font:700 24px/1.2 var(--display);color:var(--ink)}
.s-kick i + i{margin-left:6px}
/* 18/10 — constructeur : « 🎲 Une autre version » sur la ligne du choix de sujet (aucune hauteur en plus). */
.cx-sj .sujet .st{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cx-autre{font:700 13px var(--body);text-transform:none;letter-spacing:0;padding:5px 10px;border-radius:9px;border:1px solid var(--line2);
  background:var(--card);color:var(--ink);cursor:pointer;white-space:nowrap}
.cx-autre:hover{border-color:var(--blue)}
/* 18/10 — vrai/faux à deux libellés (« choix ») : boutons à la largeur du texte ; au téléphone, sous la phrase. */
.vf-row.vf-choix .vf-btns button{min-width:0;padding:0 12px;font-size:14px;line-height:1.2}
/* six lignes + leurs explications après « Valider » : plus serré, pour tenir aussi à 1024×640 (revue du 18/10) */
.vf-row.vf-choix{min-height:50px;gap:10px}.vf-row.vf-choix.checked > span:first-child{font-size:15px}
.vf-row.vf-choix .exp{font-size:12.5px;line-height:1.25}.vf-row.vf-choix.checked .vf-btns button{height:40px}
@media (max-width:560px){.vf-row.vf-choix{grid-template-columns:minmax(0,1fr)}.vf-row.vf-choix .vf-btns{justify-content:flex-end}}
/* La fiche = le carnet (c06b1d, 19/10 ; port de S3) : zone « colle ici », aperçu de la fiche, fiche du carnet,
   impression d'UNE fiche (#print-zone, body.print-one). */
.colle{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.colle label{font:700 15px/1.35 var(--body);color:var(--ink)}
.colle textarea{width:100%;box-sizing:border-box;min-height:64px;padding:8px 10px;border-radius:10px;border:2px solid var(--field);background:var(--card);color:var(--ink);font:500 14px/1.4 var(--body);resize:vertical}
.s-stage.tight .colle textarea{min-height:54px}
.fiche-apercu{display:flex;flex-direction:column;gap:8px}
.fiche-apercu .st{font:800 15px var(--body);color:var(--ink)}
.fiche-apercu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fiche-apercu li{padding:8px 12px;border-radius:10px;font:600 15px/1.35 var(--body);background:var(--bg1);border:1px solid var(--line)}
.fiche-apercu li.ok{background:var(--okbg);color:var(--ok)}
.fiche-apercu li.non{background:var(--warnbg);color:var(--ink)}
.fiche-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fiche-acts .sb[disabled]{opacity:.55;cursor:not-allowed}
.ccard .fiche{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line2)}
.fiche h3{margin:0 0 6px;font:800 15px var(--body)}
.fiche .fs{margin:6px 0}
.fiche .fs > b{display:block;font:800 13.5px var(--body);color:var(--ink)}
.fiche .fl span{display:block;font:600 12px var(--body);color:var(--mute)}
.fiche .fl p{margin:2px 0 6px;white-space:pre-wrap;word-break:break-word;font:500 13px/1.4 var(--body)}
.fiche .fl p.vide{color:var(--warn);font-style:italic}
.fiche .fl p a{color:var(--act);word-break:break-all}
.fiche-nom{font:500 12px var(--body);color:var(--mute);margin:6px 0 0}
/* La zone d'impression d'UNE fiche (port de S3 13723f4). Ses règles valent à l'écran aussi : le moteur y mesure une fiche
   avec image hors écran (.pz-mesure, invisible) avant d'imprimer, et la réduit si elle dépasse une page (imprimeFiche). */
#print-zone{display:none;--ink:#000;--mute:#444;--warn:#7A5B00;color:#000;background:#fff}   /* thème sombre aussi : encre noire sur papier blanc */
#print-zone.pz-mesure{display:block;position:absolute;left:-10000px;top:0;width:165.9mm;visibility:hidden}   /* Lettre à marges de 2,54 cm (voir PZ_H_MM) */
#print-zone .pz-h{font:600 10pt sans-serif;color:#444;margin:0 0 8px}
#print-zone a{color:#1B4FA0}
#print-zone .fiche{border:0}
#print-zone .fiche .fl p{font-size:11pt}
#print-zone .fiche .fs{break-inside:avoid}
/* une fiche avec image (STUDIO) : l'affiche à gauche, la commande à droite, texte en 10 pt, affiche 8 cm */
#print-zone .fiche-img .fl p,#print-zone .fiche-img .fnote{font-size:10pt}
#print-zone .fiche-img .fimg img{max-height:4cm;border-color:#bbb}
#print-zone .fiche-img .fs.grand .fimg img{max-height:8cm}
#print-zone .fiche-img{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:6mm;align-items:start}
#print-zone .fiche-img > *{grid-column:1/-1}
#print-zone .fiche-img > .fs.grand{grid-column:1}
#print-zone .fiche-img > .fs.grand + .fs{grid-column:2}
@media print{
  body.print-one .page,body.print-one #app > :not(#print-zone){display:none!important}
  body.print-one #print-zone{display:block}
}
/* Janvier (port de S3 fhm702, 19/10) : l'image de l'élève entre dans l'app (Ctrl+V, fichier, glisser) et s'imprime sur la fiche */
.img-eleve{margin-top:12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:10px 12px;border-radius:12px;border:2px dashed var(--line2);background:var(--bg1)}
.img-eleve.ok{border-style:solid;border-color:var(--ok)}
.img-eleve.sur{border-color:var(--act);background:var(--actbg)}
.img-eleve .ie-lab{grid-column:1/-1;font:700 15px/1.35 var(--body);color:var(--ink)}
.img-eleve .ie-zone{display:grid;place-items:center;min-height:64px;border-radius:10px;background:var(--card);padding:6px;font:600 15px/1.35 var(--body);color:var(--mute);text-align:center}
.img-eleve .ie-zone img{display:block;max-width:100%;max-height:120px;border-radius:6px}
.s-stage.tight .img-eleve .ie-zone img{max-height:96px}
.img-eleve .ie-acts{display:flex;flex-direction:column;gap:6px;align-items:flex-start;max-width:230px}   /* à droite du cadre : l'écran reste court */
@media (max-width:560px){.img-eleve{grid-template-columns:1fr}.img-eleve .ie-acts{flex-direction:row;flex-wrap:wrap;align-items:center;max-width:none}}
.img-eleve .ie-btn{position:relative;min-height:44px;font-size:15px;padding:0 14px}
.img-eleve .ie-btn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}   /* le vrai champ, invisible mais cliquable et au clavier */
.img-eleve .ie-btn:focus-within{outline:calc(3px / var(--z, 1)) solid var(--blue);outline-offset:calc(2px / var(--z, 1))}   /* l'anneau du kit (A2) sur le bouton qui porte le champ invisible */
.img-eleve .ie-st{font:700 14px/1.3 var(--body);color:var(--ok)}
.img-eleve .ie-st.bad{color:var(--bad)}
.fiche .fimg{margin:4px 0 6px}
.fiche .fimg img{display:block;max-width:100%;max-height:220px;border-radius:6px;border:1px solid var(--line)}
.fiche .fs.grand .fimg img{max-height:320px}
.fiche .fs-g{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.fiche .fs-g > .fl-img{flex:0 0 auto;max-width:45%}
.fiche .fs-g > .fs-t{flex:1 1 200px;min-width:0}
.fiche .fnote{margin:2px 0 6px;font:800 13px var(--body);color:var(--ink)}
@media print{   /* carnet entier (la fiche imprimée seule : #print-zone, plus haut) */
  .fiche .fs{break-inside:avoid}
  .fiche .fimg img{max-height:4.5cm;border-color:#bbb}
  .fiche .fs.grand .fimg img{max-height:8cm}
  .fiche .fnote{font-size:11pt}
}
/* 51956z — accessibilité (rapport du 05/10) */
.skip{position:absolute;left:-9999px;top:8px;z-index:60;padding:10px 14px;border-radius:10px;background:var(--card);color:var(--ink);font:700 15px var(--body);box-shadow:var(--shadow)}
.skip:focus{left:8px}   /* ERA-22 : « Aller à l'activité » avant les 16 Tab de l'en-tête et de la piste */
#activite:focus{outline:none}
.s-clock{white-space:nowrap}   /* ERA-14 : le chrono ne passe plus sur deux lignes avec l'espacement 1.4.12 */
/* S1 (GUIDE A3 ; C040, C069, C114, C161) : 44 px de zone cliquable, par ::before quand la mise en page ne doit pas bouger */
.s-clock,.cx-autre,.q-nav .qn,.prompt-box .ph button{position:relative}
.s-clock::before,.cx-autre::before,.q-nav .qn::before,.prompt-box .ph button::before{content:"";position:absolute}
/* les décalages comptent la bordure : un ::before se place sur la boîte de remplissage */
.s-clock::before{inset:-5px -3px}.cx-autre::before{inset:-8px -3px}.q-nav .qn::before{inset:-5px}.prompt-box .ph button::before{inset:-5px -3px}
@media (max-width:760px){.s-clock::before{inset:-7px -3px}.s-tool{min-width:44px;justify-content:center}}
@media (max-height:480px){.s-lock{place-items:start center;overflow-y:auto}}   /* ERA-16 : écran de verrou à 200 % */
@media (max-width:400px){#prev .lg{display:none}.sb.next{font-size:14px;line-height:1.2;padding:0 10px}}   /* ERA-11 : « Suivant » à 320 px */
/* ------------------------------------------------------------ reprise 3 (3/11) */
/* GUIDE A3 (ligne 🔴 n° 78) : le « ? » d'un point vise 44 × 44 sans rien déplacer — sa boîte de remplissage fait 26 × 26 ; la
   zone monte de 18 px (l'espace libre entre le champ du dessus et le libellé : 18 px mesurés à 1280 × 600, 1024 × 600 et
   390 × 844, il en reste 1) et ne descend pas (le champ commence 2 px dessous, revue M4). Les cases dans le texte d'une
   demande (26 px) : 44 px de haut — A3 n'admet pas d'exception « en ligne » ; la ligne qui porte une case s'élargit. */
.cx-field .qmark::before{inset:-18px -9px 0 -9px}
pre.a-trous input.trou-f,pre.a-trous select.trou-f{min-height:44px;margin:2px 0}
/* LOUPE é5 à 1024 × 600 : « ✎ Mon personnage » débordait de son bouton (trois colonnes ; « personnage » ne se coupait pas) —
   le libellé peut rétrécir, se coupe en fin de syllabe (lang="fr"), à défaut n'importe où. */
.cx-sj .sujet .opt > span:last-child{min-width:0;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
/* En-tête avec le VRAI 🔒 (A15 / H2 ; unlock.js pose un carré de 36 px avant l'outil). La grille de l'écran ne s'élargit plus
   d'après l'en-tête (sans minmax(0,1fr), sa largeur minimale poussait le texte et « Suivant » hors de l'écran : MOT-JUSTE
   express, 605-630 px) ; la marque rétrécit avec une ellipse, sans jamais couper « Ékole » ; en aperçu sous 361 px, la
   pastille de l'atelier (un 2e lien vers l'accueil, à côté de « ← Accueil ») cède sa place. Banc : entete-check.js. */
.scr{grid-template-columns:minmax(0,1fr)}
.s-head > *{flex-shrink:0}
.s-head > .s-sp{flex-shrink:1}
.s-head > .s-brand{flex:0 1 auto;min-width:58px}
.s-brand b{overflow:hidden;text-overflow:ellipsis}
@media (max-width:360px){.s-head:has(button.s-exp) .s-logo{display:none}}
/* ------------------------------------------------------------ reprise 4 (3/11) */
/* GUIDE A3 (ligne 🔴 n° 78 ; décision datée V60 : sans l'exception « en ligne ») au téléphone et sous le zoom de la garde —
   44 × 44 px d'ÉCRAN au clic (elementFromPoint), sans rien déplacer : chaque zone s'étend par ::before, dans la place libre
   autour de la cible. Banc : cibles-check.js (390 × 844, 360 × 740, 1024 × 600, 1280 × 600). */
.saved{pointer-events:none}   /* « ✓ gardé », transparent au repos, couvrait au téléphone 71 × 15 px du bas de la scène */
@media (max-width:760px){
  /* « ← » seul (sous 401 px : 40 × 44) et « ↺ » du départ (36 × 44) : 3-5 px de part et d'autre, dans la marge de la barre
     (8 px) et l'écart qui les sépare des boutons du milieu (6 px). */
  #prev,.restart{position:relative}
  #prev::before{content:"";position:absolute;inset:-3px -5px}
  .restart::before{content:"";position:absolute;inset:-2px -5px}
  /* Le chrono (88 × 28 ; 42 px de haut avec l'ancien ::before, 38 au clic) : la piste fait 40 px, la scène la recouvre dès
     son bord bas. La zone monte donc dans les 4 px libres sous les boutons de l'en-tête (ils finissent à 47,5 px) et descend
     jusqu'à la scène : 48 → 92 px, mesuré depuis le centre du chrono (la piste centre sa ligne de 44 px, .s-line) — quelle
     que soit la police à chasse fixe du poste. */
  .s-clock::before{top:calc(50% - 26px);bottom:calc(50% - 18px);left:-3px;right:-3px}
}
/* « 📓 Mon carnet : … voir → » de la fin (302 × 35 au téléphone) : la zone déborde de 5 px en haut et en bas, dans les
   10 px d'écart de la colonne (.fin-side) — la ligne ne bouge pas. */
.carnet-link{position:relative}
.carnet-link::before{content:"";position:absolute;inset:-5px 0}
/* Sous le zoom de la garde, une cible de 44 px n'en fait plus que 44 × z à l'écran : les choix du sondage (DEVINE é3 après
   le vote, 0,98 à 1024 × 600 : 484 × 43), d'un quiz et de la question de fin (LOUPE é12, 0,86 à 1024 × 600 : 179 × 38),
   les choix de sujet d'un constructeur (MOT-JUSTE é6 avec « ✎ », 0,94 à 1280 × 600 : 179 × 42), le ❓ des consignes
   (MOT-JUSTE é6, 0,96 : 42 × 42), les gestes d'un ordre et les cartes d'un tri en mode resserré
   (42 px ; LOUPE é7 : 179 × 43). Leur zone (::before, comptée depuis la boîte de remplissage : bordure de 2 px) mesure
   46 px / --z avant le zoom, soit 46 px d'écran quel que soit le zoom (--z : le facteur que le moteur pose sur la colonne
   réduite) ; elle déborde de la cible dans l'écart qui les sépare (6 à 10 px) : 1 px à zoom 1, 5 px à 0,86. Sans --z :
   46 px à zoom 1, 45 à 0,98, 40 à 0,86. */
.q .opt,.sond-o .opt,.cx-sj .sujet .opt,.sj-redemande .opt,.ca-q,.tri-card{position:relative}
.q .opt::before,.sond-o .opt::before,.cx-sj .sujet .opt::before,.sj-redemande .opt::before{content:"";position:absolute;inset:calc(20px - 23px / var(--z, 1)) 0}
.sujet .sj-autre,.cx-autre{position:relative;z-index:1}   /* les zones des choix ne mordent jamais sur la case « ✎ », juste dessous (2 px à 1024 × 600), ni sur « 🎲 », juste dessus */
.ca-q::before{content:"";position:absolute;inset:calc(20px - 23px / var(--z, 1))}
.tri-card::before{content:"";position:absolute;inset:calc(18px - 22px / var(--z, 1)) 0}
/* Les points de la piste (> 760 px) : le ::before de -11 px se comptait depuis la boîte de remplissage (bordure de 3 px) et
   la scène recouvre tout ce qui passe sous la piste — 39 × 30 au clic. La zone prend la hauteur de la piste (44 px, de
   son bord haut à la scène) et 44 px de large, centrés sur le point (57 px entre deux points à 1024 px, 79 à 1280). */
.s-dot::before{inset:-25px auto -3px;left:calc(50% - 22px);width:44px}
.s-dot.flag::before{top:-22px;bottom:0}
/* Le lien « ekole.io » du pied du carnet (dans sa ligne : 49 × 20) : 44 px de haut et 44 de large au moins, centrés sur le
   mot ; le pied a la place (18 px au-dessus, 26 dessous). */
.foot a{position:relative}
.foot a::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
/* La case du sujet « ✎ » (un champ : pas de ::before possible) au téléphone : 41 → 44 px de haut (la scène y défile déjà). */
@media (max-width:760px){.sujet .sj-autre{min-height:44px}}
/* ------------------------------------------------------------ reprise 5 (4/11) */
/* GUIDE A3 (ligne 🔴 n° 78, sans exception depuis V60 ; J2-LOUPE-1, J2-MOT-JUSTE-2) : les BOUTONS d'action d'une colonne que
   la garde réduit (« Valider », « Réessayer (essai 2 / 3) », « 📋 Copier », « Ouvrir Gemini ↗ », boutons de la fiche, de
   l'outil, de l'image) passaient sous 44 px d'écran (44 × 0,94 = 41,4 : « Réessayer » de MOT-JUSTE et LOUPE é1 à 1024 × 600).
   Même parade que les choix (reprise 4) : une zone ::before qui mesure 46 px / --z avant le zoom, soit 46 px d'écran quel que
   soit le zoom (bordure de 2 px comptée), dans l'écart qui sépare le bouton de ses voisins (6 à 12 px) — jamais un
   min-height en calc : la colonne grandirait et la garde la réduirait encore. Rien ne bouge ; sans zoom : 1 px de plus. */
.s-left .sb,.s-panel .sb,.flashes .sb,.fin-side .sb{position:relative}
.s-left .sb::before,.s-panel .sb::before,.flashes .sb::before,.fin-side .sb::before{content:"";position:absolute;inset:calc(20px - 23px / var(--z, 1)) 0}
/* Les petites cibles déjà élargies par ::before (reprise 3), compensées elles aussi : 46 px d'écran sous le zoom. Le « ? »
   d'un point : 44 px / --z de haut (le champ du point d'au-dessus laisse 19 px libres, le sien commence 2 px dessous). */
.prompt-box .ph button::before{inset:calc(17px - 23px / var(--z, 1)) -3px}   /* 36 px, bordure de 1 px */
.q-nav .qn::before{inset:calc(17px - 23px / var(--z, 1))}   /* 38 px, bordure de 2 px */
.cx-field .qmark::before{inset:calc(27.5px - 44px / var(--z, 1)) calc(13px - 23px / var(--z, 1)) -2px}   /* 28 px, bordure de 1 px */
.cx-autre::before{inset:calc(13px - 23px / var(--z, 1)) -3px}   /* « 🎲 » : 28 px, bordure de 1 px */
/* Les cases dans le texte d'une demande (MOT-JUSTE é9 à 800 × 600 : 43 px sous le zoom de 0,98) sont des champs : pas de
   ::before possible. Leur hauteur suit le zoom (44 px / --z, comme la case « ✎ ») : 1 px de plus par ligne à 0,98. */
pre.a-trous input.trou-f,pre.a-trous select.trou-f{min-height:calc(44px / var(--z, 1))}
/* J2-COMMUN-3 : « ← Retour aux ateliers », seule action de la page « pas encore ouvert » (145 × 20) : 44 px de haut. */
.s-lock .back{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:10px}
/* J2-COMMUN-4 : le VRAI 🔒 d'unlock.js (ekole-tasks) est un carré de 36 px, style en ligne (position:static) : sa zone de clic
   s'élargit à 44 × 44 sans rien déplacer (::before compté depuis la boîte de remplissage : bordure de 1 px). L'en-tête a la
   place : 10 px au-dessus et au-dessous (8 au téléphone), 12 px jusqu'à l'outil (8 au téléphone). Seulement dans la rangée de
   l'en-tête : hors de la rangée, unlock.js le pose en position:fixed, qu'il ne faut pas écraser. */
.s-head > [data-ekole-unlock]{position:relative!important}
.s-head > [data-ekole-unlock]::before{content:"";position:absolute;inset:-5px}
/* J2-COMMUN-2, D61 : entre 761 et 860 px de large, les 13 points de la piste sont à moins de 44 px l'un de l'autre (36 à 43 px
   au clic : la zone du voisin mord) ; ils se masquent comme au téléphone, et le compte « Étape k / 12 » les remplace (la
   barre de progression reste). De 861 px à plus : 44 × 44 chacun. */
@media (min-width:761px) and (max-width:860px){.s-dot{display:none}}
/* D61 (U2 entre 761 et 1023 px) : la scène qui ne tient pas, la garde à son plancher de 12 px, défile depuis le HAUT — un
   alignement « safe » : jamais une colonne centrée qui dépasserait vers le haut, hors d'atteinte du défilement. Le retour
   d'une validation est amené à la vue par le moteur (montreFb, guardNow), comme au téléphone. */
@media (min-width:761px){.s-stage{align-items:safe center}}   /* l'intro (stretch), le constructeur (start) et le téléphone (start) gardent le leur */
/* J2-DEVINE-1 (2e moitié) : au téléphone, le témoin « ✓ gardé » (1,4 s, posé sur les 17 px du bas de la scène) recouvrait
   la dernière ligne du retour que montreFb ou le focus venaient d'amener au bas de la scène. Le défilement vers un retour
   (scrollIntoView, focus) laisse désormais 20 px libres sous lui : le témoin se pose dans cette marge (la scène a 24 px de
   remplissage en bas : la place existe même au bout). */
@media (max-width:760px){.s-stage{scroll-padding-bottom:20px}}
/* ------------------------------------------------------------ reprise 6 (4/11) */
/* reprise 6 (css-accueil, A3 ; J3-LOUPE-6) : entre 761 et 790 px × 600, LOUPE é7 après un ordre raté (et raté puis changé),
   la garde réduit le panneau à son plancher (0,83-0,86) ; les gestes (#ord-out, dont les ✗ à retirer, et le bassin) n'y
   avaient plus que 42 à 43,5 px d'écran au clic. Leur zone (::before, plus haut) déborde dans l'écart de 9 px de la grille,
   mais la zone du geste du dessous (plus loin dans le DOM) recouvre celle du dessus : chaque geste ne se clique que sur son
   PAS, (hauteur + 9 px) × zoom. Le pas reste donc à 46 px d'écran : hauteur = 46 px / --z − 9 px, jamais sous les 42 px du
   mode resserré (sans effet dès que --z ≥ 0,91). Seulement dans la bande D61 (761-1023 px), où la scène peut défiler : à
   1024 px et plus, rien ne change (zéro défilement, U2). Vaut pour toute grille de cartes (tri compris), même pas. → Class */
/* reprise 7 (s1, D66) : la même règle pour une fenêtre BASSE à 1024 px et plus (moins de 600 px de haut), où la scène peut
   défiler comme dans la bande ; à 600 px de haut et plus, rien ne change (U2). */
@media (min-width:761px) and (max-width:1023px), (min-width:1024px) and (max-height:599px){
  .s-stage.tight .tri-cards .tri-card{min-height:max(42px, calc(46px / var(--z, 1) - 9px))}   /* 9 px : l'écart de .tri-cards */
}
/* ------------------------------------------------------------ reprise 7 (4/11) */
/* reprise 7 (css-accueil, A3 ; J4-DEVINE-3, écart A3 de la passe finale 4) : V110 (plus haut) étendue à TOUTE liste de cibles
   sous la garde dans la bande D61, quand la fenêtre est basse (téléphone à l'horizontale 844 × 390 et 915 × 412, portable
   zoomé 1000 × 450) : la garde y réduit la colonne à son plancher (0,78 à 0,8), et deux cibles voisines ne se cliquaient que
   sur leur PAS, (hauteur + écart) × zoom — options de .q (41,5 px), cases de .chk (38,5 à 39,5 : sans zone ::before, leur
   propre hauteur), Vrai / Faux de .vf-row (37,5 à 38, sans zone), compteurs et case des mesures (36). Même règle que V110 :
   hauteur = 46 px / --z − l'écart de la liste (le pas tient 46 px d'écran), jamais sous la hauteur du mode resserré, et une
   zone ::before qui couvre la moitié de l'écart (bordure de 2 px comptée) ; une cible seule (Vrai / Faux, compteur) : une zone
   de 46 px / --z, rien ne bouge ; un champ (pas de ::before) : sa hauteur suit le zoom. Sans effet tant que le pas tient déjà
   (--z ≥ 0,84 à 0,87 selon la liste) ; seulement entre 761 et 1023 px, où la scène peut défiler (D61) : à 1024 px et plus,
   et au téléphone, rien ne change. → Class */
@media (min-width:761px) and (max-width:1023px), (min-width:1024px) and (max-height:599px){   /* reprise 7 (s1, D66) : et la fenêtre basse */
  .s-stage.tight .q .opt,.s-stage.tight .sond-o .opt{min-height:max(44px, calc(46px / var(--z, 1) - 9px))}   /* 9 px : l'écart de .q et de .sond-o ; zone ::before : plus haut (reprise 4) */
  .s-stage.tight .cx-sj .sujet .opt,.s-stage.tight .sj-redemande .opt{min-height:max(44px, calc(46px / var(--z, 1) - 6px))}   /* 6 px : l'écart des .opts aux fenêtres basses (8 au-dessus de 700 px : 2 px de marge) */
  .s-stage.tight .chk button{position:relative;min-height:max(46px, calc(46px / var(--z, 1) - 9px))}   /* 9 px : l'écart de .chk */
  .s-stage.tight .chk button::before{content:"";position:absolute;inset:-6.5px 0}   /* la moitié de l'écart, bordure de 2 px comptée */
  .s-stage.tight .fin-side .chk button{min-height:max(46px, calc(46px / var(--z, 1) - 8px))}   /* 8 px : l'écart de .fin-side .chk */
  .s-stage.tight .fin-side .chk button::before{inset:-6px 0}
  .s-stage.tight .vf-btns button,.s-stage.tight .stepper button{position:relative}
  .s-stage.tight .vf-btns button::before,.s-stage.tight .stepper button::before{content:"";position:absolute;inset:calc(21px - 23px / var(--z, 1)) 0}   /* 46 px de haut, bordure de 2 px : 46 px / --z ; entre deux rangées de .vf, 18 px libres (remplissage, bordure et écart) : 6,5 px de zone au plus de chaque côté à 0,78 */
  .s-stage.tight .meas input[type="text"]{height:max(46px, calc(46px / var(--z, 1)))}
  /* reprise 7 (s1, A3 ; D66) : la zone de « 🎲 Une autre version » (au-dessus des choix, z-index 1) déborde de 23 px / --z − 13 px
     sous son bouton, et celle d'un choix de 23 px / --z − 20 px au-dessus du sien : ensemble 46 px / --z − 33 px, quand l'écart
     de la grille n'en donne que 6 à 8 — à 1280 × 500 (--z 0,93), « 🎲 » mordait 4 px du premier choix de la rangée (41,5 px au
     clic). La rangée de « 🎲 » prend la marge qui manque (comptée sur l'écart le plus petit, 6 px) ; sans effet à --z = 1 hors
     du mode resserré. */
  .s-stage.tight .cx-sj .sujet .st:has(.cx-autre){margin-bottom:max(0px, calc(46px / var(--z, 1) - 39px))}
}
/* ------------------------------------------------------------ reprise 8 (5/11) */
/* Reprise 8 (css-accueil, J5-MOT-JUSTE-3 ; A3, ligne 🔴 n° 78) : au-dessus de 760 px, l'aide « ? » d'un point s'ouvre par-dessus
   ce qui précède (z-index 6, plus haut) et recouvrait la zone ::before de SON « ? » — les 18 px qui montent au-dessus du
   bouton (reprise 3) : le « ? » qui doit la refermer ne se cliquait plus que sur 27 × 46,5 px (MOT-JUSTE é6, points 2 et 3, à
   1280 × 600 et 1024 × 600 ; LOUPE é5 de même). Le « ? » d'une aide ouverte passe au-dessus d'elle (même contexte
   d'empilement : .cx-field n'en crée pas) : sa zone reste entière, un clic dans le haut de la zone referme l'aide. Le bouton
   lui-même ne recouvre que les 2 px du bas de l'aide (bottom: calc(100% − 2px)), sa bordure ; les autres points, sous l'aide,
   restent dessous (la surimpression voulue, C020). → Class */
.cx-field .qmark[aria-expanded="true"]{z-index:7}
/* … et le texte de l'aide ne passe jamais sous cette zone (transparente, mais un clic sur ces mots refermerait l'aide, et
   lisibilite.js y voit une ligne cachée : la dernière ligne de LOUPE é5, aides « n » et « c », à 1280 et 1024 × 600). La zone
   monte de 44 px / --z − 28,5 px au-dessus du bord du « ? » (plus haut : 27,5 px, bordure de 1 px), et l'aide descend 2 px
   sous le haut du point : elle mord donc de 44 px / --z − 26,5 px au plus sur l'aide (17,5 px à --z = 1 ; 18,5 mesurés au
   demi-pixel). Le remplissage du bas de l'aide (7 px avant) prend cette hauteur, bordure de 1 px comptée, et 2 px de marge :
   44 px / --z − 25,5 px (18,5 px à --z = 1, un peu plus sous le zoom de la garde). Seulement l'aide qui s'ouvre vers le haut
   (au-dessus de 760 px) ; vers le bas (.bas), sous son champ, rien ne la recouvre. */
@media (min-width:761px){
  .cx-aide:not(.bas){padding-bottom:max(7px, calc(44px / var(--z, 1) - 25.5px))}
}
/* ------------------------------------------------------------ reprise 9 (5/11) */
/* reprise 9 (s1, J6-DEVINE-1 ; régression de R8-s1-2) : vide depuis M10, le témoin « ✓ gardé » ne mesurait plus rien dans la rangée
   centrée de la barre — « ❓ Aide » sautait de 27,4 px à chaque écriture, puis revenait. Sa place est gardée : 7ch, la largeur de
   « ✓ gardé » en mono 13 px (54,8 px) ; au téléphone, il est posé en absolu au-dessus de la barre (rien ne bouge). */
@media (min-width:761px){.s-mid .saved{min-width:7ch}}