/* ═══════════════════════════════════════════════════════════════
   STEP by STEP — feuille de style unique
   :root → polices → reset → typographie → layout → composants →
   scène SVG → animations → media queries
═══════════════════════════════════════════════════════════════ */

/* ── :root ── */
:root {
  /* Encre et papier */
  --encre: #1b1b1f;
  --encre-douce: #3a3a44;
  --papier: #fbf6e9;
  --papier-fonce: #efe4c8;
  --papier-ombre: #e2d3ac;
  --blanc: #ffffff;

  /* Couleurs BD */
  --jaune-recitatif: #ffe066;
  --jaune-vif: #ffd23f;
  --rouge-bd: #e63946;
  --rouge-fonce: #b0202c;
  --bleu-bd: #2b6cb0;
  --bleu-clair: #cfe8ff;
  --vert-bd: #2f9e44;
  --orange-bd: #f08c00;
  --violet-bd: #7b4fbf;

  /* États */
  --etat-ok: #40c057;
  --etat-alerte: #fab005;
  --etat-danger: #e03131;
  --etat-neutre: #adb5bd;

  /* Ciel et paysage */
  --ciel-haut: #7cc8f0;
  --ciel-bas: #dff3fb;
  --ciel-orage-haut: #5b6b7d;
  --ciel-orage-bas: #a9b4bf;
  --nuit: #10183a;
  --nuage: #ffffff;
  --nuage-orage: #6b7480;
  --soleil: #ffd23f;
  --soleil-rayon: #ffe9a0;
  --colline-loin: #b9dc8c;
  --colline-proche: #8cc65a;
  --herbe: #5fae3e;
  --herbe-foncee: #3f8a28;
  --terre: #c99a63;
  --roche: #9a8f80;
  --roseau: #6f8f2f;

  /* Village */
  --mur-maison: #f6e3c1;
  --mur-maison-2: #f2c9a0;
  --toit: #c8553d;
  --toit-2: #8e5a3c;
  --fenetre: #8ecae6;

  /* Ouvrages */
  --beton: #d8d2c4;
  --beton-ombre: #b3aa98;
  --beton-sombre: #8f8676;
  --metal: #9fb3bf;
  --metal-fonce: #607585;
  --tuyau: #6d8596;
  --tuyau-boues: #8a5a2b;
  --tuyau-gaz: #e0b030;
  --rambarde: #f2c500;
  --benne: #2f8f6f;
  --benne-fonce: #1f6a51;

  /* Eaux et boues */
  --eau-brute: #8b6f47;
  --eau-decantee: #a8946a;
  --liqueur: #7a5a35;
  --eau-claire: #a6d8e8;
  --eau-traitee: #bfe8f3;
  --boue: #5a3d22;
  --boue-claire: #8a6038;
  --boue-digeree: #3d2a1a;
  --sable: #e3c27a;
  --graisse: #f2d14b;
  --mousse: #c8a46a;
  --refus: #7b8794;
  --refus-2: #e9ecef;
  --odeur: #8fbf3f;
  --riviere-propre: #3aa6d9;
  --riviere-sale: #7d6b3a;
  --eau-profonde-propre: #1f7fb8;
  --eau-profonde-sale: #5b5030;
  --algue: #4f9a2f;
  --plante-eau: #2f8a4a;
  --gravier: #c6b48f;

  /* Énergie */
  --flamme: #ff7b00;
  --flamme-coeur: #ffd23f;
  --eclair: #ffd23f;
  --chaud: #e8590c;
  --froid: #4dabf7;

  /* Personnages */
  --peau: #f1c27d;
  --cheveux: #5b3a29;
  --casque: #ffffff;
  --gilet: #ff8c1a;
  --bande-reflechissante: #e9ecef;
  --chemise: #4c6ef5;
  --vorti: #9be3c8;
  --vorti-fonce: #4fb38f;
  --joue: #ff8fa3;

  /* Poissons */
  --gardon: #c9d3dc;
  --nageoire-rouge: #e8590c;
  --perche: #b5c94a;
  --brochet: #6f8f4a;
  --truite: #c2b59b;
  --point-truite: #c0392b;
  --chevesne: #a9b9c6;
  --chabot: #8a6a45;
  --poisson-mort: #b8b8b8;

  /* Microscope */
  --microscope-fond: #f3f9e6;
  --organisme: #7ec4a5;
  --organisme-fonce: #3f8f6c;
  --amibe: #c3b1e1;
  --thecamoebien: #c9a26b;
  --filament: #8a7a52;

  /* Micro-organismes des dossiers BD */
  --bacterie-nitrifiante: #9fd8f7;
  --bacterie-denitrifiante: #f9b4cf;
  --bacterie-heterotrophe: #d0bfff;
  --bacterie-hydrolytique: #c0eb75;
  --bacterie-acidogene: #ffec99;
  --bacterie-acetogene: #96f2d7;
  --bacterie-methanogene: #ffc078;
  --bacterie-filamenteuse: #e3d3a4;
  --acide: #94d82d;
  --acetate: #38d9a9;

  /* Typographie */
  --police-titre: 'Bangers', 'Impact ajustée', sans-serif;
  --police-texte: 'Comic Neue', 'Comic Sans MS', 'Trebuchet MS', sans-serif;
  --taille-xs: 0.75rem;
  --taille-s: 0.875rem;
  --taille-m: 1rem;
  --taille-l: 1.25rem;
  --taille-xl: 1.6rem;
  --taille-xxl: 2.2rem;
  --taille-titre-couverture: 7rem;

  /* Espacements, traits, rayons */
  --espace-xs: 4px;
  --espace-s: 8px;
  --espace-m: 12px;
  --espace-l: 20px;
  --espace-xl: 32px;
  --trait: 3px;
  --trait-fort: 4px;
  --rayon: 10px;
  --rayon-bulle: 18px;
  --ombre-bd: 5px 5px 0 var(--encre);
  --ombre-bd-legere: 3px 3px 0 var(--encre);

  /* Mise en page */
  --hauteur-hud: 56px;
  --hauteur-pied: 254px;
  --largeur-barre: 360px;
  --largeur-portrait-mado: 170px;
  --largeur-carte-mission: 260px;
  --largeur-modale: 860px;
  --hauteur-jauge: 12px;
  --largeur-valeur-jauge: 6.2em;
  --duree-transition: 0.2s;
}

