/* Hidal’Game — interface posée sur la scène 3D.
   Un style net : fond cassé, encre presque noire, titres en Inter très serrés,
   petites étiquettes en capitales monospace, boutons en pilule noire, accent bleu.
   Deux thèmes : « clair » et « sombre » (mêmes formes, couleurs inversées). */

:root {
  --papier: #fcfcfc;
  --surface: rgba(255, 255, 255, 0.94);
  --surface-pleine: #ffffff;
  --creux: #f2f2f1;
  --creux-2: #e8e8e6;
  --trait: rgba(28, 28, 28, 0.08);
  --trait-fort: rgba(28, 28, 28, 0.2);
  --encre: #1c1c1c;
  --encre-2: #555555;
  --encre-3: #7a7a7a;
  --bouton: #e5e5e3;         /* fond des boutons secondaires : bien distinct du papier */
  --bouton-survol: #d8d8d5;
  --bord: rgba(28, 28, 28, 0.2); /* le liseré qui détache chaque bouton */
  --inverse: #ffffff;        /* texte posé sur l'encre (bouton noir) */
  --accent: #2f5bea;
  --alerte: #e0442c;
  --positif: #1f9d55;
  --or: #d99a12;
  --violet: #8b4fd6;
  --ombre:
    0 0 0 1px rgba(28, 28, 28, 0.06),
    0 1px 1px -0.5px rgba(28, 28, 28, 0.06),
    0 3px 3px -1.5px rgba(28, 28, 28, 0.06),
    0 8px 8px -4px rgba(28, 28, 28, 0.05),
    0 16px 16px -8px rgba(28, 28, 28, 0.05);
  --ombre-forte:
    0 0 0 1px rgba(28, 28, 28, 0.07),
    0 2px 2px -1px rgba(28, 28, 28, 0.06),
    0 8px 8px -4px rgba(28, 28, 28, 0.07),
    0 24px 24px -12px rgba(28, 28, 28, 0.1),
    0 48px 48px -24px rgba(28, 28, 28, 0.12);
  --voile-accueil: rgba(252, 252, 252, 0.97);
  --voile-tuto: rgba(20, 22, 30, 0.58);   /* le reste de l'écran, pendant le didacticiel */
  --points: rgba(28, 28, 28, 0.13);
  --trace: #23869a;
  --logo: #1c1c1c;           /* le portrait, à l'encre du titre */
  --logo-fond: #ffffff;      /* la pilule du logo : blanche, comme les autres pastilles */

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --rayon: 16px;
  --marge: 16px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --papier: #0f0f10;
    --surface: rgba(24, 24, 26, 0.94);
    --surface-pleine: #1a1a1c;
    --creux: #232326;
    --creux-2: #2c2c30;
    --trait: rgba(255, 255, 255, 0.08);
    --trait-fort: rgba(255, 255, 255, 0.2);
    --encre: #f2f2f2;
    --encre-2: #b4b4b9;
    --encre-3: #8b8b92;
    --bouton: #333339;
    --bouton-survol: #414148;
    --bord: rgba(255, 255, 255, 0.2);
    --inverse: #111111;
    --accent: #7090ff;
    --alerte: #ff6b55;
    --positif: #4cc982;
    --or: #f0b440;
    --violet: #b48cf2;
    --ombre: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
    --ombre-forte: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px -16px rgba(0, 0, 0, 0.8);
    --voile-accueil: rgba(15, 15, 16, 0.96);
    --voile-tuto: rgba(0, 0, 0, 0.68);
    --points: rgba(255, 255, 255, 0.1);
    --logo-fond: #ededed;
    color-scheme: dark;
  }
}

:root[data-theme="sombre"] {
  --papier: #0f0f10;
  --surface: rgba(24, 24, 26, 0.94);
  --surface-pleine: #1a1a1c;
  --creux: #232326;
  --creux-2: #2c2c30;
  --trait: rgba(255, 255, 255, 0.08);
  --trait-fort: rgba(255, 255, 255, 0.2);
  --encre: #f2f2f2;
  --encre-2: #b4b4b9;
  --encre-3: #8b8b92;
  --bouton: #333339;
  --bouton-survol: #414148;
  --bord: rgba(255, 255, 255, 0.2);
  --inverse: #111111;
  --accent: #7090ff;
  --alerte: #ff6b55;
  --positif: #4cc982;
  --or: #f0b440;
  --violet: #b48cf2;
  --ombre: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --ombre-forte: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px -16px rgba(0, 0, 0, 0.8);
  --voile-accueil: rgba(15, 15, 16, 0.96);
  --voile-tuto: rgba(0, 0, 0, 0.68);
  --points: rgba(255, 255, 255, 0.1);
  --logo-fond: #ededed;
  color-scheme: dark;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--papier);
  color: var(--encre);
  font: 400 14px/1.4 var(--sans);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'cv11', 'ss01';
  user-select: none;
  -webkit-user-select: none;
}

button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

svg { display: block; }

kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--creux);
  box-shadow: inset 0 0 0 1px var(--trait-fort), inset 0 -1px 0 var(--trait-fort);
  font: 500 10.5px/1.6 var(--mono);
  color: var(--encre-2);
  text-align: center;
}

/* Les petites étiquettes : capitales monospace, discrètes. */
.sur {
  display: block;
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--encre-3);
}

#scene {
  position: fixed;
  inset: 0;
}
#scene canvas {
  display: block;
  transition: filter 0.4s ease;
}
body.en-pause #scene canvas { filter: saturate(0.5) brightness(0.97); }
body.en-trace #scene canvas { cursor: crosshair; }

@keyframes apparaitre {
  from { opacity: 0; transform: translateY(12px); }
}
@keyframes battre { 50% { transform: scale(1.08); } }

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px 0 22px;
  border-radius: 999px;
  border: 0;
  font-size: 15px;
  font-weight: 500;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.bouton svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.bouton:active { transform: translateY(1px); }
.bouton b { font-weight: 500; font-family: var(--mono); font-size: 12.5px; color: var(--encre-3); }

.bouton-principal {
  background: var(--encre);
  color: var(--inverse);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.bouton-principal:hover svg { transform: translateX(3px); }
.bouton-principal:hover { box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12); }

.bouton-secondaire {
  background: var(--bouton);
  color: var(--encre);
  box-shadow: inset 0 0 0 1px var(--bord);
}
.bouton-secondaire:hover,
.bouton-secondaire[aria-expanded="true"] { background: var(--bouton-survol); }
.bouton-secondaire b { color: var(--encre-2); }

/* ---------- Écran d'accueil ---------- */

.accueil {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px clamp(24px, 6vw, 96px);
  background:
    linear-gradient(90deg, var(--voile-accueil) 0%, var(--voile-accueil) 30%, transparent 66%),
    linear-gradient(0deg, var(--voile-accueil) 0%, transparent 20%);
  transition: opacity 0.7s ease, visibility 0.7s;
}
/* Une trame de points, comme sur un papier quadrillé, derrière le texte. */
.accueil::before {
  content: '';
  position: absolute;
  inset: 0;
  right: 40%;
  background-image: radial-gradient(var(--points) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent);
  mask-image: linear-gradient(90deg, #000 40%, transparent);
  pointer-events: none;
}
body:not(.sur-accueil) .accueil {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.accueil-contenu {
  position: relative;
  max-width: 560px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  scrollbar-width: none;
}
.accueil-contenu > * { animation: apparaitre 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.accueil-contenu > :nth-child(2) { animation-delay: 0.06s; }
.accueil-contenu > :nth-child(3) { animation-delay: 0.12s; }
.accueil-contenu > :nth-child(4) { animation-delay: 0.18s; }
.accueil-contenu > :nth-child(n + 5) { animation-delay: 0.24s; }

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: var(--surface-pleine);
  box-shadow: var(--ombre);
  font: 500 11.5px/1 var(--mono);
  text-transform: uppercase;
  color: var(--encre-2);
}
.embleme {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--encre);
}
.embleme::after {
  /* une arche de viaduc */
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 8px;
  height: 9px;
  border: 2px solid var(--inverse);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

/* Le logo glissé dans le titre : une pastille en pilule, comme une image dans un gros titre.
   Le portrait est un masque peint à l'encre sur une pilule blanche (claire aussi la nuit,
   pour ne jamais virer au négatif photo). */
.logo {
  position: relative;
  display: inline-block;
  width: 1.5em;
  height: 0.72em;              /* la hauteur des capitales : la pilule s'aligne sur les lettres */
  margin-left: 0.08em;
  border-radius: 999px;
  background: var(--logo-fond);
  box-shadow: var(--ombre);
  overflow: hidden;
  animation: logo-ouvre 0.9s cubic-bezier(0.7, 0, 0.2, 1) 0.35s both;
}
.logo::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0.05em;
  width: 1.2em;
  aspect-ratio: 480 / 427;
  background: var(--logo);
  -webkit-mask: url('images/logo.png') center top / contain no-repeat;
  mask: url('images/logo.png') center top / contain no-repeat;
  transform: translateX(-50%);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  animation: logo-monte 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s both;
}
.logo:hover::before { transform: translateX(-50%) translateY(-0.04em) scale(1.04); }
@keyframes logo-ouvre { from { width: 0; margin-left: 0; } }
@keyframes logo-monte { from { opacity: 0; translate: 0 0.3em; } }

.accueil h1 {
  margin: 0;
  font: 600 clamp(60px, 8.4vw, 108px)/0.92 var(--sans);
  letter-spacing: -0.055em;
}
.accueil h1 em {
  position: relative;
  display: block;
  font-style: normal;
  color: var(--encre-3);
}
/* L'étiquette bleue posée sur le titre. */
.accueil h1 em::after {
  content: 'Paris 2026';
  position: absolute;
  top: 50%;
  margin-left: 16px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0;
  text-transform: uppercase;
  transform: translateY(-50%) rotate(-4deg);
}

.accroche {
  margin: 26px 0 0;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.pitch {
  margin: 8px 0 0;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--encre-2);
}

.accueil-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.regles {
  list-style: none;
  counter-reset: regle;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
}
.regles li {
  counter-increment: regle;
  padding: 13px 15px 14px;
  border-radius: 14px;
  background: var(--surface-pleine);
  box-shadow: var(--ombre);
  font-size: 13px;
  line-height: 1.45;
  color: var(--encre-2);
  animation: apparaitre 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.regles li:nth-child(2n) { animation-delay: 0.05s; }
.regles b {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 14px;
  color: var(--encre);
}
.regles b::before {
  content: counter(regle, decimal-leading-zero);
  font: 500 11px/1 var(--mono);
  color: var(--accent);
}

.accueil-succes {
  margin: 22px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-pleine);
  box-shadow: var(--ombre);
  max-height: 260px;
  overflow-y: auto;
  animation: apparaitre 0.4s ease both;
}

.accueil-contexte {
  display: grid;
  gap: 4px;
  max-width: 460px;
  margin-top: 26px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-pleine);
  box-shadow: var(--ombre);
  font-size: 13.5px;
  color: var(--encre-2);
}
.accueil-contexte .sur {
  justify-self: start;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
}
.accueil-contexte strong {
  margin-top: 4px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--encre);
}

