:root {
    --fond: #fbfaf8; --encre: #1a1815; --trait: #d8d3cb; --sourd: #6b655c;
    --accent: #1d4e89; --promis: #8a5a00; --alerte: #9b2c2c; --pose: #2d6a4f;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --fond: #16151300; --encre: #ece8e1; --trait: #3a3630; --sourd: #a09a90;
    --accent: #7aa7de; --promis: #d9a441; --alerte: #e08585; --pose: #7fc4a0;
  } }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--fond); color: var(--encre);
         font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
  header { padding: 16px; border-bottom: 1px solid var(--trait); display: flex;
           gap: 12px; align-items: center; flex-wrap: wrap; }
  h1 { font-size: 17px; margin: 0 16px 0 0; font-weight: 600; }
  input, select, button { font: inherit; padding: 6px 10px; border: 1px solid var(--trait);
                          border-radius: 6px; background: transparent; color: inherit; }
  button { cursor: pointer; }
  button.primaire { background: var(--accent); color: #fff; border-color: transparent; }
  main { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 20px; padding: 16px; }
  @media (max-width: 860px) { main { grid-template-columns: 1fr; } }
  section > h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
                 color: var(--sourd); margin: 0 0 10px; }
  table { width: 100%; border-collapse: collapse; font-size: 14px; }
  th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--trait); vertical-align: top; }
  th { font-weight: 600; color: var(--sourd); font-size: 12px; }
  .vehicule { border: 1px solid var(--trait); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
  .vehicule > header { padding: 10px 12px; border-bottom: 1px solid var(--trait);
                       background: color-mix(in srgb, var(--trait) 18%, transparent); }
  .vehicule h3 { margin: 0; font-size: 15px; }
  .capacite { color: var(--sourd); font-size: 13px; }
  .arrets { list-style: none; margin: 0; padding: 0; }
  .arrets li { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px;
               border-bottom: 1px solid var(--trait); }
  .arrets li:last-child { border-bottom: 0; }
  .rang { font-variant-numeric: tabular-nums; color: var(--sourd); min-width: 2.2em; }
  .heure { font-variant-numeric: tabular-nums; color: var(--accent); min-width: 4em; }
  .vide { padding: 14px 12px; color: var(--sourd); font-style: italic; }
  .promesse { color: var(--promis); font-size: 12px; }
  .ferme { padding: 12px; border: 1px solid var(--alerte); border-radius: 8px;
           color: var(--alerte); margin: 16px; }
  .message { padding: 10px 12px; border-radius: 8px; margin: 0 16px 12px;
             border: 1px solid var(--trait); }
  .message.erreur { border-color: var(--alerte); color: var(--alerte); }
  .message.fait { border-color: var(--pose); color: var(--pose); }
  .indice { display: block; color: var(--sourd); font-size: 13px; margin-top: 4px; }
  .alerte { color: var(--alerte); }
nav { display: flex; gap: 4px; margin-right: 8px; }
nav a { color: var(--sourd); text-decoration: none; padding: 6px 10px; border-radius: 6px; }
nav a[aria-current="page"] { color: var(--encre); background: color-mix(in srgb, var(--trait) 45%, transparent); }
form.bloc, .bloc { border: 1px solid var(--trait); border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.champs label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--sourd); }
.champs input { color: var(--encre); }
.lignes-saisie td input { width: 100%; }
.cle-en-clair { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all;
                padding: 10px; border: 1px dashed var(--accent); border-radius: 8px; }
pre.details { white-space: pre-wrap; font-size: 13px; margin: 8px 0 0; }
/* Qui est connecte, son mot de passe, se deconnecter (pose par session.js). */
header .compte { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; font-size: 13px; color: var(--sourd); }
header .compte-nom { color: var(--encre); font-weight: 600; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header .compte a { color: var(--accent); }
/* Au doigt : 44 px, et assez d'écart avec « Afficher » pour ne pas se déconnecter par mégarde en tournée. */
header .compte button, header .compte a { min-height: 44px; display: inline-flex; align-items: center; }
header .compte button { padding: 4px 12px; font-size: 13px; }
/* La session a pris fin sans geste de l'utilisateur (posé par session.js) : la page reste, le bandeau le dit. */
.session-finie { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
                 justify-content: space-between; padding: 10px 16px; background: color-mix(in srgb, var(--alerte) 12%, Canvas); color: var(--alerte);
                 border-bottom: 2px solid var(--alerte); font-weight: 600; }
.session-finie button { min-height: 44px; }