/* ── Polices auto-hébergées (SIL Open Font License) ── */
@font-face {
  font-family: 'Bangers';
  src: url('../assets/fonts/bangers-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* Si Bangers ne se charge pas (page ouverte en file:// dans Chrome, qui
   bloque alors les polices web), Impact prend le relais : elle est 20 % plus
   large, ramenée ici à la largeur de Bangers pour que les textes tiennent
   dans leurs cases jaunes. */
@font-face {
  font-family: 'Impact ajustée';
  src: local('Impact');
  size-adjust: 82%;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('../assets/fonts/comic-neue-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('../assets/fonts/comic-neue-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--taille-m);
  line-height: 1.35;
  overflow: hidden;
}

button,
input {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

/* ── Typographie ── */
h1,
h2,
h3,
h4 {
  font-family: var(--police-titre);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.05;
}

h2 {
  font-size: var(--taille-xl);
}

h3 {
  font-size: var(--taille-l);
}

h4 {
  font-size: var(--taille-l);
}

strong {
  font-weight: 700;
}

/* ── Layout : écrans ── */
.ecran {
  width: 100vw;
  height: 100vh;
}

.ecran-couverture {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 40%, var(--jaune-recitatif) 0 30%, transparent 31%),
    repeating-conic-gradient(var(--jaune-vif) 0 6deg, var(--papier) 6deg 12deg);
}

.ecran-missions {
  display: flex;
  flex-direction: column;
  gap: var(--espace-l);
  padding: var(--espace-xl);
  overflow-y: auto;
  background-color: var(--papier);
  background-image: radial-gradient(var(--papier-ombre) 1.2px, transparent 1.4px);
  background-size: 14px 14px;
}

.ecran-jeu {
  /* La scène (viewBox 2:1) occupe exactement sa case, sans bandes vides : sa
     hauteur est la plus grande que permettent les minimums de la barre latérale
     et du pied, qui se partagent ensuite le reste. La barre ne longe que la
     scène : le pied prend toute la largeur, sans coin vide sous les cartes. */
  --hauteur-scene: min(
    (100vw - 3 * var(--espace-s) - var(--largeur-barre)) / 2,
    100vh - 4 * var(--espace-s) - var(--hauteur-hud) - var(--hauteur-pied)
  );
  display: grid;
  /* minmax(0, …) : un 1fr seul ne descend pas sous la largeur minimale de son
     contenu (onglets du panneau), ce qui repoussait la barre latérale hors de l'écran. */
  grid-template-columns: calc(2 * var(--hauteur-scene)) minmax(0, 1fr);
  grid-template-rows: var(--hauteur-hud) var(--hauteur-scene) minmax(0, 1fr);
  grid-template-areas:
    "hud hud"
    "scene barre"
    "pied pied";
  gap: var(--espace-s);
  padding: var(--espace-s);
  background-color: var(--papier);
  background-image: radial-gradient(var(--papier-ombre) 1px, transparent 1.2px);
  background-size: 12px 12px;
}

.hud {
  grid-area: hud;
}

.zone-scene {
  grid-area: scene;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
}

.barre-laterale {
  grid-area: barre;
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
  min-height: 0;
  overflow-y: auto;
}

/* Les cartes s'étirent jusqu'au bas de la scène pour que les deux colonnes s'alignent. */
.barre-laterale .carte {
  flex: 1 0 auto;
}

.pied-jeu {
  grid-area: pied;
  display: grid;
  min-height: 0;
}

/* Plein écran : l'usine seule sous le bandeau, sans cartes ni panneau. */
.ecran-jeu.plein-ecran {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--hauteur-hud) minmax(0, 1fr);
  grid-template-areas:
    "hud"
    "scene";
}

.ecran-jeu.plein-ecran .barre-laterale,
.ecran-jeu.plein-ecran .pied-jeu {
  display: none;
}

/* ── Composants : boutons ── */
.bouton {
  border: var(--trait) solid var(--encre);
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: var(--ombre-bd-legere);
  padding: var(--espace-xs) var(--espace-m);
  font-family: var(--police-titre);
  font-size: var(--taille-l);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: transform var(--duree-transition), box-shadow var(--duree-transition), background var(--duree-transition);
}

.bouton:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--encre);
  background: var(--jaune-recitatif);
}

.bouton:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--encre);
}

.bouton:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.bouton:focus-visible {
  outline: var(--trait) dashed var(--bleu-bd);
  outline-offset: 2px;
}

.bouton-principal {
  background: var(--rouge-bd);
  color: var(--blanc);
  font-size: var(--taille-xxl);
  padding: var(--espace-s) var(--espace-xl);
  box-shadow: var(--ombre-bd);
  text-shadow: 2px 2px 0 var(--encre);
}

.bouton-principal:hover:not(:disabled) {
  background: var(--rouge-fonce);
}

.bouton-hud {
  font-size: var(--taille-m);
  padding: 2px var(--espace-s);
}

.bouton-action {
  background: var(--jaune-vif);
  font-size: var(--taille-m);
}

.bouton-danger {
  background: var(--rouge-bd);
  color: var(--blanc);
}

.bouton-actif {
  background: var(--encre);
  color: var(--jaune-vif);
}

.bouton-actif:hover:not(:disabled) {
  background: var(--encre-douce);
}

/* ── Composants : couverture ── */
.couverture {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-s);
  width: min(960px, 94vw);
  padding: var(--espace-l) var(--espace-xl) var(--espace-xl);
  background: var(--papier);
  border: var(--trait-fort) solid var(--encre);
  box-shadow: 10px 10px 0 var(--encre);
  transform: rotate(-1deg);
}

.couverture-numero {
  align-self: flex-start;
  background: var(--rouge-bd);
  color: var(--blanc);
  border: var(--trait) solid var(--encre);
  padding: 2px var(--espace-s);
  font-family: var(--police-titre);
  font-size: var(--taille-l);
  transform: rotate(-4deg);
}

.couverture-titre {
  font-size: var(--taille-titre-couverture);
  color: var(--jaune-vif);
  -webkit-text-stroke: var(--trait) var(--encre);
  text-shadow: 6px 6px 0 var(--encre);
  transform: rotate(-2deg);
}

.couverture-by {
  font-size: 0.45em;
  color: var(--blanc);
  vertical-align: middle;
}

.couverture-sous-titre {
  font-family: var(--police-titre);
  font-size: var(--taille-xxl);
  background: var(--jaune-recitatif);
  border: var(--trait) solid var(--encre);
  padding: 0 var(--espace-m);
  transform: rotate(1.5deg);
}

.couverture-illustration {
  width: 100%;
  height: auto;
}

.couverture-credit {
  font-size: var(--taille-s);
  color: var(--encre-douce);
}

/* ── Composants : choix de mission ── */
.missions-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--espace-m) var(--espace-l);
}

.missions-titre {
  font-size: calc(var(--taille-xxl) * 1.8);
  color: var(--jaune-vif);
  -webkit-text-stroke: 2px var(--encre);
  text-shadow: 4px 4px 0 var(--encre);
}

.missions-intro {
  flex: 1;
  font-weight: 700;
}

.missions-actions {
  display: flex;
  gap: var(--espace-s);
}

.grille-missions {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--largeur-carte-mission), 1fr));
  gap: var(--espace-l);
}

.carte-mission {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
  width: 100%;
  height: 100%;
  padding: var(--espace-m);
  border: var(--trait-fort) solid var(--encre);
  background: var(--blanc);
  box-shadow: var(--ombre-bd);
  text-align: left;
  cursor: pointer;
  transition: transform var(--duree-transition);
}

.carte-mission:hover {
  transform: rotate(-1deg) scale(1.02);
}

