/* À LA DÉCOUVERTE DE L'ÂGE DES RÉVOLUTIONS — feuille de style
   Même famille que « À la découverte des figures et des solides » et « genes-evolution » (partie générale reprise de
   figures-solides/css/style.css, adaptée) : 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).
   Couleurs propres : le ciel de la lunette, les états de la foule (chacun a aussi sa forme : jamais la couleur seule).
   Pas de thème sombre, comme le site. */
:root {
  --fond: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --encre: #1f2937;
  --encre-2: #4b5563;
  --ligne: #dfe5ee;
  --accent: #2f5fe0;
  --accent-fonce: #2569c2;
  --accent-encre: #ffffff;
  --accent-doux: #eaf0ff;
  --bon: #16a34a;
  --bon-fonce: #11743a;
  --bon-doux: #dcfce7;
  --faux: #dc2626;
  --faux-fonce: #b42318;
  --faux-doux: #fee2e2;
  --or: #b8860b;
  --ocre: #9a5b0b;
  --bulle-fond: #1b2333;
  --bulle-texte: #ffffff;
  --verre: rgba(255, 255, 255, 0.86);
  --ombre: 0 1px 2px rgba(20, 33, 61, 0.05), 0 8px 24px rgba(20, 33, 61, 0.07);

  /* scènes : ciel de la lunette, foule, courbes */
  --ciel: #0e1a33; --ciel-2: #1d2c52; --jupiter: #f2d9a8; --jupiter-bord: #8a6a32; --etoile: #ffffff; --halo: rgba(255, 236, 190, 0.18);
  --carnet: #fbf7ee; --carnet-ligne: #e6dcc6; --encre-carnet: #3b2f1e;
  --etat-sans: #1f5fbf; --etat-guerie: #1d7a3b; --etat-inocule: #6d28d9; --etat-mort-pv: #b42318; --etat-mort-inoc: #111827; --etat-mort-autre: #6b7280;
  --principal: #2f5fe0; --principal-fonce: #2148b8;
  --or-ligne: #e1ad21;

  /* fonds des scènes, un par thème */
  --scene-lumieres-1: #f7f8fc; --scene-lumieres-2: #e3e8f4;
  --scene-revolution-1: #fbf7f6; --scene-revolution-2: #efe1dc;
  --scene-industrie-1: #f7f7f5; --scene-industrie-2: #e4e3dc;
  --scene-republique-1: #f6f9f7; --scene-republique-2: #dde9e2;

  /* niveaux */
  --niv-4e: #7c2d92; --niv-lycee: #9f1239; --niv-2de: #9f1239; --niv-1re: #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 ---------- */
.carte, .activite { --scene-1: var(--scene-lumieres-1); --scene-2: var(--scene-lumieres-2); }
[data-theme="revolution"] { --scene-1: var(--scene-revolution-1); --scene-2: var(--scene-revolution-2); }
[data-theme="industrie"] { --scene-1: var(--scene-industrie-1); --scene-2: var(--scene-industrie-2); }
[data-theme="republique"] { --scene-1: var(--scene-republique-1); --scene-2: var(--scene-republique-2); }

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

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

/* ---------- boutons communs ---------- */
.bascule { display: inline-flex; flex-wrap: wrap; gap: 0; }
.bascule > button, .commandes button, .onglets a {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 999px;
  padding: 6px 13px; font-size: var(--t-s); line-height: 1.2; text-decoration: none; min-height: 34px;
}
.bascule > button { border-radius: 0; margin-left: -1px; }
.bascule > button:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
.bascule > button:last-child { border-radius: 0 999px 999px 0; }
.bascule > button:hover, .commandes button:hover, .onglets a:hover { border-color: var(--accent); }
.bascule > [aria-pressed="true"], .commandes button[aria-pressed="true"], .onglets a[aria-current="page"] {
  background: var(--accent); color: var(--accent-encre); border-color: var(--accent); position: relative;
}
.commandes button.principal { background: var(--principal); border-color: var(--principal); color: #ffffff; font-weight: 700; }
.commandes button.principal:hover { background: var(--principal-fonce); border-color: var(--principal-fonce); }
.commandes button:disabled, .bouton:disabled { opacity: 0.45; cursor: default; }
.bouton {
  border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 999px; padding: 6px 14px;
  font-size: var(--t-s); font-weight: 700; text-decoration: none; display: inline-block; min-height: 34px;
}
.bouton:hover, .bouton.plein { background: var(--accent); color: var(--accent-encre); }
/* Boutons pleins : l'accent #2f5fe0 (texte blanc à 5,5:1), le bleu de ../commun/scolatools.css depuis le 15 oct. 2026
   (il était #398cef, 3,4:1, et l'appli le corrigeait ici). Pour la couleur de repos, cette règle est donc redondante ;
   elle est gardée parce qu'elle fixe aussi le survol de l'appli (--accent-fonce), sans quoi l'aspect changerait. */
.app .bouton.plein, .app .bouton.principal { background: var(--accent); color: var(--accent-encre); }
.app .bouton.plein:hover, .app .bouton.principal:hover { background: var(--accent-fonce); }
.petit-bouton {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 8px; padding: 3px 9px;
  font-size: var(--t-xs); line-height: 1.3; min-height: 28px;
}
.petit-bouton:hover { border-color: var(--accent); color: var(--accent-fonce); }

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

/* ---------- accueil ---------- */
.accueil, .page-texte { overflow: auto; }
.accueil-mise { max-width: 1180px; margin: 0 auto; padding: 28px var(--gouttiere) 48px; display: grid; gap: 30px; }
.accueil-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.accueil-intro { display: grid; gap: 12px; max-width: 62ch; }
.surtitre { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-fonce); margin: 0; }
.accueil-intro h1 { font-size: clamp(2.3rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.03em; }
.accueil-intro p { margin: 0; color: var(--encre-2); font-size: var(--t-l); line-height: 1.5; }
.accueil-dessin {
  position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--ligne); box-shadow: var(--ombre); aspect-ratio: 16 / 10;
  background: var(--ciel);
}
.accueil-dessin canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.accueil-dessin .legende-dessin {
  position: absolute; z-index: 1; margin: 0; left: 12px; top: 10px; max-width: 34%; font-size: var(--t-xs); line-height: 1.35; color: var(--encre-2); pointer-events: none;
}
.citation {
  margin: 0; padding: 14px 18px; border-left: 4px solid var(--or-ligne); background: var(--surface); border-radius: 0 12px 12px 0; box-shadow: var(--ombre);
  display: grid; gap: 6px; max-width: 90ch;
}
.citation blockquote { margin: 0; font-family: var(--f-titre); font-size: var(--t-l); line-height: 1.4; color: var(--encre); }
.citation figcaption { font-size: var(--t-xs); color: var(--encre-2); }
.section-accueil { display: grid; gap: 14px; }
.titre-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.section-accueil h2 { font-size: var(--t-xl); font-weight: 720; }
.bilan-missions { margin: 0; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
/* quatre thèmes : deux colonnes sur grand écran, une sur téléphone */
.grille-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.carte {
  display: grid; grid-template-rows: auto 1fr; color: var(--encre);
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; overflow: hidden; box-shadow: var(--ombre);
}
.carte-lien { display: block; text-decoration: none; color: inherit; }
.carte-lien:focus-visible { outline-offset: -3px; }
.carte .vignette { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: radial-gradient(110% 90% at 50% 40%, var(--scene-1), var(--scene-2)); }
.carte-texte { padding: 12px 14px 14px; display: grid; gap: 8px; align-content: start; }
.carte h3 { font-size: var(--t-l); font-weight: 720; }
.carte h3 .numero { font-family: var(--f-mono); font-size: var(--t-s); color: var(--encre-2); font-weight: 500; margin-right: 4px; }
.carte p { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.carte .niveaux { display: flex; flex-wrap: wrap; gap: 4px; }
.liste-activites { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-top: 1px solid var(--ligne); padding-top: 8px; }
.liste-activites li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--t-s); }
.liste-activites a { color: var(--accent-fonce); font-weight: 600; text-decoration: none; padding: 3px 0; }
.liste-activites a:hover { text-decoration: underline; }
.liste-activites .etoiles { font-size: var(--t-xs); }
.etoiles { letter-spacing: 1px; color: #7a5f0c; white-space: nowrap; } /* 6:1 sur blanc (comme genes-evolution) */
/* étoiles des missions à faire : un repère graphique, au moins 3:1 sur le blanc (#e3e8f0 ne faisait que 1,23:1) */
.etoiles .vide { color: #5f6b7a; } /* ☆ vides : la forme les distingue, 5,4:1 */
.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 auto minmax(0, 1fr); min-height: 0; min-width: 0; background: radial-gradient(115% 90% at 50% 40%, var(--scene-1), var(--scene-2)); }
.tete-scene { display: flex; gap: 8px; align-items: flex-start; padding: 10px var(--gouttiere) 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); border-bottom: 1px solid var(--ligne); font-size: var(--t-s);
}
.commandes:empty { display: none; }
.commandes .groupe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.commandes .libelle { color: var(--encre-2); font-size: var(--t-xs); }
.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 : WCAG 2.5.8) */
.case { display: inline-flex; gap: 6px; align-items: center; }
.case input { accent-color: var(--accent); width: 18px; height: 18px; }

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

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

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

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

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


