/* Viadely — THE JOURNEY: the new base of the manager's screens (direction "B", the editor's decision of 25/09/2026).
   The day in four steps, always visible (Receive → Prepare → Plan → Deliver), one page per step, ONE primary action
   per screen, the rest on demand.
   ★ Next to viadely.css, not wired everywhere yet: a page loads one OR the other.
   ★ The identity is the driver's screen (style.css) — its colours, larger and airier.
   ★ The font is served from here (/fonts/, OFL licence): no request to a third party, nothing to change in the CSP.
   ★ Floor: text ≥ 18 px, targets ≥ 48 px, text contrast ≥ 4.5:1 and control outlines ≥ 3:1, in both themes
     (measured: rapports/W3). Nothing overflows at 390 px.
   ★ New names are English (TOUS-001); the classes that viadely.js, session.js and the E2E still use keep theirs. */

/* ── The font: Atkinson Hyperlegible Next (variable, 200–800), two subsets ────────────────────────── */
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ─────────────────────────────────────────────────────────────────────────────────────── */
:root {
  /* The driver's screen colours. `--control`: the outline of a control (≥ 3:1); `--line`: a hairline. */
  --background: #fbfaf8; --paper: #ffffff; --sunken: #f5f2ee; --ink: #1a1815; --muted: #6b655c;
  --line: #d8d3cb; --control: #8a8276; --upcoming: #8f877b;
  --accent: #1d4e89; --accent-strong: #163d6c; --accent-pale: #eef2f7; --on-accent: #ffffff;
  --caution: #8a5a00; --caution-pale: #f8f1e3; --danger: #9b2c2c; --danger-pale: #f8ecec; --done: #2d6a4f; --done-pale: #eaf0ed;
  --shadow: 0 16px 40px rgba(26, 24, 21, 0.16); --scrim: rgba(26, 24, 21, 0.42);

  --font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Sizes: never under 18 px. */
  --text-small: 18px; --text-body: 20px; --text-lead: 24px; --text-card: 26px; --text-step: 28px; --text-task-title: 48px; --text-title: 60px;
  --radius: 16px; --radius-field: 12px;
  --target: 48px; --target-large: 64px;
  --gutter: 56px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #161513; --paper: #201e1b; --sunken: #1b1a17; --ink: #ece8e1; --muted: #a9a397;
    --line: #3a3630; --control: #7c756a; --upcoming: #8a8378;
    --accent: #8db4e6; --accent-strong: #b0cbef; --accent-pale: #1d2a3b; --on-accent: #10161f;
    --caution: #dcaa4c; --caution-pale: #2e2412; --danger: #ec9a9a; --danger-pale: #341d1d; --done: #86c9a5; --done-pale: #16291f;
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.55); --scrim: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --background: #161513; --paper: #201e1b; --sunken: #1b1a17; --ink: #ece8e1; --muted: #a9a397;
  --line: #3a3630; --control: #7c756a; --upcoming: #8a8378;
  --accent: #8db4e6; --accent-strong: #b0cbef; --accent-pale: #1d2a3b; --on-accent: #10161f;
  --caution: #dcaa4c; --caution-pale: #2e2412; --danger: #ec9a9a; --danger-pale: #341d1d; --done: #86c9a5; --done-pale: #16291f;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.55); --scrim: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
@media (max-width: 1179px) { :root { --gutter: 32px; --text-title: 48px; --text-task-title: 40px; } }
@media (max-width: 599px) { :root { --gutter: 20px; --text-title: 36px; --text-task-title: 32px; --text-lead: 20px; --text-card: 24px; } }