.carte-mission:focus-visible {
  outline: var(--trait-fort) dashed var(--bleu-bd);
  outline-offset: 3px;
}

.carte-mission-numero {
  position: absolute;
  top: calc(var(--espace-m) * -1);
  left: calc(var(--espace-m) * -1);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: var(--trait) solid var(--encre);
  border-radius: 50%;
  background: var(--rouge-bd);
  color: var(--blanc);
  font-family: var(--police-titre);
  font-size: var(--taille-xl);
}

.carte-mission-vignette {
  width: 100%;
  height: auto;
  border: var(--trait) solid var(--encre);
  background: var(--ciel-bas);
}

.carte-mission-titre {
  font-size: var(--taille-xl);
}

.carte-mission-accroche {
  font-size: var(--taille-s);
  flex: 1;
}

.carte-mission-pied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--taille-s);
  font-weight: 700;
}

.badge-niveau {
  border: 2px solid var(--encre);
  border-radius: var(--rayon);
  padding: 0 var(--espace-s);
  background: var(--bleu-clair);
}

.badge-niveau[data-niveau="2"] {
  background: var(--jaune-recitatif);
}

.badge-niveau[data-niveau="3"] {
  background: var(--rouge-bd);
  color: var(--blanc);
}

.etoiles {
  font-size: var(--taille-l);
  letter-spacing: 2px;
  color: var(--etat-neutre);
  -webkit-text-stroke: 1px var(--encre);
}

.etoile-gagnee {
  color: var(--jaune-vif);
}

/* ── Composants : HUD ── */
.hud {
  display: flex;
  align-items: center;
  gap: var(--espace-m);
  padding: 0 var(--espace-m);
  border: var(--trait) solid var(--encre);
  background: var(--jaune-recitatif);
  box-shadow: var(--ombre-bd-legere);
}

.hud-logo {
  font-family: var(--police-titre);
  font-size: var(--taille-xl);
  color: var(--rouge-bd);
  -webkit-text-stroke: 1px var(--encre);
  white-space: nowrap;
}

.hud-mission {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-weight: 700;
  font-size: var(--taille-s);
  line-height: 1.1;
}

.hud-mission span:last-child {
  font-family: var(--police-titre);
  font-size: var(--taille-l);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-temps {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  line-height: 1.1;
}

.hud-horloge {
  font-family: var(--police-titre);
  font-size: var(--taille-xl);
  white-space: nowrap;
}

.hud-meteo {
  font-size: var(--taille-xs);
  font-weight: 700;
  white-space: nowrap;
}

.hud-vitesses {
  display: flex;
  gap: var(--espace-xs);
}

.hud-energie {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  padding: 2px var(--espace-xs);
  border: 2px solid transparent;
  border-radius: var(--rayon);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.hud-energie:hover {
  border-color: var(--encre);
  background: var(--blanc);
}

.hud-energie-texte {
  display: flex;
  flex-direction: column;
  font-size: var(--taille-xs);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.icone-hud {
  flex-shrink: 0;
  width: 22px;
  height: auto;
}

.hud-energie:hover .icone-courbe-fond {
  fill: var(--jaune-vif);
}

.hud-boutons {
  display: flex;
  gap: var(--espace-xs);
}

/* Posé dans le coin de la scène : le bandeau n'a plus la place d'un bouton
   de plus en 1280 px de large. */
.bouton-plein-ecran {
  position: absolute;
  top: var(--espace-s);
  right: var(--espace-s);
  padding: var(--espace-xs);
  line-height: 0;
}

.bouton-plein-ecran svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--encre);
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bouton-plein-ecran .icone-sortir,
.bouton-plein-ecran[aria-pressed="true"] .icone-entrer {
  display: none;
}

.bouton-plein-ecran[aria-pressed="true"] .icone-sortir {
  display: inline;
}

/* ── Composants : cartes de la barre latérale ── */
.carte {
  border: var(--trait) solid var(--encre);
  background: var(--blanc);
  box-shadow: var(--ombre-bd-legere);
  padding: var(--espace-s) var(--espace-m);
}

.carte-titre {
  display: inline-block;
  font-size: var(--taille-l);
  background: var(--jaune-recitatif);
  border: 2px solid var(--encre);
  padding: 0 var(--espace-s);
  margin: calc(var(--espace-m) * -1) 0 var(--espace-s);
  transform: rotate(-1.5deg);
}

.liste-objectifs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
  font-size: var(--taille-s);
}

.objectif {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--espace-xs);
  align-items: start;
}

.objectif-icone {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--encre);
  border-radius: 50%;
  font-weight: 700;
  font-size: var(--taille-xs);
  background: var(--blanc);
}

.objectif[data-statut="reussi"] .objectif-icone {
  background: var(--etat-ok);
  color: var(--blanc);
}

.objectif[data-statut="echec"] .objectif-icone {
  background: var(--etat-danger);
  color: var(--blanc);
}

.objectif[data-statut="echec"] .objectif-texte {
  text-decoration: line-through;
  color: var(--encre-douce);
}

.objectif[data-tendance="ok"] .objectif-icone {
  border-color: var(--etat-ok);
}

.objectif[data-tendance="ko"] .objectif-icone {
  border-color: var(--etat-danger);
}

.objectif-etoiles {
  color: var(--orange-bd);
  font-weight: 700;
}

.carte-note {
  font-size: var(--taille-xs);
  margin-top: var(--espace-xs);
  color: var(--encre-douce);
}

/* ── Composants : jauges ── */
.jauge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(36px, 0.6fr) var(--largeur-valeur-jauge);
  align-items: center;
  gap: var(--espace-s);
  font-size: var(--taille-s);
  margin-bottom: 2px;
}

.jauge-libelle {
  font-weight: 700;
  line-height: 1.1;
}

.jauge-valeur {
  grid-column: 3;
  grid-row: 1;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}

.jauge-barre {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  height: var(--hauteur-jauge);
  border: 2px solid var(--encre);
  border-radius: var(--rayon);
  background: var(--papier-fonce);
  overflow: hidden;
}

.jauge-remplissage {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--etat-ok);
  transition: width var(--duree-transition), background var(--duree-transition);
}

.jauge-repere {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--encre);
}

.jauge[data-etat="alerte"] .jauge-remplissage {
  background: var(--etat-alerte);
}

.jauge[data-etat="danger"] .jauge-remplissage {
  background: var(--etat-danger);
}

.jauge[data-etat="danger"] .jauge-valeur {
  color: var(--etat-danger);
}

/* ── Composants : dialogue de Mado ── */
/* En bas de l'écran : les messages renvoient souvent à la scène, qui doit
   rester visible au-dessus. */
.dialogue-mado {
  margin: auto auto var(--espace-xl);
  width: min(880px, 94vw);
  max-height: 92vh;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--encre);
  overflow: visible;
}

.dialogue-mado[open] {
  display: grid;
  grid-template-columns: var(--largeur-portrait-mado) minmax(0, 1fr);
  align-items: end;
  gap: var(--espace-l);
}

