/* À LA DÉCOUVERTE DES NOMBRES ET DU CALCUL — feuille de style
   Même famille que « À la découverte des figures et des solides » (feuille reprise puis adaptée) : une barre en haut,
   puis un écran plein cadre. Écran d'activité : la scène à gauche (onglets au-dessus, commandes en dessous), le texte
   à droite. ../commun/scolatools.css, chargé après cette feuille, redéfinit les couleurs communes (fond, encre, accent bleu).
   Couleurs propres : la droite graduée (traits foncés), le nombre marqué et le point de l'élève (bleu, rond), le nombre
   à trouver (orange, triangle) : jamais la couleur seule, toujours une forme et un texte. Pas de thème sombre, comme le site.
   Fabriquée une première fois par ~/travail-applis/nombres-calcul-t1-construire-1/scripts/fab-css.py ; à modifier ici. */
:root {
  --fond: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --encre: #1f2937;
  --encre-2: #4b5563;
  --ligne: #dfe5ee;
  --accent: #2f5fe0;
  --accent-fonce: #2569c2;
  --accent-encre: #ffffff;
  --accent-doux: #eaf0ff;
  --bon: #16a34a;
  --bon-fonce: #11743a;
  --bon-doux: #dcfce7;
  --faux: #dc2626;
  --faux-fonce: #b42318;
  --faux-doux: #fee2e2;
  --or: #b8860b;
  --ocre: #9a5b0b;
  --bulle-fond: #1b2333;
  --bulle-texte: #ffffff;
  --verre: rgba(255, 255, 255, 0.86);
  --ombre: 0 1px 2px rgba(20, 33, 61, 0.05), 0 8px 24px rgba(20, 33, 61, 0.07);

  /* droite graduée : traits et nombres foncés ; nombre marqué et point de l'élève en bleu ; nombre à trouver en orange */
  --trait: #1f2937; --trait-doux: #4b5563;
  --marque: #1d4ed8; --cible: #b45309; --cible-fond: #fff1df;
  --principal: #2f5fe0; --principal-fonce: #2148b8;
  --or-ligne: #e1ad21;

  /* fonds des scènes, un par thème */
  --scene-nombres-1: #f7f9fc; --scene-nombres-2: #e2e9f3;
  --scene-puissances-1: #f8f6fc; --scene-puissances-2: #e6def2;
  --scene-litteral-1: #f5f9f4; --scene-litteral-2: #dbe9d8;
  --scene-proportion-1: #fcf8f1; --scene-proportion-2: #efe2cc;

  /* niveaux */
  --niv-6e: #0f766e; --niv-5e: #1d4ed8; --niv-4e: #7c2d92; --niv-3e: #9a4508; --niv-2de: #9f1239;

  --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.55rem; --t-xxl: clamp(2rem, 4.2vw, 3.1rem);
  --rayon: 10px;
  --gouttiere: 16px;
  --panneau: 390px;
}

* { 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; }
/* refuge du focus pendant une animation (js/app.js) : le contour à l'intérieur de la zone, qui peut être rognée */
.scene:focus-visible, .commandes:focus-visible { outline-offset: -3px; border-radius: 0; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
/* commandes et blocs réservés à un niveau (data-niveau-min, voir js/app.js) */
.hors-niveau { display: none !important; }
/* texte lu par les lecteurs d'écran seulement ; ancré en haut à gauche de son bloc, il ne peut pas agrandir la page
   (placé à sa position naturelle, il dépassait du panneau qui défile et faisait défiler toute la page) */
.visuellement-cache { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.code, code { font-family: var(--f-mono); font-size: 0.9em; background: var(--surface-2); padding: 0 5px; border-radius: 4px; }
.chiffre { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
kbd { font-family: var(--f-mono); font-size: 0.85em; border: 1px solid var(--ligne); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--surface); }

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

/* ---------- ambiances des thèmes ---------- */
[data-fond] { --scene-1: var(--scene-nombres-1); --scene-2: var(--scene-nombres-2); }
[data-fond="puissances"] { --scene-1: var(--scene-puissances-1); --scene-2: var(--scene-puissances-2); }
[data-fond="litteral"] { --scene-1: var(--scene-litteral-1); --scene-2: var(--scene-litteral-2); }
[data-fond="proportion"] { --scene-1: var(--scene-proportion-1); --scene-2: var(--scene-proportion-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;
  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; align-items: center; }
.marque-courte { display: none; }
.choix-niveau .etiquette-niveau { font-size: var(--t-xs); color: var(--encre-2); margin-right: 6px; }
.choix-niveau > button { min-width: 3.1em; }

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: 6px 13px; font-size: var(--t-s); line-height: 1.2; text-decoration: none; min-height: 34px;
}
.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: var(--principal); border-color: var(--principal); color: #ffffff; font-weight: 700; }
.commandes button.principal:hover { background: var(--principal-fonce); border-color: var(--principal-fonce); }
.commandes button:disabled, .bouton:disabled { opacity: 0.45; cursor: default; }
.bouton {
  border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 999px; padding: 6px 14px;
  font-size: var(--t-s); font-weight: 700; text-decoration: none; display: inline-block; min-height: 34px;
}
.bouton:hover, .bouton.plein { background: var(--accent); color: var(--accent-encre); }
/* Boutons pleins : l'accent #2f5fe0 (texte blanc à 5,5:1), le bleu de ../commun/scolatools.css depuis le 15 oct. 2026
   (il était #398cef, 3,4:1, et l'appli le corrigeait ici). Pour la couleur de repos, cette règle est donc redondante ;
   elle est gardée parce qu'elle fixe aussi le survol de l'appli (--accent-fonce), sans quoi l'aspect changerait. */
.app .bouton.plein, .app .bouton.principal { background: var(--accent); color: var(--accent-encre); }
.app .bouton.plein:hover, .app .bouton.principal:hover { background: var(--accent-fonce); }
.petit-bouton {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 8px; padding: 3px 9px;
  font-size: var(--t-xs); line-height: 1.3; min-height: 28px;
}
.petit-bouton:hover { border-color: var(--accent); color: var(--accent-fonce); }

/* ---------- pastilles de niveau ---------- */
.niv {
  display: inline-block; font-family: var(--f-mono); font-size: 0.72rem; line-height: 1.5; padding: 0 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--encre-2); white-space: nowrap; font-weight: 500;
}
.niv[data-n="6e"] { background: #ddf3f0; color: var(--niv-6e); }
.niv[data-n="5e"] { background: #e3ebfd; color: var(--niv-5e); }
.niv[data-n="4e"] { background: #f3e5f7; color: var(--niv-4e); }
.niv[data-n="3e"] { background: #fdf0dc; color: var(--niv-3e); }
.niv[data-n="2de"] { background: #fde4ea; color: var(--niv-2de); }
/* « prolongement » : notion au-delà du programme (bord en tirets et mot écrit, jamais la couleur seule) */
.niv.prolongement { background: #f1f2f4; color: #3f4652; border: 1px dashed #6b7280; line-height: 1.35; }

/* ---------- 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: 62ch; }
.surtitre { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-fonce); margin: 0; }
.accueil-intro h1 { font-size: clamp(2.3rem, 6vw, 4rem); 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-dessin {
  position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--ligne); box-shadow: var(--ombre); aspect-ratio: 16 / 10;
  background: radial-gradient(110% 90% at 50% 35%, var(--scene-nombres-1), var(--scene-nombres-2));
}
.accueil-dessin canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.accueil-dessin .legende-dessin {
  position: absolute; z-index: 1; margin: 0; left: 12px; top: 10px; max-width: 34%; font-size: var(--t-xs); line-height: 1.35; color: var(--encre-2); pointer-events: none;
}
.citation {
  margin: 0; padding: 14px 18px; border-left: 4px solid var(--or-ligne); background: var(--surface); border-radius: 0 12px 12px 0; box-shadow: var(--ombre);
  display: grid; gap: 6px; max-width: 90ch;
}
.citation blockquote { margin: 0; font-family: var(--f-titre); font-size: var(--t-l); line-height: 1.4; color: var(--encre); }
.citation figcaption { font-size: var(--t-xs); color: var(--encre-2); }
.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); }
/* quatre thèmes : deux colonnes sur grand écran, une sur téléphone */
.grille-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 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-lien { display: block; text-decoration: none; color: inherit; }
.carte-lien:focus-visible { outline-offset: -3px; }
.carte .vignette { display: block; width: 100%; aspect-ratio: 16 / 9; 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: 8px; align-content: start; }
.carte h3 { font-size: var(--t-l); font-weight: 720; }
.carte h3 .numero { font-family: var(--f-mono); font-size: var(--t-s); color: var(--encre-2); font-weight: 500; margin-right: 4px; }
.carte p { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.carte .niveaux { display: flex; flex-wrap: wrap; gap: 4px; }
.liste-activites { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-top: 1px solid var(--ligne); padding-top: 8px; }
.liste-activites li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--t-s); }
.liste-activites a { color: var(--accent-fonce); font-weight: 600; text-decoration: none; padding: 3px 0; }
.liste-activites a:hover { text-decoration: underline; }
.liste-activites .etoiles { font-size: var(--t-xs); }
.liste-activites .plus-tard { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); white-space: nowrap; }
.lien-calcul { justify-self: start; font-size: var(--t-s); font-weight: 700; color: var(--accent-fonce); text-decoration: none; padding: 4px 0; min-height: 24px; }
.lien-calcul:hover { text-decoration: underline; }
.etoiles { letter-spacing: 1px; color: var(--or); white-space: nowrap; }
/* étoiles des missions à faire : un repère graphique, au moins 3:1 sur le blanc (#e3e8f0 ne faisait que 1,23:1) */
.etoiles .vide { color: #6b7280; }
.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; }
.pied-panneau { margin: 0; font-size: var(--t-xs); color: var(--encre-2); border-top: 1px solid var(--ligne); padding-top: 12px; }

/* ---------- écran d'activité ---------- */
.activite { display: grid; grid-template-columns: minmax(0, 1fr) var(--panneau); }
.activite.sans-panneau { grid-template-columns: minmax(0, 1fr); }
.activite.sans-panneau .panneau { display: none; }
.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)); }
.tete-scene { display: flex; gap: 8px; align-items: flex-start; padding: 10px var(--gouttiere) 0; }
.onglets { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.onglets a { background: var(--verre); }
.bouton-panneau {
  flex: none; width: 36px; height: 34px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--verre); color: var(--encre-2); font-size: 1.05rem;
}
.bouton-panneau:hover { border-color: var(--accent); color: var(--accent); }
.scene { position: relative; min-height: 0; overflow: hidden; }
.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; min-width: 0; max-width: 100%; } /* une liste au long texte ne pousse pas le groupe hors de l'écran */
.commandes .libelle { color: var(--encre-2); font-size: var(--t-xs); }
.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: 4.5em; }
.curseur input { width: 100%; accent-color: var(--accent); height: 24px; margin: 0; } /* une cible d'au moins 24 px de haut */
.case { display: inline-flex; gap: 6px; align-items: center; }
.case input { accent-color: var(--accent); width: 18px; height: 18px; }

