/* À LA DÉCOUVERTE DU HASARD — feuille de style
   Même famille que « À la découverte du sol et des séismes » : une barre en haut, puis un écran plein cadre.
   Écran d'activité : la scène à 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 : le rouge des dés, l'or des pièces, le vert du tapis de jeu, six couleurs pour les secteurs
   et les boules (toujours accompagnées d'un nom ou d'une lettre). Pas de thème sombre, comme le site. */
: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);

  /* objets du hasard */
  --de: #c8372d; --de-fonce: #8f231b; --de-clair: #e8675b;
  --mystere: #4b3c93; --mystere-fonce: #2f2563; --mystere-clair: #7a69c9;
  --piece: #e1ad21; --piece-fonce: #9a6f0a; --piece-clair: #f7d978;
  --c-rouge: #d64541; --c-bleu: #2f6fd6; --c-jaune: #f2b318; --c-vert: #2e9b57; --c-violet: #8b54c9; --c-orange: #e8772e;
  --pari: #7c3aed; --pari-doux: #f1eafe;

  /* fonds des scènes, un par thème */
  --scene-decrire-1: #eef3fb; --scene-decrire-2: #cfdcf0;
  --scene-lancer-1: #eef6ef; --scene-lancer-2: #c9decd;
  --scene-conditions-1: #f3effa; --scene-conditions-2: #dcd1ee;
  --scene-binomiale-1: #ecf6f6; --scene-binomiale-2: #c3dfdf;

  /* niveaux */
  --niv-2de: #0f766e; --niv-1re: #1d4ed8; --niv-tle: #7c2d92; --niv-mc: #9a4508;

  --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-lancer-1); --scene-2: var(--scene-lancer-2); }
