/* Section /metro/ — stations oubliees du metro.
   Le reste de la mise en page reutilise css/style.css : .facts, .today-box,
   .wp-extract, .prose, .cards, .crumb. Ne sont definis ici que les objets
   propres au metro : la pastille de ligne et le diagramme de quai. */

.mline {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font: 600 11.5px/1 var(--sans); letter-spacing: 0;
  color: #fff; flex: none; vertical-align: middle;
}
.mline.sm { width: 18px; height: 18px; font-size: 10px }
.mline.ink { color: #14110a }          /* lignes claires : texte sombre */
.mlines { display: inline-flex; gap: 4px; vertical-align: middle }

.eyebrow .mlines { margin-left: 2px }

/* Diagramme : la station morte entre ses deux voisines */
.mdiag {
  margin: 20px 0 4px; padding: 16px 18px 10px;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius); overflow-x: auto;
}
.mdiag + .mdiag { margin-top: 10px }
.mdiag svg { display: block; width: 100%; min-width: 460px; height: auto }
.mdiag-cap {
  margin: 6px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.6;
}
.mdiag text { font-family: var(--sans); fill: var(--ink-2) }
.mdiag .st-name { font-size: 12px; fill: var(--ink-1) }
.mdiag .st-ghost { font-size: 12.5px; font-weight: 650; fill: var(--accent-ink) }
.mdiag .st-note { font-size: 10.5px; fill: var(--ink-3) }

/* Index : les trois familles */
.mgroup { margin-top: 34px }
.mgroup:first-of-type { margin-top: 8px }
.mgroup > h2 { margin: 0 0 4px; font-size: clamp(20px, 2.4vw, 25px) }
.mgroup > p { margin: 0; max-width: 640px; font-size: 14px; color: var(--ink-2); line-height: 1.65 }
.card .mlines { margin-bottom: 9px }
.mcard-meta { display: block; margin-top: 9px; font-size: 12px; color: var(--ink-3) }

/* Raccourcis de cadrage sous la carte d'index */
.mzoom {
  font: inherit; font-size: 12px; cursor: pointer;
  margin: 0 2px; padding: 3px 9px; border-radius: 99px;
  background: var(--surface-1); border: 1px solid var(--hairline); color: var(--ink-2);
}
.mzoom:hover { border-color: var(--accent); color: var(--accent-ink) }

/* Les règles .facts.fN vivent désormais dans css/style.css : elles servent à
   tout le site, pas seulement à cette section. Cf. scripts/fix_facts_columns.py. */