/* ─────────────────────────────────────────────────────────────────────────
   Tracéo — Composants en CSS vanilla (zéro dépendance, zéro framework)
   Classes utilitaires + variables. Pensé pour un front JS vanilla / HTML servi
   par un backend Python sans framework — comme l'app Tracéo réelle.
   Préfixe « tr- » pour éviter toute collision. Toutes les couleurs viennent des
   tokens (tokens/colors.css, tokens/lines.css).
   ───────────────────────────────────────────────────────────────────────── */

/* ── Bouton ───────────────────────────────────────────────────────────── */
.tr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px;                 /* cible tactile ≥44px */
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-family: var(--font-ui); font-size: var(--fs-body); font-weight: 600;
  line-height: 1; cursor: pointer; white-space: nowrap;
  background: var(--traceo-red); color: var(--on-red);
  transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tr-btn:hover { filter: brightness(1.05); }
.tr-btn:active { transform: scale(.97); }
.tr-btn:disabled { opacity: .5; cursor: not-allowed; }
.tr-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.tr-btn--secondary:hover { background: var(--surface-2); filter: none; }
.tr-btn--ghost { background: transparent; color: var(--ink-2); }
.tr-btn--ghost:hover { background: var(--surface-2); filter: none; }
.tr-btn--success { background: var(--ok); color: #fff; }
.tr-btn--sm { height: 36px; padding: 0 12px; font-size: var(--fs-sm); }
.tr-btn--lg { height: 52px; padding: 0 22px; font-size: var(--fs-h3); }
.tr-btn--block { width: 100%; }

/* Bouton-icône carré */
.tr-iconbtn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-2); cursor: pointer; font-size: 17px;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tr-iconbtn:hover { background: var(--surface-3); }
.tr-iconbtn:active { transform: scale(.93); }
.tr-iconbtn--sm { width: 36px; height: 36px; font-size: 15px; }
.tr-iconbtn.is-active { background: var(--traceo-red); color: var(--on-red); border-color: transparent; }

/* ── Badge de ligne ───────────────────────────────────────────────────── */
.tr-line {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 7px;
  font-family: var(--font-ui); font-weight: 900; font-size: 15px; letter-spacing: -.02em;
  line-height: 1; flex-shrink: 0; color: #fff;
  background: var(--ink-2); border-radius: 9px; box-shadow: var(--sh-1); user-select: none;
}
.tr-line--sm { min-width: 26px; height: 26px; font-size: 12px; padding: 0 5px; }
/* Formes par mode (repère immédiat) */
.tr-line--metro      { border-radius: 50%; }
.tr-line--rer        { border-radius: 9px; }
.tr-line--tram       { border-radius: 999px; }
.tr-line--bus        { border-radius: 3px; }
.tr-line--transilien { border-radius: 0; box-shadow: none;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

/* Couleurs de ligne : posées en style INLINE par badges.js depuis les couleurs
   officielles servies par l'API IDFM (source de vérité). La palette statique de
   référence du DS reste dans design_handoff_traceo/ et tokens/lines.css. */

/* ── Note de fiabilité A→E (Nutri-score) ──────────────────────────────── */
.tr-note {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 .3em; border-radius: var(--r-xs);
  font-family: var(--font-mono); font-weight: 800; font-size: 18px; line-height: 1;
  color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); flex-shrink: 0;
}
.tr-note--sm { min-width: 22px; height: 22px; font-size: 13px; }
.tr-note--lg { min-width: 44px; height: 44px; font-size: 26px; }
.tr-note--a { background: var(--note-a); }
.tr-note--b { background: var(--note-b); color: var(--ink); text-shadow: none; }
.tr-note--c { background: var(--note-c); color: var(--ink); text-shadow: none; }
.tr-note--d { background: var(--note-d); }
.tr-note--e { background: var(--note-e); }

/* ── Badge de source / âge / estimé ───────────────────────────────────── */
.tr-src {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px;
  border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink-3);
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700;
  line-height: 1.4; white-space: nowrap;
}
.tr-src--live   { background: var(--ok-wash); color: var(--ok); }
.tr-src--estime { background: var(--estime-wash); color: var(--estime); }

