/* À LA DÉCOUVERTE DES MARCHÉS — feuille de style
   Même famille que « À la découverte du hasard » et « des figures et des solides » (partie générique reprise de
   figures-solides/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 : aucune correction locale nécessaire).
   Couleurs propres : la DEMANDE en bleu (traits pleins) et l'OFFRE en orange (traits plus épais à tirets courts sur les
   graphiques du modèle) ; les états des personnages (achète, bredouille, renonce ; vend, invendu, garde) ont chacun une
   forme et un signe en plus de leur couleur : 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);

  /* marchés : la demande (bleu) et l'offre (orange), traits foncés à au moins 4,5:1 sur le blanc ; l'équilibre (violet) */
  --demande: #1d5fbf; --demande-fond: #dbe8fc;
  --offre: #b4430b; --offre-fond: #ffe2cf;
  --equilibre: #6d28d9; --equilibre-fond: #efe7fd;
  --trait: #1f2937; --gris: #5b6b82; --gris-clair: #c9d1dd; --grille: #e6ebf2;
  --fraise: #c81e3a; --feuille: #23803a; --cagette: #b98a4e; --cagette-fonce: #7a5527;
  --principal: #2f5fe0; --principal-fonce: #2148b8;
  --or-ligne: #e1ad21;

  /* fonds des scènes, un par thème */
  --scene-rencontre-1: #fbf8f2; --scene-rencontre-2: #efe5d3;
  --scene-courbes-1: #f7f9fc; --scene-courbes-2: #e2e9f3;
  --scene-producteur-1: #fcf8f1; --scene-producteur-2: #efe2cc;
  --scene-monnaie-1: #f5f9f4; --scene-monnaie-2: #dbe9d8;

  /* niveaux */
  --niv-2de: #0f766e; --niv-1re: #7c2d92;

  --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-rencontre-1); --scene-2: var(--scene-rencontre-2); }
