/* =====================================================================
   Kit visuel plateforme · v1 · 27/10/2026 · Direction marketing, design et UX
   Mobile d'abord. Aucune dépendance. À coller tel quel ou à traduire en
   variables Tailwind (voir charte-ux.md, section « Brancher le kit »).

   Concept : la signalisation routière. Fond clair et net, texte encre,
   bleu « panneau de direction » pour l'action, jaune « balisage » réservé
   à l'urgence. Gros boutons utilisables au pouce, en plein soleil, avec
   des gants.
   ===================================================================== */

/* Polices : à AUTO-HÉBERGER (fichiers woff2 gratuits, licence OFL) dans
   /fonts/ plutôt que d'appeler Google Fonts, pour ne transmettre aucune
   adresse IP à Google (RGPD). Si les fichiers manquent, la pile système
   prend le relais sans casser la mise en page.
   - Barlow Semi Condensed 600/700 : titres, prix, numéros (style panneau)
   - Atkinson Hyperlegible 400/700 : texte et formulaires (lisibilité max) */
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap; src: url("/fonts/barlow-semi-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap; src: url("/fonts/barlow-semi-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("/fonts/atkinson-hyperlegible-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("/fonts/atkinson-hyperlegible-700.woff2") format("woff2"); }

:root {
  /* Couleurs (thème clair) */
  --bg: #f4f6f9;            /* fond de page, gris froid légèrement bleuté */
  --surface: #ffffff;       /* cartes, formulaires */
  --surface-2: #e9edf3;     /* zones secondaires, champs désactivés */
  --ink: #111a2b;           /* texte principal */
  --ink-2: #4a5568;         /* texte secondaire */
  --line: #d3dae4;          /* bordures */
  --action: #1d4f91;        /* bleu panneau : boutons, liens */
  --action-press: #163d72;
  --on-action: #ffffff;
  --urgent: #f2b705;        /* jaune balisage : UNIQUEMENT l'urgence < 2 h */
  --on-urgent: #111a2b;
  --ok: #1e7a46;      --ok-bg: #e3f3ea;     /* validé, livré */
  --wait: #9a5b00;    --wait-bg: #fdf0d9;   /* en attente, à vérifier */
  --stop: #b42318;    --stop-bg: #fde8e6;   /* refusé, expiré, suspendu */
  --info: #1d4f91;    --info-bg: #e4ecf7;   /* nouvelle demande, info */
  --focus: #2f7de1;

  /* Typo */
  --font-display: "Barlow Semi Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.8125rem;  /* 13 px : mentions */
  --fs-sm: 0.9375rem;  /* 15 px : aide sous les champs */
  --fs-md: 1.0625rem;  /* 17 px : texte courant (jamais moins de 16 px dans un champ, sinon iOS zoome) */
  --fs-lg: 1.375rem;   /* 22 px : titres de carte */
  --fs-xl: 1.75rem;    /* 28 px : titres d'écran */
  --fs-price: 2.5rem;  /* 40 px : prix proposé */

  /* Espaces, rayons, tailles */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --radius: 10px;
  --radius-sm: 6px;
  --tap: 52px;          /* hauteur mini d'un bouton ou d'un champ (pouce, gants) */
  --maxw: 560px;        /* largeur max des parcours client et transporteur */
  --shadow: 0 1px 2px rgba(17, 26, 43, .08), 0 2px 8px rgba(17, 26, 43, .06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1420; --surface: #162132; --surface-2: #1e2c42; --ink: #eef2f8; --ink-2: #a9b4c4; --line: #2c3b52;
    --action: #5b9bea; --action-press: #4688db; --on-action: #0d1420;
    --urgent: #f5c430; --on-urgent: #0d1420;
    --ok: #5cc98a; --ok-bg: #12301f; --wait: #f0b45a; --wait-bg: #33260f; --stop: #f2887d; --stop-bg: #3a1714;
    --info: #8fbaf0; --info-bg: #182a44; --focus: #8fbaf0;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1420; --surface: #162132; --surface-2: #1e2c42; --ink: #eef2f8; --ink-2: #a9b4c4; --line: #2c3b52;
  --action: #5b9bea; --action-press: #4688db; --on-action: #0d1420;
  --urgent: #f5c430; --on-urgent: #0d1420;
  --ok: #5cc98a; --ok-bg: #12301f; --wait: #f0b45a; --wait-bg: #33260f; --stop: #f2887d; --stop-bg: #3a1714;
  --info: #8fbaf0; --info-bg: #182a44; --focus: #8fbaf0;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

/* ---------- Base ---------- */
[hidden] { display: none !important; }
.ui, .ui * { box-sizing: border-box; }
.ui { font-family: var(--font-body); font-size: var(--fs-md); line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
.ui h1, .ui h2, .ui h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: .005em; }
.ui h1 { font-size: var(--fs-xl); }
.ui h2 { font-size: var(--fs-lg); }
.ui h3 { font-size: var(--fs-md); }
.ui p { margin: 0; }
.ui a { color: var(--action); text-underline-offset: 3px; }
.ui :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ui .muted { color: var(--ink-2); }
.ui .small { font-size: var(--fs-sm); }
.ui .num { font-variant-numeric: tabular-nums; }
.ui .stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.ui .row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.ui .page { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-5); }

/* ---------- Barre du haut ---------- */
.ui .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface); border-bottom: 1px solid var(--line); }
.ui .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: .02em; text-transform: uppercase; }
.ui .wordmark small { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-xs); letter-spacing: 0; text-transform: none; color: var(--ink-2); }