.panneau {
  position: relative; /* bloc conteneur de ses textes masqués : ils restent dans la zone qui défile */
  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; min-height: 36px;
}
.panneau h1 { font-size: var(--t-xl); font-weight: 760; }
.niveaux { margin: -6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.consigne { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
/* activité d'un thème qui commence après le niveau choisi (texte, pas seulement une couleur) */
.avis-niveau { margin: 0; padding: 8px 12px; border-left: 4px solid #b45309; border-radius: 8px; background: #fff7ed; color: #7c2d12; font-size: var(--t-s); }
.avis-niveau[hidden] { display: none; }
.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 h2 { font-size: var(--t-l); font-weight: 720; color: var(--accent-fonce); }
.info p { margin: 0; }
@keyframes apparaitre { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.encart:empty { display: none; }
.encart { display: grid; gap: 10px; }
.missions { display: grid; gap: 6px; }
.missions h2, .titre-mono { 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: 0; }
.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 #b7c2d3; 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); } }
.texte { display: grid; gap: 10px; max-width: 68ch; }
.texte p { margin: 0; }
.texte p.niveau { border-left: 3px solid var(--accent); padding-left: 10px; }
.texte p.niveau[data-n="5e"] { border-color: var(--niv-5e); }
.texte p.niveau[data-n="4e"] { border-color: var(--niv-4e); }
.texte p.niveau[data-n="3e"] { border-color: var(--niv-3e); }
.texte p.niveau[data-n="2de"] { border-color: var(--niv-2de); }
.texte p.niveau .niv { margin-right: 6px; vertical-align: 1px; }
.texte p.niveau.prolongement { border-left-style: dashed; border-left-color: #6b7280; }
.plus-loin > summary .niv + .niv { margin-left: 4px; }
.texte h3 { font-size: var(--t-m); font-weight: 700; margin-top: 4px; }
.retenir { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; font-size: var(--t-s); }
.retenir:empty, .savais:empty, .plus-loin-boite: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); display: grid; gap: 8px; }
.savais h2 { color: var(--ocre); margin: 0; }
.savais p { margin: 0; }
.savais blockquote { margin: 0; padding-left: 10px; border-left: 3px solid var(--or-ligne); font-style: italic; }
.savais .source { font-size: var(--t-xs); color: var(--encre-2); }
.plus-loin-boite { display: grid; gap: 8px; }
.plus-loin { border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface); }
.plus-loin > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 700; font-size: var(--t-s);
}
.plus-loin > summary::-webkit-details-marker { display: none; }
.plus-loin > summary::before { content: "+"; font-family: var(--f-mono); width: 20px; height: 20px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--accent-doux); color: var(--accent-fonce); }
.plus-loin[open] > summary::before { content: "\2212"; }
.plus-loin > summary .niv { margin-left: auto; }
.plus-loin > div { padding: 0 14px 14px; display: grid; gap: 8px; font-size: var(--t-s); }
.plus-loin p { margin: 0; }
.programme-niveaux { font-size: var(--t-xs); color: var(--encre-2); }
.programme-niveaux summary { cursor: pointer; font-weight: 700; }
.programme-niveaux p { margin: 6px 0 0; }
.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-fonce); }
.suite a.fort { background: var(--accent); color: var(--accent-encre); font-weight: 700; }

/* tableau des effectifs (encart du panneau) */
.tableau { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tableau caption { text-align: left; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2); padding-bottom: 6px; }
.tableau th, .tableau td { padding: 4px 6px; border-bottom: 1px solid var(--ligne); text-align: right; font-variant-numeric: tabular-nums; }
.tableau th:first-child, .tableau td:first-child { text-align: left; }
.tableau thead th { font-size: var(--t-xs); color: var(--encre-2); font-weight: 600; }
.tableau td { font-family: var(--f-mono); font-size: 0.82rem; }
.tableau td:first-child { font-family: var(--f-texte); font-size: var(--t-s); }
.tableau tr.suivie td { background: var(--accent-doux); }
.tableau tfoot td { font-weight: 700; border-bottom: 0; }
.pastille-couleur { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(0, 0, 0, 0.25); }
.ligne-suivi { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.ligne-suivi strong { color: var(--encre); }

.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-fonce); }
.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: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40; background: var(--bon-fonce); color: #ffffff;
  padding: 10px 18px; border-radius: 999px; font-weight: 700; box-shadow: var(--ombre); animation: monter 0.35s ease;
  max-width: calc(100vw - 32px); text-align: center;
  width: max-content; /* sans cela, « left: 50% » ne lui laisse que la moitié de l'écran sur téléphone */
  /* message seulement : le doigt et la souris passent au travers (défilement de la figure, boutons des commandes dessous) */
  pointer-events: none;
}
@media (max-width: 600px) {
  /* sur deux lignes ou plus, un rectangle aux coins arrondis plutôt qu'un grand ovale */
  .toast { border-radius: 16px; padding: 10px 14px; }
}
@keyframes monter { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- 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, .page-mise > h1 { font-size: var(--t-xxl); font-weight: 780; }
.defis > p, .page-mise > p { margin: 0; color: var(--encre-2); max-width: 70ch; }
.defis > .bouton { justify-self: start; }
.grille-defis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.choix-defi {
  display: grid; gap: 4px; text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre);
}
.choix-defi:hover:not(:disabled) { border-color: var(--accent); }
.choix-defi:disabled { cursor: default; background: var(--surface-2); border-style: dashed; border-color: #a3adbd; } /* sans transparence : textes à au moins 4,5:1 */
.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-fonce); }
.medaille { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 0.72rem; font-weight: 700; font-family: var(--f-mono); color: #ffffff; justify-self: start; }
.medaille.or { background: #9c7a10; } .medaille.argent { background: #687480; } .medaille.bronze { background: #95582b; } .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; flex-wrap: wrap; gap: 4px 8px; font-size: var(--t-xs); color: var(--encre-2); font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.quiz-entete .auto { color: var(--niv-3e); background: #fdf0dc; border-radius: 999px; padding: 0 8px; }
.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.3; }
.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); min-height: 44px; }
.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: var(--bon-fonce); font-weight: 700; }
.quiz-choix button[data-ton="faux"] { background: var(--faux-doux); border-color: var(--faux); color: var(--faux-fonce); }
.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: var(--bon-fonce); } .explication strong.faux { color: var(--faux-fonce); }
.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: #b42318; }

/* ---------- lexique et crédits ---------- */
.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 > div:target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-doux); }
.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; }
.page-credits section { display: grid; gap: 8px; }
.page-credits h2 { font-size: var(--t-xl); }
.page-credits ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.page-credits li { max-width: 80ch; overflow-wrap: anywhere; }
.page-credits .droits { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 14px 16px; }