/* =================================================================
   PROPRE À L'APPLI
   ================================================================= */
/* siècles : chiffres romains en petites capitales (Outils.siecles) */
.siecle { font-variant: small-caps; letter-spacing: 0.02em; }
sup { font-size: 0.7em; line-height: 0; }

/* dessin de l'accueil : Jupiter et ses petites étoiles */
.accueil-dessin { aspect-ratio: auto; display: grid; align-content: center; padding: 12px; gap: 8px; }
.dessin-jupiter { width: 100%; height: auto; display: block; }
.dessin-jupiter .ciel { fill: var(--ciel); }
.dessin-jupiter .cardinal { fill: #dfe6f5; font-family: var(--f-titre); font-size: 20px; font-style: italic; }
.dessin-jupiter .jupiter-accueil { fill: var(--jupiter); stroke: var(--jupiter-bord); stroke-width: 2; }
.dessin-jupiter .etoile-accueil { stroke: var(--etoile); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.dessin-jupiter .legende-svg { fill: #dfe6f5; font-size: 15px; font-family: var(--f-texte); }
.accueil-dessin .legende-dessin { position: static; max-width: none; color: #e6ebf5; font-size: var(--t-xs); padding: 0 6px; }

/* ---------- scènes communes ---------- */
.scene-activite {
  position: absolute; inset: 0; overflow: auto; padding: 12px var(--gouttiere) 16px; display: grid; gap: 12px; align-content: start;
  grid-template-columns: minmax(0, 1fr); scroll-padding-top: 12px;
}
.cadre {
  background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(31, 41, 55, 0.12); border-radius: 14px; box-shadow: var(--ombre);
  padding: 12px 14px; display: grid; gap: 8px; min-width: 0;
}
.cadre > h2, .cadre-titre { 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; }
.ligne-titre { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; }
.etat { margin: 0; font-size: var(--t-s); }
.etat strong { color: var(--encre); }
.note-modele { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
.boutons { display: flex; flex-wrap: wrap; gap: 6px; }
.scene-activite button.choix, .boutons button {
  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; min-height: 34px;
}
.scene-activite button.choix:hover, .boutons button:hover { border-color: var(--accent); }
.scene-activite button[aria-pressed="true"], .boutons button[aria-pressed="true"] { background: var(--accent); color: var(--accent-encre); border-color: var(--accent); }
.scene-activite button[aria-disabled="true"], .commandes button[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.retour { margin: 0; padding: 8px 12px; border-radius: 10px; font-size: var(--t-s); background: var(--surface-2); }
.retour.bon { background: var(--bon-doux); color: var(--bon-fonce); }
.retour.faux { background: var(--faux-doux); color: var(--faux-fonce); }
.retour:empty { display: none; }

/* ---------- les lunes de Galilée : la lunette ---------- */
.lunette { position: relative; width: 100%; aspect-ratio: 4 / 1; min-height: 150px; max-height: 240px; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 140% at 50% 50%, var(--ciel-2), var(--ciel)); box-shadow: inset 0 0 0 3px #2c3a5e, var(--ombre); }
.lunette svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lunette .jupiter { fill: var(--jupiter); stroke: var(--jupiter-bord); stroke-width: 1.5; }
.lunette .bande { fill: none; stroke: #b88f4a; stroke-width: 1.2; opacity: 0.7; }
.lunette .halo { fill: var(--halo); }
.lunette .etoile { fill: var(--etoile); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)); }
.lunette .cardinal { fill: #dfe6f5; font-family: var(--f-titre); font-style: italic; font-size: 17px; }
.lunette .graduation { stroke: #9fb0d4; stroke-width: 1; }
.lunette .graduation-texte { fill: #c9d4ea; font-size: 11.5px; font-family: var(--f-mono); }
.lunette .nuages { fill: #8794b0; opacity: 0.92; }
.lunette .nuages-texte { fill: #ffffff; font-size: 15px; font-family: var(--f-texte); font-weight: 600; }
.lunette .lune-calcul { stroke: #ffffff; stroke-width: 1.5; }
.lunette .lune-calcul.cachee { fill: none; stroke-dasharray: 3 2.5; }
.lunette .nom-lune { fill: #ffffff; font-size: 12.5px; font-family: var(--f-texte); font-weight: 600; paint-order: stroke; stroke: var(--ciel); stroke-width: 3px; }
/* boutons posés sur les étoiles : cible de 24 px au moins (44 px au doigt) */
.poignee-etoile {
  position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 2px solid transparent; background: transparent;
  padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.poignee-etoile:hover { border-color: rgba(255, 255, 255, 0.6); }
.poignee-etoile:focus-visible { outline: 3px solid #ffd166; outline-offset: 1px; }
.poignee-etoile.notee { border-color: #ffd166; border-style: solid; }
.poignee-etoile.notee::after { content: "✓"; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); color: #ffd166; font-size: 13px; font-weight: 700; }
@media (pointer: coarse) { .poignee-etoile { width: 40px; height: 40px; margin: -20px 0 0 -20px; } }
.etoiles-serrees { display: grid; gap: 6px; margin-top: 6px; }
.etoiles-serrees .etat { margin: 0; font-size: var(--t-s); }
.etoiles-serrees button[aria-pressed="true"]::before { content: "✓ "; }
.legende-lunette { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }

/* ---------- le carnet ---------- */
.carnet { background: var(--carnet); border-color: var(--carnet-ligne); }
.carnet ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.carnet li { display: grid; gap: 4px; padding-bottom: 6px; border-bottom: 1px dashed var(--carnet-ligne); }
.carnet li:last-child { border-bottom: 0; }
.carnet .jour { font-family: var(--f-titre); font-weight: 700; color: var(--encre-carnet); font-size: var(--t-s); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.carnet .jour small { font-family: var(--f-texte); font-weight: 400; color: var(--encre-2); }
.carnet .croquis { width: 100%; max-width: 520px; height: 34px; display: block; }
.croquis .ligne-croquis { stroke: var(--carnet-ligne); stroke-width: 1; }
.croquis .jup { fill: none; stroke: var(--encre-carnet); stroke-width: 2; }
.croquis .ast { stroke: var(--encre-carnet); stroke-width: 1.7; stroke-linecap: round; }
.croquis .cardinal { fill: var(--encre-carnet); font-size: 12px; font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.carnet figure { margin: 0; display: grid; gap: 2px; }
.carnet figure img { width: 100%; max-width: 520px; height: auto; border-radius: 6px; border: 1px solid var(--carnet-ligne); }
.carnet figcaption { font-size: var(--t-xs); color: var(--encre-2); }
.carnet .vide { color: var(--encre-2); font-size: var(--t-s); }
.accord { font-size: var(--t-xs); font-weight: 700; }
.accord.oui { color: var(--bon-fonce); } .accord.non { color: #9a4508; }

/* ---------- la frise des nuits ---------- */
.frise svg { width: 100%; height: auto; display: block; }
.frise .axe { stroke: #9aa6b8; stroke-width: 1; }
.frise .jour-ligne { stroke: #e3e8f0; stroke-width: 1; }
.frise .jour-texte, .frise .axe-texte { fill: var(--encre-2); font-size: 12px; font-family: var(--f-texte); }
.frise .disque { fill: #f2e3c2; }
.frise .courbe { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.frise .courbe.io { stroke: #1d4ed8; stroke-width: 1.6; }
.frise .courbe.europe { stroke: #b42318; stroke-width: 1.8; stroke-dasharray: 7 4; }
.frise .courbe.ganymede { stroke: #11743a; stroke-width: 2.2; stroke-dasharray: 2 3.5; }
.frise .courbe.callisto { stroke: #6d28d9; stroke-width: 3; }
.frise .nom-courbe { font-size: 12.5px; font-weight: 700; font-family: var(--f-texte); paint-order: stroke; stroke: #ffffff; stroke-width: 3px; }
.frise .nom-courbe.io { fill: #1d4ed8; } .frise .nom-courbe.europe { fill: #b42318; } .frise .nom-courbe.ganymede { fill: #11743a; } .frise .nom-courbe.callisto { fill: #6d28d9; }
.frise .obs { stroke: var(--encre); stroke-width: 1.5; }
.legende-frise { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: var(--t-xs); }
.legende-frise li { display: inline-flex; gap: 6px; align-items: center; }
.legende-frise svg { width: 34px; height: 10px; }

/* ---------- la loupe (documents d'époque) ---------- */
.loupe { display: grid; gap: 6px; }
.loupe-vue { overflow: auto; max-height: min(70vh, 640px); border: 1px solid var(--ligne); border-radius: 10px; background: #f3efe6; touch-action: pan-x pan-y pinch-zoom; }
.loupe-vue img { display: block; width: 100%; height: auto; max-width: none; }
.loupe .source { font-size: var(--t-xs); color: var(--encre-2); margin: 0; }
.citation-doc { margin: 0; padding: 10px 14px; border-left: 4px solid var(--or-ligne); background: var(--surface); border-radius: 0 10px 10px 0; font-size: var(--t-s); }
.citation-doc p { margin: 0; }
.citation-doc .latin { font-style: italic; color: var(--encre-2); }

/* ---------- inoculer ou pas : compteurs, foule, courbes ---------- */
.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 8px; margin: 0; }
.compteurs > div { background: var(--surface-2); border-radius: 10px; padding: 6px 10px; display: grid; gap: 2px; }
.compteurs dt { font-size: var(--t-xs); color: var(--encre-2); }
.compteurs dd { margin: 0; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 600; }
.bloc-foule { position: relative; }
.foule { position: relative; width: 100%; aspect-ratio: 3 / 1; min-height: 160px; }
.foule canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.legende-foule { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 3px 12px; font-size: var(--t-xs); }
.legende-foule li { display: flex; align-items: center; gap: 6px; }
.legende-foule .nombre { margin-left: auto; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.icone-etat { flex: none; }
.courbes svg { width: 100%; height: auto; display: block; }
.courbes .axe { stroke: #8a95a8; stroke-width: 1; }
.courbes .grille { stroke: #e7ebf2; stroke-width: 1; }
.courbes .axe-texte { fill: var(--encre-2); font-size: 12px; font-family: var(--f-texte); }
.courbes .c-naturel { fill: none; stroke: #4b5563; stroke-width: 2; }
.courbes .c-nonvar { fill: none; stroke: #11743a; stroke-width: 2; stroke-dasharray: 6 4; }
.courbes .c-choix { fill: none; stroke: var(--accent); stroke-width: 3.2; }
.courbes .curseur-age { stroke: #9a4508; stroke-width: 1.5; stroke-dasharray: 3 3; }
.courbes .point-age { fill: var(--accent); stroke: #ffffff; stroke-width: 2; }
.legende-courbes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-xs); }
.legende-courbes li { display: inline-flex; gap: 6px; align-items: center; }
.legende-courbes svg { width: 30px; height: 10px; }
.resultat { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--accent-doux); font-size: var(--t-s); }
.resultat.attente { background: var(--surface-2); color: var(--encre-2); }
.table-bernoulli { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.table-bernoulli th, .table-bernoulli td { border-bottom: 1px solid var(--ligne); padding: 4px 6px; text-align: right; font-variant-numeric: tabular-nums; }
.table-bernoulli th:first-child, .table-bernoulli td:first-child { text-align: left; }
.table-bernoulli caption { text-align: left; font-size: var(--t-xs); color: var(--encre-2); padding-bottom: 4px; }
.choix-lignes { display: flex; flex-wrap: wrap; gap: 4px; }
.bloc-table-i { display: grid; gap: 6px; margin-top: 8px; }
.defile-table { overflow-x: auto; max-width: 100%; border: 1px solid var(--ligne); border-radius: 8px; scroll-margin-top: 104px; }
.defile-table:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.table-i { min-width: 640px; font-size: var(--t-xs); }
.table-i thead th { vertical-align: bottom; text-align: right; font-weight: 600; line-height: 1.25; }
.table-i tbody tr.choisie { background: var(--accent-doux); font-weight: 700; }
.table-i tbody tr.choisie th { box-shadow: inset 4px 0 0 var(--accent); }
.bloc-table-i .source-doc { font-size: var(--t-xs); color: var(--encre-2); margin: 0; }
.choix-lignes button { min-width: 34px; min-height: 30px; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--surface); font-family: var(--f-mono); font-size: var(--t-xs); }
.choix-lignes button[aria-pressed="true"] { background: var(--accent); color: var(--accent-encre); border-color: var(--accent); }

@media (max-width: 860px) {
  .scene-activite { position: relative; overflow: visible; }
  .lunette { aspect-ratio: 2.4 / 1; }
  .foule { aspect-ratio: 34 / 39; }
}
@media (max-width: 520px) {
  .scene-activite { padding: 10px 10px 14px; }
  .cadre { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .info, .toast, .missions li.vient::before { animation: 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, .poignee-etoile, .boutons, .choix-lignes, .loupe-commandes { display: none !important; }
  main, .ecran { position: static; overflow: visible; }
  .ecran[hidden] { display: none !important; }
  .activite { display: block; }
  .colonne-scene { background: none; }
  .scene, .scene-activite { position: relative; overflow: visible; }
  .cadre, .carte, .bloc, .question { box-shadow: none; break-inside: avoid; }
  .loupe-vue { max-height: none; overflow: visible; }
  .panneau { border: 0; overflow: visible; padding: 0; }
  .plus-loin > div { display: grid !important; }
  :focus-visible { outline: none !important; }
  a { color: inherit; }
}

/* Téléphones et tablettes : tous les champs de saisie et toutes les listes à 16 px au moins (sinon Safari agrandit la page). */
@media (max-width: 860px), (pointer: coarse) {
  .app select, .app textarea, .app input:not([type=range]):not([type=checkbox]):not([type=radio]) { font-size: 16px; }
}
.cardinaux { margin: 0; display: flex; justify-content: space-between; gap: 8px; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: var(--t-s); color: var(--encre-2); }
.liste { display: inline-flex; gap: 6px; align-items: center; }
.liste select, .scene-activite select { border: 1px solid var(--ligne); border-radius: 8px; background: var(--surface); padding: 4px 8px; min-height: 34px; color: var(--encre); }

/* ---------- la loupe : plan agrandi et zones à trouver ---------- */
.loupe-plan { position: relative; width: 100%; }
.loupe-plan img { display: block; width: 100%; height: auto; max-width: none; }
.loupe-zone {
  position: absolute; min-width: 24px; min-height: 24px; padding: 0; margin: 0; border: 2px dashed transparent; border-radius: 6px;
  background: transparent; cursor: zoom-in; -webkit-tap-highlight-color: transparent;
}
.loupe-zone:hover { border-color: rgba(47, 95, 224, 0.75); background: rgba(47, 95, 224, 0.06); }
.loupe-zone:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); background: rgba(47, 95, 224, 0.08); }
.loupe-zone.trouvee { border: 2px solid #9a4508; background: rgba(255, 209, 102, 0.16); }
.loupe-zone.trouvee::after {
  content: attr(data-numero); position: absolute; top: -10px; left: -10px; min-width: 20px; height: 20px; border-radius: 10px;
  background: #9a4508; color: #ffffff; font: 700 12px/20px var(--f-texte); text-align: center;
}
/* zone collée au bord du document : la pastille reste dans le cadre (elle était rognée, ex. la foule de Lemonnier) */
.loupe-zone.trouvee.bord-gauche::after { left: 2px; }
.loupe-zone.trouvee.bord-haut::after { top: 2px; }
.grille-voir { display: grid; gap: 0; margin: 0; border: 1px solid var(--ligne); border-radius: 10px; overflow: hidden; font-size: var(--t-s); }
.grille-voir > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); border-top: 1px solid var(--ligne); }
.grille-voir > div:first-child { border-top: 0; background: var(--surface-2); font-weight: 700; }
.grille-voir dt, .grille-voir dd { margin: 0; padding: 6px 10px; }
.grille-voir dt { font-weight: 600; }
@media (max-width: 520px) { .grille-voir > div { grid-template-columns: minmax(0, 1fr); } .grille-voir dd { padding-top: 0; } }

/* ---------- la pompe à feu ---------- */
.dessin-mine, .courbe-eau, .dessin-cycle, .frise-enc { width: 100%; height: auto; display: block; }
.dessin-mine { border-radius: 10px; }
.dessin-mine .ciel-mine { fill: #e8eff8; }
.dessin-mine .sol { stroke: #5b4a2f; stroke-width: 3; }
.dessin-mine .vide { fill: #3a3128; }
.dessin-mine .eau { stroke: #1f4f86; stroke-width: 1.5; }
.dessin-mine .texte-mine { fill: #ffffff; font: 12px var(--f-texte); paint-order: stroke; stroke: #2b2118; stroke-width: 3px; }
.dessin-mine .texte-mine.fort { font-weight: 700; }
.dessin-mine .graduation-mine { stroke: #2b2118; stroke-width: 1.2; }
.dessin-mine .manege { fill: none; stroke: #5b4a2f; stroke-width: 2; stroke-dasharray: 5 3; }
.dessin-mine .cheval { fill: none; stroke: #2b2118; stroke-width: 2; stroke-linecap: round; }
.dessin-mine .corde, .dessin-mine .tige { stroke: #2b2118; stroke-width: 2; }
.dessin-mine .maison { fill: #a3664a; stroke: #5b3424; stroke-width: 1.5; }
.dessin-mine .balancier-mine { stroke: #5b3424; stroke-width: 6; stroke-linecap: round; }
.courbe-eau .axe, .frise-enc .axe-frise { stroke: #8a95a8; stroke-width: 1; }
.courbe-eau .grille { stroke: #e7ebf2; stroke-width: 1; }
.courbe-eau .axe-texte, .frise-enc .axe-texte { fill: var(--encre-2); font-size: 12px; font-family: var(--f-texte); }
.frise-enc .axe-texte.fort { fill: var(--encre); font-weight: 700; }
.courbe-eau .c-eau { fill: none; stroke: #1f4f86; stroke-width: 3; }
.resultat.echec { background: var(--faux-doux); color: var(--faux-fonce); }
.table-pompe td { text-align: left; }
.dessin-cycle { background: #f7f8fc; border-radius: 10px; }
.dessin-cycle .chaudiere { fill: #c98b5f; stroke: #5b3424; stroke-width: 2; }
.dessin-cycle .feu { fill: none; stroke: #b42318; stroke-width: 2.5; }
.dessin-cycle .cylindre { fill: #ffffff; stroke: #374151; stroke-width: 2.5; }
.dessin-cycle .enveloppe { fill: #f1f3f6; stroke: #6b7280; stroke-width: 1.5; stroke-dasharray: 4 3; }
.dessin-cycle .couvercle { stroke: #374151; stroke-width: 4; }
.dessin-cycle .piston { fill: #4b5563; }
.dessin-cycle .chaine, .dessin-cycle .tige { stroke: #374151; stroke-width: 2.5; }
.dessin-cycle .balancier { stroke: #7a4a2a; stroke-width: 9; stroke-linecap: round; }
.dessin-cycle .mur { fill: #d8d2c4; stroke: #8a7f69; stroke-width: 1.5; }
.dessin-cycle .pivot { fill: #374151; }
.dessin-cycle .tuyau { fill: none; stroke: #9aa3b2; stroke-width: 4; }
.dessin-cycle .tuyau.ouvert { stroke: #4b5563; stroke-width: 6; }
.dessin-cycle .tuyau.ouvert-froid { stroke: #1f4f86; stroke-width: 6; }
.dessin-cycle .jet-froid { stroke: #1f4f86; stroke-width: 2; }
.dessin-cycle .jet-eau { fill: none; stroke: #1f4f86; stroke-width: 3; }
.dessin-cycle .bac { stroke: #1f4f86; stroke-width: 1.5; }
.dessin-cycle .condenseur, .dessin-cycle .pompe-air { fill: #ffffff; stroke: #374151; stroke-width: 2; }
.dessin-cycle .condenseur.actif, .dessin-cycle .pompe-air.actif { stroke: #9a4508; stroke-width: 4; }
.dessin-cycle .texte-cycle { fill: var(--encre); font: 12.5px var(--f-texte); }
.dessin-cycle .texte-cycle.fort { font-weight: 700; fill: #7a3606; }
.texte-phase { min-height: 3.2em; }

/* ---------- l'Encyclopédie ---------- */
.frise-enc .chemin-frise { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.frise-enc .etape { fill: #ffffff; stroke: #6b7280; stroke-width: 2; }
.frise-enc .etape.faite { fill: var(--accent); stroke: var(--accent-fonce); }
.frise-enc .etape.ici { fill: #ffd166; stroke: #7a3606; stroke-width: 2.5; }
.frise-enc .bande-interdit { fill: #b42318; opacity: 0.55; }
.titre-etape { font-size: var(--t-l); }
.evenements { margin: 0; padding-left: 1.2em; font-size: var(--t-s); display: grid; gap: 3px; }
.voies { display: grid; gap: 6px; }
.voies button.voie, .articles button.voie {
  text-align: left; border: 1px solid var(--ligne); background: var(--surface); border-radius: 10px; padding: 8px 12px; min-height: 40px;
  font-size: var(--t-s); line-height: 1.35;
}
.voies button.voie:hover, .articles button.voie:hover { border-color: var(--accent); }
.carte-europe { position: relative; width: 100%; }
.carte-europe svg { width: 100%; height: auto; display: block; border-radius: 10px; }
.carte-europe .mer { fill: #dce9f5; }
.carte-europe .terre { fill: #f3efe6; stroke: #a89f8a; stroke-width: 0.8; }
.carte-europe .ville { fill: #1f2937; stroke: #ffffff; stroke-width: 1.5; }
.carte-europe .renvoi { stroke: #4b5563; stroke-width: 1; }
.ligne-reedition { stroke: #1f4f86; stroke-width: 2.5; fill: none; }
.ligne-offre { stroke: #7a3606; stroke-width: 2; stroke-dasharray: 7 5; fill: none; }
.ligne-fausse-adresse { stroke: #4b5563; stroke-width: 2.5; stroke-dasharray: 1.5 4; stroke-linecap: round; fill: none; }
.ligne-condamnation { stroke: #b42318; stroke-width: 4; fill: none; }
.poignees-carte { position: absolute; inset: 0; pointer-events: none; }
.lieu-carte {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto; min-height: 24px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid #4b5563; background: rgba(255, 255, 255, 0.95); color: var(--encre); font-size: 12px; line-height: 1.2; white-space: nowrap;
}
.lieu-carte:hover { border-color: var(--accent); }
@media (pointer: coarse) { .lieu-carte { min-height: 32px; } }
.legende-carte { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-xs); }
.legende-carte li { display: inline-flex; gap: 6px; align-items: center; }
.legende-carte svg { width: 34px; height: 10px; }
@media print {
  .loupe-zone { border-color: #9a4508 !important; }
  .defile-table { overflow: visible; border: 0; }
  .table-i { min-width: 0; }
}
.lieu-carte .num { display: none; }
.liste-lieux button { font-size: var(--t-xs); min-height: 30px; padding: 4px 10px; }
/* petits écrans : les textes des dessins grossissent (ils sont dessinés pour 640 de large), les lieux de la carte deviennent des numéros */
@media (max-width: 600px) {
  .dessin-mine .texte-mine { font-size: 20px; }
  .dessin-mine .detail-mine { display: none; }
  .courbe-eau .axe-texte { font-size: 20px; }
  .dessin-cycle .texte-cycle { font-size: 19px; }
  .frise-enc .axe-texte { font-size: 22px; }
  .lieu-carte { min-width: 26px; padding: 2px 6px; font-weight: 700; }
  .lieu-carte .nom { display: none; }
  .lieu-carte .num { display: inline; }
}

/* =================================================================
   THÈME 2 : la société d'ordres et la Révolution
   ================================================================= */
/* ---------- trois ordres : les portraits ---------- */
.portraits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 8px; }
.portrait { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; align-items: start; background: var(--surface); border: 1.5px solid var(--ligne); border-radius: 12px; padding: 10px; }
.portrait.juste { border-color: var(--bon); }
.portrait.faux { border-color: var(--faux); border-style: dashed; }
.icone-portrait { width: 36px; height: 36px; fill: none; stroke: #374151; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.portrait-texte { display: grid; gap: 4px; min-width: 0; }
.portrait-texte h3 { font-size: var(--t-m); }
.portrait-texte p { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.choix-ordre button { font-size: var(--t-xs); min-height: 32px; padding: 4px 10px; }
.portrait .verdict-portrait { font-weight: 700; font-size: var(--t-xs); color: var(--encre); }
.portrait.juste .verdict-portrait { color: var(--bon-fonce); }
.portrait.faux .verdict-portrait { color: var(--faux-fonce); }

/* ---------- la Foule en pyramide et en hémicycle ---------- */
.foule.foule-pyramide { aspect-ratio: 2.3 / 1; min-height: 200px; }
.foule.foule-hemicycle { aspect-ratio: 2 / 1.04; min-height: 160px; max-width: 600px; margin: 0 auto; }
.scene-activite .boutons button.principal { background: var(--principal); border-color: var(--principal); color: #ffffff; font-weight: 700; }
.scene-activite .boutons button.principal:hover { background: var(--principal-fonce); }
.legende-foule .legende-statuts { grid-column: 1 / -1; color: var(--encre-2); }
.def-charge { min-height: 2.6em; }
.table-charges { min-width: 680px; font-size: var(--t-xs); }
.table-charges td { text-align: left; vertical-align: top; font-family: var(--f-texte); font-size: var(--t-xs); }
.table-charges td:first-child, .table-charges th[scope="row"] { white-space: nowrap; }
.statut-charge { display: inline-block; font-weight: 700; padding: 0 6px; border-radius: 4px; border: 1px solid #6b7280; background: #ffffff; color: var(--encre); }
.statut-charge.statut-paie { background: #1f2937; color: #ffffff; border-color: #1f2937; }
.statut-charge.statut-percoit { border-style: double; border-width: 3px; }
.pourquoi { display: block; color: var(--encre-2); margin-top: 2px; }
.cache-case { color: var(--encre-2); font-style: italic; }
.cadre-q { display: grid; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--ligne); }
.question-courte { display: grid; gap: 6px; }
.question-courte + .question-courte { padding-top: 6px; }
.voies button.voie.vue::after, .articles button.voie.vue::after { content: " ✓"; font-weight: 700; }

/* ---------- par ordre ou par tête : la salle ---------- */
.reglages-salle { display: grid; gap: 6px; }
.curseurs-salle { display: grid; gap: 6px; }
.ligne-curseur { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: var(--t-s); }
.ligne-curseur .curseur { flex: 1 1 300px; grid-template-columns: minmax(0, auto) minmax(110px, 1fr) auto; }
.boutons button.petit, .ligne-curseur button.petit { min-width: 40px; min-height: 32px; padding: 3px 8px; border: 1px solid var(--ligne); background: var(--surface); border-radius: 8px; font-family: var(--f-mono); }
.frise-juin button { font-size: var(--t-xs); }
.journee-texte { display: grid; gap: 6px; }
.journee:empty { display: none; }

/* ---------- le surligneur (cahiers de doléances) : couleur + motif + étiquette ---------- */
.surligneur { display: grid; gap: 10px; }
.surligneur-tete { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; position: sticky; top: -12px; z-index: 2; background: #ffffff; padding: 6px 0; box-shadow: 0 6px 8px -6px rgba(20, 33, 61, 0.25); }
.surligneur-tete .bascule > button { display: inline-flex; align-items: center; gap: 6px; }
.pastille-surligneur { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; border: 1.5px solid; font: 700 12px/1 var(--f-mono); color: #111827; flex: none; }
.texte-surligne { display: grid; gap: 6px; }
.texte-surligne h3 { font-size: var(--t-m); }
.texte-surligne .source { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
.passages { display: grid; gap: 6px; }
button.passage {
  display: block; width: 100%; text-align: left; border: 1px solid var(--ligne); border-left-width: 5px; background: var(--surface); color: #111827;
  border-radius: 8px; padding: 8px 10px; font-size: var(--t-s); line-height: 1.45; cursor: pointer;
}
button.passage:hover { border-color: var(--accent); }
.passage-reference { display: block; font-size: var(--t-xs); color: var(--encre-2); margin-top: 3px; }
.etiquette-surligneur { display: inline-block; font-weight: 700; font-size: var(--t-xs); margin-right: 6px; padding: 0 6px; border-radius: 4px; background: #ffffff; border: 1px solid currentColor; }
.surligne-impots { background: #dbeafe repeating-linear-gradient(45deg, rgba(30, 64, 175, 0.12) 0 3px, transparent 3px 9px); border-color: #1e40af; }
.surligne-seigneurs { background: #dcfce7 radial-gradient(rgba(22, 101, 52, 0.22) 1.2px, transparent 1.7px) 0 0 / 8px 8px; border-color: #166534; }
.surligne-vote { background: #ffedd5 repeating-linear-gradient(0deg, rgba(154, 52, 18, 0.14) 0 2px, transparent 2px 7px); border-color: #9a3412; }
button.passage.surligne-impots .etiquette-surligneur { color: #1e3a8a; }
button.passage.surligne-seigneurs .etiquette-surligneur { color: #14532d; }
button.passage.surligne-vote .etiquette-surligneur { color: #7c2d12; }
.table-accord { min-width: 680px; font-size: var(--t-xs); }
.table-accord td { text-align: left; vertical-align: top; font-family: var(--f-texte); font-size: var(--t-xs); }
.table-accord th[scope="row"] { white-space: nowrap; }
.table-accord th, .table-charges th { text-align: left; vertical-align: top; }

/* ---------- le rideau avant / après ---------- */
.rideau { display: grid; gap: 8px; margin: 0; }
.rideau-cadre { position: relative; width: 100%; max-width: 380px; margin: 0 auto; background: #f3efe6; border: 1px solid var(--ligne); border-radius: 10px; overflow: hidden; }
.rideau-image { position: absolute; display: block; max-width: none; object-fit: contain; }
.rideau-dessus { position: absolute; inset: 0; }
.rideau-trait { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #111827; box-shadow: 0 0 0 1px #ffffff; pointer-events: none; }
.rideau-commandes { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: center; }
.rideau .source { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
.loupe-secours { display: grid; gap: 6px; }
.loupe-secours .etat { font-size: var(--t-s); }

/* ---------- la nuit du 4 août ---------- */
.articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 6px; }
.article-texte { display: grid; gap: 6px; }
.article-texte:empty { display: none; }
.ete { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }
.ete li { display: grid; gap: 4px; }

@media (max-width: 600px) {
  .ligne-curseur .curseur { flex: 1 1 100%; }
}
@media (max-width: 860px) {
  .foule.foule-pyramide { aspect-ratio: 1 / 1; }
  .foule.foule-hemicycle { aspect-ratio: 2 / 1.06; }
  .surligneur-tete { position: static; }
}
@media print {
  .choix-ordre, .rideau-commandes, .surligneur-tete, .articles, .frise-juin, .loupe-secours { display: none !important; }
  button.passage { border-left-width: 5px; }
  .rideau-cadre { max-width: 320px; }
}
/* listes déroulantes de la scène : jamais plus larges que leur cadre (téléphone) */
.scene-activite .liste { flex-wrap: wrap; max-width: 100%; min-width: 0; }
.scene-activite .liste select { max-width: 100%; min-width: 0; }
.scene-activite .ligne-titre { min-width: 0; }

/* ---------- le procès du roi (sans score : aucune étoile, un ton sobre) ---------- */
.sans-score { font-family: var(--f-mono); font-size: 0.72rem; color: #3f4652; white-space: nowrap; }
.resultat-neutre { margin: 0; padding: 8px 12px; border: 1px solid var(--ligne); border-radius: 8px; background: var(--surface); font-size: var(--t-s); }
.decomptes { display: grid; gap: 6px; }
.table-decomptes th, .table-decomptes td { text-align: left; vertical-align: top; }
.table-decomptes td { font-family: var(--f-texte); font-size: var(--t-s); }
.bloc-positions { max-width: 100%; }
.table-positions { table-layout: fixed; }
.table-positions thead th:nth-child(1) { width: 26%; }
.table-positions thead th:nth-child(2) { width: 46%; }
.table-positions th, .table-positions td { text-align: left; vertical-align: top; overflow-wrap: anywhere; hyphens: auto; }
.table-positions td, .table-positions td:first-child { font-family: var(--f-texte); font-size: var(--t-s); }
.table-positions tbody + tbody { border-top: 2px solid var(--ligne); }
.compter-peine { display: grid; gap: 8px; }
.liste-discussion { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: var(--t-s); }
.foule.foule-famille { aspect-ratio: 2.2 / 1; min-height: 220px; }
@media (max-width: 860px) { .foule.foule-famille { aspect-ratio: 1.2 / 1; } }

/* ---------- ce que dit le Code civil ---------- */
.terre-partagee svg { width: 100%; height: auto; display: block; }
.dessin-terre .parcelle { fill: #e7dcc0; stroke: #57534e; stroke-width: 1.5; }
.dessin-terre .parcelle-b { fill: #d2c29a; }
.dessin-terre .parcelle-nom { font: 600 15px var(--f-texte); fill: #1c1917; }
.dessin-terre .parcelle-ha { font: 13px var(--f-mono); fill: #1c1917; }
.dessin-terre .parcelle-legende { font: 12px var(--f-texte); fill: #44403c; }
.table-parts td, .table-fiche td { font-family: var(--f-texte); font-size: var(--t-s); text-align: left; }
.table-parts td:nth-child(2) { font-family: var(--f-mono); white-space: nowrap; }
.table-fiche th, .table-parts th { text-align: left; }

/* =================================================================
   THÈME 3 : l'âge industriel
   ================================================================= */
/* ---------- du rouet à la mule automatique ---------- */
.choix-machines button { font-size: var(--t-xs); min-height: 32px; padding: 4px 10px; }
.grille-filer { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 10px 14px; align-items: start; }
@media (max-width: 600px) { .grille-filer { grid-template-columns: minmax(0, 1fr); } }
.dessin-machine { width: 100%; height: auto; display: block; background: var(--surface-2); border-radius: 10px; }
.dessin-machine .trait { fill: none; stroke: #3f3a33; stroke-width: 3; }
.dessin-machine .trait.fin { stroke-width: 1.5; }
.dessin-machine .bati { fill: #e7dcc0; stroke: #57534e; stroke-width: 2; }
.dessin-machine .chariot { fill: #d2c29a; stroke: #57534e; stroke-width: 2; }
.dessin-machine .broche { stroke: #1c1917; stroke-width: 2; }
.dessin-machine .fusee { fill: #ffffff; stroke: #57534e; stroke-width: 1.2; }
.dessin-machine .fil { stroke: #8a7f70; stroke-width: 1; }
.dessin-machine .arbre { stroke: #1c1917; stroke-width: 4; }
.dessin-machine .courroie { stroke: #57534e; stroke-width: 2; stroke-dasharray: 5 3; }
.dessin-machine .eau-machine { fill: none; stroke: #2f6db0; stroke-width: 3; }
.dessin-machine .sol-machine { stroke: #8a7f70; stroke-width: 2; }
.dessin-machine .texte-machine { font: 600 15px var(--f-texte); fill: #1c1917; }
.dessin-machine .texte-machine.petit { font-size: 12px; font-weight: 500; }
.info-machine { display: grid; gap: 6px; font-size: var(--t-s); }
.info-machine p { margin: 0; }
.jauge-fil { --plein: 0%; height: 14px; border-radius: 7px; border: 1px solid #57534e; background: linear-gradient(90deg, #1e4f8a var(--plein), #ffffff var(--plein)); }
.graphique-heures { width: 100%; height: auto; display: block; }
.graphique-heures .grille { stroke: #d6d3d1; stroke-width: 1; }
.graphique-heures .axe-texte { font: 14px var(--f-texte); fill: #1c1917; }
.graphique-heures .axe-texte.fort { font-weight: 700; }
.graphique-heures .axe-texte.pale { fill: #57534e; font-style: italic; }
.graphique-heures .barre-heures { fill: #1e4f8a; }
.balance-fil { display: grid; gap: 6px; }
.balance-fil > div { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: var(--t-s); }
.balance-fil .barre-fil { --l: 0%; height: 16px; border-radius: 4px; background: linear-gradient(90deg, #9d4b0f var(--l), var(--surface-2) var(--l)); border: 1px solid #57534e; }
.balance-fil .barre-fil.mule { background: repeating-linear-gradient(45deg, #1e4f8a 0 6px, #3b6ea8 6px 10px) 0 0 / var(--l) 100% no-repeat, var(--surface-2); }
.balance-fil .chiffre { white-space: nowrap; }
@media (max-width: 520px) { .balance-fil > div { grid-template-columns: minmax(0, 1fr) auto; } .balance-fil .barre-fil { grid-column: 1 / -1; grid-row: 2; } }
.bloc-gravure { display: grid; gap: 8px; }
.bloc-gravure[hidden] { display: none; }
@media (max-width: 600px) { .graphique-heures .axe-texte { font-size: 20px; } .dessin-machine .texte-machine { font-size: 18px; } .dessin-machine .texte-machine.petit { font-size: 15px; } }
.graphique-heures .axe-texte.inverse { fill: #ffffff; font-weight: 700; }
/* ---------- l'enfant à la filature (ton sobre) ---------- */
.frise-journee { width: 100%; height: auto; display: block; }
.frise-journee .grille { stroke: #d6d3d1; stroke-width: 1; }
.frise-journee .axe-texte { font: 13px var(--f-texte); fill: #1c1917; }
.frise-journee .axe-texte.fort { font-weight: 700; }
.frise-journee .bloc-filature { fill: #57534e; }
.frise-journee .bloc-parfois { fill: #ffffff; stroke: #57534e; stroke-width: 1.5; stroke-dasharray: 4 3; }
.frise-journee .bloc-permis { fill: #ffffff; stroke: #1e4f8a; stroke-width: 2; }
.frise-journee .texte-bloc { font: 600 14px var(--f-texte); fill: #ffffff; }
.frise-journee .texte-bloc.fonce { fill: #1e3a8a; }
@media (max-width: 600px) { .frise-journee .axe-texte { font-size: 18px; } .frise-journee .texte-bloc { font-size: 17px; } }
.etape-journee { display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 10px; padding: 10px 12px; }
.etape-journee h3 { font-size: var(--t-m); }
.etape-journee p { margin: 0; font-size: var(--t-s); }
.etape-journee .heure-etape { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
.jauges-travail { display: grid; gap: 6px; }
.jauges-travail > div { display: grid; grid-template-columns: minmax(0, 16em) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: var(--t-s); }
.jauge-heures { --l: 0%; height: 16px; border: 1px solid #57534e; border-radius: 4px; background: linear-gradient(90deg, #57534e var(--l), var(--surface-2) var(--l)); }
.jauge-heures.loi { background: repeating-linear-gradient(45deg, #1e4f8a 0 5px, #ffffff 5px 8px) 0 0 / var(--l) 100% no-repeat, var(--surface-2); }
@media (max-width: 520px) { .jauges-travail > div { grid-template-columns: minmax(0, 1fr) auto; } .jauge-heures { grid-column: 1 / -1; grid-row: 2; } }
.bloc-atelier { position: relative; }
.foule.foule-atelier { aspect-ratio: 2.6 / 1; min-height: 150px; }
@media (max-width: 860px) { .foule.foule-atelier { aspect-ratio: 2.2 / 1; min-height: 130px; } }
.poignees-atelier { position: absolute; inset: 0; pointer-events: none; }
.poignee-ouvrier { position: absolute; pointer-events: auto; border: 0; border-radius: 8px; background: transparent; padding: 0; cursor: pointer; }
.poignee-ouvrier:hover { outline: 2px dashed var(--accent); }
.poignee-ouvrier[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 1px; }
.fiche-ouvrier { display: grid; gap: 6px; }
.fiche-ouvrier:empty { display: none; }
.fiche-ouvrier h3 { font-size: var(--t-m); }
.fiche-dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 4px 12px; font-size: var(--t-s); }
.fiche-dl > div { display: grid; }
.fiche-dl dt { font-size: var(--t-xs); color: var(--encre-2); }
.fiche-dl dd { margin: 0; }
.table-rapport th, .table-rapport td { text-align: left; vertical-align: top; font-family: var(--f-texte); font-size: var(--t-s); }
.table-rapport tr.faux td:nth-child(2) { color: var(--faux-fonce); font-weight: 700; }
.table-rapport tr.juste td:nth-child(2) { color: var(--bon-fonce); }
.temoignages { display: grid; gap: 6px; }
.temoignages[hidden] { display: none; }
.surligne-duree { background: #dbeafe repeating-linear-gradient(45deg, rgba(30, 64, 175, 0.12) 0 3px, transparent 3px 9px); border-color: #1e40af; }
.surligne-enfants { background: #dcfce7 radial-gradient(rgba(22, 101, 52, 0.22) 1.2px, transparent 1.7px) 0 0 / 8px 8px; border-color: #166534; }
.surligne-trajet { background: #ffedd5 repeating-linear-gradient(0deg, rgba(154, 52, 18, 0.14) 0 2px, transparent 2px 7px); border-color: #9a3412; }
button.passage.surligne-duree .etiquette-surligneur { color: #1e3a8a; }
button.passage.surligne-enfants .etiquette-surligneur { color: #14532d; }
button.passage.surligne-trajet .etiquette-surligneur { color: #7c2d12; }
/* ---------- l'étoile de Legrand ---------- */
.grille-legrand { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px 14px; align-items: start; }
@media (max-width: 760px) { .grille-legrand { grid-template-columns: minmax(0, 1fr); } }
.carte-france { max-width: 560px; }
.carte-france .fleuve { fill: none; stroke: #6f9fcf; stroke-width: 1.2; }
.carte-france .nom-ville { font: 600 14px var(--f-texte); fill: #1c1917; paint-order: stroke; stroke: #f3efe6; stroke-width: 3px; }
.carte-france .nom-ville.mineure { font-weight: 500; font-size: 12px; }
.carte-france .nom-ville.capitale { font-size: 16px; font-weight: 700; }
.carte-france .ligne-projet { fill: none; stroke: #7a3606; stroke-width: 3; stroke-dasharray: 9 5; stroke-linecap: round; }
.carte-france .ligne-projet.transversale { stroke: #1f4f86; stroke-dasharray: 2 5; stroke-width: 3.5; }
.carte-france .ligne-projet.derniere { stroke-width: 5; }
.carte-france .ligne-ouverte { fill: none; stroke: #1c1917; stroke-width: 3.5; stroke-linecap: round; }
.carte-france .ligne-ouverte.nouvelle { stroke: #9a3412; stroke-width: 6; }
.legende-carte .ligne-projet { fill: none; stroke: #7a3606; stroke-width: 3; stroke-dasharray: 7 4; }
.legende-carte .ligne-projet.transversale { stroke: #1f4f86; stroke-dasharray: 2 4; }
.legende-carte .ligne-ouverte { fill: none; stroke: #1c1917; stroke-width: 3; }
.legende-carte .ligne-ouverte.nouvelle { stroke: #9a3412; stroke-width: 6; }
@media (max-width: 600px) { .carte-france .nom-ville { font-size: 22px; } .carte-france .nom-ville.mineure { display: none; } .carte-france .nom-ville.capitale { font-size: 24px; } }
.lignes-loi { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.lignes-loi .rubrique { display: block; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); margin-top: 4px; }
.scene-activite .lignes-loi button.ligne-loi { width: 100%; text-align: left; font-size: var(--t-s); line-height: 1.35; min-height: 32px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--surface); }
.depenses { display: grid; gap: 8px; }
.depense { display: grid; gap: 4px; padding: 8px 10px; border: 1.5px solid var(--ligne); border-radius: 10px; background: var(--surface); }
.depense.juste { border-color: var(--bon); }
.depense.faux { border-color: var(--faux); border-style: dashed; }
.depense .nom-depense { margin: 0; font-weight: 700; font-size: var(--t-s); }
.depense .verdict-depense { margin: 0; font-size: var(--t-xs); }
.depense.juste .verdict-depense { color: var(--bon-fonce); }
.depense.faux .verdict-depense { color: var(--faux-fonce); }
.depense .boutons button { font-size: var(--t-xs); min-height: 30px; }
.colonne-reseau { display: grid; gap: 8px; }
.liste-sections { margin: 0; padding-left: 1.1em; display: grid; gap: 3px; font-size: var(--t-xs); }
.liste-sections li.nouvelle { font-weight: 700; }
.durees ul { margin: 0; padding-left: 1.1em; font-size: var(--t-s); }
.durees p { margin: 0; font-size: var(--t-s); }
.graphique-durees { width: 100%; height: auto; display: block; }
.graphique-durees .axe-texte { font: 14px var(--f-texte); fill: #1c1917; }
.graphique-durees .axe-texte.fort { font-weight: 700; }
.graphique-durees .axe-texte.pale { fill: #57534e; font-style: italic; }
.graphique-durees .axe-texte.inverse { fill: #ffffff; font-weight: 700; }
.graphique-durees .barre-duree.route { fill: #7a3606; }
.graphique-durees .barre-duree.train { fill: #1e4f8a; }
@media (max-width: 600px) { .graphique-durees .axe-texte { font-size: 19px; } }
.scene-activite .lignes-loi button.ligne-loi[aria-pressed="true"] { background: var(--accent-doux); color: var(--encre); border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.texte-surligne button.passage { scroll-margin-top: 96px; }
/* ---------- thème 3, seconde moitié : Paris haussmannien, traite et abolitions, Algérie coloniale ---------- */
.carte-paris { max-width: 640px; }
.carte-paris .fond-paris { fill: #f3efe6; }
.carte-paris .enceinte { fill: none; stroke: #78716c; stroke-width: 2; stroke-dasharray: 2 4; }
.carte-paris .enceinte.active { fill: rgba(255, 209, 102, 0.18); stroke: #57534e; stroke-width: 3; stroke-dasharray: 8 4; }
.carte-paris .ancienne-limite { fill: none; stroke: #a8a29e; stroke-width: 1.6; stroke-dasharray: 2 4; }
.carte-paris .ancienne-limite.active { fill: rgba(255, 209, 102, 0.18); stroke: #57534e; stroke-width: 3; stroke-dasharray: none; }
.carte-paris .seine { fill: none; stroke: #6f9fcf; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.carte-paris .nom-seine { font: italic 600 14px var(--f-texte); fill: #1e4f8a; paint-order: stroke; stroke: #f3efe6; stroke-width: 3px; }
.carte-paris .nom-limite { font: 700 15px var(--f-texte); fill: #1c1917; paint-order: stroke; stroke: #f3efe6; stroke-width: 3px; }
.carte-paris .nom-lieu, .carte-atlantique .nom-lieu { font: 600 14px var(--f-texte); fill: #1c1917; paint-order: stroke; stroke: #f3efe6; stroke-width: 3px; }
.carte-paris .nom-lieu.mineure { font-weight: 500; font-size: 12px; }
.carte-paris .ville { fill: #1f2937; stroke: #ffffff; stroke-width: 1.5; }
.trait-decidee { fill: none; stroke: #7a3606; stroke-width: 4; stroke-dasharray: 9 5; stroke-linecap: round; }
.trait-ouverte { fill: none; stroke: #1c1917; stroke-width: 5; stroke-linecap: round; }
.trait-chantier { fill: none; stroke: #1e4f8a; stroke-width: 4; stroke-dasharray: 1.5 5; stroke-linecap: round; }
.trait-ancienne { stroke: #57534e; stroke-width: 3; }
.trait-enceinte { stroke: #57534e; stroke-width: 3; stroke-dasharray: 8 4; }
.carte-paris path.nouvelle { stroke-width: 7; }
.legende-paris svg { flex: none; }
@media (max-width: 600px) { .carte-paris .nom-lieu { font-size: 20px; } .carte-paris .nom-lieu.mineure { display: none; } .carte-paris .nom-limite { font-size: 21px; } .carte-paris .nom-seine { font-size: 19px; } }
.lien-bouton { justify-self: start; min-height: 32px; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--accent); background: var(--surface); color: var(--accent-fonce); font: inherit; font-size: var(--t-s); cursor: pointer; }
.lien-bouton:hover { background: var(--accent-doux); }
.bloc-population .barre-cellule { width: 45%; }
.barre-pop { display: block; height: 14px; border-radius: 3px; background: #1e4f8a; }
.barre-pop.agrandi { background: repeating-linear-gradient(45deg, #1e4f8a 0 4px, #8fb3dc 4px 8px); }
.carte-atlantique { max-width: 640px; }
.carte-atlantique .trajet { fill: none; stroke: #78716c; stroke-width: 2; stroke-dasharray: 3 5; }
.carte-atlantique .trajet.parcouru { stroke: #7a3606; stroke-width: 3.5; stroke-dasharray: none; }
.carte-atlantique .ville.ici { fill: #ffd166; stroke: #7a3606; stroke-width: 2.5; }
@media (max-width: 600px) { .carte-atlantique .nom-lieu { font-size: 21px; } }
.foule.bloc-foule-traite, .bloc-foule-traite .foule, .bloc-foule-1911 .foule { aspect-ratio: 2.6 / 1; min-height: 150px; }
@media (max-width: 860px) { .bloc-foule-traite .foule, .bloc-foule-1911 .foule { aspect-ratio: 1.3 / 1; } }
.face-a-face { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; align-items: start; }
.legende-une { margin: 0; padding: 8px 12px; border: 2px solid #1c1917; border-radius: 6px; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.04em; background: var(--surface); }
.table-statuts thead th:nth-child(1) { width: 30%; }
.table-statuts thead th:nth-child(2) { width: 46%; }
/* ---------- thème 4, première moitié : l'escalier des régimes, qui vote ?, la République à une voix ---------- */
.dessin-escalier { width: 100%; height: auto; display: block; max-width: 760px; margin: 0 auto; }
.dessin-escalier .fond-escalier { fill: #f8faf8; }
.dessin-escalier .marche { stroke: #1f2937; stroke-width: 1.5; }
.dessin-escalier .marche-a { fill: #cfe3d6; }
.dessin-escalier .marche-b { fill: #a9cdb7; }
.dessin-escalier .marche-suite { fill: #cfe3d6; stroke-dasharray: 6 0; }
.dessin-escalier .cent-jours { fill: #f8faf8; stroke: #1f2937; stroke-width: 1; stroke-dasharray: 2 2; }
.dessin-escalier .trait-hachure { stroke: #1f2937; stroke-width: 1.4; }
.dessin-escalier .annee-1852 { stroke: #1f2937; stroke-width: 1; }
.contexte-plebiscite { border-left: 3px solid #57534e; padding-left: 0.6rem; }
.dessin-escalier .sol-avant { fill: #e7e5e4; stroke: #57534e; stroke-width: 1; stroke-dasharray: 3 3; }
.dessin-escalier .nom-avant, .dessin-escalier .annee-escalier { font: 500 13px var(--f-texte); fill: #374151; }
.dessin-escalier .num-marche { font: 700 14px var(--f-mono); fill: #14532d; }
.dessin-escalier .nom-marche { font: 600 13px var(--f-texte); fill: #052e16; }
.dessin-escalier .axe-escalier { stroke: #374151; stroke-width: 1.4; }
.dessin-escalier .signe-passage { font: 700 16px var(--f-texte); fill: #7a3606; paint-order: stroke; stroke: #f8faf8; stroke-width: 3px; }
.dessin-escalier .rond-hugo { fill: #ffd166; stroke: #7a3606; stroke-width: 2.5; }
.dessin-escalier .lettres-hugo { font: 700 10px var(--f-mono); fill: #1c1917; }
@media (max-width: 600px) {
  .dessin-escalier .annee-escalier, .dessin-escalier .nom-avant { font-size: 21px; }
  .dessin-escalier .num-marche { font-size: 21px; }
  .dessin-escalier .nom-marche, .dessin-escalier .nom-avant { display: none; }
  .dessin-escalier .signe-passage { font-size: 24px; }
}
.reserve-cartes button.carte-frise { display: inline-grid; gap: 1px; text-align: left; border-radius: 10px; padding: 6px 11px; max-width: 100%; }
.reserve-cartes button.carte-frise .indice { font-size: var(--t-xs); color: var(--encre-2); }
.reserve-cartes button.carte-frise[aria-pressed="true"] .indice { color: #ffffff; }
.reserve-cartes button.carte-frise.posee { border-style: dashed; background: var(--surface-2); }
.reserve-cartes button.carte-frise.posee::after { content: " (posée)"; font-size: var(--t-xs); }
.consigne-serie { min-height: 2.6em; }
.cases-escalier { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.scene-activite .cases-escalier button.case-marche { display: grid; gap: 3px; align-content: start; text-align: left; border-radius: 10px; padding: 6px 8px; min-height: 64px; border: 1.5px solid var(--ligne); background: var(--surface); }
.case-marche .quand { font-family: var(--f-mono); font-size: 0.72rem; color: var(--encre-2); }
.case-marche .contenu { font-size: var(--t-xs); font-weight: 600; }
.case-marche .signe { font-weight: 700; margin-left: 4px; }
.scene-activite .cases-escalier button.case-marche.juste { border-color: var(--bon); }
.case-marche.juste .signe { color: var(--bon-fonce); }
.scene-activite .cases-escalier button.case-marche.fausse { border-color: var(--faux); border-style: dashed; }
.case-marche.fausse .signe { color: var(--faux-fonce); }
@media (max-width: 980px) { .cases-escalier { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); } }
.balance-vote { display: grid; gap: 6px; }
.ligne-balance { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: var(--t-s); }
.plebiscite .ligne-balance { grid-template-columns: minmax(0, 1fr); }
.piste-balance { position: relative; display: flex; height: 18px; background: var(--surface-2); border-radius: 4px; overflow: visible; }
.barre-pour { display: block; height: 100%; background: #1e4f8a; border-radius: 4px 0 0 4px; }
.barre-contre { display: block; height: 100%; background: repeating-linear-gradient(45deg, #7a4a12 0 4px, #c9a27a 4px 8px); }
.balance-vote .barre-contre { border-radius: 4px 0 0 4px; }
.trait-majorite { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; background: #111827; box-shadow: 0 0 0 1px #ffffff; }
.nom-balance { font-weight: 600; }
.plebiscites { display: grid; gap: 12px; }
.plebiscite { display: grid; gap: 6px; border-top: 1px dashed var(--ligne); padding-top: 8px; }
.bloc-foule-vote .foule { aspect-ratio: 2.4 / 1; min-height: 150px; }
@media (max-width: 860px) { .bloc-foule-vote .foule { aspect-ratio: 1.2 / 1; } }
.cases-lois { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 6px; }
.scene-activite .cases-lois button.case-marche { display: grid; gap: 3px; align-content: start; text-align: left; border-radius: 10px; padding: 6px 8px; min-height: 56px; border: 1.5px solid var(--ligne); background: var(--surface); }
.scene-activite .cases-lois button.case-marche.juste { border-color: var(--bon); }
.scene-activite .cases-lois button.case-marche.fausse { border-color: var(--faux); border-style: dashed; }
.bloc-une-voix .foule.foule-hemicycle { max-width: 640px; }
.bloc-vie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 12px; align-items: start; }
@media (max-width: 600px) { .bloc-vie { grid-template-columns: minmax(0, 1fr); } }
.portrait-hugo { margin: 0; display: grid; gap: 4px; }
.portrait-hugo img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--ligne); background: #f3efe6; max-width: 260px; }
.portrait-hugo .source { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
/* la gravure du Tour de la France (1904) : image à gauche, légende à droite ; l'une sous l'autre au téléphone */
.gravure-tour { margin: 0; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 10px 14px; align-items: start; }
.gravure-tour img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--ligne); background: #f3efe6; }
.gravure-tour figcaption { font-size: var(--t-s); display: grid; gap: 6px; }
.gravure-tour figcaption p { margin: 0; }
.gravure-tour .source { font-size: var(--t-xs); color: var(--encre-2); }
@media (max-width: 600px) { .gravure-tour { grid-template-columns: minmax(0, 1fr); } .gravure-tour img { max-width: 320px; } }
.textes-funerailles li { font-size: var(--t-s); }

/* ---------- faire l'école : deux grilles, tableau des six enfants ---------- */
.grilles-ecole { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.nom-grille { margin: 0 0 2px; font-weight: 700; font-size: var(--t-s); }
.bloc-foule-ecole .foule { aspect-ratio: 1.5 / 1; min-height: 120px; }
.table-ecole { table-layout: fixed; width: 100%; font-size: var(--t-xs); }
.table-ecole th, .table-ecole td { text-align: left; vertical-align: top; overflow-wrap: anywhere; hyphens: auto; font-family: var(--f-texte); }
.table-ecole thead th:nth-child(1) { width: 28%; }
/* les cinq colonnes des lois se partagent le reste (la règle des tableaux de statuts donnait 46 % à la deuxième) */
.table-ecole thead th:nth-child(n+2) { width: auto; }
.titre-vote { margin: 0; font-size: var(--t-s); }
.contenu-depliant > * + * { margin-top: 0; }

/* ---------- ce qu'elle peut faire seule : les portes ---------- */
.portes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 6px; }
.scene-activite .portes button.porte { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; border-radius: 10px; padding: 6px 8px; min-height: 56px; border: 1.5px solid var(--ligne); background: var(--surface); color: var(--encre); }
.scene-activite .portes button.porte svg { grid-row: 1 / 3; }
.scene-activite .portes button.porte[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: var(--surface); color: var(--encre); }
.nom-porte { font-size: var(--t-xs); font-weight: 700; }
.statut-porte { font-size: var(--t-xs); color: var(--encre-2); }
.statut-porte.statut-oui, .statut-porte.statut-oui-sauf, .statut-porte.statut-oui-conditions { color: #1f5c33; font-weight: 700; }
.statut-porte.statut-non { color: #44403c; font-weight: 700; text-decoration: underline; text-decoration-style: dotted; }
.barres-1906 { margin: 0; }
.barres-1906 figcaption { font-size: var(--t-s); font-weight: 700; margin-bottom: 4px; }
.barres-1906 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.barres-1906 li { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: var(--t-xs); }
.barres-1906 .nombre { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.bloc-1906 { display: grid; gap: 8px; }
/* au téléphone : le tableau des six enfants devient une fiche par enfant (chaque statut précédé de sa colonne) */
@media (max-width: 700px) {
  .table-ecole, .table-ecole tbody, .table-ecole tr, .table-ecole th, .table-ecole td { display: block; width: auto; }
  .table-ecole thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table-ecole tr { border-top: 1px solid var(--ligne); padding: 6px 0; }
  .table-ecole td { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 8px; padding: 2px 0; border: 0; }
  .table-ecole td::before { content: attr(data-label); color: var(--encre-2); }
}