/* SOL ET SÉISMES — feuille de style
   Mise en page : une barre en haut, puis un écran plein cadre. Écran d'activité : la scène animée à gauche
   (onglets au-dessus, commandes en dessous), le texte à droite. Même famille que « À la découverte des cellules »
   (titres Bricolage Grotesque, texte Atkinson Hyperlegible, étiquettes IBM Plex Mono).
   Couleurs : un vert-de-gris pour l'interface (l'eau, les minéraux), le rouge du magma pour les séismes,
   et les teintes des roches et des sols dans les scènes. */
:root {
  --fond: #f1f4f3;
  --surface: #ffffff;
  --surface-2: #e6ecea;
  --encre: #182123;
  --encre-2: #51605f;
  --ligne: #d1dad8;
  --accent: #0b6767;
  --accent-encre: #ffffff;
  --accent-doux: #d9eeec;
  --magma: #c4371f;
  --magma-doux: #fbe4dc;
  --magma-encre: #ffffff;
  --ocre: #a8670f;
  --bon: #1f7a3d;
  --bon-doux: #dff3e5;
  --faux: #b3261e;
  --faux-doux: #fbe2df;
  --or: #b8860b;
  --bulle-fond: #182123;
  --bulle-texte: #ffffff;
  --verre: rgba(255, 255, 255, 0.84);
  --halo: rgba(255, 255, 255, 0.92);
  --ciel-haut: #b9dcf2;
  --ciel-bas: #eef7fb;
  --nuit: #0f1d2c;
  --carte-mer: #c6dcee; --carte-terre: #efe8d6; --carte-cote: #a99c80; --carte-texte: #1d2b38;
  --scene-sol-1: #f3ebe0; --scene-sol-2: #d9c7ad;
  --scene-terre-1: #f7e8dc; --scene-terre-2: #dcb89f;
  --scene-plaques-1: #e6eff6; --scene-plaques-2: #b9cde0;
  --scene-failles-1: #f3eddd; --scene-failles-2: #d8c9a5;
  --scene-seismes-1: #eceff3; --scene-seismes-2: #c5ccd9;
  --scene-terrain-1: #e9f1e0; --scene-terrain-2: #c1d4ab;
  --scene-proteger-1: #eff1f5; --scene-proteger-2: #cdd4e0;
  --ombre: 0 1px 2px rgba(20, 30, 30, 0.08), 0 8px 24px rgba(20, 30, 30, 0.08);

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

  --t-xs: 0.78rem; --t-s: 0.875rem; --t-m: 1rem; --t-l: 1.2rem; --t-xl: 1.6rem; --t-xxl: clamp(2rem, 4.2vw, 3.1rem);
  --rayon: 10px;
  --gouttiere: 16px;
  --panneau: 390px;
}
/* Pas de thème sombre : le site ScolaTools n'en a pas, et ../commun/scolatools.css (chargé après cette feuille) garde
   le texte et les panneaux en clair. Des couleurs sombres pour les seules scènes donnaient des étiquettes illisibles
   (encre foncée sur halo foncé) quand l'ordinateur de l'élève était réglé en mode sombre. */