/* ── Base ───────────────────────────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; }
/* ⚠ Without this, a class that sets `display` wins over the hidden attribute. */
[hidden] { display: none !important; }
html { scroll-padding-top: 16px; -webkit-text-size-adjust: 100%; }
body { background: var(--background); color: var(--ink); font: 400 var(--text-body)/1.45 var(--font); overflow-wrap: anywhere; }
h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; }
h3 { font-size: var(--text-body); font-weight: 800; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent); text-underline-offset: 4px; }
a:hover { color: var(--accent-strong); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; }
svg { flex: none; }
.tabular, time { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* A date or time field has a calendar button INSIDE it (its own shadow tree): when the keyboard is there, the field is
   only :focus-within — without this rule no outline shows at that stop. */
input[type="date"]:focus-within, input[type="time"]:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.journey-page { min-height: 100vh; display: flex; flex-direction: column; }

/* ── The header: the brand and the day; on the right the pills and the account (set by session.js) ── */
.barre-app { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
             min-height: 64px; padding: 8px var(--gutter); border-bottom: 1px solid var(--line); background: var(--background); }
.barre-app .bar-start { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-width: 0; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: var(--target); min-width: var(--target); font-size: 24px; font-weight: 800; letter-spacing: -0.01em;
         color: var(--ink); text-decoration: none; }
.brand svg { color: var(--accent); }
.barre-app .divider { width: 1px; height: 28px; background: var(--line); }
.barre-app .establishment { font-weight: 700; color: var(--ink); max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-button { display: inline-flex; align-items: center; gap: 10px; min-height: var(--target); padding: 0 14px; margin-left: -14px;
              border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); }
.day-button:hover { border-color: var(--control); color: var(--ink); }
.day-button[aria-expanded="true"] { border-color: var(--accent); color: var(--ink); }
.day-picker { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 16px var(--gutter); border-bottom: 1px solid var(--line); background: var(--sunken); }
.barre-app .bar-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin-left: auto; }
/* Who is signed in, their password, sign out: session.js puts them here, under classes of the old base. */
.barre-app .compte { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--text-small); color: var(--muted); }
.barre-app .compte-nom { color: var(--ink); font-weight: 700; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-app .compte a { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 700; }
.barre-app .jeton { display: flex; gap: 8px; align-items: center; font-size: var(--text-small); color: var(--muted); }
.barre-app .jeton input { width: 10em; min-height: var(--target); border: 1.5px solid var(--control); border-radius: var(--radius-field); padding: 0 12px; background: var(--paper); }
/* The session ended without the user asking (set by session.js): above the panel, below a confirmation window. */
.session-finie { position: sticky; top: 0; z-index: 75; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
                 padding: 12px var(--gutter); background: var(--danger-pale); color: var(--danger); border-bottom: 2px solid var(--danger); font-weight: 700; }

/* The header's pills: warnings, readings in progress, a proposal from the assistant. */
.pill { display: inline-flex; align-items: center; gap: 10px; min-height: var(--target); padding: 0 20px; border: 1.5px solid var(--control);
        border-radius: 999px; background: var(--paper); color: var(--ink); font-size: var(--text-small); font-weight: 700; white-space: nowrap; }
.pill:hover { border-color: var(--accent); }
.pill[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-pale); }
.pill .icon-caution { color: var(--caution); }
.pill.info { color: var(--accent); }

/* ── The steps: the four steps of the day ───────────────────────────────────────────────────────── */
.steps { padding: 14px var(--gutter); border-bottom: 1px solid var(--line); }
.steps ol { list-style: none; display: flex; align-items: center; }
/* A step takes the width of what it says; the connectors take the rest. Short of room, its count WRAPS — never cut
   (« En cours · 22 comma… » said half a number). */
.steps li.step { flex: 0 1 auto; min-width: 0; }
.steps li.connector { flex: 1 1 24px; min-width: 16px; height: 4px; margin: 0 6px; border-radius: 2px; }
.steps li.connector.done { background: var(--done); }
.steps li.connector.upcoming { height: 0; border-top: 4px dashed var(--upcoming); border-radius: 0; }
.step-link { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 9px 14px 9px 9px; border: 3px solid transparent; border-radius: 999px;
             color: var(--ink); text-decoration: none; }
