/* styles/components/chip.css
 * ──────────────────────────────────────────────────────────────
 * Règle DA signalétique RATP :
 *   · METRO → rond (cercle parfait, aspect-ratio 1)
 *   · RER   → carré arrondi (border-radius 6px)
 *   · WALK  → carré arrondi (correspondance piétonne, même forme que RER)
 *
 * La base `.chip` est pensée pour METRO (le cas majoritaire) : pas de
 * padding horizontal, width == height via aspect-ratio → cercle.
 * `.chip.rer` et `.chip.walk` débrayent le carré en ajoutant padding
 * et en neutralisant l'aspect-ratio.
 * ────────────────────────────────────────────────────────────── */

.chip{
  display:inline-flex; align-items:center; justify-content:center;
  /* Barlow 800 : sans-serif géométrique proche de Parisine (la vraie
   * signalétique RATP). Commercial impossible à utiliser, Barlow est
   * le fallback web le plus ressemblant (chiffres géométriques, formes
   * rondes, poids 800 pour matcher la pastille de référence). */
  font-family:'Barlow','Barlow Semi Condensed','Helvetica Neue',sans-serif;
  font-weight:800;
  min-width:30px; height:30px;
  aspect-ratio:1;                      /* garantit w=h pour un vrai cercle */
  padding:0;
  border-radius:50%;                   /* cercle (métro) */
  /* Texte ≈ 63% du diamètre — ratio inspiré de la signalétique RATP
   * (cf. pastille ligne 9 de référence), un chouïa moins gros que le
   * 70% strict pour garder les 2 chiffres ("14") confortables. */
  font-size:19px; color:#fff; letter-spacing:.02em; border:none;
  box-sizing:border-box;
}

/* Explicite pour robustesse face à un sélecteur tiers qui aurait
 * bougé le border-radius. La règle DA est stricte : métro = rond. */
.chip.metro{
  aspect-ratio:1;
  border-radius:50%;
  padding:0;
}

/* RER : carré arrondi. `aspect-ratio: auto` permet au chip de grandir
 * en largeur si la lettre est plus large (A-E toujours 1 char, mais
 * le padding horizontal crée un léger rectangle). */
.chip.rer{
  aspect-ratio:auto;
  width:auto;
  min-width:32px;
  padding:0 8px;
  border-radius:6px;
}

.chip.walk{
  aspect-ratio:auto;
  width:auto;
  min-width:34px;
  padding:0 6px;
  border-radius:6px;
  font-size:18px; letter-spacing:0;
}
.chip.walk svg{ display:block; }

/* Variante compacte : garde la même logique de forme + même ratio ~70%. */
.chip.mini{ min-width:22px; height:22px; font-size:15px; }
.chip.mini.rer,
.chip.mini.walk{ min-width:24px; padding:0 6px; }
.chip.walk.mini{ font-size:14px; }