.accueil-chiffres {
  display: flex;
  gap: 32px;
  margin: 34px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--trait);
}
.accueil-chiffres div { display: flex; flex-direction: column-reverse; gap: 4px; }
.accueil-chiffres dt { font: 500 10.5px/1.2 var(--mono); text-transform: uppercase; color: var(--encre-3); }
.accueil-chiffres dd { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; }

.accueil-pied {
  position: absolute;
  left: clamp(24px, 6vw, 96px);
  bottom: 20px;
  margin: 0;
  font: 400 11px/1.3 var(--mono);
  text-transform: uppercase;
  color: var(--encre-3);
}

.outil.outil-flottant {
  position: fixed;
  top: var(--marge);
  right: var(--marge);
  z-index: 21;
  background: var(--surface-pleine);
  box-shadow: var(--ombre);
}
body:not(.sur-accueil) .outil-flottant { display: none; }

/* ---------- Tableau de bord ---------- */

.hud { transition: opacity 0.6s ease 0.2s; }
body.sur-accueil .hud,
body.sur-accueil #etiquettes {
  opacity: 0;
  pointer-events: none;
}
body.sur-accueil .hud * { pointer-events: none !important; }

.carte {
  position: fixed;
  z-index: 5;
  background: var(--surface);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.carte-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px 8px 16px;
}
.carte-tete h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.carte-info { font: 400 11px/1.2 var(--mono); text-transform: uppercase; color: var(--encre-3); }

/* Mandat : année, mois, frise de six années et objectifs. */
.carte-mandat {
  top: var(--marge);
  left: var(--marge);
  width: 250px;
  padding: 12px 14px 12px;
}
.mandat-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 0 10px;
}
.mandat-annee {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
}
.mandat-mois { font: 500 11px/1 var(--mono); text-transform: uppercase; color: var(--encre-2); }
.frise {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.frise li {
  height: 4px;
  border-radius: 2px;
  background: var(--creux-2);
  overflow: hidden;
}
.frise i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--encre);
}

.objectifs-bouton {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid var(--trait);
  background: none;
  text-align: left;
}
.objectifs-bouton .sur { display: flex; justify-content: space-between; }
.objectifs-bouton .sur::after { content: 'Tout voir →'; color: var(--accent); }
.objectifs-suivi { display: flex; flex-direction: column; gap: 7px; margin-top: 7px; }
.suivi { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 500; }
.suivi.vide { color: var(--encre-2); font-weight: 400; }
.suivi i { height: 3px; border-radius: 2px; background: var(--creux-2); overflow: hidden; }
.suivi b { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.3s ease; }
.objectifs-bouton:hover .suivi > span { color: var(--accent); }

/* Capsule centrale : popularité, budget, voyageurs. */
.capsule {
  top: var(--marge);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: 999px;
}
.stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 6px;
}
.stat-icone {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 999px;
  background: var(--creux);
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stat-texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 72px;
}
.stat-valeur {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.jauge {
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--creux-2);
  overflow: hidden;
  align-self: flex-end;
  margin-bottom: 7px;
}
.jauge i {
  display: block;
  height: 100%;
  width: 50%;
  background: var(--positif);
  transition: width 0.3s ease, background 0.3s ease;
}
/* La popularité est un bouton : un clic montre ce qui la fait bouger. */
.stat-bouton {
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.stat-bouton:hover { background: var(--bouton-survol); }
.stat-bouton[aria-expanded="true"] { background: var(--bouton); box-shadow: inset 0 0 0 1px var(--bord); }
.stat-ligne { display: flex; align-items: baseline; gap: 5px; }
.jauge { display: block; }
.tendance { font-size: 10px; line-height: 1; }
.tendance.plus { color: var(--positif); }
.tendance.moins { color: var(--alerte); animation: clignoter-doux 1.6s ease-in-out infinite; }
@keyframes clignoter-doux { 50% { opacity: 0.35; } }

.detail-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 330px;
  max-width: calc(100vw - 2 * var(--marge));
  padding-bottom: 12px;
  border-radius: var(--rayon);
  background: var(--surface-pleine);
  box-shadow: var(--ombre-forte);
  animation: apparaitre 0.2s ease both;
}
.detail-pop[hidden] { display: none; }
.capsule:has(.detail-pop:not([hidden])) { z-index: 8; } /* devant les pastilles « en ce moment » */
.detail-pop-etat { font: 500 10.5px/1.3 var(--mono); text-transform: uppercase; color: var(--encre-3); }
.detail-pop-etat.plus { color: var(--positif); }
.detail-pop-etat.moins { color: var(--alerte); }
.causes { width: calc(100% - 28px); margin: 0 14px; border-collapse: collapse; font-size: 13px; }
.causes thead th { padding: 0 0 6px; font: 500 10px/1.3 var(--mono); text-transform: uppercase; color: var(--encre-3); text-align: right; }
.causes thead th:first-child { text-align: left; }
.causes tbody th { position: relative; padding: 6px 0 9px; font-weight: 500; text-align: left; }
.causes tbody th i {
  position: absolute;
  left: 0;
  bottom: 3px;
  height: 3px;
  max-width: 100%;
  border-radius: 2px;
  background: var(--encre-3);
}
.causes tbody th i.plus { background: var(--positif); }
.causes tbody th i.moins { background: var(--alerte); }
.causes td { width: 58px; padding: 6px 0 9px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--encre-3); }
.causes tr + tr th, .causes tr + tr td { border-top: 1px solid var(--trait); }
.causes td.plus { color: var(--positif); }
.causes td.moins { color: var(--alerte); }
.causes td.vide { width: auto; padding: 10px 0; text-align: left; font-weight: 400; color: var(--encre-2); }
.detail-pop-pied { margin: 10px 14px 0; font-size: 12px; line-height: 1.4; color: var(--encre-2); }

#s-pop.moyen .jauge i { background: var(--or); }
#s-pop.bas .jauge i { background: var(--alerte); }
#s-pop.bas .stat-valeur,
#s-budget.bas .stat-valeur { color: var(--alerte); }
#s-pop.bas .stat-icone { stroke: #fff; background: var(--alerte); animation: battre 1s ease-in-out infinite; }

.separateur {
  width: 1px;
  height: 26px;
  background: var(--trait-fort);
}

