/* À LA DÉCOUVERTE DES GÈNES ET DE L'ÉVOLUTION — feuille de style
   Même famille que « À la découverte du hasard » : une barre en haut, puis un écran plein cadre.
   Écran d'activité : la scène à gauche (onglets, puis commandes, puis la scène), le texte à droite.
   ../commun/scolatools.css, chargé après cette feuille, redéfinit les couleurs communes (fond, encre, accent bleu) ;
   le bleu de ses boutons pleins est désormais #2f5fe0 (5,5:1 avec le blanc) dans ../commun/scolatools.css lui-même ;
   la valeur identique de --accent ci-dessous, ajoutée quand le commun avait #398cef (3,4:1), est redondante (gardée).
   Pas de thème sombre, comme le site. Couleurs des os et des animaux toujours doublées d'un texte ou d'un motif. */
: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: #116b33;
  --bon-doux: #dcfce7;
  --faux: #dc2626;
  --faux-fonce: #b42318;
  --faux-doux: #fee2e2;
  --or: #9c7a10;
  --ocre: #8a4f0b;
  --bulle-fond: #1b2333;
  --bulle-texte: #ffffff;
  --verre: rgba(255, 255, 255, 0.9);
  --ombre: 0 1px 2px rgba(20, 33, 61, 0.05), 0 8px 24px rgba(20, 33, 61, 0.07);

  /* fonds des scènes, un par thème */
  --scene-classer-1: #f0f6ee; --scene-classer-2: #d5e6cf;
  --scene-genes-1: #eef3fb; --scene-genes-2: #cfdcf0;
  --scene-brassage-1: #f4effa; --scene-brassage-2: #ddd1ee;
  --scene-evolution-1: #faf4e8; --scene-evolution-2: #ecdcbc;

  /* niveaux */
  --niv-c4: #0f766e; --niv-lycee: #1d4ed8; --niv-1re: #4338ca; --niv-tle: #7c2d92; --niv-es: #9a4508;

  /* boîtes emboîtées (profondeur) */
  --boite-0: #eef6ea; --boite-1: #fdf6e3; --boite-2: #ecf3fb; --boite-3: #f6eefa;
  --bord-0: #5b8a4a; --bord-1: #a37b1d; --bord-2: #3f6fa8; --bord-3: #7d4e9e;

  /* os (toujours avec un motif) */
  --os: #f2ead8; --os-trait: #6b5a3e;
  --os-humerus: #c75a1a; --os-radius: #2f6fd6; --os-ulna: #1f8a4c; --os-carpe: #7a45b8; --os-metacarpe: #c2387f; --os-phalanges: #8f6a0c; --os-sesamoide: #4b5563;

  --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: 400px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: var(--t-m)/1.55 var(--f-texte); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--f-titre); line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
a { color: var(--accent); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.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; }
.hors-niveau { display: none !important; }
.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; }

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

/* ---------- ambiances des thèmes ---------- */
[data-theme] { --scene-1: var(--scene-classer-1); --scene-2: var(--scene-classer-2); }
[data-theme="genes"] { --scene-1: var(--scene-genes-1); --scene-2: var(--scene-genes-2); }
[data-theme="brassage"] { --scene-1: var(--scene-brassage-1); --scene-2: var(--scene-brassage-2); }
[data-theme="evolution"] { --scene-1: var(--scene-evolution-1); --scene-2: var(--scene-evolution-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); }
.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); }
.choix-niveau { margin-left: auto; align-items: center; }
.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); }
.commandes button[aria-pressed="true"], .onglets a[aria-current="page"] { background: var(--accent); color: var(--accent-encre); border-color: var(--accent); }
.app .bascule > button[aria-pressed="true"] { background: var(--accent); color: var(--accent-encre); border-color: var(--accent); }
.commandes button.principal { background: var(--accent); border-color: var(--accent); color: #ffffff; font-weight: 700; }
.commandes button.principal:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.commandes button[aria-disabled="true"], .bouton[aria-disabled="true"], .choix-defi[aria-disabled="true"] { opacity: 0.55; 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); }
/* Redondant depuis que ../commun/scolatools.css peint lui-même ses boutons pleins en #2f5fe0 (5,5:1 avec le blanc ;
   auparavant #398cef, 3,4:1) ; gardé par sûreté : même couleur, aucun effet visible. */
.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); }

/* ---------- 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="c4"] { background: #ddf3f0; color: var(--niv-c4); }
.niv[data-n="lycee"], .niv[data-n="2de"] { background: #e3ebfd; color: var(--niv-lycee); }
.niv[data-n="1re"] { background: #e7e6fb; color: var(--niv-1re); }
.niv[data-n="tle"] { background: #f3e5f7; color: var(--niv-tle); }
.niv[data-n="es"] { background: #fdf0dc; color: var(--niv-es); }

/* ---------- 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, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.accueil-intro { display: grid; gap: 12px; max-width: 62ch; }
.surtitre { margin: 0; }
.accueil-intro h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); 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 { border-radius: 16px; border: 1px solid var(--ligne); box-shadow: var(--ombre); padding: 14px; background: radial-gradient(110% 90% at 50% 35%, var(--scene-classer-1), var(--scene-classer-2)); display: grid; gap: 8px; }
.mini-boites { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.mini-boite { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; padding: 2px 6px 6px; border: 2px solid var(--bord-0); border-radius: 12px; background: var(--boite-0); position: relative; }
.mini-boite[data-prof="1"] { border-color: var(--bord-1); background: var(--boite-1); }
.mini-boite[data-prof="2"] { border-color: var(--bord-2); background: var(--boite-2); }
.mini-boite[data-prof="3"] { border-color: var(--bord-3); background: var(--boite-3); }
.mini-etiquette { flex-basis: 100%; font-size: 0.72rem; font-weight: 700; color: var(--encre); white-space: nowrap; padding-left: 2px; }
.mini-animal { display: inline-grid; justify-items: center; width: 62px; font-size: 0.7rem; color: var(--encre); background: var(--surface); border-radius: 8px; padding: 2px 2px 3px; border: 1px solid var(--ligne); }
.mini-animal svg { width: 48px; height: 34px; }
.legende-dessin { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
/* Accueil, grand écran : l'illustration est à hauteur du titre (commun/scolatools.css) ; les boîtes s'étalent en largeur,
   chaque animal à gauche de la boîte suivante, pour ne pas dépasser le titre en hauteur */
@media (min-width: 981px) {
  .accueil .accueil-tete { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); }
  .accueil-dessin .mini-boites, .accueil-dessin .mini-boite { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .accueil-dessin .mini-etiquette { grid-column: 1 / -1; }
}
/* tablette : la colonne de l'illustration serait trop étroite pour les boîtes étalées ; l'illustration repasse sous le texte */
@media (max-width: 980px) {
  .ecran.accueil .accueil-tete { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: none; }
  .ecran.accueil .accueil-tete > .accueil-intro > *, .ecran.accueil .accueil-tete > .accueil-dessin { grid-area: auto; grid-column: 1; }
}
.section-accueil { display: grid; gap: 14px; }
.titre-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.section-accueil h2 { font-size: var(--t-xl); font-weight: 720; }
.bilan-missions { margin: 0; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
.grille-modules { display: grid; grid-template-columns: repeat(auto-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: 8px 0 0; display: grid; gap: 2px; border-top: 1px solid var(--ligne); }
.liste-activites li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--t-s); min-height: 30px; }
.liste-activites a { color: var(--accent-fonce); font-weight: 600; text-decoration: none; padding: 3px 0; }
.liste-activites a:hover { text-decoration: underline; }
/* étoiles des missions : pleines ★ (faites) et creuses ☆ (à faire) : la forme les distingue, pas seulement la couleur ;
   contrastes sur le blanc de la carte : 6:1 et 5,4:1 */
.etoiles { letter-spacing: 1px; color: #7a5f0c; white-space: nowrap; font-size: var(--t-xs); }
.etoiles .vide { color: #5f6b7a; }
.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; }
.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 auto minmax(0, 1fr); 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) 8px; }
.onglets { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-items: center; }
.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: auto; }
.commandes { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 8px var(--gouttiere) 10px; background: var(--verre); border-top: 1px solid var(--ligne); border-bottom: 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); }
.liste { display: inline-flex; gap: 6px; align-items: center; max-width: 100%; min-width: 0; }
.commandes .groupe { max-width: 100%; min-width: 0; }
.liste span { color: var(--encre-2); font-size: var(--t-xs); }
.liste select, .liste input { border: 1px solid var(--ligne); border-radius: 8px; background: var(--surface); padding: 5px 8px; min-height: 34px; font-size: var(--t-s); max-width: 100%; min-width: 0; }
.groupe-boite .liste select { width: 19em; }
.curseur { display: grid; grid-template-columns: auto minmax(110px, 200px) auto; gap: 8px; align-items: center; }
.curseur span:first-child { color: var(--encre-2); font-size: var(--t-xs); }
.curseur output { font-family: var(--f-mono); font-variant-numeric: tabular-nums; min-width: 3.5em; }
.curseur input { width: 100%; accent-color: var(--accent); }
.case { display: inline-flex; gap: 6px; align-items: center; min-height: 34px; }
.case input { accent-color: var(--accent); width: 18px; height: 18px; }

.panneau { position: relative; 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); }
.avis-niveau { margin: 0; padding: 8px 10px; border-left: 4px solid var(--niv-tle); border-radius: 6px; background: #f6eefa; font-size: var(--t-s); color: var(--encre); }
.avis-niveau[hidden] { display: none; }
.info { border: 1px solid var(--accent); background: var(--accent-doux); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; font-size: var(--t-s); }
.info h2 { font-size: var(--t-l); font-weight: 720; color: var(--accent-fonce); }
.info p { margin: 0; }
.encart:empty { display: none; }
.encart { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } /* minmax(0, …) : un tableau large défile dans son cadre, sans élargir le panneau */
.missions { display: grid; gap: 6px; }
.missions 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: 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 #8a94a6; margin-top: 1px; box-sizing: border-box; }
.missions li.faite { color: var(--encre-2); }
.missions li.faite::before { content: "✓"; border-color: var(--bon-fonce); background: var(--bon-fonce); 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(--niv-lycee); 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="es"] { border-color: var(--niv-es); }
.texte p.niveau .niv { margin-right: 2px; vertical-align: 1px; }
.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; }
.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; }
.erreur-activite { padding: 16px; }