.step-link:hover { color: var(--ink); background: var(--sunken); }
.step-link[aria-current="step"] { border-color: var(--accent); background: var(--accent-pale); }
.step-dot { flex: none; width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
            font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.step.done .step-dot { background: var(--done); color: var(--paper); }
.step.in-progress .step-dot { border: 2px solid var(--accent); background: var(--paper); color: var(--accent); }
.step.in-progress.is-current .step-dot { border: 0; background: var(--accent); color: var(--on-accent); }
.step.upcoming .step-dot { border: 2px solid var(--upcoming); background: var(--paper); color: var(--muted); font-size: 26px; }
.step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.step-name { font-size: var(--text-step); font-weight: 800; line-height: 1.1; }
.step-count { font-size: var(--text-small); line-height: 1.3; font-variant-numeric: tabular-nums; }
.step.done .step-count { color: var(--done); }
.step.in-progress .step-count { color: var(--accent); font-weight: 700; }
.step.upcoming .step-count { color: var(--muted); }

/* ── The step page: a card, tied to its step by a notch ────────────────────────────────────────── */
.step-area { flex: 1; width: 100%; max-width: 1600px; margin: 0 auto; padding: 32px var(--gutter) 48px; }
.step-card { position: relative; display: flex; flex-direction: column; gap: 32px; padding: 32px 48px 44px;
             background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.step-card.task { gap: 0; padding: 0; }
/* The step overview: the number and « précédente / suivante » on top, the content below; on a phone, the DOM order. */
.step-card.overview { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "number nav" "body body"; align-items: center; column-gap: 24px; }
.step-card.overview > .step-number { grid-area: number; }
.step-card.overview > .step-nav { grid-area: nav; }
.step-card.overview > .step-body { grid-area: body; }
.notch { position: absolute; top: -12px; left: var(--notch-x, 48px); width: 22px; height: 22px; background: var(--paper);
         border-top: 1px solid var(--line); border-left: 1px solid var(--line); transform: rotate(45deg); pointer-events: none; }
.step-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.task .step-top { padding: 24px 40px 20px; align-items: flex-start; }
.step-number { color: var(--muted); }
.step-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.step-nav-link { display: inline-flex; align-items: center; gap: 14px; min-height: var(--target-large); padding: 8px 26px 8px 20px;
                 border: 1.5px solid var(--control); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; }
.step-nav-link.next { padding: 8px 20px 8px 26px; }
.step-nav-link:hover { color: var(--ink); border-color: var(--accent); }
.step-nav-link .two-lines { display: flex; flex-direction: column; line-height: 1.2; }
.step-nav-link.next .two-lines { align-items: flex-end; }
.step-nav-link .hint { font-size: var(--text-small); color: var(--muted); }
.step-nav-link .name { font-weight: 700; }
.step-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.step-main { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; min-width: 0; }
.step-title { font-size: var(--text-title); line-height: 1.06; font-weight: 800; letter-spacing: -0.015em; }
.step-title .step-label { display: block; color: var(--accent); }
.step-lead { max-width: 34ch; font-size: var(--text-lead); line-height: 1.45; }
.step-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.step-side > h2 { font-size: var(--text-lead); line-height: 1.3; font-weight: 700; }
.task-title { font-size: var(--text-task-title); line-height: 1.1; font-weight: 800; letter-spacing: -0.015em; }
.rename-form { width: auto; margin: 0 40px 24px; }

/* ── Buttons: primary filled, secondary outlined, link, danger. The old base's classes (`.btn`, `.primaire`,
      `.petit`, `.danger`) are restyled here: viadely.js and session.js still set them. ── */
.button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: var(--target); padding: 0 22px;
                border: 1.5px solid var(--control); border-radius: 999px; background: var(--paper); color: var(--ink);
                font-size: var(--text-small); font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; white-space: normal; }
.button:hover, .btn:hover { border-color: var(--accent); color: var(--ink); }
.button.primary, .btn.primaire { min-height: var(--target-large); padding: 0 34px; border: 0; background: var(--accent); color: var(--on-accent); font-size: 22px; }
.btn.primaire { min-height: var(--target); padding: 0 24px; font-size: var(--text-small); }
.panel .btn.primaire, .fenetre .btn.primaire { min-height: var(--target-large); font-size: var(--text-body); }
.button.primary:hover, .btn.primaire:hover { background: var(--accent-strong); color: var(--on-accent); }
.button.large { min-height: var(--target-large); padding: 0 28px; font-size: var(--text-body); }
.button.danger, .btn.danger { border-color: var(--danger); color: var(--danger); background: var(--paper); }
.button.danger:hover, .btn.danger:hover { background: var(--danger-pale); color: var(--danger); }
.btn.petit { padding: 0 18px; }
.button[disabled], .btn[disabled] { cursor: not-allowed; opacity: 0.55; }
.link-button, .lien { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target); padding: 0 4px; border: 0; background: transparent;
                      color: var(--accent); font-size: var(--text-body); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-align: left; }
.lien { min-height: 0; padding: 0; font-size: inherit; }
.link-button:hover, .lien:hover { color: var(--accent-strong); }
.link-button.danger, .link-button.danger:hover { color: var(--danger); }
/* A gesture under way: the button stays (and keeps the focus), it only says it is busy. */
.button[aria-disabled="true"], .link-button[aria-disabled="true"] { opacity: .55; cursor: progress; }
.boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pile { display: grid; gap: 12px; }