.delta {
  position: absolute;
  left: 50px;
  top: -12px;
  padding: 2px 7px;
  border-radius: 999px;
  font: 500 11px/1.4 var(--mono);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.delta.moins { background: var(--alerte); color: #fff; }
.delta.plus { background: var(--positif); color: #fff; }
.delta.visible { animation: delta 2s ease both; }
@keyframes delta {
  0% { opacity: 0; transform: translateY(6px); }
  12%, 70% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* Barre d'outils. */
.outils {
  top: var(--marge);
  right: var(--marge);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: 999px;
}
.outil {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--encre);
  transition: background 0.15s ease, color 0.15s ease;
}
.outil:hover { background: var(--bouton-survol); }
.outil svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.outil[aria-pressed="true"]:not(#b-son) { background: var(--encre); color: var(--inverse); }
.icone-reprendre { fill: currentColor !important; }
#b-pause .icone-reprendre,
#b-pause[aria-pressed="true"] .icone-pause { display: none; }
#b-pause[aria-pressed="true"] .icone-reprendre { display: block; }

#b-son .icone-muet,
#b-son[aria-pressed="false"] .icone-son { display: none; }
#b-son[aria-pressed="false"] .icone-muet { display: block; }
#b-son[aria-pressed="false"] { color: var(--encre-3); }

.si-sombre { display: none; }
:root[data-theme="sombre"] .si-clair { display: none; }
:root[data-theme="sombre"] .si-sombre { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .si-clair { display: none; }
  :root:not([data-theme="clair"]) .si-sombre { display: block; }
}

.compteur {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--alerte);
  box-shadow: 0 0 0 2px var(--surface-pleine);
  color: #fff;
  font: 600 10px/16px var(--mono);
  text-align: center;
}
#b-dossiers.urgent .compteur { animation: battre 0.9s ease-in-out infinite; }

.vitesse {
  display: flex;
  padding: 2px;
  border-radius: 999px;
  background: var(--bouton);
  box-shadow: inset 0 0 0 1px var(--bord);
}
.vitesse button {
  height: 32px;
  min-width: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 500 12px/1 var(--mono);
  color: var(--encre-2);
  transition: background 0.15s ease, color 0.15s ease;
}
.vitesse button:hover { color: var(--encre); }
.vitesse button[aria-pressed="true"] {
  background: var(--encre);
  color: var(--inverse);
}
.outils .separateur { height: 20px; margin: 0 4px; }

/* ---------- Le dock des lignes, en bas à gauche ---------- */

.dock {
  position: fixed;
  z-index: 5;
  left: var(--marge);
  bottom: var(--marge);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: calc(100vw - 2 * var(--marge) - 336px);
  transition: opacity 0.3s ease;
}
/* Un panneau du dock ouvert (détail d'une ligne, finances) passe devant le courrier et l'aide au tracé. */
.dock:has(.ligne.ouverte),
.dock:has(.dock-finances:not([hidden])) { z-index: 7; }
.lignes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
}

/* Une carte par ligne : en-tête, puis le schéma où roulent les rames. */
.ligne {
  position: relative;
  flex: 0 1 240px;
  min-width: 170px;
  padding: 8px 8px 6px 10px;
  border-radius: 14px;
  background: var(--surface);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--ombre);
  transition: box-shadow 0.2s ease;
}
.ligne.en-cours,
.ligne.ouverte { box-shadow: var(--ombre), 0 0 0 2px var(--ligne); }
.ligne-tete {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ligne-ouvrir {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}
.numero {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--ligne);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.ligne-titre {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ligne-titre strong {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.ligne-titre span {
  font: 400 10.5px/1.3 var(--mono);
  text-transform: uppercase;
  color: var(--encre-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ligne-ouvrir:hover strong { color: var(--accent); }
/* Un quai saturé sur la ligne : le numéro bat en rouge. */
.ligne.alerte .numero { animation: alerte-ligne 1s ease-in-out infinite; }
@keyframes alerte-ligne {
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--alerte) 45%, transparent); background: var(--alerte); }
}

.schema {
  display: block;
  width: 100%;
  height: 26px;
  margin-top: 4px;
  overflow: visible;
}
.schema .voie { stroke: var(--ligne); stroke-width: 3; }
.schema .arret { fill: var(--ligne); transition: fill 0.2s ease; }
.schema .arret.correspondance { fill: var(--surface-pleine); stroke: var(--encre); stroke-width: 1.5; }
.schema .arret.charge { fill: var(--or); }
.schema .arret.sature { fill: var(--alerte); stroke: var(--alerte); }
.schema .rame .caisse { fill: var(--encre); }
.schema .rame .vitres { fill: none; stroke: var(--surface-pleine); stroke-width: 1.6; }
.schema .rame.pleine .caisse { fill: var(--or); }

.mini {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--bouton);
  box-shadow: inset 0 0 0 1px var(--bord);
  color: var(--encre);
  transition: background 0.15s ease, color 0.15s ease;
}
.mini:hover { background: var(--bouton-survol); }
.mini svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.mini[aria-pressed="true"] { background: var(--ligne); color: #fff; }
.mini.danger:hover { background: color-mix(in srgb, var(--alerte) 15%, transparent); color: var(--alerte); }

/* Le détail d'une ligne, ouvert au-dessus de sa carte. */
.ligne-detail {
  display: none;
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: 300px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface-pleine);
  box-shadow: var(--ombre-forte);
}
.ligne.ouverte .ligne-detail { display: block; animation: apparaitre 0.2s ease both; }
.detail-tete {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 10px;
  padding-left: 12px;
  border-left: 3px solid var(--ligne);
}
.detail-tete strong { font-size: 18px; font-weight: 600; letter-spacing: -0.04em; }
.detail-tete span { grid-row: 2; font-size: 12px; color: var(--encre-2); }
.detail-tete .mini { grid-row: span 2; grid-column: 2; }
.ligne-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  font: 400 11px/1.3 var(--mono);
  text-transform: uppercase;
  color: var(--encre-3);
}

/* Rames d'une ligne : − nombre + */
.rames-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: var(--bouton);
  box-shadow: inset 0 0 0 1px var(--bord);
  text-transform: none;
}
.rames-ctrl button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  min-width: 26px;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--encre);
  font: 500 11.5px/1 var(--sans);
}
.rames-ctrl button:hover:not(:disabled) { background: var(--bouton-survol); }
.rames-ctrl button[data-action="acheter"] { background: var(--encre); color: var(--inverse); padding: 0 9px 0 6px; }
.rames-ctrl button[data-action="acheter"]:hover:not(:disabled) { background: var(--accent); color: #fff; }
.rames-ctrl button.offerte { background: var(--positif); color: #fff; animation: battre 1.2s ease-in-out infinite; }
.rames-ctrl button:disabled { opacity: 0.35; cursor: not-allowed; animation: none; }
.rames-ctrl svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rames-nb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  font: 600 12px/1 var(--sans);
  color: var(--encre);
}
.rames-nb svg { width: 13px; height: 13px; }

/* La carte « nouvelle ligne » : en pointillés tant qu'elle n'existe pas. */
/* Moderniser une ligne : deux améliorations dans son détail. */
.ameliorations-titre { margin: 14px 0 6px; }
.ameliorations { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.amelioration {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 10px;
  border: 0;
  border-radius: 12px;
  background: var(--bouton);
  box-shadow: inset 0 0 0 1px var(--bord);
  color: var(--encre);
  text-align: left;
  transition: background 0.15s ease;
}
.amelioration:hover:not(:disabled) { background: var(--bouton-survol); }
.amelioration .action-titre { font-size: 13px; font-weight: 600; letter-spacing: -0.02em; }
.amelioration .action-detail { font-size: 11.5px; line-height: 1.3; color: var(--encre-2); }
.amelioration .action-prix { margin-top: 6px; }
.amelioration:disabled { cursor: default; opacity: 0.55; }
.amelioration.faite { opacity: 1; background: color-mix(in srgb, var(--ligne) 12%, transparent); box-shadow: inset 0 0 0 1.5px var(--ligne); }
.amelioration.faite .action-prix { background: var(--ligne); color: #fff; }
.badge-ligne {
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ligne) 16%, transparent);
  color: var(--ligne);
  font: 500 9px/1.4 var(--mono);
  text-transform: uppercase;
  vertical-align: 2px;
}
/* Cinq ou six lignes : des cartes plus étroites, le numéro suffit. */
.lignes:has(> .ligne:nth-child(5)) .ligne { min-width: 140px; }
.lignes:has(> .ligne:nth-child(5)) .ligne-titre strong,
.lignes:has(> .ligne:nth-child(5)) .ligne-titre span { display: none; }

.nouvelle { flex: 0 0 auto; }
.nouvelle button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 14px 8px 10px;
  border: 1.5px dashed var(--encre-3);
  border-radius: 14px;
  background: var(--surface);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.nouvelle .ligne-titre { max-width: 170px; }
.nouvelle button:hover { border-color: var(--ligne); }
.nouvelle .numero { background: transparent; color: var(--ligne); box-shadow: inset 0 0 0 1.5px var(--ligne); }
.nouvelle .plus { font-size: 20px; font-weight: 300; line-height: 1; color: var(--encre-3); }
.nouvelle.en-cours button { border-style: solid; border-color: var(--ligne); }
.nouvelle.en-cours .numero { background: var(--ligne); color: #fff; animation: pulser 1.4s ease-in-out infinite; }
@keyframes pulser {
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ligne) 25%, transparent); }
}

/* Ticket et finances, au bout du dock. */
.dock-ticket { position: relative; flex: none; }
.puce-ticket {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  height: 58px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--ombre);
  text-align: left;
}
.puce-ticket strong { font-size: 18px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.puce-ticket[aria-expanded="true"] { box-shadow: var(--ombre), 0 0 0 2px var(--encre); }
.dock-finances {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 320px;
  background: var(--surface-pleine);
  box-shadow: var(--ombre-forte);
  animation: apparaitre 0.2s ease both;
}
.dock-finances[hidden] { display: none; }
.reseau-pied {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 14px 14px 16px;
}
.tarif {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.segments {
  display: flex;
  padding: 2px;
  border-radius: 12px;
  background: var(--bouton);
  box-shadow: inset 0 0 0 1px var(--bord);
}
.segments button {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding: 5px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--encre-2);
  line-height: 1.2;
}
.segments b { font-size: 13px; font-weight: 600; }
.segments span { font: 400 10px/1.3 var(--mono); text-transform: uppercase; color: var(--encre-3); }
.segments button:hover { color: var(--encre); }
.segments button[aria-pressed="true"] { background: var(--encre); color: var(--inverse); }
.segments button[aria-pressed="true"] span { color: inherit; opacity: 0.7; }
.comptes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0;
}
.comptes div {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--creux);
}
.comptes dt { font: 500 10px/1.3 var(--mono); text-transform: uppercase; color: var(--encre-3); }
.comptes dd { margin: 3px 0 0; font-size: 14px; font-weight: 600; letter-spacing: -0.02em; }
.comptes-note { margin: 0; font: 400 10.5px/1.4 var(--mono); text-transform: uppercase; color: var(--or); }

/* ---------- Journal ---------- */

.journal {
  right: var(--marge);
  bottom: var(--marge);
  width: 320px;
  transition: opacity 0.3s ease;
}
.journal ol {
  list-style: none;
  margin: 0;
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.journal li {
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: 2px 10px;
  font-size: 12.5px;
  line-height: 1.4;
}
.journal li:first-child { animation: apparaitre 0.4s ease both; }
.journal li:nth-child(2) { opacity: 0.7; }
.journal li:nth-child(3) { opacity: 0.45; }
.journal li::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--encre-3);
}
.journal li[data-type="reseau"]::before { background: var(--accent); }
.journal li[data-type="alerte"]::before { background: var(--alerte); }
.journal li[data-type="evenement"]::before { background: var(--violet); }
.journal li[data-type="succes"]::before { background: var(--positif); }
.journal time {
  grid-column: 2;
  grid-row: 2;
  font: 400 10.5px/1.3 var(--mono);
  text-transform: uppercase;
  color: var(--encre-3);
}