.tableau { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tableau th, .tableau td { padding: 4px 6px; border-bottom: 1px solid var(--ligne); text-align: center; }
.tableau th[scope="row"], .tableau thead th:first-child { text-align: left; }
.defilant { overflow-x: auto; border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface); }

.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; pointer-events: none; }
.toast.neutre { background: var(--accent-fonce); }
@media (max-width: 600px) { .toast { border-radius: 16px; padding: 10px 14px; } }
@keyframes monter { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- défis ---------- */
.page-mise { max-width: 980px; margin: 0 auto; padding: 28px var(--gouttiere) 48px; display: grid; gap: 22px; }
.defis { display: grid; gap: 18px; }
.defis h1, .page-mise > h1 { font-size: var(--t-xxl); font-weight: 780; }
.defis > p, .page-mise > p { margin: 0; color: var(--encre-2); max-width: 70ch; }
.defis > .bouton { justify-self: start; }
.grille-defis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.choix-defi { display: grid; gap: 4px; text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); }
.choix-defi:hover:not([aria-disabled="true"]) { border-color: var(--accent); }
.choix-defi[aria-disabled="true"] { background: var(--surface-2); opacity: 1; }
.choix-defi strong { font-family: var(--f-titre); font-size: var(--t-l); }
.choix-defi span { font-size: var(--t-s); color: var(--encre-2); }
.choix-defi em { font-style: normal; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--accent-fonce); }
.medaille { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 0.72rem; font-weight: 700; font-family: var(--f-mono); color: #ffffff; justify-self: start; }
.medaille.grande { width: 46px; height: 46px; }
.medaille.or { background: #8a6c0e; } .medaille.argent { background: #5f6b77; } .medaille.bronze { background: #8a5126; } .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); }
.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([aria-disabled="true"]) { border-color: var(--accent); }
.quiz-choix button[aria-disabled="true"] { cursor: default; }
.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="bon"]::before { content: "✓ "; }
.quiz-choix button[data-ton="faux"] { background: var(--faux-doux); border-color: var(--faux); color: var(--faux-fonce); text-decoration: line-through; }
.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(--ocre); }

/* ---------- 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 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; }
#compte-lexique:empty { display: none; }
.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; }

/* =================================================================
   THÈME 1 : LES BOÎTES EMBOÎTÉES
   ================================================================= */
