/* MÉCANISMES ET MATÉRIAUX — feuille de style
   Même famille que « À la découverte du sol et des séismes » : une barre en haut, puis un écran plein cadre.
   Écran d'activité : la scène animée à gauche (onglets au-dessus, commandes en dessous), le texte à droite ;
   sur téléphone, la scène passe au-dessus du texte.
   Couleurs : celles de ../commun/scolatools.css (chargé après cette feuille) pour l'interface ; ici, les couleurs
   propres à l'appli (métal, laiton, sens de rotation) et les ambiances des scènes.
   Pas de thème sombre : le site ScolaTools n'en a pas. */
:root {
  --fond: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --encre: #1f2937;
  --encre-2: #4b5563;
  --ligne: #e3e8f0;
  --accent: #2f5fe0;
  --accent-encre: #ffffff;
  --accent-doux: #eaf0ff;
  --chaud: #b4440f;
  --chaud-doux: #fdebdd;
  --ocre: #9a6200;
  --bon: #16a34a;
  --bon-doux: #dcfce7;
  --faux: #dc2626;
  --faux-doux: #fee2e2;
  --or: #b8860b;
  --horaire: #2556c8;
  --antihoraire: #c2410c;
  --bulle-fond: #1f2937;
  --bulle-texte: #ffffff;
  --verre: rgba(255, 255, 255, 0.86);
  --halo: rgba(255, 255, 255, 0.92);
  --scene-transmettre-1: #f1f4f8; --scene-transmettre-2: #d6dee9;
  --scene-transformer-1: #f5f1ea; --scene-transformer-2: #ded3c1;
  --scene-materiaux-1: #f2f1ee; --scene-materiaux-2: #d9d5cc;
  --scene-structures-1: #eef3f6; --scene-structures-2: #ccd9e2;
  --scene-energie-1: #f3f5ec; --scene-energie-2: #d6dfc4;
  --ombre: 0 1px 2px rgba(20, 33, 61, 0.04), 0 8px 24px rgba(20, 33, 61, 0.06);

  --f-titre: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-texte: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-xs: 0.78rem; --t-s: 0.875rem; --t-m: 1rem; --t-l: 1.2rem; --t-xl: 1.6rem; --t-xxl: clamp(2rem, 4.2vw, 3.1rem);
  --rayon: 10px;
  --gouttiere: 16px;
  --panneau: 400px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: var(--t-m)/1.55 var(--f-texte);
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--f-titre); line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
a { color: var(--accent); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.code { font-family: var(--f-mono); font-size: 0.92em; background: var(--surface-2); padding: 0 5px; border-radius: 4px; overflow-wrap: anywhere; }
.note { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }

.app { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }

/* ---------- ambiances ---------- */
[data-fond] { --scene-1: var(--scene-transmettre-1); --scene-2: var(--scene-transmettre-2); }
[data-fond="transformer"] { --scene-1: var(--scene-transformer-1); --scene-2: var(--scene-transformer-2); }
[data-fond="materiaux"] { --scene-1: var(--scene-materiaux-1); --scene-2: var(--scene-materiaux-2); }
[data-fond="structures"] { --scene-1: var(--scene-structures-1); --scene-2: var(--scene-structures-2); }
[data-fond="energie"] { --scene-1: var(--scene-energie-1); --scene-2: var(--scene-energie-2); }

/* ---------- barre ---------- */
.barre {
  display: flex; align-items: center; gap: 10px 24px; flex-wrap: wrap;
  padding: 10px var(--gouttiere); background: var(--surface); border-bottom: 1px solid var(--ligne);
  position: relative; z-index: 5;
}
.lien-portail {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; margin-right: -12px;
  color: var(--encre-2); text-decoration: none; font-size: var(--t-l); border: 1px solid var(--ligne);
}
.lien-portail:hover { color: var(--accent); border-color: var(--accent); }
.marque { font-family: var(--f-titre); font-weight: 760; font-size: var(--t-l); color: var(--encre); text-decoration: none; letter-spacing: -0.02em; }
.barre nav { display: flex; gap: 4px; flex-wrap: wrap; }
.barre nav a { color: var(--encre-2); text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: var(--t-s); }
.barre nav a:hover { color: var(--encre); background: var(--surface-2); }
.barre nav a[aria-current="page"] { color: var(--accent-encre); background: var(--accent); }
.choix-niveau { margin-left: auto; }
/* La barre de ../commun/scolatools.css floute ce qui passe dessous (backdrop-filter) ; ici rien ne défile sous la barre,
   et ce flou obligeait le navigateur à recomposer la page à chaque image des animations (mesuré : 8 au lieu de 60 im/s
   en rendu logiciel). Sélecteur plus précis pour passer devant la feuille commune, chargée après celle-ci. */
.app > .barre { -webkit-backdrop-filter: none; backdrop-filter: none; background: #ffffff; }

main { position: relative; min-height: 0; }
.ecran { position: absolute; inset: 0; }

/* ---------- boutons communs ---------- */
.bascule { display: inline-flex; flex-wrap: wrap; gap: 0; }
.bascule > button, .commandes button, .onglets a {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 999px;
  padding: 7px 13px; font-size: var(--t-s); line-height: 1.2; text-decoration: none; min-height: 36px;
}
.bascule > button { border-radius: 0; margin-left: -1px; }
.bascule > button:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
.bascule > button:last-child { border-radius: 0 999px 999px 0; }
.bascule > button:hover, .commandes button:hover, .onglets a:hover { border-color: var(--accent); }
.bascule > [aria-pressed="true"], .commandes button[aria-pressed="true"], .onglets a[aria-current="page"] {
  background: var(--accent); color: var(--accent-encre); border-color: var(--accent); position: relative;
}
.commandes button.principal { background: #c2410c; border-color: #c2410c; color: #ffffff; font-weight: 700; }
.commandes button.principal:hover { background: #a3360a; }
.commandes button.principal[aria-pressed="true"] { background: #7c2d12; border-color: #7c2d12; }
.commandes button:disabled { opacity: 0.45; cursor: default; }
.bouton {
  border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 999px; padding: 7px 14px;
  font-size: var(--t-s); font-weight: 700; text-decoration: none; display: inline-block;
}
.bouton:hover, .bouton.plein { background: var(--accent); color: var(--accent-encre); }
/* La feuille commune (chargée après) donne aux boutons pleins un bleu clair (#398cef) : texte blanc à 3,4:1 seulement.
   Ici, le bleu foncé de la même feuille (--accent-fonce, 5,4:1) ; sélecteur plus précis pour passer devant elle. */
html .bouton.plein { background: var(--accent-fonce); border-color: transparent; color: #ffffff; }
html .bouton.plein:hover { background: #1d4f93; }

/* ---------- accueil ---------- */
.accueil, .page-texte { overflow: auto; }
.accueil-mise { max-width: 1180px; margin: 0 auto; padding: 28px var(--gouttiere) 48px; display: grid; gap: 30px; }
.accueil-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.accueil-intro { display: grid; gap: 12px; max-width: 60ch; }
.surtitre { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--chaud); margin: 0; }
.accueil-intro h1 { font-size: clamp(2.1rem, 5.2vw, 3.8rem); font-weight: 800; letter-spacing: -0.03em; }
.accueil-intro p { margin: 0; color: var(--encre-2); font-size: var(--t-l); line-height: 1.5; }
.accueil-illustration { border-radius: 16px; overflow: hidden; border: 1px solid var(--ligne); box-shadow: var(--ombre); aspect-ratio: 16 / 9; background: linear-gradient(#eef3fb, #dce5f2); }
.accueil-illustration { position: relative; }
.accueil-illustration > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.section-accueil { display: grid; gap: 14px; }
.titre-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.section-accueil h2 { font-size: var(--t-xl); font-weight: 720; }
.bilan-missions { margin: 0; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
.grille-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.carte {
  display: grid; grid-template-rows: auto 1fr; color: var(--encre);
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; overflow: hidden; box-shadow: var(--ombre);
}
.carte .vignette { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: radial-gradient(110% 90% at 50% 40%, var(--scene-1), var(--scene-2)); }
.carte-texte { padding: 12px 14px 14px; display: grid; gap: 7px; align-content: start; }
.carte h3 { font-size: var(--t-l); font-weight: 720; }
.carte h3 a { color: inherit; text-decoration: none; }
.carte h3 a:hover { color: var(--accent); text-decoration: underline; }
.carte p { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.carte .numero { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--chaud); }
.liste-activites { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: var(--t-s); }
.liste-activites li::before { content: "› "; color: var(--encre-2); }
.liste-activites a { font-weight: 600; }
.carte .pied { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); flex-wrap: wrap; }
.etoiles { letter-spacing: 1px; color: var(--or); }
.etoiles .vide { color: #c7cfdb; }
.raccourcis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bloc { background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; padding: 18px; display: grid; gap: 8px; align-content: start; color: var(--encre); }
.bloc h2 { font-size: var(--t-l); font-weight: 700; }
.bloc p { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.bloc-lien { text-decoration: none; transition: border-color 0.2s ease; }
.bloc-lien:hover { border-color: var(--accent); }
.voir { font-weight: 700; color: var(--accent); font-size: var(--t-s); }
.credits { font-size: var(--t-xs); color: var(--encre-2); max-width: 90ch; border-top: 1px solid var(--ligne); padding-top: 18px; display: grid; gap: 6px; }
.credits p { margin: 0; }

/* ---------- écran d'activité ---------- */
.activite { display: grid; grid-template-columns: minmax(0, 1fr) var(--panneau); }
.colonne-scene { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; background: radial-gradient(115% 90% at 50% 40%, var(--scene-1), var(--scene-2)); }
.onglets { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px var(--gouttiere) 0; }
.onglets a { background: var(--verre); }
.scene { position: relative; min-height: 0; overflow: hidden; }
.scene > svg, .scene > canvas, .scene > .plein { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* pas de touch-action: none sur toute la scène : le doigt fait défiler la page, sauf quand il saisit une pièce
   (MM.glisser bloque alors le défilement, pour ce geste seulement) */
.scene svg { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
/* calque des pièces tournantes : chaque pièce est un petit SVG dessiné une fois, tourné par une transformation CSS */
.calque-pieces { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.calque-pieces .piece { position: absolute; left: 0; top: 0; will-change: transform; border-radius: 50%; }
.calque-pieces .piece > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.calque-pieces .piece:focus-visible { outline: 3px solid #1e40af; outline-offset: 2px; }
/* flèches de sens, compteurs, étiquettes des axes : un SVG à part, au-dessus, qui ne reçoit pas le pointeur */
.calque-indicateurs { pointer-events: none; will-change: transform; overflow: visible; }
/* maillons d'une chaîne : huit calques posés sur la chaîne, un seul visible à la fois (opacité) */
.scene > svg.calque-chaine, .zone-dessin > svg.calque-chaine, svg.calque-chaine { position: absolute; right: auto; bottom: auto; pointer-events: none; will-change: opacity; overflow: visible; }
.commandes {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px var(--gouttiere) 12px;
  background: var(--verre); border-top: 1px solid var(--ligne); font-size: var(--t-s);
}
.commandes:empty { display: none; }
.commandes .groupe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.commandes .groupe + .groupe { border-left: 1px solid var(--ligne); padding-left: 14px; }
.commandes .ligne { flex-basis: 100%; height: 0; }
.curseur { display: grid; grid-template-columns: auto minmax(90px, 160px) auto; gap: 8px; align-items: center; }
.curseur span:first-child { color: var(--encre-2); }
.curseur output { font-family: var(--f-mono); font-variant-numeric: tabular-nums; min-width: 6.5em; }
.curseur input { width: 100%; accent-color: var(--accent); }
.case { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
.case input { accent-color: var(--accent); width: 18px; height: 18px; }
.lecture { font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--encre-2); }
.lecture[aria-hidden] { min-width: 34ch; }
.pas-a-pas { display: inline-flex; align-items: center; gap: 6px; }
.pas-a-pas .pas-libelle { color: var(--encre-2); }
.pas-a-pas button { width: 36px; padding: 6px 0; font-weight: 700; font-size: 1.05rem; }
.pas-a-pas output { font-family: var(--f-mono); font-variant-numeric: tabular-nums; min-width: 4.8em; text-align: center; font-weight: 600; }

.panneau {
  background: var(--surface); border-left: 1px solid var(--ligne); overflow: auto; min-width: 0;
  padding: 16px clamp(16px, 2vw, 26px) 32px; display: flex; flex-direction: column; gap: 14px;
}
.choix-module {
  width: 100%; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre);
  font-size: var(--t-s); font-weight: 700;
}
.panneau h1 { font-size: var(--t-xl); font-weight: 760; }
.niveaux { margin: -6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.niveaux span, .puce-lycee {
  font-family: var(--f-mono); font-size: 0.72rem; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--encre-2);
}
.puce-lycee { background: var(--accent-doux); color: #1e40af; white-space: nowrap; }
.consigne { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.info {
  border: 1px solid var(--accent); background: var(--accent-doux); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px;
  font-size: var(--t-s); animation: apparaitre 0.25s ease;
}
.info[data-ton="alerte"] { border-color: var(--faux); background: var(--faux-doux); }
.info[data-ton="alerte"] h2 { color: #991b1b; }
.info[data-ton="bon"] { border-color: var(--bon); background: var(--bon-doux); }
.info[data-ton="bon"] h2 { color: #14532d; }
.info h2 { font-size: var(--t-l); font-weight: 720; color: #1e40af; }
.info p { margin: 0; }
.info .chiffres { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
.info table { border-collapse: collapse; font-size: var(--t-xs); font-variant-numeric: tabular-nums; width: 100%; }
.info th, .info td { text-align: right; padding: 3px 5px; border-bottom: 1px solid rgba(30, 64, 175, 0.18); }
.info th:first-child, .info td:first-child { text-align: left; }
.info th { font-weight: 600; color: var(--encre-2); }
.formule { font-family: var(--f-mono); font-size: 0.92em; background: var(--surface); border-radius: 6px; padding: 2px 6px; display: inline-block; }
@keyframes apparaitre { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.missions, .records { display: grid; gap: 6px; }
.missions h2, .records h2 { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); }
.missions ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.missions li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: var(--t-s); align-items: start; }
.missions li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c7cfdb; margin-top: 1px; box-sizing: border-box; }
.missions li.faite { color: var(--encre-2); }
.missions li.faite::before { content: "✓"; border-color: var(--bon); background: var(--bon); color: #ffffff; font-size: 11px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.missions li.vient::before { animation: tampon 0.6s ease; }
@keyframes tampon { 0% { transform: scale(0.3); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.records ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.records li { display: flex; justify-content: space-between; gap: 10px; font-size: var(--t-s); background: #fff8e6; border-radius: 8px; padding: 5px 10px; }
.records li strong { font-family: var(--f-mono); color: var(--ocre); }
.records:empty { display: none; }
.texte { display: grid; gap: 10px; max-width: 68ch; }
.texte p { margin: 0; }
.texte p.lycee, .retenir li.lycee { border-left: 3px solid var(--accent); padding-left: 10px; }
.retenir li.lycee { list-style: none; margin-left: -1.1em; }
.retenir { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; font-size: var(--t-s); }
.retenir:empty, .savais:empty, .fiche-lien:empty { display: none; }
.retenir h2, .savais h2 { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); margin-bottom: 6px; }
.retenir ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.savais { border: 1.5px dashed var(--ocre); border-radius: 12px; padding: 12px 14px; font-size: var(--t-s); }
.savais h2 { color: var(--ocre); }
.savais p { margin: 0; }
.plus-loin { border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface); font-size: var(--t-s); }
.plus-loin > summary { cursor: pointer; padding: 10px 14px; font-weight: 700; display: flex; align-items: center; gap: 4px 8px; list-style: none; flex-wrap: wrap; }
.plus-loin > summary::-webkit-details-marker { display: none; }
.plus-loin > summary::before { content: "+"; font-family: var(--f-mono); width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--accent-doux); color: var(--accent); flex: none; }
.plus-loin[open] > summary::before { content: "−"; }
.plus-loin .sous-titre { font-weight: 400; color: var(--encre-2); flex-basis: 100%; padding-left: 28px; }
.plus-loin > div { padding: 0 14px 14px; display: grid; gap: 10px; }
.plus-loin p { margin: 0; }
.plus-loin-calcul:empty { display: none; }
.plus-loin-calcul { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; font-family: var(--f-mono); font-size: var(--t-xs); display: grid; gap: 3px; }
.fiche-lien .bouton { width: 100%; text-align: center; }
.suite { border-top: 1px solid var(--ligne); padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.suite:empty { display: none; }
.suite a { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--surface-2); color: var(--encre); text-decoration: none; font-size: var(--t-s); }
.suite a:hover { background: var(--accent-doux); color: var(--accent); }
.suite a.fort { background: var(--accent); color: var(--accent-encre); font-weight: 700; }

.mot {
  border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: help;
  text-decoration: underline dotted var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em;
}
.mot:hover, .mot[aria-expanded="true"] { color: var(--accent); }
.bulle-mot {
  position: fixed; z-index: 30; max-width: min(320px, calc(100vw - 32px)); background: var(--bulle-fond); color: var(--bulle-texte);
  padding: 9px 12px; border-radius: 10px; font-size: var(--t-s); line-height: 1.4; box-shadow: var(--ombre);
}
.bulle-mot strong { display: block; font-family: var(--f-titre); font-size: var(--t-m); margin-bottom: 2px; }
.toast {
  position: fixed; left: 16px; right: 16px; bottom: 22px; margin: 0 auto; width: fit-content; max-width: min(640px, calc(100vw - 32px));
  z-index: 40; background: #15803d; color: #ffffff; padding: 10px 18px; border-radius: 18px; font-weight: 700; line-height: 1.35;
  box-shadow: var(--ombre); animation: monter 0.35s ease; text-align: center;
}
.toast[data-ton="neutre"] { background: #1e40af; }
.toast[data-ton="alerte"] { background: #b91c1c; }
@keyframes monter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- dessins des scènes (SVG) ---------- */
.scene svg text, .accueil-illustration svg text { font-family: var(--f-texte); }
.scene svg path:not([fill]), .accueil-illustration svg path:not([fill]) { fill: none; }
.etiq {
  font-size: calc(13px / var(--k, 1)); font-weight: 700; fill: var(--encre);
  paint-order: stroke; stroke: var(--halo); stroke-width: calc(3.5px / var(--k, 1)); stroke-linejoin: round;
}
.etiq.petite { font-size: calc(11.5px / var(--k, 1)); font-weight: 500; }
.etiq.mono { font-family: var(--f-mono); font-weight: 500; }
.etiq.claire { fill: #ffffff; stroke: rgba(15, 25, 45, 0.55); }
.etiq.centre { dominant-baseline: central; }
.pastille-texte { font-size: 11.5px; font-family: var(--f-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.etiquette-axe .pastille-texte { font-family: var(--f-texte); font-weight: 700; font-size: 11.5px; }
.compteur .pastille-texte { font-size: 11px; }
.surface-atelier { cursor: grab; }
.surface-atelier.glisse { cursor: grabbing; }
.piece.choisie .contour { stroke: #1e40af; stroke-width: 1.4; }
.piece.alerte .contour { stroke: #c81e1e; stroke-width: 1.8; }
.anneau-selection { fill: none; stroke: #2f5fe0; stroke-width: calc(2px / var(--k, 1)); stroke-dasharray: calc(6px / var(--k, 1)) calc(4px / var(--k, 1)); }
.halo-pose { fill: none; stroke-width: calc(3px / var(--k, 1)); }
.halo-pose.ok { stroke: #15803d; }
.halo-pose.libre { stroke: #2f5fe0; stroke-dasharray: calc(5px / var(--k, 1)) calc(4px / var(--k, 1)); }
.halo-pose.refus { stroke: #c81e1e; fill: rgba(200, 30, 30, 0.12); }
.piece.manivelle.secoue { animation: secousse-manivelle 0.08s linear 5; }
@keyframes secousse-manivelle { 0%, 100% { translate: 0 0; } 25% { translate: -2px 1px; } 75% { translate: 2px -1px; } }
.encart-schema { pointer-events: none; }
.secoue { animation: secousse 0.09s linear 5; }
@keyframes secousse { 0% { transform: translate(0, 0); } 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, -2px); } 100% { transform: translate(1px, 2px); } }
.legende-scene {
  position: absolute; z-index: 3; left: 10px; top: 10px; display: grid; gap: 3px; padding: 7px 10px; border-radius: 10px;
  background: var(--verre); border: 1px solid var(--ligne); font-size: var(--t-xs); pointer-events: none; max-width: calc(100% - 20px);
}
.legende-scene .l { display: flex; align-items: center; gap: 6px; }
.legende-scene i { width: 16px; height: 3px; border-radius: 2px; flex: none; display: inline-block; }
.mesures-scene {
  position: absolute; z-index: 3; right: 10px; top: 10px; display: grid; gap: 2px; padding: 7px 10px; border-radius: 10px;
  background: var(--verre); border: 1px solid var(--ligne); font-family: var(--f-mono); font-size: var(--t-xs); font-variant-numeric: tabular-nums;
  pointer-events: none; text-align: right;
}
.mesures-scene strong { font-family: var(--f-texte); }
.mesures-scene.milieu { top: 46%; transform: translateY(-50%); }
.alerte-scene {
  position: absolute; z-index: 3; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px;
  background: #b91c1c; color: #ffffff; font-weight: 700; font-size: var(--t-s); pointer-events: none; white-space: nowrap;
}

/* ---------- scènes en plusieurs zones (vélo, treuil) ----------
   zone-a : la vue d'ensemble (la route, la potence) ; zone-b : la vue rapprochée du mécanisme ;
   zone-c : le schéma cinématique (lycée). Côte à côte sur un écran large ; « empile » : les unes sous les autres. */
.scene-duo .zone { position: absolute; overflow: hidden; }
.scene-duo .zone-a { left: 0; top: 0; bottom: 0; width: var(--part-a, 58%); }
.scene-duo .zone-b, .scene-duo .zone-c { right: 0; width: calc(100% - var(--part-a, 58%)); border-left: 1px solid var(--ligne); background: rgba(255, 255, 255, 0.5); }
.scene-duo .zone-b { top: 0; bottom: 0; }
.scene-duo.avec-schema .zone-b { bottom: 38%; }
.scene-duo .zone-c { bottom: 0; height: 38%; border-top: 1px solid var(--ligne); background: #ffffff; }
.scene-duo.empile .zone-a { right: 0; width: auto; bottom: auto; height: var(--haut-a, 52%); }
.scene-duo.empile .zone-b, .scene-duo.empile .zone-c { left: 0; width: auto; border-left: 0; border-top: 1px solid var(--ligne); }
.scene-duo.empile .zone-b { top: var(--haut-a, 52%); }
.scene-duo.empile.avec-schema .zone-b { bottom: 24%; }
.scene-duo.empile .zone-c { height: 24%; }
.zone-titre {
  position: absolute; left: 10px; top: 7px; z-index: 4; margin: 0; pointer-events: none;
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2);
}
.zone-note { position: absolute; left: 10px; right: 10px; bottom: 6px; z-index: 4; margin: 0; pointer-events: none; font-size: 0.7rem; color: var(--encre-2); }
.zone-dessin { position: absolute; inset: 0; }
.scene-duo .zone > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.zone-dessin > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.zone-dessin.prise { cursor: grab; }
.zone-dessin.prise.glisse { cursor: grabbing; }
.calque-pieces .piece-vis { border-radius: 6px; overflow: hidden; }
.piece-vis > .vis-calque { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.piece-vis > .vis-filets { position: absolute; top: 0; height: 100%; will-change: transform; }
.piece-vis > .vis-filets > svg { display: block; width: 100%; height: 100%; }
.calque-pieces .piece.secoue { animation: secousse-manivelle 0.08s linear 5; }
.zone.avec-tableau { display: flex; flex-direction: column; }
.zone-corps { position: relative; flex: 1; min-height: 0; }

/* ---------- scènes en zones (bielle-manivelle, cames) ----------
   zone-a : le mécanisme ; zone-b : la courbe ; zone-c : le schéma cinématique (lycée).
   « empile » (écran plus haut que large, recalculé quand la taille change) : les zones l'une sous l'autre. */
.transfo { position: absolute; inset: 0; display: grid; }
.transfo > .zone { position: relative; overflow: hidden; min-width: 0; min-height: 0; }
.transfo > .zone-a { grid-area: a; }
.transfo > .zone-b { grid-area: b; background: rgba(255, 255, 255, 0.72); }
.transfo > .zone-c { grid-area: c; background: #ffffff; }
.transfo > .zone > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.transfo .zone.glisse svg { cursor: grabbing; }
.transfo.bielle { grid-template-areas: "a a" "b c"; grid-template-rows: minmax(0, 57%) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) 0; }
.transfo.bielle.avec-schema { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); }
.transfo.bielle > .zone-b { border-top: 1px solid var(--ligne); }
.transfo.bielle > .zone-c { border-top: 1px solid var(--ligne); border-left: 1px solid var(--ligne); }
.transfo.bielle.empile { grid-template-areas: "a" "b" "c"; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 42%) minmax(0, 1fr) 0; }
.transfo.bielle.empile.avec-schema { grid-template-rows: minmax(0, 36%) minmax(0, 1fr) minmax(0, 30%); }
.transfo.bielle.empile > .zone-c { border-left: 0; }
.transfo.cames { grid-template-areas: "a b" "a c"; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 0; }
.transfo.cames.avec-schema { grid-template-rows: minmax(0, 1fr) minmax(0, 46%); }
.transfo.cames > .zone-b { border-left: 1px solid var(--ligne); }
.transfo.cames > .zone-c { border-left: 1px solid var(--ligne); border-top: 1px solid var(--ligne); }
.transfo.cames.empile { grid-template-areas: "a" "b" "c"; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 58%) minmax(0, 1fr) 0; }
.transfo.cames.empile.avec-schema { grid-template-rows: minmax(0, 50%) minmax(0, 1fr) minmax(0, 27%); }
.transfo.cames.empile > .zone-b, .transfo.cames.empile > .zone-c { border-left: 0; border-top: 1px solid var(--ligne); }
.transfo > .zone.avec-bandeau { display: flex; flex-direction: column; }
.transfo .zone-corps { position: relative; flex: 1; min-height: 0; }
.transfo .zone-corps > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; padding: 5px 10px; font-size: var(--t-xs); background: #fbfaf8; border-bottom: 1px solid var(--ligne); position: relative; z-index: 3; }
.bandeau-legende, .bandeau-mesures { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.bandeau-legende span { display: inline-flex; align-items: center; gap: 5px; color: var(--encre); }
.bandeau-legende i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
/* les mesures changent plusieurs fois par seconde : leur propre couche graphique (rien d'autre n'est repeint) */
.bandeau-mesures { margin-left: auto; font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--encre-2); background: #fbfaf8; will-change: transform; }
.bandeau-mesures strong { color: var(--encre); font-weight: 600; }
/* valeurs de largeur fixe (police à chasse fixe) : quand un nombre gagne un chiffre, le bandeau ne passe pas d'une ligne à
   deux, ce qui changeait la hauteur du dessin à chaque tour sur un écran de 1024 px */
.bandeau-mesures strong.fixe { display: inline-block; text-align: right; white-space: nowrap; }
.bandeau-mesures .l4 { min-width: 4ch; }
.bandeau-mesures .l5 { min-width: 5ch; text-align: left; }
.bandeau-mesures .l9 { min-width: 9ch; }
.bandeau-mesures .l10 { min-width: 10ch; }
/* le schéma cinématique : le titre, le dessin, puis la note des liaisons dans le flux (une note de 3 ou 4 lignes sur une
   zone étroite ne recouvre plus le dessin) */
.transfo > .zone-c:not([hidden]) { display: flex; flex-direction: column; }
.transfo > .zone-c > .zone-titre { position: static; flex: none; padding: 7px 10px 2px; }
.transfo > .zone-c > svg { position: relative; inset: auto; flex: 1 1 auto; width: 100%; height: auto; min-height: 0; }
.transfo .zone-c .zone-note { position: static; flex: none; order: 2; padding: 2px 10px 5px; line-height: 1.3; }
.calque-sprites .piece.sprite { border-radius: 0; }
.calque-sprites .piece > svg { overflow: visible; }
.etiq.alerte-texte { fill: #b91c1c; }
.poignee-came { outline: none; }
.poignee-came.active { stroke: #111827; fill: #1e40af; }

/* commandes un peu plus serrées pour le thème 2 (une rangée de moins à 1024 px de large) */
@media (min-width: 521px) {
  [data-activite="bielle-manivelle"] .curseur, [data-activite="cames"] .curseur, [data-activite="cremaillere"] .curseur, [data-activite="ouvre-machine"] .curseur,
  [data-activite="flexion"] .curseur, [data-activite="torsion"] .curseur, [data-activite="conduction"] .curseur, [data-activite="choix-materiau"] .curseur { grid-template-columns: auto minmax(80px, 130px) auto; gap: 6px; }
  [data-activite="bielle-manivelle"] .curseur output, [data-activite="cames"] .curseur output, [data-activite="cremaillere"] .curseur output, [data-activite="ouvre-machine"] .curseur output { min-width: 5.6em; }
}

/* « Crémaillère, vis et écrou » : la machine en haut ; en bas, le relevé tour après tour et le schéma (lycée) */
.transfo.crema { grid-template-areas: "a a" "b c"; grid-template-rows: minmax(0, 60%) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) 0; }
.transfo.crema.avec-schema { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); }
.transfo.crema > .zone-b { border-top: 1px solid var(--ligne); overflow: auto; }
.transfo.crema > .zone-c { border-top: 1px solid var(--ligne); border-left: 1px solid var(--ligne); }
.transfo.crema.empile { grid-template-areas: "a" "b" "c"; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 52%) minmax(0, 1fr) 0; }
.transfo.crema.empile.avec-schema { grid-template-rows: minmax(0, 46%) minmax(0, 1fr) minmax(0, 24%); }
.transfo.crema.empile > .zone-c { border-left: 0; }
.crema-vue { position: absolute; inset: 0; overflow: hidden; }
.crema-vue > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.crema-duo { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.crema-duo > .crema-vue { position: relative; inset: auto; }
.crema-duo > .vue-pres { border-left: 1px solid var(--ligne); }
.empile .crema-duo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 0.75fr) minmax(0, 1.25fr); }
.empile .crema-duo > .vue-pres { border-left: 0; border-top: 1px solid var(--ligne); }
.releve-zone { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px 8px; font-size: var(--t-xs); }
.releve-tete { display: flex; }
.releve-tete .jauge { flex: 1 1 auto; max-width: 520px; }
.releve-titre, .releve-comparaison { margin: 0; }
.releve-titre span { color: var(--encre-2); }
.releve-comparaison { color: var(--encre-2); }
.releve-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.releve-table th, .releve-table td { text-align: right; padding: 2px 6px; border-bottom: 1px solid var(--ligne); white-space: nowrap; }
.releve-table thead th { font-weight: 600; color: var(--encre-2); white-space: normal; vertical-align: bottom; }
/* le relevé à côté du schéma (lycée) : des barres plus courtes, pour que les quatre colonnes tiennent */
.transfo.crema.avec-schema:not(.empile) .barre-releve { width: calc(var(--v, 0) * 22px); margin-right: 4px; }
.releve-table th:first-child { text-align: left; }
.barre-releve { display: inline-block; height: 7px; width: calc(var(--v, 0) * 40px); background: #2556c8; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.barre-releve.effort { background: #b84a32; }
.poignee-biais { cursor: grab; outline: none; }
.anneau-focus { fill: none; stroke: transparent; stroke-width: calc(3px / var(--k, 1)); }
.poignee-biais:focus-visible .anneau-focus { stroke: #1e40af; }

/* Thème 3, bancs d'essai (flexion, torsion) : le banc à gauche ; à droite, la courbe (zone-b) et la coupe de la pièce
   (zone-c). « empile » (écran étroit ou tenu debout) : le banc en haut, à la hauteur de son dessin, la courbe
   et la coupe dessous. L'échelle du dessin est toujours écrite dans le bandeau (.echelle-dessin). */
.transfo.banc { grid-template-areas: "a b" "a c"; grid-template-columns: minmax(0, 64%) minmax(0, 1fr); grid-template-rows: minmax(0, 58%) minmax(0, 1fr); }
.transfo.banc > .zone-b { border-left: 1px solid var(--ligne); }
.transfo.banc > .zone-c { border-left: 1px solid var(--ligne); border-top: 1px solid var(--ligne); }
.transfo.banc.empile { grid-template-areas: "a a" "b c"; grid-template-columns: minmax(0, 1fr) clamp(118px, 32%, 220px); grid-template-rows: auto minmax(0, 1fr); }
.transfo.banc.empile > .zone-a .zone-corps { flex: none; }   /* sa hauteur est fixée par l'activité (disposer) */
.transfo.banc.empile > .zone-b { border-left: 0; border-top: 1px solid var(--ligne); }
.transfo.banc > .zone-a > .zone-corps > .alerte-scene { top: 10px; bottom: auto; }
.echelle-dessin { font-family: var(--f-mono); font-size: 0.72rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #fef3c7; color: #7c2d12; border: 1px solid #d97706; }
.transfo.banc .bandeau-legende i { width: 14px; height: 10px; border-radius: 2px; }
.etiq.limite-texte { fill: #991b1b; }   /* rouge foncé : 5,7:1 sur le fond le plus sombre de la scène */
/* crédits : le tableau des propriétés des matériaux (il défile sur le côté quand l'écran est étroit) */
.table-defile { overflow-x: auto; }
.table-materiaux { border-collapse: collapse; font-size: var(--t-xs); font-variant-numeric: tabular-nums; min-width: 1080px; width: 100%; }
.table-materiaux th, .table-materiaux td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.table-materiaux th:first-child { text-align: left; min-width: 150px; }
.table-materiaux thead th { font-weight: 600; color: var(--encre-2); }
.table-materiaux .unite { font-family: var(--f-mono); font-weight: 400; font-size: 0.7rem; color: var(--encre-2); }
.detail-sources summary { cursor: pointer; font-weight: 700; color: var(--accent-fonce); padding: 6px 0; }
.detail-sources ul { margin-top: 6px; }

/* « Ouvre la machine » : la machine à gauche, le rangement à droite, le schéma (lycée) sous le rangement. Sur un écran
   plus haut que large (classe « empile ») : la machine, puis le rangement à sa hauteur naturelle (pas de défilement
   imbriqué tant que la scène est assez haute), puis le schéma. */
.transfo.machine { grid-template-areas: "a b" "a c"; grid-template-columns: minmax(0, 58%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 0; }
.transfo.machine.avec-schema { grid-template-rows: minmax(0, 1fr) minmax(0, 42%); }
.transfo.machine > .zone-b { border-left: 1px solid var(--ligne); overflow: auto; }
.transfo.machine > .zone-c { border-left: 1px solid var(--ligne); border-top: 1px solid var(--ligne); }
.transfo.machine.empile { grid-template-areas: "a" "b" "c"; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(300px, 1fr) minmax(0, auto) 0; }
.transfo.machine.empile.avec-schema { grid-template-rows: minmax(280px, 1fr) minmax(0, auto) minmax(0, 190px); }
.transfo.machine.empile > .zone-b, .transfo.machine.empile > .zone-c { border-left: 0; border-top: 1px solid var(--ligne); }
.machine-corps { overflow: hidden; }
.machine-calque { position: absolute; inset: 0; }
.machine-calque > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.machine-corps > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* étiquettes de l'intérieur et du carter : au moins 11,5 px à l'écran (--k : pixels par unité, posé sur la scène),
   sans dépasser 22 unités de dessin sur un très petit écran (elles restent dans leur pièce) */
.etiq-int { font-family: var(--f-texte); font-weight: 600; font-size: min(max(calc(11.5px / var(--k, 1)), 10px), 22px); fill: #1e3a8a; }
.etiq-carter { font-family: var(--f-texte); font-weight: 600; font-size: min(max(calc(12px / var(--k, 1)), 11px), 17px); fill: #374151; }
/* étiquette écrite sur deux lignes dans une pièce étroite (la plaque de face) : elle peut être plus grande */
.etiq-carter.deux-lignes { font-size: min(max(calc(12px / var(--k, 1)), 11px), 26px); }
.loupe-anneau {
  position: absolute; left: 0; top: 0; z-index: 4; border-radius: 50%; pointer-events: none; will-change: transform;
  border: 3px solid #1e40af; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 3px 10px rgba(15, 25, 45, 0.35);
}
.loupe-anneau::after {
  content: "rayons X"; position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); padding: 0 6px; border-radius: 999px;
  background: #1e40af; color: #ffffff; font: 600 0.66rem/1.5 var(--f-mono); white-space: nowrap;
}
.loupe-anneau:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
.sous-loupe { margin: 0; flex-basis: 100%; color: var(--encre); }
.mesure-images { font-family: var(--f-mono); font-variant-numeric: tabular-nums; margin-left: auto; }
.rangement { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 12px; font-size: var(--t-s); }
.rangement-titre { margin: 0; }
.rangement-ligne { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.rangement-libelle { margin: 0; flex-basis: 100%; color: var(--encre-2); font-size: var(--t-xs); }
.rangement-ligne .bascule > button { padding: 5px 10px; min-height: 32px; }
.rangement-actions { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.rangement-etat { font-size: var(--t-xs); color: var(--encre-2); }
.rangement-aide { margin: 0; flex-basis: 100%; font-size: var(--t-xs); color: var(--encre-2); }
.rangement .bouton:disabled { opacity: 0.45; cursor: default; }
.rangement-tableau table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); }
.rangement-tableau th, .rangement-tableau td { text-align: left; padding: 3px 5px; border-bottom: 1px solid var(--ligne); }
.rangement-tableau thead th { color: var(--encre-2); font-weight: 600; }
.rangement-tableau tr.courante { background: var(--accent-doux); }
.rangement-tableau .lien-machine { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--accent); text-align: left; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.rangement-tableau .juste { color: #166534; font-weight: 700; }
.rangement-tableau .faux { color: #b91c1c; font-weight: 700; }

/* courbe tracée dans un canvas (js/courbe.js) */
.courbe { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 6px 8px 2px; }
.courbe-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding-left: 2px; }
.courbe-titre { margin: 0; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2); }
.courbe-legende { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 0.72rem; color: var(--encre-2); }
.courbe-legende:empty { display: none; }
.courbe-legende span { display: inline-flex; align-items: center; gap: 5px; }
.courbe-legende i { display: inline-block; width: 18px; height: 0; }
.courbe-zone { position: relative; flex: 1; min-height: 0; margin-top: 2px; }
.courbe-zone canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.courbe-ligne { position: absolute; left: 0; top: 0; width: 0; border-left: 1px dashed rgba(55, 65, 81, 0.55); pointer-events: none; will-change: transform; }
.courbe-point { position: absolute; left: 0; top: 0; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; background: #ffffff; border: 2.5px solid #c2410c; pointer-events: none; will-change: transform; }

/* jauge (effort, puissance) */
.jauge { display: grid; gap: 3px; min-width: 160px; flex: 1 1 200px; font-size: var(--t-xs); }
.jauge-tete { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.jauge-libelle { color: var(--encre-2); }
.jauge-valeur { font-family: var(--f-mono); font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.jauge-barre { position: relative; height: 12px; border-radius: 6px; background: #dde3eb; margin-bottom: 15px; box-shadow: inset 0 1px 2px rgba(20, 30, 45, 0.15); }
.jauge-rempli { position: absolute; inset: 0; border-radius: 6px; transform-origin: left center; transform: scaleX(0); background: #16a34a; transition: transform 0.25s ease, background-color 0.25s ease; }
.jauge[data-ton="orange"] .jauge-rempli { background: #d97706; }
.jauge[data-ton="rouge"] .jauge-rempli { background: #dc2626; }
.jauge-repere { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #1f2937; }
.jauge-repere em { position: absolute; top: 15px; left: 1px; transform: translateX(-50%); font-style: normal; font-family: var(--f-mono); font-size: 0.66rem; white-space: nowrap; color: var(--encre-2); }
.jauge-repere.fin em { transform: translateX(-100%); }

/* tableau de bord (au-dessus d'une vue) */
.tableau-bord {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 7px 12px 2px; position: relative; z-index: 3;
  background: rgba(255, 255, 255, 0.82); border-bottom: 1px solid var(--ligne);
}
.tableau-bord .grand { display: grid; line-height: 1.1; min-width: 7.5em; }
.tableau-bord .grand strong { font-family: var(--f-titre); font-size: 1.65rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #1e3a8a; }
.tableau-bord .grand span { font-family: var(--f-mono); font-size: 0.7rem; color: var(--encre-2); font-variant-numeric: tabular-nums; }

/* le vélo */
.zone-route { display: flex; flex-direction: column; }
/* l'alerte du vélo (il cale, il s'épuise) en haut de la route : la règle du développement occupe le bas */
.dessin-route > .alerte-scene { top: 10px; bottom: auto; max-width: calc(100% - 20px); white-space: normal; text-align: center; }
.dessin-route { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.dessin-route > svg.ciel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.monde { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; will-change: transform; }
.monde > * { position: absolute; left: 0; top: 0; }
.monde svg { display: block; overflow: visible; }
.monde .sprite { will-change: transform; }
.monde .sprite > svg { width: 100%; height: 100%; }
.monde .sol { will-change: transform; }
.regle-dev { position: absolute; left: 12px; right: 12px; bottom: 4px; z-index: 3; font-size: var(--t-xs); pointer-events: none; }
.regle-titre { margin: 0 0 2px; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75); }
.regle-titre strong { font-family: var(--f-mono); }
.regle-piste { position: relative; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.regle-barre { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: #2556c8; transition: width 0.25s ease; }
.regle-curseur { position: absolute; top: -4px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: #f59e0b; box-shadow: 0 0 0 1px #7c2d12; }
.regle-graduations { position: relative; height: 15px; font-family: var(--f-mono); font-size: 0.66rem; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.regle-graduations span { position: absolute; top: 1px; transform: translateX(-50%); }
.regle-graduations span:first-child { transform: none; }
.regle-graduations span:last-child { transform: translateX(-100%); }

/* « Le savais-tu ? » illustré */
.savais figure { margin: 10px 0 0; display: grid; gap: 4px; }
.savais figure img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--ligne); background: #ffffff; }
.savais figcaption { font-size: var(--t-xs); color: var(--encre-2); }

/* ---------- défis ---------- */
.page-mise { max-width: 980px; margin: 0 auto; padding: 28px var(--gouttiere) 48px; display: grid; gap: 22px; }
.defis { display: grid; gap: 18px; }
.defis h1 { font-size: var(--t-xxl); font-weight: 780; }
.defis > p { margin: 0; color: var(--encre-2); max-width: 64ch; }
.defis > .bouton { justify-self: start; }
.grille-defis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.choix-defi { display: grid; gap: 4px; align-content: start; text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); }
button.choix-defi:hover { border-color: var(--accent); }
.choix-defi strong { font-family: var(--f-titre); font-size: var(--t-l); }
.choix-defi span { font-size: var(--t-s); color: var(--encre-2); }
.choix-defi em { font-style: normal; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--accent); }
.medaille { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 0.78rem; font-weight: 700; font-family: var(--f-mono); color: #ffffff; justify-self: start; }
.medaille.or { background: #a57f12; } .medaille.argent { background: #6b7680; } .medaille.bronze { background: #9a5d2c; } .medaille.aucune { background: var(--surface-2); color: var(--encre-2); }
.question { background: var(--surface); border: 1px solid var(--ligne); border-radius: 16px; padding: clamp(16px, 3vw, 28px); display: grid; gap: 14px; box-shadow: var(--ombre); }
.quiz-entete { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-xs); color: var(--encre-2); font-family: var(--f-mono); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.quiz-progression { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.quiz-progression span { display: block; height: 100%; background: var(--accent); transition: width 0.3s; }
.question h2 { font-size: clamp(1.2rem, 2.6vw, 1.55rem); font-weight: 700; line-height: 1.25; }
.question h2:focus { outline: none; }
.quiz-choix { display: grid; gap: 8px; }
.quiz-choix button { text-align: left; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); }
.quiz-choix button:hover:not(:disabled) { border-color: var(--accent); }
.quiz-choix button[data-ton="bon"] { background: var(--bon-doux); border-color: var(--bon); color: #14532d; font-weight: 700; }
.quiz-choix button[data-ton="faux"] { background: var(--faux-doux); border-color: var(--faux); color: #991b1b; }
.quiz-choix button:disabled { cursor: default; }
.explication { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-size: var(--t-s); }
.explication strong.bon { color: #15803d; } .explication strong.faux { color: #b91c1c; }
.quiz-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.quiz-score { margin: 0; font-family: var(--f-titre); font-size: 3rem; line-height: 1; color: var(--accent); }
.serie { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--chaud); }

/* ---------- lexique ---------- */
.lexique-tete { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end; justify-content: space-between; }
.lexique-tete h1 { font-size: var(--t-xxl); font-weight: 780; }
.recherche input { border: 1px solid var(--ligne); background: var(--surface); border-radius: 999px; padding: 8px 14px; min-width: min(300px, 100%); }
.liste-lexique { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 10px; }
.liste-lexique > div { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; align-content: start; scroll-margin-top: 16px; }
.liste-lexique dt { font-family: var(--f-titre); font-weight: 720; font-size: var(--t-l); }
.liste-lexique dd { margin: 0; font-size: var(--t-s); }
.liste-lexique dd a { font-size: var(--t-xs); font-weight: 700; }

/* ---------- crédits ---------- */
.credits-page h1 { font-size: var(--t-xxl); font-weight: 780; }
.credits-page section { display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; padding: 16px 18px; }
.credits-page h2 { font-size: var(--t-l); }
.credits-page p, .credits-page ul { margin: 0; font-size: var(--t-s); }
.credits-page ul { padding-left: 1.2em; display: grid; gap: 6px; }
.valeurs-sources { font-size: var(--t-xs) !important; color: var(--encre-2); }

/* ---------- fiche « Du virtuel au réel » ---------- */
.fiche { border: 0; border-radius: 16px; padding: 0; width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: 0 20px 60px rgba(15, 25, 45, 0.35); color: var(--encre); background: var(--surface); }
.fiche::backdrop { background: rgba(15, 25, 45, 0.45); }
#fiche-contenu { padding: 22px clamp(16px, 4vw, 30px) 8px; display: grid; gap: 10px; font-size: var(--t-s); }
#fiche-contenu h2 { font-size: var(--t-xl); }
#fiche-contenu h3 { font-size: var(--t-m); margin-top: 6px; }
#fiche-contenu p { margin: 0; }
#fiche-contenu ul, #fiche-contenu ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
#fiche-contenu .cases { list-style: none; padding-left: 0; }
#fiche-contenu .cases li::before { content: "☐ "; font-size: 1.1em; }
#fiche-contenu .securite { background: #fff4d6; border-radius: 8px; padding: 6px 10px; }
.ligne-reponse { display: block; border-bottom: 1px dotted #9aa5b4; height: 1.6em; }
.pied-fiche { font-size: var(--t-xs); color: var(--encre-2); border-top: 1px solid var(--ligne); padding-top: 8px; }
.fiche-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 10px clamp(16px, 4vw, 30px) 18px; position: sticky; bottom: 0; background: var(--surface); }

/* ---------- thème 3, suite : « Conducteur ou isolant » et « Choisir un matériau » ---------- */
/* Dans ces deux activités, les commandes principales sont dans la scène (.barre-scene), à côté de ce qu'elles
   commandent ; les commandes du bas de page ne servent qu'aux réglages du lycée. */
.barre-scene { padding: 6px 10px; border-top: 0; border-bottom: 1px solid var(--ligne); background: #fbfaf8; gap: 6px 12px; position: relative; z-index: 3; }
.barre-scene.bas { border-bottom: 0; border-top: 1px solid var(--ligne); }
.transfo > .zone-t { grid-area: t; min-width: 0; }
.transfo > .zone-i { grid-area: i; min-width: 0; }
/* « Conducteur ou isolant » : l'expérience à gauche, la courbe dessous, le classement (ou le tableau du circuit) à droite.
   Sur un écran étroit (classe « empile ») : l'expérience, le classement, la courbe, à leur hauteur naturelle. */
.transfo.conduc { grid-template-areas: "t t" "a b" "c b"; grid-template-columns: minmax(0, 62%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1.9fr) minmax(0, 1fr); }
.transfo.conduc.sans-courbe { grid-template-areas: "t t" "a b"; grid-template-rows: auto minmax(0, 1fr); }
.transfo.conduc > .zone-b { border-left: 1px solid var(--ligne); overflow: auto; }
.transfo.conduc > .zone-c { border-top: 1px solid var(--ligne); }
.transfo.conduc.empile { grid-template-areas: "t" "a" "b" "c"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
.transfo.conduc.empile.sans-courbe { grid-template-areas: "t" "a" "b"; grid-template-rows: auto auto auto; }
.transfo.conduc.empile > .zone-a .zone-corps { flex: none; }
.transfo.conduc.empile > .zone-b, .transfo.choix.empile > .zone-b { border-left: 0; border-top: 1px solid var(--ligne); overflow: visible; }
.transfo.conduc.empile > .zone-c { height: 250px; }
.prediction { padding: 8px 12px 12px; font-size: var(--t-s); display: flex; flex-direction: column; gap: 6px; }
.prediction-titre { margin: 0; font-size: var(--t-s); font-weight: 700; }
.prediction-aide, .prediction-bilan { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
.prediction-bilan { font-weight: 700; color: var(--encre); }
.prediction-table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); }
.prediction-table th, .prediction-table td { text-align: left; padding: 4px 5px; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
.prediction-table thead th { color: var(--encre-2); font-weight: 600; }
.prediction-table tbody th { font-weight: 600; white-space: nowrap; }
.prediction-table th i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.prediction-table tr.courant { background: var(--accent-doux); }
.prediction-fleches { white-space: nowrap; }
.prediction-fleches button { min-width: 36px; min-height: 34px; margin-right: 4px; border: 1px solid #9aa5b4; background: #ffffff; border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; color: var(--encre); }
.prediction-fleches button:hover:not(:disabled) { border-color: var(--accent); }
.prediction-fleches button:disabled { opacity: 0.4; cursor: default; }
.prediction-resultat { color: var(--encre-2); }
.prediction-actions { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: var(--t-xs); }
.prediction-actions .bouton { cursor: pointer; font-family: inherit; }
.marque-ok { color: #166534; font-weight: 700; }
.marque-non { color: #b91c1c; font-weight: 700; }
.libelle-groupe { font-size: var(--t-xs); color: var(--encre-2); }

/* « Choisir un matériau » : l'objet et les exigences en haut, puis l'objet dessiné (ou le diagramme d'Ashby, ou la machine
   de traction) à gauche et les fiches (ou la courbe de traction) à droite. Une fiche « allumée » : fond blanc, bord
   plein vert, « ✓ Convient » ; une fiche « éteinte » : fond gris, bord en pointillés, « ✗ Écarté » et la raison (jamais
   la couleur seule). */
.transfo.choix { grid-template-areas: "t t" "i i" "a b"; grid-template-columns: minmax(0, 25%) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
.transfo.choix.vue-ashby { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
.transfo.choix.vue-traction { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); }
.transfo.choix.sans-objet { grid-template-columns: 0 minmax(0, 1fr); }
.transfo.choix.sans-objet > .zone-a { visibility: hidden; }
.transfo.choix > .zone-a { display: flex; flex-direction: column; }
.transfo.choix > .zone-b { border-left: 1px solid var(--ligne); overflow: auto; }
.transfo.choix.sans-objet > .zone-b { border-left: 0; }
.choix-corps > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* les dessins qui changent pendant une animation (les tiges qui chauffent, la machine de traction) ont leur propre couche
   graphique : sans elle, chaque image fait repeindre le fond en dégradé de la scène (mesuré en rendu logiciel : 13 à
   18 images par seconde pendant l'essai de traction) */
.transfo.conduc .zone-corps > svg, .choix-corps > svg { will-change: transform; }
/* écran étroit : les cases, la ligne d'information et le petit dessin de l'objet, puis les fiches sur toute la largeur */
.transfo.choix.empile { grid-template-areas: "t t" "i a" "b b"; grid-template-columns: minmax(0, 1fr) 104px; grid-template-rows: auto auto auto; }
.transfo.choix.empile > .zone-a { min-height: 84px; background: #fbfaf8; border-bottom: 1px solid var(--ligne); }
.transfo.choix.empile.vue-ashby, .transfo.choix.empile.vue-traction { grid-template-areas: "t" "i" "a" "b"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
.transfo.choix.empile.vue-traction > .zone-b { height: 290px; }
.choix-courbe { position: absolute; inset: 0; }
.fiches-mat { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding: 10px 8px 8px; align-content: start; }
.fiche-mat {
  position: relative; display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; font-size: 0.74rem; line-height: 1.3;
  padding: 7px 8px; border-radius: 10px; border: 2px solid #166534; background: #ffffff; color: var(--encre); cursor: pointer; min-width: 0;
  box-shadow: 0 0 0 3px rgba(22, 101, 52, 0.14);
}
.fiche-mat.eteinte { border: 2px dashed #6b7280; background: #eef1f5; color: #4b5563; box-shadow: none; }
.fiche-mat:hover { border-color: var(--accent); }
/* fiche retenue : un anneau bleu et l'étiquette « retenu » ; le focus du clavier garde son propre contour, orange */
.fiche-mat[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--accent); border-color: var(--accent); }
.fiche-mat:focus-visible { outline: 3px solid #b45309; outline-offset: 3px; }
.fiche-mat[aria-pressed="true"]::after { content: "retenu"; position: absolute; top: -9px; right: 8px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: #ffffff; font: 600 0.64rem/1.6 var(--f-mono); }
.fiche-tete { display: flex; align-items: center; gap: 6px; font-size: 0.84rem; }
.fiche-tete i { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.fiche-mat small { font-size: 0.68rem; color: var(--encre-2); overflow-wrap: anywhere; }
.fiche-etat { font-weight: 700; color: #166534; }
.fiche-mat.eteinte .fiche-etat { color: #991b1b; }
.fiche-lignes { display: flex; flex-direction: column; margin-top: 2px; }
/* une ligne : la marque (✓, ✗ ou rien), le nom de la propriété, sa valeur ; la valeur passe à la ligne si la fiche est étroite */
.fiche-ligne { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; border-top: 1px solid #d5dbe5; padding: 1px 0; }
.fiche-libelle { flex: 0 1 auto; min-width: 0; }
.fiche-ligne em { font-style: normal; font-weight: 700; margin-right: 4px; }
.fiche-ligne em:empty { display: none; }
.fiche-ligne b { font-family: var(--f-mono); font-weight: 500; font-size: 0.69rem; margin-left: auto; text-align: right; }
.fiche-ligne.ok em { color: #166534; }
.fiche-ligne.non, .fiche-ligne.inconnu, .fiche-ligne.non b, .fiche-ligne.inconnu b { font-weight: 700; }
.fiche-ligne.non em, .fiche-ligne.inconnu em { color: #991b1b; }
.ashby-poignee { cursor: grab; }
.ashby-poignee circle:first-child { r: max(24px, calc(22px / var(--k, 1))); }
.courbe-legende svg.courbe-motif { flex: none; display: block; width: 34px; height: 8px; }
.ashby-poignee:focus-visible circle:last-child { stroke: #b45309; stroke-width: 6; }
.etiq.hors-zone { fill: #4b5563; }

/* ---------- thème 4 : « Le cadre qui se couche », « Construis un pont », « La grue en équilibre » ----------
   Une seule zone de dessin, avec son bandeau. Barre tirée : trait bleu plein, « T » ; barre comprimée : trait rouge
   hachuré, « C » (jamais la couleur seule). Bois : beige à bord brun ; acier : gris avec un reflet blanc (un tube). */
.transfo.une { grid-template-areas: "a"; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.bandeau-legende i.trait-T { height: 4px; background: #1d4ed8; }
.bandeau-legende i.trait-C { height: 4px; background: repeating-linear-gradient(90deg, #b91c1c 0 4px, transparent 4px 7px); }
.bandeau-legende i.mat-bois { height: 7px; background: #e6c58f; outline: 1.5px solid #8a5f2b; }
.bandeau-legende i.mat-acier { height: 7px; background: linear-gradient(#aab4c0 0 35%, #ffffff 35% 62%, #aab4c0 62%); outline: 1.5px solid #3b4551; }
.etiq.effort-T { fill: #1d4ed8; }
.etiq.effort-C { fill: #b91c1c; }
.etiq.effort-0 { fill: #374151; }
.etiq.danger { font-weight: 800; text-decoration: underline; }
.poignee-coin { cursor: grab; outline: none; }
.poignee-coin:focus-visible .anneau-focus, .transfo.pont .noeud:focus-visible .anneau-focus { stroke: #1e40af; }
.zone-corps.glisse, .zone-corps.glisse .poignee-coin { cursor: grabbing; }
.transfo.pont .noeud { outline: none; cursor: pointer; }
.transfo.pont .zone-corps > svg { cursor: crosshair; }
/* le camion roule dans son propre calque, avec sa couche graphique : le déplacer ne fait repeindre ni le pont ni le fond
   en dégradé de la scène (rendu logiciel : 60 images par seconde, la plus longue en 19 ms au lieu de 33 ms sans elle).
   Cette couche n'existe que pendant le passage (classe « roule ») : posée en permanence par-dessus la scène, elle rendait
   le toucher non annulable et un glissé d'un nœud à l'autre devenait un défilement (aucune barre posée au doigt). */
.transfo.pont .zone-corps > svg.calque-camion { pointer-events: none; z-index: 1; }
.transfo.pont.roule .zone-corps > svg.calque-camion { will-change: transform; }
/* la grue : la charge est une poignée (anneau de focus bleu) ; l'alerte en haut, pour ne pas cacher le pied */
.poignee-charge { cursor: grab; outline: none; }
.poignee-charge:focus-visible .anneau-focus { stroke: #1e40af; }
.poignee-charge:focus-visible { outline: none; }   /* l'anneau suffit (le contour du groupe entourerait aussi le câble) */
.zone-corps.glisse, .zone-corps.glisse .poignee-charge { cursor: grabbing; }
.transfo.grue .zone-corps > .alerte-scene { top: 10px; bottom: auto; }
.bandeau-legende svg.icone-g { flex: none; display: block; }

/* ---------- thème 5 : « Monte la chaîne d'énergie » ----------
   L'objet à gauche (en haut sur un écran étroit), la chaîne et le bac à droite (dessous). La chaîne se lit de haut en
   bas : flèche d'entrée, alimenter, flèche, distribuer, flèche, convertir, flèche, transmettre, flèche de sortie. Une
   flèche juste a la couleur, le motif de trait ET le nom de sa forme d'énergie ; avant, elle est grise, avec « ? ». */
.transfo.chaine { grid-template-areas: "t t" "a b" "c b"; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); grid-template-rows: auto minmax(150px, 1fr) auto; }
.transfo.chaine > .zone-c { background: #fbfaf8; border-top: 1px solid var(--ligne); padding: 8px 10px 10px; overflow: auto; }
.transfo.chaine > .zone-a { display: flex; flex-direction: column; }
.transfo.chaine > .zone-b { border-left: 1px solid var(--ligne); overflow: auto; padding: 6px 12px 8px;   /* au collège, à 1280 × 800, la chaîne tient sans défiler (il manquait 5 px) */
  display: flex; flex-direction: column; gap: 8px; }
/* (pas de couche graphique permanente, will-change, sur le dessin de l'objet : règle de l'appli depuis le thème 4) */
.etat-objet { margin: 0; padding: 6px 10px; font-size: var(--t-s); font-weight: 700; background: #fbfaf8; border-bottom: 1px solid var(--ligne); color: var(--encre-2); }
.etat-objet[data-etat="marche"] { color: #14532d; }
.etat-objet[data-etat="marche"]::before { content: "▶ "; }
.etat-objet[data-etat="arret"]::before { content: "■ "; }
.transfo.chaine.empile { grid-template-areas: "t" "a" "c" "b"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
.transfo.chaine.empile > .zone-c { max-height: none; overflow: visible; }
.transfo.chaine.empile > .zone-a .zone-corps { flex: none; height: clamp(190px, 40vw, 300px); }
.transfo.chaine.empile > .zone-b { border-left: 0; border-top: 1px solid var(--ligne); overflow: visible; }
.zone-titre-flux { margin: 0; font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2); }
.chaine-liste { display: flex; flex-direction: column; }
.fleche-energie { display: flex; align-items: center; gap: 6px; padding-left: 16px; min-height: 34px; }
.fleche-energie svg { width: 32px; height: 34px; }
.fleche-energie svg { flex: none; }
.fleche-energie .corps { fill: none; stroke-width: 6; }
.fleche-texte { font-size: var(--t-xs); font-weight: 700; color: var(--encre-2); }
.case-chaine { border: 2px solid #c7cfdb; border-radius: 12px; background: #ffffff; padding: 5px 8px 6px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.case-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.case-tete strong { font-size: var(--t-s); }
.case-role { font-size: 0.7rem; line-height: 1.25; color: var(--encre-2); }
.case-contenu { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; align-items: center; min-width: 0; }
.case-vide { font-size: var(--t-xs); font-style: italic; color: #4b5563; }

.en-choix .cible-depot { border-style: dashed; border-color: var(--accent); cursor: pointer; }
.cible-depot.survol { background: var(--accent-doux); border-color: var(--accent); border-style: solid; }
.case-chaine[data-etat="juste"] { border-color: #166534; }
.case-chaine:is([data-etat="faux"], [data-etat="incomplet"], [data-etat="vide"]) { border-color: #b91c1c; border-style: dashed; }
.case-marque { margin: 0; font-size: var(--t-xs); font-weight: 700; color: #991b1b; }
.case-chaine[data-etat="juste"] .case-marque { color: #166534; }
.case-bilan { margin: 0; font-size: var(--t-xs); color: #9a3412; display: flex; align-items: center; gap: 6px; }
.chaleur-marque { display: inline-block; width: 18px; border-top: 3px dashed #c2410c; }
.constituant {
  display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 4px 9px 4px 6px; border-radius: 10px;
  border: 1.5px solid #8b95a3; background: #f8fafc; color: var(--encre); font-size: 0.8rem; font-weight: 600; line-height: 1.2; text-align: left;
  cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.constituant:hover { border-color: var(--accent); }
.constituant[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-doux); box-shadow: 0 0 0 3px rgba(47, 95, 224, 0.28); }
.constituant.intrus { border-color: #b91c1c; border-style: dashed; }
.constituant.intrus::after { content: "✗"; color: #b91c1c; font-weight: 800; }
.constituant.en-glisse { opacity: 0.45; }
.icone-constituant { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fantome-constituant {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 6px;
  border-radius: 10px; border: 2px solid var(--accent); background: #ffffff; box-shadow: var(--ombre); font-size: 0.8rem; font-weight: 600; color: var(--encre);
}
.bac-bloc { display: grid; gap: 6px; }
.bac-titre { margin: 0; font-size: var(--t-s); }
.bac { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; min-height: 58px; border: 2px solid #e3e8f0; border-radius: 12px; background: #f8fafc; }
.poser { justify-self: start; padding: 5px 10px; min-height: 34px; border-radius: 8px; border: 1.5px solid var(--accent); background: #ffffff; color: #1e40af; font-size: var(--t-xs); font-weight: 700; }
.chaine-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chaine-message { margin: 0; min-height: 1.3em; font-size: var(--t-xs); color: var(--encre-2); }

/* ---------- thème 5 : « Le bilan de la trottinette » ----------
   En haut, la route (bandeau des mesures, batterie écrite en % et en Wh) ; en bas, le diagramme des flux et sa légende
   (chaque forme d'énergie : une couleur, un motif et un nom ; une barre d'échelle de 100 W). */
.transfo.trotti { grid-template-areas: "a" "b"; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 46%) minmax(0, 1fr); }
.transfo.trotti > .zone-b { border-top: 1px solid var(--ligne); display: flex; flex-direction: column; }
/* pas de couche graphique à part (will-change) pour la route : mesuré en rendu logiciel, 2 à 7 images par seconde avec,
   60 sans pendant la sortie */
.transfo.trotti .zone-corps > svg { overflow: hidden; }
.flux-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 6px 10px 2px; }
.flux-legende { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: var(--t-xs); }
.flux-legende span { display: inline-flex; align-items: center; gap: 5px; }
.flux-legende svg { flex: none; display: block; }
.flux-echelle i { display: inline-block; height: 8px; background: #6b7280; border-radius: 1px; }

/* ---------- thème 5 : « Moteur ou génératrice » ----------
   En haut, le circuit et la machine (bandeau des mesures, flèches d'énergie nommées) ; en bas, la courbe. */
.transfo.mg { grid-template-areas: "a" "b"; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 64%) minmax(0, 1fr); }
.transfo.mg > .zone-b { border-top: 1px solid var(--ligne); }
.transfo.mg .interrupteur:focus-visible { outline: 3px solid #1e40af; outline-offset: 2px; }
.transfo.mg .poignee-manivelle { touch-action: none; }

/* ---------- thème 5 : « Une source pour le cabanon » ----------
   En haut à gauche, le cabanon le soir du jour choisi ; à droite, le calendrier des soirs (une croix : lampe éteinte) ;
   en bas, la courbe de l'année. « empile » : l'un sous l'autre. */
.transfo.cab { grid-template-areas: "a b" "c c"; grid-template-columns: minmax(0, 52%) minmax(0, 1fr); grid-template-rows: minmax(0, 60%) minmax(0, 1fr); }
.transfo.cab > .zone-b { border-left: 1px solid var(--ligne); display: flex; flex-direction: column; }
.transfo.cab > .zone-c { border-top: 1px solid var(--ligne); background: rgba(255, 255, 255, 0.72); }
.calendrier { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; padding: 2px 10px 8px; font-size: var(--t-xs); }
.cal-ligne { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 3.4em repeat(31, minmax(0, 1fr)); gap: 2px; align-items: stretch; }
.cal-tete { flex: none; align-items: end; }
.cal-mois { align-self: center; color: var(--encre-2); white-space: nowrap; line-height: 1; }   /* sur un téléphone, les lignes ne font que 14 px */
.cal-num { text-align: center; color: var(--encre-2); font-family: var(--f-mono); font-size: 0.9em; overflow: visible; white-space: nowrap; }
.cal-case { display: block; min-height: 4px; max-height: 22px; border-radius: 2px; box-sizing: border-box; border: 1px solid #94a3b8; background: #ffffff; cursor: pointer; }
.cal-case.avenir { border-style: dashed; }
.cal-case.allumee { background: #fcd34d; border-color: #92400e; }
/* éteinte : case sombre ET barrée d'une croix (jamais la couleur seule) */
.cal-case.eteinte { border-color: #0f172a; background: #334155 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2l6 6M8 2l-6 6' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.cal-case.courant { outline: 2.5px solid #c2410c; outline-offset: 1px; }
.flux-legende i.cal-case { display: inline-block; width: 12px; height: 12px; cursor: default; }
.transfo.cab.empile { grid-template-areas: "a" "b" "c"; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 40%) minmax(0, 33%) minmax(0, 1fr); }
.transfo.cab.empile > .zone-b { border-left: 0; border-top: 1px solid var(--ligne); }
.cab-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 6px 10px 2px; font-size: var(--t-xs); }
.cab-tete span { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- petits écrans ---------- */
@media (max-width: 980px) {
  .raccourcis { grid-template-columns: minmax(0, 1fr); }
  .accueil-tete { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .ecran.activite { overflow: auto; display: block; }
  .colonne-scene { grid-template-rows: auto minmax(330px, 62vh) auto; min-height: auto; }
  /* le vélo et le treuil ont deux vues l'une sous l'autre : une scène plus haute */
  [data-activite="velo"] .colonne-scene, [data-activite="treuil"] .colonne-scene { grid-template-rows: auto minmax(440px, 74vh) auto; }
  /* la bielle-manivelle et les cames ont deux ou trois zones l'une sous l'autre : une scène plus haute */
  [data-activite="bielle-manivelle"] .colonne-scene { grid-template-rows: auto minmax(460px, 72vh) auto; }
  [data-activite="cames"] .colonne-scene { grid-template-rows: auto minmax(560px, 80vh) auto; }
  [data-activite="cremaillere"] .colonne-scene { grid-template-rows: auto minmax(600px, 84vh) auto; }
  [data-activite="ouvre-machine"] .colonne-scene { grid-template-rows: auto minmax(680px, 90vh) auto; }
  /* les bancs du thème 3 : le banc (à la hauteur de son dessin), puis la courbe et la coupe */
  [data-activite="flexion"] .colonne-scene { grid-template-rows: auto minmax(520px, 66vh) auto; }
  [data-activite="torsion"] .colonne-scene { grid-template-rows: auto minmax(640px, 80vh) auto; }
  /* thème 4 : le cadre (deux cadrages, presque carré quand il est renforcé) ; le pont (un dessin deux fois plus large que haut) */
  [data-activite="cadre"] .colonne-scene { grid-template-rows: auto minmax(360px, 58vh) auto; }
  [data-activite="pont"] .colonne-scene { grid-template-rows: auto minmax(270px, 36vh) auto; }
  [data-activite="grue"] .colonne-scene { grid-template-rows: auto minmax(340px, 50vh) auto; }
  /* thème 5 : la route et le diagramme des flux, l'un sous l'autre */
  [data-activite="trottinette"] .colonne-scene { grid-template-rows: auto minmax(620px, 88vh) auto; }
  [data-activite="moteur-generatrice"] .colonne-scene { grid-template-rows: auto minmax(520px, 74vh) auto; }
  [data-activite="cabanon"] .colonne-scene { grid-template-rows: auto minmax(760px, 96vh) auto; }
  .panneau { border-left: 0; border-top: 1px solid var(--ligne); overflow: visible; }
  .choix-niveau { margin-left: 0; }
  .commandes .groupe + .groupe { border-left: 0; padding-left: 0; }
  /* « Conducteur ou isolant » et « Choisir un matériau » : la scène prend la hauteur de son contenu (l'expérience, le
     classement, la courbe ; l'objet et les huit fiches) : on fait défiler la page, pas une zone dans la page */
  [data-activite="conduction"] .colonne-scene, [data-activite="choix-materiau"] .colonne-scene { grid-template-rows: auto auto auto; }
  [data-activite="conduction"] .transfo, [data-activite="choix-materiau"] .transfo { position: relative; inset: auto; }
  /* « Monte la chaîne d'énergie » : l'objet, puis la chaîne et le bac, à leur hauteur naturelle */
  [data-activite="chaine-energie"] .colonne-scene { grid-template-rows: auto auto auto; }
  [data-activite="chaine-energie"] .transfo { position: relative; inset: auto; }
}
/* téléphone ou tablette tenus debout : la scène de « Ouvre la machine » est assez haute pour la machine, tout le
   rangement (environ 520 px) et, au lycée, le schéma : on fait défiler la page, pas une zone dans la page */
@media (max-width: 860px) and (orientation: portrait) {
  [data-activite="ouvre-machine"] .colonne-scene { grid-template-rows: auto minmax(870px, 100vh) auto; }
  [data-activite="ouvre-machine"] .colonne-scene:has(.transfo.avec-schema) { grid-template-rows: auto minmax(1050px, 100vh) auto; }
}
/* zone de rangement étroite (écran de 861 à 1100 px de large) : des boutons plus serrés, pour que « continue,
   alternative, intermittente » tiennent sur une ligne */
@media (min-width: 861px) and (max-width: 1100px) {
  .transfo.machine:not(.empile) { grid-template-columns: minmax(0, 55%) minmax(0, 1fr); }
  .transfo.machine:not(.empile) .rangement { padding: 6px 8px 10px; gap: 6px; }
  .transfo.machine:not(.empile) .rangement-ligne .bascule > button { padding: 4px 5px; font-size: 0.8rem; }
}
/* écran d'ordinateur ou vidéoprojecteur peu haut (1024 × 768) : les commandes du thème 2 prennent plusieurs rangées et
   la scène devenait trop basse pour ses deux ou trois zones (mécanisme, courbe ou relevé, schéma). Elle garde au moins
   470 px ; la colonne de la scène défile alors pour atteindre les dernières commandes. */
@media (min-width: 861px) and (max-height: 820px) {
  [data-activite="bielle-manivelle"] .colonne-scene, [data-activite="cames"] .colonne-scene,
  [data-activite="cremaillere"] .colonne-scene, [data-activite="ouvre-machine"] .colonne-scene {
    grid-template-rows: auto minmax(470px, 1fr) auto; overflow-y: auto;
  }
  /* les bancs du thème 3 se contentent de 400 px : à 1024 × 768, la planche et le curseur des livres se voient ensemble */
  [data-activite="flexion"] .colonne-scene, [data-activite="torsion"] .colonne-scene,
  [data-activite="cadre"] .colonne-scene, [data-activite="pont"] .colonne-scene, [data-activite="grue"] .colonne-scene {
    grid-template-rows: auto minmax(400px, 1fr) auto; overflow-y: auto;
  }
  [data-activite="trottinette"] .colonne-scene { grid-template-rows: auto minmax(480px, 1fr) auto; overflow-y: auto; }
  /* la fin du thème 5 : la machine et sa courbe (460 px) ; le cabanon, le calendrier et la courbe de l'année (560 px) */
  [data-activite="moteur-generatrice"] .colonne-scene { grid-template-rows: auto minmax(460px, 1fr) auto; overflow-y: auto; }
  [data-activite="cabanon"] .colonne-scene { grid-template-rows: auto minmax(560px, 1fr) auto; overflow-y: auto; }
  /* la suite du thème 3 : assez de hauteur pour l'expérience et sa courbe (620 px), ou pour deux rangées de fiches (560 px) */
  [data-activite="conduction"] .colonne-scene { grid-template-rows: auto minmax(620px, 1fr) auto; overflow-y: auto; }
  [data-activite="choix-materiau"] .colonne-scene { grid-template-rows: auto minmax(560px, 1fr) auto; overflow-y: auto; }
}
/* écran d'ordinateur ou vidéoprojecteur étroit (861 à 1100 px de large : la scène fait moins de 700 px) : « Conducteur ou
   isolant » et « Choisir un matériau » prennent la disposition empilée des tablettes (classe « empile », posée par
   l'activité avec la même requête). Le tableau de la prédiction et le diagramme d'Ashby ont ainsi toute la largeur ; c'est
   la colonne de la scène qui défile (jamais une zone dans cette colonne), et les réglages du lycée restent collés en bas. */
@media (min-width: 861px) and (max-width: 1100px) {
  /* (en bloc et non en grille : dans une grille de hauteur fixée, la rangée de la scène serait réduite à la place restante) */
  [data-activite="conduction"] .colonne-scene, [data-activite="choix-materiau"] .colonne-scene { display: block; overflow-y: auto; }
  [data-activite="conduction"] .transfo, [data-activite="choix-materiau"] .transfo { position: relative; inset: auto; }
  [data-activite="conduction"] #commandes, [data-activite="choix-materiau"] #commandes { position: sticky; bottom: 0; z-index: 6; background: #ffffff; }
  [data-activite="chaine-energie"] .colonne-scene { display: block; overflow-y: auto; }
  [data-activite="chaine-energie"] .transfo { position: relative; inset: auto; }
  [data-activite="chaine-energie"] #commandes { position: sticky; bottom: 0; z-index: 6; background: #ffffff; }
}
/* grand écran (vidéoprojecteur ou tableau interactif en 1920 × 1080, vu du fond de la classe) : les textes de la scène et
   des commandes du thème 3 grandissent d'un quart environ (étiquettes des dessins, bandeau, fiches, tableaux, courbes). */
@media (min-width: 1600px) and (min-height: 900px) {
  .ecran.activite:is([data-activite="flexion"], [data-activite="torsion"], [data-activite="conduction"], [data-activite="choix-materiau"]) :is(#scene, #commandes) {
    --t-xs: 0.94rem; --t-s: 1.06rem; --t-courbe: 14px;
  }
  .ecran.activite:is([data-activite="flexion"], [data-activite="torsion"], [data-activite="conduction"], [data-activite="choix-materiau"]) #scene .etiq { font-size: calc(16px / var(--k, 1)); stroke-width: calc(4.2px / var(--k, 1)); }
  .ecran.activite:is([data-activite="flexion"], [data-activite="torsion"], [data-activite="conduction"], [data-activite="choix-materiau"]) #scene .etiq.petite { font-size: calc(14.5px / var(--k, 1)); }
  .ecran.activite:is([data-activite="flexion"], [data-activite="torsion"], [data-activite="conduction"], [data-activite="choix-materiau"]) #scene :is(.echelle-dessin, .courbe-legende) { font-size: 0.9rem; }
  .ecran.activite:is([data-activite="flexion"], [data-activite="torsion"], [data-activite="conduction"], [data-activite="choix-materiau"]) #scene :is(.courbe-titre, .zone-titre, .zone-note) { font-size: 0.86rem; }
  .ecran.activite:is([data-activite="flexion"], [data-activite="torsion"], [data-activite="conduction"], [data-activite="choix-materiau"]) #scene .fiches-mat { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
  .ecran.activite:is([data-activite="flexion"], [data-activite="torsion"], [data-activite="conduction"], [data-activite="choix-materiau"]) #scene .fiche-mat { font-size: 0.92rem; }
  .ecran.activite:is([data-activite="flexion"], [data-activite="torsion"], [data-activite="conduction"], [data-activite="choix-materiau"]) #scene .fiche-tete { font-size: 1.05rem; }
  .ecran.activite:is([data-activite="flexion"], [data-activite="torsion"], [data-activite="conduction"], [data-activite="choix-materiau"]) #scene :is(.fiche-mat small, .fiche-ligne b) { font-size: 0.86rem; }
  .ecran.activite:is([data-activite="flexion"], [data-activite="torsion"], [data-activite="conduction"], [data-activite="choix-materiau"]) #scene .fiche-mat[aria-pressed="true"]::after { font-size: 0.8rem; }
}
/* grand écran : les textes des scènes du thème 4 grandissent comme ceux du thème 3 */
@media (min-width: 1600px) and (min-height: 900px) {
  .ecran.activite[data-fond="structures"] :is(#scene, #commandes) { --t-xs: 0.94rem; --t-s: 1.06rem; }
  .ecran.activite[data-fond="structures"] #scene .etiq { font-size: calc(16px / var(--k, 1)); stroke-width: calc(4.2px / var(--k, 1)); }
  .ecran.activite[data-fond="structures"] #scene .etiq.petite { font-size: calc(14.5px / var(--k, 1)); }
}
/* grand écran : les textes des scènes du thème 5 grandissent comme ceux des thèmes 3 et 4 */
@media (min-width: 1600px) and (min-height: 900px) {
  .ecran.activite[data-fond="energie"] :is(#scene, #commandes) { --t-xs: 0.94rem; --t-s: 1.06rem; }
  .ecran.activite[data-fond="energie"] #scene .etiq { font-size: calc(16px / var(--k, 1)); stroke-width: calc(4.2px / var(--k, 1)); }
  .ecran.activite[data-fond="energie"] #scene .etiq.petite { font-size: calc(14.5px / var(--k, 1)); }
  .ecran.activite[data-fond="energie"] #scene :is(.constituant, .fantome-constituant) { font-size: 0.95rem; }
  .ecran.activite[data-fond="energie"] #scene .case-role { font-size: 0.82rem; }
}
@media (max-width: 520px) {
  /* le relevé de la crémaillère sur un téléphone : des barres plus courtes, pour que les quatre colonnes tiennent */
  .releve-table th, .releve-table td { padding: 2px 4px; }
  .barre-releve { width: calc(var(--v, 0) * 18px); margin-right: 3px; }
  .onglets { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .onglets a { flex: none; white-space: nowrap; }
  .toast { font-size: var(--t-s); }
  .barre { gap: 8px 14px; }
  .barre nav a { padding: 5px 9px; }
  .curseur { grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
  .curseur span:first-child { grid-column: 1 / -1; }
  .commandes .groupe { width: 100%; }
  .mesures-scene { font-size: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .carte, .carte:hover { transition: none; transform: none; }
  .secoue, .piece.manivelle.secoue, .calque-pieces .piece.secoue, .poignee-biais.secoue { animation: none; }
  .info, .toast, .missions li.vient::before { animation: none; }
  .quiz-progression span, .jauge-rempli, .regle-barre { transition: none; }
}

/* ---------- impression de la fiche ---------- */
@media print {
  html.imprime-fiche .app, html.imprime-fiche .toast, html.imprime-fiche .bulle-mot, html.imprime-fiche .fiche-actions { display: none !important; }
  html.imprime-fiche, html.imprime-fiche body { height: auto; background: #ffffff; }
  html.imprime-fiche .fiche { position: absolute; inset: 0 0 auto 0; margin: 0; display: block; width: auto; max-width: none; max-height: none; box-shadow: none; border-radius: 0; }
  html.imprime-fiche .fiche::backdrop { display: none; }
  html.imprime-fiche #fiche-contenu { padding: 0; font-size: 10.5pt; gap: 7px; }
  html.imprime-fiche #fiche-contenu li, html.imprime-fiche #fiche-contenu .securite { break-inside: avoid; }
  html.imprime-fiche #fiche-contenu h3 { break-after: avoid; }
  html.imprime-fiche #fiche-contenu ul, html.imprime-fiche #fiche-contenu ol { gap: 4px; }
  html.imprime-fiche .ligne-reponse { height: 1.45em; }
}