/* Un train en chasse un autre — simulation pour le forum.
   Mise en page : en-tête court, mode d'emploi en trois gestes, puis le banc d'essai
   (plan animé, écran + encodeur, tableau de boutons, journal). */

:root {
  --bg: #EEF2F1;
  --surface: #FFFFFF;
  --surface-2: #E4EAE8;
  --ink: #17201D;
  --muted: #56635E;
  --line: #CDD6D3;
  --track: #2E3A36;
  --accent: #1F5FAD;
  --danger: #B3261E;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101614; --surface: #18201D; --surface-2: #222C29; --ink: #E4EBE8; --muted: #98A59F;
    --line: #2D3834; --track: #C9D3CF; --accent: #80B1EE; --danger: #F2867D;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101614; --surface: #18201D; --surface-2: #222C29; --ink: #E4EBE8; --muted: #98A59F;
  --line: #2D3834; --track: #C9D3CF; --accent: #80B1EE; --danger: #F2867D;
  color-scheme: dark;
}

body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; }
.page {
  max-width: 900px; margin: 0 auto;
  padding-block: 24px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; gap: 22px;
}
.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 4px; }
h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 6vw, 48px); line-height: 1.05; margin: 0; text-wrap: balance; }
.lede { color: var(--muted); max-width: 62ch; margin: 8px 0 0; }

.howto { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); list-style: none; padding: 0; margin: 0; }
.howto li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; display: grid; gap: 2px; }
.howto b { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.howto span { color: var(--muted); font-size: 14px; }

.bench { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: grid; gap: 12px; min-width: 0; }
.bench svg { display: block; width: 100%; height: auto; }

/* Dessin du plan */
.trk { stroke: var(--track); stroke-width: 3; fill: none; opacity: .55; }
.sup { stroke: var(--muted); stroke-width: 2; fill: none; }
.nac { fill: var(--surface-2); stroke: var(--muted); stroke-width: .5; }
.lr { fill: #E24B4A; stroke: #A32D2D; stroke-width: .5; }
.lg { fill: #3FB27F; stroke: #1F7A52; stroke-width: .5; }
.ir { stroke: #1D9E75; stroke-width: 1.5; fill: var(--surface-2); }
.ir.on { fill: #1D9E75; }
.t { fill: var(--ink); font-family: var(--font-body); font-size: 14px; }
.ts { fill: var(--muted); font-family: var(--font-body); font-size: 12px; }

/* Commandes */
.controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.lcd {
  background: #185FA5; color: #E6F1FB; font-family: var(--font-mono); font-size: 14px; line-height: 1.5;
  white-space: pre; padding: 8px 10px; border-radius: 4px; border: 8px solid #2C2C2A; width: max-content; max-width: 100%; overflow-x: auto;
}
.encoder { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.btn {
  font: inherit; font-size: 14px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn:disabled { opacity: .4; cursor: default; }
.knob {
  width: 50px; height: 50px; border-radius: 50%; background: #444441; color: #F1EFE8; border: 3px solid #2C2C2A;
  font: 600 12px var(--font-body); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
}
.knob.long { background: #A32D2D; }
.hint { font-size: 12px; color: var(--muted); }
.panel { background: var(--surface-2); border-radius: 8px; padding: 8px 12px; display: grid; gap: 4px; }
.prow { display: flex; align-items: center; gap: 8px; }
.prow > span { width: 52px; font-size: 14px; }
.pb {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid; cursor: pointer;
  font: 600 11px var(--font-body); touch-action: none; user-select: none; -webkit-user-select: none;
}
.pb.r { background: #791F1F; color: #F7C1C1; border-color: #501313; }
.pb.r.on { background: #E24B4A; color: #FFFFFF; }
.pb.w { background: #888780; color: #2C2C2A; border-color: #5F5E5A; }
.pb.w.on { background: #FFFFFF; color: #2C2C2A; border-color: #B4B2A9; }
.btn:focus-visible, .pb:focus-visible, .knob:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tools { display: flex; flex-wrap: wrap; gap: 6px; }
.tools .btn { font-size: 13px; padding: 5px 10px; }
.log { font-family: var(--font-mono); font-size: 13px; color: var(--muted); line-height: 1.6; min-height: 6em; }
.log .err { color: var(--danger); }

footer { color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); padding-top: 12px; }