/* ── The tours (the step's list) ───────────────────────────────────────────────────────────────── */
.tour-rows { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.tour-row { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 76px; padding: 12px 20px; border: 1.5px solid var(--line);
            border-radius: var(--radius); background: var(--paper); color: var(--ink); text-align: left; text-decoration: none; }
.tour-row:hover { border-color: var(--accent); color: var(--ink); }            /* a row is a link: it keeps its colours */
.tour-row.to-finish { border: 2px solid var(--caution); padding: 11.5px 19.5px; }
.tour-row .dot { flex: none; width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; }
.tour-row .dot.done { background: var(--done); color: var(--paper); }
.tour-row .dot.to-finish { border: 2px solid var(--caution); color: var(--caution); }
.tour-row .dot.to-validate { border: 2px solid var(--accent); color: var(--accent); }
.tour-row .dot.to-sort { border: 2px dashed var(--control); color: var(--muted); }
.tour-row .dot.departed { background: var(--sunken); color: var(--muted); border: 2px solid var(--line); }
.tour-row .dot.empty { border: 2px dashed var(--control); color: var(--muted); }
.tour-row .tour-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tour-row .tour-name { font-size: var(--text-lead); font-weight: 700; }
.tour-row .tour-sub { font-size: var(--text-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.tour-row .tour-state { flex: none; font-size: var(--text-body); font-weight: 700; }
.tour-row .tour-state.done { color: var(--done); }
.tour-row .tour-state.to-finish { color: var(--caution); }
.tour-row .tour-state.to-validate, .tour-row .tour-state.to-sort { color: var(--accent); }
.tour-row .tour-state.departed, .tour-row .tour-state.empty { color: var(--muted); }
.tour-row .row-elsewhere { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; }   /* the row leads to another page */
.disclosure.show-list { display: none; }
/* A short form (on a phone): the long one is still read by screen readers. */
.short { display: none; }

/* ── Sub-steps: one open at a time ──────────────────────────────────────────────────────────────── */
.substeps { list-style: none; }
.substep { border-top: 1px solid var(--line); }
.substep > h2 { font: inherit; margin: 0; }
.substep-head { display: flex; align-items: center; gap: 18px; width: 100%; min-height: var(--target-large); padding: 10px 40px;
                border: 0; background: transparent; color: var(--ink); text-align: left; }
.substep-head:hover { background: var(--sunken); }
.substep-dot { flex: none; width: 44px; height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
               font-size: 24px; font-weight: 800; line-height: 1; }
.substep.done .substep-dot { background: var(--done); color: var(--paper); }
.substep.in-progress .substep-dot { background: var(--accent); color: var(--on-accent); }
.substep.upcoming .substep-dot { border: 2px solid var(--upcoming); color: var(--muted); }
.substep.to-review .substep-dot { border: 2px solid var(--caution); color: var(--caution); }
.substep-title { flex: none; font-size: var(--text-card); font-weight: 800; line-height: 1.2; }
.substep-summary { flex: 1; min-width: 0; font-size: var(--text-body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.substep-head .chevron { color: var(--muted); }
.substep-body { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 4px 40px 32px 102px; }
.substep-body > p.explain { max-width: 46ch; font-size: 22px; line-height: 1.4; }

/* A task without sub-steps (the deliveries to place, a tour on the road): its content under the header. */
.task-body { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 4px 40px 36px; }
.task-body > p.explain, .substep-body > p.explain { max-width: 46ch; }

/* ── Choices: large cards, one pressed (a vehicle, a driver) ────────────────────────────────────── */
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; width: 100%; max-width: 920px; }
.choice { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 18px; border: 1.5px solid var(--control); border-radius: var(--radius);
          background: var(--paper); color: var(--ink); text-align: left; }
.choice:hover { border-color: var(--accent); }
.choice.is-selected { border: 2px solid var(--accent); background: var(--accent-pale); padding: 11.5px 17.5px; }
.choice[disabled] { cursor: default; }
.choice[disabled]:not(.is-selected) { background: var(--sunken); }
.choice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.choice-label { font-weight: 700; }
.choice-sub { display: flex; align-items: flex-start; gap: 6px; font-size: var(--text-small); color: var(--muted); }
.choice-sub > svg { margin-top: 3px; }
.choice-sub.caution { color: var(--caution); }
.choice-check { color: var(--accent); }

/* A small removable tag (a constraint on a stop). */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px 0 12px; border: 1.5px dashed var(--accent); border-radius: 999px;
        color: var(--accent); font-size: var(--text-small); font-weight: 700; }
.chip button { display: inline-flex; align-items: center; justify-content: center; min-width: var(--target); min-height: var(--target); margin: -6px -4px -6px 0;
               padding: 0; border: 0; background: transparent; color: inherit; }

/* ── The list of orders (unassigned, or of a tour) ─────────────────────────────────────────────── */
.order-list { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 920px; }
.orders { list-style: none; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.orders > li { display: flex; align-items: flex-start; gap: 14px; padding: 10px 16px 10px 18px; border-bottom: 1px solid var(--line); }
.orders > li:last-child { border-bottom: 0; }
.check-target { flex: none; width: var(--target); height: var(--target); margin: 0 -6px 0 -12px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.orders > li.a-verifier { background: var(--caution-pale); }
.orders > li.ouverte { background: var(--accent-pale); }
.ouvrir { flex: 1; min-width: 0; min-height: var(--target); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0 -8px; padding: 6px 8px;
          border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; }
.ouvrir:hover { background: var(--sunken); }
.ouvrir .order-number { font-size: var(--text-body); font-weight: 800; font-variant-numeric: tabular-nums; }
.ouvrir .order-who { font-size: var(--text-small); color: var(--muted); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badges:empty { display: none; }
.card.barre-actions { max-width: none; }
.check-all { padding-left: 18px; }

/* ── Cards: an order to review, a summary ───────────────────────────────────────────────────────── */
.card { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 720px; padding: 20px 24px; border: 1.5px solid var(--line);
        border-radius: var(--radius); background: var(--paper); }
.card.to-review { border: 2px solid var(--caution); }
.card .rank { font-size: var(--text-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.card .card-title { font-size: var(--text-card); font-weight: 800; line-height: 1.2; }
.card .where { color: var(--muted); }
.card .problem { color: var(--caution); font-weight: 700; }
.card .problem.danger { color: var(--danger); }
.card .boutons { margin-top: 6px; }

/* ── « Voir le détail » / « Plus d'options » ───────────────────────────────────────────────────── */
.disclosure { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target); padding: 0 18px 0 20px; border: 1.5px solid var(--control);
              border-radius: 999px; background: var(--paper); color: var(--ink); font-size: var(--text-small); font-weight: 700; }
.disclosure:hover { border-color: var(--accent); }
.disclosure[aria-expanded="true"] { border-color: var(--accent); }
.options { position: relative; }
.options-menu { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; min-width: 300px; max-width: calc(100vw - 32px); display: flex; flex-direction: column;
                gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.options-menu.align-start { right: auto; left: 0; }
.options-menu button, .options-menu a { display: flex; align-items: center; gap: 12px; min-height: var(--target); padding: 0 16px; border: 0; border-radius: 12px;
                                        background: transparent; color: var(--ink); font-size: var(--text-small); font-weight: 700; text-align: left; text-decoration: none; }
.options-menu button:hover, .options-menu button:focus-visible, .options-menu a:hover { background: var(--accent-pale); }
.options-menu .danger { color: var(--danger); }
.options-menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.options-menu .menu-heading { padding: 8px 16px 2px; font-size: var(--text-small); color: var(--muted); }

/* ── Forms (the field classes of the old base, restyled) ───────────────────────────────────────── */
.champ { display: grid; gap: 6px; min-width: 0; }
.champ > span { font-size: var(--text-small); font-weight: 700; color: var(--ink); }
.champ input, .champ select, .champ textarea, input.saisie, select.saisie {
  width: 100%; min-width: 0; min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--control); border-radius: var(--radius-field);
  background: var(--paper); color: var(--ink); font-size: var(--text-body); }
.champ select { padding-right: 36px; }
.champ input[readonly] { background: var(--sunken); color: var(--muted); }
.champ.douteux input { border: 2px solid var(--caution); background: var(--caution-pale); }
.champ.douteux > span { color: var(--caution); }
.champ.manque input { border: 2px solid var(--danger); }
.champ.manque > span { color: var(--danger); }
.champ.en-erreur input, .champ.en-erreur select { border: 2px solid var(--danger); background: var(--danger-pale); }
.champ .erreur-champ { font-size: var(--text-small); font-weight: 700; color: var(--danger); }
.case { display: inline-flex; align-items: center; gap: 12px; min-height: var(--target); cursor: pointer; }
.case input, input[type="checkbox"] { width: 26px; height: 26px; margin: 0; accent-color: var(--accent); flex: none; }
.indice { font-size: var(--text-small); color: var(--muted); }
/* A link inside a sentence, with a 48 px target (« Ouvrir la préparation »…). */
.item-link { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 700; }
.vide { color: var(--muted); }
.erreur { color: var(--danger); font-weight: 700; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.field-grid .full { grid-column: 1 / -1; }

/* ── Status messages (in the page); the bottom message (V.dire) ────────────────────────────────── */
.status-message { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border: 1.5px solid var(--line); border-radius: 12px;
                  background: var(--sunken); font-size: var(--text-body); font-weight: 700; line-height: 1.35; }
.status-message.done { border-color: var(--done); background: var(--done-pale); color: var(--done); }
.status-message.error { border-color: var(--danger); background: var(--danger-pale); color: var(--danger); }
.status-message.caution { border-color: var(--caution); background: var(--caution-pale); color: var(--caution); }
.status-message.info { border-color: var(--accent); background: var(--accent-pale); color: var(--accent); }
.status-message ul { margin: 6px 0 0; padding-left: 22px; font-weight: 400; }
.status-message .lien, .status-message .link-button { color: inherit; }

/* A tour's warnings and the vehicle's load (J.tourWarnings: the same at Planifier and Livrer). */
.status-message li.serious { color: var(--danger); }
.gauges { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: end; width: 100%; }
.gauge { display: grid; gap: 6px; min-width: 220px; font-size: var(--text-small); }
.gauge .bar { display: block; height: 10px; border-radius: 5px; background: var(--sunken); border: 1px solid var(--control); overflow: hidden; }
.gauge .bar i { display: block; height: 100%; background: var(--accent); }
.gauge.full .bar i { background: var(--caution); }
.gauge.over .bar i { background: var(--danger); }
.gauge.over .gauge-label { color: var(--danger); font-weight: 700; }
.need { font-size: var(--text-small); }
.need.ko { color: var(--danger); font-weight: 700; }
@media (max-width: 599px) { .gauge { min-width: 0; width: 100%; } }
.message { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 70;
           width: min(640px, calc(100vw - 32px)); pointer-events: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
           padding: 14px 16px 14px 20px; border-radius: var(--radius); background: var(--ink); color: var(--background); box-shadow: var(--shadow);
           font-size: var(--text-small); font-weight: 700; }
.message.erreur { background: var(--danger-pale); color: var(--danger); border: 2px solid var(--danger); }
.message .actions { display: flex; gap: 8px; }
.message button, .message .message-link { pointer-events: auto; min-height: var(--target); padding: 0 18px; border: 1.5px solid currentColor; border-radius: 999px;
                  background: transparent; color: inherit; font-size: var(--text-small); font-weight: 700; }
.message .message-link { display: inline-flex; align-items: center; text-decoration: none; }   /* a message's action that leaves the page */

/* ── The panel (an order, the files, the cancelled orders, the assistant) ──────────────────────── */
.panel-scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); }
.panel { position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); display: flex; flex-direction: column;
         background: var(--paper); color: var(--ink); box-shadow: var(--shadow); border-left: 1px solid var(--line); }
.panel > header { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid var(--line); }
.panel > header h2 { font-size: var(--text-card); font-weight: 800; }
.panel > header .panel-subtitle { margin-top: 4px; color: var(--muted); font-size: var(--text-small); }
.panel .panel-close { flex: none; width: var(--target); height: var(--target); display: flex; align-items: center; justify-content: center; padding: 0;
                      border: 1.5px solid var(--control); border-radius: 999px; background: var(--paper); color: var(--ink); }
.panel .panel-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 32px; display: flex; flex-direction: column; gap: 20px; }
.panel .panel-footer { flex: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--paper); }
.panel .panel-footer:empty { display: none; }
/* The bottom message lives in the panel while it is open: above its footer. */
.panel .message { left: auto; right: 16px; transform: none; width: min(600px, calc(100% - 32px)); bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
.panel .panel-footer .link-button.danger { margin-left: auto; color: var(--danger); }
.panel-body > .disclosure, .panel-body > .boutons, .panel-body > .button { align-self: flex-start; }
@media (prefers-reduced-motion: no-preference) {
  .panel { animation: panel-in 180ms ease-out; }
  @keyframes panel-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ── The confirmation window (V.fenetre: never window.confirm) ─────────────────────────────────── */
.voile { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: var(--scrim); }
.fenetre { width: min(600px, 100%); max-height: 90vh; overflow: auto; display: grid; gap: 18px; padding: 28px; border-radius: var(--radius);
           background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.fenetre h2 { font-size: var(--text-card); font-weight: 800; }
.fenetre ul { margin: 0; padding-left: 22px; }
.fenetre .actions { display: flex; flex-wrap: wrap-reverse; gap: 12px; justify-content: flex-end; }
.fenetre .actions .btn { min-height: 56px; }

/* ── Warnings: a pill that opens a panel ────────────────────────────────────────────────────────── */
.warnings-panel { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: min(520px, calc(100vw - 32px)); display: flex; flex-direction: column;
                  gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.warnings-panel .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.warnings-panel h2 { font-size: var(--text-card); font-weight: 800; }
.warnings-list { list-style: none; display: flex; flex-direction: column; gap: 16px; max-height: min(60vh, 520px); overflow-y: auto; }
.warnings-list li { display: flex; gap: 14px; align-items: flex-start; }
.warnings-list li > svg { color: var(--caution); margin-top: 2px; }
.warnings-list .warning-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.35; }
.warnings-list .warning-title { font-weight: 700; }
.warnings-list .warning-where { font-size: var(--text-small); color: var(--muted); }
.warning-actions { gap: 4px 16px; }
.warning-actions .link-button { font-size: var(--text-small); }
.round-button { flex: none; width: var(--target); height: var(--target); display: inline-flex; align-items: center; justify-content: center; padding: 0;
                border: 1.5px solid var(--control); border-radius: 999px; background: var(--paper); color: var(--ink); }
.round-button:hover { border-color: var(--accent); }
.panel-anchor { position: relative; }

/* ── The assistant (mounted by viadely.js), in the journey's colours ───────────────────────────── */
.assistant { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 60vh; border: 0; background: transparent; }
.assistant > header { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.assistant .fil { overflow-y: auto; padding: 16px 0; display: grid; gap: 12px; align-content: start; }
.assistant .saisie-zone { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.assistant form { display: flex; gap: 8px; }
.assistant form input { flex: 1; min-width: 0; min-height: var(--target); padding: 0 16px; border: 1.5px solid var(--control); border-radius: 999px; background: var(--paper); }
.assistant .cout { font-size: var(--text-small); color: var(--muted); }
.bulle { max-width: 92%; padding: 12px 16px; border-radius: 16px; font-size: var(--text-small); white-space: pre-line; }
.bulle.chef { justify-self: end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; }
.bulle.agent { background: var(--sunken); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bulle.agent ul { margin: 6px 0 0; padding-left: 22px; }
.bulle.pense { color: var(--muted); font-style: italic; }
.bulle.alerte { color: var(--danger); border-color: var(--danger); background: var(--danger-pale); }
.carte-plan { display: grid; gap: 12px; padding: 16px; border: 2px solid var(--caution); border-radius: var(--radius); background: var(--caution-pale); font-size: var(--text-small); }
.carte-plan.appliquee { border-color: var(--done); background: var(--done-pale); }
.carte-plan.annulee { border-color: var(--line); background: var(--sunken); }
.carte-plan .titre { font-size: var(--text-body); font-weight: 800; }
.carte-plan ol { list-style: none; display: grid; gap: 10px; }
.carte-plan li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.carte-plan li .avant-apres { display: block; color: var(--muted); }
.carte-plan li .alerte-act { display: block; color: var(--danger); font-weight: 700; }
.carte-plan li.engage .etiquette { color: var(--danger); font-weight: 800; }
.carte-plan .pied { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.attente-badge { display: inline-block; padding: 2px 12px; border-radius: 999px; background: var(--caution); color: var(--paper); font-size: var(--text-small); font-weight: 700; white-space: nowrap; }
.badge { display: inline-flex; align-items: center; padding: 2px 12px; border: 1.5px solid var(--control); border-radius: 999px; font-size: var(--text-small); font-weight: 700; color: var(--muted); white-space: nowrap; }
.badge.ok { color: var(--done); border-color: var(--done); background: var(--done-pale); }
.badge.verifier { color: var(--caution); border-color: var(--caution); background: var(--caution-pale); }
.badge.alerte, .badge.manque { color: var(--danger); border-color: var(--danger); background: var(--danger-pale); }
.badge.info { color: var(--accent); border-color: var(--accent); background: var(--accent-pale); }
.badge > svg { margin-right: 4px; flex: none; }

/* ── Tablet and phone ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1179px) {
  .step-body { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .step-card { padding: 28px 32px 36px; }
  .task .step-top, .substep-head { padding-inline: 28px; }
  .substep-body { padding: 4px 28px 28px 90px; }
  .task-body { padding: 4px 28px 28px; }
  .rename-form { margin: 0 28px 20px; }
  /* The steps as pills: the dot, the name, the count below (the count wraps rather than overlaps). */
  .steps ol { align-items: flex-start; }
  .steps li.step { flex: 1 1 0; }
  .steps li.connector { flex: 0 0 24px; margin: 26px -8px 0; }
  .step-link { flex-direction: column; gap: 6px; padding: 6px 4px; text-align: center; border-radius: 16px; }
  .step-link[aria-current="step"] { border-color: transparent; background: transparent; }
  .step-link[aria-current="step"] .step-dot { box-shadow: 0 0 0 4px var(--background), 0 0 0 7px var(--accent); }
  .step-text { align-items: center; max-width: 100%; }
  .step-count { white-space: normal; text-align: center; }
  .step-dot { width: 48px; height: 48px; font-size: 24px; }
  .step.upcoming .step-dot { font-size: 22px; }
  .step-name { font-size: var(--text-body); }
  .step.is-current .step-name { color: var(--accent); }
}
@media (max-width: 599px) {
  .barre-app { padding-block: 10px; column-gap: 12px; }
  .barre-app .divider, .brand .brand-word, .barre-app .establishment { display: none; }
  .barre-app .bar-start { flex-wrap: nowrap; gap: 8px; }
  .barre-app .compte { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  .barre-app .compte-nom { flex: 1; min-width: 0; max-width: none; }
  .day-button { margin-left: 0; padding: 0 10px; }
  .day-button > svg { display: none; }
  .day-button .short { display: inline-block; }
  .day-button .short::first-letter { text-transform: uppercase; }
  .pill { padding: 0 16px; }
  .long { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .short { display: inline; }
  .steps { padding: 12px 8px 14px; }
  .steps li.connector { flex-basis: 12px; margin-inline: -6px; }
  .step-dot { width: 44px; height: 44px; }
  .step-count { display: none; }
  .step-name { font-size: var(--text-small); }
  .step-area { padding: 16px var(--gutter) 32px; }
  .step-card { gap: 20px; padding: 0; border: 0; background: transparent; }
  .step-card.task { background: transparent; }
  .notch { display: none; }
  /* The step number on top, « précédente / suivante » at the bottom (mockup B, phone): the DOM order itself. */
  .step-card.overview { display: flex; }
  .step-card.overview > .step-number { color: var(--accent); font-weight: 700; }
  .step-main { gap: 16px; }
  .step-main .button.primary { width: 100%; padding: 0 20px; font-size: var(--text-body); }
  .step-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 10px; }
  .step-nav-link { min-height: 60px; padding: 6px 12px; gap: 8px; border-radius: 16px; }
  .step-nav-link.next { padding: 6px 12px; justify-content: flex-end; }
  .task .step-nav { display: flex; flex-wrap: wrap; width: 100%; }
  .task .step-nav .button.large { min-height: var(--target); padding: 0 18px; font-size: var(--text-small); }
  .task .step-top { padding: 0 0 16px; }
  .disclosure.show-list { display: inline-flex; }
  .step-side.collapsed .tour-rows, .step-side.collapsed > h2, .step-side.collapsed > #btn-tournee, .step-side.collapsed > form { display: none; }
  .rename-form { margin: 0 0 16px; }
  .tour-row { min-height: 58px; padding: 6px 14px; gap: 12px; border-radius: 14px; }
  .tour-row.to-finish { padding: 5.5px 13.5px; }
  .tour-row .dot { width: 32px; height: 32px; font-size: 18px; }
  .tour-row .tour-name { font-size: var(--text-body); }
  .tour-row .tour-state { font-size: var(--text-small); }
  .substep-head { padding: 10px 0; gap: 12px; flex-wrap: wrap; }
  .substep-dot { width: 40px; height: 40px; font-size: 22px; }
  .substep-title { font-size: 22px; flex: 1 1 0; min-width: 0; }
  .substep-summary { flex-basis: 100%; order: 3; padding-left: 52px; white-space: normal; }
  .substep-body { padding: 4px 0 24px; }
  .task-body { padding: 4px 0 24px; }
  .choices { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 16px; }
  .badge { white-space: normal; }
  .panel .panel-body, .panel > header, .panel .panel-footer { padding-inline: 16px; }
  .fenetre { padding: 20px; }
  .fenetre .actions .btn { width: 100%; }
  .options-menu { position: fixed; top: auto; left: 12px; right: 12px; bottom: 12px; min-width: 0; }
  .warnings-panel { position: fixed; top: 70px; left: 12px; right: 12px; width: auto; }
}