/* ---------- 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; }
  .scene { overflow: visible; }
  .panneau { border-left: 0; border-top: 1px solid var(--ligne); overflow: visible; }
  .choix-niveau { margin-left: 0; }
  .bouton-panneau { display: none; }
  .activite.sans-panneau .panneau { display: flex; }
}
@media (max-width: 860px) {
  /* téléphone et tablette : les commandes passent au-dessus de la scène, juste sous les onglets */
  .colonne-scene { display: flex; flex-direction: column; }
  .colonne-scene > .commandes { order: 1; border-top: 0; border-bottom: 1px solid var(--ligne); }
  .colonne-scene > .scene { order: 2; }
}
@media (max-width: 520px) {
  /* « .app » : plus précis que la barre commune (../commun/scolatools.css, chargée après cette feuille) */
  .app .barre { gap: 4px 8px; padding: 6px 12px; min-height: 0; }
  .app .barre .marque { font-size: 1rem; }
  /* le titre court sur téléphone : le titre complet reste lu par les lecteurs d'écran */
  .marque-longue { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .marque-courte { display: inline; }
  .app .barre nav { gap: 0; }
  .app .barre nav a { padding: 4px 6px; font-size: 0.82rem; }
  .app .choix-niveau { margin-left: auto; }
  .app .choix-niveau > button { padding: 3px 8px; min-height: 30px; font-size: 0.82rem; }
  .curseur { grid-template-columns: minmax(0, 1fr) auto; }
  .curseur span:first-child { grid-column: 1 / -1; }
  .commandes { padding: 10px 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .info, .toast, .missions li.vient::before { animation: none; }
  .quiz-progression span, .bloc-lien { transition: none; }
}


/* =================================================================
   DESSIN DE L'ACCUEIL : une droite et son zoom entre 2,3 et 2,4
   ================================================================= */
.dessin-accueil { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.acc-axe { stroke: var(--trait); stroke-width: 2; }
.acc-traits { stroke: var(--trait); stroke-width: 2; fill: none; }
.acc-nombre { font-family: var(--f-texte); font-variant-numeric: tabular-nums; font-size: 20px; fill: var(--trait); } /* le dessin rétrécit à 0,6 sur tablette : 12 px rendus au moins */
.acc-nombre.fort { font-weight: 600; }
.acc-loupe { fill: rgba(29, 78, 216, 0.12); stroke: var(--marque); stroke-width: 2; }
.acc-cone { fill: none; stroke: var(--marque); stroke-width: 1.5; stroke-dasharray: 5 5; }
.acc-marque { fill: var(--marque); }
.acc-texte-marque { font-family: var(--f-texte); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600; fill: var(--marque); }

/* =================================================================
   LA DROITE GRADUÉE (js/vue-droite.js) ET SES ACTIVITÉS
   ================================================================= */
.scene-droite {
  position: absolute; inset: 0; overflow: auto; padding: 12px var(--gouttiere) 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.bloc-droite {
  border-radius: 14px; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(31, 41, 55, 0.12); box-shadow: var(--ombre);
  padding: 6px 0;
}
.droite-vue { position: relative; }
/* seule la droite reçoit le pincement : le défilement vertical de la page reste au doigt (pan-y) */
.droite-zone { position: relative; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; outline: none; border-radius: 12px; }
.droite-zone:active { cursor: grabbing; }
.droite-zone:focus-visible { box-shadow: 0 0 0 3px var(--accent) inset; }
.droite-svg { display: block; width: 100%; overflow: hidden; }
.droite-svg .axe { stroke: var(--trait); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.droite-svg .traits { stroke: var(--trait); stroke-width: 1.4; fill: none; shape-rendering: crispEdges; }
.droite-svg .etiquettes text { font-family: var(--f-texte); font-variant-numeric: tabular-nums; font-size: 14px; fill: var(--trait); }
.droite-svg .etiquettes text.fort { font-weight: 600; }
.repere-marque { stroke: var(--marque); stroke-width: 1.5; stroke-dasharray: 3 3; }
.triangle-marque { fill: var(--marque); }
.texte-marque { font-family: var(--f-texte); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; fill: var(--marque); paint-order: stroke; stroke: #ffffff; stroke-width: 4px; stroke-linejoin: round; }
.point-eleve { fill: var(--marque); stroke: #ffffff; stroke-width: 2.5; }
.repere-point { stroke: var(--marque); stroke-width: 1.5; }
.texte-point { font-family: var(--f-texte); font-size: 13px; font-weight: 700; fill: var(--marque); paint-order: stroke; stroke: #ffffff; stroke-width: 4px; stroke-linejoin: round; }
.triangle-cible { fill: var(--cible); stroke: #ffffff; stroke-width: 1.5; }
.texte-cible { font-family: var(--f-texte); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; fill: #8a3d06; paint-order: stroke; stroke: #ffffff; stroke-width: 4px; stroke-linejoin: round; }
.ecart { fill: none; stroke: #8a3d06; stroke-width: 1.5; }
.aide-clavier { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
/* intervalles emboîtés (« Tu es entre 2 et 3 › entre 2,3 et 2,4 ») : chaque étape ramène à son intervalle */
.fil-zoom { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: var(--t-s); min-height: 30px; }
.fil-titre { color: var(--encre-2); }
.fil-sep, .fil-plus { color: var(--encre-2); }
.fil-etape {
  font-family: var(--f-mono); font-size: 0.82rem; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre);
  border-radius: 999px; padding: 2px 10px; min-height: 28px;
}
.fil-etape:hover { border-color: var(--accent); color: var(--accent-fonce); }
.fil-etape:last-of-type { background: var(--accent-doux); border-color: #b9cdf7; }
.lecture-droite { display: grid; gap: 8px; font-size: var(--t-s); }
.lecture-vue { margin: 0; color: var(--encre-2); }
.marque-info { background: var(--surface); border: 1px solid var(--ligne); border-left: 4px solid var(--marque); border-radius: 10px; padding: 8px 12px; }
.marque-info p { margin: 0; }
.marque-info ul { margin: 4px 0; padding-left: 1.1em; display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.marque-info .plus-haut { list-style: none; color: var(--encre-2); }
.marque-arrondi { color: var(--encre-2); }
.champ-nombre { display: inline-flex; gap: 6px; align-items: center; }
.champ-nombre span { color: var(--encre-2); font-size: var(--t-xs); }
.champ-nombre input {
  font-family: var(--f-mono); border: 1px solid var(--ligne); border-radius: 8px; padding: 5px 8px; min-height: 34px; background: var(--surface);
  width: 9.5em;
}
.commandes button[aria-disabled="true"], .bouton[aria-disabled="true"] { opacity: 0.5; cursor: default; }

/* « Place le nombre » */
.tete-place { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: space-between; }
.compteur-place { margin: 0; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
.nombre-a-placer { margin: 0; font-size: var(--t-l); }
.nombre-cible { font-family: var(--f-texte); font-variant-numeric: tabular-nums; font-size: 1.6rem; color: #8a3d06; padding: 0 4px; }
.fraction-ecrite { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.frac { display: inline-grid; grid-template-rows: auto auto; text-align: center; line-height: 1.05; font-size: 1.15rem; }
.frac > span:first-child { border-bottom: 2px solid currentColor; padding: 0 3px 1px; }
.frac > span:last-child { padding: 1px 3px 0; }
.resultat-place { min-height: 3.2em; }
.phrase-resultat { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--ligne); font-size: var(--t-s); }
.phrase-resultat.points-3 { border-color: var(--bon); background: var(--bon-doux); }
.phrase-resultat.points-0 { border-color: #f1b5b0; background: #fff5f4; }
.phrase-resultat.fin { border-color: var(--accent); background: var(--accent-doux); font-weight: 700; }

/* =================================================================
   CALCUL MENTAL CHRONOMÉTRÉ (js/calcul-mental.js)
   ================================================================= */
.calcul .surtitre { margin: 0; }
.groupe-duree { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.groupe-duree .libelle { color: var(--encre-2); font-size: var(--t-s); }
.record { margin: 0; font-family: var(--f-mono); font-size: var(--t-s); color: var(--accent-fonce); }
.calcul-question .enonce { min-height: 1.3em; }
.saisie-calcul { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.saisie-calcul input {
  font-family: var(--f-mono); font-size: 1.2rem; border: 1px solid #9aa5b5; border-radius: 10px; padding: 8px 12px; min-height: 44px;
  width: min(14em, 100%); background: var(--surface);
}
.retour-calcul { margin: 0; min-height: 1.5em; font-size: var(--t-s); color: var(--encre-2); }
.chrono { font-weight: 600; }
.chrono.presse { color: #b42318; }
.chrono.presse::after { content: " ⚠"; }
.mini-droite { width: min(100%, 420px); height: auto; display: block; }
.mini-droite .axe, .mini-droite .traits line { stroke: var(--trait); stroke-width: 1.6; }
.mini-droite text { font-family: var(--f-texte); font-variant-numeric: tabular-nums; font-size: 14px; fill: var(--trait); }
.mini-droite .point { fill: var(--marque); }
.mini-droite .lettre { font-family: var(--f-texte); font-weight: 700; fill: var(--marque); }
.correction-calcul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; font-size: var(--t-s); }
.correction-calcul li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); }
.correction-calcul li.juste .marque { color: var(--bon-fonce); font-weight: 700; }
.correction-calcul li.a-revoir .marque { color: var(--faux-fonce); font-weight: 700; }
.correction-calcul em { font-style: normal; color: var(--encre-2); }
.section-calcul { display: grid; gap: 10px; border-top: 1px solid var(--ligne); padding-top: 18px; }
.section-calcul h2 { font-size: var(--t-xl); }
.section-calcul p { margin: 0; color: var(--encre-2); }
.liens-calcul { display: flex; flex-wrap: wrap; gap: 8px; }

/* =================================================================
   PETITS ÉCRANS, MOUVEMENT RÉDUIT, IMPRESSION
   ================================================================= */
@media (max-width: 860px) {
  .scene-droite { position: relative; inset: auto; overflow: visible; }
}
@media (max-width: 520px) {
  .scene-droite { padding: 10px 10px 12px; }
  .champ-nombre input { width: 10em; }
}
@media print {
  html, body { height: auto; background: #ffffff; }
  .app { display: block; height: auto; }
  .barre, .tete-scene, .commandes, .bouton-panneau, .toast, .bulle-mot, .choix-module, .suite, .raccourcis, .abandon,
  .quiz-actions, .saisie-calcul, .aide-clavier, .fil-zoom button { display: none !important; }
  main, .ecran { position: static; overflow: visible; }
  .ecran[hidden] { display: none !important; }
  .activite { display: block; }
  .colonne-scene { background: none; }
  .scene, .scene-droite { position: relative; overflow: visible; }
  .bloc-droite { box-shadow: none; break-inside: avoid; }
  .panneau { border: 0; overflow: visible; padding: 0; }
  .plus-loin > div { display: grid !important; }
  .carte, .bloc, .question { box-shadow: none; break-inside: avoid; }
  a { color: inherit; }
}

/* Téléphones et tablettes : tous les champs de saisie et toutes les listes à 16 px au moins (en dessous, Safari sur
   iPhone et iPad agrandit la page dès qu'on touche le champ). Rien ne change sur ordinateur. */
@media (max-width: 860px), (pointer: coarse) {
  .app select, .app textarea, .app input:not([type=range]):not([type=checkbox]):not([type=radio]) { font-size: 16px; }
}

/* Accueil : l'illustration est à hauteur du titre, à droite (commun/scolatools.css) ; le dessin garde ses proportions
   et la légende passe sous le dessin au lieu de le recouvrir (comme figures-solides et sons) */
.accueil-dessin { aspect-ratio: auto; display: grid; gap: 2px; padding: 10px 0 12px; }
.dessin-accueil { position: static; display: block; width: 100%; height: auto; }
.accueil-dessin .legende-dessin { position: static; max-width: none; padding: 0 14px; }
/* lien du pied du panneau : une cible d'au moins 24 px de haut */
.pied-panneau a { display: inline-block; padding: 4px 0; }

/* =================================================================
   THÈME 1, SECONDE MOITIÉ : RELATIFS, FRACTIONS, TOUTES LES FORMES
   Motifs (js/fractions-dessin.js) : hachures bleues \\\ (1re fraction, parts coloriées), orange /// (2e fraction),
   croisées (produit), carrés verts ; toujours un motif ou un texte, jamais la couleur seule.
   ================================================================= */
.motif-fond-a { fill: #dfe8ff; } .motif-trait-a { stroke: #1d4ed8; stroke-width: 1.6; fill: none; }
.motif-fond-b { fill: #ffead2; } .motif-trait-b { stroke: #a14a06; stroke-width: 1.6; fill: none; }
.motif-fond-ab { fill: #efe6fb; }
.motif-fond-c { fill: #dcf3e5; } .motif-trait-c { fill: #11743a; }
.part { stroke: var(--trait); stroke-width: 1.2; }
.part:not(.pleine) { fill: #ffffff; } /* une part pleine prend le motif donné par l'attribut fill */
.part[role="button"] { cursor: pointer; outline: none; }
.part[role="button"]:hover { stroke-width: 2.4; }
.part[role="button"]:focus-visible { stroke: var(--accent); stroke-width: 4; }
.contour-barre { fill: none; stroke: var(--trait); stroke-width: 2; pointer-events: none; }
.axe-mini { stroke: var(--trait); stroke-width: 2; fill: none; }
.traits-mini { stroke: var(--trait); stroke-width: 1.4; fill: none; }
.nombre-mini { font-family: var(--f-texte); font-variant-numeric: tabular-nums; font-size: 14px; fill: var(--trait); }
.point-mini { fill: var(--marque); stroke: #ffffff; stroke-width: 2; }
.point-mini.cible, .point-mini.point-b { fill: var(--cible); }
.texte-point-mini { font-family: var(--f-texte); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; fill: var(--marque); paint-order: stroke; stroke: #ffffff; stroke-width: 4px; stroke-linejoin: round; }
.texte-point-mini.cible, .texte-point-mini.point-b { fill: #8a3d06; }
.titre-unite, .etiquette-ligne { font-family: var(--f-texte); font-size: 13px; fill: var(--encre-2); }
.etiquette-ligne { font-variant-numeric: tabular-nums; font-weight: 600; fill: var(--encre); }

/* en-tête commun des scènes de fractions : la fraction écrite en grand et sa phrase */
.scene-fractions, .scene-formes, .scene-relatifs { gap: 12px; }
/* la scène est une colonne flexible qui défile : ses blocs gardent leur hauteur (sinon le dessin serait rogné) */
.scene-fractions > *, .scene-formes > *, .scene-relatifs > * { flex-shrink: 0; }
.bouton-case, .division-posee button {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 999px;
  padding: 6px 13px; font-size: var(--t-s); line-height: 1.2; min-height: 34px;
}
.bouton-case:hover, .division-posee button:hover { border-color: var(--accent); }
.division-posee button.principal { background: var(--principal); border-color: var(--principal); color: #ffffff; font-weight: 700; }
.division-posee button[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.tete-fraction { display: grid; gap: 4px; }
.fraction-grande { margin: 0; font-size: 1.35rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-variant-numeric: tabular-nums; }
.fraction-grande .frac { font-size: 1.3rem; }
.libelle-fraction { font-size: var(--t-s); color: var(--encre-2); }
.egal { color: var(--encre-2); font-weight: 600; }
.fraction-detail { margin: 0; font-size: var(--t-s); color: var(--encre-2); max-width: 75ch; }
/* retour visible des prévisions de l'échiquier (finition du thème 2) : un mot en tête, jamais la couleur seule */
.retour-sissa { margin: 4px 0 0; padding: 6px 10px; border-left: 4px solid var(--encre-2); background: #fff; font-size: var(--t-s); color: var(--encre); max-width: 75ch; }
.retour-sissa[data-ton="juste"] { border-left-color: var(--bon-fonce); color: var(--bon-fonce); }
.retour-sissa[data-ton="faux"] { border-left: 4px dashed var(--faux-fonce); color: var(--faux-fonce); }
.bloc-fraction, .bloc-formes, .bloc-relatifs { padding: 8px 0; overflow: hidden; }
.dessin-fraction, .dessin-formes, .droite-relatifs { display: block; max-width: 100%; }

/* « La fraction en barres et en quotient » : baguettes, coupes et morceaux des enfants (lettre écrite sur chaque morceau) */
.baguette { fill: #e9d3b0; stroke: #6b4a1f; stroke-width: 1.5; }
.baguette.vide { fill: #ffffff; stroke-dasharray: 4 3; }
.coupe { stroke: var(--trait); stroke-width: 1.5; fill: none; }
.morceau { stroke: var(--trait); stroke-width: 1.2; }
.morceau.retire { stroke-dasharray: 4 3; }
.barre-retire { stroke: #b42318; stroke-width: 2; }
.lettre-morceau { font-family: var(--f-texte); font-size: 13px; font-weight: 700; fill: #1f2937; paint-order: stroke; stroke: #ffffff; stroke-width: 3px; }
.sous-decoupe { stroke: var(--trait); stroke-width: 1; stroke-dasharray: 3 2; fill: none; }

/* « Les relatifs sur la droite » : la droite horizontale et la même droite verticale (thermomètre, plongée, ascenseur) */
.relatifs-haut { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; align-items: start; }
.illus-relatifs { width: 128px; height: auto; display: block; background: #ffffff; border: 1px solid var(--ligne); border-radius: 12px; }
.relatifs-texte { display: grid; gap: 8px; align-content: start; }
.expression-relatifs { margin: 0; font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.phrase-relatifs { margin: 0; font-size: var(--t-s); color: var(--encre-2); max-width: 70ch; }
.cartes-ranger { display: flex; flex-wrap: wrap; gap: 8px; }
.cartes-ranger[hidden] { display: none; }
.carte-nombre { font-family: var(--f-texte); font-variant-numeric: tabular-nums; font-size: 1.1rem; font-weight: 700; min-width: 64px; min-height: 40px; padding: 4px 12px; border-radius: 10px; border: 2px solid var(--marque); background: #ffffff; color: var(--marque); }
.carte-nombre:hover { background: var(--accent-doux); }
.droite-relatifs .axe { stroke: var(--trait); stroke-width: 2; fill: none; stroke-linecap: round; }
.droite-relatifs .traits { stroke: var(--trait); stroke-width: 1.4; fill: none; }
.etiquette-relatif { font-family: var(--f-texte); font-variant-numeric: tabular-nums; font-size: 14px; fill: var(--trait); }
.etiquette-relatif.zero { font-weight: 700; }
.zone-texte { font-family: var(--f-texte); font-size: 12px; fill: var(--encre-2); }
.fleche { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fleche-ajout { stroke: var(--marque); }
.fleche-oppose { stroke: #8a3d06; stroke-dasharray: 6 4; }
.fleche-saut { stroke: #11743a; }
.texte-fleche { font-family: var(--f-texte); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; stroke: #ffffff; stroke-width: 4px; paint-order: stroke; }
.texte-fleche.fleche-ajout { fill: var(--marque); }
.texte-fleche.fleche-oppose { fill: #8a3d06; stroke-dasharray: none; }
.depart { fill: #ffffff; stroke: var(--trait); stroke-width: 1.5; }
.point-range { fill: var(--marque); stroke: #ffffff; stroke-width: 2; }
.ciel { fill: #f3f8ff; } .mer { fill: #d6ebfa; } .vague { fill: none; stroke: #2563a8; stroke-width: 1.5; }
.echelle-v { stroke: var(--trait); stroke-width: 1.3; fill: none; }
.illus-nombre { font-family: var(--f-texte); font-variant-numeric: tabular-nums; font-size: 12.5px; fill: var(--trait); }
.illus-petit { font-family: var(--f-texte); font-size: 12.5px; fill: #374151; }
.illus-valeur { font-family: var(--f-texte); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 700; fill: var(--marque); paint-order: stroke; stroke: #ffffff; stroke-width: 3px; }
.tube { fill: #ffffff; stroke: var(--trait); stroke-width: 1.5; }
.bulbe, .liquide { fill: #b91c1c; }
.bulbe { stroke: var(--trait); stroke-width: 1.5; }
.cage { fill: #f1f3f6; stroke: var(--trait); stroke-width: 1.5; }
.sol { stroke: var(--trait); stroke-width: 2; }
.cabine { fill: var(--marque); stroke: #ffffff; stroke-width: 1.5; }
.plongeur { fill: var(--marque); stroke: #ffffff; stroke-width: 2; }
.plongeur-trait { stroke: var(--marque); stroke-width: 3; stroke-linecap: round; }

/* « Un nombre sous toutes ses formes » : cinq cases liées, barre et grilles de cent carreaux, division posée */
.chaine-formes { margin: 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cases-formes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.case-forme { background: #ffffff; border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 6px; align-content: start; }
.case-forme.source { border-color: var(--marque); box-shadow: 0 0 0 1px var(--marque); }
.case-forme.vide { background: var(--surface-2); border-style: dashed; border-color: #8a94a6; }
.case-forme label { font-size: var(--t-xs); font-weight: 700; color: var(--encre-2); text-transform: uppercase; letter-spacing: 0.04em; }
.ligne-case { display: flex; gap: 6px; }
.ligne-case input { flex: 1; min-width: 0; font-family: var(--f-mono); font-size: 1rem; border: 1px solid #9aa5b5; border-radius: 8px; padding: 6px 8px; min-height: 36px; background: #ffffff; }
.bouton-case { min-height: 36px; min-width: 40px; }
.note-case { margin: 0; font-size: var(--t-xs); color: var(--encre-2); overflow-wrap: anywhere; }
.note-case.erreur { color: #b42318; font-weight: 600; }
.note-case.erreur::before { content: "⚠ "; }
.carreau { stroke: #6b7280; stroke-width: 0.8; }
.carreau:not(.plein) { fill: #ffffff; }
.legende-formes { margin: 4px 14px 0; font-size: var(--t-xs); color: var(--encre-2); }
.division-posee { display: grid; gap: 8px; background: #ffffff; border: 1px solid var(--ligne); border-left: 4px solid var(--niv-2de); border-radius: 12px; padding: 10px 12px; }
.division-posee .groupe { display: flex; flex-wrap: wrap; gap: 6px; }
.division-texte { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.periode { text-decoration: overline; text-decoration-thickness: 2px; font-weight: 700; }
.division-liste { margin: 0; padding-left: 1.2em; font-family: var(--f-mono); font-size: 0.82rem; display: grid; gap: 2px; }
.division-liste .plus-haut { list-style: none; color: var(--encre-2); }
.ensembles-formes { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.mini-barre { width: min(100%, 420px); height: auto; display: block; }
.mini-barre .part { stroke: var(--trait); stroke-width: 1.2; }
.part:not(.pleine) { fill: #ffffff; } /* une part pleine prend le motif donné par l'attribut fill */

@media (max-width: 520px) {
  .relatifs-haut { grid-template-columns: 128px minmax(0, 1fr); gap: 8px; }
  .expression-relatifs { font-size: 1.2rem; }
  .fraction-grande { font-size: 1.15rem; }
}
@media print {
  .cases-formes .bouton-case, .division-posee .groupe, .cartes-ranger { display: none !important; }
}

/* =================================================================
   THÈME 2, PREMIÈRE MOITIÉ : ÉCHIQUIER DE SISSA, PUISSANCES DE 10, CARRÉ ET RACINE
   Cases pleines et carreaux : motif (points verts) et texte, jamais la couleur seule.
   ================================================================= */
.scene-sissa, .scene-puissances, .scene-carre { gap: 12px; }
.scene-sissa > *, .scene-puissances > *, .scene-carre > * { flex-shrink: 0; }
.sissa-case { font-size: 1.25rem; }
.sissa-total { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; font-weight: 600; }
.tete-sissa .fraction-detail, .tete-sissa .sissa-case { overflow-wrap: anywhere; }
.sissa-corps { display: grid; grid-template-columns: minmax(240px, 440px) minmax(240px, 1fr); gap: 14px; align-items: start; }
.bloc-sissa { min-width: 0; }
.plateau-sissa, .tas-sissa { display: block; max-width: 100%; height: auto; }
.case-sissa { stroke: var(--trait-doux); stroke-width: 1; cursor: pointer; outline: none; }
/* une case pleine prend le motif donné par l'attribut fill (le CSS l'emporterait sur l'attribut) */
.case-sissa:not(.pleine) { fill: #ffffff; }
.case-sissa.foncee { fill: #e9edf3; }
.case-sissa:hover { stroke-width: 2.2; }
.case-sissa:focus-visible { stroke: var(--accent); stroke-width: 4; }
.texte-case { font-family: var(--f-texte); font-variant-numeric: tabular-nums; fill: var(--encre-2); pointer-events: none; }
.texte-case.plein { fill: var(--encre); font-weight: 700; paint-order: stroke; stroke: #ffffff; stroke-width: 3px; }
.sol-tas { stroke: var(--trait); stroke-width: 2; }
.tas-sissa .grains ellipse { fill: #d9b46a; stroke: #6b4a1f; stroke-width: 0.8; }
.tas-sissa .points-tas circle { fill: #8a6a2f; }
.legende-tas { margin: 4px 0 0; font-size: var(--t-xs); color: var(--encre-2); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .sissa-corps { grid-template-columns: minmax(0, 1fr); }
}
/* Des puissances de 10 à la notation scientifique : règle logarithmique, nombre écrit en entier, cartes des objets */
.puissance-grande { font-size: 1.3rem; overflow-wrap: anywhere; }
.nombre-entier { margin: 0; font-family: var(--f-mono); font-size: 0.95rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; word-break: break-word; }
.bloc-regle, .bloc-carre { min-width: 0; overflow: hidden; }
.regle-puissances, .dessin-carre { display: block; max-width: 100%; height: auto; }
.axe-regle { stroke: var(--trait); stroke-width: 2; }
.trait-regle { stroke: var(--trait); stroke-width: 1.2; }
.texte-regle { font-family: var(--f-texte); font-size: 12px; fill: var(--trait); }
.repere-objet { stroke: var(--cible); stroke-width: 2; }
.zone-regle { fill: rgba(47, 95, 224, 0.14); stroke: var(--marque); stroke-width: 2; }
.titre-regle { font-family: var(--f-texte); font-size: 13px; font-weight: 700; fill: var(--marque); }
.triangle-regle { fill: var(--marque); }
.triangle-regle.b { fill: var(--cible); }
.contenu-puissances { display: grid; gap: 8px; min-width: 0; }
.titre-contenu { margin: 0; font-size: var(--t-m); }
.cartes-objets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.carte-objet { display: grid; gap: 2px; background: #ffffff; border: 1px solid var(--ligne); border-left: 4px solid var(--cible); border-radius: 10px; padding: 8px 10px; font-size: var(--t-s); overflow-wrap: anywhere; }
.carte-objet .valeur-objet { font-variant-numeric: tabular-nums; font-weight: 600; }
.tableau-conversions { max-width: 100%; }
.tableau-conversions td { overflow-wrap: anywhere; font-family: var(--f-mono); font-size: 0.85rem; }
.choix-objet { display: inline-flex; gap: 6px; align-items: center; max-width: 100%; }
.choix-objet span { color: var(--encre-2); font-size: var(--t-xs); }
.choix-objet select { min-width: 0; max-width: 100%; flex: 0 1 auto; min-height: 34px; border: 1px solid var(--ligne); border-radius: 8px; padding: 4px 8px; background: var(--surface); color: var(--encre); font-family: inherit; }
/* Carré et racine : carreaux à motif, carrés voisins en tirets, intervalles emboîtés, courbe des carrés */
.grille-carre { stroke: #c9d2de; stroke-width: 1; fill: none; }
.carre-regle, .carre-unite, .carre-diagonale { stroke: var(--trait); stroke-width: 2; }
.carre-voisin { fill: none; stroke: var(--trait-doux); stroke-width: 1.5; stroke-dasharray: 5 4; }
.texte-carre { font-family: var(--f-texte); font-size: 14px; fill: var(--encre); font-weight: 600; }
.texte-carre.aire { paint-order: stroke; stroke: #ffffff; stroke-width: 4px; }
.diagonale { stroke: var(--marque); stroke-width: 3; }
.demi-carreaux { stroke: var(--trait); stroke-width: 1; stroke-dasharray: 4 3; fill: none; }
.bloc-balayage { display: grid; gap: 4px; }
.titre-balayage { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.balayage { list-style: none; margin: 0; padding: 0; font-family: var(--f-mono); font-size: 0.85rem; display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.courbe-carres { fill: none; stroke: var(--marque); stroke-width: 2.5; }
.droite-a { stroke: var(--cible); stroke-width: 2; stroke-dasharray: 7 4; }
.point-solution { fill: #ffffff; stroke: var(--trait); stroke-width: 3; }
.rappel-solution { stroke: var(--trait-doux); stroke-width: 1.2; stroke-dasharray: 3 3; }
@media print {
  .bloc-balayage { break-inside: avoid; }
}
.carreaux-carre { stroke: #11743a; stroke-width: 1; fill: none; opacity: 0.7; }

/* =================================================================
   THÈME 2, SECONDE MOITIÉ : CRIBLE D'ÉRATOSTHÈNE, ARBRE DE DÉCOMPOSITION
   Nombres éteints : barrés d'une croix sur fond gris ; nombres premiers : entourés ; 1 : barré en tirets ; nombres à
   casser : cadre en tirets ; facteurs barrés : rayés et en tirets. Jamais la couleur seule.
   ================================================================= */
.scene-crible, .scene-arbre { gap: 12px; }
.scene-crible > *, .scene-arbre > * { flex-shrink: 0; }
.bloc-crible, .bloc-arbre, .bloc-criteres, .bloc-test, .bloc-simplifier { display: grid; gap: 8px; min-width: 0; }
.crible-grande, .arbre-grande { overflow-wrap: anywhere; }
.grille-crible { display: block; max-width: 100%; height: auto; }
.case-crible { cursor: pointer; outline: none; }
.case-crible .fond-case { fill: #ffffff; stroke: #c9d2de; stroke-width: 1; }
.case-crible .anneau, .case-crible .croix, .case-crible .barre-un { display: none; }
.texte-crible { font-family: var(--f-texte); font-variant-numeric: tabular-nums; fill: var(--encre); pointer-events: none; }
.case-crible.premier .anneau { display: inline; fill: #eaf0ff; stroke: var(--marque); stroke-width: 2.5; }
.case-crible.premier .texte-crible { font-weight: 700; fill: #1e3a8a; }
.case-crible.eteint .fond-case { fill: #eceff3; }
.case-crible.eteint .croix { display: inline; stroke: #6b7280; stroke-width: 1.6; fill: none; }
.case-crible.eteint .texte-crible { fill: #374151; paint-order: stroke; stroke: #eceff3; stroke-width: 3px; }
.case-crible.un .fond-case { stroke: #6b7280; stroke-dasharray: 4 3; }
.case-crible.un .barre-un { display: inline; stroke: #6b7280; stroke-width: 1.6; stroke-dasharray: 3 2; fill: none; }
.case-crible.en-cours .fond-case { fill: #fff1df; stroke: var(--cible); stroke-width: 2; }
.case-crible:hover .fond-case { stroke: var(--accent); stroke-width: 2; }
.case-crible:focus-visible .fond-case { stroke: var(--accent); stroke-width: 4; }
.legende-crible, .liste-premiers, .decomposition-criteres { margin: 0; font-size: var(--t-s); overflow-wrap: anywhere; }
.legende-crible { color: var(--encre-2); }
.lg { display: inline-block; min-width: 1.7em; text-align: center; border: 1px solid #c9d2de; border-radius: 4px; padding: 0 3px; color: var(--encre); font-variant-numeric: tabular-nums; }
.lg-premier { border: 2px solid var(--marque); border-radius: 999px; font-weight: 700; color: #1e3a8a; background: #eaf0ff; }
.lg-eteint { background: #eceff3; text-decoration: line-through; text-decoration-thickness: 2px; color: #374151; }
.lg-un { border: 1px dashed #6b7280; }
.liste-premiers { font-variant-numeric: tabular-nums; }
/* critères de divisibilité : six chiffres réglables, cinq cases qui s'allument (✓ ou ✗ et une phrase) */
.roues { display: flex; gap: 6px; align-items: start; }
.roue { display: grid; justify-items: center; gap: 2px; }
.roue.millier { margin-left: 10px; }
.bouton-roue { min-width: 40px; min-height: 32px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 8px; font-size: 0.9rem; line-height: 1; }
.bouton-roue:hover { border-color: var(--accent); }
.chiffre-roue { font-family: var(--f-mono); font-size: 1.8rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rang-roue { font-size: var(--t-xs); color: var(--encre-2); }
.somme-chiffres { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.cases-criteres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.case-critere { display: grid; gap: 2px; border: 1px solid var(--ligne); border-left-width: 5px; border-radius: 10px; padding: 8px 10px; background: #ffffff; font-size: var(--t-s); overflow-wrap: anywhere; }
.case-critere.oui { border-color: var(--bon-fonce); background: var(--bon-doux); }
.case-critere.non { border-left-style: dashed; color: var(--encre-2); }
.titre-critere { font-weight: 700; }
.case-critere.oui .titre-critere { color: var(--bon-fonce); }
.verif-critere { font-family: var(--f-mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.euclide { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: var(--t-s); overflow-wrap: anywhere; }
.essais-test .fin-test { font-weight: 700; }
/* arbre de décomposition : nombres à casser en tirets, nombres cassés grisés, nombres premiers entourés */
.dessin-arbre { display: block; max-width: 100%; height: auto; }
.branche { stroke: var(--trait-doux); stroke-width: 2; }
.noeud { cursor: pointer; outline: none; }
.noeud .forme-noeud { fill: #ffffff; stroke: var(--trait); stroke-width: 1.8; }
.noeud.compose:not(.casse) .forme-noeud { stroke-dasharray: 5 3; }
.noeud.casse .forme-noeud { fill: #f1f3f6; }
.noeud.premier .forme-noeud { fill: #eaf0ff; stroke: var(--marque); stroke-width: 3; }
.noeud.choisi .forme-noeud { fill: #fff1df; stroke: var(--cible); stroke-width: 3; stroke-dasharray: none; }
.texte-noeud { font-family: var(--f-texte); font-size: 15px; font-weight: 700; fill: var(--encre); pointer-events: none; font-variant-numeric: tabular-nums; }
.noeud.premier .texte-noeud { fill: #1e3a8a; }
.noeud:hover .forme-noeud { stroke-width: 3; }
.noeud:focus-visible .forme-noeud { stroke: var(--accent); stroke-width: 4; }
.paires { display: grid; gap: 6px; }
.titre-paires { margin: 0; font-size: var(--t-s); font-weight: 600; }
.boutons-paires { display: flex; flex-wrap: wrap; gap: 6px; }
.bouton-paire, .facteur {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 999px; padding: 6px 13px;
  font-size: var(--t-s); line-height: 1.2; min-height: 34px; font-family: var(--f-mono); font-variant-numeric: tabular-nums;
}
.bouton-paire:hover, .facteur:hover { border-color: var(--accent); }
.facteur { border-radius: 8px; min-width: 40px; font-weight: 700; }
.facteur.barre { text-decoration: line-through; text-decoration-thickness: 2px; color: #374151; background: #eceff3; border-style: dashed; border-color: #6b7280; cursor: default; }
.ligne-facteurs { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nom-ligne { font-size: var(--t-s); color: var(--encre-2); }
.fois { color: var(--encre-2); }
.resultat-fraction { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.liste-termines { margin: 0; padding-left: 1.1em; font-size: var(--t-s); display: grid; gap: 2px; }
@media (max-width: 520px) {
  .chiffre-roue { font-size: 1.5rem; }
  .bouton-roue { min-width: 36px; }
  .roue.millier { margin-left: 6px; }
}
@media print {
  .bouton-roue { display: none !important; }
  .bloc-crible, .bloc-criteres, .bloc-arbre, .bloc-simplifier { break-inside: avoid; }
}

/* =================================================================
   THÈME 3, PREMIÈRE MOITIÉ : MOTIFS, MACHINE À NOMBRES, BALANCE
   Allumettes ajoutées : orange ET en pointillés ; emplacements vides : pointillés fins ; blocs de la machine : texte
   et bord ; balance qui penche : dessin ET phrase. Jamais la couleur seule.
   ================================================================= */
.scene-motifs, .scene-machine, .scene-balance { gap: 12px; }
.scene-motifs > *, .scene-machine > *, .scene-balance > * { flex-shrink: 0; }
.bloc-motif { min-width: 0; overflow-x: auto; }
.dessin-motif { display: block; max-width: 100%; height: auto; }
.allumette .bois { stroke: #7a4e16; stroke-width: 5; stroke-linecap: round; }
.allumette .tete { fill: #b42318; }
.allumette.nouvelle .bois { stroke: #b45309; stroke-dasharray: 8 4; stroke-linecap: butt; }
.allumette.posee .bois { stroke: #1d4ed8; }
.allumette.posee .tete { fill: #1e3a8a; }
.emplacement { cursor: pointer; outline: none; }
.emplacement .zone { fill: transparent; stroke: none; }
.emplacement .anneau { stroke: transparent; stroke-width: 12; stroke-linecap: round; }
.emplacement .vide { stroke: #4b5563; stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
.emplacement:hover .vide { stroke: var(--accent); stroke-width: 3; }
.emplacement:focus-visible .anneau { stroke: var(--accent); }
.legende-motif { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
.table-motif { border-collapse: collapse; font-size: var(--t-s); font-variant-numeric: tabular-nums; background: #ffffff; max-width: 100%; }
.table-motif caption { text-align: left; font-weight: 600; padding: 0 0 4px; overflow-wrap: anywhere; }
.table-motif th, .table-motif td { border: 1px solid var(--ligne); padding: 4px 10px; text-align: center; }
.table-motif tr.different td { background: var(--faux-doux); color: var(--faux-fonce); font-weight: 600; }
.table-motif tr.different td:last-child { border-left: 3px dashed var(--faux-fonce); }
@media print {
  .bloc-motif, .bloc-table-motif { break-inside: avoid; }
}
/* La machine à nombres : blocs empilés (texte et bord), machine modifiée marquée ✎ et d'un bord épais */
.machines { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; align-items: start; }
.machine { background: #ffffff; border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; min-width: 0; }
.machine.edite { border: 3px solid var(--accent); padding: 8px 10px; }
.machine h3 { font-size: var(--t-m); }
.blocs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bloc { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; align-items: center; border: 2px solid #3b6b35; border-radius: 8px 8px 8px 8px; background: #e7f2e4; padding: 6px 10px; font-variant-numeric: tabular-nums; position: relative; }
.bloc .instruction { font-weight: 700; }
.bloc.depart { background: #fff7e6; border-color: #9a5b0b; border-radius: 14px 14px 8px 8px; }
.bloc.depart-reutilise { border-style: dashed; }
.bloc.vide { background: transparent; border-style: dotted; color: var(--encre-2); }
.bloc.en-cours { outline: 3px solid var(--cible); outline-offset: 1px; }
.bloc .valeur { font-family: var(--f-mono); font-size: 0.85rem; overflow-wrap: anywhere; }
.resultat-machine, .expression-machine { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.expression-machine { font-weight: 500; color: var(--encre-2); }
.remonter-machine { display: grid; gap: 8px; }
.titre-remonter { margin: 0; font-weight: 600; }
.choix-remonter { display: flex; flex-wrap: wrap; gap: 6px; }
.bouton-choix { border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 999px; padding: 6px 14px; min-height: 34px; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.bouton-choix:hover { border-color: var(--accent); }
@media print {
  .machine { break-inside: avoid; }
  .choix-remonter { display: none !important; }
}
/* La balance : fléau qui penche (dessin et phrase), sachets marqués « x », billes ; étapes écrites */
.bloc-balance { min-width: 0; }
.dessin-balance { display: block; max-width: 100%; height: auto; }
.pied-balance { fill: #d6dbe3; stroke: var(--trait); stroke-width: 2; }
.socle-balance { stroke: var(--trait); stroke-width: 4; stroke-linecap: round; }
.fleau { stroke: var(--trait); stroke-width: 6; stroke-linecap: round; }
.pivot { fill: #ffffff; stroke: var(--trait); stroke-width: 3; }
.corde { stroke: var(--trait-doux); stroke-width: 1.5; }
.plateau-balance { fill: #c9a86a; stroke: #6b4a1f; stroke-width: 2; }
.sachet { fill: #f1e3c8; stroke: #6b4a1f; stroke-width: 1.6; stroke-linejoin: round; }
.texte-sachet { font-family: var(--f-texte); font-size: 16px; font-weight: 700; fill: #3b2a10; font-style: italic; }
.bille { fill: #1d4ed8; stroke: #ffffff; stroke-width: 1.2; }
.texte-plateau { font-family: var(--f-texte); font-size: 14px; font-weight: 700; fill: var(--encre); }
.texte-plateau.contenu { font-size: 13px; font-weight: 500; }
.texte-penche { font-family: var(--f-texte); font-size: 15px; font-weight: 700; fill: var(--faux-fonce); }
.avis-ecrit { margin: 0; padding: 8px 12px; border: 2px dashed var(--trait-doux); border-radius: 10px; background: #ffffff; font-size: var(--t-s); max-width: 75ch; }
.equation-balance { font-size: 1.45rem; font-weight: 600; }
.titre-etapes { margin: 0; font-size: var(--t-s); font-weight: 600; }
.etapes-balance { margin: 0; padding-left: 1.4em; display: grid; gap: 3px; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.etapes-balance .eq { font-weight: 700; margin-right: 8px; }
.etapes-balance .geste { color: var(--encre-2); }
.etapes-balance li.penche .eq { color: var(--faux-fonce); font-style: italic; }
@media print {
  .bloc-balance { break-inside: avoid; }
}

/* =================================================================
   THÈME 3, SECONDE MOITIÉ : RECTANGLE DÉCOUPÉ, DEVINE MA FORMULE
   Morceaux : chacun écrit son aire ; morceau retiré : hachures ET bord en tirets ; carré retiré deux fois : hachures
   croisées ; boîte noire : texte « ? » ou formule ; essais : ✓ / ✗ écrits et bord en tirets. Jamais la couleur seule.
   ================================================================= */
.scene-rectangle, .scene-devine { gap: 12px; }
.scene-rectangle > *, .scene-devine > * { flex-shrink: 0; }
.rectangle-grande { overflow-wrap: anywhere; }
.bloc-rectangle { min-width: 0; overflow: hidden; }
.dessin-rectangle { display: block; max-width: 100%; height: auto; }
.morceau { stroke: var(--trait); stroke-width: 2; }
/* le motif des morceaux retirés est donné par l'attribut fill (le CSS l'emporterait sur l'attribut) */
.morceau.carre { fill: #dbe7fb; }
.morceau.rect { fill: #fdebd3; }
.morceau.retire { stroke: var(--faux-fonce); stroke-dasharray: 6 4; }
.morceau.deplace { stroke-width: 3; }
.texte-morceau { font-family: var(--f-texte); font-size: 14px; font-weight: 700; fill: var(--encre); paint-order: stroke; stroke: #ffffff; stroke-width: 4px; pointer-events: none; }
.texte-morceau.grand { font-weight: 600; }
.cote-trait { stroke: var(--trait-doux); stroke-width: 1.5; fill: none; }
.texte-cote { font-family: var(--f-texte); font-size: 14px; font-weight: 600; fill: var(--encre); }
.legende-rectangle { margin: 0; font-size: var(--t-xs); color: var(--encre-2); overflow-wrap: anywhere; max-width: 75ch; }
.cadre-impossible { fill: #ffffff; stroke: var(--trait-doux); stroke-width: 2; stroke-dasharray: 7 5; }
.texte-impossible { font-family: var(--f-texte); font-size: 16px; font-weight: 700; fill: var(--faux-fonce); }
.texte-impossible.petit { font-size: 13px; font-weight: 500; fill: var(--encre-2); }
.corps-devine { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 14px; align-items: start; }
.bloc-boite { min-width: 0; }
.dessin-boite { display: block; max-width: 100%; height: auto; }
.boite-noire { fill: #1f2937; stroke: #111827; stroke-width: 2; }
.boite-noire.ouverte { fill: #ffffff; stroke: var(--trait); stroke-dasharray: 6 4; }
.texte-boite { font-family: var(--f-texte); font-size: 30px; font-weight: 700; fill: #ffffff; }
.texte-boite.formule { font-size: 16px; fill: var(--encre); }
.texte-boite.petit { font-size: 12px; font-weight: 500; fill: #e5e7eb; }
.boite-noire.ouverte ~ .texte-boite.petit { fill: var(--encre-2); }
.fleche-boite { stroke: var(--trait); stroke-width: 2.5; fill: none; }
.texte-entree, .texte-sortie { font-family: var(--f-texte); font-size: 15px; font-weight: 700; fill: var(--encre); }
.table-devine td:last-child { white-space: nowrap; }
@media (max-width: 760px) {
  .corps-devine { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .bloc-rectangle, .corps-devine { break-inside: avoid; }
}

/* =================================================================
   THÈME 4, PREMIÈRE MOITIÉ : LA RECETTE, TABLEAU ET GRAPHIQUE
   Cases vérifiées : ✓ ou ✗ écrits (et aria-invalid), jamais la couleur seule ; points du graphique : rond ET croix ;
   droite tracée depuis l'origine : tirets. Tableaux étroits : ils défilent dans leur bloc, jamais la page.
   ================================================================= */
.scene-recette, .scene-tableau { gap: 12px; }
.scene-recette > *, .scene-tableau > * { flex-shrink: 0; }
.dessin-assiettes { display: block; width: min(100%, 416px); height: auto; }
.assiette { fill: #ffffff; stroke: var(--trait-doux); stroke-width: 2; }
.assiette-creux { fill: none; stroke: #9ca3af; stroke-width: 1.2; }
.bloc-recette, .bloc-table-tg { min-width: 0; max-width: 100%; overflow-x: auto; }
.table-recette { border-collapse: collapse; font-size: var(--t-s); font-variant-numeric: tabular-nums; background: #ffffff; }
.table-recette caption { text-align: left; font-weight: 600; padding: 0 0 4px; }
.table-recette th, .table-recette td { border: 1px solid var(--ligne); padding: 4px 8px; text-align: left; vertical-align: middle; }
.table-recette thead th { font-size: var(--t-xs); color: var(--encre-2); font-weight: 600; }
.table-recette tbody th { font-weight: 600; }
.table-recette td.q-tri { text-align: center; }
.case-tri { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; cursor: pointer; }
.case-tri input { width: 24px; height: 24px; margin: 0; }
.saisie-recette { font-family: var(--f-mono); border: 1px solid var(--trait-doux); border-radius: 8px; padding: 4px 6px; min-height: 32px; background: var(--surface); color: var(--encre); width: 6.5em; max-width: 100%; }
.saisie-recette[aria-invalid="true"] { border: 2px dashed var(--faux-fonce); }
.marque-case { display: inline-block; min-width: 1.3em; margin-left: 4px; font-weight: 700; }
.marque-case[data-etat="juste"] { color: var(--bon-fonce); }
.marque-case[data-etat="faux"] { color: var(--faux-fonce); }
.questions-recette, .questions-5e { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.questions-recette .champ-nombre span { font-size: var(--t-s); color: var(--encre); }
.questions-recette .saisie-recette { width: 7em; }
.questions-5e .champ-nombre:last-child .saisie-recette { width: 10em; }
.actions-recette, .decisions-tg, .formule-tg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.actions-recette button, .formule-tg button, .decisions-tg button {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 999px;
  padding: 6px 13px; font-size: var(--t-s); line-height: 1.2; min-height: 34px; text-align: left;
}
.actions-recette button:hover, .formule-tg button:hover, .decisions-tg button:hover { border-color: var(--accent); }
.actions-recette button.principal { background: var(--principal); border-color: var(--principal); color: #ffffff; font-weight: 700; }
.actions-recette button.principal:hover { background: var(--principal-fonce); border-color: var(--principal-fonce); }
.actions-recette button[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.decisions-tg .titre-remonter { width: 100%; }
.formule-tg .champ-nombre span { font-size: var(--t-s); color: var(--encre); font-family: var(--f-mono); }
.formule-tg .saisie-recette { width: 10em; }
.corps-tableau { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 14px; align-items: start; }
.table-tg { width: 100%; }
.table-tg td { white-space: nowrap; }
.table-tg .saisie-recette { width: 5em; }
.valeur-donnee { font-weight: 700; }
.bloc-graphe { min-width: 0; background: #ffffff; border: 1px solid var(--ligne); border-radius: 12px; padding: 6px; }
.dessin-graphe { display: block; width: 100%; height: auto; max-height: 56vh; }
.grille-graphe { stroke: #e5e7eb; stroke-width: 1; fill: none; }
.axe-graphe { stroke: var(--trait); stroke-width: 2; fill: none; }
.texte-axe { font-family: var(--f-texte); font-size: 13px; fill: var(--encre); font-variant-numeric: tabular-nums; }
.titre-axe { font-family: var(--f-texte); font-size: 13px; font-weight: 700; fill: var(--encre); }
.point-graphe { fill: var(--marque); stroke: #ffffff; stroke-width: 2; }
.croix-graphe { stroke: #ffffff; stroke-width: 1.6; }
.droite-origine { stroke: var(--cible); stroke-width: 2; stroke-dasharray: 7 5; }
@media (max-width: 760px) {
  .corps-tableau { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  /* téléphone : le tableau de la recette tient dans la largeur (cases plus étroites, en-têtes qui passent à la ligne) */
  .table-recette { font-size: var(--t-xs); }
  .table-recette th, .table-recette td { padding: 3px 4px; }
  .table-recette .saisie-recette { width: 4.4em; padding: 4px 4px; }
  .table-recette .marque-case { min-width: 0.9em; margin-left: 2px; }
}
@media print {
  .bloc-recette, .corps-tableau { break-inside: avoid; }
  .actions-recette, .decisions-tg button, .formule-tg button { display: none !important; }
}
/* =================================================================
   THÈME 4, SECONDE MOITIÉ : LES SOLDES, LA COURSE DE DEUX VOITURES
   Réduction hachurée (jamais la couleur seule) ; prix inconnu : pas de barre. Voitures : A à l'avant arrondi, trait plein
   et rond ; B à l'avant pointu, tirets et carré ; lettres écrites. Le graphique se trace à la demande (aucune boucle au repos).
   ================================================================= */
.scene-soldes, .scene-course { gap: 12px; }
.scene-soldes > *, .scene-course > * { flex-shrink: 0; }
.bloc-soldes, .bloc-piste { min-width: 0; background: #ffffff; border: 1px solid var(--ligne); border-radius: 12px; padding: 6px 8px; }
.dessin-soldes, .dessin-piste { display: block; width: 100%; height: auto; max-width: 640px; }
.texte-barre, .texte-reduction, .texte-piste, .nom-voie { font-family: var(--f-texte); font-size: 15px; fill: var(--encre); font-variant-numeric: tabular-nums; }
.texte-reduction { fill: #7c3a06; font-weight: 600; }
.nom-voie { font-weight: 700; }
.barre-prix { fill: #dbe5fb; stroke: var(--trait); stroke-width: 1.5; }
.barre-reduction { stroke: #7c3a06; stroke-width: 1.5; }
.repere-depart { stroke: #7c3a06; stroke-width: 2; stroke-dasharray: 6 4; }
.questions-soldes .champ-nombre, .questions-course .champ-nombre { flex-wrap: wrap; }
.questions-soldes .saisie-recette, .questions-course .saisie-recette { width: 7.5em; }
.voie { stroke: #9ca3af; stroke-width: 1.5; stroke-dasharray: 10 8; }
.ligne-depart, .ligne-arrivee { stroke: var(--trait); stroke-width: 3; }
.ligne-arrivee { stroke-dasharray: 6 6; }
.voiture-a .carrosserie { fill: #1d4ed8; stroke: #1e3a8a; stroke-width: 1.5; }
.voiture-b .carrosserie { fill: #9a4508; stroke: #6b3005; stroke-width: 1.5; }
.roue { fill: #1f2937; stroke: #ffffff; stroke-width: 1.5; }
.lettre-voiture { font-family: var(--f-texte); font-size: 12px; font-weight: 700; fill: #ffffff; }
.ligne-a { stroke: #1d4ed8; stroke-width: 3; fill: none; }
.ligne-b { stroke: #9a4508; stroke-width: 3; stroke-dasharray: 9 6; fill: none; }
.marque-a { fill: #1d4ed8; stroke: #ffffff; stroke-width: 2; }
.marque-b { fill: #9a4508; stroke: #ffffff; stroke-width: 2; }
.texte-voiture-a, .texte-voiture-b { font-family: var(--f-texte); font-size: 14px; font-weight: 700; paint-order: stroke; stroke: #ffffff; stroke-width: 4px; stroke-linejoin: round; }
.texte-voiture-a { fill: #1d4ed8; }
.texte-voiture-b { fill: #9a4508; }
.repere-croisement { stroke: var(--encre-2); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.point-croisement { fill: none; stroke: var(--trait); stroke-width: 2.5; }
.fleche-trajet { stroke: var(--trait); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bloc-course .dessin-graphe { max-height: 46vh; max-width: 720px; }
.decisions-tg .bouton-choix[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); font-weight: 700; }
.decisions-tg .bouton-choix[aria-pressed="true"]::before { content: "✓ "; }
@media print {
  .bloc-soldes, .bloc-piste, .bloc-course { break-inside: avoid; }
}