/* ═══════════════════════════════════════════════════════════════════════════
   Écran « Ligne » (choix de ligne + plan/liste des arrêts) — refonte Tracéo (É3).
   Mobile d'abord (maquette ui_kits/ligne-14/mobile.html) ; le plan reste du SVG
   fait main (branches, trains SIRI-ET) re-stylé aux tokens. Deux thèmes gérés par
   les variables — aucune couleur en dur hors couleurs officielles venues de l'API.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Couleur « produit » de l'écran = couleur officielle de la ligne (--lc, posée en
   JS). Les dérivées (wash/ink) sont recalculées ici : un token dérivé déclaré dans
   :root est déjà substitué, il ne suivrait pas une surcharge de --produit. */
#step-station {
  --produit: var(--lc, var(--bleu-luf));
  --produit-on: var(--lc-on, #fff);
  --produit-wash: color-mix(in srgb, var(--produit) 13%, var(--surface));
  --produit-ink: color-mix(in srgb, var(--produit) 55%, var(--ink));
  display: flex; flex-direction: column; gap: var(--sp-4);
}
#step-line { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ── Identité de la ligne ──────────────────────────────────────────────── */
.lineid { display: flex; align-items: center; gap: var(--sp-3); }
.lineid:empty { display: none; }
.lineid__badge { min-width: 44px; height: 44px; font-size: 20px; }
.lineid__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lineid__name { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
.lineid__sub {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-3);
}
.lineid__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; }
.lineid__trafic {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--ok-wash); color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 26%, transparent);
  font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap;
}
.lineid__trafic.is-perturbe { background: var(--warn-wash); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.lineid__trafic.is-perturbe .live-dot { background: var(--warn); }
.lineid__trafic.is-bloque { background: var(--crit-wash); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 30%, transparent); }
.lineid__trafic.is-bloque .live-dot { background: var(--crit); }
.lineid__trafic.is-unknown { background: var(--surface-2); color: var(--ink-3); border-color: var(--border); }
.lineid__trafic.is-unknown .live-dot { background: var(--ink-faint); animation: none; }

/* Desktop : carte héro teintée à la couleur de la ligne (maquette desktop.html) */
@media (min-width: 900px) {
  .lineid {
    align-items: center; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6);
    background: var(--produit-wash);
    border: 1px solid color-mix(in srgb, var(--produit) 34%, var(--border));
    border-radius: var(--r-lg); box-shadow: var(--sh-2);
  }
  .lineid__badge { min-width: 62px; height: 62px; font-size: 26px; border-radius: 12px; align-self: start; }
  .lineid__id { gap: 8px; }
  .lineid__name { font-size: var(--fs-h1); line-height: 1.05; }
  .lineid__od {
    display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
    font-size: var(--fs-body); font-weight: 700; color: var(--ink-2);
  }
  .lineid__od .term { display: inline-flex; align-items: center; gap: 6px; }
  .lineid__od .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--produit); flex-shrink: 0; }
  .lineid__od svg { color: var(--produit-ink); flex-shrink: 0; }
  .lineid__mode { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); }
  .lineid__mode b { color: var(--ink-2); }
  .lineid__chips { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: 2px; }
}