.dialogue-mado::backdrop {
  background: rgba(27, 27, 31, 0.35);
}

.mado-portrait {
  width: var(--largeur-portrait-mado);
  height: auto;
}

.bulle {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
  margin-bottom: var(--espace-l);
  padding: var(--espace-l) var(--espace-l) var(--espace-m);
  border: var(--trait-fort) solid var(--encre);
  border-radius: var(--rayon-bulle);
  background: var(--blanc);
  box-shadow: var(--ombre-bd);
}

.bulle::before {
  content: '';
  position: absolute;
  left: -24px;
  bottom: 36px;
  border-width: 14px 24px 14px 0;
  border-style: solid;
  border-color: transparent var(--encre) transparent transparent;
}

.bulle::after {
  content: '';
  position: absolute;
  left: -16px;
  bottom: 40px;
  border-width: 10px 17px 10px 0;
  border-style: solid;
  border-color: transparent var(--blanc) transparent transparent;
}

.bulle-nom {
  position: absolute;
  top: -18px;
  left: var(--espace-l);
  font-size: var(--taille-l);
  background: var(--jaune-recitatif);
  border: var(--trait) solid var(--encre);
  padding: 0 var(--espace-s);
  transform: rotate(-2deg);
}

.bulle-texte {
  font-size: var(--taille-l);
  font-weight: 700;
  line-height: 1.4;
}

.bulle[data-humeur="inquiete"] {
  background: var(--jaune-recitatif);
}

.bulle[data-humeur="inquiete"]::after {
  border-right-color: var(--jaune-recitatif);
}

.bulle[data-humeur="inquiete"] .bulle-nom {
  background: var(--rouge-bd);
  color: var(--blanc);
}

.bouton-bulle {
  align-self: flex-end;
  font-size: var(--taille-l);
  background: var(--jaune-vif);
}

/* ── Composants : panneau de commande ── */
.panneau {
  /* Unités longues (kg MV/m³/j) : 6,2em débordait sur le bloc voisin. */
  --largeur-valeur-jauge: 7.6em;
  container: panneau / inline-size;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: var(--trait) solid var(--encre);
  background: var(--blanc);
  box-shadow: var(--ombre-bd-legere);
}

.panneau-onglets {
  display: flex;
  align-items: stretch;
  border-bottom: var(--trait) solid var(--encre);
  background: var(--papier-fonce);
}

.onglet {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: none;
  border-right: 2px solid var(--encre);
  background: transparent;
  padding: var(--espace-xs) var(--espace-m);
  font-family: var(--police-titre);
  font-size: var(--taille-m);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.onglet:hover {
  background: var(--jaune-recitatif);
}

.onglet[aria-selected="true"] {
  background: var(--encre);
  color: var(--jaune-vif);
}

.onglet-pilote::after {
  content: ' ●';
  color: var(--rouge-bd);
}

.panneau-statut {
  margin-left: auto;
  align-self: center;
  padding: 0 var(--espace-m);
  font-size: var(--taille-xs);
  font-weight: 700;
  white-space: nowrap;
}

.bouton-fiche {
  margin: 3px var(--espace-s) 3px 0;
  font-size: var(--taille-s);
  padding: 0 var(--espace-s);
}

.panneau-corps {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--espace-m);
  padding: var(--espace-s) var(--espace-m);
  overflow-y: auto;
  flex: 1;
}

.bloc-commande {
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
  min-width: 0;
}

.bloc-titre {
  font-size: var(--taille-m);
  color: var(--bleu-bd);
  border-bottom: 2px dashed var(--encre);
}

.commande {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--espace-s);
  font-size: var(--taille-s);
}

.commande[data-analyse] {
  flex-direction: column;
  align-items: stretch;
}

.commande-ligne {
  flex: 1 1 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espace-s);
  font-weight: 700;
}

.commande-valeur {
  font-weight: 700;
  color: var(--rouge-bd);
  white-space: nowrap;
}

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs);
}

.groupe-boutons .bouton {
  font-size: var(--taille-s);
  padding: 0 var(--espace-s);
}

/* Sur la ligne du libellé s'il reste au moins 140 px, sinon seul sur la ligne suivante. */
.curseur {
  flex: 1 1 140px;
  min-width: 0;
  accent-color: var(--rouge-bd);
  cursor: pointer;
}

.curseur:disabled {
  cursor: not-allowed;
}

.tampon-equipe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  padding: var(--espace-xs) var(--espace-m);
  border: var(--trait-fort) solid var(--bleu-bd);
  border-radius: var(--rayon);
  color: var(--bleu-bd);
  background: var(--blanc);
  font-family: var(--police-titre);
  font-size: var(--taille-xl);
  opacity: 0.85;
  pointer-events: none;
}

.mention-panne {
  color: var(--etat-danger);
  font-family: var(--police-titre);
  font-size: var(--taille-s);
  letter-spacing: 0.05em;
}

.analyse-vide {
  font-size: var(--taille-xs);
  color: var(--encre-douce);
}

/* ── Composants : modales ── */
.modale {
  margin: auto;
  width: min(var(--largeur-modale), 94vw);
  max-height: 92vh;
  border: var(--trait-fort) solid var(--encre);
  background: var(--papier);
  box-shadow: 10px 10px 0 var(--encre);
  color: var(--encre);
}

.modale::backdrop {
  background: rgba(27, 27, 31, 0.55);
}

.modale-contenu {
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
  padding: var(--espace-l);
  overflow-y: auto;
  max-height: calc(92vh - 2 * var(--trait-fort));
}

.modale-titre {
  font-size: var(--taille-xxl);
  align-self: flex-start;
  background: var(--jaune-recitatif);
  border: var(--trait) solid var(--encre);
  padding: 0 var(--espace-m);
  transform: rotate(-1deg);
}

.modale-pied {
  display: flex;
  justify-content: flex-end;
  gap: var(--espace-s);
}

.recitatif {
  background: var(--jaune-recitatif);
  border: 2px solid var(--encre);
  padding: var(--espace-s) var(--espace-m);
  font-weight: 700;
}

/* Enregistreurs (débit d'entrée, oxygène) */
.trace-enregistreur {
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
}

.enregistreur {
  width: 100%;
  height: auto;
  font-family: var(--police-texte);
}

.enregistreur-papier {
  fill: var(--blanc);
}

.enregistreur-cadre {
  fill: none;
  stroke: var(--encre);
  stroke-width: var(--trait);
}

.enregistreur-grille {
  stroke: var(--papier-ombre);
  stroke-width: 1px;
}

.enregistreur-texte {
  font-size: 13px;
  font-weight: 700;
  fill: var(--encre-douce);
}

.enregistreur-reference {
  stroke: var(--rouge-bd);
  stroke-width: 2.5px;
  stroke-dasharray: 10 6;
}

/* Liseré blanc : le libellé reste lisible quand la courbe passe derrière. */
.enregistreur-texte-reference {
  fill: var(--rouge-bd);
  stroke: var(--blanc);
  stroke-width: 4px;
  paint-order: stroke;
}

