/* À LA DÉCOUVERTE DES FIGURES ET DES SOLIDES — feuille de style
   Même famille que « À la découverte du hasard » : 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 : les trois angles d'un triangle (orange, bleu, vert), toujours accompagnés de leur nom et d'un
   codage (un, deux ou trois arcs) : jamais la couleur seule. Pas de thème sombre, comme le site.
   Fabriquée une première fois par ~/travail-applis/figures-solides-t1-construire-1/composer-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);

  /* figures : les trois angles (trait foncé, fond clair), les constructions (gris bleu), le point mobile */
  --ang-a: #c2410c; --ang-a-fond: #ffd9c2;
  --ang-b: #1d5fbf; --ang-b-fond: #cfe0fb;
  --ang-c: #23803a; --ang-c-fond: #cdeed5;
  --trait: #1f2937; --construction: #5b6b82; --quadrillage: #e3e9f1; --quadrillage-fort: #cdd7e4;
  --principal: #2f5fe0; --principal-fonce: #2148b8;
  --or-ligne: #e1ad21;

  /* fonds des scènes, un par thème */
  --scene-angles-1: #f7f9fc; --scene-angles-2: #e2e9f3;
  --scene-pythagore-1: #f8f6fc; --scene-pythagore-2: #e6def2;
  --scene-thales-1: #f5f9f4; --scene-thales-2: #dbe9d8;
  --scene-solides-1: #fcf8f1; --scene-solides-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-angles-1); --scene-2: var(--scene-angles-2); }
[data-fond="pythagore"] { --scene-1: var(--scene-pythagore-1); --scene-2: var(--scene-pythagore-2); }
[data-fond="thales"] { --scene-1: var(--scene-thales-1); --scene-2: var(--scene-thales-2); }
[data-fond="solides"] { --scene-1: var(--scene-solides-1); --scene-2: var(--scene-solides-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-angles-1), var(--scene-angles-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); }
.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: #8a94a6; }
.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; }
.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); }
.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: var(--ang-a); }

/* ---------- 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; }
}


/* =================================================================
   FIGURES (js/vue-geo.js) : dessin SVG, points déplaçables
   ================================================================= */
.scene-geo {
  position: absolute; inset: 0; padding: 10px var(--gouttiere) 12px; display: grid; gap: 8px;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
}
.scene-geo > .etapes { grid-row: 1; }
.scene-geo > .bloc-figure { grid-row: 2; }
.scene-geo > .lecture-geo, .scene-geo > .bilan-geo { grid-row: 3; }
.bloc-figure {
  position: relative; min-height: 0; min-width: 0; border-radius: 14px; overflow: hidden;
  background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(31, 41, 55, 0.12); box-shadow: var(--ombre);
}
.vue-geo { position: absolute; inset: 0; --k: 1; }
.vue-geo-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vue-geo-points { position: absolute; inset: 0; pointer-events: none; }
/* un point déplaçable : zone de 44 px (doigt), rond visible de 18 px ; seul lui bloque le défilement au doigt */
.point-geo {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; pointer-events: auto; touch-action: none; cursor: grab; display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.point-geo-rond {
  width: 18px; height: 18px; border-radius: 50%; background: #ffffff; border: 3px solid var(--trait);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85); transition: transform 0.12s;
}
.point-geo:hover .point-geo-rond, .point-geo.tire .point-geo-rond { transform: scale(1.2); }
.point-geo:focus { outline: none; }
.point-geo:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; border-radius: 50%; }
.point-geo:focus-visible .point-geo-rond { border-color: var(--accent); }
.point-geo.tire { cursor: grabbing; }
.point-geo.inactif { visibility: hidden; }
.point-geo.libre .point-geo-rond { border-style: dashed; }