/* ---------- Boutons ---------- */
.ui .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-5); border-radius: var(--radius); border: 2px solid transparent; font: 700 var(--fs-md)/1.2 var(--font-body); cursor: pointer; text-decoration: none; touch-action: manipulation; }
.ui .btn-primary { background: var(--action); color: var(--on-action); }
.ui .btn-primary:active { background: var(--action-press); }
.ui .btn-secondary { background: var(--surface); color: var(--action); border-color: var(--action); }
.ui .btn-quiet { background: transparent; color: var(--ink-2); border-color: var(--line); }
.ui .btn-danger { background: var(--surface); color: var(--stop); border-color: var(--stop); }
.ui .btn-block { width: 100%; }
.ui .btn[disabled] { opacity: .45; cursor: not-allowed; }
/* Deux choix de même poids (ex. « Proposer mon prix » / « Je ne peux pas ») : même taille, côte à côte */
.ui .btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.ui .btn-pair .btn { padding: 0 var(--sp-2); font-size: var(--fs-sm); }
/* Barre d'action collée en bas de l'écran sur mobile */
.ui .actionbar { position: sticky; bottom: 0; padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }

/* ---------- Formulaires ---------- */
.ui .field { display: flex; flex-direction: column; gap: var(--sp-1); }
.ui .field > label { font-weight: 700; }
.ui .field .hint { font-size: var(--fs-sm); color: var(--ink-2); }
.ui .field .error { font-size: var(--fs-sm); color: var(--stop); font-weight: 700; }
.ui .input, .ui select.input, .ui textarea.input { width: 100%; min-height: var(--tap); padding: var(--sp-3); border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: 400 max(16px, var(--fs-md)) var(--font-body); }
.ui .input:focus { border-color: var(--action); outline: none; box-shadow: 0 0 0 3px var(--info-bg); }
.ui .input[aria-invalid="true"] { border-color: var(--stop); }
.ui .input-price { font: 700 var(--fs-price)/1 var(--font-display); text-align: right; font-variant-numeric: tabular-nums; }
/* Choix en tuiles (véhicule, urgence) : plus rapide qu'une liste déroulante au pouce */
.ui .choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-2); }
.ui .choice { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: var(--tap); padding: var(--sp-3); border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.ui .choice input { position: absolute; opacity: 0; pointer-events: none; }
.ui .choice:has(input:checked) { border-color: var(--action); background: var(--info-bg); }
.ui .choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.ui .choice b { font-weight: 700; }
.ui .choice span { font-weight: 400; font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------- Étapes d'un formulaire ---------- */
.ui .steps { display: flex; gap: var(--sp-1); }
.ui .steps i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.ui .steps i.done { background: var(--action); }

/* ---------- Cartes ---------- */
.ui .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.ui .card-raised { box-shadow: var(--shadow); }
/* Trajet A → B, lisible d'un coup d'œil */
.ui .route { display: grid; grid-template-columns: 18px 1fr; column-gap: var(--sp-3); }
.ui .route .dot { width: 12px; height: 12px; margin: 6px 3px 0; border-radius: 50%; border: 3px solid var(--action); background: var(--surface); }
.ui .route .dot.end { background: var(--action); }
.ui .route .rail { width: 2px; margin-left: 8px; min-height: 18px; background: var(--line); }
.ui .route .place { font-weight: 700; }
.ui .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); margin: 0; }
.ui .facts dt { font-size: var(--fs-xs); color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.ui .facts dd { margin: 0; font-weight: 700; }

/* ---------- Offre (côté client) : toutes identiques, aucune mise en avant ---------- */
.ui .offer { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-3); align-items: start; }
.ui .offer .price { font: 700 1.75rem/1 var(--font-display); font-variant-numeric: tabular-nums; text-align: right; }
.ui .offer .price small { display: block; font: 400 var(--fs-xs) var(--font-body); color: var(--ink-2); }
.ui .offer .btn { grid-column: 1 / -1; }