* { 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);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--f-titre); line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
a { color: var(--accent); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.code { font-family: var(--f-mono); font-size: 0.92em; background: var(--surface-2); padding: 0 5px; border-radius: 4px; }

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

/* ---------- ambiances ---------- */
[data-fond] { --scene-1: var(--scene-sol-1); --scene-2: var(--scene-sol-2); }
[data-fond="terre"] { --scene-1: var(--scene-terre-1); --scene-2: var(--scene-terre-2); }
[data-fond="plaques"] { --scene-1: var(--scene-plaques-1); --scene-2: var(--scene-plaques-2); }
[data-fond="failles"] { --scene-1: var(--scene-failles-1); --scene-2: var(--scene-failles-2); }
[data-fond="seismes"] { --scene-1: var(--scene-seismes-1); --scene-2: var(--scene-seismes-2); }
[data-fond="terrain"] { --scene-1: var(--scene-terrain-1); --scene-2: var(--scene-terrain-2); }
[data-fond="proteger"] { --scene-1: var(--scene-proteger-1); --scene-2: var(--scene-proteger-2); }

/* ---------- barre ---------- */
.barre {
  display: flex; align-items: center; gap: 10px 24px; flex-wrap: wrap;
  padding: 10px var(--gouttiere);
  background: var(--surface);
  border-bottom: 1px solid var(--ligne);
  position: relative; z-index: 5;
}
.lien-portail {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; margin-right: -12px;
  color: var(--encre-2); text-decoration: none; font-size: var(--t-l); border: 1px solid var(--ligne);
}
.lien-portail:hover { color: var(--accent); border-color: var(--accent); }
.marque { font-family: var(--f-titre); font-weight: 760; font-size: var(--t-l); color: var(--encre); text-decoration: none; letter-spacing: -0.02em; }
.barre nav { display: flex; gap: 4px; flex-wrap: wrap; }
.barre nav a { color: var(--encre-2); text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: var(--t-s); }
.barre nav a:hover { color: var(--encre); background: var(--surface-2); }
.barre nav a[aria-current="page"] { color: var(--accent-encre); background: var(--accent); }
.choix-niveau { margin-left: auto; }

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

/* ---------- boutons communs ---------- */
.bascule { display: inline-flex; flex-wrap: wrap; gap: 0; }
.bascule > button, .outil, .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;
}
.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, .outil:hover, .commandes button:hover, .onglets a:hover { border-color: var(--accent); }
.bascule > [aria-pressed="true"], .commandes button[aria-pressed="true"], .onglets a[aria-current="page"] {
  background: var(--accent); color: var(--accent-encre); border-color: var(--accent); position: relative;
}
.commandes button.principal { background: var(--magma); border-color: var(--magma); color: var(--magma-encre); font-weight: 700; }
.commandes button.principal:hover { filter: brightness(1.08); }
.commandes button:disabled { opacity: 0.45; cursor: default; }
.bouton {
  border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 999px; padding: 6px 14px;
  font-size: var(--t-s); font-weight: 700; text-decoration: none; display: inline-block;
}
.bouton:hover, .bouton.plein { background: var(--accent); color: var(--accent-encre); }