/* ── En-tête d'écran + bascule Plan / Liste ────────────────────────────── */
.picker { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); }
.picker__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.picker__h { margin: 0; font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.picker__p { margin: 0; font-size: var(--fs-2xs); color: var(--ink-3); font-weight: 600; }
.viewseg { flex-shrink: 0; box-shadow: var(--sh-1); }
.viewseg > button { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.viewseg > button.is-active { background: var(--produit); color: var(--produit-on); }
.viewseg > button.is-active [data-tr-icon] { color: var(--produit-on) !important; }
.viewseg__ic { font-size: 15px; line-height: 1; }

/* ── Colonnes plan / liste ─────────────────────────────────────────────── */
/* Mobile : une seule colonne visible à la fois (bascule Plan/Liste).
   Desktop (.cols--both) : les deux côte à côte, plus de bascule. */
.cols { display: flex; flex-direction: column; gap: var(--sp-4); }
.col { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.col__hd { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 34px; padding: 0 2px; }
.col__tools { display: flex; align-items: center; gap: var(--sp-2); }
/* Sous 900 px, pas de libellé de colonne : les outils du plan occupent la ligne */
@media (max-width: 899.98px) {
  .col__hd .t-label { display: none; }
  .col-plan .col__tools { flex: 1; justify-content: space-between; }
}
@media (min-width: 900px) {
  .cols--both { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
  .cols:not(.cols--both) { max-width: 820px; }   /* ligne sans plan : liste seule */
  #view-toggle { display: none; }                /* plan ET liste : rien à basculer */
}

/* ── Outils du plan ────────────────────────────────────────────────────── */
.livepill {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--ok) 26%, transparent);
  background: var(--ok-wash); color: var(--ok);
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
}
.livepill[aria-pressed="false"] { background: var(--surface-2); color: var(--ink-3); border-color: var(--border); }
.livepill[aria-pressed="false"] .live-dot { background: var(--ink-faint); animation: none; }
.regen {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-3);
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
}
.regen:hover { background: var(--surface-2); color: var(--ink); }
.regen:active { transform: scale(.96); }
.regen:disabled { opacity: .5; cursor: progress; }
.regen__ic { transition: transform var(--dur-slow) var(--ease-out); }
.regen:disabled .regen__ic { animation: spin .9s linear infinite; }

/* ── Plan de ligne (carte + SVG) ───────────────────────────────────────── */
.plan {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  padding: var(--sp-4) var(--sp-2);
}
.linemap { --lc: var(--produit); overflow-x: auto; overflow-y: hidden; }
.linemap svg { display: block; }
.linemap path { fill: none; stroke-width: 7; stroke-linecap: round; }

/* Stations du plan */
.svg-st { cursor: pointer; }
.svg-st .st-halo { fill: none; stroke: var(--surface); stroke-width: 3.5; }   /* masque le tronc */
.svg-st .st-dot { fill: var(--surface); stroke-width: 4; }
.svg-st .fo-lbl { color: var(--ink-2); font-weight: 600; }
.svg-st.terminus .fo-lbl, .svg-st.current .fo-lbl { color: var(--ink); font-weight: 800; }
.svg-st:hover .fo-lbl { color: var(--ink); }
.svg-st:hover .st-dot { stroke-width: 6; }
.svg-st:focus-visible { outline: none; }
.svg-st:focus-visible .st-dot { stroke-width: 6; }

/* Arrêt courant : pastille pleine + halo teinté */
.svg-st.current .st-dot { fill: var(--lc, var(--produit)); }
.cur-ring { fill: none; stroke-width: 3; opacity: .3; }

/* Libellés du plan vertical (foreignObject) */
.fo-lbl {
  display: flex; align-items: center; height: 100%; padding-right: 4px;
  font-family: var(--font-ui); font-size: 13.5px; line-height: 1.15; overflow: hidden;
}
.fo-lbl-r { justify-content: flex-end; text-align: right; padding-right: 0; padding-left: 4px; }
/* Correspondances alignées à droite de chaque station (plan vertical) */
.fo-corr { display: flex; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; overflow: hidden; }
.fo-corr .tr-line { min-width: 22px; height: 22px; font-size: 11px; padding: 0 4px; }
.fo-corr .fo-more { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-faint); }

/* Deux colonnes sur grand écran → conteneur élargi */
@media (min-width: 900px) {
  main.plan-wide { max-width: min(96vw, 1280px); }
}

/* ── Trains en direct (SIRI-ET, position estimée) ──────────────────────── */
.live-trains { pointer-events: none; }
.live-train { pointer-events: auto; cursor: pointer; }
.live-train circle {
  fill: var(--dirc, var(--lc, var(--produit))); stroke: var(--surface); stroke-width: 3;
  filter: drop-shadow(0 1px 2px rgba(40, 25, 20, .35));
}
.live-train.cancelled circle { fill: var(--ink-faint); opacity: .6; }

/* Couleurs de direction (--dirc) : partagées entre les pastilles du plan et la
   légende. 6 teintes pastels ; au-delà (futures lignes RER très branchées) la
   palette boucle (tdir-N % 6 côté JS). Direction inconnue → couleur de ligne. */
.tdir-0 { --dirc: var(--soleil-mieux); }
.tdir-1 { --dirc: var(--lilas); }
.tdir-2 { --dirc: var(--vert-omnibus); }
.tdir-3 { --dirc: var(--rose-bonbon); }
.tdir-4 { --dirc: var(--papaye); }
.tdir-5 { --dirc: var(--bleu-luf); }

/* Légende + pied du plan (l'espacement vient du gap de .col) */
.planleg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 0 2px; }
.planleg span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); color: var(--ink-3); font-weight: 600; }
.planleg i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.planleg i.ll-dir { background: var(--dirc, var(--ink-3)); }
.planleg .ll-est {
  font-family: var(--font-mono); background: var(--estime-wash); color: var(--estime);
  border-radius: var(--r-pill); padding: 2px 8px; font-weight: 700;
}
.live-pause { font-size: var(--fs-2xs); color: var(--ink-3); }
.planfoot {
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-faint);
  text-align: center; line-height: 1.5; margin: 0; padding: 0 var(--sp-2);
}
.planfoot:empty { display: none; }