/* ---------- Badges de statut ---------- */
.ui .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.ui .badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ui .badge-ok { color: var(--ok); background: var(--ok-bg); }
.ui .badge-wait { color: var(--wait); background: var(--wait-bg); }
.ui .badge-stop { color: var(--stop); background: var(--stop-bg); }
.ui .badge-info { color: var(--info); background: var(--info-bg); }
.ui .badge-urgent { color: var(--on-urgent); background: var(--urgent); }
.ui .badge-urgent::before { background: var(--on-urgent); }

/* ---------- Bandeaux ---------- */
.ui .notice { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-size: var(--fs-sm); border-left: 4px solid currentColor; }
.ui .notice-info { color: var(--info); background: var(--info-bg); }
.ui .notice-wait { color: var(--wait); background: var(--wait-bg); }
.ui .notice-stop { color: var(--stop); background: var(--stop-bg); }
.ui .notice-ok { color: var(--ok); background: var(--ok-bg); }
.ui .notice > div { color: var(--ink); }

/* ---------- Liste de documents (8 pièces) ---------- */
.ui .doclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ui .doclist li { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--sp-3); align-items: center; min-height: var(--tap); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.ui .doclist li:last-child { border-bottom: 0; }
.ui .doclist .n { font: 700 var(--fs-md) var(--font-display); color: var(--ink-2); text-align: center; }

/* ---------- Suivi d'une course ---------- */
.ui .timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ui .timeline li { position: relative; padding: 0 0 var(--sp-4) var(--sp-6); }
.ui .timeline li::before { content: ""; position: absolute; left: 7px; top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--line); background: var(--surface); }
.ui .timeline li::after { content: ""; position: absolute; left: 14px; top: 22px; bottom: 0; width: 2px; background: var(--line); }
.ui .timeline li:last-child::after { display: none; }
.ui .timeline li.done::before { border-color: var(--ok); background: var(--ok); }
.ui .timeline li.now::before { border-color: var(--action); }
.ui .timeline b { display: block; }