/* ---------- accueil ---------- */
.accueil, .page-texte { overflow: auto; }
.accueil-mise { max-width: 1180px; margin: 0 auto; padding: 28px var(--gouttiere) 48px; display: grid; gap: 30px; }
.accueil-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: center; }
.accueil-intro { display: grid; gap: 12px; max-width: 60ch; }
.surtitre { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--magma); margin: 0; }
.accueil-intro h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); 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-coupe { border-radius: 16px; overflow: hidden; border: 1px solid var(--ligne); box-shadow: var(--ombre); aspect-ratio: 16 / 9; background: var(--surface-2); }
.accueil-coupe svg { display: block; width: 100%; height: 100%; }
.section-accueil { display: grid; gap: 14px; }
.titre-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.section-accueil h2 { font-size: var(--t-xl); font-weight: 720; }
.bilan-missions { margin: 0; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
.grille-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.carte {
  display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: var(--encre);
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; overflow: hidden; box-shadow: var(--ombre);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.carte:hover { transform: translateY(-3px); border-color: var(--accent); }
.carte .vignette { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: radial-gradient(110% 90% at 50% 40%, var(--scene-1), var(--scene-2)); }
.carte-texte { padding: 12px 14px 14px; display: grid; gap: 6px; align-content: start; }
.carte h3 { font-size: var(--t-l); font-weight: 720; }
.carte p { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.carte .pied { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
.etoiles { letter-spacing: 1px; color: var(--or); }
.etoiles .vide { color: var(--ligne); }
.raccourcis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bloc { background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; padding: 18px; display: grid; gap: 8px; align-content: start; color: var(--encre); }
.bloc h2 { font-size: var(--t-l); font-weight: 700; }
.bloc p { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.bloc-lien { text-decoration: none; transition: border-color 0.2s ease; }
.bloc-lien:hover { border-color: var(--accent); }
.voir { font-weight: 700; color: var(--accent); font-size: var(--t-s); }
.credits { font-size: var(--t-xs); color: var(--encre-2); max-width: 90ch; border-top: 1px solid var(--ligne); padding-top: 18px; }
.credits p { margin: 0; }

/* ---------- écran d'activité ---------- */
.activite { display: grid; grid-template-columns: minmax(0, 1fr) var(--panneau); }
.colonne-scene { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; background: radial-gradient(115% 90% at 50% 40%, var(--scene-1), var(--scene-2)); }
.onglets { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px var(--gouttiere) 0; }
.onglets a { background: var(--verre); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.onglets a .lycee-puce { margin-left: 6px; }
.scene { position: relative; min-height: 0; overflow: hidden; }
.scene > svg, .scene > canvas, .scene > .plein { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene svg { touch-action: manipulation; }
.commandes {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px var(--gouttiere) 12px;
  background: var(--verre); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--ligne);
  font-size: var(--t-s);
}
.commandes:empty { display: none; }
.commandes .groupe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.curseur { display: grid; grid-template-columns: auto minmax(90px, 160px) auto; gap: 8px; align-items: center; }
.curseur span:first-child { color: var(--encre-2); }
.curseur output { font-family: var(--f-mono); font-variant-numeric: tabular-nums; min-width: 5.5em; }
.curseur input { width: 100%; accent-color: var(--accent); }
.case { display: inline-flex; gap: 6px; align-items: center; }
.case input { accent-color: var(--accent); }
.lecture { font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--encre-2); }

.panneau {
  background: var(--surface); border-left: 1px solid var(--ligne); overflow: auto; min-width: 0;
  padding: 16px clamp(16px, 2vw, 26px) 32px; display: flex; flex-direction: column; gap: 14px;
}
.choix-module {
  width: 100%; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre);
  font-size: var(--t-s); font-weight: 700;
}
.panneau h1 { font-size: var(--t-xl); font-weight: 760; }
.niveaux { margin: -6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.niveaux span, .lycee-puce {
  font-family: var(--f-mono); font-size: 0.72rem; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--encre-2);
}
.lycee-puce { background: var(--accent-doux); color: var(--accent); }
.consigne { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.info {
  border: 1px solid var(--accent); background: var(--accent-doux); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px;
  font-size: var(--t-s); animation: apparaitre 0.25s ease;
}
.info h2 { font-size: var(--t-l); font-weight: 720; color: var(--accent); }
.info p { margin: 0; }
.info .chiffres { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
@keyframes apparaitre { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.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); }
.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 var(--ligne); margin-top: 1px; box-sizing: border-box;
}
.missions li.faite { color: var(--encre-2); }
.missions li.faite::before { content: "✓"; border-color: var(--bon); background: var(--bon); color: #ffffff; font-size: 11px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.missions li.vient::before { animation: tampon 0.6s ease; }
@keyframes tampon { 0% { transform: scale(0.3); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.texte { display: grid; gap: 10px; max-width: 68ch; }
.texte p { margin: 0; }
.texte p.lycee { border-left: 3px solid var(--accent); padding-left: 10px; }
.texte p.lycee::before { content: "Lycée"; font-family: var(--f-mono); font-size: 0.7rem; color: var(--accent); background: var(--accent-doux); padding: 0 6px; border-radius: 999px; margin-right: 6px; vertical-align: 1px; }
.texte h3 { font-size: var(--t-m); font-weight: 700; margin-top: 4px; }
.retenir { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; font-size: var(--t-s); }
.retenir:empty, .savais:empty { display: none; }
.retenir h2, .savais h2 { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); margin-bottom: 6px; }
.retenir ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.savais { border: 1.5px dashed var(--ocre); border-radius: 12px; padding: 12px 14px; font-size: var(--t-s); }
.savais h2 { color: var(--ocre); }
.savais p { margin: 0; }
.suite { border-top: 1px solid var(--ligne); padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.suite:empty { display: none; }
.suite a { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--surface-2); color: var(--encre); text-decoration: none; font-size: var(--t-s); }
.suite a:hover { background: var(--accent-doux); color: var(--accent); }
.suite a.fort { background: var(--accent); color: var(--accent-encre); font-weight: 700; }

.mot {
  border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: help;
  text-decoration: underline dotted var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em;
}
.mot:hover, .mot[aria-expanded="true"] { color: var(--accent); }
.bulle-mot {
  position: fixed; z-index: 30; max-width: min(320px, calc(100vw - 32px)); background: var(--bulle-fond); color: var(--bulle-texte);
  padding: 9px 12px; border-radius: 10px; font-size: var(--t-s); line-height: 1.4; box-shadow: var(--ombre);
}
.bulle-mot strong { display: block; font-family: var(--f-titre); font-size: var(--t-m); margin-bottom: 2px; }
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40; background: var(--bon); 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;
}
@keyframes monter { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- dessins des scènes (SVG) ---------- */
.scene svg text, .accueil-coupe svg text { font-family: var(--f-texte); }
/* un tracé sans couleur de remplissage reste un simple trait */
.scene svg path:not([fill]), .accueil-coupe svg path:not([fill]) { fill: none; }
.etiq {
  font-size: calc(13px / var(--k, 1)); font-weight: 700; fill: var(--encre);
  paint-order: stroke; stroke: var(--halo); stroke-width: calc(3.5px / var(--k, 1)); stroke-linejoin: round;
}
.etiq.petite { font-size: calc(11.5px / var(--k, 1)); font-weight: 400; }
.etiq.grande { font-size: calc(16px / var(--k, 1)); font-family: var(--f-titre); }
.etiq.mono { font-family: var(--f-mono); font-weight: 500; }
.etiq.claire { fill: #ffffff; stroke: rgba(0, 0, 0, 0.55); }
.trait-etiq { stroke: var(--encre); stroke-width: calc(1.2px / var(--k, 1)); fill: none; }
.cliquable { cursor: pointer; }
.cliquable:hover, .cliquable:focus-visible { filter: brightness(1.12) drop-shadow(0 0 3px rgba(255, 255, 255, 0.8)); outline: none; }
.choisi { filter: drop-shadow(0 0 4px var(--accent)) drop-shadow(0 0 2px var(--accent)); }
.ciel-haut { stop-color: var(--ciel-haut); }
.ciel-bas { stop-color: var(--ciel-bas); }
.encre-svg { fill: var(--encre); }
.encre-trait { stroke: var(--encre); }
.surface-svg { fill: var(--surface); }
.ligne-svg { stroke: var(--ligne); }
.bulle-scene {
  position: absolute; z-index: 4; pointer-events: none; max-width: 260px; background: var(--bulle-fond); color: var(--bulle-texte);
  padding: 6px 10px; border-radius: 8px; font-size: var(--t-s); line-height: 1.35; box-shadow: var(--ombre);
}
.bulle-scene span { display: block; opacity: 0.78; font-size: var(--t-xs); font-family: var(--f-mono); }
.legende-scene {
  position: absolute; z-index: 3; left: 12px; bottom: 12px; display: grid; gap: 3px; padding: 8px 10px; border-radius: 10px;
  background: var(--verre); border: 1px solid var(--ligne); font-size: var(--t-xs); pointer-events: none; max-width: calc(100% - 24px);
}
.legende-scene .l { display: flex; align-items: center; gap: 6px; }
.legende-scene i { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; }
.legende-scene i.trait { height: 3px; border-radius: 2px; width: 16px; }
.secoue { animation: secousse 0.09s linear infinite; }
@keyframes secousse { 0% { transform: translate(0, 0); } 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, -2px); } 100% { transform: translate(1px, 2px); } }

/* sismogrammes et graphiques dessinés sur canvas : couleurs lues dans ces variables */
.scene { --trace: var(--encre); --grille: var(--ligne); }
.scene canvas { touch-action: none; }
.zoom-carte { position: absolute; right: 12px; top: 12px; z-index: 3; display: grid; gap: 4px; }
.zoom-carte button {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--verre); color: var(--encre);
  font-size: 1.1rem; line-height: 1; display: grid; place-items: center;
}
.zoom-carte button:hover { border-color: var(--accent); }
.date-carte {
  position: absolute; left: 12px; top: 12px; z-index: 3; padding: 6px 12px; border-radius: 10px; background: var(--verre);
  border: 1px solid var(--ligne); font-family: var(--f-mono); font-size: var(--t-s); font-variant-numeric: tabular-nums; pointer-events: none;
}

/* ---------- jeu des bons réflexes ---------- */
.jeu-reflexes { overflow: auto; padding: 14px var(--gouttiere) 18px; display: grid; gap: 12px; align-content: start; }
.bilan-reflexes { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.pioche { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.carte-reflexe {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 10px; padding: 8px 11px;
  font-size: var(--t-s); text-align: left; max-width: 260px; box-shadow: var(--ombre); line-height: 1.3;
}
.carte-reflexe:hover { border-color: var(--accent); }
.carte-reflexe.choisie { border-color: var(--accent); background: var(--accent-doux); outline: 3px solid var(--accent); outline-offset: 1px; }
.carte-reflexe.bonne { background: var(--bon-doux); border-color: var(--bon); color: var(--encre); box-shadow: none; max-width: none; width: 100%; cursor: default; }
.carte-reflexe.fausse { background: var(--faux-doux); border-color: var(--faux); animation: refus 0.5s ease; }
@keyframes refus { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.colonnes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.colonne { background: var(--verre); border: 1.5px dashed var(--ligne); border-radius: 12px; padding: 8px; display: grid; gap: 6px; align-content: start; min-height: 120px; }
.colonnes.en-attente .colonne { border-color: var(--accent); cursor: pointer; }
.colonne[data-col="eviter"] { border-color: var(--magma); }
.titre-colonne { border: 0; background: none; font-family: var(--f-titre); font-weight: 720; font-size: var(--t-m); color: var(--encre); text-align: left; padding: 2px 4px; }
.colonne[data-col="eviter"] .titre-colonne { color: var(--magma); }
.contenu-colonne { display: grid; gap: 6px; }
@media (max-width: 640px) { .colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- défis ---------- */
.page-mise { max-width: 980px; margin: 0 auto; padding: 28px var(--gouttiere) 48px; display: grid; gap: 22px; }
.defis { display: grid; gap: 18px; }
.defis h1 { font-size: var(--t-xxl); font-weight: 780; }
.defis > p { margin: 0; color: var(--encre-2); max-width: 64ch; }
.defis > .bouton { justify-self: start; }
.grille-defis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.choix-defi {
  display: grid; gap: 4px; text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre);
}
.choix-defi:hover { border-color: var(--accent); }
.choix-defi strong { font-family: var(--f-titre); font-size: var(--t-l); }
.choix-defi span { font-size: var(--t-s); color: var(--encre-2); }
.choix-defi em { font-style: normal; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--accent); }
.medaille { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 0.78rem; font-weight: 700; font-family: var(--f-mono); color: #ffffff; justify-self: start; }
.medaille.or { background: #c9a227; } .medaille.argent { background: #8f9aa3; } .medaille.bronze { background: #b0703b; } .medaille.aucune { background: var(--surface-2); color: var(--encre-2); }
.question { background: var(--surface); border: 1px solid var(--ligne); border-radius: 16px; padding: clamp(16px, 3vw, 28px); display: grid; gap: 14px; box-shadow: var(--ombre); }
.quiz-entete { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-xs); color: var(--encre-2); font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.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.25rem, 2.6vw, 1.6rem); font-weight: 700; line-height: 1.25; }
.quiz-choix { display: grid; gap: 8px; }
.quiz-choix button { text-align: left; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); }
.quiz-choix button:hover:not(:disabled) { border-color: var(--accent); }
.quiz-choix button[data-ton="bon"] { background: var(--bon-doux); border-color: var(--bon); color: var(--bon); font-weight: 700; }
.quiz-choix button[data-ton="faux"] { background: var(--faux-doux); border-color: var(--faux); color: var(--faux); }
.quiz-choix button:disabled { cursor: default; }
.explication { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-size: var(--t-s); }
.explication strong.bon { color: var(--bon); } .explication strong.faux { color: var(--faux); }
.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(--magma); }

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

/* ---------- petits écrans ---------- */
@media (max-width: 980px) {
  .raccourcis { grid-template-columns: minmax(0, 1fr); }
  .accueil-tete { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .ecran.activite { overflow: auto; display: block; }
  .colonne-scene { grid-template-rows: auto minmax(300px, 58vh) auto; min-height: auto; }
  .panneau { border-left: 0; border-top: 1px solid var(--ligne); overflow: visible; }
  .choix-niveau { margin-left: 0; }
}
@media (max-width: 520px) {
  .barre { gap: 8px 14px; }
  .barre nav a { padding: 5px 9px; }
  .curseur { grid-template-columns: minmax(0, 1fr) auto; }
  .curseur span:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .carte, .carte:hover { transition: none; transform: none; }
  .secoue { animation: none; }
  .info, .toast, .missions li.vient::before, .carte-reflexe.fausse { animation: none; }
}

/* ---------- bibliothèque de dessins (js/dessins.js) ---------- */
.etiq-fond { fill: var(--verre); stroke: var(--ligne); stroke-width: calc(1px / var(--k, 1)); }
.etiq-fond.sombre { fill: #182123; fill-opacity: 0.8; stroke: none; } /* texte .etiq.claire (toujours blanc) */