/* ── Pop-up correspondances (survol d'une station du plan) ─────────────── */
.plan-tip {
  position: fixed; z-index: 50; min-width: 168px; max-width: 280px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--sh-3); padding: 11px 13px;
  pointer-events: none;
}
.plan-tip.hidden { display: none; }
.tip-name { font-size: var(--fs-sm); font-weight: 800; color: var(--ink); letter-spacing: -.01em; margin-bottom: 8px; }
.tip-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tip-badges .tr-line { min-width: 28px; height: 28px; font-size: 13px; }
.tip-empty { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.tip-foot { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.tip-bus {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
  font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-3);
  background: var(--surface-2); border-radius: var(--r-pill); padding: 3px 9px;
}
.tip-go { margin-left: auto; font-size: var(--fs-2xs); font-weight: 800; color: var(--produit-ink); white-space: nowrap; }

/* ── Recherche (ligne + arrêt) ─────────────────────────────────────────── */
.search { position: relative; }
/* `.search` est aussi utilisée dans la barre flex de l'accueil (flex: 1 1 280px) :
   ici la colonne est un flex vertical, le champ ne doit pas s'étirer en hauteur. */
#step-station .search, #step-line .search { flex: 0 0 auto; }
.search .tr-input { padding-left: 42px; height: 50px; border-radius: var(--r-md); }
.search__ic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; display: flex; }
.listcount { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-faint); font-weight: 700; padding: 0 4px; }

/* ── Liste des arrêts ──────────────────────────────────────────────────── */
.stlist { display: flex; flex-direction: column; gap: var(--sp-2); }
.row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-2);
  min-height: 64px; padding: var(--sp-3); width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--sh-1); cursor: pointer; text-align: left;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.row:hover { border-color: var(--border-strong); }
.row:active { transform: scale(.98); }
@media (min-width: 900px) {
  .row { min-height: 66px; padding: var(--sp-3) var(--sp-4); }
  .row:hover { transform: translateX(2px); }
  .row:active { transform: translateX(2px); }
}
.row.is-current { background: var(--produit-wash); border-color: color-mix(in srgb, var(--produit) 34%, var(--border)); }
.row__pin {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: color-mix(in srgb, var(--produit) 12%, var(--surface));
}
.row__pin span { width: 11px; height: 11px; border-radius: 50%; background: var(--produit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--produit) 22%, transparent); }
.row.is-term .row__pin span { background: var(--surface); border: 3px solid var(--produit); box-shadow: none; }
.row__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row__name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.row__name b { font-size: var(--fs-body); font-weight: 700; color: var(--ink); line-height: 1.15; }
.row.is-term .row__name b { font-weight: 800; }
.row__tag {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--produit-ink); background: color-mix(in srgb, var(--produit) 14%, var(--surface));
  padding: 2px 6px; border-radius: var(--r-xs); white-space: nowrap;
}
.row__corr, .row__buses { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.row__corr:empty { display: none; }
.row__corr .tr-line, .row__buses .tr-line { min-width: 22px; height: 22px; font-size: 11px; padding: 0 4px; }
.row__buses.hidden { display: none; }
.row__acc {
  width: 20px; height: 20px; border-radius: 5px; background: var(--info);
  display: inline-grid; place-items: center; flex-shrink: 0; color: #fff;
}
.row__aside { display: flex; align-items: center; gap: 6px; justify-self: end; flex-shrink: 0; }
.busn {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
  font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-3);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 4px 9px; white-space: nowrap; cursor: pointer;
}
.busn:hover { color: var(--ink); border-color: var(--border-strong); }
.busn[aria-expanded="true"] { color: var(--ink); border-color: var(--ink-3); }
.row__chev { color: var(--ink-faint); flex-shrink: 0; }

/* ── Grille des lignes (écran de choix de ligne) ───────────────────────── */
.line-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: var(--sp-2); }
.line-chip {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--sh-1); padding: var(--sp-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; min-height: 70px;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.line-chip:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.line-chip:active { transform: scale(.96); }
.list-note { grid-column: 1 / -1; color: var(--ink-3); font-size: var(--fs-sm); padding: var(--sp-2) 0; }

/* ── Mouvement réduit : rien ne bouge ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .row, .line-chip, .regen, .regen__ic { transition: none; animation: none; }
}