[data-fond="decrire"] { --scene-1: var(--scene-decrire-1); --scene-2: var(--scene-decrire-2); }
[data-fond="conditions"] { --scene-1: var(--scene-conditions-1); --scene-2: var(--scene-conditions-2); }
[data-fond="binomiale"] { --scene-1: var(--scene-binomiale-1); --scene-2: var(--scene-binomiale-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; }
.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(--de); border-color: var(--de); color: #ffffff; font-weight: 700; }
.commandes button.principal:hover { background: var(--de-fonce); border-color: var(--de-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); }
/* ../commun/scolatools.css (chargé après) peint les boutons pleins en #398cef : 3,4:1 seulement avec le texte blanc ;
   l'accent de l'appli (#2f5fe0) donne 5,5:1 */
.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="2de"] { background: #ddf3f0; color: var(--niv-2de); }
.niv[data-n="1re"] { background: #e3ebfd; color: var(--niv-1re); }
.niv[data-n="tle"] { background: #f3e5f7; color: var(--niv-tle); }
.niv[data-n="mc"] { background: #fdf0dc; color: var(--niv-mc); }

/* ---------- 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(--de); 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-lancer-1), var(--scene-lancer-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(--piece); 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); }
.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="1re"] { border-color: var(--niv-1re); }
.texte p.niveau[data-n="tle"] { border-color: var(--niv-tle); }
.texte p.niveau[data-n="mc"] { border-color: var(--niv-mc); }
.texte p.niveau .niv { margin-right: 6px; vertical-align: 1px; }
.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(--piece); 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); }

/* programme Python (panneau) */
.programme-python { border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface); }
.programme-python > summary { list-style: none; cursor: pointer; padding: 10px 14px; font-weight: 700; font-size: var(--t-s); display: flex; gap: 8px; align-items: center; }
.programme-python > summary::-webkit-details-marker { display: none; }
.programme-python > summary::before { content: "▸"; color: var(--encre-2); }
.programme-python[open] > summary::before { content: "▾"; }
.programme-python > div { padding: 0 12px 12px; display: grid; gap: 8px; }
.code-python {
  margin: 0; padding: 8px 0; background: #f7f9fc; border: 1px solid var(--ligne); border-radius: 8px; overflow: auto; max-height: 360px;
  font-family: var(--f-mono); font-size: 0.78rem; line-height: 1.55; counter-reset: ligne;
}
.code-python .l { display: block; padding: 0 10px 0 0; white-space: pre; transition: background 0.12s; }
.code-python .l::before { counter-increment: ligne; content: counter(ligne); display: inline-block; width: 2.4em; padding-right: 0.8em; text-align: right; color: #8a94a6; user-select: none; }
.code-python .l.active { background: #fff1b8; box-shadow: inset 3px 0 0 #e1ad21; }
.code-python .mc { color: #a1307a; font-weight: 600; }
.code-python .ch { color: #1f7a3d; }
.code-python .nb { color: #b4531a; }
/* sur la ligne surlignée (fond jaune), nombres et commentaires un peu plus foncés : au moins 4,5:1 */
.code-python .l.active .nb { color: #9a4508; }
.code-python .l.active .cm { color: #596273; }
.code-python .cm { color: #6b7280; font-style: italic; }
.code-python .fn { color: #2153b8; }
.programme-python .actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.programme-python .note { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }

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

/* =================================================================
   SCÈNES DU THÈME « LANCER, COMPTER, ESTIMER »
   ================================================================= */
.scene-lancer {
  position: absolute; inset: 0; padding: 12px var(--gouttiere); display: grid; gap: 12px;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "objet histo" "objet courbe";
}
.scene-lancer.avec-verdict { grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "objet histo" "objet verdict"; }
.bloc-scene {
  background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(31, 41, 55, 0.12); border-radius: 14px; box-shadow: var(--ombre);
  min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; position: relative;
  grid-template-columns: minmax(0, 1fr); /* la colonne ne s'élargit pas avec son contenu (bande « Derniers ») */
}
.bloc-objet { grid-area: objet; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.bloc-histo { grid-area: histo; }
.bloc-courbe { grid-area: courbe; }
.bloc-verdict { grid-area: verdict; grid-template-rows: auto minmax(0, 1fr); }
.tete-bloc { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: space-between; padding: 8px 12px 0; }
.tete-bloc h2 { font-size: var(--t-m); font-weight: 700; }
.tete-bloc select { font-size: var(--t-xs); border: 1px solid var(--ligne); border-radius: 8px; padding: 3px 6px; background: var(--surface); min-height: 30px; max-width: 100%; }
.tete-bloc label { font-size: var(--t-xs); color: var(--encre-2); display: inline-flex; gap: 4px; align-items: center; }
.zone-graphe { position: relative; min-height: 0; }
.zone-graphe canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }
.badge-graine {
  font-family: var(--f-mono); font-size: var(--t-s); background: var(--surface-2); border-radius: 999px; padding: 2px 10px; color: var(--encre-2);
}
.badge-graine b { color: var(--encre); letter-spacing: 0.12em; font-weight: 600; }
.compteur-lancers { font-family: var(--f-mono); font-size: var(--t-s); color: var(--encre-2); font-variant-numeric: tabular-nums; }
.compteur-lancers b { color: var(--encre); font-size: 1.1em; }
.zone-objet { position: relative; min-height: 0; }
.zone-objet > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.zone-objet .poignee { cursor: grab; }
.zone-objet .poignee:focus { outline: none; }
.zone-objet .poignee:focus-visible circle.anneau { stroke: var(--accent); stroke-width: 4; }
.zone-objet .poignee.tiree { cursor: grabbing; }
.etiq-svg { font-family: var(--f-texte); font-weight: 700; fill: var(--encre); paint-order: stroke; stroke: rgba(255, 255, 255, 0.92); stroke-width: 3.5px; stroke-linejoin: round; }
.etiq-svg.petite { font-weight: 500; font-size: 12px; }
.etiq-svg.mono { font-family: var(--f-mono); }
.reglages-objet { padding: 0 12px 6px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: var(--t-xs); }
.reglages-objet:empty { display: none; }
.reglage-couleur { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--ligne); border-radius: 999px; padding: 2px 4px 2px 8px; background: var(--surface); }
.reglage-couleur .nb { font-family: var(--f-mono); min-width: 1.6em; text-align: center; font-size: var(--t-s); }
.reglage-couleur button, .reglages-objet .rond {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--ligne); background: var(--surface); font-weight: 700; line-height: 1; padding: 0;
}
.reglage-couleur button:hover, .reglages-objet .rond:hover { border-color: var(--accent); color: var(--accent-fonce); }
.reglage-couleur button:disabled, .reglages-objet .rond:disabled { opacity: 0.35; cursor: default; }
.ligne-derniers { display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; min-height: 32px; }
.ligne-derniers .titre-mono { white-space: nowrap; }
/* les plus récents à droite ; s'il en manque la place, ce sont les plus anciens qui disparaissent */
.derniers { list-style: none; margin: 0; padding: 2px; display: flex; gap: 3px; flex-wrap: nowrap; overflow: hidden; flex: 1; justify-content: flex-end; min-width: 0; }
.derniers li {
  flex: none; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 6px; display: grid; place-items: center; font-family: var(--f-mono);
  font-size: 0.72rem; font-weight: 600; color: #ffffff; background: var(--encre-2);
}
.derniers li.recent { outline: 2px solid var(--encre); outline-offset: 1px; }
.bandeau-resultat {
  position: absolute; left: 12px; right: 12px; top: 44px; z-index: 3; padding: 8px 40px 8px 12px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--ligne); box-shadow: var(--ombre); font-size: var(--t-s); display: grid; gap: 2px; animation: apparaitre 0.25s ease;
}
.bandeau-resultat .fermer { position: absolute; right: 6px; top: 4px; border: 0; background: none; font-size: 1.1rem; color: var(--encre-2); width: 30px; height: 30px; }
.bandeau-resultat .pari-ligne { color: var(--pari); font-weight: 700; }
.bandeau-resultat .pari-ligne[data-rang="0"] { color: var(--encre-2); }
.message-accelere {
  position: absolute; inset: auto 12px 12px 12px; text-align: center; font-family: var(--f-mono); font-size: var(--t-s); color: var(--encre-2); pointer-events: none;
}

/* « Parie avant de lancer » */
.bascule-pari[aria-pressed="true"] { background: var(--pari) !important; border-color: var(--pari) !important; color: #ffffff !important; }
.pari {
  /* boîte modale : le voile couvre toute la page (le reste de l'appli est rendu inerte par js/pari.js) */
  position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(31, 41, 55, 0.32);
}
.pari-boite {
  width: min(460px, 100%); background: var(--surface); border-radius: 16px; box-shadow: 0 18px 50px rgba(20, 33, 61, 0.28);
  padding: 18px; display: grid; gap: 12px; border-top: 5px solid var(--pari);
}
.pari-boite h2 { font-size: var(--t-l); color: var(--pari); }
.pari-boite p { margin: 0; font-size: var(--t-s); }
.pari-valeur { font-family: var(--f-mono); font-size: 2.2rem; font-weight: 600; text-align: center; color: var(--encre); font-variant-numeric: tabular-nums; line-height: 1.1; }
.pari-curseur { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.pari-curseur input { width: 100%; accent-color: var(--pari); height: 28px; }
.pari-curseur .bornes { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
.pari-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.pari-actions .valider { background: var(--pari); border-color: var(--pari); color: #ffffff; }
.pari-actions .valider:hover { filter: brightness(1.08); }
.pari-actions button { min-height: 38px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--ligne); background: var(--surface); font-weight: 700; }

/* verdict du dé mystère */
.verdict { padding: 6px 12px 12px; display: grid; gap: 8px; align-content: start; overflow: auto; font-size: var(--t-s); }
.verdict fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.verdict legend { font-weight: 700; padding: 0; margin-bottom: 2px; }
.verdict .choix-radio { display: flex; gap: 8px; align-items: center; }
.verdict .choix-radio input { width: 18px; height: 18px; accent-color: var(--mystere); }
.faces-suspectes { display: flex; gap: 6px; flex-wrap: wrap; padding-left: 26px; }
.faces-suspectes button {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--surface); font-family: var(--f-mono); font-weight: 700;
}
.faces-suspectes button[aria-pressed="true"] { background: var(--mystere); border-color: var(--mystere); color: #ffffff; }
.faces-suspectes button:disabled { opacity: 0.4; cursor: default; }
.verdict .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.verdict .valider-verdict { background: var(--mystere); border: 1px solid var(--mystere); color: #ffffff; border-radius: 999px; padding: 7px 16px; font-weight: 700; min-height: 38px; }
.verdict .valider-verdict:hover { background: var(--mystere-fonce); }
.verdict .valider-verdict:disabled { opacity: 0.45; cursor: default; }
.revelation { border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.revelation.juste { background: var(--bon-doux); border: 1px solid var(--bon); }
.revelation.faux { background: var(--faux-doux); border: 1px solid var(--faux); }
.revelation h3 { font-size: var(--t-m); }
.revelation.juste h3 { color: var(--bon-fonce); }
.revelation.faux h3 { color: var(--faux-fonce); }
.revelation p { margin: 0; }
.record { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }

.champ-graine {
  width: 5.2em; font-family: var(--f-mono); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-align: center;
  border: 1px solid var(--ligne); border-radius: 8px; padding: 5px 6px; background: var(--surface); min-height: 34px;
}
.champ-graine:focus-visible { border-color: var(--accent); }

/* ---------- 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; opacity: 0.72; background: var(--surface-2); }
.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-mc); 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(--de-fonce); }

/* ---------- carnet d'intuitions ---------- */
.carnet-bilan { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.carnet-bilan .bloc strong { font-family: var(--f-mono); font-size: 1.6rem; font-weight: 600; color: var(--pari); }
.defilant { overflow-x: auto; border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface); }
.defilant .tableau th, .defilant .tableau td { padding: 6px 10px; }
.defilant .tableau td.question-carnet { font-family: var(--f-texte); text-align: left; min-width: 220px; }
.vide-carnet { padding: 18px; color: var(--encre-2); margin: 0; }

/* ---------- 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; }
  .scene-lancer {
    position: relative; inset: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: 300px 230px 230px;
    grid-template-areas: "objet" "histo" "courbe";
  }
  .scene-lancer.avec-verdict { grid-template-rows: 300px 240px auto; grid-template-areas: "objet" "histo" "verdict"; }
  .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) {
  .bandeau-resultat { position: relative; left: auto; right: auto; top: auto; margin: 0 12px 8px; }
  /* téléphone et tablette : les commandes passent au-dessus de la scène, juste sous les onglets, pour lancer
     sans faire défiler ; le pari s'ouvre au milieu de l'écran */
  .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; }
  .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; }
  .scene-lancer { padding: 10px 10px; gap: 10px; }
  .commandes { padding: 10px 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .info, .toast, .missions li.vient::before, .bandeau-resultat { animation: none; }
  .quiz-progression span, .code-python .l, .bloc-lien { transition: none; }
}

/* =================================================================
   THÈME 2 (suite) : CENT ÉCHANTILLONS, FILLES OU GARÇONS, AIGUILLE DE BUFFON
   ================================================================= */
/* cent échantillons : un seul grand bloc, quatre couloirs de gouttes */
.scene-echantillons { position: absolute; inset: 0; padding: 12px var(--gouttiere); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.bloc-gouttes { display: flex; flex-direction: column; }
.bloc-gouttes > .zone-gouttes { flex: 1 1 auto; min-height: 0; }
.bandeau-resultat.en-flux { position: relative; left: auto; right: auto; top: auto; margin: 6px 12px 0; }
.tete-bloc .groupe { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.tete-bloc .case { font-size: var(--t-xs); color: var(--encre-2); }
.tete-bloc .case input { width: 16px; height: 16px; }
.zone-gouttes { margin: 4px 6px 6px; }
.zone-gouttes canvas { touch-action: manipulation; }

/* filles ou garçons : la maternité, la jauge et les points */
.pied-maternite { padding: 4px 12px 10px; display: grid; gap: 6px; }
.jauge { position: relative; height: 14px; border-radius: 999px; background: var(--c-orange); overflow: hidden; border: 1px solid rgba(31, 41, 55, 0.25); }
.jauge .g { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c-bleu); }
.jauge i { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--encre); }
.pied-maternite.vide .jauge { background: var(--surface-2); }
.legende-maternite { margin: 0; font-size: var(--t-s); color: var(--encre-2); min-height: 3.1em; }
.legende-maternite strong { color: var(--encre); font-family: var(--f-mono); }
.pastille-g, .pastille-f { display: inline-block; width: 11px; height: 11px; margin: 0 4px 0 2px; vertical-align: -1px; background: var(--c-bleu); border-radius: 50%; border: 1px solid #163b7a; }
.pastille-f { background: var(--c-orange); border-color: #7a3606; border-radius: 1px; transform: rotate(45deg) scale(0.9); }
.info-point { margin: 0; padding: 0 12px 8px; font-size: var(--t-xs); color: var(--encre-2); min-height: 1.5em; }

/* aiguille de Buffon : le parquet se touche pour lancer */
.zone-parquet canvas { cursor: pointer; touch-action: manipulation; border-radius: 0 0 4px 4px; }
.zone-parquet canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.compteur-buffon { margin: 0; padding: 4px 12px 10px; font-size: var(--t-s); color: var(--encre-2); font-variant-numeric: tabular-nums; }
.compteur-buffon b { color: var(--encre); font-family: var(--f-mono); }
.compteur-buffon .estimation { font-family: var(--f-mono); font-weight: 700; color: #b42318; white-space: nowrap; }
.scene-buffon .reglages-objet .curseur { grid-template-columns: auto minmax(110px, 200px) auto; }

@media (max-width: 860px) {
  /* le bloc des couloirs prend la hauteur de son contenu : le bandeau de résultat s'ajoute au-dessus des couloirs
     sans les écraser */
  .scene-echantillons { position: relative; inset: auto; grid-template-rows: auto; }
  .bloc-gouttes > .zone-gouttes { flex: none; height: 480px; }
  /* le bloc de l'objet prend la hauteur de son contenu ; sa zone de dessin garde une hauteur suffisante */
  .scene-naissances { grid-template-rows: auto 300px 350px; }
  .scene-naissances .bloc-objet .zone-graphe { min-height: 300px; }
  .scene-buffon { grid-template-rows: auto 240px 270px; }
  .scene-buffon .zone-parquet { min-height: 320px; }
}
@media (max-width: 520px) {
  .scene-echantillons { padding: 10px; }
  .bloc-gouttes > .zone-gouttes { height: 440px; }
  .scene-buffon .reglages-objet .curseur { grid-template-columns: minmax(0, 1fr) auto; }
}
.tableau-buffon th:not(:first-child), .tableau-buffon td:not(:first-child) { width: 30%; }
.tableau-buffon td.actif { background: var(--accent-doux); font-weight: 600; }

/* =================================================================
   THÈME 1 : DÉCRIRE DES DONNÉES (moyenne et médiane, histogrammes)
   Graphiques en SVG (js/graphes-svg.js) ; jetons et poignées en HTML par-dessus : eux seuls bloquent le
   défilement au doigt (touch-action: none), le reste du dessin laisse défiler la page.
   ================================================================= */
/* la scène défile si l'écran est trop bas (vidéoprojecteur 1024 × 768) : l'axe garde une hauteur suffisante */
.scene-stats { position: absolute; inset: 0; padding: 12px var(--gouttiere); display: flex; flex-direction: column; overflow: auto; }
.bloc-serie { display: flex; flex-direction: column; flex: 1 0 auto; }
.bloc-serie > .zone-axe { flex: 1 0 340px; position: relative; margin: 0 4px; }
.scene-stats.deux .bloc-serie > .zone-axe { flex-basis: 440px; }
.scene-stats.deux .rangees { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); column-gap: 14px; }
/* --k : taille des textes des graphiques, plus grande quand le graphique est large (vidéoprojecteur, js/graphes-svg.js) */
.svg-zone { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; --k: 1; }
.svg-texte { font: calc(12px * var(--k, 1)) var(--f-texte); fill: var(--encre); }
.svg-texte.halo { paint-order: stroke; stroke: rgba(255, 255, 255, 0.92); stroke-width: 3.5px; stroke-linejoin: round; }
.svg-graduation { font: calc(11.5px * var(--k, 1)) var(--f-mono); fill: var(--encre-2); }
.svg-libelle { font-size: calc(12px * var(--k, 1)); fill: var(--encre-2); }
.svg-axe { stroke: var(--encre-2); stroke-width: 1.2; }
.svg-grille { stroke: var(--ligne); stroke-width: 1; }
.svg-trait { stroke: var(--encre-2); stroke-width: 1; }
.svg-ligne-moyenne { stroke: var(--de); stroke-width: 2; stroke-dasharray: 6 4; }
.svg-ligne-mediane { stroke: var(--accent-fonce); stroke-width: 2; stroke-dasharray: 2 3; }
.fantome { opacity: 0.32; }
.svg-texte-moyenne { font: 700 calc(12px * var(--k, 1)) var(--f-mono); fill: #b42318; }
.svg-texte-mediane { font: 700 calc(11.5px * var(--k, 1)) var(--f-mono); fill: #1d4ed8; }
.svg-texte-equilibre { font: 700 calc(12px * var(--k, 1)) var(--f-mono); fill: var(--bon-fonce); }
.svg-repere-moyenne { fill: var(--de); }
.svg-moustache { stroke: var(--encre); stroke-width: 1.6; }
.svg-boite-corps { fill: rgba(47, 95, 224, 0.13); stroke: #1d4ed8; stroke-width: 1.6; }
.svg-boite-mediane { stroke: #1d4ed8; stroke-width: 3.2; }
.boite-a .svg-boite-corps { fill: rgba(15, 118, 110, 0.14); stroke: #0f766e; }
.boite-a .svg-boite-mediane { stroke: #0f766e; }
.boite-b .svg-boite-corps { fill: rgba(180, 83, 9, 0.13); stroke: #9a4508; }
.boite-b .svg-boite-mediane { stroke: #9a4508; }
.svg-sigma { stroke: var(--pari); stroke-width: 2; fill: none; }
.svg-sigma-texte { font: 600 calc(11.5px * var(--k, 1)) var(--f-mono); fill: #5b21b6; }
.svg-fleau-barre { fill: #c08a3e; stroke: #7a5320; stroke-width: 1; }
.svg-masse { fill: #374151; }
.svg-pivot { fill: #4b5563; }
.svg-pivot.libre { fill: var(--pari); }
.svg-nom-couloir { font: 700 calc(12.5px * var(--k, 1)) var(--f-texte); }
.nom-a { fill: #0f766e; color: #0f766e; }
.nom-b { fill: #9a4508; color: #9a4508; }
.jetons { position: absolute; inset: 0; }
.jeton {
  position: absolute; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid #ffffff; background: #374151; color: #ffffff;
  font: 600 11px/1 var(--f-mono); display: grid; place-items: center; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 1px 3px rgba(20, 33, 61, 0.35);
}
.jeton.a { background: #0f766e; }
.jeton.b { background: #9a4508; }
.jeton.choisi { box-shadow: 0 0 0 3px var(--piece), 0 1px 3px rgba(20, 33, 61, 0.35); }
.jeton.tire { cursor: grabbing; z-index: 60 !important; }
.jeton:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pivot { position: absolute; width: 36px; height: 30px; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; border-radius: 6px; z-index: 50; }
.pivot:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.chiffres-serie { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font: var(--t-xs)/1.5 var(--f-mono); color: var(--encre-2); }
.chiffres-serie .c-moy { color: #b42318; font-weight: 600; }
.chiffres-serie .c-med { color: #1d4ed8; font-weight: 600; }
.statut-serie { margin: 0; padding: 2px 12px 4px; font-size: var(--t-s); color: var(--encre); min-height: 1.7em; }
.rangees { padding: 0 12px 10px; display: grid; gap: 6px; }
.rangee p { margin: 0 0 2px; font-size: var(--t-xs); color: var(--encre-2); }
.rangee ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px; }
.rangee li {
  position: relative; min-width: 30px; padding: 13px 4px 2px; text-align: center; border-radius: 6px; background: var(--surface-2);
  font: 600 0.8rem/1.2 var(--f-mono); color: var(--encre);
}
.rangee li[data-rep]::before { content: attr(data-rep); position: absolute; top: 1px; left: 0; right: 0; font-size: 0.62rem; font-weight: 700; color: #1e40af; }
.rangee li.me { background: #dbe6fd; }
.rangee li.q { background: #e8eefb; }
/* lien d'évitement « Aller aux commandes » (classes « visuellement-cache lien-evitement ») : il n'apparaît qu'avec le
   focus du clavier, en haut du bloc */
.lien-evitement:focus {
  top: 6px; left: 10px; width: auto; height: auto; max-width: calc(100% - 20px); overflow: visible; clip: auto; clip-path: none; white-space: normal;
  z-index: 80; padding: 6px 12px; border-radius: 8px; background: var(--accent-fonce); color: #ffffff; font-size: var(--t-xs); font-weight: 700;
  text-decoration: none; outline: 3px solid var(--accent); outline-offset: 2px;
}

/* histogrammes et classes */
/* sur un écran bas (1024 × 768), les deux graphiques gardent une hauteur lisible et la scène défile */
.scene-histo {
  position: absolute; inset: 0; padding: 12px var(--gouttiere); display: grid; gap: 12px; overflow: auto;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(330px, 1.15fr) minmax(290px, 1fr);
}
.bloc-histogramme, .bloc-cumulees { grid-template-rows: auto minmax(0, 1fr) auto; }
.zone-svg { position: relative; min-height: 0; margin: 2px 6px 0; }
.zone-svg.lisible { cursor: pointer; }
.zone-svg:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.svg-barre { fill: var(--c-bleu); }
.svg-barre.choisie { fill: #163b7a; }
.svg-barre-vide { fill: none; }
.svg-repere-quartile { fill: #1d4ed8; }
.svg-repere-decile { fill: #7c2d92; }
.svg-texte-decile { font: 700 calc(11.5px * var(--k, 1)) var(--f-mono); fill: #7c2d92; }
.svg-polygone { fill: none; stroke: var(--c-vert); stroke-width: 2.4; stroke-linejoin: round; }
.svg-point-polygone { fill: var(--c-vert); }
.svg-lecture { stroke: #1d4ed8; stroke-width: 1.4; stroke-dasharray: 4 3; fill: none; }
.svg-lecture.decile { stroke: #7c2d92; }
.svg-curseur-trait { stroke: var(--de); stroke-width: 1.6; stroke-dasharray: 5 3; }
.svg-texte-curseur { font: 700 calc(12px * var(--k, 1)) var(--f-mono); fill: #b42318; }
.poignee-courbe {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border-radius: 50%; border: 0; background: transparent;
  cursor: grab; touch-action: none; z-index: 5;
}
.poignee-courbe::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--de); border: 3px solid #ffffff; box-shadow: 0 1px 4px rgba(20, 33, 61, 0.45); }
.poignee-courbe:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }
.ligne-lecture { margin: 0; padding: 2px 12px 8px; font-size: var(--t-s); color: var(--encre); min-height: 1.7em; overflow-wrap: anywhere; }
.ligne-lecture b { font-family: var(--f-mono); }
.reglage-largeur { display: inline-flex; align-items: center; gap: 8px; }
.reglage-largeur input { width: 150px; accent-color: var(--accent); }
.reglage-largeur output { font-family: var(--f-mono); min-width: 4.2em; }
.commandes select { border: 1px solid var(--ligne); border-radius: 8px; padding: 4px 8px; background: var(--surface); min-height: 34px; font-size: var(--t-s); max-width: 100%; min-width: 0; }
.commandes .groupe { max-width: 100%; }

@media (max-width: 860px) {
  .scene-stats, .scene-histo { position: relative; inset: auto; overflow: visible; }
  .scene-stats { overflow: visible; }
  .bloc-serie > .zone-axe { flex: none; height: 400px; }
  .scene-stats.deux .bloc-serie > .zone-axe { height: 480px; }
  .scene-histo { grid-template-rows: 380px 330px; }
}
@media (max-width: 520px) {
  .scene-stats, .scene-histo { padding: 10px; }
  .jeton { width: 24px; height: 24px; font-size: 10.5px; }
  .reglage-largeur input { width: 120px; }
}
.svg-libelle.petite { font-size: calc(11px * var(--k, 1)); }

/* =================================================================
   THÈME 1 (suite) : LA DROITE DANS LE NUAGE, CORRÉLATION N'EST PAS CAUSALITÉ
   Pivot et poignée de rotation : des boutons HTML posés sur le dessin (touch-action: none sur eux seuls) ;
   le calque qui les porte laisse passer les clics vers le nuage (choix d'un point).
   ================================================================= */
.scene-droite {
  position: absolute; inset: 0; padding: 12px var(--gouttiere); display: grid; overflow: auto;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(520px, 1fr);
}
.bloc-nuage { display: flex; flex-direction: column; }
.cadre-nuage { position: relative; flex: 1 1 auto; min-height: 0; margin: 2px 6px 0; }
.cadre-nuage > .zone-nuage { position: absolute; inset: 0; margin: 0; }
.calque-poignees { position: absolute; inset: 0; pointer-events: none; }
.poignee-pivot, .poignee-rotation {
  position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  cursor: grab; touch-action: none; pointer-events: auto; z-index: 5; user-select: none; -webkit-user-select: none;
}
.poignee-pivot::after {
  content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--de); border: 3px solid #ffffff; box-shadow: 0 1px 4px rgba(20, 33, 61, 0.45);
}
.poignee-pivot.sur-g::after { background: var(--bon-fonce); }
.poignee-rotation::after {
  content: ""; position: absolute; inset: 10px; border-radius: 3px; background: #ffffff; border: 3px solid var(--de); transform: rotate(45deg);
  box-shadow: 0 1px 4px rgba(20, 33, 61, 0.35);
}
.poignee-pivot.tire, .poignee-rotation.tire { cursor: grabbing; }
.poignee-pivot:focus-visible, .poignee-rotation:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }
.ligne-lecture[hidden] { display: none; }
.ligne-point { color: var(--encre-2); }
.ligne-point b { color: var(--encre); font-family: inherit; }
.svg-point { fill: var(--accent); stroke: #ffffff; stroke-width: 1.2; }
.svg-bulle { fill: rgba(47, 95, 224, 0.4); stroke: #1d3f9e; stroke-width: 1; }
.svg-point.choisi, .svg-bulle.choisi { stroke: #9a6f0a; stroke-width: 3.2; }
.svg-bulle-texte { font: 700 calc(10.5px * var(--k, 1)) var(--f-mono); fill: #0b2a6e; }
.svg-droite { stroke: var(--de); stroke-width: 2.6; stroke-linecap: round; }
.svg-droite.moindres { stroke: #b42318; }
.svg-diagonale { stroke: var(--encre-2); stroke-width: 1.6; stroke-dasharray: 7 5; }
.svg-texte-diagonale { font: 700 calc(12px * var(--k, 1)) var(--f-mono); fill: var(--encre-2); }
.svg-ecart { stroke: #c2410c; stroke-width: 1.4; }
.svg-carre { fill: rgba(234, 88, 12, 0.14); stroke: rgba(194, 65, 12, 0.65); stroke-width: 1; }
.svg-prevision { fill: none; stroke: var(--pari); stroke-width: 1.6; stroke-dasharray: 4 3; }
.svg-texte-prevision { font: 700 calc(12px * var(--k, 1)) var(--f-mono); fill: #5b21b6; }
.svg-point-moyen circle { fill: #ffffff; stroke: #111827; stroke-width: 2; }
.svg-croix { stroke: #111827; stroke-width: 2; }
.svg-texte-g { font: 800 calc(15px * var(--k, 1)) var(--f-texte); fill: #111827; }

/* chiffres de l'encadré d'information (ctx.info) : des pastilles séparées */
.info .chiffres { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
.info .chiffres span { font: 600 var(--t-xs)/1.4 var(--f-mono); background: var(--surface); border: 1px solid var(--ligne); border-radius: 999px; padding: 2px 10px; }

/* corrélation n'est pas causalité */
.scene-correl {
  position: absolute; inset: 0; padding: 12px var(--gouttiere); display: grid; gap: 12px; overflow: auto;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: minmax(400px, 1fr);
}
.bloc-correl, .bloc-schema { display: flex; flex-direction: column; }
.bloc-correl > .zone-svg, .bloc-schema > .zone-svg { flex: 1 1 auto; min-height: 0; }
.grand-r { font: 700 1.1rem var(--f-mono); color: var(--encre); min-width: 6.5em; text-align: right; }
.svg-point-correl { fill: var(--accent); stroke: rgba(17, 24, 39, 0.6); stroke-width: 0.8; }
.svg-point-correl.hors { opacity: 0.15; }
.svg-point-correl.dans { stroke: #111827; stroke-width: 1.5; }
.svg-fleche { stroke: #374151; stroke-linecap: round; }
.svg-fleche-tete { fill: #374151; }
.svg-sans-lien { stroke: #6b7280; stroke-width: 1.5; stroke-dasharray: 3 5; }
.svg-noeud { fill: #ffffff; stroke: #374151; stroke-width: 1.6; }
.svg-noeud.cache { fill: #f1eafe; stroke: var(--pari); stroke-dasharray: 5 3; }
.svg-texte-noeud { font: 700 calc(12.5px * var(--k, 1)) var(--f-texte); fill: var(--encre); }
.svg-texte-fleche, .svg-texte-r { font: 700 calc(12px * var(--k, 1)) var(--f-mono); fill: var(--encre); }
.svg-jauge { fill: #e5e9f0; stroke: #9aa4b2; stroke-width: 1; }
.svg-repere-r { fill: var(--de); }
.svg-repere-rt { fill: var(--pari); }
.svg-legende-z { stroke: #9aa4b2; stroke-width: 1; }
.svg-tranche { fill: none; stroke: #111827; stroke-width: 2; }

/* scène étroite (écran de 1024 px avec le panneau de texte) : les deux blocs l'un sous l'autre, la scène défile */
@media (max-width: 1180px) and (min-width: 861px) {
  .scene-correl { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(400px, 1fr) 340px; }
  .activite.sans-panneau .scene-correl { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: minmax(400px, 1fr); }
}
@media (max-width: 860px) {
  .scene-droite, .scene-correl { position: relative; inset: auto; overflow: visible; }
  .scene-droite { grid-template-rows: auto; }
  .cadre-nuage { flex: none; height: 460px; }
  .scene-correl { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .bloc-correl > .zone-svg { flex: none; height: 400px; }
  .bloc-schema > .zone-svg { flex: none; height: 330px; }
}
@media (max-width: 520px) {
  .scene-droite, .scene-correl { padding: 10px; }
  .cadre-nuage { height: 420px; }
  .bloc-correl > .zone-svg { height: 360px; }
}

/* =================================================================
   THÈME 3 : ARBRES, TABLEAUX ET CONDITIONS (mille personnes et un test, construire l'arbre)
   Arbres en SVG (js/arbres.js) ; les cases des branches, des feuilles et du tableau sont des boutons HTML posés sur le
   dessin (calque) ; seules les étiquettes à glisser bloquent le défilement au doigt (touch-action: none).
   ================================================================= */
sub { font-size: 0.72em; line-height: 0; vertical-align: -0.28em; }
tspan.svg-indice { font-size: 0.74em; }
.svg-arbre .svg-branche { stroke: #4b5563; stroke-width: 1.8; stroke-linecap: round; }
.svg-branche.allumee { stroke: #111827; stroke-width: 2.8; }
.svg-branche.estompee { stroke: #c5ccd6; }
.svg-branche.fausse { stroke: #c2410c; stroke-width: 2.6; stroke-dasharray: 6 4; }
.svg-racine { fill: #1f2937; }
.svg-nom-noeud { font: 700 calc(15px * var(--k, 1)) var(--f-texte); fill: var(--encre); }
.svg-proba-branche { font: 700 calc(13px * var(--k, 1)) var(--f-mono); fill: #1f2937; }
.svg-proba-branche.allumee { fill: #b42318; }
.svg-feuille { font: 700 calc(12.5px * var(--k, 1)) var(--f-texte); fill: var(--encre); }
.svg-feuille-detail { font: calc(11.5px * var(--k, 1)) var(--f-mono); fill: var(--encre-2); }
/* textes estompés : gris lisible (au moins 4,5:1 sur le blanc), pas de transparence */
.svg-nom-noeud.estompee, .svg-proba-branche.estompee, .svg-feuille.estompee, .svg-feuille-detail.estompee { fill: #6b7280; }
.svg-feuille.g-vp, .svg-feuille.g-fn { fill: #8f231b; }
.svg-feuille.g-fp, .svg-feuille.g-vn { fill: #1d3f9e; }
.svg-marque-feuille { stroke: rgba(17, 24, 39, 0.35); stroke-width: 1; }

/* mille personnes et un test */
.scene-mille {
  position: absolute; inset: 0; padding: 12px var(--gouttiere); display: grid; gap: 12px; overflow: auto;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: minmax(400px, 1fr);
}
.bloc-foule, .bloc-arbre-mille { display: flex; flex-direction: column; }
.bloc-foule > .zone-foule { flex: 1 1 auto; min-height: 200px; margin: 4px 8px 0; }
.bloc-arbre-mille > .zone-svg { flex: 1 1 auto; min-height: 220px; }
.legende-foule { list-style: none; margin: 0; padding: 6px 12px 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--t-xs); color: var(--encre); }
.legende-foule li { display: inline-flex; align-items: center; gap: 6px; }
.legende-foule li.attenue { color: var(--encre-2); }
.legende-foule li.attenue .pastille-pers { opacity: 0.4; }
.pastille-pers {
  width: 15px; height: 15px; border-radius: 4px; display: inline-grid; place-items: center; flex: none; box-sizing: border-box;
  font: 700 12px/1 var(--f-mono); color: #ffffff;
}
.p-gris .pastille-pers { background: #a3acb9; }
.p-malade .pastille-pers, .p-vp .pastille-pers { background: #c8372d; }
.p-sain .pastille-pers, .p-fp .pastille-pers { background: #2f6fd6; }
.p-vp .pastille-pers::after, .p-fp .pastille-pers::after { content: "+"; }
.p-fn .pastille-pers { background: #f6cdc8; border: 2px solid #c8372d; }
.p-vn .pastille-pers { background: #cfddf6; border: 2px solid #2f6fd6; }
.note-allegee { font-size: var(--t-xs); color: var(--encre-2); display: inline-flex; gap: 6px; align-items: center; }
.lecture-arbre { font-size: var(--t-s); }
.tableau-croise th[scope="row"] { text-align: left; font-weight: 600; font-size: var(--t-s); }
.tableau-croise th.suivie, .tableau-croise td.suivie { background: var(--accent-doux); }
.tableau-croise tfoot th { border-bottom: 0; }

/* construire l'arbre */
.scene-arbre {
  position: absolute; inset: 0; padding: 12px var(--gouttiere); display: grid; gap: 12px; overflow: auto;
  grid-template-columns: minmax(250px, 0.62fr) minmax(0, 1.38fr); grid-template-rows: minmax(420px, 1fr);
}
.bloc-enonce { display: flex; flex-direction: column; overflow: auto; }
.bloc-enonce .tete-bloc { justify-content: flex-start; }
.corps-enonce { padding: 6px 12px 12px; display: grid; gap: 10px; align-content: start; font-size: var(--t-s); }
.enonce { margin: 0; font-size: var(--t-m); line-height: 1.5; }
.liste-evenements { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.liste-evenements b { font-family: var(--f-mono); }
.liste-evenements .contraire { color: var(--encre-2); }
.reserve { display: grid; gap: 6px; border-top: 1px solid var(--ligne); padding-top: 10px; }
.consigne-reserve { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.etiquette {
  min-width: 56px; min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 2px solid #7a5320; background: #fff7e6;
  font: 700 1rem/1 var(--f-mono); color: #3d2a10; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 2px 0 #c08a3e;
}
.etiquette:hover { background: #ffefcc; }
.etiquette[aria-pressed="true"] { background: #7a5320; color: #ffffff; box-shadow: 0 0 0 3px var(--piece); }
.etiquette.fantome {
  position: fixed; z-index: 70; pointer-events: none; transform: translate(-50%, -125%); cursor: grabbing;
  box-shadow: 0 8px 22px rgba(20, 33, 61, 0.3); display: grid; place-items: center;
}
.bloc-vue { display: flex; flex-direction: column; }
.bascule-vues > button { font-size: var(--t-xs); min-height: 32px; padding: 4px 11px; }
.bascule-vues > button:disabled { opacity: 0.45; cursor: default; }
.cadre-vue { position: relative; flex: 1 1 auto; min-height: 0; margin: 4px 6px 0; }
.cadre-vue > .zone-vue { position: absolute; inset: 0; margin: 0; }
.calque-arbre { position: absolute; inset: 0; pointer-events: none; }
.calque-arbre button { position: absolute; pointer-events: auto; }
.case-branche {
  height: 30px; padding: 0 4px; border-radius: 8px; border: 2px dashed #7c8696; background: #ffffff; color: var(--encre-2);
  font: 700 0.92rem/1 var(--f-mono); display: grid; place-items: center; touch-action: manipulation; white-space: nowrap;
}
.case-branche.pleine { border-style: solid; border-color: #374151; color: var(--encre); background: #fff7e6; }
.calque-arbre.en-attente .case-branche:not(.pleine) { border-color: var(--accent); background: var(--accent-doux); color: var(--accent-fonce); }
.case-branche.survol, .case-branche:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 95, 224, 0.25); }
.case-branche.fausse { border-color: #c2410c; background: #fff1e6; color: #9a3412; }
.case-branche.refus { border: 2px solid var(--faux); background: var(--faux-doux); color: var(--faux-fonce); animation: refus 0.45s ease; }
@keyframes refus { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.case-feuille { height: 34px; border: 2px solid transparent; border-radius: 8px; background: transparent; touch-action: manipulation; }
.case-feuille:hover { border-color: rgba(47, 95, 224, 0.4); }
.case-feuille[aria-pressed="true"] { border-color: var(--accent); background: rgba(47, 95, 224, 0.1); }
.case-zone { border: 2px solid transparent; border-radius: 6px; background: transparent; touch-action: manipulation; padding: 0; }
.case-zone:hover { border-color: rgba(17, 24, 39, 0.35); }
.case-zone[aria-pressed="true"] { border-color: #111827; box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #111827; }
.calque-arbre button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.statut-arbre { min-height: 3.2em; }
.statut-arbre.alerte { color: var(--faux-fonce); }
.svg-tableau-fond { fill: #ffffff; stroke: #9aa4b2; stroke-width: 1.2; }
.svg-tableau-trait { stroke: #c5ccd6; stroke-width: 1; }
.svg-tete-tableau { font: 700 calc(14px * var(--k, 1)) var(--f-texte); fill: var(--encre); }
.svg-case-valeur { font: 700 calc(13px * var(--k, 1)) var(--f-mono); fill: var(--encre); }
.svg-case-total { font: 700 calc(13px * var(--k, 1)) var(--f-mono); fill: #374151; }
.svg-case-detail { font: calc(11.5px * var(--k, 1)) var(--f-mono); fill: var(--encre-2); }
.svg-tuile { stroke: rgba(17, 24, 39, 0.3); stroke-width: 1; }
.svg-tuile.carre { stroke: #ffffff; stroke-width: 1.5; }
.svg-tuile.choisie { stroke: #111827; stroke-width: 3; }
.svg-carre-cadre { fill: none; stroke: #374151; stroke-width: 1.5; }
.svg-tuile-nom { font: 700 calc(13px * var(--k, 1)) var(--f-texte); }
.svg-tuile-valeur { font: 700 calc(13px * var(--k, 1)) var(--f-mono); }
.svg-tuile-nom.claire, .svg-tuile-valeur.claire { fill: #ffffff; }
.svg-tuile-nom.foncee, .svg-tuile-valeur.foncee { fill: #1f2937; }
.svg-cote { stroke: #4b5563; stroke-width: 1.2; }
.svg-cote-texte { font: 700 calc(12px * var(--k, 1)) var(--f-mono); fill: var(--encre); }
.tableau-feuilles td:nth-child(2) { font-size: 0.78rem; color: var(--encre-2); }
.tableau-feuilles tr.suivie td { background: var(--accent-doux); }

@media (max-width: 1180px) and (min-width: 861px) {
  .scene-mille { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(400px, 1fr) 380px; }
  .activite.sans-panneau .scene-mille { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: minmax(400px, 1fr); }
  .scene-arbre { grid-template-columns: minmax(0, 1fr); grid-template-rows: max-content minmax(420px, 1fr); }
  .activite.sans-panneau .scene-arbre { grid-template-columns: minmax(250px, 0.62fr) minmax(0, 1.38fr); grid-template-rows: minmax(420px, 1fr); }
}
@media (max-width: 860px) {
  .scene-mille, .scene-arbre { position: relative; inset: auto; overflow: visible; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .bloc-foule > .zone-foule { flex: none; height: 400px; }
  .bloc-arbre-mille > .zone-svg { flex: none; height: 300px; }
  .bloc-enonce { overflow: visible; }
  .cadre-vue { flex: none; height: 420px; }
}
@media (max-width: 520px) {
  .scene-mille, .scene-arbre { padding: 10px; }
  .bloc-foule > .zone-foule { height: 360px; }
  .cadre-vue { height: 400px; }
  .etiquette { min-width: 52px; min-height: 40px; padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .case-branche.refus { animation: none; }
}
.curseurs-compacts { gap: 6px 16px; }
.curseurs-compacts .curseur { grid-template-columns: auto minmax(70px, 118px) auto; gap: 6px; }
.curseurs-compacts .curseur output { min-width: 3.6em; }
@media (max-width: 520px) {
  .curseurs-compacts { width: 100%; }
  .curseurs-compacts .curseur { width: 100%; grid-template-columns: 6.5em minmax(0, 1fr) 3.6em; }
  .curseurs-compacts .curseur span:first-child { grid-column: auto; }
}
.calque-arbre .case-branche.refus { border: 2px solid var(--faux); background: var(--faux-doux); color: var(--faux-fonce); }
/* arbre à trois niveaux : huit feuilles, les cases de deux branches sœurs ne doivent pas se chevaucher */
.bloc-vue.trois-niveaux .cadre-vue { min-height: 540px; }
@media (max-width: 860px) {
  .bloc-vue.trois-niveaux .cadre-vue { height: 600px; }
}
/* écran de 1024 px (vidéoprojecteur) avec le texte : l'énoncé au-dessus, en deux colonnes (le texte, les étiquettes) ;
   la scène défile si la vue n'a pas assez de hauteur */
@media (max-width: 1180px) and (min-width: 521px) {
  .scene-arbre .bloc-enonce { overflow: visible; }
  .scene-arbre .corps-enonce { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "enonce reserve" "evenements reserve"; column-gap: 16px; }
  .scene-arbre .enonce { grid-area: enonce; }
  .scene-arbre .liste-evenements { grid-area: evenements; }
  .scene-arbre .reserve { grid-area: reserve; border-top: 0; padding-top: 0; border-left: 1px solid var(--ligne); padding-left: 14px; align-content: start; }
  .activite.sans-panneau .scene-arbre .corps-enonce { grid-template-columns: minmax(0, 1fr); grid-template-areas: "enonce" "evenements" "reserve"; }
  .activite.sans-panneau .scene-arbre .reserve { border-left: 0; padding-left: 0; border-top: 1px solid var(--ligne); padding-top: 10px; }
}

/* =================================================================
   THÈME 3 (suite) : INDÉPENDANTS ?, LES TROIS PORTES, LE FILTRE ANTI-SPAM
   Zones hachurées (A : « / », bord plein ; B : « \ », bord en tirets) : jamais la couleur seule. Seules les poignées
   des zones bloquent le défilement au doigt (touch-action: none).
   ================================================================= */
.scene-indep {
  position: absolute; inset: 0; padding: 12px var(--gouttiere); display: grid; gap: 12px; overflow: auto;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(420px, 1fr);
}
.bloc-carre, .bloc-comparaison { display: flex; flex-direction: column; }
.cadre-carre { position: relative; flex: 1 1 auto; min-height: 280px; margin: 4px 6px 0; }
.cadre-carre > .zone-carre { position: absolute; inset: 0; margin: 0; touch-action: manipulation; }
.cadre-carre > .toile-points { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.calque-zones { position: absolute; inset: 0; pointer-events: none; }
.poignee-zone {
  position: absolute; pointer-events: auto; transform: translate(-50%, -50%); touch-action: none; user-select: none; -webkit-user-select: none;
  display: grid; place-items: center; padding: 0; color: #ffffff; font: 700 1.05rem/1 var(--f-titre); cursor: grab;
  box-shadow: 0 1px 3px rgba(20, 33, 61, 0.35);
}
.poignee-zone.deplacer { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #ffffff; }
.poignee-zone.taille { width: 30px; height: 30px; border-radius: 6px; border: 2px solid #ffffff; font-size: 0.95rem; cursor: nwse-resize; }
.poignee-zone.zA { background: #1d4ed8; }
.poignee-zone.zB { background: #9a3412; }
.poignee-zone.taille.zB { border-style: dashed; }
.poignee-zone.tiree { cursor: grabbing; z-index: 3; }
.poignee-zone:focus { z-index: 2; }
.poignee-zone:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }
.svg-carre-fond { fill: #ffffff; stroke: #374151; stroke-width: 1.5; }
.svg-grille line.fine { stroke: #eceff4; stroke-width: 1; }
.svg-grille line.forte { stroke: #d5dbe4; stroke-width: 1; }
.svg-graduation { font: calc(11px * var(--k, 1)) var(--f-mono); fill: var(--encre-2); }
.svg-zone-ev.zA { stroke: #1d4ed8; stroke-width: 2.5; cursor: grab; }
.svg-zone-ev.zB { stroke: #9a3412; stroke-width: 2.5; stroke-dasharray: 7 4; cursor: grab; }
.svg-inter { fill: none; stroke: #111827; stroke-width: 3; }
.svg-nom-zone { font: 700 calc(15px * var(--k, 1)) var(--f-titre); }
.svg-nom-zone.zA { fill: #1d4ed8; }
.svg-nom-zone.zB { fill: #9a3412; }
.svg-nom-inter { font: 700 calc(13px * var(--k, 1)) var(--f-texte); fill: #111827; }
.svg-nom-abar { font: 700 calc(13px * var(--k, 1)) var(--f-texte); fill: #374151; }
.legende-zones { margin: 0; padding: 6px 12px 0; font-size: var(--t-xs); color: var(--encre); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.legende-zones .item { display: inline-flex; align-items: center; gap: 6px; }
.pastille-zone { width: 18px; height: 14px; border-radius: 3px; display: inline-block; flex: none; }
.pastille-zone.zAbar { border: 1px solid #6b7280; background: repeating-linear-gradient(-45deg, rgba(75, 85, 99, 0.45) 0 2px, rgba(75, 85, 99, 0.06) 2px 6px); }
.pastille-zone.zA { border: 2px solid #1d4ed8; background: repeating-linear-gradient(-45deg, rgba(29, 78, 216, 0.55) 0 2px, rgba(47, 95, 224, 0.1) 2px 6px); }
.pastille-zone.zB { border: 2px dashed #9a3412; background: repeating-linear-gradient(45deg, rgba(154, 52, 18, 0.55) 0 2px, rgba(194, 65, 12, 0.1) 2px 6px); }
.corps-comparaison { padding: 8px 12px 12px; display: grid; gap: 10px; align-content: start; overflow: auto; }
.deux-cartes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: stretch; }
.deux-cartes .signe-egal { align-self: center; }
.carte-proba { border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface); padding: 10px; display: grid; gap: 4px; text-align: center; min-width: 0; }
.carte-proba .titre-carte { font-weight: 700; font-size: var(--t-s); }
.carte-proba strong { font: 700 calc(1.45rem * var(--k-texte, 1)) var(--f-mono); color: var(--encre); overflow-wrap: anywhere; }
.carte-proba .detail-carte { font-size: var(--t-xs); color: var(--encre-2); font-family: var(--f-mono); overflow-wrap: anywhere; }
.signe-egal { font: 700 1.8rem/1 var(--f-mono); color: var(--faux-fonce); min-width: 1.2em; text-align: center; }
.signe-egal.egal { color: var(--bon-fonce); }
.barres-comparees { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center; }
.nom-barre { font: 600 var(--t-xs) var(--f-mono); color: var(--encre-2); white-space: nowrap; }
.barre-c { height: 10px; border-radius: 5px; background: #1d4ed8; min-width: 2px; transition: width 0.15s; }
.barre-c.deux { background: repeating-linear-gradient(90deg, #374151 0 8px, #9aa4b2 8px 11px); }
.voyant { margin: 0; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--ligne); background: var(--surface-2); font-size: var(--t-s); }
.voyant .icone { font-weight: 700; }
.voyant.allume { border-color: var(--bon-fonce); background: var(--bon-doux); color: #0b4d26; }
.lecture-sachant { border-left: 3px solid var(--niv-1re); padding: 2px 0 2px 10px; font-size: var(--t-s); display: grid; gap: 4px; }
.lecture-sachant p { margin: 0; }
.lecture-sachant .niv { justify-self: start; }
.lecture-pluie { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.choix-exemple { border: 1px solid var(--ligne); border-radius: 8px; padding: 4px 8px; background: var(--surface); min-height: 36px; font: inherit; font-size: var(--t-s); }
@media (max-width: 1180px) and (min-width: 861px) {
  .scene-indep { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(440px, 1fr) auto; }
  .activite.sans-panneau .scene-indep { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(420px, 1fr); }
}
@media (max-width: 860px) {
  .scene-indep { position: relative; inset: auto; overflow: visible; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .cadre-carre { flex: none; height: min(440px, calc(100vw - 20px)); }
}
@media (max-width: 520px) {
  .scene-indep { padding: 10px; }
  .carte-proba strong { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .barre-c { transition: none; }
}

/* les trois portes */
.scene-portes {
  position: absolute; inset: 0; padding: 12px var(--gouttiere); display: grid; gap: 12px; overflow: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: max-content minmax(290px, 1fr);
  grid-template-areas: "jouer simuler" "arbre arbre";
}
/* dans les blocs en colonne, seuls le dessin et la courbe s'étirent : les textes gardent leur hauteur */
.scene-portes .bloc-scene > *, .scene-indep .bloc-scene > *, .scene-spam .bloc-scene > * { flex: none; }
.scene-portes .bloc-scene > .rangee-portes, .scene-portes .bloc-scene > .zone-courbe-portes, .scene-portes .bloc-scene > .cadre-arbre-portes,
.scene-indep .bloc-scene > .cadre-carre, .scene-indep .bloc-scene > .corps-comparaison { flex: 1 1 auto; }
.bloc-jouer { grid-area: jouer; display: flex; flex-direction: column; }
.bloc-simuler { grid-area: simuler; display: flex; flex-direction: column; }
.bloc-arbre-portes { grid-area: arbre; display: flex; flex-direction: column; }
.score-main { font: var(--t-xs) var(--f-mono); color: var(--encre-2); }
.rangee-portes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 8px 12px 0; flex: 1 1 auto; min-height: 150px; }
.porte {
  border: 2px solid transparent; border-radius: 12px; background: transparent; padding: 4px; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  gap: 4px; justify-items: center; min-height: 0; cursor: pointer; font: inherit; color: var(--encre);
}
.porte svg { width: 100%; height: 100%; max-height: 180px; min-height: 90px; display: block; }
.porte:disabled { cursor: default; color: var(--encre); opacity: 1; }
.porte:not(:disabled):hover { border-color: rgba(47, 95, 224, 0.45); }
.porte:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.porte.choisie { border-color: #111827; background: rgba(255, 255, 255, 0.8); box-shadow: 0 0 0 2px #ffffff inset; }
.porte-texte { font-size: var(--t-xs); font-weight: 600; text-align: center; min-height: 2.6em; }
.porte-cadre { fill: #5b3a1a; }
.porte-battant { fill: #a86b32; }
.porte-panneau { fill: none; stroke: #7a4b1f; stroke-width: 2.5; }
.porte-rond { fill: #fff7e6; stroke: #5b3a1a; stroke-width: 2; }
.porte-numero { font: 700 22px var(--f-titre); fill: #3d2a10; }
.porte-poignee { fill: #f2c94c; stroke: #5b3a1a; stroke-width: 1.5; }
.porte-fond { fill: #e9edf3; }
.porte-battant-ouvert { fill: #8a5527; }
.voiture-caisse { fill: #c8372d; stroke: #7f1d1d; stroke-width: 1.5; }
.voiture-vitre { fill: #dbeafe; }
.voiture-roue { fill: #1f2937; }
.voiture-jante { fill: #d1d5db; }
.chevre-corps { fill: #f8fafc; stroke: #4b5563; stroke-width: 1.8; }
.chevre-patte { fill: #6b7280; }
.chevre-corne { fill: none; stroke: #4b5563; stroke-width: 2.2; stroke-linecap: round; }
.chevre-oeil { fill: #1f2937; }
.message-jeu { margin: 0; padding: 6px 12px 0; font-size: var(--t-s); min-height: 3em; }
.choix-jeu { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 12px 10px; min-height: 52px; }
.choix-jeu button[hidden] { display: none; }
.zone-courbe-portes { flex: 1 1 auto; min-height: 170px; margin: 4px 8px 0; }
.compte-portes, .derniere-partie { padding-top: 4px; }
.derniere-partie { color: var(--encre-2); padding-top: 0; }
.cadre-arbre-portes { position: relative; flex: 1 1 auto; min-height: 220px; margin: 2px 6px 0; }
.cadre-arbre-portes > .zone-svg { position: absolute; inset: 0; margin: 0; }
.pied-arbre-portes { padding: 2px 12px 0; font-size: var(--t-s); }
.pied-arbre-portes label[hidden] { display: none; }
.svg-feuille.g-gagne { fill: #0b5a2b; }
@media (max-width: 1180px) and (min-width: 861px) {
  .scene-portes { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(300px, auto) minmax(300px, auto); grid-template-areas: "jouer" "simuler" "arbre"; }
  .activite.sans-panneau .scene-portes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(300px, 1fr) minmax(280px, 1fr); grid-template-areas: "jouer simuler" "arbre arbre"; }
  .rangee-portes { min-height: 220px; }
}
@media (max-width: 860px) {
  .scene-portes { position: relative; inset: auto; overflow: visible; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "jouer" "simuler" "arbre"; }
  .rangee-portes { flex: none; height: 230px; }
  .zone-courbe-portes { flex: none; height: 260px; }
  .cadre-arbre-portes { flex: none; height: 300px; }
}
@media (max-width: 520px) {
  .scene-portes { padding: 10px; }
  .rangee-portes { gap: 6px; padding: 8px 6px 0; height: 200px; }
}
.choix-jeu button {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 999px; padding: 7px 14px;
  font-size: var(--t-s); line-height: 1.2; min-height: 38px; font-weight: 600;
}
.choix-jeu button:hover { border-color: var(--accent); }
.choix-jeu button.principal { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #ffffff; }
.choix-jeu button.principal:hover { background: #1d4f96; }
.choix-jeu button:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }

/* le filtre anti-spam */
.scene-spam {
  position: absolute; inset: 0; padding: 12px var(--gouttiere); display: grid; gap: 12px; overflow: auto;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: max-content minmax(220px, 1fr);
  grid-template-areas: "messages mots" "messages calcul";
}
/* les blocs dont le contenu doit rester entier (les autres défilent à l'intérieur) */
.scene-spam .bloc-mots, .scene-portes .bloc-jouer, .scene-portes .bloc-simuler { overflow: visible; }
.bloc-messages { grid-area: messages; display: flex; flex-direction: column; }
.bloc-mots { grid-area: mots; display: flex; flex-direction: column; }
.bloc-calcul-spam { grid-area: calcul; display: flex; flex-direction: column; }
.deux-boites { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px 0; }
.boite-courrier { border: 1px solid var(--ligne); border-radius: 10px; padding: 6px 10px; display: grid; gap: 1px; font-size: var(--t-xs); color: var(--encre-2); background: var(--surface); }
.boite-courrier .nom-boite { font-weight: 700; color: var(--encre); font-size: var(--t-s); }
.boite-courrier strong { font: 700 1.3rem var(--f-mono); color: var(--encre); }
.boite-courrier.indesirables { border-style: dashed; border-color: #9a3412; }
.liste-messages { list-style: none; margin: 0; padding: 8px 12px 0; display: grid; gap: 6px; align-content: start; }
.scene-spam .bloc-messages > .liste-messages { flex: 1 1 auto; overflow: auto; min-height: 0; }
.liste-messages li.vide { color: var(--encre-2); font-size: var(--t-s); }
.ouvrir-message {
  width: 100%; text-align: left; border: 1px solid var(--ligne); border-left: 4px solid var(--bon); border-radius: 10px; background: var(--surface);
  padding: 6px 10px; display: grid; gap: 2px; font: inherit; color: var(--encre); cursor: pointer;
}
.message.erreur .ouvrir-message { border-left: 4px dashed #c2410c; background: #fff7ed; }
.ouvrir-message:hover { border-color: var(--accent); }
.ouvrir-message[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.ouvrir-message:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.objet-message { font-weight: 600; font-size: var(--t-s); }
.objet-message mark { background: #fde68a; color: #1f2937; border-radius: 3px; padding: 0 2px; }
.objet-message mark.mot-filtre { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; }
.objet-message mark.mot-ignore { background: transparent; text-decoration: underline dotted; }
.verdict-message { font-size: var(--t-xs); color: var(--encre-2); }
.verdict-message b { color: var(--encre); }
.verdict-message .marque-message { font-weight: 700; color: var(--bon-fonce); white-space: nowrap; }
.message.erreur .verdict-message .marque-message { color: #9a3412; }
.corps-mots { padding: 4px 12px 10px; display: grid; gap: 6px; }
.note-mots { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
.ligne-mot { border: 1px solid var(--ligne); border-radius: 10px; padding: 4px 10px 6px; margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: center; background: var(--surface); }
.ligne-mot legend { padding: 0 4px; display: inline-flex; gap: 6px; align-items: center; font-size: var(--t-s); }
.ligne-mot legend input { width: 18px; height: 18px; accent-color: var(--accent); }
.ligne-mot .curseur { grid-template-columns: auto minmax(70px, 110px) auto; gap: 6px; font-size: var(--t-xs); }
.ligne-mot .curseur output { min-width: 3em; font-family: var(--f-mono); }
/* un mot que le filtre ne regarde pas : fond gris, bord en tirets et « (le filtre ne le regarde pas) » ; ses curseurs
   restent utilisables (les messages contiennent toujours le mot), donc lisibles : pas d'opacité réduite */
.ligne-mot.ignore { background: var(--surface-2); border-style: dashed; border-color: #8a94a3; }
.ligne-mot .etat-mot { font-size: var(--t-xs); color: var(--encre-2); }
.corps-calcul { padding: 4px 12px 10px; display: grid; gap: 6px; font-size: var(--t-s); align-content: start; }
.scene-spam .bloc-calcul-spam > .corps-calcul { flex: 1 1 auto; overflow: auto; min-height: 0; }
.corps-calcul p { margin: 0; overflow-wrap: anywhere; }
.corps-calcul .bayes { font-weight: 600; }
.corps-calcul .note-calcul { font-size: var(--t-xs); color: var(--encre-2); }
.corps-calcul .bilan-exact { border-top: 1px solid var(--ligne); padding-top: 6px; }
@media (max-width: 1180px) and (min-width: 861px) {
  .scene-spam { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "messages" "mots" "calcul"; }
  .scene-spam .bloc-messages > .liste-messages { min-height: 300px; }
  .activite.sans-panneau .scene-spam { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: max-content minmax(220px, 1fr); grid-template-areas: "messages mots" "messages calcul"; }
}
@media (max-width: 860px) {
  .scene-spam { position: relative; inset: auto; overflow: visible; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "messages" "mots" "calcul"; }
}
@media (max-width: 520px) {
  .scene-spam { padding: 10px; }
  .ligne-mot .curseur { width: 100%; grid-template-columns: 7.5em minmax(0, 1fr) 3em; }
  .ligne-mot .curseur span:first-child { grid-column: auto; }
}

/* =================================================================
   THÈME 4 : COMPTER LES CHEMINS, LA LOI BINOMIALE
   ================================================================= */
/* la planche de Galton : la planche à gauche, les bacs et le comptage des chemins à droite */
.scene-galton {
  position: absolute; inset: 0; padding: 12px var(--gouttiere); display: grid; gap: 12px; overflow: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(min-content, 1.35fr) minmax(240px, 1fr);
  grid-template-areas: "planche compter" "bacs compter";
}
.scene-galton .bloc-scene { display: flex; flex-direction: column; }
.scene-galton .bloc-scene > * { flex: none; }
.scene-galton .bloc-scene > .zone-planche, .scene-galton .bloc-scene > .zone-bacs, .scene-galton .bloc-scene > .zone-compter { flex: 1 1 auto; min-height: 0; }
/* le bandeau du pari s'insère au-dessus de la planche : la planche garde au moins 190 pixels (la scène défile alors) */
.bloc-planche { min-height: 330px; }
.scene-galton .bloc-scene > .zone-planche { min-height: 190px; }
.bloc-planche { grid-area: planche; }
.bloc-bacs { grid-area: bacs; }
.bloc-compter { grid-area: compter; }
.zone-planche { min-height: 220px; margin: 4px 4px 0; }
.zone-bacs { min-height: 170px; margin: 4px 8px 0; }
.zone-planche canvas, .zone-bacs canvas { cursor: pointer; }
.zone-compter { min-height: 260px; }
.choix-bac select { font-size: var(--t-s); }
.pied-compter { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 0; }
.pied-compter[hidden] { display: none; }
.pied-compter button {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 999px; padding: 5px 12px;
  font-size: var(--t-s); line-height: 1.2; min-height: 34px; font-weight: 600;
}
.pied-compter button:hover:not(:disabled) { border-color: var(--accent); }
.pied-compter button.principal { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #ffffff; }
.pied-compter button:disabled { opacity: 0.5; cursor: default; }
.pied-compter button:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }
.note-allegee { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--encre-2); }
.tableau-galton tr.suivie td { font-weight: 700; }
.svg-feuille.vers-bac { fill: #8f1d14; text-decoration: underline; }
.case-pascal { fill: #ffffff; stroke: #4b5563; stroke-width: 1.2; cursor: pointer; }
.case-pascal.vide { fill: rgba(255, 255, 255, 0.4); stroke: #9aa3af; stroke-dasharray: 3 3; cursor: default; }
.case-pascal.nouvelle { fill: #fff4d6; stroke: #9a5b0b; stroke-width: 2; }
.case-pascal.bac { fill: #fdecea; }
.case-pascal.parent { stroke: #111827; stroke-width: 2.2; stroke-dasharray: 5 3; }
.case-pascal.lue { stroke: #111827; stroke-width: 3; fill: #fff4d6; }
.nombre-pascal { font-family: var(--f-mono); font-weight: 600; fill: var(--encre); pointer-events: none; }
.lien-pascal { stroke: #111827; stroke-width: 2; }
.lien-pascal.en-cours { stroke: #9a5b0b; stroke-dasharray: 4 3; }
.fleche-bac { fill: #111827; }
@media (max-width: 1180px) and (min-width: 861px) {
  .scene-galton { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(420px, auto) minmax(280px, auto) minmax(480px, auto); grid-template-areas: "planche" "bacs" "compter"; }
  .activite.sans-panneau .scene-galton { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(280px, 1.25fr) minmax(230px, 1fr); grid-template-areas: "planche compter" "bacs compter"; }
}
@media (max-width: 860px) {
  .scene-galton { position: relative; inset: auto; overflow: visible; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "planche" "bacs" "compter"; }
  .scene-galton .bloc-scene > .zone-planche { flex: none; height: 380px; }
  .scene-galton .bloc-scene > .zone-bacs { flex: none; height: 240px; }
  .scene-galton .bloc-scene > .zone-compter { flex: none; height: 380px; }
  /* champs de saisie à 16 px au moins sur téléphone (sinon iOS agrandit la page) */
  .choix-bac select { font-size: 16px; }
}
@media (max-width: 520px) {
  .scene-galton { padding: 10px; }
  .scene-galton .bloc-scene > .zone-planche { height: 340px; }
}
.case-pascal.nouvelle, .nombre-pascal.nouveau, .lien-pascal.en-cours { animation: case-apparait 0.35s ease-out both; }
@keyframes case-apparait { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .case-pascal.nouvelle, .nombre-pascal.nouveau, .lien-pascal.en-cours { animation: none; }
}

/* chemins dans la grille : la grille à gauche, la liste des chemins et l'arbre (ou le triangle) à droite */
.scene-chemins {
  position: absolute; inset: 0; padding: 12px var(--gouttiere); display: grid; gap: 12px; overflow: auto;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: minmax(190px, 0.8fr) minmax(260px, 1.2fr);
  grid-template-areas: "grille liste" "grille arbre";
}
.scene-chemins .bloc-scene { display: flex; flex-direction: column; }
.scene-chemins .bloc-scene > * { flex: none; }
.bloc-grille { grid-area: grille; }
.bloc-liste-chemins { grid-area: liste; }
.bloc-arbre-chemins { grid-area: arbre; }
.resume-grille { font: var(--t-xs) var(--f-mono); color: var(--encre-2); }
.scene-chemins .bloc-scene > .cadre-grille { position: relative; flex: 1 1 auto; min-height: 240px; margin: 4px 6px 0; border-radius: 10px; touch-action: none; cursor: crosshair; }
.cadre-grille > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cadre-grille:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; }
.scene-chemins .bloc-scene > .zone-arbre-chemins { flex: 1 1 auto; min-height: 190px; }
.pied-grille { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 0; justify-content: center; }
.pied-grille button, .scene-chemins .tete-bloc .groupe button {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 999px; padding: 5px 12px;
  font-size: var(--t-s); line-height: 1.2; min-height: 36px; font-weight: 600;
}
.pied-grille button:hover:not(:disabled), .scene-chemins .tete-bloc .groupe button:hover:not(:disabled) { border-color: var(--accent); }
.pied-grille button:disabled, .pied-grille button[aria-disabled="true"], .scene-chemins .tete-bloc .groupe button:disabled { opacity: 0.5; cursor: default; }
.pied-grille button:focus-visible, .scene-chemins .tete-bloc .groupe button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.liste-mots { list-style: none; margin: 0; padding: 8px 12px 10px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; overflow: auto; }
.scene-chemins .bloc-scene > .liste-mots { flex: 1 1 auto; min-height: 0; }
.liste-mots li {
  font-family: var(--f-mono); font-weight: 600; font-size: var(--t-s); letter-spacing: 0.08em; border: 1px solid #9aa3af; border-radius: 8px;
  padding: 2px 8px; background: var(--surface); display: inline-flex; gap: 6px; align-items: baseline;
}
.liste-mots li .rang { font-size: 0.7rem; color: var(--encre-2); letter-spacing: 0; }
.liste-mots li.ajoute { border-style: dashed; color: var(--encre-2); background: var(--surface-2); }
.liste-mots li.vide { font-family: var(--f-texte); font-weight: 400; border: 0; background: none; color: var(--encre-2); letter-spacing: 0; padding: 0; }
.svg-grille .arete { stroke: #9aa3af; stroke-width: 2; }
.chemin-trouve { fill: none; stroke: rgba(29, 78, 216, 0.3); stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.chemin-courant { fill: none; stroke: #1d4ed8; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.chemin-courant.complet { stroke: #0b5a2b; stroke-width: 6; }
.noeud-grille { fill: #ffffff; stroke: #4b5563; stroke-width: 1.5; }
.noeud-grille.compte { fill: #fff4d6; }
.noeud-grille.cible { stroke: #111827; stroke-width: 3.5; }
.noeud-grille.bout { stroke: #1d4ed8; stroke-width: 3.5; }
.noeud-grille.nouveau, .nombre-noeud.nouveau, .lien-somme { animation: case-apparait 0.35s ease-out both; }
.nombre-noeud { font-family: var(--f-texte); font-weight: 700; fill: var(--encre); pointer-events: none; }
.lien-somme { stroke: #9a5b0b; stroke-width: 2.5; stroke-dasharray: 4 3; }
.lettre-pas { font-family: var(--f-mono); font-weight: 700; fill: #1d4ed8; }
.svg-libelle.fort { font-size: calc(11px * var(--k, 1)); font-weight: 700; fill: var(--encre); }
/* variantes de dénombrement (Tle) */
.reglages-variante { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.choix-variante { font-size: var(--t-xs); color: var(--encre-2); display: inline-flex; gap: 4px; align-items: center; }
.choix-variante select { font-size: var(--t-s); border: 1px solid var(--ligne); border-radius: 8px; padding: 3px 6px; background: var(--surface); min-height: 32px; }
.cases-variante { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px 4px; justify-content: center; }
.case-variante {
  width: 62px; min-height: 74px; border: 2px dashed #9aa3af; border-radius: 10px; display: grid; justify-items: center; align-items: center;
  grid-template-rows: 1fr auto; background: var(--surface); padding: 4px;
}
.case-variante.pleine { border-style: solid; border-color: #111827; }
.case-variante .valeur { font: 700 1.6rem var(--f-mono); min-height: 1.3em; }
.case-variante .choix-restants { font-size: 0.72rem; color: var(--encre-2); }
.choix-variante-boutons { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px; justify-content: center; }
.choix-variante-boutons button {
  min-width: 48px; min-height: 48px; font: 700 1.15rem var(--f-mono); border: 1px solid #9aa3af; border-radius: 10px; background: var(--surface); color: var(--encre);
}
.choix-variante-boutons button:hover { border-color: var(--accent); }
.choix-variante-boutons button.pris { background: var(--surface-2); color: #4b5563; text-decoration: line-through; border-style: dashed; cursor: default; }
.choix-variante-boutons button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.formule-variante { padding: 4px 12px 12px; font-size: var(--t-s); display: grid; gap: 8px; align-content: start; overflow: auto; }
.scene-chemins .bloc-scene > .formule-variante { flex: 1 1 auto; min-height: 0; }
.formule-variante p { margin: 0; }
@media (max-width: 1180px) and (min-width: 861px) {
  .scene-chemins { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(420px, auto) minmax(200px, auto) minmax(300px, auto); grid-template-areas: "grille" "liste" "arbre"; }
  .activite.sans-panneau .scene-chemins { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: minmax(190px, 0.8fr) minmax(260px, 1.2fr); grid-template-areas: "grille liste" "grille arbre"; }
}
@media (max-width: 860px) {
  .scene-chemins { position: relative; inset: auto; overflow: visible; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "grille" "liste" "arbre"; }
  .scene-chemins .bloc-scene > .cadre-grille { flex: none; height: 340px; }
  .scene-chemins .bloc-scene > .liste-mots { flex: none; max-height: 220px; }
  .scene-chemins .bloc-scene > .zone-arbre-chemins { flex: none; height: 330px; }
  .scene-chemins .bloc-scene > .formule-variante { flex: none; }
  /* champs de saisie à 16 px au moins sur téléphone */
  .choix-variante select, .champ-graine, .recherche input { font-size: 16px; }
}
@media (max-width: 520px) {
  .scene-chemins { padding: 10px; }
}
.tableau-galton td { white-space: nowrap; }

/* régler la binomiale : l'histogramme de la loi à gauche, la somme des barres et la décision (MC) à droite */
.scene-regler {
  position: absolute; inset: 0; padding: 12px var(--gouttiere); display: grid; gap: 12px; overflow: auto;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: max-content minmax(0, 1fr);
  grid-template-areas: "loi somme" "loi decision";
}
/* (les blocs ont overflow: hidden : sans « max-content », une ligne « auto » pouvait les écraser sur un écran bas) */
.scene-regler .bloc-scene { display: flex; flex-direction: column; }
.scene-regler .bloc-scene > * { flex: none; }
.bloc-loi { grid-area: loi; min-height: 380px; }
.bloc-somme { grid-area: somme; }
.bloc-decision { grid-area: decision; align-self: start; }
.scene-regler .bloc-loi > .zone-loi { flex: 1 1 auto; min-height: 260px; margin: 4px 6px 0; border-radius: 10px; cursor: pointer; }
.zone-loi:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.badge-moments { font-size: var(--t-xs); }
.corps-somme, .corps-decision { display: grid; gap: 8px; padding: 8px 12px 4px; justify-items: start; }
.corps-decision > .ligne-lecture { padding: 0; }
.ligne-bornes, .ligne-seuil { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.ligne-seuil[hidden] { display: none; }
.champ-borne, .choix-seuil { display: inline-flex; gap: 6px; align-items: center; font-size: var(--t-s); color: var(--encre-2); }
.champ-borne[hidden] { display: none; }
.champ-borne span { font-family: var(--f-mono); font-weight: 600; color: var(--encre); }
.champ-borne input {
  width: 4.6em; font-family: var(--f-mono); font-size: var(--t-s); text-align: center; border: 1px solid var(--ligne); border-radius: 8px;
  padding: 4px 6px; background: var(--surface); min-height: 34px;
}
.choix-seuil select { font-size: var(--t-s); border: 1px solid var(--ligne); border-radius: 8px; padding: 3px 6px; background: var(--surface); min-height: 34px; }
.champ-borne input:focus-visible, .choix-seuil select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.scene-regler .bascule > button { font-family: var(--f-mono); font-size: var(--t-xs); }
.scene-regler .groupe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.scene-regler .groupe button:not(.petit-bouton) {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 999px; padding: 5px 12px;
  font-size: var(--t-s); line-height: 1.2; min-height: 34px; font-weight: 600;
}
.scene-regler .groupe button:hover:not(:disabled) { border-color: var(--accent); }
.scene-regler .groupe button.principal:not(.petit-bouton) { background: var(--de); border-color: var(--de); color: #ffffff; font-weight: 700; }
.scene-regler .groupe button.principal:not(.petit-bouton):hover { background: var(--de-fonce); border-color: var(--de-fonce); }
.scene-regler .groupe button:disabled { opacity: 0.5; cursor: default; }
.scene-regler .groupe .libelle { color: var(--encre-2); font-size: var(--t-xs); }
.bloc-decision h2 .niv { margin-right: 4px; vertical-align: 2px; }
.verdict-decision:empty, .lecture-seuil:empty { display: none; }
.plus-moins { display: inline-flex; gap: 2px; }
.plus-moins .petit-bouton { min-width: 32px; min-height: 32px; font-size: var(--t-m); font-weight: 700; padding: 0 6px; }
.loi-defilante { max-height: 360px; overflow: auto; }
.tableau-loi td { white-space: nowrap; }
.tableau-loi tr.suivie td { font-weight: 700; }
/* n et p sont des lettres de l'énoncé : pas de capitales (« P = 0,3 » se lirait comme une probabilité) */
.tableau-loi caption, .tableau-galton caption { text-transform: none; letter-spacing: 0.02em; }
@media (max-width: 1180px) and (min-width: 861px) {
  .scene-regler { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(400px, auto) max-content max-content; grid-template-areas: "loi" "somme" "decision"; }
  .activite.sans-panneau .scene-regler { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: max-content minmax(0, 1fr); grid-template-areas: "loi somme" "loi decision"; }
}
@media (max-width: 860px) {
  .scene-regler { position: relative; inset: auto; overflow: visible; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "loi" "somme" "decision"; }
  .bloc-loi { min-height: 0; }
  .scene-regler .bloc-loi > .zone-loi { flex: none; height: 340px; }
  /* champs de saisie à 16 px au moins sur téléphone (sinon iOS agrandit la page) */
  .champ-borne input, .choix-seuil select { font-size: 16px; }
}
@media (max-width: 520px) {
  .scene-regler { padding: 10px; }
  .scene-regler .bloc-loi > .zone-loi { height: 320px; }
}

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