/* ---------- Didacticiel de la première partie ---------- */

/* Un seul bloc transparent attrape tous les clics : pendant le didacticiel, on ne joue pas. */
.tutoriel { position: fixed; inset: 0; z-index: 30; }
.tutoriel-bloc { position: fixed; inset: 0; background: transparent; }

/* Le trou : la boîte garde l'élément visé net, l'ombre immense assombrit tout le reste. */
.tutoriel-voile {
  position: fixed;
  border-radius: 14px;
  pointer-events: none;
  box-shadow: 0 0 0 100vmax var(--voile-tuto);
  transition: left 0.28s ease, top 0.28s ease, width 0.28s ease, height 0.28s ease;
}
.tutoriel-anneau {
  position: fixed;
  border-radius: 14px;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--accent), 0 0 22px 4px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: left 0.28s ease, top 0.28s ease, width 0.28s ease, height 0.28s ease;
}

.tutoriel-carte {
  position: fixed;
  left: 0;
  top: 0;
  width: min(340px, calc(100vw - 2 * var(--marge)));
  padding: 14px 16px 12px;
  border-radius: 16px;
  background: var(--surface-pleine);
  box-shadow: var(--ombre-forte), 0 0 0 1.5px var(--accent);
  animation: apparaitre 0.25s ease both;
}
.tutoriel-carte h2 {
  margin: 6px 0 6px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.tutoriel-texte { margin: 0; font-size: 13px; line-height: 1.45; color: var(--encre-2); }
.tutoriel-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}
.tutoriel-pied .bouton { height: 38px; padding: 0 16px; font-size: 13.5px; }
.tutoriel-passer {
  padding: 6px 2px;
  border: 0;
  background: transparent;
  font: 500 12px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--encre-3);
}
.tutoriel-passer:hover { color: var(--encre); }

/* ---------- Pause et tracé ---------- */

.pause-badge {
  position: fixed;
  z-index: 6;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 7px 6px 14px;
  border-radius: 999px;
  background: var(--encre);
  color: var(--inverse);
  font: 500 11.5px/1 var(--mono);
  text-transform: uppercase;
  box-shadow: var(--ombre);
  animation: apparaitre 0.25s ease both;
}
.pause-badge kbd { background: rgba(127, 127, 127, 0.3); box-shadow: none; color: inherit; }

.trace {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  background: var(--surface-pleine);
  box-shadow: var(--ombre-forte);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  animation: apparaitre 0.3s ease both;
}
#trace-texte { overflow: hidden; text-overflow: ellipsis; }
.trace .pastille {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--trace);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--trace) 22%, transparent);
}
.trace button {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 6px 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--encre);
  color: var(--inverse);
  font-size: 13px;
  font-weight: 500;
}
.trace button kbd { background: rgba(127, 127, 127, 0.3); box-shadow: none; color: inherit; }

/* ---------- Plaques de station ---------- */

#etiquettes {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.plaque {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-pleine);
  box-shadow: var(--ombre);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  transition: box-shadow 0.15s ease, opacity 0.2s ease;
}
.plaque::after {
  /* petite pointe vers la station */
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 0 0 2px 0;
}
.plaque .pastilles { display: flex; gap: 2px; }
.plaque .pastilles i { width: 8px; height: 8px; border-radius: 2px; }
.plaque .compte {
  position: relative;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--creux);
  font: 500 10.5px/1.3 var(--mono);
  text-align: center;
  color: var(--encre-2);
  overflow: hidden;
}
.plaque .compte i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--or);
}
.plaque.charge .compte { background: color-mix(in srgb, var(--or) 25%, var(--surface-pleine)); color: var(--encre); }
.plaque.sature .compte { background: var(--alerte); color: #fff; animation: battre 0.8s ease-in-out infinite; }
.plaque.sature { box-shadow: var(--ombre), 0 0 0 2px var(--alerte); }

.plaque.hors-reseau {
  padding: 3px 9px;
  background: var(--surface);
  color: var(--encre-2);
  font-weight: 500;
  font-size: 11.5px;
}
.plaque.hors-reseau .compte { display: none; }
/* Une station oubliée depuis trop longtemps : elle réclame son métro. */
.plaque.hors-reseau.oubliee { color: var(--alerte); animation: plaque-oubliee 1.4s ease-in-out infinite; }
@keyframes plaque-oubliee {
  0%, 100% { box-shadow: var(--ombre), 0 0 0 1.5px var(--alerte); }
  50% { box-shadow: var(--ombre), 0 0 0 4px color-mix(in srgb, var(--alerte) 35%, transparent); }
}

/* Une gare de banlieue à financer : plaque en pointillés, avec son prix. */
.plaque.gare-projet {
  padding: 3px 4px 3px 4px;
  background: var(--surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--ombre), inset 0 0 0 1.5px var(--accent);
  color: var(--encre);
  font-weight: 500;
  font-size: 11.5px;
}
.plaque.gare-projet::after { box-shadow: 1.5px 1.5px 0 0 var(--accent); }
.plaque.gare-projet.au-bord::after { display: none; } /* accrochée au bord : elle ne pointe plus sur sa gare */
.gare-plus {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.gare-prix { padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font: 500 10.5px/1.3 var(--mono); }
.plaque.gare-projet:hover { background: var(--accent); color: #fff; }
.plaque.gare-projet:hover .gare-plus { background: #fff; color: var(--accent); }
.plaque.gare-projet:hover .gare-prix { background: rgba(255, 255, 255, 0.22); color: #fff; }
.plaque.gare-projet.trop-chere { opacity: 0.6; box-shadow: var(--ombre), inset 0 0 0 1.5px var(--encre-3); }
.plaque.gare-projet.trop-chere .gare-plus { background: var(--encre-3); }
.plaque.gare-projet.trop-chere .gare-prix { background: var(--creux); color: var(--encre-2); }

#etiquettes.actives .plaque.cible { box-shadow: var(--ombre), 0 0 0 2px var(--trace); color: var(--encre); }
#etiquettes.actives .plaque.cible:hover { background: var(--trace); color: #fff; }
#etiquettes.actives .plaque.origine { background: var(--trace); color: #fff; }
#etiquettes.actives .plaque.origine .compte { background: rgba(255, 255, 255, 0.25); color: #fff; }
#etiquettes.actives .plaque:not(.cible):not(.origine) { opacity: 0.5; }

.plaque.choisie { box-shadow: var(--ombre), 0 0 0 2px var(--encre); }
.plaque.foule .nom::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--or);
  vertical-align: 1px;
  animation: battre 0.8s ease-in-out infinite;
}
.plaque.secousse { animation: secousse 0.5s ease; }
@keyframes secousse {
  20%, 60% { translate: -4px 0; }
  40%, 80% { translate: 4px 0; }
}
.plaque.neuve { animation: neuve 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.4) both; }
@keyframes neuve { from { opacity: 0; scale: 0.4; } }
.plaque.fermee { background: repeating-linear-gradient(-45deg, var(--surface-pleine) 0 6px, color-mix(in srgb, var(--alerte) 16%, var(--surface-pleine)) 6px 12px); }
.plaque.fermee .nom::before { content: 'Fermée · '; color: var(--alerte); }
.plaque.panne .compte { outline: 2px solid var(--or); outline-offset: 1px; }
.plaque.grise { filter: grayscale(1); }

/* « +1 » qui s'envole d'une station à chaque arrivée. */
#effets {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.effet {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--positif);
  text-shadow: 0 1px 0 var(--surface-pleine), 0 0 6px var(--surface-pleine);
  animation: envol 1.1s ease-out both;
}
@keyframes envol {
  0% { opacity: 0; translate: -50% 0; }
  15% { opacity: 1; }
  100% { opacity: 0; translate: -50% -34px; }
}
.effet.renfort { padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; text-shadow: none; font-size: 12px; }
.effet.note { color: var(--violet); font-size: 20px; animation-duration: 1.8s; }
.effet.coeur { color: #e0405a; font-size: 24px; animation-duration: 1.6s; }
.effet.dore { color: var(--or); font-size: 15px; animation-duration: 1.6s; }
.effet.perte { color: var(--alerte); font-size: 15px; animation-duration: 1.6s; }

/* ---------- Épingles des dossiers du maire ---------- */

#epingles { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
body.sur-accueil #epingles,
body.plan-ouvert #epingles { display: none; }
.epingle {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -44px 0 0 -17px;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  animation: epingle-pose 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
@keyframes epingle-pose { from { opacity: 0; translate: 0 -24px; } }
/* La goutte : ronde en haut, pointue en bas, sur le lieu. */
.epingle-tete {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: var(--service);
  box-shadow: 0 0 0 2.5px var(--surface-pleine), 0 6px 14px -4px rgba(0, 0, 0, 0.45);
}
.epingle-tete svg {
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Le temps qui reste : un anneau qui se vide autour de la goutte. */
.epingle-anneau {
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  background: conic-gradient(from 225deg, var(--service) calc(var(--reste) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 80%);
  mask: radial-gradient(closest-side, transparent 78%, #000 80%);
  opacity: 0.55;
  z-index: -1;
}
/* « Important » : un halo qui pulse tant que le dossier attend. */
.epingle:not(.travaux) .epingle-tete::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--service);
  animation: epingle-appel 1.8s ease-out infinite;
}
@keyframes epingle-appel { to { box-shadow: 0 0 0 16px transparent; } }
.epingle-nom {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 10px 6px;
  border-radius: 10px;
  background: var(--surface-pleine);
  box-shadow: var(--ombre);
  text-align: left;
  white-space: nowrap;
  color: var(--encre);
}
.epingle-nom b { font-size: 12.5px; font-weight: 600; letter-spacing: -0.02em; }
.epingle-nom span { font: 400 10px/1.3 var(--mono); text-transform: uppercase; color: var(--encre-3); }
.epingle:hover .epingle-nom,
.epingle.ouverte .epingle-nom { box-shadow: var(--ombre), 0 0 0 2px var(--service); }
.epingle.urgent .epingle-tete { animation: battre 0.8s ease-in-out infinite; }
.epingle.urgent .epingle-nom b { color: var(--alerte); }
.epingle.travaux .epingle-tete { background: var(--encre-2); }
.epingle.travaux .epingle-nom { opacity: 0.75; }
.epingle.hors-champ .epingle-nom { display: none; }
.epingle-fleche { display: none; }
.epingle.hors-champ .epingle-fleche {
  display: block;
  position: absolute;
  left: 17px;
  top: 44px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-left: 10px solid var(--service);
  transform: rotate(var(--angle)) translateX(26px) translateY(-6px);
  transform-origin: 0 0;
}
.epingle.partie { opacity: 0; transition: opacity 0.35s; }

/* Une épingle toute neuve : des ondes qui s'élargissent autour d'elle, pour attirer l'œil. */
.epingle.nouvelle .epingle-tete::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 3px solid var(--service);
  animation: epingle-onde 1.2s ease-out 4;
  pointer-events: none;
}
@keyframes epingle-onde {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0; transform: scale(3.2); }
}
.epingle.nouvelle { animation: epingle-pose 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) both, epingle-saute 0.6s ease-in-out 0.5s 3; }
@keyframes epingle-saute { 50% { translate: 0 -12px; } }
.epingle.nouvelle .epingle-nom { box-shadow: var(--ombre), 0 0 0 2px var(--service); }

/* Le bandeau « nouveau dossier », en haut de l'écran : un clic ouvre le dossier. */
.alerte-dossier {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(440px, 100%);
  padding: 9px 10px 11px 10px;
  border: 0;
  border-radius: 16px;
  background: var(--surface-pleine);
  box-shadow: var(--ombre-forte), 0 0 0 2px var(--service);
  color: var(--encre);
  text-align: left;
}
.alerte-dossier.arrive {
  animation:
    alerte-tombe 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25) both,
    alerte-appel 1.1s ease-out 0.4s 3;
}
@keyframes alerte-tombe { from { opacity: 0; transform: translateY(-40px) scale(0.92); } }
@keyframes alerte-appel {
  from { box-shadow: var(--ombre-forte), 0 0 0 2px var(--service), 0 0 0 0 color-mix(in srgb, var(--service) 55%, transparent); }
  to { box-shadow: var(--ombre-forte), 0 0 0 2px var(--service), 0 0 0 18px transparent; }
}
.alerte-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--service);
}
.alerte-dossier.arrive .alerte-icone { animation: sceau 0.7s ease 0.3s both; }
.alerte-icone svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alerte-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.alerte-corps .sur { color: var(--service); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alerte-corps strong { font-size: 15px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
.alerte-voir {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 6px 0 14px;
  border-radius: 999px;
  background: var(--encre);
  color: var(--inverse);
  font-size: 13px;
  font-weight: 600;
}
.alerte-voir kbd { background: rgba(127, 127, 127, 0.3); box-shadow: none; color: inherit; }
.alerte-dossier:hover .alerte-voir { background: var(--service); color: #fff; }
.alerte-barre {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--service);
  transform-origin: left;
  animation: alerte-file var(--duree, 7s) linear both;
}
@keyframes alerte-file { to { transform: scaleX(0); } }

/* Le bouton des épingles bat tant qu'on n'a pas regardé le nouveau dossier. */
#b-dossiers.nouveau { background: color-mix(in srgb, var(--alerte) 14%, transparent); color: var(--alerte); }
#b-dossiers.nouveau::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: pulser-alerte 1.4s ease-out infinite;
  pointer-events: none;
}
@keyframes pulser-alerte {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--alerte) 50%, transparent); }
  to { box-shadow: 0 0 0 10px transparent; }
}