/* ---------- Tableaux (espace Léo, ordinateur) ---------- */
.ui .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ui table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ui th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); padding: var(--sp-3); border-bottom: 1px solid var(--line); }
.ui td { padding: var(--sp-3); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ui tr:last-child td { border-bottom: 0; }
.ui td.r, .ui th.r { text-align: right; }

/* ---------- Chiffres clés (espace Léo) ---------- */
.ui .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-3); }
.ui .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.ui .kpi b { display: block; font: 700 2rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.ui .kpi span { font-size: var(--fs-sm); color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) { .ui * { transition: none !important; animation: none !important; } }

/* ---------- Alias pour le code du CTO (HTML pur, statuts Supabase) ---------- */
.ui .container { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-4); }
.ui .container-wide { max-width: 1100px; margin: 0 auto; padding: var(--sp-4); }
.ui .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); }
.ui .table { width: 100%; }
.ui .alert-info { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-size: var(--fs-sm); border-left: 4px solid var(--info); background: var(--info-bg); color: var(--ink); }
.ui .alert-error { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-size: var(--fs-sm); border-left: 4px solid var(--stop); background: var(--stop-bg); color: var(--ink); }
.ui .alert-ok { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-size: var(--fs-sm); border-left: 4px solid var(--ok); background: var(--ok-bg); color: var(--ink); }
/* Badges par statut : <span class="badge badge-open">Ouverte</span> (toujours un texte français dans le badge) */
.ui .badge-open, .ui .badge-pending { color: var(--info); background: var(--info-bg); }
.ui .badge-assigned, .ui .badge-picked_up { color: var(--wait); background: var(--wait-bg); }
.ui .badge-delivered, .ui .badge-accepted, .ui .badge-validated { color: var(--ok); background: var(--ok-bg); }
.ui .badge-cancelled, .ui .badge-expired, .ui .badge-not_selected, .ui .badge-withdrawn { color: var(--ink-2); background: var(--surface-2); }
.ui .badge-refused, .ui .badge-suspended { color: var(--stop); background: var(--stop-bg); }
.ui .badge-pending.carrier { color: var(--wait); background: var(--wait-bg); }

/* ---------- Pied de page (liens légaux obligatoires) ---------- */
.ui .footer { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); padding: var(--sp-5) var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-2); }
.ui .footer a { color: var(--ink-2); }
/* ---------- Écran vide ---------- */
.ui .empty { text-align: center; padding: var(--sp-6) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; color: var(--ink-2); }
.ui .empty h2 { color: var(--ink); }

/* =====================================================================
   v2 · 27/10/2026 · refonte : bandeau d'accueil, tableau public des
   courses, fiche course, barre du haut avec logo, mise en page large.
   ===================================================================== */
:root { --wide: 1120px; --hero: #0f2f5c; --hero-2: #1d4f91; --radius-lg: 16px; --shadow-lg: 0 2px 4px rgba(17,26,43,.06), 0 12px 32px rgba(17,26,43,.10); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hero: #0a1a33; --hero-2: #14365f; --shadow-lg: 0 2px 8px rgba(0,0,0,.5); } }
:root[data-theme="dark"] { --hero: #0a1a33; --hero-2: #14365f; --shadow-lg: 0 2px 8px rgba(0,0,0,.5); }

.ui { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
.ui main { flex: 1; }
.ui .wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--sp-4); }
.ui .page-wide { max-width: var(--wide); margin: 0 auto; padding: var(--sp-5) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-5); width: 100%; }
.ui .eyebrow { font: 700 var(--fs-xs)/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .12em; color: var(--action); }