.enregistreur-bande {
  fill: var(--papier-fonce);
}

.enregistreur-secondaire {
  fill: none;
  stroke: var(--vert-bd);
  stroke-width: 2px;
  stroke-dasharray: 6 4;
}

.enregistreur-production {
  fill: none;
  stroke: var(--vert-bd);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.enregistreur-texte-production {
  fill: var(--vert-bd);
  stroke: var(--blanc);
  stroke-width: 4px;
  paint-order: stroke;
}

.enregistreur-aire {
  fill: var(--bleu-clair);
  opacity: 0.7;
}

.enregistreur-courbe {
  fill: none;
  stroke: var(--bleu-bd);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.enregistreur-plume {
  fill: var(--rouge-bd);
  stroke: var(--encre);
  stroke-width: 2px;
}

/* Briefing et fin de mission */
.briefing {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--espace-l);
  align-items: start;
}

.briefing-portrait {
  width: 140px;
  height: auto;
}

.liste-simple {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
}

.liste-simple li::before {
  content: '▸ ';
  color: var(--rouge-bd);
  font-weight: 700;
}

.resultat-etoiles {
  font-size: calc(var(--taille-xxl) * 1.6);
  text-align: center;
  letter-spacing: 8px;
}

.tampon {
  align-self: center;
  padding: var(--espace-xs) var(--espace-l);
  border: 5px solid currentColor;
  border-radius: var(--rayon);
  font-family: var(--police-titre);
  font-size: calc(var(--taille-xxl) * 1.3);
  letter-spacing: 0.08em;
  transform: rotate(-6deg);
}

.tampon-conforme {
  color: var(--vert-bd);
}

.tampon-non-conforme {
  color: var(--rouge-bd);
}

/* Tableaux de bilan */
.tableau {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanc);
  border: var(--trait) solid var(--encre);
  font-size: var(--taille-s);
}

.tableau th,
.tableau td {
  border: 1px solid var(--encre-douce);
  padding: var(--espace-xs) var(--espace-s);
  text-align: left;
}

.tableau th {
  background: var(--papier-fonce);
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: var(--taille-m);
  letter-spacing: 0.04em;
}

.cellule-ok {
  color: var(--vert-bd);
  font-weight: 700;
}

.cellule-ko {
  color: var(--rouge-bd);
  font-weight: 700;
}

.grille-chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espace-s);
}

.chiffre {
  border: 2px solid var(--encre);
  background: var(--blanc);
  padding: var(--espace-xs) var(--espace-s);
  font-size: var(--taille-xs);
  font-weight: 700;
}

.chiffre strong {
  display: block;
  font-size: var(--taille-xl);
}

/* Labo */
.labo-onglets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs);
}

.labo-zone {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--espace-l);
  align-items: start;
  min-height: 330px;
}

.labo-illustration {
  width: 300px;
  height: 300px;
  border: var(--trait) solid var(--encre);
  background: var(--blanc);
}

.labo-texte {
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
}

.labo-resultat {
  font-weight: 700;
  font-size: var(--taille-xl);
  color: var(--bleu-bd);
}

.legende-microscope {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px var(--espace-m);
  font-size: var(--taille-xs);
}

/* Fiches */
.fiches-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--espace-s);
}

.fiche {
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
}

.fiche-niveau {
  border: 2px solid var(--encre);
  background: var(--blanc);
  padding: var(--espace-s) var(--espace-m);
}

.fiche-niveau h3 {
  color: var(--bleu-bd);
  margin-bottom: var(--espace-xs);
}

.fiche-niveau[data-niveau="expert"] {
  background: var(--papier-fonce);
}

.fiche-savais-tu {
  background: var(--jaune-recitatif);
  border: 2px solid var(--encre);
  padding: var(--espace-s) var(--espace-m);
  transform: rotate(-0.6deg);
}

.fiche-source {
  font-size: var(--taille-xs);
  color: var(--encre-douce);
}

/* Dossiers BD */
.dossiers-liste {
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
}

.bouton-dossier {
  display: flex;
  align-items: center;
  gap: var(--espace-m);
  background: var(--bleu-clair);
  text-align: left;
}

.bouton-dossier-badge {
  padding: 0 var(--espace-s);
  border: 2px solid var(--encre);
  background: var(--rouge-bd);
  color: var(--blanc);
  font-size: var(--taille-s);
  transform: rotate(-3deg);
}

.dossier-bloc {
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
}

.dossier-bloc h3 {
  color: var(--bleu-bd);
}

.dossier-colonnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espace-m);
}

.dossier-carte {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--espace-m);
  align-items: center;
  border: 2px solid var(--encre);
  background: var(--blanc);
  padding: var(--espace-s) var(--espace-m);
}

.dossier-carte-image {
  width: 100%;
  height: auto;
}

.dossier-surnom {
  display: inline-block;
  margin: var(--espace-xs) 0;
  padding: 0 var(--espace-s);
  border: 2px solid var(--encre);
  border-radius: var(--rayon);
  font-family: var(--police-titre);
  letter-spacing: 0.05em;
}

.dossier-carte[data-equipe="nitrifiante"] .dossier-surnom {
  background: var(--bacterie-nitrifiante);
}

.dossier-carte[data-equipe="denitrifiante"] .dossier-surnom {
  background: var(--bacterie-denitrifiante);
}

.dossier-carte[data-equipe="heterotrophe"] .dossier-surnom {
  background: var(--bacterie-heterotrophe);
}

.dossier-carte[data-equipe="protozoaire"] .dossier-surnom {
  background: var(--vorti);
}

.dossier-carte[data-equipe="hydrolytique"] .dossier-surnom {
  background: var(--bacterie-hydrolytique);
}

.dossier-carte[data-equipe="methanogene"] .dossier-surnom {
  background: var(--bacterie-methanogene);
}

.dossier-case {
  border: var(--trait) solid var(--encre);
  background: var(--blanc);
  box-shadow: var(--ombre-bd-legere);
}

.dossier-case svg {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: var(--trait) solid var(--encre);
}

.dossier-exemples {
  margin-top: var(--espace-xs);
  font-size: var(--taille-s);
  color: var(--encre-douce);
}

.dossier-familles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--espace-s);
}

.dossier-famille,
.dossier-condition {
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
  border: 2px solid var(--encre);
  background: var(--blanc);
  padding: var(--espace-s) var(--espace-m);
}

.dossier-famille {
  align-items: center;
  text-align: center;
}

.dossier-famille-image {
  width: 110px;
  height: auto;
}

.dossier-conditions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espace-s);
}

.dossier-condition svg {
  width: 100%;
  height: auto;
}

.dossier-tableau td {
  vertical-align: middle;
}

.dossier-tableau-qui {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
}

.dossier-tableau-image {
  flex: none;
  width: 54px;
  height: auto;
}

.dossier-colonnes > .fiche-niveau {
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
}

.fiche-niveau p + h4,
.fiche-niveau ul + h4 {
  margin-top: var(--espace-s);
}

.dossier-reglage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr);
  gap: var(--espace-m);
  align-items: center;
  margin: var(--espace-s) 0;
}