/* La fiche d'un dossier, ouverte à côté de son épingle. */
.dossier {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 7;
  width: 340px;
  padding: 14px 14px 16px;
  border-radius: 18px;
  background: var(--surface-pleine);
  box-shadow: var(--ombre-forte);
  overflow: hidden;
}
.dossier.arrive { animation: dossier-ouvre 0.3s cubic-bezier(0.2, 0.8, 0.2, 1.1) both; }
@keyframes dossier-ouvre { from { opacity: 0; scale: 0.94; } }
.dossier-tete { display: flex; align-items: center; gap: 10px; }
.dossier-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--service);
}
.dossier-icone svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dossier-ou { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dossier-ou b { font: 500 10.5px/1.2 var(--mono); text-transform: uppercase; color: var(--service); }
.dossier-ou span { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dossier-temps {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--creux);
  font: 500 11.5px/1 var(--mono);
}
.dossier.urgent .dossier-temps { background: var(--alerte); color: #fff; }
.dossier h2 { margin: 14px 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.045em; line-height: 1.1; }
.dossier-texte { margin: 0 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--encre-2); }
.dossier-choix { display: grid; gap: 6px; }
.dossier-choix .option { --categorie: var(--service); padding: 10px 12px; }
.dossier-oubli { margin: 10px 0 0; font: 400 10.5px/1.4 var(--mono); text-transform: uppercase; color: var(--encre-3); }
.dossier-barre { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--service); transition: width 0.15s linear; }
.dossier.urgent .dossier-barre { background: var(--alerte); }

/* ---------- Bulles et messages ---------- */

.infobulle {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 180px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-pleine);
  box-shadow: var(--ombre-forte);
  font-size: 12.5px;
  pointer-events: none;
}
.infobulle strong { font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; }
.infobulle .bulle-chiffres { display: flex; justify-content: space-between; gap: 16px; color: var(--encre-2); }
.infobulle .bulle-cout { font-weight: 600; color: var(--encre); }
.infobulle .bulle-reste { font: 400 10.5px/1.4 var(--mono); text-transform: uppercase; color: var(--encre-3); }
.infobulle .bulle-erreur { color: var(--alerte); font-weight: 600; }

.message {
  position: fixed;
  z-index: 9;
  bottom: 104px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(480px, calc(100vw - 32px));
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--alerte);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  box-shadow: var(--ombre-forte);
  animation: apparaitre 0.25s ease both;
}
.message.bon { background: var(--positif); }
.message.info { background: var(--encre); color: var(--inverse); }
body.courrier-ouvert .message { bottom: auto; top: 140px; }

.annonce {
  position: fixed;
  z-index: 8;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(760px, calc(100vw - 32px));
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
.annonce strong {
  font-size: clamp(30px, 4.2vw, 54px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1.02;
  color: var(--encre);
  text-shadow: 0 0 24px var(--papier), 0 0 8px var(--papier), 0 0 2px var(--papier);
}
.annonce .sur {
  padding: 5px 9px;
  border-radius: 4px;
  background: var(--encre);
  color: var(--inverse);
  transform: rotate(-2deg);
}
.annonce.bon .sur { background: var(--accent); color: #fff; }
.annonce.mauvais .sur { background: var(--alerte); color: #fff; }
.annonce.visible { animation: annonce 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes annonce {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(0.96); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -56%); }
}

/* ---------- Puces d'effet (choix, contrats, objectifs) ---------- */

.puces { display: flex; flex-wrap: wrap; gap: 4px; }
.puce {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--creux);
  color: var(--encre-2);
  font: 500 10.5px/1.3 var(--mono);
  text-transform: uppercase;
  white-space: nowrap;
}
.puce svg { width: 10px; height: 10px; fill: currentColor; }
.puce.plus { background: color-mix(in srgb, var(--positif) 14%, transparent); color: var(--positif); }
.puce.moins { background: color-mix(in srgb, var(--alerte) 13%, transparent); color: var(--alerte); }
.puce.definitif { box-shadow: inset 0 0 0 1px currentColor; }
.puce.risque { background: color-mix(in srgb, var(--violet) 15%, transparent); color: var(--violet); }

/* ---------- Haut de l'écran : découvert, incident, effets en cours ---------- */

.pile-haut {
  position: fixed;
  z-index: 7;
  top: 82px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: min(calc(100vw - 32px), clamp(340px, calc(100vw - 700px), 640px)); /* jamais trop étroite pour lire une alerte */
  pointer-events: none;
}
.pile-haut > * { pointer-events: auto; }
body.en-pause .pile-haut { top: 124px; }

.decouvert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 10px 18px;
  border-radius: 14px;
  background: var(--alerte);
  color: #fff;
  font-size: 12.5px;
  text-align: center;
  box-shadow: var(--ombre-forte);
}
.decouvert strong { font-size: 14px; font-weight: 600; }

.modificateurs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.modificateurs li {
  position: relative;
  overflow: hidden;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--ombre);
  font: 500 10.5px/1.3 var(--mono);
  text-transform: uppercase;
  color: var(--encre-2);
  animation: apparaitre 0.3s ease both;
}
.modificateurs li i { position: absolute; left: 0; bottom: 0; height: 2px; background: currentColor; opacity: 0.6; }
.modificateurs li.plus { color: var(--positif); }
.modificateurs li.moins { color: var(--alerte); }
/* Le rappel du Grand Paris : un clic montre la banlieue. */
.modificateurs li.grand-paris {
  pointer-events: auto;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.modificateurs li.grand-paris::after { content: ' →'; }
.modificateurs li.grand-paris:hover { filter: brightness(1.1); }
.modificateurs li.pointe { color: var(--or); }
.modificateurs li.pointe::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
  animation: battre 0.9s ease-in-out infinite;
}