/* Barre du haut : logo, liens, collée en haut */
.ui .topbar { position: sticky; top: 0; z-index: 30; padding: var(--sp-2) max(var(--sp-4), calc((100% - var(--wide)) / 2 + var(--sp-4))); min-height: 64px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(8px); }
.ui .brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--ink); text-decoration: none; }
.ui .topbar { flex-wrap: nowrap; }
.ui .brand .wm { white-space: nowrap; }
.ui .topbar nav { flex-wrap: nowrap; }
.ui .brand .mark { width: 36px; height: 36px; flex: none; border-radius: 9px; background: var(--action); display: grid; place-items: center; }
.ui .brand .mark svg { width: 22px; height: 22px; }
.ui .topbar nav { gap: var(--sp-1); }
.ui .topbar nav a:not(.btn) { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 700; text-decoration: none; }
.ui .topbar nav a:not(.btn):hover, .ui .topbar nav a[aria-current] { color: var(--ink); background: var(--surface-2); }
.ui .topbar .btn { min-height: 44px; padding: 0 var(--sp-4); font-size: var(--fs-sm); }

/* Bandeau d'accueil bleu nuit, avec la ligne de marquage au sol */
.ui .hero { position: relative; color: #fff; background: radial-gradient(1200px 500px at 85% -10%, var(--hero-2), transparent 60%), var(--hero); overflow: hidden; }
.ui .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--urgent) 0 48px, transparent 48px 80px); opacity: .9; }
.ui .hero .wrap { display: grid; gap: var(--sp-6); padding-top: var(--sp-6); padding-bottom: calc(var(--sp-6) + 12px); align-items: center; }
.ui .hero h1 { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.05; color: #fff; }
.ui .hero p { color: #c9d6ea; font-size: 1.125rem; max-width: 34em; }
.ui .hero .eyebrow { color: var(--urgent); }
.ui .hero .ctas { display: grid; gap: var(--sp-3); }
.ui .hero .btn-primary { background: #fff; color: #0f2f5c; }
.ui .hero .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.ui .hero .btn-ghost:hover { border-color: #fff; }
.ui .hero .trust { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: #c9d6ea; }
.ui .hero .trust span::before { content: "✓"; margin-right: 6px; color: var(--urgent); font-weight: 700; }
.ui .hero .preview { background: var(--surface); color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.ui .hero .preview p { color: var(--ink-2); font-size: var(--fs-sm); }
.ui .live { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-sm); }
.ui .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); }
@media (min-width: 900px) {
  .ui .hero .wrap { grid-template-columns: 1.15fr .85fr; padding-top: 72px; padding-bottom: 84px; }
  .ui .hero .ctas { grid-template-columns: auto auto; justify-content: start; }
}

/* Sections de l'accueil */
.ui .section { padding: var(--sp-6) 0; }
.ui .section > .wrap { display: flex; flex-direction: column; gap: var(--sp-5); }
.ui .section > .wrap.cols { display: grid; gap: var(--sp-4); }
.ui .section-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ui .section h2 { font-size: clamp(1.5rem, 4vw, 2.125rem); }
.ui .cols { display: grid; gap: var(--sp-4); }
@media (min-width: 760px) { .ui .cols-3 { grid-template-columns: repeat(3, 1fr); } .ui .cols-2 { grid-template-columns: repeat(2, 1fr); } }
.ui .step { display: flex; flex-direction: column; gap: var(--sp-2); }
.ui .step .n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 1.25rem var(--font-display); color: var(--on-action); background: var(--action); }
.ui .audience { border-radius: var(--radius-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); background: var(--surface); border: 1px solid var(--line); }
.ui .audience.dark { background: var(--hero); color: #fff; border-color: var(--hero); }
.ui .audience.dark p, .ui .audience.dark li { color: #c9d6ea; }
.ui .audience.dark .btn-primary { background: #fff; color: #0f2f5c; }
.ui .ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.ui .ticks li { padding-left: 28px; position: relative; }
.ui .ticks li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--ok); }
.ui .audience.dark .ticks li::before { color: var(--urgent); }
.ui .audience .btn { align-self: flex-start; margin-top: auto; }

/* Tableau des courses : une tuile = une course, entièrement cliquable */
.ui .board { display: grid; gap: var(--sp-3); }
@media (min-width: 900px) { .ui .board-2 { grid-template-columns: repeat(2, 1fr); } }
.ui .job { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ui a.job:hover { border-color: var(--action); box-shadow: var(--shadow); transform: translateY(-1px); }
.ui .job .cities { font: 700 1.25rem/1.15 var(--font-display); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); }
.ui .job .cities .arrow { color: var(--action); }
.ui .job .cities small { font: 400 var(--fs-xs) var(--font-body); color: var(--ink-2); }
.ui .job .price { font: 700 1.75rem/1 var(--font-display); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.ui .job .price small { display: block; font: 400 var(--fs-xs) var(--font-body); color: var(--ink-2); margin-top: 2px; }
.ui .job .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ui .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: var(--fs-sm); white-space: nowrap; }
.ui .job .when { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--ink-2); }
.ui .job-compact { padding: var(--sp-3); }
.ui .job-compact .cities { font-size: 1.0625rem; }
.ui .job-compact .price { font-size: 1.375rem; }

/* Filtres en pastilles (zones) */
.ui .filters { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.ui .filters button { flex: none; min-height: 40px; padding: 0 var(--sp-4); border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: 700 var(--fs-sm) var(--font-body); cursor: pointer; }
.ui .filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }

/* Fiche course */
.ui .detail { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 900px) { .ui .detail { grid-template-columns: 1fr 360px; grid-template-areas: "head side" "body side"; } .ui .detail .head { grid-area: head; } .ui .detail .body { grid-area: body; } .ui .detail .side { grid-area: side; position: sticky; top: 84px; } }
.ui .bigroute { font: 700 clamp(1.75rem, 5vw, 2.5rem)/1.1 var(--font-display); }
.ui .pricebox { text-align: center; gap: var(--sp-2); }
.ui .pricebox .amount { font: 700 3rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ui .lock { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--fs-sm); color: var(--ink-2); }
.ui .lock svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }

/* Bandeau d'invitation à s'inscrire */
.ui .invite { display: grid; gap: var(--sp-3); align-items: center; padding: var(--sp-4); border-radius: var(--radius); background: var(--info-bg); border: 1px solid color-mix(in srgb, var(--action) 25%, transparent); }
@media (min-width: 760px) { .ui .invite { grid-template-columns: 1fr auto; } }

/* Pied de page */
.ui .footer { padding-left: max(var(--sp-4), calc((100% - var(--wide)) / 2 + var(--sp-4))); padding-right: max(var(--sp-4), calc((100% - var(--wide)) / 2 + var(--sp-4))); background: var(--surface); }
@media (max-width: 640px) { .ui .topbar nav a.hide-sm { display: none; } }
@media (max-width: 480px) {
  .ui .topbar { padding-left: var(--sp-3); padding-right: var(--sp-3); gap: var(--sp-2); }
  .ui .brand { gap: var(--sp-2); } .ui .brand .mark { width: 32px; height: 32px; }
  .ui .wordmark { font-size: 1rem; }
  .ui .topbar nav a:not(.btn) { padding: var(--sp-2); }
  .ui .topbar .btn { padding: 0 var(--sp-3); }
}

/* =====================================================================
   v3 · 27/10/2026 · charte Expressiste choisie par le CEO :
   vert foncé + jaune, photo d'Orléans en bandeau, titres condensés,
   bande vert pâle. Le jaune sert aux boutons d'action et à l'urgence.
   ===================================================================== */
:root {
  --bg: #fbfcfb; --surface: #ffffff; --surface-2: #e4efe4; --ink: #10241a; --ink-2: #56645b; --line: #dde4de;
  --action: #124830; --action-press: #0b3321; --on-action: #ffffff;
  --cta: #f6d660; --cta-press: #ecc843; --on-cta: #10241a;
  --urgent: #f6d660; --on-urgent: #10241a;
  --info: #124830; --info-bg: #e4efe4; --focus: #2f8a5b;
  --hero: #124830; --hero-2: #0b3321;
  --shadow: 0 1px 2px rgba(16,36,26,.06), 0 4px 14px rgba(16,36,26,.06);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0b1510; --surface: #12211a; --surface-2: #1a3024; --ink: #eef5f0; --ink-2: #a7b8ad; --line: #26392e;
  --action: #7fcf9f; --action-press: #6bbf8d; --on-action: #0b1510; --cta: #f6d660; --cta-press: #ecc843; --on-cta: #10241a;
  --info: #9fdcb7; --info-bg: #17301f; --hero: #0e2a1c; --hero-2: #081a11; } }
:root[data-theme="dark"] {
  --bg: #0b1510; --surface: #12211a; --surface-2: #1a3024; --ink: #eef5f0; --ink-2: #a7b8ad; --line: #26392e;
  --action: #7fcf9f; --action-press: #6bbf8d; --on-action: #0b1510; --cta: #f6d660; --cta-press: #ecc843; --on-cta: #10241a;
  --info: #9fdcb7; --info-bg: #17301f; --hero: #0e2a1c; --hero-2: #081a11; }

.ui .ico { width: 20px; height: 20px; flex: none; }
.ui .btn-primary { background: var(--cta); color: var(--on-cta); }
.ui .btn-primary:hover { background: var(--cta-press); }
.ui .btn-primary:active { background: var(--cta-press); }
.ui .btn-primary .ico { width: 16px; height: 16px; }
.ui .btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.ui .btn-quiet { color: var(--ink); }
.ui .btn-quiet .ico { width: 18px; height: 18px; }
.ui .show-sm { display: none; }
@media (max-width: 640px) { .ui .show-sm { display: inline; } }

/* Barre du haut et logo */
.ui .topbar { background: color-mix(in srgb, var(--surface) 94%, transparent); min-height: 72px; }
.ui .brand .mark { width: 42px; height: 42px; border-radius: 10px; background: #124830; color: #fff; }
.ui .brand .mark .ico { width: 24px; height: 24px; }
.ui .wordmark { text-transform: none; font-size: 1.5rem; letter-spacing: 0; line-height: 1; }
.ui .wordmark .dot { font-style: normal; color: #d9b52c; }
.ui .wordmark small { text-transform: uppercase; letter-spacing: .04em; font-size: .6875rem; margin-top: 4px; }
.ui .topbar nav a:not(.btn) { font-weight: 400; color: var(--ink); }
@media (max-width: 480px) { .ui .wordmark { font-size: 1.25rem; } .ui .brand .mark { width: 36px; height: 36px; } }

/* Bandeau photo d'Orléans (fichier /img/orleans.jpg ; sans photo, fond vert) */
.ui .hero::after { display: none; }
.ui .hero-photo { background: linear-gradient(90deg, rgba(9,36,22,.94) 0%, rgba(9,36,22,.82) 38%, rgba(9,36,22,.25) 72%, rgba(9,36,22,.05) 100%), url("/img/orleans.jpg") center / cover no-repeat, var(--hero); }
@media (max-width: 760px) { .ui .hero-photo { background: linear-gradient(180deg, rgba(9,36,22,.78), rgba(9,36,22,.92)), url("/img/orleans.jpg") center / cover no-repeat, var(--hero); } }
.ui .hero .wrap { grid-template-columns: 1fr !important; }
.ui .hero-text { max-width: 560px; }
.ui .hero h1 { font-size: clamp(2.5rem, 7vw, 4.25rem); line-height: 1.02; }
.ui .hero h1 .hl { color: var(--cta); }
.ui .hero p { color: #e6efe8; }
.ui .hero .eyebrow { color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.ui .hero .eyebrow .ico { width: 16px; height: 16px; }
.ui .hero .trust { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: #e6efe8; }
.ui .hero .trust .ico { width: 14px; height: 14px; }
.ui .hero .trust span::before { content: none; }
@media (min-width: 900px) { .ui .hero .wrap { padding-top: 88px; padding-bottom: 88px; } }

/* Bande vert pâle des engagements */
.ui .band { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ui .band .wrap { display: grid; gap: var(--sp-3); padding-top: var(--sp-4); padding-bottom: var(--sp-4); font-size: var(--fs-sm); }
.ui .band span { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); }
@media (min-width: 760px) { .ui .band .wrap { grid-template-columns: repeat(3, 1fr); padding-top: var(--sp-5); padding-bottom: var(--sp-5); } }

/* Sections */
.ui .section-alt { background: var(--bg); border: 0; }
.ui .section h2 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); }
.ui .section .eyebrow { color: var(--action); font-size: .6875rem; }
.ui .section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-3); }
.ui .section-head .more { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; font-size: var(--fs-sm); }
.ui .section-head .more .ico { width: 16px; height: 16px; }
.ui .tile-ico { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--action); }
.ui .tile-ico .ico { width: 22px; height: 22px; }
.ui .step { border-top: 1px solid var(--line); padding-top: var(--sp-5); gap: var(--sp-3); }
.ui .step-top { display: flex; justify-content: space-between; align-items: center; }
.ui .step .n { width: auto; height: auto; background: none; color: var(--action); font-size: 2rem; border-radius: 0; }
.ui .step h3 { font-size: 1.5rem; }
.ui .audience { border-radius: 12px; padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.ui .audience.dark { background: #124830; border-color: #124830; }
.ui .audience.dark p { color: #e6efe8; }
.ui .audience.dark .tile-ico { background: transparent; color: var(--cta); width: auto; height: auto; justify-content: start; }
.ui .audience.dark .tile-ico .ico { width: 40px; height: 40px; }
.ui .audience.dark .btn-primary { background: var(--cta); color: var(--on-cta); }
.ui .audience h2 { font-size: 2rem; }

/* Cartes et tuiles de courses */
.ui .board-3 { display: grid; gap: var(--sp-3); }
@media (min-width: 760px) { .ui .board-3 { grid-template-columns: repeat(3, 1fr); } }
.ui .job { border-radius: 10px; }
.ui a.job:hover { border-color: var(--ink); box-shadow: none; transform: none; }
.ui .job-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); }
.ui .job-card .cities { font-size: 1.375rem; font-weight: 600; }
.ui .job-card .price-line b { font: 700 1.75rem/1 var(--font-display); }
.ui .job-card .price-line small { font-size: var(--fs-xs); color: var(--ink-2); }
.ui .chip { background: transparent; border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-2); }
.ui .job .cities .arrow { color: var(--ink); }
.ui .badge-urgent::before { display: none; }
.ui .filters button[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: var(--on-action); }
.ui .filters button { font-weight: 400; border-width: 1px; }
.ui .lock { background: var(--surface-2); color: var(--ink); }
.ui .invite { background: var(--surface-2); border-color: var(--line); }
.ui .steps i.done { background: var(--action); }
.ui .choice:has(input:checked) { border-color: var(--action); background: var(--surface-2); }

/* Pied de page */
.ui .footer { flex-direction: column; align-items: stretch; gap: var(--sp-3); background: var(--bg); padding-top: var(--sp-6); }
.ui .footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.ui .footer-top .wordmark { font-size: 1.375rem; color: var(--ink); }
.ui .footer a { text-decoration: none; }
.ui .footer p { margin: 0; }
.ui .hero .btn-primary { background: var(--cta); color: var(--on-cta); }
.ui .hero .btn { white-space: nowrap; }
.ui .hero .trust { flex-wrap: nowrap; align-items: flex-start; }
.ui .hero .trust .ico { margin-top: 2px; }
.ui .hero .signature { color: var(--cta); font: 600 1.125rem/1.2 var(--font-display); letter-spacing: .01em; margin-top: calc(-1 * var(--sp-2)); }
.ui .hero p.trust { max-width: none; }