/* ── Carte de passage temps réel ──────────────────────────────────────── */
/* Grid 2 colonnes (contenu | heure) : la hauteur ne dépend plus de la longueur
   du texte, chaque carte respecte le même gabarit min-height quel que soit le
   nom de destination (évite les cartes de hauteurs différentes dans une liste). */
.tr-passage {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  min-height: 64px; padding: var(--sp-3) var(--sp-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-1);
}
.tr-passage__body { min-width: 0; }
.tr-passage__dest {
  font-weight: 600; color: var(--ink); font-size: var(--fs-body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tr-passage__meta {
  display: flex; align-items: center; gap: var(--sp-2); margin-top: 4px;
  flex-wrap: nowrap; min-width: 0;
}
.tr-passage__next {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.tr-passage__time {
  display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0;
}
.tr-passage__min {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-h1); font-weight: 800; line-height: 1; color: var(--ink);
}
.tr-passage__unit { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
/* Placeholder toujours rendu (JS) pour réserver la hauteur de la ligne d'état :
   sans ça, une carte « en approche » (2 lignes) serait plus haute que ses voisines. */
.tr-passage__state--hidden { visibility: hidden; }
.tr-passage--soon .tr-passage__min { color: var(--traceo-red); }
.tr-passage--delayed .tr-passage__min { color: var(--crit); }
.tr-passage__min.is-quay { font-size: var(--fs-h3); }

/* ── Barre de quota API ───────────────────────────────────────────────── */
.tr-quota { max-width: 420px; }
.tr-quota__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); margin-bottom: 5px; }
.tr-quota__label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.tr-quota__val { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--ok); }
.tr-quota__track { height: 6px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.tr-quota__fill { height: 100%; background: var(--ok); border-radius: var(--r-pill);
  transition: width var(--dur-slow) var(--ease-out); }
.tr-quota.is-warn .tr-quota__val, .tr-quota.is-warn .tr-quota__fill { color: var(--warn); background-color: var(--warn); }
.tr-quota.is-warn .tr-quota__val { background: none; }
.tr-quota.is-crit .tr-quota__val, .tr-quota.is-crit .tr-quota__fill { color: var(--crit); background-color: var(--crit); }
.tr-quota.is-crit .tr-quota__val { background: none; }

/* ── Chip contextuel ──────────────────────────────────────────────────── */
.tr-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 7px 13px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tr-chip--coral  { background: var(--coral-idf-wash); color: #C8503F; border-color: color-mix(in srgb, var(--coral-idf) 45%, transparent); }
.tr-chip--bleu   { background: var(--bleu-luf-wash); color: #2F6FB0; border-color: color-mix(in srgb, var(--bleu-luf) 45%, transparent); }
.tr-chip--vert   { background: var(--vert-omnibus-wash); color: var(--ok); border-color: color-mix(in srgb, var(--vert-omnibus) 45%, transparent); }
.tr-chip--soleil { background: var(--soleil-wash); color: #9A7400; border-color: color-mix(in srgb, var(--soleil-mieux) 55%, transparent); }
.tr-chip.is-active { background: var(--traceo-red); color: #fff; border-color: transparent; }

/* ── Contrôle segmenté ────────────────────────────────────────────────── */
.tr-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-sm); }
.tr-seg > button {
  height: 40px; padding: 0 13px; border: none; border-radius: calc(var(--r-sm) - 2px);
  background: transparent; color: var(--ink-3);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tr-seg > button.is-active { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--sh-1); }
.tr-seg--sm > button { height: 32px; padding: 0 11px; font-size: var(--fs-xs); }

/* ── Carte de surface ─────────────────────────────────────────────────── */
.tr-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-1); padding: var(--sp-4);
}
/* ── Champ de recherche ───────────────────────────────────────────────── */
.tr-input {
  width: 100%; height: 46px; padding: 0 14px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font-family: var(--font-ui); font-size: 15px; box-shadow: var(--sh-1);
}
.tr-input::placeholder { color: var(--ink-faint); }