.dossier-reglage-cas {
  border: 2px solid var(--encre);
  border-top: 6px solid var(--etat-danger);
  background: var(--papier);
  padding: var(--espace-s) var(--espace-m);
}

.dossier-reglage-cas h4 {
  color: var(--rouge-fonce);
}

.dossier-cadran {
  text-align: center;
}

.dossier-cadran svg {
  width: 100%;
  height: auto;
}

.dossier-cadran figcaption {
  font-size: var(--taille-s);
  font-weight: 700;
}

.dossier-trois-cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espace-m);
}

.dossier-case svg:last-child {
  border-bottom: none;
}

.dossier-case figcaption {
  padding: var(--espace-s) var(--espace-m);
}

.dossier-figure {
  margin: var(--espace-s) 0;
}

.dossier-etapes {
  list-style: none;
  counter-reset: etape;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espace-s) var(--espace-l);
}

.dossier-etapes li {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--espace-s);
  align-items: start;
}

/* Même pastille rouge que les numéros posés sur le dessin du digesteur. */
.dossier-etapes li::before {
  content: counter(etape);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--encre);
  border-radius: 50%;
  background: var(--rouge-bd);
  color: var(--blanc);
  font-family: var(--police-titre);
  font-size: var(--taille-l);
}

.dossier-etapes strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: var(--taille-l);
  letter-spacing: 0.04em;
}

.dossier-case figcaption strong {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: var(--taille-l);
  color: var(--rouge-bd);
}

.dossier-piege,
.dossier-a-retenir {
  border: var(--trait) solid var(--encre);
  padding: var(--espace-s) var(--espace-m);
}

.dossier-piege {
  border-color: var(--rouge-bd);
  background: var(--blanc);
  box-shadow: 3px 3px 0 var(--rouge-bd);
}

.dossier-a-retenir {
  background: var(--jaune-vif);
  box-shadow: var(--ombre-bd-legere);
  font-size: var(--taille-l);
  font-weight: 700;
  transform: rotate(-0.6deg);
}

.dossier-piege strong,
.dossier-a-retenir strong,
.dossier-jeu strong {
  margin-right: var(--espace-xs);
  font-family: var(--police-titre);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.dossier-piege strong {
  color: var(--rouge-bd);
}

.dossier-frise {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--espace-s) 0;
}

.dossier-jeu {
  margin-top: var(--espace-xs);
  padding-left: var(--espace-s);
  border-left: var(--trait-fort) solid var(--bleu-bd);
  font-size: var(--taille-s);
}

.dossier-jeu strong {
  color: var(--bleu-bd);
}

.dossier-instruments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espace-s);
}

.dossier-instruments .fiche-niveau {
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
}

/* ── Scène SVG : traits et aplats ── */
.scene {
  width: 100%;
  height: 100%;
  max-height: 100%;
  font-family: var(--police-texte);
  user-select: none;
}

.trait {
  stroke: var(--encre);
  stroke-width: var(--trait);
  stroke-linejoin: round;
  stroke-linecap: round;
}