.scene-boites { display: flex; flex-direction: column; gap: 10px; padding: 10px var(--gouttiere) 16px; min-height: 100%; }
.message-scene { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--ligne); font-size: var(--t-s); border-left-width: 5px; }
@media (min-width: 861px) {
  .message-scene { position: sticky; top: 0; z-index: 2; box-shadow: 0 2px 8px rgba(20, 33, 61, 0.08); }
  /* le message collant ne cache jamais l'élément qui reçoit le focus ni un titre qu'on fait venir */
  .scene { scroll-padding-top: 9rem; }
}
.message-scene[data-ton="bon"] { border-left-color: var(--bon-fonce); }
.message-scene[data-ton="refus"] { border-left-color: var(--faux-fonce); background: #fff8f7; }
.message-scene[data-ton="neutre"] { border-left-color: var(--accent); }
.plateau { position: relative; flex: 1; }
.cadre { border: 2px solid #6b7280; border-radius: 14px; background: rgba(255, 255, 255, 0.55); padding: 6px; }
.entete-cadre, .boite > .entete { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.entete-boite { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; border: 0; background: transparent; padding: 3px 6px; border-radius: 8px; font-size: var(--t-xs); font-weight: 700; color: var(--encre); min-height: 30px; }
.entete-boite:hover { background: rgba(255, 255, 255, 0.8); }
.entete-boite em { font-weight: 500; font-style: normal; color: var(--encre-2); }
.entete-boite .nb { font-family: var(--f-mono); font-weight: 500; color: var(--encre-2); background: var(--surface); border-radius: 999px; padding: 0 7px; }
.retirer-boite { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre-2); font-size: 1rem; line-height: 1; display: grid; place-items: center; padding: 0; }
.retirer-boite:hover { border-color: var(--faux); color: var(--faux-fonce); }
.contenu { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.boite { border: 2px solid var(--bord-0); background: var(--boite-0); border-radius: 12px; padding: 4px 6px 6px; min-width: 96px; }
.boite[data-prof="1"] { border-color: var(--bord-1); background: var(--boite-1); }
.boite[data-prof="2"] { border-color: var(--bord-2); background: var(--boite-2); }
.boite[data-prof="3"] { border-color: var(--bord-3); background: var(--boite-3); }
.boite.libre { border-style: dashed; }
.boite.survol, .cadre.survol { box-shadow: 0 0 0 3px var(--accent); }
.carte-animal { position: relative; display: grid; justify-items: center; gap: 0; width: 80px; padding: 4px 3px 5px; border-radius: 10px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); font-size: 0.74rem; line-height: 1.2; user-select: none; -webkit-user-select: none; }
.carte-animal .dessin-animal { width: 60px; height: 42px; display: block; }
.carte-animal:hover { border-color: var(--accent); }
.carte-animal[aria-pressed="true"] { border: 2px solid var(--accent-fonce); padding: 3px 2px 4px; background: var(--accent-doux); }
.carte-animal .coche { display: none; position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-fonce); color: #ffffff; font-size: 12px; font-weight: 700; place-items: center; }
.carte-animal[aria-pressed="true"] .coche { display: grid; }
.carte-animal.souleve { opacity: 0.4; }
@media (pointer: fine) { .carte-animal { cursor: grab; } }
.fantome-glisse { position: fixed; z-index: 50; width: 64px; height: 46px; pointer-events: none; background: var(--surface); border: 2px solid var(--accent); border-radius: 10px; box-shadow: var(--ombre); padding: 2px; }
.fantome-glisse svg { width: 100%; height: 100%; }
.calque-transition { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.fantome-boite { position: absolute; border: 2px solid var(--bord-2); border-radius: 12px; background: rgba(236, 243, 251, 0.35); }
.fantome-boite.libre { border-style: dashed; }
.fantome-animal { position: absolute; display: flex; align-items: center; gap: 4px; font-size: 0.74rem; background: var(--surface); border: 1px solid var(--ligne); border-radius: 8px; overflow: hidden; }
.fantome-animal svg { height: 100%; max-height: 42px; width: auto; aspect-ratio: 80 / 56; flex: none; }
.en-transition > :not(.calque-transition) { visibility: hidden; }
/* l'arbre */
.vue-arbre { display: grid; gap: 10px; align-content: start; }
svg.arbre { display: block; max-width: 100%; height: auto; background: rgba(255, 255, 255, 0.6); border-radius: 12px; }
.arbre .clade { fill: var(--boite-0); stroke: var(--bord-0); stroke-width: 1; opacity: 0.55; }
.arbre .clade[data-prof="1"] { fill: var(--boite-1); stroke: var(--bord-1); }
.arbre .clade[data-prof="2"] { fill: var(--boite-2); stroke: var(--bord-2); }
.arbre .clade[data-prof="3"] { fill: var(--boite-3); stroke: var(--bord-3); }
.arbre .clade.libre { stroke-dasharray: 5 4; }
.arbre .traits line { stroke: #374151; stroke-width: 2.4; stroke-linecap: round; }
.arbre .marque rect { fill: #9a1f12; }
.arbre .marque circle { fill: #ffffff; stroke: #9a1f12; stroke-width: 1.6; }
.arbre .marque.libre circle { stroke-dasharray: 3 2; }
.arbre .numero { font: 700 10.5px var(--f-mono); fill: #9a1f12; }
.arbre .etiquette { font: 600 11px var(--f-texte); fill: #1f2937; paint-order: stroke; stroke: rgba(255, 255, 255, 0.9); stroke-width: 3px; }
.arbre .nom-feuille { font: 600 12.5px var(--f-texte); fill: #1f2937; }
.legende-arbre { margin: 0; padding: 10px 14px 10px 2.4em; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; font-size: var(--t-s); display: grid; gap: 3px; }
.legende-arbre li::marker { font-family: var(--f-mono); font-weight: 700; color: #9a1f12; }
.note-arbre { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
/* tableau des caractères (panneau) */
.tableau-caracteres { border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface); }
.tableau-caracteres > summary { cursor: pointer; padding: 10px 14px; font-weight: 700; font-size: var(--t-s); }
.tableau-caracteres .defilant { margin: 0 10px; border-radius: 8px; max-height: 420px; overflow: auto; }
.matrice { font-size: 0.78rem; }
.matrice thead th { vertical-align: bottom; height: 120px; padding: 4px 2px; position: sticky; top: 0; background: var(--surface); }
.matrice thead th span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-weight: 600; }
.matrice thead th:first-child { vertical-align: bottom; }
.matrice th[scope="row"] { position: sticky; left: 0; background: var(--surface); white-space: nowrap; font-weight: 600; }
.matrice td.oui { color: var(--bon-fonce); font-weight: 700; background: #f0faf3; }
.matrice td.non { color: #6b7280; }
.note-tableau { margin: 8px 14px 12px; font-size: var(--t-xs); color: var(--encre-2); }

/* =================================================================
   THÈME 1 : LES MEMBRES HOMOLOGUES
   ================================================================= */
.scene-membres { padding: 12px var(--gouttiere) 16px; min-height: 100%; display: grid; }
.motifs { position: absolute; width: 0; height: 0; overflow: hidden; }
.grille-membres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.carte-membre { margin: 0; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--ligne); border-radius: 12px; padding: 6px 6px 8px; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 210px; }
.zone-membre { border-radius: 8px; display: grid; place-items: center; min-height: 170px; }
.zone-membre:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }
.dessin-membre { width: 100%; height: 100%; max-height: 230px; display: block; overflow: visible; }
.carte-membre figcaption { font-size: var(--t-s); text-align: center; display: grid; gap: 0; line-height: 1.3; }
.carte-membre .usage { color: var(--encre-2); font-size: var(--t-xs); }
.carte-membre .compte { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre); min-height: 1.3em; }
.os .fond-os { fill: var(--os); stroke: var(--os-trait); stroke-width: 0.45; vector-effect: non-scaling-stroke; }
.os { cursor: pointer; }
.os.allume .fond-os { stroke: #111827; stroke-width: 1.4; }
.os.allume[data-groupe="humerus"] .fond-os { fill: var(--os-humerus); }
.os.allume[data-groupe="radius"] .fond-os { fill: var(--os-radius); }
.os.allume[data-groupe="ulna"] .fond-os { fill: var(--os-ulna); }
.os.allume[data-groupe="carpe"] .fond-os { fill: var(--os-carpe); }
.os.allume[data-groupe="metacarpe"] .fond-os { fill: var(--os-metacarpe); }
.os.allume[data-groupe="phalanges"] .fond-os { fill: var(--os-phalanges); }
.os.allume[data-groupe="sesamoide"] .fond-os { fill: var(--os-sesamoide); }
.os .motif-os { stroke: none; pointer-events: none; }
.os.courant .fond-os { stroke: #111827; stroke-width: 2.6; }
.silhouette { stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; }
.silhouette.peau { fill: rgba(122, 69, 184, 0.16); stroke: #5b3a8a; }
.silhouette.plumes { fill: rgba(47, 111, 214, 0.14); stroke: #2853a8; }
.silhouette.nageoire, .silhouette.main { fill: rgba(107, 114, 128, 0.14); stroke: #4b5563; }
.silhouette.sabot { fill: rgba(60, 48, 30, 0.35); stroke: #3c301e; }
.vue-transformation { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px; min-height: 360px; }
.dessin-membre.grand { max-height: none; height: min(60vh, 560px); min-height: 280px; }
.legende-transformation { font-size: var(--t-s); text-align: center; }
.legende-transformation span { color: var(--encre-2); }

/* =================================================================
   THÈME 1 : CONSTRUIS L'ARBRE
   ================================================================= */
.scene-arbre, .scene-sequences { display: flex; flex-direction: column; gap: 10px; padding: 10px var(--gouttiere) 16px; min-height: 100%; }
.atelier-arbre { display: grid; gap: 12px; align-items: start; }
@media (min-width: 1180px) { .atelier-arbre { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
.bloc-matrice, .bloc-arbre, .bloc-comparaison { background: rgba(255, 255, 255, 0.82); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 10px 10px; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }
.bloc-matrice .defilant { border: 0; background: transparent; }
.matrice-arbre { font-size: 0.8rem; }
.matrice-arbre thead th { height: 92px; }
.matrice-arbre td { font-size: 1rem; line-height: 1; padding: 5px 2px; }
.matrice-arbre td.derive { color: #1f2937; background: #f1f5ee; }
.matrice-arbre td.anc { color: #4b5563; }
.matrice-arbre tr.ancestral th, .matrice-arbre tr.ancestral td { font-style: italic; background: var(--surface-2); color: #374151; }
.matrice-arbre th.vu, .matrice-arbre td.vu { outline: 2px solid var(--accent-fonce); outline-offset: -2px; }
.etats-caracteres { font-size: var(--t-xs); }
.etats-caracteres summary { cursor: pointer; font-weight: 700; font-size: var(--t-s); }
.etats-caracteres ul { margin: 6px 0 0; padding-left: 1.1em; display: grid; gap: 2px; }
.bloc-matrice .note-tableau { margin: 0; }
.reserve { display: flex; flex-wrap: wrap; gap: 6px; }
.carte-espece { width: 70px; padding-bottom: 3px; }
.carte-espece .dessin-animal { width: 54px; height: 38px; }
.arbre-construit .texte-base { font: 600 10.5px var(--f-texte); fill: #374151; }
.carte-espece .etat-place { font-size: 0.68rem; color: var(--bon-fonce); font-weight: 700; min-height: 1.1em; }
.carte-espece.placee { border-style: dashed; border-color: #6b7280; }
.carte-espece.placee[aria-pressed="true"] { border-style: solid; }
.compteur-arbre { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: var(--t-s); }
.compteur-arbre .chiffre { font-family: var(--f-mono); font-size: 1.9rem; font-weight: 700; line-height: 1; color: #9a1f12; }
.cadre-arbre { position: relative; min-height: 80px; }
.arbre-construit .base-arbre { fill: #374151; }
.arbre-construit .tronc-vide { stroke-dasharray: 6 5; }
.arbre-construit .marque .gain { fill: #9a1f12; }
.arbre-construit .marque .perte { fill: #ffffff; stroke: #9a1f12; stroke-width: 1.4; }
.arbre-construit .numeros { font: 700 11px var(--f-mono); fill: #9a1f12; paint-order: stroke; stroke: rgba(255, 255, 255, 0.95); stroke-width: 3px; }
.arbre-construit .etat-feuille { font: 700 15px var(--f-texte); fill: #1f2937; }
.arbre-construit.petit .nom-feuille { font-size: 11.5px; }
.cible-branche { position: absolute; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid var(--accent-fonce); background: #ffffff; color: var(--accent-fonce); font: 700 1.15rem/1 var(--f-mono); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(20, 33, 61, 0.25); z-index: 2; }
.cible-branche:hover, .cible-branche.survol { background: var(--accent-fonce); color: #ffffff; }
.cible-branche:focus-visible { outline: 3px solid #111827; outline-offset: 2px; }
.groupes-arbre { margin: 0; font-size: var(--t-s); }
.liste-changements { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: var(--t-s); }
.liste-changements:empty { display: none; }
.liste-changements .num { display: inline-block; min-width: 2.1em; text-align: center; font-family: var(--f-mono); font-weight: 700; color: #ffffff; background: #9a1f12; border-radius: 6px; padding: 0 4px; margin-right: 4px; }
.liste-changements .num.perte { color: #9a1f12; background: #ffffff; box-shadow: inset 0 0 0 1.5px #9a1f12; }
.bloc-comparaison h2 { font-size: var(--t-m); font-weight: 720; }
.deux-arbres { display: flex; flex-wrap: wrap; gap: 10px; }
.petit-arbre { margin: 0; display: grid; gap: 4px; align-content: start; }
.petit-arbre figcaption { font-size: var(--t-s); font-weight: 700; }
.texte-comparaison { margin: 0; font-size: var(--t-s); }

/* =================================================================
   THÈME 1 : L'ARBRE DES SÉQUENCES
   ================================================================= */
.bloc-seq { background: rgba(255, 255, 255, 0.85); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.bloc-seq h2 { font-size: var(--t-m); font-weight: 720; }
.bloc-seq h2:focus { outline: none; }
.bloc-seq h2:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.note-bloc { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
.bande-positions svg { display: block; width: 100%; height: 16px; border: 1px solid #9aa4b2; border-radius: 4px; background: #ffffff; }
.bande .fenetre { fill: #dbe5fb; stroke: var(--accent-fonce); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.bande .trait-diff { fill: #9a1f12; }
.bloc-seq .defilant { border-radius: 8px; }
/* les tableaux et dessins larges défilent dans leur cadre sans élargir la scène (téléphone) */
.bloc-seq .defilant, .zone-paire, .cadre-dendro, .bloc-matrice .defilant, .cadre-arbre, .deux-arbres { contain: inline-size; }
.alignement { border-collapse: collapse; font-size: var(--t-s); }
.alignement th { text-align: left; font-weight: 600; padding: 2px 10px 2px 6px; white-space: nowrap; }
.alignement td.seq { font-family: var(--f-mono); font-size: 15px; letter-spacing: 0.02em; white-space: nowrap; padding: 2px 6px 2px 0; }
.alignement .aa { display: inline-block; width: 0.66em; text-align: center; }
.alignement .espace-bloc { display: inline-block; width: 0.5em; }
.alignement .trou { color: #4b5563; }
.alignement tr.choisie th { font-weight: 800; }
.alignement tr.choisie td.seq { background: var(--accent-doux); }
.alignement .diff { font-weight: 800; text-decoration: underline 2px; text-underline-offset: 3px; background: #fde7e3; color: #7a1a0f; border-radius: 2px; }
.alignement.paire { background: #ffffff; border: 1px solid var(--ligne); border-radius: 8px; }
.marques-diff td.seq { color: #9a1f12; font-size: 12px; line-height: 1; }
.zone-paire { display: grid; gap: 4px; overflow-x: auto; }
.resume-diff { margin: 0; font-size: var(--t-s); }
.choix-paire, .compte-paire, .groupe-tableau { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.bloc-seq button { border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 999px; padding: 5px 13px; min-height: 34px; font: inherit; font-size: var(--t-s); cursor: pointer; }
.bloc-seq button:hover { border-color: var(--accent); }
.bloc-seq button.principal { background: var(--accent); border-color: var(--accent); color: #ffffff; font-weight: 700; }
.bloc-seq button[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.champ-compte { width: 4.5em; text-align: center; font-family: var(--f-mono); }
.groupe-tableau[hidden] { display: none; }
.distances { width: auto; font-size: var(--t-s); }
.distances thead th { vertical-align: bottom; height: 100px; padding: 2px; }
.distances thead th span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-weight: 600; font-size: var(--t-xs); }
.distances th[scope="row"] { text-align: left; white-space: normal; max-width: 9.5em; font-weight: 600; font-size: var(--t-xs); line-height: 1.25; }
.distances td { padding: 2px; }
.distances td.vide { border: 0; }
.bloc-seq .case-distance { min-width: 3.1em; min-height: 32px; padding: 3px 5px; border-radius: 6px; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.bloc-seq .case-distance.inconnue { color: #4b5563; border-style: dashed; }
.cadre-dendro { min-height: 60px; }
.dendro .noeud-dendro { fill: #374151; }
.dendro .axe line { stroke: #6b7280; stroke-width: 1; }
.dendro .axe text { font: 10.5px var(--f-mono); fill: #374151; }
.dendro .axe .titre-axe { font: 11px var(--f-texte); fill: #374151; }

/* =================================================================
   THÈME 2 : LE CARYOTYPE
   ================================================================= */
.scene-caryo, .scene-traduire { display: flex; flex-direction: column; gap: 10px; padding: 10px var(--gouttiere) 16px; min-height: 100%; }
.caryo-haut { display: grid; gap: 10px; align-items: start; }
@media (min-width: 900px) { .caryo-haut { grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); } }
.bloc-caryo, .bloc-trad { background: rgba(255, 255, 255, 0.85); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; align-content: start; }
.bloc-caryo h2, .bloc-trad h2 { font-size: var(--t-m); font-weight: 720; }
.bloc-caryo h2:focus { outline: none; }
.bloc-caryo button, .bloc-trad button { border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 999px; padding: 5px 13px; min-height: 34px; font: inherit; font-size: var(--t-s); cursor: pointer; justify-self: start; }
.bloc-caryo button:hover, .bloc-trad button:hover { border-color: var(--accent); }
.bloc-caryo button.principal, .bloc-trad button.principal { background: var(--accent); border-color: var(--accent); color: #ffffff; font-weight: 700; }
.bloc-caryo button[aria-disabled="true"], .bloc-trad button[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.etalement { display: flex; flex-wrap: wrap; gap: 0 2px; justify-content: center; align-items: center; padding: 10px 6px; border-radius: 50% / 22%; background: radial-gradient(closest-side, #fbf6ea, #efe5cf); border: 1px dashed #a08a5c; min-height: 90px; contain: inline-size; }
.bloc-etalement.vide .etalement { border-radius: 12px; min-height: 0; }
.etalement-vide { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.bloc-caryo .chromo { position: relative; padding: 0; border-radius: 8px; border: 1px solid transparent; background: transparent; min-height: 0; justify-self: auto; }
.bloc-caryo .chromo:hover { border-color: var(--accent); background: rgba(255, 255, 255, 0.6); }
.bloc-caryo .chromo[aria-pressed="true"] { border: 2px solid var(--accent-fonce); background: var(--accent-doux); }
.chromo .dessin-chromo { position: absolute; left: 50%; top: 50%; }
.chromo .coche { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-fonce); color: #ffffff; font-size: 11px; font-weight: 700; place-items: center; z-index: 1; }
.chromo[aria-pressed="true"] .coche { display: grid; }
.chromo.souleve { opacity: 0.35; }
@media (pointer: fine) { .bloc-caryo .chromo { cursor: grab; } }
.dessin-chromo { display: block; overflow: visible; }
.contour-chromo { fill: none; stroke: #1f2937; stroke-width: 0.7; stroke-linejoin: round; }
.silhouette-chromo { fill: rgba(255, 255, 255, 0.5); stroke: #6b7280; stroke-width: 0.6; stroke-dasharray: 2 1.6; }
.fantome-chromo { position: fixed; z-index: 50; pointer-events: none; padding: 4px; background: var(--surface); border: 2px solid var(--accent); border-radius: 8px; box-shadow: var(--ombre); }
.loupe { display: flex; justify-content: center; min-height: 120px; }
.loupe.vide { min-height: 40px; }
.loupe-dessin { display: flex; align-items: flex-start; gap: 2px; }
.reperes text { font: 600 11.5px var(--f-texte); fill: #1f2937; }
.reperes .trait-repere { fill: none; stroke: #1f2937; stroke-width: 1.2; }
.texte-loupe { margin: 0; font-size: var(--t-s); }
.tete-grille { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; justify-content: space-between; }
.compteur-caryo { margin: 0; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
.grille-caryo { display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: flex-end; contain: inline-size; }
.bloc-caryo .case-caryo { display: grid; justify-items: center; gap: 2px; padding: 6px 5px 3px; border-radius: 10px; border: 1px solid #9aa4b2; background: rgba(255, 255, 255, 0.75); min-height: 0; justify-self: auto; }
.bloc-caryo .case-caryo:hover, .case-caryo.aimant { border-color: var(--accent-fonce); box-shadow: 0 0 0 2px var(--accent-fonce); }
.bloc-caryo .case-caryo.complete { border-style: solid; border-color: #4b5563; background: #ffffff; }
.case-caryo .chromos { display: flex; gap: 3px; align-items: flex-start; }
.case-caryo .num-case { font: 700 0.78rem var(--f-mono); color: #1f2937; border-top: 2px solid #374151; padding: 0 6px; }
.retour-scene { display: none; }
@media (max-width: 860px) {
  .retour-scene { display: block; margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--ligne); border-left: 5px solid var(--accent); font-size: var(--t-s); }
  .retour-scene[data-ton="bon"] { border-left-color: var(--bon-fonce); }
  .retour-scene[data-ton="refus"] { border-left-color: var(--faux-fonce); background: #fff8f7; }
  .retour-scene:empty { display: none; }
}
.question-sexe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-doux); }
.question-sexe p { margin: 0; font-size: var(--t-s); font-weight: 700; }
.encadre-caryo { border: 1.5px solid #4b5563; border-radius: 10px; padding: 10px 12px; background: #ffffff; display: grid; gap: 6px; font-size: var(--t-s); }
.encadre-caryo h3 { font-size: var(--t-m); }
.encadre-caryo p { margin: 0; }

/* =================================================================
   THÈME 2 : LA MACHINE À TRADUIRE
   ================================================================= */
.ligne-saisie { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.etiquette-adn { font-size: var(--t-s); font-weight: 700; }
.champ-adn { flex: 1 1 18em; min-width: 0; font-family: var(--f-mono); font-size: 16px; letter-spacing: 0.08em; border: 1px solid #6b7280; border-radius: 8px; padding: 6px 10px; background: #ffffff; text-transform: uppercase; }
.lettres { display: flex; flex-wrap: wrap; gap: 6px; }
.bloc-trad .lettre { font-family: var(--f-mono); font-weight: 700; font-size: 1.05rem; min-width: 44px; min-height: 40px; }
.legende-bande { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-xs); color: var(--encre-2); }
.legende-bande .echantillon { display: inline-block; font-family: var(--f-mono); font-size: 0.78rem; padding: 0 4px; border-radius: 4px; margin-right: 2px; }
.commandes-lire { display: flex; flex-wrap: wrap; gap: 6px; }
.bande-traduction { display: flex; flex-wrap: wrap; gap: 8px 3px; contain: inline-size; padding: 4px 0; }
.bande-vide { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.col-codon { display: grid; grid-template-rows: 16px 22px 22px 22px 30px; justify-items: center; align-items: center; padding: 2px 3px; border-radius: 10px; border: 1px solid transparent; font-family: var(--f-mono); font-size: 0.92rem; transition: background 0.2s, border-color 0.2s; }
.col-codon .l-codant, .echantillon.l-codant { color: #111827; background: #ffffff; border: 1px solid #c7ced8; border-radius: 4px; padding: 0 3px; }
.col-codon .l-transcrit, .echantillon.l-transcrit { color: #4b5563; padding: 0 3px; }
.col-codon .l-arn, .echantillon.l-arn { color: #7a3d0a; background: #fdebd3; border-radius: 4px; padding: 0 3px; font-weight: 700; }
.col-codon .l-aa, .echantillon.l-aa { font: 700 0.78rem var(--f-mono); color: #1f2937; border-radius: 999px; padding: 3px 6px; min-width: 2.6em; text-align: center; }
.echantillon.l-aa { background: hsl(216, 72%, 86%); }
.col-codon .l-aa.stop { background: #374151; color: #ffffff; }
.col-codon[data-type="avant"], .col-codon[data-type="apres"] { opacity: 0.75; }
.col-codon[data-type="avant"] .l-arn, .col-codon[data-type="apres"] .l-arn { font-weight: 400; background: #f6efe6; }
.col-codon[data-type="stop"] .l-arn { text-decoration: underline 2px; }
.col-codon.ribosome { background: #efe2c4; border: 2px solid #7a5a1a; }
.tag-ribosome { font: 700 0.62rem var(--f-texte); color: #5c430f; text-transform: uppercase; letter-spacing: 0.04em; }
.col-codon.bout { font-weight: 700; color: #374151; padding: 2px 0; }
.bloc-chaine h3 { font-size: var(--t-s); }
.chaine { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 0; align-items: center; }
.perle { font: 700 0.76rem var(--f-mono); color: #1f2937; border: 1.5px solid #4b5563; border-radius: 999px; padding: 4px 6px; min-width: 2.8em; text-align: center; position: relative; margin-right: 8px; }
.perle + .perle::before { content: ""; position: absolute; right: 100%; top: 50%; width: 9px; border-top: 2px solid #4b5563; }
.chaine-vide { font-size: var(--t-s); color: var(--encre-2); }
.bloc-code .defilant { contain: inline-size; }
.code-genetique { border-collapse: collapse; font-size: 0.74rem; margin: 0 auto; }
.code-genetique th, .code-genetique td { border: 1px solid #c7ced8; padding: 2px 5px; text-align: left; white-space: nowrap; }
.code-genetique thead th { background: var(--surface-2); font-weight: 700; }
.code-genetique th.b1, .code-genetique th.b3 { background: var(--surface-2); text-align: center; font-family: var(--f-mono); font-weight: 700; }
.code-genetique .codon { font-family: var(--f-mono); }
.code-genetique .aa { font-weight: 700; }
.code-genetique td.stop .aa { text-decoration: underline; }
.code-genetique td.depart { box-shadow: inset 0 0 0 1.5px #116b33; }
.code-genetique td.allumee { background: #ffe58a; outline: 3px solid #7a5a1a; outline-offset: -2px; }
.code-genetique td.allumee .codon::before { content: "\25B6\00A0"; }
.schema-gene { display: grid; gap: 4px; contain: inline-size; overflow-x: auto; }
.dessin-gene { display: block; max-width: 100%; height: auto; }
.dessin-gene .exon { fill: #dbe5fb; stroke: #1f3f8f; stroke-width: 1.2; }
.dessin-gene .codant { fill: #2f5fe0; }
.dessin-gene .intron { stroke: #4b5563; stroke-width: 2; stroke-dasharray: 5 3; }
.dessin-gene text { font: 11.5px var(--f-texte); fill: #1f2937; }
.dessin-gene .titre-ligne-gene { font-weight: 700; }
.dessin-gene .nom-partie { font-size: 10.5px; }
.dessin-gene .a-venir { fill: #4b5563; font-style: italic; }
.legende-gene { margin: 0; font-size: var(--t-xs); color: var(--encre-2); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.legende-gene .ech { display: inline-block; width: 18px; height: 10px; border: 1.2px solid #1f3f8f; }
.legende-gene .ech.exon { background: #dbe5fb; } .legende-gene .ech.codant { background: #2f5fe0; } .legende-gene .ech.intron { border: 0; border-top: 2px dashed #4b5563; height: 0; }
.zoom-jonction h3, .resultat-intron h3 { font-size: var(--t-s); }
.seq-zoom { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: var(--t-s); }
.seq-zoom .lib { font-weight: 700; min-width: 10em; }
.seq-zoom .mono, .proteine-lettres { font-family: var(--f-mono); overflow-wrap: anywhere; }
.proteine-lettres { margin: 4px 0; font-size: 0.86rem; letter-spacing: 0.04em; line-height: 1.6; }
.proteine-lettres .different { text-decoration: underline 2px; text-underline-offset: 3px; background: #fde7e3; color: #7a1a0f; font-weight: 700; }

/* ---------- « Une base change » ---------- */
.scene-mutation, .scene-lapin { display: flex; flex-direction: column; gap: 10px; padding: 10px var(--gouttiere) 16px; min-height: 100%; }
.bande-mutation { display: flex; flex-wrap: wrap; gap: 10px 4px; contain: inline-size; padding: 4px 0 8px; }
.col-mut { display: grid; grid-template-rows: 14px 18px 24px 40px 26px; justify-items: center; align-items: center; padding: 2px 3px; border-radius: 10px; border: 1px solid transparent; font-family: var(--f-mono); }
.col-mut .rang-codon { font-size: 0.7rem; color: var(--encre-2); }
.col-mut .codon-avant { font-size: 0.8rem; color: #4b5563; letter-spacing: 0.04em; }
.col-mut .aa-avant, .col-mut .aa-apres { font: 700 0.74rem var(--f-mono); border-radius: 999px; padding: 2px 6px; min-width: 2.6em; text-align: center; color: #1f2937; }
.col-mut .aa-avant { background: #e5e7eb; }
.col-mut .aa-apres { background: #dbe7fb; }
.col-mut .aa-apres.stop { background: #374151; color: #ffffff; }
.col-mut .aa-apres.vide { background: transparent; color: var(--encre-2); }
.col-mut.change { border: 2px solid #7a1a0f; background: #fff4f2; }
.col-mut.change .aa-apres { text-decoration: underline 2px; text-underline-offset: 2px; }
.col-mut .bases { display: flex; gap: 2px; }
.bloc-trad .base { font: 700 1rem var(--f-mono); min-width: 25px; min-height: 34px; padding: 0 3px; border: 1px solid #9aa4b2; border-radius: 6px; background: #ffffff; color: #111827; position: relative; }
.bloc-trad .base.mutee { background: #fde7e3; color: #7a1a0f; border: 2px solid #7a1a0f; text-decoration: underline 2px; text-underline-offset: 3px; }
.bloc-trad .base.ajoutee { background: #fde7e3; color: #7a1a0f; border: 2px dashed #7a1a0f; text-decoration: underline 2px; text-underline-offset: 3px; }
.bloc-trad .base.apres-supp { box-shadow: inset 4px 0 0 #7a1a0f; }
.bloc-trad .base[aria-pressed="true"] { background: #1f2937; color: #ffffff; border-color: #1f2937; }
.bloc-trad .base[aria-pressed="true"]::after { content: "▲"; position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); font-size: 9px; color: #1f2937; }
.actions-base { display: grid; gap: 6px; }
.actions-base .lettres { align-items: center; }
.libelle-action { font-size: var(--t-xs); color: var(--encre-2); min-width: 6.5em; }
.base-choisie { margin: 0; font-size: var(--t-s); font-weight: 600; }
.type-mutation { margin: 0; font-family: var(--f-titre); font-weight: 720; font-size: var(--t-l); padding-left: 10px; border-left: 5px solid var(--accent); }
.type-mutation[data-type="aucune"], .type-mutation[data-type="silencieuse"] { border-left-color: var(--bon-fonce); }
.type-mutation[data-type="non-sens"], .type-mutation[data-type="decalage"], .type-mutation[data-type="perte-depart"] { border-left-color: var(--faux-fonce); }
.explication-mutation { margin: 0; font-size: var(--t-s); }
.chaine-lettres .titre-chaine { margin: 0; font-size: var(--t-xs); color: var(--encre-2); font-weight: 600; }
.deux-hematies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fig-hematies { margin: 0; background: #fff8f6; border: 1px solid var(--ligne); border-radius: 10px; padding: 6px; display: grid; gap: 4px; }
.fig-hematies figcaption { font-size: var(--t-xs); color: var(--encre); font-weight: 600; }
.dessin-hematies { width: 100%; height: auto; display: block; }
.hematie { fill: #c0392b; stroke: #6d1a12; stroke-width: 2; }
.creux { fill: #e9928a; }
.note-hematies { font-size: var(--t-s); color: var(--encre); }
.bloc-replication .prediction { border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 12px 10px; display: grid; gap: 6px; margin: 0; }
.bloc-replication legend { font-size: var(--t-s); font-weight: 600; padding: 0 4px; }
.tubes { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-start; }
.fig-tube { margin: 0; width: 150px; display: grid; justify-items: center; gap: 2px; }
.fig-tube figcaption { font-size: var(--t-xs); text-align: center; color: var(--encre); }
.dessin-tube { width: 140px; height: 170px; }
.bloc-hematies .curseur { justify-self: start; }
.dessin-tube .verre { fill: #f7fbff; stroke: #4b5563; stroke-width: 2; }
.dessin-tube .bande-adn { fill: #1f2937; }
.dessin-tube .repere { stroke: #4b5563; stroke-width: 1.5; }
.dessin-tube .nom-repere { font: 10px var(--f-texte); fill: #374151; }
.dessin-molecules { width: 100%; max-width: 360px; height: auto; display: block; }
.brin-ancien { stroke: #1f2937; stroke-width: 5; }
.brin-nouveau { stroke: #1d4ed8; stroke-width: 3; stroke-dasharray: 6 4; }
.ech-brin { display: inline-block; width: 28px; height: 0; vertical-align: middle; margin: 0 2px 0 8px; }
.ech-brin.ancien { border-top: 5px solid #1f2937; }
.ech-brin.nouveau { border-top: 3px dashed #1d4ed8; }

/* ---------- « Le lapin et le froid » ---------- */
.lapin-haut { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "lapin" "dos" "obs"; gap: 10px; align-items: start; }
.bloc-lapin { grid-area: lapin; } .bloc-dos { grid-area: dos; } .bloc-observer { grid-area: obs; }
@media (min-width: 1100px) { .lapin-haut { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "lapin dos" "obs dos"; } }
.dessin-lapin { width: 100%; height: auto; max-height: 280px; display: block; }
.dessin-lapin .pelage { fill: #ffffff; stroke: #4b5563; stroke-width: 2.5; }
.dessin-lapin .extremite { fill: #1f2328; stroke: #111111; stroke-width: 1.5; }
.dessin-lapin .oeil { fill: #8b1e2b; }
.dessin-lapin .z-noir { fill: #1f2328; }
.dessin-lapin .z-rase { fill: #f4c7bd; }
.dessin-lapin .z-blanc { fill: #ffffff; }
.dessin-lapin .z-glace { stroke: #1d4ed8; stroke-width: 1; }
.dessin-lapin .cadre-zone { fill: none; stroke: #1f2937; stroke-width: 1.5; stroke-dasharray: 5 4; }
.grille-dos { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; max-width: 470px; width: 100%; }
.bloc-trad .case-dos { aspect-ratio: 1; min-height: 34px; min-width: 0; padding: 0; border: 1px solid #6b7280; border-radius: 6px; position: relative; background-color: #ffffff; background-image: repeating-linear-gradient(115deg, transparent 0 5px, rgba(75, 85, 99, 0.28) 5px 6px); justify-self: stretch; }
.bloc-trad .case-dos.noir { background-color: #1f2328; background-image: repeating-linear-gradient(115deg, transparent 0 5px, rgba(255, 255, 255, 0.22) 5px 6px); }
.bloc-trad .case-dos.rase, .ech-dos.rase, .bloc-trad .case-dos.pousse::before { background-color: #f4c7bd; background-image: radial-gradient(#9c4f42 1px, transparent 1.6px); background-size: 7px 7px; }
.bloc-trad .case-dos.glace { box-shadow: inset 0 0 0 3px #1d4ed8; }
.bloc-trad .case-dos .flocon { position: absolute; inset: 0; margin: auto; width: 1.25em; height: 1.25em; display: grid; place-items: center; border-radius: 50%; background: #ffffff; color: #1d4ed8; font-size: 0.85rem; }
.icone { display: inline-block; vertical-align: -0.14em; flex: none; }
.ech-dos.glace { width: 20px; height: 20px; }
.ech-dos.glace .icone { display: block; margin: 4px auto 0; width: 12px; height: 12px; color: #1d4ed8; }
.bloc-trad .case-dos[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 1px; z-index: 1; }
.bloc-trad .case-dos.pousse::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: calc(1 - var(--pousse, 1)); }
.legende-dos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-xs); color: var(--encre-2); }
.ech-dos { display: inline-block; width: 16px; height: 16px; border: 1px solid #6b7280; border-radius: 4px; vertical-align: middle; margin-right: 3px; }
.ech-dos.blanc { background: #ffffff repeating-linear-gradient(115deg, transparent 0 5px, rgba(75, 85, 99, 0.28) 5px 6px); }
.ech-dos.noir { background: #1f2328; }
.ech-dos.glace { background: #ffffff; box-shadow: inset 0 0 0 3px #1d4ed8; }
.observation { display: grid; gap: 6px; }
.observation h3 { font-size: var(--t-m); }
.observation p { margin: 0; font-size: var(--t-s); }
.gene-tyr { font-weight: 600; }
.trois-echelles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.echelle { margin: 0; border: 1px solid var(--ligne); border-radius: 10px; padding: 6px 8px; display: grid; gap: 4px; background: #ffffff; }
.echelle figcaption { font-size: var(--t-xs); }
.echelle figcaption strong { display: block; }
.dessin-echelle { width: 100%; max-width: 140px; height: auto; justify-self: center; }
.dessin-echelle .poil-noir { stroke: #1f2328; stroke-width: 3; fill: none; }
.dessin-echelle .poil-blanc { stroke: #9ca3af; stroke-width: 3; fill: none; }
.dessin-echelle .cellule { fill: #fdf2e9; stroke: #8a4f0b; stroke-width: 1.5; }
.dessin-echelle .noyau { fill: #e5ddf3; stroke: #4b5563; }
.dessin-echelle .melanine { fill: #1f2328; }
.dessin-echelle .enzyme { fill: #dbeafe; stroke: #1d4ed8; stroke-width: 2; }
.dessin-echelle .site { stroke: #1d4ed8; stroke-width: 3; fill: none; }
.dessin-echelle .etat-enzyme { font: 700 11px var(--f-texte); text-anchor: middle; fill: #1f2937; }
.dessin-echelle .croix { stroke: #b42318; stroke-width: 3; }
@media (max-width: 520px) {
  .scene-mutation, .scene-lapin { padding-left: 10px; padding-right: 10px; }
  .bande-mutation { gap: 10px 3px; }
  .col-mut { padding: 2px 1px; }
  .col-mut .bases { gap: 0; }
  .bloc-trad .base { min-width: 24px; padding: 0; font-size: 0.95rem; }
  .grille-dos { gap: 2px; }
}
@media print {
  .actions-base, .bascule-gen, .prediction button, .bloc-dos .commandes-lire { display: none !important; }
  .col-mut, .fig-hematies, .fig-tube, .echelle { break-inside: avoid; }
}

/* ---------- thème 3 : la loterie des gamètes, mitose ou méiose ---------- */
.scene-gametes, .scene-divisions { display: flex; flex-direction: column; gap: 10px; padding: 10px var(--gouttiere) 16px; min-height: 100%; }
.gam-haut { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
@media (min-width: 1100px) { .gam-haut { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.dessin-cellule { width: 100%; height: auto; max-width: 520px; justify-self: center; display: block; }
.dc-cellule { fill: #fffaf0; stroke: #7a6a4f; stroke-width: 1.5; }
.dc-equateur { stroke: #4b5563; stroke-width: 1.2; stroke-dasharray: 5 4; }
.dc-contour { fill: none; stroke: #1f2937; stroke-width: 1; }
.dc-contour-plein { stroke: #1f2937; stroke-width: 1; }
.dc-centromere { fill: none; stroke: #1f2937; stroke-width: 1.4; }
.dc-pont { fill: #1f2937; }
.dc-etiquette { font: 700 14px var(--f-texte); fill: #1f2937; text-anchor: middle; }
.dc-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--t-xs); color: var(--encre); }
.dc-legende li { display: inline-flex; align-items: center; gap: 6px; }
.sortes-gametes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sortes-gametes .sorte { display: grid; justify-items: center; gap: 2px; padding: 4px 2px; border: 1.5px dashed #8b95a5; border-radius: 10px; background: #ffffff; min-height: 96px; align-content: center; }
.sortes-gametes .sorte.obtenue { border: 2px solid var(--bon-fonce); background: #f3fbf5; }
.sortes-gametes .sorte.nouvelle { box-shadow: 0 0 0 3px #b7e4c4; }
.sortes-gametes .mini-gamete { width: 45px; height: 60px; }
.bloc-trad .case { font-size: var(--t-s); }
.sorte-vide { font: 700 1.4rem var(--f-titre); color: #5b6472; min-height: 58px; display: grid; place-items: center; }
.code-gamete { font: 700 0.8rem var(--f-mono); color: var(--encre); }
.sorte.obtenue .code-gamete { color: var(--bon-fonce); }
.bilan-sortes { margin: 0; font-size: var(--t-s); font-weight: 650; }
.sortie-compteur { display: grid; gap: 4px; font-size: var(--t-s); }
.sortie-compteur p { margin: 0; }
.sortie-compteur .formule { font: 700 1.1rem var(--f-mono); overflow-wrap: anywhere; }
.fratrie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 6px; }
.fratrie .enfant { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 6px; align-items: center; padding: 4px 6px; border: 1px solid var(--ligne); border-radius: 10px; background: #ffffff; font-size: var(--t-xs); }
.fratrie .enfant.double { border: 2px dashed var(--faux-fonce); }
.fratrie .enfant.nouvelle { box-shadow: 0 0 0 3px var(--accent-doux); }
.fratrie .mini-enfant { width: 49px; height: 56px; }
.fratrie .code-enfant { white-space: nowrap; font-family: var(--f-mono); font-weight: 700; }
.fratrie .pareil { display: block; color: var(--faux-fonce); font-weight: 700; }
.div-cotes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 720px) { .div-cotes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.bloc-division .nom-etape { margin: 0; font-weight: 700; font-size: var(--t-s); }
.bloc-division .desc-etape { margin: 0; font-size: var(--t-s); min-height: 2.6em; }
.comparer { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 34px; }
.comparer .libelle { font-size: var(--t-s); font-weight: 650; }
.bloc-trad .comparer button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #ffffff; font-weight: 700; }
.bloc-trad .comparer button[aria-pressed="true"]::before { content: "✓ "; }
.courbe-adn { width: 100%; height: auto; display: block; }
.courbe-adn .axe { stroke: #374151; stroke-width: 1.5; }
.courbe-adn .grille { stroke: #d6dbe3; stroke-width: 1; }
.courbe-adn .graduation { font: 12px var(--f-texte); fill: #374151; text-anchor: middle; }
.courbe-adn .graduation.fin { text-anchor: end; }
.courbe-adn .curseur-courbe { stroke: #6b7280; stroke-width: 1.5; stroke-dasharray: 3 3; }
.trait-mitose { fill: none; stroke: #1d4ed8; stroke-width: 2.5; }
.trait-meiose { fill: none; stroke: #a1440c; stroke-width: 2.5; stroke-dasharray: 7 4; }
.point-mitose { fill: #ffffff; stroke: #1d4ed8; stroke-width: 2; }
.point-meiose { fill: #ffffff; stroke: #a1440c; stroke-width: 2; }
.point-mitose.ici { fill: #1d4ed8; }
.point-meiose.ici { fill: #a1440c; }
.legende-courbe { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--t-xs); }
.legende-courbe li { display: inline-flex; align-items: center; gap: 6px; }
.bloc-reperer .liste select { width: 100%; max-width: 100%; }
.bloc-reperer .liste { display: grid; gap: 4px; width: 100%; }
.texte-tache { margin: 0; font-size: var(--t-s); }
@media (max-width: 520px) {
  .scene-gametes, .scene-divisions { padding-left: 10px; padding-right: 10px; }
  .sortes-gametes { gap: 4px; }
  .sortes-gametes .sorte { min-height: 88px; }
}
@media print {
  .bloc-meiose .commandes-lire, .bloc-fratrie .commandes-lire, .bloc-sortes > button, .comparer, .bloc-reperer { display: none !important; }
  .bloc-division, .bloc-courbe, .sortes-gametes .sorte, .fratrie .enfant { break-inside: avoid; }
}

/* ---------- thème 3 : une famille sur trois générations, l'élevage de drosophiles ---------- */
.scene-famille, .scene-drosophiles { display: flex; flex-direction: column; gap: 10px; padding: 10px var(--gouttiere) 16px; min-height: 100%; }
.palette-alleles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bloc-trad .jeton-allele { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; padding: 3px 10px; border-radius: 12px; }
.bloc-trad .jeton-allele[aria-pressed="true"] { background: #1f2937; border-color: #1f2937; color: #ffffff; box-shadow: 0 0 0 3px var(--accent-doux); }
.bloc-trad .jeton-allele[aria-pressed="true"]::after { content: " ✓"; white-space: pre; font-weight: 700; }
.bloc-trad .jeton-allele.gomme { font-weight: 650; }
.pastille-allele { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 800 1rem var(--f-titre); border: 2px solid; line-height: 1; }
.pastille-allele[data-allele="A"] { background: #dbe7ff; border-color: #1d4ed8; color: #12307f; }
.pastille-allele[data-allele="B"] { background: #dcfce7; border-color: #116b33; color: #0b4a23; border-style: double; border-width: 4px; }
.pastille-allele[data-allele="O"] { background: #ffffff; border-color: #4b5563; color: #1f2937; border-style: dashed; }
.fantome-allele { position: fixed; z-index: 50; pointer-events: none; box-shadow: var(--ombre); }
@media (pointer: fine) { .bloc-alleles .jeton-allele[data-allele] { cursor: grab; } }
.arbre-famille { position: relative; display: grid; gap: 22px; padding: 4px 0 6px; }
.liens-famille { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.trait-famille { fill: none; stroke: #4b5563; stroke-width: 2; }
.generation { position: relative; display: flex; justify-content: center; gap: 10px; flex-wrap: nowrap; }
.generation.gen-1, .generation.gen-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.couple { display: flex; justify-content: center; gap: 18px; }
.couple-parents { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; justify-items: center; }
.gen-3 { gap: 18px; }
.personne { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; padding: 5px 6px 4px; min-width: 88px; border: 1.5px solid #8b95a5; border-radius: 12px; background: #ffffff; }
.personne.juste { border: 2px solid var(--bon-fonce); background: #f3fbf5; }
.personne.faux { border: 2px dashed var(--faux-fonce); background: #fff8f7; }
.personne.groupe-ok { border: 2px solid #4b5563; }
.personne .prenom { font-weight: 750; font-size: var(--t-s); line-height: 1.2; }
.personne .groupe-sanguin { font-size: var(--t-xs); color: var(--encre); font-weight: 650; }
.cases-alleles { display: flex; gap: 4px; }
.bloc-trad .case-allele { width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%; border: 1.5px dashed #6b7280; background: #ffffff; display: grid; place-items: center; justify-self: auto; }
.bloc-trad .case-allele.pleine { border: 1.5px solid transparent; background: transparent; }
.bloc-trad .case-allele .vide { color: #4b5563; font-weight: 700; }
.arbre-famille.en-attente .case-allele:not(.pleine) { border-color: var(--accent); border-style: solid; }
.bloc-trad .case-allele:hover, .bloc-trad .case-allele.aimant { box-shadow: 0 0 0 3px var(--accent); }
.statut-personne { font-size: 0.72rem; font-weight: 700; min-height: 1.1em; line-height: 1.1; }
.personne.juste .statut-personne { color: var(--bon-fonce); }
.personne.faux .statut-personne { color: var(--faux-fonce); }
.choix-croisement { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.choix-croisement .liste { flex-wrap: wrap; }
.tableau-croisement { border-collapse: collapse; font-size: var(--t-s); }
.tableau-croisement caption { text-align: left; font-size: var(--t-xs); color: var(--encre-2); padding-bottom: 4px; }
.tableau-croisement th, .tableau-croisement td { border: 1px solid #9aa4b2; padding: 4px 8px; text-align: center; }
.tableau-croisement thead th:first-child { font-size: var(--t-xs); font-weight: 600; max-width: 9em; }
.tableau-croisement td .geno { display: block; font: 700 1rem var(--f-mono); }
.tableau-croisement td .pheno { display: block; font-size: var(--t-xs); }
.bilan-croisement { margin: 0; font-size: var(--t-s); font-weight: 650; }
/* drosophiles */
.ligne-choix { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.ligne-choix .libelle { font-size: var(--t-xs); color: var(--encre-2); font-weight: 650; min-width: 7.5em; }
.bloc-trad .bascule { gap: 4px; }
.bloc-trad .bascule > button { margin-left: 0; }
.couple-mouches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.couple-mouches .fois { font: 700 1.6rem var(--f-titre); color: var(--encre-2); }
.parent-mouche { display: grid; justify-items: center; gap: 2px; padding: 6px 8px; border: 1px solid var(--ligne); border-radius: 12px; background: #ffffff; min-width: 0; flex: 1 1 150px; max-width: 240px; text-align: center; }
.parent-mouche p { margin: 0; font-size: var(--t-xs); }
.parent-mouche .sexe-mouche { font-weight: 750; font-size: var(--t-s); }
.parent-mouche .genotype-mouche, .notation { font-family: var(--f-mono); font-size: 0.78rem; white-space: nowrap; }
.mouche { width: 54px; height: 36px; display: block; }
.mouche.grande { width: 96px; height: 64px; }
.mouche .pattes path { stroke: #4b5563; stroke-width: 1.4; fill: none; }
.mouche .contour-mouche { stroke: #3f3a33; stroke-width: 1; }
.mouche .anneaux { stroke: rgba(0, 0, 0, 0.28); stroke-width: 1; fill: none; }
.mouche .oeil { fill: #b91c1c; }
.mouche .aile { fill: rgba(214, 228, 240, 0.7); stroke: #64748b; stroke-width: 1; }
.chromosomes-mouche { width: 100%; max-width: 190px; height: auto; display: block; }
.chr-mouche { fill: #eef2f7; stroke: #374151; stroke-width: 1.2; }
.locus { stroke: #1f2937; stroke-width: 2; }
.allele-mouche { font: 700 11px var(--f-mono); fill: #1f2937; }
.nom-chr { font: 11px var(--f-texte); fill: #374151; }
.compteur-mouches { margin: 0; font-size: var(--t-s); font-weight: 650; }
.elevage { width: 100%; aspect-ratio: 32 / 15; border: 1px solid var(--ligne); border-radius: 10px; background: #fbf8f1; overflow: hidden; }
.elevage canvas { width: 100%; height: 100%; display: block; }
.classes-mouches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
@media (min-width: 700px) { .classes-mouches { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.classe-mouche { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--ligne); border-radius: 10px; background: #ffffff; }
.classe-mouche.vide { background: #f8fafc; }
.classe-mouche p { margin: 0; font-size: var(--t-xs); }
.classe-mouche .nom-classe { font-weight: 700; font-size: var(--t-s); }
.classe-mouche .effectif { font: 700 0.95rem var(--f-mono); }
.barre-classe { height: 8px; border-radius: 4px; background: #e5e7eb; overflow: hidden; margin: 2px 0 4px; }
.barre-classe span { display: block; height: 100%; background: #4b5563; }
.classer-classe { display: flex; flex-wrap: wrap; gap: 4px; }
.bloc-trad .classer-classe button { min-height: 32px; padding: 3px 10px; font-size: var(--t-xs); }
.bloc-trad .classer-classe button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #ffffff; font-weight: 700; }
.bloc-trad .classer-classe button[aria-pressed="true"]::before { content: "✓ "; }
.zone-test { display: grid; gap: 8px; }
.zone-test[hidden] { display: none; }
.ligne-pourcentage { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: var(--t-s); }
.champ-pct { border: 1px solid #6b7280; border-radius: 8px; padding: 5px 8px; min-height: 34px; width: 6em; font: inherit; }
.bloc-gametes-f1 summary { font-family: var(--f-titre); font-weight: 720; cursor: pointer; }
.contenu-gametes { display: grid; gap: 6px; margin-top: 6px; }
.gametes-f1 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.gametes-f1 li { display: grid; gap: 1px; padding: 5px 8px; border-radius: 10px; border: 2px solid #4b5563; background: #ffffff; font-size: var(--t-xs); }
.gametes-f1 li.recombine { border-style: dashed; }
.gametes-f1 .geno { font: 700 0.9rem var(--f-mono); }
.gametes-f1 .proba { font-weight: 700; }
@media (max-width: 520px) {
  .scene-famille, .scene-drosophiles { padding-left: 10px; padding-right: 10px; }
  .arbre-famille { gap: 18px; }
  .generation.gen-1, .generation.gen-2, .couple-parents { gap: 6px; }
  .couple { gap: 4px; }
  .gen-3 { gap: 8px; }
  .personne { min-width: 0; padding: 4px 3px 3px; border-radius: 10px; }
  .personne .prenom { font-size: 0.8rem; }
  .bloc-trad .case-allele { width: 34px; height: 34px; }
  .cases-alleles { gap: 2px; }
  .pastille-allele { width: 26px; height: 26px; font-size: 0.92rem; }
  .ligne-choix .libelle { min-width: 0; width: 100%; }
}
@media print {
  .palette-alleles, .bloc-arbre-famille .commandes-lire, .ligne-choix, .bloc-croiser .commandes-lire, .classer-classe, .ligne-pourcentage, .zone-test .commandes-lire, .bloc-descendants .case { display: none !important; }
  .personne, .classe-mouche, .parent-mouche, .tableau-croisement, .elevage { break-inside: avoid; }
  .bloc-gametes-f1 > :not(summary) { display: grid; }
}

/* ---------- thème 4 : phalènes, pinsons, antibiotique ---------- */
.scene-phalenes, .scene-pinsons, .scene-antibio { display: flex; flex-direction: column; gap: 10px; padding: 10px var(--gouttiere) 16px; min-height: 100%; }
.cadre-tronc { width: 100%; max-width: 440px; justify-self: center; }
.zone-chasse { width: 100%; aspect-ratio: 1; border-radius: 12px; border: 2px solid #4b5563; background: #8a8a84; overflow: hidden; }
.zone-chasse.duo { aspect-ratio: 10 / 6.4; }
.zone-chasse.en-jeu { touch-action: none; cursor: crosshair; }
.zone-chasse:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.zone-chasse canvas { width: 100%; height: 100%; display: block; }
.cadre-tronc:has(.zone-chasse.duo) { max-width: 760px; }
.compteur-chasse { margin: 0; font: 700 0.95rem var(--f-mono); }
.aide-clavier { max-width: 60em; }
.graphique { width: 100%; height: auto; display: block; }
.graphique .grille { stroke: #e5e7eb; stroke-width: 1; }
.graphique .axe { stroke: #374151; stroke-width: 1.2; }
.graphique .axe-texte { font: 11px var(--f-texte); fill: #374151; }
.graphique .axe-titre { font: 12px var(--f-texte); fill: #1f2937; }
.graphique .serie { fill: none; stroke-width: 2.4; }
.graphique .serie-1 { stroke: #1f2937; }
.graphique .serie-2 { stroke: #b45309; stroke-dasharray: 7 4; }
.graphique .serie-suie { stroke: #6b7280; stroke-dasharray: 2 4; stroke-width: 2; }
.graphique .marque.serie-1 { fill: #1f2937; stroke: #ffffff; stroke-width: 1; }
.graphique .marque.serie-2 { fill: #b45309; stroke: #ffffff; stroke-width: 1; stroke-dasharray: none; }
.graphique .seuil { stroke: #9ca3af; stroke-dasharray: 3 3; }
.graphique .repere { stroke: var(--accent); stroke-width: 2; }
.cle-carre, .cle-rond, .cle-vivants, .cle-morts { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-right: 2px; }
.cle-carre { background: #b45309; }
.cle-rond { background: #1f2937; border-radius: 50%; }
.texte-modele { font-size: var(--t-s); color: var(--encre); }
/* pinsons */
.etapes-pinsons button { justify-self: start; }
.titre-histo { margin: 0; font-weight: 700; font-size: var(--t-s); }
.cadre-histo { width: 100%; max-width: 680px; }
.histo .barre-pop { fill: #64748b; }
.histo .barre-vivants { fill: #1f2937; }
.histo .barre-morts { stroke: #8a6d3b; stroke-width: 0.8; }
.histo .zone-classe { fill: transparent; cursor: pointer; }
.histo .zone-classe.choisie { fill: rgba(47, 95, 224, 0.12); stroke: var(--accent); stroke-width: 1.5; }
.histo .contour-1976 { fill: none; stroke: #b45309; stroke-width: 2; stroke-dasharray: 6 4; }
.histo .ligne-moyenne { stroke: #b91c1c; stroke-width: 2; }
.histo .ligne-moyenne.seconde { stroke: #1d4ed8; stroke-dasharray: 5 3; }
.histo .texte-moyenne { font: 600 11px var(--f-texte); fill: #1f2937; paint-order: stroke; stroke: #ffffff; stroke-width: 3px; }
.cle-vivants { background: #1f2937; }
.cle-morts { background: repeating-linear-gradient(45deg, #f3ead7 0 3px, #8a6d3b 3px 5px); border: 1px solid #8a6d3b; }
.becs-extremes { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--encre-2); }
.becs-extremes .espace { flex: 1; }
.tete-pinson { width: 48px; height: 34px; }
.tete-pinson .plumage { fill: #5b4a3a; }
.tete-pinson .bec { fill: #c8b27a; stroke: #3f3a33; stroke-width: 1; }
.tete-pinson .commissure { stroke: #3f3a33; stroke-width: 1; }
.tete-pinson .oeil-pinson { fill: #111827; }
.lecture-classe { margin: 0; font-size: var(--t-s); font-weight: 650; }
/* antibiotique */
.cadre-boite { width: 100%; max-width: 380px; aspect-ratio: 1; }
.cadre-boite canvas { width: 100%; height: 100%; display: block; }
.legende-boite { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-xs); }
.legende-boite li { display: flex; align-items: center; gap: 5px; }
.reglages-traitement { display: grid; gap: 6px; }
.graphique .periode-traitement { fill: #f3e6f7; }
.graphique .serie-sensibles { stroke: #8a5a00; }
.graphique .serie-resistantes { stroke: #7f1d1d; stroke-dasharray: 7 4; }
.graphique .serie-plasmide { stroke: #1e40af; stroke-dasharray: 2 3; }
.cadre-antibiogramme { width: 100%; max-width: 340px; }
.gelose { width: 100%; height: auto; display: block; }
.gelose .zone-inhibition { fill: #f7f3e6; stroke: #a08a5a; stroke-width: 1; }
.gelose .disque { fill: #ffffff; stroke: #374151; stroke-width: 1.5; cursor: pointer; }
.gelose .lettre-disque { font: 700 11px var(--f-texte); fill: #111827; pointer-events: none; }
.gelose .regle { stroke: #1d4ed8; stroke-width: 2; }
.gelose .mesure-disque { font: 700 11px var(--f-mono); fill: #1e3a8a; paint-order: stroke; stroke: #ffffff; stroke-width: 3px; }
.table-antibiogramme { overflow-x: auto; }
.table-antibiogramme td button { justify-self: auto; }
@media (max-width: 520px) {
  .scene-phalenes, .scene-pinsons, .scene-antibio { padding-left: 10px; padding-right: 10px; }
}
@media print {
  .zone-chasse, .bloc-jeu .commandes-lire, .etapes-pinsons, .ligne-pourcentage, .reglages-traitement, .bloc-boite .commandes-lire, .bloc-antibiogramme .commandes-lire, .aide-clavier { display: none !important; }
  .cadre-histo, .cadre-boite, .graphique, .gelose { break-inside: avoid; }
}

/* ---------- thème 4, seconde moitié : dérive, Hardy-Weinberg, capture-recapture ---------- */
.scene-derive, .scene-hw, .scene-cmr { display: flex; flex-direction: column; gap: 10px; padding: 10px var(--gouttiere) 16px; min-height: 100%; }
.scene-derive .bloc-trad[hidden] { display: none; }
.cadre-bocaux { width: 100%; max-width: 640px; aspect-ratio: 5 / 3.6; }
.cadre-bocaux canvas { width: 100%; height: 100%; display: block; }
.graphique .courbe { fill: none; stroke-width: 1.8; }
.graphique .courbe.epaisse { stroke-width: 3.6; }
.graphique .courbe.pale { opacity: 0.45; }
.graphique .marque-courbe { stroke: #ffffff; stroke-width: 1; }
.graphique .renvoi { stroke: #9ca3af; stroke-width: 0.8; }
.graphique .etiquette-courbe { font: 700 11px var(--f-texte); fill: #111827; }
.graphique .reference { fill: none; stroke: #4b5563; stroke-width: 2; stroke-dasharray: 7 4; }
.cle-bille { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; border: 1px solid #111827; }
.cle-bille.bleue { background: #1d4ed8; }
.cle-bille.orange { background: repeating-linear-gradient(45deg, #c2410c 0 3px, #ffffff 3px 4.5px); }
.plage { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; max-width: 520px; }
.bloc-trad .individu-plage { position: relative; display: grid; place-items: center; padding: 3px; min-height: 44px; border-radius: 10px; justify-self: stretch; }
.bloc-trad .individu-plage[aria-pressed="true"] { background: #1f2937; border-color: #1f2937; box-shadow: 0 0 0 3px var(--accent-doux); }
.bloc-trad .individu-plage[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 1px; right: 4px; color: #ffffff; font-weight: 800; font-size: 0.8rem; }
.individu-plage .num-individu { font-size: 0.68rem; line-height: 1; color: var(--encre-2); }
.individu-plage[aria-pressed="true"] .num-individu { color: #ffffff; }
.individu { width: 26px; height: 26px; display: block; }
.individu .allele-bleu { fill: #1d4ed8; }
.individu .allele-orange { fill: url(#rayures-orange); }
.individu .contour-individu { fill: none; stroke: #111827; stroke-width: 1.2; }
.motifs-caches { position: absolute; width: 0; height: 0; overflow: hidden; }
.table-bocaux { max-width: 640px; }
/* Hardy-Weinberg */
.cadre-population { width: 100%; max-width: 560px; aspect-ratio: 2 / 1; }
.cadre-population canvas { width: 100%; height: 100%; display: block; }
.cadre-barres { width: 100%; max-width: 420px; }
.barres-hw .barre-obs { fill: #1f2937; }
.barres-hw .attendu { stroke: #b45309; stroke-width: 3; stroke-dasharray: 6 3; }
.conditions-hw { border-left: 4px solid var(--accent); padding: 4px 10px; background: var(--surface); border-radius: 0 8px 8px 0; }
.grille-forces { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.force { border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 10px; display: grid; gap: 6px; background: var(--surface); min-width: 0; }
.force .case { font-weight: 700; }
.champ-pct[aria-invalid="true"] { border: 2px solid #b91c1c; }
/* capture-marquage-recapture */
.cadre-mare { width: 100%; max-width: 640px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; border: 2px solid #4b5563; }
.cadre-mare canvas { width: 100%; height: 100%; display: block; }
.hypotheses { display: grid; gap: 4px; border-top: 1px solid var(--ligne); padding-top: 6px; }
.droite-cmr { width: 100%; max-width: 560px; }
.droite .bande-ic { fill: rgba(29, 78, 216, 0.18); stroke: #1d4ed8; stroke-width: 1.5; }
.droite .fleche-estimation { fill: #1f2937; }
.droite .vrai-effectif { fill: #b91c1c; }
.droite .fort { font-weight: 700; fill: #7f1d1d; }
.table-cmr { max-width: 640px; }
@media print {
  .hypotheses, .bloc-campagne .commandes-lire, .ligne-pourcentage, .scene-derive .commandes-lire, .choix-mode-derive, .plage, .grille-forces { display: none !important; }
  .cadre-bocaux, .cadre-mare, .cadre-population, .graphique { break-inside: avoid; }
}
/* ---------- petits écrans ---------- */
@media (max-width: 980px) {
  .raccourcis { grid-template-columns: minmax(0, 1fr); }
  .accueil-tete { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .ecran.activite { overflow: auto; display: block; }
  .scene { overflow: visible; }
  .panneau { border-left: 0; border-top: 1px solid var(--ligne); overflow: visible; }
  .bouton-panneau { display: none; }
  .activite.sans-panneau .panneau { display: flex; }
  .grille-membres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte-membre { min-height: 190px; }
  .zone-membre { min-height: 150px; }
}
@media (max-width: 520px) {
  .app .barre { gap: 4px 8px; padding: 6px 12px; min-height: 0; }
  .app .barre .marque { font-size: 0.95rem; }
  .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 7px; min-height: 32px; font-size: 0.8rem; min-width: 0; }
  .curseur { grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
  .curseur span:first-child { grid-column: 1 / -1; }
  .commandes { padding: 8px 10px 10px; }
  .scene-boites, .scene-membres, .scene-arbre, .scene-sequences, .scene-caryo, .scene-traduire { padding-left: 10px; padding-right: 10px; }
  .carte-animal { width: 70px; font-size: 0.7rem; }
  .carte-animal .dessin-animal { width: 52px; height: 36px; }
  .boite { min-width: 0; padding: 3px 4px 5px; }
  .contenu { gap: 5px; }
  .liste { flex-wrap: wrap; }
  .groupe-boite .liste, .groupe-boite .liste select, .groupe-boite .liste input { width: 100%; }
}
/* téléphone et tablette : listes et champs à 16 px (Safari n'agrandit pas la page au toucher) */
@media (max-width: 860px), (pointer: coarse) {
  .app select, .app input:not([type=range]):not([type=checkbox]):not([type=radio]) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .missions li.vient::before { animation: none; }
  .quiz-progression span, .col-codon { transition: none; }
  .bloc-trad .case-dos.pousse::before { opacity: 0; }
}

/* ---------- impression ---------- */
@media print {
  html, body, .app { height: auto; }
  body { background: #ffffff; }
  .app { display: block; }
  .ecran { position: static; }
  .ecran.activite, .ecran.page-texte, .accueil { display: block; overflow: visible; height: auto; }
  .colonne-scene { display: block; background: none; }
  .scene, .panneau { overflow: visible; }
  .panneau { border: 0; padding-top: 8px; }
  .commandes, .onglets, .bouton-panneau, .barre nav, .choix-niveau, .lien-portail, .toast, .bulle-mot, .abandon, .choix-module, .retirer-boite, .suite { display: none !important; }
  .carte-membre, .missions li, .plus-loin, .programme-niveaux, .carte, .legende-arbre, .case-caryo, .col-codon, .encadre-caryo { break-inside: avoid; }
  .commandes-lire, .lettres, .ligne-saisie, .question-sexe button, .bloc-etalement > button, .bloc-etalement.vide, .bloc-loupe:has(.loupe.vide), .retour-scene { display: none !important; }
  .plus-loin:not([open]) > div { display: block; }
  /* Chromium récent cache le contenu d'un <details> fermé par ::details-content : on l'affiche (js/app.js ouvre aussi
     tous les <details> le temps de l'impression) */
  details::details-content { content-visibility: visible; }
  :focus, :focus-visible { outline: none !important; box-shadow: none !important; }
}