/* Commun au site, aux tableaux et au serveur de bord : alias des lignes (direction-marque.md, 3.4), pastilles, plan, barre et paves de
   la tablette. Tokens --sd-* seulement, clair et sombre, cibles tactiles de 48 px au moins (--tap), rien au survol ni au glisser. */
:root, .sd-paper, .sd-nuit {
  --line-1: var(--sd-series-1); --line-2: var(--sd-series-2); --line-3: var(--sd-series-3);
  --line-1-soft: color-mix(in srgb, var(--line-1) 14%, var(--sd-surface));
  --line-2-soft: color-mix(in srgb, var(--line-2) 14%, var(--sd-surface));
  --line-3-soft: color-mix(in srgb, var(--line-3) 14%, var(--sd-surface));
  --line-1-ink: var(--sd-surface); --line-2-ink: var(--sd-surface); --line-3-ink: var(--sd-text);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --line-2-ink: var(--sd-text); --line-3-ink: var(--sd-surface); } }
:root[data-theme="dark"], .sd-nuit { --line-2-ink: var(--sd-text); --line-3-ink: var(--sd-surface); }

.t { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.m { font-family: var(--sd-font-mono); font-weight: 500; }
.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.li { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 2.3em; height: 1.6em; padding: 0 .5em; border-radius: 999px; font-weight: 800; line-height: 1; letter-spacing: .01em; }
.li--1 { background: var(--line-1); color: var(--line-1-ink); }
.li--2 { background: var(--line-2); color: var(--line-2-ink); }
.li--3 { background: var(--line-3); color: var(--line-3-ink); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Plan. */
.plan { display: block; width: 100%; height: auto; }
.net-line { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.net-series-1 { stroke: var(--line-1); }
.net-series-2 { stroke: var(--line-2); }
.net-series-3 { stroke: var(--line-3); }
.net-series-fill-1 { fill: var(--line-1); }
.net-series-fill-2 { fill: var(--line-2); }
.net-series-fill-3 { fill: var(--line-3); }
.net-series-ink-1 { fill: var(--line-1-ink); }
.net-series-ink-2 { fill: var(--line-2-ink); }
.net-series-ink-3 { fill: var(--line-3-ink); }
.net-point { fill: var(--sd-surface); stroke-width: 3; }
.net-casing { fill: none; stroke: var(--sd-surface); stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; }
.net-trace { fill: none; stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: net-draw 400ms ease-out both; }
.net-station { fill: var(--sd-surface); stroke: var(--sd-text); stroke-width: 5; }
.net-end { fill: var(--sd-text); stroke: var(--sd-surface); stroke-width: 4; }
.net-transfer { fill: none; stroke: var(--sd-text); stroke-width: 4; }
.net-name { font: 700 19px var(--sd-font-sans); fill: var(--sd-text); paint-order: stroke; stroke: var(--sd-bg); stroke-width: 5px; }
.net-name.station { font-size: 22px; font-weight: 800; }
.net-pill-text { font: 800 16px var(--sd-font-sans); }
.net-pill rect { stroke: var(--sd-surface); stroke-width: 4; }
.net-hit { fill: transparent; cursor: pointer; outline: none; }
.net-hit:focus-visible { stroke: var(--sd-accent); stroke-width: 4; }
.net-here { fill: none; stroke: var(--sd-text); stroke-width: 4; pointer-events: none; }
.net-here-text { font: 800 19px var(--sd-font-sans); fill: var(--sd-text); paint-order: stroke; stroke: var(--sd-bg); stroke-width: 5px; pointer-events: none; }
.net-train { fill: var(--sd-text); stroke: var(--sd-surface); stroke-width: 6; pointer-events: none; }
.net-train-mark { fill: none; stroke: var(--sd-surface); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
/* Hors du dessin : a l'echelle du plan, elle ne se lirait plus au telephone. Sans hauteur, elle ne decale rien sous le plan. */
.net-fleet-note { position: relative; margin: -22px 0 0; height: 22px; padding-right: 8px; color: var(--sd-text-muted); font: 500 14px/22px var(--sd-font-sans); text-align: right; pointer-events: none; }
.net-passed { fill: none; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.net-ahead { fill: none; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.net-ride-stop { fill: var(--sd-surface); stroke: var(--sd-text); stroke-width: 5; }
.net-pin rect { fill: var(--sd-text); }
.net-pin-text { font: 800 24px var(--sd-font-sans); fill: var(--sd-bg); }
.net-point-name { font: 700 22px var(--sd-font-sans); fill: var(--sd-text); paint-order: stroke; stroke: var(--sd-bg); stroke-width: 5px; }
@keyframes net-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .net-trace { animation: none; } }

/* Barre de vente de la tablette. */
.trip { --tap: 64px; display: grid; gap: 12px; }
.trip-top { display: flex; flex-wrap: wrap; gap: 8px; }
.trip-chip { min-height: var(--tap); padding: 0 16px; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md); background: var(--sd-surface); color: var(--sd-text); font: inherit; font-weight: 700; cursor: pointer; }
.trip-chip.on { border-color: var(--sd-accent); box-shadow: var(--sd-focus-ring); }
.trip-bar { display: grid; align-items: stretch; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.trip-field { min-height: calc(var(--tap) + 16px); min-width: 0; padding: 8px 14px; display: grid; align-content: center; gap: 2px; text-align: left; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md); background: var(--sd-surface-2); color: var(--sd-text); font: inherit; cursor: pointer; }
.trip-field small { color: var(--sd-text-muted); font-weight: 600; }
.trip-field span { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-field.on { border-color: var(--sd-accent); box-shadow: var(--sd-focus-ring); }
.trip-swap { display: grid; place-items: center; min-height: var(--tap); padding: 0; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md); background: var(--sd-surface); color: var(--sd-text); cursor: pointer; }
.trip-go { min-height: calc(var(--tap) + 16px); padding: 0 32px; border: 0; border-radius: var(--sd-radius-md); background: var(--sd-accent); color: var(--sd-on-accent); font: inherit; font-size: 1.25rem; font-weight: 800; cursor: pointer; }
.trip-go:disabled { background: var(--sd-surface-2); color: var(--sd-text-muted); cursor: not-allowed; }
.trip-panel { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg); background: var(--sd-surface); }
.trip-label { margin: 0; font-weight: 600; color: var(--sd-text-muted); }
.trip-label input { margin-top: 4px; }
.trip-sum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0; padding: 12px 16px; border-radius: var(--sd-radius-md); background: var(--sd-surface-2); }
.trip-sum strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.tile-row.stops { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.tile { min-height: var(--tap); padding: 8px 12px; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md); background: var(--sd-surface-2); color: var(--sd-text); font: inherit; font-weight: 700; cursor: pointer; overflow-wrap: anywhere; }
.tile.on { background: var(--sd-accent); border-color: var(--sd-accent); color: var(--sd-on-accent); }
.tile.station { font-weight: 800; }
.tile.done { justify-self: end; min-width: 160px; }
.line-tile { font-size: 1.25rem; border-left-width: 8px; }
.line-pick { width: 100%; min-height: var(--tap); padding: 8px 14px; text-align: left; border: 1px solid var(--sd-border); border-left-width: 8px; border-radius: var(--sd-radius-md); background: var(--sd-surface-2); color: var(--sd-text); font: inherit; font-weight: 700; cursor: pointer; }
.net-series-edge-1 { border-left-color: var(--line-1); }
.net-series-edge-2 { border-left-color: var(--line-2); }
.net-series-edge-3 { border-left-color: var(--line-3); }
.stop-pick { display: grid; gap: 16px; }
.stop-tiles, .stop-map { display: grid; gap: 8px; align-content: start; min-width: 0; }

/* Paves. */
.pad-key { display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap); padding: 0 8px; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md); background: var(--sd-surface-2); color: var(--sd-text); font: inherit; font-size: 1.5rem; font-weight: 800; cursor: pointer; }
.pad-key:disabled, .date-day:disabled { color: var(--sd-text-muted); background: var(--sd-bg); cursor: not-allowed; }
.pad-key.enter { background: var(--sd-accent); border-color: var(--sd-accent); color: var(--sd-on-accent); font-size: 1.125rem; }
.pad-key.enter.off { background: var(--sd-surface-2); border-color: var(--sd-border); color: var(--sd-text-muted); }
.pad-key.enter.wide { grid-column: 1 / -1; }
.stepper { display: flex; align-items: center; gap: 16px; }
.stepper strong { font-size: 2rem; min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.num-pad { --tap: 64px; display: grid; gap: 8px; max-width: 420px; width: 100%; margin-inline: auto; }
.num-value { display: block; min-height: 56px; padding: 8px 12px; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md); background: var(--sd-surface-2); font-size: 1.5rem; font-weight: 800; letter-spacing: .1em; text-align: center; overflow: hidden; }
.num-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.date-pad { display: grid; gap: 8px; max-width: 480px; width: 100%; margin-inline: auto; }
.date-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-transform: capitalize; }
.date-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.date-week { text-align: center; color: var(--sd-text-muted); font-weight: 700; }
.date-day { min-height: 48px; padding: 0; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md); background: var(--sd-surface-2); color: var(--sd-text); font: inherit; font-weight: 700; cursor: pointer; }
.date-day.on { background: var(--sd-accent); border-color: var(--sd-accent); color: var(--sd-on-accent); }
.trip-chip:focus-visible, .trip-field:focus-visible, .trip-swap:focus-visible, .trip-go:focus-visible, .tile:focus-visible, .line-pick:focus-visible, .pad-key:focus-visible, .date-day:focus-visible { outline: 3px solid var(--sd-accent); outline-offset: 2px; }