.trait-fin {
  stroke: var(--encre);
  stroke-width: 2px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.trait-epais {
  stroke: var(--encre);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.sans-fond {
  fill: none;
}

.case-bordure {
  fill: none;
  stroke: var(--encre);
  stroke-width: 6px;
}

.case-fond-boues {
  fill: var(--papier);
}

.trame-point {
  fill: var(--encre);
}

.trame-point-clair {
  fill: var(--blanc);
}

.reflet {
  fill: none;
  stroke: var(--blanc);
  stroke-width: 3px;
  stroke-linecap: round;
  opacity: 0.8;
}

.f-ciel-haut { stop-color: var(--ciel-haut); }
.f-ciel-bas { stop-color: var(--ciel-bas); }
.f-orage-haut { stop-color: var(--ciel-orage-haut); }
.f-orage-bas { stop-color: var(--ciel-orage-bas); }
.f-nuit { fill: var(--nuit); }
.f-nuage { fill: var(--nuage); }
.f-nuage-orage { fill: var(--nuage-orage); }
.f-soleil { fill: var(--soleil); }
.f-soleil-rayon { fill: var(--soleil-rayon); }
.f-colline-loin { fill: var(--colline-loin); }
.f-colline-proche { fill: var(--colline-proche); }
.f-herbe { fill: var(--herbe); }
.f-herbe-foncee { fill: var(--herbe-foncee); }
.f-terre { fill: var(--terre); }
.f-roche { fill: var(--roche); }
.s-roseau { stroke: var(--roseau); }
.f-mur { fill: var(--mur-maison); }
.f-mur-2 { fill: var(--mur-maison-2); }
.f-toit { fill: var(--toit); }
.f-toit-2 { fill: var(--toit-2); }
.f-fenetre { fill: var(--fenetre); }
.f-beton { fill: var(--beton); }
.f-beton-ombre { fill: var(--beton-ombre); }
.f-beton-sombre { fill: var(--beton-sombre); }
.f-metal { fill: var(--metal); }
.f-metal-fonce { fill: var(--metal-fonce); }
.f-rambarde { fill: var(--rambarde); }
.f-benne { fill: var(--benne); }
.f-benne-fonce { fill: var(--benne-fonce); }
.f-eau-brute { fill: var(--eau-brute); }
.f-eau-decantee { fill: var(--eau-decantee); }
.f-liqueur { fill: var(--liqueur); }
.f-eau-claire { fill: var(--eau-claire); }
.f-eau-traitee { fill: var(--eau-traitee); }
.f-boue { fill: var(--boue); }
.f-boue-claire { fill: var(--boue-claire); }
.f-boue-digeree { fill: var(--boue-digeree); }
.f-sable { fill: var(--sable); }
.f-graisse { fill: var(--graisse); }
.f-mousse { fill: var(--mousse); }
.f-refus { fill: var(--refus); }
.f-refus-2 { fill: var(--refus-2); }
.f-blanc { fill: var(--blanc); }
.f-encre { fill: var(--encre); }
.f-jaune { fill: var(--jaune-recitatif); }
.f-jaune-vif { fill: var(--jaune-vif); }
.f-rouge { fill: var(--rouge-bd); }
.f-vert { fill: var(--vert-bd); }
.f-flamme { fill: var(--flamme); }
.f-flamme-coeur { fill: var(--flamme-coeur); }
.f-eclair { fill: var(--eclair); }
.f-gravier { fill: var(--gravier); }
.f-plante-eau { fill: var(--plante-eau); }
.s-algue { stroke: var(--algue); }
.f-gilet { fill: var(--gilet); }
.f-peau { fill: var(--peau); }
.f-cheveux { fill: var(--cheveux); }
.f-casque { fill: var(--casque); }
.f-bande { fill: var(--bande-reflechissante); }
.f-chemise { fill: var(--chemise); }
.f-joue { fill: var(--joue); }
.f-vorti { fill: var(--vorti); }
.f-vorti-fonce { fill: var(--vorti-fonce); }
.s-vorti { stroke: var(--vorti-fonce); }
.f-organisme { fill: var(--organisme); }
.f-organisme-fonce { fill: var(--organisme-fonce); }
.f-amibe { fill: var(--amibe); }
.f-thecamoebien { fill: var(--thecamoebien); }
.s-filament { stroke: var(--filament); }
.f-microscope { fill: var(--microscope-fond); }
.f-gardon { fill: var(--gardon); }
.f-nageoire { fill: var(--nageoire-rouge); }
.f-perche { fill: var(--perche); }
.f-brochet { fill: var(--brochet); }
.f-truite { fill: var(--truite); }
.f-point-truite { fill: var(--point-truite); }
.f-chevesne { fill: var(--chevesne); }
.f-chabot { fill: var(--chabot); }
.f-riviere { fill: var(--riviere-propre); }
.f-poisson-mort { fill: var(--poisson-mort); }
.f-chaud { fill: var(--chaud); }
.f-froid { fill: var(--froid); }
.s-chaud { stroke: var(--chaud); }
.s-froid { stroke: var(--froid); }
.s-tuyau { stroke: var(--tuyau); }
.s-tuyau-boues { stroke: var(--tuyau-boues); }
.s-tuyau-gaz { stroke: var(--tuyau-gaz); }
.s-eau-brute { stroke: var(--eau-brute); }
.s-eau-traitee { stroke: var(--eau-traitee); }
.s-boue { stroke: var(--boue-claire); }
.s-odeur { stroke: var(--odeur); }
.s-blanc { stroke: var(--blanc); }
.s-rouge { stroke: var(--rouge-bd); }
.s-pluie { stroke: var(--bleu-clair); }

.tuyau-contour {
  fill: none;
  stroke: var(--encre);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tuyau-corps {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flux {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 6 14;
  animation: couler 1s linear infinite;
}

/* Textes de la scène */
.etiquette-fond {
  fill: var(--jaune-recitatif);
  stroke: var(--encre);
  stroke-width: 2px;
}

.etiquette {
  font-family: var(--police-titre);
  font-size: 19px;
  letter-spacing: 0.04em;
  fill: var(--encre);
}

.etiquette-petite {
  font-family: var(--police-titre);
  font-size: 15px;
  letter-spacing: 0.04em;
  fill: var(--encre);
}

.valeur-fond {
  fill: var(--blanc);
  stroke: var(--encre);
  stroke-width: 2px;
}

.valeur {
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 15px;
  fill: var(--encre);
}

.valeur-forte {
  font-size: 19px;
}

.jauge-entree-fond {
  fill: var(--papier-fonce);
  stroke: var(--encre);
  stroke-width: 1.5px;
}

.jauge-entree {
  fill: var(--bleu-bd);
}

.repere-entree {
  stroke: var(--encre);
  stroke-width: 3px;
}

.tag-cliquable {
  cursor: pointer;
}

.tag-cliquable:hover .valeur-fond {
  stroke-width: 3.5px;
}

.icone-courbe-fond {
  fill: var(--blanc);
  stroke: var(--encre);
  stroke-width: 1.5px;
}

.tag-cliquable:hover .icone-courbe-fond {
  fill: var(--jaune-vif);
}

.icone-courbe {
  fill: none;
  stroke: var(--rouge-bd);
  stroke-width: 2px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.valeur-alerte .valeur-fond {
  fill: var(--etat-alerte);
}

.valeur-danger .valeur-fond {
  fill: var(--etat-danger);
}

.valeur-danger .valeur {
  fill: var(--blanc);
}

.onomatopee {
  font-family: var(--police-titre);
  font-size: 46px;
  letter-spacing: 0.05em;
  fill: var(--jaune-vif);
  stroke: var(--encre);
  stroke-width: 3px;
  paint-order: stroke;
  pointer-events: none;
}

.onomatopee-groupe {
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
  animation: surgir 1.6s ease-out forwards;
}

.onomatopee-fixe {
  animation: none;
  font-size: 30px;
}

.etiquette-fond-alerte {
  fill: var(--rouge-bd);
  stroke: var(--encre);
  stroke-width: 2px;
}

.etiquette-alerte {
  fill: var(--blanc);
}

.onomatopee-fond {
  fill: var(--rouge-bd);
  stroke: var(--encre);
  stroke-width: 3px;
}

.eprouvette-boue {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition-property: transform;
  transition-timing-function: ease-out;
}

.f-nh4 { fill: var(--orange-bd); }
.f-no3 { fill: var(--violet-bd); }
.s-nh4 { stroke: var(--orange-bd); }
.s-no3 { stroke: var(--violet-bd); }
.f-nitrifiante { fill: var(--bacterie-nitrifiante); }
.f-denitrifiante { fill: var(--bacterie-denitrifiante); }
.f-heterotrophe { fill: var(--bacterie-heterotrophe); }
.f-hydrolytique { fill: var(--bacterie-hydrolytique); }
.f-acidogene { fill: var(--bacterie-acidogene); }
.f-acetogene { fill: var(--bacterie-acetogene); }
.f-filamenteux { fill: var(--bacterie-filamenteuse); }
.f-acetate { fill: var(--acetate); }
.s-o2 { stroke: var(--bleu-bd); }
.s-etat-ok { stroke: var(--etat-ok); }
.s-vert { stroke: var(--vert-bd); }
.s-orange { stroke: var(--orange-bd); }
.f-orange { fill: var(--orange-bd); }
.s-etat-alerte { stroke: var(--etat-alerte); }
.s-etat-danger { stroke: var(--etat-danger); }
.f-methanogene { fill: var(--bacterie-methanogene); }
.f-acide { fill: var(--acide); }
.s-ch4 { stroke: var(--flamme); }
.s-co2 { stroke: var(--etat-neutre); }

/* Textes des dessins des dossiers BD */
.jeton-texte {
  font-family: var(--police-titre);
  font-size: 15px;
  letter-spacing: 0.03em;
  fill: var(--encre);
}

.jeton-indice {
  font-size: 10px;
}

.jeton-texte-halo {
  stroke: var(--blanc);
  stroke-width: 3px;
  paint-order: stroke;
}

.pastille-texte {
  font-family: var(--police-titre);
  font-size: 19px;
  fill: var(--blanc);
}

.bulle-dossier {
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 15px;
  fill: var(--encre);
}

/* Liseré noir : lisible sur l'eau brune comme sur le ciel. */
.dossier-note {
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 13px;
  fill: var(--blanc);
  stroke: var(--encre);
  stroke-width: 3px;
  paint-order: stroke;
}

.courbe-frise {
  fill: none;
  stroke-width: 4px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Zones cliquables des ouvrages */
.zone-ouvrage {
  fill: transparent;
  stroke: transparent;
  stroke-width: 4px;
  stroke-dasharray: 10 6;
  cursor: pointer;
  transition: stroke var(--duree-transition);
}

.zone-ouvrage:hover {
  stroke: var(--bleu-bd);
}

.zone-ouvrage.zone-selectionnee {
  stroke: var(--rouge-bd);
  animation: pointilles 1.2s linear infinite;
}

/* ── Animations ── */
.anime-tourner {
  transform-box: fill-box;
  transform-origin: center;
  animation: tourner 2s linear infinite;
}

.anime-helice {
  animation: avancer-helice 0.6s linear infinite;
}

.anime-bulle {
  animation: monter-bulle 2.2s linear infinite;
}

.anime-bulle-lente {
  animation: monter-bulle-lente 3.5s ease-in infinite;
}

.anime-nuage {
  animation: deriver 60s linear infinite alternate;
}

.anime-pont {
  animation: balayer 9s ease-in-out infinite alternate;
}

.anime-flamme {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: vaciller 0.35s ease-in-out infinite alternate;
}

.anime-pluie {
  animation: tomber 0.5s linear infinite;
}

.anime-odeur {
  animation: onduler-odeur 2.4s ease-in-out infinite;
}

.anime-plante {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: onduler 3s ease-in-out infinite alternate;
}

.anime-nage {
  transform-box: fill-box;
  transform-origin: center;
  animation: nager 14s linear infinite;
}

.anime-flotte {
  animation: flotter 3s ease-in-out infinite alternate;
}

.anime-clignote {
  animation: clignoter 1s steps(2) infinite;
}

.anime-raclage {
  animation: racler 0.9s ease-in-out 1;
}

.anime-traverse {
  animation: traverser 1.2s ease-in-out 1;
}

.anime-envol {
  animation: envoler 3.6s ease-in infinite;
}

/* Bactéries qui suivent un chemin du schéma (offset-path posé en style dans
   le dessin) ; offset-rotate fixe : elles restent debout dans les virages. */
.voyageur {
  offset-rotate: 0deg;
}

/* Durée posée en style par le dessin, qui en déduit le décalage de chacune. */
.voyageur-boucle {
  animation: voyager linear infinite;
}

.voyageur-sortie {
  animation: sortir linear infinite;
}

/* Distances (--dx, --dy, --h) posées en style par le dessin. */
.anime-glisse {
  animation: glisser 1.8s linear infinite;
}

.anime-goutte {
  animation: goutter 0.9s ease-in infinite;
}

.anime-vis-convoyeuse {
  animation: avancer-vis-convoyeuse 0.8s linear infinite;
}

.scene.en-pause *,
.scene.en-pause *::before {
  animation-play-state: paused !important;
}

/* Centrifugeuse de la scène hors des heures de déshydratation : machine
   figée, et plus d'eau ni de mottes qui sortent. */
.a-l-arret * {
  animation-play-state: paused;
}

.a-l-arret .anime-goutte,
.a-l-arret .anime-glisse {
  visibility: hidden;
}

@keyframes couler {
  to { stroke-dashoffset: -20; }
}

@keyframes tourner {
  to { transform: rotate(360deg); }
}

/* La vis est tournée de -65° : l'axe X local monte le long de la vis.
   Les filets doivent avancer vers +X, sinon l'eau semble redescendre. */
@keyframes avancer-helice {
  from { transform: translateX(-16px); }
  to { transform: translateX(0); }
}

@keyframes monter-bulle {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-150px); opacity: 0; }
}

@keyframes monter-bulle-lente {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 0.9; }
  100% { transform: translateY(-70px); opacity: 0; }
}

@keyframes deriver {
  to { transform: translateX(160px); }
}

@keyframes balayer {
  from { transform: translateX(-70px); }
  to { transform: translateX(70px); }
}

@keyframes vaciller {
  from { transform: scaleY(0.85) skewX(-4deg); }
  to { transform: scaleY(1.12) skewX(4deg); }
}

@keyframes tomber {
  from { transform: translate(0, -40px); }
  to { transform: translate(-12px, 40px); }
}

@keyframes onduler-odeur {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(-30px); opacity: 0; }
}

@keyframes onduler {
  from { transform: skewX(-6deg); }
  to { transform: skewX(6deg); }
}

@keyframes nager {
  0% { transform: translateX(0) scaleX(1); }
  48% { transform: translateX(420px) scaleX(1); }
  50% { transform: translateX(420px) scaleX(-1); }
  98% { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}

@keyframes flotter {
  from { transform: translateY(-3px) rotate(-3deg); }
  to { transform: translateY(3px) rotate(3deg); }
}

@keyframes clignoter {
  50% { opacity: 0.25; }
}

@keyframes racler {
  0% { transform: translate(0, 0); }
  50% { transform: translate(28px, -70px); }
  100% { transform: translate(0, 0); }
}

@keyframes traverser {
  50% { transform: translateX(84px); }
}

@keyframes surgir {
  0% { transform: scale(0.2) rotate(-12deg); opacity: 0; }
  15% { transform: scale(1.15) rotate(-6deg); opacity: 1; }
  25% { transform: scale(1) rotate(-6deg); }
  80% { opacity: 1; }
  100% { transform: scale(1.05) rotate(-6deg) translateY(-20px); opacity: 0; }
}

@keyframes pointilles {
  to { stroke-dashoffset: -32; }
}

@keyframes voyager {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

@keyframes sortir {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes envoler {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(-170px); opacity: 0; }
}

@keyframes glisser {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

@keyframes goutter {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(var(--h)); opacity: 0; }
}

/* Un pas de filet (22 px) : la boucle est invisible, la vis pousse vers la sortie. */
@keyframes avancer-vis-convoyeuse {
  from { transform: translateX(-22px); }
  to { transform: translateX(0); }
}

/* ── Media queries ── */
@media (max-width: 1440px) {
  .hud-logo {
    display: none;
  }
}

/* Requête sur la largeur du panneau et non de l'écran : la largeur naturelle
   des onglets varie selon la mission (marqueurs ●) et le statut affiché. */
@container panneau (max-width: 900px) {
  .panneau-statut {
    display: none;
  }

  .bouton-fiche {
    margin-left: auto;
  }

  .onglet {
    padding: var(--espace-xs) var(--espace-s);
    font-size: var(--taille-s);
  }
}

@media (max-height: 800px) {
  :root {
    --hauteur-pied: 210px;
    --hauteur-hud: 50px;
  }

  .carte {
    padding-top: var(--espace-xs);
    padding-bottom: var(--espace-xs);
  }

  .carte-titre {
    font-size: var(--taille-m);
    margin-bottom: var(--espace-xs);
  }

  .liste-objectifs {
    gap: 2px;
  }

  .panneau-corps {
    padding-top: var(--espace-xs);
    padding-bottom: var(--espace-xs);
  }

  .onglet {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .bouton-fiche {
    margin-top: 2px;
    margin-bottom: 2px;
  }

  .jauge {
    margin-bottom: 0;
    font-size: var(--taille-xs);
  }

  .bloc-commande {
    gap: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Immobiles, elles s'empileraient toutes au départ de leur chemin. */
  .voyageur {
    visibility: hidden;
  }

  .scene *,
  .dossier-case *,
  .dossier-carte *,
  .dossier-condition *,
  .onomatopee-groupe {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}