.incident {
  --categorie: var(--accent);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(460px, 100%);
  padding: 10px 10px 12px 14px;
  border-radius: 16px;
  background: var(--surface-pleine);
  box-shadow: var(--ombre-forte);
}
.incident.nouveau { animation: incident 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
@keyframes incident {
  0% { opacity: 0; transform: translateY(-14px) scale(0.96); }
  100% { opacity: 1; transform: none; }
}
.incident-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.incident .sur { color: var(--categorie); }
.incident strong { font-size: 14.5px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.incident-texte { font-size: 12.5px; color: var(--encre-2); line-height: 1.35; }
.incident.grave:not(.reagi) #incident-temps { color: var(--alerte); }
.incident-reagir {
  flex: none;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 1px;
  padding: 8px 10px 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--encre);
  color: var(--inverse);
  font-size: 13px;
  font-weight: 600;
  transition: transform 0.15s ease, background 0.15s ease;
}
.incident.grave:not(.reagi) .incident-reagir { background: var(--alerte); color: #fff; animation: battre 0.9s ease-in-out infinite; }
.incident-reagir:hover:not(:disabled) { transform: translateY(-1px); }
.incident-reagir:disabled { cursor: default; opacity: 0.5; animation: none; }
.incident.reagi .incident-reagir { background: var(--positif); color: #fff; opacity: 1; }
.incident-reagir b { grid-row: 2; font: 500 10.5px/1.2 var(--mono); opacity: 0.85; }
.incident-reagir kbd { grid-row: 1 / 3; grid-column: 2; background: rgba(255, 255, 255, 0.22); box-shadow: none; color: inherit; }
.incident.reagi .incident-reagir b,
.incident.reagi .incident-reagir kbd { display: none; }
.incident-barre { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--categorie); transition: width 0.1s linear; }

.equipes { display: flex; gap: 4px; flex: none; }
.equipes i { width: 8px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--categorie); }
.equipes i.libre { background: var(--categorie); }

/* ---------- Colonne de droite : contrat et station ---------- */

.colonne-droite {
  position: fixed;
  z-index: 5;
  top: 80px;
  right: var(--marge);
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.colonne-droite > * { pointer-events: auto; }
.colonne-droite .carte { position: relative; }

.contrat { padding: 12px 14px 14px 16px; }
.contrat.nouveau { animation: arrivee 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes arrivee { from { opacity: 0; transform: translateX(24px); } }
.contrat-tete { display: flex; justify-content: space-between; align-items: center; }
.contrat-tete .sur { color: var(--or); }
.contrat-temps {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--creux);
  font: 500 11px/1 var(--mono);
}
.contrat.urgent .contrat-temps { background: var(--alerte); color: #fff; }
.contrat strong { display: block; margin-top: 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.2; }
.contrat p { margin: 3px 0 10px; font-size: 12.5px; color: var(--encre-2); }
.contrat-barre {
  height: 4px;
  margin-bottom: 10px;
  border-radius: 2px;
  background: var(--creux-2);
  overflow: hidden;
}
.contrat-barre i { display: block; height: 100%; width: 0; background: var(--or); transition: width 0.25s ease; }

.panneau-station { padding: 14px 14px 14px 16px; animation: arrivee 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.station-tete { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.station-tete h2 { margin: 4px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.station-quai { margin-bottom: 10px; }
.station-chiffre { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.station-chiffre b { font-size: 26px; font-weight: 600; letter-spacing: -0.05em; }
.station-chiffre span { color: var(--encre-2); font-size: 12.5px; }
.station-quai .contrat-barre i { background: var(--accent); }
.panneau-station.sature .station-quai .contrat-barre i { background: var(--alerte); }
.panneau-station.sature .station-chiffre b { color: var(--alerte); }
.station-actions { display: grid; gap: 6px; margin-top: 12px; }
.action {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--bouton);
  box-shadow: inset 0 0 0 1px var(--bord);
  text-align: left;
  transition: background 0.15s ease, transform 0.15s ease;
}
.action:hover:not(:disabled) { background: var(--bouton-survol); }
.action:active:not(:disabled) { transform: translateY(1px); }
.action:disabled { opacity: 0.45; cursor: not-allowed; }
.action-titre { font-weight: 600; font-size: 13.5px; letter-spacing: -0.02em; }
.action-detail { grid-row: 2; font-size: 11.5px; color: var(--encre-3); }
.action-prix {
  grid-row: 1 / 3;
  grid-column: 2;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--encre);
  color: var(--inverse);
  font-size: 12px;
  font-weight: 600;
}
.action-prix:empty { display: none; }

/* ---------- Objectifs et succès ---------- */

.panneau-objectifs {
  z-index: 8;
  top: 80px;
  left: calc(var(--marge) + 258px);
  width: 340px;
  max-height: calc(100vh - 80px - 100px);
  overflow-y: auto;
  padding-bottom: 6px;
  background: var(--surface-pleine);
  box-shadow: var(--ombre-forte);
  animation: apparaitre 0.25s ease both;
}
.panneau-objectifs section { padding: 4px 16px 14px; }
.panneau-objectifs section + section { border-top: 1px solid var(--trait); padding-top: 14px; }
.objectifs-pied { margin: 0; padding: 12px 16px 10px; border-top: 1px solid var(--trait); }
.objectifs-pied .bouton { width: 100%; justify-content: center; height: 38px; font-size: 13px; }
.objectifs-liste,
.succes-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.objectifs-liste li { padding: 10px 12px; border-radius: 12px; background: var(--creux); }
.objectifs-liste li.vide { background: none; padding: 0; color: var(--encre-2); }
.objectif-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.objectif-tete strong { font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; }
.objectif-barre { height: 4px; margin: 8px 0 5px; border-radius: 2px; background: var(--creux-2); overflow: hidden; }
.objectif-barre i { display: block; height: 100%; background: var(--accent); transition: width 0.3s ease; }
.objectif-chiffre { font: 400 10.5px/1.2 var(--mono); text-transform: uppercase; color: var(--encre-3); }
.succes-liste li {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 10px;
  font-size: 12px;
  color: var(--encre-3);
}
.succes-liste li i {
  grid-row: span 2;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--creux);
  box-shadow: inset 0 0 0 1.5px var(--trait-fort);
}
.succes-liste li strong { font-size: 13px; font-weight: 600; letter-spacing: -0.02em; color: var(--encre-2); }
.succes-liste li em { font: normal 500 10.5px var(--mono); color: var(--accent); }
.succes-liste li.obtenu i {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: none;
}
.succes-liste li.obtenu strong { color: var(--encre); }
.succes-liste li.obtenu span { color: var(--encre-2); }

/* ---------- Pile du bas : le courrier du maire et l'aide au tracé ---------- */

.pile-bas {
  position: fixed;
  z-index: 6;
  left: 50%;
  bottom: calc(var(--marge) + 84px);
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 2 * var(--marge)));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.pile-bas > * { pointer-events: auto; }

/* Le courrier : la partie continue, mais il doit sauter aux yeux. */
.courrier {
  --categorie: var(--accent);
  position: relative;
  width: 100%;
  padding: 16px 18px 18px 70px;
  border-radius: 20px;
  background: var(--surface-pleine);
  box-shadow: var(--ombre-forte);
  overflow: hidden;
}
.courrier.arrive {
  animation:
    courrier-arrive 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.25) both,
    courrier-appel 1.1s ease-out 0.45s 3;
}
@keyframes courrier-arrive {
  from { opacity: 0; transform: translateY(80px) scale(0.9) rotate(-2deg); }
  to { opacity: 1; transform: none; }
}
@keyframes courrier-appel {
  from { box-shadow: var(--ombre-forte), 0 0 0 0 color-mix(in srgb, var(--categorie) 60%, transparent); }
  to { box-shadow: var(--ombre-forte), 0 0 0 22px transparent; }
}
.courrier-sceau {
  position: absolute;
  left: 16px;
  top: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--categorie);
  color: #fff;
}
.courrier.arrive .courrier-sceau { animation: sceau 0.7s ease 0.35s both; }
@keyframes sceau {
  0% { transform: scale(0.4) rotate(-25deg); }
  60% { transform: scale(1.18) rotate(8deg); }
  100% { transform: none; }
}
.courrier-sceau svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.courrier-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.courrier-tete .sur { color: var(--categorie); }
.courrier-temps {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--creux);
  font: 500 11.5px/1 var(--mono);
}
.courrier h2 { margin: 6px 0 4px; font-size: 21px; font-weight: 600; letter-spacing: -0.045em; line-height: 1.1; }
.courrier-texte { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--encre-2); }
.courrier-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.courrier-choix .option { padding: 10px 12px; }
.courrier-conseil { margin: 10px 0 0; font: 400 10.5px/1.4 var(--mono); text-transform: uppercase; color: var(--encre-3); }
.courrier-barre { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--categorie); transition: width 0.15s linear; }
/* Les dernières secondes : tout passe au rouge et le courrier tremble. */
.courrier.urgent .courrier-barre,
.courrier.urgent .courrier-sceau { background: var(--alerte); }
.courrier.urgent .courrier-temps { background: var(--alerte); color: #fff; }
.courrier.urgent .courrier-conseil { color: var(--alerte); }
.courrier.urgent { animation: trembler 1s ease-in-out infinite; box-shadow: var(--ombre-forte), 0 0 0 2px var(--alerte); }
@keyframes trembler {
  0%, 30%, 100% { transform: none; }
  6% { transform: translateX(-4px) rotate(-0.4deg); }
  12% { transform: translateX(4px) rotate(0.4deg); }
  18% { transform: translateX(-3px); }
  24% { transform: translateX(2px); }
}

/* ---------- Choix (courrier, dossiers, grande carte) ---------- */

.option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border: 0;
  border-radius: 14px;
  background: var(--bouton);
  box-shadow: inset 0 0 0 1px var(--bord);
  text-align: left;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.option:hover:not(:disabled),
.option:focus-visible {
  background: var(--surface-pleine);
  box-shadow: var(--ombre), 0 0 0 2px var(--categorie, var(--encre));
  transform: translateY(-1px);
  outline: none;
}
.option:disabled { opacity: 0.45; cursor: not-allowed; }
.option-tete { display: flex; align-items: center; gap: 8px; }
.option-tete strong { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.option-tete kbd { background: var(--surface-pleine); }
.option-note { font: 500 10.5px/1.2 var(--mono); text-transform: uppercase; color: var(--alerte); }

/* ---------- Grande carte d'événement et bilan annuel (la partie est suspendue) ---------- */

dialog { color: var(--encre); }
.evenement,
.bilan-annee,
.fin {
  border: 0;
  border-radius: 24px;
  background: var(--surface-pleine);
  box-shadow: var(--ombre-forte);
}
.evenement::backdrop,
.bilan-annee::backdrop,
.fin::backdrop {
  background: rgba(12, 12, 12, 0.4);
  backdrop-filter: blur(3px) saturate(0.8);
}
.evenement {
  --categorie: var(--accent);
  width: min(560px, calc(100vw - 32px));
  padding: 24px 26px 24px;
}
.evenement[open] { animation: carte 0.55s cubic-bezier(0.2, 0.8, 0.2, 1.1) both; }
@keyframes carte { from { opacity: 0; transform: translateY(40px) rotate(-2deg) scale(0.94); } }
.evenement-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.categorie {
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--categorie);
  color: #fff;
  font: 500 11px/1.2 var(--mono);
  text-transform: uppercase;
}
.evenement-date { font: 400 11px/1.2 var(--mono); text-transform: uppercase; color: var(--encre-3); }
.evenement h2 { margin: 0 0 8px; font-size: 34px; font-weight: 600; letter-spacing: -0.055em; line-height: 1.04; }
.evenement-texte { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: var(--encre-2); }
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choix .option { padding: 14px; }

.bilan-annee {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 26px 28px 26px;
  overflow-y: auto;
}
.bilan-annee[open] { animation: apparaitre 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.bilan-annee h2 { margin: 6px 0 18px; font-size: 40px; font-weight: 600; letter-spacing: -0.055em; line-height: 1; }
.bilan-colonnes { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.comptabilite { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.comptabilite th { padding: 7px 0; font-weight: 400; text-align: left; color: var(--encre-2); }
.comptabilite td { padding: 7px 0; font-weight: 600; text-align: right; }
.comptabilite tbody tr + tr { border-top: 1px solid var(--trait); }
.comptabilite tfoot tr:first-child { border-top: 1.5px solid var(--encre); }
.comptabilite tfoot th { color: var(--encre); font-weight: 600; }
.comptabilite tfoot td { font-size: 15px; }
.comptabilite .caisse th,
.comptabilite .caisse td { color: var(--encre-3); font-size: 12.5px; }
.comptabilite .plus,
.bilan-pop .plus { color: var(--positif); }
.comptabilite .moins,
.bilan-pop .moins { color: var(--alerte); }
.bilan-cote { display: flex; flex-direction: column; gap: 8px; }
.bilan-pop,
.bilan-nouvelles { padding: 14px; border-radius: 14px; background: var(--creux); }
.bilan-pop b { display: block; margin: 6px 0 4px; font-size: 38px; font-weight: 600; letter-spacing: -0.06em; line-height: 1; }
#bilan-pop-note { font-size: 12px; color: var(--encre-2); }
.bilan-causes { margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid var(--trait); list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.bilan-causes li { display: flex; justify-content: space-between; gap: 10px; color: var(--encre-2); }
.bilan-causes b { display: inline; margin: 0; font-size: inherit; font-weight: 600; letter-spacing: 0; line-height: inherit; font-variant-numeric: tabular-nums; }
.bilan-causes .plus { color: var(--positif); }
.bilan-causes .moins { color: var(--alerte); }
.bilan-nouveaute { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.bilan-nouveaute[hidden] { display: none; }
.bilan-nouveaute p {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: 13px;
  line-height: 1.45;
}
.bilan-nouveaute .sur { color: var(--accent); margin-bottom: 2px; }
.bilan-nouveaute strong { font-weight: 600; }
.bilan-nouvelles ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.bilan-nouvelles li { padding: 4px 10px; border-radius: 999px; background: var(--surface-pleine); box-shadow: var(--ombre); font-size: 12.5px; font-weight: 600; }
.bilan-nouvelles p { margin: 6px 0 0; font-size: 12.5px; color: var(--encre-2); }
.bilan-consigne { margin: 24px 0 10px; }
.projets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.projet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 14px 14px;
  border: 0;
  border-radius: 16px;
  background: var(--bouton);
  box-shadow: inset 0 0 0 1px var(--bord);
  text-align: left;
  animation: apparaitre 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.projet:nth-child(2) { animation-delay: 0.08s; }
.projet:nth-child(3) { animation-delay: 0.16s; }
.projet:hover,
.projet:focus-visible { background: var(--surface-pleine); box-shadow: var(--ombre), 0 0 0 2px var(--encre); transform: translateY(-2px); outline: none; }
.projet-numero {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--encre);
  color: var(--inverse);
  font: 500 11px/1 var(--mono);
}
.projet strong { font-size: 17px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.15; }
.projet span:last-child { font-size: 12.5px; color: var(--encre-2); }

/* ---------- Fin de mandat ---------- */

.fin {
  width: min(500px, calc(100vw - 32px));
  padding: 32px 30px 28px;
  text-align: center;
}
.fin[open] { animation: apparaitre 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.fin .sur { display: inline-block; padding: 4px 8px; border-radius: 4px; background: var(--encre); color: var(--inverse); }
.fin h2 { margin: 14px 0 6px; font-size: 64px; font-weight: 600; letter-spacing: -0.065em; line-height: 1; }
.fin.reelu h2 { color: var(--positif); }
.fin.battu h2 { color: var(--alerte); }
.fin-texte { margin: 0 auto; max-width: 36ch; color: var(--encre-2); }
.bilan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 24px 0; text-align: left; }
.bilan div { padding: 12px; border-radius: 12px; background: var(--creux); }
.bilan dt { font: 500 10px/1.2 var(--mono); text-transform: uppercase; color: var(--encre-3); }
.bilan dd { margin: 6px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -0.05em; }
.fin-courbe { width: 100%; height: auto; margin: -8px 0 22px; }
.fin-courbe path { fill: none; stroke: var(--encre); stroke-width: 2; stroke-linejoin: round; }
.fin-courbe circle { fill: var(--surface-pleine); stroke: var(--encre); stroke-width: 1.6; }
.fin-courbe .seuil { stroke: var(--accent); stroke-dasharray: 4 4; }
.fin-courbe text { font: 500 10px var(--mono); fill: var(--accent); }

/* ---------- Plan du métro (remplace la ville 3D) ---------- */

/* Les couleurs suivent le thème : le plan passe en clair ou en sombre avec le reste. */
.plan {
  --plan-fond: var(--papier);
  --plan-ville: var(--surface-pleine);
  --plan-trait: var(--creux-2);
  --plan-eau: color-mix(in srgb, #3b8fd6 32%, var(--surface-pleine));
  --plan-parc: color-mix(in srgb, #43a047 20%, var(--surface-pleine));
  position: fixed;
  inset: 0;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.plan.visible { opacity: 1; transition: opacity 0.5s ease 0.6s; }
.plan[hidden] { display: none; }
#plan-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#plan-svg:active { cursor: grabbing; }

.plan-papier { fill: var(--plan-fond); }
.plan-grille { stroke: var(--trait); fill: none; }
.plan-ville { fill: var(--plan-ville); stroke: var(--plan-trait); stroke-linejoin: miter; }
.plan-bois { fill: var(--plan-parc); opacity: 0.7; }
.plan-parc { fill: var(--plan-parc); }
.plan-seine { fill: none; stroke: var(--plan-eau); stroke-linejoin: miter; stroke-linecap: butt; }
.plan-fleuve { fill: color-mix(in srgb, #3b8fd6 75%, var(--encre)); font-family: var(--mono); font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; }
.plan-repere { fill: var(--encre-3); font-family: var(--mono); font-weight: 500; text-anchor: middle; }
.plan-repere-point { fill: var(--encre-3); }
.plan-nord rect { fill: var(--surface-pleine); stroke: var(--trait-fort); }
.plan-nord path { fill: var(--encre); }
.plan-nord text { fill: var(--encre-2); font-family: var(--mono); font-weight: 500; text-anchor: middle; }

.plan-lisere { fill: none; stroke: var(--plan-ville); stroke-linejoin: miter; }
.plan-trait { fill: none; stroke-linecap: butt; stroke-linejoin: miter; }
.plan.entree .plan-trait { stroke-dasharray: 1; animation: plan-tracer 1s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both; }
@keyframes plan-tracer { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.plan-badge text { fill: #fff; font-family: var(--sans); font-weight: 700; text-anchor: middle; }

.plan-station { cursor: pointer; }
.plan-cible { fill: transparent; }
.plan-corresp { fill: var(--surface-pleine); stroke: var(--encre); }
.plan-isolee { fill: var(--plan-ville); stroke: var(--encre-3); }
.plan-nom {
  fill: var(--encre);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  stroke: var(--plan-fond);
  stroke-linejoin: round;
  paint-order: stroke;
}
.plan-station.isolee .plan-nom { fill: var(--encre-3); font-weight: 500; }
.plan-station:hover .plan-nom,
.plan-station.choisie .plan-nom { fill: var(--accent); }
.plan-station:hover .plan-corresp,
.plan-station.choisie .plan-corresp { stroke: var(--accent); }
.plan-alerte { fill: none; stroke: var(--alerte); opacity: 0; }
.plan-alerte.active { animation: plan-alerte 1s ease-in-out infinite; }
@keyframes plan-alerte { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.9; } }
.plan-compte rect { fill: var(--encre); }
.plan-compte text { fill: var(--inverse); font-family: var(--mono); font-weight: 500; text-anchor: middle; }
.plan-compte.charge rect { fill: var(--or); }
.plan-compte.plein rect { fill: var(--alerte); }
.plan-compte.charge text,
.plan-compte.plein text { fill: #fff; }
.plan-rame path { fill: var(--encre); stroke: var(--plan-ville); }
.plan-rame.pleine path { fill: var(--or); }

.plan-legende {
  top: 112px;
  left: var(--marge);
  width: 300px;
  max-height: calc(100vh - 112px - var(--marge));
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface-pleine);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.plan.visible .plan-legende { opacity: 1; transform: none; transition-delay: 0.9s; }
.plan-tete h2 { margin: 6px 0 0; font-size: 26px; font-weight: 600; letter-spacing: -0.055em; line-height: 1; }
.plan-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plan-liste li {
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: 10px;
  align-items: center;
}
.plan-liste li i {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--ligne);
  color: #fff;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
}
.plan-liste li b { font-size: 13px; font-weight: 600; letter-spacing: -0.02em; }
.plan-liste li span { font: 400 10px/1.4 var(--mono); text-transform: uppercase; color: var(--encre-3); }
.plan-vide { margin: 0; font-size: 13px; color: var(--encre-2); }
.plan-totaux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
.plan-totaux div { display: flex; flex-direction: column-reverse; gap: 4px; padding: 10px; border-radius: 12px; background: var(--creux); }
.plan-totaux dt { font: 500 9.5px/1.2 var(--mono); text-transform: uppercase; color: var(--encre-3); }
.plan-totaux dd { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.05em; }
.plan-totaux .alerte dd { color: var(--alerte); }
.plan-symboles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 12px; color: var(--encre-2); }
.plan-symboles i { display: inline-block; width: 16px; height: 9px; margin-right: 8px; vertical-align: middle; }
.sym-corresp { background: var(--surface-pleine); box-shadow: inset 0 0 0 2px var(--encre); border-radius: 2px; }
.sym-arret { width: 4px !important; height: 11px !important; background: var(--encre-2); }
.sym-isolee { width: 8px !important; height: 8px !important; box-shadow: inset 0 0 0 1.5px var(--encre-3); transform: rotate(45deg); }
.sym-rame { background: var(--encre); clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%); }
.plan-echelle { display: flex; align-items: center; gap: 8px; font: 400 10.5px/1 var(--mono); text-transform: uppercase; color: var(--encre-3); }
.plan-echelle i { height: 6px; border: 1.5px solid var(--encre-2); border-top: 0; }
#b-plan-fermer { height: 40px; justify-content: center; font-size: 13.5px; }
#b-plan-fermer kbd { margin-left: 2px; }

/* Plan ouvert : le dock, le journal et les plaques de la ville laissent la place. */
body.plan-ouvert .dock,
body.plan-ouvert .journal,
body.plan-ouvert #etiquettes { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
body.plan-ouvert .dock * { pointer-events: none; }
body.plan-ouvert .objectifs-bouton,
body.plan-ouvert .panneau-objectifs { display: none; }

/* ---------- Écrans moyens ---------- */

@media (max-width: 1100px) and (min-width: 901px) {
  /* La capsule ne tient plus entre la carte du mandat et la barre d'outils : elle passe
     sur une deuxième ligne, centrée, sans ses libellés (les icônes et les infobulles restent). */
  .capsule { top: 72px; }
  .capsule > .stat .sur { display: none; }
  .stat-texte { min-width: 0; }
  .jauge { display: none; }
  .pile-haut { top: 140px; max-width: clamp(340px, calc(100vw - 700px), 640px); }
  .ligne-ouvrir .ligne-titre span,
  .nouvelle .ligne-titre span { display: none; }

  /* À cette largeur, trois lignes, la carte « Nouvelle ligne » et le ticket ne tiennent
     pas entre le bord et le journal : les cartes défilent dans le dock et « Nouvelle ligne »
     reste collée au bord droit, donc toujours cliquable. */
  .lignes {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--encre-3) transparent;
  }
  .nouvelle { position: sticky; right: 0; z-index: 1; }
  .nouvelle button {
    background: var(--surface-pleine);
    box-shadow: -12px 0 16px -12px rgba(28, 28, 28, 0.35);
  }

  /* Le flou du fond fait de la carte le repère du détail : celui-ci ne pourrait plus
     sortir de la bande qui défile. Le fond étant déjà presque opaque, on s'en passe. */
  .ligne {
    background: var(--surface-pleine);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Le détail d'une ligne quitte la bande qui défile : il se pose au-dessus du dock,
     à l'aplomb de sa carte (position calculée dans ui.js). */
  .ligne-detail {
    position: fixed;
    left: var(--detail-x, var(--marge));
    right: auto;
    bottom: calc(var(--marge) + 96px);
    width: min(320px, calc(100vw - 2 * var(--marge)));
  }
}

@media (max-height: 820px) and (min-width: 901px) {
  body.station-ouverte .journal { display: none; }
}

/* ---------- Téléphone ---------- */

@media (max-width: 900px) {
  :root { --marge: 10px; }
  .accueil { justify-content: flex-end; padding-bottom: 56px; background: linear-gradient(0deg, var(--voile-accueil) 0%, var(--voile-accueil) 52%, transparent 88%); }
  .accueil::before { right: 0; }
  .accueil h1 em::after { display: none; }
  .accueil-chiffres { display: none; }
  .regles { grid-template-columns: 1fr; }

  .carte-mandat { width: auto; padding: 8px 12px; }
  .carte-mandat > .sur, .mandat-mois, .objectifs-bouton { display: none; }
  .mandat-ligne { margin: 0 0 6px; }
  .mandat-annee { font-size: 20px; }
  .frise { width: 90px; }
  .panneau-objectifs { left: var(--marge); right: var(--marge); top: 120px; width: auto; }

  .capsule { top: 66px; left: var(--marge); right: var(--marge); transform: none; justify-content: space-between; padding: 4px; }
  .stat { padding: 2px 6px 2px 2px; gap: 6px; }
  .stat-icone { width: 26px; height: 26px; padding: 5px; }
  .stat-valeur { font-size: 15px; }
  .capsule .separateur, .jauge { display: none; }
  .outils { max-width: calc(100vw - 150px); overflow-x: auto; scrollbar-width: none; }
  .outils .separateur, .vitesse { display: none; }

  .dock { right: var(--marge); max-width: none; }
  .lignes { overflow-x: auto; scrollbar-width: none; flex: 1; }
  .ligne { flex: 0 0 168px; padding: 6px 6px 4px 8px; }
  .ligne-ouvrir .ligne-titre span,
  .nouvelle .ligne-titre span { display: none; }
  .puce-ticket { height: 50px; padding: 0 12px; }
  .ligne-detail,
  .dock-finances { position: fixed; left: var(--marge); right: var(--marge); bottom: calc(var(--marge) + 80px); width: auto; }
  .journal { display: none; }
  .trace { font-size: 12px; white-space: normal; border-radius: 16px; }
  .trace #trace-texte { flex: 1; }
  .pause-badge { top: 124px; }

  .pile-haut { top: 124px; max-width: calc(100vw - 20px); }
  body.en-pause .pile-haut { top: 164px; }
  .colonne-droite { top: auto; bottom: calc(var(--marge) + 80px); left: var(--marge); right: var(--marge); width: auto; }
  body.courrier-ouvert .colonne-droite { display: none; }
  .pile-bas { bottom: calc(var(--marge) + 78px); }
  .contrat { padding: 8px 12px 10px; }
  .contrat p, .contrat .puces { display: none; }
  .contrat strong { font-size: 15px; }
  .contrat-barre { margin-bottom: 0; }
  body.station-ouverte .contrat { display: none; }
  .panneau-station { padding: 10px 12px; }
  .panneau-station .comptes { display: none; }
  .station-tete h2 { font-size: 20px; }
  .station-actions { grid-template-columns: 1fr 1fr; }

  .dossier { width: calc(100vw - 2 * var(--marge)); transform: none !important; left: var(--marge); top: auto; bottom: calc(var(--marge) + 80px); }

  .courrier { padding: 12px 14px 14px; }
  .courrier-sceau { display: none; }
  .courrier h2 { font-size: 18px; }
  .courrier-texte { font-size: 12.5px; margin-bottom: 8px; }
  .courrier-choix { grid-template-columns: 1fr; gap: 6px; }
  .courrier-choix .puces { display: none; }

  .incident { padding: 8px 8px 10px 12px; gap: 10px; }
  .incident-texte { display: none; }

  .choix, .projets, .bilan-colonnes { grid-template-columns: 1fr; }
  .evenement { padding: 20px 18px 18px; }
  .evenement h2 { font-size: 28px; }
  .bilan-annee { padding: 20px 18px; }
  .bilan-annee h2 { font-size: 30px; }
  .bilan { grid-template-columns: 1fr 1fr; }

  .plan-legende { top: auto; bottom: var(--marge); right: var(--marge); width: auto; max-height: 34vh; padding: 12px; gap: 8px; }
  .plan-tete h2 { font-size: 20px; }
  .plan-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .plan-liste li span, .plan-symboles, .plan-echelle { display: none; }
  #b-plan-fermer { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}