/* À LA DÉCOUVERTE DES CARTES — feuille de style
   Même famille que « À la découverte des marchés » (partie générique reprise de marches/css/style.css) : une barre en
   haut, puis un écran plein cadre. Écran d'activité : la scène à gauche (onglets au-dessus, commandes en dessous), le
   texte à droite. ../commun/scolatools.css, chargé après cette feuille, redéfinit les couleurs communes (fond, encre,
   accent bleu #2f5fe0) et la mise en page du haut de l'accueil.
   Couleurs des cartes : océan bleu clair, terres beige, pays déplacé orangé avec un contour foncé, place d'origine en
   pointillés, cercles de Tissot rouges à contour : jamais la couleur seule (formes, traits, mots). Pas de thème sombre. */
:root {
  --fond: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --encre: #1f2937;
  --encre-2: #4b5563;
  --ligne: #dfe5ee;
  --accent: #2f5fe0;
  --accent-fonce: #2569c2;
  --accent-encre: #ffffff;
  --accent-doux: #eaf0ff;
  --bon: #16a34a;
  --bon-fonce: #11743a;
  --bon-doux: #dcfce7;
  --faux: #dc2626;
  --faux-fonce: #b42318;
  --faux-doux: #fee2e2;
  --ocre: #9a5b0b;
  --bulle-fond: #1b2333;
  --bulle-texte: #ffffff;
  --verre: rgba(255, 255, 255, 0.88);
  --ombre: 0 1px 2px rgba(20, 33, 61, 0.05), 0 8px 24px rgba(20, 33, 61, 0.07);
  --principal: #2f5fe0; --principal-fonce: #2148b8;
  --or-ligne: #e1ad21;

  /* cartes */
  --ocean: #d7eaf8; --terre: #e4dcc3; --frontiere: #8d7f5c; --quadrillage: #a9c3da; --bord-carte: #3f5a78;
  --tissot: #c62828; --tissot-fond: rgba(220, 38, 38, 0.28); --sonde: #6d28d9;
  --piece: #e8892b; --piece-fonce: #8a4508; --piece-choisie: #c2410c;

  /* fonds des scènes, un par thème */
  --scene-globe-1: #f6f9fd; --scene-globe-2: #dfeaf6;
  --scene-relief-1: #f7f9f3; --scene-relief-2: #e1e9d6;
  --scene-langage-1: #fbf8f3; --scene-langage-2: #efe4d2;
  --scene-croquis-1: #fbfaf7; --scene-croquis-2: #ebe6dc;

  /* niveaux (texte foncé sur fond clair : au moins 4,5:1) */
  --niv-3e: #9a3412; --niv-lycee: #0f766e; --niv-1re: #7c2d92; --niv-tle: #1d4ed8;

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

  --t-xs: 0.78rem; --t-s: 0.875rem; --t-m: 1rem; --t-l: 1.2rem; --t-xl: 1.55rem; --t-xxl: clamp(2rem, 4.2vw, 3.1rem);
  --rayon: 10px;
  --gouttiere: 16px;
  --panneau: 390px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: var(--t-m)/1.55 var(--f-texte);
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--f-titre); line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
a { color: var(--accent); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* refuge du focus pendant une animation (js/app.js) : le contour à l'intérieur de la zone, qui peut être rognée */
.scene:focus-visible, .commandes:focus-visible { outline-offset: -3px; border-radius: 0; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
/* commandes et blocs réservés à un niveau (data-niveau-min, voir js/app.js) */
.hors-niveau { display: none !important; }
/* texte lu par les lecteurs d'écran seulement ; ancré en haut à gauche de son bloc, il ne peut pas agrandir la page
   (placé à sa position naturelle, il dépassait du panneau qui défile et faisait défiler toute la page) */
.visuellement-cache { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.code, code { font-family: var(--f-mono); font-size: 0.9em; background: var(--surface-2); padding: 0 5px; border-radius: 4px; }
.chiffre { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
kbd { font-family: var(--f-mono); font-size: 0.85em; border: 1px solid var(--ligne); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--surface); }

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

/* ---------- ambiances des thèmes ---------- */
[data-fond] { --scene-1: var(--scene-globe-1); --scene-2: var(--scene-globe-2); }
[data-fond="relief"] { --scene-1: var(--scene-relief-1); --scene-2: var(--scene-relief-2); }
[data-fond="langage"] { --scene-1: var(--scene-langage-1); --scene-2: var(--scene-langage-2); }
[data-fond="croquis"] { --scene-1: var(--scene-croquis-1); --scene-2: var(--scene-croquis-2); }

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

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

/* ---------- boutons communs ---------- */
.bascule { display: inline-flex; flex-wrap: wrap; gap: 0; }
.bascule > button, .commandes button, .onglets a {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 999px;
  padding: 6px 13px; font-size: var(--t-s); line-height: 1.2; text-decoration: none; min-height: 34px;
}
.bascule > button { border-radius: 0; margin-left: -1px; }
.bascule > button:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
.bascule > button:last-child { border-radius: 0 999px 999px 0; }
.bascule > button:hover, .commandes button:hover, .onglets a:hover { border-color: var(--accent); }
.bascule > [aria-pressed="true"], .commandes button[aria-pressed="true"], .onglets a[aria-current="page"] {
  background: var(--accent); color: var(--accent-encre); border-color: var(--accent); position: relative;
}
.commandes button.principal { background: var(--principal); border-color: var(--principal); color: #ffffff; font-weight: 700; }
.commandes button.principal:hover { background: var(--principal-fonce); border-color: var(--principal-fonce); }
.commandes button:disabled, .bouton:disabled { opacity: 0.45; cursor: default; }
.bouton {
  border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 999px; padding: 6px 14px;
  font-size: var(--t-s); font-weight: 700; text-decoration: none; display: inline-block; min-height: 34px;
}
.bouton:hover, .bouton.plein { background: var(--accent); color: var(--accent-encre); }
/* Boutons pleins : l'accent #2f5fe0 (texte blanc à 5,5:1). ../commun/scolatools.css (chargé après) les peignait en
   #398cef (3,4:1) ; il emploie lui aussi #2f5fe0 depuis le 15 oct. 2026 : cette règle locale est désormais redondante,
   gardée par sécurité (même couleur, et le survol plus foncé de l'appli). */
.app .bouton.plein, .app .bouton.principal { background: var(--accent); color: var(--accent-encre); }
.app .bouton.plein:hover, .app .bouton.principal:hover { background: var(--accent-fonce); }
.petit-bouton {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 8px; padding: 3px 9px;
  font-size: var(--t-xs); line-height: 1.3; min-height: 28px;
}
.petit-bouton:hover { border-color: var(--accent); color: var(--accent-fonce); }

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

/* ---------- accueil ---------- */
.accueil, .page-texte { overflow: auto; }
.accueil-mise { max-width: 1180px; margin: 0 auto; padding: 28px var(--gouttiere) 48px; display: grid; gap: 30px; }
.accueil-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.accueil-intro { display: grid; gap: 12px; max-width: 62ch; }
.surtitre { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-fonce); margin: 0; }
.accueil-intro h1 { font-size: clamp(2.3rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.03em; }
.accueil-intro p { margin: 0; color: var(--encre-2); font-size: var(--t-l); line-height: 1.5; }
.accueil-dessin {
  position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--ligne); box-shadow: var(--ombre); aspect-ratio: 16 / 10;
  background: radial-gradient(110% 90% at 50% 35%, var(--scene-globe-1), var(--scene-globe-2));
}
.accueil-dessin canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.accueil-dessin .legende-dessin {
  position: absolute; z-index: 1; margin: 0; left: 12px; top: 10px; max-width: 34%; font-size: var(--t-xs); line-height: 1.35; color: var(--encre-2); pointer-events: none;
}
.citation {
  margin: 0; padding: 14px 18px; border-left: 4px solid var(--or-ligne); background: var(--surface); border-radius: 0 12px 12px 0; box-shadow: var(--ombre);
  display: grid; gap: 6px; max-width: 90ch;
}
.citation blockquote { margin: 0; font-family: var(--f-titre); font-size: var(--t-l); line-height: 1.4; color: var(--encre); }
.citation figcaption { font-size: var(--t-xs); color: var(--encre-2); }
.section-accueil { display: grid; gap: 14px; }
.titre-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.section-accueil h2 { font-size: var(--t-xl); font-weight: 720; }
.bilan-missions { margin: 0; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
/* quatre thèmes : deux colonnes sur grand écran, une sur téléphone */
.grille-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.carte {
  display: grid; grid-template-rows: auto 1fr; color: var(--encre);
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; overflow: hidden; box-shadow: var(--ombre);
}
.carte-lien { display: block; text-decoration: none; color: inherit; }
.carte-lien:focus-visible { outline-offset: -3px; }
.carte .vignette { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: radial-gradient(110% 90% at 50% 40%, var(--scene-1), var(--scene-2)); }
.carte-texte { padding: 12px 14px 14px; display: grid; gap: 8px; align-content: start; }
.carte h3 { font-size: var(--t-l); font-weight: 720; }
.carte h3 .numero { font-family: var(--f-mono); font-size: var(--t-s); color: var(--encre-2); font-weight: 500; margin-right: 4px; }
.carte p { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.carte .niveaux { display: flex; flex-wrap: wrap; gap: 4px; }
.liste-activites { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-top: 1px solid var(--ligne); padding-top: 8px; }
.liste-activites li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--t-s); }
.liste-activites a { color: var(--accent-fonce); font-weight: 600; text-decoration: none; padding: 3px 0; }
.liste-activites a:hover { text-decoration: underline; }
.liste-activites .etoiles { font-size: var(--t-xs); }
/* étoiles des missions : pleines (★) pour les missions faites, creuses (☆) pour les autres — la forme, pas seulement la
   couleur ; les deux à plus de 4,5:1 sur le blanc (5,54:1 et 5,89:1) */
.etoiles { letter-spacing: 1px; color: #8a6100; white-space: nowrap; }
.etoiles .vide { color: #5b6576; }
.raccourcis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bloc { background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; padding: 18px; display: grid; gap: 8px; align-content: start; color: var(--encre); }
.bloc h2 { font-size: var(--t-l); font-weight: 700; }
.bloc p { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.bloc-lien { text-decoration: none; transition: border-color 0.2s ease; }
.bloc-lien:hover { border-color: var(--accent); }
.voir { font-weight: 700; color: var(--accent); font-size: var(--t-s); }
.credits { font-size: var(--t-xs); color: var(--encre-2); max-width: 90ch; border-top: 1px solid var(--ligne); padding-top: 18px; display: grid; gap: 6px; }
.credits p { margin: 0; }
.pied-panneau { margin: 0; font-size: var(--t-xs); color: var(--encre-2); border-top: 1px solid var(--ligne); padding-top: 12px; }

/* ---------- écran d'activité ---------- */
.activite { display: grid; grid-template-columns: minmax(0, 1fr) var(--panneau); }
.activite.sans-panneau { grid-template-columns: minmax(0, 1fr); }
.activite.sans-panneau .panneau { display: none; }
.colonne-scene { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; background: radial-gradient(115% 90% at 50% 40%, var(--scene-1), var(--scene-2)); }
.tete-scene { display: flex; gap: 8px; align-items: flex-start; padding: 10px var(--gouttiere) 0; }
.onglets { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.onglets a { background: var(--verre); }
.bouton-panneau {
  flex: none; width: 36px; height: 34px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--verre); color: var(--encre-2); font-size: 1.05rem;
}
.bouton-panneau:hover { border-color: var(--accent); color: var(--accent); }
.scene { position: relative; min-height: 0; overflow: hidden; }
.commandes {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px var(--gouttiere) 12px;
  background: var(--verre); border-top: 1px solid var(--ligne); font-size: var(--t-s);
}
.commandes:empty { display: none; }
.commandes .groupe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.commandes .libelle { color: var(--encre-2); font-size: var(--t-xs); }
.curseur { display: grid; grid-template-columns: auto minmax(90px, 160px) auto; gap: 8px; align-items: center; }
.curseur span:first-child { color: var(--encre-2); }
.curseur output { font-family: var(--f-mono); font-variant-numeric: tabular-nums; min-width: 4.5em; }
.curseur input { width: 100%; accent-color: var(--accent); min-height: 24px; margin: 0; } /* cible de 24 px au moins (le curseur seul en fait 16) */
.case { display: inline-flex; gap: 6px; align-items: center; }
.case input { accent-color: var(--accent); width: 18px; height: 18px; }

.panneau {
  position: relative; /* bloc conteneur de ses textes masqués : ils restent dans la zone qui défile */
  background: var(--surface); border-left: 1px solid var(--ligne); overflow: auto; min-width: 0;
  padding: 16px clamp(16px, 2vw, 26px) 32px; display: flex; flex-direction: column; gap: 14px;
}
.choix-module {
  width: 100%; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre);
  font-size: var(--t-s); font-weight: 700; min-height: 36px;
}
.panneau h1 { font-size: var(--t-xl); font-weight: 760; }
.niveaux { margin: -6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.consigne { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
/* activité d'un thème qui commence après le niveau choisi (texte, pas seulement une couleur) */
.avis-niveau { margin: 0; padding: 8px 12px; border-left: 4px solid #b45309; border-radius: 8px; background: #fff7ed; color: #7c2d12; font-size: var(--t-s); }
.avis-niveau[hidden] { display: none; }
/* ce qui dépasse le programme du niveau (prolongement) ou n'y figure pas (illustration) : bord en tirets et mot écrit */
.cadre-programme { margin: 0; padding: 8px 12px; border: 1px dashed #6b7280; border-left: 4px dashed #6b7280; border-radius: 8px; background: #f8f9fb; color: #1f2937; font-size: var(--t-s); line-height: 1.45; }
.cadre-programme[hidden], .programme-niveaux p[hidden] { display: none; }
.cadre-programme .niv { margin-right: 4px; vertical-align: 1px; }
.retenir h2 .niv { font-size: var(--t-xs); vertical-align: 2px; margin-left: 6px; text-transform: none; letter-spacing: normal; font-family: var(--f-texte); }
.info {
  border: 1px solid var(--accent); background: var(--accent-doux); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px;
  font-size: var(--t-s); animation: apparaitre 0.25s ease;
}
.info h2 { font-size: var(--t-l); font-weight: 720; color: var(--accent-fonce); }
.info p { margin: 0; }
@keyframes apparaitre { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.encart:empty { display: none; }
.encart { display: grid; gap: 10px; }
.missions { display: grid; gap: 6px; }
.missions h2, .titre-mono { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); margin: 0; }
.missions ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.missions li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: var(--t-s); align-items: start; }
.missions li::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #b7c2d3; margin-top: 1px; box-sizing: border-box;
}
.missions li.faite { color: var(--encre-2); }
.missions li.faite::before { content: "✓"; border-color: var(--bon); background: var(--bon); color: #ffffff; font-size: 11px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.missions li.vient::before { animation: tampon 0.6s ease; }
@keyframes tampon { 0% { transform: scale(0.3); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.texte { display: grid; gap: 10px; max-width: 68ch; }
.texte p { margin: 0; }
.texte p.niveau { border-left: 3px solid var(--accent); padding-left: 10px; }
.texte p.niveau[data-n="3e"] { border-color: var(--niv-3e); }
.texte p.niveau[data-n="lycee"], .texte p.niveau[data-n="2de"] { border-color: var(--niv-lycee); }
.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 .niv { margin-right: 6px; vertical-align: 1px; }
.texte p.niveau.prolongement { border-left-style: dashed; border-left-color: #6b7280; }
.plus-loin > summary .niv + .niv { margin-left: 4px; }
.texte h3 { font-size: var(--t-m); font-weight: 700; margin-top: 4px; }
.retenir { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; font-size: var(--t-s); }
.retenir:empty, .savais:empty, .plus-loin-boite:empty { display: none; }
.retenir h2, .savais h2 { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); margin-bottom: 6px; }
.retenir ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.savais { border: 1.5px dashed var(--ocre); border-radius: 12px; padding: 12px 14px; font-size: var(--t-s); display: grid; gap: 8px; }
.savais h2 { color: var(--ocre); margin: 0; }
.savais p { margin: 0; }
.savais blockquote { margin: 0; padding-left: 10px; border-left: 3px solid var(--or-ligne); font-style: italic; }
.savais .source { font-size: var(--t-xs); color: var(--encre-2); }
.plus-loin-boite { display: grid; gap: 8px; }
.plus-loin { border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface); }
.plus-loin > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 700; font-size: var(--t-s);
}
.plus-loin > summary::-webkit-details-marker { display: none; }
.plus-loin > summary::before { content: "+"; font-family: var(--f-mono); width: 20px; height: 20px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--accent-doux); color: var(--accent-fonce); }
.plus-loin[open] > summary::before { content: "\2212"; }
.plus-loin > summary .niv { margin-left: auto; }
/* un long titre et deux pastilles (1re-Tle, prolongement) passent à la ligne au lieu d'élargir le panneau sur téléphone */
.plus-loin > summary { flex-wrap: wrap; }
.plus-loin > summary > span:not(.niv) { flex: 1 1 12em; min-width: 0; }
.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; min-height: 24px; display: flex; align-items: center; gap: 4px; }
.programme-niveaux summary::before { content: "▸" / ""; } .programme-niveaux[open] summary::before { content: "▾" / ""; }
.programme-niveaux summary::-webkit-details-marker { display: none; } .programme-niveaux summary { list-style: none; }
.programme-niveaux p { margin: 6px 0 0; }
.suite { border-top: 1px solid var(--ligne); padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.suite:empty { display: none; }
.suite a { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--surface-2); color: var(--encre); text-decoration: none; font-size: var(--t-s); }
.suite a:hover { background: var(--accent-doux); color: var(--accent-fonce); }
.suite a.fort { background: var(--accent); color: var(--accent-encre); font-weight: 700; }

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

.mot {
  border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: help;
  text-decoration: underline dotted var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em;
}
.mot:hover, .mot[aria-expanded="true"] { color: var(--accent-fonce); }
.bulle-mot {
  position: fixed; z-index: 30; max-width: min(320px, calc(100vw - 32px)); background: var(--bulle-fond); color: var(--bulle-texte);
  padding: 9px 12px; border-radius: 10px; font-size: var(--t-s); line-height: 1.4; box-shadow: var(--ombre);
}
.bulle-mot strong { display: block; font-family: var(--f-titre); font-size: var(--t-m); margin-bottom: 2px; }
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40; background: var(--bon-fonce); color: #ffffff;
  padding: 10px 18px; border-radius: 999px; font-weight: 700; box-shadow: var(--ombre); animation: monter 0.35s ease;
  max-width: calc(100vw - 32px); text-align: center;
  width: max-content; /* sans cela, « left: 50% » ne lui laisse que la moitié de l'écran sur téléphone */
  /* message seulement : le doigt et la souris passent au travers (défilement de la figure, boutons des commandes dessous) */
  pointer-events: none;
}
@media (max-width: 600px) {
  /* sur deux lignes ou plus, un rectangle aux coins arrondis plutôt qu'un grand ovale */
  .toast { border-radius: 16px; padding: 10px 14px; }
}
@keyframes monter { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- défis ---------- */
.page-mise { max-width: 980px; margin: 0 auto; padding: 28px var(--gouttiere) 48px; display: grid; gap: 22px; }
.defis { display: grid; gap: 18px; }
.defis h1, .page-mise > h1 { font-size: var(--t-xxl); font-weight: 780; }
.defis > p, .page-mise > p { margin: 0; color: var(--encre-2); max-width: 70ch; }
.defis > .bouton { justify-self: start; }
.grille-defis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.choix-defi {
  display: grid; gap: 4px; text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre);
}
.choix-defi:hover:not(:disabled) { border-color: var(--accent); }
.choix-defi:disabled { cursor: default; background: var(--surface-2); border-style: dashed; border-color: #a3adbd; } /* sans transparence : textes à au moins 4,5:1 */
.choix-defi strong { font-family: var(--f-titre); font-size: var(--t-l); }
.choix-defi span { font-size: var(--t-s); color: var(--encre-2); }
.choix-defi em { font-style: normal; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--accent-fonce); }
.medaille { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 0.72rem; font-weight: 700; font-family: var(--f-mono); color: #ffffff; justify-self: start; }
.medaille.or { background: #9c7a10; } .medaille.argent { background: #687480; } .medaille.bronze { background: #95582b; } .medaille.aucune { background: var(--surface-2); color: var(--encre-2); }
.question { background: var(--surface); border: 1px solid var(--ligne); border-radius: 16px; padding: clamp(16px, 3vw, 28px); display: grid; gap: 14px; box-shadow: var(--ombre); }
.quiz-entete { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; font-size: var(--t-xs); color: var(--encre-2); font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.quiz-entete .auto { color: #8a3f07; background: #fdf0dc; border-radius: 999px; padding: 0 8px; }
.quiz-progression { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.quiz-progression span { display: block; height: 100%; background: var(--accent); transition: width 0.3s; }
.question h2 { font-size: clamp(1.2rem, 2.6vw, 1.55rem); font-weight: 700; line-height: 1.3; }
.quiz-choix { display: grid; gap: 8px; }
.quiz-choix button { text-align: left; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); min-height: 44px; }
.quiz-choix button:hover:not(:disabled) { border-color: var(--accent); }
.quiz-choix button[data-ton="bon"] { background: var(--bon-doux); border-color: var(--bon); color: var(--bon-fonce); font-weight: 700; }
.quiz-choix button[data-ton="faux"] { background: var(--faux-doux); border-color: var(--faux); color: var(--faux-fonce); }
.quiz-choix button:disabled { cursor: default; }
.explication { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-size: var(--t-s); }
.explication strong.bon { color: var(--bon-fonce); } .explication strong.faux { color: var(--faux-fonce); }
.quiz-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.quiz-score { margin: 0; font-family: var(--f-titre); font-size: 3rem; line-height: 1; color: var(--accent); }
.serie { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--piece-fonce); }

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

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



/* =================================================================
   SCÈNES DES CARTES
   ================================================================= */
.scene-carte {
  position: absolute; inset: 0; padding: 10px var(--gouttiere) 12px; display: grid; gap: 8px;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(240px, 1fr) auto; overflow: auto;
}
.bloc-carte { position: relative; min-height: 0; border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--ligne); box-shadow: var(--ombre); }
/* la carte : glisser à l'horizontale fait tourner ou déplacer, le défilement vertical de la page reste au doigt */
.bloc-carte canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.bloc-carte canvas:active { cursor: grabbing; }
.bloc-carte canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 12px; }
.aide-clavier { position: absolute; right: 8px; bottom: 6px; margin: 0; font-size: var(--t-xs); color: var(--encre-2); background: var(--verre); border-radius: 8px; padding: 2px 8px; pointer-events: none; }
.lecture-carte { margin: 0; font-size: var(--t-s); line-height: 1.45; background: var(--verre); border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 12px; min-height: 3.1em; }
.lecture-carte strong { color: var(--encre); }
.tete-carte { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; }
.tete-carte .titre-projection { margin: 0; font-family: var(--f-titre); font-size: var(--t-l); font-weight: 720; }
.tete-carte .propriete { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.legende-carte { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: var(--t-xs); color: var(--encre-2); }
.legende-carte li { display: inline-flex; align-items: center; gap: 6px; }
.legende-carte .ech { display: inline-block; width: 18px; height: 12px; border-radius: 3px; border: 1.5px solid var(--piece-fonce); background: var(--piece); }
.legende-carte .ech.origine { background: transparent; border: 1.5px dashed #1f2937; }
.legende-carte .ech.tissot { border-radius: 50%; border-color: var(--tissot); background: var(--tissot-fond); width: 14px; height: 14px; }
.legende-carte .ech.sonde { border-radius: 50%; border: 2px solid var(--sonde); background: #ffffff; width: 12px; height: 12px; }
/* compteurs de « La vraie taille des pays » */
.compteurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.compteur { background: var(--surface); border: 1px solid var(--ligne); border-radius: 10px; padding: 6px 10px; display: grid; gap: 1px; align-content: start; }
.compteur span { font-size: var(--t-xs); color: var(--encre-2); }
.compteur strong { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 1.05rem; color: var(--encre); }
.compteur.fort { border-color: var(--piece-fonce); box-shadow: inset 4px 0 0 var(--piece); }
/* petite question posée dans la scène (missions) */
.question-scene { border: 1.5px solid var(--accent); background: var(--accent-doux); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.question-scene p { margin: 0; font-size: var(--t-s); }
.question-scene .reponses { display: flex; flex-wrap: wrap; gap: 6px; }
.question-scene .reponses button { border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 999px; padding: 5px 12px; font-size: var(--t-s); min-height: 32px; }
.question-scene .reponses button:hover { border-color: var(--accent); }
.question-scene .reponses button[data-ton="bon"] { background: var(--bon-doux); border-color: var(--bon); color: var(--bon-fonce); font-weight: 700; }
.question-scene .reponses button[data-ton="faux"] { background: var(--faux-doux); border-color: var(--faux); color: var(--faux-fonce); }
.question-scene .retour { font-weight: 600; }
.question-scene button.suivante { justify-self: start; border: 1px solid var(--accent); background: var(--surface); color: var(--accent-fonce); border-radius: 999px; padding: 5px 14px; font-weight: 700; min-height: 32px; }
/* choix du pays : une pastille par pays (le pays choisi est enfoncé : couleur ET relief, aria-pressed) */
.commandes .pieces button { padding: 5px 11px; }
.commandes .bascule.projections > button { padding: 6px 11px; }

/* légende des tracés de « La route la plus courte » : le motif du trait (plein, tirets, pointillés), pas seulement la couleur */
.legende-carte .ech-trait { display: inline-block; width: 26px; height: 0; border-top: 3px solid #1f2937; }
.legende-carte .ech-trait.regle { border-top: 3px dashed #1f2937; }
.legende-carte .ech-trait.ortho { border-top-color: #b4235a; border-top-width: 4px; }
.legende-carte .ech-trait.suez { border-top-color: #1d4ed8; }
.legende-carte .ech-trait.cap { border-top: 3px dashed #9a3412; }
.legende-carte .ech-trait.arctique { border-top: 4px dotted #0f766e; }
/* « Latitude, longitude, GPS » : saisie des coordonnées, trame NMEA */
.form-coordonnees { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-end; }
.form-coordonnees .champ { display: grid; gap: 2px; font-size: var(--t-xs); color: var(--encre-2); }
.form-coordonnees input { width: 9.5em; font: inherit; font-size: var(--t-s); color: var(--encre); background: var(--surface); border: 1px solid #8a94a6; border-radius: 8px; padding: 6px 8px; min-height: 34px; }
.form-coordonnees input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.form-coordonnees input[aria-invalid="true"] { border: 2px solid var(--faux-fonce); }
.aide-saisie { flex-basis: 100%; margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
.aide-saisie.erreur { color: var(--faux-fonce); font-weight: 600; }
.aide-saisie.erreur::before { content: "✗ "; }
.lecture-carte.trame { font-family: var(--f-mono); font-size: var(--t-xs); overflow-wrap: anywhere; }
.scene-coordonnees .compteurs .compteur:last-child strong { font-size: 0.92rem; }

/* ---------- dessin de l'accueil ---------- */
.dessin-accueil { display: block; width: 100%; height: auto; }
.acc-ocean { fill: #d7eaf8; stroke: #3f5a78; stroke-width: 2; }
.acc-grille { fill: none; stroke: #8fb0cf; stroke-width: 1.2; }
.acc-terre { fill: #e4dcc3; stroke: #8d7f5c; stroke-width: 1.2; }
.acc-tissot { fill: rgba(220, 38, 38, 0.28); stroke: #c62828; stroke-width: 2; }
.acc-fleche { fill: none; stroke: #1f2937; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.acc-texte { font-family: var(--f-mono); font-size: 18px; font-weight: 600; fill: #1f2937; } /* 12 px rendus au moins sur téléphone, 10 px sur tablette (vérification finale) */
/* l'illustration est à hauteur du titre (commun/scolatools.css) ; la légende passe sous le dessin au lieu de le recouvrir */
.accueil-dessin { aspect-ratio: auto; display: grid; gap: 4px; padding: 10px 10px 10px; background: var(--surface); }
.accueil-dessin .legende-dessin { position: static; max-width: none; padding: 0 4px; }


/* =================================================================
   THÈME 2 : « DU MONDE À LA RUE », « UNE DONNÉE, CINQ MAILLES », « L'EMBOÎTEMENT DES ÉCHELLES »
   ================================================================= */
/* listes des repères de la règle */
.choix-repere { display: inline-flex; align-items: center; gap: 6px; }
.choix-repere span { color: var(--encre-2); font-size: var(--t-xs); }
.commandes select, .calibrage select {
  font-size: var(--t-s); color: var(--encre); background: var(--surface); border: 1px solid #8a94a6; border-radius: 8px;
  padding: 5px 8px; min-height: 34px; max-width: 13em;
}
.commandes select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
/* calibrage de l'écran : un rectangle à la taille d'une carte ID-1 */
.calibrage { border: 1.5px solid var(--accent); background: var(--accent-doux); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.calibrage p { margin: 0; font-size: var(--t-s); }
.zone-carte-id1 { overflow: hidden; padding: 4px 0; }
.carte-id1 { border: 2px solid #1f2937; border-radius: 3.18mm; background: repeating-linear-gradient(135deg, #ffffff 0 8px, #e6ecf5 8px 16px); box-sizing: border-box; }
.calibrage .groupe { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.calibrage button, .scene-emboitement button.poser {
  border: 1px solid #8a94a6; background: var(--surface); color: var(--encre); border-radius: 999px; padding: 5px 12px;
  font-size: var(--t-s); line-height: 1.2; min-height: 32px;
}
.calibrage button:hover, .scene-emboitement button.poser:hover { border-color: var(--accent); }
.calibrage button.principal { background: var(--principal); border-color: var(--principal); color: #ffffff; font-weight: 700; }
/* cinq mailles : légende ordonnée (valeurs écrites, la classe lue au viseur est marquée) */
.attente-donnees { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.legende-densite { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; font-size: var(--t-xs); color: var(--encre); }
.legende-densite li { display: inline-flex; align-items: center; gap: 5px; padding: 1px 6px 1px 2px; border-radius: 6px; border: 1.5px solid transparent; }
.legende-densite li.lue { border-color: #0047b3; font-weight: 700; background: var(--surface); }
.legende-densite li.lue::after { content: "◀ viseur"; font-weight: 600; color: #0047b3; }
.legende-densite .ech { display: inline-block; width: 22px; height: 14px; border: 1px solid #6b7280; border-radius: 3px; }
.scene-mailles { grid-template-rows: auto minmax(240px, 1fr) auto auto auto; }
/* « Du monde à la rue » : le panneau de calibrage a sa propre rangée (vide quand il est caché), la carte garde la sienne */
.scene-rue { grid-template-rows: auto auto minmax(240px, 1fr) auto; }
.scene-rue > .tete-carte { grid-row: 1; } .scene-rue > .calibrage { grid-row: 2; } .scene-rue > .bloc-carte { grid-row: 3; } .scene-rue > .pied-carte { grid-row: 4; }
.source-carte { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
/* l'emboîtement : cinq cercles emboîtés (le nom écrit dans chacun, pas seulement la teinte) */
.scene-emboitement { grid-template-rows: none; align-content: start; }
.cercles { display: block; }
.cercle { border: 2px solid #6b7280; border-radius: 22px; padding: 6px 8px 8px; display: grid; gap: 6px; }
.cercle .cercle { margin-top: 2px; }
.cercle[data-echelle="mondial"] { background: #eef4fb; }
.cercle[data-echelle="europeen"] { background: #e6eef8; border-color: #5b6b80; }
.cercle[data-echelle="national"] { background: #f1f5ec; border-color: #556b47; }
.cercle[data-echelle="regional"] { background: #f8f2e3; border-color: #7a6431; }
.cercle[data-echelle="local"] { background: #fbefe8; border-color: #8c4a2f; }
.cercle.survol { outline: 3px dashed var(--accent); outline-offset: 2px; }
.cercle.cible > .cercle-haut .poser { border-color: var(--accent); color: var(--accent-fonce); font-weight: 700; }
.cercle-haut { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cercle-nom { font-family: var(--f-titre); font-weight: 720; font-size: var(--t-s); color: var(--encre); }
.cercle-haut .poser { order: 2; font-size: var(--t-xs); padding: 3px 10px; min-height: 28px; }
.cercle-liste, .bac-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cercle-liste:empty { display: none; }
.etiquette {
  text-align: left; border: 1.5px solid #8a94a6; background: var(--surface); color: var(--encre); border-radius: 10px;
  padding: 5px 10px; font-size: var(--t-xs); line-height: 1.35; min-height: 32px; max-width: 30em; cursor: pointer;
}
.etiquette .type { font-weight: 700; color: var(--encre-2); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.68rem; margin-right: 2px; }
.etiquette[data-type="effet"] { border-style: dashed; }
.etiquette:hover { border-color: var(--accent); }
.etiquette[aria-pressed="true"] { border: 3px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.etiquette.juste { border-color: var(--bon-fonce); background: var(--bon-doux); }
.etiquette.discutable { border-color: var(--ocre); background: #fff4e0; }
.etiquette .marque, .retour-emboitement .marque { font-weight: 800; margin-right: 4px; }
.etiquette.juste .marque, .retour-emboitement.juste .marque { color: var(--bon-fonce); }
.etiquette.discutable .marque, .retour-emboitement.discutable .marque { color: var(--ocre); }
.retour-emboitement { margin: 0; font-size: var(--t-s); font-weight: 600; background: var(--surface); border: 1.5px solid var(--ligne); border-radius: 10px; padding: 8px 12px; }
.retour-emboitement.juste { border-color: var(--bon-fonce); }
.retour-emboitement.discutable { border-color: var(--ocre); }
.bac { border: 1.5px dashed #8a94a6; border-radius: 12px; padding: 8px 10px; background: var(--verre); display: grid; gap: 6px; }
.bac-titre { margin: 0; font-size: var(--t-xs); font-weight: 700; color: var(--encre-2); }
.en-glisse, .en-glisse * { cursor: grabbing !important; }

/* =================================================================
   PETITS ÉCRANS, MOUVEMENT RÉDUIT, IMPRESSION
   ================================================================= */
@media (max-width: 860px) {
  .scene-carte { position: relative; inset: auto; overflow: visible; grid-template-rows: auto auto auto; }
  .bloc-carte { height: min(62vh, 440px); min-height: 280px; }
}
@media (max-width: 520px) {
  .scene-carte { padding: 10px 10px 12px; }
  .bloc-carte { height: min(56vh, 380px); }
  .compteurs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .compteurs .compteur:first-child { grid-column: 1 / -1; }
  .cercle { padding: 5px 5px 6px; border-radius: 16px; }
  .app .choix-niveau > button { min-width: 0; padding: 3px 7px; }
  .aide-clavier { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bloc-lien { transition: none; }
}
@media print {
  html, body { height: auto; background: #ffffff; }
  .app { display: block; height: auto; }
  .barre, .tete-scene, .commandes, .bouton-panneau, .toast, .bulle-mot, .choix-module, .suite, .raccourcis, .abandon,
  .quiz-actions, .aide-clavier, .question-scene .reponses { display: none !important; }
  main, .ecran { position: static; overflow: visible; }
  .ecran[hidden] { display: none !important; }
  .activite { display: block; }
  .colonne-scene { background: none; }
  .scene, .scene-carte { position: relative; overflow: visible; }
  .scene-carte .bloc-carte { height: 10cm; box-shadow: none; break-inside: avoid; }
  .calibrage, .cercle-haut .poser { display: none !important; }
  .cercle, .etiquette, .legende-densite .ech { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bloc-carte canvas, .compteur { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .panneau { border: 0; overflow: visible; padding: 0; }
  .carte, .bloc, .question { box-shadow: none; break-inside: avoid; }
  a { color: inherit; }
}

/* =================================================================
   THÈME 2, SECONDE MOITIÉ : « COURBES DE NIVEAU », « LA COUPE TOPOGRAPHIQUE »
   ================================================================= */
.scene-relief { grid-template-rows: auto minmax(340px, 1fr) auto auto auto; }
.scene-coupe { grid-template-rows: auto minmax(270px, 1fr) 180px auto auto; }
.legende-relief { gap: 2px 12px; }
/* légende : le motif ET la couleur (hachures pour l'eau, trait épais pour le rivage et les maîtresses) */
.legende-relief .ech-relief { display: inline-block; width: 26px; height: 12px; border-radius: 2px; }
.legende-relief .ech-relief.eau { background: repeating-linear-gradient(180deg, #144696 0 2px, #9bbfe6 2px 6px); border: 1px solid #0a2f6b; }
.legende-relief .ech-relief.rivage { height: 0; border-top: 4px solid #0a2f6b; border-radius: 0; }
.legende-relief .ech-relief.courbe { height: 0; border-top: 1px solid #7a4a1f; border-radius: 0; }
.legende-relief .ech-relief.maitresse { height: 0; border-top: 3px solid #7a4a1f; border-radius: 0; }
.legende-relief li > span[aria-hidden="true"]:not(.ech-relief) { font-weight: 700; color: #111827; }
/* la coupe : le profil sous la carte */
.profil-coupe { position: relative; min-height: 0; border-radius: 12px; overflow: hidden; background: #ffffff; border: 1px solid var(--ligne); box-shadow: var(--ombre); }
.profil-coupe canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lecture-carte.lecture-exageration { min-height: 0; font-size: var(--t-xs); }
.commandes .choix-repere select { max-width: 15em; }
@media (max-width: 860px) {
  .scene-relief, .scene-coupe { grid-template-rows: none; }
  .profil-coupe { height: 220px; }
}
@media print {
  .scene-carte .profil-coupe { height: 6cm; box-shadow: none; break-inside: avoid; }
  .profil-coupe canvas, .legende-relief .ech-relief { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* =================================================================
   THÈME 3, PREMIÈRE MOITIÉ : « POINT, LIGNE, SURFACE », « LA CARTE QUI MENT », « CERCLES PROPORTIONNELS »
   ================================================================= */
/* point, ligne, surface : la phrase, la carte du territoire imaginaire, la légende construite, le retour (marque ET couleur) */
.scene-figures { grid-template-rows: auto auto minmax(260px, 1fr) auto; }
.phrase-phenomene { margin: 0; font-size: var(--t-s); line-height: 1.45; background: var(--surface); border: 1.5px solid #8a94a6; border-left: 5px solid var(--ocre); border-radius: 10px; padding: 8px 12px; }
.bloc-figures { display: grid; place-items: center; background: #d7eaf8; }
.carte-figures { width: 100%; height: 100%; display: block; }
.carte-figures .nom-ville { font: 600 11px var(--f-texte); fill: #111827; paint-order: stroke; stroke: #ffffff; stroke-width: 3px; stroke-linejoin: round; }
.carte-figures .nom-ville.capitale { font-weight: 800; font-size: 12px; }
.carte-figures .nom-voisin, .carte-figures .nom-mer, .carte-figures .nom-region { font: italic 600 12px var(--f-texte); fill: #4b5563; paint-order: stroke; stroke: #ffffff; stroke-width: 3px; }
.carte-figures .nom-region { font-style: normal; font-weight: 800; fill: #374151; }
.legende-figures { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-xs); color: var(--encre); }
.legende-figures li { display: inline-flex; align-items: center; gap: 6px; }
.legende-figures li.vide { color: var(--encre-2); font-style: italic; }
.legende-figures .ech-figure { flex: none; background: #ffffff; border: 1px solid var(--ligne); border-radius: 4px; }
.retour-figures { margin: 0; font-size: var(--t-s); font-weight: 600; background: var(--surface); border: 1.5px solid var(--ligne); border-radius: 10px; padding: 8px 12px; line-height: 1.45; }
.retour-figures[data-ton="juste"] { border-color: var(--bon-fonce); box-shadow: inset 5px 0 0 var(--bon); }
.retour-figures[data-ton="possible"] { border-color: var(--ocre); box-shadow: inset 5px 0 0 #e1a33a; }
.retour-figures[data-ton="faux"] { border-color: var(--faux-fonce); box-shadow: inset 5px 0 0 var(--faux); }
.retour-figures[data-ton="attente"] { font-weight: 400; color: var(--encre-2); }
/* la carte qui ment et les cercles : la carte à gauche, l'histogramme (ou la légende) à droite */
.scene-ment, .scene-cercles { grid-template-rows: auto minmax(300px, 1fr) auto; }
.ment-corps { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); gap: 10px; min-height: 0; }
.bloc-ment, .bloc-cercles { min-height: 280px; background: #f8fafc; }
.carte-ment, .carte-cercles { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.carte-ment:focus-visible, .carte-cercles:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 12px; }
.carte-ment path[data-code], .carte-cercles circle[data-code] { cursor: pointer; }
.carte-ment .nom-encart { font: 700 30px var(--f-texte); fill: #374151; paint-order: stroke; stroke: #f1f5f9; stroke-width: 7px; stroke-linejoin: round; pointer-events: none; }
.bloc-ment .aide-clavier, .bloc-cercles .aide-clavier { top: 6px; bottom: auto; }
.ment-cote { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; overflow: auto; }
.ment-cote > * { flex: none; }
.histo-titre { margin: 0; font-size: var(--t-xs); font-weight: 700; color: var(--encre-2); }
.histo-ment { width: 100%; height: auto; display: block; background: var(--surface); border: 1px solid var(--ligne); border-radius: 10px; touch-action: pan-y; }
.histo-ment .histo-txt, .legende-cercles .histo-txt { font: 600 10px var(--f-mono); fill: #1f2937; }
.legende-cercles .histo-txt { font-size: 12.3px; } /* légendes à leur taille réelle : 12 px partout (vérification finale) */
.histo-ment .histo-txt.fort { font-weight: 700; }
.histo-ment .poignee { cursor: ew-resize; }
.histo-ment .poignee:focus { outline: none; }
.histo-ment .poignee:focus-visible circle { stroke: var(--accent); stroke-width: 4; fill: var(--accent-doux); }
.legende-ment { display: grid; gap: 3px; }
.legende-densite .ech.absent { background: repeating-linear-gradient(45deg, #ffffff 0 3px, #6b7280 3px 4.5px); }
.choix-legende { display: grid; gap: 6px; }
.choix-legende .choix-repere { justify-content: space-between; }
.choix-legende select { font-size: var(--t-s); color: var(--encre); background: var(--surface); border: 1px solid #8a94a6; border-radius: 8px; padding: 5px 8px; min-height: 34px; max-width: 14em; }
.choix-legende select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.legende-cercles { display: block; max-width: 100%; height: auto; background: var(--surface); border: 1px solid var(--ligne); border-radius: 10px; }
.carte-cercles .nom-ville-carte { font-family: var(--f-texte); font-weight: 600; fill: #111827; paint-order: stroke; stroke: #ffffff; stroke-linejoin: round; }
.carte-cercles .nom-ville-carte.choisie { font-weight: 800; fill: #0047b3; }
@media (max-width: 1100px) {
  .ment-corps { grid-template-columns: minmax(0, 1fr); }
  .scene-ment, .scene-cercles { grid-template-rows: none; }
  .bloc-ment, .bloc-cercles { height: min(60vh, 460px); }
}
@media (max-width: 860px) {
  .scene-figures { grid-template-rows: none; }
  .bloc-figures { height: auto; aspect-ratio: 640 / 420; min-height: 0; }
  .bloc-ment, .bloc-cercles { height: min(56vh, 420px); min-height: 260px; }
}
@media print {
  .scene-carte .bloc-figures { height: auto; aspect-ratio: 640 / 420; }
  .scene-carte .bloc-ment, .scene-carte .bloc-cercles { height: 11cm; }
  .ment-corps { grid-template-columns: minmax(0, 1fr); }
  .choix-legende { display: none !important; }
  .histo-ment { max-width: 12cm; }
  .ment-cote { overflow: visible; }
  .carte-figures, .carte-ment, .carte-cercles, .histo-ment, .legende-cercles, .legende-figures .ech-figure, .legende-densite .ech.absent, .retour-figures { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* =================================================================
   THÈME 3, SECONDE MOITIÉ : « COULEURS ET LISIBILITÉ », « L'ANAMORPHOSE », « LES FLUX »
   ================================================================= */
/* couleurs : la bande de chaque palette dans son bouton, le bilan des vues (marque ET couleur), la légende avec motifs */
.groupe-palettes .bascule > button { display: inline-flex; align-items: center; gap: 6px; }
.bande-palette { display: inline-block; width: 30px; height: 12px; border: 1px solid #6b7280; border-radius: 3px; flex: none; }
.bilan-vues { margin: 0; font-size: var(--t-xs); line-height: 1.6; color: var(--encre); }
.vue-bilan { display: inline-block; white-space: nowrap; margin-right: 6px; }
.vue-bilan[data-etat="ok"] { color: var(--bon-fonce); font-weight: 700; }
.vue-bilan[data-etat="non"] { color: var(--faux-fonce); font-weight: 700; }
.vue-bilan[data-etat="pas"] { color: var(--encre-2); }
.legende-couleurs li { align-items: flex-start; }
.legende-couleurs .ech-svg { flex: none; margin-top: 1px; }
/* anamorphose et flux : le monde en Robinson (rapport 533 × 227) sur toute la largeur, la légende dessous */
.scene-anamorphose, .scene-flux { grid-template-rows: auto auto auto; }
.scene-anamorphose .ment-corps, .scene-flux .ment-corps { display: flex; flex-direction: column; gap: 10px; min-height: auto; }
.scene-anamorphose .bloc-monde, .scene-flux .bloc-monde { flex: none; width: 100%; }
/* hauteur tirée de la largeur par le remplissage (aspect-ratio laissait la grille sous-estimer la rangée) */
.bloc-monde { background: #ffffff; height: 0; min-height: 0; padding-top: min(42.78%, 62vh); }
.scene-anamorphose .ment-cote, .scene-flux .ment-cote { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 6px 16px; overflow: visible; }
.scene-anamorphose .ment-cote .histo-titre, .scene-flux .ment-cote .histo-titre { flex-basis: 100%; }
.scene-flux .ment-cote .retour-figures { flex: 1 1 320px; }
.scene-flux .ment-cote .bilan-vues { flex: 1 1 260px; }
.scene-anamorphose .ment-cote .legende-regions { align-self: center; flex: 1 1 240px; min-width: 0; max-width: 34em; }
.legende-disques, .legende-fleches { max-width: 100%; height: auto; }
.carte-monde .nom-disque { font-family: var(--f-texte); font-weight: 700; fill: #111827; paint-order: stroke; stroke: #ffffff; stroke-linejoin: round; }
.carte-monde .nom-disque.choisi { fill: #0047b3; font-weight: 800; }
.carte-monde .num-partenaire { font-family: var(--f-texte); font-weight: 800; fill: #1e3a8a; }
.carte-monde circle[data-i] { cursor: pointer; }
.legende-regions { gap: 3px 10px; }
.legende-regions .ech { border-radius: 50%; width: 14px; height: 14px; }
.curseur.fige input { opacity: 0.5; pointer-events: none; }
@media (max-width: 1100px) {
  .scene-carte .bloc-monde { height: 0; min-height: 0; padding-top: min(42.78%, 62vh); }
}
@media print {
  .scene-carte .bloc-monde { height: 0; min-height: 0; padding-top: 42.78%; }
  .bande-palette, .legende-couleurs .ech-svg, .legende-regions .ech, .carte-monde { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* =================================================================
   THÈME 4 : L'ATELIER DU CROQUIS (légende, croquis du brevet, croquis du lycée, schéma)
   ================================================================= */
/* la carte garde le rapport de son fond (--rapport, posé par l'éditeur) : sa taille ne dépend pas de la légende dessous */
.scene-croquis { display: flex; flex-direction: column; }
.scene-croquis > * { flex: none; }
.scene-croquis .bloc-croquis { width: min(100%, calc(64vh * var(--rapport, 1))); align-self: center; height: auto; min-height: 0; aspect-ratio: var(--rapport, 1); background: #d9ecf8; }
/* l'aide du clavier ne s'affiche que quand la carte a le focus au clavier, en haut à gauche : toujours visible en bas à
   droite, elle cachait la Corse (France), Malte (Union européenne) et un port (finition du thème 4) */
.scene-croquis .bloc-croquis .aide-clavier { top: 6px; left: 8px; right: auto; bottom: auto; visibility: hidden; }
.scene-croquis .bloc-croquis:has(.carte-croquis:focus-visible) .aide-clavier { visibility: visible; }
.carte-croquis { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: crosshair; }
.carte-croquis:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 12px; }
.carte-croquis:not(:focus-visible) .viseur { opacity: 0.75; }
.titre-croquis { overflow-wrap: anywhere; }
.pied-croquis { display: flex; flex-direction: column; gap: 8px; }
.pied-croquis > * { flex: none; }
.legende-croquis, .bilan-croquis { background: var(--surface); border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 12px; display: grid; gap: 8px; }
.legende-croquis h3, .bilan-croquis h3 { margin: 0; font-size: var(--t-s); }
.partie-legende { display: grid; gap: 4px; border-top: 1px solid var(--ligne); padding-top: 6px; }
.tete-partie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.titre-partie { margin: 0; font-size: var(--t-s); font-weight: 750; }
.champ-partie { flex: 1 1 14em; min-width: 0; }
.champ-figure { flex: 1 1 11em; min-width: 0; }
.champ-partie input, .champ-figure input, .champ-croquis input {
  font-size: 16px; padding: 4px 8px; border: 1px solid #6b7280; border-radius: 8px; min-height: 32px; background: var(--surface); color: var(--encre); width: 100%;
}
.champ-partie input { font-weight: 700; }
.champ-partie input:focus-visible, .champ-figure input:focus-visible, .champ-croquis input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.champ-croquis { display: inline-flex; flex-direction: column; gap: 2px; min-width: min(17em, 100%); }
.entrees-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.entrees-legende li.vide, .legende-croquis p.vide { color: var(--encre-2); font-style: italic; font-size: var(--t-xs); margin: 0; }
.entree-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.entree-legende .libelle-figure { font-size: var(--t-s); flex: 1 1 12em; min-width: 0; }
.choisir-figure { padding: 2px; border: 2px solid #9ca3af; border-radius: 8px; background: #ffffff; line-height: 0; min-width: 40px; min-height: 28px; cursor: pointer; }
.choisir-figure:hover { border-color: var(--accent); }
.choisir-figure[aria-pressed="true"] { border: 3px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.choisir-figure:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.entree-legende.choisie .libelle-figure { font-weight: 700; }
.compte-figure { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); min-width: 2.6em; }
.actions-figure { display: inline-flex; gap: 4px; }
.legende-croquis button.petit, .tete-partie button {
  min-width: 30px; min-height: 30px; padding: 2px 8px; border-radius: 8px; border: 1px solid #6b7280; background: var(--surface); color: var(--encre); font-size: var(--t-xs); cursor: pointer;
}
.legende-croquis button.petit:hover, .tete-partie button:hover { border-color: var(--accent); color: var(--accent); }
.legende-croquis button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.liste-bilan { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-s); }
.liste-bilan li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; border-left: 5px solid #9ca3af; padding: 2px 8px; }
.liste-bilan li[data-ton="bon"] { border-left-color: var(--bon); }
.liste-bilan li[data-ton="partiel"] { border-left-color: #e1a33a; }
.liste-bilan li[data-ton="revoir"] { border-left-color: var(--faux); }
.liste-bilan li[data-ton="bon"] .marque { color: var(--bon-fonce); font-weight: 800; }
.liste-bilan li[data-ton="partiel"] .marque { color: var(--ocre); font-weight: 800; }
.liste-bilan li[data-ton="revoir"] .marque { color: var(--faux-fonce); font-weight: 800; }
.liste-bilan li[data-ton="absent"] .marque { color: var(--encre-2); font-weight: 700; }
.liste-bilan .ech-figure { flex: none; background: #ffffff; border: 1px solid var(--ligne); border-radius: 4px; }
.bilan-croquis .avertissement { margin: 0; font-size: var(--t-xs); font-style: italic; color: var(--encre-2); }
.fin-croquis { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; background: var(--surface); border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 12px; font-size: var(--t-s); }
.fin-croquis .champ-titre { flex: 1 1 18em; }
.fin-croquis .libelle { color: var(--encre-2); font-size: var(--t-xs); }
.groupe-export { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-end; flex: 2 1 22em; }
.groupe-export .case { font-size: var(--t-xs); min-height: 32px; }
.groupe-export > button { padding: 6px 12px; border-radius: 8px; border: 1px solid #6b7280; background: var(--surface); color: var(--encre); font-weight: 700; min-height: 34px; cursor: pointer; }
.groupe-export > button:hover { border-color: var(--accent); color: var(--accent); }
.groupe-export > button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.groupe-export > button:disabled { opacity: 0.45; cursor: default; }
/* « Le croquis du lycée » : le sujet, les couches de données, le corrigé commenté */
.sujet-croquis, .couches-croquis { background: var(--surface); border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 12px; display: grid; gap: 6px; font-size: var(--t-s); }
.sujet-croquis h3, .couches-croquis h3, .corrige-croquis h4 { margin: 0; font-size: var(--t-s); }
.sujet-croquis p, .couches-croquis p { margin: 0; }
.programme-sujet, .source-sujet, .aide-couches { color: var(--encre-2); font-size: var(--t-xs); }
.texte-sujet { display: grid; gap: 6px; }
.texte-sujet[open] > summary { margin-bottom: 4px; }
.sujet-croquis summary, .objets-couche summary { cursor: pointer; font-weight: 700; min-height: 24px; }
.sujet-croquis summary:focus-visible, .objets-couche summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.liste-couches { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.couche { border-top: 1px solid var(--ligne); padding-top: 6px; display: grid; gap: 4px; }
.genre-couche { color: var(--encre-2); font-size: var(--t-xs); }
.actions-couche { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.actions-couche button { min-height: 32px; min-width: 32px; padding: 4px 10px; border-radius: 8px; border: 1px solid #6b7280; background: var(--surface); color: var(--encre); font-weight: 700; font-size: var(--t-xs); cursor: pointer; }
.actions-couche button:hover { border-color: var(--accent); color: var(--accent); }
.actions-couche button:focus-visible, .actions-couche select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.actions-couche button:disabled { opacity: 0.45; cursor: default; }
.actions-couche button[aria-pressed="true"] { background: var(--accent-doux); border: 2px solid var(--accent); color: var(--accent-fonce); }
.actions-couche button[aria-pressed="true"]::before { content: "✓ "; }
.actions-couche select { min-height: 32px; font-size: var(--t-xs); border: 1px solid #6b7280; border-radius: 8px; background: var(--surface); color: var(--encre); max-width: 100%; }
.actions-couche .gardee { font-size: var(--t-xs); font-weight: 700; color: var(--bon-fonce); }
.actions-couche .gardee::before { content: "✓ "; }
.objets-couche { font-size: var(--t-xs); color: var(--encre-2); }
.objets-couche ul { margin: 4px 0 0; padding-left: 18px; columns: 2 14em; }
.objets-couche .note-couche { margin: 6px 0 0; font-style: italic; }
.corrige-croquis p { margin: 0; font-size: var(--t-s); }
.legende-corrigee { margin: 0; padding-left: 20px; display: grid; gap: 2px; font-size: var(--t-s); }
.liste-bilan li[data-ton="attente"] .marque { color: var(--encre-2); font-weight: 700; }
@media (max-width: 860px) {
  .scene-croquis .bloc-croquis { width: 100%; height: auto; min-height: 0; }
}
@media print {
  .scene-carte .bloc-croquis { width: 100%; height: auto; aspect-ratio: var(--rapport, 1); max-height: 17cm; }
  .actions-figure, .tete-partie button, .carte-croquis .viseur, .carte-croquis .trace, .actions-couche, .objets-couche, .aide-couches { display: none !important; }
  .texte-sujet > summary { display: none; }
  .carte-croquis, .legende-croquis .ech-figure, .liste-bilan .ech-figure, .choisir-figure { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .champ-partie input, .champ-figure input { border: 0; padding: 0; }
}

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