/* ==========================================================================
   HUNGRY JAZZ — PASTILLES DE LIGNES DE TRANSPORT
   --------------------------------------------------------------------------
   Feuille NOUVELLE, absente de la maquette. Elle ne définit que des classes
   `.ligne` et `.lignes`, qu'aucune page validée n'utilise : elle ne peut donc
   rien casser de l'existant.

   Les deux couleurs de chaque pastille arrivent en variables posées par PHP
   (`--ligne-fond`, `--ligne-texte`). La couleur du texte est CALCULÉE d'après
   la luminance du fond, jamais choisie à la main — voir inc/lignes.php.

   Pourquoi pas des images SVG : « 7bis » ne tient pas dans un cercle dessiné
   pour un chiffre. Ici la pastille garde son diamètre et c'est le texte qui
   s'ajuste. Il reste du vrai texte : lu par un lecteur d'écran, agrandi par le
   zoom, copiable.
   ========================================================================== */

.lignes {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4xs);
  vertical-align: middle;
}

.ligne {
  /* `em` et non `px` : la pastille suit la taille du texte qui l'entoure. Elle
     reste juste dans une colonne de faits comme dans un titre. */
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.65em;
  block-size: 1.65em;
  border-radius: 50%;

  background: var(--ligne-fond, #000);
  color: var(--ligne-texte, #fff);

  font-family: var(--f-cond);
  font-size: .8em;
  font-weight: var(--fw-bold);
  line-height: 1;
  /* L'interlettrage des micro-labels du site écarterait le chiffre du centre
     de son cercle. */
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* ---- Lignes « bis » -----------------------------------------------------
   Quatre caractères ne tiennent pas dans un cercle dessiné pour un chiffre.
   Premier essai : réduire le texte à .55em. Résultat illisible à la taille
   réelle. La signalétique elle-même ne fait pas autrement : la pastille
   s'allonge. La HAUTEUR ne change pas, c'est elle qui garde la rangée
   régulière.

   PIÈGE À NE PAS REFAIRE : la taille de la pastille est exprimée en `em`, donc
   relative à SA PROPRE taille de police. Réduire `font-size` sur `.ligne`
   rétrécirait aussi le cercle, et la rangée deviendrait irrégulière. C'est donc
   le <span> intérieur qu'on réduit, jamais la pastille. */
.ligne--m3bis,
.ligne--m7bis {
  inline-size: auto;
  min-inline-size: 1.65em;
  padding-inline: .34em;
  border-radius: .85em;
}

.ligne--m3bis > span,
.ligne--m7bis > span {
  font-size: .82em;
  letter-spacing: -.01em;
}

/* ---- Bus ---------------------------------------------------------------
   Rectangulaire, et noire. À Paris les lignes de bus n'ont pas de couleur
   propre — le réseau porte une identité unique, là où chaque ligne de métro
   et de RER a la sienne. On n'en invente donc pas, et la forme suffit à
   distinguer un bus d'un métro sans lire le numéro. */
.ligne--bus {
  inline-size: auto;
  min-inline-size: 1.65em;
  padding-inline: .34em;
  border-radius: .2em;
}

/* ---- Le nom de la station ----------------------------------------------
   Les pastilles d'une même station se serrent entre elles — elles forment un
   groupe. Le NOM, lui, prend plus d'air : collé à la dernière pastille, le
   cercle et la première lettre se touchaient. Retour du client du 27/09/2026.

   La marge s'ajoute à l'écart de la grille, ce qui donne une séparation nette
   sans desserrer les pastilles entre elles. */
.lignes__station {
  margin-inline-start: var(--sp-3xs);
  font-family: var(--f-cond);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ==========================================================================
   IMPRESSION
   --------------------------------------------------------------------------
   Beaucoup d'imprimantes et de navigateurs suppriment les aplats de couleur.
   Sans contour, les pastilles deviendraient des disques blancs illisibles.
   ========================================================================== */
@media print {
  .ligne {
    border: 1px solid #000;
    color: #000;
    background: transparent;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}