[data-fond="courbes"] { --scene-1: var(--scene-courbes-1); --scene-2: var(--scene-courbes-2); }
[data-fond="producteur"] { --scene-1: var(--scene-producteur-1); --scene-2: var(--scene-producteur-2); }
[data-fond="monnaie"] { --scene-1: var(--scene-monnaie-1); --scene-2: var(--scene-monnaie-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). ../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="2de"] { background: #ddf3f0; color: var(--niv-2de); }
.niv[data-n="1re"] { background: #f3e5f7; color: var(--niv-1re); }
/* « 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-rencontre-1), var(--scene-rencontre-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="2de"] { 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; }
/* 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(--offre); }

/* ---------- 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 MARCHÉS : halle, graphiques, poignées, cartes à ranger
   ================================================================= */
.scene-marche {
  position: absolute; inset: 0; padding: 10px var(--gouttiere) 12px; display: grid; gap: 8px;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; overflow: auto;
}
/* chaque bloc garde sa rangée, même quand le bloc du haut est masqué (mode « Agrandir la foule ») */
.scene-marche > .ardoise, .scene-marche > .zone-ranger { grid-row: 1; }
.scene-marche > .bloc-halle, .scene-marche > .bloc-graphe { grid-row: 2; }
.scene-marche > .lecture-marche { grid-row: 3; }
/* le prix affiché, comme sur l'ardoise d'une halle */
.ardoise {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; justify-self: center; padding: 6px 18px; border-radius: 12px;
  background: #23412f; color: #ffffff; box-shadow: var(--ombre); border: 3px solid #a4794a;
}
.ardoise-titre, .ardoise-unite { font-size: var(--t-s); color: #e6efe8; }
.ardoise-prix { font-family: var(--f-mono); font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bloc-halle, .bloc-graphe {
  position: relative; min-height: 0; min-width: 0; border-radius: 14px; overflow: hidden;
  background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(31, 41, 55, 0.12); box-shadow: var(--ombre);
}
.halle-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.allee { fill: #f3e8d4; stroke: #d9c3a0; stroke-dasharray: 6 5; }
.allee-texte { font-family: var(--f-mono); font-size: 12px; fill: #6b5a43; letter-spacing: 0.12em; text-transform: uppercase; }
.zone-titre { font-family: var(--f-titre); font-weight: 700; font-size: 14px; }
.zone-titre.demande { fill: var(--demande); } .zone-titre.offre { fill: var(--offre); }
/* un personnage avance (ou recule) dans l'allée : simple transition CSS, aucune boucle d'animation */
.agent .mobile { transition: transform 0.45s ease; }
.agent .tete, .agent .buste { fill: var(--demande); stroke: #ffffff; stroke-width: 1.5; }
.agent .barquette, .agent .signe-renonce, .agent .rideau, .agent .piece { display: none; }
.agent.achete .barquette { display: inline; }
.barq-boite { fill: #fffaf0; stroke: var(--cagette-fonce); stroke-width: 1.2; }
.fraise { fill: var(--fraise); stroke: #7f1024; stroke-width: 0.8; }
.agent.bredouille .tete, .agent.bredouille .buste { fill: #ffffff; stroke: var(--demande); stroke-width: 2; stroke-dasharray: 3 2.5; }
.agent.renonce .tete, .agent.renonce .buste { fill: #c3cbd8; stroke: #ffffff; }
.agent.renonce .signe-renonce { display: inline; font-family: var(--f-mono); font-weight: 700; font-size: 15px; fill: #374151; }
.agent .table { fill: var(--cagette-fonce); }
.agent .auvent { fill: var(--offre); stroke: #ffffff; stroke-width: 1; }
.cag-boite { fill: var(--cagette); stroke: var(--cagette-fonce); stroke-width: 1.2; }
.agent.vend .cagette { display: none; }
.agent.vend .piece { display: inline; }
.piece-rond { fill: #f2c94c; stroke: #7a5527; stroke-width: 1.5; }
.piece-texte { font-family: var(--f-mono); font-weight: 700; font-size: 11px; fill: #4a3108; }
.agent.invendu .cag-boite { fill: url(#hachures-invendu); stroke-width: 2; }
.agent.garde .auvent, .agent.garde .table { fill: #c3cbd8; }
.agent.garde .cagette { display: none; }
.agent.garde .rideau { display: inline; }
.rideau-fond { fill: #e3e8ef; stroke: #8a94a6; stroke-width: 1; }
.rideau-pli { stroke: #8a94a6; stroke-width: 1; }
/* Inès (première) : auvent cerné de violet ET son nom écrit au-dessus de son étal (jamais la couleur seule) */
.agent.ines .auvent { stroke: var(--equilibre); stroke-width: 2.5; }
.etiquette-ines { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; fill: var(--equilibre); paint-order: stroke; stroke: rgba(255, 255, 255, 0.95); stroke-width: 3px; stroke-linejoin: round; }
.prix-agent { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; fill: var(--encre); paint-order: stroke; stroke: rgba(255, 255, 255, 0.95); stroke-width: 3px; stroke-linejoin: round; }

.lecture-marche { display: grid; gap: 6px; font-size: var(--t-s); min-width: 0; }
.scene-halle .lecture-marche { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); align-items: start; }
.scene-halle .lecture-marche > :not(.carnet) { grid-column: 1; }
.scene-halle .carnet { grid-column: 2; grid-row: 1 / span 4; }
.compteurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.compteur {
  margin: 0; padding: 4px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--ligne); border-left-width: 5px;
  display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; line-height: 1.25;
}
.compteur span:first-child { font-weight: 700; }
.compteur strong { font-family: var(--f-mono); font-size: 1.25rem; justify-self: end; font-variant-numeric: tabular-nums; }
.compteur span:last-child { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--encre-2); }
.compteur.demande { border-left-color: var(--demande); } .compteur.offre { border-left-color: var(--offre); } .compteur.echanges { border-left-color: var(--equilibre); }
/* le bilan : une phrase ET un fond (jamais la couleur seule) ; hauteur fixe pour que la halle ne bouge pas */
.bilan-marche { margin: 0; padding: 6px 10px; border-radius: 10px; border-left: 4px solid var(--gris); background: #f3f5f9; min-height: calc(2.8em + 12px); line-height: 1.4; }
.bilan-marche[data-ton="exces-demande"] { background: var(--demande-fond); border-left-color: var(--demande); }
.bilan-marche[data-ton="exces-offre"] { background: var(--offre-fond); border-left-color: var(--offre); }
.bilan-marche[data-ton="equilibre"] { background: var(--equilibre-fond); border-left-color: var(--equilibre); }
.bilan-ines { margin: 0; padding: 4px 10px; border-left: 4px dashed var(--equilibre); }
.legende-halle { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--t-xs); color: var(--encre-2); }
.leg::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; border-radius: 3px; }
.leg-achete::before { background: var(--demande); } .leg-bredouille::before { border: 2px dashed var(--demande); width: 7px; height: 7px; }
.leg-renonce::before { background: #c3cbd8; } .leg-vend::before { background: #f2c94c; border: 1.5px solid #7a5527; border-radius: 50%; }
.leg-invendu::before { background: repeating-linear-gradient(45deg, #fff7e6 0 2px, #7a5527 2px 4px); } .leg-garde::before { background: #e3e8ef; border: 1px solid #8a94a6; }
.carnet { display: grid; gap: 2px; min-width: 0; }
.titre-carnet { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
.bloc-carnet { position: relative; height: 140px; border-radius: 10px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(31, 41, 55, 0.12); }
.point-carnet { fill: var(--equilibre); stroke: #ffffff; stroke-width: 1.5; }
.point-carnet.actuel { fill: #ffffff; stroke: var(--equilibre); stroke-width: 3; }
.bande-equilibre-carnet { fill: var(--equilibre-fond); }
.commandes .petit-carre { min-width: 34px; padding: 4px 10px; font-family: var(--f-mono); font-weight: 700; }
.commandes input[type=range]:disabled { opacity: 0.45; }

/* ---------- graphiques (js/vue-graphe.js) ---------- */
.vue-graphe { position: absolute; inset: 0; --k: 1; }
.vue-graphe-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vue-graphe-poignees { position: absolute; inset: 0; pointer-events: none; }
.grille-graphe { stroke: var(--grille); stroke-width: 1; }
.axe-graphe { stroke: var(--trait); stroke-width: 1.4; }
.graduation { font-family: var(--f-mono); font-size: calc(11px * var(--k)); fill: #374151; }
.titre-axe, .legende-graphe { font-family: var(--f-texte); font-size: calc(12px * var(--k)); font-weight: 600; fill: var(--encre); paint-order: stroke; stroke: rgba(255, 255, 255, 0.95); stroke-width: 3px; stroke-linejoin: round; }
.etiq-graphe { font-family: var(--f-texte); font-size: calc(12.5px * var(--k)); font-weight: 700; paint-order: stroke; stroke: rgba(255, 255, 255, 0.95); stroke-width: 3px; stroke-linejoin: round; }
.etiq-graphe.demande { fill: var(--demande); } .etiq-graphe.offre { fill: var(--offre); }
.escalier { fill: none; stroke-width: 2.6; stroke-linejoin: round; }
.escalier.fin { stroke-width: 2; }
.escalier.demande { stroke: var(--demande); } .escalier.offre { stroke: var(--offre); }
.modele { stroke-width: 2.2; stroke-dasharray: 8 6; fill: none; }
.modele.demande { stroke: #0b3b80; } .modele.offre { stroke: #7a2c06; }
.icone.demande { fill: var(--demande); } .icone.offre { fill: var(--offre); }
.repere-equilibre { stroke: var(--equilibre); stroke-width: 1.4; stroke-dasharray: 4 4; }
.intervalle-equilibre { stroke: var(--equilibre); stroke-width: 7; stroke-linecap: round; opacity: 0.55; }
.point-equilibre { fill: #ffffff; stroke: var(--equilibre); stroke-width: 3; }
.ligne-prix { stroke: var(--equilibre); stroke-width: 2; }
.ligne-quantite { stroke: #0f766e; stroke-width: 2; stroke-dasharray: 6 4; }
.ecart-ligne { stroke-width: 7; stroke-linecap: round; opacity: 0.4; }
.ecart-ligne.demande { stroke: var(--demande); } .ecart-ligne.offre { stroke: var(--offre); }
.marque { stroke: #ffffff; stroke-width: 2; }
.marque.demande { fill: var(--demande); } .marque.offre { fill: var(--offre); }
/* une poignée de graphique : zone de 44 px pour le doigt ; seule elle bloque le défilement au doigt */
.poignee-graphe {
  position: absolute; left: 0; top: 0; pointer-events: auto; touch-action: none; display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent; outline: none;
}
.poignee-graphe.horizontale { width: 78px; height: 44px; margin-left: -78px; margin-top: -22px; cursor: ns-resize; }
.poignee-graphe.verticale { width: 56px; height: 44px; margin-left: -28px; margin-top: -22px; cursor: ew-resize; }
.poignee-graphe-rond {
  min-width: 34px; padding: 3px 8px; border-radius: 999px; background: var(--equilibre); color: #ffffff; font-family: var(--f-mono);
  font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: 0 0 0 2px #ffffff, var(--ombre); transition: transform 0.12s;
}
.poignee-graphe.quantite .poignee-graphe-rond { background: #0f766e; }
.poignee-graphe:hover .poignee-graphe-rond, .poignee-graphe.tire .poignee-graphe-rond { transform: scale(1.08); }
.poignee-graphe:focus-visible .poignee-graphe-rond { outline: 3px solid var(--accent); outline-offset: 3px; }
.poignee-graphe.inactif { visibility: hidden; }

/* ---------- de la foule aux courbes : les cartes à ranger ---------- */
.zone-ranger { display: grid; gap: 6px; }
.consigne-ranger { margin: 0; font-size: var(--t-s); font-weight: 600; }
.cartes-personnes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); gap: 6px; }
.carte-personne {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 2px 8px; text-align: left; min-height: 44px;
  padding: 5px 9px; border-radius: 10px; border: 1px solid var(--ligne); border-left-width: 5px; background: var(--surface); color: var(--encre); font-size: var(--t-s);
}
.carte-personne.demande { border-left-color: var(--demande); } .carte-personne.offre { border-left-color: var(--offre); }
.carte-personne:hover:not(:disabled) { border-color: var(--accent); }
.carte-personne:disabled { cursor: default; background: var(--surface-2); color: var(--encre); }
.icone-carte svg { width: 22px; height: 22px; display: block; }
.carte-personne.demande .icone-carte svg { fill: var(--demande); } .carte-personne.offre .icone-carte svg { fill: var(--offre); }
.rang-carte { grid-column: 2; font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 700; color: var(--encre); }
.lecture-ligne { margin: 0; line-height: 1.4; }
.lecture-ligne.prix { border-left: 4px solid var(--equilibre); padding-left: 8px; }
.lecture-ligne.quantite { border-left: 4px dashed #0f766e; padding-left: 8px; }
.scene-foule .bilan-marche { min-height: 0; }
.legende-courbes { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--t-xs); color: var(--encre-2); }
.legende-courbes span::before { content: ""; display: inline-block; width: 18px; height: 0; margin-right: 6px; vertical-align: 3px; border-top: 3px solid; }
.legende-courbes .l-demande::before { border-color: var(--demande); }
.legende-courbes .l-offre::before { border-color: var(--offre); }
.legende-courbes .l-modele::before { border-top-style: dashed; border-color: #0b3b80; }
.legende-courbes .l-prix::before { border-color: var(--equilibre); }

/* ---------- la criée aux poissons : cadran, jauges, carnet des annonces ---------- */
.scene-marche > .cadran { grid-row: 1; }
.scene-marche > .bloc-criee { grid-row: 2; }
.cadran {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; justify-self: center; padding: 6px 18px;
  border-radius: 12px; background: #10243f; color: #ffffff; border: 3px solid #4b6a91; box-shadow: var(--ombre);
}
.cadran-titre, .cadran-info { font-size: var(--t-s); color: #dbe6f5; }
.cadran-prix { font-family: var(--f-mono); font-size: 1.6rem; line-height: 1.1; color: #ffd166; font-variant-numeric: tabular-nums; }
.bloc-criee { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px; min-height: 0; min-width: 0; }
.bloc-jauges, .bloc-carnet-criee {
  position: relative; min-height: 0; min-width: 0; border-radius: 14px; overflow: hidden;
  background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(31, 41, 55, 0.12); box-shadow: var(--ombre);
}
.jauges-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.grille-jauge { stroke: var(--grille); stroke-width: 1; }
.jauge-cadre { fill: #ffffff; stroke-width: 2; }
.jauge-cadre.demande { stroke: var(--demande); } .jauge-cadre.offre { stroke: var(--offre); }
.jauge-niveau.demande { fill: var(--demande); }
.jauge-niveau.offre { fill: url(#hachures-offre); stroke: var(--offre); stroke-width: 2; }
.jauge-valeur { font-family: var(--f-mono); font-weight: 700; font-size: 18px; }
.jauge-valeur.demande, .jauge-titre.demande { fill: var(--demande); } .jauge-valeur.offre, .jauge-titre.offre { fill: var(--offre); }
.jauge-titre { font-family: var(--f-titre); font-weight: 700; font-size: 15px; }
.jauge-sous { font-size: 12px; fill: #4b5563; }
.jauge-signe { font-family: var(--f-mono); font-weight: 700; font-size: 34px; fill: var(--equilibre); }
.bande-fourchette { fill: var(--equilibre-fond); }
.limite-six { stroke: var(--gris); stroke-width: 1.4; stroke-dasharray: 5 4; }
.etiq-limite { font-family: var(--f-texte); font-size: calc(11.5px * var(--k)); font-weight: 600; fill: #374151; paint-order: stroke; stroke: rgba(255, 255, 255, 0.95); stroke-width: 3px; stroke-linejoin: round; }
.trace-annonces { fill: none; stroke: var(--gris); stroke-width: 1.6; stroke-dasharray: 4 3; }
.point-annonce { stroke: #ffffff; stroke-width: 1.5; }
.point-annonce.demande { fill: var(--demande); } .point-annonce.offre { fill: var(--offre); }
.point-annonce.equilibre { fill: #ffffff; stroke: var(--equilibre); stroke-width: 3.5; }
.scene-criee .lecture-marche { grid-template-columns: minmax(0, 1fr); }
.fourchette-criee { margin: 0; padding-left: 8px; border-left: 4px solid var(--equilibre); line-height: 1.4; }
.legende-criee { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--t-xs); color: var(--encre-2); }
.legende-criee .s { font-family: var(--f-mono); font-weight: 700; margin-right: 4px; }
.legende-criee .s.demande { color: var(--demande); } .legende-criee .s.offre { color: var(--offre); } .legende-criee .s.equilibre { color: var(--equilibre); }
.liste-annonces { margin: 0; padding-left: 0; list-style: none; font-size: var(--t-xs); columns: 2 18em; column-gap: 20px; }
.liste-annonces li { break-inside: avoid; }

/* ---------- thème 2 : droites, déplacements (chocs sur le café, pentes) ---------- */
.scene-marche > .zone-cartes, .scene-marche > .tete-pentes, .scene-marche > .tete-gazole { grid-row: 1; }
.droite { fill: none; stroke-width: 3; stroke-linecap: round; }
.droite.demande { stroke: var(--demande); } .droite.offre { stroke: var(--offre); }
/* la courbe d'avant le choc : tirets fins (pas seulement une couleur plus pâle) */
.droite.ancienne { stroke-width: 1.8; stroke-dasharray: 7 6; }
.droite.nouvelle { stroke-width: 3.6; }
/* déplacement DE la courbe : large flèche pleine de la couleur de la courbe ; LE LONG d'une courbe : pointillés violets */
.fleche-deplacement { fill: none; stroke-width: 9; stroke-opacity: 0.4; stroke-linecap: butt; }
.fleche-deplacement.demande { stroke: var(--demande); } .fleche-deplacement.offre { stroke: var(--offre); }
.pointe-deplacement.demande { fill: var(--demande); } .pointe-deplacement.offre { fill: var(--offre); }
.le-long { fill: none; stroke: var(--equilibre); stroke-width: 4.5; stroke-dasharray: 1 7; stroke-linecap: round; }
.etiq-deplacement, .etiq-le-long, .etiq-equilibre {
  font-family: var(--f-texte); font-size: calc(12px * var(--k)); font-weight: 700; paint-order: stroke; stroke: rgba(255, 255, 255, 0.95); stroke-width: 5px; stroke-linejoin: round;
}
.etiq-deplacement.demande { fill: var(--demande); } .etiq-deplacement.offre { fill: var(--offre); }
.etiq-le-long, .etiq-equilibre { fill: var(--equilibre); }
.point-equilibre.nouveau { fill: var(--equilibre); stroke: #ffffff; stroke-width: 2.5; }
.legende-courbes .l-ancienne::before { border-top: 2px dashed var(--gris); }
.legende-courbes .l-deplacement::before { border-top: 7px solid rgba(180, 67, 11, 0.45); }
.legende-courbes .l-le-long::before { border-top: 3px dotted var(--equilibre); }
.bilan-marche[data-ton="faux"] { background: #fff4e5; border-left-color: #b45309; }
.compteurs.compteurs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compteur.prix-choc { border-left-color: var(--equilibre); } .compteur.quantite-choc { border-left-color: #0f766e; } .compteur.cout { border-left-color: var(--offre); }

/* les cartes événements (chocs sur le café) : à prendre et à poser ; la poignée ⠿ seule bloque le défilement au doigt */
.zone-cartes { display: grid; gap: 6px; }
.titre-cartes { margin: 0; font-size: var(--t-s); font-weight: 600; }
.cartes-choc { display: flex; flex-wrap: wrap; gap: 6px; }
.carte-choc {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px 4px 4px; border-radius: 10px;
  border: 1px solid #8a94a6; background: var(--surface); color: var(--encre); font-size: var(--t-s); font-weight: 600; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.carte-choc:hover { border-color: var(--accent); }
/* à la souris (ordinateur), des cartes et des cases plus basses : la scène tient mieux sur l'écran ; au doigt, 44 px */
@media (pointer: fine) {
  .carte-choc { min-height: 36px; padding-top: 2px; padding-bottom: 2px; }
  .cible-choc { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
}
.poignee-carte {
  display: inline-grid; place-items: center; width: 30px; align-self: stretch; border-radius: 7px; background: var(--surface-2); color: #4b5563;
  font-size: 1.05rem; cursor: grab; touch-action: none;
}
.carte-choc.prise { border: 2px solid var(--accent); background: var(--accent-doux); box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--accent); }
.carte-choc.placee { border-style: dashed; background: #f0fdf4; }
.etat-carte { font-weight: 700; color: var(--bon-fonce); min-width: 1ch; }
.carte-en-main { margin: 0; padding: 6px 10px; border-radius: 10px; border: 2px solid var(--accent); background: var(--accent-doux); font-weight: 600; }
.carte-en-main.vide { border: 1px dashed #8a94a6; background: transparent; font-weight: 400; color: var(--encre-2); }
.cibles-choc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 6px; }
.cible-choc {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: center; text-align: left; min-height: 48px;
  padding: 6px 10px; border-radius: 10px; border: 1px solid var(--ligne); border-left-width: 6px; background: var(--surface); color: var(--encre); font-size: var(--t-s); font-weight: 700;
}
.cible-choc.demande { border-left-color: var(--demande); } .cible-choc.offre { border-left-color: var(--offre); border-left-style: double; border-left-width: 7px; }
.cible-choc.aucune { border-left-color: var(--equilibre); border-left-style: dotted; }
.fleche-cible { font-family: var(--f-mono); font-size: 1.3rem; line-height: 1; }
.cible-choc.demande .fleche-cible { color: var(--demande); } .cible-choc.offre .fleche-cible { color: var(--offre); } .cible-choc.aucune .fleche-cible { color: var(--equilibre); }
.sous-cible { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--encre-2); }
.cibles-choc.actives .cible-choc { border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; border-color: var(--accent); background: #f8faff; }
.cibles-choc.actives .cible-choc.demande { border-left-color: var(--demande); } .cibles-choc.actives .cible-choc.offre { border-left-color: var(--offre); } .cibles-choc.actives .cible-choc.aucune { border-left-color: var(--equilibre); }
.cible-choc:hover, .cible-choc.survol { background: var(--accent-doux); border-color: var(--accent); }
.fantome-carte {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; padding: 8px 12px; border-radius: 10px; background: var(--accent); color: #ffffff;
  font-weight: 700; font-size: var(--t-s); box-shadow: var(--ombre);
}

/* pente raide, pente douce : compteurs en tête, carnet en tableau */
.compteurs.compteurs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.carnet-pentes { overflow-x: auto; }
.carnet-pentes .tableau td, .carnet-pentes .tableau th { white-space: nowrap; }
/* sur téléphone, les titres de colonnes longs et « 200,00 € → 226,56 € » passent à la ligne (les nombres restent
   entiers : espaces insécables) ; le carnet tient dans sa boîte */
.carnet-pentes .tableau thead th { white-space: normal; min-width: 5.5em; }
@media (max-width: 560px) { .carnet-pentes .tableau td, .carnet-pentes .tableau th { white-space: normal; } .carnet-pentes .tableau th, .carnet-pentes .tableau td { padding: 4px 3px; } .carnet-pentes .tableau thead th { min-width: 0; hyphens: auto; } .carnet-pentes .tableau td { font-size: 0.74rem; } }

/* le prix du gazole : cadran du mois, épisodes, série, fiche de l'épisode */
.tete-gazole { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.cadran.cadran-gazole { margin: 0; justify-self: start; }
.puces-episodes { display: flex; flex-wrap: wrap; gap: 6px; }
.puce-episode {
  display: inline-flex; gap: 6px; align-items: center; min-height: 36px; padding: 4px 10px; border-radius: 999px; border: 1px dashed #8a94a6;
  background: var(--surface); color: var(--encre-2); font-size: var(--t-xs); font-weight: 600;
}
.puce-episode .num { font-family: var(--f-mono); font-weight: 700; }
.puce-episode.a-placer { border: 2px solid #b45309; color: #7c2d12; background: #fff7ed; }
.puce-episode.placee { border: 1px solid var(--bon); color: var(--bon-fonce); background: #f0fdf4; }
.puce-episode .etat { font-weight: 700; }
.serie-gazole { fill: none; stroke: #1f2937; stroke-width: 2.4; stroke-linejoin: round; }
.point-serie { fill: #1f2937; }
.bande-episode { fill: #fff3cd; stroke: #c9a227; stroke-width: 1; }
.bande-episode.placee { fill: #efe7fd; }
.numero-episode { font-family: var(--f-mono); font-size: calc(12px * var(--k)); font-weight: 700; fill: #6b4f00; }
.manquant-gazole { font-family: var(--f-mono); font-size: calc(15px * var(--k)); font-weight: 700; fill: #b42318; }
.repere-gazole { fill: #0f766e; stroke: #ffffff; stroke-width: 2.5; }
.repere-gazole.b { fill: var(--niv-1re); }
.poignee-graphe.date-b .poignee-graphe-rond { background: var(--niv-1re); }
.variation-gazole { border-left-color: var(--niv-1re); }
.fiche-episode { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--ligne); border-left: 5px solid #b45309; }
.fiche-episode[data-etat="place"] { border-left-color: var(--bon); }
.fiche-episode h3 { font-size: var(--t-m); font-weight: 720; }
.fiche-episode p { margin: 0; }
.fiche-choc { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 10px; align-items: start; }
.schema-choc { width: 100%; height: auto; background: #fbfcfe; border: 1px solid var(--ligne); border-radius: 10px; }
.schema-choc .graduation { font-size: 11px; }
.schema-choc .etiq-graphe { font-size: 13px; }
.question-episode { font-weight: 700; }
.choix-episode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.choix-choc {
  min-height: 44px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--ligne); border-left-width: 6px; background: var(--surface); color: var(--encre);
  font-size: var(--t-s); font-weight: 700; text-align: left;
}
.choix-choc.demande { border-left-color: var(--demande); } .choix-choc.offre { border-left-color: var(--offre); border-left-style: double; border-left-width: 7px; }
.choix-choc:hover { border-color: var(--accent); }
.choix-choc.juste { background: var(--bon-doux); border-color: var(--bon); color: var(--bon-fonce); }
.choix-choc.juste::after { content: " ✓"; }
.choix-choc.faux { background: #fff4e5; border-style: dashed; }
.choix-choc.faux::after { content: " ✗"; }
.indice-episode { padding: 6px 10px; border-left: 4px solid #b45309; background: #fff7ed; border-radius: 0 8px 8px 0; margin-top: 6px !important; }
.explication-episode { display: grid; gap: 6px; }
.explication-episode .prudence { padding-left: 10px; border-left: 4px dotted var(--equilibre); }
.explication-episode .retour-episode { padding-left: 10px; border-left: 4px solid var(--bon); font-weight: 600; }
.attente-explication { color: var(--encre-2); font-style: italic; }
.source-gazole { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
.tableau-gazole summary { cursor: pointer; font-weight: 700; font-size: var(--t-s); min-height: 24px; }
.defile-tableau { overflow-x: auto; }
.tableau-gazole .tableau { min-width: 420px; }

/* taxe et subvention ; plafond et plancher (thème 2, seconde moitié) */
.scene-marche > .tete-taxe, .scene-marche > .bandeau-plafond { grid-row: 1; }
.compteurs.compteurs-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.compteurs-4 .compteur { grid-template-columns: minmax(0, 1fr); align-content: start; }
.compteurs-4 .compteur span:first-child { font-size: var(--t-xs); line-height: 1.25; }
.compteurs-4 .compteur strong { justify-self: start; font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; }
.compteur.etat { border-left-color: #0f766e; border-left-style: double; border-left-width: 7px; }
.rect-etat { fill: url(#ts-motif-etat); stroke: #0f766e; stroke-width: 1.5; }
.dessin-plafond .rect-etat { fill: url(#pp-motif-etat); }
.rect-etat.contour, .dessin-plafond .rect-etat.contour { fill: none; stroke-width: 2.5; stroke-dasharray: 9 5; }
.motif-etat { stroke: #0f766e; stroke-width: 2; opacity: 0.55; }
.motif-acheteurs { stroke: var(--demande); stroke-width: 1.6; opacity: 0.7; }
.motif-vendeurs { stroke: var(--offre); stroke-width: 1.6; opacity: 0.7; }
.aire-acheteurs { fill: url(#ts-motif-acheteurs); stroke: var(--demande); stroke-width: 1; }
.aire-vendeurs { fill: url(#ts-motif-vendeurs); stroke: var(--offre); stroke-width: 1; }
.dessin-plafond .aire-acheteurs { fill: url(#pp-motif-acheteurs); }
.dessin-plafond .aire-vendeurs { fill: url(#pp-motif-vendeurs); }
.aire-perte { fill: rgba(107, 114, 128, 0.45); stroke: #374151; stroke-width: 1.5; }
/* le lait produit pour rien (plancher) : gris à points, distinct du triangle plein */
.aire-pour-rien { fill: url(#pp-motif-pour-rien); stroke: #374151; stroke-width: 1.5; stroke-dasharray: 3 3; }
.motif-pour-rien { fill: #4b5563; }
.repere-prix { stroke-width: 1.6; stroke-dasharray: 5 4; }
.repere-prix.paye { stroke: var(--equilibre); } .repere-prix.recu { stroke: var(--offre); }
.etiq-prix, .etiq-etat, .etiq-aire, .etiq-regle, .etiq-ecart, .etiq-quantite {
  font-family: var(--f-texte); font-size: calc(12px * var(--k)); font-weight: 700; paint-order: stroke; stroke: rgba(255, 255, 255, 0.95); stroke-width: 5px; stroke-linejoin: round;
}
.etiq-prix.paye { fill: var(--equilibre); } .etiq-prix.recu { fill: #9a3412; }
.etiq-etat { fill: #0b5e57; }
.etiq-aire.acheteurs { fill: #174ea6; } .etiq-aire.vendeurs { fill: #9a3412; } .etiq-aire.perte { fill: #1f2937; }
.point-paye { fill: var(--equilibre); stroke: #ffffff; stroke-width: 2.5; }
.point-recu { fill: #ffffff; stroke: var(--equilibre); stroke-width: 3; }
.legende-courbes .l-paye::before { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--equilibre); vertical-align: -1px; }
.legende-courbes .l-recu::before { width: 8px; height: 8px; border: 3px solid var(--equilibre); border-radius: 50%; background: #ffffff; vertical-align: -1px; }
.legende-courbes .l-etat::before { height: 12px; border: 1.5px solid #0f766e; background: repeating-linear-gradient(0deg, rgba(15, 118, 110, 0.55) 0 2px, transparent 2px 6px); vertical-align: -1px; }
.legende-courbes .l-acheteurs::before { height: 12px; border: 1px solid var(--demande); background: repeating-linear-gradient(-45deg, rgba(29, 95, 191, 0.7) 0 1.5px, transparent 1.5px 6px); vertical-align: -1px; }
.legende-courbes .l-vendeurs::before { height: 12px; border: 1px solid var(--offre); background: repeating-linear-gradient(45deg, rgba(180, 67, 11, 0.7) 0 1.5px, transparent 1.5px 6px); vertical-align: -1px; }
.legende-courbes .l-perte::before { height: 12px; border: 1.5px solid #374151; background: rgba(107, 114, 128, 0.45); vertical-align: -1px; }
.legende-courbes .l-pour-rien::before { height: 12px; border: 1.5px dashed #374151; background: radial-gradient(circle, #4b5563 1.3px, transparent 1.6px) 0 0 / 6px 6px; vertical-align: -1px; }
.legende-courbes .l-regle::before { border-top: 3px dashed #111827; }
.surplus-taxe { overflow-x: auto; }
.surplus-taxe[hidden] { display: none; }
.tableau-surplus th[scope=row] { text-align: left; font-weight: 600; font-size: var(--t-s); }
.tableau-surplus tr.total th, .tableau-surplus tr.total td { font-weight: 700; border-top: 2px solid var(--ligne); }
.phrase-surplus { margin: 6px 0 0; font-size: var(--t-s); line-height: 1.4; }
/* plafond et plancher : la ligne de la règle, le bandeau (logements et file, ou lait et stocks) */
.ligne-regle { stroke: #111827; stroke-width: 3; stroke-dasharray: 14 6; }
.etiq-regle { fill: #111827; }
.poignee-graphe.regle .poignee-graphe-rond { background: #111827; }
.point-offre { fill: var(--offre); stroke: #ffffff; stroke-width: 2; }
.point-demande { fill: var(--demande); stroke: #ffffff; stroke-width: 2; }
.repere-quantite { stroke-width: 1.4; stroke-dasharray: 3 4; }
.repere-quantite.offre { stroke: var(--offre); } .repere-quantite.demande { stroke: var(--demande); }
.etiq-quantite.offre { fill: #9a3412; } .etiq-quantite.demande { fill: #174ea6; }
.fleche-ecart { fill: none; stroke: #1f2937; stroke-width: 2; stroke-linejoin: round; }
.etiq-ecart { fill: #1f2937; }
.bandeau-plafond { display: grid; gap: 4px; padding: 6px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(31, 41, 55, 0.12); }
.rang-bandeau { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.titre-rang { margin: 0; font-size: var(--t-xs); line-height: 1.35; }
.titre-rang span { color: var(--encre-2); }
.icones-rang { width: 100%; max-width: 612px; height: 16px; display: block; }
.icone.loue { fill: var(--offre); }
.icone.candidat { fill: none; stroke: var(--demande); stroke-width: 1.4; }
.icone.vendu { fill: var(--demande); }
.icone.stock { fill: #fff7ed; stroke: #9a3412; stroke-width: 1.3; }

/* ---------- thème 3 : la boulangerie de Lina, dessine ta courbe d'offre ---------- */
.scene-marche > .tete-boulangerie, .scene-marche > .tete-courbe-offre { grid-row: 1; }
.scene-boulangerie { grid-template-rows: auto auto auto auto; align-content: start; }
.scene-boulangerie > .bloc-boulangerie { grid-row: 2; }
.scene-boulangerie > .graphe-cm { grid-row: 3; height: 280px; }
.scene-boulangerie > .lecture-marche { grid-row: 4; }
.compteur.production { border-left-color: #92400e; }
.compteur.recette { border-left-color: var(--equilibre); }
.compteur.profit { border-left-color: #0f766e; border-left-style: double; border-left-width: 7px; }
.compteur.profit[data-ton="perte"] { border-left-color: #374151; border-left-style: dashed; border-left-width: 5px; }
.bloc-boulangerie { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 8px; min-width: 0; }
.fournil, .boite-barres {
  min-width: 0; border-radius: 14px; padding: 6px 8px 8px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(31, 41, 55, 0.12); box-shadow: var(--ombre);
}
.titre-fournil { margin: 0 0 4px; font-size: var(--t-xs); color: var(--encre-2); font-weight: 600; }
.fournees { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.fournee {
  display: grid; align-content: start; gap: 1px; min-width: 0; padding: 3px 4px; border: 2px dashed #8b95a5; border-radius: 8px; background: #ffffff;
  font-size: var(--t-xs); line-height: 1.25; text-align: center; overflow-wrap: anywhere;
}
.fournee.cuite { border-style: solid; border-color: #92400e; background: #fdecc8; }
.fournee-num { font-weight: 700; }
.fournee-cout { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
/* une jauge par fournée : sa longueur suit le coût de la fournée (chacune coûte plus que la précédente) */
.fournee-jauge { display: block; height: 5px; border-radius: 3px; background: #e5e7eb; overflow: hidden; }
.fournee-jauge span { display: block; height: 100%; background: var(--offre); }
.fournee-cm { color: #9a3412; }
.fournee-gain { font-weight: 700; }
.fournee-gain[data-ton="gain"] { color: #0b5e57; } .fournee-gain[data-ton="perte"], .fournee-gain[data-ton="nul"] { color: #374151; }
.fournee-etat { color: #374151; }
.fournee.cuite .fournee-etat { color: #7c2d12; font-weight: 700; }
.barres-svg { display: block; width: 100%; height: auto; max-height: 300px; }
.axe-barres { stroke: #1f2937; stroke-width: 1.6; }
.barre-recette { fill: var(--equilibre); }
.barre-cout { fill: url(#bl-motif-cout); stroke: var(--offre); stroke-width: 2; }
.barre-profit { fill: #0f766e; }
.barre-perte { fill: url(#bl-motif-perte); stroke: #374151; stroke-width: 2; }
.motif-perte { stroke: #4b5563; stroke-width: 1.4; }
.valeur-barre { font-family: var(--f-mono); font-weight: 700; font-size: 14px; }
.valeur-barre.v-recette { fill: var(--equilibre); } .valeur-barre.v-cout { fill: #9a3412; } .valeur-barre.v-profit { fill: #0b5e57; } .valeur-barre.v-perte { fill: #374151; }
.nom-barre { font-family: var(--f-texte); font-weight: 700; font-size: 13px; fill: #1f2937; }
.titre-barres { font-family: var(--f-texte); font-size: 12.5px; fill: #374151; }
.dessin-boulangerie .aire-vendeurs { fill: url(#bl-motif-vendeurs); }
.dessin-boulangerie .aire-perte { stroke-width: 1; }
.escalier.cout-marginal { stroke: var(--offre); stroke-width: 3; }
.dessin-courbe-offre .escalier.cout-marginal { stroke-width: 2; stroke-dasharray: 7 5; }
.dessin-courbe-offre .escalier.cout-marginal.farine { stroke: #7c2d12; stroke-dasharray: 2 4; }
.ligne-prix.fine { stroke-width: 1.6; stroke-dasharray: 6 4; }
.point-offre-lina { fill: var(--offre); stroke: #ffffff; stroke-width: 2; }
.point-offre-farine { fill: #7c2d12; stroke: #ffffff; stroke-width: 2; }
.marche-egalite { stroke: var(--offre); stroke-width: 3; stroke-dasharray: 2 4; stroke-linecap: round; }
.marche-egalite.farine { stroke: #7c2d12; }
.point-proposition { fill: none; stroke: var(--equilibre); stroke-width: 3; }
.phrase-marginal { margin: 0; padding-left: 8px; border-left: 4px solid var(--offre); line-height: 1.4; }
.carnet-profits .titre-carnet { margin: 0 0 2px; }
.puces-profits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.puces-profits li { padding: 1px 8px; border: 1px solid var(--ligne); border-radius: 999px; background: var(--surface); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.puces-profits li.actuel { border: 2px solid var(--equilibre); }
.puces-profits li.meilleur { font-weight: 700; }
.points-offre p { margin: 0; line-height: 1.4; font-size: var(--t-s); }
.legende-courbes .l-fournee::before { width: 14px; height: 12px; border: 2px solid #92400e; background: #fdecc8; vertical-align: -2px; }
.legende-courbes .l-vide::before { width: 14px; height: 12px; border: 2px dashed #8b95a5; vertical-align: -2px; }
.legende-courbes .l-lina::before { width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--offre); vertical-align: -1px; }
.legende-courbes .l-farine::before { width: 10px; height: 10px; border: 0; background: #7c2d12; vertical-align: -1px; }
.legende-courbes .l-proposition::before { width: 9px; height: 9px; border: 3px solid var(--equilibre); border-radius: 50%; vertical-align: -2px; }

/* ---------- thème 3 : ouvrir ou fermer boutique ---------- */
.scene-marche > .tete-ouvrir, .scene-marche > .tete-qui-gagne { grid-row: 1; }
.scene-ouvrir { grid-template-rows: auto auto auto auto; align-content: start; }
.scene-ouvrir > .rue-boutiques { grid-row: 2; }
.scene-ouvrir > .graphe-ouvrir { grid-row: 3; height: 300px; }
.scene-ouvrir > .lecture-marche { grid-row: 4; }
.compteur.ouvertes { border-left-color: #92400e; }
.compteur.choisie { border-left-color: #111827; border-left-style: double; border-left-width: 7px; }
.rue-boutiques {
  min-width: 0; border-radius: 14px; padding: 6px 8px 8px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(31, 41, 55, 0.12); box-shadow: var(--ombre);
}
.boutiques { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.boutique {
  width: 100%; height: 100%; min-height: 44px; display: grid; align-content: start; justify-items: center; gap: 1px; padding: 3px 2px 4px;
  border: 2px dashed #8b95a5; border-radius: 8px; background: #ffffff; color: var(--encre); font-size: var(--t-xs); line-height: 1.2; text-align: center; overflow-wrap: anywhere;
}
.boutique.ouverte { border-style: solid; border-color: #92400e; background: #fdecc8; }
/* la boutique choisie : bordure double violette ET mot « choisie » (jamais la couleur seule) */
.boutique[aria-pressed="true"] { border: 4px double var(--equilibre); }
.boutique[aria-pressed="true"] .boutique-nom::after { content: " (choisie)"; font-weight: 400; }
.boutique:hover { border-color: var(--accent); }
.facade { width: 100%; max-width: 60px; height: auto; display: block; }
.mur { fill: #f6ead6; stroke: #7a5527; stroke-width: 1; }
.auvent-a { fill: var(--offre); } .auvent-b { fill: #ffffff; stroke: var(--offre); stroke-width: 0.6; }
.vitrine { fill: #fff8e6; stroke: #7a5527; stroke-width: 1; }
.pain { fill: none; stroke: #c9a46a; stroke-width: 0.8; stroke-dasharray: 2 2; }
.pain.cuit { fill: #d08a2c; stroke: #7c2d12; stroke-dasharray: none; }
/* le rideau se lève (s'enroule en haut) : simple transition CSS, aucune boucle d'animation */
.rideau-boutique { transform-box: fill-box; transform-origin: 50% 0; transition: transform 0.45s ease; }
.boutique.ouverte .rideau-boutique { transform: scaleY(0.14); }
.rideau-b-fond { fill: #9aa3b2; stroke: #4b5563; stroke-width: 1; }
.rideau-b-pli { stroke: #4b5563; stroke-width: 0.8; }
.mot-ferme { font-family: var(--f-mono); font-size: 8px; font-weight: 700; fill: #111827; }
.boutique.ouverte .mot-ferme { display: none; }
.boutique-nom { font-weight: 700; }
.boutique-etat { color: #374151; }
.boutique.ouverte .boutique-etat { color: #7c2d12; font-weight: 700; }
.escalier.offre-marche { stroke: var(--offre); stroke-width: 2.4; }
.marche-choisie { stroke: #111827; stroke-width: 5; }
.etiq-choisie { font-family: var(--f-texte); font-size: calc(12px * var(--k)); font-weight: 700; fill: #111827; paint-order: stroke; stroke: rgba(255, 255, 255, 0.95); stroke-width: 5px; stroke-linejoin: round; }
.phrase-changement { margin: 0; padding-left: 8px; border-left: 4px dotted var(--offre); line-height: 1.4; }
.phrase-somme { margin: 0; line-height: 1.4; }
.barre-somme { display: flex; height: 22px; border: 1px solid #8b95a5; border-radius: 6px; overflow: hidden; background: #f3f5f9; }
.barre-somme .morceau {
  display: block; height: 100%; min-width: 2px; border-right: 2px solid #ffffff; background: #ffe2cf; color: #7c2d12;
  font-family: var(--f-mono); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; overflow: hidden; white-space: nowrap;
}
.barre-somme .morceau:nth-child(even) { background: #fbd2b3; }
.barre-somme .morceau.choisi { background: #111827; color: #ffffff; }
.legende-courbes .l-ouverte::before { width: 14px; height: 12px; border: 2px solid #92400e; background: #fdecc8; vertical-align: -2px; }
.legende-courbes .l-fermee::before { width: 14px; height: 12px; border: 2px dashed #4b5563; background: #9aa3b2; vertical-align: -2px; }
.legende-courbes .l-choisie::before { border-top: 5px solid #111827; }
.legende-courbes .l-somme::before { width: 22px; height: 12px; border: 1px solid #8b95a5; background: linear-gradient(90deg, #ffe2cf 0 45%, #ffffff 45% 55%, #fbd2b3 55%); vertical-align: -2px; }

/* ---------- thème 3 : qui gagne à l'échange ? ---------- */
.dessin-qui-gagne .aire-acheteurs { fill: url(#qg-motif-acheteurs); stroke-width: 0.6; }
.dessin-qui-gagne .aire-vendeurs { fill: url(#qg-motif-vendeurs); stroke-width: 0.6; }
.dessin-qui-gagne .aire-perte { stroke-width: 1; }
.piece-acheteur { fill: #cfe0fb; stroke: var(--demande); stroke-width: 1; }
.piece-vendeur { fill: #ffd9bf; stroke: var(--offre); stroke-width: 1; }
.legende-courbes .l-piece-a::before { width: 16px; height: 8px; border: 1px solid var(--demande); border-radius: 4px; background: #cfe0fb; vertical-align: 0; }
.legende-courbes .l-piece-v::before { width: 16px; height: 8px; border: 1px solid var(--offre); border-radius: 1px; background: #ffd9bf; vertical-align: 0; }
.detail-surplus { min-width: 0; }
.detail-surplus summary { cursor: pointer; font-weight: 700; font-size: var(--t-s); min-height: 24px; }
.tableau-qui-gagne { font-size: var(--t-xs); }
.tableau-qui-gagne th, .tableau-qui-gagne td { padding: 2px 4px; text-align: right; }
.tableau-qui-gagne td { font-size: 0.78rem; white-space: nowrap; }
.tableau-qui-gagne thead th { vertical-align: bottom; line-height: 1.2; }
.tableau-qui-gagne th[scope=row] { text-align: center; }

/* ---------- thème 4 : la banque crée de la monnaie ---------- */
.scene-banque { grid-template-rows: auto auto auto; align-content: start; }
.scene-marche > .tete-banque { grid-row: 1; }
.scene-banque > .corps-banque { grid-row: 2; }
.scene-banque > .lecture-marche { grid-row: 3; }
.compteur.masse { border-left-color: #11743a; border-left-width: 7px; border-left-style: double; }
.compteur.encours { border-left-color: var(--demande); }
.compteur.depots { border-left-color: var(--offre); }
.compteur.reserves { border-left-color: var(--equilibre); border-left-style: dashed; }
.corps-banque { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; min-width: 0; }
.bilan-banque, .dossiers-banque {
  min-width: 0; border-radius: 14px; padding: 8px 10px; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(31, 41, 55, 0.12); box-shadow: var(--ombre);
  display: grid; gap: 6px; align-content: start;
}
.titre-bloc { margin: 0; font-weight: 700; font-size: var(--t-s); }
.colonnes-bilan { display: flex; justify-content: center; gap: 18px; height: 170px; }
.colonne-bilan { width: 120px; display: flex; flex-direction: column; gap: 3px; }
.colonne-bilan .pile { flex: 1; display: flex; flex-direction: column-reverse; border-bottom: 2px solid var(--trait); min-height: 0; }
.segment {
  flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 2px;
  border: 1.5px solid; border-bottom-width: 0; font-size: 0.74rem; font-weight: 700; color: #1f2937; line-height: 1.1; text-align: center;
}
.segment.seg-credits { background: #dbe8fc; border-color: var(--demande); }
.segment.seg-reserves { background: repeating-linear-gradient(45deg, #efe7fd 0 4px, #ffffff 4px 8px); border-color: var(--equilibre); }
.segment.seg-depots { background: #ffe2cf; border-color: var(--offre); }
.segment.seg-refinancement { background: repeating-linear-gradient(-45deg, #efe7fd 0 4px, #ffffff 4px 8px); border-color: var(--equilibre); border-style: dashed; }
.segment.seg-fondsPropres { background: #e5e7eb; border-color: #374151; }
.segment.change { box-shadow: inset 0 0 0 3px #111827; }
.segment span { background: rgba(255, 255, 255, 0.85); padding: 0 3px; border-radius: 3px; }
.pied-colonne { font-size: var(--t-xs); text-align: center; font-weight: 700; white-space: nowrap; }
.tables-bilan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.tableau-bilan { font-size: 0.8rem; }
.tableau-bilan caption { text-align: left; font-weight: 700; font-size: var(--t-xs); padding-bottom: 2px; font-family: var(--f-texte); text-transform: none; letter-spacing: normal; color: var(--encre); }
.tableau-bilan th { font-weight: 400; }
.tableau-bilan td { white-space: nowrap; }
.tableau-bilan tr.total th, .tableau-bilan tr.total td { font-weight: 700; border-top: 2px solid var(--trait); }
.tableau-bilan tr.change td, .tableau-bilan tr.change th { background: #fff4c2; }
.tableau-bilan .ecart { display: block; font-size: 0.76rem; }
.ligne-regle { margin: 0; display: grid; gap: 2px; font-size: var(--t-xs); color: var(--encre); }
.liste-dossiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.dossier {
  width: 100%; min-height: 44px; display: grid; gap: 0; padding: 4px 8px; text-align: left; cursor: pointer;
  border: 2px dashed #8b95a5; border-radius: 8px; background: #ffffff; color: var(--encre); font-size: var(--t-xs); line-height: 1.25;
}
.dossier[data-etat="accordee"] { border-style: solid; border-color: #11743a; background: #f0fdf4; }
.dossier[data-etat="refusee"] { border-style: dotted; border-color: #4b5563; background: #f3f4f6; }
.dossier[data-etat="rembourse"] { border-style: solid; border-color: #4b5563; background: #ffffff; }
.dossier[aria-pressed="true"] { border: 4px double var(--equilibre); }
.dossier[aria-pressed="true"] .dossier-qui::after { content: " (dossier ouvert)"; font-weight: 400; }
.dossier:hover { border-color: var(--accent); }
.dossier-qui { font-weight: 700; }
.dossier-montant { font-family: var(--f-mono); }
.fiche-dossier { display: grid; gap: 4px; border-top: 1px solid var(--ligne); padding-top: 6px; }
.fiche-titre { margin: 0; font-weight: 700; font-size: var(--t-s); }
.fiche-texte { margin: 0; font-size: var(--t-xs); line-height: 1.4; }
.actions-dossier { display: flex; flex-wrap: wrap; gap: 6px; }
.actions-dossier button {
  border: 1px solid var(--accent); background: var(--surface); color: var(--accent-fonce); border-radius: 999px; padding: 6px 13px;
  font-size: var(--t-s); font-weight: 600; line-height: 1.2; min-height: 34px; cursor: pointer;
}
.actions-dossier button:hover:not(:disabled) { background: var(--accent-doux); }
.actions-dossier button:disabled { border-color: var(--ligne); color: var(--encre-2); opacity: 0.6; cursor: default; }
.bilan-emprunteur { display: grid; gap: 2px; min-width: 0; }
.bilan-marche[data-ton="hausse"] { background: #dcfce7; border-left-color: #11743a; }
.bilan-marche[data-ton="baisse"] { background: #fee2e2; border-left-color: #b42318; border-left-style: dashed; }
.journal-monnaie { display: grid; gap: 3px; min-width: 0; }
.courbe-masse { width: 100%; height: 64px; display: block; background: #ffffff; border: 1px solid var(--ligne); border-radius: 8px; }
.trace-masse { fill: none; stroke: #11743a; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.repere-depart { stroke: #6b7280; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.journal-gestes { margin: 0; padding-left: 1.6em; font-size: var(--t-xs); }

/* ---------- thème 4 : le taux directeur ---------- */
.scene-taux { display: block; }
.vue-taux { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(280px, 1fr) auto; min-height: 100%; }
.vue-taux[hidden] { display: none; }
.vue-taux > .bloc-graphe { grid-row: 2; }
.compteur.directeur { border-left-color: var(--equilibre); border-left-width: 7px; border-left-style: double; }
.compteur.refi { border-left-color: var(--equilibre); border-left-style: dashed; }
.compteur.credits-taux { border-left-color: #92400e; border-left-style: dashed; }
.compteur.inflation { border-left-color: var(--demande); }
.compteur.activite { border-left-color: #4b5563; border-left-style: dotted; }
.compteur.immobilier, .compteur.investissement { border-left-color: #0f766e; }
.bande-cible { fill: #dcfce7; stroke: #11743a; stroke-width: 1; stroke-dasharray: 3 3; }
.ligne-zero { stroke: #6b7280; stroke-width: 1.2; }
.repere-trimestre { stroke: #6b7280; stroke-width: 1; stroke-dasharray: 2 3; }
.trace-directeur { fill: none; stroke: var(--equilibre); stroke-width: 3.2; stroke-linejoin: round; }
.trace-refi { fill: none; stroke: var(--equilibre); stroke-width: 1.8; stroke-dasharray: 6 4; }
.trace-credits { fill: none; stroke: #92400e; stroke-width: 2.4; stroke-dasharray: 7 4; }
.trace-habitat { fill: none; stroke: #92400e; stroke-width: 2.2; }
.point-habitat { fill: #92400e; }
.trace-inflation { fill: none; stroke: var(--demande); stroke-width: 2.4; }
.point-inflation { fill: var(--demande); }
.trace-activite { fill: none; stroke: #4b5563; stroke-width: 2; stroke-dasharray: 1.5 4; stroke-linecap: round; }
.repere-depot { fill: #ffffff; stroke: var(--equilibre); stroke-width: 3; }
.repere-habitat { fill: #ffffff; stroke: #92400e; stroke-width: 3; }
.etiq-graphe.cible { fill: #11743a; } .etiq-graphe.inflation { fill: var(--demande); } .etiq-graphe.directeur { fill: var(--equilibre); }
.etiq-graphe.credits-taux { fill: #92400e; } .etiq-graphe.activite { fill: #374151; }
.legende-courbes .l-directeur::before { border-color: var(--equilibre); border-top-width: 4px; }
.legende-courbes .l-refi::before { border-color: var(--equilibre); border-top-style: dashed; }
.legende-courbes .l-credits::before { border-color: #92400e; border-top-style: dashed; }
.legende-courbes .l-inflation::before { border-color: var(--demande); }
.legende-courbes .l-activite::before { border-color: #4b5563; border-top-style: dotted; }
.legende-courbes .l-cible::before { height: 10px; border: 1px dashed #11743a; background: #dcfce7; vertical-align: -1px; }
.note-jouet, .source-donnees { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
/* les clés des séries de la BCE (« BSI.M.U2.N.V.L10… ») sont de longs mots : on les coupe plutôt que d'élargir l'écran */
.savais p, .plus-loin-boite p, .texte p, .source-donnees { overflow-wrap: anywhere; }
/* compteurs du taux : libellé au-dessus de la valeur à toutes les largeurs (« −4,00 points » ne tenait pas à côté du libellé
   entre 861 et 1180 px, où le panneau de texte prend de la place) */
.tete-taux .compteur { grid-template-columns: minmax(0, 1fr); align-content: start; }
.tete-taux .compteur strong { justify-self: start; font-size: 1.05rem; overflow-wrap: anywhere; }
.tete-taux .compteur span:first-child { hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 700px) { .corps-banque { grid-template-columns: minmax(0, 1fr); } }

/* ---------- thème 4 : bulle sur les tulipes ---------- */
.compteur.bt-semaine { border-left-color: #4b5563; }
.compteur.bt-prix { border-left-color: var(--equilibre); border-left-width: 7px; border-left-style: double; }
.compteur.bt-ecart { border-left-color: #11743a; }
.compteur.bt-ecart[data-ton="bulle"] { background: #fff4e5; border-left-color: #b45309; border-left-style: dashed; }
.compteur.bt-stock { border-left-color: var(--demande); }
.bt-ligne-valeur { stroke: #11743a; stroke-width: 2; stroke-dasharray: 7 4; }
.bt-ligne-double { stroke: #6b7280; stroke-width: 1.4; stroke-dasharray: 2 3; }
.bt-trace-prix { fill: none; stroke: var(--equilibre); stroke-width: 3.2; stroke-linejoin: round; }
.bt-point { fill: var(--equilibre); }
.bt-point-actuel { fill: #ffffff; stroke: var(--equilibre); stroke-width: 3; }
.bt-trace-ancienne { fill: none; stroke: #8b95a5; stroke-width: 2; stroke-dasharray: 5 4; }
.etiq-graphe.bt-valeur { fill: #11743a; } .etiq-graphe.bt-double { fill: #374151; }
.etiq-graphe.bt-ancienne { fill: #4b5563; } .etiq-graphe.bt-prix { fill: var(--equilibre); }
.legende-courbes .l-bt-prix::before { border-color: var(--equilibre); border-top-width: 4px; }
.legende-courbes .l-bt-valeur::before { border-color: #11743a; border-top-style: dashed; }
.legende-courbes .l-bt-double::before { border-color: #6b7280; border-top-style: dotted; }
.legende-courbes .l-bt-ancienne::before { border-color: #8b95a5; border-top-style: dashed; }
.bt-marchands { display: grid; gap: 3px; min-width: 0; }
.bt-marchands-svg { width: 100%; max-width: 560px; height: auto; display: block; background: #ffffff; border: 1px solid var(--ligne); border-radius: 8px; }
.bt-m { fill: #ffffff; stroke: #374151; stroke-width: 1.2; }
.bt-m.achete { fill: var(--demande); stroke: var(--demande); }
.bt-m.vend { fill: url(#bt-raye); stroke: #b4430b; stroke-width: 1.4; }
.bt-m.echaude { fill: #d1d5db; stroke: #6b7280; }
.bt-barre { stroke: #111827; stroke-width: 1.6; }
.bt-oignon { fill: #7c2d12; }
.bt-marchands-texte, .pb-deposants-texte { margin: 0; font-size: var(--t-xs); }

/* ---------- thème 4 : la panique bancaire ---------- */
.scene-panique { grid-template-rows: auto auto minmax(240px, 1fr) auto; align-content: start; }
.scene-marche > .tete-panique { grid-row: 1; }
.scene-panique > .corps-panique { grid-row: 2; }
.scene-panique > .bloc-graphe { grid-row: 3; }
.scene-panique > .lecture-marche { grid-row: 4; }
.compteur.pb-heure { border-left-color: #4b5563; }
.compteur.pb-heure[data-ton="faillite"], .compteur.pb-fp[data-ton="faillite"] { background: #fee2e2; border-left-color: #b42318; border-left-style: dashed; }
.compteur.pb-heure[data-ton="calme"] { background: #dcfce7; border-left-color: #11743a; }
.compteur.pb-inquiets { border-left-color: var(--offre); }
.compteur.pb-fp { border-left-color: #374151; }
.compteur.pb-fp[data-ton="baisse"] { background: #fff4e5; border-left-style: dashed; }
.corps-panique { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; min-width: 0; }
.pb-guichet, .pb-bilan {
  min-width: 0; border-radius: 14px; padding: 8px 10px; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(31, 41, 55, 0.12); box-shadow: var(--ombre);
  display: grid; gap: 6px; align-content: start;
}
.pb-deposants-svg { width: 100%; max-width: 210px; height: auto; display: block; justify-self: center; }
.pb-d { fill: #ffffff; stroke: #374151; stroke-width: 1.2; }
.pb-d.file { fill: url(#pb-raye); stroke: #b4430b; stroke-width: 1.6; }
.pb-d.paye { fill: #d1d5db; stroke: #6b7280; }
.pb-d.bloque { fill: #1f2937; stroke: #1f2937; }
.pb-d.couvert { stroke: #11743a; stroke-width: 1.6; stroke-dasharray: 2.5 1.5; }
.pb-double { fill: none; stroke: #374151; stroke-width: 1; }
.pb-d.bloque + .pb-double { stroke: #ffffff; }
.pb-signe { font-family: var(--f-mono); font-size: 9px; font-weight: 700; fill: #7c2d12; }
.pb-signe.paye { fill: #111827; } .pb-signe.bloque { fill: #ffffff; }
.pb-barre-file { fill: url(#pb-raye); stroke: #b4430b; stroke-width: 1; }
.pb-trace-inquiets { fill: none; stroke: var(--equilibre); stroke-width: 3; stroke-linejoin: round; }
.pb-point { fill: var(--equilibre); }
.etiq-graphe.pb-inquiets { fill: var(--equilibre); } .etiq-graphe.pb-faillite { fill: #b42318; }
.legende-courbes .l-pb-inquiets::before { border-color: var(--equilibre); border-top-width: 4px; }
.legende-courbes .l-pb-file::before { height: 10px; border: 1px solid #b4430b; background: repeating-linear-gradient(45deg, #fbd2b3 0 2px, #b4430b 2px 3.5px); vertical-align: -1px; }
@media (max-width: 700px) { .corps-panique { grid-template-columns: minmax(0, 1fr); } }

/* ---------- dessin de l'accueil ---------- */
.dessin-accueil { position: absolute; inset: 0; width: 100%; height: 100%; }
.acc-axe { stroke: #1f2937; stroke-width: 2.5; }
.acc-demande { fill: none; stroke: #1d5fbf; stroke-width: 4; stroke-linejoin: round; }
.acc-offre { fill: none; stroke: #b4430b; stroke-width: 4; stroke-linejoin: round; }
.acc-equilibre { stroke: #6d28d9; stroke-width: 2; stroke-dasharray: 5 5; }
.acc-point { fill: #ffffff; stroke: #6d28d9; stroke-width: 4; }
.acc-gens { fill: #1d5fbf; }
.acc-texte { font-family: var(--f-mono); font-size: 15px; font-weight: 600; fill: #1f2937; }
.acc-texte.acc-d { fill: #1d5fbf; } .acc-texte.acc-o { fill: #b4430b; }
.accueil-dessin .legende-dessin { top: auto; bottom: 10px; left: 16px; right: 16px; max-width: none; }

/* =================================================================
   PETITS ÉCRANS, MOUVEMENT RÉDUIT, IMPRESSION
   ================================================================= */
@media (max-width: 860px) {
  .scene-marche { position: relative; inset: auto; overflow: visible; }
  .bloc-graphe { height: min(64vh, 420px); min-height: 300px; }
  .bloc-jauges { height: 270px; }
  .bloc-carnet-criee { height: 270px; }
  .scene-halle .lecture-marche { grid-template-columns: minmax(0, 1fr); }
  .scene-halle .carnet { grid-column: 1; grid-row: auto; }
}
@media (max-width: 520px) {
  .scene-marche { padding: 10px 10px 12px; }
  .compteurs { grid-template-columns: minmax(0, 1fr); }
  .ardoise-prix { font-size: 1.35rem; }
  .bloc-criee { grid-template-columns: minmax(0, 1fr); }
  .cadran-prix { font-size: 1.35rem; }
  .compteurs.compteurs-2, .compteurs.compteurs-3 { grid-template-columns: minmax(0, 1fr); }
  .compteurs.compteurs-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche-choc { grid-template-columns: minmax(0, 1fr); }
  .schema-choc { max-width: 260px; }
  .choix-episode { grid-template-columns: minmax(0, 1fr); }
  .bloc-boulangerie { grid-template-columns: minmax(0, 1fr); }
  .boutiques { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tables-bilan, .liste-dossiers { grid-template-columns: minmax(0, 1fr); }
  .compteurs.compteurs-3.tete-taux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colonnes-bilan { height: 150px; }
}
/* grand écran : la scène a une hauteur fixe ; la figure garde une hauteur lisible (la scène défile au lieu de l'écraser :
   à 1024 × 768, la halle ne faisait plus que 120 px de haut et le graphique de la foule 150 px) */
@media (min-width: 861px) {
  .scene-halle { grid-template-rows: auto minmax(220px, 1fr) auto; }
  .scene-foule { grid-template-rows: auto minmax(260px, 1fr) auto; }
  .scene-criee { grid-template-rows: auto minmax(240px, 1fr) auto; }
  .scene-chocs, .scene-pentes, .scene-gazole, .scene-taxe, .scene-plafond, .scene-courbe-offre, .scene-qui-gagne, .scene-bulle { grid-template-rows: auto minmax(260px, 1fr) auto; }
}
/* écran moyen (861 à 1180 px) : la scène n'a qu'environ 630 px à côté du texte ; le carnet de la halle passe sous les
   compteurs (à côté, les trois compteurs n'avaient que 95 px chacun et leurs nombres se chevauchaient) */
@media (min-width: 861px) and (max-width: 1180px) {
  .corps-banque, .corps-panique { grid-template-columns: minmax(0, 1fr); }
  .compteurs.compteurs-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-halle .lecture-marche { grid-template-columns: minmax(0, 1fr); }
  .scene-halle .carnet { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .agent .mobile, .poignee-graphe-rond, .rideau-boutique { transition: none; }
}
@media print {
  .scene-chocs .zone-cartes, .scene-gazole .puces-episodes { break-inside: avoid; }
  .scene-plafond .bandeau-plafond, .tete-taxe, .surplus-taxe { break-inside: avoid; }
  .tete-boulangerie, .tete-courbe-offre, .bloc-boulangerie, .fournil, .boite-barres { break-inside: avoid; }
  .tete-ouvrir, .rue-boutiques, .tete-qui-gagne, .barre-somme { break-inside: avoid; }
  .tete-banque, .bilan-banque, .dossiers-banque, .journal-monnaie, .tete-taux { break-inside: avoid; }
  .tete-bulle, .bt-marchands, .tete-panique, .pb-guichet, .pb-bilan { break-inside: avoid; }
  .bt-m, .pb-d, .pb-barre-file, .compteur { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .segment, .dossier, .bande-cible { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .barre-somme .morceau { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .fiche-episode, .tableau-gazole { break-inside: avoid; }
}
@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,
  .poignee-graphe, .quiz-actions, .cartes-personnes, .cibles-choc, .carte-en-main, .fantome-carte { display: none !important; }
  main, .ecran { position: static; overflow: visible; }
  .ecran[hidden] { display: none !important; }
  .activite { display: block; }
  .colonne-scene { background: none; }
  .scene, .scene-marche { position: relative; overflow: visible; }
  .scene-marche .bloc-graphe { height: 9cm; box-shadow: none; break-inside: avoid; }
  .scene-halle .bloc-halle { height: 10cm; box-shadow: none; break-inside: avoid; }
  .scene-criee .bloc-criee { height: 8cm; break-inside: avoid; }
  .scene-criee .bloc-jauges, .scene-criee .bloc-carnet-criee { height: 8cm; box-shadow: none; }
  .panneau { border: 0; overflow: visible; padding: 0; }
  .carte, .bloc, .question { box-shadow: none; break-inside: avoid; }
  a { color: inherit; }
}

/* Accueil, tablette et téléphone : l'illustration est plus étroite (commun/scolatools.css) ; la légende passe sous le
   graphique au lieu de le recouvrir */
@media (max-width: 980px) {
  .accueil-dessin { aspect-ratio: auto; display: grid; gap: 2px; padding-bottom: 10px; }
  .dessin-accueil { position: static; display: block; height: auto; }
  .accueil-dessin .legende-dessin { position: static; max-width: none; padding: 0 12px; }
}

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