/* textes du dessin : grandissent au vidéoprojecteur (--k, js/vue-geo.js) */
.etiq-geo, .etiq-nom, .etiq-mesure, .etiq-petite {
  font-family: var(--f-texte); fill: var(--encre); paint-order: stroke; stroke: rgba(255, 255, 255, 0.94);
  stroke-width: 4px; stroke-linejoin: round;
}
.etiq-geo { font-size: calc(14px * var(--k)); font-weight: 600; }
.etiq-nom { font-size: calc(17px * var(--k)); font-weight: 760; font-family: var(--f-titre); }
.etiq-mesure { font-size: calc(14px * var(--k)); font-weight: 700; font-family: var(--f-mono); }
.etiq-petite { font-size: calc(12.5px * var(--k)); font-weight: 500; }
.etiq-mesure.a, .etiq-nom.a { fill: var(--ang-a); }
.etiq-mesure.b, .etiq-nom.b { fill: var(--ang-b); }
.etiq-mesure.c, .etiq-nom.c { fill: var(--ang-c); }
.quadrillage { stroke: var(--quadrillage); stroke-width: 1; }
.quadrillage.fort { stroke: var(--quadrillage-fort); }
.trait-tri { fill: rgba(47, 95, 224, 0.06); stroke: var(--trait); stroke-width: 2.5; stroke-linejoin: round; }
.trait { stroke: var(--trait); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.trait-fin { stroke: var(--trait); stroke-width: 1.5; fill: none; }
.construction { stroke: var(--construction); stroke-width: 1.5; stroke-dasharray: 6 5; fill: none; }
.droite-d { stroke: #6d28d9; stroke-width: 2.5; fill: none; }
.secteur.a { fill: var(--ang-a-fond); stroke: var(--ang-a); }
.secteur.b { fill: var(--ang-b-fond); stroke: var(--ang-b); }
.secteur.c { fill: var(--ang-c-fond); stroke: var(--ang-c); }
.secteur { stroke-width: 2; fill-opacity: 0.9; }
.arc-code { fill: none; stroke-width: 2; }
.arc-code.a { stroke: var(--ang-a); } .arc-code.b { stroke: var(--ang-b); } .arc-code.c { stroke: var(--ang-c); }
.code-angle { fill: none; stroke: var(--trait); stroke-width: 1.8; }
.code-droit { fill: none; stroke: var(--trait); stroke-width: 2; }
.code-trait { stroke: #b42318; stroke-width: 2.5; stroke-linecap: round; }
.point-fixe { fill: var(--trait); }
.plat { stroke: var(--trait); stroke-width: 2.5; }
.surbrillance { stroke: #6d28d9; stroke-width: 4; fill: none; }

/* lecture des mesures sous la figure, étapes de la démonstration */
.lecture-geo { margin: 0; font-size: var(--t-s); color: var(--encre); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; min-height: 1.6em; }
.lecture-geo .m { font-family: var(--f-mono); font-weight: 600; white-space: nowrap; }
.lecture-geo .m.a { color: var(--ang-a); } .lecture-geo .m.b { color: var(--ang-b); } .lecture-geo .m.c { color: var(--ang-c); }
.lecture-geo .nature { color: var(--encre-2); }
.lecture-geo .nature strong { color: var(--encre); }
/* somme des mesures arrondies différente de 180° : soulignée en tirets et expliquée par une phrase (jamais la couleur seule) */
.lecture-geo .m.somme-ecart { text-decoration: underline dashed; text-underline-offset: 3px; }
/* la note est toujours là (une ligne, deux au plus sur téléphone) : la figure ne change pas de taille quand elle change */
.lecture-geo .note-arrondis { flex-basis: 100%; font-size: var(--t-xs); line-height: 1.4; min-height: calc(1.4em + 6px); color: var(--encre-2); border-left: 3px solid transparent; padding: 3px 8px; border-radius: 4px; }
.lecture-geo .note-arrondis.ecart { color: var(--encre); background: #fff3cd; border-left: 3px solid #b7791f; }
@media (max-width: 860px) { .lecture-geo .note-arrondis { min-height: calc(2.8em + 6px); } }
.etapes {
  border: 1px solid #c4b5fd; background: #f5f3ff; border-radius: 12px; padding: 8px 12px; display: grid; gap: 6px; font-size: var(--t-s);
}
.etapes h2 { font-size: var(--t-m); color: #5b21b6; }
.etapes p { margin: 0; }
.etapes .actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.etapes .actions button {
  border: 1px solid #c4b5fd; background: var(--surface); border-radius: 999px; padding: 4px 12px; min-height: 34px; font-size: var(--t-s);
}
.etapes .actions button:hover:not(:disabled) { border-color: #6d28d9; }
.etapes .actions button:disabled { opacity: 0.45; cursor: default; }
.etapes .compte { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
.bilan-geo { margin: 0; font-size: var(--t-s); padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--ligne); }
.bilan-geo[data-ton="bon"] { border-color: var(--bon); background: var(--bon-doux); }
.bilan-geo[data-ton="faux"] { border-color: var(--faux); background: var(--faux-doux); }
.bilan-geo[data-ton="plat"] { border-color: #b7791f; background: #fff3cd; }
.bilan-geo strong { font-weight: 700; }
.arc-compas { fill: none; stroke: var(--trait); stroke-width: 2.5; stroke-linecap: round; }
.cercle-lieu { fill: none; stroke: var(--construction); stroke-width: 1.2; stroke-dasharray: 2 5; }
.branche-compas { stroke: var(--construction); stroke-width: 2; stroke-dasharray: 4 4; }
.ecart { stroke: #b42318; stroke-width: 3; stroke-linecap: round; }
.ecart-texte { fill: #b42318; }
.cote-ok { fill: var(--bon-fonce); }
.encart .tableau td.a { color: var(--ang-a); } .encart .tableau td.b { color: var(--ang-b); } .encart .tableau td.c { color: var(--ang-c); }

/* rapporteur (js/act-rapporteur.js) : demi-disque translucide, double graduation (extérieure en bleu, intérieure en
   orange : elles se distinguent aussi par leur place, et le texte les nomme) */
.rapporteur-fond { fill: rgba(255, 250, 230, 0.78); stroke: #374151; stroke-width: 1.6; }
.rapporteur-trait { fill: none; stroke: #6b7280; stroke-width: 1; }
.rapporteur-base { stroke: #1f2937; stroke-width: 1.6; }
.cote-dessus { stroke: #111827; stroke-width: 1; }
.rapporteur-tige { stroke: #92400e; stroke-width: 2; stroke-dasharray: 3 4; }
.grad { stroke: #374151; stroke-width: 0.8; }
.grad.fort { stroke-width: 1.6; }
.grad-num {
  font-family: var(--f-mono); font-size: calc(10.5px * var(--k)); font-weight: 600; paint-order: stroke;
  stroke: rgba(255, 250, 230, 0.95); stroke-width: 3px; stroke-linejoin: round;
}
.grad-num.ext { fill: #1d4ed8; }
.grad-num.int { fill: #b23a0b; font-size: calc(9.5px * var(--k)); }
.point-geo.poignee .point-geo-rond { border-radius: 4px; border-color: #92400e; background: #fde68a; }
.point-geo.centre-rapporteur .point-geo-rond { width: 14px; height: 14px; background: rgba(255, 255, 255, 0.4); border-width: 2px; }
.lecture-geo .etat { color: var(--encre-2); }
.lecture-geo .etat strong { color: var(--encre); }
.lecture-geo .etat.bien { color: var(--bon-fonce); font-weight: 700; }
.libelle-reponse { font-family: var(--f-mono); font-weight: 700; }
.champ-mesure {
  width: 4.5em; font-family: var(--f-mono); font-size: var(--t-m); padding: 4px 8px; border: 1px solid var(--ligne);
  border-radius: 8px; min-height: 38px; background: #ffffff; color: var(--encre);
}
.commandes .unite { font-family: var(--f-mono); font-weight: 700; margin-left: -4px; }

/* deux droites et une sécante ; droites remarquables (js/act-paralleles-secante.js, js/act-droites-remarquables.js) */
.secante { stroke: #6d28d9; stroke-width: 2.5; fill: none; }
.droite-remarquable { stroke: #6d28d9; stroke-width: 2; fill: none; }
.droite-remarquable.fine { stroke-width: 1.2; stroke-dasharray: 8 5; }
.hauteur-demo { stroke: #b23a0b; stroke-width: 2.5; }
.cercle-remarquable { fill: none; stroke: #1d4ed8; stroke-width: 1.8; }
.droite-euler { stroke: #0f766e; stroke-width: 1.8; stroke-dasharray: 10 4 2 4; fill: none; }
.point-concours { fill: #6d28d9; stroke: #ffffff; stroke-width: 2; }
.etiq-nom.concours { fill: #5b21b6; }
.piece { stroke: var(--trait); stroke-width: 2; stroke-linejoin: round; fill-opacity: 0.9; }
.piece.a { fill: var(--ang-a-fond); } .piece.b { fill: var(--ang-b-fond); }
.axe { stroke: #1f2937; stroke-width: 1.4; }
.etiq-axe { font-family: var(--f-mono); font-size: calc(11px * var(--k)); fill: #374151; }
.lecture-geo .repere-ligne { font-family: var(--f-mono); font-size: var(--t-xs); flex-basis: 100%; }

/* carrés de Pythagore et puzzle de Perigal (js/act-carres-pythagore.js, js/act-puzzle-perigal.js) */
.scene-geo.avec-balance { grid-template-rows: minmax(0, 1fr) auto auto; }
.scene-geo.avec-balance > .bloc-figure { grid-row: 1; }
.scene-geo.avec-balance > .balance-geo { grid-row: 2; }
.scene-geo.avec-balance > .lecture-geo { grid-row: 3; }
.carre { stroke-width: 2; stroke-linejoin: round; fill-opacity: 0.55; }
.carre.a { fill: var(--ang-a-fond); stroke: var(--ang-a); }
.carre.b { fill: var(--ang-b-fond); stroke: var(--ang-b); }
.carre.c { fill: var(--ang-c-fond); stroke: var(--ang-c); }
.carre.grand { stroke-width: 3; }
.carreau { stroke: rgba(31, 41, 55, 0.35); stroke-width: 1; }
.corde { stroke: #92400e; stroke-width: 3.5; stroke-linecap: round; }
.noeud { fill: #92400e; stroke: #ffffff; stroke-width: 1.5; }
.piquet { fill: #1f2937; }
.balance-geo { height: 96px; min-width: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(31, 41, 55, 0.12); }
.balance-geo svg { display: block; width: 100%; height: 100%; }
.balance-pied { fill: #5b6b82; }
.balance-fleau { stroke: #1f2937; stroke-width: 5; stroke-linecap: round; }
.balance-fil { stroke: #5b6b82; stroke-width: 1.5; }
.balance-plateau { stroke: #1f2937; stroke-width: 4; stroke-linecap: round; }
.balance-axe { fill: #ffffff; stroke: #1f2937; stroke-width: 2; }
.balance-texte { font-family: var(--f-mono); font-size: 15px; font-weight: 700; fill: var(--encre); }
.balance-texte.a { fill: var(--ang-a); } .balance-texte.b { fill: var(--ang-b); } .balance-texte.c { fill: var(--ang-c); }
.balance-valeur { font-family: var(--f-mono); font-size: 14px; font-weight: 600; fill: var(--encre); }
.balance-signe { font-family: var(--f-mono); font-size: 30px; font-weight: 700; fill: var(--encre); }
/* la conclusion sous la figure : toujours là, de hauteur fixe (la figure ne change pas de taille quand elle change) */
.lecture-geo .note-fixe { flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; font-size: var(--t-xs); line-height: 1.4; min-height: calc(2.8em + 6px); color: var(--encre); border-left: 3px solid #5b6b82; padding: 3px 8px; border-radius: 4px; background: #f3f5f9; }
.lecture-geo .note-fixe.ecart { background: #fff3cd; border-left-color: #b7791f; }
.lecture-geo .note-fixe.egal { background: var(--bon-doux); border-left-color: var(--bon-fonce); }
@media (max-width: 860px) { .lecture-geo .note-fixe { min-height: calc(4.2em + 6px); } }
.carre-vide { fill: #ffffff; fill-opacity: 0.6; stroke: var(--trait); stroke-width: 1.6; stroke-dasharray: 7 4; }
.surbrillance-carre { stroke: #6d28d9; stroke-width: 3; }
.piece-puzzle { stroke: var(--trait); stroke-width: 1.8; stroke-linejoin: round; fill-opacity: 0.92; }
.piece-puzzle.pm { fill: var(--ang-b-fond); }
.piece-puzzle.pp { fill: var(--ang-c-fond); }
.piece-puzzle.placee { stroke-width: 2.6; }
/* une pièce du puzzle se prend à pleine main : seule la pièce bloque le défilement au doigt, pas le reste de la figure */
.piece-puzzle.mobile { cursor: grab; touch-action: none; }
/* thème 2, seconde moitié : l'échelle, le demi-cercle, la droite des milieux */
.sol { fill: #e7dccb; }
.sol-ligne { stroke: #6b5a43; stroke-width: 2.5; }
.hachure { stroke: #8a7558; stroke-width: 1.2; }
.mur { fill: #d9dee6; stroke: #5b6b82; stroke-width: 1.5; }
.echelle-montant { stroke: #8a4b0f; stroke-width: 3.5; stroke-linecap: round; }
.echelle-barreau { stroke: #8a4b0f; stroke-width: 2.5; stroke-linecap: round; }
.trace-milieu { stroke: #6d28d9; stroke-width: 3; stroke-linecap: round; }
.diametre { stroke: var(--trait); stroke-width: 1.6; stroke-dasharray: 3 3; }
.cercle-circonscrit { fill: none; stroke: #6d28d9; stroke-width: 1.8; stroke-dasharray: 8 5; }
.parallelogramme-demo { fill: rgba(194, 65, 12, 0.06); stroke: #b23a0b; stroke-width: 1.6; stroke-dasharray: 6 4; }
.parallelogramme-demo.fort { fill: rgba(109, 40, 217, 0.08); stroke: #6d28d9; }
.parallelogramme-varignon { fill: rgba(109, 40, 217, 0.12); stroke: #6d28d9; stroke-width: 2.5; stroke-linejoin: round; }
.fleche-translation { stroke: #6d28d9; stroke-width: 2; stroke-dasharray: 5 4; }
.pointe-fleche { fill: #6d28d9; }
.point-geo.poignee-piece .point-geo-rond {
  width: 26px; height: 26px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.9);
  font-family: var(--f-titre); font-weight: 760; font-size: 15px; line-height: 1; color: var(--encre);
}

/* dessin de l'accueil */
.dessin-accueil { position: absolute; inset: 0; width: 100%; height: 100%; }
.acc-tri { fill: rgba(47, 95, 224, 0.06); stroke: #1f2937; stroke-width: 3; stroke-linejoin: round; }
.acc-a1 { fill: #ffd9c2; stroke: #c2410c; stroke-width: 2; }
.acc-a2 { fill: #cfe0fb; stroke: #1d5fbf; stroke-width: 2; }
.acc-a3 { fill: #cdeed5; stroke: #23803a; stroke-width: 2; }
.acc-nom { font-family: var(--f-titre); font-weight: 760; font-size: 18px; fill: #1f2937; }
.acc-lettre { font-family: var(--f-titre); font-weight: 700; font-size: 15px; fill: #1f2937; text-anchor: middle; dominant-baseline: central; }
.acc-droite { stroke: #1f2937; stroke-width: 3; }
.acc-somme { font-family: var(--f-mono); font-size: 16px; font-weight: 600; fill: #1f2937; text-anchor: middle; }
.acc-fleche { fill: none; stroke: #5b6b82; stroke-width: 2; stroke-dasharray: 5 5; }
.accueil-dessin .legende-dessin { top: auto; bottom: 10px; max-width: 60%; }

/* =================================================================
   EXERCICES AU FORMAT DU BREVET (js/defis.js)
   ================================================================= */
.section-brevet { display: grid; gap: 10px; margin-top: 8px; }
.section-brevet h2 { font-size: var(--t-xl); }
.section-brevet > p { margin: 0; color: var(--encre-2); max-width: 70ch; }
.brevet-tete { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 16px; align-items: center; }
.figure-brevet { max-width: 100%; height: auto; background: #ffffff; border: 1px solid var(--ligne); border-radius: 10px; }
.fig-trait { fill: none; stroke: var(--trait); stroke-width: 2; stroke-linejoin: round; }
.fig-trait.fig-cache { stroke-width: 1.6; stroke-dasharray: 6 5; }
.fig-code { stroke: #b42318; stroke-width: 2.2; stroke-linecap: round; }
.fig-angle { fill: none; stroke: var(--trait); stroke-width: 1.6; }
.fig-texte { font-family: var(--f-mono); font-size: 14px; fill: var(--encre); }
.fig-nom { font-family: var(--f-titre); font-weight: 760; font-size: 17px; fill: var(--encre); }
.fig-point { fill: var(--trait); }
.enonce-brevet { margin: 0; font-size: var(--t-m); }
.questions-brevet { margin: 0; padding-left: 0; list-style: none; counter-reset: qb; display: grid; gap: 14px; }
.question-brevet { display: grid; gap: 8px; }
.question-brevet .q-brevet { margin: 0; font-weight: 700; }
/* numéros des questions (un titre de partie peut précéder la question dans le même élément de liste) */
.question-brevet .q-brevet::before { counter-increment: qb; content: counter(qb) ". "; }
.partie-brevet { margin: 6px 0 0; font-family: var(--f-texte); letter-spacing: 0; line-height: 1.4; font-size: var(--t-s); font-weight: 600; color: var(--accent-fonce); border-top: 1px solid var(--ligne); padding-top: 10px; }
.saisie-brevet { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.saisie-brevet input {
  width: 7em; font-family: var(--f-mono); font-size: var(--t-m); padding: 6px 10px; border: 1px solid var(--ligne); border-radius: 8px; min-height: 38px;
}
.saisie-brevet input:disabled { background: var(--surface-2); color: var(--encre); }
.question-brevet[data-ton="bon"] .saisie-brevet input { border-color: var(--bon); background: var(--bon-doux); }
.fin-brevet:empty { display: none; }
.corrige-brevet { border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 12px; background: var(--surface); display: grid; gap: 6px; }
.corrige-brevet summary { font-weight: 700; cursor: pointer; }
.corrige-brevet p { margin: 0; }
.fin-brevet p { margin: 0; }
@media (max-width: 640px) {
  .brevet-tete { grid-template-columns: minmax(0, 1fr); }
}

/* thème 3 : la configuration de Thalès (js/act-configuration-thales.js) */
.tri-thales { fill: rgba(109, 40, 217, 0.08); stroke: none; }
.droite-d.non-parallele { stroke-dasharray: 9 6; }
.vecteur { stroke: #6d28d9; stroke-width: 3; stroke-linecap: round; }
.lecture-geo .longueurs { display: flex; flex-wrap: wrap; gap: 2px 12px; flex-basis: 100%; }
/* les rapports côte à côte quand la place le permet (la figure garde sa hauteur), les uns sous les autres sur téléphone */
.lecture-geo .barres-rapports { display: grid; gap: 4px 18px; flex-basis: 100%; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.barre-rapport { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 4.6em; gap: 10px; align-items: center; }
.frac { display: inline-flex; flex-direction: column; align-items: center; font-family: var(--f-mono); font-weight: 700; line-height: 1.15; vertical-align: middle; }
.frac > span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 3px; }
.jauge { height: 12px; border-radius: 6px; background: #eef1f6; border: 1px solid #5b6b82; overflow: hidden; }
.jauge > span { display: block; height: 100%; background: #6d28d9; }
.barre-valeur { font-family: var(--f-mono); font-weight: 700; white-space: nowrap; }
/* un vecteur : la flèche au-dessus des deux lettres (le lecteur d'écran lit « vecteur ») */
.vec { position: relative; display: inline-block; font-family: var(--f-mono); font-weight: 700; padding-top: 0.45em; line-height: 1; }
.vec::before { content: ""; position: absolute; left: 1px; right: 4px; top: 0.18em; border-top: 1.5px solid currentColor; }
.vec::after { content: ""; position: absolute; right: 1px; top: calc(0.18em - 3px); border: 3.5px solid transparent; border-left: 5px solid currentColor; border-right: 0; }
/* thème 3 : plan et échelle (js/act-plan-echelle.js) ; la salle est inventée pour l'appli */
.feuille { fill: #ffffff; stroke: #c4ccd8; stroke-width: 1; }
.plan-sol { fill: #f7f3ea; stroke: none; }
.plan-mur { fill: #4b5563; }
.plan-fenetre { fill: #cfe3f7; stroke: #1d4ed8; stroke-width: 1.2; }
.plan-ouverture { fill: #f7f3ea; }
.plan-porte { stroke: #1f2937; stroke-width: 2; }
.plan-porte-arc { fill: none; stroke: #5b6b82; stroke-width: 1.2; stroke-dasharray: 4 3; }
.plan-tableau { fill: #1f5135; }
.plan-bureau { fill: #e2c28f; stroke: #7c5a2c; stroke-width: 1.2; }
.plan-table { fill: #ead7b5; stroke: #7c5a2c; stroke-width: 1.2; }
.plan-chaise { fill: #d5dbe5; stroke: #5b6b82; stroke-width: 1; }
.plan-armoire { fill: #cdb59a; stroke: #6b4f2c; stroke-width: 1.2; }
.plan-etiq { font-family: var(--f-texte); font-size: calc(12px * var(--k)); font-weight: 600; fill: #1f2937; paint-order: stroke; stroke: rgba(255, 255, 255, 0.9); stroke-width: 3px; stroke-linejoin: round; }
.regle-corps { fill: rgba(253, 230, 138, 0.82); stroke: #92400e; stroke-width: 1.2; }
.regle-bord { stroke: #92400e; stroke-width: 2; }
.regle-trait { stroke: #3f2a0c; stroke-width: 1; }
.regle-chiffre { font-family: var(--f-mono); font-size: calc(10px * var(--k)); font-weight: 600; fill: #3f2a0c; }
.point-geo.bout-regle .point-geo-rond { border-color: #92400e; }
.lecture-geo .tableau-prop-boite { flex-basis: 100%; display: grid; gap: 4px; }
.tableau-prop { border-collapse: collapse; font-family: var(--f-mono); font-size: var(--t-s); width: auto; max-width: 100%; }
.tableau-prop caption { text-align: left; font-family: var(--f-texte); font-weight: 600; padding-bottom: 2px; }
.tableau-prop th, .tableau-prop td { border: 1px solid #9aa6b8; padding: 3px 8px; text-align: center; }
.tableau-prop th { font-family: var(--f-texte); font-weight: 600; text-align: left; background: #f3f5f9; white-space: nowrap; }
.tableau-prop-boite .coef { font-size: var(--t-xs); color: var(--encre); }

/* thème 3 : mesurer une hauteur inaccessible (js/act-hauteur-inaccessible.js) ; pyramide (modèle) et arbre (inventé) */
.pyramide { fill: #ead9b0; stroke: #8a6d2f; stroke-width: 1.5; }
.tronc { stroke: #6b4423; stroke-width: 5; stroke-linecap: round; }
.houppier { fill: #b9d8a6; stroke: #3f6b2a; stroke-width: 1.5; }
.ombre { fill: #4b5563; }
.rayon-soleil { stroke: #b45309; stroke-width: 2; stroke-dasharray: 8 5; fill: none; }
.soleil { fill: #fcd34d; stroke: #b45309; stroke-width: 1.5; }
.baton { stroke: #1f2937; stroke-width: 3; stroke-linecap: round; }
.cote { stroke: #5b6b82; stroke-width: 1.2; }
.observateur { stroke: #1d4ed8; stroke-width: 3; stroke-linecap: round; }
.visee { stroke: #b45309; stroke-width: 2; stroke-dasharray: 8 5; fill: none; }
.lecture-geo .loupe-boite { display: grid; gap: 2px; flex-basis: 100%; }
.loupe-titre { font-size: var(--t-xs); font-weight: 600; color: var(--encre); }
.loupe { width: 100%; max-width: 270px; height: auto; max-height: 120px; border: 1px solid #c4ccd8; border-radius: 8px; background: #ffffff; }
.loupe .ombre-trait { stroke: #4b5563; stroke-width: 5; }
.loupe-nom { font-family: var(--f-titre); font-size: 15px; font-weight: 760; fill: #1f2937; }
.loupe-mesure { font-family: var(--f-mono); font-size: 13px; font-weight: 700; fill: #1f2937; }
/* thème 3 : cosinus, sinus, tangente (js/act-rapports-trigo.js) */
.cote-trigo { stroke-width: 3.5; stroke-linecap: round; fill: none; }
.cote-trigo.a { stroke: var(--ang-a); } .cote-trigo.b { stroke: var(--ang-b); } .cote-trigo.c { stroke: var(--ang-c); }
.etiq-petite.a { fill: var(--ang-a); } .etiq-petite.b { fill: var(--ang-b); } .etiq-petite.c { fill: var(--ang-c); }
.barre-rapport.trigo { grid-template-columns: 3.4em 3.2em minmax(0, 1fr) 5.2em; }
.nom-trigo { font-family: var(--f-mono); font-weight: 700; white-space: nowrap; }
/* thème 3 : rampe et pente (js/act-rampe-pente.js) */
.rampe { fill: #d9dee6; stroke: none; }
.rampe-dessus { stroke: #1f2937; stroke-width: 3.5; stroke-linecap: round; }
.palier { fill: #c9d1dc; stroke: #5b6b82; stroke-width: 1.2; }
.repere-pente { stroke: #6d28d9; stroke-width: 1.8; stroke-dasharray: 9 6; fill: none; }

/* =================================================================
   THÈME 4 : SOLIDES EN 3D (js/vue-3d.js) ET QUADRILLAGES
   (js/act-cubes-volumes.js, js/act-patrons-cube.js)
   ================================================================= */
.vue-3d { position: absolute; inset: 0; }
/* la scène 3D se tourne au doigt : elle seule (avec les points) bloque le défilement de la page */
.vue-3d-zone { position: absolute; inset: 0; cursor: grab; touch-action: none; border-radius: 14px; }
.vue-3d-zone.tire { cursor: grabbing; }
.vue-3d-zone:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.vue-3d-toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-solides { grid-template-columns: minmax(0, 1fr) auto; }
.scene-solides > .bloc-figure { grid-column: 1; grid-row: 2; }
.scene-solides > .panneau-cases { grid-column: 2; grid-row: 2; }
.scene-solides > .lecture-geo { grid-column: 1 / -1; grid-row: 3; }
.scene-patrons { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; }
.scene-patrons > .panneau-cases { grid-column: 1; grid-row: 1; }
.scene-patrons > .bloc-figure { grid-column: 2; grid-row: 1; }
.scene-patrons > .galerie-patrons { grid-column: 1 / -1; grid-row: 2; }
.scene-patrons > .lecture-geo { grid-column: 1 / -1; grid-row: 3; }
.panneau-cases {
  --case: 36px; align-self: start; max-height: 100%; overflow: auto; display: grid; gap: 6px; justify-items: center;
  background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(31, 41, 55, 0.12); border-radius: 14px; padding: 10px 12px;
}
.panneau-cases[hidden] { display: none; }
.titre-cases { margin: 0; font-weight: 700; font-size: var(--t-s); color: var(--encre); }
.repere-cases { margin: 0; font-size: var(--t-xs); color: var(--encre-2); font-family: var(--f-mono); }
.repere-cases.cote-g { writing-mode: vertical-rl; transform: rotate(180deg); }
.repere-cases.cote-d { writing-mode: vertical-rl; }
.cases-ligne { display: flex; align-items: center; gap: 6px; }
.grille-cases { display: grid; gap: 3px; }
.case-vue {
  width: var(--case); height: var(--case); padding: 0; border: 1.5px solid #5b6b82; border-radius: 4px; background: #ffffff;
  color: var(--encre); font: 700 0.74rem/1 var(--f-mono); display: grid; place-items: center; cursor: pointer;
}
.case-vue:hover { border-color: var(--accent); }
.case-vue:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
/* case grisée d'une vue : fond foncé ET hachures (pas la couleur seule) */
.editeur-vue .case-vue[aria-pressed="true"] { background: repeating-linear-gradient(135deg, #4b5563 0 5px, #6b7280 5px 9px); border-color: #1f2937; }
.case-patron[aria-pressed="true"] { background: #fde68a; border-color: #92400e; }
.case-patron.base { background: #bfdbfe; border-color: #1d4ed8; }
.num-case { pointer-events: none; font-size: 0.72rem; text-align: center; line-height: 1.1; }
.actions-cases { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.commandes .sous-groupe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.galerie-patrons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.liste-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.liste-mini li { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 58px; min-height: 58px; padding: 4px; border: 1px solid #c4ccd8; border-radius: 8px; background: #ffffff; }
.liste-mini li.a-trouver { border-style: dashed; background: transparent; }
.mini-case { fill: #fde68a; stroke: #1f2937; stroke-width: 1; }
.mini-vide { font: 700 1.1rem/1 var(--f-mono); color: #4b5563; }
.mini-nom { font-family: var(--f-mono); font-size: 0.68rem; color: var(--encre); white-space: nowrap; }
@media (max-width: 860px) {
  .scene-solides { display: flex; flex-direction: column; }
  .scene-solides .bloc-figure { height: min(52vh, 380px); min-height: 260px; }
  .panneau-cases { --case: 42px; justify-self: center; align-self: center; }
}
@media (pointer: coarse) { .panneau-cases { --case: 42px; } }
/* « Couper un solide » : le solide coupé et la section à plat, côte à côte (l'un sous l'autre sur téléphone) */
.scene-sections { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.scene-sections > .bloc-figure { grid-row: 2; }
.scene-sections > .bloc-plat { grid-column: 2; }
.scene-sections > .lecture-geo { grid-column: 1 / -1; grid-row: 3; }
.section-plate { fill: #fcd9c6; stroke: #9a3412; stroke-width: 2.5; }
@media (max-width: 860px) {
  .scene-sections { display: flex; flex-direction: column; }
  .scene-sections .bloc-figure { height: min(48vh, 340px); min-height: 250px; }
  .scene-sections .bloc-plat { height: min(70vh, 520px); min-height: 380px; }
}

/* =================================================================
   PETITS ÉCRANS, MOUVEMENT RÉDUIT, IMPRESSION
   ================================================================= */
@media (max-width: 860px) {
  .scene-geo { position: relative; inset: auto; }
  .scene-geo .bloc-figure { height: min(62vh, 440px); min-height: 300px; }
}
@media (max-width: 520px) {
  .scene-geo { padding: 10px 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .point-geo-rond { transition: none; }
}
@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,
  .point-geo, .quiz-actions:not(.fin-brevet), .fin-brevet button, .etapes .actions { display: none !important; }
  .corrige-brevet { break-inside: avoid; }
  main, .ecran { position: static; overflow: visible; }
  .ecran[hidden] { display: none !important; }
  .activite { display: block; }
  .colonne-scene { background: none; }
  .scene, .scene-geo { position: relative; overflow: visible; }
  .scene-geo .bloc-figure { height: 12cm; box-shadow: none; break-inside: avoid; }
  .actions-cases, .galerie-patrons .petit-bouton { display: none !important; }
  .scene-solides, .scene-sections { display: block; }
  .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, donc plus étroite (commun/scolatools.css) ; la légende passe sous
   le dessin au lieu de le recouvrir */
.accueil-dessin { aspect-ratio: auto; display: grid; gap: 2px; padding-bottom: 12px; }
.dessin-accueil { position: static; display: block; height: auto; }
.accueil-dessin .legende-dessin { position: static; max-width: none; padding: 0 14px; }