/* Personnes et sieges. */
.group { --tap: 64px; display: grid; gap: 16px; }
.group-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 8px 24px; }
.group-count { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.group-auto { width: 100%; }
.group-class { display: grid; gap: 2px; }
.group-class small { font-weight: 600; }
.group-total { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 12px; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md); background: var(--sd-surface); }
.group-total strong { font-size: 1.5rem; justify-self: end; font-variant-numeric: tabular-nums; }
.group-total small { grid-column: 1 / -1; color: var(--sd-text-muted); }
.group-total .trip-go { grid-column: 1 / -1; }
/* La politique de contenu refuse les styles en ligne : la position d'un siege passe par des classes. */
.seat-plan { display: grid; grid-auto-columns: var(--tap); grid-auto-rows: var(--tap); gap: 6px; justify-content: center; max-width: 100%; overflow-x: auto; }
.seat-x-1 { grid-column: 1; } .seat-x-2 { grid-column: 2; } .seat-x-3 { grid-column: 3; } .seat-x-4 { grid-column: 4; } .seat-x-5 { grid-column: 5; } .seat-x-6 { grid-column: 6; } .seat-x-7 { grid-column: 7; } .seat-x-8 { grid-column: 8; }
.seat-y-1 { grid-row: 1; } .seat-y-2 { grid-row: 2; } .seat-y-3 { grid-row: 3; } .seat-y-4 { grid-row: 4; } .seat-y-5 { grid-row: 5; } .seat-y-6 { grid-row: 6; } .seat-y-7 { grid-row: 7; } .seat-y-8 { grid-row: 8; } .seat-y-9 { grid-row: 9; } .seat-y-10 { grid-row: 10; } .seat-y-11 { grid-row: 11; } .seat-y-12 { grid-row: 12; } .seat-y-13 { grid-row: 13; } .seat-y-14 { grid-row: 14; } .seat-y-15 { grid-row: 15; } .seat-y-16 { grid-row: 16; }
.seat { min-height: var(--tap); padding: 0; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md); background: var(--sd-surface-2); color: var(--sd-text); font: inherit; font-weight: 700; cursor: pointer; }
.seat.mine { background: var(--sd-accent); border-color: var(--sd-accent); color: var(--sd-on-accent); }
.seat.taken { background: var(--sd-bg); color: var(--sd-text-muted); cursor: not-allowed; text-decoration: line-through; }
.seat-key { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; color: var(--sd-text-muted); }
.seat-chip { display: inline-block; width: 16px; height: 16px; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-sm); background: var(--sd-surface-2); }
.seat-chip.mine { background: var(--sd-accent); border-color: var(--sd-accent); }
.seat-chip.taken { background: var(--sd-bg); }

/* Clavier a l'ecran. */
.touch-keys { display: grid; gap: 6px; width: 100%; }
.touch-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.touch-row .pad-key { min-width: 0; padding: 0; font-size: 1.1rem; }
.touch-row .pad-key.wide { grid-column: span 4; }

@media (min-width: 1200px) {
  .stop-pick { grid-template-columns: minmax(280px, 2fr) minmax(0, 5fr); }
}