@charset "UTF-8";
/* =================================================================
   NOVALIA — DESIGN SYSTEM « NUIT & OR » (lot J, 05/10/2026)
   youcef : « l'admin fait encore trop Claude ; ajoute également un peu plus de couleur ».
   Les couleurs de SA marque (le carré nuit et son « N » or, les e-mails, l'ancien site Riviera) :
   · NUIT #0E1B2C — le cadre : la barre latérale dans les deux thèmes (plus profonde en sombre,
     #070D17), le carré du logo, la série « une mesure » des graphiques ;
   · OR #C8A866 — la marque, sur fond nuit : le « N », le filet de l'écran ouvert dans le menu,
     le filet sous le titre de l'écran. Sur fond clair, l'or qui écrit fonce (--gold-ink #765A14,
     6,5:1 sur blanc) ;
   · VERT #0F7B53 — l'action, et elle seule : bouton plein (blanc dessus 5,3:1), onglet actif,
     focus, liens (--texte-accent #0D6E4B, 5,5:1 sur --surface-2). Les liens sont verts et non bleu
     nuit : un bleu nuit sur blanc ne se distingue pas de l'encre ; « on peut agir ici » = une couleur ;
   · la couleur porte une CATÉGORIE, jamais un décor : statuts en pastilles teintées (texte foncé AA
     sur fond doux), canaux en puces de leur couleur, familles de chiffres clés en pastilles d'icône,
     graphiques en huit teintes (nuit, corail, vert, or, violet, teal, bleu, gris).
   Le canvas reste gris froid et les cartes blanches ; en sombre, les surfaces prennent la teinte de
   la nuit. Rayons 8 / 12 / 16, ombres douces.
   PEAU « ATELIER » (V3.21, 20/10/2026) — youcef : « ça fait trop IA à chaque fois » ; la piste choisie : un outil de pro.
   IBM Plex Sans et Plex Mono, angles nets, filets au lieu des ombres, barre latérale blanche, sombre graphite ; le vert
   reste l'action. Ses jetons suivent ceux-ci (« LES JETONS »), ses règles ferment la feuille (« PEAU « ATELIER » »).
   Chaque couleur de TEXTE tient 4,5:1 (test/v94-0-socle-design, test/lot-j-nuit-or).
   ================================================================= */
/* Peau « Atelier » (V3.21) — IBM Plex Sans et IBM Plex Mono, servies par la console (fonts/construire-plex.py, SIL OFL 1.1) :
   Plex Sans en deux fichiers comme chez Google, le latin et le latin étendu (Kovač, Łódź…, chargé seulement quand une page en
   contient), graisses 400 à 700 ; ses chiffres sont tabulaires d'origine et ses espaces fines (U+202F, U+2009) dessinées.
   Plex Mono (400, 500, 600) pour les heures, les montants et les références. */
@font-face{font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(fonts/plex-sans-novalia-latin.woff2) format('woff2');
  unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+2000-200D,U+2010-2015,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2028-2029,U+202F-2030,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(fonts/plex-sans-novalia-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01CD-01DC,U+01FA-01FF,U+0218-021B,U+0237,U+0259,U+02C7,U+02DD,U+0304,U+0308,U+1E80-1E85,U+1E9E,U+1EF2-1EF9,U+2020,U+20A1,U+20A4,U+20A6,U+20A8-20AB,U+20AD-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BD,U+20BF,U+2113}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/plex-mono-novalia-400.woff2) format('woff2'); unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+2000-200D,U+2010-2015,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2028-2029,U+202F-2030,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url(fonts/plex-mono-novalia-500.woff2) format('woff2'); unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+2000-200D,U+2010-2015,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2028-2029,U+202F-2030,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:600 700; font-display:swap;
  src:url(fonts/plex-mono-novalia-600.woff2) format('woff2'); unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+2000-200D,U+2010-2015,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2028-2029,U+202F-2030,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  color-scheme: light;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pilule:999px; --r-rond:50%;
  /* V58.0 — ECHELLE TYPOGRAPHIQUE : 7 crans au lieu de 24 tailles differentes
     (dont des demi-pixels). On substitue ecran par ecran, jamais d'un coup. */
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-24:24px;
  /* ECHELLE D'ESPACEMENT : 6 crans (4/8/12/16/24/32). Les 4 anciens crans
     (6/10/16/24) etaient definis et utilises zero fois. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --page:#f4f5f8; --surface:#ffffff; --elevated:#ffffff; --surface-2:#eef0f4; --surface-3:#f7f8fa;
  --bg:var(--page); --halo:none;
  --grid:#e9ecf1; --baseline:#cbd0d9; --border:#e3e6ec; --border-strong:#d0d5de;
  --shadow-card:0 1px 2px rgba(17,24,39,.04), 0 6px 20px -6px rgba(17,24,39,.10);
  --shadow-card-hover:0 1px 2px rgba(17,24,39,.05), 0 10px 28px -8px rgba(17,24,39,.14);
  /* palette sémantique des données : un point, jamais un aplat (lot J : les teintes de la palette Nuit & or) */
  --azur:#3b7deb; --pin:#178a55; --corail:#d9452c; --ambre:#d6951c; --brume:#9aa3b1;
  --good:#0f9f6e; --good-soft:rgba(16,185,129,.12);
  --bad:#e11d48; --neg:#e11d48; --warn:#d97706; --warn-soft:rgba(245,158,11,.14);
  --bad-soft:rgba(244,63,94,.11);
  --meter-track:var(--grid);
  /* action = le vert Novalia (lot J) : blanc dessus 5,3:1 */
  --accent:#0f7b53; --accent-ink:#ffffff; --accent-soft:rgba(15,123,83,.10); --accent-border:#0c6a48;
  --ring:rgba(15,123,83,.26);
  --btn:var(--accent); --btn-border:var(--accent-border); --btn-ink:#ffffff;
  --btn-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(23,24,28,.10);
  --btn-shadow-hover:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(23,24,28,.14);
  /* l'or de la marque (lot J) : --or sur fond nuit ; sur fond clair, --gold (icône, 3,96:1) et --gold-ink (texte, 6,5:1) */
  --gold:#9c7b36; --gold-2:#c9a227; --gold-3:#e2c377; --gold-ink:#765a14; --gold-soft:rgba(200,168,102,.16);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b6f7b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  /* la barre latérale est nuit dans les deux thèmes (lot J : jetons --side-… plus bas) */
  --side:#0e1b2c; --side-ink:#ffffff; --side-muted:#c2cbd8; --side-line:rgba(255,255,255,.08); --side-hover:rgba(255,255,255,.06); --side-on:rgba(255,255,255,.09);
  --s1:#203a62; --s2:#178a55; --s3:#d6951c; --s4:#3b7deb; --s5:#a46cd8; --s6:#d9452c; --s7:#0b7d75; --s8:#e0702c;
  --chart-hero:#0f7b53;
  --horizon:linear-gradient(90deg,var(--accent),var(--accent));
  --shadow-ctl:0 1px 1px rgba(23,24,28,.04);
  --shadow:none; --shadow-hover:none;
  --shadow-pop:0 1px 2px rgba(17,24,39,.05), 0 10px 30px rgba(17,24,39,.12);
  --shadow-lg:0 2px 8px rgba(17,24,39,.06), 0 28px 64px rgba(17,24,39,.18);
  --font-sans:'IBM Plex Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-num:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-code:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-mono:var(--font-code);
  --ease:cubic-bezier(.2,.7,.2,1);
  --gutter:32px;
  /* V68.0 — couches nommées et encre sur aplat (règle 15) */
  --z-collant:5; --z-flottant:20; --z-aide:130; --z-voir:900;   /* --z-aide : l'aide clavier passe au-dessus de la palette (120) */
  --z-feuille:160;   /* V76.0 : la feuille d'actions passe au-dessus d'une fiche ouverte (fenêtre à 150) */
  --z-volet-fond:110; --z-volet:120;   /* V81.0 : le volet se place comme le tiroir, sous les fenêtres (150) */
  --on-couleur:#ffffff;
  --good-plein:#047857; --on-good:#ffffff;   /* V71.0 (O14) — « Terminée » lisible : 5,5:1 (1,9:1 avant, en sombre) */
  --haut-barre:calc(52px + env(safe-area-inset-top,0px));
  /* V80.0 (O5) — palette sémantique des finances : la nuit au CA (lot J : le vert d'action et la marge, deux verts
     côte à côte, se confondaient), puis ce qui s'en va et ce qui reste (les jetons de base changent avec le thème : ces alias suivent) */
  --fin-ca:var(--serie-1); --fin-comm:var(--ambre); --fin-cout:var(--azur); --fin-marge:var(--pin); --fin-charges:var(--corail); --fin-neutre:var(--brume);
}
html[data-theme="dark"]{
  color-scheme: dark;
  /* lot J — les surfaces prennent la teinte de la nuit (#0E1B2C) ; la barre latérale est plus profonde encore */
  --page:#0a111b; --surface:#111a26; --elevated:#16212f; --surface-2:#1a2636; --surface-3:#141e2b;
  --bg:var(--page); --halo:none;
  --ink:#eef1f6; --ink-2:#b9c0cc;
  --grid:rgba(255,255,255,.07); --baseline:#34425a; --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14);
  --shadow-card:0 1px 2px rgba(0,0,0,.35), 0 10px 28px -8px rgba(0,0,0,.6);
  --shadow-card-hover:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -8px rgba(0,0,0,.7);
  --azur:#6aa9ff; --pin:#46c891; --corail:#ef6a4d; --ambre:#f0b13c; --brume:#7d8799;
  --good:#34d399; --good-soft:rgba(52,211,153,.14);
  --good-plein:#34d399; --on-good:#052e1f;
  --bad:#fb7185; --neg:#fb7185; --warn:#fbbf24; --warn-soft:rgba(251,191,36,.15);
  --bad-soft:rgba(251,113,133,.15);
  --meter-track:var(--grid);
  /* le vert d'action, en sombre : lumineux pour les traits (onglet, focus, barres), foncé sous du texte blanc (--btn) */
  --accent:#3cc493; --accent-ink:#ffffff; --accent-soft:rgba(60,196,147,.14); --accent-border:#2fa57a;
  --ring:rgba(60,196,147,.32); --btn-ink:#ffffff;
  --btn-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.35);
  --btn-shadow-hover:inset 0 1px 0 rgba(255,255,255,.12), 0 1px 3px rgba(0,0,0,.45);
  --gold:#d4b46e; --gold-2:#c9a227; --gold-3:#e2c377; --gold-ink:#d9bb76; --gold-soft:rgba(200,168,102,.14);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238b8c94' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  --side:#070d17; --side-ink:#ffffff; --side-muted:#c2cbd8; --side-line:rgba(255,255,255,.07); --side-hover:rgba(255,255,255,.06); --side-on:rgba(255,255,255,.09);
  --s1:#c9d5e8; --s2:#46c891; --s3:#f0b13c; --s4:#6aa9ff; --s5:#c39bf2; --s6:#ef6a4d; --s7:#2bb3a6; --s8:#f28c4f;
  --chart-hero:#46c891;
  --shadow-ctl:0 1px 1px rgba(0,0,0,.25);
  --shadow:none; --shadow-hover:none;
  --shadow-pop:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.5);
  --shadow-lg:0 4px 12px rgba(0,0,0,.4), 0 28px 64px rgba(0,0,0,.6);
}
/* ---------- V92 — JETONS v2 (design system : les valeurs vivent ici, les règles s'écrivent avec) ---------- */
:root{
  /* Typographie : les 7 crans V58 (11 · 12 · 13 · 14 · 16 · 20 · 24) + 2 crans d'affichage */
  --fs-28:28px; --fs-32:32px;
  --lh-titre:1.25; --lh-texte:1.5;
  /* Espacement : 4 · 8 · 12 · 16 · 24 · 32 (V58) + le pas des cartes */
  --sp-carte:20px;
  /* Rayons : --r-xs est nouveau ; 8 · 12 · 14 · 16 · 999 inchangés */
  --r-xs:4px; --r-nul:0;
  /* Hauteurs de contrôles */
  --h-sm:32px; --h-md:36px; --h-lg:40px; --h-touch:44px; --h-seg-touch:40px;
  /* Texte secondaire : 4,43:1 → 5,29:1 sur le canvas, 5,06:1 sur --surface-2 */
  --muted:#5f6674;
  /* V94.0 — SOCLE DU DESIGN (direction A « Affinée ») : --faint servait de couleur de texte à 2,6:1 → 5,29:1
     (4,85:1 sur le canvas, 4,63:1 sur --surface-2) ; crans 15 · 18 · 22 · 26 · 30 pour les chiffres ;
     cartes à 16 px (était 14). */
  --faint:#646c7b;
  --fs-15:15px; --fs-18:18px; --fs-22:22px; --fs-26:26px; --fs-30:30px;
  --r-card:16px;
  /* Sémantique — TEXTE : AA (≥ 4,5:1) sur la surface ET sur le fond doux
     (V94.0 : l'alerte fonce, #b45309 → #9a5406 : 4,40:1 → 5,05:1 sur --surface-2, 4,80:1 sur son fond doux) */
  --texte-ok:#047857; --texte-alerte:#9a5406; --texte-danger:#be123c; --texte-info:#1d4ed8; --texte-accent:#0d6e4b;
  /* Sémantique — POINT / TRAIT : ≥ 3:1 sur la surface (WCAG 1.4.11) */
  --point-ok:#0f9f6e; --point-alerte:#d97706; --point-danger:#e11d48; --point-info:#3b82f6; --point-neutre:#768197; --point-accent:#0f7b53;
  --fond-ok:var(--good-soft); --fond-alerte:var(--warn-soft); --fond-danger:var(--bad-soft); --fond-info:rgba(59,130,246,.12);
  /* Action : le survol fonce (blanc dessus 7,0:1) */
  --accent-hover:#0b6646;
  /* Graphiques : une série = --serie-1 ; des catégories = cet ordre, jamais recyclé.
     Lot J — les huit teintes de la marque, posées sur les cases dont la console connaît déjà le NOM (COULEUR_SLOT :
     2 « Orange », 3 « Vert », 4 « Ambre », 5 « Rose », 6 « Vert sombre », 7 « Bleu ») : nuit · corail · vert · or ·
     violet rosé · teal · bleu · gris. Calculé (CIEDE2000, daltonisme rouge-vert simulé) : deux cases voisines ≥ 10,9
     en clair et ≥ 7,8 en sombre ; la nuit et le corail tiennent 11:1 et 4,3:1 sur blanc. */
  --serie-1:#203a62; --serie-2:#d9452c; --serie-3:#178a55; --serie-4:#c49a3c;
  --serie-5:#d17be6; --serie-6:#0b7d75; --serie-7:#3b7deb; --serie-8:#9aa3b1;
  --serie-autres:#cdd2da; --serie-comparaison:#9aa1ad;
  /* Squelette : visible sans crier (le gris V68 disparaissait sur blanc) */
  --squelette:#e9ecf1; --squelette-reflet:#f5f6f9;
  /* Couches (celles de V68 restent : --z-collant 5, --z-flottant 20, --z-volet 120, --z-feuille 160…) */
  --z-barre-haut:30; --z-deroulant:70; --z-palette:140; --z-modale:150; --z-popover:170; --z-infobulle:200; --z-toast:400;
  /* Ombres : quatre niveaux, pas un de plus */
  --ombre-1:var(--shadow-card); --ombre-2:var(--shadow-card-hover); --ombre-3:var(--shadow-pop); --ombre-4:var(--shadow-lg);
}
html[data-theme="dark"]{
  /* V94.0 — en sombre, --faint (texte) passait à 3,06:1 sur la surface → 5,73:1 ; --muted 6,57:1 */
  --muted:#959eae; --faint:#8a93a3;
  --texte-ok:#34d399; --texte-alerte:#fbbf24; --texte-danger:#fb7185; --texte-info:#60a5fa; --texte-accent:#4fd1a1;
  --point-ok:#34d399; --point-alerte:#fbbf24; --point-danger:#fb7185; --point-info:#60a5fa; --point-neutre:#8b96a8; --point-accent:#3cc493;
  --fond-info:rgba(96,165,250,.15);
  /* Le bouton plein : blanc à 4,6:1 sur le vert foncé ; le survol FONCE aussi (5,8:1) */
  --btn:#11855c; --btn-border:#11855c; --accent-hover:#0e744f;
  --serie-1:#c9d5e8; --serie-2:#ef5b3a; --serie-3:#46c891; --serie-4:#e9cd85;
  --serie-5:#d08cf2; --serie-6:#1d9e92; --serie-7:#6aa9ff; --serie-8:#6b758b;
  --serie-autres:#3a4559; --serie-comparaison:#66738a;
  --squelette:#1a2636; --squelette-reflet:#223146;
}
/* ---------- Lot J — NUIT & OR : la marque, la barre latérale, les statuts, les canaux, les familles de chiffres ----------
   Chaque paire « fond / texte » est calculée (test/lot-j-nuit-or, test/v94-0-socle-design) : le texte tient 4,5:1 sur son
   fond dans les deux thèmes, et celui d'un statut aussi sur la surface. Les fonds sont opaques : une pastille se lit pareil
   sur une carte, une ligne survolée ou le canvas. */
:root{
  /* la marque */
  --nuit:#0e1b2c; --or:#c8a866; --or-clair:#e3cb94;
  /* la barre latérale (nuit dans les deux thèmes) : textes sur #0E1B2C — 10,6:1 (entrées), 6,7:1 (titres de groupe) */
  --side-faint:#93a2b6; --side-icone:#8798b0; --side-pastille:rgba(255,255,255,.10); --side-pastille-texte:#dfe6ef;
  --side-alerte:#d92d3a; --side-or-doux:rgba(200,168,102,.18);
  /* le filet or sous le titre de l'écran */
  --filet-titre:var(--or);
  /* statuts d'une course : fond doux, texte foncé (AA), point vif (≥ 3:1 sur la surface) */
  --st-aassigner-fond:#fde8eb; --st-aassigner-texte:#b0142f; --st-aassigner-point:#e5243f;
  --st-confirmee-fond:#e4eefc; --st-confirmee-texte:#1a54bf; --st-confirmee-point:#2f7cf6;
  --st-assignee-fond:#e6ebf3; --st-assignee-texte:#26416b; --st-assignee-point:#4a6b9c;
  --st-en-route-fond:#fdefd6; --st-en-route-texte:#8a4a00; --st-en-route-point:#c27400;
  --st-sur-place-fond:#ffe9de; --st-sur-place-texte:#a13b0a; --st-sur-place-point:#e0560f;
  --st-a-bord-fond:#dcf2ef; --st-a-bord-texte:#0b675f; --st-a-bord-point:#0f9488;
  --st-terminee-fond:#e2f3ea; --st-terminee-texte:#0a6843; --st-terminee-point:#16915c;
  --st-annulee-fond:#eceef2; --st-annulee-texte:#576173; --st-annulee-point:#8792a3;
  --st-attente-fond:#fbf3d6; --st-attente-texte:#735806; --st-attente-point:#b58b0a;
  --st-incident-fond:#f5e3e2; --st-incident-texte:#8a1f1c; --st-incident-point:#b3261e;
  /* canaux : Trip.com bleu, Mozio violet, direct / WhatsApp vert WhatsApp foncé, novaliafleet.com vert Novalia,
     novaliavtcfrance.com or, console gris, Black nuit et or, B2B corail */
  --canal-trip-fond:#e5eefd; --canal-trip-texte:#1b54bd;
  --canal-mozio-fond:#f0e9fc; --canal-mozio-texte:#6330b6;
  --canal-direct-fond:#ddf2ec; --canal-direct-texte:#0b5e52;
  --canal-site-fond:#e3f2eb; --canal-site-texte:#0d6e4b;
  --canal-vtc-fond:#f6efdf; --canal-vtc-texte:#765a14;
  --canal-console-fond:#eceef2; --canal-console-texte:#576173;
  --canal-black-fond:#0e1b2c; --canal-black-texte:#dcc187;
  --canal-b2b-fond:#fde9e4; --canal-b2b-texte:#a3361f;
  /* familles des chiffres clés (pastille d'icône) : argent vert, à venir et chauffeur or, courses bleu, alertes ambre */
  --kic-argent-fond:#e2f3ea; --kic-argent:#0f7b53;
  --kic-or-fond:#f6efdf; --kic-or:#9c7b36;
  --kic-courses-fond:#e4eefc; --kic-courses:#2563d9;
  --kic-alerte-fond:#fdefd6; --kic-alerte:#b56a00;
  --kic-neutre-fond:#e8ecf2; --kic-neutre:#3d5f91;
}
html[data-theme="dark"]{
  --side-alerte:#d92d3a;
  --st-aassigner-fond:#3b1721; --st-aassigner-texte:#ff9cab; --st-aassigner-point:#ff5c74;
  --st-confirmee-fond:#162a4b; --st-confirmee-texte:#9fc4ff; --st-confirmee-point:#5c9dff;
  --st-assignee-fond:#1d2b41; --st-assignee-texte:#b6c8e4; --st-assignee-point:#7f9bc8;
  --st-en-route-fond:#3a2a0f; --st-en-route-texte:#f6c96d; --st-en-route-point:#f0a92e;
  --st-sur-place-fond:#3e2415; --st-sur-place-texte:#ffb18c; --st-sur-place-point:#ff8a4c;
  --st-a-bord-fond:#0f3533; --st-a-bord-texte:#80e0d3; --st-a-bord-point:#2cc4b1;
  --st-terminee-fond:#12321f; --st-terminee-texte:#86dfad; --st-terminee-point:#34c37e;
  --st-annulee-fond:#222b39; --st-annulee-texte:#a7b1c0; --st-annulee-point:#6f7a8c;
  --st-attente-fond:#342d10; --st-attente-texte:#ecd487; --st-attente-point:#d9b33a;
  --st-incident-fond:#3a1817; --st-incident-texte:#f3a9a3; --st-incident-point:#d9534a;
  --canal-trip-fond:#162a4b; --canal-trip-texte:#9fc4ff;
  --canal-mozio-fond:#2b1e47; --canal-mozio-texte:#cab3ff;
  --canal-direct-fond:#0f3330; --canal-direct-texte:#80d9c7;
  --canal-site-fond:#10311f; --canal-site-texte:#72d9ab;
  --canal-vtc-fond:#33290f; --canal-vtc-texte:#e3c98a;
  --canal-console-fond:#222b39; --canal-console-texte:#a7b1c0;
  --canal-black-fond:#05090f; --canal-black-texte:#dcc187;
  --canal-b2b-fond:#3b1d16; --canal-b2b-texte:#ffab94;
  --kic-argent-fond:#12321f; --kic-argent:#4fd1a1;
  --kic-or-fond:#33290f; --kic-or:#d9bb76;
  --kic-courses-fond:#162a4b; --kic-courses:#79adff;
  --kic-alerte-fond:#3a2a0f; --kic-alerte:#f0b13c;
  --kic-neutre-fond:#1d2b41; --kic-neutre:#9fb3d3;
}
/* ---------- DS v2 « ITINÉRAIRE » — LES JETONS (lot F, étape F1, 06/10/2026) ----------
   La direction : DIRECTION.md du lot R, § 4.2. Ces jetons s'AJOUTENT à ceux de la console : un nom qui existe garde sa
   valeur (les écrans pas encore migrés ne bougent pas d'un pixel), sauf l'encre, qui devient la nuit de la marque
   (--ink #0E1B2C : 17,3:1 sur blanc ; --ink-2 #3A4557). Les composants ds-* (fin de feuille) ne lisent que ces jetons.
   · DEUX SURFACES TEINTÉES, NOMMÉES À L'ENVERS : dans la console, --surface-2 est la teinte FORTE (#EEF0F4) et --surface-3
     la DOUCE (#F7F8FA) — l'inverse du prototype. Pour ne pas se tromper, la v2 parle de --surface-douce (survol, en-têtes
     de groupe) et de --surface-piste (pistes de segments, étiquettes, touches).
   · --ring reste une COULEUR (la console l'écrit « box-shadow:0 0 0 3px var(--ring) ») ; --ease reste la courbe de la
     console (proche de la v2) ; --faint et --muted gardent leurs valeurs AA (V94.0) : la v2 n'écrit jamais de texte en --faint.
   · Couches : le panneau des fiches prend la place du tiroir et du volet (120), sous les fenêtres (150), la feuille (160)
     et les menus (170).
   · @layer (DIRECTION § 7.1) : NON. Les composants v2 sont tous préfixés ds- (aucune collision avec .btn, .seg, .card…) et
     la coque se règle par identifiants, dans la dernière section : la spécificité suffit. Envelopper 8 000 lignes dans
     @layer aurait (1) fait perdre TOUTE la feuille à un navigateur qui ne connaît pas @layer (iOS < 15.4 : console nue),
     (2) inversé les !important (un !important d'une couche basse bat tout), (3) mis chaque section « ====== » dans un
     bloc ouvert (test/css-accolades), (4) aveuglé l'audit du CSS mort. test/ds-jetons le vérifie. */
:root{
  /* l'encre est la nuit */
  --ink:#0e1b2c; --ink-2:#3a4557;
  /* la marque : nuits plus claires (survol de la barre), l'or qui écrit et son fond doux */
  --nuit-2:#16263b; --nuit-3:#1f3249; --or-ink:#765a14; --or-doux:#f6efdf;
  /* neutres v2 */
  --surface-douce:#f7f8fa; --surface-piste:#eef0f4; --border-doux:#eef0f3;
  /* sémantique : des fonds doux OPAQUES (le texte --texte-… y tient 4,5:1) */
  --ok-doux:#e2f3ea; --alerte-doux:#fdefd6; --danger-doux:#fde8eb; --info-doux:#e4eefc;
  /* canaux : le point (barres de répartition, rangs) — 3:1 au moins sur la surface */
  --canal-trip-point:#3b7deb; --canal-mozio-point:#a46cd8; --canal-direct-point:#1a8f7a; --canal-site-point:#178a55;
  --canal-vtc-point:#9c7b36; --canal-console-point:#8792a3; --canal-black-point:#0e1b2c; --canal-b2b-point:#d9452c;
  /* graphiques : le trait (le vert), son aire, la grille */
  --chart-trait:#0f7b53; --chart-aire:rgba(15,123,83,.16); --chart-grille:#edf0f4;
  /* typographie : huit crans 12 · 13 · 14 · 16 · 20 · 24 · 32 · 44 (les autres restent aux écrans d'avant), l'approche des grands */
  --fs-44:44px; --lh-serre:1.2;
  --approche-44:-.03em; --approche-32:-.02em; --approche-24:-.015em; --approche-iata:.06em;
  /* espacements : la grille de 4 complète */
  --sp-05:2px; --sp-15:6px; --sp-7:40px; --sp-8:48px; --sp-9:64px;
  /* rayons : étiquettes et feuilles (--r-xs 4, --r-sm 8, --r-md 12, --r-card 16, --r-pilule existent) */
  --r-tag:6px; --r-feuille:20px;
  /* élévations : cartes, menus et aperçus, panneau ancré, palette / toasts / feuilles */
  --el-1:0 1px 2px rgba(14,27,44,.05), 0 6px 18px -8px rgba(14,27,44,.12);
  --el-1-survol:0 1px 2px rgba(14,27,44,.06), 0 10px 26px -10px rgba(14,27,44,.18);
  --el-2:0 2px 6px rgba(14,27,44,.06), 0 14px 36px -10px rgba(14,27,44,.22);
  --el-3:-1px 0 0 var(--border), -24px 0 48px -32px rgba(14,27,44,.28);
  --el-4:0 28px 72px -16px rgba(14,27,44,.42), 0 2px 8px rgba(14,27,44,.08);
  --voile:rgba(14,27,44,.38);
  /* mouvement : quatre durées, deux courbes de plus (sortie, ressort) */
  --t-1:120ms; --t-2:180ms; --t-3:240ms; --t-4:320ms;
  --ease-sortie:cubic-bezier(.4,0,1,1); --ease-ressort:cubic-bezier(.32,.72,0,1);
  /* densité : la ligne d'un tableau (« confort » ; « compacte » plus bas) */
  --ligne-h:48px; --ligne-pad:var(--sp-3);
  /* la coque : barre latérale, rail replié, panneau des fiches */
  --side-l:240px; --rail-l:64px; --panneau-l:520px;
  /* le toast est nuit dans les deux thèmes : ses icônes y sont claires */
  --toast-ok:#7ee0b4; --toast-erreur:#ff8a9a;
  /* couches v2 (s'insèrent dans celles de la console) */
  --z-dessus:1; --z-dessus-2:2; --z-panneau-fond:110; --z-panneau:120; --z-menu:170;
}
html[data-theme="dark"]{
  --or-ink:#d9bb76; --or-doux:#33290f;
  --surface-douce:#16212f; --surface-piste:#1c2838; --border-doux:#1a2534;
  --ok-doux:#12321f; --alerte-doux:#3a2a0f; --danger-doux:#3b1721; --info-doux:#162a4b;
  --canal-trip-point:#6aa9ff; --canal-mozio-point:#c39bf2; --canal-direct-point:#4cc2ad; --canal-site-point:#46c891;
  --canal-vtc-point:#d9bb76; --canal-console-point:#7d8799; --canal-black-point:#dcc187; --canal-b2b-point:#ef6a4d;
  --chart-trait:#46c891; --chart-aire:rgba(70,200,145,.16); --chart-grille:#1a2534;
  /* en sombre, une élévation est un anneau clair d'un pixel et une ombre noire (pas de halo gris) */
  --el-1:0 0 0 1px rgba(255,255,255,.05), 0 8px 24px -12px rgba(0,0,0,.7);
  --el-1-survol:0 0 0 1px rgba(255,255,255,.08), 0 12px 30px -12px rgba(0,0,0,.8);
  --el-2:0 0 0 1px rgba(255,255,255,.07), 0 16px 40px -10px rgba(0,0,0,.75);
  --el-3:-1px 0 0 var(--border), -24px 0 48px -28px rgba(0,0,0,.8);
  --el-4:0 0 0 1px rgba(255,255,255,.08), 0 32px 80px -16px rgba(0,0,0,.85);
  --voile:rgba(3,7,13,.62);
}
html[data-density="compact"]{ --ligne-h:40px; --ligne-pad:var(--sp-2) }
/* ---------- V99.2 — LA MARQUE NOVALIAFLEET ET LES TEINTES DES ÉCRANS (youcef 06/10 : « met mon logo novaliafleet »,
   « ajoute de la couleur ») ----------
   --marque : le vert du logo (la route du N, le point du ı, « FLEET ») ; --marque-encre : la tuile du logo.
   Les teintes : une par entrée du menu (js/noyau/coque.js, TEINTES_ECRANS). « -vif » : sur la barre nuit (les deux thèmes) ;
   sans suffixe : sur la page (assez foncées sur clair pour un trait ≥ 3:1, vives sur sombre). */
:root{
  --marque:#12b76a; --marque-encre:#101613;
  --t-vert-vif:#34d399; --t-rose-vif:#fb7185; --t-bleu-vif:#60a5fa; --t-violet-vif:#a78bfa; --t-ambre-vif:#fbbf24; --t-orange-vif:#fb923c;
  --t-sarcelle-vif:#2dd4bf; --t-indigo-vif:#818cf8; --t-ciel-vif:#38bdf8; --t-fuchsia-vif:#e879f9; --t-cyan-vif:#22d3ee; --t-lime-vif:#a3e635;
  --t-or-vif:#e3cb94; --t-prune-vif:#c084fc; --t-jaune-vif:#facc15; --t-ardoise-vif:#a3b1c6;
  --t-vert:#0f8a5f; --t-rose:#d6336c; --t-bleu:#2563eb; --t-violet:#7c3aed; --t-ambre:#c2710c; --t-orange:#e0561a;
  --t-sarcelle:#0d9488; --t-indigo:#4338ca; --t-ciel:#0284c7; --t-fuchsia:#c026d3; --t-cyan:#0891b2; --t-lime:#5a8f0e;
  --t-or:#a8842f; --t-prune:#9333ea; --t-jaune:#a16207; --t-ardoise:#64748b;
}
html[data-theme="dark"]{
  --t-vert:#34d399; --t-rose:#fb7185; --t-bleu:#60a5fa; --t-violet:#a78bfa; --t-ambre:#fbbf24; --t-orange:#fb923c;
  --t-sarcelle:#2dd4bf; --t-indigo:#818cf8; --t-ciel:#38bdf8; --t-fuchsia:#e879f9; --t-cyan:#22d3ee; --t-lime:#a3e635;
  --t-or:#e3cb94; --t-prune:#c084fc; --t-jaune:#facc15; --t-ardoise:#a3b1c6;
}
/* ---------- PEAU « ATELIER » (V3.21, 20/10/2026) — LES JETONS : en tête de feuille, après tous les autres (le dernier déclaré
   gagne) ; les règles de la peau sont en fin de feuille, section « LOT 20-10 P — PEAU « ATELIER » », écrites en jetons seulement. ---------- */
:root{
  --font-sans:'IBM Plex Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-num:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-code:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* neutres : un blanc cassé pour le fond, des gris sans teinte */
  --page:#f4f4f2; --surface:#ffffff; --elevated:#ffffff; --surface-2:#ececea; --surface-3:#f8f8f7;
  --surface-douce:#f8f8f7; --surface-piste:#ececea; --border-doux:#eeeeeb;
  --grid:#e8e8e5; --baseline:#cdcdc8; --border:#e0e0dc; --border-strong:#cbcbc6; --chart-grille:#ececea;
  --ink:#121417; --ink-2:#3b3f45; --muted:#5c6067; --faint:#646870;
  --squelette:#ececea; --squelette-reflet:#f6f6f5;
  /* agir : le vert de la marque, plein et rectangulaire */
  --btn:#0b7a52; --btn-border:#0b7a52; --btn-ink:#ffffff; --accent-hover:#096443;
  --accent:#0b7a52; --accent-ink:#ffffff; --accent-soft:rgba(11,122,82,.09); --accent-border:#096443; --ring:rgba(11,122,82,.25);
  --texte-accent:#0a6a48; --point-accent:#0b7a52;
  --chart-hero:#0b7a52; --chart-trait:#0b7a52; --chart-aire:rgba(11,122,82,.14);
  /* une mesure seule (CA, barres, chaleur) : le gris foncé de l'encre, plus le bleu marine de l'ancienne peau ; les gris de
     catégorie suivent les neutres */
  --serie-1:#3b3f45; --serie-autres:#cdcdc8; --serie-comparaison:#646870; --serie-8:#8e9197;
  /* formes : des angles nets */
  /* « pilule » aussi : plus aucune forme molle (les puces, compteurs, filtres, jauges deviennent nets) ; --r-capsule garde la
     forme d'un interrupteur, la seule pièce qui doit rester ronde */
  --r-xs:2px; --r-sm:4px; --r-md:4px; --r-lg:6px; --r-card:4px; --r-tag:3px; --r-feuille:12px; --r-pilule:4px; --r-capsule:999px;
  /* élévations : un filet ; une ombre seulement pour ce qui flotte au-dessus de la page */
  --shadow-card:0 0 0 1px var(--border); --shadow-card-hover:0 0 0 1px var(--border-strong); --shadow-ctl:none;
  --shadow-pop:0 0 0 1px var(--border-strong), 0 10px 28px -10px rgba(18,20,23,.22);
  --shadow-lg:0 0 0 1px var(--border-strong), 0 28px 64px -18px rgba(18,20,23,.36);
  --btn-shadow:none; --btn-shadow-hover:none;
  --el-1:0 0 0 1px var(--border); --el-1-survol:0 0 0 1px var(--border-strong); --el-2:var(--shadow-pop);
  --el-3:-1px 0 0 var(--border); --el-4:var(--shadow-lg); --voile:rgba(18,20,23,.36);
  /* la barre latérale blanche */
  --side:#ffffff; --side-ink:#121417; --side-muted:#3b3f45; --side-faint:#646870; --side-icone:#5c6067;
  --side-line:#e0e0dc; --side-hover:#f4f4f2; --side-on:#ececea;
  --side-pastille:#ececea; --side-pastille-texte:#3b3f45; --side-alerte:#d92d3a;
  accent-color:var(--accent);
}
html[data-theme="dark"]{
  /* graphite : aucun bleu dans les gris */
  --page:#0f1012; --surface:#16171a; --elevated:#1b1c20; --surface-2:#212328; --surface-3:#191a1e;
  --surface-douce:#191a1e; --surface-piste:#26282d; --border-doux:#1f2024;
  --grid:rgba(255,255,255,.06); --baseline:#34363c; --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.15); --chart-grille:#1f2024;
  --ink:#edeef0; --ink-2:#b9bcc2; --muted:#9a9ea6; --faint:#8b8f97;
  --squelette:rgba(255,255,255,.06); --squelette-reflet:rgba(255,255,255,.11);
  --btn:#11855c; --btn-border:#11855c; --btn-ink:#ffffff; --accent-hover:#0e744f;
  --accent:#3cc493; --accent-ink:#06140e; --accent-soft:rgba(60,196,147,.13); --accent-border:#2fa57a; --ring:rgba(60,196,147,.3);
  --texte-accent:#4fd1a1; --point-accent:#3cc493;
  --shadow-card:0 0 0 1px var(--border); --shadow-card-hover:0 0 0 1px var(--border-strong); --shadow-ctl:none;
  --shadow-pop:0 0 0 1px var(--border-strong), 0 14px 36px -10px rgba(0,0,0,.7);
  --shadow-lg:0 0 0 1px var(--border-strong), 0 32px 72px -18px rgba(0,0,0,.85);
  --btn-shadow:none; --btn-shadow-hover:none;
  --el-1:0 0 0 1px var(--border); --el-1-survol:0 0 0 1px var(--border-strong); --el-2:var(--shadow-pop);
  --el-3:-1px 0 0 var(--border); --el-4:var(--shadow-lg); --voile:rgba(0,0,0,.6);
  --side:#16171a; --side-ink:#edeef0; --side-muted:#b9bcc2; --side-faint:#8b8f97; --side-icone:#9a9ea6;
  --side-line:rgba(255,255,255,.07); --side-hover:rgba(255,255,255,.04); --side-on:#26282d;
  --side-pastille:rgba(255,255,255,.08); --side-pastille-texte:#dadce0;
  /* « Black » et « Toi » (nuit et or) : la nuit se relève d'un cran pour ne pas disparaître dans le graphite */
  --canal-black-fond:#1d2532;
  --serie-1:#b9bcc2; --serie-autres:#34363c; --serie-comparaison:#8b8f97; --serie-8:#6c7078;
  /* les fonds doux bleu marine de l'ancien sombre : un gris à peine teinté */
  --info-doux:#1d2530; --st-confirmee-fond:#1d2530; --canal-trip-fond:#1d2530; --kic-courses-fond:#1d2530;
  --st-assignee-fond:#26282d; --st-annulee-fond:#26282d; --canal-console-fond:#26282d; --kic-neutre-fond:#212328;
}
/* les capsules NUIT (prochaine course, barres de sélection et de sauvegarde, barre du haut de l'accueil, toasts, chargement) gardent
   leur palette : la barre latérale est devenue blanche, ses jetons --side-… sont reposés ici pour elles */
:is(.ov2-cap,.capsule-b,#selBar,.cl-selbar,.ovp-barre,.rg-sauve,.ds-toast,#bootLoad){
  --side:#0e1b2c; --side-ink:#ffffff; --side-muted:#c2cbd8; --side-faint:#93a2b6; --side-icone:#8798b0;
  --side-line:rgba(255,255,255,.08); --side-hover:rgba(255,255,255,.06); --side-on:rgba(255,255,255,.09);
  --side-pastille:rgba(255,255,255,.10); --side-pastille-texte:#dfe6ef}
#login{--side:#0e1b2c; --side-ink:#ffffff; --side-muted:#c2cbd8; --side-faint:#93a2b6; --side-line:rgba(255,255,255,.08)}
*{box-sizing:border-box; margin:0; padding:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* overflow-x:CLIP (et non hidden) : hidden casserait position:sticky (sidebar + topbar). */
html{overflow-x:clip}
body{font-family:var(--font-sans); background:var(--page); color:var(--ink);
  display:flex; min-height:100vh; font-size:var(--fs-13); line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; max-width:100vw; overflow-x:clip;
  font-optical-sizing:auto; text-rendering:optimizeLegibility}   /* sans effet sur IBM Plex (aucun axe de taille optique) ; les jeux cv11/ss01 étaient ceux d'Inter */
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
input,select,textarea{font:inherit; color:inherit}
a{color:var(--texte-accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:2px}
h2{font-size:var(--fs-22); font-weight:600; letter-spacing:-.025em; line-height:1.2}
h3{font-size:var(--fs-14); font-weight:600; color:var(--ink); letter-spacing:-.01em}
b,strong{font-weight:600}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s!important; animation-iteration-count:1!important; transition:none!important}
}
/* V2.0 (vitesse) — AU REPOS, LA PAGE NE TRAVAILLE PLUS. Avant, le mouvement réduit posait `transition-duration:.001s` sur tout
   élément : la propriété restait `all`, donc chaque élément « transitionnait » chaque changement, et `scrollbar-color`
   (color-mix, ci-dessous) relançait sans fin sa transition d'une milliseconde. Mesuré au banc, console immobile sur
   Réservations : 73 calculs de style en 5 s, 81 000 éléments, 1,9 s de calcul (40 % du processeur). `transition:none` coupe
   les transitions pour de bon (aucun code n'attend `transitionend`), et une animation sans fin s'arrête après une passe. */
.mono{font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}

/* ---------------- SIDEBAR (Linear) ---------------- */
#sidebar{display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto; overscroll-behavior:contain; z-index:40}
#sidebar .brand{display:flex}
#sidebar .brand .build{margin-left:auto}
#sidebar .brand .mark{flex:none; display:grid; place-items:center; letter-spacing:0; font-family:var(--font-sans)}
/* rangée d'actions : nouvelle réservation (secondaire compact) + recherche ⌘K */
#sidebar .side-actions{display:flex}
#sidebar .side-actions>.btn{flex:1; min-width:0; margin:0; justify-content:flex-start; white-space:nowrap; font-size:var(--fs-12); font-weight:500; padding:0 10px; min-height:40px; overflow:hidden; text-overflow:ellipsis}
#sidebar .side-actions>.btn:hover{filter:none}
#sidebar .side-actions>.btn svg{flex:none}
#sidebar>.btn{margin:0 0 10px; justify-content:flex-start; white-space:nowrap; font-size:var(--fs-12); font-weight:500;
  background:var(--surface); color:var(--ink); border:1px solid var(--border-strong); box-shadow:var(--shadow-ctl); padding:5px 10px}
#sidebar>.btn:hover{background:var(--surface); border-color:color-mix(in srgb,var(--border-strong) 55%,var(--muted)); filter:none; box-shadow:var(--shadow-ctl)}
#sidebar>.btn svg{color:var(--muted)}
#sidebar .search#searchBox{min-width:0; cursor:pointer}
#sidebar .search#searchBox input,#sidebar .search#searchBox .kbd{display:none}
#sidebar .search#searchBox svg{width:15px; height:15px}
#sidebar nav{display:flex; flex-direction:column}
#sidebar nav button{position:relative; display:flex; align-items:center; width:100%; text-align:left; border-radius:var(--r-sm); font-weight:500; line-height:18px}
#sidebar nav button .ic{justify-content:center; transition:color .12s}
#sidebar nav button .ic svg{display:block}
#sidebar nav button .badge-n{margin-left:auto; font-variant-numeric:tabular-nums}
#sidebar .navgrp{font-size:var(--fs-11); letter-spacing:.01em; text-transform:none; font-weight:500; opacity:1}
#sidebar .foot{margin-top:auto; display:flex; flex-direction:column; border-top:1px solid var(--side-line)}
#sidebar .foot button{display:flex; gap:9px; align-items:center; padding:5px 8px; border-radius:var(--r-sm); font-size:var(--fs-12); font-weight:500}
#sidebar .foot button .ic{width:16px; display:flex; justify-content:center}
#sidebar .foot button .ic svg{width:15px;height:15px}
#sidebar .foot .me-blk button{width:28px; height:28px; padding:0; justify-content:center; gap:0; flex:none}
#sidebar .foot .me-blk button span:not(.ic){display:none}

/* ---------------- LAYOUT / TOPBAR ---------------- */
main{flex:1; min-width:0; padding:0 var(--gutter) 64px}
#topbar{display:flex; align-items:center; gap:8px; min-height:52px; padding:calc(0px + env(safe-area-inset-top,0px)) var(--gutter) 0; margin:0 calc(-1 * var(--gutter)) 20px; position:sticky; top:0;
  background:color-mix(in srgb,var(--page) 92%,transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  z-index:30; flex-wrap:nowrap; border-bottom:0}
#topbar .titlebox{margin-right:auto; display:flex; align-items:baseline; gap:10px; flex-wrap:nowrap; min-width:0; overflow:hidden}
#topbar h2{flex:0 1 auto; min-width:0; white-space:nowrap}
#topbar>*{flex:none}
#topbar .titlebox{flex:1 1 auto}
#healthDot .hd{width:8px;height:8px;border-radius:var(--r-rond);display:block;background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 14%,transparent);transition:background .3s var(--ease)}
#healthDot.warn .hd{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 16%,transparent)}
#healthDot.bad .hd{background:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 16%,transparent)}
#healthPop{position:fixed;z-index:96;width:min(350px,calc(100vw - 28px));padding:12px 14px;box-shadow:var(--shadow-pop);background:var(--elevated)}
#healthPop .hrow{display:flex;align-items:flex-start;gap:9px;padding:5px 0;font-size:var(--fs-12);line-height:1.45}
#healthPop .hrow .pt{width:7px;height:7px;border-radius:var(--r-rond);flex:none;margin-top:5px}
#topbar h2{position:relative}
#topbar h2::after{display:none}
/* la date n'est plus collée au titre : elle vit dans le sélecteur de période de chaque écran */
#topbar .datelbl{display:none}
.tbtn{display:flex; align-items:center; gap:7px; border:1px solid var(--border-strong); color:var(--ink-2)}
.tbtn:hover{color:var(--ink)}
.tbtn svg{width:15px; height:15px}
.tbtn.icon{justify-content:center; position:relative; color:var(--muted)}
.tbtn.icon:hover{color:var(--ink)}
#topbar .tbtn.icon{border-color:transparent; box-shadow:none; background:transparent}
#topbar .tbtn.icon:hover{background:var(--surface-2)}
.tbtn .ndot,.ndot{position:absolute; top:-3px; right:-3px; min-width:14px; height:14px; padding:0 3px; border-radius:7px;
  background:var(--bad); color:#fff; font-size:9px; font-weight:600; display:grid; place-items:center; border:1.5px solid var(--page); box-sizing:content-box; line-height:1}

/* ===== V51.0 — international ===== */
.badge.tz{margin-left:6px;font-family:var(--font-code);font-size:var(--fs-11)}
.mdgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.mdpays{text-align:left;display:flex;flex-direction:column;gap:2px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface);cursor:pointer;font:inherit;color:var(--ink)}
.mdpays:hover{border-color:var(--accent);background:var(--accent-soft)}
.mdpays .muted{font-size:var(--fs-11)}
.mdaero{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px;max-height:50vh;overflow:auto;padding:2px}
.mdae{display:flex;gap:6px;align-items:center;font-size:var(--fs-13);padding:6px 8px;border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer}
.mdae.deja{opacity:.65}
/* ===== V50.0 — voir comme, filtres personnalisés ===== */
#voirBar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:12px;align-items:center;padding:10px 14px;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100vw - 24px);flex-wrap:wrap}
#voirBar .muted{color:rgba(255,255,255,.7)}
#voirBar .btn{background:#fff;color:var(--ink);border-color:transparent}
/* ===== V49.0 — réglages en sous-onglets ===== */
/* ============ V61.5 — RÉGLAGES › DISPATCH ============
   La chaîne en trois étapes, puis l'échelle des prix. Tout est en tokens et se replie
   sur une colonne au téléphone : rien ici n'a de largeur fixe. */

/* --- la chaîne --- */

/* --- les groupes numérotés d'un réglage --- */

/* --- l'échelle des prix --- */

/* V61.7 — MENUS DÉROULANTS À CASES. Quatre listes de cinq lignes prenaient tout l'écran
   pour un réglage qu'on touche une fois par an : elles se replient, et le résumé dit ce qui
   est coché sans qu'on ait à ouvrir. Un <details> natif : rien à ouvrir en JS, rien à fermer. */
.dspmenus{display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-3)}
.dspmenu{flex:1 1 230px; min-width:0; position:relative}
.dspmenu>summary{list-style:none; cursor:pointer; display:flex; flex-direction:column; gap:2px;
  padding:7px 30px 7px 12px; min-height:44px; justify-content:center;
  border:1px solid var(--border-strong); border-radius:10px; background:var(--surface);
  background-image:var(--chev); background-repeat:no-repeat; background-position:right 10px center}
.dspmenu>summary::-webkit-details-marker{display:none}
.dspmenu>summary:hover{border-color:var(--accent)}
.dspmenu>summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.dspmenu[open]>summary{border-color:var(--accent); border-bottom-left-radius:0; border-bottom-right-radius:0}
.dspmt{font-size:var(--fs-11); font-weight:600; color:var(--ink-2)}
.dspmv{font-size:var(--fs-13); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dspmv.on{color:var(--ink); font-weight:600}
.dspmpan{position:absolute; z-index:5; left:0; right:0; max-height:260px; overflow:auto;
  display:flex; flex-direction:column; gap:var(--sp-2);
  padding:var(--sp-3); border:1px solid var(--accent); border-top:0;
  border-radius:0 0 10px 10px; background:var(--elevated); box-shadow:var(--shadow-card)}
@media(max-width:520px){ .dspmenu{flex:1 1 100%} .dspmpan{position:static; border-top:1px solid var(--accent); border-radius:10px; margin-top:-1px} }

/* V61.6 — l'éditeur d'une règle de dispatch, ouvert sous la liste */
/* ===== V48.0 — notifications redessinées ===== */
.evday{padding:14px 4px 6px;position:sticky;top:0;background:var(--surface);z-index:1}
.evrow2{display:flex;gap:12px;padding:11px 8px;border-radius:10px;border-bottom:1px solid var(--grid);align-items:flex-start;transition:background .12s}
.evrow2:hover{background:var(--surface-2)}
.evrow2.neuf{background:var(--accent-soft)}
.evrow2.compact{padding:9px 4px;gap:10px}
.evic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--surface-3);color:var(--muted)}
.evic svg{width:16px;height:16px}
.evrow2.compact .evic{width:28px;height:28px;border-radius:var(--r-sm)}
.evbody{flex:1;min-width:0}
.evhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--fs-13)}
.evrow2.compact .evhead{font-size:var(--fs-12)}
.evtype{font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;background:var(--surface-3);color:var(--muted)}
.evrow2.st .evtype{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--texte-alerte)}
.evrow2.ann .evtype{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--texte-danger)}
.evnew{font-size:10px;font-weight:700;color:#fff;background:var(--bad);border-radius:6px;padding:1px 6px}
.evtime{margin-left:auto;font-size:var(--fs-11);white-space:nowrap}
.evl{font-size:var(--fs-12);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.evl0{color:var(--ink);font-weight:600}
.evrow2.compact .evl{font-size:var(--fs-12)}

.build{font-family:var(--font-code); font-size:var(--fs-11); font-weight:500; color:var(--faint); letter-spacing:0;
  background:transparent; border:0; padding:0 2px; border-radius:0; white-space:nowrap}
.livedot{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-12); color:var(--muted); font-weight:500}
.livedot::before{content:''; width:6px; height:6px; border-radius:var(--r-rond); background:var(--good); box-shadow:0 0 0 2px color-mix(in srgb,var(--good) 18%,transparent)}

/* ---------------- SCREENS ---------------- */
.screen{display:none}
.screen.on{display:block}
@keyframes fade{from{opacity:0; transform:translateY(3px)}to{opacity:1; transform:none}}
.grid{display:grid; gap:20px}
.grid>*{min-width:0}
.card{min-width:0}
.cols-2{grid-template-columns:1fr 1fr}
/* ---------------- V57.0 — NOUVELLE RÉSERVATION ----------------
   Avant : trois colonnes de hauteurs très inégales (grand vide sous le récap), sept cartes,
   la phrase d'aide « Système » écrasée sur cinq lignes à côté d'un sélecteur, deux cartes pour
   le trajet. Après : le formulaire à gauche en 4 étapes numérotées, le récap prix + action
   COLLANT à droite, et les réglages rares repliés. */
.nvnum{display:inline-grid; place-items:center; width:19px; height:19px; margin-right:8px; border-radius:var(--r-pilule);
  background:var(--accent-soft); color:var(--texte-accent); font-family:var(--font-num); font-size:var(--fs-11); font-weight:600; vertical-align:1px}
/* itinéraire : les deux adresses reliées par un trait, comme sur une carte */
.nvitin{display:grid; gap:12px}
.nvpin{display:flex; flex-direction:column; align-items:center; padding:25px 0 32px}
.nvpin .pu,.nvpin .do{width:9px; height:9px; border-radius:var(--r-rond); flex:none} .nvpin .do{background:var(--good)}
.nvpin .ln{flex:1; width:2px; opacity:.35; margin:3px 0}
.nvitin-f{min-width:0} .nvitin-f .field:last-child{margin-bottom:0}
.nvok{font-size:var(--fs-11); min-height:14px}
.nvsmall{font-size:var(--fs-11); margin-top:6px} .nvsmall:empty{display:none}
/* réglages rares : repliés, pour que le haut du formulaire reste net */
details.nvadv{margin-top:4px; border-top:1px solid var(--grid); padding-top:12px}
details.nvadv summary{cursor:pointer; font-size:var(--fs-12); color:var(--ink-2); font-weight:500; list-style:none; display:flex; align-items:center; gap:7px}
details.nvadv summary::-webkit-details-marker{display:none}
details.nvadv summary::before{content:''; width:0; height:0; border-left:5px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent; opacity:.55; transition:transform .15s}
details.nvadv[open] summary::before{transform:rotate(90deg)}
details.nvadv summary:hover{color:var(--texte-accent)}
details.nvadv>*:not(summary){margin-top:14px}
/* récap : le prix et le bouton ne quittent jamais l'écran */
.nvcta{margin-top:16px; padding-top:16px; border-top:1px solid var(--baseline)}
.nvcta-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.nvcta-row .btn{flex:1 1 auto; justify-content:center; white-space:nowrap}
.nvcta #nvResult:not(:empty){margin-top:12px}
.vehlist .empty{padding:20px 12px; border:1px dashed var(--border-strong); border-radius:var(--r-md); font-size:var(--fs-12)}
#nvTarif .prow.sans-val .pk,#nvTarif .prow.sans-val .pv{color:var(--faint)}
#nvWhen{font-variant-numeric:tabular-nums}
.vehlist{display:flex; flex-direction:column; gap:6px}
.vehrow{display:flex; align-items:center; gap:12px; padding:9px 12px; border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer; background:var(--surface); transition:border-color .12s var(--ease), background .12s var(--ease)}
.vehrow:hover{border-color:var(--border-strong); background:var(--surface-3)}
.vehrow.on{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent)}
.vehrow .vn{font-weight:500; font-size:var(--fs-13)} .vehrow .vm{font-size:var(--fs-11); color:var(--muted); margin-top:2px}
.vehrow .vp{margin-left:auto; text-align:right; font-family:var(--font-num); font-weight:600; font-size:var(--fs-13); font-variant-numeric:tabular-nums}
.vehrow .vp small{display:block; font-weight:400; font-size:var(--fs-11); color:var(--muted); font-family:var(--font-sans)}
.vehrow .vic{width:30px; height:30px; border-radius:var(--r-sm); display:grid; place-items:center; background:var(--surface-2); color:var(--muted); flex:none}
.vehrow .vic svg{width:15px; height:15px}
.prow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--grid); font-size:var(--fs-13)}
.prow:last-child{border-bottom:0} .prow .pk{color:var(--muted)} .prow .pv{font-family:var(--font-num); font-weight:500; font-variant-numeric:tabular-nums}
.prow input{width:110px; text-align:right; font-family:var(--font-num); padding:5px 8px; border:1px solid var(--border-strong); background:var(--surface); border-radius:var(--r-sm); box-shadow:var(--shadow-ctl); outline:none; transition:border-color .12s, box-shadow .12s; font-variant-numeric:tabular-nums}
.prow.total{border-top:1px solid var(--baseline); border-bottom:0; margin-top:4px; padding-top:12px; font-size:var(--fs-13)} .prow.total .pv{font-size:var(--fs-18); font-weight:600; letter-spacing:-.02em}
.svcrow{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--grid); font-size:var(--fs-13)} .svcrow:last-child{border-bottom:0}
.svcrow .sp{margin-left:auto; font-family:var(--font-num); color:var(--muted); font-size:var(--fs-12); font-variant-numeric:tabular-nums}
.cols-a{grid-template-columns:1.6fr 1fr}
@media(max-width:1040px){ .cols-2,.cols-a{grid-template-columns:1fr} }
.section-gap{height:24px}
.subtle{color:var(--muted)}

/* ---------------- CARDS : l'élévation, jamais un liseré ----------------
   V58.0 — .card cumulait `border` ET `box-shadow` sur 172 cartes : deux
   séparations pour une seule idée, d'où les « séparations trop fines ».
   Décision (Finary en référence) : OMBRE SEULE. Le liseré est réservé à
   `.card.lead` — UN bloc par écran, celui qui doit être lu en premier. */
.card{background:var(--surface); border:0; border-radius:var(--r-card);
  transition:box-shadow .15s}
.card:hover{box-shadow:var(--shadow-card)}
.card.lead{box-shadow:var(--shadow-card-hover), 0 0 0 1px var(--border-strong)}
.card .ch{display:flex; align-items:center}
.card .ch h3{color:var(--ink)}
.card .ch .cnt{font-weight:400; font-variant-numeric:tabular-nums}
.card .ch .right{margin-left:auto; display:flex; align-items:center; gap:8px}
/* cartes-tableaux : le tableau court jusqu'aux bords arrondis de la carte */
.card.pad0{padding:0; overflow:hidden}
.card.pad0>.ch{padding:18px 22px 0!important}
.card.pad0>.tablewrap{border:0; border-radius:0; margin-top:8px!important}
.card.pad0>.tablewrap .dt th:first-child,.card.pad0>.tablewrap .dt td:first-child{padding-left:22px}
.card.pad0>.tablewrap .dt th:last-child,.card.pad0>.tablewrap .dt td:last-child{padding-right:22px}
.card.pad0>.tablewrap .dt tr:last-child td{border-bottom:0}
.card.pad0>.legend{padding:0 22px 18px!important}
/* tableaux nus d'un écran : ils deviennent une carte */
.screen>.tablewrap,#s-vehicles>.tablewrap,#s-clients>.tablewrap{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card)}
.screen>.tablewrap .dt th:first-child,.screen>.tablewrap .dt td:first-child{padding-left:20px}
.screen>.tablewrap .dt th:last-child,.screen>.tablewrap .dt td:last-child{padding-right:20px}
.screen>.tablewrap .dt tr:last-child td{border-bottom:0}
.screen>.tablewrap .dt th{background:var(--surface)}
.screen>.tablewrap .dt th:first-child{border-top-left-radius:var(--r-card)} .screen>.tablewrap .dt th:last-child{border-top-right-radius:var(--r-card)}

/* ---------------- MÉTRIQUES — 3 chiffres-clés + liste compacte (Finary × Stripe) ---------------- */
/* Un seul conteneur bordé haut/bas ; les 3 premières cellules sont les héros (28 px),
   les suivantes forment une rangée compacte sur fond très légèrement teinté. */
.kpis{display:grid; grid-template-columns:repeat(15,minmax(0,1fr)); gap:14px; background:transparent; border:0; border-radius:0; overflow:visible}
.kpis:empty{display:none}
.kpi{grid-column:span 5; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:18px 20px 16px; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:4px; transition:box-shadow .15s; min-width:0; position:relative}
.kpi::before{display:none}
.kpi:hover{box-shadow:var(--shadow-card-hover); transform:none; background:var(--surface)}
.kpi .kh{display:flex; align-items:center; min-height:0}
.kpi .lab{font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kpi .val{font-family:var(--font-num); font-weight:600; line-height:1.1; color:var(--ink); margin-top:6px}
.kpi .val small{font-size:var(--fs-13); color:var(--muted); font-weight:500; letter-spacing:0}
.kpi .delta{font-size:var(--fs-12); font-weight:500; display:inline-flex; align-items:center; gap:3px; width:fit-content; max-width:100%; font-variant-numeric:tabular-nums; margin-top:2px}
.kpi .delta:empty{display:none}
.kpi .delta.up,.kpi .delta.down{padding:1px 8px; border-radius:6px; font-family:var(--font-num); letter-spacing:0}
.kpi .delta.flat{color:var(--muted); font-size:var(--fs-12)}
.kpi .delta svg{width:12px; height:12px; flex:none}
/* héros : les 3 premiers (cartes larges, 30 px) ; compacts : à partir du 4e (petites cartes, 5 par rangée) */
.kpi:nth-child(n+4){grid-column:span 3; padding:13px 16px 12px; gap:2px}
.kpi:nth-child(n+4) .val{letter-spacing:-.02em; margin-top:2px; line-height:1.25}
.kpi:nth-child(n+4) .lab{font-size:var(--fs-12)}
.kpi:nth-child(n+4) .kspark,.kpi:nth-child(n+4) .meter{display:none}
.kpi:nth-child(n+4) .delta{font-size:var(--fs-11)}
.kpi:nth-child(n+4) .delta:not(.flat){padding:0 6px}
/* exactement 4 indicateurs : quatre héros côte à côte */
.kpis:has(>.kpi:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
.kpis:has(>.kpi:nth-child(4):last-child) .kpi{grid-column:span 1; padding:18px 20px 16px; gap:var(--sp-1)}
.kpis:has(>.kpi:nth-child(4):last-child) .kpi .val{font-size:var(--fs-28); letter-spacing:-.03em; margin-top:6px; line-height:1.1}
.kpis:has(>.kpi:nth-child(4):last-child) .kpi .lab{font-size:var(--fs-12)}
.kpis:has(>.kpi:nth-child(4):last-child) .kpi.gj .sub{display:block}
.kpis:has(>.kpi:nth-child(4):last-child) .kpi .kspark{display:block}
.kpis:has(>.kpi:nth-child(4):last-child) .kpi .delta{font-size:var(--fs-12)}
.kpis:has(>.kpi:nth-child(4):last-child) .kpi .delta:not(.flat){padding:1px 8px}
/* V67.0 — trois héros et quatre compacts (tableau de bord) : deux rangées pleines, sans trou à droite */
@media(min-width:1041px){
  .kpis:has(>.kpi:nth-child(7):last-child){grid-template-columns:repeat(12,minmax(0,1fr))}
  .kpis:has(>.kpi:nth-child(7):last-child) .kpi{grid-column:span 4}
  .kpis:has(>.kpi:nth-child(7):last-child) .kpi:nth-child(n+4){grid-column:span 3}
}
/* KPI « GJ » : libellé → valeur → contexte → variation */
.kpi.gj .lab{order:0; margin-top:0}
.kpi.gj .val{order:1}
.kpi.gj .sub{order:2; font-size:var(--fs-12); color:var(--muted); font-family:var(--font-num); letter-spacing:0; font-variant-numeric:tabular-nums; white-space:normal; line-height:1.4; margin-top:2px}
.kpi.gj .kh{order:3; justify-content:flex-start; min-height:0; margin-top:2px}
.kpi.gj .kh:empty{display:none}
.kpi.gj:nth-child(n+4) .sub{display:none}
.kpi .delta.g,.kpi .delta.r,.kpi .delta.n{padding:1px 8px; border-radius:6px; font-family:var(--font-num); letter-spacing:0; font-size:var(--fs-12)}
.kpi .delta.g{color:var(--texte-ok); background:var(--good-soft)} .kpi .delta.n{background:transparent; padding:0}
/* bandes secondaires (catégories de flotte) : tout en compact */
.kpis.flat{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpis.flat .kpi,.kpis.flat .kpi:nth-child(-n+3){grid-column:span 1; padding:13px 16px 12px; gap:2px}
.kpis.flat .kpi .val{font-size:var(--fs-18); letter-spacing:-.02em; margin-top:2px; line-height:1.25}

/* ---------------- TOOLBAR / SEG / TABS / CONTRÔLES / BOUTONS ---------------- */
.toolrow{display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap}
.toolrow .spacer{flex:1}
/* segmented control (Linear) : rail discret, segment actif = surface + filet */
/* lot P5 (07/10/2026) — la barre du mode (#nvModeBar) et le segment des paiements ont leur forme dans la section « LOT P5 » */
.seg{display:inline-flex; flex-wrap:wrap; background:var(--surface-2); border:0}
.seg button{border:1px solid transparent; background:transparent; box-shadow:none; white-space:nowrap;
  transition:color .12s, background .12s, box-shadow .12s}
.seg button:hover{background:transparent; border-color:transparent}
.seg button:active{transform:none}
.seg button.on{background:var(--surface); font-weight:500}
html[data-theme="dark"] .seg button.on{background:var(--elevated); box-shadow:0 1px 2px rgba(0,0,0,.4), 0 0 0 1px var(--border-strong)}
.seg button .muted{color:var(--faint); font-weight:400}
.field>.seg{flex-wrap:nowrap; align-self:flex-start; width:fit-content; max-width:100%}
.seg button.on .muted{color:var(--muted)}
/* onglets soulignés (Stripe) : statuts de Réservations */
.seg.tabs{background:transparent; border:0; gap:2px; align-self:stretch}
.seg.tabs button{border:0; box-shadow:none; position:relative}
.seg.tabs button::after{content:''; position:absolute; border-radius:1px; background:transparent; transition:background .12s}
.seg.tabs button.on{background:transparent; box-shadow:none}
html[data-theme="dark"] .seg.tabs button.on{background:transparent; box-shadow:none}
/* chips neutres : familles de véhicules */
.seg.fam{border:0}
.seg.fam button.on{box-shadow:none}
.seg.fam button.on .muted{color:color-mix(in srgb,var(--page) 70%,transparent)}
html[data-theme="dark"] .seg.fam button.on{box-shadow:none}
.sel{border:1px solid var(--border-strong); background:var(--surface); padding:5px 10px; color:var(--ink);
  transition:border-color .12s, box-shadow .12s}
.sel:hover{border-color:color-mix(in srgb,var(--border-strong) 55%,var(--muted))}
.sel:focus{outline:none; box-shadow:0 0 0 3px var(--ring)}
.search{display:flex; align-items:center; gap:8px; border:1px solid var(--border-strong); background:var(--surface); padding:0 10px; min-width:200px;
  transition:border-color .12s, box-shadow .12s}
.search:hover{border-color:color-mix(in srgb,var(--border-strong) 55%,var(--muted))}
.search:focus-within{box-shadow:0 0 0 3px var(--ring)}
.search svg{width:14px; height:14px; color:var(--muted); flex:none}
.search input{border:none; background:transparent; padding:5px 0; width:100%; min-width:0; outline:none}
/* bouton primaire : aplat indigo — UN par écran */
.btn{background:var(--btn); color:var(--btn-ink);
  display:inline-flex; align-items:center}
.btn:hover{filter:none}
.btn svg{width:14px; height:14px}
.btn.ghost{border:1px solid var(--border-strong)}
.btn.ghost:hover{filter:none}
.btn.gold{background:var(--btn); color:var(--btn-ink)}
.btn.ok{background:var(--good); color:#fff}
.btn.ok:hover{background:color-mix(in srgb,var(--good) 92%,#000)}
.btn.confirm{background:var(--bad); color:#fff}
.btn.confirm:hover{background:color-mix(in srgb,var(--bad) 92%,#000)}
.btn:disabled{filter:none}
/* V57.1 — cibles tactiles (WCAG 2.5.5) : au volant, 44 px sur telephone */
/* actions utilitaires rétrogradées en secondaire (un seul bouton plein par écran) */
#tfAddRate,#tfMzGo,#rtSubscribe{background:var(--surface); color:var(--ink); border:1px solid var(--border-strong); box-shadow:var(--shadow-ctl)}
#tfAddRate:hover,#tfMzGo:hover,#rtSubscribe:hover{background:var(--surface); border-color:color-mix(in srgb,var(--border-strong) 55%,var(--muted)); box-shadow:var(--shadow-ctl)}
#tfAddRate svg,#tfMzGo svg,#rtSubscribe svg{color:var(--muted)}

/* ---------------- BADGES / PILLS / CANAUX : un point de couleur, du texte en encre ---------------- */
.badge{display:inline-block; background:var(--surface-2); color:var(--ink-2); white-space:nowrap; letter-spacing:0;
  border:0}
.badge.gray{background:var(--surface-2); border:0}
.pill{display:inline-flex; align-items:center; padding:0; border-radius:0; white-space:nowrap; border:0; line-height:18px; background:transparent}
.pill .pd{border-radius:var(--r-rond); background:var(--brume); flex:none}
.pill.live .pd{background:var(--good)}
.pill.confirmee .pd,.pill.assignee .pd{background:var(--azur)}
.pill.en_attente_paiement .pd{background:var(--warn)}
.pill.a_assigner{font-weight:500}
.pill.annulee{color:var(--muted)} .pill.annulee .pd{background:var(--bad)}
.pill.no_show .pd,.pill.incident .pd{background:var(--warn)}
/* avancement d'une campagne (Clients › Campagnes) */
.cmp-prog{height:4px; max-width:160px; margin-top:5px; border-radius:2px; background:var(--surface-2); overflow:hidden}
.cmp-prog i{display:block; height:100%; border-radius:2px; background:var(--good)}
.dt.cmp-liste td{white-space:normal; vertical-align:top}
.svc{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-12); font-weight:400; padding:0;
  border-radius:0; border:0; white-space:nowrap; background:transparent; color:var(--ink-2)}
.svc .pd{width:6px; height:6px; border-radius:var(--r-rond); background:currentColor; flex:none}
.svc.to .pd{background:var(--ambre)} .svc.from .pd{background:var(--azur)} .svc.both .pd{background:var(--s5)} .svc.none{color:var(--muted)} .svc.none .pd{background:var(--border-strong)}
.chan{display:inline-block; white-space:nowrap}
.chan.trip{background:var(--surface-2); color:var(--ink-2)}
.chan.b2b{border:0}

/* ---------------- TABLES (Stripe) : flush sur le canvas, filets, une seule emphase par ligne ---------------- */
.tablewrap{overflow-x:auto; border:0; border-radius:0; background:transparent; box-shadow:none}
table.dt{width:100%; border-collapse:collapse; font-size:var(--fs-13)}
.dt th,.dt td{padding:10px 12px; text-align:right; border-bottom:1px solid var(--grid); white-space:nowrap; font-variant-numeric:tabular-nums; vertical-align:middle}
.dt th{position:sticky; top:0; background:var(--surface); z-index:2;
  letter-spacing:0; text-transform:none; border-bottom:0; box-shadow:inset 0 -1px 0 var(--border); line-height:18px}
.dt th:first-child,.dt td:first-child{text-align:left}
/* colonnes texte à gauche (les colonnes de montants gardent leur alignement explicite) */
.dt.ovnext th,.dt.ovnext td,#s-clients .dt th,#s-clients .dt td,#s-vehicles .dt th,#s-vehicles .dt td{text-align:left}
.dt tbody tr{transition:background .1s}
.dt tbody tr:hover{background:var(--surface-3)}
html[data-theme="dark"] .dt tbody tr:hover{background:var(--surface-2)}
.dt tbody tr.clickable{cursor:pointer}
.dt tbody tr.clickable:active{background:var(--surface-2)}
.dt tr:last-child td{border-bottom:1px solid var(--grid)}
.dt tfoot td{border-top:1px solid var(--baseline); border-bottom:none; font-weight:600; background:var(--surface); position:sticky; bottom:0}
.dt .muted{color:var(--muted)} .dt .neg{color:var(--texte-danger)} .dt .pos{color:var(--texte-ok)}
.dt .rowsub{color:var(--muted); font-weight:400; margin-top:1px}
.dt .reffull{font-family:var(--font-code); color:var(--ink-2); letter-spacing:-.01em}
.dt tr.dim{opacity:.5}
.dt tr.me{background:var(--accent-soft)}
.dt td b{font-weight:500}
.dt td a:not(.btn):not(.qab){color:var(--ink-2)} .dt td a:not(.btn):not(.qab):hover{color:var(--texte-accent)}
.dt td .cash,.dt td.cash b{font-weight:500}
.btn.asg{border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.dt th.sortable{cursor:pointer; user-select:none; transition:color .12s}
.dt th.sortable:hover{color:var(--ink)}
.dt th.sortable .arr{display:inline-flex; align-items:center; width:13px; color:var(--ink)}
.dt th.sortable .arr .gi{width:12px; height:12px; vertical-align:0}

/* ---------------- CHARTS & DIVERS ---------------- */
.chart{width:100%; position:relative}
/* densité */
html[data-density="compact"] .dt th,html[data-density="compact"] .dt td{padding-top:6px; padding-bottom:6px}
html[data-density="compact"] .card{padding:12px 14px}
html[data-density="compact"] .kpi{padding:12px 16px 10px}
html[data-density="compact"] .kpi .val{font-size:var(--fs-24)}
html[data-density="compact"] .kpi:nth-child(n+4){padding:8px 16px}
html[data-density="compact"] .kpi:nth-child(n+4) .val{font-size:var(--fs-14)}
html[data-density="compact"] .grid{gap:14px}
html[data-density="compact"] main{padding:0 20px 44px}
html[data-density="compact"] .section-gap{height:16px}
html[data-density="compact"] .toolrow{margin-bottom:10px}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field select,html[data-theme="dark"] .field textarea,html[data-theme="dark"] .sel,html[data-theme="dark"] .search,html[data-theme="dark"] .prow input{background-color:var(--page)}
div.empty::before{display:none}
/* bloc profil (bas de sidebar) */
.me-blk{display:flex; align-items:center; gap:6px; margin:0; padding:4px 2px 2px 8px; border:0; border-radius:var(--r-sm); background:transparent}
.mav{width:22px; height:22px; border-radius:var(--r-rond); flex:none; display:grid; place-items:center; font-size:10px; font-weight:600;
  background:var(--ink); color:var(--page); box-shadow:none; letter-spacing:.01em}
.me-blk .mtx{min-width:0; flex:1} .me-blk .mtx b{display:block; font-size:var(--fs-12); line-height:1.2; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.me-blk .mtx small{font-size:var(--fs-11); color:var(--side-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
/* barres de défilement fines */
*{scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--muted) 35%,transparent) transparent}
*::-webkit-scrollbar{width:10px; height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 30%,transparent); border-radius:var(--r-sm); border:3px solid var(--page)}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--muted) 50%,transparent)}
::selection{background:var(--ring)}
.kpi .meter{height:3px; border-radius:2px; background:var(--meter-track); overflow:hidden; margin-top:6px}
.kpi .meter span{display:block; height:100%; border-radius:2px; background:var(--accent); transition:width .6s var(--ease)}
.kpi .kspark{width:100%; height:30px; margin:6px 0 -2px; opacity:.9}
.hmwrap{display:grid; grid-template-columns:36px repeat(24,1fr); gap:2.5px; align-items:center}
.hmc{aspect-ratio:1/1; border-radius:3px; min-width:0}
.hml{font-size:10px; color:var(--muted); font-family:var(--font-num); text-align:center; font-variant-numeric:tabular-nums}
.hml.j{text-align:right; padding-right:6px; font-size:var(--fs-11)}
.chart-hero{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.chart-hero:empty{display:none}
.chart-hero b{font-family:var(--font-num); font-size:var(--fs-26); font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.1}
.chart-hero .delta{font-size:var(--fs-12); font-weight:500; padding:0; border-radius:0; font-family:var(--font-num); letter-spacing:0; background:transparent; font-variant-numeric:tabular-nums}
.chart-hero .delta:empty{display:none}
.chart-hero .delta.up{background:transparent}
.chart-hero .delta.down{background:transparent}
.chart-hero .delta.flat{color:var(--muted); background:transparent}
.chart-hero .chl{font-size:var(--fs-12); color:var(--muted)}
@keyframes lineDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.anim-line{stroke-dasharray:1; animation:lineDraw .8s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes areaIn{from{opacity:0}to{opacity:1}}
.anim-area{animation:areaIn .7s ease .15s both}
.cross{pointer-events:none; opacity:0; transition:opacity .12s}
.cross line{stroke:var(--baseline); stroke-width:1; stroke-dasharray:3 3}
.cross circle{stroke:var(--surface); stroke-width:2}
/* bande de synthèse Finances (héritée) : simple section à filets */
.tt-row .v,.hbar .v,.axis-t,.dlabel{font-family:var(--font-num); letter-spacing:0}
.cash{font-family:var(--font-num); font-weight:500; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
#s-prices table.dt td:nth-child(n+4){font-family:var(--font-num); font-size:var(--fs-13); letter-spacing:0}
.btn{transition:background .12s, border-color .12s, box-shadow .12s var(--ease), transform .12s var(--ease)}
.tbtn{transition:color .12s, background .12s, border-color .12s, box-shadow .12s var(--ease)}
.tbtn:active{transform:translateY(.5px)}
#sidebar nav button{transition:background .12s, color .12s}
#sidebar nav button:active{opacity:.8}
.copybtn{transition:color .12s, transform .12s var(--ease)} .copybtn:active{transform:scale(.96)}
/* quick actions au survol des lignes */
.qab{width:26px; height:26px; border-radius:var(--r-xs); display:grid; place-items:center; color:var(--muted); transition:background .12s, color .12s}
.qab:hover{background:var(--surface-2); color:var(--ink); transform:none}
.qab:active{transform:none}
.qab svg{width:14px; height:14px}
/* V64.0 (chantier 6, lot M1) — la règle qui supprimait les actions au doigt est morte.
   Sans survol, la rangée flottante n'a plus de sens : elle redevient statique et se réduit au
   seul bouton « … », qui ouvre la feuille d'actions. */
/* palette de commandes ⌘K */
.kbd{font-family:var(--font-sans); font-size:var(--fs-11); font-weight:500; color:var(--muted);
  border:1px solid var(--border); border-bottom-width:1px; border-radius:var(--r-xs); padding:0 5px; background:var(--surface-2); flex:none; white-space:nowrap; line-height:17px}
#pal{position:fixed; inset:0; display:none}
#pal.on{display:block}
.pal-back{position:absolute; inset:0; background:rgba(10,12,16,.35); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
@keyframes palIn{from{opacity:0; transform:translateY(-6px) scale(.99)}to{opacity:1; transform:none}}
.pal-panel{position:relative; margin:12vh auto 0; width:min(600px,calc(100vw - 32px)); background:var(--elevated);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden; animation:palIn .16s var(--ease)}
.pal-head{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border)}
.pal-head svg{width:16px; height:16px; color:var(--muted); flex:none}
.pal-head input{flex:1; border:none; background:transparent; outline:none; font-size:var(--fs-14); color:var(--ink)}
.pal-list{max-height:min(48vh,420px); overflow-y:auto; padding:6px}
.pal-grp{font-size:var(--fs-11); letter-spacing:0; text-transform:none; font-weight:500; padding:8px 10px 4px}
.pal-row{display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:var(--r-sm); cursor:pointer}
.pal-row .pic{width:26px; height:26px; border-radius:var(--r-sm); background:var(--surface-2); display:grid; place-items:center; color:var(--muted); flex:none}
.pal-row .pic svg{width:14px; height:14px}
.pal-row .ptxt{min-width:0; flex:1}
.pal-row .pl{font-size:var(--fs-13); font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pal-row .ps{font-size:var(--fs-11); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pal-row .pk{opacity:0; flex:none}
.pal-row.on{background:var(--surface-2)}
.pal-row.on .pic{background:var(--accent); color:var(--accent-ink)}
.pal-row.on .pk{opacity:1}
.pal-empty{padding:26px; text-align:center; color:var(--muted); font-size:var(--fs-13)}
@media(max-width:760px){ .pal-panel{margin-top:8vh} #searchBox .kbd{display:none} }
.bstack{display:flex; flex-direction:column; gap:20px; min-width:0}
.bstack>.card{flex:1}
.mini{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:13px 16px 12px; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:2px; min-width:0}
.mini:hover{box-shadow:var(--shadow-card-hover); transform:none}
.mini .v{font-size:var(--fs-18)!important; letter-spacing:-.02em!important}
.mini .l{font-size:var(--fs-12); color:var(--muted); font-weight:500}
.mini .v{font-family:var(--font-num); font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.mini .v small{font-size:var(--fs-12); color:var(--muted); font-weight:500}
.mini .s{font-size:var(--fs-11); color:var(--muted)}
@keyframes sklW{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skl{display:inline-block; width:76px; height:1em; vertical-align:-.12em; border-radius:var(--r-xs); animation:sklW 1.3s linear infinite}
.skl.sm{width:44px}
.dseg{transition:opacity .14s, transform .18s var(--ease); transform-origin:80px 80px; cursor:default}
svg:hover .dseg{opacity:.55}
svg .dseg:hover{opacity:1; transform:scale(1.025)}
/* menus déroulants */
.dd{position:relative}
.dd-btn{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border-strong); color:var(--ink); transition:border-color .12s, background .12s}
.dd-btn:hover{color:var(--ink)}
.dd-btn svg{width:14px; height:14px; color:var(--muted)}
.dd-btn .chev{width:12px; height:12px; transition:transform .15s var(--ease)}
.dd.on .dd-btn .chev{transform:rotate(180deg)}
.dd-menu{position:absolute; top:calc(100% + 4px); left:0; z-index:70; min-width:210px; display:none;
  background:var(--elevated); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-pop); padding:4px}
.dd.on .dd-menu{display:block; animation:palIn .12s var(--ease)}
.dd-it{display:flex; align-items:center; width:100%; text-align:left; gap:10px; padding:6px 10px; border-radius:var(--r-sm);
  font-size:var(--fs-13); color:var(--ink); font-weight:400}
.dd-it:hover{background:var(--surface-2)}
.dd-it .ck{margin-left:auto; opacity:0; color:var(--texte-accent); display:inline-flex; align-items:center}
.dd-it .ck .gi{width:15px; height:15px; vertical-align:0; stroke-width:2.4}
.dd-it.on{font-weight:500}
.dd-it.on .ck{opacity:1}
.dt th[draggable="true"]{cursor:grab}
.dt th.th-drag{opacity:.45}
.dt th.th-over{box-shadow:inset 2px 0 0 var(--accent), inset 0 -1px 0 var(--border)}
.dt th .crz{position:absolute; right:-4px; top:0; bottom:0; width:9px; cursor:col-resize; z-index:3}
.dt th .crz::after{content:''; position:absolute; right:4px; top:22%; bottom:22%; width:2px; border-radius:2px; background:transparent; transition:background .12s}
.dt th .crz:hover::after,.dt th .crz.drag::after{background:var(--accent)}
.chart svg{display:block; width:100%; max-width:100%; height:auto}
.chart svg rect:not(.hitband){rx:3px}
.chart svg[width="160"]{width:160px; height:160px; flex:none}
.axis-t{font-size:var(--fs-11); fill:var(--muted); font-variant-numeric:tabular-nums}
.cat-t{font-size:var(--fs-11); fill:var(--muted)}
.dlabel{font-size:var(--fs-11); font-weight:500; fill:var(--ink-2)}
.hitband{fill:transparent}
.legend{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px}
.legend .it{display:inline-flex; align-items:center; gap:6px}
.dot{width:8px; height:8px; border-radius:var(--r-rond); flex:0 0 8px}
/* barres horizontales : fines, neutres, la valeur porte l'information */
.hbars{display:flex; flex-direction:column; gap:12px}
.hbar{display:grid; grid-template-columns:120px 1fr; align-items:center; gap:12px}
.hbar .nm{font-size:var(--fs-12); color:var(--ink-2); text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hbar .tr{display:flex; align-items:center; gap:10px; min-width:0}
.hbar .bar{height:8px; background:var(--s1); min-width:4px}
.hbar .v{font-size:var(--fs-12); color:var(--ink); font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums}
.hbar .v .muted{font-weight:400}
.hbars .delta{font-size:var(--fs-11); font-weight:500; padding:0; border-radius:0; font-family:var(--font-num); background:transparent; font-variant-numeric:tabular-nums}
.hbars .delta:empty{display:none}
#tooltip{position:fixed; z-index:200; pointer-events:none; display:none; max-width:280px;
  background:var(--ink); color:var(--page); border:0; border-radius:var(--r-sm); padding:8px 10px;
  font-size:var(--fs-12); box-shadow:var(--shadow-pop)}
html[data-theme="dark"] #tooltip{background:var(--elevated); color:var(--ink); border:1px solid var(--border-strong)}
#tooltip .tt-title{font-weight:600; margin-bottom:4px}
#tooltip .tt-row{display:flex; justify-content:space-between; gap:16px; padding:1.5px 0}
#tooltip .tt-row .l{display:inline-flex; align-items:center; gap:6px; color:inherit; opacity:.8}
#tooltip .tt-row .v{font-weight:600; font-variant-numeric:tabular-nums}
.meter{height:6px; border-radius:3px; background:var(--meter-track); overflow:hidden}
.meter>div{height:100%; border-radius:3px; background:var(--accent); min-width:3px; transition:width .5s}

/* ---------------- AVATAR ---------------- */
.av{display:inline-grid; place-items:center; border-radius:6px; background:var(--surface-2); color:var(--ink-2); font-weight:600; flex:none; font-size:var(--fs-11); letter-spacing:.01em}
.av.gold{background:var(--accent-soft); color:var(--texte-accent)}

/* ---------------- DRAWER : sections à filets, actions compactes ---------------- */
#drawer{position:fixed; inset:0 0 0 auto; width:min(520px,100vw); border-left:1px solid var(--border);
  box-shadow:-8px 0 32px rgba(0,0,0,.08); transform:translateX(102%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  z-index:120; display:flex; flex-direction:column}
html[data-theme="dark"] #drawer{box-shadow:-8px 0 40px rgba(0,0,0,.6); background:var(--page)}
#drawer.on{transform:none}
#drawerBack{position:fixed; inset:0; background:rgba(10,12,16,.28); opacity:0; visibility:hidden; transition:.25s; z-index:110}
#drawerBack.on{opacity:1; visibility:visible}
#drawer .dh{display:flex; align-items:center; gap:12px; padding:calc(12px + env(safe-area-inset-top,0px)) 24px 12px; border-bottom:1px solid var(--border); min-height:52px; background:var(--surface)}
#drawer .dh #drawerTitle{font-size:var(--fs-14)!important; font-weight:600!important; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; min-width:0}
#drawer .dh .x{margin-left:auto; width:28px; height:28px; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--muted)}
#drawer .dh .x:hover{background:var(--surface-2); color:var(--ink)}
#drawer .dh .x svg{width:16px; height:16px}
#drawer .db{flex:1; overflow-y:auto; padding:16px 20px 24px}
.dtotal{display:flex; justify-content:space-between; align-items:baseline; padding-top:10px; margin-top:4px; border-top:1px solid var(--baseline); font-weight:600}
.dtotal .cash{font-size:var(--fs-16); font-weight:600}
.drow{display:flex; gap:12px; padding:7px 0; border-bottom:0; font-size:var(--fs-13); align-items:baseline}
.drow:last-child{border-bottom:none}
.drow .dk{flex:0 0 128px; color:var(--muted); font-size:var(--fs-12)}
.drow .dv{flex:1; font-weight:400; word-break:break-word; color:var(--ink)}
.drow .dv .reffull{font-family:var(--font-code); font-size:var(--fs-12); user-select:all}
.copybtn{cursor:pointer; font-size:var(--fs-11); margin-left:8px}
.btn.assign{width:100%; justify-content:center; margin-top:12px; min-height:40px; font-size:var(--fs-13)}
.bkc .drvbox[data-act]{cursor:pointer}
.bkc .drvbox .re{display:block; color:var(--texte-accent); font-weight:500; font-size:var(--fs-11); margin-top:3px; font-family:inherit}
.selc{width:36px; text-align:center; padding-left:0!important; padding-right:0!important; cursor:pointer}
.selc input{width:15px; height:15px; accent-color:var(--accent); cursor:pointer; margin:0; vertical-align:middle}
.bkc .l1 .nm{display:inline-flex; align-items:center; gap:6px}
.bkc .ck{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin:-10px -12px -10px 0; border-radius:var(--r-md)}
.bkc .ck input{width:22px; height:22px; accent-color:var(--accent); margin:0}
.bkc.sel{outline:2px solid var(--accent); outline-offset:-1px; background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.dt tr.sel td{background:var(--accent-soft)}
#selBar{position:fixed; left:50%; display:flex; align-items:center; opacity:0; pointer-events:none; transform:translateX(-50%) translateY(12px); transition:opacity .16s, transform .16s var(--ease); max-width:calc(100vw - 24px); box-sizing:border-box}
#selBar.on{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0)}
#selBar .n{font-weight:500; white-space:nowrap; font-size:var(--fs-13)} #selBar .n b{font-family:var(--font-num); font-size:var(--fs-14); font-weight:600}
#selBar .btn{white-space:nowrap}
#selBar .x{width:32px; height:32px; border-radius:var(--r-sm); display:grid; place-items:center; font-size:var(--fs-15)}
@media(max-width:1040px){ #selBar{width:calc(100vw - 20px); justify-content:space-between} }
/* Réglages → Telegram */
.bkc .drvbox.none small{color:var(--texte-danger); font-family:inherit; font-weight:500; font-size:var(--fs-11); margin-top:2px}

/* ---------------- ENTITY CARDS (chauffeurs, clients) ---------------- */
.ent{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:16px 18px; box-shadow:none; cursor:pointer;
  transition:border-color .15s, background .15s}
.ent:hover{box-shadow:none; transform:none; border-color:var(--border-strong)}
.ent.open:hover{transform:none}
.ent.open{grid-column:1/-1; cursor:default}
.ent .top .nm{line-height:1.2}
.ent.open .top .nm{font-size:var(--fs-15)}
.ent .fiche{border-top:1px solid var(--border); margin-top:14px; padding-top:14px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:16px 28px; align-items:start}
.ent .fiche .vchip{display:flex; align-items:center; gap:6px; margin-bottom:5px}
.ent.me{border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); box-shadow:none}
.ent .top{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.ent .top .nm{font-weight:600; font-size:var(--fs-14); letter-spacing:-.01em}
.ent .top .r{margin-left:auto}
.ent .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding-top:12px; border-top:1px solid var(--grid)}
.ent .stats .s .n{font-family:var(--font-num); font-size:var(--fs-15); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.ent .stats .s .l{font-size:var(--fs-11); color:var(--muted); margin-top:1px}

/* ---------------- FORMS ---------------- */
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
/* une case à cocher rangée dans un .field garde sa taille de case (pas de cadre de 40 px autour) */
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{border:1px solid var(--border-strong); background:var(--surface); border-radius:var(--r-sm); padding:6px 10px; outline:none; box-shadow:var(--shadow-ctl);
  transition:border-color .12s, box-shadow .12s}
.field input:hover,.field select:hover,.field textarea:hover{border-color:color-mix(in srgb,var(--border-strong) 55%,var(--muted))}
.field input:focus,.field select:focus,.field textarea:focus,.prow input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
select.sel,.field select{-webkit-appearance:none; appearance:none; background-image:var(--chev); background-repeat:no-repeat; background-position:right 9px center; background-size:12px 12px; padding-right:28px}
.field input::placeholder,.search input::placeholder,textarea::placeholder{color:var(--faint)}
/* ---- V57.2 CHAMP ADRESSE : liste maison, remplace le <datalist> natif ----
   (le natif n'est pas stylable, casse sur Safari iOS, et ne lie l'adresse que
   par correspondance exacte de chaine). Positionnee en `fixed` : elle sort des
   modales, du tiroir et de tout conteneur en overflow:hidden. */
.ca-pop{position:fixed; z-index:9000; box-sizing:border-box; margin:0; padding:4px; list-style:none; background:var(--elevated);
  border:1px solid var(--border-strong); border-radius:var(--r-md); box-shadow:var(--shadow-card-hover);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; font-size:var(--fs-13)}
.ca-pop li{padding:8px 10px; border-radius:var(--r-sm); cursor:pointer; min-height:44px; display:flex; flex-direction:column; justify-content:center}
.ca-pop li[aria-selected="true"],.ca-pop li:hover{background:var(--accent-soft)}
.ca-pop .ca-a{font-weight:600; color:var(--ink); line-height:1.25; overflow-wrap:anywhere}
.ca-pop .ca-b{font-size:var(--fs-12); color:var(--muted); margin-top:2px; overflow-wrap:anywhere}
.ca-pop mark{background:transparent; color:var(--texte-accent); font-weight:700; padding:0}
.ca-pop .ca-msg{color:var(--muted); cursor:default; min-height:0; padding:10px}
.ca-pop .ca-msg:hover{background:transparent}
.ca-pop .ca-msg.ca-load::before{content:''; display:inline-block; width:11px; height:11px; margin-right:7px; vertical-align:-1px;
  border:2px solid var(--border-strong); border-top-color:var(--accent); border-radius:var(--r-rond); animation:ca-spin .7s linear infinite}
@keyframes ca-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .ca-pop .ca-msg.ca-load::before{animation:none} }
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:760px){ .form-row{grid-template-columns:1fr} }
/* note contextuelle : une ligne discrète, pas une bannière */
.hint-box{display:flex; gap:8px; align-items:flex-start; background:transparent; border:0;
  border-radius:0; padding:0 0 2px; color:var(--muted); line-height:1.5; margin-bottom:16px}
.hint-box svg{width:14px; height:14px; color:var(--faint); flex:none; margin-top:3px}
.hint-box b{color:var(--ink-2); font-weight:500}

/* ---------------- RÉGLAGES : une colonne de sections ---------------- */
#s-settings .card .ch h3{font-size:var(--fs-15)}
#s-settings .card .sub{max-width:640px}

/* ---------------- MODAL / LOGIN / TOAST / BOOT ---------------- */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:150; padding:20px}
.modal.on{display:flex}
.modal .box{background:var(--elevated); border:1px solid var(--border); width:100%; max-width:440px}
.modal .box h3{color:var(--ink); margin-bottom:4px; font-weight:600; letter-spacing:-.015em}
.modal .box{position:relative}
.modal .box .x{position:absolute; top:14px; right:14px}
.plogo{display:inline-flex;align-items:center;justify-content:center;border-radius:7px;color:#fff;font-weight:700;font-size:var(--fs-12);line-height:1;vertical-align:middle;overflow:hidden}
img.plogo{object-fit:cover;background:var(--elevated)}
.pfic-head{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.pfic-nom{font-size:17px;font-weight:700;letter-spacing:-.01em}
.dlist .drow{display:flex;gap:14px;padding:7px 0;border-bottom:1px solid var(--border)}
.dlist .drow .dk{min-width:120px;color:var(--muted);font-size:var(--fs-12)}
.dlist .drow .dv{font-size:var(--fs-13)}
.ana-traj{display:flex;align-items:flex-end;gap:10px;height:126px;margin-top:14px}
.ana-traj .atb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.ana-traj .atbar{width:66%;border-radius:6px 6px 0 0;min-height:5px;transition:height .3s}
.ana-traj .atl{font-size:var(--fs-11);color:var(--muted);margin-top:4px}
.ana-traj .atv{font-size:var(--fs-11);font-weight:600;margin-top:3px}
#login{position:fixed; inset:0;
  display:none; align-items:center; justify-content:center; z-index:300; padding:20px}
#login.on{display:flex}
#login .box{background:var(--surface); border-radius:var(--r-lg); width:min(400px,100%); padding:32px}
#login .mark,#bootLoad .mark{display:grid; place-items:center; margin:0 auto 14px; font-weight:700; font-family:var(--font-sans)}
div.empty{border:0; border-radius:0; margin:4px 0; background:transparent}
#login .box{position:relative; overflow:hidden}
#login .box::before{display:none}
#bootLoad{position:fixed; inset:0; z-index:290; display:none; align-items:center; justify-content:center; padding:20px; transition:opacity .25s}
#bootLoad.on{display:flex} #bootLoad.out{opacity:0; pointer-events:none}
#bootLoad .bl-box{width:min(300px,100%); text-align:center}
#bootLoad .bl-t{font-weight:600; letter-spacing:-.01em}
#bootLoad .bl-s{font-size:var(--fs-12); margin:5px 0 14px; min-height:16px; font-family:var(--font-num)}
#bootLoad .bl-bar{height:3px; border-radius:2px; overflow:hidden}
#bootLoad .bl-bar span{display:block; height:100%; width:8%; border-radius:2px; transition:width .45s cubic-bezier(.2,.8,.2,1)}
/* V90.3 — l'attente quand le serveur ne répond pas : un message, deux boutons, la session reste */
#bootLoad .bl-retry{margin-top:18px; display:grid; gap:8px}
#bootLoad .bl-retry[hidden]{display:none}
#bootLoad .bl-msg{font-size:var(--fs-13); line-height:1.45; margin:0 0 4px}
#bootLoad .bl-retry .btn{width:100%; justify-content:center}
/* la clé admin est masquée sans être un « mot de passe » : le trousseau ne confond plus les deux formulaires */
#login .cle-masquee{-webkit-text-security:disc; font-family:var(--font-num)}

/* ---------------- RESPONSIVE ---------------- */
#mobileNav{display:none}
/* actions du tiroir : une rangée de boutons compacts (l'ancienne grille de tuiles) */
.volant{display:flex; gap:8px; margin:0 0 14px}
.volant a,.volant button{flex:1; display:inline-flex; flex-direction:row; align-items:center; justify-content:center; gap:7px; padding:0 12px; min-height:40px;
  border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font-weight:500; font-size:var(--fs-12); border:1px solid var(--border-strong); box-shadow:var(--shadow-ctl)}
.volant a:hover,.volant button:hover{border-color:color-mix(in srgb,var(--border-strong) 55%,var(--muted)); text-decoration:none}
.volant a:active,.volant button:active{transform:translateY(.5px)}
.volant .p{background:var(--btn); color:var(--btn-ink); border-color:var(--btn-border); box-shadow:var(--btn-shadow)}
.volant .p:hover{background:var(--accent-hover)}
.volant svg{width:15px; height:15px; color:var(--muted)}
.volant .p svg{color:var(--btn-ink)}
/* V55.15 — mobile « au volant » : la prochaine course en grand, actions au pouce (Appeler / Naviguer / Assigner) */
.ov-proch{display:none}
@media(max-width:1040px){
  .ov-proch:not([hidden]){display:block;margin:0 0 14px}
  .ovp{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--r-lg);padding:15px 16px;box-shadow:var(--shadow-card)}
  .ovp .when{font-size:var(--fs-11);color:var(--texte-accent);font-weight:700}
  .ovp .cli{font-size:var(--fs-20);font-weight:700;margin-top:3px;letter-spacing:-.01em;line-height:1.15}
  .ovp .rt{font-size:var(--fs-13);color:var(--ink-2);margin-top:6px;line-height:1.5}
  .ovp .acts{display:flex;gap:8px;margin-top:14px}
  .ovp .acts a,.ovp .acts button{flex:1;min-height:50px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:var(--r-md);border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);font-size:var(--fs-12);font-weight:600;text-decoration:none;box-shadow:var(--shadow-ctl)}
  .ovp .acts .p{background:var(--btn);color:var(--btn-ink);border-color:var(--btn-border)}
  .ovp .acts svg{width:21px;height:21px}
  .ovp .acts button:disabled{opacity:.4}
}
/* V55.15 — menu mobile : fond (scrim) tap-pour-fermer + verrou de défilement (le contenu ne bouge plus quand le menu est ouvert) */
.navScrim{position:fixed;inset:0;z-index:35;background:rgba(10,12,16,.42);opacity:0;visibility:hidden;transition:opacity .22s;overscroll-behavior:contain;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.navScrim.on{opacity:1;visibility:visible}
html.nav-open,html.nav-open body{overflow:hidden!important}
@media(max-width:1040px){
  /* V88.5 — le tiroir passe AU-DESSUS de la barre du bas (60) et tient dans l’écran VISIBLE (dvh) : Réglages et Déconnexion restent atteignables */
  #sidebar{position:fixed; left:0; top:0; height:100vh; height:100dvh; transform:translateX(-100%); transition:transform .28s; box-shadow:none; z-index:65; -webkit-overflow-scrolling:touch}
  #sidebar.open{transform:none; box-shadow:var(--shadow-lg)}
  html{-webkit-text-size-adjust:100%} body{touch-action:manipulation}
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:var(--fs-16)}
  #pal{padding-top:env(safe-area-inset-top,0px)} .modal{padding-top:calc(20px + env(safe-area-inset-top,0px))}
  /* lot F (06/10) : plus de bouton de menu au téléphone — « Plus », dans la barre du bas, ouvre tout le menu */
  #drawer{width:100vw}
  .dt th.mh,.dt td.mh{display:none}
  #mobileNav{display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60; background:color-mix(in srgb,var(--surface) 92%,transparent);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--border); padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  #mobileNav button{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    color:var(--muted); font-weight:500; border-radius:var(--r-md); transition:color .15s, transform .15s}
  #mobileNav button:active{transform:scale(.96)}
  .volant a,.volant button{min-height:44px; font-size:var(--fs-13)}
  .volant svg{width:18px; height:18px}
}
/* ===== Tableau de bord ===== */
.pernav{display:inline-flex; align-items:center; gap:4px}
.pnb{border:1px solid var(--border-strong); display:grid; place-items:center; font-size:var(--fs-16); line-height:1; color:var(--muted); transition:background .12s,color .12s,border-color .12s}
.pnb:hover{color:var(--ink)}
.pnb svg{width:14px; height:14px}
.pnl{position:relative; font-weight:500; min-width:150px; justify-content:center}
.pnl input{position:absolute; inset:0; opacity:0; pointer-events:none; width:100%; height:100%}
.sens{display:inline-flex; align-items:center; gap:6px; font-weight:400; font-size:var(--fs-12); white-space:nowrap; color:var(--ink-2)}
.sens .pd{width:6px; height:6px; border-radius:var(--r-rond); background:currentColor; flex:none}
.sens.from .pd{background:var(--azur)} .sens.to .pd{background:var(--ambre)} .sens.both .pd{background:var(--s5)} .sens.none{color:var(--muted)} .sens.none .pd{background:var(--border-strong)}
.ovnext td{vertical-align:middle}
.ovnext th,.ovnext td{padding-left:var(--sp-3); padding-right:var(--sp-3)}
.ovnext .adr{font-size:var(--fs-12); color:var(--ink); white-space:normal; max-width:340px; margin-top:2px; line-height:1.4}
.ovnext .na{color:var(--muted)}
/* ===== Réservations : cartes ===== */
.bkc{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:14px 16px; margin-bottom:12px; box-shadow:var(--shadow-card); cursor:pointer}
.bkc .l1{display:flex; justify-content:space-between; align-items:center; gap:10px}
.bkc .st{font-weight:500; font-size:var(--fs-13); color:var(--ink-2); display:inline-flex; align-items:center; gap:7px}
.bkc .st::before{content:''; width:7px; height:7px; border-radius:var(--r-rond); background:var(--azur); flex:none}
.bkc.st-live .st::before{background:var(--good)} .bkc.st-terminee .st::before{background:var(--brume)} .bkc.st-annulee .st::before{background:var(--bad)} .bkc.st-attente .st::before{background:var(--warn)}
.bkc.st-annulee .st{color:var(--muted)}
.bkc .num{font-family:var(--font-code); color:var(--muted); font-size:var(--fs-12)}
.bkc .l2{display:flex; justify-content:space-between; align-items:center; margin-top:6px; font-size:var(--fs-13)}
.bkc .prix{font-family:var(--font-num); font-weight:600; font-size:var(--fs-15); font-variant-numeric:tabular-nums}
.bkc .lbl{font-size:var(--fs-11); color:var(--muted); margin-top:12px}
.bkc .big{font-size:var(--fs-20); font-weight:600; letter-spacing:-.02em; margin-top:2px}
.bkc .chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
.bkc .chip{padding:3px 9px; border-radius:var(--r-sm); background:var(--surface-2); font-size:var(--fs-12); font-weight:500; display:inline-flex; align-items:center; gap:5px; color:var(--ink-2)}
.bkc .chip svg{width:13px; height:13px} .bkc .chip.from,.bkc .chip.to{background:var(--surface-2); color:var(--ink-2)}
.bkc .chip.from::before,.bkc .chip.to::before{content:''; width:6px; height:6px; border-radius:var(--r-rond); background:var(--azur)}
.bkc .chip.to::before{background:var(--ambre)}
.bkc .psg{margin-top:10px; font-size:var(--fs-14); font-weight:600}
.bkc .psg small{font-weight:400; color:var(--ink-2); margin-left:6px; font-family:var(--font-num)}
.bkc hr{border:none; border-top:1px solid var(--grid); margin:12px 0}
.bkc .adr{font-size:var(--fs-14); margin-top:2px}
.bkc .drvbox{margin-top:12px; border:1px solid var(--border); border-radius:var(--r-md); padding:10px 12px; text-align:left; font-weight:500; background:var(--surface-3)}
.bkc .drvbox small{display:block; font-weight:400; color:var(--muted); font-family:var(--font-num)}
.bkc .drvbox.none{border-color:color-mix(in srgb,var(--bad) 35%,var(--border)); color:var(--texte-danger); background:transparent}
.bkc.st-aassigner .st::before{background:var(--bad)} .bkc.st-aassigner .st{color:var(--texte-danger)}
.wz{display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:var(--r-sm); background:var(--surface); color:var(--ink-2); font-size:var(--fs-12); font-weight:500; border:1px solid var(--border-strong); white-space:nowrap; vertical-align:middle; margin-left:8px; box-shadow:var(--shadow-ctl)}
.wz:hover{text-decoration:none; color:var(--ink); border-color:color-mix(in srgb,var(--border-strong) 55%,var(--muted))}
.wz svg{width:13px; height:13px; color:var(--muted)}
.bkc .adr-wz{display:flex; justify-content:space-between; align-items:center; gap:8px} .bkc .adr-wz .wz{flex:none; padding:8px 12px; font-size:var(--fs-13)}
[data-theme="dark"] .wz{color:var(--ink-2)}
.wz.gm{margin-left:4px} .wz.gm svg{color:var(--texte-ok)}
/* V55.0 — Dispatch : catégorie de véhicule, groupes, sélection */
.dspveh{display:inline-flex; align-items:center; padding:2px 8px; border-radius:6px; font-size:var(--fs-11); margin-right:var(--sp-2); color:#fff; background:var(--s5)}
.dspveh.van{background:var(--s2)} .dspveh.berline{background:var(--s1)} .dspveh.standard{background:var(--s4)} .dspveh.first{background:var(--s3)} .dspveh.autre{background:var(--muted)} .dspsub .cnt{font-weight:600}
.gchip{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:var(--r-pilule); border:1px solid var(--border-strong); color:var(--ink); font-size:var(--fs-12); cursor:pointer} .gchip .cnt{font-size:var(--fs-11); color:var(--muted)}
.tf-reg{margin-left:auto;flex:0 0 auto;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;letter-spacing:.3px;color:var(--muted);background:var(--accent-soft);padding:1px 6px;border-radius:5px}
.tf-verif{display:inline-flex;gap:5px;align-items:center}.tf-verif a{font-size:10px;line-height:15px;color:var(--muted);text-decoration:none;border:1px solid var(--border);border-radius:5px;padding:0 5px}.tf-verif a:hover{color:var(--ink);border-color:var(--border-strong);background:var(--accent-soft)}.tf-route .tf-verif{margin-top:4px}
.tf-scope{font-size:var(--fs-12);color:var(--ink-2);padding:8px 10px;background:var(--accent-soft);border-radius:var(--r-sm);margin:0 0 8px} .tf-scope .lnk{background:none;border:0;color:var(--texte-accent);cursor:pointer;font:inherit;text-decoration:underline;padding:0}
.fld-lab{display:block;font-size:var(--fs-12);color:var(--muted);margin-top:6px}
/* V55.0 — Notifications : pastilles de type plus lisibles */
.evrow2 .evic{border-radius:10px} .evrow2.ann .evic{background:var(--bad-soft);color:var(--texte-danger)} .evrow2.st .evic{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--texte-alerte)}
/* V55.0 — Analyse */
.anaj{margin:10px 0} .anajh{display:flex; justify-content:space-between; font-size:var(--fs-13); margin-bottom:4px} .anajb{height:8px; border-radius:var(--r-xs); background:var(--border); overflow:hidden} .anajb i{display:block; height:100%; border-radius:var(--r-xs)}
/* V55.0 — Historique */
 table.dt.hist tr.on td{background:var(--accent-soft)}
/* V55.0 — Paiements : tableau chauffeur × jour comme la capture GJ */
.seg.jours{gap:4px} .seg.jours button{padding:5px 10px; font-size:var(--fs-12)} .seg.jours button b{font-weight:600; color:var(--texte-accent); margin-left:2px} .seg.jours button.on b{color:inherit}
/* Zones : les actions de ligne n'apparaissent qu'au survol (souris) */
@media(hover:hover){
  #s-zones .dt td .btn.oz-z-ren,#s-zones .dt td .btn.oz-z-dup,#s-zones .dt td .btn.oz-z-del{opacity:0; transition:opacity .12s}
  #s-zones .dt tr:hover td .btn,#s-zones .dt td .btn:focus-visible{opacity:1}
}
/* ===== Objectifs ===== */
/* ===== Mobile ===== */
.mob-only{display:none}
.scrollx{flex-wrap:nowrap; overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.scrollx::-webkit-scrollbar{display:none}
.scrollx>*{flex:none}
/* V93.23 — une barre qui défile de côté montre sa suite : un fondu du côté où il reste quelque chose (barresSuivre, composants.js) */
.seg.deb-d{-webkit-mask-image:linear-gradient(to right,black calc(100% - 32px),transparent); mask-image:linear-gradient(to right,black calc(100% - 32px),transparent)}
.seg.deb-g{-webkit-mask-image:linear-gradient(to left,black calc(100% - 32px),transparent); mask-image:linear-gradient(to left,black calc(100% - 32px),transparent)}
.seg.deb-g.deb-d{-webkit-mask-image:linear-gradient(to right,transparent,black 32px,black calc(100% - 32px),transparent); mask-image:linear-gradient(to right,transparent,black 32px,black calc(100% - 32px),transparent)}
#s-search .search.big{padding:4px 14px; border-radius:var(--r-lg); margin-bottom:14px}
#s-search .search.big input{font-size:var(--fs-16); padding:10px 0}
.srow{display:flex; align-items:center; gap:12px; padding:11px 6px; border-bottom:1px solid var(--grid); cursor:pointer}
.srow .av{flex:none} .srow .sl{font-weight:500; font-size:var(--fs-14)} .srow .ss{font-size:var(--fs-12); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media(max-width:1040px){
  .mob-only{display:inline-flex}
  .toolrow{gap:8px}
  .bkc{padding:16px 16px 14px} .bkc .big{font-size:var(--fs-22)} .bkc .st{font-size:var(--fs-14)} .bkc .adr{font-size:var(--fs-15)} .bkc .psg{font-size:var(--fs-15)}
  /* métriques : le 1er chiffre pleine largeur (Finary), les deux suivants côte à côte, puis les compacts sur deux colonnes */
  .kpis,.kpis.flat,.kpis:has(>.kpi:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .kpi{grid-column:span 2; padding:16px 18px 14px}
  .kpi:nth-child(2),.kpi:nth-child(3){grid-column:span 1}
  .kpi:nth-child(-n+3) .val{font-size:var(--fs-26)}
  .kpi:nth-child(n+4){grid-column:span 1; padding:12px 14px 11px}
  .kpis:has(>.kpi:nth-child(4):last-child) .kpi{grid-column:span 1; padding:14px 16px 12px}
  .kpis:has(>.kpi:nth-child(4):last-child) .kpi .val{font-size:var(--fs-24)}
  .kpi.gj .lab{font-size:var(--fs-12)}
  .kpis.flat .kpi{grid-column:span 1} .card .ch .right{margin-left:auto} .card .ch .seg{flex-wrap:nowrap}
  .ovnext td{padding:12px 10px; font-size:var(--fs-14)} .ovnext .adr{font-size:var(--fs-13)}
  #mobileNav button{padding:8px 2px 4px} #mobileNav button svg{width:22px; height:22px}
  #drawer .dh{gap:8px} #drawerBackBtn{font-size:var(--fs-14); padding:8px 12px}
  #topbar{padding:calc(6px + env(safe-area-inset-top,0px)) 12px 6px; gap:6px; margin:0 -12px 10px; flex-wrap:nowrap; min-height:44px}
  #topbar h2{font-size:var(--fs-16); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46vw} #topbar h2::after{display:none}
  #topbar .datelbl,#liveTag,#freshTag,#searchBox{display:none!important}
  #topbar .titlebox{min-width:0} #buildTag{font-size:9.5px; padding:0; letter-spacing:0}
  main{padding:0 12px 92px}
  .toolrow{margin-bottom:8px} 
  #mobileNav button{position:relative} #mobileNav .ndot{position:absolute; top:2px; right:calc(50% - 22px)}
  .card.pad0{padding:0}
  .card.pad0>.ch{padding:14px 16px 0!important}
  .card.pad0>.tablewrap .dt th:first-child,.card.pad0>.tablewrap .dt td:first-child{padding-left:16px}
  .card.pad0>.tablewrap .dt th:last-child,.card.pad0>.tablewrap .dt td:last-child{padding-right:16px}
}
.chk{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-13); cursor:pointer; user-select:none}
.chk input{width:15px; height:15px; accent-color:var(--accent)}
.bkc .acts{display:flex; gap:8px; margin-top:12px}
.bkc .acts button{flex:1; justify-content:center; padding:10px 8px; font-size:var(--fs-13)}
/* ===== Tarifs ===== */
.tf-side,.tf-main{min-width:0}
.tf-side .ch{flex-wrap:wrap}
.tf-side{padding:14px 12px 10px; position:sticky; top:72px; max-height:calc(100vh - 120px); overflow:auto}
.tf-side .ch{margin-bottom:10px; padding:0 4px}
.tf-list{display:flex; flex-direction:column; gap:1px}
.tf-grp{margin-bottom:8px}
.tf-grp-t{font-size:var(--fs-11); font-weight:500; letter-spacing:.01em; text-transform:none; padding:8px 8px 4px; display:flex; align-items:center; gap:6px}
.tf-grp-t .cnt{font-weight:500; background:transparent; border:0; border-radius:0; padding:0; font-size:var(--fs-11); font-variant-numeric:tabular-nums}
.tf-grp-s{font-size:var(--fs-11); color:var(--muted); padding:0 8px 6px; line-height:1.35}
.tf-item{display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:5px 8px; border-radius:var(--r-sm); border:1px solid transparent; background:transparent; color:var(--ink-2); font-size:var(--fs-13); font-weight:500; cursor:pointer; transition:background .12s,color .12s}
.tf-item:hover{background:var(--side-hover); color:var(--ink)}
.tf-item.on{background:var(--side-on); border-color:transparent; color:var(--ink); font-weight:500}
.tf-item .dot{display:none}
.tf-item.off .dot{display:inline-block; background:var(--border-strong); width:6px; height:6px; flex:0 0 6px}
.tf-item.off .nm{color:var(--muted)}
.tf-item .nm{flex:1 1 auto; min-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tf-selmob{display:none; width:100%; max-width:100%; box-sizing:border-box; margin-bottom:12px}
.tf-head{display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--border)}
.tf-head .right{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.tf-title{font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--ink); display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.tf-danger{color:var(--texte-danger)}
.tf-form{margin:14px 0 4px; background:var(--surface-3); box-shadow:none; border:1px solid var(--border); border-radius:var(--r-md); padding:16px 18px}
.form-row.cols3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:760px){ .form-row.cols3{grid-template-columns:1fr} }
/* V46 — périmètre global (topbar) */
#scopeBtn{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);padding:6px 10px;border-radius:10px;white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis} #scopeBtn.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--texte-accent)} #scopeBtn svg{width:14px;height:14px}
.scopepop{display:none;position:fixed;top:calc(58px + env(safe-area-inset-top,0px));right:16px;left:auto;width:min(380px,94vw);max-height:min(78vh,720px);overflow:auto;background:var(--elevated);border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.25);z-index:70;padding:6px}
/* V90.4 — « Afficher les courses de… » : une ligne = un bouton radio, le nom, le nombre de COURSES ; les régions sous leur pays */
.scopepop.on{display:flex; flex-direction:column; padding:0; overflow:hidden}
.scp-tete{padding:14px 16px 11px; display:grid; gap:3px; border-bottom:1px solid var(--border)}
.scp-tete b{font-size:var(--fs-14); font-weight:600; color:var(--ink)}
.scp-tete span{font-size:var(--fs-12); color:var(--muted); line-height:1.4}
.scp-liste{padding:6px; overflow:auto; flex:1 1 auto; min-height:0}
.scopeitem{display:grid; grid-template-columns:16px minmax(0,1fr) auto; align-items:center; gap:11px; padding:9px 10px; border-radius:10px; cursor:pointer}
.scopeitem:hover{background:var(--surface-2)}
.scopeitem:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.scopeitem.on{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.scp-radio{width:16px; height:16px; border-radius:var(--r-rond); border:1.5px solid var(--border-strong); display:grid; place-items:center; box-sizing:border-box}
.scopeitem.on .scp-radio{border-color:var(--accent)}
.scopeitem.on .scp-radio::after{content:''; width:8px; height:8px; border-radius:var(--r-rond); background:var(--accent)}
.scp-nom{display:grid; gap:1px; min-width:0}
.scp-nom b{font-size:var(--fs-13); font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.scp-nom small{font-size:var(--fs-11); color:var(--muted)}
.scopeitem.on .scp-nom b{color:var(--texte-accent)}
.scp-nb{font-size:var(--fs-12); color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.scp-nb b{font-size:var(--fs-13); font-weight:600; color:var(--ink)}
.scp-nb.scp-zero{color:var(--faint)}
.scp-groupe{margin-top:6px; padding-top:6px; border-top:1px solid var(--border)}
.scp-pays .scp-nom b{font-size:var(--fs-14)}
.scp-region{margin-left:17px; padding-left:12px; border-radius:0 10px 10px 0; box-shadow:inset 1px 0 0 var(--border-strong)}
.scp-region .scp-nom b{font-weight:500; font-size:var(--fs-13)}
.scp-plus{display:block; margin:2px 0 4px 29px; padding:6px 10px; border:0; background:none; color:var(--texte-accent); font:inherit; font-size:var(--fs-12); cursor:pointer; border-radius:var(--r-sm)}
.scp-plus:hover{background:var(--surface-2)}
.scp-note{display:flex; gap:8px; align-items:flex-start; margin:0 12px 10px; padding:9px 11px; border-radius:10px; background:var(--surface-2); font-size:var(--fs-12); color:var(--ink-2); line-height:1.4}
.scp-note svg{width:14px; height:14px; flex:none; margin-top:1px; color:var(--muted)}
.scp-pied{display:flex; gap:8px; padding:10px 12px 12px; border-top:1px solid var(--border)}
.scp-pied .btn{flex:1 1 auto; justify-content:center; white-space:normal; text-align:center; line-height:1.25}
@media(max-width:760px){ #scopeBtn span{max-width:90px;overflow:hidden;text-overflow:ellipsis} .scopepop{top:auto;bottom:calc(74px + env(safe-area-inset-bottom,0px));right:8px;left:8px;width:auto;max-height:calc(100vh - 150px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))} }
.tf-inline{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.tf-inline input{border:1px solid var(--border-strong); background:var(--surface); border-radius:var(--r-sm); padding:6px 10px; min-height:40px}
.tf-adv{margin-top:2px; border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 14px; background:var(--surface)}
.tf-adv summary{cursor:pointer; font-size:var(--fs-13); color:var(--ink-2); font-weight:500}
.tf-dt{min-width:520px}
.tf-dt th,.tf-dt td{padding-left:10px; padding-right:10px}
.tf-dt td{padding-top:6px; padding-bottom:6px}
.tf-dt td:first-child{max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:normal}
.tf-ft{margin-top:3px; white-space:nowrap}
.tf-srch{display:flex; gap:8px; align-items:center; margin:14px 0 12px}
.tf-zone{display:inline-block; font-size:var(--fs-11); color:var(--ink-2); background:var(--surface-2); border:0; border-radius:var(--r-xs); padding:1px 6px}
.tf-cell{white-space:nowrap}
.tf-inwrap{display:inline-flex; align-items:center; gap:4px}
.tf-in{width:74px; text-align:right; border:1px solid transparent; background:transparent; border-radius:var(--r-sm); padding:4px 6px; font:inherit; font-variant-numeric:tabular-nums; font-weight:500; color:var(--ink); transition:border-color .12s,background .12s}
.tf-in:hover{border-color:var(--border-strong); background:var(--surface)}
.tf-in:focus{outline:none; border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px var(--ring)}
.tf-in:disabled{opacity:.5}
.tf-in::-webkit-outer-spin-button,.tf-in::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.tf-in{-moz-appearance:textfield}
.tf-inwrap .unit{font-size:var(--fs-12); color:var(--muted)}
.tf-cell.off .tf-in,.tf-cell.off .unit{opacity:.38; text-decoration:line-through}
.tf-tog{display:inline-flex; margin-left:6px; vertical-align:middle; cursor:pointer}
.tf-tog input{width:14px; height:14px; accent-color:var(--accent); cursor:pointer; margin:0}
.tf-act{white-space:nowrap}
.tf-act .tbtn{display:inline-flex; margin-left:4px; padding:0; width:28px; height:28px; min-height:0}
.tf-act .tbtn svg{width:14px; height:14px}
.tf-act .tf-del:hover{color:var(--texte-danger); border-color:color-mix(in srgb,var(--bad) 40%,var(--border-strong))}
@media(max-width:1040px){ .tf-side{position:static; max-height:none} .tf-side .tf-list,.tf-side .tf-srch{display:none} .tf-selmob{display:block} }
@media(max-width:760px){ .tf-dt{min-width:520px} }
.tf-save{margin-top:12px; padding:12px 4px 0; border-top:1px solid var(--grid)}
.tf-save .sub{margin-top:8px; line-height:1.5}
.tf-save .sub a{color:var(--texte-accent); font-weight:500; text-decoration:none}
.tf-save .sub a:hover{text-decoration:underline}
@media(max-width:1040px){ .tf-side .tf-save{display:block} }
/* ---------- Veille prix (Marché) ---------- */
.mkbar{display:flex; flex-direction:column; gap:8px; margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--border)}
.mkbar .t{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-weight:500; font-size:var(--fs-12); color:var(--ink-2)}
.mkbar .t .sub{margin:0; font-weight:400; font-size:var(--fs-12)}
.mkbar .t .mkchips{margin-left:auto}
.mkbar .ctrls{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:var(--fs-12)}
.mkbar .ctrls .applyGrp{margin-left:auto; display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap}
.mkbar .ctrls .sel{padding:3px 26px 3px 8px; font-size:var(--fs-12); min-height:40px}
.mkbar .marge{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-12); color:var(--muted)}
.mkbar .marge input{width:60px; text-align:right; font:inherit; font-size:var(--fs-12); font-variant-numeric:tabular-nums; font-weight:500; padding:3px 7px; border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); min-height:40px}
.mkbar .marge input[type=date]{width:auto; text-align:left}
.mkbar .pill{cursor:pointer}
.mkchips{display:flex; gap:2px; flex-wrap:wrap}
.mkchip{display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:var(--r-sm); font-size:var(--fs-11); font-weight:500; border:1px solid transparent; background:transparent; color:var(--ink-2); cursor:pointer}
.mkchip:hover{background:var(--surface-2)}
.mkchip .n{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink)}
.mkchip .pd{width:6px; height:6px; border-radius:var(--r-rond); background:currentColor}
.mkchip.gagne .pd{background:var(--good)} .mkchip.quasi .pd{background:var(--warn)} .mkchip.aligne .pd{background:var(--corail)} .mkchip.battu .pd{background:var(--bad)} .mkchip.seul .pd,.mkchip.sansPrix .pd,.mkchip.sansReleve .pd{background:var(--border-strong)}
.mkchip.gagne,.mkchip.quasi,.mkchip.aligne,.mkchip.battu{color:var(--ink-2)} .mkchip.seul,.mkchip.sansPrix,.mkchip.sansReleve{color:var(--muted)}
.mkchip.on{background:var(--surface-2); border-color:var(--border-strong)}
.mkpct{display:inline-flex; align-items:baseline; gap:5px; margin-right:8px; padding:2px 10px 2px 0; border-right:1px solid var(--border); font-size:var(--fs-11); color:var(--muted); font-weight:500} .mkpct b{font-family:var(--font-num); font-size:var(--fs-15); letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums}
@media(max-width:760px){ .mkbar .ctrls .applyGrp{margin-left:0} .mkbar .t .mkchips{margin-left:0} }
.tf-dt td.ck,.tf-dt th.ck{width:26px; padding-right:0; text-align:left}
.tf-dt th.tf-route,.tf-dt td.tf-route{text-align:left; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:normal}
.tf-dt.ve .tf-in{width:64px} .tf-dt.ve th,.tf-dt.ve td{padding-left:8px; padding-right:8px} .tf-dt .ck input{width:14px; height:14px; accent-color:var(--accent); margin:0; cursor:pointer}
.mk{display:block; margin-top:4px; font-size:var(--fs-11); line-height:1.35; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; text-align:left}
.mk .pd{display:inline-block; width:5px; height:5px; border-radius:var(--r-rond); margin-right:5px; vertical-align:middle; background:var(--border-strong)}
.mk .v{color:var(--ink-2)}
.mk .c{display:block; padding-left:10px; font-weight:500; color:var(--texte-accent)}
.mk .me{color:var(--muted)}
.mk.mz .c::before{content:'conseillé grille '}
.mk.mz{white-space:normal; max-width:210px} .mk.mz .me{white-space:nowrap}
#tfMozioAlign{margin-top:6px}
.mk .c::before{content:'conseillé '; color:var(--muted); font-weight:400}
.mk button.c{background:none; border:0; padding:0 0 0 10px; margin:0; cursor:pointer; font:inherit; font-size:var(--fs-11); font-weight:500; color:var(--texte-accent); text-align:left; border-radius:var(--r-xs)}
.mk button.c:hover{text-decoration:underline; background:transparent} .mk button.c:disabled{opacity:.5; cursor:default}
.mk .c.ok{color:var(--texte-ok)} .mk .me b{color:var(--ink-2); font-weight:600}
.tf-in.ve-set{border-color:color-mix(in srgb,var(--good) 45%,var(--border-strong)); background:var(--good-soft)}
.mk.gagne .pd{background:var(--good)} .mk.quasi .pd{background:var(--warn)} .mk.aligne .pd{background:var(--corail)} .mk.battu .pd{background:var(--bad)}
.mk.seul .v,.mk.sansReleve .v,.mk.sansPrix .v{color:var(--muted)}
.tf-in.ve-hot{border-color:color-mix(in srgb,var(--bad) 40%,var(--border-strong)); background:var(--bad-soft)}
/* statuts marché : un point coloré, du texte en encre */
.pill.ve-gagne .pd{background:var(--good)}
.pill.ve-quasi .pd{background:var(--warn)}
.pill.ve-aligne .pd{background:var(--corail)}
.pill.ve-battu{color:var(--ink); font-weight:500} .pill.ve-battu .pd{background:var(--bad)}
.pill.ve-seul,.pill.ve-sansPrix,.pill.ve-sansReleve{color:var(--muted)} .pill.ve-seul .pd,.pill.ve-sansPrix .pd,.pill.ve-sansReleve .pd{background:var(--border-strong)}
.pill.ve-pause .pd{background:var(--warn)}
.tf-dt td.mkcol{white-space:nowrap; text-align:left}
.tf-dt td.mkcol{display:table-cell} .tf-dt .mkcol .pill{display:inline-flex}
.tf-dt tr.st-battu>td:first-child{box-shadow:inset 2px 0 0 var(--bad)} .tf-dt tr.st-quasi>td:first-child{box-shadow:inset 2px 0 0 var(--warn)} .tf-dt tr.st-aligne>td:first-child{box-shadow:inset 2px 0 0 var(--corail)} .tf-dt tr.st-gagne>td:first-child{box-shadow:inset 2px 0 0 var(--good)} .tf-dt tr.st-seul>td:first-child,.tf-dt tr.st-sansReleve>td:first-child{box-shadow:inset 2px 0 0 var(--border-strong)}
.tf-dt tbody tr:hover>td{background:var(--surface-3)}
@media(max-width:1040px){ .tf-dt.cards tr.st-battu{border-left:3px solid var(--bad)} .tf-dt.cards tr.st-quasi{border-left:3px solid var(--warn)} .tf-dt.cards tr.st-gagne{border-left:3px solid var(--good)} .tf-dt.cards tr.st-seul,.tf-dt.cards tr.st-sansReleve{border-left:3px solid var(--border-strong)} .tf-dt.cards tr>td:first-child{box-shadow:none} }
.tf-dt .mkcol .apply{margin-top:5px; display:flex; align-items:center; gap:5px; width:fit-content}
.tf-dt .mkcol .apply svg{width:13px; height:13px}
.undo{display:inline-flex; align-items:center; justify-content:center; gap:3px; margin-left:4px; width:22px; height:22px; padding:0; border-radius:var(--r-rond); border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-2); font-size:var(--fs-12); font-weight:600; font-variant-numeric:tabular-nums; cursor:pointer; white-space:nowrap; vertical-align:middle; line-height:1}
.undo .amt{display:none}
.undo:hover{background:var(--ink); color:var(--page); border-color:var(--ink)}
.undo:disabled{opacity:.5; cursor:default}
.ve-stat{display:grid; grid-template-columns:minmax(200px,260px) minmax(0,1fr); gap:22px; align-items:start}
.ve-stat .val{font-family:var(--font-num); font-size:var(--fs-32); font-weight:600; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums}
.ve-stat .delta{display:inline-flex; align-items:center; gap:4px; margin-top:6px; font-size:var(--fs-12); font-weight:500; font-variant-numeric:tabular-nums}
.ve-stat .delta.up{color:var(--texte-ok); background:transparent; padding:0; border-radius:0} .ve-stat .delta.down{color:var(--texte-danger); background:transparent; padding:0; border-radius:0} .ve-stat .delta.flat{color:var(--muted)}
.ve-stat .delta svg{width:13px; height:13px}
@media(max-width:760px){ .ve-stat{grid-template-columns:1fr} }
@media(max-width:1040px){
  .tf-dt.cards{min-width:0; width:100%}
  .tf-dt.cards thead{display:none}
  .tf-dt.cards,.tf-dt.cards tbody{display:block}
  .tf-dt.cards tr{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; padding:12px 12px 12px; border-bottom:1px solid var(--grid)}
  .tf-dt.cards td{display:block; border:0; padding:0; white-space:normal; text-align:left; max-width:none}
  .tf-dt.cards td.ck{position:absolute; right:12px; top:12px; width:auto}
  .tf-dt.cards td.tf-route{grid-column:1/-1; padding-right:34px}
  .tf-dt.cards td.tf-cell{background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r-sm); padding:8px 10px; min-width:0}
  .tf-dt.cards td.tf-cell::before{content:attr(data-l); display:block; font-size:var(--fs-11); letter-spacing:0; text-transform:none; color:var(--muted); font-weight:500; margin-bottom:3px}
  .tf-dt.cards td.tf-cell.ar{grid-column:1/-1}
  .tf-dt.cards td.tf-cell .tf-in{width:78px; font-size:var(--fs-15)}
  .tf-dt.cards .mk{white-space:normal; margin-top:6px}
  .tf-dt.cards .undo{width:auto; height:auto; padding:2px 8px; border-radius:var(--r-sm); font-size:var(--fs-11)}
  .tf-dt.cards .undo .amt{display:inline}
  .tf-dt.cards td.mkcol{grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:8px; white-space:normal}
  .tf-dt.cards td.mkcol .apply{margin:0}
  .tf-dt.cards td.empty{grid-column:1/-1; text-align:center}
  .tf-dt.cards td.mono{font-variant-numeric:tabular-nums}
  .tf-dt.cards td.mono::before{content:attr(data-l); display:block; font-size:var(--fs-11); letter-spacing:0; text-transform:none; color:var(--muted); font-weight:500; margin-bottom:3px}
}
/* ---------- Majorations ---------- */
.ana{padding:14px 0 6px; border-top:1px solid var(--border)}
.ana:first-of-type{border-top:0}
.ana-h{display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:12px; align-items:start}
.ana-h .k{width:24px; height:24px; border-radius:6px; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-2); font-weight:600; font-size:var(--fs-11); font-variant-numeric:tabular-nums}
.ana-h b{font-size:var(--fs-13)}
.ana-h .sub{margin:2px 0 0}
.ana-res{font-size:var(--fs-12); color:var(--ink-2); white-space:nowrap; background:var(--surface-2); border:0; border-radius:var(--r-sm); padding:4px 10px; font-variant-numeric:tabular-nums}
.ana-res b{color:var(--ink)}
@media(max-width:760px){ .ana-h{grid-template-columns:24px minmax(0,1fr)} .ana-res{grid-column:2; justify-self:start; white-space:normal} }
.bars{display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); gap:3px; align-items:end; height:104px; margin:18px 0 4px; padding:0 2px}
.bars .b{position:relative; min-height:6px; transition:background .15s}
.bars .b.d{border-top-color:var(--border-strong)}
.bars .b.x{background:repeating-linear-gradient(135deg,var(--grid) 0 4px,transparent 4px 8px); border-top:2px dashed var(--border-strong)}
.bars .b span{position:absolute; left:50%; transform:translateX(-50%); top:-16px; font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.barsx{display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); gap:3px; font-size:10px; color:var(--muted); text-align:center; font-variant-numeric:tabular-nums}
.barsx{overflow:visible}
.barsx span{white-space:nowrap; overflow:visible}
.barsx span:nth-child(even){visibility:hidden}
@media(max-width:760px){ .barsx span{visibility:hidden} .barsx span:nth-child(4n+1){visibility:visible} .bars .b span{display:none} .bars{height:84px; margin-top:8px} }
.rules{display:grid; gap:8px}
.rule{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 14px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface)}
.rule .nm{font-weight:500; font-size:var(--fs-13); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.rule .dt2{font-size:var(--fs-12); color:var(--muted); margin-top:3px; font-variant-numeric:tabular-nums}
.rule .pc{font-family:var(--font-num,inherit); font-weight:600; font-size:var(--fs-16); color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.rule .go{display:flex; align-items:center; gap:14px}
@media(max-width:760px){ .rule{grid-template-columns:1fr} .rule .go{justify-content:space-between} }

/* ============ V54.0 (LOT 9 et 8) — Alertes d'exploitation (Réglages › Telegram) ============
   Cibles tactiles à 44 px sous 760 px, 40 px au-dessus (LOT 12.1), champs à 16 px sur
   téléphone pour empêcher le zoom automatique de Safari (LOT 12.3). */
.tgalertes{margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--grid)}
.tgalertes .albloc{margin-top:var(--sp-3); padding:var(--sp-3) var(--sp-4); border:1px solid var(--grid); border-radius:var(--r-md); background:var(--fond-2, transparent)}
.tgalertes .alhead{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap}
.tgalertes .alhead .alopt{font-weight:600; font-size:var(--fs-14)}
.tgalertes .sub{font-size:var(--fs-12); color:var(--ink-2); margin:var(--sp-2) 0 var(--sp-3); line-height:1.5}
.tgalertes .alrow{display:flex; gap:var(--sp-4); flex-wrap:wrap; align-items:flex-end}
.tgalertes .alnum{margin:0; position:relative}
.tgalertes .alnum input{width:120px; min-height:40px}
.tgalertes .alnum select{min-height:40px}
.tgalertes .alsuf{margin-left:var(--sp-2); font-size:var(--fs-12); color:var(--ink-2)}
.tgalertes .alsec{margin-top:var(--sp-3)}
.tgalertes .allab{display:block; font-size:var(--fs-12); font-weight:600; color:var(--ink-2); margin-bottom:var(--sp-2)}
.tgalertes .allist{display:flex; gap:var(--sp-2) var(--sp-4); flex-wrap:wrap}
.alopt{display:inline-flex; align-items:center; gap:var(--sp-2); min-height:40px; font-size:var(--fs-13); cursor:pointer}
.alopt input{width:18px; height:18px; accent-color:var(--accent); flex:none}
.tgalertes .alact{display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-4)}
@media (max-width:760px){
  .tgalertes .alrow{gap:var(--sp-3)}
  .tgalertes .alnum input,.tgalertes .alnum select{width:100%; min-height:44px; font-size:var(--fs-16)}
  .tgalertes .alnum{flex:1 1 100%}
  .alopt{min-height:44px}
  .alopt input{width:22px; height:22px}
  .tgalertes .alact .btn{min-height:44px; flex:1 1 auto}
}

/* ============ V55.0 (LOT 10) — bandeau « report de … ? » dans la fiche course ============ */
.reportbn{display:flex; gap:var(--sp-3); align-items:flex-start; justify-content:space-between; flex-wrap:wrap;
  margin:var(--sp-3) var(--sp-4) 0; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md);
  background:var(--warn-soft); border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}
.reportbn.lie{background:var(--good-soft); border-color:color-mix(in srgb,var(--good) 30%,transparent)}
.reportbn .rbtx{flex:1 1 220px; font-size:var(--fs-13); line-height:1.45}
.reportbn .rbtx svg{width:15px; height:15px; vertical-align:-2px; margin-right:4px}
.reportbn .rbtx small{display:block; margin-top:var(--sp-1); font-size:var(--fs-12); color:var(--ink-2); line-height:1.5}
.reportbn .rbact{display:flex; gap:var(--sp-2); flex:none}
.reportbn .btn{min-height:40px}
@media (max-width:760px){
  .reportbn{margin:var(--sp-3) var(--sp-3) 0}
  .reportbn .rbact{width:100%}
  .reportbn .btn{min-height:44px; flex:1 1 auto; justify-content:center}
}

/* ============ V56.0 (LOT 11) — Réglages › Intégrations (rendu depuis le catalogue) ============ */
details.intg{border:1px solid var(--grid); border-radius:var(--r-md); margin-top:var(--sp-2); background:transparent}
details.intg>summary{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding:var(--sp-3) var(--sp-4);
  min-height:44px; cursor:pointer; list-style:none; font-size:var(--fs-13)}
details.intg>summary::-webkit-details-marker{display:none}
details.intg>summary::before{content:''; width:0; height:0; border-left:5px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent; color:var(--ink-2); flex:none; transition:transform .15s var(--ease)}
details.intg[open]>summary::before{transform:rotate(90deg)}
.intgnom{font-weight:600; flex:1 1 auto}
.intgcat{font-size:var(--fs-11); color:var(--ink-2)}
.intgms{font-size:var(--fs-11)}
.intgdot{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-11); font-weight:600; padding:2px 10px; border-radius:var(--r-pilule);
  background:color-mix(in srgb,var(--ink-2) 12%,transparent); color:var(--ink-2)}
.intgdot.good{background:var(--good-soft); color:var(--texte-ok)}
.intgdot.warn{background:var(--warn-soft); color:var(--texte-alerte)}
.intgdot.bad{background:color-mix(in srgb,var(--bad) 14%,transparent); color:var(--texte-danger)}
.intgbody{padding:0 var(--sp-4) var(--sp-4); border-top:1px solid var(--grid)}
.intgbody .sub{margin:var(--sp-3) 0}
.intgmanque,.intgerr{font-size:var(--fs-12); line-height:1.5; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); margin-bottom:var(--sp-3)}
.intgmanque{background:var(--warn-soft); color:var(--texte-alerte)}
.intgerr{background:color-mix(in srgb,var(--bad) 10%,transparent); color:var(--texte-danger)}
.intgform{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--sp-3)}
.intgf{margin:0}
.intgf input{min-height:40px}
.intgf .req{font-size:var(--fs-11); color:var(--texte-alerte); font-weight:600}
.intgf small{display:block; margin-top:var(--sp-1); font-size:var(--fs-11); line-height:1.45}
.intgact{display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-4); align-items:center}
.intgact .btn{min-height:40px}
.intgh{margin:var(--sp-4) 0 var(--sp-2); font-size:var(--fs-12); color:var(--ink-2)}
.intgcalls{display:flex; flex-direction:column; gap:2px}
.intgcalls .ic{display:grid; grid-template-columns:96px 110px 1fr 64px; gap:var(--sp-2); align-items:center;
  font-size:var(--fs-11); padding:4px var(--sp-2); border-radius:6px}
.intgcalls .ic.ok{color:var(--ink-2)}
.intgcalls .ic.ko{background:color-mix(in srgb,var(--bad) 8%,transparent); color:var(--texte-danger)}
.intgcalls .ict,.intgcalls .ica{font-variant-numeric:tabular-nums}
.intgcalls .icm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.intgcalls .icl{text-align:right}
@media (max-width:760px){
  details.intg>summary{padding:var(--sp-3); min-height:48px}
  .intgform{grid-template-columns:1fr}
  .intgf input{min-height:44px; font-size:var(--fs-16)}
  .intgact .btn{min-height:44px; flex:1 1 auto; justify-content:center}
  .intgcalls .ic{grid-template-columns:84px 1fr; row-gap:0}
  .intgcalls .ica,.intgcalls .icl{display:none}
}

/* ================= V57.0 (LOT 12) — TÉLÉPHONE =================
   L'utilisateur est un chauffeur VTC, debout à l'aéroport ou au volant à l'arrêt : une main,
   parfois des gants, en plein soleil. Ce bloc tient les trois règles qui décident de tout :
   12.1 cibles de 44 px et espacées · 12.3 champs à 16 px (sinon Safari zoome et la page saute)
   · zone du pouce (les actions fréquentes en bas, jamais le dangereux sous le pouce).
   Deux seuils, deux seulement : 760 px (téléphone) et 1040 px (tablette). */
@media (max-width:760px){
  /* 12.3 — sous 16 px, iOS zoome dès qu'on touche le champ. Le défaut mobile le plus visible. */
  input, select, textarea, .search input, .field input, .field select, .field textarea{ font-size:var(--fs-16) }

  /* 12.1 — tout ce qui se touche fait au moins 44 px de haut. */
  .btn,a.btn,button,.seg > button,.sel,.dd-btn,.chip,summary,input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,.search{ min-height:44px }
  .btn.sm, .btn.ico{ min-height:44px }
  input[type=checkbox], input[type=radio]{ width:22px; height:22px }

  /* Deux cibles de 44 px collées l'une à l'autre restent impossibles à viser. */
  .acts .btn + .btn,.row .btn + .btn,.go .btn + .btn{ gap:10px }
  .seg > button + button{ margin-left:2px }

  /* La barre du haut aussi : ces boutons restaient à 40 px (mesuré au navigateur). */
  #menuToggle, #scopeBtn, #refreshBtn, #themeBtn, #logoutBtn, .topbar .btn{ min-height:44px }
  #menuToggle, #refreshBtn, #themeBtn{ min-width:44px }

  /* Rien qui dépende du survol : une info-bulle n'existe pas sur un écran tactile. */
  [title]:not(a):not(button){ position:relative }
}
@media (hover:none){
  /* Ce qui n'apparaissait qu'au survol devient visible en permanence. */
  .re, .copybtn{ opacity:1 !important }
}

/* ============ V57.0 (LOT 12.4) — bandeau hors-ligne PERSISTANT ============ */
#offBar[hidden]{display:none!important}   /* `display:flex` ci-dessous l'emporterait sur l'attribut `hidden` */
#offBar{position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; align-items:center; justify-content:center;
  gap:var(--sp-3); flex-wrap:wrap; min-height:44px;
  padding:var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom));
  background:var(--warn); color:#1b1200; font-size:var(--fs-13); font-weight:600;
  box-shadow:0 -2px 12px rgba(0,0,0,.18)}
#offBar .btn{min-height:36px; background:rgba(255,255,255,.9); border-color:transparent; color:#1b1200}
body.hors-ligne #mobileNav{bottom:44px}

/* ===== V63.0 — PICTOGRAMMES EN SVG =====
   Plus aucun caractère Unicode décoratif dans l'interface : une police chargée en
   sous-ensemble peut déclarer un caractère sans le fournir, et le navigateur dessine
   alors un carré ou un point d'interrogation à la place. Un SVG ne dépend d'aucune police. */
.gi,.svgi{width:1em; height:1em; display:inline-block; vertical-align:-.14em; flex:none}
.btn .gi,.copybtn .gi,.tbtn .gi{width:14px; height:14px; vertical-align:-.18em}
.pnb .gi{width:15px; height:15px; vertical-align:0}
.chip .gi,.badge .gi,.svc .gi{width:12px; height:12px; vertical-align:-.13em}

/* ===== V63.0 — CLASSEMENTS « 15e de tous les temps » =====
   Discret sous le chiffre : c'est un complément, pas un indicateur. Cliquable. */
.rang{display:inline-block; padding:1px 8px; border-radius:var(--r-pilule);
  border:1px solid var(--border); background:var(--surface-2); color:var(--ink-2);
  font-size:var(--fs-11); font-weight:600; font-variant-numeric:tabular-nums; line-height:16px;
  cursor:pointer; white-space:nowrap; transition:background .12s, border-color .12s, color .12s}
.rang:hover{background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 32%,transparent); color:var(--texte-accent)}
.rang sup{font-size:9px; line-height:0; vertical-align:super; font-weight:600}
.rang .rt{font-weight:500; margin-left:3px}
/* V63.1 — le rang tient dans le chip de variation : « ↑ +124 % · 1er » */
.kpi .delta.rangbtn{cursor:pointer; border:1px solid transparent; transition:border-color .12s, filter .12s}
.kpi .delta.rangbtn:hover{border-color:currentColor; filter:brightness(1.04)}
.kpi .delta .rgx{opacity:.72; font-weight:600; margin-left:1px}
/* seul dans son chip, le rang prend la pastille neutre : sinon il flotte en gris
   au milieu de la carte et ressemble à une coquille. */
.kpi .delta.n.rangbtn{padding:1px 8px; border-radius:6px; background:var(--surface-2); color:var(--ink-2)}
.kpi .delta.n.rangbtn .rgx{opacity:1; color:var(--ink-2)}
.kpi .delta .rgx sup{font-size:.62em; line-height:0; vertical-align:super}
.rangtab tr.on{background:var(--accent-soft)} .rangtab tr.on td{font-weight:600; color:var(--ink)}
.ovmois .kpis{margin-top:12px}
.ovmois .kpi{background:var(--surface); border:1px solid var(--border)}

/* ==================================================================
   V63.0 — BOUTONS EN PILULE, FAÇON FINARY (demande youcef)
   ------------------------------------------------------------------
   Le principe : un bouton se reconnaît à sa FORME et à son APLAT, pas
   à son relief. On enlève donc partout le reflet intérieur, l'ombre
   portée et la bordure de contraste, on arrondit complètement, et on
   respire un peu plus sur les côtés. Le secondaire n'est plus un
   contour : c'est un aplat gris très doux, qui laisse le bouton
   principal seul en couleur sur l'écran.
   Ce bloc est en fin de fichier : il redéfinit l'apparence sans
   toucher aux règles de structure (tailles de cible, disposition).
   ================================================================== */
.btn{border-radius:var(--r-pilule); font-weight:600; letter-spacing:-.005em;
  border:1px solid transparent; box-shadow:none}
.btn:hover{box-shadow:none; border-color:transparent}
.btn:active{transform:translateY(.5px)}
.btn.sm{font-weight:600}
.btn.ico{border-radius:var(--r-pilule)}

/* secondaire : aplat gris, aucun contour */
.btn.ghost{background:var(--surface-2); color:var(--ink); border-color:transparent; box-shadow:none}
.btn.ghost:hover{color:var(--ink); border-color:transparent; box-shadow:none}
.btn.ghost svg{color:var(--muted)}
.btn.ghost:hover svg{color:var(--ink-2)}

/* pleins de couleur : même traitement, le relief part */
.btn.ok,.btn.confirm,.btn.gold{border-color:transparent; box-shadow:none}
.btn.assign,.btn.asg{border-radius:var(--r-pilule); box-shadow:none}
.btn.asg:hover{border-color:transparent}

/* les commandes de barre d'outils suivent la même famille */
.tbtn,.dd-btn{border-radius:var(--r-pilule); padding:6px 14px; border-color:transparent;
  background:var(--surface-2); box-shadow:none; font-weight:600}
.tbtn:hover,.dd-btn:hover{background:color-mix(in srgb,var(--ink) 9%,var(--surface-2)); border-color:transparent}
.tbtn.icon{border-radius:var(--r-pilule); padding:0}
.pnb{border-radius:var(--r-pilule); border-color:transparent; background:var(--surface-2); box-shadow:none;
  width:32px; height:32px}
.pnb:hover{background:color-mix(in srgb,var(--ink) 9%,var(--surface-2)); border-color:transparent}
.pnl{border-radius:var(--r-pilule)}

/* segments : une piste arrondie, une pastille arrondie */
.seg{border-radius:var(--r-pilule)}
.seg button{border-radius:var(--r-pilule)}
.seg button.on{box-shadow:0 1px 2px rgba(23,24,28,.07); border-color:transparent}
.seg.tabs{border-radius:0; padding:0}
.seg.tabs button{border-radius:0}

/* champs : même rondeur, pour que la barre d'outils tienne ensemble */
.sel,.search{border-radius:var(--r-pilule); padding-left:14px; padding-right:14px; box-shadow:none;
  border-color:var(--border)}
.sel:focus,.search:focus-within{border-color:var(--accent)}
.search{padding-left:12px}
.gchip{box-shadow:none; border-color:transparent; background:var(--surface-2); font-weight:600}
.gchip:hover{border-color:transparent; background:color-mix(in srgb,var(--ink) 9%,var(--surface-2))}
.gchip.fav{background:color-mix(in srgb,var(--warn) 14%,var(--surface-2)); border-color:transparent}

/* la rangée de puces de période (Réservations) : des pilules, elles aussi */

/* en sombre, l'aplat secondaire doit rester lisible sans devenir un trou noir */
html[data-theme="dark"] .btn.ghost,html[data-theme="dark"] .tbtn,
html[data-theme="dark"] .dd-btn,html[data-theme="dark"] .pnb,
html[data-theme="dark"] .seg.fam button,html[data-theme="dark"] .gchip{
  background:color-mix(in srgb,#ffffff 8%,transparent)}
html[data-theme="dark"] .btn.ghost:hover,html[data-theme="dark"] .tbtn:hover,
html[data-theme="dark"] .dd-btn:hover,html[data-theme="dark"] .pnb:hover,
html[data-theme="dark"] .seg.fam button:hover,html[data-theme="dark"] .gchip:hover{
  background:color-mix(in srgb,#ffffff 14%,transparent)}

/* ===== V63.1 — LE PROCHAIN ARRÊT DE VENTE (tableau de bord) =====
   Un bandeau seulement quand il y a quelque chose à dire ; ambré quand les ventes
   sont fermées EN CE MOMENT, neutre quand c'est simplement le prochain prévu. */
.ovav{display:flex; align-items:center; gap:12px; width:100%; text-align:left; margin:14px 0 0;
  padding:11px 14px; border-radius:var(--r-card); border:1px solid var(--border);
  background:var(--surface); color:var(--ink); cursor:pointer;
  transition:border-color .12s, background .12s}
.ovav:hover{border-color:var(--accent)}
.ovav .ic{display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:var(--r-rond);
  background:var(--surface-2); color:var(--muted)}
.ovav .ic svg{width:15px; height:15px}
.ovav .tx{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.ovav .tx b{font-size:var(--fs-13); font-weight:600}
.ovav .d{font-size:var(--fs-12); color:var(--muted); white-space:normal}
.ovav .go{display:inline-flex; align-items:center; gap:5px; flex:none; font-size:var(--fs-12);
  font-weight:600; color:var(--texte-accent)}
.ovav .go svg{width:14px; height:14px}
.ovav.on{border-color:color-mix(in srgb,var(--warn) 45%,transparent);
  background:color-mix(in srgb,var(--warn) 8%,var(--surface))}
.ovav.on .ic{background:color-mix(in srgb,var(--warn) 18%,transparent); color:var(--texte-alerte)}
@media(max-width:760px){ .ovav{flex-wrap:wrap} .ovav .go{width:100%; justify-content:flex-end} }

/* ===== V63.1 — LE BANDEAU D'INTERCONNEXION =====
   Il n'apparaît que si l'écran est filtré par un lien venu d'ailleurs, et il dit
   exactement quoi : sans lui, une liste courte ressemble à une liste vide. */
.lienbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px;
  padding:9px 14px; border-radius:var(--r-pilule); font-size:var(--fs-12);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,var(--surface)); color:var(--ink)}
.lienbar .ic{display:inline-flex; color:var(--texte-accent)}
.lienbar .ic svg{width:15px; height:15px}
.lienbar .tx{flex:1; min-width:0}
.lienbar b{font-weight:600}
/* Tout ce qui mène ailleurs se reconnaît au même trait : un soulignement discret
   qui n'apparaît qu'au survol. Jamais de bleu de lien au milieu d'un tableau. */
[data-va]{cursor:pointer}
a[data-va],span[data-va],b[data-va]{text-decoration:none; border-bottom:1px dotted transparent; transition:border-color .12s, color .12s}
a[data-va]:hover,span[data-va]:hover,b[data-va]:hover{color:var(--texte-accent); border-bottom-color:currentColor}
.dt td [data-va]:hover{color:var(--texte-accent)}

/* Une carte ou une barre qui mène ailleurs : le curseur et un liseré au survol
   suffisent. Pas de flèche permanente qui encombrerait toutes les cartes. */
.kpi.va,.hbar.va{cursor:pointer}
.kpi.va{transition:border-color .12s, box-shadow .12s}
.hbar.va .nm{transition:color .12s}
.hbar.va:hover .nm{color:var(--texte-accent)}

/* Un écran qui reçoit le focus après un saut ne doit pas se dessiner un contour :
   c'est un point de départ pour la tabulation, pas un élément interactif. */
.screen:focus{outline:none}

/* V63.3 — sur téléphone, le titre de page était coupé net au milieu d'un mot
   (« Tableau de bor »). Il rétrécit et s'achève par des points de suspension. */
#pageTitle{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ================= V64.0 (chantier 6, lot A1) — bandeau « ventes arrêtées » =================
   Rouge sans être une erreur : ce n'est pas la machine qui a raté, c'est une règle qui s'applique.
   Le bouton de forçage reprend `.btn.confirm` (le rouge déjà réservé aux gestes irréversibles). */
.arrbloc{padding:14px 16px; border-color:color-mix(in srgb,var(--bad) 42%,var(--border));
  background:color-mix(in srgb,var(--bad) 5%,var(--surface))}
.arrbloc .ch h3{display:flex; align-items:center; gap:8px; color:var(--texte-danger)}
.arrbloc .ch h3 svg{width:16px; height:16px; flex:none}
.arrmot{margin:2px 0 12px; font-size:var(--fs-13); line-height:1.55; color:var(--ink)}
.arrbloc .arrnote{margin:12px 0 0}
.arrhint{font-size:var(--fs-12); color:var(--ink-2); line-height:1.45}
.arracts{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap}
@media(max-width:760px){ .arracts .btn{flex:1 1 auto; justify-content:center} }

/* ================= V64.0 (chantier 6, lot M1) — FEUILLE D'ACTIONS (bottom sheet) =================
   Elle monte du bas : c'est là que vit le pouce, et c'est le geste que le téléphone a appris à
   l'utilisateur partout ailleurs. Chaque rangée fait 52 px — on la touche en marchant. */
.sheet-back{position:fixed; inset:0; z-index:var(--z-feuille)}
.sheet-back[hidden]{display:none}
.sheet-voile{position:absolute; inset:0; background:rgba(10,12,16,.42); opacity:0; transition:opacity .18s var(--ease)}
.sheet-back.on .sheet-voile{opacity:1}
.sheet{position:absolute; left:0; right:0; bottom:0; max-height:82vh; overflow-y:auto;
  background:var(--surface); border-top:1px solid var(--border); border-radius:18px 18px 0 0;
  box-shadow:0 -12px 40px rgba(10,12,16,.22); padding:8px 12px calc(12px + env(safe-area-inset-bottom,0px));
  transform:translateY(102%); transition:transform .2s var(--ease)}
.sheet-back.on .sheet{transform:none}
.sheet-grip{width:38px; height:4px; border-radius:2px; background:var(--border-strong); margin:4px auto 10px}
.sheet-h{font-weight:600; font-size:var(--fs-15); padding:0 6px; letter-spacing:-.015em; color:var(--ink)}
.sheet-s{font-size:var(--fs-12); color:var(--muted); padding:3px 6px 8px; line-height:1.45}
.sa{display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:10px 8px; border:0;
  background:none; color:var(--ink); font:inherit; font-size:var(--fs-14); text-align:left;
  border-radius:var(--r-md); cursor:pointer; text-decoration:none}
.sa+.sa{border-top:1px solid var(--grid)}
.sa:active{background:var(--surface-2)}
.sa:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.sa svg{width:19px; height:19px; color:var(--muted); flex:none}
.sa .sa-t{display:flex; flex-direction:column; min-width:0}
.sa .sa-t small{font-size:var(--fs-12); color:var(--muted); font-weight:400; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sa.dgr,.sa.dgr svg{color:var(--texte-danger)}
.sheet-x{width:100%; min-height:52px; margin-top:8px; border:1px solid var(--border-strong);
  background:var(--surface-2); color:var(--ink); border-radius:var(--r-md); font:inherit;
  font-weight:500; font-size:var(--fs-14); cursor:pointer}
body.sheet-on{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .sheet,.sheet-voile{transition:none} }
/* Un appui long ne doit pas déclencher la loupe de sélection d'iOS. */
.bkc,#bkRows tr[data-ref]{-webkit-touch-callout:none}
/* Les trois gestes du déplacement, en vrais boutons dans la carte. */
.bkc .qamob{display:flex; gap:8px; margin-top:10px}
.bkc .qamob .btn{flex:1 1 0; min-width:0; justify-content:center; min-height:48px; padding:10px 6px; font-size:var(--fs-13)}
.bkc .qamob .btn.plus{flex:0 0 52px}
.bkc .qamob .btn svg{width:16px; height:16px}

/* ================= V64.0 (chantier 6, lot M5) — LA SAISIE AU TÉLÉPHONE =================
   iOS zoome sur TOUT champ dont la police descend sous 16 px, et ne dézoome jamais tout seul :
   chaque saisie laissait l'écran décalé, à recadrer à la main. Les tailles étaient déclarées à
   treize endroits (13 px, 13,5 px, 14,5 px, `.field input`, `.dt input`, `.prow input`…) : un
   token et UNE règle, plutôt qu'une correction champ par champ qu'on oubliera au suivant.
   `!important` est ici délibéré — c'est la seule façon de passer devant treize sélecteurs plus
   spécifiques sans les réécrire tous, et le périmètre est borné à une seule requête média.
   Cases à cocher et boutons radio exclus : dans Safari leur TAILLE dépend de la police. */
:root{ --fs-input-mobile:16px }
/* `hover:none` en plus de la largeur : un iPad en paysage fait 1024 px et zoome exactement
   comme un iPhone — c'est le doigt qui declenche le zoom, pas la taille de l'ecran. */
@media(max-width:760px),(hover:none){
  input:not([type="checkbox"]):not([type="radio"]),select,textarea,
  .field input,.field select,.field textarea,.prow input,.dt input,.dt select{
    font-size:var(--fs-input-mobile)!important}
}

/* ---- Barre d'action collante des formulaires longs ---- */
.formbar{display:none}
@media(max-width:1040px){
  #s-new.on .formbar{display:flex; align-items:center; gap:12px;
    position:fixed; left:0; right:0; z-index:59; bottom:var(--bas-colle);
    padding:8px 14px; border-top:1px solid var(--border);
    background:color-mix(in srgb,var(--surface) 94%,transparent);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
  /* la page se termine au-dessus de la barre, sinon elle mange le dernier champ */
  #s-new.on{padding-bottom:76px}
  /* ⚠ UN `transform` SUR UN ANCÊTRE FAIT DE LUI LE BLOC CONTENEUR D'UN `position:fixed`.
     `.screen` entre avec `translateY(3px)` : pendant les 220 ms de l'animation, la barre
     retombait dans le flux et sautait — vu au navigateur à 390 px, pas deviné. Même fondu,
     sans déplacement, sur le seul écran qui porte une barre fixe. */
  #s-new.on{animation:fadeplat .22s ease}
}
@keyframes fadeplat{from{opacity:0}to{opacity:1}}
.formbar .fb-t{display:flex; flex-direction:column; min-width:0; flex:1 1 auto}
.formbar .fb-k{font-size:var(--fs-11); color:var(--muted)}
.formbar .fb-v{font-family:var(--font-num); font-weight:700; font-size:var(--fs-20); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.formbar .btn{min-height:48px; padding:0 20px; font-size:var(--fs-15); flex:0 0 auto}

/* ---- Adresses récemment utilisées (cache d'usage local) ---- */
.ca-pop .ca-t{padding:6px 10px 4px; min-height:0; cursor:default}
.ca-pop .ca-t:hover{background:transparent}

/* ================= V64.0 (chantier 6) — UNE SEULE MESURE POUR CE QUI SE COLLE EN BAS =================
   La barre de navigation mobile fait 67 px — mesurée au navigateur à 375, 390, 760, 768, 900 et
   1040 px : la même partout. Tout ce qui se colle au bas de l'écran (la zone du pouce de « Au
   volant », la barre d'action de Nouvelle réservation) doit s'arrêter AU-DESSUS d'elle, sinon la
   dernière rangée de boutons passe dessous — c'est ce qu'on voyait à 390 px. Deux valeurs en dur
   dans deux blocs, c'est une qui se périme : une seule variable, et le bandeau hors-ligne la
   décale pour tout le monde d'un coup. */
:root{ --bas-colle:0px }
@media(max-width:1040px){
  :root{ --bas-colle:calc(68px + env(safe-area-inset-bottom,0px)) }
  body.hors-ligne{ --bas-colle:calc(112px + env(safe-area-inset-bottom,0px)) }
}

/* ============ V65.0 (chantier 7, lot G4) — ENCAISSER À BORD : LE QR PLEIN ÉCRAN ============
   Trois contraintes matérielles, pas esthétiques :
   · FOND BLANC FRANC, thème sombre compris. Un lecteur de QR cherche un contraste fort ; un
     carré noir sur gris anthracite échoue en plein soleil sur la Promenade des Anglais.
   · LE CARRÉ D'ABORD : il prend toute la largeur disponible, plafonné pour ne pas dépasser la
     hauteur. `min(...)` fait le calcul, aucun JS.
   · LE BOUTON FERMER À 56 px, en bas, dans la zone du pouce — c'est le chauffeur qui le touche,
     souvent d'une main, parfois avec le téléphone à l'envers. */
.qr-back{position:fixed; inset:0; z-index:200; background:#fff}
.qr-back[hidden]{display:none!important}
.qr-plein{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; padding:16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  background:#fff; color:#0a0c10}
.qr-haut{font-size:var(--fs-14); color:#4a5059; text-align:center; line-height:1.35; max-width:34ch}
.qr-carre{width:min(86vw, 62vh, 520px); aspect-ratio:1/1; max-width:100%; display:flex; align-items:center; justify-content:center}
.qr-carre svg{width:100%; height:100%; display:block}
.qr-attente{font-size:var(--fs-14); color:#6b7280}
.qr-montant{font-size:clamp(34px, 11vw, 64px); font-weight:700; letter-spacing:-.02em; line-height:1; color:#0a0c10}
.qr-aide{font-size:var(--fs-13); color:#4a5059; text-align:center; max-width:30ch}
.qr-etat{font-size:var(--fs-14); font-weight:600; color:#0a7c46}
.qr-x{width:min(520px,86vw); min-height:56px; border-radius:14px; border:1px solid #0a0c10;
  background:#0a0c10; color:#fff; font:inherit; font-size:17px; font-weight:600; cursor:pointer; margin-top:4px}
.qr-x:active{transform:translateY(1px)}
.qr-err{font-size:var(--fs-14); color:#b42318; text-align:center; max-width:34ch; line-height:1.4}
@media(max-height:560px){ .qr-carre{width:min(70vw, 54vh)} .qr-montant{font-size:clamp(26px,7vw,40px)} .qr-aide{display:none} }

/* ---------------- V66.0 — ANALYSE : cinq onglets ----------------
   Rien d'inventé ici : les mêmes jetons que le reste de la console, les mêmes cartes.
   Toutes les grilles retombent à UNE colonne sous 1040 px — un tableau de bord qu'on ne
   peut pas lire au téléphone ne sert pas à un chauffeur qui roule. */
.anatabs{margin-bottom:12px}
.anaper{margin-bottom:14px; flex-wrap:wrap; gap:8px}
.anasig{padding:12px 14px; border-radius:var(--r-md); background:var(--surface-2); margin-bottom:10px; border-left:4px solid var(--s4)}
.anasig.haut{border-left-color:var(--bad)} .anasig.moyen{border-left-color:var(--warn)} .anasig.info{border-left-color:var(--s4)}
.anasigh{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.anasigh b{font-size:var(--fs-13)}
.anasigg{font-size:var(--fs-11); color:var(--muted); font-weight:600}
.anasig.haut .anasigg{color:var(--texte-danger)} .anasig.moyen .anasigg{color:var(--texte-alerte)}
.anasiggain{margin-left:auto; font-family:var(--font-num); font-variant-numeric:tabular-nums; font-weight:600; background:var(--surface); border-radius:var(--r-sm); padding:2px 8px; font-size:var(--fs-12)}
.anasigf{font-size:var(--fs-11); color:var(--muted); margin-top:5px; font-variant-numeric:tabular-nums}
.anasigx{font-size:var(--fs-13); color:var(--ink-2); margin-top:6px; line-height:1.45}
.anasig .btn{margin-top:8px}
.anaseuils{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px}
.anaseuils .field span{font-size:var(--fs-11); color:var(--muted)}
.anajf{font-size:var(--fs-11); color:var(--muted); margin-top:4px}
.anamix{margin-top:4px}
.anamixb{display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--surface-2)}
.anamixb i{display:block; height:100%}
.anamixl{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px}
.anamixi{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-12); background:none; border:0; padding:0; color:var(--ink-2); cursor:pointer; font-family:inherit}
.anamixi:hover{color:var(--ink)}
.anaracc{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.anaexbar{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:4px 0 10px}
.anaexbar .field span{font-size:var(--fs-11); color:var(--muted)}
.anatri{background:none; border:0; padding:0; font:inherit; font-size:var(--fs-12); color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; gap:3px}
.anatri:hover{color:var(--ink)} .anatri.on{color:var(--ink); font-weight:600}
.anatri svg{width:12px; height:12px}
.anacoh td{padding:6px 8px}
.anacohc{display:inline-block; min-width:44px; padding:3px 6px; border-radius:var(--r-sm); font-variant-numeric:tabular-nums}
.anahm{display:flex; flex-direction:column; gap:3px; min-width:620px; padding-bottom:4px}
.anahmr{display:grid; grid-template-columns:34px repeat(24,1fr); gap:3px; align-items:center}
.anahml{font-size:var(--fs-11); color:var(--muted)}
.anahmh{font-size:10px; color:var(--faint); text-align:center}
.anahmc{display:block; height:17px; border-radius:3px; font-size:9.5px; line-height:17px; text-align:center; color:var(--ink-2)}
.anahmleg{display:flex; align-items:center; gap:5px; margin-top:10px; font-size:var(--fs-11)}
.anahmleg .anahmc{width:17px}
.anafourch{margin-top:6px}
.anafb{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap}
.anafb span{font-size:var(--fs-11); color:var(--muted)}
.anafb b{font-size:var(--fs-22); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.anafbar{display:flex; height:16px; border-radius:var(--r-sm); overflow:hidden; background:var(--surface-2); margin-top:10px}
.anafbar i{display:block; height:100%} .anafbar i.carnet{background:var(--good)}
.anafbar i.estim{background:repeating-linear-gradient(135deg,var(--surface-3),var(--surface-3) 5px,var(--surface-2) 5px,var(--surface-2) 10px)}
.anafleg{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:10px; font-size:var(--fs-12); color:var(--ink-2)}
.anafleg i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px} .anafleg i.carnet{background:var(--good)} .anafleg i.estim{background:var(--surface-3)}
.anasi{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:6px 0 14px}
.anasil{display:flex; flex-direction:column; gap:6px; font-size:var(--fs-12)}
.anasil span{color:var(--muted); font-size:var(--fs-11)}
.anasil b{font-variant-numeric:tabular-nums}
.anasil input[type=range]{width:100%; accent-color:var(--accent)}
.anasires{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; background:var(--surface-2); border-radius:var(--r-md); padding:14px 16px}
.anasires .ahk{display:block; font-size:var(--fs-11); color:var(--muted)}
.anasires .ahv{display:block; font-size:21px; font-weight:700; letter-spacing:-.02em; margin:3px 0 2px; font-variant-numeric:tabular-nums}
.anasires .muted{font-size:var(--fs-11)}
@media(max-width:1040px){ .anaseuils,.anasi,.anasires{grid-template-columns:1fr} .anafb b{font-size:19px} }
@media(max-width:760px){ .anasigh b{font-size:var(--fs-13)} .anasiggain{margin-left:0} }
/* Le `.sub` de la console est dessiné pour se coller SOUS un en-tête de carte (margin-top:-8px).
   Dans l'Analyse il commente presque toujours ce qui le PRÉCÈDE : sans cette reprise, il chevauche
   la dernière ligne du tableau, la légende de la carte de chaleur ou la dernière barre. */
#anaMount .card .sub{margin-top:12px; margin-bottom:0}
#anaMount .grid{align-items:start}
.analeg{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:10px; font-size:var(--fs-12); color:var(--ink-2)}
.analeg i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px}

/* ---------------- V66.1 — deuxième vague de l'Analyse ---------------- */
.anamh{font-size:var(--fs-11); color:var(--muted); font-weight:600; margin-bottom:8px}
.anamouv{display:grid; grid-template-columns:auto 1fr auto; gap:2px 10px; padding:9px 12px; border-radius:var(--r-sm); background:var(--surface-2); margin-bottom:8px; border-left:3px solid var(--faint)}
.anamouv.up{border-left-color:var(--good)} .anamouv.down{border-left-color:var(--bad)}
.anamouv[role=link]{cursor:pointer}
.anamouv[role=link]:hover{background:var(--surface-3)}
.anamd{font-size:var(--fs-11); color:var(--muted); align-self:center}
.anaml{font-size:var(--fs-13); font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.anamv{font-variant-numeric:tabular-nums; font-weight:600; grid-row:1/3; align-self:center; text-align:right}
.anamouv.up .anamv{color:var(--texte-ok)} .anamouv.down .anamv{color:var(--texte-danger)}
.anamr{grid-column:2; font-size:var(--fs-11); color:var(--muted); font-variant-numeric:tabular-nums}
.anavues{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px}
.anavue{display:inline-flex; align-items:center; background:var(--surface-2); border-radius:var(--r-sm); overflow:hidden}
.anavue button{background:none; border:0; font:inherit; font-size:var(--fs-12); color:var(--ink-2); padding:5px 10px; cursor:pointer}
.anavue button:hover{color:var(--ink)}
.anavue .x{padding:5px 8px 5px 2px; color:var(--faint)}
.anavue .x svg{width:12px; height:12px}
.anavue .x:hover{color:var(--texte-danger)}
@media(max-width:760px){ .anamouv{grid-template-columns:1fr auto} .anamd{grid-column:1} .anamv{grid-row:auto} .anamr{grid-column:1/-1} }

/* ---------------- V67.0 — navigation rangée : menu construit, onglets d'entrée, bloc compte ---------------- */
#sidebar nav button .lb{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#sidebar nav button .badge-n+.badge-n{margin-left:4px}
/* Les onglets de l'entrée ouverte (Finances › Résultat · Paiements · Factures · Charges · Reprise). */
#hubBar{border-bottom:1px solid var(--border)}
#hubBar[hidden]{display:none}
#hubBar .seg.tabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
#hubBar .seg.tabs::-webkit-scrollbar{display:none}
#hubBar .seg.tabs button{white-space:nowrap; flex:none}
#hubBar .hubn{display:inline-block; min-width:18px; padding:0 5px; margin-left:4px; border-radius:9px; background:var(--surface-2); color:var(--ink-2); font-size:var(--fs-12); line-height:18px; text-align:center; font-variant-numeric:tabular-nums}
@media(max-width:760px){ #hubBar{padding:0 4px} }
/* Une réponse positive, sur le même gabarit que les autres encadrés. */
.hint-box.ok svg{color:var(--texte-ok)}
.hint-box.ok b{color:var(--texte-ok)}

/* ================= V67.0 (chantier 9) — fiche d'une course, nouvelle réservation, incidents ================= */
/* J5 — « Payé », partout le même */
.badge.paye{background:var(--good-soft); color:var(--texte-ok); border-color:transparent}
.bkc .l2 .prix .badge.paye{margin-right:4px; vertical-align:1px}
/* J5 — notes de la fiche */
/* J17 — annuler / modifier dans la fiche */
/* J17 — inverser le trajet, J7 — proposer le prix de la grille sans l'imposer */
.nvitin{grid-template-columns:13px minmax(0,1fr) 34px}
.nvswap{align-self:center; width:34px; height:34px; display:grid; place-items:center; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer}
.nvswap:hover{color:var(--ink); border-color:var(--border-strong)}
.nvswap svg{width:16px; height:16px; transform:rotate(90deg)}
.nvappl{display:block; margin:-4px 0 6px auto; padding:2px 0; border:0; background:none; font:inherit; font-size:var(--fs-11); color:var(--texte-accent); cursor:pointer; text-align:right}
.nvappl[hidden]{display:none}
/* O1.1 — la file « À traiter » du tableau de bord */
#ovATraiter{margin:0 0 16px}
.atok{display:flex; align-items:center; gap:8px; color:var(--muted)} .atok svg{width:14px; height:14px; color:var(--texte-ok)}
.atr .atl{display:flex; flex-direction:column}
.atrow{display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--grid)} .atrow:first-child{border-top:0}
.atrow .attx{flex:1; min-width:0} .atrow .attx b{display:block; font-weight:500; font-size:var(--fs-13)}
.atrow .attx small{display:block; color:var(--muted); font-size:var(--fs-12); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.atrow.urgent .attx b{color:var(--texte-danger)}
.atrow .atact{display:flex; align-items:center; gap:6px; flex:none}
.atr .atplus{margin-top:6px}
@media(max-width:640px){ .atrow{flex-wrap:wrap} .atrow .atact{width:100%; padding-left:20px} .atrow .attx small{white-space:normal} }
/* Réglages → Intégrations → Claude */
.claude-url{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0; padding:10px 12px; border:1px dashed var(--border-strong); border-radius:var(--r-md); background:var(--surface-3)}
.claude-url .mono{font-size:var(--fs-13); color:var(--ink); overflow-wrap:anywhere; flex:1 1 220px}
.claude-etapes{margin:6px 0 12px; padding-left:20px; font-size:var(--fs-13); line-height:1.6; color:var(--ink-2)}
.claude-etapes .mono{font-size:var(--fs-12); overflow-wrap:anywhere}
.intgerr > svg{width:14px; height:14px; vertical-align:-2px; color:var(--texte-alerte)}
/* J9 — ce qu'un profil sans prix ni provenance ne voit pas (l'attribut `hidden` perd contre display:flex) */
#ovSrcHead[hidden],#ovSrc[hidden],#ovRaCard[hidden],#ovTrendSeg[hidden]{display:none!important}

/* ================= V68.0 (chantier 9, vague 1) — Dispatch, assignation, fiche de course, Réservations =================
   Jetons seulement (règle 15) : tailles --fs-*, espaces --sp-*, rayons --r-*, couches --z-*, couleurs du thème. */

/* ---------- N3 : charger, vide, lot ---------- */
.sq{display:block; animation:sklW 1.4s ease-in-out infinite}
.sq-s{width:30%} .sq-m{width:55%} .sq-l{width:85%}
.sq-rond{width:24px; height:24px; border-radius:var(--r-rond); flex:none}
.sq-lignes{display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-2) 0}
.sq-ligne{display:flex; align-items:center; gap:var(--sp-3)} .sq-ligne .sq:not(.sq-rond){flex:0 1 auto}
.sq-table{padding:var(--sp-2) 0}
.sq-rang{display:grid; grid-template-columns:repeat(auto-fit,minmax(60px,1fr)); gap:var(--sp-4); padding:var(--sp-3) 0; border-bottom:1px solid var(--grid)}
.sq-cartes{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--sp-3)}
.sq-carte{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-4); border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface)}
@media (prefers-reduced-motion:reduce){ .sq{animation:none} }
.vide{display:flex; flex-direction:column; align-items:center; text-align:center; color:var(--muted)}
.vide p{margin:0; line-height:1.5}
td.empty .vide{padding:var(--sp-6) var(--sp-4)}
.lot .field{margin-bottom:var(--sp-3)} .lot .field input,.lot .field select,.lot .field textarea{width:100%; box-sizing:border-box}
.lot .seg{display:flex; margin:var(--sp-2) 0 var(--sp-3)} .lot .seg button{flex:1; justify-content:center}
.lot .go,.lot-res .go,.asg .go{display:flex; gap:var(--sp-2); align-items:center; margin-top:var(--sp-3)}
.lot .go .btn,.lot-res .go .btn,.asg .go .btn{flex:1; justify-content:center; min-height:40px}
.lot .go .btn.ghost,.asg .go .btn.ghost{flex:0 0 auto; padding:0 var(--sp-4)}
.lot .go .btn.confirm,.asg .go .btn.confirm{background:var(--bad); border-color:var(--bad); color:var(--on-couleur)}
.lot .hint,.asg .hint{font-size:var(--fs-12); color:var(--muted); margin-top:var(--sp-2); line-height:1.45}
.lot .hint-box[hidden]{display:none}
.lot-prog{padding:var(--sp-4) 0; display:flex; flex-direction:column; gap:var(--sp-2)}
.lot-barre{height:6px; border-radius:var(--r-pilule); background:var(--surface-2); overflow:hidden}
.lot-barre span{display:block; height:100%; width:0; background:var(--accent); transition:width .2s var(--ease)}
.lot-res h4{margin:0 0 var(--sp-3); font-size:var(--fs-14); font-weight:600}
.lot-ok,.lot-ko{padding:var(--sp-3); border-radius:var(--r-md); font-size:var(--fs-13); margin-bottom:var(--sp-2)}
.lot-ok{background:var(--good-soft)} .lot-ok>svg{color:var(--texte-ok)}
.lot-ko{background:var(--bad-soft)} .lot-ko>svg{color:var(--texte-danger)}
.lot-ok>svg,.lot-ko>svg{width:15px; height:15px; vertical-align:-3px}
.lot-ok ul,.lot-ko ul{margin:var(--sp-2) 0 0; padding-left:var(--sp-5); max-height:30vh; overflow:auto; line-height:1.55}

/* ---------- menus déroulants : titres, séparateurs, menus longs, ouverts vers le haut ou à droite ---------- */
.dd-menu.droite{left:auto; right:0}
.dd.up .dd-menu{top:auto; bottom:calc(100% + 4px)}
.dd[hidden]{display:none}
.dd-it.dgr{color:var(--texte-danger)}
.dd-it svg{width:15px; height:15px; flex:none; color:var(--muted)}
.dd-it.dgr svg{color:var(--texte-danger)}
.dd-it.vue{align-items:flex-start}
.dd-it .vn{display:flex; flex-direction:column; min-width:0; flex:1}
.dd-it .vn small{color:var(--muted); font-size:var(--fs-11); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px}
.dd-it .x{margin-left:auto; width:24px; height:24px; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--faint); flex:none}
.dd-it .x:hover{background:var(--bad-soft); color:var(--texte-danger)}
.dd-it .x svg{width:12px; height:12px}

/* ---------- la barre de sélection (Dispatch + Réservations) ---------- */
#selBar .dd-menu{min-width:230px}
#selBar .btn .chev{width:12px; height:12px; margin-left:2px}
#sidebar nav button .badge-n.bad{font-weight:600}

/* ---------- O8 — Dispatch, un tableau de missions ---------- */
.dd-btn.actif{border-color:var(--accent); color:var(--texte-accent)}
.dd-btn .cnt{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-pilule); background:var(--accent); color:var(--accent-ink); font-size:var(--fs-11); font-weight:600}
#drawer .btn.ico,#selBar .btn.ico,.cal-barre .btn.ico{padding:0; width:36px; min-width:36px; justify-content:center}
#drawer .btn.ico svg,#selBar .btn.ico svg,.cal-barre .btn.ico svg{width:16px; height:16px}
.dspgrid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr) minmax(240px,.9fr); gap:var(--sp-3); align-items:start}
/* un écran de portable : trois colonnes de courses, les chauffeurs en bandeau dessous */
@media(max-width:1440px){ .dspgrid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)} .dspch-col{grid-column:1/-1} .dspch-col #dspChauffeurs{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:2px var(--sp-2)} }
@media(max-width:1040px){ .dspgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:760px){ .dspgrid{grid-template-columns:1fr} }
.dspcol{background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r-card); padding:var(--sp-2); min-height:120px}
.dsphead{display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-1) var(--sp-1) var(--sp-2)}
.dsphead b{font-weight:600}
.dsphead .cnt{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-pilule); background:var(--surface-2); color:var(--ink); font-size:var(--fs-11); font-weight:600; letter-spacing:0; text-transform:none}
.dsphead .btn{margin-left:auto; text-transform:none; letter-spacing:0; min-height:28px}
.dspsub{display:flex; align-items:center; gap:6px; padding:var(--sp-2) var(--sp-1) var(--sp-1); font-size:var(--fs-11); font-weight:600; color:var(--muted)}
.dspsub.r{color:var(--texte-danger)}
.dspcard{position:relative; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--border-strong); border-radius:var(--r-md); padding:10px 12px; margin-bottom:var(--sp-2); cursor:pointer; transition:border-color .12s, box-shadow .12s}
.dspcard:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.dspcard.libre{border-left-color:var(--ambre)}
.dspcard.assg{border-left-color:var(--good)}
.dspcard.r-orange{background:color-mix(in srgb,var(--warn-soft) 70%,var(--surface)); border-left-color:var(--warn)}
.dspcard.r-rouge{background:color-mix(in srgb,var(--bad-soft) 80%,var(--surface)); border-left-color:var(--bad)}
.dspcard.sel{box-shadow:0 0 0 2px var(--accent)}
.dspcard.foc,.dspcard:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ring)}
.dspcard.sel.foc{box-shadow:0 0 0 2px var(--accent),0 0 0 5px var(--ring)}
.dspcard.nouv{animation:dspNouv 2.2s var(--ease)}
@keyframes dspNouv{0%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 0 transparent}}
.dsph{display:flex; align-items:center; gap:6px; font-size:var(--fs-12); flex-wrap:wrap}
.dsph .sp,.dspf .sp{margin-left:auto}
.dsp-h{font-size:var(--fs-16); font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.01em; color:var(--ink)}
.dspck{display:inline-flex; margin-right:2px} .dspck input{width:16px; height:16px; accent-color:var(--accent)}
.dsp-risque{display:inline-flex; align-items:center; padding:0 7px; border-radius:var(--r-pilule); font-size:var(--fs-11); font-weight:600; line-height:18px}
.dsp-risque.rouge{background:var(--bad); color:var(--on-couleur)}
.dsp-risque.orange{background:var(--warn-soft); color:var(--texte-alerte)}
.dspveh.mini{width:8px; height:8px; padding:0; border-radius:var(--r-rond); margin-right:6px}
.dspt{font-size:var(--fs-13); font-weight:500; margin:6px 0 4px; line-height:1.35; color:var(--ink)}
.dspm{display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; font-size:var(--fs-12); color:var(--muted)}
.dspm svg{width:12px; height:12px; vertical-align:-2px}
.dsp-etat{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:var(--sp-2); padding-top:var(--sp-2); border-top:1px dashed var(--grid); font-size:var(--fs-12); color:var(--ink-2); line-height:1.4}
.dsp-etat svg{width:13px; height:13px; color:var(--muted)}
.dsp-etat.non{color:var(--texte-danger); font-weight:600}
.dsp-etat.prop{color:var(--ink-2)}
.dsp-etat.prop b{color:var(--ink)}
.dsp-etat.ok b{color:var(--ink)}
.dsp-etat.attente{min-height:18px}
.dsp-pal{display:inline-flex; align-items:center; padding:0 6px; border-radius:var(--r-pilule); background:var(--warn-soft); color:var(--texte-alerte); font-size:var(--fs-11); font-weight:600; line-height:18px}
.dsp-tel{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:var(--r-rond); color:var(--texte-accent); margin-left:auto}
.dsp-tel:hover{background:var(--accent-soft)}
.dspf{display:flex; gap:6px; align-items:center; margin-top:var(--sp-2)}
.dspf .btn{min-height:32px}
.dspf .qab{width:32px; height:32px}
.dsp-vide{padding:var(--sp-4) var(--sp-2); text-align:center; color:var(--muted); font-size:var(--fs-13); line-height:1.5}
.dsp-vide .btn{margin-top:var(--sp-2)}
.dspch-col .dsphead{position:sticky; top:0}
.dspch{display:flex; width:100%; gap:var(--sp-2); align-items:center; padding:6px; border-radius:var(--r-sm); text-align:left; background:none; border:0; color:var(--ink); cursor:pointer}
.dspch:hover{background:var(--surface)}
.dspch .mav{width:28px; height:28px; font-size:var(--fs-11)}
.dspch-t{display:flex; flex-direction:column; min-width:0; flex:1}
.dspch-t b{font-size:var(--fs-13); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dspch-t small{font-size:var(--fs-11); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media(max-width:760px){ .dspcard{padding:12px} .dspf .btn{min-height:44px} .dspf .qab{width:44px; height:44px} .dspch{min-height:48px} }

/* ---------- O8.2 — le panneau d'assignation unique ---------- */
.asg{display:flex; flex-direction:column; gap:var(--sp-3)}
.asg>.seg{display:flex} .asg>.seg button{flex:1; justify-content:center}
.asg .socs{display:flex; flex-direction:column; gap:6px; max-height:min(40vh,320px); overflow-y:auto; padding-right:2px}
.asg .socs label{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--r-sm); font-size:var(--fs-13); font-weight:500; cursor:pointer; background:var(--surface)}
.asg .socs label:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.asg .socs input{width:16px; height:16px; accent-color:var(--accent); flex:0 0 auto}
.asg .sub{font-size:var(--fs-13); color:var(--ink-2); line-height:1.5}
@media(max-width:760px){ .asg .socs label{min-height:44px} }

/* ---------- O10 — la fiche d'une course ---------- */
.fil{list-style:none; margin:0; padding:0; position:relative}
.fil::before{content:''; position:absolute; left:11px; top:8px; bottom:8px; width:1px; background:var(--grid)}
.fil li{display:flex; gap:var(--sp-3); padding:6px 0; position:relative}
#filPlus{margin-top:var(--sp-2)}
.rtg-etoiles{display:flex; gap:4px}
.rtg-etoiles button{width:40px; height:40px; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--faint); background:var(--surface-2); border:1px solid transparent}
.rtg-etoiles button.on{color:var(--ambre); background:var(--warn-soft)}
.rtg-etoiles button svg{width:20px; height:20px}

/* ---------- O9 — Réservations ---------- */
#bkRows tr.nouv td{animation:bkNouv 2.2s var(--ease)}
@keyframes bkNouv{0%{background:var(--accent-soft)}100%{background:transparent}}
.badge.paybtn{cursor:pointer; border:0; font:inherit; font-size:var(--fs-11); font-weight:600}
.badge.paybtn:hover{box-shadow:0 0 0 2px var(--ring)}
.bkc-jour{position:sticky; top:var(--haut-barre); z-index:var(--z-collant); display:flex; align-items:center; gap:6px; padding:var(--sp-2) var(--sp-1); background:var(--page); font-size:var(--fs-12); font-weight:600; color:var(--ink-2)}
.bkc-jour::first-letter{text-transform:uppercase}
.bkc-jour b{font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums}
.bkc-plus{text-align:center; padding:var(--sp-3)}
.bkc.nouv{animation:dspNouv 2.2s var(--ease)}

/* ---------- O9.6 — le calendrier ---------- */
#bkCal{margin-top:var(--sp-3); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden}
.cal-barre{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border)}
.cal-barre .seg button{min-height:32px}
.cal-titre{font-size:var(--fs-14); font-weight:600}
.cal-titre::first-letter{text-transform:uppercase}
.cal-leg{margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-11); color:var(--muted); flex-wrap:wrap}
.cal-leg .cal-d{margin-left:var(--sp-2)}
.cal-d{display:inline-block; width:7px; height:7px; border-radius:var(--r-rond); background:var(--good); margin-right:4px; vertical-align:1px; flex:none}
.cal-d.libre,.libre>.cal-d{background:var(--ambre)}
.cal-d.fini,.fini>.cal-d{background:var(--brume)}
.annulee>.cal-d{background:var(--bad)}
.attente>.cal-d{background:var(--azur)}
.cal-tete{display:grid; grid-template-columns:52px repeat(var(--cal-n),minmax(0,1fr)); border-bottom:1px solid var(--border)}
.cal-jt{padding:var(--sp-2) 2px; font-size:var(--fs-12); color:var(--ink-2); text-align:center; border:0; border-left:1px solid var(--grid); background:none; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cal-jt:hover:not(:disabled){background:var(--surface-2)}
.cal-jt:disabled{cursor:default}
.cal-jt.auj{color:var(--texte-accent); font-weight:600}
.cal-jt .cnt{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-pilule); background:var(--surface-2); color:var(--ink); font-size:var(--fs-11); font-weight:600}
.cal-scroll{max-height:min(70vh,720px); overflow-y:auto; overscroll-behavior:contain}
.cal-grille{position:relative; display:grid; grid-template-columns:52px repeat(var(--cal-n),minmax(0,1fr)); background-image:repeating-linear-gradient(to bottom,var(--grid) 0,var(--grid) 1px,transparent 1px,transparent 44px)}
.cal-heures{position:relative}
.cal-heures span{position:absolute; right:6px; margin-top:2px; font-size:var(--fs-11); color:var(--faint); font-variant-numeric:tabular-nums}
.cal-col{position:relative; border-left:1px solid var(--grid); min-width:0}
.cal-col.auj{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.cal-col.cible{background:var(--accent-soft)}
.cal-ev{position:absolute; overflow:hidden; text-align:left; padding:2px 6px; border-radius:var(--r-sm); font-size:var(--fs-11); line-height:1.3; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--good); color:var(--ink); cursor:pointer; box-shadow:var(--shadow-ctl); white-space:nowrap; text-overflow:ellipsis}
.cal-ev b{font-weight:600; font-variant-numeric:tabular-nums}
.cal-ev small{display:block; color:var(--muted); overflow:hidden; text-overflow:ellipsis}
.cal-ev:hover,.cal-ev:focus-visible{border-color:var(--accent); z-index:var(--z-collant)}
.cal-ev.libre{border-left-color:var(--ambre); background:color-mix(in srgb,var(--warn-soft) 60%,var(--surface))}
.cal-ev.attente{border-left-color:var(--azur)}
.cal-ev.fini{border-left-color:var(--brume); color:var(--muted)}
.cal-ev.annulee{border-left-color:var(--bad); color:var(--muted); text-decoration:line-through}
.cal-ev[draggable="true"]{cursor:grab}
.cal-ev.tire{opacity:.45}
.cal-now{position:absolute; left:0; right:0; height:2px; background:var(--bad); pointer-events:none; z-index:var(--z-collant)}
.cal-mtete{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-bottom:1px solid var(--border)}
.cal-mtete span{padding:var(--sp-2); font-size:var(--fs-11); color:var(--muted); text-align:center}
.cal-mgrille{display:grid; grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-case{min-height:108px; min-width:0; border-right:1px solid var(--grid); border-bottom:1px solid var(--grid); padding:4px; display:flex; flex-direction:column; gap:2px}
.cal-case:nth-child(7n){border-right:0}
.cal-case.hors{background:var(--surface-3)}
.cal-num{align-self:flex-end; min-width:24px; height:24px; border-radius:var(--r-pilule); border:0; background:none; font-size:var(--fs-12); color:var(--ink-2); cursor:pointer; font-variant-numeric:tabular-nums}
.cal-num:hover{background:var(--surface-2)}
.cal-case.hors .cal-num{color:var(--faint)}
.cal-case.auj .cal-num{background:var(--accent); color:var(--accent-ink); font-weight:600}
.cal-li{display:flex; align-items:center; width:100%; text-align:left; font-size:var(--fs-11); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:1px 4px; border:0; border-radius:var(--r-sm); background:none; color:var(--ink); cursor:pointer}
.cal-li:hover{background:var(--surface-2)}
.cal-li.annulee{color:var(--muted); text-decoration:line-through}
.cal-plus{align-self:flex-start; border:0; background:none; font-size:var(--fs-11); color:var(--texte-accent); padding:1px 4px; cursor:pointer}
.cal-vide{border-top:1px solid var(--border)}
@media(max-width:760px){ .cal-barre{padding:var(--sp-2) var(--sp-3)} .cal-leg{display:none} .cal-case{min-height:64px; padding:2px} .cal-li{font-size:var(--fs-11); padding:0 2px} .cal-tete,.cal-grille{grid-template-columns:40px repeat(var(--cal-n),minmax(0,1fr))} .cal-jt{font-size:var(--fs-11)} }
/* O8.7 — le chevauchement se lit sur la carte */
.dsp-chev{display:flex; align-items:center; gap:6px; margin-top:var(--sp-2); padding:4px 8px; border-radius:var(--r-sm); font-size:var(--fs-12); line-height:1.35}
.dsp-chev svg{width:13px; height:13px; flex:none}
.dsp-chev.bad{background:var(--bad-soft); color:var(--texte-danger)}
.dsp-chev.warn{background:var(--warn-soft); color:var(--texte-alerte)}
.dsp-chev b{font-weight:600}

/* ================= V69.0 (chantier 9, vague 2) — Nouvelle réservation : validation, brouillon, étapes ================= */
/* La validation en ligne (composants.js : marquerChamp). Le sélecteur répète celui des champs
   (`.field input:not(…):not(…)`) : sans cette spécificité, la bordure rouge perdait contre la grise. */
.field.f-err input:not([type=checkbox]):not([type=radio]),.field.f-err select,.field.f-err textarea,.prow.f-err input{border-color:var(--bad)}
.field.f-err input:not([type=checkbox]):not([type=radio]):focus,.field.f-err select:focus,.field.f-err textarea:focus,.prow.f-err input:focus{border-color:var(--bad); box-shadow:0 0 0 3px var(--bad-soft)}
.f-msg{display:flex; align-items:flex-start; gap:6px; margin-top:2px; font-size:var(--fs-12); line-height:1.35; color:var(--texte-danger)}
.f-msg .svgi{flex:none; width:13px; height:13px; margin-top:1px}
.prow + .f-msg{justify-content:flex-end; margin:-2px 0 6px; text-align:right}
.vehlist[aria-invalid="true"]{outline:1px solid var(--bad); outline-offset:3px; border-radius:var(--r-sm)}
.vehlist + .f-msg{margin-top:8px}
.vehrow:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* le récapitulatif des manques, près du bouton */
.nv-manque{display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:var(--r-md); background:var(--bad-soft); color:var(--ink); font-size:var(--fs-13)}
.nv-manque > .svgi{color:var(--texte-danger); flex:none; margin-top:2px}
.nv-manque .nvm-l{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.nvm-c{border:1px solid color-mix(in srgb,var(--bad) 35%,transparent); background:var(--surface); color:var(--ink); border-radius:var(--r-lg); padding:3px 10px; font-size:var(--fs-12); cursor:pointer}
.nvm-c:hover{border-color:var(--bad)}
/* un refus du serveur : la cause et l'issue */
.nv-refus{display:flex; gap:8px; align-items:flex-start; margin-bottom:10px; padding:10px 12px; border-radius:var(--r-md); border:1px solid color-mix(in srgb,var(--bad) 40%,var(--border)); background:var(--bad-soft); font-size:var(--fs-13)}
.nv-refus > .svgi{color:var(--texte-danger); flex:none; margin-top:2px}
.nv-refus p{margin:2px 0 0; color:var(--ink-2)}
/* le brouillon */
.nv-brouillon{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; padding:10px 12px; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--r-md); background:var(--surface); font-size:var(--fs-13); color:var(--ink-2)}
.nv-brouillon[hidden]{display:none}
.nv-brouillon > .svgi{color:var(--texte-accent); flex:none}
.nv-brouillon .nvbr-t{flex:1 1 220px; min-width:0; overflow-wrap:anywhere}
.nv-brouillon .nvbr-a{display:flex; gap:6px}
/* où part la course, le dernier trajet du client, le repère daté */
.nv-ou{margin:12px 0 0}
.nv-ou[hidden]{display:none}
.nv-ou .svgi{color:var(--texte-accent)}
.nv-dernier{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:-6px 0 12px; padding:8px 10px; border-radius:var(--r-sm); background:var(--surface-3); font-size:var(--fs-12); color:var(--ink-2)}
.nv-dernier[hidden]{display:none}
.nv-dernier > .svgi{color:var(--muted); flex:none}
.nv-dernier .nvd-t{flex:1 1 200px; min-width:0; overflow-wrap:anywhere}
.nv-dernier .nvd-a{display:flex; gap:6px}
.nv-warn{color:var(--texte-alerte); font-weight:600}
#nvRepeterWrap[hidden]{display:none}
/* confirmer, puis la suite logique */
.nvconf{padding:14px 16px; border-color:var(--accent)}
.nvconf-act{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.nvconf-kbd{margin-top:8px; font-size:var(--fs-12); color:var(--muted)}
@media(hover:none){ .nvconf-kbd{display:none} }
#nvCreateHint .kbd{font-size:var(--fs-11)}
@media(hover:none){ #nvCreateHint .kbd{display:none} }
.nvfait{padding:14px 16px; border-color:var(--good)}
.nvfait .ch h3 .svgi{color:var(--texte-ok)}
.nvfait.partiel{border-color:var(--warn)}
.nvfait.partiel .ch h3 .svgi{color:var(--texte-alerte)}
.nvsuite{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.nvsuite .btn[disabled]{opacity:.55; cursor:progress}
.nvserie{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:4px}
.nvserie li{display:flex; align-items:center; gap:8px; font-size:var(--fs-13); color:var(--ink-2)}
.nvserie li .svgi{color:var(--texte-ok); flex:none}
.nvserie li.ko .svgi{color:var(--texte-danger)}
.nvserie li > :last-child{margin-left:auto; text-align:right}
.nvserie li.ko > :last-child{color:var(--texte-danger)}
/* au téléphone : une étape à la fois */
.nvsteps{display:none}
.formbar #nvBarreRet{padding:0 14px}
.formbar #nvBarreRet[hidden]{display:none}
@media(max-width:760px){
  .nvsteps{display:flex; gap:4px; margin:0 0 12px}
  .nvsteps button{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px 8px; border:0; border-bottom:2px solid var(--border); background:transparent; color:var(--muted); font-size:var(--fs-11); cursor:pointer}
  .nvsteps button b{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:var(--r-rond); background:var(--surface-2); color:var(--ink-2); font-size:var(--fs-12); font-weight:600}
  .nvsteps button.on{color:var(--ink); border-bottom-color:var(--accent)}
  .nvsteps button.on b{background:var(--accent); color:var(--accent-ink)}
  .nvsteps button.fait{border-bottom-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
  .nvsteps button.fait b{background:var(--accent-soft); color:var(--texte-accent)}
  #s-new[data-etape="1"] [data-etape]:not([data-etape="1"]),
  #s-new[data-etape="2"] [data-etape]:not([data-etape="2"]),
  #s-new[data-etape="3"] [data-etape]:not([data-etape="3"]),
  #s-new[data-etape="4"] [data-etape]:not([data-etape="4"]){display:none}
  /* la barre du pouce porte « Créer » : le gros bouton de la carte ferait doublon */
  #s-new #nvCreate{display:none}
  /* lot P5 : les champs du téléphone (une colonne, passagers et bagages côte à côte) sont dans la section « LOT P5 » */
  .nvsteps{scroll-margin-top:calc(var(--haut-barre) + 8px)}
}

/* ================= V69.0 (chantier 9, O12) — Devis : pipeline, cartes, options ================= */
/* V93.9 — d'où vient le devis (« site ») et l'essai (grisé, après les vrais clients) */
.badge.dv-site{background:color-mix(in srgb,var(--serie-7) 14%,transparent); color:var(--serie-7)}
.badge.dv-site .svgi{width:10px; height:10px; vertical-align:-1px}
/* V93.2 — les demandes du site (formulaire « prix ferme sous 2 h »), en tête de l'onglet Devis */
.dm-alerte{display:flex; gap:6px; align-items:flex-start; margin-top:6px; padding:6px 8px; border-radius:var(--r-md); background:color-mix(in srgb,var(--warn) 14%,transparent); font-size:var(--fs-12)}
.dm-alerte .svgi{flex:none; width:14px; height:14px; margin-top:1px}
.dv-warn{color:var(--texte-alerte); font-weight:600}
.dv-bad{color:var(--texte-danger)}
/* `.dt` aligne à droite par défaut (tableaux de chiffres) : ici le texte à gauche, les montants à droite */
/* options du devis (modale) */
.dv-opts{display:flex; flex-direction:column; gap:6px; margin:10px 0 14px}
.dv-opt{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--r-sm)}
.dv-opt > span{flex:1; min-width:0}
.dv-opt.principal{background:var(--surface-3)}
.dv-h4{margin:14px 0 8px; font-size:var(--fs-13); font-weight:600}
/* ================= V70.0 (chantier 9, O13) — Incidents : une file de support ================= */
.f-aide{font-size:var(--fs-12); color:var(--muted); line-height:1.35}
.inc-ligne{display:flex; align-items:center; gap:8px}
.inc-ligne select,.inc-ligne input{flex:1; min-width:0}
.inc-bloc{padding-top:10px; border-top:1px solid var(--border)}
.inc-bloc > .dt-h{display:flex; align-items:center; gap:6px; margin:0 0 6px}
.inc-bloc > .dt-h .cnt{font-size:var(--fs-11); color:var(--muted); font-weight:500}
.inc-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.inc-impact{margin-top:4px; font-size:var(--fs-13); font-weight:600}
.inc-impact.neg{color:var(--texte-danger)}
.inc-impact.pos{color:var(--texte-ok)}
.inc-res-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
.inc-res-grille .field[hidden]{display:none}
@media(max-width:600px){ .inc-res-grille{grid-template-columns:1fr} }
.inc-at-liste{position:absolute; left:8px; top:100%; z-index:var(--z-flottant); min-width:240px; max-width:calc(100% - 16px); padding:4px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--elevated); box-shadow:var(--shadow-pop)}
.inc-at-liste[hidden]{display:none}
.inc-at-liste button{display:flex; align-items:center; gap:8px; width:100%; padding:6px 8px; border:0; border-radius:var(--r-sm); background:none; color:var(--ink); font:inherit; font-size:var(--fs-13); text-align:left; cursor:pointer}
.inc-at-liste button.on,.inc-at-liste button:hover{background:var(--accent-soft)}
.inc-sla-grille{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
@media(max-width:600px){ .inc-sla-grille{grid-template-columns:repeat(2,minmax(0,1fr))} }
.inc-sla-grille .field{margin:0}
.inc-types{display:flex; flex-direction:column; gap:6px; margin:8px 0 12px}
.inc-type{display:grid; grid-template-columns:minmax(0,1fr) 130px 100px minmax(0,170px); align-items:center; gap:8px}
.inc-type .mono{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.inc-type input:not([type=checkbox]),.inc-type select{min-height:36px; border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:4px 8px; background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-13)}
@media(max-width:600px){ .inc-type{grid-template-columns:1fr 1fr} }
.inc-type-ajout{grid-template-columns:minmax(0,1fr) 160px auto; align-items:flex-end}
@media(max-width:600px){ .inc-type-ajout{grid-template-columns:1fr} }
/* la fiche d'une course : ses incidents */
.inc-mini{padding:8px 10px; margin-bottom:6px; border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer}
.inc-mini:hover{border-color:var(--border-strong)}
.inc-mini:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.inc-mini-1{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:var(--fs-13)}
.inc-mini-2{margin-top:4px; font-size:var(--fs-12); color:var(--muted)}
.inc-mini-3{margin-top:4px; font-size:var(--fs-12); overflow-wrap:anywhere}
/* Finances : l'effet des incidents */
/* ================= V71.0 (chantier 9, O14) — Au volant v3 : terrain, étapes GoodJourney, mode conduite ================= */
/* Réglages › Dispatch › Au volant */
.vlreg-ligne{display:flex; align-items:center; gap:8px}
.vlreg-ligne input{flex:1; min-width:0}
.vlreg-gj{display:flex; align-items:center; gap:12px; padding:10px 12px; margin:6px 0; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-3)}
.vlreg-gj > div{flex:1; min-width:0}
.vlreg-gj.on{border-color:var(--warn); background:var(--warn-soft)}

/* ================= V71.0 (chantier 9, O14) — Recherche : la palette et l'onglet du téléphone lisent la même source ================= */
.srch-res{padding:var(--sp-1) var(--sp-3)}
#s-search .search.big{position:sticky; top:var(--haut-barre); z-index:var(--z-collant); background:var(--surface)}
.srgrp{font-size:var(--fs-11); font-weight:600; color:var(--faint); padding:var(--sp-3) var(--sp-1) var(--sp-1)}
.srgrp:first-child{padding-top:var(--sp-1)}
button.srow{width:100%; min-height:52px; background:none; border:0; border-bottom:1px solid var(--grid); border-radius:0; color:inherit; font:inherit; text-align:left}
button.srow:last-child{border-bottom:0}
button.srow:active{background:var(--surface-2)}
button.srow:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--r-sm)}
.srow .av{width:32px; height:32px; border-radius:var(--r-sm); color:var(--muted)}
.srow .av svg{width:16px; height:16px}
.srtxt{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.srow .sl{color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.srow>svg:last-child{width:16px; height:16px; color:var(--faint); flex:none}
.kbd-aide{position:fixed; inset:0; z-index:var(--z-aide); display:none}
.kbd-panel{max-width:430px; padding:var(--sp-5)}
.kbd-liste{max-height:min(60vh,520px); overflow-y:auto}

/* ================= V72.0 (chantier 9, vague 3a : O16 Flottes, O21 Membres) ================= */
/* états et liens communs aux deux écrans */
.lnk{background:none; border:0; padding:0; font:inherit; cursor:pointer; text-underline-offset:2px}
.ent-go,.ent-ajout .go,.usr-form .go,#usrMount .card .go,.ent-wiz~.go,.ent-corps .card .go,.ech-reg .go,.vh-form .go{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3)}
tr.ent-inactive td{color:var(--muted)}
/* les tableaux de .dt sont alignés à droite par défaut (chiffres) : ici le texte est à gauche, les nombres gardent leur alignement en ligne */
table.usr-matrice th,table.usr-matrice td,.ent-corps table.dt th,.ent-corps table.dt td{text-align:left}
.ent-corps tr[data-va],.ent-corps tr[data-usrfiche]{cursor:pointer}
/* la liste des flottes */
.usr-outils .seg .cnt{font-size:var(--fs-11); color:var(--muted); margin-left:2px}
.ent-nom,.usr-nom{display:flex; align-items:center; gap:var(--sp-2); min-width:0}
.ent-nom>div,.usr-nom>div{min-width:0}
.ent-ctxt{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.ent-ctxt b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media(max-width:760px){
  .usr-outils .seg{flex-wrap:nowrap; overflow-x:auto; max-width:100%; scrollbar-width:none}
  .usr-outils .seg button{flex:none}
  .usr-outils select{flex:1 1 40%; min-width:0}
  .card.pad0:has(>.tablewrap>.ent-table),.card.pad0:has(>.tablewrap>.usr-table){display:none}
  .usr-outils{flex-wrap:wrap}
  .usr-outils .search{flex:1 1 100%; min-width:0}
}
/* la fiche d'une flotte */
.ent-tete{min-width:0; flex:1 1 180px}
.pfic-head{flex-wrap:wrap}
.pfic-head .plogo{flex:none}
.pfic-head .spacer{flex:1 1 0}
@media(max-width:600px){ .pfic-head .spacer{display:none} .pfic-nom{font-size:var(--fs-16)} }
.ent-onglets{flex-wrap:nowrap; max-width:100%; scrollbar-width:none}
.ent-onglets::-webkit-scrollbar{display:none}
.ent-onglets button{flex:none}
.ent-corps{flex-direction:column; gap:var(--sp-3)}
.ent-manques{display:flex; flex-direction:column; gap:var(--sp-2)}
.ent-manque{display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-3); font-size:var(--fs-13)}
.ent-manque span{flex:1}
.ent-manque.bloquant{border-color:var(--warn); background:var(--warn-soft)}
.ent-manque svg{width:16px; height:16px; color:var(--texte-alerte); flex:none}
.ent-minis{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:var(--sp-2)}
.ent-mini{padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); min-width:0}
.ent-mini.va{cursor:pointer}
.ent-mini.va:hover{border-color:var(--accent)}
.ent-mini .l{font-size:var(--fs-12); color:var(--muted)}
.ent-mini .v{font-size:var(--fs-20); font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink)}
.ent-mini .s{font-size:var(--fs-11); color:var(--muted)}
.ent-grille2{display:grid; grid-template-columns:1.2fr 1fr; gap:var(--sp-3); align-items:start}
.ent-grille2>div{display:flex; flex-direction:column; gap:var(--sp-3); min-width:0}
@media(max-width:860px){ .ent-grille2{grid-template-columns:1fr} }
.ent-contacts-vue{display:flex; flex-direction:column; gap:var(--sp-2)}
.ent-cv{display:flex; align-items:center; gap:var(--sp-2); min-width:0}
.ent-cv .rowsub{overflow-wrap:anywhere}
.ent-notes{white-space:pre-wrap; font-size:var(--fs-13); color:var(--ink-2)}
.ent-ajout{border:1px dashed var(--border-strong); border-radius:var(--r-md); padding:var(--sp-2) var(--sp-3)}
.ent-ajout summary{cursor:pointer; font-weight:600; font-size:var(--fs-13); display:flex; align-items:center; gap:var(--sp-1); list-style:none}
.ent-ajout summary::-webkit-details-marker{display:none}
.ent-ajout summary svg{width:14px; height:14px}
.ent-ajout[open] summary{margin-bottom:var(--sp-2)}
.ent-ajout textarea{width:100%; box-sizing:border-box}
.ent-secret{display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3); border:1px solid var(--good); border-radius:var(--r-md); background:var(--good-soft); margin-bottom:var(--sp-3)}
.ent-secret>svg{width:18px; height:18px; color:var(--good-plein); flex:none; margin-top:2px}
.ent-secret>div{flex:1; min-width:0}
.ent-mdp{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin:var(--sp-2) 0}
.ent-mdp .mono{font-size:var(--fs-16); letter-spacing:.06em; user-select:all; background:var(--surface); padding:2px var(--sp-2); border-radius:var(--r-sm); border:1px solid var(--border)}
.ent-form2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2) var(--sp-3)}
.ent-form2 .field{margin:0}
.ent-form2 input,.ent-form2 select{width:100%; box-sizing:border-box}
@media(max-width:600px){ .ent-form2{grid-template-columns:1fr} }
.ent-paie{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap}
.ent-zones{display:flex; flex-direction:column; gap:var(--sp-1); max-height:240px; overflow:auto; padding:var(--sp-2); border:1px solid var(--border); border-radius:var(--r-md)}
.ent-zones label{display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-13)}
.ent-region{padding-left:var(--sp-5)}
/* modifier */
.ent-edit h4{margin:var(--sp-4) 0 var(--sp-2); font-size:var(--fs-13); color:var(--muted); font-weight:600}
.ent-edit h4:first-child{margin-top:0}
.ent-tva{display:flex; gap:var(--sp-2)}
.ent-tva input{flex:1; min-width:0}
.ent-contact{display:grid; grid-template-columns:1.2fr 1fr 1fr 1.3fr auto auto; gap:var(--sp-2); align-items:center; margin-bottom:var(--sp-2)}
.ent-contact input{min-width:0}
@media(max-width:760px){ .ent-contact{grid-template-columns:1fr 1fr; padding-bottom:var(--sp-2); border-bottom:1px solid var(--grid)} }
.ent-go .spacer{flex:1}
/* l'assistant */
.ent-pas{display:flex; gap:var(--sp-2); list-style:none; margin:0 0 var(--sp-4); padding:0; overflow-x:auto}
.ent-pas li{display:flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-12); color:var(--muted); white-space:nowrap}
.ent-pas li span{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:var(--r-rond); border:1px solid var(--border-strong); font-weight:600}
.ent-pas li.on{color:var(--ink); font-weight:600}
.ent-pas li.on span{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.ent-pas li.fait span{background:var(--good-soft); border-color:var(--good); color:var(--good-plein)}
.ent-wiz{display:flex; flex-direction:column; gap:var(--sp-3)}
/* membres */
.usr-onglets{margin-bottom:var(--sp-3)}
#usrMount>.card+.card{margin-top:var(--sp-3)}
.usr-outils{margin-bottom:var(--sp-3)}
.usr-roledesc{margin-top:var(--sp-2)}
.usr-perimetre{margin-top:var(--sp-3)}
.usr-permsgrille{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--sp-3); margin-top:var(--sp-3)}
.usr-perms{border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-2) var(--sp-3); margin:0; display:flex; flex-direction:column; gap:var(--sp-1)}
.usr-perms legend{font-size:var(--fs-12); font-weight:600; color:var(--muted); padding:0 var(--sp-1)}
.usr-roles{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:var(--sp-2)}
.usr-role{padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md)}
.usr-role p{margin:var(--sp-1) 0 0; font-size:var(--fs-12); color:var(--ink-2); line-height:1.45}
.usr-matrice th.usr-rolecol{font-size:var(--fs-11); white-space:nowrap}
table.usr-matrice td.usr-cell{text-align:center}
.usr-matrice tr.usr-domaine td{background:var(--surface-3); font-weight:600; font-size:var(--fs-12); color:var(--muted)}
.usr-oui svg{width:15px; height:15px; color:var(--good-plein)}
.usr-non{display:inline-block; width:8px; height:1px; background:var(--border-strong); vertical-align:middle}
/* le journal */
.jr-liste{display:flex; flex-direction:column}
.jr-jour{position:sticky; top:0; z-index:var(--z-collant); background:var(--surface); padding:var(--sp-2) 0 var(--sp-1); font-size:var(--fs-12); font-weight:600; color:var(--muted)}
.jr-jour::first-letter{text-transform:uppercase}
.jr-ligne{display:flex; align-items:flex-start; gap:var(--sp-2); padding:var(--sp-2) 0; border-bottom:1px solid var(--grid)}
.jr-ligne.tech{color:var(--muted)}
.jr-h{flex:none; width:40px; font-size:var(--fs-12); color:var(--muted); font-variant-numeric:tabular-nums; padding-top:3px}
.jr-txt{flex:1; min-width:0; font-size:var(--fs-13); line-height:1.45}
.jr-detail summary{cursor:pointer; font-size:var(--fs-12); color:var(--texte-accent)}
.jr-av{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--sp-2); margin-top:var(--sp-1)}
.jr-av pre{margin:var(--sp-1) 0 0; padding:var(--sp-2); background:var(--surface-3); border-radius:var(--r-sm); font-size:var(--fs-11); white-space:pre-wrap; overflow-wrap:anywhere; max-height:200px; overflow:auto}
/* une modale plus haute que l'écran défile : centrée quand elle tient, collée en haut sinon (le haut n'est plus coupé) */
.modal{overflow-y:auto; overscroll-behavior:contain}
.modal .box{margin:auto}
/* « voir comme » : le bandeau, en jetons */
#voirBar{background:var(--ink); color:var(--page); z-index:var(--z-voir); border-radius:var(--r-lg); font-size:var(--fs-13)}
#voirBar svg{width:16px; height:16px}
#voirBar .voir-sub{color:var(--faint)}
.secu-mdp{margin-top:var(--sp-3)}
.me-blk[role="button"]{cursor:pointer}
.me-blk[role="button"]:hover{background:var(--side-hover)}
.me-blk[role="button"]:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
#monCompte{display:flex; flex-direction:column; gap:var(--sp-3)}

/* ================= V73.0 (chantier 9, vague 3b : O18 Chauffeurs, G1 Échéances, G2 Absences) ================= */
.kpi.va{cursor:pointer}
.kpi.va:hover{border-color:var(--accent)}
.kpi.va:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* la vue d'ensemble */
.ch-lis{display:flex; flex-direction:column}
.ch-li{display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) 0; border-bottom:1px solid var(--grid); min-width:0}
.ch-li:last-child{border-bottom:0}
.ch-li[data-chfiche],.ch-li[data-chporteur],.ch-li[data-va]{cursor:pointer}
.ch-li[data-chfiche]:hover,.ch-li[data-chporteur]:hover,.ch-li[data-va]:hover{background:var(--surface-3)}
.ch-li:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--r-sm)}
.ch-li-t{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.ch-li-t b,.ch-li-t small{overflow:hidden; text-overflow:ellipsis}
.ch-li-t b{white-space:nowrap}
.ch-li-t small{font-size:var(--fs-12); color:var(--muted)}
.ch-li-d{flex:none; display:flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-12); white-space:nowrap}
.ch-lis .vide{padding:var(--sp-3) 0}
.ch-lis .lnk{align-self:flex-start; margin-top:var(--sp-2); font-size:var(--fs-12)}
/* la liste */
.ent-corps tr[data-chfiche],.ent-corps tr[data-chinc]{cursor:pointer}
.ch-note-c{white-space:nowrap}
@media(max-width:760px){
  .card.pad0:has(>.tablewrap>.ch-table){display:none}
}
/* les étoiles */
.ch-etoiles{display:inline-flex; gap:1px; vertical-align:-2px}
.ch-etoiles span{display:inline-grid; color:var(--border-strong)}
.ch-etoiles span.on{color:var(--ambre)}
.ch-etoiles svg{width:13px; height:13px; fill:currentColor}
.rtg-etoiles button svg{fill:currentColor}
.ch-neg{color:var(--texte-danger)}
/* la fiche */
.ch-tete-st{display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:0}
.ch-tete-st .rowsub{text-align:right}
@media(max-width:600px){ .ch-tete-st{align-items:flex-start; flex:1 1 100%} .ch-tete-st .rowsub{text-align:left} }
.ent-manque.ch-pret{border-color:var(--good); background:var(--good-soft)}
.ent-manque.ch-pret svg{color:var(--good-plein)}
.ch-acts{display:flex; align-items:center; gap:var(--sp-1); flex-wrap:wrap; justify-content:flex-end}
.ch-acts input[type="date"]{max-width:160px}
.ch-conflits{flex-direction:row}
.ch-conflits>div{flex:1; min-width:0}
.ch-conflits .ch-li{border-bottom-color:var(--border)}
.ch-com{display:block; margin-top:2px; font-size:var(--fs-13); color:var(--ink-2); white-space:pre-wrap; overflow-wrap:anywhere}
.ent-corps .vchip{display:inline-flex; align-items:center; gap:var(--sp-1); margin:0 var(--sp-2) var(--sp-1) 0; padding:2px var(--sp-2); border:1px solid var(--border); border-radius:var(--r-sm)}
.rtg-crit{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2)}
@media(max-width:600px){ .rtg-crit{grid-template-columns:1fr} }
.ch-imp textarea{width:100%; box-sizing:border-box; font-family:var(--font-code); font-size:var(--fs-12)}
.ch-imp .ent-secret .tablewrap{margin:var(--sp-2) 0}
/* « Mon compte » : le tableau des sessions défile dans la fenêtre au lieu de la déborder */
.secu-sessions{max-width:100%}
.secu-sessions table{min-width:520px}
#monCompte .secu-sessions td,#monCompte .secu-sessions th{text-align:left}
/* contrôles nus rangés en ligne (paie d'un chauffeur ou d'une flotte, renouvellement d'une date) : l'allure des champs */
.ent-paie label{font-size:var(--fs-13); color:var(--ink-2)}
.ent-paie select,.ent-paie input:not([type=checkbox]):not([type=radio]),.ch-acts input[type="date"]{border:1px solid var(--border-strong); background-color:var(--surface); border-radius:var(--r-sm);
  padding:5px 10px; color:var(--ink); font-size:var(--fs-13); box-shadow:var(--shadow-ctl); min-height:40px; outline:none}
.ent-paie select{-webkit-appearance:none; appearance:none; background-image:var(--chev); background-repeat:no-repeat; background-position:right 9px center; background-size:12px 12px; padding-right:28px}
.ent-paie select:focus,.ent-paie input:focus,.ch-acts input[type="date"]:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
html[data-theme="dark"] .ent-paie select,html[data-theme="dark"] .ent-paie input:not([type=checkbox]):not([type=radio]),html[data-theme="dark"] .ch-acts input[type="date"]{background-color:var(--page)}
.ent-paie+.sub{margin-top:var(--sp-2)}
/* l'écran Échéances */
#echMount>.card.pad0+.ent-ajout,#echMount>.ent-ajout+.card,#echMount>.card+.card{margin-top:var(--sp-3)}
.ech-reg{display:flex; flex-direction:column; gap:var(--sp-3); align-items:flex-start}
.ech-reg .field{margin:0; width:100%; max-width:420px}
.ech-reg .go{margin-top:0}
.ech-aide{font-size:var(--fs-12); color:var(--muted); line-height:1.5}
.ech-carte{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card)}
.ech-carte-h{display:flex; align-items:flex-start; gap:var(--sp-3); cursor:pointer; min-width:0}
.ech-carte-h .pill{flex:none}
.ech-carte-h:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm)}
.ech-carte .ch-acts{justify-content:flex-start}
@media(max-width:760px){
  .card.pad0:has(>.tablewrap>.ech-table){display:none}
}
/* ================= V74.0 (chantier 9, O19 : Véhicules) ================= */
.vh-ico{display:inline-grid; place-items:center; flex:none; width:34px; height:34px; border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink-2)}
.vh-ico svg{width:18px; height:18px}
.vh-ico.grand{width:44px; height:44px; border-radius:var(--r-md)}
.vh-ico.grand svg{width:22px; height:22px}
.vh-form{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3); margin:0 0 var(--sp-3); border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--surface)}
.vh-form .ent-form2{margin-top:var(--sp-1)}
.vh-form .go{margin-top:0}
.vh-attribuer{display:flex; align-items:flex-end; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3)}
.vh-attribuer .field{margin:0; flex:1 1 220px; min-width:0}
.vh-attribuer .field select{width:100%}
table.vh-types th,table.vh-types td{text-align:left}
table.vh-types td:nth-child(n+3):not(:last-child),table.vh-types th:nth-child(n+3):not(:last-child){text-align:right}
.vh-attribuer+.sub{margin-top:var(--sp-2)}
.vh-types-cartes{display:none; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3)}
@media(max-width:760px){
  table.vh-types{display:none}
  .vh-types-cartes{display:flex}
}
.vh-reassigner{margin:0 0 var(--sp-3); padding:var(--sp-3); border:1px solid var(--warn); border-radius:var(--r-md); background:var(--warn-soft)}
.vh-reassigner svg{color:var(--texte-alerte)}
.vh-reassigner .ch-li{border-bottom-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.pfic-head+.vh-reassigner,.pfic-head+.ent-manque{margin-top:var(--sp-2)}
/* ================= V75.0 (chantier 9, O15 : Clients, fiche 360°) ================= */
.badge.gold{border:0}
/* les étiquettes typées : un point de couleur, le libellé */
.etq{display:inline-flex; align-items:center; gap:var(--sp-1); padding:1px var(--sp-2); border-radius:var(--r-pilule); background:var(--surface-2); color:var(--ink-2); font-size:var(--fs-12); font-weight:500; white-space:nowrap}
.etq::before{content:""; width:7px; height:7px; border-radius:var(--r-rond); background:var(--etq-c,var(--brume)); flex:none}
.etq-bleu{--etq-c:var(--azur)} .etq-vert{--etq-c:var(--good)} .etq-orange{--etq-c:var(--ambre)} .etq-rouge{--etq-c:var(--corail)} .etq-violet{--etq-c:var(--s5)} .etq-gris{--etq-c:var(--brume)}
/* la liste */
#crmMount>.seg.tabs{margin-top:var(--sp-3); overflow-x:auto; flex-wrap:nowrap; max-width:100%; scrollbar-width:none}
.crm-pages{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; justify-content:space-between; margin-top:var(--sp-3)}
.crm-pages-b{display:flex; gap:var(--sp-2)}
@media(max-width:760px){
  .card.pad0:has(>.tablewrap>.crm-table){display:none}
}
/* la fiche */
.crm-cmp textarea{width:100%; box-sizing:border-box}
.crm-edition .dt-h{margin-top:var(--sp-3)}
.crm-etqs,.crm-cases,.crm-libres{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); align-items:center}
.crm-libres .sub{flex-basis:100%}
.crm-lien{margin-bottom:var(--sp-2)}
/* le composeur de campagne */
.crm-cmp{display:flex; flex-direction:column; gap:var(--sp-3)}
.crm-cible{display:flex; gap:var(--sp-2); align-items:flex-start; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--surface-3); font-size:var(--fs-13)}
.crm-cible>svg{flex:none; color:var(--muted); margin-top:2px}
.crm-cible .rowsub{white-space:normal}
.crm-cmp-nom{flex:1 1 240px; margin:0}
.crm-cmp-langues{margin-bottom:var(--sp-2)}
.crm-cmp-langues .seg.tabs{overflow-x:auto; flex-wrap:nowrap; max-width:100%; scrollbar-width:none}
.crm-cmp-langues .seg.tabs button{flex:none}
.crm-cmp-edit .field{margin-bottom:var(--sp-2)}
.crm-vars{display:flex; flex-wrap:wrap; gap:var(--sp-1); align-items:center; font-size:var(--fs-12)}
.crm-vars .chip{border:1px solid var(--border-strong); background:var(--surface); border-radius:var(--r-sm); padding:2px var(--sp-2); font:inherit; font-family:var(--font-code); font-size:var(--fs-12); color:var(--ink-2); cursor:pointer}
.crm-vars .chip:hover{border-color:var(--accent); color:var(--texte-accent)}
.crm-apercu{display:flex; flex-direction:column; gap:var(--sp-2)}
.crm-ap{padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface)}
.crm-ap-h{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2); align-items:center; font-size:var(--fs-12); margin-bottom:var(--sp-1)}
.crm-ap-s{font-weight:600; font-size:var(--fs-13); margin-bottom:var(--sp-1)}
.crm-test{display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; margin-top:var(--sp-2)}
.crm-test input{flex:1 1 180px; min-width:0; border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:5px 10px; min-height:40px; background:var(--surface); color:var(--ink); font-size:var(--fs-13)}
/* les doublons */
.crm-dbl{padding:var(--sp-3) 0; border-bottom:1px solid var(--grid)}
.crm-dbl:last-child{border-bottom:0}
.crm-dbl-h{display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; margin-bottom:var(--sp-2); font-size:var(--fs-13)}
.crm-dbl-h .crm-dbl-acts{margin-left:auto; display:flex; gap:var(--sp-2); flex-wrap:wrap}
.crm-dbl-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2)}
.crm-dbl-c{display:flex; flex-direction:column; gap:2px; align-items:flex-start; padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); min-width:0}
.crm-dbl-c .rowsub{white-space:normal; overflow-wrap:anywhere}
/* V91.1 — la fiche gardée (choisie seule : la plus complète et la plus vraie) se voit ; l'autre dit où elle va */
.crm-dbl-c.crm-dbl-g{border-color:var(--accent-border); background:var(--accent-soft)}
.crm-dbl-role{display:inline-flex; align-items:center; gap:var(--sp-1); flex-wrap:wrap; font-size:var(--fs-12); color:var(--muted); margin-bottom:var(--sp-1)}
.crm-dbl-g .crm-dbl-role{color:var(--ink)}
.crm-dbl-role .svgi{width:14px; height:14px; color:var(--texte-accent)}
.crm-dbl-role .lnk{font-size:var(--fs-12)}
#crmDblMount>.card+.card{margin-top:var(--sp-4)}
/* V91.2 — l'aperçu d'un e-mail avant d'allumer un automatisme (js/noyau/apercu-email.js) */
.apm-tete{display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; margin-bottom:var(--sp-3)}
.apm-evs{flex-wrap:wrap}
.apm-meta{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-1) var(--sp-3); margin:0 0 var(--sp-3); font-size:var(--fs-13)}
.apm-meta dt{color:var(--muted)}
.apm-meta dd{margin:0; min-width:0; overflow-wrap:anywhere}
.apm-meta dd .svgi{width:14px; height:14px; vertical-align:-2px}
.apm-notes{display:flex; flex-direction:column; gap:var(--sp-2); margin:0 0 var(--sp-3)}
.apm-sms{margin-top:var(--sp-2); font-size:var(--fs-13)}
.apm-sms>summary{cursor:pointer; color:var(--texte-accent)}
.apm-go{display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3)}
.apm-voir{margin-top:var(--sp-2)}
/* V91.3 — l'acompte : des courses (cochées) ou un montant (les courses couvertes s'allument) — finances-acomptes.js */
.pay-acompte>.seg,.pay-acompte>#payAcListe,.pay-acompte>.pay-ac-total{flex:1 1 100%}
.pay-form label[hidden]{display:none}
.pay-form .pay-ac-l{flex-direction:row; align-items:center; flex:none; font-size:var(--fs-13); color:var(--ink)}
.pay-ac-total{margin:var(--sp-1) 0; font-size:var(--fs-13)}
.pay-ac-liste{display:flex; flex-direction:column; gap:var(--sp-1); max-height:320px; overflow:auto; margin-bottom:var(--sp-2)}
.pay-ac-l{display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2); border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer; min-height:44px}
.pay-ac-l.on{border-color:var(--accent-border); background:var(--accent-soft)}
.pay-ac-l.part{border-style:dashed; border-color:var(--accent-border)}
.pay-ac-q{flex:1 1 auto; min-width:0; font-size:var(--fs-13)}
.pay-ac-q .rowsub{display:block; white-space:normal}
.pay-ac-l>b{white-space:nowrap; text-align:right}
.pay-ac-l>b .rowsub{display:block; font-weight:400}
.pay-ac-marque{display:inline-flex; width:18px; justify-content:center; color:var(--texte-accent); font-size:var(--fs-12)}
.pay-ac-marque .svgi{width:16px; height:16px}
.pay-versements .pay-retirer{margin-left:var(--sp-1); vertical-align:middle}
/* V91.3 — la fiche d'une course : « Payé au chauffeur » */
.fpc-l{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap}
.fpc .rowsub{margin-top:var(--sp-1)}
.pay-form .fpc-convenu{flex-direction:row; align-items:center; flex:1 1 100%; font-size:var(--fs-13); color:var(--ink)}
@media(max-width:600px){ .crm-dbl-2{grid-template-columns:1fr} }
/* les rangées de boutons du CRM (vues, composeur, petites fenêtres) */
#crmMount .go,.crm-cmp .go,.crm-modal .go{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3)}
.crm-reg-l input[data-chpopt]{order:5; flex:1 1 100%}
#crmVueAvis .ent-form2{margin-bottom:var(--sp-3)}
/* la fiche : plusieurs doublons tiennent en une alerte */
.crm-dbl-r{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; padding:var(--sp-1) 0; border-top:1px solid var(--border)}
.crm-dbl-r>span:first-child{flex:1 1 240px; min-width:0}
/* les analyses, les cohortes */
.crm-analyses{grid-template-columns:1fr 1fr; gap:var(--sp-3); margin-top:var(--sp-3)}
.crm-analyses .crm-large{grid-column:1/-1}
@media(max-width:860px){ .crm-analyses{grid-template-columns:1fr} }
.crm-coh-carte{margin-top:var(--sp-3)}
table.crm-cohortes td.coh{font-variant-numeric:tabular-nums}
table.crm-cohortes td.coh-1{background:color-mix(in srgb,var(--accent) 8%,transparent)}
table.crm-cohortes td.coh-2{background:color-mix(in srgb,var(--accent) 16%,transparent)}
table.crm-cohortes td.coh-3{background:color-mix(in srgb,var(--accent) 26%,transparent)}
table.crm-cohortes td.coh-4{background:color-mix(in srgb,var(--accent) 38%,transparent); font-weight:600}
.crm-an-calc{margin:var(--sp-2) 0 0; font-size:var(--fs-12)}
/* les réglages */
.crm-reg{display:flex; flex-direction:column; gap:var(--sp-2)}
.crm-reg-l{display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap}
.crm-reg-l input,.crm-reg-l select{border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:5px 10px; min-height:40px; background:var(--surface); color:var(--ink); font-size:var(--fs-13)}
.crm-reg-l input{flex:1 1 160px; min-width:0}
.crm-modele{border-top:1px solid var(--grid); padding:var(--sp-2) 0}
.crm-modele summary{cursor:pointer; display:flex; gap:var(--sp-2); align-items:center}
.crm-modele textarea,.crm-modele input{width:100%; box-sizing:border-box}
html[data-theme="dark"] .crm-reg-l input,html[data-theme="dark"] .crm-reg-l select,html[data-theme="dark"] .crm-test input{background-color:var(--page)}
/* Nouvelle réservation : ce que le CRM sait du client */
.nv-fiche{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin:-6px 0 var(--sp-3); padding:var(--sp-2) 10px; border-radius:var(--r-sm); background:var(--surface-3); font-size:var(--fs-12); color:var(--ink-2); border:1px solid transparent}
.nv-fiche[hidden]{display:none}
.nv-fiche>.svgi{color:var(--muted); flex:none}
.nv-fiche .nvd-t{flex:1 1 220px; min-width:0; overflow-wrap:anywhere; display:flex; flex-direction:column; gap:2px}
.nv-fiche .nvd-a{display:flex; gap:var(--sp-1)}
.nv-fiche .nvd-l{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2)}
.nv-fiche.surveiller{border-color:var(--warn); background:var(--warn-soft)}
.nv-fiche.bloque{border-color:var(--bad); background:var(--bad-soft)}
.nv-fiche.surveiller>.svgi{color:var(--texte-alerte)} .nv-fiche.bloque>.svgi{color:var(--texte-danger)}
/* ================= V76.0 (chantier 9, O17 : Canaux & apporteurs) ================= */
.cn-alerte{color:var(--texte-alerte)}
/* la commission du jour, en grand */
.cn-comm{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap}
.cn-comm-v{font-size:var(--fs-24); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--ink); line-height:1.1}
.dt tr.cn-vig td{background:var(--surface-3)}
.form-row.cn-form3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){ .form-row.cn-form3{grid-template-columns:1fr} }
.cn-case{display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-13); color:var(--ink-2); margin:var(--sp-1) 0; cursor:pointer}
.cn-case input{flex:none; width:18px; height:18px}
.cn-code{padding:var(--sp-2) 0; font-size:var(--fs-13)}
/* les couleurs d'un canal : des pastilles, pas une liste de mots */
.cn-couleurs{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.cn-coul{position:relative; display:inline-flex; cursor:pointer}
.cn-coul input{position:absolute; opacity:0; width:1px; height:1px}
.cn-coul span:not(.sr){width:28px; height:28px; border-radius:var(--r-rond); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border)}
.cn-coul input:checked+span{box-shadow:0 0 0 2px var(--ink)}
.cn-coul input:focus-visible+span{outline:2px solid var(--accent); outline-offset:2px}
.cn-coul .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
/* le nouveau canal */
.cn-wiz{display:flex; flex-direction:column; gap:var(--sp-3)}
.cn-genres{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2)}
@media(max-width:760px){ .cn-genres{grid-template-columns:1fr} }
.cn-genre{display:flex; gap:var(--sp-2); align-items:flex-start; padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer; background:var(--surface)}
.cn-genre:has(input:checked){border-color:var(--accent); background:var(--surface-3)}
.cn-genre input{flex:none; margin-top:3px}
.cn-genre span{display:flex; flex-direction:column; gap:2px; min-width:0}
.cn-genre small{font-size:var(--fs-12); color:var(--muted); line-height:1.4}
.cn-orgmode{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-4); margin-bottom:var(--sp-2)}
.cn-recap{padding:var(--sp-3); border-radius:var(--r-md); background:var(--surface-3); font-size:var(--fs-13); line-height:1.5}
.cn-ecart{color:var(--texte-danger); font-weight:600}
@media(max-width:760px){ .cn-hbars .hbar{grid-template-columns:56px 1fr} .cn-hbars .hbar .tr{flex-wrap:wrap; row-gap:2px} }
/* une fiche d'entreprise : les deux champs de commission vivent dans la grille du formulaire */
.ent-contents{display:contents}
.ent-contents[hidden]{display:none}

/* ================= V77.0 (chantier 9, O20 : le centre de communication) ================= */
.gchip.ms-on{border-color:var(--accent); background:var(--accent-soft); color:var(--texte-accent); font-weight:600}
.ms-vars{display:flex; flex-wrap:wrap; gap:var(--sp-1)}
.ms-warn{color:var(--texte-alerte)}
.ms-dests{display:flex; flex-direction:column; gap:var(--sp-1); margin-top:var(--sp-2)}
.ms-dest{display:flex; align-items:center; gap:var(--sp-2); width:100%; padding:var(--sp-2); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); text-align:left; cursor:pointer; font:inherit; color:var(--ink); min-height:48px}
.ms-dest:hover,.ms-dest:focus-visible{border-color:var(--accent)}
.ms-dest>span:not(.badge):not(.ms-canal){display:flex; flex-direction:column; min-width:0; flex:1}
.ms-dest small{font-size:var(--fs-12); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* envois groupés */
.ms-choix{display:flex; align-items:baseline; gap:var(--sp-2); margin-top:var(--sp-2); flex-wrap:wrap}
.ms-sel{display:flex; flex-wrap:wrap; gap:var(--sp-1); margin:var(--sp-2) 0}
.ms-sel .gchip{gap:var(--sp-1)}
.ms-sel .svgi{width:12px; height:12px}
#msdQ{width:100%; margin-top:var(--sp-2)}
.ms-simu{padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--surface-3); font-size:var(--fs-13); margin:var(--sp-2) 0}
.ms-lots{display:flex; flex-direction:column; gap:var(--sp-2)}
.ms-lot{display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); cursor:pointer; font:inherit; color:var(--ink)}
.ms-lot:hover{border-color:var(--accent-border)}
.ms-lot-h{display:flex; justify-content:space-between; gap:var(--sp-2); min-width:0}
.ms-lot-h b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ms-lot-h time{font-size:var(--fs-12); color:var(--muted); flex:none}
.ms-lot small{font-size:var(--fs-12); color:var(--muted)}
.ms-lot-r{display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-12); color:var(--ink-2); flex-wrap:wrap}
.ms-meter{width:90px; flex:none}
.ms-meter>span{display:block; height:100%; border-radius:var(--r-sm); background:var(--accent); min-width:3px}
.ms-lot-d{display:flex; flex-direction:column; gap:var(--sp-3)}
.ms-lot-d .ms-b{max-width:none; align-self:stretch}
/* modèles (V99.5 : leur forme est dans la section « LOT MODELES ») */
.ms-mods-g{margin-bottom:var(--sp-3)}
.ms-point{display:inline-block; width:6px; height:6px; border-radius:var(--r-rond); background:var(--good); vertical-align:middle}
.ch-err{display:block; color:var(--texte-danger); font-size:var(--fs-12)}
/* le test des notifications clients (Réglages › Intégrations) */
.nc-essai{margin-top:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2)}
.nc-ligne{display:flex; align-items:flex-end; gap:var(--sp-2); flex-wrap:wrap}
.nc-ligne .field{margin:0; flex:1; min-width:200px}
.nc-texte{white-space:pre-wrap; font-size:var(--fs-12); margin:var(--sp-1) 0}
/* V88.1 — l'e-mail habillé, rendu dans un cadre isolé (aperçu des modèles). */
.nc-vue{margin:var(--sp-1) 0}
.nc-rendu{display:block; width:100%; height:560px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); margin:var(--sp-1) 0}
.nc-wh{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2); padding:var(--sp-2) 0; border-top:1px solid var(--grid)}
.nc-wh-t{min-width:0}
.nc-url{display:block; margin-top:var(--sp-1); font-size:var(--fs-12); overflow-wrap:anywhere}
.nc-essai .nc-ok{color:var(--texte-ok)}
.nc-essai .nc-ko{color:var(--texte-danger)}
@media(max-width:760px){ .ms-lot{min-height:56px} .ms-meter{width:60px} }
/* ================= V78.0 (chantier 9, O2 sur K4 : les notifications deviennent une boîte de réception) =================
   Lot E4 (06/10/2026) : l'écran est devenu « À traiter » (DS v2) ; ses règles sont dans la section « LOT E4 — À TRAITER ». */
/* ================= V79.0 (chantier 9, O4 : les objectifs, par flotte, par métrique) ================= */
.ch-tirets,.ch-pointille{animation:areaIn .7s ease .1s both}
.ch-repere line{stroke:var(--ink-2); stroke-width:1; stroke-dasharray:2 3; opacity:.6}
.ch-repere text{font-size:var(--fs-11); fill:var(--ink-2); font-weight:600}
.ch-leg-repere{display:inline-block; width:0; height:12px; border-left:1px dashed var(--ink-2)}
.ob-barre{gap:var(--sp-2) var(--sp-3)}
.ob-per{display:inline-flex; align-items:center; gap:var(--sp-1)}
.ob-sel{min-width:170px}
.ob-alerte{display:inline-flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-13); color:var(--ink-2); cursor:pointer; white-space:nowrap}
.ob-note{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-3); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--surface-3); font-size:var(--fs-13); color:var(--ink-2)}
.ob-note .svgi{width:14px; height:14px; flex:none}
.ob-grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-4)}
.ob-carte{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:var(--sp-4) var(--sp-4) var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2); box-shadow:var(--shadow-card); min-width:0}
.ob-tete{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2)}
.ob-tete h3{margin:0; font-size:var(--fs-14); display:inline-flex; align-items:center; gap:var(--sp-2)}
.ob-tete h3 .svgi{width:15px; height:15px; color:var(--muted)}
.ob-st{font-weight:600}
.badge.ob-ok{background:var(--accent-soft); color:var(--texte-accent)}
.ob-big{font-family:var(--font-num); font-size:var(--fs-24); font-weight:600; letter-spacing:-.02em; line-height:1.15; font-variant-numeric:tabular-nums}
.ob-big small{font-size:var(--fs-13); color:var(--muted); font-weight:500; letter-spacing:0}
.ob-meter{position:relative; height:10px; border-radius:var(--r-pilule); background:var(--meter-track); margin:var(--sp-1) 0 var(--sp-2)}
.ob-meter>span{position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-pilule)}
.ob-m-proj{background:repeating-linear-gradient(90deg,var(--brume) 0 3px,transparent 3px 6px); opacity:.55}
.ob-m-res{background:var(--chart-hero); opacity:.32}
.ob-m-real{background:var(--chart-hero)}
.ob-meter>.ob-m-cible{left:auto; width:2px; top:-4px; bottom:-4px; margin-left:-1px; border-radius:var(--r-sm); background:var(--gold)}
.ob-meter>.ob-m-attendu{width:0; top:-5px; bottom:-5px; border-radius:unset; border-left:2px dotted var(--ink-2)}
.ob-rows{display:grid; grid-template-columns:1fr auto; gap:var(--sp-1) var(--sp-3); margin:0; font-size:var(--fs-13)}
.ob-rows dt{color:var(--muted)}
.ob-rows dd{margin:0; text-align:right; font-family:var(--font-num); font-variant-numeric:tabular-nums}
.ob-saisie{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); margin-top:var(--sp-1); padding-top:var(--sp-2); border-top:1px solid var(--grid); flex-wrap:wrap}
.ob-saisie label{font-size:var(--fs-12); color:var(--muted)}
.ob-champ{display:inline-flex; align-items:center; gap:var(--sp-1)}
.ob-in{width:110px; text-align:right; font-family:var(--font-num); font-size:var(--fs-14); padding:var(--sp-1) var(--sp-2); border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-ctl)}
.ob-in:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
.ob-modifie .ob-in{border-color:var(--accent); background:var(--accent-soft)}
.ob-faux .ob-in{border-color:var(--bad); background:var(--bad-soft)}
html[data-theme="dark"] .ob-in{background-color:var(--page)}
.ob-suf{font-size:var(--fs-12); color:var(--muted); min-width:14px}
.ob-lu{font-family:var(--font-num); font-variant-numeric:tabular-nums}
.ob-sug{font-size:var(--fs-12); color:var(--ink-2)}
.ob-sug .lnk{font-size:var(--fs-12)}
.ob-par{font-size:var(--fs-11); color:var(--muted)}
.ob-modif{display:flex; align-items:center; gap:var(--sp-2); margin:var(--sp-2) calc(-1 * var(--sp-4)) calc(-1 * var(--sp-3)); padding:var(--sp-2) var(--sp-4); border-top:1px solid var(--accent-border); background:var(--accent-soft); border-bottom-left-radius:var(--r-card); border-bottom-right-radius:var(--r-card); font-size:var(--fs-13); color:var(--ink)}
.ob-modif .svgi{width:14px; height:14px; color:var(--texte-danger)}
.ob-modif .spacer{flex:1}
.card .ob-modif{margin:12px -22px -20px; padding:8px 22px}
html[data-density="compact"] .card .ob-modif{margin:10px -14px -12px; padding:6px 14px}
.chart .legend svg{display:inline-block; width:20px; height:8px; flex:none; animation:none}
.ob-courbe,.ob-flottes,.ob-qualite{margin-bottom:var(--sp-4)}
.ob-qs{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:0 var(--sp-5)}
.ob-q{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"n v" "c s"; gap:var(--sp-1) var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--grid); align-items:center}
.ob-q-n{grid-area:n; display:flex; flex-direction:column; min-width:0}
.ob-q-n small{font-size:var(--fs-12); color:var(--muted)}
.ob-q-v{grid-area:v; display:flex; flex-direction:column; align-items:flex-end; font-family:var(--font-num); font-variant-numeric:tabular-nums}
.ob-q-v small{font-size:var(--fs-11); color:var(--muted); font-family:inherit}
.ob-q-c{grid-area:c}
.ob-q-s{grid-area:s; justify-self:end}
.ob-ftable td.ob-fc{white-space:nowrap}
.ob-ftable td.ob-fc .ob-champ{margin-left:var(--sp-2)}
.ob-ftable td.ob-fc .badge{margin-left:var(--sp-1)}
.ob-ftable .ob-in{width:84px; font-size:var(--fs-13)}
.ob-th{display:block; font-weight:400; font-size:var(--fs-11); color:var(--muted)}
.ob-fv{font-family:var(--font-num); font-variant-numeric:tabular-nums}
.ob-fsub{display:block; font-size:var(--fs-11); color:var(--muted)}
.ob-fcartes{display:flex; flex-direction:column; gap:var(--sp-2)}
.ob-fcarte{border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-2) var(--sp-3)}
.ob-fnom{margin-bottom:var(--sp-1)}
.ob-fl{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2); padding:var(--sp-1) 0; font-size:var(--fs-13); flex-wrap:wrap}
.ob-fl>span:first-child{color:var(--muted)}
.ob-fl .ob-fc{display:inline-flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; justify-content:flex-end}
.ob-pied{margin-top:var(--sp-4); text-align:right}
.ob-flotte{margin-bottom:var(--sp-4)}
.ob-flotte h3 .svgi{width:15px; height:15px; color:var(--muted); vertical-align:-2px}
.ob-fl-l{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); flex-wrap:wrap; font-size:var(--fs-13); margin-top:var(--sp-1)}
.ob-fl-v{font-family:var(--font-num); font-size:var(--fs-20); font-variant-numeric:tabular-nums}
@media(max-width:1040px){ .card .ob-modif{margin:12px -16px -16px; padding:8px 16px} }
@media(max-width:760px){
  .ob-barre{flex-wrap:wrap}
  .ob-per{flex:1 1 100%}
  .ob-sel{flex:1; min-width:0}
  .ob-barre .spacer{display:none}
  .ob-in{font-size:var(--fs-input-mobile); width:120px; min-height:44px}
  .ob-per .btn,.ob-barre .btn{min-height:44px}
  .ob-modif .btn{min-height:44px}
  .ob-carte{padding:var(--sp-3)}
  .ob-modif{margin:var(--sp-2) calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)); padding:var(--sp-2) var(--sp-3)}
}
@media (prefers-reduced-motion:reduce){ .ch-tirets,.ch-pointille{animation:none} }

/* ================= V80.0 (chantier 9, O5 : Finances — résultat, trésorerie, rapprochement, clôture, corrections, factures) ================= */
.fi-barre{gap:var(--sp-2); margin-bottom:var(--sp-3)}
.fi-note{display:flex; gap:var(--sp-2); align-items:flex-start; padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-2); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); color:var(--ink-2); font-size:var(--fs-13); line-height:1.5}
.fi-note>.svgi{flex:0 0 auto; width:16px; height:16px; margin-top:2px; color:var(--muted)}
.fi-note.fi-fige{border-color:var(--accent-border); background:var(--accent-soft)}
.fi-note.fi-fige>.svgi{color:var(--texte-accent)}
.fi-note.fi-ok>.svgi{color:var(--texte-ok)}
.tre-j{display:none}
.fi-grille{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:start}
.fi-grille>.card{margin:0}
#finMount>.card, #treMount>.card, #rapMount>.card, #cloMount>.card, #histVue>.card, #facMount>.card{margin-bottom:var(--sp-3)}
@media(max-width:1040px){ .fi-grille{grid-template-columns:minmax(0,1fr)} }
/* le compte, en cascade */
.fi-compte{display:flex; flex-direction:column}
.fi-et-tete,.fi-et{display:grid; grid-template-columns:minmax(120px,1.1fr) minmax(70px,1.4fr) minmax(84px,auto) 64px; gap:var(--sp-3); align-items:center}
.fi-avec-cmp .fi-et-tete,.fi-avec-cmp .fi-et{grid-template-columns:minmax(120px,1.1fr) minmax(60px,1.2fr) minmax(84px,auto) 60px 64px}
.fi-et-tete{padding:0 var(--sp-2) var(--sp-1); color:var(--muted); font-size:var(--fs-11); letter-spacing:.03em}
.fi-et-tete span:nth-child(n+3){text-align:right}
.fi-et{width:100%; padding:var(--sp-2); border-radius:var(--r-sm); text-align:left; color:var(--ink-2); font-size:var(--fs-13)}
.fi-et:hover{background:var(--surface-3)}
.fi-et.fi-tot{color:var(--ink); font-weight:600; box-shadow:inset 0 1px 0 var(--border)}
.fi-et.fi-fin{font-size:var(--fs-14); background:var(--surface-3); box-shadow:none; margin-top:var(--sp-1)}
.fi-et-b{position:relative; height:10px; border-radius:var(--r-pilule); background:var(--meter-track); overflow:hidden}
.fi-et-b span{position:absolute; top:0; bottom:0; border-radius:var(--r-pilule)}
.fi-et-m,.fi-et-p,.fi-et-c{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.fi-et-p,.fi-et-c{color:var(--muted); font-size:var(--fs-12)}
.fi-et-c.fi-bon{color:var(--texte-ok)}
.fi-et-c.fi-mauvais{color:var(--texte-danger)}
.fi-bon{color:var(--texte-ok)}
.fi-mauvais{color:var(--texte-danger)}
/* « comment c'est calculé » */
.fi-calcul{display:flex; flex-direction:column; gap:var(--sp-2)}
.fi-def{padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); border:1px solid var(--border)}
.fi-def.fi-def-on{border-color:var(--accent-border); background:var(--accent-soft)}
.fi-def h4{display:flex; justify-content:space-between; gap:var(--sp-2); font-size:var(--fs-14); font-weight:600}
.fi-def p{color:var(--ink-2); font-size:var(--fs-13); margin-top:var(--sp-1)}
.fi-def .tablewrap{margin-top:var(--sp-2)}
.fi-liste{list-style:none; margin-top:var(--sp-2); display:flex; flex-direction:column; gap:var(--sp-1)}
.fi-liste li{display:flex; justify-content:space-between; gap:var(--sp-3); font-size:var(--fs-13)}
/* la courbe */
/* la répartition, les commissions, le détail : colonnes de texte à gauche, montants à droite (en ligne) */
.fac-lignes th,.fac-lignes td,.fi-def .dt th,.fi-def .dt td{text-align:left}
.fi-lib{display:inline-flex; align-items:center; gap:var(--sp-2); font-weight:500; color:var(--ink); text-align:left}
.fi-lib .dot{flex:0 0 auto}
.fi-part{display:inline-block; width:36px; height:6px; margin-right:var(--sp-2); border-radius:var(--r-pilule); background:var(--meter-track); vertical-align:middle; overflow:hidden}
.fi-part span{display:block; height:100%; background:var(--fin-ca)}
.fi-det .tablewrap{max-height:560px; overflow:auto}
.fi-suite{display:flex; justify-content:center; align-items:center; gap:var(--sp-2); padding-top:var(--sp-3); flex-wrap:wrap; font-size:var(--fs-13)}
.fi-trajet{display:inline-block; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom}
/* la trésorerie */
.tre-postes{display:flex; flex-direction:column; gap:var(--sp-2)}
.tre-poste{display:grid; grid-template-columns:minmax(150px,1fr) minmax(60px,1fr) auto; gap:var(--sp-3); align-items:center; font-size:var(--fs-13)}
.tre-p-l{display:inline-flex; gap:var(--sp-2); align-items:center; color:var(--ink-2)}
.tre-p-l .svgi{width:15px; height:15px; color:var(--muted)}
.tre-p-b{height:8px; border-radius:var(--r-pilule); background:var(--meter-track); overflow:hidden}
.tre-p-b span{display:block; height:100%; border-radius:var(--r-pilule)}
.tre-entree{background:var(--fin-marge)}
.tre-sortie{background:var(--fin-charges)}
.tre-hyp{margin-top:var(--sp-2); color:var(--ink-2); font-size:var(--fs-12)}
.tre-hyp summary{cursor:pointer; display:inline-flex; gap:var(--sp-1); align-items:center; color:var(--muted)}
.tre-hyp summary .svgi{width:14px; height:14px}
.tre-hyp ul{margin:var(--sp-2) 0 0 var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-1)}
/* le rapprochement */
.rap-puces{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-2) 0}
.rap-puce{display:inline-flex; gap:var(--sp-1); align-items:center; padding:var(--sp-1) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-pilule); font-size:var(--fs-12); color:var(--ink-2); background:var(--surface)}
.rap-puce.on{border-color:var(--accent); background:var(--accent-soft); color:var(--ink)}
.rap-somme{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin:var(--sp-1) 0 var(--sp-3); font-size:var(--fs-13); color:var(--ink-2)}
.rap-mini{font-size:var(--fs-12); color:var(--ink-2)}
.rap-main{margin-top:var(--sp-3)}
.rap-main summary{cursor:pointer; color:var(--texte-accent); font-size:var(--fs-13)}
.rap-form{margin-top:var(--sp-2); grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
/* la clôture */
.clo-liste{list-style:none; display:flex; flex-direction:column; gap:var(--sp-2); margin:var(--sp-2) 0}
.clo-liste li{display:flex; gap:var(--sp-2); align-items:flex-start; font-size:var(--fs-13)}
.clo-liste li>.svgi{width:16px; height:16px; flex:0 0 auto; margin-top:2px}
.clo-liste li>span{flex:1}
.clo-ok>.svgi{color:var(--texte-ok)}
.clo-ko>.svgi{color:var(--texte-alerte)}
.clo-compte{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); padding:var(--sp-2) var(--sp-3); margin:var(--sp-2) 0; border-radius:var(--r-md); background:var(--surface-3); font-size:var(--fs-13); color:var(--ink-2)}
.clo-avert{list-style:none; margin-top:var(--sp-1)}
.clo-avert li{display:flex; gap:var(--sp-1); align-items:center; color:var(--texte-alerte); font-size:var(--fs-11); white-space:normal}
.clo-avert .svgi{width:12px; height:12px}
.clo-cartes .clo-vide{color:var(--muted)}
.clo-cartes .go{margin-top:var(--sp-2)}
/* reprise et corrections */
.hc-form{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.hc-motif{display:inline-block; max-width:360px; white-space:normal}
/* les factures */
.fac-dl{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp-2) var(--sp-4)}
.fac-dl dt{color:var(--muted); font-size:var(--fs-11); letter-spacing:.03em}
.fac-dl dd{font-size:var(--fs-13); margin:0}
.fac-hist h4{font-size:var(--fs-13); margin-bottom:var(--sp-1)}
@media(max-width:760px){
  .fi-et-tete{display:none}
  .fi-et,.fi-avec-cmp .fi-et{grid-template-columns:minmax(0,1fr) auto auto; row-gap:var(--sp-1)}
  .fi-et-b{grid-column:1 / -1; grid-row:2}
  .fi-et-p{display:none}
  .fi-barre>.seg{max-width:100%}
  /* un lien dans une phrase garde la hauteur de la ligne (cible en ligne : exemptée des 44 px) */
  .fi-note .lnk{min-height:0}
  /* l'horizon de la trésorerie tient sur une ligne : « 30 j » */
  .tre-jours{display:none}
  .tre-j{display:inline}
  .tre-poste{grid-template-columns:minmax(0,1fr) auto}
  .tre-p-b{grid-column:1 / -1; grid-row:2}
  .fi-trajet{max-width:160px}
  .fi-det .tablewrap{max-height:none}
}

/* ================= V81.0 (chantier 9, O6 : Paiements — période, registre, lots de versement, volet) ================= */
/* le volet : un panneau latéral générique */
.volet-fond{position:fixed; inset:0; background:color-mix(in srgb,var(--ink) 22%,transparent); opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; z-index:var(--z-volet-fond)}
.volet-fond.on{opacity:1; visibility:visible}
.volet{position:fixed; inset:0 0 0 auto; width:min(640px,100vw); display:flex; flex-direction:column; background:var(--page); border-left:1px solid var(--border);
  box-shadow:var(--shadow-pop); transform:translateX(102%); transition:transform .26s var(--ease); z-index:var(--z-volet)}
.volet.on{transform:none}
.volet-tete{display:flex; align-items:flex-start; gap:var(--sp-3); padding:calc(var(--sp-3) + env(safe-area-inset-top,0px)) var(--sp-4) var(--sp-3); border-bottom:1px solid var(--border); background:var(--surface)}
.volet-titres{flex:1; min-width:0}
.volet-ligne{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap}
.volet-titre{font-size:var(--fs-16); font-weight:600; margin:0; overflow-wrap:anywhere}
.volet-sous{color:var(--muted); font-size:var(--fs-12); margin-top:var(--sp-1)}
.volet-corps{flex:1; overflow-y:auto; padding:var(--sp-4) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:var(--sp-3)}
.volet-corps .tablewrap{max-height:none}
/* l'en-tête et la barre de la période */
.pay-reste{font-size:var(--fs-13)}
.pay-lib{font-size:var(--fs-14)}
/* le tableau : en-têtes en jetons, colonnes chiffrées à droite, semaines dépliables */
.pay-table th,.pay-table td{white-space:nowrap}
.pay-table th:first-child,.pay-table td:first-child{text-align:left; white-space:normal; min-width:180px}
.pay-table tbody tr.pay-ligne{cursor:pointer}
.pay-table tbody tr.pay-ligne:hover td,.pay-table tbody tr.pay-ligne:focus-visible td{background:var(--surface-2)}
.pay-table tr.pay-vide td{color:var(--muted)}
.pay-table th.pay-colsem,.pay-table td.pay-colsem{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
.pay-table th.pay-coljour,.pay-table td.pay-coljour{font-size:var(--fs-12); color:var(--ink-2)}
.pay-sem{display:inline-flex; align-items:center; gap:var(--sp-1); font:inherit; font-weight:600; color:var(--ink); background:none; border:0; padding:0; cursor:pointer}
.pay-sem .svgi{width:14px; height:14px}
.pay-nom{font-weight:600}
.pay-total td{font-weight:600; border-top:1px solid var(--border-strong); background:var(--surface)}
/* le volet d'un bénéficiaire ou d'un paiement */
.pay-outils{flex-wrap:wrap; gap:var(--sp-2); justify-content:flex-start}
.pay-danger{justify-content:flex-start; margin-top:var(--sp-2)}
.pay-h4{font-size:var(--fs-13); font-weight:600; margin:var(--sp-2) 0 0}
.pay-dl{padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface)}
.pay-iban{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); font-size:var(--fs-13)}
.pay-iban>.svgi{width:16px; height:16px; color:var(--muted); flex:0 0 auto}
.pay-iban>span{flex:1; min-width:0}
.pay-iban-manque{border-color:var(--warn); background:var(--warn-soft)}
.pay-iban-manque>.svgi{color:var(--texte-alerte)}
.pay-courses th,.pay-courses td,.pay-lignes th,.pay-lignes td,.pay-versements th,.pay-versements td{text-align:left}
.pay-lignes tr.pay-retenue td.pay-du{color:var(--texte-danger)}
.pay-lignes td.pay-ajust{width:32%; min-width:120px; white-space:normal}
.pay-lignes td:first-child{white-space:normal; width:64px}
.pay-adj{display:block; width:100%; text-align:right}
.pay-com{display:block; width:100%; margin-top:var(--sp-1)}
.pay-libre{border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); padding:var(--sp-2) var(--sp-3)}
.pay-libre summary{cursor:pointer; font-weight:600; font-size:var(--fs-13); display:flex; align-items:center; gap:var(--sp-1)}
.pay-libre summary .svgi{width:14px; height:14px}
.pay-form{display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:flex-end}
.pay-form label{display:flex; flex-direction:column; gap:var(--sp-1); font-size:var(--fs-12); color:var(--ink-2); flex:1 1 180px; min-width:0}
.pay-form label>span:first-child .muted{font-weight:400}
.pay-form .sub,.pay-form .fi-note,.pay-form .tablewrap,.pay-form .go,.pay-form .reg-lot-champs{flex:1 1 100%}
.pay-form .go{justify-content:flex-start}
.pay-iban-form label{flex:1 1 100%}
.pay-devise{display:flex; align-items:center; gap:var(--sp-2)}
.pay-devise input{flex:1; min-width:0; text-align:right; font-size:var(--fs-16)}
.pay-photo{border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); padding:var(--sp-3); font-size:var(--fs-13)}
.pay-photo h5{font-size:var(--fs-12); margin:var(--sp-2) 0 var(--sp-1); color:var(--ink-2)}
.pay-photo ul{margin:0; padding-left:var(--sp-4)}
/* le registre */
.reg-case{width:34px}
.reg-case input,.reg-cartes input{width:18px; height:18px}
.reg-sans,.reg-warn{color:var(--texte-alerte); display:inline-flex; align-items:center; gap:var(--sp-1)}
.reg-sans .svgi,.reg-warn .svgi{width:14px; height:14px}
.reg-selection{position:sticky; bottom:var(--sp-3); display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3); padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--accent-border); border-radius:var(--r-lg); background:var(--elevated); box-shadow:var(--shadow-pop); z-index:var(--z-flottant)}
.reg-lot-champs{display:flex; flex-wrap:wrap; gap:var(--sp-3)}
.reg-recap th,.reg-recap td{text-align:left}
.reg-cartes .reg-choisi{border-color:var(--accent)}
/* au téléphone : des listes compactes au lieu de tableaux larges */
.pay-mliste{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface)}
.pay-mligne{padding:var(--sp-2) var(--sp-3); border-top:1px solid var(--border); font-size:var(--fs-13)}
.pay-mligne:first-child{border-top:0}
.pay-mtete{display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-2)}
.pay-mtete>span:first-child{min-width:0; overflow-wrap:anywhere}
.pay-md{flex:0 0 auto; text-align:right}
.pay-mligne.pay-retenue .pay-du{color:var(--texte-danger)}
.pay-majust{display:flex; flex-direction:column; gap:var(--sp-1); margin-top:var(--sp-2)}
/* les lots */
.lot-liste{display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; margin-bottom:var(--sp-3)}
.lot-lignes th,.lot-lignes td{text-align:left}
.lot-raisons{margin:var(--sp-1) 0 0; padding-left:var(--sp-4)}
@media(max-width:760px){
  .volet{width:100vw}
  .pay-onglets>.seg{max-width:100%; overflow-x:auto; flex-wrap:nowrap}
  .reg-selection{bottom:calc(var(--sp-3) + 64px)}
  .pay-form label{flex:1 1 100%}
}
/* ================= V81.1 (chantier 9, O6 : la barre en deux rangées, les paiements d'une période en un geste) ================= */
.pay-serie-lot{font-weight:600}
.pay-serie-zone{display:flex; flex-direction:column; gap:var(--sp-3)}
.pay-serie-zone .fi-note{margin:0}
/* ================= V82.0 (chantier 9, O7 : Charges — une compta de groupe) ================= */
.chg-lib{font-size:var(--fs-14)}
.chg-graphes{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-3); align-items:start; margin:var(--sp-3) 0}
.chg-graphes>.card{margin:0; min-width:0}
.chg-entites li{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:baseline; gap:var(--sp-2)}
.chg-entites li .lnk{text-align:left; overflow-wrap:anywhere; min-height:0}
.chg-entites .chg-somme{border-top:1px solid var(--border); padding-top:var(--sp-1); font-weight:600}
/* la fiche : quatre blocs, deux colonnes */
.chg-form{display:flex; flex-direction:column; gap:var(--sp-3)}
.chg-form fieldset{border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-2) var(--sp-3) var(--sp-3); margin:0; min-width:0}
.chg-form legend{padding:0 var(--sp-1); font-size:var(--fs-13); font-weight:600; color:var(--ink-2)}
.chg-grille{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2) var(--sp-3); align-items:end}
.chg-grille label{display:flex; flex-direction:column; gap:var(--sp-1); font-size:var(--fs-12); color:var(--ink-2); min-width:0}
.chg-grille label[hidden]{display:none}
.chg-grille .sel{width:100%}
.chg-grille .pay-devise input.sel{flex:1 1 auto; width:auto; min-width:0}
.chg-grille .pay-devise select.sel{flex:0 0 96px; width:96px}
.chg-grille .chg-large,.chg-grille .chg-ht,.chg-grille .chg-aide-quand{grid-column:1 / -1}
.chg-grille textarea.sel{resize:vertical; min-height:56px}
.chg-ht,.chg-aide-quand{margin:0}
/* le plan des charges (Réglages › Finances) — V3.29 : une liste (le tableau d'avant est parti), ses règles en fin de feuille */
.chg-plan-actif{display:inline-flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-12); white-space:nowrap}
.chg-plan .go{gap:var(--sp-2); margin-top:var(--sp-2)}
@media(max-width:760px){
  .chg-graphes{grid-template-columns:minmax(0,1fr)}
  .chg-grille{grid-template-columns:minmax(0,1fr)}
  .chg-entites li .lnk{min-height:0}
}

/* ================= V83.0 (chantier 9, O22 : Tarification — garde-fous de prix, historique, droits) ================= */
.btn.sc-arme,.tbtn.sc-arme{background:var(--bad-soft); color:var(--texte-danger); border-color:color-mix(in srgb,var(--bad) 40%,var(--border-strong))}
.tf-act .tbtn.sc-arme{width:auto; padding:0 var(--sp-2)}
.tf-gardes{margin:var(--sp-2) 0 0}
.tf-gardes:empty{display:none}
.tf-outils{margin:var(--sp-3) 0}
.tf-rtete{display:flex; align-items:flex-start; gap:var(--sp-2)}
.tf-rtete>b{min-width:0; overflow-wrap:anywhere}
.tf-rtete .tf-act{margin-left:auto; display:inline-flex; flex:0 0 auto; gap:2px; margin-top:-3px}
.tf-rtete .tf-act .tbtn{margin-left:0; color:var(--muted)}
.tf-rtete .tf-act .tbtn:hover{color:var(--ink)}
.tf-dt tr.gf-ligne>td{max-width:none; padding-top:0; text-align:left; white-space:normal; box-shadow:inset 2px 0 0 var(--bad)}
.tf-dt tbody tr.gf-ligne:hover>td{background:transparent}
.tf-dt tr:has(+tr.gf-ligne)>td{border-bottom-color:transparent}
.tf-mz-pct{width:44px; text-align:right; font:inherit; font-size:var(--fs-12); font-weight:600; padding:3px 6px; border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink)}
.gf-refus{margin-top:var(--sp-1); padding:var(--sp-2) var(--sp-3); border:1px solid color-mix(in srgb,var(--bad) 35%,var(--border)); border-radius:var(--r-sm); background:var(--bad-soft); color:var(--ink); font-size:var(--fs-12); line-height:1.45; white-space:normal; text-align:left; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3)}
.gf-refus+.gf-refus{margin-top:var(--sp-2)}
.gf-texte{flex:1 1 300px; min-width:0}
.gf-texte>b{display:block; color:var(--texte-danger); font-weight:600}
.gf-texte>div+div{margin-top:2px}
.tf-mz-table .gf-refus{max-width:320px; display:block}
.tf-mz-table .gf-refus>div+div{margin-top:var(--sp-1)}
.gf-gestes,.gf-force{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1)}
.gf-force{flex-basis:100%}
.gf-force .gf-note{flex:1 1 160px; min-width:0}
.tf-plus{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); margin-top:var(--sp-2)}
.tf-arnote{margin-top:var(--sp-2)}
.tf-histo{list-style:none; margin:var(--sp-3) 0 0; padding:0}
.tf-histo li{padding:var(--sp-2) 0; border-top:1px solid var(--border)}
.tf-histo li .btn{margin-top:var(--sp-1)}
.tf-hist-l{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.tf-form-pied{margin:var(--sp-3) 0 0}
.tf-adv-corps{margin-top:var(--sp-3)}
.tf-pct{width:80px}
.tf-statut{padding-top:var(--sp-2)}
.sc-danger{color:var(--corail)}
.tf-mz-plan{margin-top:var(--sp-3)}
.tf-mz-plan .ch{margin-bottom:var(--sp-2)}
.tf-mz-plan h3{font-size:var(--fs-13)}
.tf-mz-table{min-width:420px}
.tf-mz-sans{margin-top:var(--sp-1)}
.tf-mz-resume{margin:0}
.gf-ligne-bloquee td{background:var(--bad-soft)}
/* Réglages › Finances : les garde-fous de prix */
.gf-reg{display:flex; flex-direction:column; gap:var(--sp-3)}
.gf-defaut{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2) var(--sp-3)}
.gf-defaut label{display:flex; flex-direction:column; gap:var(--sp-1); font-size:var(--fs-12); color:var(--ink-2); min-width:0}
.gf-defaut .sel{width:100%}
.gf-table .sel{width:100%; min-width:64px}
.gf-table select.sel{min-width:120px}
.gf-table th,.gf-table td{text-align:left}
.gf-num{text-align:right}
.gf-reg .go{gap:var(--sp-2)}
@media(max-width:1040px){
  .tf-dt.cards tr.gf-ligne{display:block; padding:0 var(--sp-3) var(--sp-3); border-left:3px solid var(--bad)}
  .tf-dt.cards tr.gf-ligne>td{display:block; box-shadow:none}
  .tf-dt.cards tr:has(+tr.gf-ligne){border-bottom:0}
}
@media(max-width:760px){
  .gf-defaut{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .gf-defaut label:has(select){grid-column:1/-1}
  .tf-mz-table .gf-refus{max-width:none}
  .gf-table{min-width:0; width:100%}
  .gf-table thead{display:none}
  .gf-table,.gf-table tbody{display:block}
  .gf-table tr{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2); padding:var(--sp-3) 0; border-bottom:1px solid var(--grid)}
  .gf-table td{display:block; border:0; padding:0; min-width:0; white-space:normal; text-align:left}
  .gf-table td.gf-gamme{grid-column:1/-1; font-weight:600}
  .gf-table td[data-l]::before{content:attr(data-l); display:block; font-size:var(--fs-11); color:var(--muted); margin-bottom:2px}
  .gf-table select.sel{min-width:0}
}

/* ================= V84.0 (chantier 9, O22 : grilles d'achat — relecture, programmation, portail des flottes) ================= */
/* Achat : la barre, la liste des grilles, la fiche */
.ga-wrap{display:grid; grid-template-columns:240px minmax(0,1fr); gap:var(--sp-4); align-items:start}
.ga-side{padding:var(--sp-3) var(--sp-2); position:sticky; top:calc(var(--haut-barre) + var(--sp-3)); max-height:calc(100vh - 140px); overflow:auto; min-width:0}
.ga-main{min-width:0; display:flex; flex-direction:column; gap:var(--sp-3)}
.ga-grp+.ga-grp{margin-top:var(--sp-3)}
.ga-grp-t{padding:0 var(--sp-2) var(--sp-1); font-size:var(--fs-11); font-weight:500; color:var(--faint)}
.ga-item{display:flex; align-items:center; width:100%; border:0; border-radius:var(--r-sm); background:transparent; color:var(--ink-2); font:inherit; font-size:var(--fs-13); font-weight:500; text-align:left; cursor:pointer}
.ga-item:hover{background:var(--surface-3); color:var(--ink)}
.ga-item.on{background:var(--accent-soft); color:var(--ink); box-shadow:inset 2px 0 0 var(--accent)}
.ga-item.off .ga-nm{color:var(--muted)}
.ga-nm{flex:1 1 120px; min-width:0; overflow-wrap:anywhere}
.ga-off{flex-basis:100%; font-size:var(--fs-11); color:var(--muted)}
.ga-selmob{display:none; margin:0}
.ga-fiche,.mt-fiche{display:flex; flex-direction:column; gap:var(--sp-3)}
.ga-tete{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-2) var(--sp-3)}
.ga-titre{flex:1 1 260px; min-width:0}
.ga-titre h3{margin:0; font-size:var(--fs-16); overflow-wrap:anywhere}
.ga-titre .sub{margin-top:2px}
.ga-gestes{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
#gaVersion,#mtVersion{display:flex; flex-direction:column; gap:var(--sp-3); min-width:0}
/* « .card .sub » remonte un sous-titre sous le titre d'une carte : ici, les sous-lignes restent à leur place */
#gaCorps .card .sub,#mtCorps .card .sub{margin:0; line-height:1.45}
#gaCorps .ga-titre .sub,#mtCorps .ga-titre .sub,#gaCorps .ge-b-texte .sub,#mtCorps .ge-b-texte .sub{margin-top:var(--sp-1)}
/* la frise des versions */
.ge-frise{display:flex; gap:var(--sp-2); overflow-x:auto; padding:2px 2px var(--sp-1); scrollbar-width:thin}
.ge-v{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:128px; max-width:220px; padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer}
.ge-v:hover{border-color:var(--border-strong)}
.ge-v.on{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
.ge-vn{font-size:var(--fs-13); font-weight:600}
.ge-vp{font-size:var(--fs-11); color:var(--muted); white-space:normal}
.pill.ge-prog{padding:1px var(--sp-2); border-radius:var(--r-pilule); font-weight:600; font-size:var(--fs-12); background:var(--accent-soft); color:var(--texte-accent)}
/* l'état d'une version, et le compte rendu du dernier geste */
.ge-bandeau{display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--sp-2) var(--sp-3); padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-3); font-size:var(--fs-13); line-height:1.5}
.ge-b-warn{background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 30%,var(--border))}
.ge-b-bad{background:var(--bad-soft); border-color:color-mix(in srgb,var(--bad) 30%,var(--border))}
.ge-b-good{background:var(--good-soft); border-color:color-mix(in srgb,var(--good) 30%,var(--border))}
.ge-b-ge-prog{background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
.ge-b-texte{flex:1 1 280px; min-width:0}
.ge-b-texte b{font-weight:600}
.ge-b-gestes{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.ge-note{margin-top:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-left:3px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere}
.ge-note-bad{border-left-color:var(--bad)}
.ge-retour{display:flex; flex-direction:column; gap:var(--sp-1)}
.ge-r{display:flex; align-items:flex-start; gap:var(--sp-2); font-size:var(--fs-13)}
.ge-r svg{width:14px; height:14px; flex:none; margin-top:3px}
.ge-r-good svg{color:var(--texte-ok)}
.ge-r-warn svg{color:var(--texte-alerte)}
.ge-r-info svg{color:var(--muted)}
/* les blocs : trajets, règles, comparaison */
.ge-bloc,.ge-cmp{display:flex; flex-direction:column; gap:var(--sp-2); min-width:0}
.ge-cmp{padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md)}
.ge-cmp[hidden]{display:none}
.ge-bloc-t{display:flex; align-items:center; gap:var(--sp-2)}
.ge-bloc-t h4{margin:0; font-size:var(--fs-14)}
.ge-bloc-t .cnt{font-size:var(--fs-12); color:var(--muted); font-variant-numeric:tabular-nums}
.ge-bloc-t .tbtn{margin-left:auto}
table.ge-table th,table.ge-table td{text-align:left; white-space:normal; padding-left:var(--sp-2); padding-right:var(--sp-2)}
table.ge-table td.ge-lieu{min-width:96px}
table.ge-table th.ge-n,table.ge-table td.ge-n{text-align:right; white-space:nowrap}
.ge-table td.ge-gestes,.ge-table th.ge-gestes{width:40px; text-align:right}
.ge-table .sel.ge-num{width:78px; min-height:32px; padding:var(--sp-1) var(--sp-2); border-radius:var(--r-sm); text-align:right; font-variant-numeric:tabular-nums}
.ge-table .sel.ge-pax{width:52px}
.ge-table .sel.ge-change{border-color:var(--accent); background:var(--accent-soft)}
.ge-table .f-msg{white-space:normal; text-align:left}
.ge-pied{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.ge-pied .sub{flex:1 1 200px}
/* les formulaires repliés : ajouter un trajet, une règle ; appliquer ; proposer ; décider */
.ge-ajout{border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface)}
.ge-ajout>summary{display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); list-style:none; cursor:pointer; font-size:var(--fs-13); font-weight:600; color:var(--ink-2)}
.ge-ajout>summary::-webkit-details-marker{display:none}
.ge-ajout>summary svg{width:14px; height:14px}
.ge-ajout>summary:hover{color:var(--ink)}
.ge-ajout[open]>summary{border-bottom:1px solid var(--border)}
.ge-ajout>.ge-form,.ge-ajout>p{margin:0; padding:var(--sp-3)}
.ge-activer>summary{color:var(--texte-accent)}
.ge-form{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--sp-2) var(--sp-3); align-items:start}
.ge-form .field{margin:0; min-width:0}
.ge-form .field .sel{width:100%}
.ge-form fieldset.field{border:0; padding:0; margin:0}
.ge-form legend.fld-lab{padding:0; margin:0 0 var(--sp-1)}
.ge-form .ge-large,.ge-form .ge-jours,.ge-form .ge-quand{grid-column:1/-1}
.ge-form textarea.sel{min-height:64px; resize:vertical; border-radius:var(--r-sm)}
/* le bouton s'aligne sur les cases, pas sur leur libellé (une case en erreur allonge sa colonne, pas la rangée) */
.ge-form-go{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-2); padding-top:calc(var(--fs-12) * 1.5 + 5px)}
.ge-form>.ge-large+.ge-form-go,.ge-form>.ge-jours~.ge-form-go{padding-top:0}
.ge-chips{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3)}
.ge-quand .chk{margin-right:var(--sp-4); min-height:32px}
.ge-regles{list-style:none; margin:0; padding:0}
.ge-regles li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px var(--sp-2); align-items:center; padding:var(--sp-2) 0; border-bottom:1px solid var(--grid)}
.ge-regles li>.ge-rg-t,.ge-regles li>.sub{grid-column:1}
.ge-regles li .tbtn{grid-column:2; grid-row:1/3}
.ge-rg-t{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-2)}
.ge-import{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3)}
.ge-import .sub{flex:1 1 260px}
.btn.ge-danger{color:var(--texte-danger)}
.btn.ge-danger:not(.ghost){background:var(--bad); border-color:var(--bad); color:var(--on-couleur)}
/* ce qui change, et l'effet sur les trajets */
.ge-puces{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-2)}
.ge-puce{display:inline-flex; align-items:center; gap:var(--sp-1); padding:2px var(--sp-2); border-radius:var(--r-pilule); background:var(--surface-2); color:var(--ink-2); font-size:var(--fs-12)}
.ge-puce b{color:var(--ink)}
.ge-puce.vide,.ge-puce.vide b{color:var(--muted)}
.ge-ecart{font-weight:600}
.ge-ecart.hausse,.ge-neg{color:var(--texte-danger)}
.ge-ecart.baisse{color:var(--texte-ok)}
.ge-h4{margin:var(--sp-3) 0 var(--sp-2); font-size:var(--fs-13); font-weight:600; color:var(--ink-2)}
.ge-liste{margin:0; padding-left:var(--sp-4); font-size:var(--fs-13)}
.ge-total{margin:var(--sp-2) 0 0; font-size:var(--fs-13)}
table.ge-diff th:nth-child(2),table.ge-diff td:nth-child(2){text-align:left}
table.ge-diff td,table.ge-impact td{white-space:normal}
table.ge-diff td:first-child,table.ge-impact td:first-child{min-width:160px}
table.ge-impact th{white-space:normal; vertical-align:bottom}
table.ge-impact th,table.ge-impact td{padding-left:var(--sp-2); padding-right:var(--sp-2)}
.ge-decision{display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-2); padding-top:var(--sp-3); border-top:1px solid var(--border)}
.ge-dec-go{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.ge-revue{display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-3)}
.ge-revue>.ge-note{margin-top:0}
/* Mes tarifs (une flotte) */
@media(max-width:1040px){
  .ga-wrap{grid-template-columns:minmax(0,1fr)}
  .ga-side{position:static; max-height:none; padding:var(--sp-3)}
  .ga-liste{display:none}
  .ga-selmob{display:flex}
}
@media(max-width:760px){
  .ga-tete .ga-gestes,.ge-b-gestes{width:100%}
  .ge-v{min-width:112px}
  .ge-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ge-form-go{grid-column:1/-1}
  table.ge-table{min-width:0; width:100%}
  table.ge-table thead{display:none}
  table.ge-table,table.ge-table tbody{display:block}
  table.ge-table tr{position:relative; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-2); border-bottom:1px solid var(--grid)}
  table.ge-table td,table.ge-table td.ge-n{display:block; border:0; padding:0; min-width:0; text-align:left; white-space:normal}
  table.ge-table td.ge-lieu{grid-column:span 2}
  table.ge-table td.ge-veh{grid-column:1/-1}
  table.ge-table td[data-l]::before{content:attr(data-l); display:block; margin-bottom:2px; font-size:var(--fs-11); color:var(--muted)}
  table.ge-table td.ge-gestes{top:var(--sp-3); right:0}
  .ge-table .sel.ge-num,.ge-table .sel.ge-pax{width:100%}
}

/* ================= V85.0 (chantier 9, O22 : le simulateur unique, ce qui s'applique à une zone) ================= */
.sim-wrap{display:flex; flex-direction:column; gap:var(--sp-4); min-width:0}
.sim-wrap .card .sub,.pz-sec .sub{margin:0; line-height:1.45}
.sim-form{display:flex; flex-direction:column; gap:var(--sp-3)}
.sim-form .ch{margin-bottom:0}
.sim-grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--sp-2) var(--sp-3); align-items:end}
.sim-grille .field{margin:0; min-width:0}
.sim-grille .field .sel{width:100%}
.sim-f-depart,.sim-f-arrivee{grid-column:span 2}
.sim-f-ar{min-height:40px}
.sim-plus summary{cursor:pointer; color:var(--ink-2); font-size:var(--fs-13); padding:var(--sp-1) 0}
.sim-plus[open] summary{margin-bottom:var(--sp-2)}
.sim-go{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3)}
.sim-res{display:flex; flex-direction:column; gap:var(--sp-3); min-width:0}
.sim-arret{display:flex; gap:var(--sp-2); align-items:flex-start; padding:var(--sp-3); border-radius:var(--r-md); background:var(--bad-soft); color:var(--ink); border-left:3px solid var(--bad)}
.sim-arret svg{flex:none; width:18px; height:18px; color:var(--texte-danger); margin-top:1px}
.sim-arret b{color:var(--texte-danger)}
.sim-alertes{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2)}
.sim-alertes li{display:flex; gap:var(--sp-2); align-items:baseline; font-size:var(--fs-13); line-height:1.45; color:var(--ink-2)}
.sim-alertes .pill{flex:none}
.sim-cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-3); align-items:start}
.sim-col{display:flex; flex-direction:column; gap:var(--sp-3); min-width:0}
.sim-col>.card{margin:0}
.sim-source{margin-bottom:var(--sp-2)}
table.sim-deco th:first-child,table.sim-deco td:first-child,table.sim-canaux th:first-child,table.sim-canaux td:first-child,
table.sim-achat th:first-child,table.sim-achat td:first-child,table.pz-table th:first-child,table.pz-table td:first-child,
table.pz-routes th:first-child,table.pz-routes td:first-child,table.pz-lignes th:nth-child(-n+2),table.pz-lignes td:nth-child(-n+2){text-align:left}
table.sim-deco td:first-child,table.sim-canaux td:first-child,table.sim-achat td:first-child,table.pz-table td:first-child,table.pz-routes td:first-child{white-space:normal}
table.sim-deco thead{display:none}
table.sim-deco tr.sim-total td{border-top:2px solid var(--border-strong); font-size:var(--fs-14)}
table.sim-deco tr.sim-sous td{color:var(--muted); font-size:var(--fs-12)}
table.sim-deco tr.sim-l-promo td:last-child{color:var(--good-plein)}
table.sim-deco tr.sim-marge td{background:var(--accent-soft); color:var(--ink)}
table.sim-deco tr.sim-marge.neg td,.sim-neg{color:var(--texte-danger)}
table.sim-achat tr.sim-retenue td{background:var(--accent-soft)}
.sim-plancher{margin-top:var(--sp-2)}
.sim-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); margin-top:var(--sp-3)}
.sim-hors{margin:0 0 var(--sp-2); font-size:var(--fs-13); color:var(--ink-2)}
.sim-dl{display:grid; grid-template-columns:minmax(96px,max-content) minmax(0,1fr); gap:var(--sp-1) var(--sp-3); margin:0; font-size:var(--fs-13)}
.sim-dl dt{color:var(--muted)}
.sim-dl dd{margin:0; min-width:0; overflow-wrap:anywhere}
.sim-dl .rowsub{font-size:var(--fs-12); color:var(--muted)}
.sim-proches{list-style:none; margin:0 0 var(--sp-2); padding:0; display:flex; flex-direction:column}
.sim-proches li{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--grid)}
.sim-proches .rowsub{font-size:var(--fs-12); color:var(--muted)}
.sim-pr{display:flex; align-items:center; gap:var(--sp-2); flex:none}
.sim-lien{background:none; border:0; padding:0; margin:0; font:inherit; color:var(--texte-accent); cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.sim-lien:hover{color:var(--accent-hover)}
.sim-lien:focus-visible{outline:2px solid var(--ring); outline-offset:2px; border-radius:var(--r-sm)}
/* Zones › Par zone */
.zones-onglets{margin:0 0 var(--sp-4)}
.zones-simu{margin-top:var(--sp-4)}
.pz-barre{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); margin:0 0 var(--sp-3)}
.pz-barre .spacer{flex:1}
.pz-q{flex:0 1 320px; min-width:180px}
table.pz-table tbody tr{cursor:pointer}
table.pz-table tbody tr:focus-visible{outline:2px solid var(--ring); outline-offset:-2px}
.pz-sans{color:var(--texte-alerte)}
.pz-ident{margin-bottom:var(--sp-3)}
.pz-gestes{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-4)}
.pz-sec{padding:var(--sp-3) 0; border-top:1px solid var(--border)}
.pz-sec h4{margin:0 0 var(--sp-2); font-size:var(--fs-14); font-weight:600; color:var(--ink)}
.pz-sec h4 .cnt{margin-left:var(--sp-1); color:var(--muted); font-weight:500}
.pz-bloc{display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-3)}
.pz-bloc-t{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-1) var(--sp-2)}
.pz-bloc-t .sub{flex:1 1 auto}
.pz-liste{list-style:none; margin:0 0 var(--sp-2); padding:0; display:flex; flex-direction:column; gap:var(--sp-2)}
.pz-liste li{font-size:var(--fs-13); line-height:1.45}
.pz-liste .rowsub{font-size:var(--fs-12); color:var(--muted)}
.pz-regles{padding-left:var(--sp-2); border-left:2px solid var(--border)}
/* V85.1 — un tarif par ligne dans la fiche d'une zone ; les autres gammes repliées dans le simulateur */
.pz-tarif{gap:0; border-bottom:1px solid var(--grid); margin-bottom:0}
.pz-tarif>summary{cursor:pointer; padding:var(--sp-2) 0; list-style:none}
.pz-tarif>summary::-webkit-details-marker{display:none}
.pz-tarif>summary::before{content:''; width:0; height:0; border-left:5px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent; color:var(--ink-2); flex:none; align-self:center; transition:transform .15s var(--ease)}
.pz-tarif[open]>summary::before{transform:rotate(90deg)}
.pz-tarif[open]>summary{margin-bottom:var(--sp-1)}
.pz-tarif .pz-suite{margin:var(--sp-2) 0 var(--sp-3)}
.sim-autres{margin-top:var(--sp-3)}
.sim-autres>summary{cursor:pointer; color:var(--ink-2); font-size:var(--fs-13); padding:var(--sp-1) 0}
.sim-autres[open]>summary{margin-bottom:var(--sp-2)}
.ge-puce{white-space:nowrap}
@media(max-width:1100px){
  .sim-cols{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .sim-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sim-f-depart,.sim-f-arrivee,.sim-f-quand{grid-column:1/-1}
  .sim-go .btn{flex:1 1 100%; justify-content:center}
  .sim-actions .btn{flex:1 1 100%; justify-content:center}
  .sim-proches li{flex-wrap:wrap}
  .pz-q{flex:1 1 100%}
  .sim-dl{grid-template-columns:minmax(88px,max-content) minmax(0,1fr); gap:var(--sp-1) var(--sp-2)}
  table.sim-canaux th,table.sim-canaux td{padding-left:var(--sp-2); padding-right:var(--sp-2)}
}

/* ================= V86.0 (chantier 9, O23 : Réglages — une page par sujet, une carte normalisée, une recherche) ================= */
.rg-coque{display:grid; grid-template-columns:220px minmax(0,1fr); gap:var(--sp-4); align-items:start}
.rg-nav{position:sticky; top:calc(var(--haut-barre) + var(--sp-3)); max-height:calc(100vh - var(--haut-barre) - var(--sp-5)); overflow:auto; display:flex; flex-direction:column; gap:var(--sp-3); padding-bottom:var(--sp-3); overscroll-behavior:contain}
.rg-cherche{position:relative}
.rg-cherche-ic{position:absolute; left:var(--sp-3); top:50%; transform:translateY(-50%); color:var(--muted); display:flex; pointer-events:none}
.rg-cherche-ic svg{width:15px; height:15px}
.rg-cherche input{width:100%; min-height:38px; padding:var(--sp-2) var(--sp-3) var(--sp-2) calc(var(--sp-3) + 22px); border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--surface); color:var(--ink); font-size:var(--fs-13)}
.rg-cherche input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
.rg-nav-liste{display:flex; flex-direction:column; gap:var(--sp-4)}
.rg-groupe{display:flex; flex-direction:column; gap:1px}
.rg-groupe-t{display:flex; align-items:center; gap:var(--sp-2); padding:0 var(--sp-2) var(--sp-1)}
.rg-groupe-t svg{width:13px; height:13px}
.rg-lien{flex-direction:column; gap:1px; width:100%; padding:var(--sp-2); border:0; border-radius:var(--r-sm); background:none; color:var(--ink-2); text-align:left; cursor:pointer; font:inherit}
.rg-lien:hover{background:var(--surface-2); color:var(--ink)}
.rg-lien:focus-visible{outline:2px solid var(--ring); outline-offset:0}
.rg-lien.on{background:var(--accent-soft); color:var(--ink)}
.rg-lien.on .rg-lien-t{color:var(--texte-accent); font-weight:600}
.rg-lien-t{font-size:var(--fs-13); font-weight:500; line-height:1.3}
.rg-lien-s{display:none; font-size:var(--fs-12); color:var(--muted); line-height:1.35}
.rg-res .rg-lien-s{display:block}
.rg-rien{padding:var(--sp-3) var(--sp-2); display:flex; flex-direction:column; gap:var(--sp-2); align-items:flex-start}
.rg-rien p{margin:0; font-size:var(--fs-12); color:var(--muted)}
.rg-page{min-width:0; max-width:1040px; display:flex; flex-direction:column; gap:var(--sp-4)}
.rg-tete{display:flex; flex-direction:column; gap:var(--sp-1)}
.rg-retour{display:none; align-self:flex-start}
.rg-chemin{font-size:var(--fs-12); color:var(--muted); font-weight:500}
.rg-titre{margin:0; font-size:var(--fs-20); font-weight:650; letter-spacing:-.02em; color:var(--ink)}
.rg-titre:focus{outline:none}
.rg-aide{margin:0; font-size:var(--fs-13); color:var(--ink-2); line-height:1.5}
.rg-corps.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4); align-items:start}
.rg-corps>.rg-large,.rg-corps .rg-boite>.rg-carte{grid-column:1/-1}
.rg-boite{display:contents}
/* la carte */
.rg-carte{display:flex; flex-direction:column; gap:var(--sp-3); margin:0; scroll-margin-top:calc(var(--haut-barre) + var(--sp-4))}
.rg-carte-tete{display:flex; align-items:flex-start; gap:var(--sp-3); flex-wrap:wrap}
.rg-carte-tete h3{margin:0; flex:1 1 auto; display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); font-size:var(--fs-14); font-weight:600; color:var(--ink); letter-spacing:-.01em}
.rg-droite{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-left:auto}
.rg-etiq{display:inline-flex; align-items:center; padding:1px var(--sp-2); border-radius:var(--r-pilule); background:var(--surface-2); color:var(--ink-2); font-size:var(--fs-11); font-weight:600}
.rg-sale{display:inline-flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-11); font-weight:500; color:var(--texte-alerte)}
.rg-sale[hidden]{display:none}
.rg-sale-point{width:7px; height:7px; border-radius:var(--r-rond); background:var(--warn)}
.rg-carte-aide{margin:0; font-size:var(--fs-13); color:var(--ink-2); line-height:1.5}
.rg-plus{margin-top:calc(-1 * var(--sp-2))}
.rg-plus>summary{display:inline-flex; align-items:center; gap:var(--sp-1); cursor:pointer; list-style:none; font-size:var(--fs-12); color:var(--texte-accent)}
.rg-plus>summary::-webkit-details-marker{display:none}
.rg-plus>summary::before{content:''; width:0; height:0; border-left:4px solid currentColor; border-top:3px solid transparent; border-bottom:3px solid transparent; transition:transform .15s var(--ease)}
.rg-plus[open]>summary::before{transform:rotate(90deg)}
.rg-plus-corps{margin-top:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-left:2px solid var(--border); font-size:var(--fs-12); color:var(--ink-2); line-height:1.55}
.rg-plus-corps p{margin:0}
.rg-carte-corps{display:flex; flex-direction:column; gap:var(--sp-3); min-width:0}
.rg-carte-corps>.vide{margin:0}
.rg-pied{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--grid); font-size:var(--fs-12); color:var(--muted)}
.rg-defaut{flex:0 1 auto}
.rg-maj:empty{display:none}
.rg-pied-g{display:flex; gap:var(--sp-2); margin-left:auto}
.rg-carte.est-sale{box-shadow:var(--shadow-card), inset 3px 0 0 var(--warn)}
.rg-vise{animation:rg-vise 1.6s var(--ease)}
@keyframes rg-vise{0%,40%{box-shadow:var(--shadow-card), 0 0 0 3px var(--ring)}100%{box-shadow:var(--shadow-card)}}
.rg-note{margin:0; font-size:var(--fs-12); color:var(--muted); line-height:1.5}
.rg-att{color:var(--texte-alerte)}
.rg-ko{color:var(--texte-danger)}
/* les champs */
.rg-champs{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:var(--sp-3); align-items:start}
.rg-champs .field{margin:0; min-width:0}
.rg-champs .field input,.rg-champs .field select{width:100%}
.rg-champs .rg-note{margin-top:var(--sp-1)}
.rg-champ-inter{align-self:end}
.rg-deux{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3)}
.rg-deux .field{margin:0 0 var(--sp-2)}
.rg-deux textarea{width:100%; min-height:72px; resize:vertical}
.rg-gestes{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.rg-gestes-champ{align-items:flex-end}
.rg-gestes-champ .field{margin:0; min-width:200px}
.rg-sous-bloc{display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-3); border-radius:var(--r-md); background:var(--surface-3)}
/* l'interrupteur */
.rg-inter{display:flex; align-items:center; gap:var(--sp-3); min-height:32px}
.rg-inter-l{display:flex; flex-direction:column; gap:1px; cursor:pointer; font-size:var(--fs-13); color:var(--ink); line-height:1.35}
.rg-inter-l small{font-size:var(--fs-12); color:var(--muted)}
.rg-inters{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--sp-1) var(--sp-4)}
.switch{position:relative; flex:none; width:44px; height:24px; min-height:0; min-width:0; padding:0; border:0; border-radius:var(--r-pilule); background:var(--border-strong); cursor:pointer; transition:background .15s var(--ease)}
.switch-bouton{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:var(--r-rond); background:var(--on-couleur); box-shadow:var(--shadow-ctl); transition:transform .15s var(--ease)}
.switch[aria-checked="true"]{background:var(--accent)}
.switch[aria-checked="true"] .switch-bouton{transform:translateX(20px)}
.switch:focus-visible{outline:2px solid var(--ring); outline-offset:2px}
.switch:disabled{cursor:not-allowed}
/* tableaux, listes, états */
table.rg-table th:first-child,table.rg-table td:first-child{text-align:left}
table.rg-table td:first-child{white-space:normal}
/* V93.22 — Courses archivées : la référence sur une ligne (« NV-261003-ZXFY » se coupait en trois) ; le trajet et le motif
   passent à la ligne au lieu d'élargir le tableau ; au téléphone, une carte par course (tableau(…, {mobile:'cartes'})) */
table.arch-table td:first-child{white-space:nowrap}
table.arch-table td:nth-child(3),table.arch-table td:nth-child(6){white-space:normal}
.rg-tva{display:inline-flex; align-items:center; gap:var(--sp-1)}
.rg-tva input{width:72px; min-height:32px; text-align:right}
.rg-ailleurs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.rg-ailleurs li{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--grid)}
.rg-ailleurs li:last-child{border-bottom:0}
.rg-ailleurs p{margin:var(--sp-1) 0 0; font-size:var(--fs-12); color:var(--muted)}
.rg-ailleurs .btn{flex:none}
.rg-erreurs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.rg-erreurs li{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--grid)}
.rg-erreurs details{flex:1 1 auto; min-width:0}
.rg-erreurs summary{cursor:pointer; list-style:none; display:flex; flex-direction:column; gap:2px}
.rg-erreurs summary::-webkit-details-marker{display:none}
.rg-err-m{font-size:var(--fs-13); font-weight:600; color:var(--ink); overflow-wrap:anywhere}
.rg-err-s{font-size:var(--fs-12); color:var(--muted); overflow-wrap:anywhere}
.rg-pile{margin:var(--sp-2) 0 0; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); background:var(--surface-2); font-family:var(--font-code); font-size:var(--fs-11); white-space:pre-wrap; overflow-wrap:anywhere; max-height:180px; overflow:auto}
.rg-etat-ligne{display:flex; align-items:center; gap:var(--sp-2); margin:0; font-size:var(--fs-13); color:var(--ink-2)}
.rg-point{flex:none; width:9px; height:9px; border-radius:var(--r-rond); background:var(--faint)}
.rg-point.ok{background:var(--good)}
.rg-point.att{background:var(--warn)}
.rg-point.ko{background:var(--bad)}
.rg-pastille{display:inline-flex; align-items:center; gap:var(--sp-1); padding:1px var(--sp-2); border-radius:var(--r-pilule); font-size:var(--fs-12); font-weight:500; white-space:nowrap; background:var(--surface-2); color:var(--ink-2)}
.rg-p-ok{background:var(--good-soft); color:var(--good-plein)}
.rg-p-att{background:var(--warn-soft); color:var(--texte-alerte)}
.rg-p-ko{background:var(--bad-soft); color:var(--texte-danger)}
.rg-kpis{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--sp-2)}
.rg-kpis>div{display:flex; flex-direction:column; gap:2px; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--surface-3)}
.rg-kpis span{font-size:var(--fs-12); color:var(--muted)}
.rg-kpis b{font-size:var(--fs-16); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.rg-dl{margin:0; display:flex; flex-direction:column}
.rg-dl-l{display:grid; grid-template-columns:minmax(110px,max-content) minmax(0,1fr); gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--grid); font-size:var(--fs-13)}
.rg-dl-l:last-child{border-bottom:0}
.rg-dl dt{color:var(--muted)}
.rg-dl dd{margin:0; min-width:0; overflow-wrap:anywhere; color:var(--ink)}
.rg-lien-txt{background:none; border:0; padding:0; font:inherit; font-size:var(--fs-12); color:var(--texte-accent); cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.rg-lien-txt:focus-visible{outline:2px solid var(--ring); outline-offset:2px; border-radius:var(--r-sm)}
.rg-lu{font-size:var(--fs-12); color:var(--muted)}
.rg-v-ok b{color:var(--good-plein)}
.rg-v-att b{color:var(--texte-alerte)}
.rg-v-ko b{color:var(--texte-danger)}
.rg-points{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2)}
.rg-points li{display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-13); color:var(--ink-2)}
.rg-points .rg-point{width:8px; height:8px}
table.rg-jobs tr.rg-job-arrete td,table.rg-jobs tr.rg-job-en_retard td{background:var(--warn-soft)}
table.rg-jobs .rowsub{font-size:var(--fs-11)}
table.rg-jobs td:first-child{min-width:190px}
.rg-plie>summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:var(--sp-1); padding:var(--sp-2) 0; font-size:var(--fs-13); color:var(--texte-accent)}
.rg-plie>summary::-webkit-details-marker{display:none}
.rg-plie>summary::before{content:''; width:0; height:0; border-left:5px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent; transition:transform .15s var(--ease)}
.rg-plie[open]>summary::before{transform:rotate(90deg)}
.rg-taches,.rg-cx{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.rg-taches li,.rg-cx li{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--grid)}
.rg-taches li:last-child,.rg-cx li:last-child{border-bottom:0}
.rg-tache-t,.rg-cx li>div{min-width:0}
.rg-tache-t .rowsub,.rg-cx .rowsub{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); margin-top:2px; font-size:var(--fs-12); color:var(--muted)}
.rg-tache-g{display:flex; gap:var(--sp-2); flex:none}
.nc-etat{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.nc-etat .btn{margin-left:auto}
.dspfams{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.rg-carte .tgalertes{margin-top:0; padding-top:0; border-top:0}
/* Telegram */
.tg-appairage{display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-3); border:1px dashed var(--border-strong); border-radius:var(--r-md)}
.tg-code{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-2) var(--sp-3)}
.tg-code b{font-family:var(--font-code); font-size:var(--fs-24); letter-spacing:.16em; color:var(--ink)}
.tg-etapes{margin:0; padding-left:var(--sp-4); font-size:var(--fs-12); color:var(--ink-2); line-height:1.6}
.tg-convs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.tg-conv{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--grid)}
.tg-conv:last-child{border-bottom:0}
.tg-off .tg-conv-t{opacity:.6}
.tg-conv-t{min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:var(--sp-1)}
.tg-conv-t .rowsub{font-size:var(--fs-12); color:var(--muted)}
.tg-titre{max-width:320px; padding:var(--sp-1) var(--sp-2); margin-left:calc(-1 * var(--sp-2)); border:1px solid transparent; border-radius:var(--r-sm); background:transparent; color:var(--ink); font-weight:600; font-size:var(--fs-14)}
.tg-titre:hover,.tg-titre:focus{border-color:var(--border); background:var(--surface); outline:none}
.tg-gs{display:flex; flex-wrap:wrap; gap:var(--sp-1)}
.tg-g{padding:1px var(--sp-2); border-radius:var(--r-pilule); font-size:var(--fs-11); font-weight:500; background:var(--surface-2); color:var(--ink-2); font-variant-numeric:tabular-nums}
.tg-g-critique{background:var(--bad-soft); color:var(--texte-danger)}
.tg-g-urgent{background:var(--warn-soft); color:var(--texte-alerte)}
.tg-g-attention{background:var(--accent-soft); color:var(--texte-accent)}
.tg-g-vide{background:var(--surface-2); color:var(--muted)}
.tg-conv-g{display:flex; flex-wrap:wrap; gap:var(--sp-2); flex:none; justify-content:flex-end}
.tg-tiroir{display:flex; flex-direction:column; gap:var(--sp-4)}
.tg-sec{display:flex; flex-direction:column; gap:var(--sp-3); padding-bottom:var(--sp-4); border-bottom:1px solid var(--grid)}
.tg-sec:last-child{border-bottom:0}
.tg-sec-t{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3)}
.tg-sec-t>div:first-child{display:flex; flex-direction:column; gap:2px}
.tg-sec-g{display:flex; gap:var(--sp-1); flex:none}
.tg-tiroir .rg-inters{grid-template-columns:minmax(0,1fr)}
.tg-puces-t{font-size:var(--fs-12); font-weight:600; color:var(--ink-2)}
.tg-puces{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.tg-puce{display:inline-flex; align-items:center; gap:var(--sp-1); padding:var(--sp-1) var(--sp-2); border:1px solid var(--border); border-radius:var(--r-pilule); font-size:var(--fs-12); cursor:pointer}
.tg-puce:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.tg-puce input{accent-color:var(--accent)}
/* ================= V86.2 (chantier 9, O23 : Automatisations, journal des événements, mes notifications, barre mobile) ================= */
.rg-autos{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.rg-auto{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--grid)}
.rg-auto:last-child{border-bottom:0}
.rg-auto-t{display:flex; flex-direction:column; gap:var(--sp-1); min-width:0}
.rg-auto-t p{margin:0; font-size:var(--fs-12); color:var(--muted)}
.rg-auto-t .rowsub{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); font-size:var(--fs-12)}
.rg-auto-g{display:flex; align-items:center; gap:var(--sp-2); flex:none; flex-wrap:wrap; justify-content:flex-end}
.rg-auto-g .rg-inter{min-width:0}
.rg-auto-t>.rg-etiq{align-self:flex-start; margin:0}
.rg-evj-filtres{align-items:center}
.rg-evj-filtres input[type="search"]{flex:1 1 200px; min-width:0}
.rg-evj{list-style:none; margin:var(--sp-2) 0 0; padding:0; display:flex; flex-direction:column}
.rg-evj li{border-bottom:1px solid var(--grid)}
.rg-evj li:last-child{border-bottom:0}
.rg-evj summary{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); padding:var(--sp-2) 0; cursor:pointer; list-style:none; font-size:var(--fs-13)}
.rg-evj summary::-webkit-details-marker{display:none}
.rg-evj summary::before{content:''; width:0; height:0; border-left:5px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent; color:var(--ink-2); flex:none; align-self:center; transition:transform .15s var(--ease)}
.rg-evj details[open]>summary::before{transform:rotate(90deg)}
.rg-evj-h{color:var(--muted); flex:none}
.rg-jours{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-2) 0 var(--sp-3)}
.rg-jours label{display:inline-flex; align-items:center; gap:var(--sp-1); padding:var(--sp-1) var(--sp-2); border:1px solid var(--border); border-radius:var(--r-pilule); font-size:var(--fs-12); cursor:pointer; min-height:36px}
.rg-jours label:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.rg-jours input{accent-color:var(--accent)}
.rg-barre{list-style:none; margin:0 0 var(--sp-3); padding:0; display:flex; flex-direction:column; counter-reset:barre}
.rg-barre li{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--grid)}
.rg-barre li:last-child{border-bottom:0}
.rg-barre-ic{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink-2); flex:none}
.rg-barre-g{display:flex; gap:var(--sp-1); margin-left:auto; flex:none}
@media(max-width:1180px){
  .rg-corps.grid.cols-2{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:900px){
  .rg-coque{display:block}
  .rg-nav{position:static; max-height:none; overflow:visible}
  .rg-coque[data-vue="liste"] .rg-page{display:none}
  .rg-coque[data-vue="page"] .rg-nav{display:none}
  .rg-retour{display:inline-flex}
  .rg-lien{padding:var(--sp-3) var(--sp-2); border-bottom:1px solid var(--grid); border-radius:var(--r-sm)}
  .rg-lien-s{display:block}
  .rg-lien.on{background:none}
  .rg-cherche input{font-size:var(--fs-input-mobile)}
}
@media(max-width:760px){
  .rg-deux{grid-template-columns:minmax(0,1fr)}
  .rg-inter{min-height:44px}
  .rg-pied-g{margin-left:0; width:100%}
  .rg-pied-g .btn{flex:1 1 0; justify-content:center}
  .rg-dl-l{grid-template-columns:minmax(0,1fr); gap:2px}
  .tg-conv,.rg-ailleurs li,.rg-taches li,.rg-erreurs li,.rg-auto{flex-wrap:wrap}
  .rg-auto-g{width:100%; justify-content:flex-start}
  .rg-barre-g .btn{padding-left:var(--sp-2); padding-right:var(--sp-2)}
  .tg-conv-g,.rg-tache-g{width:100%; justify-content:flex-start}
  .tg-titre{max-width:100%}
  .rg-gestes .btn{flex:1 1 auto; justify-content:center}
}
/* V88.4 — numéro de vol : lien Google + bouton copier */
.vol-g{display:inline-flex; align-items:center; gap:2px; white-space:nowrap; vertical-align:middle}
.vol-g .vol-lien{display:inline-flex; align-items:center; gap:4px; color:inherit; text-decoration:underline; text-underline-offset:2px}
.vol-g .vol-lien:hover{color:var(--texte-accent)}
.vol-g .vol-lien .svgi{width:13px; height:13px; flex:none}
.vol-g .vol-copie{display:inline-grid; place-items:center; width:22px; height:22px; padding:0; border:0; border-radius:var(--r-sm); background:transparent; color:var(--ink-2); cursor:pointer}
.vol-g .vol-copie:hover{background:var(--surface-2); color:var(--ink)}
.vol-g .vol-copie .svgi{width:13px; height:13px}
.bkc .chip.vol{text-decoration:none}
/* V88.5 — adresse d'origine sous l'adresse traduite (fiche de course) */

/* V88.6 — la colonne Entreprise des Réservations : l'entreprise affectée, ou toutes celles à qui la course est proposée */
.entcell{white-space:normal}
.entcell .rowsub{white-space:normal; overflow:visible}
.entps,.entc{display:flex; flex-wrap:wrap; gap:var(--sp-1); align-items:center}
.badge.entp{background:var(--accent-soft); color:var(--texte-accent); overflow:hidden; text-overflow:ellipsis}
.entok{color:var(--texte-ok); font-weight:600}
.entlien{background:none; border:0; padding:0 0 0 var(--sp-1); font:inherit; font-size:var(--fs-12); color:var(--texte-accent); cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.entlien:hover{color:var(--ink)}
.entc .rowsub{flex-basis:100%}

/* ================= V89.0 — PROSPECTION, CARNET, MARGE OPÉRATIONNELLE, PAIEMENTS PAR ENTREPRISE ================= */
/* le pipeline */
.prs-pipe{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:var(--sp-3); overflow-x:auto; padding-bottom:var(--sp-2); align-items:start}
.prs-col{background:var(--surface-2); border-radius:var(--r-md); padding:var(--sp-2); min-height:120px; display:flex; flex-direction:column; gap:var(--sp-2); transition:box-shadow .12s}
.prs-col.survol{box-shadow:inset 0 0 0 2px var(--accent)}
.prs-col>header{display:flex; align-items:center; gap:6px; padding:2px 4px; font-size:var(--fs-13)}
.prs-col>header .cnt{background:var(--surface); border-radius:var(--r-pilule); padding:0 6px; font-size:var(--fs-12); color:var(--ink-2)}
.prs-pot{margin-left:auto; font-size:var(--fs-12)}
.prs-dot{width:8px; height:8px; border-radius:var(--r-rond); background:var(--ambre); flex:none}
.prs-dot.good{background:var(--good)} .prs-dot.bad{background:var(--bad)} .prs-dot.gray{background:var(--brume)} .prs-dot.azur{background:var(--azur)}
.prs-cartes{display:flex; flex-direction:column; gap:var(--sp-2)}
.prs-carte{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:10px 12px; cursor:pointer; display:flex; flex-direction:column; gap:4px; font-size:var(--fs-13); min-width:0}
.prs-carte:hover,.prs-carte:focus-visible{border-color:var(--border-strong); box-shadow:var(--shadow-hover); outline:none}
.prs-carte.glisse{opacity:.45}
.prs-ch{display:flex; align-items:center; gap:6px}
.prs-ch b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prs-prio{width:8px; height:8px; border-radius:var(--r-rond); background:var(--bad); flex:none; margin-left:auto}
.prs-cl,.prs-action,.prs-rap{display:flex; align-items:center; gap:6px; color:var(--ink-2); font-size:var(--fs-12); min-width:0}
.prs-cl .gi,.prs-action .gi,.prs-rap .gi{width:13px; height:13px; flex:none}
.prs-action{color:var(--ink)}
.prs-rap{color:var(--muted)}
.prs-rap.retard{color:var(--texte-danger); font-weight:600}
.prs-vide{font-size:var(--fs-12); color:var(--muted); text-align:center; padding:var(--sp-3) 0; border:1px dashed var(--border); border-radius:var(--r-md)}
/* la fiche */
.prs-etapes{display:flex; flex-wrap:wrap; gap:4px; margin:var(--sp-3) 0 var(--sp-2)}
.prs-et{border:1px solid var(--border); background:var(--surface); border-radius:var(--r-pilule); padding:4px 12px; font:inherit; font-size:var(--fs-12); color:var(--ink-2); cursor:pointer}
.prs-et.passe{background:color-mix(in srgb,var(--good) 12%,var(--surface)); border-color:transparent; color:var(--ink)}
.prs-et.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.prs-et.perdu.on{background:var(--bad); border-color:var(--bad); color:var(--on-couleur)}
.prs-et.pause.on{background:var(--brume); border-color:var(--brume); color:var(--on-couleur)}
.prs-et:disabled{cursor:default}
.prs-perte{margin-bottom:var(--sp-2)}
.prs-prochaine{display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--r-md); background:var(--surface)}
.prs-prochaine>div{flex:1; min-width:0}
.prs-crow{grid-template-columns:repeat(4,minmax(0,1fr))}
.prs-danger{background:var(--bad); border-color:var(--bad); color:var(--on-couleur)}
.prs-suppr{margin-bottom:var(--sp-3); align-items:center}
@media(max-width:760px){ .prs-crow{grid-template-columns:1fr 1fr} }
/* le carnet */
.crn{display:flex; flex-direction:column; gap:var(--sp-3)}
.crn-contacts{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--sp-2); align-items:start}
.crn-contact{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); min-width:0}
.crn-contact.principal{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.crn-cinfo{flex:1; min-width:0}
.crn-cliens{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; font-size:var(--fs-12)}
.crn-cliens a{display:inline-flex; align-items:center; gap:4px; color:var(--texte-accent); text-decoration:none; overflow-wrap:anywhere}
.crn-cliens .gi{width:13px; height:13px}
.crn-cnote{margin-top:4px; font-size:var(--fs-12); color:var(--ink-2); white-space:pre-wrap}
.crn-cact{display:flex; gap:2px; flex:none; align-items:flex-start}
.crn-cact .btn.ico{width:30px; height:30px; min-height:30px; padding:0}
.crn-cact .btn.ico .gi{width:14px; height:14px}
.crn-form,.crn-saisie{border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-3); background:var(--surface-2); margin-bottom:var(--sp-2); display:flex; flex-direction:column; gap:var(--sp-2)}
.crn-texte{width:100%; resize:vertical; border:1px solid var(--border-strong); border-radius:var(--r-md); padding:var(--sp-2) var(--sp-3); font:inherit; font-size:var(--fs-14); background:var(--surface); color:var(--ink)}
.crn-saisie-bas{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); flex-wrap:wrap}
.crn-genres button{display:inline-flex; align-items:center; gap:4px}
.crn-chips{display:flex; flex-wrap:wrap; gap:4px}
.crn-chip{border:1px solid var(--border); background:var(--surface); border-radius:var(--r-pilule); padding:2px 10px; font:inherit; font-size:var(--fs-12); color:var(--ink-2); cursor:pointer}
.crn-chip.on,.crn-chip:hover{border-color:var(--accent); color:var(--texte-accent)}
.crn-notes,.crn-rappels{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.crn-n,.crn-r{display:flex; gap:10px; align-items:flex-start; padding:10px 2px; border-top:1px solid var(--border)}
.crn-n:first-child,.crn-r:first-child{border-top:0}
.crn-n.epinglee{background:color-mix(in srgb,var(--ambre) 8%,transparent); border-radius:var(--r-sm); padding-left:6px; padding-right:6px}
.crn-n.etape{color:var(--ink-2); font-size:var(--fs-12)}
.crn-ni{width:28px; height:28px; border-radius:var(--r-rond); background:var(--surface-2); display:grid; place-items:center; flex:none}
.crn-ni .gi{width:14px; height:14px}
.crn-nc,.crn-rc{flex:1; min-width:0}
.crn-nh{font-size:var(--fs-12)}
.crn-nt{white-space:pre-wrap; overflow-wrap:anywhere; margin-top:2px}
.crn-court{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.crn-coche{width:20px; height:20px; border:2px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); flex:none; margin-top:1px; cursor:pointer; display:grid; place-items:center; padding:0; color:var(--on-couleur)}
.crn-coche:hover{border-color:var(--good)}
.crn-coche[aria-pressed="true"]{background:var(--good); border-color:var(--good)}
.crn-coche .gi{width:12px; height:12px}
.crn-r.retard .crn-rh b{color:var(--texte-danger)}
.crn-r.fait{opacity:.65}
.crn-rh{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.crn-r .rowsub .gi{width:12px; height:12px; vertical-align:-.1em}
.crn-faits{margin-top:var(--sp-2)}
.crn-ex{display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--border)}
.crn-ex:first-child{border-top:0}
.crn-ex>.gi{width:16px; height:16px; flex:none; margin-top:2px; color:var(--muted)}
/* la fiche d'un canal, en clair */
.cn-clair{display:flex; gap:10px; align-items:flex-start; padding:var(--sp-3); border-radius:var(--r-md); background:color-mix(in srgb,var(--accent) 7%,var(--surface)); margin-bottom:var(--sp-3); font-size:var(--fs-14); line-height:1.5}
.cn-clair>.gi{width:18px; height:18px; flex:none; margin-top:2px; color:var(--texte-accent)}
.cn-clair p{margin:0}
.cn-aide{margin-top:calc(-1 * var(--sp-2))}
.cn-avance{display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-3)}
.cn-avance .seg{align-self:flex-start}
/* la marge opérationnelle */
.anamop-haut{display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-3)}
.anamop-val b{font-size:calc(var(--fs-24) * 1.4); letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums}
.anamop-val .delta{display:inline-flex; margin-left:10px; font-size:var(--fs-12)}
.anamop-spark{flex:1; min-width:160px; max-width:420px; height:54px}
.anamop-barre{display:flex; height:16px; border-radius:var(--r-pilule); overflow:hidden; background:var(--surface-2)}
.anamop-barre i{display:block; height:100%}
.anamop-leg{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:var(--sp-2); font-size:var(--fs-13)}
.anamop-leg span{display:inline-flex; align-items:center; gap:6px}
.anamop-leg i{width:10px; height:10px; border-radius:var(--r-sm); display:inline-block}
/* paiements par entreprise : le détail par chauffeur d'abord */
.pay-parch{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; margin-bottom:var(--sp-3)}
.pay-parch-l{display:grid; grid-template-columns:1fr auto auto; gap:var(--sp-3); align-items:center; padding:8px 12px; border-top:1px solid var(--border)}
.pay-parch-l:first-child{border-top:0}
.pay-parch-n{display:inline-flex; align-items:center; gap:8px; min-width:0}
.pay-groupe td:first-child .pay-nom{font-style:italic}

/* ================= V90.0 — Dispatch : le planning en clair ================= */
.dsp-legende{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:var(--fs-12); color:var(--muted); margin:0 0 var(--sp-3)}
.dsp-legende svg{width:14px; height:14px}
.dsp-legende .lg{display:inline-flex; align-items:center; gap:5px; color:var(--ink-2)}
.dsp-legende .lg::before{content:''; width:4px; height:14px; border-radius:var(--r-sm)}
.lg-vide::before,.dsprow.st-vide{--st:var(--bad)} .lg-att::before,.dsprow.st-att{--st:var(--warn)} .lg-ok::before,.dsprow.st-ok{--st:var(--good)}
.dsp-legende .lg::before{background:var(--st)}
.dspplan{display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,320px); gap:var(--sp-3); align-items:start}
@media(min-width:1101px){ .dspplan .dspch-col{grid-column:auto} .dspplan .dspch-col #dspChauffeurs{display:block} }
@media(max-width:1100px){ .dspplan{grid-template-columns:1fr} }
.dsp-jour{margin-bottom:var(--sp-4)}
.dsp-jh{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); padding:0 var(--sp-1) var(--sp-2); font-size:var(--fs-14)}
.dsp-jh b{font-weight:650}
.dsp-lignes{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden}
.dspcard.dsprow{display:grid; gap:var(--sp-3); align-items:center; padding:10px var(--sp-3) 10px calc(var(--sp-3) + 4px); border:none; border-bottom:1px solid var(--grid); border-radius:var(--r-none,0); box-shadow:none; margin:0; position:relative; background:var(--surface); cursor:pointer}
.dspcard.dsprow:last-child{border-bottom:none}
.dspcard.dsprow::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--st,var(--muted))}
.dspcard.dsprow:hover{background:var(--surface-3)}
.dspcard.dsprow.sel{background:var(--accent-soft)}
.dspcard.dsprow.foc{outline:2px solid var(--accent); outline-offset:-2px}
.dsprow .dr-h{display:flex; align-items:center; gap:6px}
.dsprow .dr-h small,.dsprow .dr-t small{display:block; color:var(--muted); font-size:var(--fs-12); line-height:1.35}
.dsprow .dsp-h{font-size:var(--fs-16); font-variant-numeric:tabular-nums}
.dsprow .dr-t b{display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis}
.dsprow .dr-t small{text-overflow:ellipsis}
.dsprow .dr-q .dsp-etat{margin:0; padding:0; background:none; border:none; font-size:var(--fs-13)}
.dsprow .dr-q .dsp-etat.non{color:var(--texte-danger)}
.dsprow .dr-q .dsp-chev{margin-top:4px; font-size:var(--fs-12)}
.dsprow .dr-a{display:flex; align-items:center; gap:6px; justify-content:flex-end}
.dsp-chev[data-dspvoir]{cursor:pointer; text-decoration:underline dotted}
.dsp-libres{margin-top:var(--sp-2)} .dsp-libres>summary{cursor:pointer; font-size:var(--fs-12); color:var(--ink-2); padding:6px 4px}
.dsp-chv{padding:6px 4px}
@media(max-width:900px){
  .dspcard.dsprow{grid-template-areas:"h t v" "q q q" "a a a"; row-gap:6px}
  .dsprow .dr-h{grid-area:h} .dsprow .dr-t{grid-area:t} .dsprow .dr-v{grid-area:v} .dsprow .dr-q{grid-area:q} .dsprow .dr-a{grid-area:a; justify-content:flex-start}
  .dsprow .dr-a .btn{min-height:44px} }

/* V90.0 — volet et fenêtre INTÉGRÉS à l'écran (Paiements) : un bloc de la page, sans voile ni superposition */
.volet.inline{position:static; inset:auto; width:auto; transform:none; transition:none; box-shadow:var(--shadow-card,none); border:1px solid var(--border); border-radius:var(--r-card); margin:0 0 var(--sp-4); display:none; z-index:auto; overflow:hidden}
.volet.inline.on{display:flex}
.volet.inline .volet-tete{padding:var(--sp-3) var(--sp-4)}
.volet.inline .volet-corps{overflow:visible; padding:var(--sp-4)}
.modal.inline{position:static; inset:auto; background:none; padding:0; z-index:auto; overflow:visible; display:none; margin:0 0 var(--sp-4)}
.modal.inline.on{display:block}
.modal.inline .box{max-width:none!important; margin:0; box-shadow:none; border-color:var(--accent)}

/* V90.0 — Relevés : dépôt mensuel de plusieurs fichiers, historique, fusions */
.fi-lib .dot{display:inline-block; width:8px; height:8px; border-radius:var(--r-rond); margin-right:6px}
.imp-canal{display:inline-flex; align-items:center; gap:6px}
.imp-canal .sel{min-height:32px}
.imp-fus{margin-top:4px; font-size:var(--fs-12); color:var(--texte-alerte)}
.imp-fus.sure{color:var(--texte-ok)}

/* V90.0 — Paiements › Envoi des relevés */
.env-quand{white-space:nowrap} .env-quand .sel{width:auto} .env-quand input[type=time]{width:92px; margin-left:4px}
.env-mail{width:100%}
.tgl-sw{position:relative; display:inline-block; width:40px; height:22px; cursor:pointer}
.tgl-sw input{position:absolute; opacity:0; width:0; height:0}
.tgl-sw span{position:absolute; inset:0; border-radius:var(--r-pilule); background:var(--border-strong); transition:background .15s}
.tgl-sw span::after{content:''; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:var(--r-rond); background:var(--surface); transition:transform .15s; box-shadow:var(--shadow-ctl)}
.tgl-sw input:checked+span{background:var(--good)} .tgl-sw input:checked+span::after{transform:translateX(18px)}
.tgl-sw input:focus-visible+span{outline:2px solid var(--accent); outline-offset:2px}

/* ================= V91.0 — LES ÉVÉNEMENTS QUI EXPLIQUENT L'ACTIVITÉ (vacances, ventes bloquées, grève…) ================= */
.ch-evt-t{font-size:var(--fs-11); font-weight:600; letter-spacing:.01em}
.evt-leg{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3)}
.evt-chip{display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-1) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-pilule);
  background:var(--surface); color:var(--ink-2); font:inherit; font-size:var(--fs-12); cursor:pointer; max-width:100%}
.evt-chip:hover{background:var(--surface-2); border-color:var(--border-strong)}
.evt-chip i{width:var(--sp-2); height:var(--sp-2); border-radius:var(--r-rond); flex:none}
.evt-chip b{font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.evt-chip span{color:var(--muted); white-space:nowrap}
.evt-chip.evt-plus{color:var(--texte-accent); border-style:dashed}
.evt-chip.evt-plus svg{width:var(--sp-3); height:var(--sp-3)}
#tooltip .tt-evts{margin-top:var(--sp-2); padding-top:var(--sp-2); border-top:1px solid var(--border)}
#tooltip .tt-evt{display:flex; align-items:center; gap:var(--sp-2); font-weight:600}
.evt-form .evt-types{display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-top:var(--sp-2)}
.evt-type{display:inline-flex; align-items:center; gap:var(--sp-1); padding:var(--sp-1) var(--sp-2); border:1px solid var(--border); border-radius:var(--r-pilule);
  background:var(--surface); color:var(--ink-2); font:inherit; font-size:var(--fs-12); cursor:pointer}
.evt-type i{width:var(--sp-2); height:var(--sp-2); border-radius:var(--r-rond)}
.evt-type.on{border-color:var(--accent); color:var(--texte-accent); background:color-mix(in srgb,var(--accent) 8%,transparent)}
.evt-form .evt-dates{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3)}
.evt-form .evt-err{color:var(--texte-danger); font-size:var(--fs-12); min-height:var(--sp-4); margin:var(--sp-1) 0}
.evt-form .evt-go{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.evt-form .evt-go .danger{margin-left:auto; color:var(--texte-danger)}
@media(max-width:560px){ .evt-form .evt-dates{grid-template-columns:1fr} .evt-form .evt-go .danger{margin-left:0} }

/* ================= V91.4 — FLOTTE OU GROUPE D'INDÉPENDANTS ================= */
.ent-paie .pay-grp-note{margin:0; align-self:center}
.pay-grp-mliste .pay-mligne[data-paybenef]{cursor:pointer}

/* ================= V91.6 — DES FLOTTES DANS UN GROUPE ; LE NUMÉRO DU CHAUFFEUR OUVRE WHATSAPP ================= */
.ent-grp-carte>.sub{padding:var(--sp-1) var(--sp-5) 0}
.ent-grp-ajout{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-5) var(--sp-4)}
.ent-grp-ajout .sel{flex:1 1 220px; max-width:360px}
.ent-grp-vide{padding:var(--sp-3) var(--sp-5) 0}
.wa-lien{display:inline-flex; align-items:center; gap:var(--sp-1); color:var(--texte-accent); font-weight:500; white-space:nowrap; text-decoration:none}
.wa-lien:hover{text-decoration:underline}
.wa-lien .svgi{color:var(--texte-ok)}
.bkc .drvbox .wa-lien{padding:var(--sp-1) 0}
@media(max-width:760px){ .ent-grp-carte>.sub,.ent-grp-ajout,.ent-grp-vide{padding-left:var(--sp-4); padding-right:var(--sp-4)} }

/* ================= V91.7 — LA PAGE STRATÉGIE (ses notes + les conseils tirés des chiffres) ; L'ONGLET DISPATCH ================= */
.st-page{display:flex; flex-direction:column; gap:var(--sp-4)}
.st-prio{padding:var(--sp-4) var(--sp-5)}
.st-prio-tete{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-3)}
.st-prio-tete h2{margin:0; font-size:var(--fs-16); font-weight:650}
.st-prio-vide .sub{margin:0}
.st-prio-liste{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--sp-3)}
.st-prio-item{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-1); padding:var(--sp-3) var(--sp-4); text-align:left;
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2); color:var(--ink); font:inherit; cursor:pointer}
.st-prio-item:hover{border-color:var(--accent-border)}
.st-prio-item b{display:flex; align-items:center; gap:var(--sp-1); font-weight:600}
.st-prio-meta{color:var(--muted); font-size:var(--fs-12)}
.st-prio-item.st-retard{border-color:var(--bad)}
.st-prio-item.st-retard .st-prio-meta,.st-note.st-retard .st-ech{color:var(--texte-danger)}
.st-epingle{display:inline-flex; color:var(--texte-accent)}
.st-epingle .svgi{width:var(--sp-4); height:var(--sp-4)}
.st-barre{margin:0}
.st-conseils{display:flex; flex-direction:column; gap:var(--sp-4)}
.st-sources{display:flex; align-items:flex-start; gap:var(--sp-2); margin:0; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); background:var(--warn-soft); color:var(--ink-2); font-size:var(--fs-13)}
.st-groupe-t{display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-3); font-size:var(--fs-14); font-weight:650; color:var(--ink-2)}
.st-cartes{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--sp-3)}
.st-conseil{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-4) var(--sp-5); border-left:3px solid var(--border-strong)}
.st-conseil.st-t-risque{border-left-color:var(--bad)}
.st-conseil.st-t-opportunite{border-left-color:var(--good)}
.st-tete{display:flex; align-items:center; gap:var(--sp-2)}
.st-fam{color:var(--muted); font-size:var(--fs-11); font-weight:600}
.st-titre{margin:0; font-size:var(--fs-16); font-weight:650; line-height:1.3}
.st-constat{margin:0; color:var(--ink-2); font-size:var(--fs-13); line-height:1.5}
.st-chiffres{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.st-chiffres span{display:flex; flex-direction:column; padding:var(--sp-1) var(--sp-3); border-radius:var(--r-sm); background:var(--surface-2)}
.st-chiffres small{color:var(--muted); font-size:var(--fs-11)}
.st-chiffres b{font-size:var(--fs-14); font-variant-numeric:tabular-nums}
.st-idee{display:flex; align-items:flex-start; gap:var(--sp-2); margin:0; font-size:var(--fs-13); line-height:1.5}
.st-idee .svgi,.st-note-lie .svgi,.st-f-conseil .svgi{flex:0 0 auto; color:var(--texte-alerte)}
.st-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-top:auto; padding-top:var(--sp-1)}
.st-note-liee{color:var(--texte-ok)}
.st-ecarte-jusqua{font-size:var(--fs-12)}
.st-ecartes{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3)}
.st-ecartes .st-cartes{align-self:stretch; opacity:.75}
.st-filtres{align-self:flex-start}
.st-notes{padding:var(--sp-4) var(--sp-5)}
.st-note{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) 0; border-top:1px solid var(--border)}
.st-notes .st-groupe-t+.st-note{border-top:0; padding-top:0}
.st-note.st-close .st-note-titre{color:var(--muted); text-decoration:line-through}
.st-note-tete{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap}
.st-note-titre{font-weight:600}
.st-note-texte{margin:0; color:var(--ink-2); font-size:var(--fs-13); line-height:1.5; white-space:pre-line}
.st-note-lie{display:flex; align-items:center; gap:var(--sp-1); margin:0; color:var(--muted); font-size:var(--fs-12)}
.st-note-pied{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); font-size:var(--fs-12)}
.st-note-pied .sel{width:auto; min-width:0; padding-top:var(--sp-1); padding-bottom:var(--sp-1)}
.st-note-pied .btn{margin-left:auto}
.st-form .st-genres{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-3)}
.st-genre{padding:var(--sp-1) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-pilule); background:var(--surface); color:var(--ink-2); font:inherit; font-size:var(--fs-13); cursor:pointer}
.st-genre.on{border-color:var(--accent); color:var(--texte-accent); background:var(--accent-soft)}
.st-form .st-dates{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3)}
.st-form .st-f-conseil{display:flex; align-items:flex-start; gap:var(--sp-2); margin:var(--sp-3) 0 0}
.st-form .st-err{color:var(--texte-danger); font-size:var(--fs-12); min-height:var(--sp-4); margin:var(--sp-2) 0}
.st-form .st-go{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.st-form .st-go .danger{margin-left:auto; color:var(--texte-danger)}
@media(max-width:760px){
  .st-prio,.st-notes{padding:var(--sp-3) var(--sp-4)}
  .st-conseil{padding:var(--sp-3) var(--sp-4)}
  .st-cartes,.st-prio-liste{grid-template-columns:1fr}
  .st-barre{flex-wrap:wrap}
  .st-form .st-dates{grid-template-columns:1fr 1fr}
  .st-note-pied .btn{margin-left:0}
}
@media(max-width:560px){ .st-form .st-dates{grid-template-columns:1fr} .st-form .st-go .danger{margin-left:0} }

/* ######################################################################
   V92 — SOCLE (design system v2) · ne rien écrire hors de ce bloc ici
   ###################################################################### */
/* =====================================================================
   V92 — DESIGN SYSTEM v2 · couche finale
   ---------------------------------------------------------------------
   À coller TEL QUEL à la fin de styles.css (après le bloc V91.7).
   Même identité : canvas teinté, cartes en relief (14 px, ombre douce),
   indigo seul en action, boutons en pilule (V63). Mais UNE forme par
   composant, des hauteurs 32 / 36 / 40 (+ 44 au doigt), des contrastes AA.

   Méthode anti-régression (lire avant de modifier) :
   1. Chaque règle reprend le sélecteur de BASE qu'elle corrige, avec la
      même spécificité : placée en dernier, elle gagne contre la base ; les
      surcharges d'écran, plus spécifiques (#s-bookings …, .affp .go .btn,
      .lot .go .btn …), continuent de gagner. On ne réécrit aucun écran.
   2. Les nouveautés passent par des classes nouvelles (.ra, .dt-cartes,
      .tablewrap.tient, html.maj, html.barre-notifs…) ou par :where(), sans poids.
   3. !important : trois règles seulement, chacune pour battre un style EN LIGNE écrit
      par le JS : « Supprimer » en corail (tarification-options-zones.js), et le display
      des champs « du → au » de la période au téléphone (§ 19). À retirer quand le JS listé
      dans RAPPORT.md § 3 est corrigé.
   4. Toute nouvelle règle d'écran s'écrit avec les jetons ci-dessous ;
      aucune taille, couleur ou rayon en dur.
   ===================================================================== */

/* ---------- 1. BASE ---------- */
.subtle{font-size:var(--fs-12)}
.hint-box{font-size:var(--fs-12)}
/* --faint n'est plus une couleur de TEXTE (2,6:1) : intitulés et compteurs passent à --muted */
#sidebar .navgrp,#sidebar nav button .badge-n,.tf-grp-t,.tf-grp-t .cnt,.pal-grp,.evtime,.rang .rt,.hbars .delta.n{color:var(--muted)}
.dt .rowsub{font-size:var(--fs-12)}
.dt .reffull{font-size:var(--fs-12)}
#mobileNav button{font-size:var(--fs-11)}

/* ---------- 2. CHARGEMENT (G1) : squelette au premier chargement, jamais de voile ---------- */
/* Le fondu d'entrée (opacity 0 → 1, l.324) laissait l'écran translucide tant que le fil
   principal travaillait : c'est « l'écran désactivé ». Le contenu arrive à pleine opacité. */
.screen,.screen.on,#s-new.on{animation:none}
.sq,.skl{background:linear-gradient(90deg,var(--squelette) 25%,var(--squelette-reflet) 50%,var(--squelette) 75%); background-size:200% 100%}
.sq{border-radius:var(--r-xs); height:12px}
/* Un bouton inactif garde sa forme et sa lisibilité : plus d'opacité à .45 */
.btn:disabled,.btn[aria-disabled="true"]{opacity:1; background:var(--surface-2); color:var(--muted); border-color:transparent; box-shadow:none; cursor:not-allowed}
.btn:disabled svg,.btn[aria-disabled="true"] svg{color:currentColor}
.btn.ghost:disabled{background:var(--surface-2); color:var(--muted)}
.switch:disabled{opacity:.6}
/* Un bouton qui travaille : aria-busy, libellé conservé, un anneau */
.btn[aria-busy="true"]{cursor:progress}
.btn[aria-busy="true"]::before{content:''; width:12px; height:12px; flex:none; border-radius:var(--r-rond); border:2px solid currentColor; border-right-color:transparent; animation:v92-tourne .7s linear infinite}
/* Rafraîchissement (données déjà là) : un filet sous la barre du haut + l'icône qui tourne.
   Posé par html.maj (voir api.js, RAPPORT § 3), jamais sur le contenu. */
#topbar::after{content:''; position:absolute; left:0; bottom:0; width:28%; height:2px; border-radius:var(--r-xs); background:var(--accent); opacity:0; transform:translateX(-110%); pointer-events:none}
html.maj #topbar::after{opacity:1; animation:v92-filet 1.2s var(--ease) infinite}
html.maj #refreshBtn svg{animation:v92-tourne .9s linear infinite}
@keyframes v92-filet{from{transform:translateX(-110%)}to{transform:translateX(380%)}}
@keyframes v92-tourne{to{transform:rotate(360deg)}}

/* ---------- 3. BOUTONS ---------- */
/* primaire : aplat indigo — UN par zone ; secondaire : .ghost (aplat gris V63) ; tertiaire : .lnk */
.btn{min-height:var(--h-md); padding:0 16px; font-size:var(--fs-13); line-height:20px; gap:6px}
.btn.sm{min-height:var(--h-sm); padding:0 12px; font-size:var(--fs-13)}
.btn.lg{min-height:var(--h-lg); padding:0 20px; font-size:var(--fs-14)}
.btn:hover{background:var(--accent-hover)}
.btn.ghost:hover{background:color-mix(in srgb,var(--ink) 9%,var(--surface-2))}
.btn:focus-visible,.tbtn:focus-visible,.dd-btn:focus-visible,.seg button:focus-visible,.lnk:focus-visible,.copybtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn.ico{min-width:var(--h-md); padding:0; justify-content:center}
.btn.sm.ico{min-width:var(--h-sm)}
/* danger : secondaire au texte rouge ; l'aplat rouge (.confirm) est réservé à la confirmation finale */
.btn.danger{background:var(--surface-2); color:var(--texte-danger); border-color:transparent}
.btn.danger:hover{background:var(--fond-danger); color:var(--texte-danger)}
.btn.danger svg{color:currentColor}
/* tertiaire : un lien d'action, jamais souligné au repos */
.lnk,.copybtn{color:var(--texte-accent); font-weight:500; text-decoration:none}
.lnk:hover,.copybtn:hover{text-decoration:underline; text-underline-offset:2px}
/* barre du haut et commandes de barre d'outils : même hauteur que les boutons */
.tbtn{min-height:var(--h-md); font-size:var(--fs-13)}
.tbtn.icon{width:var(--h-md); height:var(--h-md); min-height:0}
/* G4 — « Assigner » dans une cellule. La classe .asg du PANNEAU d'assignation (l.2288 :
   display:flex; flex-direction:column; gap:12px) s'appliquait aussi au bouton .btn.asg :
   icône au-dessus du texte, pilule de 51 px. On rend au bouton sa rangée. */
.btn.asg{display:inline-flex; flex-direction:row; align-items:center; gap:6px; white-space:nowrap; min-height:28px; padding:0 12px; font-size:var(--fs-12); box-shadow:none}
.btn.asg svg{width:14px; height:14px; color:currentColor}
/* un bouton dans une cellule de tableau : une ligne, 28 px, jamais plus haut que la ligne */
.dt td .btn{min-height:28px; padding:0 10px; font-size:var(--fs-12); gap:4px; white-space:nowrap; vertical-align:middle}
.dt td .btn svg{width:13px; height:13px}

/* ---------- 4. CHAMPS ET CONTRÔLES ---------- */
.sel,.search,.dd-btn{min-height:var(--h-md); font-size:var(--fs-13)}
   /* le bouton « Filtres » est une puce, pas un rectangle */
.search input{font-size:var(--fs-13)}
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{min-height:var(--h-lg); font-size:var(--fs-14)}
.field label{font-size:var(--fs-12); color:var(--ink-2); font-weight:500}
/* une barre d'outils = une seule hauteur, quels que soient les contrôles */
.toolrow .btn,.toolrow .btn.sm,.toolrow .tbtn,.toolrow .sel,.toolrow .search,.toolrow .dd-btn{min-height:var(--h-md)}

/* ---------- 5. ONGLETS : NIVEAU 1 / NIVEAU 2 / FILTRES (G3) ---------- */
/* Niveau 1 — onglets soulignés : #hubBar, ou la première rangée d'un écran sans #hubBar.
   Même graisse (600, V63) au repos et actif : pas de texte qui bouge ; l'actif porte l'encre + un
   trait indigo de 2 px ; 14 px contre 13 px au niveau 2 : la hiérarchie se lit à la taille. */
.seg.tabs button{min-height:var(--h-lg); padding:0 12px; font-size:var(--fs-14); font-weight:600; line-height:20px; color:var(--muted)}
.seg.tabs button:hover{color:var(--ink)}
.seg.tabs button.on{color:var(--ink); font-weight:600}
.seg.tabs button::after{left:12px; right:12px; bottom:-1px; height:2px}
.seg.tabs button.on::after{background:var(--accent)}
#hubBar{margin:-8px 0 var(--sp-5)}
#hubBar .seg.tabs button::after{bottom:0}   /* la barre défile en x : à -1 px, le trait était rogné de moitié */
/* Niveau 2 — dans un écran qui a DÉJÀ ses onglets (#hubBar visible), toute rangée .seg.tabs devient
   un contrôle segmenté : Clients › Campagnes…, Chauffeurs › Vue d'ensemble / Liste, Finances ›
   Rapprochement, Tarification › Zones. Jamais deux soulignements l'un sous l'autre. */
:where(#hubBar:not([hidden])) ~ .screen .seg.tabs{display:inline-flex; width:fit-content; max-width:100%; align-self:flex-start; gap:2px; padding:3px; border:0; border-radius:var(--r-pilule); background:var(--surface-2)}
:where(#hubBar:not([hidden])) ~ .screen .seg.tabs button{min-height:30px; padding:0 14px; border-radius:var(--r-pilule); font-size:var(--fs-13); font-weight:600; color:var(--muted)}
:where(#hubBar:not([hidden])) ~ .screen .seg.tabs button::after{content:none}
:where(#hubBar:not([hidden])) ~ .screen .seg.tabs button:hover{color:var(--ink)}
:where(#hubBar:not([hidden])) ~ .screen .seg.tabs button.on{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(23,24,28,.08),0 0 0 1px var(--border)}
html[data-theme="dark"] :where(#hubBar:not([hidden])) ~ .screen .seg.tabs button.on{background:var(--elevated); box-shadow:0 1px 2px rgba(0,0,0,.4),0 0 0 1px var(--border-strong)}
/* Contrôle segmenté (niveau 2 ou choix d'une valeur) : 36 px de piste, 30 px de pastille */
.seg{padding:3px; gap:2px}
.seg button{min-height:30px; padding:0 13px; font-size:var(--fs-13); font-weight:600; line-height:20px; color:var(--muted)}
.seg button:hover{color:var(--ink)}
.seg button.on{color:var(--ink)}
/* dans l'en-tête d'une carte, le choix d'une valeur (CA / Courses…) est plus petit */
.card .ch .seg button{min-height:26px; padding:0 11px; font-size:var(--fs-12)}
/* Filtres — puces : contour + fond de surface au repos, encre pleine quand actives.
   Le « niveau 3 » n'existe plus : les segments d'une liste (Clients › Tous / À relancer…,
   Canaux) prennent cette forme. */
.seg.fam{background:transparent; padding:0; gap:6px; border-radius:var(--r-nul); box-shadow:none}
.seg.fam button{min-height:30px; padding:0 12px; border:1px solid var(--border-strong); border-radius:var(--r-pilule); background:var(--surface); color:var(--ink-2); font-size:var(--fs-13); font-weight:500; box-shadow:none}
.seg.fam button:hover{border-color:color-mix(in srgb,var(--border-strong) 45%,var(--muted)); background:var(--surface); color:var(--ink)}
.seg.fam button.on{background:var(--ink); border-color:var(--ink); color:var(--page)}
html[data-theme="dark"] .seg.fam button{background:var(--surface); border-color:var(--border-strong)}
html[data-theme="dark"] .seg.fam button.on{background:var(--ink); border-color:var(--ink); color:var(--page)}
/* les puces de comptage du Dispatch : même puce, le ton passe par un point, pas par l'aplat */
/* l'actif en dernier : il passe devant les tons (.dsp-rs.good, .dsp-cpt.r…) de même poids */

/* ---------- 6. CARTES ---------- */
/* Une carte = relief seul (pas de filet), 14 px, 20 px de rembourrage, un en-tête normalisé */
.card{padding:var(--sp-carte); border-radius:var(--r-card); box-shadow:var(--ombre-1)}
@media (max-width:1040px){ .card{padding:var(--sp-4)} }
.card .ch{gap:var(--sp-2); margin-bottom:var(--sp-3); min-height:24px}
.card .ch h3{font-size:var(--fs-16); font-weight:600; line-height:var(--lh-titre); letter-spacing:-.015em}
.card .ch .cnt{font-size:var(--fs-12); color:var(--muted)}
.card .ch .ch-aide{font-size:var(--fs-12); font-weight:400; color:var(--muted)}   /* carte({aide}) : remplace le style en ligne (composants.js:207) */
.card .sub{font-size:var(--fs-12); color:var(--muted); margin:var(--sp-2) 0 var(--sp-3); max-width:80ch}
/* la marge négative ne vaut que SOUS le titre (placée ailleurs, elle chevauchait : « Villes qui rapportent ») */
.card .ch+.sub{margin-top:-6px}
/* .kpi et .mini cumulaient filet ET ombre : l'ombre seule, comme .card */
.kpi,.mini{border-color:transparent}
/* une carte DANS une carte n'a plus d'ombre : un filet suffit (Le mois en cours, fiches) */
.card .card,.card .kpi,.card .mini{box-shadow:none; border:1px solid var(--border)}
.card .card:hover,.card .kpi:hover,.card .mini:hover{box-shadow:none}
/* un seul bloc « à lire d'abord » par écran garde le liseré (.card.lead, V58) */
/* l'état urgent n'est plus une bordure orange : un point + la valeur en texte d'alerte (AA) */
.kpi.urgent{border-color:transparent}
.kpi.urgent .val{color:var(--texte-alerte)}
.kpi.urgent .lab::before{display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:var(--r-rond); background:var(--point-alerte); vertical-align:1px}
/* « Or réservé au logo » : Black et VIP deviennent des étiquettes à l'encre */
.chan.black,.badge.gold{font-weight:600}

/* ---------- 7. CHIFFRES-CLÉS ---------- */
/* 3 héros en 28 px, compacts en 20 px ; chiffres proportionnels sur les héros (tabulaires
   seulement là où les chiffres s'alignent en colonne) */
.kpi .val{font-size:var(--fs-28); letter-spacing:-.03em; font-variant-numeric:proportional-nums}
.kpi:nth-child(n+4) .val{font-size:var(--fs-20)}
.kpi .lab{font-size:var(--fs-12); color:var(--muted)}
.mini .v{font-size:var(--fs-20)}
/* variations : texte AA sur fond doux ; le neutre sans fond */
.kpi .delta.up,.kpi .delta.g{color:var(--texte-ok); background:var(--fond-ok)}
.kpi .delta.down,.kpi .delta.r{color:var(--texte-danger); background:var(--fond-danger)}
.kpi .delta.n{color:var(--muted)}
.hbars .delta.g,.chart-hero .delta.up{color:var(--texte-ok)}
.hbars .delta.r,.chart-hero .delta.down{color:var(--texte-danger)}
/* La variation se lit « ↓ 83 % vs hier » ; le rang n'est plus collé au pourcentage (« −83,3 % · 84ᵉ ») : il passe
   sur sa ligne, en mots, et seulement quand il est remarquable (kpiChip, rangMots). Toute la zone mène au palmarès. */
.kpi-var{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) 6px; min-width:0; max-width:100%; margin-top:2px}
.kpi .kh .kpi-var{flex:1 1 auto}
.kpi .kpi-var .delta{margin-top:0; white-space:nowrap}
.kpi-vs{font-size:var(--fs-12); color:var(--muted); white-space:nowrap}
.kpi-rang{flex-basis:100%; display:inline-flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-12); font-weight:500; color:var(--texte-accent)}
.kpi-rang svg{width:12px; height:12px; flex:none}
.kpi-rang sup{font-size:.7em; line-height:0}
button.kpi-var{padding:0; border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer}
button.kpi-var:hover .kpi-vs,button.kpi-var:hover .kpi-rang>span{text-decoration:underline; text-underline-offset:2px}
button.kpi-var:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs)}
.kpi .kpi-date{margin-left:var(--sp-1)}
/* un texte pour les lecteurs d'écran seulement (le signe d'une variation dont la flèche dit le sens) */
.sr-seul{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* ---------- 8. TABLEAUX (G6) ---------- */
.dt th{font-size:var(--fs-12); font-weight:500; color:var(--muted); padding-top:8px; padding-bottom:8px}
.dt td{padding-top:10px; padding-bottom:10px}
/* chiffres à droite par CLASSE (tableau() écrivait style="text-align:right" dans chaque cellule).
   Quatre écrans forcent tout à gauche par id (l.607, spécificité 1-1-1) : on les nomme. */
.dt th.num,.dt td.num{text-align:right; font-variant-numeric:tabular-nums}
:is(#s-clients,#s-vehicles) .dt :is(th,td).num,.dt.ovnext :is(th,td).num{text-align:right}
/* Un tableau posé à plat sur le canvas devient une carte (Tarification › Options, Zones GJ…) */
.screen [id$="Mount"]>.tablewrap:where(:not(.card *,.dsec *,.modal *,.volet *,#drawer *,.sheet *,.fi-vcarte *,.tf-form *)){background:var(--surface); border-radius:var(--r-card); box-shadow:var(--ombre-1)}
.screen [id$="Mount"]>.tablewrap:where(:not(.card *,.dsec *,.modal *,.volet *,#drawer *,.sheet *,.fi-vcarte *,.tf-form *)) .dt th{background:var(--surface)}
.screen [id$="Mount"]>.tablewrap:where(:not(.card *,.dsec *,.modal *,.volet *,#drawer *,.sheet *,.fi-vcarte *,.tf-form *)) .dt th:first-child,
.screen [id$="Mount"]>.tablewrap:where(:not(.card *,.dsec *,.modal *,.volet *,#drawer *,.sheet *,.fi-vcarte *,.tf-form *)) .dt td:first-child{padding-left:20px}
.screen [id$="Mount"]>.tablewrap:where(:not(.card *,.dsec *,.modal *,.volet *,#drawer *,.sheet *,.fi-vcarte *,.tf-form *)) .dt th:last-child,
.screen [id$="Mount"]>.tablewrap:where(:not(.card *,.dsec *,.modal *,.volet *,#drawer *,.sheet *,.fi-vcarte *,.tf-form *)) .dt td:last-child{padding-right:20px}
.screen [id$="Mount"]>.tablewrap:where(:not(.card *,.dsec *,.modal *,.volet *,#drawer *,.sheet *,.fi-vcarte *,.tf-form *)) .dt tr:last-child td{border-bottom:0}
/* En-tête collant. Un conteneur en overflow-x:auto est un conteneur de défilement : l'en-tête y
   collait… à lui-même (mesuré : il part avec la page). Quand le tableau TIENT dans sa largeur,
   le JS pose .tient (RAPPORT § 3) : plus de défilement horizontal, l'en-tête colle sous la barre. */
.tablewrap.tient{overflow-x:clip}
.card.pad0:has(>.tablewrap.tient){overflow:clip}
.tablewrap.tient .dt thead th{top:var(--haut-barre)}
/* Actions de ligne — composant .ra (actionsLigne(), RAPPORT § 3) : icônes au survol à la souris,
   un seul « … » au doigt, qui ouvre la feuille d'actions. */
.dt td.ra-cell{width:1%; white-space:nowrap; text-align:right}
.ra{display:inline-flex; align-items:center; justify-content:flex-end; gap:2px}
.ra .ra-b{display:inline-grid; place-items:center; width:28px; height:28px; min-height:0; padding:0; border:0; border-radius:var(--r-sm); background:transparent; color:var(--muted); cursor:pointer}
.ra .ra-b:hover{background:var(--surface-2); color:var(--ink)}
.ra .ra-b.dgr:hover{background:var(--fond-danger); color:var(--texte-danger)}
.ra .ra-b svg{width:15px; height:15px}
@media (hover:hover){
  .dt tbody tr:not(:hover):not(:focus-within) .ra .ra-b:not(.ra-plus){opacity:0}
  .ra .ra-plus{display:none}
}
/* Compat — les boutons texte déjà écrits (« Modifier / Supprimer ») : neutres au repos, rouges au
   survol de la ligne ; à la souris ils n'apparaissent qu'au survol (comme Zones depuis V55).
   !important : bat le style EN LIGNE style="color:var(--corail)" (tarification-options-zones.js). */
@media (hover:hover){
  .dt td .btn.ghost[style*="--corail"],.dt td .btn.tf-danger,.dt td .btn.sc-danger{color:var(--ink-2)!important}
  .dt tr:hover td .btn.ghost[style*="--corail"],.dt tr:hover td .btn.tf-danger,.dt tr:hover td .btn.sc-danger{color:var(--texte-danger)!important}
  .dt td .btn.sc-edit,.dt td .btn.sc-del{opacity:0; transition:opacity .12s}
  .dt tr:hover td .btn.sc-edit,.dt tr:hover td .btn.sc-del,.dt td .btn:focus-visible{opacity:1}
}
/* Tableau → cartes sous 700 px, sur demande (tableau(…, {mobile:'cartes'}) pose .dt-cartes et
   data-label sur chaque cellule). */
@media (max-width:700px){
  .dt.dt-cartes,.dt.dt-cartes tbody,.dt.dt-cartes tr,.dt.dt-cartes td{display:block; width:auto}
  .dt.dt-cartes thead{display:none}
  .dt.dt-cartes tbody tr{position:relative; margin:0 0 var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-card); background:var(--surface); box-shadow:var(--ombre-1)}
  .card .dt.dt-cartes tbody tr{margin:0; border-radius:var(--r-nul); box-shadow:none; border-top:1px solid var(--grid)}
  .card .dt.dt-cartes tbody tr:first-child{border-top:0}
  .dt.dt-cartes td{display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-3); padding:3px 0; border:0; white-space:normal; text-align:right}
  .dt.dt-cartes td::before{content:attr(data-label); flex:none; color:var(--muted); font-size:var(--fs-12); font-weight:500; text-align:left}
  .dt.dt-cartes td:first-child{display:block; padding-bottom:var(--sp-2); padding-right:48px; font-size:var(--fs-14); font-weight:600; text-align:left}
  .dt.dt-cartes td:first-child::before,.dt.dt-cartes td.ra-cell::before,.dt.dt-cartes td:not([data-label])::before{content:none}
  .dt.dt-cartes td.ra-cell{position:absolute; top:4px; right:4px; padding:0; width:auto}   /* le « … » en haut à droite de la carte */
  .card.pad0>.tablewrap .dt.dt-cartes td{padding-left:0; padding-right:0}   /* le retrait de 16 px de la 1re cellule ne vaut plus */
  .card.pad0>.tablewrap .dt.dt-cartes td:first-child{padding-right:48px}
}

/* ---------- 9. STATUTS, ÉTIQUETTES, COMPTEURS ---------- */
/* Statut = UN point + du texte. Les pilules pleines (.pill.good/.warn/.bad/.gray/.azur/.ge-prog,
   V72-V84) reprennent la forme unique ; le point vient d'un ::before (elles n'ont pas de .pd). */
.pill{gap:6px; font-size:var(--fs-12); font-weight:500; color:var(--ink-2)}
.pill .pd{width:7px; height:7px}
.pill.good,.pill.warn,.pill.bad,.pill.gray,.pill.azur,.pill.ge-prog{padding:0; border-radius:var(--r-nul); background:none; font-size:var(--fs-12); font-weight:500; color:var(--ink-2)}
.pill.good::before,.pill.warn::before,.pill.bad::before,.pill.gray::before,.pill.azur::before,.pill.ge-prog::before{content:''; width:7px; height:7px; flex:none; border-radius:var(--r-rond); background:var(--point-neutre)}
.pill.good::before{background:var(--point-ok)}
.pill.warn::before{background:var(--point-alerte)}
.pill.bad::before{background:var(--point-danger)}
.pill.azur::before{background:var(--point-info)}
.pill.ge-prog::before{background:var(--point-accent)}
.pill.a_assigner{color:var(--texte-danger)}
.pill.a_assigner .pd{background:var(--point-danger)}
.pill.terminee .pd{background:var(--point-neutre)}
/* Étiquette = un attribut (canal, gamme, « forcée ») : fond neutre, 11 px, rayon 4 */
.badge,.chan{font-size:var(--fs-11); font-weight:500; line-height:18px; padding:0 6px; border-radius:var(--r-xs)}
.badge.good{background:var(--fond-ok); color:var(--texte-ok)}
.badge.warn{background:var(--fond-alerte); color:var(--texte-alerte)}
.badge.bad{background:var(--fond-danger); color:var(--texte-danger)}
.badge.gray{color:var(--muted)}
/* Gamme de véhicule : plus de capitales espacées. La couleur de famille est posée EN LIGNE
   (vehFamCouleur, dispatch.js:160/210, familles.js:65/75/82) : la forme cible « étiquette neutre +
   point de la famille » (le blanc sur le vert des familles fait 2,5:1) demande le changement JS de RAPPORT § 3. */
.dspveh{text-transform:none; letter-spacing:0; font-weight:600}
/* Compteur = un nombre dans une pastille neutre ; l'onglet actif le passe en accent doux */
.hubn,.seg .cnt{display:inline-block; min-width:18px; padding:0 5px; margin-left:4px; border-radius:var(--r-pilule); background:var(--surface-2); color:var(--muted); font-size:var(--fs-11); font-weight:600; line-height:18px; text-align:center; font-variant-numeric:tabular-nums}
#hubBar button.on .hubn,.seg button.on .hubn,.seg button.on .cnt{background:var(--accent-soft); color:var(--texte-accent)}
.seg.fam button .muted{color:inherit; opacity:.7}

/* ---------- 10. ÉTATS VIDES (G7) : une seule forme ---------- */
/* titre (14 px) · une phrase (13 px, 44 caractères de large) · UN geste. .empty (41 emplois),
   la ligne vide de tableau() et « Aucune donnée. » des graphiques prennent la même allure. */
.vide{gap:var(--sp-2); padding:var(--sp-6) var(--sp-4)}
.vide b{font-size:var(--fs-14); font-weight:600; color:var(--ink)}
.vide p{font-size:var(--fs-13); color:var(--muted); max-width:44ch}
.vide .btn{margin-top:var(--sp-2)}
.empty,div.empty{padding:var(--sp-6) var(--sp-4); font-size:var(--fs-13); color:var(--muted); text-align:center}
td.empty{padding:var(--sp-5) var(--sp-4)}
.dt td.empty{white-space:normal}                 /* .dt td est en nowrap : la phrase débordait à 390 px */
.dt .vide b{font-weight:600}                     /* .dt td b (500) passait devant */
.dt tbody td[colspan].subtle{text-align:center; color:var(--muted); font-size:var(--fs-13)}
.atok{font-size:var(--fs-13)}

/* ---------- 11. NOTES ET BANDEAUX ---------- */
/* Une note = surface + filet + icône de ton ; plus de blocs beiges ou roses */
.fi-note.fi-retard{background:var(--surface); border-color:var(--border)}
.fi-note.fi-retard>.svgi{color:var(--point-alerte)}

/* ---------- 12. TOASTS, FENÊTRES, VOLETS, FEUILLES ---------- */
/* Toast : lot F (06/10) — les toasts sont empilés, avec un ton et « Annuler » : section « LOT F — DS v2 » (.ds-toast) */
/* Fenêtre : trois largeurs (data-taille posé par modalOuvrir, RAPPORT § 3) */
.modal{background:rgba(10,12,16,.45)}
.modal .box{border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:var(--ombre-4)}
.modal .box h3{font-size:var(--fs-16)}
.modal .box[data-taille="s"]{max-width:440px}
.modal .box[data-taille="m"]{max-width:640px}
.modal .box[data-taille="l"]{max-width:960px}

/* Sombre : les aplats indigo portant du texte blanc passent sur --btn (l'indigo sombre + blanc = 3,6:1) */
html[data-theme="dark"] :is(.dd-btn .cnt,.ms-pastille,.prs-et.on,.cal-case.auj .cal-num,.ent-pas li.on span,.pal-row.on .pic){background:var(--btn)}

/* ---------- 13. BARRE DU HAUT AU TÉLÉPHONE (G9) : le titre n'est jamais tronqué ---------- */
@media (max-width:760px){
  #topbar{gap:4px}
  #topbar .titlebox{flex:1 1 0; min-width:0}
  #topbar h2,#pageTitle{max-width:none; font-size:clamp(16px,4.4vw,17px); letter-spacing:-.02em}
  /* le périmètre devient une icône de 44 px ; un point indigo dit qu'un filtre est posé */
  #scopeBtn{width:var(--h-touch); min-width:var(--h-touch); max-width:none; padding:0; gap:0; justify-content:center; position:relative; background:transparent}
  #scopeBtn>span,#scopeBtn>.gi{display:none}
  #scopeBtn>svg:first-child{width:19px; height:19px}
  #scopeBtn.on::after{content:''; position:absolute; top:10px; right:10px; width:8px; height:8px; border-radius:var(--r-rond); background:var(--accent); box-shadow:0 0 0 2px var(--page)}
}

/* ---------- 14. GRAPHIQUES (G8) ---------- */
/* Pas de dégradé décoratif sur les barres ; une série = une couleur */
.hbar .bar{background-color:var(--serie-1); background-image:none; border-radius:var(--r-xs)}
/* Le tracé animé rejouait à chaque rendu (temps réel, événements chargés) : la courbe restait
   coupée au milieu, « points isolés ». lineChart ne pose plus .anim-line / .anim-area qu'au PREMIER
   rendu d'un graphique (graphiques.js) : l'animation reste à l'ouverture, jamais sur un rafraîchissement.
   Plus de fondu du graphique entier. */
.chart svg{animation:none}
/* l'anneau et les barres horizontales : les styles en ligne de graphiques.js deviennent des classes */
.donut{display:flex; gap:var(--sp-4); align-items:center; flex-wrap:wrap}
.donut .donut-ctx{font-size:var(--fs-12); fill:var(--muted)}
.donut .donut-tot{font-size:var(--fs-14); font-weight:600; fill:var(--ink)}
.donut .legend.donut-leg{margin:0; flex-direction:column; gap:var(--sp-2)}
.hbar .hb-pct{color:var(--muted); font-weight:500}
/* Majorations : une mesure = une couleur (plus d'indigo pastel + beige) */
.bars .b,.bars .b.n{background:var(--serie-1); border-top:0; border-radius:var(--r-xs) var(--r-xs) var(--r-nul) var(--r-nul)}
.bars .b:hover,.bars .b.n:hover{background:var(--accent-hover)}
.bars .b.d{background:var(--grid)}
/* Les événements sont des annotations, pas des séries : la grande bande devient neutre (elle
   prenait le violet voisin de la courbe indigo), le trait du haut garde la couleur de sa pastille.
   fill et opacity sont des ATTRIBUTS posés par bandesSvg() : une règle CSS les remplace. */
.ch-evt rect:first-child{fill:var(--ink); opacity:.045}
.ch-evt-t{fill:var(--ink-2)}
.legend{color:var(--ink-2); font-size:var(--fs-12)}

/* ---------- 15. MICRO-CAPITALES : il n'y en a plus ---------- */
.dspmt,.evday,.evtype,.ovp .when,.formbar .fb-k,.ca-pop .ca-t,.anasigg,.anafb span,.anasires .ahk,.anamh,.anamd,.dsphead,.dspsub,.cal-mtete span,.rg-groupe-t,.st-fam{text-transform:none; letter-spacing:0}
.dsphead{font-size:var(--fs-13); font-weight:600; color:var(--ink)}
.evday,.rg-groupe-t,.ca-pop .ca-t{font-size:var(--fs-12); font-weight:600; color:var(--muted)}

/* ---------- 16. AU DOIGT (téléphone, et tout écran sans survol) ---------- */
@media (max-width:760px),(hover:none){
  .btn,.btn.sm,.tbtn,.sel,.search,.dd-btn{min-height:var(--h-touch)}
  .toolrow .btn,.toolrow .btn.sm,.toolrow .tbtn,.toolrow .sel,.toolrow .search,.toolrow .dd-btn{min-height:var(--h-touch)}
  .field input:not([type=checkbox]):not([type=radio]),.field select{min-height:var(--h-touch)}
  .btn.ico{min-width:var(--h-touch)}
  .tbtn.icon{width:var(--h-touch); height:var(--h-touch)}
  .dt td .btn,.btn.asg{min-height:40px; padding:0 12px; font-size:var(--fs-13)}
  .seg button,:where(#hubBar:not([hidden])) ~ .screen .seg.tabs button{min-height:var(--h-seg-touch)}
  .seg.tabs button{min-height:var(--h-touch)}
  .seg.fam button{min-height:var(--h-seg-touch); padding:0 14px}
  .card .ch .seg button{min-height:var(--h-seg-touch)}
  /* Les boutons-texte gardent leur dessin : c'est la ZONE de toucher qui grandit, pas le bouton
     (la règle V57 « button{min-height:44px} » en faisait des pilules hautes au milieu du texte). */
  .copybtn,.lnk,.kpi .kpi-var.rangbtn,.evt-chip,.rang{min-height:0; position:relative}
  .copybtn::after,.lnk::after,.kpi .kpi-var.rangbtn::after,.evt-chip::after,.rang::after{content:''; position:absolute; inset:-12px -8px}
  /* un survol ne « colle » plus au doigt */
  .kpi.va:hover,.card:hover,.kpi:hover{box-shadow:var(--ombre-1)}
  .kpi.va:hover{border-color:transparent}
  .ra .ra-b:not(.ra-plus){display:none}
  .ra .ra-plus{display:inline-grid; width:var(--h-touch); height:var(--h-touch)}
}
@media (max-width:760px){
  .kpi:nth-child(-n+3) .val,.kpis:has(>.kpi:nth-child(4):last-child) .kpi .val{font-size:var(--fs-24)}
  /* Fenêtre au téléphone : une feuille qui monte du bas, pleine largeur */
  .modal:not(.inline){align-items:flex-end; padding:calc(24px + env(safe-area-inset-top,0px)) 0 0}
  .modal:not(.inline) .box{width:100%; max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px)); overflow-y:auto; border-radius:var(--r-lg) var(--r-lg) var(--r-nul) var(--r-nul); padding:var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom,0px))}
}

/* ---------- 17. MOUVEMENT RÉDUIT ---------- */
@media (prefers-reduced-motion:reduce){
  html.maj #topbar::after,html.maj #refreshBtn svg,.btn[aria-busy="true"]::before{animation:none}
  html.maj #topbar::after{transform:none; width:100%; opacity:.6}
}

/* ---------- 18. HORS CONNEXION (G2) : ce qui se passe, et de quand datent les données ---------- */
#offTxt b{font-weight:600}
#offTxt span{font-weight:500}
#offTxt b+span::before{content:' — '}
/* au bureau aussi, ce qui colle en bas (toasts, barres d'action) passe au-dessus du bandeau */
@media (min-width:1041px){ body.hors-ligne{--bas-colle:var(--h-touch)} }
@media (max-width:1040px){
  /* Le bandeau vit SOUS la barre du bas, qui monte d'autant (règle V57, --bas-colle compte 68 + 44 px). Sous 760 px,
     une surcharge le posait à 56 px du bas, au milieu de la barre : « Réessayer » passait dessous. Une rangée de 44 px. */
  #offBar{bottom:0; flex-wrap:nowrap; justify-content:space-between; gap:var(--sp-3); min-height:calc(var(--h-touch) + env(safe-area-inset-bottom,0px)); padding:0 var(--sp-4) env(safe-area-inset-bottom,0px)}
  body.hors-ligne #mobileNav{bottom:calc(var(--h-touch) + env(safe-area-inset-bottom,0px)); padding-bottom:6px}
  #offTxt{display:flex; flex-direction:column; min-width:0; line-height:var(--lh-titre)}
  #offTxt b{font-size:var(--fs-13)}
  #offTxt span{font-size:var(--fs-12)}
  #offTxt b+span::before{content:none}
  /* le bouton garde un dessin compact ; sa zone de toucher fait 44 px */
  #offBar .btn{flex:none; min-height:var(--h-sm); position:relative}
  #offBar .btn::after{content:''; position:absolute; inset:-6px -4px}
}

/* ---------- 19. LA PÉRIODE AU TÉLÉPHONE : une pastille, une feuille (periodes.js) ---------- */
/* Au bureau, la rangée de période reste telle quelle : la pastille n'y existe pas. Au téléphone, pastille et
   masquage des contrôles passent tous deux par :has() : un navigateur qui l'ignore garde la rangée d'origine. */
.per-pill{display:none}
@media (max-width:760px){
  .toolrow:has(>.per-pill)>.per-pill{display:inline-flex; align-items:center; gap:var(--sp-2); flex:1 1 auto; min-width:0; max-width:100%; min-height:var(--h-touch); padding:0 var(--sp-4);
    border:1px solid var(--border-strong); border-radius:var(--r-pilule); background:var(--surface); color:var(--ink); font-size:var(--fs-14); font-weight:600; text-align:left; box-shadow:var(--shadow-ctl)}
  .per-pill .per-pill-t{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .per-pill .per-pill-t small{font-size:var(--fs-14); font-weight:500; color:var(--muted)}
  .per-pill>svg{width:16px; height:16px; flex:none; color:var(--muted)}
  /* la rangée ne garde que la pastille et ses actions (export, actualiser) : les choix sont dans la feuille.
     !important : bat le display posé EN LIGNE sur les champs « du → au » (perNavHtml, index.html, tableau-de-bord.js) */
  .toolrow:has(>.per-pill)>:is(.seg,.pernav,.dd,select,.subtle,[id$="Perso"]){display:none!important}
}
/* la feuille « Période » : les mêmes choix que la rangée, à la taille du pouce */
.perf{display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-2) var(--sp-1) var(--sp-1)}
.perf .seg{display:flex; width:100%; max-width:none}
.perf .seg button{flex:1 1 auto; min-width:0; min-height:var(--h-seg-touch); padding:0 var(--sp-2); white-space:nowrap}
.perf-nav{display:flex; align-items:center; gap:var(--sp-2)}
.perf-nav .pnb{flex:none; width:var(--h-touch); height:var(--h-touch)}
.perf-nav .pnb svg{width:18px; height:18px}
.perf-date{position:relative; flex:1 1 auto; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:var(--h-touch); padding:0 var(--sp-3);
  border-radius:var(--r-pilule); background:var(--surface-2); color:var(--ink); font-size:var(--fs-14); font-weight:600}
.perf-date svg{width:16px; height:16px; flex:none; color:var(--muted)}
.perf-date span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* le vrai champ date recouvre la pastille : un toucher ouvre le sélecteur du téléphone */
.perf-date input{position:absolute; inset:0; width:100%; height:100%; opacity:0; border:0; font-size:var(--fs-16)}
.perf-du{display:flex; align-items:center; gap:var(--sp-2)}
.perf-g{display:flex; flex-direction:column; gap:var(--sp-2)}
.perf-t{font-size:var(--fs-12); font-weight:600; color:var(--muted)}
.perf-g .sel{width:100%; min-height:var(--h-touch); font-size:var(--fs-16)}
.perf-puces{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.perf-puces button{min-height:var(--h-seg-touch); padding:0 var(--sp-3); border:1px solid var(--border-strong); border-radius:var(--r-pilule); background:var(--surface); color:var(--ink-2); font-size:var(--fs-13); font-weight:500}
.perf-puces button.on{background:var(--ink); border-color:var(--ink); color:var(--page)}

/* ---------- 20. LE PÉRIMÈTRE SOUS LE TITRE, AU TÉLÉPHONE (perimetre.js) ---------- */
/* Le bouton de périmètre n'y est qu'une icône : la zone choisie (autre que « Partout ») s'écrit en petit sous le titre. */
.scope-sous{display:none}
@media (max-width:760px){
  #topbar .titlebox:has(>.scope-sous){flex-direction:column; align-items:flex-start; justify-content:center; gap:0}
  #topbar .scope-sous{display:inline-flex; align-items:center; gap:var(--sp-1); max-width:100%; min-height:0; padding:0; border:0; background:none; position:relative;
    font-size:var(--fs-12); font-weight:500; line-height:1.3; color:var(--texte-accent); cursor:pointer}
  #topbar .scope-sous span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  #topbar .scope-sous svg{width:12px; height:12px; flex:none}
  #topbar .scope-sous::after{content:''; position:absolute; inset:-8px -6px}
  #topbar .titlebox:has(>.scope-sous) h2{line-height:var(--lh-titre)}
}

/* ---------- 21. LES STYLES EN LIGNE DU SOCLE DEVIENNENT DES CLASSES ---------- */
/* santé des données (sante.js) : le bandeau, et la pastille « point + texte » */
#healthBar .sante-ic{flex:none; display:flex; width:16px; height:16px; margin-top:1px; color:var(--texte-danger)}
#healthBar .sante-l>div{padding:1px 0}
#healthPop .sante-t{margin-bottom:var(--sp-1)}
#healthPop .hrow .pt.pt-ok{background:var(--point-ok)}
#healthPop .hrow .pt.pt-alerte{background:var(--point-alerte)}
#healthPop .hrow .pt.pt-danger{background:var(--point-danger)}
#healthPop .sante-pied{margin-top:var(--sp-2); font-size:var(--fs-12)}
/* le palmarès (classements.js) */
.rangtab .rang-n{width:70px}
.rangtab .rang-ex{font-size:var(--fs-11)}
.rangtab .rang-plus{text-align:center}
.modal .rang-kpis{margin-top:var(--sp-3)}
.modal .rang-h{margin-top:var(--sp-4)}
/* nommer une vue (composants.js), noter un événement (evenements.js) */
.modal .vue-garde{margin-top:var(--sp-2)}
.modal .vue-go{margin-top:var(--sp-4)}
.evt-form .evt-aide{margin:0 0 var(--sp-3)}
/* ---------- V93 — retours des écrans (fusion) ---------- */
/* Puce de filtre active en sombre : l'encre pleine, pas le fond de la page */
html[data-theme="dark"] .screen .seg.tabs:is(.crm-segs,.cn-segs) button.on{background:var(--ink); border-color:var(--ink); color:var(--page)}
@media (max-width:760px){
  /* une barre qui porte un détail long passe à la ligne au lieu de déborder */
  .hbar .tr{flex-wrap:wrap; row-gap:2px}
  .hbar .v{white-space:normal}
  /* V93.1 — sauf au tableau de bord, comme en V92.0 : la barre se raccourcit et son chiffre reste sur sa ligne */
  #s-overview .hbar .tr{flex-wrap:nowrap}
  #s-overview .hbar .v{white-space:nowrap}
}
@media (max-width:700px){
  /* la dernière carte d'un tableau en cartes n'a pas de filet sous chaque valeur */
  .dt.dt-cartes tr:last-child td{border-bottom:0}
}
/* ---- (fin V92 — SOCLE) ---- */

/* ######################################################################
   V92 — EXPLOITATION (Dispatch, Réservations, fiche de course, Nouvelle réservation, Devis, Incidents, Au volant, Recherche)
   ###################################################################### */
/* Règles d'écriture de ce bloc : jetons seulement (tailles, rayons, couches, couleurs) ; chaque règle reprend le
   sélecteur qu'elle corrige avec au moins sa spécificité. */

/* ---------- Fiche d'une course (n°7) : refaite par le lot E1F (sa section, à la fin de la feuille) ---------- */
/* ---------- Gamme de véhicule : étiquette neutre + point de la famille (le blanc sur la couleur faisait 2,2 à 2,8:1) ---------- */
.dspveh.vfam{display:inline-flex; align-items:center; gap:6px; margin-right:0; padding:0 8px; min-height:22px; border-radius:var(--r-pilule); background:var(--surface-2); color:var(--ink); font-size:var(--fs-12); font-weight:600; line-height:1.2; white-space:nowrap; vertical-align:middle}
.vfam-pt{width:8px; height:8px; flex:none; border-radius:var(--r-rond); background:var(--fam,var(--point-neutre))}

/* ---------- Dispatch (n°2, n°4, n°8) ---------- */
/* la rangée unique de compteurs (et la légende derrière « ? ») */
#s-dispatch .dsp-legende[hidden]{display:none}
/* une ligne du planning : le trajet et son sous-titre passent sur deux lignes au lieu d'être coupés (B13) */
.dspcard.dsprow{grid-template-columns:112px minmax(0,1.5fr) auto minmax(0,1.3fr) auto}
.dsprow .dr-t b,.dsprow .dr-t small{white-space:normal}
.dsprow .dr-t small{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.dsprow.envoi{--st:var(--accent)}
.dsprow .dsp-etat.envoi{color:var(--texte-accent)}
.dsprow .dsp-sg{margin-top:2px; font-size:var(--fs-12); color:var(--ink-2)}
.dsprow .dsp-sg b{font-weight:600; color:var(--ink)}
.dsprow .dsp-sg .lnk{font-size:var(--fs-12)}
.dsprow .dr-a .dsp-tel{width:auto; min-width:var(--h-sm); margin-left:0; color:var(--texte-accent)}
.dsprow .dr-a .btn,.dsprow .dr-a .qab,.dsprow .dspck{position:relative}
@media (max-width:760px){
  /* la première rangée tient sur une ligne : recherche, Filtres, Réglages, + */
  /* les compteurs sur une ligne qui défile */
  #s-dispatch .dsp-af{padding:var(--sp-2) var(--sp-3)}
  /* la ligne en trois zones : heure et gamme · trajet sur toute la largeur · qui et le geste (environ 110 px) */
  .dspcard.dsprow{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"h v" "t t" "q a"; row-gap:4px; column-gap:var(--sp-2); padding:var(--sp-2) var(--sp-3) var(--sp-2) calc(var(--sp-3) + 4px)}
  .dsprow .dr-h{grid-area:h} .dsprow .dr-v{grid-area:v; justify-self:end} .dsprow .dr-t{grid-area:t}
  .dsprow .dr-q{grid-area:q; align-self:center; min-width:0} .dsprow .dr-a{grid-area:a; align-self:end; justify-content:flex-end}
  .dsprow .dr-h small{display:inline; margin-left:6px}
  .dsprow .dr-q .dsp-etat,.dsprow .dsp-sg{display:block}   /* sur deux lignes au besoin : rien de coupé */
  .dsprow .dsp-vite-v{display:none}
  /* cibles de 44 px : 36 px dessinés, la zone de toucher déborde */
  .dsprow .dr-a .btn{min-height:var(--h-md)}
  .dsprow .dr-a .qab{width:var(--h-md); height:var(--h-md)}
  .dsprow .dr-a .btn::after,.dsprow .dr-a .qab::after{content:''; position:absolute; inset:-4px}
  .dsprow .dspck input{width:20px; height:20px}
  .dsprow .dr-t .vol-copie{display:none}   /* copier le vol : dans la fiche ; ici il doublait la hauteur de la ligne */
  .dsprow .dr-h{min-height:var(--h-sm)}
  .dsprow .dspck::after{content:''; position:absolute; inset:-14px -12px -10px}   /* 44 px sans mordre le trajet */
  #s-dispatch .dsp-af .ch h3{font-size:var(--fs-14)}
}
/* la marge du jour (n°17), au bout de l'en-tête du jour */
.dsp-jh .dsp-jm{margin-left:auto; font-size:var(--fs-13); color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap}
/* la barre « Annuler » d'une assignation en un tap (6 s) : au-dessus des toasts et de la barre du bas */
.dsp-annul{position:fixed; left:50%; bottom:calc(var(--bas-colle) + 76px); transform:translateX(-50%); z-index:var(--z-toast); display:flex; align-items:center; gap:var(--sp-3); width:min(92vw,440px); padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border-radius:var(--r-md); background:var(--ink); color:var(--page); box-shadow:var(--ombre-3); overflow:hidden}
.dsp-annul[hidden]{display:none}
.dsp-annul-t{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-13)}
.dsp-annul-t svg{width:15px; height:15px; vertical-align:-3px}
.dsp-annul .btn{flex:none; min-height:var(--h-touch)}
.dsp-annul-j{position:absolute; left:0; bottom:0; width:100%; height:3px; background:var(--accent); transform-origin:left center; animation:dsp-annul-j 6s linear forwards}
@keyframes dsp-annul-j{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ---------- Cibles de 44 px au doigt (n°18) : ce qui restait sous 44 dans la fiche et le Dispatch (mesuré à 390 px) ---------- */
@media (max-width:760px),(hover:none){
  #drawer #drawerClose{min-width:var(--h-touch)}
  #drawer #drawerBackBtn{flex:none; white-space:nowrap}
  #drawer .dh #drawerTitle{min-width:0}
  #drawer a.wz,#drawer .vol-copie,#drawer .drow .dv>a[href],#drawer .drow .dv .wa-lien{position:relative}
  #drawer a.wz{min-height:var(--h-md)}
  #drawer a.wz::after{content:''; position:absolute; inset:-4px 0}
  #drawer .vol-copie::after{content:''; position:absolute; inset:0 -22px 0 0}
  /* les liens-texte gardent leur dessin : c'est la zone de toucher qui grandit (comme .copybtn et .lnk dans le socle) */
  #drawer .drow .dv>a[href]::after,#drawer .drow .dv .wa-lien::after,#drawer .copybtn::after{content:''; position:absolute; inset:-15px -8px}
}
@media (max-width:760px){
  .dsprow .dr-a .dsp-tel{min-width:var(--h-md)}
  .dsprow .dsp-sg .lnk{position:relative}
  .dsprow .dsp-sg .lnk::after{content:''; position:absolute; inset:-13px -4px}
}

/* ---- (fin V92 — EXPLOITATION) ---- */

/* ######################################################################
   V92 — PILOTAGE (Tableau de bord, Notifications, Analyse, Finances)
   ###################################################################### */
/* Règles de la section : jetons seulement (tailles, rayons, couches, couleurs) ; chaque sélecteur vise un
   élément que le JS de Pilotage écrit. */

/* ---------- 0. PARTAGÉ : chips de variation hors carte-chiffre, définitions ---------- */
.pil-chip .delta{display:inline-flex; align-items:center; gap:3px; width:fit-content; max-width:100%; padding:1px 8px; border-radius:var(--r-sm); font-size:var(--fs-12); font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap}
.pil-chip .delta svg{width:12px; height:12px; flex:none}
.pil-chip .delta.g,.pil-chip .delta.up{color:var(--texte-ok); background:var(--fond-ok)}
.pil-chip .delta.r,.pil-chip .delta.down{color:var(--texte-danger); background:var(--fond-danger)}
.pil-chip .delta.n{color:var(--muted); background:transparent; padding:0}
.pil-chip .delta .rgx{color:var(--muted); font-weight:500}
.pil-chip .delta.rangbtn{min-height:0; position:relative; cursor:pointer}
.pil-chip .delta.rangbtn::after{content:''; position:absolute; inset:-10px -6px}
.pil-def{margin:var(--sp-3) 0 0; font-size:var(--fs-12); line-height:var(--lh-texte); color:var(--muted); max-width:70ch}

/* ---------- 1. TABLEAU DE BORD ---------- */
/* V93.1 — le tableau de bord a retrouvé sa forme de V92.0 (youcef, 25/09) : cartes de tête, « Le mois en cours »,
   tableau des prochaines réservations, provenance, sens hub, camembert des reçues. Il se sert des règles communes
   (.kpis, .card, .dt, .hbar, .donut, .atrow) : plus aucune règle à lui dans cette section.
   V93.4 — sauf le vrai véhicule et le vol (ovVehVol) : une ligne sous l'adresse des prochaines réservations, et une
   sur la carte « Prochaine course ». Le vol se touche (recherche Google) et se copie (volLien). */
.ovveh{display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-12); color:var(--ink); white-space:nowrap}
.ovveh .svgi{width:13px; height:13px; flex:none; color:var(--muted)}
.ovnext .ovx{display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; margin-top:4px; font-size:var(--fs-12)}
.ovp-vv{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-top:6px}
.ovp-vv .ovveh,.ovp-vv .vol-g{font-size:var(--fs-14)}
@media (max-width:1040px){
  /* au doigt : la zone du lien s'agrandit en hauteur (pas en largeur : le bouton « copier » est juste à côté) */
  :is(.ovnext .ovx,.ovp-vv) .vol-lien{position:relative}
  :is(.ovnext .ovx,.ovp-vv) .vol-lien::after{content:''; position:absolute; inset:-10px 0}
}
/* ---------- 2. NOTIFICATIONS ---------- */
/* Lot E4 (06/10/2026) : l'écran « À traiter » (une ligne, ses gestes, « Annuler », les alertes classées d'elles-mêmes) a ses
   règles dans la section « LOT E4 — À TRAITER », en fin de feuille. */

/* ---------- 3. FINANCES ---------- */
/* Paiements › payer la période : une ligne décochée s'efface, la case et le nom se touchent ensemble */
.pay-p-off td,.pay-mligne.pay-p-off{color:var(--muted)}
.pay-p-off .cash{color:var(--muted)}
.pay-p-nom{display:inline-flex; align-items:center; gap:var(--sp-2); min-height:var(--h-touch); cursor:pointer}
.pay-p-nom input{width:18px; height:18px; flex:none}
/* Résultat : la marge nette en tête (sa définition dessous), quatre chiffres à côté, deux par deux */
@media (max-width:760px){
  /* la comparaison, la flotte et l'export : un bouton, une feuille */
  #finMount .fi-barre .fi-opts{min-height:var(--h-touch); max-width:100%}
}
/* Charges sans aucune donnée : un état vide, ses modèles pour démarrer */
.chg-modeles{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--sp-2); margin-top:var(--sp-3)}
.chg-modeles>.muted{flex:1 1 100%; text-align:center; font-size:var(--fs-13)}
@media (max-width:760px){
  .chg-modeles .btn{min-height:var(--h-touch)}
}
/* ---------- 4. ANALYSE ET STATISTIQUES ---------- */
#statsMount .hbar .nm:has(.dot){display:flex; align-items:center; gap:6px}
#statsMount .hbar .nm .dot{width:8px; height:8px; border-radius:var(--r-rond); flex:none}
.stt-ch{margin-bottom:var(--sp-4)}
/* le widget du marché sans relevé n'occupe plus deux grandes cartes vides dans les Statistiques (il vit dans Tarification) */
#sttVeille>.card:has(>.empty){display:none}
@media (max-width:760px){
  /* une barre : son nom sur deux lignes s'il le faut, son détail sous la barre — plus rien ne sort de la carte */
  #statsMount .hbar,#anaMount .hbar{grid-template-columns:96px minmax(0,1fr)}
  #statsMount .hbar .nm,#anaMount .hbar .nm{white-space:normal; overflow-wrap:anywhere; line-height:var(--lh-titre)}
  #statsMount .hbar .tr,#anaMount .hbar .tr{flex-wrap:wrap; row-gap:2px}
  #statsMount .hbar .v,#anaMount .hbar .v{white-space:normal}
  /* les segments d'en-tête de carte défilent au lieu de sortir de la carte */
  #statsMount .card .ch .right,#anaMount .card .ch .right{min-width:0; max-width:100%}
  #statsMount .card .ch .right .seg,#anaMount .card .ch .right .seg{max-width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none}
}
/* V93.8 — « 10 PROCHAINES RÉSERVATIONS » TIENT DANS SA CARTE : la référence est coupée au milieu (refLisible — une
   référence Mozio de 42 caractères élargissait la 1re colonne à 361 px et poussait « Statut » hors du cadre sur le
   MacBook de youcef), et le nom du chauffeur passe à la ligne au lieu d'élargir sa colonne (à 1280 px, « Youcef
   (junior) Belaouinat » suffisait à faire défiler le tableau) */
.dt.ovnext td.mh{white-space:normal}
/* au téléphone, la référence quitte sa colonne et passe sous la date : jour, sens et statut tiennent dans 360 px (la
   colonne d'une référence de 18 chiffres en prenait 160 et « Statut » sortait de l'écran) */
.dt.ovnext .ovn-ref-m{display:none}
@media (max-width:640px){
  .dt.ovnext tr>:first-child:not([colspan]){display:none}
  .dt.ovnext .ovn-ref-m{display:block}
  .dt.ovnext .ovn-ref-m .reffull{font-size:var(--fs-11)}
  .dt.ovnext td .sens{white-space:normal}
}
/* entre 1041 et 1365 px, la carte n'a que 530 à 650 px (deux colonnes) : cellules resserrées, la pastille de sens peut
   passer à la ligne — le tableau ne défile plus de côté au-delà de 1180 px */
@media (min-width:1041px) and (max-width:1365px){
  .dt.ovnext th,.dt.ovnext td{padding-left:var(--sp-2); padding-right:var(--sp-2)}
  .dt.ovnext td .sens{white-space:normal}
}
/* V93.8 — ANALYSE › SITE WEB : les barres gardent leurs libellés entiers (« Coordonnées validées », « Réservations créées »,
   « /nice-airport-transfer/ » étaient coupés à 120 px) ; au téléphone, comme les autres barres d'Analyse, le nom passe sur deux lignes et les
   segments de la fenêtre (7 jours… 1 an) défilent au lieu de sortir de la carte */
#audMount .hbar{grid-template-columns:168px minmax(0,1fr)}
@media (max-width:760px){
  #audMount .hbar .nm{white-space:normal; overflow-wrap:anywhere}
  #audMount .hbar .tr{flex-wrap:wrap; row-gap:2px}
  #audMount .card .ch .right{min-width:0; max-width:100%}
  #audMount .card .ch .right .seg{max-width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none}
}
/* V93.9 — LE SITE EN TÊTE DE « À TRAITER » (youcef, 01/10 : « réservations et devis du site non payés en tête, avec
   WhatsApp + lien de paiement et appel en un geste ») : le globe dit que la ligne vient du site ; les gestes passent à la
   ligne au téléphone au lieu de sortir de la carte */
.atrow .at-site{display:inline-flex; vertical-align:-2px; margin-right:6px; color:var(--serie-7)}
.atrow .at-site svg{width:14px; height:14px}
.atrow .atact a.btn{text-decoration:none}
/* une ligne du site garde tout ce qu'elle dit (quand, vue ou pas) : elle passe à la ligne au lieu d'être coupée */
.atrow.site .attx small{white-space:normal}
/* au téléphone, « Appeler » et « Lien » gardent leur icône (et leur nom pour le lecteur d'écran) : les gestes tiennent sur une ligne */
@media (max-width:640px){ .atrow .atact{flex-wrap:wrap; row-gap:6px} .atrow .atact .at-lib{display:none} .atrow .atact .btn:has(.at-lib){min-width:var(--h-sm); padding:0; justify-content:center} }
/* V93.9 — LA CARTE « LE SITE » (youcef, 01/10 : « ce que fait le site aujourd'hui, visible du tableau de bord ») : quatre
   chiffres, le chemin jusqu'au paiement, d'où viennent les pages vues, la dernière visite et ce qui a été écarté */
.ovsite .ovs-kpis{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2) var(--sp-3); margin-top:var(--sp-1)}
.ovsite .ovs-k{display:flex; flex-direction:column; min-width:0}
.bstack>.card.ovsite{flex:none}
.ovsite .ovs-v{display:flex; align-items:center; flex-wrap:wrap; gap:2px 6px}
.ovsite .ovs-k b{font-family:var(--font-num); font-size:var(--fs-20); font-weight:600; line-height:1.15; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.ovsite .ovs-k span{font-size:var(--fs-12); color:var(--muted)}
.ovsite .ovs-k .delta{font-style:normal; font-size:var(--fs-11); font-weight:500; font-family:var(--font-num); width:fit-content; padding:0 6px; border-radius:var(--r-xs)}
.ovsite .ovs-k .delta.g{color:var(--texte-ok); background:var(--good-soft)} .ovsite .ovs-k .delta.r{color:var(--texte-danger); background:var(--bad-soft)} .ovsite .ovs-k .delta.n{color:var(--faint); padding:0}
.ovsite .ovs-ent,.ovsite .ovs-src{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:var(--sp-3); padding-top:var(--sp-2); border-top:1px solid var(--grid); font-size:var(--fs-12); color:var(--ink-2)}
.ovsite .ovs-ent b,.ovsite .ovs-src b{font-family:var(--font-num); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.ovsite .ovs-src{border-top:0; padding-top:0; margin-top:var(--sp-2); color:var(--muted)}
.ovsite .ovs-pied{margin-top:var(--sp-2); font-size:var(--fs-11); color:var(--faint)}
.ovsite .ovs-vide{font-size:var(--fs-12); margin-bottom:var(--sp-1)}
@media (min-width:1366px){ .ovsite .ovs-kpis{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:641px) and (max-width:1040px){ .ovsite .ovs-kpis{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* ---- (fin V92 — PILOTAGE) ---- */

/* ######################################################################
   V92 — RELATIONS (Clients, Flottes, Canaux, Chauffeurs, Véhicules, Messages)
   ###################################################################### */
/* Écrit avec les jetons seulement (tailles, rayons, couches, couleurs). Les classes rl-* sont partagées par les
   écrans de Relations (clients.js les définit, chargé le premier). */

/* ---------- 1. UN SEUL ÉTAGE D'ONGLETS (Clients · Entreprises · Campagnes · Analyses) ----------
   La barre de l'entrée (« Particuliers | Entreprises clientes ») s'efface sur ces deux écrans : .rl-n1 la remplace.
   La règle du socle qui fait d'une rangée .seg.tabs un « niveau 2 » (pastilles) voit encore #hubBar : on rend à
   cette rangée l'allure du niveau 1 (soulignée), à spécificité d'identifiant. */
/* (V93 : #hubBar est caché par le registre — ECRANS.clients.sansBarre) */
.rl-retour{margin:0 0 var(--sp-3)}
.rl-retour .lnk{display:inline-flex; align-items:center; gap:var(--sp-1)}

/* ---------- 2. LA LISTE DES CLIENTS ---------- */
/* au téléphone, une ligne de résumé remplace les tuiles : le premier client se voit sans défiler */
/* « Quand » : la prochaine course en avant, sinon la dernière et son lieu */
.rl-quand{display:inline-flex; flex-direction:column; white-space:nowrap; color:var(--ink-2)}
.rl-quand.rl-avenir b{color:var(--ink)}

/* ---------- 2 bis. FLOTTES (et Entreprises clientes) ---------- */
/* « À payer » : ce qui reste à verser, les plus gros d'abord, et le registre */
/* Entreprises clientes, aucune encore : celles que les fiches clients citent */
.rl-reperee .btn{flex:none}
.rl-reperee .ch-li-t{flex:1}
/* l'assistant : les chauffeurs GoodJourney à reprendre */
.ent-gjch{display:flex; flex-direction:column; gap:var(--sp-1); margin:0 0 var(--sp-3)}
.ent-gjch-l{display:flex; align-items:center; gap:var(--sp-2); min-height:var(--h-touch)}
/* la ligne du mois d'une fiche : des morceaux « intitulé valeur » qui passent à la ligne entiers ; les liens restent
   discrets (soulignés en pointillé), la couleur d'action est pour les boutons */

/* ---------- 2 quater. CHAUFFEURS ET ÉCHÉANCES ---------- */
/* le bandeau « Aujourd'hui » : qui roule (une puce par chauffeur, elle ouvre sa fiche), puis ce qui est à traiter */
/* « Plus » (au bas de la liste) et « 3 choses à compléter » (dans la fiche) : un dépliant discret */
/* Échéances : la rangée des vues (Liste · Saisie rapide) et la roue dentée des alertes */
/* la Saisie rapide : un champ date par document, son état juste dessous */
.ech-g{display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px}
.ech-g input[type="date"]{min-height:40px; padding:5px 10px; border:1px solid var(--border-strong); border-radius:var(--r-sm); background-color:var(--surface); color:var(--ink); font-size:var(--fs-13); box-shadow:var(--shadow-ctl); outline:none}
.ech-g input[type="date"]:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
.ech-g input[aria-invalid="true"]{border-color:var(--point-danger)}
.ech-g input:disabled{opacity:.6}
html[data-theme="dark"] .ech-g input[type="date"]{background-color:var(--page)}
.ech-g-s{min-height:16px}
.dt-cartes .ech-g{align-items:flex-end}
@media (min-width:701px){ table.ech-grille th,table.ech-grille td{text-align:left} table.ech-grille td:not(:first-child){width:1%; white-space:nowrap; padding-right:var(--sp-6)} }

/* ---------- 2 quinquies. CANAUX ET PROSPECTION ---------- */
/* ce qu'un OTA doit encore sur les mois clos : en orange, il ouvre ses paiements reçus */
.cn-du{color:var(--texte-alerte)}
.lnk.cn-du{font-size:inherit}
/* sous une carte du pipeline : « Appeler » et « Étape suivante → » (le glisser-déposer ne marche pas au doigt) */
.prs-gestes{display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-top:var(--sp-1)}
.prs-gestes .btn svg{width:14px; height:14px}

/* ---------- 3. LES FICHES : un titre, un en-tête qui reste, la croix toujours là ---------- */
/* le titre de la fenêtre répète le nom : il reste pour les lecteurs d'écran (aria-labelledby), plus à l'œil */
#genBox:has(.rl-haut)>.ch{position:absolute; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.rl-haut{position:sticky; top:0; z-index:var(--z-collant); margin:calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-3); padding:var(--sp-4) var(--sp-5) 0; background:var(--elevated); border-bottom:1px solid var(--border)}
/* sur ordinateur, la fenêtre rogne l'en-tête à ses coins arrondis (clip ne crée pas de défilement : l'en-tête colle toujours) */
@media (min-width:761px){ #genBox:has(.rl-haut){overflow:clip} }
.rl-haut .ent-onglets{margin:var(--sp-2) 0 0}
.rl-tete{flex-wrap:nowrap; gap:var(--sp-3); margin:0 0 var(--sp-1)}
.rl-tete .ent-tete{flex:1 1 auto; min-width:0}
.rl-tete .pfic-nom{overflow-wrap:anywhere}
.rl-gestes{display:flex; align-items:center; gap:var(--sp-1); flex:none}
.rl-x{flex:none}
.rl-ligne-z{display:flex; flex-direction:column; gap:var(--sp-2); margin:0 0 var(--sp-3)}
/* la ligne qui s'ouvre : la prochaine course (ou, pour une flotte, son mois) */
/* les préférences : ce que le chauffeur doit savoir */

/* ---------- 4. SOUS 1040 PX : filtres repliés, « … » pour le reste ---------- */
/* ---------- 5. AU TÉLÉPHONE ---------- */
@media (max-width:760px){
  /* quatre onglets tiennent en 390 px : le compte passe dans la ligne de résumé, les réglages dans « … » */
  .rl-lab{display:none}
  /* la fiche devient une page entière ; son en-tête reste en haut, sous l'encoche */
  .modal:not(.inline):has(.rl-haut){padding:0}
  .modal:not(.inline):has(.rl-haut) .box{height:100dvh; max-height:none; border-radius:var(--r-nul); padding-top:0}
  .rl-haut{margin:0 calc(-1 * var(--sp-4)) var(--sp-3); padding:calc(var(--sp-3) + env(safe-area-inset-top,0px)) var(--sp-4) 0}
  /* nom et état à côté du visuel, la croix en haut à droite, les gestes sur leur rangée */
  .rl-tete{display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:var(--sp-3); row-gap:var(--sp-1); align-items:center}
  .rl-tete>.av,.rl-tete>.plogo,.rl-tete>.vh-ico{grid-column:1; grid-row:1 / span 2; align-self:start}
  .rl-tete .ent-tete{grid-column:2; grid-row:1}
  .rl-tete .rl-x{grid-column:3; grid-row:1; align-self:start}
  .rl-tete .ch-tete-st{grid-column:2 / -1; grid-row:2; flex:none; align-items:flex-start}
  .rl-tete .ch-tete-st .rowsub{text-align:left}
  .rl-gestes{grid-column:1 / -1; grid-row:3; flex-wrap:wrap; margin-top:var(--sp-1)}
  .rl-haut .ent-onglets button{padding:0 6px; font-size:var(--fs-13)}
  .rl-haut .ent-onglets .cnt,.rl-hbar-m{display:none}   /* les onglets tiennent en 390 px ; la barre garde sa place */
  /* Prospection : le pipeline devient une liste groupée par étape ; une étape vide ne s'affiche pas */
  .prs-pipe{grid-auto-flow:row; grid-auto-columns:auto; overflow:visible}
  .prs-col:has(.prs-vide){display:none}
  /* Chauffeurs : les puces « qui roule » sur une ligne qui défile au doigt */
}
@media (max-width:760px),(hover:none){
  .ech-g input[type="date"]{min-height:var(--h-touch)}
}
/* ---- (fin V92 — RELATIONS) ---- */

/* ######################################################################
   V92 — REVENUS ET ADMINISTRATION (Tarification, Arrêt des ventes, Membres, Réglages)
   ###################################################################### */
/* Jetons seulement : tailles --fs-*, espaces --sp-*, rayons --r-*, couches --z-*, couleurs du thème. */

/* ---------- T1 : dans ces écrans, le texte se lit à gauche ; seuls les chiffres (.num) vont à droite ---------- */
@media (min-width:701px){
  :is(#s-prices,#s-fournisseurs,#s-grilles,#s-surcharges,#s-simulateur,#s-options,#s-zones,#s-promos,#s-arrets,#s-utilisateurs,#s-settings) .dt :is(th,td):not(.num):not(.ra-cell):not(.tf-cell):not(.nc-c):not(.ge-n){text-align:left}
}
/* en cartes (téléphone), la dernière ligne n'a pas de filet : .dt tr:last-child td (l.657) passait devant .dt.dt-cartes td */
@media (max-width:700px){
  :is(#s-prices,#s-fournisseurs,#s-grilles,#s-surcharges,#s-simulateur,#s-options,#s-zones,#s-promos,#s-arrets,#s-utilisateurs,#s-settings) .dt.dt-cartes tr:last-child td{border-bottom:0}
}

/* ---------- Arrêt des ventes ---------- */
/* lot I : Nom · Quand · Zones · Voitures · État · Refusées · gestes */
.form-row.arv-verif{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1040px){ .form-row.arv-verif{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .form-row.arv-verif{grid-template-columns:minmax(0,1fr)} }
.arv-verif-go{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-top:var(--sp-3)}
.arv-verif-go .sub{margin:0}
.arv-presets{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-4)}
.arv-presets .sub{margin:0}
.arv-presets .seg{flex-wrap:wrap}
.arv-effet{margin:var(--sp-4) 0 0; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); background:var(--surface-2); color:var(--ink-2); font-size:var(--fs-13)}
.arv-effet:empty{display:none}
.arv-effet .sub{margin:0}
.arv-effet-l{margin:0; padding-left:var(--sp-4); display:grid; gap:var(--sp-1)}
.arv-erreur{margin-top:var(--sp-3); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); background:var(--fond-danger); color:var(--texte-danger); font-size:var(--fs-13)}
@media (max-width:760px){ .arv-verif-go .btn{flex:1 1 auto} }

/* ---------- Codes promo ---------- */

/* ---------- TVA : une case changée se confirme, elle ne s'écrit plus en quittant la case ---------- */
.rv-tva-conf{margin-top:var(--sp-3); padding:var(--sp-3) var(--sp-4); border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--surface-2); font-size:var(--fs-13)}
.rv-tva-conf p{margin:0 0 var(--sp-2)}
.rv-tva-conf .go{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:0}

/* ---------- Réglages › Messages aux clients : deux colonnes au bureau, une au téléphone (B7), plus de chevauchement (B13) ---------- */
.nc-grille{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-5); align-items:start; margin-top:var(--sp-3)}
.nc-col{display:flex; flex-direction:column; gap:var(--sp-2); min-width:0}
.nc-col .dt-h{margin-top:var(--sp-2)}
.nc-cases{display:flex; flex-direction:column; gap:var(--sp-1)}
.nc-reglages{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-3); align-items:end}
.nc-reglages .field{margin:0; min-width:0}
.nc-col .go{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-2) 0 0}
.nc-choix{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.nc-point{display:inline-block; width:6px; height:6px; margin-left:var(--sp-1); border-radius:var(--r-rond); background:var(--point-alerte); vertical-align:2px}
.nc-vars{margin:0}
.nc-brouillon-note{margin:var(--sp-1) 0}
.dt.nc-evs th.nc-c,.dt.nc-evs td.nc-c{text-align:center; width:1%}
.dt.nc-evs td:first-child{white-space:normal}
.dt.nc-evs th,.dt.nc-evs td{padding-left:var(--sp-2); padding-right:var(--sp-2)}
.nc-wh-t .sub{margin-top:var(--sp-1)}
.nc-col textarea{width:100%}
@media (max-width:1040px){ .nc-grille{grid-template-columns:minmax(0,1fr)} }
@media (max-width:760px){
  .nc-reglages{grid-template-columns:minmax(0,1fr)}
  .nc-wh{flex-direction:column; align-items:flex-start}
  .nc-choix .seg{max-width:100%; overflow-x:auto}
}

/* ---------- Vente (grille GoodJourney) : une ligne d'état, le brouillon, le lot, une route = une ligne au téléphone ---------- */
.tf-titre-bloc{min-width:0; flex:1 1 240px}
.tf-head .right{align-items:center}
:is(.tf-head,.tf-outils,.mkbar) .btn .tf-lib{margin-left:var(--sp-1)}
.tf-head .btn.ico{padding:0; width:var(--h-sm); justify-content:center}
.tf-offre{margin:var(--sp-3) 0 0; max-width:92ch}
.tf-aide{margin:var(--sp-2) 0 0; font-size:var(--fs-13); color:var(--ink-2)}
.tf-aide summary{cursor:pointer; color:var(--muted); padding:var(--sp-1) 0}
.tf-aide p{margin:var(--sp-1) 0 0; max-width:92ch; line-height:1.5}
.tf-aide .tf-gardes{margin:var(--sp-2) 0 0}
.tf-selrang{display:none}
.tf-save .tf-verif{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2); margin:var(--sp-2) 0 0}
p.tf-verif{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); color:var(--muted); font-size:var(--fs-13)}
.tf-verif a.lnk{font-size:var(--fs-13); line-height:inherit; border:0; border-radius:var(--r-nul); padding:0; color:var(--texte-accent)}
.tf-verif a.lnk:hover{background:none; color:var(--texte-accent)}
.volet .tf-ft{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1); white-space:normal; margin:0 0 var(--sp-1)}
.volet p.tf-verif{margin:0 0 var(--sp-3)}
/* les formulaires d'un tarif et d'une route vivent dans le volet : pas de boîte dans la boîte, trois prix qui tiennent */
.volet .tf-form{margin:0; padding:0; border:0; border-radius:var(--r-nul); background:none; box-shadow:none}
.tf-form .form-row.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tf-form .field input:not([type=checkbox]):not([type=radio]),.tf-form .field select{width:100%; min-width:0}
.tf-form>p.sub{margin:var(--sp-3) 0 0}
.tf-form-pied{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.tf-form-pied .btn.tf-danger{margin-left:auto; color:var(--texte-danger)}
/* la grille : ce qui attend dans le brouillon, et ce qui se lit sous une case */
/* les prix se lisent en colonne : l'en-tête au-dessus du chiffre (le « € » après la case, la case « proposé » avant) */
.tf-grille td.tf-cell{text-align:right}
.tf-grille th.tf-ph{padding-right:calc(10px + var(--sp-3))}
.tf-grille td.tf-cell .tf-tog{margin:0 var(--sp-1) 0 0}
.tf-grille .tf-in{width:68px}
.tf-grille tr.tf-l-modif>td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.tf-marge{color:var(--texte-ok)}
.tf-marge.neg,.tf-neg{color:var(--texte-danger)}
/* la barre du brouillon : collée en bas tant qu'il reste des prix à écrire */
.tf-lot{position:sticky; bottom:calc(var(--bas-colle) + var(--sp-3)); z-index:var(--z-collant); display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-4); margin:var(--sp-4) 0 0; padding:var(--sp-3) var(--sp-4); border:1px solid var(--accent); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--ombre-3)}
.tf-lot[hidden]{display:none}
.tf-lot-t{display:flex; min-width:0; flex:1 1 220px}
.tf-lot-t .sub{margin:0}
.tf-lot-g{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-left:auto}
/* l'aperçu du lot (volet) et l'ajustement en masse (fenêtre) */
.tf-lot-resume{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin:0 0 var(--sp-3)}
.tf-lot-go{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--sp-2); margin-top:var(--sp-4)}
/* (la même fenêtre sert à ajuster les grilles d'achat : .ge-aj-*) */
:is(.tf-aj-mode,.ge-aj-mode){margin:var(--sp-3) 0}
:is(.tf-aj-champs,.ge-aj-champs){display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:var(--sp-1) var(--sp-4); margin:0; padding:0; border:0; min-width:0}
:is(.tf-aj-champs,.ge-aj-champs) legend{padding:0}
:is(.tf-aj-champs,.ge-aj-champs) .chk{display:inline-flex; align-items:center; gap:var(--sp-2); width:auto; margin:0}
:is(.tf-aj-apercu,.ge-aj-apercu){margin:var(--sp-3) 0 0; padding:var(--sp-3); border-radius:var(--r-md); background:var(--surface-2)}
:is(.tf-aj-apercu,.ge-aj-apercu):empty{display:none}
:is(.tf-aj-apercu,.ge-aj-apercu) .sub{margin:var(--sp-2) 0 0}
:is(.tf-aj-liste,.ge-aj-liste){list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-1)}
:is(.tf-aj-liste,.ge-aj-liste) li{display:flex; justify-content:space-between; gap:var(--sp-3); font-size:var(--fs-13)}
:is(.tf-aj-liste,.ge-aj-liste) li>span:first-child{min-width:0; overflow-wrap:anywhere}
:is(.tf-aj-liste,.ge-aj-liste) .mono{white-space:nowrap; font-variant-numeric:tabular-nums}
@media (hover:none){
  .tf-head .btn.ico,.tf-selrang .btn.ico{width:var(--h-touch)}
  :is(.tf-aj-mode,.ge-aj-mode) button{min-height:var(--h-touch)}
}
@media (max-width:1040px){
  /* la colonne des tarifs devient une rangée : le sélecteur (groupé, dans le périmètre) et « Nouveau tarif » */
  .tf-side .ch,.tf-head .tf-nom{display:none}   /* le nom du tarif est déjà dans le sélecteur */
  .tf-selrang{display:flex; align-items:center; gap:var(--sp-2)}
  .tf-selrang .tf-selmob{flex:1 1 auto; min-width:0; margin:0}
  .tf-selrang .btn.ico{flex:0 0 auto; padding:0; width:var(--h-md); justify-content:center}
}
@media (max-width:760px){
  .tf-side{padding:var(--sp-3) var(--sp-4)}
  .tf-side .ch{margin-bottom:var(--sp-2)}
  .tf-side .tf-save{display:none}
  .tf-selmob{margin-bottom:0}
  .tf-head{padding-bottom:var(--sp-3); flex-wrap:nowrap}
  .tf-titre-bloc{flex:1 1 0}
  .tf-head .right{margin-left:auto; width:auto; flex-wrap:nowrap}
  .tf-head .btn .tf-lib{display:none}
  .tf-outils{flex-wrap:wrap}
  .tf-outils .spacer,.tf-outils .btn .tf-lib{display:none}
  .tf-outils :is(#tfAjuster,#tfAddRoute){flex:0 0 auto; width:var(--h-touch); padding:0; justify-content:center}
  .tf-outils #tfMap{flex:1 1 100%; justify-content:center}
  /* une route = une ligne : la destination, puis l'aller et le retour ; les gestes dans « … » */
  .tf-dt.tf-grille{display:block; min-width:0; width:100%}
  .tf-dt.tf-grille thead,.tf-dt.tf-grille tbody{display:block}
  .tf-dt.tf-grille tr{display:grid; grid-template-columns:minmax(0,1fr) 84px 84px; column-gap:var(--sp-2); row-gap:var(--sp-1); align-items:start; padding:var(--sp-2) 0; border-bottom:1px solid var(--border)}
  .tf-dt.tf-grille th,.tf-dt.tf-grille td{display:block; padding:0; border:0; min-width:0; max-width:none; white-space:normal; background:none; box-shadow:none}
  .tf-dt.tf-grille :is(th,td).ck{display:none}
  .tf-dt.tf-grille thead{position:sticky; top:var(--haut-barre); z-index:var(--z-collant); background:var(--surface)}
  .tf-dt.tf-grille thead tr{border-bottom-color:var(--border-strong)}
  .tf-dt.tf-grille thead th{position:static; font-size:var(--fs-12); font-weight:500; color:var(--muted)}
  .tf-dt.tf-grille .tf-rtete{align-items:center; gap:var(--sp-1)}
  .tf-dt.tf-grille .tf-rtete>b{font-size:var(--fs-14); line-height:1.3}
  .tf-dt.tf-grille .tf-rtete .tf-act{margin:0 0 0 auto}
  .tf-dt.tf-grille .tf-inwrap{display:flex; width:100%}
  .tf-dt.tf-grille .tf-in{width:100%; min-width:0; min-height:var(--h-touch); border-color:var(--border); background:var(--surface)}
  .tf-dt.tf-grille .tf-inwrap .unit,.tf-dt.tf-grille .tf-tog,.tf-dt.tf-grille th.mkh{display:none}
  .tf-dt.tf-grille .mk{white-space:normal; margin-top:var(--sp-1)}
  .tf-dt.tf-grille td.tf-route{align-self:center}
  .tf-dt.tf-grille.tf-3prix tr{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tf-dt.tf-grille.tf-3prix :is(th,td).tf-route{grid-column:1/-1}
  .tf-dt.tf-grille td.mkcol{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2)}
  .tf-dt.tf-grille td.mkcol .apply{margin:0}
  .tf-dt.tf-grille tr.gf-ligne{display:block; padding:0 0 var(--sp-2)}
  .tf-dt.tf-grille tr:has(+tr.gf-ligne){border-bottom:0}
  .tf-dt.tf-grille tbody tr:hover>td{background:none}
  .tf-lot{padding:var(--sp-3)}
  .tf-lot-g{width:100%; margin-left:0; flex-wrap:nowrap}
  .tf-lot-g .btn{flex:1 1 auto; justify-content:center}
  /* le marché trip.com / Mozio : les filtres sur une rangée qui défile, les réglages du relevé en deux rangées */
  .tf-carte .mkbar{margin-top:var(--sp-2); padding-top:var(--sp-3)}
  .tf-carte .mkbar .tf-long{display:none}
  .tf-carte .mkbar .mkchips{flex-wrap:nowrap; overflow-x:auto; max-width:100%; scrollbar-width:none}
  .tf-carte .mkbar .mkchip{flex:0 0 auto; min-height:var(--h-touch)}
  .tf-carte .mkbar .ctrls>label.marge:first-child{flex:1 1 100%}
  .tf-carte .mkbar #tfRelever{flex:1 1 auto; justify-content:center}
  .tf-carte .mkbar #tfRecurrence{flex:0 0 auto; width:var(--h-touch); padding:0; justify-content:center}
  .tf-carte .mkbar #tfRecurrence .tf-lib,.tf-carte .mkbar #tfApplySel{display:none}
  .tf-carte .mkbar .ctrls .applyGrp{flex:1 1 100%; flex-wrap:nowrap}
  .tf-carte .mkbar .ctrls .applyGrp .sel{flex:1 1 auto; min-width:0}
  .tf-plus{flex-wrap:wrap}
  .tf-form .form-row.cols3{grid-template-columns:minmax(0,1fr)}
  .tf-form-pied .btn{flex:1 1 auto; justify-content:center}
  .tf-form-pied .btn.tf-danger{flex-basis:100%; margin-left:0}
}
/* ---------- Options et Zones : une carte par sujet, un onglet = une lecture, formulaires dans le volet ---------- */
.geo-carte,.md-carte{margin:0 0 var(--sp-4)}
.geo-intro,.md-intro{margin:0 0 var(--sp-3); max-width:92ch}
.geo-dels td:first-child{white-space:normal}
.oz-form .field{margin-bottom:var(--sp-3)}
.oz-form .field input:not([type=checkbox]),.oz-form .field select,.oz-form .field textarea{width:100%; min-width:0}
.oz-form .dt-h{margin:var(--sp-2) 0}
.oz-cases{display:flex; flex-direction:column; gap:var(--sp-2); margin:0 0 var(--sp-3)}
.oz-form-pied{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin:var(--sp-4) 0 0}
.oz-form-pied .btn.oz-danger{margin-left:auto; color:var(--texte-danger)}
.oz-cp{margin:0 0 var(--sp-3)}
.oz-ville-sup{display:flex; align-items:flex-end; gap:var(--sp-2)}
.oz-ville-sup .field{flex:1 1 auto}
.oz-plus{margin:var(--sp-3) 0 0; padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md)}
.oz-plus summary{cursor:pointer; color:var(--ink-2); font-size:var(--fs-13); padding:var(--sp-1) 0}
.oz-plus[open] summary{margin-bottom:var(--sp-3)}
.oz-cercle{grid-template-columns:repeat(3,minmax(0,1fr))}
.oz-apercu{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2); margin:var(--sp-3) 0 0}
.oz-apercu-r{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3)}
.oz-err{color:var(--texte-danger)}
.zones-onglets{flex-wrap:nowrap; max-width:100%; overflow-x:auto; scrollbar-width:none}
.zones-onglets button{flex:0 0 auto; white-space:nowrap}
.oz-zone{display:inline-flex; align-items:center; gap:var(--sp-2)}
.oz-mini{flex:none}
.oz-mini path{fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.2; stroke-linejoin:round}
.oz-apercu-r .oz-mini{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm)}
/* Régions & villes */
.geo-pile{display:grid; gap:var(--sp-4)}
.geo-pile>.card{margin:0}
.geo-region{margin-top:var(--sp-3)}
.geo-region .dt-h{margin:0 0 var(--sp-2)}
.geo-villes{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.geo-ville{display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); padding:var(--sp-1) var(--sp-3); min-height:var(--h-sm); border:1px solid var(--border); border-radius:var(--r-pilule); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-13); cursor:pointer; text-align:left}
.geo-ville:hover:not(:disabled){border-color:var(--accent); background:var(--accent-soft)}
.geo-ville:disabled{cursor:default}
.geo-ville-n{font-weight:500}
.geo-ville .muted{font-size:var(--fs-12)}
.geo-ajout{margin:var(--sp-4) 0 0; border-top:1px solid var(--border); padding-top:var(--sp-3)}
.geo-ajout summary{display:inline-flex; align-items:center; gap:var(--sp-1); cursor:pointer; color:var(--texte-accent); font-weight:500; min-height:var(--h-sm)}
.geo-ajout summary .svgi{width:15px; height:15px}
.geo-form{margin-top:var(--sp-3)}
.geo-form .field{margin-bottom:var(--sp-3)}
.geo-form .go{margin-top:var(--sp-3)}
/* Pays */
.md-ouvrir{margin:var(--sp-4) 0 var(--sp-2)}
.md-outils{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); margin:0 0 var(--sp-2)}
.md-outils .sub{margin:0}
.md-table td:first-child{white-space:normal}
.md-plus{grid-column:1/-1; margin:0}
@media (hover:none){ .geo-ville{min-height:var(--h-touch)} }
@media (max-width:760px){
  .oz-cercle{grid-template-columns:minmax(0,1fr)}
  .geo-carte .ch .right{flex-wrap:nowrap}
  .md-outils .search{flex:1 1 100%}
  .md-carte .mdgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oz-form-pied .btn{flex:1 1 auto; justify-content:center}
  .oz-form-pied .btn.oz-danger{flex-basis:100%; margin-left:0}
}
/* ---------- Majorations : les règles d'abord, l'analyse repliée, des graphiques lisibles ---------- */
.sc-form .field{margin-bottom:var(--sp-3)}
.sc-form .field input:not([type=checkbox]):not([type=radio]),.sc-form .field select{width:100%; min-width:0}
.sc-fee{display:flex; align-items:center; gap:var(--sp-2)}
.sc-fee input{flex:1 1 auto}
/* les choix du formulaire (répétition, jours) passent à la ligne au lieu de sortir du volet */
.sc-form .seg{flex-wrap:wrap; gap:var(--sp-1); padding:0; background:none}
.sc-form .seg button{border:1px solid var(--border); min-height:var(--h-sm)}
.sc-form .seg button.on{border-color:var(--accent); background:var(--accent-soft); color:var(--ink)}
.sc-fee .seg{flex:0 0 auto; flex-wrap:nowrap}
.scv-carte .rule .pc{white-space:nowrap}
.sc-form [hidden],.oz-form [hidden]{display:none}
.sc-fs{display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-3); margin:0 0 var(--sp-3); padding:0; border:0; min-width:0}
.sc-fs legend{padding:0}
#scZones{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3)}
.sc-avance{margin:var(--sp-2) 0 0; padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md)}
.sc-avance summary{cursor:pointer; color:var(--ink-2); font-size:var(--fs-13); padding:var(--sp-1) 0}
.sc-avance[open] summary{margin-bottom:var(--sp-2)}
.sc-pal-t{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); margin:var(--sp-3) 0 var(--sp-2)}
.form-row.sc-pal{grid-template-columns:repeat(4,minmax(0,1fr)) auto auto; align-items:end; gap:var(--sp-2)}
.sc-pal .field{margin:0}
.sc-form-pied{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin:var(--sp-4) 0 0}
.sc-form-pied .btn.sc-del{margin-left:auto; color:var(--texte-danger)}
.scv-carte{margin:0 0 var(--sp-4)}
.scv-carte>summary{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-1) var(--sp-3); cursor:pointer; list-style:none; min-height:var(--h-sm)}
.scv-carte>summary::-webkit-details-marker{display:none}
.scv-carte>summary .sub{margin:0}
.scv-carte[open]>summary{margin-bottom:var(--sp-3)}
.scv-titre{font-size:var(--fs-16); font-weight:600; color:var(--ink)}
.scv-voir,.scv-replier{margin-left:auto; font-size:var(--fs-13)}
.scv-carte[open] .scv-voir,.scv-carte:not([open]) .scv-replier{display:none}
.scv-graphe{display:grid; grid-template-columns:52px minmax(0,1fr); margin:var(--sp-4) 0 var(--sp-1)}
.scv-echelle{position:relative; height:104px}
.scv-echelle span{position:absolute; right:var(--sp-2); transform:translateY(50%); font-size:var(--fs-11); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.scv-zone{position:relative; height:104px; border-bottom:1px solid var(--border-strong); background-image:linear-gradient(to top,var(--border) 1px,transparent 1px); background-size:100% 50%}
.scv-fond{position:absolute; inset:0; display:grid; gap:3px; padding:0 2px}
.scv-fond .nuit{background:var(--surface-2)}
.scv-graphe .bars{position:relative; height:100%; margin:0}
.scv-graphe .bars .b,.scv-graphe .bars .b.n{background:color-mix(in srgb,var(--accent) 55%,transparent); border-top-color:var(--accent)}
.scv-graphe .bars .b:hover{background:var(--accent)}
.scv-regle{position:absolute; left:0; right:0; height:0; border-top:2px dashed var(--ink-2)}
.scv-regle span{position:absolute; right:0; bottom:var(--sp-1); padding:0 var(--sp-1); background:var(--surface); color:var(--ink-2); font-size:var(--fs-11); white-space:nowrap}
.scv-graphe+.barsx{margin-left:52px}
.scv-legende{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-4); margin:var(--sp-2) 0 0; font-size:var(--fs-12); color:var(--muted)}
.scv-legende span{display:inline-flex; align-items:center; gap:var(--sp-1)}
.scv-legende i{display:inline-block; width:12px; height:10px}
.scv-legende .scv-c-barre{background:color-mix(in srgb,var(--accent) 55%,transparent); border-top:2px solid var(--accent)}
.scv-legende .scv-c-nuit{background:var(--surface-2); border:1px solid var(--border)}
.scv-legende .scv-c-regle{height:0; border-top:2px dashed var(--ink-2)}
.scv-prog{margin-top:var(--sp-4)}
.scv-note{margin-top:var(--sp-2)}
@media (max-width:760px){
  .form-row.sc-pal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc-form-pied .btn{flex:1 1 auto; justify-content:center}
  .sc-form-pied .btn.sc-del{flex-basis:100%; margin-left:0}
  .scv-graphe{grid-template-columns:40px minmax(0,1fr)}
  .scv-graphe+.barsx{margin-left:40px}
  .scv-echelle,.scv-zone{height:84px}
  .scv-outils .seg{flex-wrap:nowrap}
}
/* ---------- Simulateur : les dernières simulations en tête ; au téléphone, le rappel du trajet reste en haut du résultat ---------- */
.sim-recents{display:flex; gap:var(--sp-2); margin:0 0 var(--sp-3); overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.sim-recent{flex:0 0 auto; max-width:260px; min-height:var(--h-sm); padding:var(--sp-1) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); color:var(--ink-2); font:inherit; font-size:var(--fs-12); line-height:1.35; text-align:left; white-space:normal; cursor:pointer}
.sim-recent:hover{border-color:var(--border-strong); color:var(--ink)}
.sim-rappel{display:none}
@media (max-width:760px){
  .sim-recent{min-height:var(--h-touch); max-width:220px}
  .sim-rappel{position:sticky; top:var(--haut-barre); z-index:var(--z-collant); display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-3); padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--ombre-2)}
  .sim-rappel-t{flex:1 1 auto; min-width:0; font-size:var(--fs-13); font-weight:600; overflow-wrap:anywhere}
  .sim-rappel .btn{flex:0 0 auto; min-height:var(--h-touch)}
}
/* ---------- Membres : le tableau tient dans sa carte (le membre et son rôle passent à la ligne) ---------- */
/* ---------- Membres › API B2B : une carte, les clés en tableau (cartes au téléphone), la création repliée ---------- */
.api-carte .api-intro{margin:0 0 var(--sp-3); max-width:92ch}
.api-table td:first-child,.api-table td:nth-child(3){white-space:normal}
.api-nouvelle{margin:var(--sp-3) 0 0; border:1px solid var(--border); border-radius:var(--r-md)}
.api-nouvelle>summary{display:flex; align-items:center; gap:var(--sp-2); min-height:var(--h-sm); padding:var(--sp-2) var(--sp-3); cursor:pointer; list-style:none; font-size:var(--fs-13); font-weight:600; color:var(--ink-2)}
.api-nouvelle>summary::-webkit-details-marker{display:none}
.api-nouvelle[open]>summary{border-bottom:1px solid var(--border)}
.api-form{padding:var(--sp-3)}
.form-row.api-champs{grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); align-items:end}
.api-champs .field{margin:0}
.api-champs .field .sel{width:100%; min-width:0}
.api-portees{display:flex; flex-direction:row; flex-wrap:wrap; gap:var(--sp-1) var(--sp-4); margin:var(--sp-3) 0 0; padding:0; border:0; min-width:0}
.api-portees legend{padding:0}
.api-portees .chk{display:inline-flex; align-items:center; gap:var(--sp-2); width:auto; margin:0}
.api-essai,.api-url{overflow-wrap:anywhere}
@media (max-width:760px){
  .api-nouvelle>summary{min-height:var(--h-touch)}
}
/* ---------- Réglages › Prix & tarification : deux liens côte à côte dans « Réglés ailleurs » ---------- */
.rg-ailleurs-g{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--sp-2)}
/* les cases des garde-fous s'alignent en bas quand un libellé passe à la ligne (« Plafond (× prix du marché) ») */
.gf-defaut label{justify-content:space-between}
/* ---------- Achat et Mes tarifs : trouver un trajet, ajuster le brouillon, exporter ; une ligne compacte au téléphone ---------- */
.ge-outils{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3)}
.ge-outils .ge-q{flex:1 1 220px; max-width:320px; min-width:0}
.ge-vehs{flex:0 1 auto; max-width:100%; overflow-x:auto; scrollbar-width:none}
.ge-vehs button{flex:0 0 auto; white-space:nowrap}
.ge-compte{margin:0; font-variant-numeric:tabular-nums; white-space:nowrap}
.ge-compte:empty{display:none}
.ge-outils-g{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-left:auto}
.ge-trajets[hidden],.ge-aucun[hidden],.ge-plus[hidden],#geAjArrF[hidden]{display:none}
table.ge-table tr[hidden]{display:none}
.ge-plus{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2)}
#gaCorps .ge-plus .sub,#mtCorps .ge-plus .sub,#gaCorps p.ge-cols,#mtCorps p.ge-cols{margin:0}
/* au bureau : des rangées serrées (une case de 32 px), les montants à droite sous leur en-tête */
@media (min-width:761px){
  table.ge-table td{padding-top:var(--sp-1); padding-bottom:var(--sp-1)}
  table.ge-table td.ge-gestes{width:1%; white-space:nowrap}
}
/* le pied colle au bas de l'écran tant que des prix attendent « Enregistrer » */
.ge-pied.ge-pied-actif{position:sticky; bottom:calc(var(--bas-colle) + var(--sp-3)); z-index:var(--z-collant); padding:var(--sp-2) var(--sp-3); border:1px solid var(--accent); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--ombre-3)}
/* les règles : les actions de ligne à droite, sur deux rangées */
.ge-regles li>.ra{grid-column:2; grid-row:1/3}
/* « vide » est aussi l'état vide du socle (colonne centrée, grand retrait) : une puce à zéro (« 0 ajouté ») reste une puce */
.ge-puces{align-items:center}
.ge-puces .ge-puce.vide{flex-direction:row; gap:var(--sp-1); padding:2px var(--sp-2); text-align:left}
.ge-puces .ge-puce.vide b{font-size:inherit; color:var(--muted)}
.ge-aj-champs+.sub{margin:var(--sp-2) 0 0}
@media (max-width:760px){
  .ge-outils .ge-q{flex:1 1 100%; max-width:none}
  .ge-vehs{flex:1 1 100%; flex-wrap:nowrap}
  .ge-vehs button{min-height:var(--h-touch)}
  .ge-outils-g .btn{min-height:var(--h-touch)}
  .ge-outils .ge-long{display:none}
  .ge-plus .btn{flex:1 1 100%; justify-content:center; min-height:var(--h-touch)}
  /* un trajet : « Départ → Arrivée » en titre ; le véhicule et « … » ; puis ses prix côte à côte.
     Les deux sauts de rangée sont les pseudo-éléments de la ligne (ordre : lieux, saut, véhicule et « … », saut, prix). */
  table.ge-table tr{display:flex; flex-wrap:wrap; align-items:center; column-gap:var(--sp-2); row-gap:0; padding:var(--sp-3) 0}
  table.ge-table tr::before,table.ge-table tr::after{content:""; flex:0 0 100%; height:0}
  table.ge-table tr::before{order:-2}
  table.ge-table tr::after{order:0}
  table.ge-table td.ge-lieu{order:-3; flex:0 1 auto; max-width:100%; min-width:0; font-size:var(--fs-14); font-weight:600; color:var(--ink); overflow-wrap:anywhere}
  table.ge-table td.ge-lieu::before,table.ge-table td.ge-veh::before{display:none}
  table.ge-table td.ge-lieu[data-l="Départ"]::after{content:"→"; margin-left:var(--sp-2); font-weight:400; color:var(--muted)}
  table.ge-table td.ge-veh{order:-1; flex:1 1 auto; margin-top:var(--sp-1); font-size:var(--fs-13); color:var(--muted)}
  table.ge-table td.ge-gestes{order:-1; position:static; margin-left:auto; width:auto}
  table.ge-table td.ge-n{order:1; flex:1 1 0; align-self:flex-start; margin-top:var(--sp-2)}
  .ge-table .sel.ge-num{min-height:var(--h-touch); padding-left:var(--sp-1); padding-right:var(--sp-2)}
  .ge-pied.ge-pied-actif{padding:var(--sp-2)}
  .ge-pied .sub{flex:1 1 100%}
  .ge-pied .btn{flex:1 1 0; justify-content:center; min-height:var(--h-touch)}
}
/* ---- (fin V92 — REVENUS ET ADMINISTRATION) ---- */
/* ---------- V93.6 — CHAUFFEURS › CANDIDATURES : une carte par candidature, la fiche en sections ---------- */
.cd-decla{display:flex; flex-wrap:wrap; gap:var(--sp-1)}
.cd-dec{display:inline-flex; align-items:center; gap:3px; padding:1px var(--sp-2); border-radius:var(--r-pilule); font-size:var(--fs-11); font-weight:500; line-height:18px}
.cd-dec .svgi{width:11px; height:11px}
.cd-dec.ok{background:var(--fond-ok); color:var(--texte-ok)}
.cd-dec.ko{background:var(--fond-alerte); color:var(--texte-alerte)}
/* la fiche */
.cd-conf{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-1)}
.cd-conf li{display:flex; align-items:flex-start; gap:var(--sp-2); font-size:var(--fs-13)}
.cd-conf li .svgi{flex:none; width:15px; height:15px; margin-top:2px}
.cd-conf li.ok .svgi{color:var(--point-ok)}
.cd-conf li.ko{color:var(--ink-2)}
.cd-conf li.ko .svgi{color:var(--point-alerte)}
.cd-puces{display:inline-flex; flex-wrap:wrap; gap:var(--sp-1)}
.cd-puce{display:inline-block; padding:1px var(--sp-2); border:1px solid var(--border); border-radius:var(--r-pilule); background:var(--surface-3); font-size:var(--fs-12)}
.cd-citation{margin:0; padding:var(--sp-2) var(--sp-3); border-left:3px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface-3); font-size:var(--fs-13); white-space:pre-wrap; overflow-wrap:anywhere}
.cd-note{width:100%; min-height:72px; padding:var(--sp-2) var(--sp-3); border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-13); resize:vertical}
.cd-note-go{display:flex; justify-content:flex-end; gap:var(--sp-2)}
@media (max-width:760px){
  /* le statut : cinq choix sur une rangée (390 px) */
  /* le geste d'après : la phrase, puis le bouton en pleine largeur */
  .cd-note-go .btn{min-height:var(--h-touch)}
  /* deux rangées de puces, chacune sur une ligne qui défile (plus de colonne de puces sur toute la hauteur) */
}
/* ---- (fin V93.6 — CANDIDATURES) ---- */

/* ================= V93.9 — ORDINATEUR : LES ÉCRANS DU QUOTIDIEN, DE 1024 À 1512 PX =================
   youcef, 01/10/2026 (« Ordinateur : finition ») : rien ne défile plus de côté entre 1024 et 1512 px, et rien d'utile n'est
   coupé — un montant, une date, un onglet. Mesuré écran par écran (Playwright, de 1024 à 1512 px, avec des données). */

/* Tableau de bord — « 10 prochaines réservations » : de 1041 à 1365 px (deux colonnes, 480 à 650 px pour le tableau), la
   référence passe sous la date, comme au téléphone ; le tableau ne défile plus (119 px de trop à 1100 px) */
@media (min-width:1041px) and (max-width:1365px){
  .dt.ovnext tr>:first-child:not([colspan]){display:none}
  .dt.ovnext .ovn-ref-m{display:block}
}

/* Devis — la liste (devis.js) : le trajet en quelques mots ne s'étire plus, validité et suivi partagent leur colonne ;
   de 761 à 1279 px, les devis se lisent en cartes, deux ou trois de front (la liste défilait de 158 à 570 px) */

/* Clients — la liste tient sans défiler (54 à 394 px de trop sous 1440 px, 6 px à 1512 px avec les vraies fiches) :
   le client, le contact, « quand » et les canaux passent à la ligne (les chiffres jamais) ; jusqu'à 1440 px, le pays se
   dit par son code (le nom au survol) et les cellules se resserrent ; de 761 à 1279 px, les clients se lisent en cartes */
@media (min-width:761px) and (max-width:1279px){
  .card.pad0:has(>.tablewrap>.ch-table.crm-table){display:none}
}

/* Finances › Résultat — de 1041 à 1365 px, le compte de résultat et la courbe s'empilent : la colonne « Écart » sortait de
   sa carte (58 px à 1100 px). « Détail des courses » : le trajet tient sur deux lignes ; de 1041 à 1279 px, le CA brut et
   la commission se retirent (le compte de résultat les donne, l'export aussi) — CA net, paie et marge restent */
@media (min-width:1041px) and (max-width:1365px){
  .fi-grille{grid-template-columns:minmax(0,1fr)}
}

/* Analyse › Site web — l'entonnoir par canal : les en-têtes et les canaux passent à la ligne (« Coordonnées validées »
   faisait 157 px) ; le tableau défilait sous 1513 px */
#audMount .aud-ent+.tablewrap th{white-space:normal; vertical-align:bottom}
#audMount .aud-ent+.tablewrap td:first-child{white-space:normal; overflow-wrap:anywhere; min-width:120px}
@media (min-width:761px) and (max-width:1365px){ #audMount .aud-ent+.tablewrap :is(th,td){padding-left:var(--sp-2); padding-right:var(--sp-2)} }

/* Dispatch — les familles de véhicules (« Toutes · Berline · Premium VAN… ») ne se cachent plus dans un défilement de 74 px
   (1180 px) : jusqu'à 1512 px, les outils (Filtres, Vues, Groupes) passent à la ligne s'il le faut */

/* ================= V93.10 — OUVERTURE INSTANTANÉE (photo.js) =================
   youcef, 01/10/2026 (« Ouverture instantanée ») : la console s'ouvre sur les dernières données connues. Si les fraîches
   tardent, de quand datent celles qu'on voit s'écrit en petit à côté du titre (sous le titre au téléphone), avec un point
   qui bat ; il part dès que les fraîches sont là. */
#topbar .photo-tag{display:inline-flex; align-items:center; gap:var(--sp-1); min-width:0; max-width:100%; overflow:hidden;
  white-space:nowrap; text-overflow:ellipsis; font-size:var(--fs-12); font-weight:500; line-height:1.3; color:var(--muted); animation:fade .2s var(--ease)}
#topbar .photo-tag[hidden]{display:none}
#topbar .photo-tag::before{content:''; flex:none; width:6px; height:6px; border-radius:var(--r-rond); background:var(--warn); animation:v93-photo 1.4s var(--ease) infinite}
@keyframes v93-photo{0%,100%{opacity:1}50%{opacity:.35}}
@media (max-width:760px){
  #topbar .titlebox:has(>.photo-tag:not([hidden])){flex-direction:column; align-items:flex-start; justify-content:center; gap:0}
  #topbar .titlebox:has(>.photo-tag:not([hidden])) h2{line-height:var(--lh-titre)}
  #topbar .photo-tag .pt-suite{display:none}
}
@media (prefers-reduced-motion:reduce){ #topbar .photo-tag::before{animation:none} }

/* ================= V93.11 — L'ATTENTE DE PAIEMENT N'EST PAS « À ASSIGNER » =================
   youcef, 01/10/2026 (« Ok corrige ») : une réservation qui attend son paiement (devis, réservation du site) dit « Attente
   paiement » (ambre, pas rouge), son geste est le devis (« Paiement »), et elle n'est plus au Dispatch ni dans
   « Non assignées » : elle y arrive une fois payée. */
.bkc .drvbox.none.attente{border-color:color-mix(in srgb,var(--warn) 40%,var(--border)); color:var(--texte-alerte)}
.bkc .drvbox.none.attente small{color:var(--muted)}

/* ================= V93.12 — LE SITE SOUS SURVEILLANCE (sentinelle.js) =================
   youcef, 01/10/2026 (« Le site sous surveillance ») : la ligne d'état en tête de la carte « Le site » (un bouton : le
   volet du détail), les pastilles d'état, le volet (chaque contrôle, les pannes de la semaine, « Vérifier maintenant »). */
#ovSentinelle[hidden]{display:none}
.ovsent{display:flex; align-items:center; gap:var(--sp-2); width:100%; min-height:44px; margin:var(--sp-1) 0 var(--sp-2); padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-3); color:var(--ink-2); font:inherit; font-size:var(--fs-13); line-height:1.35;
  text-align:left; cursor:pointer; transition:border-color .15s var(--ease), background .15s var(--ease)}
.ovsent:hover{border-color:var(--border-strong)}
.ovsent .ovsent-t{flex:1; min-width:0}
.ovsent .ovsent-t b{font-weight:600; color:var(--ink)}
.ovsent>svg{flex:none; width:14px; height:14px; color:var(--faint)}
.ovsent-dot{flex:none; width:8px; height:8px; border-radius:var(--r-rond); background:var(--faint)}
.ovsent.ok .ovsent-dot{background:var(--good)}
.ovsent.doute .ovsent-dot{background:var(--warn)}
.ovsent.panne{border-color:color-mix(in srgb,var(--bad) 45%,var(--border)); background:color-mix(in srgb,var(--bad) 7%,var(--surface))}
.ovsent.panne .ovsent-dot{background:var(--bad); box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 18%,transparent); animation:v93-photo 1.4s var(--ease) infinite}
.ovsent.panne .ovsent-t b{color:var(--texte-danger)}
.sent-pill{padding:2px var(--sp-2); border-radius:var(--r-pilule); font-size:var(--fs-12); font-weight:600; background:var(--surface-2); color:var(--ink-2)}
.sent-pill.ok{background:color-mix(in srgb,var(--good) 14%,transparent); color:var(--texte-ok)}
.sent-pill.doute{background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--texte-alerte)}
.sent-pill.panne{background:color-mix(in srgb,var(--bad) 14%,transparent); color:var(--texte-danger)}
.sent-tete{font-size:var(--fs-14); font-weight:600; color:var(--ink)}
.sent-tete.panne{color:var(--texte-danger)} .sent-tete.doute{color:var(--texte-alerte)}
.sent-sous{margin-top:calc(var(--sp-1) * -1); font-size:var(--fs-12); color:var(--muted)}
.sent-liste,.sent-pannes{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.sent-liste li{display:flex; align-items:flex-start; gap:var(--sp-2); padding:var(--sp-2) 0; border-top:1px solid var(--border)}
.sent-liste li:first-child{border-top:0}
.sent-ic{flex:none; display:flex; width:18px; height:18px; margin-top:1px}
.sent-ic svg{width:16px; height:16px}
.sent-liste li.ok .sent-ic{color:var(--texte-ok)} .sent-liste li.ko .sent-ic{color:var(--texte-danger)}
.sent-liste li.avert .sent-ic{color:var(--texte-alerte)} .sent-liste li.nv .sent-ic{color:var(--faint)}
.sent-tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.sent-tx b{font-size:var(--fs-13); font-weight:600; color:var(--ink)}
.sent-tx small{font-size:var(--fs-12); color:var(--muted); overflow-wrap:anywhere}
.sent-liste li.ko .sent-tx small{color:var(--texte-danger)}
.sent-ms{flex:none; font-size:var(--fs-12); color:var(--faint); font-variant-numeric:tabular-nums; margin-top:2px}
.sent-lien{flex:none; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; margin:-6px -6px -6px 0; border-radius:var(--r-sm); color:var(--muted)}
.sent-lien:hover{background:var(--surface-2); color:var(--ink)}
.sent-lien svg{width:14px; height:14px}
.sent-h{margin:var(--sp-2) 0 0; font-size:var(--fs-13); font-weight:600; color:var(--ink)}
.sent-pannes li{display:flex; flex-direction:column; gap:2px; padding:var(--sp-2) 0; border-top:1px solid var(--border); font-size:var(--fs-13); color:var(--ink-2)}
.sent-pannes li:first-child{border-top:0}
.sent-pannes small{font-size:var(--fs-12); color:var(--muted)}
.sent-vide{font-size:var(--fs-13); color:var(--muted)}
.sent-go{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.sent-aide{margin:0; font-size:var(--fs-12); color:var(--faint); line-height:1.45}
@media (max-width:760px){ .sent-lien{width:44px; height:44px; margin:-12px -10px -12px 0} .sent-go .btn{min-height:44px} }
@media (prefers-reduced-motion:reduce){ .ovsent.panne .ovsent-dot{animation:none} }

/* ================= V93.12 — TÉLÉPHONE : FINITION =================
   youcef, 01/10/2026 (« Téléphone : finition ») : au téléphone, le tableau de bord et Finances faisaient ~5 000 px (« Le
   site » tout en bas, « 10 prochaines » à 1 600 px, « Détail des courses » à 2 900 px) et une centaine de boutons et de
   liens étaient trop petits pour un doigt (l'œil « vu » 14 × 17, les liens téléphone 13 px de haut, les cases 20 × 20,
   les boutons d'icône 32 px de large). Mesuré écran par écran (Playwright, 360 / 390 / 430 px). La disposition reste
   celle qu'il connaît : rien ne change de place, ce qui est long se replie et ce qui est petit grandit. */

/* Une carte qui se replie (composants.js, `repliable`) : au téléphone, l'en-tête dit son chiffre clé et l'ouvre */
.rp-btn{display:none}
@media (max-width:760px){
  .repliable>.ch .rp-btn{display:flex; flex:1 1 auto; align-items:center; justify-content:flex-end; gap:var(--sp-2); min-width:0; min-height:var(--h-touch);
    margin:calc(var(--sp-2) * -1) 0; padding:0; border:0; background:none; font:inherit; color:var(--muted); text-align:right; cursor:pointer}
  .repliable>.ch .rp-btn svg{flex:none; width:16px; height:16px; color:var(--faint); transition:transform .2s var(--ease)}
  .repliable:not(.repli)>.ch .rp-btn svg{transform:rotate(90deg)}
  .rp-resume{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-13); font-weight:600; color:var(--ink)}
  .repliable:not(.repli) .rp-resume{display:none}
  .repliable.repli>.ch{flex-wrap:nowrap; margin-bottom:0}
  /* V93.21 — le titre ne rétrécit pas sous son texte (« Le point de la semaine » passait sous son résumé, à 390 px) :
     c'est le résumé qui s'abrège (…) ; un titre très long s'abrège lui-même au-delà de 70 % de la ligne */
  .card.repliable>.ch h3{white-space:nowrap; flex:none; max-width:70%; overflow:hidden; text-overflow:ellipsis}
  .repliable.repli>.ch .right,.repliable.repli>.ch .cnt,.repliable.repli>.ch .ch-aide{display:none}
  .repliable.repli>.rp-corps{display:none}
}
@media (prefers-reduced-motion:reduce){ .repliable>.ch .rp-btn svg{transition:none} }

/* Tableau de bord — « 10 prochaines réservations » : au téléphone, une course = deux lignes (l'heure, la référence et le
   statut ; le sens et l'adresse sur deux lignes au plus, puis le véhicule et le vol) au lieu de 160 px dans un tableau de
   trois colonnes qui coupait le statut ; les 5 premières, puis « Voir les 10 » */
.ovnext-plus{display:none}
@media (max-width:640px){
  .dt.ovnext thead{display:none}
  .dt.ovnext tbody tr.clickable{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"quand statut" "adr adr"; column-gap:var(--sp-3); row-gap:var(--sp-1);
    padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--border)}
  .dt.ovnext tbody tr.clickable:first-child{border-top:0}
  .dt.ovnext tbody tr.clickable>td{display:block; padding:0; border:0; min-width:0}
  .dt.ovnext tbody tr.clickable>td:nth-child(1),.dt.ovnext tbody tr.clickable>td:nth-child(4){display:none}
  .dt.ovnext tbody tr.clickable>td:nth-child(2){grid-area:quand; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--sp-2)}
  .dt.ovnext tbody tr.clickable>td:nth-child(2) .rowsub:not(.ovn-ref-m){display:none}
  .dt.ovnext tbody tr.clickable>td:nth-child(2) .ovn-ref-m{display:block; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .dt.ovnext tbody tr.clickable>td:nth-child(3){grid-area:adr}
  .dt.ovnext tbody tr.clickable>td:nth-child(3) .sens{display:inline-flex; margin-right:var(--sp-1)}
  .dt.ovnext tbody tr.clickable>td:nth-child(3) .adr{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:none; margin-top:2px}
  .dt.ovnext tbody tr.clickable>td:nth-child(5){grid-area:statut; align-self:start; text-align:right}
  .dt.ovnext .ovx .vol-g .vol-copie{min-height:0}   /* 22 px dessinés, 44 px au doigt (::after) : la ligne garde sa hauteur */
  .card:not(.ovnext-tout) .dt.ovnext tbody tr.clickable:nth-child(n+6){display:none}
  .ovnext-plus:not([hidden]){display:flex; justify-content:center; width:calc(100% - var(--sp-4) * 2); min-height:var(--h-touch); margin:var(--sp-1) var(--sp-4) var(--sp-4)}
  .card.pad0:has(.dt.ovnext) .tablewrap{overflow:visible}
}

/* Des cibles pour un doigt (44 px) — boutons d'icône, « vu », cases, puces de filtre, liens courts */
@media (max-width:760px){
  :is(.toolrow,.atact,.dvc-act,.dr-a) .btn.ghost.sm,.dr-a .qab,.dd .dd-btn,.nvswap{min-width:var(--h-touch); min-height:var(--h-touch)}
  .dr-a .btn.sm{min-height:var(--h-touch)}
  #s-bookings .seg>button{min-width:var(--h-touch); min-height:var(--h-touch)}
  .atrow .atact .copybtn{display:inline-flex; align-items:center; justify-content:center; min-width:var(--h-touch); min-height:var(--h-touch); margin-left:0}
  .evt-chip.evt-plus{min-height:var(--h-lg)}
  /* la case garde son dessin, sa zone de toucher fait 44 px */
  :is(.bkl-1 label.ck,label.dspck,.fchip .fx,.vol-g .vol-copie){position:relative}
  :is(.bkl-1 label.ck,label.dspck)::after{content:''; position:absolute; inset:-12px}
  .vol-g .vol-copie::after{content:''; position:absolute; inset:-11px -11px}
  /* un lien court dans une ligne (un chiffre qui ouvre son classement, une référence, « Ajouter une charge ») */
  :is(button.kpi-var.rangbtn,#s-finances .lnk,#s-paiements .lnk,#s-drivers .lnk,.dsp-sg .lnk,.vol-g .vol-lien){position:relative}
  :is(button.kpi-var.rangbtn,#s-finances .lnk,#s-paiements .lnk,#s-drivers .lnk,.dsp-sg .lnk,.vol-g .vol-lien)::after{content:''; position:absolute; inset:-11px -4px}
  /* les numéros de téléphone écrits dans une carte de devis */
  #s-devis a[href^="tel:"]:not(.btn){align-items:center}
  /* les légendes des courbes : 12 px au téléphone (10,5 px se lisaient mal) */
  .axis-t,.cat-t,.dlabel{font-size:var(--fs-12)}
}
/* 360 px : les trois modes de « Nouvelle réservation » (« Novalia seul » sortait de 4 px) et « vs les 30 jours d'avant »
   des chiffres du site (6 px) tiennent dans leur carte */
@media (max-width:380px){
  #s-new .seg>button{padding-left:var(--sp-2); padding-right:var(--sp-2)}
  #audMount .kpi .kpi-vs{white-space:normal}
}

/* ================= V93.13 — LES PRIX DU SITE (sentinelle.js · backend V91.6) =================
   youcef, 01/10/2026 (« ameliore encore au maximum ») : un prix changé dans la console n'arrive sur novaliafleet.com qu'à
   sa publication suivante. Le volet « Le site » dit les pages en retard (le prix publié qui n'est plus dans la grille) et
   offre de republier ; la dernière publication (GitHub) sous les boutons. */
.sent-prix{display:flex; flex-direction:column; gap:var(--sp-1); padding:var(--sp-2) var(--sp-3); border:1px solid color-mix(in srgb,var(--warn) 40%,var(--border));
  border-radius:var(--r-md); background:color-mix(in srgb,var(--warn) 8%,var(--surface)); font-size:var(--fs-13); color:var(--ink-2); line-height:1.45}
.sent-prix b{font-weight:600; color:var(--texte-alerte)}
.sent-retard{list-style:none; margin:var(--sp-1) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-1)}
.sent-retard li{display:flex; flex-direction:column; gap:1px; font-size:var(--fs-12); color:var(--muted)}
.sent-retard a{color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:2px; overflow-wrap:anywhere}
.sent-retard a:hover{color:var(--ink)}
.sent-retard span{color:var(--texte-alerte)}
.sent-retard-plus{font-style:italic}
.sent-pub{font-size:var(--fs-12); color:var(--muted)}
.sent-pub a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.sent-pub a:hover{color:var(--ink)}
/* V93.12 corrigé : un contrôle en avertissement portait la classe « av » — celle des avatars (fond gris, 11,5 px, gras) */
.sent-liste li.avert .sent-tx small{color:var(--texte-alerte)}
@media (max-width:760px){ .sent-retard li{padding:var(--sp-1) 0} .sent-retard a{position:relative} .sent-retard a::after{content:''; position:absolute; inset:-11px -4px} }

/* ================= V93.13 — TÉLÉPHONE : LISTES COMPACTES =================
   youcef, 01/10/2026 (« ameliore encore au maximum ») : au téléphone, Réservations faisait 3 480 px, Clients 4 250 px, et
   une demande de devis du site 290 px. Mesuré carte par carte (390 px) : des lignes qui passaient à deux lignes à cause
   d'un bouton voisin (« Marie Lefèvre · 3 pax · LH1066 · B2B / Agences »), une première ligne plus haute que l'heure,
   des rangées de gestes de 44 px dessinés, des liens téléphone de 40 px de haut, « … » seul sur sa ligne. La disposition
   ne change pas : rien ne bouge de place, ce qui prenait deux lignes en prend une (« … » au bout), et chaque cible garde
   ses 44 px au doigt (zone de toucher, dessin plus petit). */
@media (max-width:760px){
  /* Clients : la carte resserrée, « 10 courses · 1 263 € · B2B / Agences » sur une ligne, les gestes dessinés à 36 px */
  /* Devis : les gestes d'une demande du site tiennent sur une ligne (« … » ne passe plus seul dessous) ; le numéro de
     téléphone garde 44 px au doigt sans grandir la ligne */
  #s-devis a[href^="tel:"]:not(.btn){display:inline; min-height:0; position:relative}
  #s-devis a[href^="tel:"]:not(.btn)::after{content:''; position:absolute; inset:-14px -4px}
  /* « À traiter » : les gestes d'une ligne du site (WhatsApp, appeler, lien, …) et « vu » tiennent sur une ligne à
     390 px (« vu » passait seul dessous pour 6 px) */
  .atrow .atact{column-gap:var(--sp-1)}
  /* Analyse › Site web : le nom et son chiffre sur une ligne, la barre fine dessous, sur toute la largeur
     (« /en/nice-airport-transfers/monaco/ » tenait sur trois lignes de 104 px, le chiffre passait sous la barre) */
  #audMount .hbar{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"nm v" "bar bar"; row-gap:3px; column-gap:var(--sp-2)}
  #audMount .hbar .tr{display:contents}
  #audMount .hbar .nm{grid-area:nm; line-height:var(--lh-titre)}
  #audMount .hbar .v{grid-area:v; white-space:nowrap; align-self:end}
  #audMount .hbar .bar{grid-area:bar; height:6px}
  #audMount .hbars{gap:var(--sp-2)}
}

/* ================= V93.14 — LE POINT DE LA SEMAINE (point-semaine.js · backend V91.7) =================
   youcef, 01/10/2026 (« ameliore encore tout, surtout le design et les fonctionnalités ») : sous « Le mois en cours »,
   la semaine écoulée contre celle d'avant (quatre chiffres), les canaux, le site, la semaine qui commence et les trois
   choses à faire, chacune avec son geste. Repliée au téléphone sur « 16 courses · 2 288 € (+42 %) ». */
#ovPoint[hidden]{display:none}
.ptsem .pt-chiffres{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-3); margin-top:var(--sp-1)}
.ptsem .pt-c{display:flex; flex-direction:column; gap:2px; min-width:0; padding:var(--sp-3) var(--sp-4); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2)}
.ptsem .pt-l{font-size:var(--fs-12); color:var(--muted)}
.ptsem .pt-c b{font-family:var(--font-num); font-size:var(--fs-20); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.ptsem .pt-c .delta{align-self:flex-start; margin-top:2px; padding:1px var(--sp-1); border-radius:var(--r-xs); font-size:var(--fs-12); font-weight:600; font-variant-numeric:tabular-nums}
.ptsem .pt-c .delta.g{color:var(--texte-ok); background:color-mix(in srgb,var(--good) 12%,transparent)}
.ptsem .pt-c .delta.r{color:var(--texte-danger); background:color-mix(in srgb,var(--bad) 10%,transparent)}
.ptsem .pt-c .delta.n{color:var(--muted); background:var(--surface-3)}
.ptsem .pt-lignes{display:flex; flex-direction:column; margin-top:var(--sp-3)}
.ptsem .pt-ligne{display:flex; align-items:baseline; gap:var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--border); font-size:var(--fs-13); color:var(--ink-2)}
.ptsem .pt-ligne:first-child{border-top:0}
.ptsem .pt-k{flex:none; width:7.5rem; font-size:var(--fs-12); font-weight:600; color:var(--muted)}
.ptsem .pt-v{flex:1; min-width:0}
.ptsem .pt-v.pt-flex{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3)}
.ptsem .pt-canal{display:inline-flex; align-items:center; gap:var(--sp-1); white-space:nowrap}
.ptsem .pt-canal .pd{width:8px; height:8px; border-radius:var(--r-rond)}
/* V93.23 — « Reçues » : le nombre, son écart, la période d'avant, sur une ligne ; puis les canaux */
.ptsem .pt-recu{display:inline-flex; align-items:baseline; gap:var(--sp-1); white-space:nowrap}
.ptsem .pt-recu .delta{padding:1px var(--sp-1); border-radius:var(--r-xs); font-size:var(--fs-12); font-weight:600; font-variant-numeric:tabular-nums}
.ptsem .pt-recu .delta.g{color:var(--texte-ok); background:color-mix(in srgb,var(--good) 12%,transparent)}
.ptsem .pt-recu .delta.r{color:var(--texte-danger); background:color-mix(in srgb,var(--bad) 10%,transparent)}
.ptsem .pt-recu .delta.n{color:var(--muted); background:var(--surface-3)}
.ptsem .pt-avant{color:var(--muted); font-size:var(--fs-12)}
.ptsem .pt-alerte{color:var(--texte-alerte)}
.ptsem .pt-faire{display:flex; align-items:flex-start; gap:var(--sp-3); margin-top:var(--sp-2); padding-top:var(--sp-3); border-top:1px solid var(--border)}
.ptsem .pt-faire ol{flex:1; min-width:0; margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--sp-1); counter-reset:pt}
.ptsem .pt-faire li{counter-increment:pt}
.ptsem .pt-act{display:flex; align-items:center; gap:var(--sp-2); width:100%; min-height:var(--h-md); padding:var(--sp-1) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-13); text-align:left; cursor:pointer; transition:border-color .15s var(--ease), background .15s var(--ease)}
.ptsem .pt-act::before{content:counter(pt); flex:none; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:var(--r-rond); background:var(--accent-soft); color:var(--texte-accent); font-size:var(--fs-11); font-weight:700}
.ptsem .pt-act span{flex:1; min-width:0}
.ptsem .pt-act svg{flex:none; width:14px; height:14px; color:var(--faint)}
.ptsem .pt-act:hover{border-color:var(--border-strong); background:var(--surface-2)}
.ptsem .pt-faire.ok{align-items:center; gap:var(--sp-2); font-size:var(--fs-13); color:var(--texte-ok)}
.ptsem .pt-faire.ok svg{width:16px; height:16px}
.ptsem .pt-vide{padding:var(--sp-2) 0; font-size:var(--fs-13); color:var(--muted)}
.ptsem .pt-pied{margin-top:var(--sp-3); font-size:var(--fs-12); color:var(--faint)}
@media (max-width:1040px){ .ptsem .pt-chiffres{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
  .ptsem .pt-env-l{display:none}
  .ptsem .pt-ligne{flex-direction:column; gap:2px}
  .ptsem .pt-k{width:auto}
  .ptsem .pt-faire{flex-direction:column; gap:var(--sp-2)}
  .ptsem .pt-act{min-height:var(--h-touch)}
}

/* ================= V93.14 — TABLEAU DE BORD PLUS NET (ordinateur) =================
   youcef, 01/10/2026 (« Tableau de bord plus net ») : à l'ordinateur, « 10 prochaines réservations » faisait 1 250 px
   (l'adresse sur quatre lignes dans une colonne de 140 px), les cartes de droite s'étiraient à sa hauteur (du blanc), une
   carte vide gardait son grand cadre. Une course tient en deux lignes courtes (l'adresse entière au survol), les cartes
   gardent leur hauteur, un vide tient sur une ligne, et quatre chiffres clés portent la courbe de leurs 14 jours.
   Au téléphone, rien ne change. */
.kpi.gj .kpi-spark{display:none}
@media (min-width:761px){
  .kpi.gj.a-spark .kpi-spark{display:block; position:absolute; top:var(--sp-4); right:var(--sp-4); width:72px; height:24px; color:var(--chart-hero); pointer-events:none; overflow:visible}
  .kpi.gj.a-spark .kpi-spark.discret{color:var(--faint)}
  .kpi.gj.a-spark .lab{padding-right:80px}
  .kpi-spark .ks-ligne{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
  .kpi-spark .ks-aire{fill:currentColor; opacity:.1}
  .kpi-spark .ks-pt{fill:currentColor}

  /* « 10 prochaines réservations » : l'adresse sur une ligne, le sens, le véhicule et le vol dessous ; la référence sous
     l'heure (comme de 1041 à 1365 px depuis V93.9) — sa colonne rendait 140 px à l'adresse */
  .dt.ovnext td{vertical-align:middle}
  .dt.ovnext tr>:first-child:not([colspan]){display:none}
  .dt.ovnext .ovn-ref-m{display:block; max-width:132px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .dt.ovnext .ovn-ref-m .reffull{font-size:var(--fs-11)}
  .dt.ovnext td:nth-child(2){white-space:nowrap}
  .dt.ovnext td:nth-child(2) .rowsub:not(.ovn-ref-m){display:none}
  .dt.ovnext td:nth-child(3){width:100%; max-width:0}
  .dt.ovnext .ovn-l{display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"adr adr" "sens ovx"; align-items:center; column-gap:var(--sp-3); row-gap:2px; min-width:0}
  .dt.ovnext .ovn-l .adr{grid-area:adr; min-width:0; max-width:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
  .dt.ovnext .ovn-l .sens{grid-area:sens; font-size:var(--fs-12)}
  .dt.ovnext .ovn-l .ovx{grid-area:ovx; margin-top:0; flex-wrap:nowrap; min-width:0; overflow:hidden; color:var(--muted)}
  .dt.ovnext td.mh{white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis}
}
@media (min-width:1041px){
  /* les cartes gardent leur hauteur : plus de grand blanc sous « Provenance » quand la liste est longue */
  #s-overview .cols-a{align-items:start}
  #s-overview .bstack>.card{flex:none}
}
/* une carte sans rien à montrer tient sur une ligne */
#ovRaCard.carte-vide .chart{height:auto; min-height:0}
.vide-ligne{padding:var(--sp-2) 0 var(--sp-1); font-size:var(--fs-13); color:var(--muted)}

/* ================= V93.14 — DESIGN SOIGNÉ PARTOUT =================
   youcef, 01/10/2026 (« Design soigné partout ») : la même finition sur tous les écrans, sans rien déplacer.
     · un état vide a son image : une icône dans une pastille au-dessus du titre (composants.js, videHtml — ~300 écrans) ;
     · les tableaux (vérifiés écran par écran) gardaient déjà leur en-tête en vue sous la barre du haut, la ligne
       survolée et les chiffres alignés : rien à reprendre ;
     · un écran qui s'ouvre apparaît en fondu (court, coupé si l'appareil demande moins d'animations) ;
     · les en-têtes de carte, les puces et les champs partagent les mêmes hauteurs et les mêmes marges. */
.vide-ic{display:inline-grid; place-items:center; width:44px; height:44px; margin-bottom:var(--sp-1); border-radius:var(--r-rond);
  background:var(--accent-soft); color:var(--texte-accent)}
.vide-ic svg{width:20px; height:20px}
.vide-ic.alerte{background:color-mix(in srgb,var(--warn) 14%,transparent); color:var(--texte-alerte)}
.vide-ic.ok{background:color-mix(in srgb,var(--good) 14%,transparent); color:var(--texte-ok)}
.dt .vide-ic,.vol .vide-ic{width:36px; height:36px}
.dt .vide-ic svg{width:17px; height:17px}
/* un écran qui s'ouvre apparaît en fondu (l'opacité seule : rien ne bouge, les en-têtes collants restent collants) */
@media (prefers-reduced-motion:no-preference){
  .screen.on{animation:nv-ecran .16s var(--ease) both}
}
@keyframes nv-ecran{from{opacity:0} to{opacity:1}}
/* l'en-tête d'une carte : son compteur passe dessous plutôt que de casser le titre en deux (« Provenance des / réservations ») */
.card .ch{flex-wrap:wrap; row-gap:2px}
.card .ch h3{flex:0 1 auto; min-width:0}

/* ================= V93.14 — GESTES AU TÉLÉPHONE (gestes.js) =================
   youcef, 01/10/2026 (« Gestes au téléphone ») : glisser une ligne (Réservations : « Actions » à gauche, « Assigner » à
   droite ; « À traiter » : « Vu ») — la ligne suit le doigt, ce qui va se passer apparaît dessous ; tirer pour actualiser. */
.glisse-hote{position:relative}
#bkCards .bkc[data-ref],#ovATraiter .atrow{touch-action:pan-y}
/* la ligne passe devant son fond par l'ordre du document (le fond est inséré juste avant elle) : pas de z-index ; elle
   est opaque pendant le geste (une ligne de la liste compacte est transparente : .bkc.bkl) */
.en-glisse{position:relative; transform:translateX(var(--g-dx,0)); background:var(--surface); will-change:transform}
.en-glisse.glisse-retour{transition:transform .2s var(--ease)}
.glisse-fond{position:absolute; left:0; right:0; display:flex; align-items:center; padding:0 var(--sp-4); font-size:var(--fs-13); font-weight:600;
  background:var(--surface-3); color:var(--muted); pointer-events:none}
.glisse-fond[data-sens="gauche"]{justify-content:flex-end}
.glisse-fond[data-sens="droite"]{justify-content:flex-start}
.glisse-fond[data-ton="action"]{background:var(--accent-soft); color:var(--texte-accent)}
.glisse-fond[data-ton="ok"]{background:var(--fond-ok); color:var(--texte-ok)}
/* tirer pour actualiser : une pastille sous la barre du haut, qui suit le doigt et tourne */
.tirer{position:fixed; left:50%; top:calc(env(safe-area-inset-top,0px) + 52px); z-index:var(--z-collant); display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1); border:1px solid var(--border); border-radius:var(--r-pilule); background:var(--elevated); box-shadow:var(--shadow-pop);
  color:var(--ink-2); font-size:var(--fs-12); font-weight:600; white-space:nowrap; opacity:0; pointer-events:none;
  transform:translate(-50%, calc(var(--tirer-y,0px) - 48px)); transition:opacity .15s var(--ease)}
.tirer.on{opacity:1}
.tirer-rond{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:var(--r-rond); background:var(--surface-2); color:var(--muted)}
.tirer-rond svg{width:15px; height:15px; transform:rotate(var(--tirer-rot,0deg))}
.tirer.pret .tirer-rond{background:var(--accent); color:var(--accent-ink)}
.tirer.tourne .tirer-rond svg{animation:nv-tourne .8s linear infinite}
@keyframes nv-tourne{to{transform:rotate(360deg)}}
@media (min-width:761px){ .tirer{display:none} }
/* au téléphone, ce geste remplace celui du navigateur : dans un onglet Chrome, tirer rechargeait en plus toute la page */
@media (max-width:760px){ html{overscroll-behavior-y:contain} }
@media (prefers-reduced-motion:reduce){ .tirer.tourne .tirer-rond svg{animation:none} .en-glisse.glisse-retour{transition:none} }

/* ================= V93.19 — RENTABILITÉ › ANNULATIONS =================
   youcef, 02/10/2026 (« Annulations à la loupe ») : qui annule, combien de temps avant, les tardives. */
.ana-annul .dt .dot{display:inline-block; vertical-align:middle; margin-right:var(--sp-1)}
.ana-annul .aa-tard{color:var(--texte-alerte); font-weight:600}

/* ================= V93.21 — À ENCAISSER =================
   youcef, 02/10/2026 (« À encaisser ») : ce que chaque canal payé par l'OTA doit encore verser, mois par mois.
   Une ligne : le canal, le mois, ce qui reste, l'état (en retard, dû, attendu), « Reçu ». Au téléphone : sur deux lignes. */
.aenc .aenc-tete{margin-top:var(--sp-1); font-size:var(--fs-13); color:var(--ink-2)}
.aenc .aenc-l{display:flex; flex-direction:column; margin-top:var(--sp-2)}
.aenc .aenc-r{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.4fr) auto; align-items:center; gap:var(--sp-3);
  padding:var(--sp-2) 0; border-top:1px solid var(--border); font-size:var(--fs-13); color:var(--ink-2)}
.aenc .aenc-r:first-child{border-top:0}
.aenc .aenc-c{display:inline-flex; align-items:center; gap:var(--sp-1); min-width:0; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.aenc .aenc-c .pd{flex:none; width:8px; height:8px; border-radius:var(--r-rond)}
.aenc .aenc-m, .aenc .aenc-mt, .aenc .aenc-s{display:flex; flex-direction:column; gap:1px; min-width:0}
.aenc .aenc-m small, .aenc .aenc-mt small, .aenc .aenc-s small{font-size:var(--fs-12); color:var(--muted)}
.aenc .aenc-mt b{font-family:var(--font-num); font-variant-numeric:tabular-nums; color:var(--ink)}
.aenc .aenc-e{font-weight:600}
.aenc .aenc-r.retard .aenc-e{color:var(--texte-alerte)}
.aenc .aenc-r.du .aenc-e{color:var(--texte-alerte)}
.aenc .aenc-r.avenir .aenc-e{color:var(--muted); font-weight:500}
.aenc .aenc-g{display:flex; justify-content:flex-end}
@media (max-width:760px){
  /* au téléphone : le canal, le montant et « Reçu » sur la première ligne ; le mois et l'état dessous */
  .aenc .aenc-r{grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"c mt g" "m s s"; row-gap:var(--sp-1); column-gap:var(--sp-2)}
  .aenc .aenc-c{grid-area:c} .aenc .aenc-mt{grid-area:mt; align-items:flex-end} .aenc .aenc-m{grid-area:m}
  .aenc .aenc-s{grid-area:s; align-items:flex-end; text-align:right} .aenc .aenc-g{grid-area:g}
}

/* ================= V94.1 — TABLEAU DE BORD, DIRECTION A « AFFINÉE » =================
   youcef, 05/10/2026 (« ameliore le design de l'admin », direction A, lot 2). Tout ce que montre le tableau de bord de
   V93.1 reste (sept chiffres, le mois en quatre chiffres, la tendance sur 14 jours, les 10 prochaines réservations, la
   provenance, le sens hub, le camembert des reçues, « À traiter ») ; la hiérarchie change :
     · en tête, le bénéfice gestionnaire en grand au-dessus de sa tendance (2/3), le mois en cours à côté (1/3), ses
       quatre chiffres sans cadre (plus de « cartes dans la carte »), en liste : le libellé à gauche, le chiffre à droite ;
     · les six autres chiffres sur une ligne ; un zéro se lit en gris ;
     · « À traiter » : l'état dans sa colonne, avec son icône et sa couleur ; le détail à côté, les gestes à droite ;
     · les compteurs du menu en pastilles (rouge : ce qui presse).
   Tout en jetons : aucune taille, aucun rayon, aucune couleur écrits en dur ici. */
:root{
  --fs-48:48px;
  --r-puce:6px;
  --pastille-alerte-fond:var(--point-danger); --pastille-alerte-texte:var(--on-couleur);
}
html[data-theme="dark"]{
  --pastille-alerte-texte:var(--page);
}

/* ---- la tête : le bénéfice et sa tendance (2/3), le mois (1/3) ---- */
.ov-tete{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); align-items:stretch}
.ov-tete>.card{margin:0}
#ovMois{display:flex; flex-direction:column; min-width:0}
#ovMois:empty{display:none}
#ovMois>.card{flex:1 1 auto; margin:0}
@media (min-width:1100px){
  .ov-tete{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .ov-tete:has(>#ovMois:empty){grid-template-columns:minmax(0,1fr)}
}
.ov-tete+#ovKpis{margin-top:var(--sp-4)}

/* le chiffre de tête */
.ovhero-fig .ovh{display:flex; flex-direction:column; gap:var(--sp-1); padding-bottom:var(--sp-4); margin-bottom:var(--sp-3); border-bottom:1px solid var(--grid)}
.ovhero-fig .ovh.va{cursor:pointer}
.ovh-lab{font-size:var(--fs-13); font-weight:500; color:var(--muted)}
.ovh-val{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3)}
.ovh-v{font-family:var(--font-num); font-size:var(--fs-48); font-weight:600; letter-spacing:-.035em; line-height:1.05; color:var(--ink); font-variant-numeric:tabular-nums}
.ovh-v.zero{color:var(--faint)}
.ovh-sub{font-size:var(--fs-13); color:var(--muted); line-height:var(--lh-texte)}
.ovh .kpi-var{margin-top:0}
.ovh .delta{display:inline-flex; align-items:center; gap:var(--sp-1); padding:2px var(--sp-2); border-radius:var(--r-puce); font-family:var(--font-num); font-size:var(--fs-13); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.ovh .delta svg{width:13px; height:13px; flex:none}
.ovh .delta.g{color:var(--texte-ok); background:var(--fond-ok)}
.ovh .delta.r{color:var(--texte-danger); background:var(--fond-danger)}
.ovh .delta.n{color:var(--muted); background:transparent; padding:0}
.ovh .kpi-vs{font-size:var(--fs-13)}
@media (hover:hover){
  .ovh.va:hover .ovh-v:not(.zero),#ovMois .kpis .kpi.va:hover .val{color:var(--texte-accent)}
}
/* la tendance sous le chiffre de tête : un sous-titre, plus un second titre de carte */
.ovhero.a-tete>.ch h3{font-size:var(--fs-14); color:var(--ink-2)}
.chart-hero .ovtr-moy b{font-size:inherit; font-weight:600; letter-spacing:0; color:var(--ink-2)}

/* le mois : quatre chiffres sans cadre, séparés d'un filet ; le CA net du mois par provenance dessous */
#ovMois .kpis{gap:0}
#ovMois .kpis .kpi{grid-column:auto; background:transparent; border:0; border-radius:var(--r-nul); box-shadow:none; padding:var(--sp-3) var(--sp-4); gap:2px}
#ovMois .kpis .kpi:hover{background:transparent; box-shadow:none}
#ovMois .kpis .kpi .val{font-size:var(--fs-26); margin-top:2px; line-height:1.15}
#ovMois .kpis .kpi.gj .sub{display:block}
#ovMois .kpis .kpi .kspark{display:none}
@media (min-width:761px){
  #ovMois .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  #ovMois .kpis .kpi:first-child{padding-left:0}
  #ovMois .kpis .kpi+.kpi{border-left:1px solid var(--grid)}
}
@media (min-width:1100px){
  /* dans la tête (1/3) : une ligne par chiffre — le libellé à gauche, le chiffre à droite ; le détail, la variation et le
     classement dessous, sur toute la largeur (V94.2 : à droite, ils écrasaient le libellé sur quatre lignes) */
  .ov-tete #ovMois .ch .right{flex:1 1 100%; margin-left:0}
  .ov-tete #ovMois .kpis{grid-template-columns:minmax(0,1fr)}
  .ov-tete #ovMois .kpis .kpi{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"lab val" "sub sub" "kh kh"; column-gap:var(--sp-3); row-gap:2px; align-items:center; padding:var(--sp-3) 0; border-left:0}
  .ov-tete #ovMois .kpis .kpi+.kpi{border-top:1px solid var(--grid)}
  .ov-tete #ovMois .kpis .kpi .lab{grid-area:lab; white-space:normal; font-size:var(--fs-13); color:var(--ink-2)}
  .ov-tete #ovMois .kpis .kpi .val{grid-area:val; margin:0; font-size:var(--fs-22); text-align:right; white-space:nowrap}
  .ov-tete #ovMois .kpis .kpi:last-child .val{font-size:var(--fs-26)}
  .ov-tete #ovMois .kpis .kpi.gj .sub{grid-area:sub; margin:0}
  .ov-tete #ovMois .kpis .kpi .kh{grid-area:kh; justify-content:flex-start; margin:var(--sp-1) 0 0}
}

/* les six autres chiffres : une ligne à l'ordinateur, trois par trois en dessous, deux par deux au téléphone */
.kpi.zero .val{color:var(--faint)}
@media (min-width:761px){
  #ovKpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  #ovKpis:has(>.kpi:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  #ovKpis .kpi,#ovKpis .kpi:nth-child(n+4){grid-column:auto; padding:var(--sp-4) var(--sp-4) var(--sp-3); gap:2px}
  #ovKpis .kpi .val,#ovKpis .kpi:nth-child(n+4) .val{font-size:var(--fs-26); margin-top:var(--sp-1); line-height:1.15; letter-spacing:-.03em}
  #ovKpis .kpi.gj .sub,#ovKpis .kpi.gj:nth-child(n+4) .sub{display:block}
  #ovKpis .kpi .lab{white-space:normal}
  #ovKpis .kpi.gj.a-spark .lab{padding-right:0}
  #ovKpis .kpi.gj.a-spark .kpi-spark{top:calc(var(--sp-4) + var(--sp-5)); right:var(--sp-4); width:56px; height:22px}
}
@media (min-width:1100px){
  #ovKpis:has(>.kpi:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1280px){
  #ovKpis{grid-template-columns:repeat(6,minmax(0,1fr))}
  #ovKpis .kpi .lab{min-height:calc(2em * 1.35); line-height:1.35}   /* « Bénéfice à venir (gestionnaire) » passe sur deux lignes : les chiffres restent alignés */
  #ovKpis .kpi.gj.a-spark .kpi-spark{top:calc(var(--sp-4) + var(--sp-6) + var(--sp-2))}
}
@media (max-width:760px){
  #ovKpis .kpi,#ovKpis .kpi:nth-child(2),#ovKpis .kpi:nth-child(3),#ovKpis .kpi:nth-child(n+4){grid-column:span 1}
  #ovKpis .kpi .val,#ovKpis .kpi:nth-child(-n+3) .val{font-size:var(--fs-22)}
  .ovh-v{font-size:var(--fs-32)}
}

/* « À traiter » : l'état dans sa colonne (icône + mot, la couleur du niveau), le détail à côté, les gestes à droite */
#ovATraiter .atetat{display:inline-flex; align-items:center; gap:var(--sp-2); min-width:0; font-size:var(--fs-13); font-weight:600; color:var(--texte-info)}
#ovATraiter .atetat svg{width:15px; height:15px; flex:none}
#ovATraiter .atetat .at-site{margin-right:0}
#ovATraiter .at-et{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#ovATraiter .atrow.attention .atetat{color:var(--texte-alerte)}
#ovATraiter .atrow.urgent .atetat{color:var(--texte-danger)}
#ovATraiter .atrow .attx b{color:var(--ink); font-weight:500}
@media (min-width:761px){
  #ovATraiter .atrow{display:grid; grid-template-columns:minmax(150px,210px) minmax(0,1fr) auto; align-items:center; column-gap:var(--sp-4); padding:var(--sp-3) 0}
}
@media (max-width:760px){
  #ovATraiter .atetat{flex:1 1 100%}
  #ovATraiter .atrow .atact{padding-left:0}
}

/* les compteurs du menu en pastilles ; rouge plein pour ce qui presse */
#sidebar nav button .badge-n{display:inline-grid; place-items:center; height:20px}
#sidebar nav button .badge-n.bad{background:var(--pastille-alerte-fond); color:var(--pastille-alerte-texte)}

/* ================= V94.3 — RÉSERVATIONS ET FICHE DE COURSE, DIRECTION A « AFFINÉE » =================
   youcef, 05/10/2026 (« ameliore le design de l'admin », direction A, lot 3). Les colonnes restent celles qu'il a
   voulues (V28 : n° · date & heure · véhicule · trajet · chauffeur · entreprise · statut · prix ; V92 n°12 : le canal
   sous la référence, le sens devant le trajet) et rien ne quitte l'écran ; ce qui change :
     · la barre de filtres pose ses commandes sur le canvas, sans cadre, toutes de la même famille (blanches, un filet) ;
     · le tableau : l'heure en avant, la ligne de chaque jour plus nette ; les gestes au survol ne cachent plus le statut ;
     · « Assigner » en bouton plein, partout : c'est l'action qui presse ;
     · la fiche : un volet blanc, ses sections à plat séparées d'un filet (plus de cartes dans le volet), des titres de
       section lisibles, les gestes du haut en boutons sobres. Tout en jetons. */

/* ---- le tableau ---- */
#bkRows td[data-c="ref"] .reffull{font-size:var(--fs-11); color:var(--muted)}

/* ---- « Assigner » : le bouton plein, partout ---- */
.btn.asg{background:var(--btn); color:var(--btn-ink); border-color:transparent; font-weight:600}
.btn.asg:hover{background:var(--accent-hover); color:var(--btn-ink)}

/* ---- la fiche de course : un volet blanc, des sections à plat ---- */
#drawer,#drawer .db{background:var(--surface)}
#drawer .drow .dk{color:var(--muted)}

/* ================= V94.4 — DISPATCH, DIRECTION A « AFFINÉE » =================
   youcef, 05/10/2026 (« ameliore le design de l'admin », direction A, lot 4). Le planning de V90 reste tel qu'il l'a
   voulu (« on comprend rien », 23/09) : une ligne par course, la couleur à gauche dit qui la fait (sa légende derrière
   « ? »), le résumé en phrases, les chauffeurs du jour à droite. Ce qui change :
     · « À faire maintenant » : l'état dans sa colonne, avec son icône et la couleur du niveau, comme « À traiter » ;
       l'heure, le client et le trajet à côté, le détail dessous, le geste à droite ;
     · la barre : des commandes de la même famille que Réservations (blanches, un filet) ;
     · le planning : l'heure en avant, l'en-tête de chaque jour plus net. Tout en jetons. */
#s-dispatch .dsp-h{font-size:var(--fs-15); font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
#s-dispatch .dsp-jh>b{font-size:var(--fs-14); font-weight:600; color:var(--ink)}

/* ================= V94.5 — LE TÉLÉPHONE, DIRECTION A « AFFINÉE » =================
   youcef, 05/10/2026 (« ameliore le design de l'admin », direction A, lot 5). La barre du bas reste celle qu'il a
   choisie (Réglages : jusqu'à six écrans) ; les lots 2 à 4 ont déjà mis au téléphone l'état sur sa ligne (« À traiter »,
   « À faire maintenant »), les chiffres deux par deux, « Assigner » plein. Ici, la fiche d'une course : l'adresse,
   puis l'heure, puis Waze et Maps ensemble sur leur ligne (ils se coupaient entre deux lignes). Tout en jetons. */

/* ====== LOT EF — QUI EST QUI : CHAUFFEURS INDIVIDUELS, FLOTTES, GROUPES, MOI ; MEMBRES EN CLAIR ======
   Une couleur par genre, en point (jetons --serie-… : validés en clair et en sombre), le mot en encre neutre :
   individuel = vert, flotte = bleu, groupe = indigo, sous-traitant = orange, moi = or. */
.g-individuel{--g:var(--serie-3)} .g-flotte{--g:var(--serie-7)} .g-groupe{--g:var(--serie-1)} .g-sous_traitant{--g:var(--serie-2)} .g-moi{--g:var(--gold-2)}
.ch-genre{display:inline-flex; align-items:center; gap:var(--sp-1); padding:0 var(--sp-2); border-radius:var(--r-pilule); font-size:var(--fs-11); font-weight:600; line-height:18px;
  color:var(--ink-2); background:color-mix(in srgb,var(--g,var(--brume)) 14%,var(--surface)); white-space:nowrap; vertical-align:1px}
.ch-genre i{display:inline-block; width:7px; height:7px; border-radius:var(--r-rond); background:var(--g,var(--brume)); flex:none}
.ch-genre-tel{white-space:nowrap}
/* l'annuaire : le résumé (aussi sur grand écran), puis les segments par genre ; la flotte d'une ligne se lit en entier */
/* la fiche : le genre en une phrase, sous l'en-tête */
/* Flottes : trois segments expliqués */
/* l'assistant : « Qu'est-ce que tu ajoutes ? » */
.ent-wiz-q,.usr-aj-q{font-size:var(--fs-16); font-weight:600; color:var(--ink); margin:0 0 var(--sp-1)}
.ent-gchoix,.usr-ajcartes{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--sp-3)}
.ent-gcarte,.usr-ajcarte{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2); padding:var(--sp-4); border:1px solid var(--border); border-radius:var(--r-card);
  background:var(--surface); text-align:left; color:var(--ink); box-shadow:var(--shadow-ctl); min-height:var(--h-touch); transition:border-color .12s, box-shadow .12s}
.ent-gcarte:hover,.usr-ajcarte:hover{border-color:var(--accent-border); box-shadow:var(--shadow-card)}
.usr-ajcarte.on{border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent)}
.ent-gcarte b,.usr-ajcarte b{font-size:var(--fs-15); font-weight:600; line-height:var(--lh-titre)}
.ent-gcarte-t,.usr-ajcarte>span:last-child{font-size:var(--fs-13); color:var(--ink-2); line-height:1.45}
.ent-gcarte small{font-size:var(--fs-12); color:var(--muted)}
.ent-gcarte-ic,.usr-ajcarte-ic{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:var(--r-md); flex:none;
  background:color-mix(in srgb,var(--g,var(--accent)) 14%,var(--surface)); color:var(--ink-2)}
.ent-gcarte-ic svg,.usr-ajcarte-ic svg{width:18px; height:18px}
.ent-wiz-pied{margin-top:var(--sp-1)}
.ent-wiz-quoi,.usr-aj-quoi{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--surface-2); font-size:var(--fs-13); color:var(--ink-2)}
.ent-wiz-quoi>span:not(.ch-genre){flex:1 1 200px; min-width:0}
.usr-aj-quoi>span:nth-child(2){display:flex; flex-direction:column; flex:1 1 200px; min-width:0}
.usr-aj-quoi .usr-ajcarte-ic{width:32px; height:32px}
/* Membres : « Qui a accès » */
/* l'accès prêt : le nom de connexion, le mot de passe, le message à envoyer */
.usr-pret-l{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:var(--sp-1) var(--sp-3); margin:var(--sp-2) 0; font-size:var(--fs-13)}
.usr-pret-l dt{color:var(--muted)}
.usr-pret-l dd{margin:0; color:var(--ink); overflow-wrap:anywhere}
.usr-pret-l .mono{font-size:var(--fs-15); user-select:all}
.usr-pret-g{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-1) 0 0}
.usr-pret-m{margin-top:var(--sp-2); font-size:var(--fs-12); color:var(--ink-2)}
.usr-pret-m summary{cursor:pointer; color:var(--muted)}
.usr-pret-m pre{margin:var(--sp-2) 0 0; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--border); white-space:pre-wrap; font-family:var(--font-sans); font-size:var(--fs-12); line-height:1.5}
.usr-aj{display:flex; flex-direction:column; gap:var(--sp-3)}
.usr-aj-autre{margin-top:var(--sp-1)}
.usr-aj-ident p{margin:0; font-size:var(--fs-13)}
.usr-aj-ident p+p{margin-top:var(--sp-1)}
.usr-aj .spacer{flex:1}
.usr-aj-fin{display:flex; align-items:center; margin-top:0}
.usr-rc-autre{max-width:360px}
.usr-api-pourquoi{margin:0 0 var(--sp-2)}
.usr-app .usr-app-g{text-align:right}
@media (max-width:760px){
  /* au téléphone : les segments défilent de côté, sur une ligne ; trois mots courts pour les Flottes, l'explication dessous */
  .ent-gchoix,.usr-ajcartes{grid-template-columns:minmax(0,1fr)}
  .ent-gcarte,.usr-ajcarte{padding:var(--sp-3) var(--sp-4)}
  .usr-pret-l{grid-template-columns:minmax(0,1fr)}
  .usr-pret-l dd{margin-bottom:var(--sp-1)}
}
/* ====== LOT A — RÉSERVATIONS : RÉFÉRENCE EXTERNE, SITE D'ORIGINE, PAIEMENT FOURNISSEUR, « ME L'ASSIGNER », VÉHICULE FAVORI ======
   youcef, 05/10/2026. A1 : une référence se cherche sur toutes les courses (bandeau), et dans tout l'historique (« Trouvé dans
   l'historique », sous la liste) ; A2 : un badge sobre dit le site d'origine ; A3 : le paiement fournisseur en tête de la fiche,
   modifiable sur place, et sa colonne ; A4 : « Me l'assigner » partout où l'on assigne ; A5 : le véhicule favori d'un
   chauffeur. Tout en jetons ; la mise en page tient à 390 px. */
/* A1 — le mode « référence » : ce qui est cherché, et que les filtres ne jouent plus */
.bk-refmode{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin:0 0 var(--sp-3); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--accent-soft); color:var(--ink-2); font-size:var(--fs-13); line-height:1.45}
.bk-refmode>svg{width:16px; height:16px; flex:none; color:var(--texte-accent)}
.bk-refmode>span{flex:1 1 220px; min-width:0; overflow-wrap:anywhere}
.bk-refmode b{color:var(--ink); font-weight:600}
/* A1 — « Trouvé dans l'historique », sous la liste */
#bkHist{margin-top:var(--sp-4)}
.bk-hist-att{display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-1); color:var(--muted); font-size:var(--fs-13)}
.bk-hist-att svg{width:16px; height:16px; flex:none}
.bk-hist-l{display:flex; flex-direction:column}
.bk-hist-r{display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:var(--h-touch); padding:var(--sp-2); border:0; border-top:1px solid var(--border); border-radius:var(--r-sm); background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
.bk-hist-r:first-child{border-top:0}
.bk-hist-r:hover{background:var(--surface-2)}
.bk-hist-r:disabled{opacity:.6; cursor:progress}
.bk-hist-q{display:flex; flex-direction:column; flex:none; width:88px; font-variant-numeric:tabular-nums}
.bk-hist-q b{font-size:var(--fs-15); font-weight:600; color:var(--ink)}
.bk-hist-q small,.bk-hist-t small{font-size:var(--fs-12); color:var(--muted)}
.bk-hist-t{display:flex; flex-direction:column; flex:1 1 auto; min-width:0; gap:2px}
.bk-hist-t b{font-weight:600; color:var(--ink)}
.bk-hist-t small{overflow-wrap:anywhere}
.bk-hist .sub{margin:var(--sp-2) 0 0}
/* A2 — le site d'origine : un badge sobre (liste, cartes, téléphone, fiche) */
.bk-site{display:inline-flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-11); line-height:18px; padding:0 6px; border-radius:var(--r-xs); background:var(--surface-2); color:var(--ink-2); white-space:nowrap; vertical-align:middle}
.bk-site svg{width:12px; height:12px; flex:none}
/* sous la référence (colonne étroite) : les pastilles passent à la ligne, la plus longue se coupe (son nom entier au survol) */
.bkc .l2 .bk-site{margin-left:var(--sp-1)}
/* la liste du téléphone : sur la 1re ligne, il se coupe avant le prix */
/* A3 — le paiement fournisseur : sa ligne en tête de la fiche, sa petite fenêtre, la cellule de la colonne */
.paie-box{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2); font-size:var(--fs-13); color:var(--ink-2)}
.paie-k{color:var(--muted)}
.paie-box.edit .paie-k{flex:1 1 100%}
.paie-v{color:var(--ink); font-weight:600}
.paie-src{font-size:var(--fs-11); font-weight:500; line-height:18px; padding:0 6px; border-radius:var(--r-xs); background:var(--surface-2); color:var(--ink-2); white-space:nowrap}
.paie-src.s-gj{background:var(--good-soft); color:var(--texte-ok)}
.paie-src.s-estim{background:var(--warn-soft); color:var(--texte-alerte)}
.paie-box .btn svg{width:14px; height:14px}
.paie-gj{color:var(--texte-accent); font-size:var(--fs-13)}
.paie-champ{display:inline-flex; align-items:center; gap:var(--sp-1)}
.paie-in{width:120px; max-width:40vw}
.paie-aide{flex:1 1 100%; font-size:var(--fs-12); color:var(--muted)}
.paie-box .paie-err{flex:1 1 100%; margin:0; color:var(--texte-danger)}
.paie-fen-tete{margin:0 0 var(--sp-3); font-size:var(--fs-13); color:var(--ink-2); line-height:1.5}
.bk-pf{padding:2px var(--sp-1); margin:-2px calc(-1 * var(--sp-1)); border:0; border-radius:var(--r-xs); background:none; color:inherit; font:inherit; cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px}
.bk-pf:hover{background:var(--surface-2)}
.bk-pf small{font-size:var(--fs-11)}
/* A4 — « Me l'assigner » : la ligne épinglée du panneau, « Moi » à côté d'« Assigner », le choix « Qui es-tu ? » */
/* la barre de la fiche : « Me l'assigner » garde son mot ; « Appeler » devient une icône pour lui faire la place */
.moi-choix{display:flex; flex-direction:column; gap:var(--sp-3)}
.moi-liste{display:flex; flex-direction:column; gap:var(--sp-1); max-height:min(52vh,420px); overflow-y:auto; padding:2px}
.moi-li{display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:var(--h-touch); padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); color:inherit; font:inherit; text-align:left; cursor:pointer}
.moi-li:hover{border-color:var(--accent-border)}
.moi-li.on{border-color:var(--accent); background:var(--accent-soft)}
.moi-li .mav{width:30px; height:30px; font-size:var(--fs-11)}
.moi-li-t{display:flex; flex-direction:column; min-width:0}
.moi-li-t b{font-size:var(--fs-14); font-weight:600}
.moi-li-t small{font-size:var(--fs-12); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* A5 — le véhicule favori, dans la fiche du chauffeur */
.ch-fav{display:inline-flex; align-items:center; gap:var(--sp-1)}
.ch-fav svg{width:14px; height:14px; flex:none; color:var(--gold)}
.ch-fav-f{display:inline-flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin-left:var(--sp-2)}
.ch-fav-f .sel{max-width:260px}
.ch-fav-aide{display:block; margin-top:var(--sp-1); font-size:var(--fs-12); color:var(--muted)}
@media (max-width:760px){
  /* la tête de la fiche ne colle plus pendant la saisie du montant (le clavier prend la moitié de l'écran) */
  .paie-box .btn{min-height:var(--h-touch)}
  /* la ligne du paiement fournisseur tient sur une ligne : « (chauffeur) » et le mot « Modifier » s'effacent (l'icône reste,
     sa zone de toucher fait 44 px) */
  .paie-box .paie-k .muted,.paie-box [data-paieact="modifier"] span{display:none}
  .paie-box [data-paieact="modifier"]{position:relative; width:var(--h-sm); min-width:var(--h-sm); min-height:var(--h-sm); padding:0; justify-content:center}
  .paie-box [data-paieact="modifier"]::after{content:''; position:absolute; inset:-6px}
  /* « Me l'assigner » dans la barre du bas : WhatsApp devient une icône de 44 px, et le geste s'écrit « Moi » */
  /* la ligne « Moi » du panneau : le bouton passe dessous, sur toute la largeur */
  /* « Trouvé dans l'historique » : l'état passe sous le trajet */
  .bk-hist-r{display:grid; grid-template-columns:72px minmax(0,1fr); column-gap:var(--sp-3); row-gap:var(--sp-1); align-items:start}
  .bk-hist-r>.pill{grid-column:2; justify-self:start}
  .bk-hist-q{width:auto}
  .ch-fav-f{margin:var(--sp-2) 0 0; width:100%}
  .ch-fav-f .sel{flex:1 1 100%; max-width:none}
}

/* ====== LOT J — NUIT & OR : LA MARQUE, ET PLUS DE COULEUR ======
   youcef, 05/10/2026 : « l'admin fait encore trop Claude ; ajoute également un peu plus de couleur ». Son choix : « Nuit & or
   Novalia ». Les jetons vivent en tête de feuille ; ici, seulement ce qui les pose sur les composants :
     1. la barre latérale nuit (les deux thèmes), le logo, l'écran ouvert = un fond plus clair, un filet or, l'icône or ;
     2. au téléphone, la barre du bas garde son thème, l'onglet actif passe au vert ;
     3. le titre de l'écran porte un court filet or ;
     4. les chiffres clés retrouvent leur icône, dans une pastille teintée par famille (argent, à venir / chauffeur, courses,
        alertes) ;
     5. les statuts en pastilles teintées (fond doux, texte foncé AA, point vif), dans les listes, les cartes, le Dispatch ;
     6. les canaux et les sites d'origine en puces de leur couleur ;
     7. ce qui prenait l'indigo comme couleur de DONNÉE (et serait devenu un second vert) : une teinte à lui ;
     8. la connexion et le chargement aux couleurs de la marque.
   Aucune logique d'écran ne change. Tout en jetons ; la mise en page tient à 390 px. */

/* ---- 1. La barre latérale : nuit dans les deux thèmes ---- */
#sidebar{background:var(--side); color:var(--side-ink); border-right:1px solid var(--side-line); scrollbar-color:rgba(255,255,255,.18) transparent}
#sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-color:var(--side)}
#sidebar .brand{gap:var(--sp-2)}
#sidebar .brand .mark{width:28px; height:28px; border-radius:var(--r-sm); background:var(--nuit); color:var(--or); font-size:var(--fs-15); font-weight:700}
#sidebar .brand .nm{font-weight:600; letter-spacing:-.01em}
#sidebar .brand .build{color:var(--side-faint)}
#sidebar .side-actions>.btn,#sidebar .search#searchBox{background:rgba(255,255,255,.06); color:var(--side-ink); border:1px solid rgba(255,255,255,.12); box-shadow:none}
#sidebar .side-actions>.btn:hover,#sidebar .search#searchBox:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); box-shadow:none}
#sidebar .side-actions>.btn svg{color:var(--or)}
#sidebar .search#searchBox svg{color:var(--side-muted)}
#sidebar .search#searchBox:hover svg{color:var(--side-ink)}
#sidebar .navgrp{color:var(--side-faint)}
#sidebar nav button{color:var(--side-muted)}
#sidebar nav button:hover{background:var(--side-hover); color:var(--side-ink)}
#sidebar nav button.on{background:var(--side-on); color:var(--side-ink); font-weight:600}
#sidebar nav button.on .ic{color:var(--or)}
#sidebar nav button.on::before{display:block; content:''; position:absolute; left:-10px; top:5px; bottom:5px; width:3px; border-radius:var(--r-nul) var(--r-xs) var(--r-xs) var(--r-nul); background:var(--or)}
#sidebar nav button .badge-n{background:var(--side-pastille); color:var(--side-pastille-texte)}
#sidebar nav button .badge-n.bad{background:var(--side-alerte); color:var(--on-couleur)}
#sidebar .foot{border-top-color:var(--side-line)}
#sidebar .foot button{color:var(--side-muted)}
#sidebar .foot button .ic{color:var(--side-icone)}
#sidebar .foot button:hover,#sidebar .foot button.on{background:var(--side-hover); color:var(--side-ink)}
#sidebar .foot button:hover .ic,#sidebar .foot button.on .ic{color:var(--side-ink)}
#sidebar .me-blk .mtx b{color:var(--side-ink)}
#sidebar .me-blk .mtx small{color:var(--side-faint)}

/* ---- 2. Au téléphone : la barre du bas garde son thème, l'écran ouvert est vert ---- */
@media (max-width:1040px){
  #mobileNav button.on{color:var(--texte-accent); font-weight:600}
}

/* ---- 3. Le titre de l'écran : un court filet or ---- */
#topbar h2{padding:var(--sp-2) 0}

/* ---- 4. Les chiffres clés : l'icône revient, dans une pastille de sa famille ---- */
.kpi .kh{gap:var(--sp-2)}
.kpi .kic{display:inline-grid; place-items:center; flex:none; width:28px; height:28px; border-radius:var(--r-sm); background:var(--kic-neutre-fond); color:var(--kic-neutre)}
.kpi .kic svg{width:16px; height:16px}
.kpi .kic.g{background:var(--kic-argent-fond); color:var(--kic-argent)}
.kpi .kic.gold{background:var(--kic-or-fond); color:var(--kic-or)}
.kpi .kic.v{background:var(--kic-courses-fond); color:var(--kic-courses)}
.kpi .kic.warn{background:var(--kic-alerte-fond); color:var(--kic-alerte)}
/* un chiffre urgent prend la pastille d'alerte, qui dit l'urgence : le point devant le libellé (V92) s'efface */
.kpi.urgent .kic{background:var(--kic-alerte-fond); color:var(--kic-alerte)}
.kpi.urgent .lab::before{content:none}
/* chiffre clé « GJ » (libellé, valeur, contexte, variation) : la pastille passe en tête, la variation reste en bas */
.kpi.gj .kh{display:contents}
.kpi.gj .kic{order:-1; margin-bottom:var(--sp-1)}
.kpi.gj .kpi-var{order:3; margin-top:2px}
@media (min-width:1100px){
  /* « Le mois en cours » (1/3 de la tête) : une ligne par chiffre — la pastille, le libellé, le chiffre */
  .ov-tete #ovMois .kpis .kpi{grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"ic lab val" "sub sub sub" "kh kh kh"}
  .ov-tete #ovMois .kpis .kpi .kic{grid-area:ic; order:0; margin:0}
  .ov-tete #ovMois .kpis .kpi .kpi-var{grid-area:kh; margin:var(--sp-1) 0 0}
}

/* ---- 5. Les statuts : une pastille teintée (fond doux, texte foncé AA, point vif) ---- */
.pill:is(.a_assigner,.confirmee,.assignee,.en_attente_paiement,.live,.terminee,.annulee,.no_show,.incident,.warn,.bad){
  gap:5px; padding:1px var(--sp-2) 1px 7px; border-radius:var(--r-pilule); font-weight:600; background:var(--st-f); color:var(--st-t)}
.pill:is(.a_assigner,.confirmee,.assignee,.en_attente_paiement,.live,.terminee,.annulee,.no_show,.incident) .pd,
.pill:is(.warn,.bad)::before{width:6px; height:6px; background:var(--st-p)}
/* les états « tout va bien » des autres écrans (Prêt à rouler, Disponible, Archivée…) restent un point et un mot : la couleur
   pleine est gardée pour ce qui demande un regard */
.pill.a_assigner,.pill.bad{--st-f:var(--st-aassigner-fond); --st-t:var(--st-aassigner-texte); --st-p:var(--st-aassigner-point)}
.pill.confirmee{--st-f:var(--st-confirmee-fond); --st-t:var(--st-confirmee-texte); --st-p:var(--st-confirmee-point)}
.pill.assignee{--st-f:var(--st-assignee-fond); --st-t:var(--st-assignee-texte); --st-p:var(--st-assignee-point)}
.pill.en_attente_paiement{--st-f:var(--st-attente-fond); --st-t:var(--st-attente-texte); --st-p:var(--st-attente-point)}
.pill.live,.pill.live.a_bord{--st-f:var(--st-a-bord-fond); --st-t:var(--st-a-bord-texte); --st-p:var(--st-a-bord-point)}
.pill.live.en_route,.pill.warn{--st-f:var(--st-en-route-fond); --st-t:var(--st-en-route-texte); --st-p:var(--st-en-route-point)}
.pill.live.sur_place{--st-f:var(--st-sur-place-fond); --st-t:var(--st-sur-place-texte); --st-p:var(--st-sur-place-point)}
.pill.terminee{--st-f:var(--st-terminee-fond); --st-t:var(--st-terminee-texte); --st-p:var(--st-terminee-point)}
.pill.annulee{--st-f:var(--st-annulee-fond); --st-t:var(--st-annulee-texte); --st-p:var(--st-annulee-point)}
.pill.no_show,.pill.incident{--st-f:var(--st-incident-fond); --st-t:var(--st-incident-texte); --st-p:var(--st-incident-point)}
/* la carte d'une course (écran étroit, vue Cartes) : le même code couleur, en toutes lettres */
.bkc .l1 .st{padding:2px 10px 2px var(--sp-2); border-radius:var(--r-pilule); font-weight:600; background:var(--st-f,var(--st-confirmee-fond)); color:var(--st-t,var(--st-confirmee-texte))}
.bkc .l1 .st::before{width:6px; height:6px; background:var(--st-p,var(--st-confirmee-point))}
.bkc .st.et-a_assigner{--st-f:var(--st-aassigner-fond); --st-t:var(--st-aassigner-texte); --st-p:var(--st-aassigner-point)}
.bkc .st.et-assignee{--st-f:var(--st-assignee-fond); --st-t:var(--st-assignee-texte); --st-p:var(--st-assignee-point)}
.bkc .st.et-en_attente_paiement{--st-f:var(--st-attente-fond); --st-t:var(--st-attente-texte); --st-p:var(--st-attente-point)}
.bkc .st.et-en_route{--st-f:var(--st-en-route-fond); --st-t:var(--st-en-route-texte); --st-p:var(--st-en-route-point)}
.bkc .st.et-sur_place{--st-f:var(--st-sur-place-fond); --st-t:var(--st-sur-place-texte); --st-p:var(--st-sur-place-point)}
.bkc .st.et-a_bord{--st-f:var(--st-a-bord-fond); --st-t:var(--st-a-bord-texte); --st-p:var(--st-a-bord-point)}
.bkc .st.et-terminee{--st-f:var(--st-terminee-fond); --st-t:var(--st-terminee-texte); --st-p:var(--st-terminee-point)}
.bkc .st.et-annulee{--st-f:var(--st-annulee-fond); --st-t:var(--st-annulee-texte); --st-p:var(--st-annulee-point)}
.bkc .st:is(.et-no_show,.et-incident){--st-f:var(--st-incident-fond); --st-t:var(--st-incident-texte); --st-p:var(--st-incident-point)}
/* « en cours » au Dispatch et au calendrier : le teal d'« À bord » (le vert est l'action, et « avec chauffeur ») */
.lg-live::before,.dsprow.st-live{--st:var(--st-a-bord-point)}
.dspcard.live,.cal-ev.live{border-left-color:var(--st-a-bord-point)}
.cal-d.live,.live>.cal-d{background:var(--st-a-bord-point)}

/* un compteur dans une puce active (fond d'encre) : la couleur de la page, lisible dans les deux thèmes */
:is(.seg.fam,.screen .seg.tabs.crm-segs,.screen .seg.tabs.cn-segs) button.on :is(.cnt,.hubn){background:color-mix(in srgb,var(--page) 16%,transparent); color:var(--page)}

/* ---- 6. Les canaux et les sites d'origine : une puce de leur couleur ---- */
.chan{background:var(--surface-2); color:var(--ink-2); font-weight:600}
.chan.trip{background:var(--canal-trip-fond); color:var(--canal-trip-texte)}
.chan.mozio{background:var(--canal-mozio-fond); color:var(--canal-mozio-texte)}
.chan.direct{background:var(--canal-direct-fond); color:var(--canal-direct-texte)}
.chan.black{background:var(--canal-black-fond); color:var(--canal-black-texte); box-shadow:inset 0 0 0 1px rgba(200,168,102,.35)}
.chan.b2b{background:var(--canal-b2b-fond); color:var(--canal-b2b-texte)}
.chan.site{background:var(--canal-vtc-fond); color:var(--canal-vtc-texte)}
.badge.gold{background:var(--gold-soft); color:var(--gold-ink)}
.bk-site{font-weight:600}
.bk-site.s-novaliafleet{background:var(--canal-site-fond); color:var(--canal-site-texte)}
.bk-site.s-novaliavtcfrance{background:var(--canal-vtc-fond); color:var(--canal-vtc-texte)}
.bk-site.s-console{background:var(--canal-console-fond); color:var(--canal-console-texte)}

/* ---- 7. L'indigo servait aussi de couleur de DONNÉE, à côté d'un vert : chacun sa teinte ---- */
.nvpin .pu,.anafbar i.fait,.anafleg i.fait{background:var(--serie-1)}
.nvpin .ln{background:linear-gradient(var(--serie-1),var(--good))}
.evrow2.new .evic,.evrow2.new .evtype{background:var(--kic-courses-fond); color:var(--kic-courses)}
.evrow2.asg .evic,.evrow2.asg .evtype{background:var(--st-assignee-fond); color:var(--st-assignee-texte)}
.evrow2.quote .evic{background:var(--kic-or-fond); color:var(--kic-or)}
/* en sombre, le vert lumineux ne porte pas de texte blanc : les compteurs pleins passent sur le vert foncé (--btn) */
html[data-theme="dark"] :is(#hubBar button.on .hubn,.nvsteps button.on b,.dm-tete .cnt,.tirer.pret .tirer-rond,.btn.asg:hover){background:var(--btn)}

/* ---- 8. La connexion et le chargement : la nuit, l'or ---- */
#login,#bootLoad{background:var(--nuit)}
html[data-theme="dark"] :is(#login,#bootLoad){background:var(--side)}
#login .box{border:0; box-shadow:0 30px 80px -24px rgba(0,0,0,.65), 0 0 0 1px rgba(200,168,102,.22)}
#login .mark,#bootLoad .mark{width:48px; height:48px; border-radius:var(--r-md); background:var(--nuit); color:var(--or); font-size:var(--fs-22)}
#login .box>h3{font-size:var(--fs-20); letter-spacing:-.01em}
#bootLoad .bl-t{color:var(--side-ink); font-size:var(--fs-18)}
#bootLoad .bl-s{color:var(--side-faint)}
#bootLoad .bl-bar{background:rgba(255,255,255,.12)}
#bootLoad .bl-bar span{background:var(--or)}
#bootLoad .bl-msg{color:var(--side-muted)}
#bootLoad .bl-retry .btn.ghost{background:transparent; color:var(--side-ink); border-color:rgba(255,255,255,.22); box-shadow:none}
#bootLoad .bl-retry .btn.ghost:hover{background:rgba(255,255,255,.08)}

/* ---- 9. Les chiffres : tabulaires dans les colonnes et les listes (IBM Plex les a d'origine), proportionnels quand un
   chiffre est seul et grand (le chiffre de tête, la tendance, l'heure « Au volant ») — la règle des chiffres clés depuis
   V92 ; une référence s'écrit en IBM Plex Mono, comme partout ailleurs ---- */
:is(.ovh-v,.chart-hero b,.fi-hero b,.ob-big){font-variant-numeric:proportional-nums}
/* ====== LOT C — Mon dispatch automatique (la frise), la ligne du plan sur chaque course, les groupes de dispatch ====== */
/* la carte : le grand interrupteur, puis la frise des étapes « quand → quoi » reliées par un trait */
.pda-tete{display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-4); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); background:var(--surface-2)}
.pda-tete .rg-inter-l span{font-size:var(--fs-16); font-weight:600; color:var(--ink)}
.pda-frise{position:relative; list-style:none; margin:0 0 var(--sp-2); padding:0; display:flex; flex-direction:column; gap:var(--sp-4)}
.pda-frise::before{content:''; position:absolute; left:15px; top:16px; bottom:16px; width:2px; border-radius:var(--r-pilule); background:var(--border-strong)}
.pda-etape{position:relative; display:grid; grid-template-columns:32px minmax(0,1fr) auto; column-gap:var(--sp-3); align-items:start}
.pda-num{position:relative; display:grid; place-items:center; width:32px; height:32px; border-radius:var(--r-rond); border:2px solid var(--accent); background:var(--surface); color:var(--texte-accent); font-size:var(--fs-14); font-weight:700}
.pda-prix .pda-num{border-color:var(--warn); color:var(--texte-alerte)}
.pda-alerte .pda-num{border-color:var(--bad); color:var(--texte-danger)}
.pda-ko .pda-num{background:var(--fond-danger)}
.pda-corps{min-width:0}
.pda-lu{display:none}
.pda-phrase{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); font-size:var(--fs-14); line-height:var(--lh-texte); color:var(--ink)}
.pda-sel{-webkit-appearance:none; appearance:none; min-width:0; max-width:100%; min-height:36px; padding:4px 28px 4px 10px; border:1px solid var(--border-strong); border-radius:var(--r-sm);
  background-color:var(--surface); background-image:var(--chev); background-repeat:no-repeat; background-position:right 9px center; background-size:12px 12px;
  color:var(--ink); font-size:var(--fs-14); font-weight:600; text-overflow:ellipsis}
.pda-n{width:68px; min-height:36px; padding:4px 8px; border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font-size:var(--fs-14); font-weight:600; text-align:right}
.pda-sel:focus,.pda-n:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
.pda-sel:disabled,.pda-n:disabled{opacity:.75; cursor:default}
.pda-fl{color:var(--muted); font-weight:600}
.pda-mot{color:var(--ink-2)}
.pda-note{margin:var(--sp-1) 0 0; font-size:var(--fs-12); line-height:1.45; color:var(--muted)}
.pda-err{margin:var(--sp-1) 0 0; font-size:var(--fs-12); font-weight:500; color:var(--texte-danger)}
.pda-outils{display:flex; gap:2px}
.pda-ajout{margin:var(--sp-2) 0 var(--sp-4) 44px}
.pda-vide{margin:0 0 var(--sp-3); padding:var(--sp-3); border:1px dashed var(--border-strong); border-radius:var(--r-md); font-size:var(--fs-13); color:var(--ink-2)}
/* sous la frise : à quoi le plan s'applique, le garde-fou du prix, la règle d'arrivée */
.pda-blocs{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:var(--sp-3)}
.pda-bloc{display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md)}
.pda-bloc-t{font-size:var(--fs-13); font-weight:600; color:var(--ink)}
.pda-bloc .seg{align-self:flex-start}
.pda-bloc .dspmenus{margin-top:0}
.pda-soc{margin:0}
.pda-act{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4)}
.pda-act .btn[hidden]{display:none}
/* « Voir ce que ça ferait » : une course par ligne, en une phrase */
.pda-sim{margin-top:var(--sp-4); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); background:var(--surface-2)}
.pda-sim-t{margin:0 0 var(--sp-2); font-size:var(--fs-13); color:var(--ink-2)}
.pda-sim-l{list-style:none; margin:0 0 var(--sp-2); padding:0}
.pda-sim-l li{display:grid; grid-template-columns:104px minmax(0,1fr); gap:var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--border); font-size:var(--fs-13)}
.pda-sim-l li:first-child{border-top:0}
.pda-sim-h{font-family:var(--font-num); font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink)}
.pda-sim-x{display:flex; flex-direction:column; gap:2px; min-width:0}
.pda-sim-p{color:var(--ink-2)}
.pda-sim-hors .pda-sim-h,.pda-sim-hors b,.pda-sim-hors .pda-sim-p{color:var(--muted); font-weight:500}
/* la confirmation avant d'allumer : le plan en une phrase */
.pda-conf p{font-size:var(--fs-13); line-height:var(--lh-texte)}
.pda-conf .rg-note{margin-top:var(--sp-3)}
.pda-conf .pda-conf-phrase{margin:0 0 var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); background:var(--accent-soft); color:var(--ink); font-size:var(--fs-15)}
/* la ligne du plan sur une course (Dispatch, fiche) */
.pda-ligne{display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--sp-1) var(--sp-2); margin-top:var(--sp-1); font-size:var(--fs-12); line-height:1.45; color:var(--ink-2)}
.pda-ligne>.svgi{flex:none; margin-top:2px; color:var(--texte-accent)}
.pda-ligne-t{flex:1 1 180px; min-width:0}
.pda-ligne-t b{font-weight:600; color:var(--ink)}
.pda-geste{white-space:nowrap; font-size:var(--fs-12)}
.dsprow .dr-p{grid-column:2 / -1; margin-top:-4px}
.pda-st-attente_prix>.svgi{color:var(--texte-alerte)}
.pda-st-fini>.svgi{color:var(--texte-ok)}
.pda-st-pause>.svgi,.pda-st-arrete>.svgi,.pda-st-hors>.svgi{color:var(--muted)}
.fplan{margin:var(--sp-2) 0}
.fplan .pda-ligne{font-size:var(--fs-13)}
.pda-det{margin-top:var(--sp-2); font-size:var(--fs-12)}
.pda-det>summary{display:inline-flex; align-items:center; gap:var(--sp-1); min-height:var(--h-sm); cursor:pointer; list-style:none; font-weight:500; color:var(--texte-accent)}
.pda-det>summary::-webkit-details-marker{display:none}
.pda-det>summary::before{content:''; width:0; height:0; border-left:4px solid currentColor; border-top:3px solid transparent; border-bottom:3px solid transparent; transition:transform .15s var(--ease)}
.pda-det[open]>summary::before{transform:rotate(90deg)}
.pda-det-l{list-style:none; margin:var(--sp-2) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-1)}
.pda-det-l li{display:flex; align-items:flex-start; gap:var(--sp-2); color:var(--ink-2)}
.pda-det-l .svgi{flex:none; margin-top:2px}
.pda-det-ok .svgi{color:var(--texte-ok)}
.pda-det-ko .svgi{color:var(--texte-danger)}
.pda-det-avenir .svgi,.pda-det-neutre{color:var(--muted)}
/* la pastille en tête du Dispatch */
.pda-past{display:inline-flex; align-items:center; gap:var(--sp-1); white-space:nowrap}
.pda-pt{flex:none; width:8px; height:8px; border-radius:var(--r-rond); background:var(--point-neutre)}
.pda-past.on .pda-pt{background:var(--point-ok)}
.pda-past-c{display:none}
/* les groupes de dispatch */
.gdp-intro{margin:0 0 var(--sp-3); font-size:var(--fs-13); line-height:var(--lh-texte); color:var(--ink-2)}
.gdp-liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2)}
.gdp-l{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--sp-1) var(--sp-3); align-items:center; padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface)}
.gdp-l-t{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); font-size:var(--fs-14); color:var(--ink)}
.gdp-l-s{grid-column:1; font-size:var(--fs-12); color:var(--muted)}
.gdp-l-u{grid-column:1; display:flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-12); color:var(--texte-accent)}
.gdp-l-a{grid-column:2; grid-row:1 / span 3; display:flex; gap:var(--sp-1)}
.gdp-vide{margin:var(--sp-2) 0; font-size:var(--fs-13); color:var(--muted)}
.gdp-act{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4)}
.gdp-type{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2)}
.gdp-lab{font-size:var(--fs-13); font-weight:500; color:var(--ink-2)}
.gdp-aide{margin:0 0 var(--sp-3); font-size:var(--fs-12); line-height:var(--lh-texte); color:var(--muted)}
.gdp-q{margin:var(--sp-3) 0 var(--sp-2)}
.gdp-choix{max-height:300px; overflow:auto; padding:0 var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md)}
.gdp-o{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:var(--sp-2); align-items:center; padding:var(--sp-2) 0; border-top:1px solid var(--border); cursor:pointer}
.gdp-o:first-child{border-top:0}
.gdp-o input{grid-row:1 / span 2}
.gdp-o-n{font-size:var(--fs-13); font-weight:500; color:var(--ink)}
.gdp-o small{grid-column:2; font-size:var(--fs-12); color:var(--muted)}
.gdp-apercu{margin-top:var(--sp-3); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--surface-2); font-size:var(--fs-13); color:var(--ink)}
.gdp-warn{margin:var(--sp-1) 0 0; font-size:var(--fs-12); color:var(--texte-alerte)}
@media(max-width:1100px){
  .pda-past-l{display:none}
  .pda-past-c{display:inline}
}
@media(max-width:600px){
  .dsprow .dr-p{grid-column:1 / -1; margin-top:0}
  .pda-det>summary{min-height:var(--h-touch)}
  .pda-geste{position:relative}
  .pda-geste::after{content:''; position:absolute; inset:-12px -8px}   /* 44 px de toucher, sans grossir la ligne */
  .pda-tete{padding:var(--sp-3)}
  .pda-etape{grid-template-columns:32px minmax(0,1fr); row-gap:var(--sp-1)}
  .pda-outils{grid-column:2; justify-content:flex-start}
  .pda-sel,.pda-n{min-height:var(--h-touch); font-size:var(--fs-input-mobile)}
  .pda-sel{width:100%}
  /* les menus coupent leurs phrases à cette largeur : l'étape se lit en entier au-dessus d'eux */
  .pda-lu{display:block; margin:4px 0 var(--sp-2); font-size:var(--fs-15); font-weight:600; line-height:1.4; color:var(--ink)}
  .pda-fl{display:none}
  .pda-ajout{margin-left:0}
  .pda-act .btn{flex:1 1 auto; min-height:var(--h-touch)}
  .pda-sim{padding:var(--sp-3)}
  .pda-sim-l li{grid-template-columns:1fr; gap:2px}
  .gdp-l{grid-template-columns:1fr}
  .gdp-l-a{grid-column:1; grid-row:auto}
  .gdp-o{min-height:var(--h-touch)}
  .gdp-choix{max-height:50vh}
}
/* ====== LOT D — CANDIDATURES : E-MAIL DIRECT ET RELANCE AUTOMATIQUE 24 H ====== */
/* « E-mail automatique » en tête de l'écran : son état d'un coup d'œil */
/* sur la carte : « relance auto demain 14:05 », « relance envoyée », « relance : échec » */
.cd-auto{display:inline-flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-11); color:var(--muted); white-space:nowrap}
.cd-auto .svgi{flex:none; width:12px; height:12px}
.cd-auto.prevue{color:var(--texte-info)}
.cd-auto.ok{color:var(--texte-ok)}
.cd-auto.ko{color:var(--texte-alerte)}
/* la fiche : l'historique des e-mails */
.cd-histo{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2)}
.cd-histo li{display:flex; align-items:flex-start; gap:var(--sp-2); font-size:var(--fs-13)}
.cd-histo li>.svgi{flex:none; width:15px; height:15px; margin-top:2px; color:var(--faint)}
.cd-histo li.cd-h-ok>.svgi{color:var(--point-ok)}
.cd-histo li.cd-h-ko>.svgi{color:var(--point-alerte)}
.cd-histo li.cd-h-att>.svgi{color:var(--point-info)}
.cd-h-t{flex:1; min-width:0; display:flex; flex-direction:column}
.cd-h-t b{font-weight:500; color:var(--ink)}
.cd-h-t small{font-size:var(--fs-12); color:var(--muted); overflow-wrap:anywhere}
.cd-histo li .btn{flex:none}
.cd-mail{text-align:left; overflow-wrap:anywhere}
/* la fenêtre de rédaction et l'aperçu habillé */
.cd-ec-tete{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2); margin:0 0 var(--sp-3)}
.cd-ec-texte{min-height:220px; resize:vertical; line-height:1.5}
.cd-ec-note{margin:0}
.cd-rendu{height:520px}
/* la barre des gestes colle au bas de la fenêtre ; son ombre pleine couvre la marge de défilement sous elle (sinon le texte y passe) */
.cd-go{position:sticky; bottom:0; z-index:var(--z-collant); display:flex; justify-content:flex-end; gap:var(--sp-2); margin:var(--sp-4) 0 0; padding:var(--sp-3) 0; background:var(--elevated); border-top:1px solid var(--border); box-shadow:0 var(--sp-5) 0 var(--elevated)}
/* « E-mail automatique » : le réglage à gauche, l'aperçu à droite */
.cd-rg-brevo{margin:0 0 var(--sp-3)}
.cd-rg-haut{display:flex; flex-direction:column; gap:var(--sp-2); margin:0 0 var(--sp-4); padding:var(--sp-3) var(--sp-4); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-3)}
.cd-rg-compte{display:flex; align-items:center; gap:var(--sp-2); margin:0; font-size:var(--fs-13); color:var(--ink-2)}
.cd-rg-compte .svgi{flex:none; width:15px; height:15px; color:var(--faint)}
.cd-rg-grille{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-5); align-items:start}
.cd-rg-col{min-width:0}
.cd-rg-l{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); margin:0 0 var(--sp-3)}
.cd-rg-lab{min-width:56px; font-size:var(--fs-12); font-weight:500; color:var(--ink-2)}
.cd-rg-profils{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4)}
.cd-rg-case{display:inline-flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-13); cursor:pointer}
.cd-rg-aide{font-size:var(--fs-12); color:var(--muted)}
.cd-rg-h{margin:var(--sp-4) 0 var(--sp-2); font-size:var(--fs-13); font-weight:600; color:var(--ink)}
.cd-rg-puces{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:0 0 var(--sp-3)}
.cd-rg-ap{position:sticky; top:0}
.cd-rg-ap-h{display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-2)}
.cd-rg-ap-h .btn{margin-left:auto}
.cd-rg-essai{margin:var(--sp-3) 0 0}
.cd-rg-essai-l{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.cd-rg-essai-l input{flex:1 1 200px; min-width:0}
@media (max-width:760px){
  /* au téléphone, la recherche garde sa largeur : « E-mail automatique » passe sur sa propre ligne, au pouce */
  .cd-ec-tete{flex-direction:column; align-items:stretch}
  .cd-ec-tete .seg{width:100%}
  .cd-ec-tete .seg button{flex:1 1 0; justify-content:center}
  .cd-rendu{height:460px}
  /* la fenêtre est une feuille qui défile dans sa propre boîte : la barre colle à son bord bas, marge comprise */
  .cd-go{bottom:calc(-1 * (var(--sp-4) + env(safe-area-inset-bottom,0px))); padding-bottom:calc(var(--sp-3) + var(--sp-4) + env(safe-area-inset-bottom,0px)); box-shadow:none}
  .cd-go .btn{flex:1 1 0; justify-content:center; min-height:var(--h-touch)}
  .cd-rg-grille{grid-template-columns:1fr; gap:var(--sp-3)}
  .cd-rg-ap{position:static}
  .cd-rg-l .seg{width:100%}
  .cd-rg-l .seg button{flex:1 1 0; justify-content:center}
  .cd-rg-puces .seg{width:100%}
  .cd-rg-puces .seg button{flex:1 1 0; justify-content:center}
  .cd-rg-essai-l .btn{flex:1 1 100%; justify-content:center}
  .cd-histo li{flex-wrap:wrap}
}
/* ====== LOT G — Finances › L’essentiel (gagné, je dois, on me doit, mois par mois) et « Plus » dans la barre d’onglets ====== */
/* la barre d'onglets : « L'essentiel · Paiements · Factures · Plus ▾ » — « Plus » reste visible, la rangée défile seule */
#hubBar:has(>.hub-plus){display:flex; align-items:stretch}
#hubBar:has(>.hub-plus)>.seg.tabs{flex:0 1 auto; min-width:0}
.hub-plus{flex:none; display:flex}
.hub-plus-btn{position:relative; display:inline-flex; align-items:center; gap:var(--sp-1); min-height:var(--h-lg); padding:0 12px; border:0; border-radius:var(--r-nul); background:transparent; box-shadow:none;
  color:var(--muted); font:inherit; font-size:var(--fs-14); font-weight:600; line-height:20px; white-space:nowrap; cursor:pointer}   /* comme un onglet de la barre */
.hub-plus-btn>span{max-width:18ch; overflow:hidden; text-overflow:ellipsis}
.hub-plus-court{display:none}
.hub-plus-btn .svgi{width:14px; height:14px; flex:none; transition:transform .15s var(--ease)}
.hub-plus.on .hub-plus-btn .svgi{transform:rotate(180deg)}
.hub-plus-btn::after{content:''; position:absolute; left:12px; right:12px; bottom:0; height:2px; border-radius:var(--r-xs); background:transparent; transition:background .12s}
.hub-plus-btn:hover,.hub-plus.on .hub-plus-btn{color:var(--ink)}
.hub-plus-btn.on{color:var(--ink)}
.hub-plus-btn.on::after{background:var(--accent)}
.hub-plus .dd-menu{min-width:240px}
.hub-plus .dd-it>.svgi{width:16px; height:16px; flex:none; color:var(--muted)}
.hub-plus .dd-it.on>.svgi{color:var(--texte-accent)}

/* la période */
.ess-per{flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-4)}
.ess-per .ess-mois{max-width:220px}
.ess-per-lib{font-size:var(--fs-14); font-weight:600; color:var(--ink)}

/* les trois cartes : côte à côte au bureau, l'une sous l'autre au téléphone */
.ess-cartes{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:var(--sp-4); align-items:stretch; margin-bottom:var(--sp-4)}
.ess-cartes>.card{margin:0}
.ess-carte{display:flex; flex-direction:column}
.ess-carte>.ch h3{font-size:var(--fs-15)}
.ess-tag{display:inline-flex; align-items:center; padding:2px var(--sp-2); border-radius:var(--r-pilule); background:var(--surface-2); color:var(--muted); font-size:var(--fs-12); font-weight:500; white-space:nowrap}
.ess-chiffre{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); margin-top:var(--sp-1)}
.ess-v{font-family:var(--font-num); font-size:var(--fs-48); font-weight:600; letter-spacing:-.035em; line-height:1.05; color:var(--ink); font-variant-numeric:tabular-nums}
.ess-v.zero{color:var(--faint)}
.ess-v.neg{color:var(--texte-danger)}
.ess-chiffre .kpi-var{margin-top:0}
.ess-chiffre .delta{display:inline-flex; align-items:center; gap:var(--sp-1); padding:2px var(--sp-2); border-radius:var(--r-puce); font-family:var(--font-num); font-size:var(--fs-13); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.ess-chiffre .delta svg{width:13px; height:13px; flex:none}
.ess-chiffre .delta.g{color:var(--texte-ok); background:var(--fond-ok)}
.ess-chiffre .delta.r{color:var(--texte-danger); background:var(--fond-danger)}
.ess-chiffre .delta.n{color:var(--muted); background:transparent; padding:0}
.ess-chiffre .kpi-vs{font-size:var(--fs-13); color:var(--muted)}
.ess-phrase{margin:var(--sp-2) 0 0; font-size:var(--fs-13); line-height:var(--lh-texte); color:var(--ink-2); max-width:60ch}
.ess-retard{color:var(--texte-danger); font-weight:600}
.ess-notes{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-3); margin-top:var(--sp-3); font-size:var(--fs-12); line-height:var(--lh-texte); color:var(--muted)}
.ess-notes .lnk{font-size:var(--fs-13)}
.ess-notes .lnk .svgi{width:14px; height:14px; vertical-align:-2px}

/* d'où vient le bénéfice : une ligne par mouvement, les montants alignés */
.ess-lignes{list-style:none; margin:var(--sp-4) 0 0; padding:0}
.ess-lignes li{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--grid); font-size:var(--fs-14); color:var(--ink-2)}
.ess-lignes li b{color:var(--ink); white-space:nowrap}
.ess-lignes .ess-entree b{font-weight:600}
.ess-l small{display:block; margin-top:2px; font-size:var(--fs-12); color:var(--muted)}

/* les cinq plus gros : le nom et « depuis le … », le montant, le geste */
.ess-liste{list-style:none; margin:var(--sp-4) 0 0; padding:0}
.ess-liste li{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; column-gap:var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--grid)}
.ess-nom{display:flex; flex-direction:column; min-width:0}
.ess-nom b{font-size:var(--fs-14); font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ess-nom small{font-size:var(--fs-12); line-height:var(--lh-texte); color:var(--muted); overflow-wrap:anywhere}
.ess-mois-l{font-weight:400; color:var(--muted)}
.ess-liste .cash{font-size:var(--fs-15); font-weight:600; color:var(--ink); white-space:nowrap}
.ess-encore{margin:var(--sp-2) 0 0; font-size:var(--fs-12); color:var(--muted)}
.ess-pied{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin-top:auto; padding-top:var(--sp-3)}
.ess-pied .lnk{font-size:var(--fs-13)}
.ess-pied .lnk .svgi{width:15px; height:15px; vertical-align:-3px}

/* mois par mois : le bénéfice en barres, ce que les clients ont payé en ligne fine (même échelle) ; une barre ouvre son mois */
.ess-histo{--ess-h:200px}
.ess-histo .ch .right{display:flex; align-items:center}
.ess-leg{display:inline-flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3); font-size:var(--fs-12); color:var(--muted)}
.ess-leg-b{display:inline-block; width:10px; height:10px; margin-right:-6px; border-radius:var(--r-xs); background:var(--fin-marge)}
.ess-leg-l{display:inline-block; width:14px; height:2px; margin-right:-6px; border-radius:var(--r-xs); background:var(--fin-ca)}
.ess-graphe{position:relative; margin-top:var(--sp-2)}
.ess-plot{position:absolute; left:0; right:0; top:0; height:var(--ess-h); pointer-events:none}
.ess-zero{position:absolute; left:0; right:0; height:1px; background:var(--baseline)}
.ess-ca{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.ess-ca polyline{fill:none; stroke:var(--fin-ca); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; opacity:.55}
.ess-barres{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0}
.ess-col{display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-1); min-width:0; padding:0; border:0; border-radius:var(--r-sm); background:transparent; color:inherit; font:inherit; cursor:pointer}
.ess-zone{position:relative; display:block; height:var(--ess-h); border-radius:var(--r-sm)}
.ess-barre{position:absolute; left:18%; right:18%; border-radius:var(--r-xs) var(--r-xs) var(--r-nul) var(--r-nul); background:var(--fin-marge); transition:filter .12s}
.ess-val{position:absolute; left:0; right:0; margin-bottom:var(--sp-1); font-size:var(--fs-11); font-weight:600; line-height:1.2; text-align:center; white-space:nowrap; color:var(--ink-2); font-variant-numeric:tabular-nums}
.ess-val.neg{color:var(--texte-danger)}   /* une perte : son montant au-dessus du zéro, la barre descend dessous */
.ess-barre.neg{border-radius:var(--r-nul) var(--r-nul) var(--r-xs) var(--r-xs); background:var(--fin-charges)}
.ess-col.encours .ess-barre{opacity:.6}
.ess-pt{position:absolute; left:50%; width:6px; height:6px; margin:0 0 -3px -3px; border-radius:var(--r-rond); background:var(--surface); box-shadow:0 0 0 1.5px var(--fin-ca); opacity:.8}
.ess-m{font-size:var(--fs-11); color:var(--muted); text-align:center; white-space:nowrap; overflow:hidden}
.ess-col:hover .ess-zone,.ess-col:focus-visible .ess-zone{background:var(--surface-2)}
.ess-col:hover .ess-barre{filter:brightness(1.08)}
.ess-col.on .ess-zone{background:var(--accent-soft)}
.ess-col.on .ess-m{color:var(--ink); font-weight:600}
.ess-col:focus-visible{outline:2px solid var(--ring); outline-offset:1px}
.ess-lecture{margin:var(--sp-3) 0 0; font-size:var(--fs-13); line-height:var(--lh-texte); color:var(--ink-2)}
.ess-lecture .neg{color:var(--texte-danger)}

@media (max-width:760px){
  /* « L'essentiel · Paiements · Factures · Plus » tiennent à 390 px : les onglets se serrent un peu quand « Plus » est là */
  #hubBar:has(>.hub-plus) .seg.tabs button{padding:0 8px}
  #hubBar:has(>.hub-plus) .seg.tabs button::after{left:8px; right:8px}
  .hub-plus-btn{min-height:var(--h-touch); padding:0 8px}
  .hub-plus-btn::after{left:8px; right:8px}
  .hub-plus-nom{display:none}
  .hub-plus-court{display:inline}
  .ess-per .seg{flex-wrap:nowrap}
  .ess-per .ess-mois{max-width:none; flex:1 1 160px}
  .ess-v{font-size:var(--fs-32)}
  .ess-cartes{gap:var(--sp-3)}
  .ess-histo{--ess-h:140px}
  .ess-barre{left:14%; right:14%}
  .ess-val{display:none}
  .ess-liste li{column-gap:var(--sp-2)}
  .ess-liste .ess-voir{min-width:var(--h-touch)}   /* rond au doigt, comme les autres boutons d’icône */
}
/* ====== LOT H — ANALYSE › SITE WEB : la visite, les sources, le chemin jusqu'au paiement ======
   youcef, 06/10/2026 : « améliore la partie analyse du site web ». La tête (période, quatre chiffres, courbe des visites
   et la période d'avant en pointillé), « D'où viennent les visiteurs » (une couleur par source, la même partout : jetons
   --aud-…), le chemin jusqu'au paiement rapporté aux visites (la plus grosse perte en évidence), puis les pages d'arrivée,
   langues et pays, téléphone ou ordinateur, campagnes, événements. Tout en jetons. */
:root{
  --aud-google-ads:var(--serie-1); --aud-chatgpt:var(--serie-2); --aud-google:var(--serie-3); --aud-bing:var(--serie-4);
  --aud-chatgpt-ads:var(--serie-5); --aud-microsoft-ads:var(--serie-6); --aud-facebook:var(--serie-7);
  --aud-direct:var(--serie-comparaison); --aud-inconnue:var(--serie-autres);
}
#audMount{display:flex; flex-direction:column; gap:var(--sp-4)}
#audMount>.card{margin:0}
.aud-per{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-4)}
.aud-per .seg{flex-wrap:nowrap}
#audMois{min-width:170px}
/* V1.9 (youcef 08/10 : « je dois pouvoir regarder par jour aussi ») — le jour : ‹ le calendrier › */
.aud-jour{display:inline-flex; align-items:center; gap:var(--sp-1)}
.aud-jour-i{width:auto; min-width:150px}
.aud-exemple{display:inline-flex; align-items:center; gap:var(--sp-1); margin-bottom:var(--sp-3); padding:var(--sp-1) var(--sp-3); border-radius:var(--r-pilule); background:var(--fond-info); color:var(--texte-info); font-size:var(--fs-12)}
.aud-exemple svg{width:14px; height:14px; flex:none}
/* « En ce moment » : un point vert qui pulse doucement quand quelqu'un est là ; gris et immobile sinon */
.aud-pouls{position:relative; display:inline-block; width:10px; height:10px; margin-right:var(--sp-2); border-radius:var(--r-rond); background:var(--point-ok); vertical-align:middle}
.aud-pouls::after{content:''; position:absolute; inset:0; border-radius:inherit; background:var(--point-ok); animation:aud-pouls 2.4s ease-out infinite}
.aud-pouls.zero{background:var(--point-neutre)}
.aud-pouls.zero::after{display:none}
@keyframes aud-pouls{0%{transform:scale(1); opacity:.5} 80%,100%{transform:scale(2.6); opacity:0}}
@media (prefers-reduced-motion:reduce){ .aud-pouls::after{animation:none; display:none} }
.aud-faits{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-4); margin-top:var(--sp-3); font-size:var(--fs-13); color:var(--muted); font-variant-numeric:tabular-nums}
.aud-courbe{margin-top:var(--sp-4); min-height:200px}
#audCourbe .ch-repere text{paint-order:stroke; stroke:var(--surface); stroke-width:4px; stroke-linejoin:round}
.aud-vide{margin-top:var(--sp-4)}
/* d'où viennent les visiteurs : la part de chaque source, puis le tableau */
.aud-parts{display:flex; gap:2px; height:12px; margin:0 0 var(--sp-4); border-radius:var(--r-pilule); overflow:hidden; background:var(--surface-2)}
.aud-parts span{min-width:3px}
.aud-dot{display:inline-block; width:10px; height:10px; flex:none; border-radius:var(--r-rond)}
.aud-src{display:inline-flex; align-items:center; gap:var(--sp-2); font-weight:500; color:var(--ink)}
.aud-src small{display:block; font-weight:400; font-size:var(--fs-12)}
.aud-table td.num{white-space:nowrap}
.aud-table td:first-child{white-space:normal; min-width:0}
.aud-table .aud-c{display:none}
.aud-table .aud-src{align-items:flex-start}
.aud-table .aud-src .aud-dot{margin-top:4px}
.aud-table td.num .muted{font-size:var(--fs-12)}
.aud-table tr.aud-inconnue td,.aud-table tr.aud-inconnue .aud-src{color:var(--muted); font-weight:400}
.aud-page{display:flex; flex-direction:column; gap:2px; min-width:0}
.aud-page .mono{font-size:var(--fs-13); color:var(--ink); overflow-wrap:anywhere}
.aud-page small{font-size:var(--fs-12); white-space:normal}
#audMount .card>.sub{margin-top:var(--sp-3); margin-bottom:0}
/* le chemin jusqu'au paiement */
.aud-ent{display:flex; flex-direction:column; gap:var(--sp-2)}
.aud-marche{display:flex; flex-direction:column; gap:var(--sp-1)}
.aud-m-t{display:flex; align-items:baseline; gap:var(--sp-2); font-size:var(--fs-13)}
.aud-m-t .aud-m-l{color:var(--ink-2); flex:1 1 auto; min-width:0}
.aud-m-t b{font-family:var(--font-num); font-size:var(--fs-15); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.aud-m-t .muted{font-size:var(--fs-12); min-width:96px; text-align:right; font-variant-numeric:tabular-nums}
.aud-m-piste{height:10px; border-radius:var(--r-xs); background:var(--surface-2); overflow:hidden}
.aud-m-barre{height:100%; border-radius:var(--r-xs); background:var(--serie-1)}
.aud-perte{display:flex; align-items:center; gap:var(--sp-1); margin:var(--sp-1) 0 0 var(--sp-3); font-size:var(--fs-12); color:var(--muted)}
.aud-perte svg{width:13px; height:13px; flex:none}
.aud-perte.pire{color:var(--texte-alerte); font-weight:600}
/* les cartes de deux en deux : à gauche la grande, à droite les petites en pile ; langues puis pays */
.aud-grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:var(--sp-4); align-items:start}
.aud-grille>.card{margin:0}
.aud-pile{display:flex; flex-direction:column; gap:var(--sp-4); min-width:0}
.aud-pile>.card{margin:0}
.aud-lp{display:flex; flex-direction:column; gap:var(--sp-4)}
.aud-lp h4{margin:0 0 var(--sp-2); font-size:var(--fs-12); font-weight:600; color:var(--muted)}
/* la barre dans sa piste : sa longueur ne dépend pas du texte qui la suit (une barre « 100 % » ne se tasse plus) */
.aud-piste{display:flex; flex:1 1 auto; min-width:48px}
.aud-piste .bar{flex:none; max-width:100%}
.aud-pied{display:flex; flex-direction:column; gap:var(--sp-1); padding:0 var(--sp-1); font-size:var(--fs-12); color:var(--muted); line-height:var(--lh-texte)}
@media (max-width:760px){
  .aud-per .seg{max-width:100%; overflow-x:auto; scrollbar-width:none}
  .aud-per #audMois{flex:1 1 100%; min-width:0}
  .aud-per .aud-jour{flex:1 1 100%}
  .aud-jour-i{flex:1; min-width:0}
  .aud-faits{gap:2px var(--sp-3); font-size:var(--fs-12)}
  .aud-m-t .muted{min-width:0}
  #audMount .hbar .aud-piste{grid-area:bar; min-width:0}
  /* les tableaux gardent l'essentiel (visites, réservations, taux) : le reste se replie */
  .aud-table .aud-sec{display:none}
  .aud-table .aud-l{display:none}
  .aud-table .aud-c{display:inline}
  .aud-table th{white-space:normal; vertical-align:bottom}
  .aud-table :is(th,td){padding-left:var(--sp-1); padding-right:var(--sp-1)}
  .aud-table :is(th,td):first-child{padding-left:0}
  .aud-table :is(th,td):last-child{padding-right:0}
}
/* ====== LOT I — ARRÊT DES VENTES : LES ARRÊTS DE GOODJOURNEY, LUS ET ÉCRITS CHEZ LUI ====== */
/* L'en-tête dit d'où viennent les arrêts, et mène à la page GoodJourney ; un bandeau rouge dit quand GoodJourney ne
   répond pas (la liste affichée est alors la dernière connue) ou refuse une écriture (rien n'est enregistré). */
.arv-bandeau{display:flex; gap:var(--sp-2); align-items:flex-start; margin:0; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md);
  background:var(--fond-danger); color:var(--texte-danger); font-size:var(--fs-13); line-height:1.5}
.arv-bandeau svg{width:16px; height:16px; flex:none; margin-top:2px}
.arv-bandeau p{margin:0}
.arv-bandeau b{color:var(--texte-danger); font-weight:600}
/* les deux menus (zones, catégories) respirent avant le message client */
.form-row.arv-choix{margin-bottom:var(--sp-4)}
/* ====== LOT N — LES RÉPONSES AUX PROPOSITIONS (Notifications › Dispatch, fiche) ET LES SONS ====== */
/* L'onglet Dispatch : une couleur par issue, sur le trait de gauche et l'icône (acceptée vert, refusée rouge, assignée par
   toi bleu, sans réponse ambre) ; le texte garde ses gris. */
/* « En attente de réponse », en tête de l'onglet : une ligne par proposition, le départ le plus proche d'abord */
.prp-tete{margin:var(--sp-2) 0 var(--sp-3); padding:var(--sp-3); border-radius:var(--r-lg); background:var(--surface-3); border:1px solid var(--border)}
.prp-h{display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2); margin-bottom:var(--sp-2); font-size:var(--fs-14); color:var(--ink)}
.prp-h .cnt{min-width:20px; padding:0 var(--sp-1); border-radius:var(--r-pilule); background:var(--fond-alerte); color:var(--texte-alerte); font-size:var(--fs-12); font-weight:700; text-align:center}
.prp-aide{flex:1 1 220px; color:var(--muted); font-size:var(--fs-12)}
.prp-vide{display:flex; align-items:center; gap:var(--sp-2); margin:0; color:var(--muted); font-size:var(--fs-13)}
.prp-vide .svgi{width:15px; height:15px; color:var(--texte-ok)}
.prp-l{display:flex; align-items:center; gap:var(--sp-2) var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--grid)}
.prp-c{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; padding:var(--sp-1) var(--sp-2); border:0; border-radius:var(--r-md); background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
.prp-c:hover{background:var(--surface-2)}
.prp-c:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.prp-l1{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2); font-size:var(--fs-14); color:var(--ink); overflow-wrap:anywhere}
.prp-pt{flex:none; width:8px; height:8px; border-radius:var(--r-rond); background:var(--warn)}
.prp-u .prp-pt{background:var(--bad); box-shadow:0 0 0 3px var(--bad-soft)}
.prp-o{padding:0 var(--sp-1); border-radius:var(--r-xs); background:var(--surface-2); color:var(--muted); font-size:var(--fs-11)}
.prp-m{color:var(--ink-2); font-size:var(--fs-12); overflow-wrap:anywhere}
.prp-u .prp-m{color:var(--texte-danger)}
.prp-a .prp-m{color:var(--texte-alerte)}
.prp-refus{color:var(--texte-danger); font-size:var(--fs-12)}
.prp-g{flex:none; display:flex; flex-wrap:wrap; gap:var(--sp-1); justify-content:flex-end}
.prp-g .svgi{width:14px; height:14px}
/* La fiche (section Affectation) : « Proposée à … à 18:12 — acceptée 7 s après » */
.fprop{margin:var(--sp-1) 0 var(--sp-2)}
.fprop-l{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-1); font-size:var(--fs-13); color:var(--ink-2)}
.fprop-l li{display:flex; align-items:baseline; gap:var(--sp-2); min-width:0; overflow-wrap:anywhere}
.fprop-l .prp-pt{transform:translateY(-1px)}
.fprop-ok .prp-pt{background:var(--good)}
.fprop-ko .prp-pt{background:var(--bad)}
.fprop-fin .prp-pt{background:var(--faint)}
.fprop-l .fprop-avant{color:var(--muted); font-size:var(--fs-12)}
/* Les sons : l'icône de la barre du haut (Muet d'un geste), la cloche qui attend un premier clic */
#sonBtn .svgi{width:18px; height:18px}
#sonBtn.son-muet{color:var(--muted)}
#sonBtn.son-bloque{position:relative; color:var(--texte-alerte)}
#sonBtn.son-bloque::after{content:""; position:absolute; right:6px; bottom:6px; width:7px; height:7px; border-radius:var(--r-rond); background:var(--warn); box-shadow:0 0 0 2px var(--page)}
.son-raccourci{display:inline-flex; align-items:center; gap:var(--sp-1); flex-wrap:wrap}
.son-puce{display:inline-flex; align-items:center; gap:var(--sp-1); min-height:32px; padding:0 var(--sp-2); border:1px solid var(--border); border-radius:var(--r-pilule); background:var(--surface); color:var(--ink-2); font:inherit; font-size:var(--fs-12); cursor:pointer}
.son-puce .svgi{width:15px; height:15px}
.son-puce:hover{background:var(--surface-2)}
.son-puce:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.son-puce.s-actif .svgi{color:var(--texte-ok)}
.son-puce.s-muet,.son-puce.s-eteint{color:var(--muted)}
.son-puce.s-bloque{border-color:var(--warn); background:var(--fond-alerte); color:var(--texte-alerte)}
/* Réglages › Mon compte › Mes notifications › Les sons : deux familles côte à côte (une sous l'autre au téléphone) */
.son-familles{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:var(--sp-3); margin-top:var(--sp-3)}
.son-fam{margin:0; padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); min-width:0}
.son-fam legend{padding:0 var(--sp-1); font-size:var(--fs-13); font-weight:600; color:var(--ink)}
.son-fam-u{border-color:color-mix(in srgb,var(--bad) 35%,var(--border))}
.son-fam-u legend{color:var(--texte-danger)}
.son-fam .rg-note{margin:0 0 var(--sp-2)}
.son-ligne{display:flex; align-items:center; gap:var(--sp-2); margin:var(--sp-2) 0}
.son-ligne label{flex:none; font-size:var(--fs-13); color:var(--ink-2)}
.son-ligne input[type="range"]{flex:1 1 auto; min-width:0; accent-color:var(--accent)}
.son-vol{flex:none; min-width:44px; text-align:right; font-family:var(--font-num); font-size:var(--fs-13); font-variant-numeric:tabular-nums; color:var(--ink)}
@media (max-width:760px){
  .prp-tete{padding:var(--sp-2)}
  .prp-l{flex-wrap:wrap}
  .prp-g{width:100%; justify-content:flex-start; padding-left:var(--sp-2)}
  .prp-g .btn{min-height:var(--h-touch)}
  .son-puce{min-height:var(--h-touch)}
  .son-ligne input[type="range"]{min-height:var(--h-touch)}
}
/* ====== LOT K — CLAUDE : CE QU'ON PEUT LUI DEMANDER, SES OUTILS (Réglages › Intégrations › Claude) ====== */
/* Les exemples se copient d'un geste (à coller dans Claude) ; la liste des outils vient du serveur, repliée par défaut,
   rangée par famille. « action · confirmation » : Claude demande confirmation avant ce qui part chez GoodJourney, un
   client ou un candidat. Une ligne grisée : le compte n'y a pas droit. */
.claude-ex{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:0 0 var(--sp-3)}
.claude-ex-b{appearance:none; max-width:100%; min-height:var(--h-sm); padding:var(--sp-1) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface-2); color:var(--ink-2); font:inherit; font-size:var(--fs-13); line-height:1.4; text-align:left; cursor:pointer}
.claude-ex-b:hover{border-color:var(--border-strong); color:var(--ink)}
.claude-ex-b:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.claude-inv{margin:0 0 var(--sp-3); font-size:var(--fs-13); line-height:1.6; color:var(--ink-2)}
.claude-inv b{font-weight:500; color:var(--ink)}
.claude-outils{margin:0 0 var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface)}
.claude-outils>summary{padding:var(--sp-2) var(--sp-3); font-size:var(--fs-13); font-weight:600; color:var(--ink); cursor:pointer}
.claude-outils>summary .muted{font-weight:400}
.claude-fams{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:var(--sp-3) var(--sp-5); padding:0 var(--sp-3) var(--sp-3)}
.claude-fam{min-width:0}
.claude-fam h4{margin:var(--sp-2) 0 var(--sp-1); font-size:var(--fs-12); font-weight:600; color:var(--muted)}
.claude-fam ul{margin:0; padding:0; list-style:none}
.claude-fam li{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px var(--sp-2); padding:var(--sp-1) 0; border-top:1px solid var(--border); font-size:var(--fs-13); color:var(--ink)}
.claude-fam li:first-child{border-top:0}
.claude-fam li .mono{font-size:var(--fs-12); color:var(--muted); overflow-wrap:anywhere}
.claude-fam li .badge{margin-left:auto}
.claude-fam li.off{color:var(--muted)}
/* Sur téléphone, les exemples tiennent sur une ligne qu'on fait défiler du doigt (le suivant dépasse : on voit qu'il y
   en a d'autres) au lieu d'une pile de onze boutons. */
@media (max-width:760px){
  .claude-ex-b{min-height:var(--h-touch); flex:none; max-width:78%; scroll-snap-align:start}
  .claude-ex{flex-wrap:nowrap; overflow-x:auto; max-width:100%; scrollbar-width:none; scroll-snap-type:x proximity}
  .claude-ex::-webkit-scrollbar{display:none}
  .claude-fam li .badge{margin-left:0}
}
/* ====== LOT S — SÉCURITÉ DE LA CONSOLE : réglages durcis, retrait de la 2FA avec un code ====== */
/* Réglages › Sécurité : les trois interrupteurs et les conseils respirent avant la liste des sessions */
#secuBox .rg-inters{margin:var(--sp-3) 0}
.secu-conseils{margin:0 0 var(--sp-4)}
/* Mon compte : le champ du code tient dans la rangée de la 2FA */
.secu-retrait{margin:0; min-width:140px; max-width:180px}

/* ====== LOT F — DS v2 « ITINÉRAIRE » : LES COMPOSANTS ds-* (F2, 06/10/2026) ======
   Les briques de la refonte (DIRECTION du lot R, § 4.3), rendues par js/noyau/ds.js : bouton, puce de filtre, segment,
   onglets, statut, canal, étiquette, code d'aéroport, avatar, mention et son aperçu, trajet, billet, prochain geste et
   suggestions, file « À traiter », chiffre, variation, bande, jauge, courbe, répartition, état vide, squelette, menu,
   section et faits d'une fiche, résumé de l'en-tête, toasts empilés avec « Annuler » ; et les listes (F3, suite) : champ de
   recherche, barre de vue collante, filtres posés et leur bilan, carte, tableau standard (jour, « maintenant », ligne ouverte).
   Tout est préfixé ds- (aucune collision avec .btn, .seg, .card, .pill, .chan…) et ne lit que des jetons. Les icônes de la
   console sont des svg.svgi : chaque composant leur donne leur taille. */

/* ---- bouton : plein (un par zone), contour (défaut), fantôme, danger, icône seule ; s 28 · m 32 · l 40 · xl 48 ---- */
.ds-btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-15); height:32px; padding:0 var(--sp-3); border:0; border-radius:var(--r-sm);
  font:inherit; font-size:var(--fs-14); font-weight:500; line-height:1; white-space:nowrap; cursor:pointer; text-decoration:none;
  color:var(--ink); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-strong), 0 1px 1px rgba(14,27,44,.04);
  transition:background var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease), transform var(--t-1) var(--ease)}
.ds-btn:hover{background:var(--surface-douce); text-decoration:none}
.ds-btn:active{transform:translateY(.5px) scale(.985)}
.ds-btn .svgi{width:16px; height:16px; color:var(--muted)}
.ds-btn.primaire{background:var(--btn); color:var(--btn-ink); box-shadow:var(--btn-shadow)}
.ds-btn.primaire .svgi{color:inherit}
.ds-btn.primaire:hover{background:var(--accent-hover); box-shadow:var(--btn-shadow-hover)}
.ds-btn.fantome{background:transparent; box-shadow:none; color:var(--ink-2)}
.ds-btn.fantome:hover{background:var(--surface-piste); color:var(--ink)}
.ds-btn.danger,.ds-btn.danger .svgi{color:var(--texte-danger)}
.ds-btn.icone{width:32px; padding:0}
.ds-btn.s{height:28px; padding:0 var(--sp-2); font-size:var(--fs-13); gap:var(--sp-1)}
.ds-btn.s.icone{width:28px; padding:0}
.ds-btn.l{height:40px; padding:0 var(--sp-4)}
.ds-btn.l.icone{width:40px; padding:0}
.ds-btn.xl{height:48px; padding:0 var(--sp-5); font-size:var(--fs-16); font-weight:600; border-radius:var(--r-md)}
.ds-btn.plein{width:100%}
.ds-btn:disabled{opacity:.4; cursor:default}
.ds-btn[aria-busy="true"]{color:transparent; position:relative; pointer-events:none}
.ds-btn[aria-busy="true"] .svgi,.ds-btn[aria-busy="true"] .ds-kbd{visibility:hidden}
.ds-btn[aria-busy="true"]::after{content:''; position:absolute; width:14px; height:14px; border-radius:var(--r-rond); border:2px solid var(--border-strong); border-top-color:var(--ink); animation:ds-tourne .7s linear infinite}
.ds-btn.primaire[aria-busy="true"]::after{border-color:rgba(255,255,255,.45); border-top-color:var(--btn-ink)}
@keyframes ds-tourne{to{transform:rotate(1turn)}}
.ds-btn .ds-kbd{margin-left:var(--sp-1)}
@media (pointer:coarse){ .ds-btn{min-height:var(--h-touch)} .ds-btn.icone{min-width:var(--h-touch)} }
/* une touche de clavier */
.ds-kbd{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 var(--sp-1); border-radius:var(--r-xs); background:var(--surface-piste); color:var(--muted);
  font:inherit; font-size:var(--fs-11); font-weight:500; line-height:1; box-shadow:inset 0 -1px 0 var(--border); white-space:nowrap}
.ds-kbd .svgi{width:12px; height:12px}

/* ---- puce de filtre (pilule : un filtre n'est pas un bouton), segment, onglets ---- */
.ds-puce{display:inline-flex; align-items:center; height:28px; border-radius:var(--r-pilule); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-strong); font-size:var(--fs-13); color:var(--ink); white-space:nowrap; max-width:100%}
.ds-puce-corps{display:inline-flex; align-items:center; gap:var(--sp-1); height:100%; padding:0 var(--sp-1) 0 var(--sp-3); border:0; background:none; font:inherit; color:inherit; cursor:pointer; border-radius:var(--r-pilule); min-width:0}
.ds-puce.sans-x .ds-puce-corps{padding-right:var(--sp-3)}
.ds-puce .k{color:var(--muted)}
.ds-puce .v{font-weight:600; overflow:hidden; text-overflow:ellipsis}
.ds-puce .svgi{width:13px; height:13px; color:var(--muted)}
.ds-puce .x{width:22px; height:22px; margin-right:var(--sp-05); border:0; border-radius:var(--r-rond); display:grid; place-items:center; color:var(--muted); background:none; cursor:pointer}
.ds-puce .x:hover{background:var(--surface-piste); color:var(--ink)}
.ds-puce.active{background:var(--accent-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
.ds-puce.ajout{gap:var(--sp-1); padding:0 var(--sp-3); background:transparent; box-shadow:none; border:1px dashed var(--border-strong); color:var(--muted); font:inherit; font-size:var(--fs-13); cursor:pointer}
.ds-puce.ajout:hover{color:var(--ink); border-color:var(--muted)}
.ds-segment{display:inline-flex; align-items:center; gap:var(--sp-05); padding:3px; border-radius:var(--r-md); background:var(--surface-piste); box-shadow:inset 0 0 0 1px var(--border-doux); max-width:100%; overflow-x:auto; scrollbar-width:none}
.ds-segment::-webkit-scrollbar{display:none}
.ds-segment button{flex:none; height:26px; padding:0 var(--sp-3); border:0; border-radius:var(--r-sm); background:none; font:inherit; font-size:var(--fs-13); font-weight:500; color:var(--muted); cursor:pointer; transition:background var(--t-1) var(--ease), color var(--t-1) var(--ease)}
.ds-segment button:hover{color:var(--ink)}
.ds-segment button.on{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(14,27,44,.12), 0 0 0 1px rgba(14,27,44,.04)}
html[data-theme="dark"] .ds-segment button.on{background:var(--surface-douce); box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.ds-onglets{display:flex; align-items:stretch; gap:var(--sp-5); border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none}
.ds-onglets::-webkit-scrollbar{display:none}
.ds-onglets button{position:relative; flex:none; display:inline-flex; align-items:center; gap:var(--sp-15); height:40px; padding:0; border:0; background:none; font:inherit; font-size:var(--fs-14); font-weight:500; color:var(--muted); cursor:pointer; white-space:nowrap}
.ds-onglets button:hover{color:var(--ink)}
.ds-onglets button.on{color:var(--ink); font-weight:600}
.ds-onglets button.on::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:var(--r-xs) var(--r-xs) 0 0}
.ds-onglets .n{min-width:20px; padding:0 var(--sp-15); border-radius:var(--r-pilule); background:var(--surface-piste); color:var(--muted); font-size:var(--fs-12); font-weight:500; line-height:18px; text-align:center}
.ds-onglets .on .n{background:var(--accent-soft); color:var(--texte-accent)}
.ds-onglets .n.alerte{background:var(--danger-doux); color:var(--texte-danger)}

/* ---- statut (point + mot ; pastille dans les en-têtes ; point vivant), canal, étiquette, code d'aéroport ---- */
.ds-statut{display:inline-flex; align-items:center; gap:var(--sp-15); font-size:var(--fs-13); font-weight:500; white-space:nowrap; color:var(--st-c,var(--ink-2))}
.ds-statut::before{content:''; width:7px; height:7px; border-radius:var(--r-rond); background:var(--st-p,var(--point-neutre)); flex:none}
.ds-statut.pastille{height:24px; padding:0 var(--sp-2); border-radius:var(--r-pilule); background:var(--st-f,var(--surface-piste)); font-weight:600}
.ds-statut.vif::before{animation:ds-pouls 2s var(--ease) infinite}
/* V2.0 (vitesse) — le point « vivant » respire par l'opacité et l'échelle, que le navigateur anime seul (compositeur) : l'onde en
   box-shadow d'avant redessinait la page à chaque image, tant qu'une course roulait à l'écran (60 calculs de style par seconde au
   repos, mesurés au banc). */
@keyframes ds-pouls{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.72)}}
.ds-st-aassigner{--st-c:var(--st-aassigner-texte); --st-p:var(--st-aassigner-point); --st-f:var(--st-aassigner-fond)}
.ds-st-confirmee{--st-c:var(--st-confirmee-texte); --st-p:var(--st-confirmee-point); --st-f:var(--st-confirmee-fond)}
.ds-st-assignee{--st-c:var(--st-assignee-texte); --st-p:var(--st-assignee-point); --st-f:var(--st-assignee-fond)}
.ds-st-en-route{--st-c:var(--st-en-route-texte); --st-p:var(--st-en-route-point); --st-f:var(--st-en-route-fond)}
.ds-st-sur-place{--st-c:var(--st-sur-place-texte); --st-p:var(--st-sur-place-point); --st-f:var(--st-sur-place-fond)}
.ds-st-a-bord{--st-c:var(--st-a-bord-texte); --st-p:var(--st-a-bord-point); --st-f:var(--st-a-bord-fond)}
.ds-st-terminee{--st-c:var(--st-terminee-texte); --st-p:var(--st-terminee-point); --st-f:var(--st-terminee-fond)}
.ds-st-annulee{--st-c:var(--st-annulee-texte); --st-p:var(--st-annulee-point); --st-f:var(--st-annulee-fond)}
.ds-st-attente{--st-c:var(--st-attente-texte); --st-p:var(--st-attente-point); --st-f:var(--st-attente-fond)}
.ds-st-incident{--st-c:var(--st-incident-texte); --st-p:var(--st-incident-point); --st-f:var(--st-incident-fond)}
.ds-canal{display:inline-flex; align-items:center; height:20px; padding:0 var(--sp-15); border-radius:var(--r-tag); font-size:var(--fs-12); font-weight:600; white-space:nowrap; text-decoration:none;
  background:var(--cn-f,var(--surface-piste)); color:var(--cn-t,var(--ink-2))}
a.ds-canal:hover{text-decoration:underline; text-underline-offset:2px}
.ds-cn-trip{--cn-f:var(--canal-trip-fond); --cn-t:var(--canal-trip-texte); --cn-p:var(--canal-trip-point)}
.ds-cn-mozio{--cn-f:var(--canal-mozio-fond); --cn-t:var(--canal-mozio-texte); --cn-p:var(--canal-mozio-point)}
.ds-cn-direct{--cn-f:var(--canal-direct-fond); --cn-t:var(--canal-direct-texte); --cn-p:var(--canal-direct-point)}
.ds-cn-site{--cn-f:var(--canal-site-fond); --cn-t:var(--canal-site-texte); --cn-p:var(--canal-site-point)}
.ds-cn-vtc{--cn-f:var(--canal-vtc-fond); --cn-t:var(--canal-vtc-texte); --cn-p:var(--canal-vtc-point)}
.ds-cn-console{--cn-f:var(--canal-console-fond); --cn-t:var(--canal-console-texte); --cn-p:var(--canal-console-point)}
.ds-cn-black{--cn-f:var(--canal-black-fond); --cn-t:var(--canal-black-texte); --cn-p:var(--canal-black-point)}
.ds-cn-b2b{--cn-f:var(--canal-b2b-fond); --cn-t:var(--canal-b2b-texte); --cn-p:var(--canal-b2b-point)}
.ds-cn-neutre{--cn-p:var(--point-neutre)}
.ds-tag{display:inline-flex; align-items:center; gap:var(--sp-1); height:20px; padding:0 var(--sp-15); border-radius:var(--r-tag); background:var(--surface-piste); color:var(--ink-2); font-size:var(--fs-12); font-weight:500; white-space:nowrap}
.ds-tag .svgi{width:12px; height:12px; color:var(--muted)}
.ds-tag.or{background:var(--or-doux); color:var(--or-ink)}
.ds-tag.urgent{background:var(--danger-doux); color:var(--texte-danger)}
.ds-tag.urgent .svgi{color:inherit}
.ds-iata{display:inline-flex; align-items:center; height:20px; padding:0 var(--sp-1); border-radius:var(--r-xs); background:var(--nuit); color:var(--or-clair); font-size:var(--fs-11); font-weight:700; letter-spacing:var(--approche-iata); flex:none}
html[data-theme="dark"] .ds-iata{background:var(--canal-black-fond)}
.ds-iata.doux,html[data-theme="dark"] .ds-iata.doux{background:var(--surface-piste); color:var(--ink); box-shadow:inset 0 0 0 1px var(--border)}
.ds-sous{font-size:var(--fs-13); color:var(--muted)}
.ds-ell{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}

/* ---- avatar (6 teintes réparties par nom ; « toi » nuit et or), mention et aperçu ---- */
.ds-avatar{width:28px; height:28px; border-radius:var(--r-rond); display:inline-grid; place-items:center; flex:none; font-size:var(--fs-11); font-weight:600; letter-spacing:.01em;
  background:var(--av-f,var(--surface-piste)); color:var(--av-t,var(--ink-2)); box-shadow:inset 0 0 0 1px rgba(14,27,44,.06)}
.ds-avatar.s{width:22px; height:22px; font-size:var(--fs-11)}
.ds-avatar.l{width:40px; height:40px; font-size:var(--fs-14)}
.ds-avatar.xl{width:56px; height:56px; font-size:var(--fs-20)}
.ds-avatar.carre{border-radius:var(--r-sm)}
.ds-av-1{--av-f:var(--st-confirmee-fond); --av-t:var(--st-confirmee-texte)}
.ds-av-2{--av-f:var(--st-terminee-fond); --av-t:var(--st-terminee-texte)}
.ds-av-3{--av-f:var(--or-doux); --av-t:var(--or-ink)}
.ds-av-4{--av-f:var(--canal-mozio-fond); --av-t:var(--canal-mozio-texte)}
.ds-av-5{--av-f:var(--st-sur-place-fond); --av-t:var(--st-sur-place-texte)}
.ds-av-6{--av-f:var(--st-a-bord-fond); --av-t:var(--st-a-bord-texte)}
.ds-av-moi{--av-f:var(--nuit); --av-t:var(--or)}
html[data-theme="dark"] .ds-av-moi{--av-f:var(--canal-black-fond)}
.ds-mention{display:inline-flex; align-items:center; gap:var(--sp-15); max-width:100%; min-width:0; color:var(--ink); font-weight:500; border-radius:var(--r-tag);
  padding:1px var(--sp-1) 1px 1px; margin:-1px 0 -1px -1px; cursor:pointer; text-decoration:none; vertical-align:middle}
.ds-mention:hover{background:var(--surface-piste); text-decoration:none}
.ds-mention .nom{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-bottom:1px solid transparent}
.ds-mention:hover .nom{border-bottom-color:var(--border-strong)}
.ds-mention .sous{color:var(--muted); font-weight:400; white-space:nowrap}
.ds-mention>.svgi{width:14px; height:14px; color:var(--muted)}
.ds-mention.inerte{cursor:default}
.ds-mention.inerte:hover{background:none}
.ds-mention.inerte:hover .nom{border-bottom-color:transparent}
.ds-apercu{position:fixed; z-index:var(--z-menu); width:280px; max-width:calc(100vw - var(--sp-4)); background:var(--elevated); border-radius:var(--r-md); box-shadow:var(--el-2); padding:var(--sp-4);
  opacity:0; transform:translateY(4px); pointer-events:none; transition:opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease)}
.ds-apercu.on{opacity:1; transform:none; pointer-events:auto}
.ds-apercu.statique{position:static; opacity:1; transform:none; pointer-events:auto}
.ds-apercu .h{display:flex; align-items:center; gap:var(--sp-3)}
.ds-apercu .h b{display:block; font-size:var(--fs-14); color:var(--ink)}
.ds-apercu .h small{display:block; color:var(--muted); font-size:var(--fs-12)}
.ds-apercu dl{display:grid; grid-template-columns:auto 1fr; gap:var(--sp-1) var(--sp-3); margin:var(--sp-3) 0 0; font-size:var(--fs-13)}
.ds-apercu dt{color:var(--muted)}
.ds-apercu dd{margin:0; text-align:right; font-weight:500; color:var(--ink)}
.ds-apercu .pied{display:flex; gap:var(--sp-2); margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--border)}

/* ---- trajet (● départ → ■ arrivée) et billet (l'en-tête d'une course, comme une carte d'embarquement) ---- */
.ds-trajet{display:grid; grid-template-columns:12px minmax(0,1fr); column-gap:var(--sp-2); align-items:center; min-width:0}
.ds-trajet .pt{width:8px; height:8px; border-radius:var(--r-rond); border:2px solid var(--ink-2); justify-self:center; background:var(--surface)}
.ds-trajet .pt.fin{border-radius:var(--r-xs); background:var(--ink-2)}
.ds-trajet .lien{width:2px; height:6px; background:var(--border-strong); justify-self:center}
.ds-trajet .lieu{font-size:var(--fs-14); line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.ds-trajet .lieu small{color:var(--muted); font-size:var(--fs-13)}
.ds-trajet.ligne{display:inline-flex; align-items:center; gap:var(--sp-2); white-space:nowrap; max-width:100%}
.ds-trajet.ligne>span:last-child:not(.ds-iata){overflow:hidden; text-overflow:ellipsis; min-width:0}
.ds-trajet.ligne .fl{color:var(--faint); flex:none; display:inline-flex}
.ds-trajet.ligne .fl .svgi{width:14px; height:14px}
.ds-billet{padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.ds-billet .haut{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap}
.ds-billet .quand{display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3); margin-top:var(--sp-4)}
.ds-billet .quand .h{font-size:var(--fs-44); font-weight:600; letter-spacing:var(--approche-44); line-height:.95; color:var(--ink)}
.ds-billet .quand .d{font-size:var(--fs-14); color:var(--muted)}
.ds-billet .quand .r{font-size:var(--fs-14); font-weight:600; color:var(--ink-2)}
.ds-billet .quand .r.urgent{color:var(--texte-danger)}
.ds-billet .codes{display:grid; grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr); align-items:start; gap:var(--sp-3); margin-top:var(--sp-5)}
.ds-billet .codes .c b{display:block; font-size:var(--fs-24); font-weight:600; letter-spacing:var(--approche-24); line-height:1.15; color:var(--ink); overflow:hidden; text-overflow:ellipsis}
.ds-billet .codes .c small{display:block; font-size:var(--fs-13); color:var(--muted); margin-top:var(--sp-05); line-height:1.35}
.ds-billet .codes .c.droite{text-align:right}
.ds-billet .codes .fleche{height:30px; display:grid; place-items:center; position:relative; color:var(--ink-2)}
.ds-billet .codes .fleche::before{content:''; position:absolute; left:0; right:0; top:50%; border-top:1.5px dashed var(--border-strong)}
.ds-billet .codes .fleche .svgi{position:relative; width:20px; height:20px; padding:0 var(--sp-05); background:var(--surface)}
.ds-billet .vol{display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-4); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); background:var(--surface-douce); font-size:var(--fs-13); color:var(--ink-2)}
.ds-billet .vol b{color:var(--ink)}
.ds-billet .vol .etat{margin-left:auto; color:var(--texte-ok); font-weight:600}
.ds-billet .vol .etat.retard{color:var(--texte-alerte)}
.ds-billet .meta{margin-top:var(--sp-3); font-size:var(--fs-13)}
.ds-billet .gestes{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4)}
.ds-legende{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); font-size:var(--fs-12); color:var(--muted)}
.ds-legende span{display:inline-flex; align-items:center; gap:var(--sp-15)}
.ds-legende .svgi{width:14px; height:14px}

/* ---- le prochain geste (urgent / attente / calme) et ses suggestions classées ---- */
.ds-geste{border-radius:var(--r-md); padding:var(--sp-4); background:var(--danger-doux); color:var(--ink)}
.ds-geste.attente{background:var(--alerte-doux)}
.ds-geste.calme{background:var(--surface-douce)}
.ds-geste .t{display:flex; align-items:center; gap:var(--sp-2); font-weight:600}
.ds-geste .t .svgi{width:16px; height:16px; color:var(--texte-danger)}
.ds-geste.attente .t .svgi{color:var(--texte-alerte)}
.ds-geste.calme .t .svgi{color:var(--muted)}
.ds-geste p{margin:var(--sp-1) 0 0; font-size:var(--fs-13); color:var(--ink-2)}
.ds-geste .liens{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin-top:var(--sp-3); font-size:var(--fs-13)}
.ds-suggestions{margin-top:var(--sp-3); display:grid; gap:var(--sp-2)}
.ds-sugg{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); border-radius:var(--r-sm); background:var(--surface); box-shadow:0 0 0 1px var(--border)}
.ds-sugg b{display:block; font-size:var(--fs-14); font-weight:600; color:var(--ink)}
.ds-sugg small{display:block; font-size:var(--fs-12); color:var(--muted)}
.ds-sugg .score{color:var(--texte-ok); font-weight:600}

/* ---- la file « À traiter » : un niveau, un titre, un détail, UN geste ; Fait / Plus tard au survol ---- */
.ds-file{list-style:none; margin:0; padding:0}
.ds-file li{display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-5); border-top:1px solid var(--border-doux);
  transition:background var(--t-1) var(--ease), opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease)}
.ds-file li:first-child{border-top:0}
.ds-file li:hover{background:var(--surface-douce)}
.ds-file .niv{width:28px; height:28px; border-radius:var(--r-sm); display:grid; place-items:center}
.ds-file .niv .svgi{width:16px; height:16px}
.ds-file .niv.urgent{background:var(--danger-doux); color:var(--texte-danger)}
.ds-file .niv.attention{background:var(--alerte-doux); color:var(--texte-alerte)}
.ds-file .niv.info{background:var(--info-doux); color:var(--texte-info)}
.ds-file .txt{min-width:0}
.ds-file .txt b{display:block; font-weight:600; font-size:var(--fs-14); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ds-file .txt>span{display:block; font-size:var(--fs-13); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ds-file .txt .urg{color:var(--texte-danger); font-weight:600}
.ds-file .act{display:flex; align-items:center; gap:var(--sp-1)}
.ds-file .act .sec{display:none; gap:var(--sp-1)}
@media (hover:hover){ .ds-file li:hover .act .sec,.ds-file li:focus-within .act .sec{display:inline-flex} }
.ds-file li.fait{opacity:0; transform:translateX(16px)}
.ds-file li.vide{display:flex; align-items:center; gap:var(--sp-3); color:var(--texte-ok)}
.ds-file li.vide .svgi{width:18px; height:18px}
.ds-file li.vide b{font-weight:600}
.ds-file li.vide:hover{background:none}

/* ---- les chiffres : libellé, valeur (zéro en gris, urgent en rouge), variation « vs quoi », bande à filets ---- */
.ds-chiffre .l{font-size:var(--fs-13); color:var(--muted); font-weight:500}
.ds-chiffre .v{display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-2); font-size:var(--fs-24); font-weight:600; letter-spacing:var(--approche-24); line-height:1.15; margin-top:var(--sp-1); color:var(--ink)}
.ds-chiffre .v small{font-size:var(--fs-14); font-weight:500; color:var(--muted); letter-spacing:0}
.ds-chiffre .v.zero{color:var(--muted)}
.ds-chiffre .s{font-size:var(--fs-12); color:var(--muted); margin-top:var(--sp-1)}
.ds-chiffre.alerte .v{color:var(--texte-danger)}
.ds-chiffre.hero .v{font-size:var(--fs-44); letter-spacing:var(--approche-44); line-height:1}
.ds-chiffre.hero .v small{font-size:var(--fs-24)}
.ds-chiffre.lien{cursor:pointer; border-radius:var(--r-sm)}
.ds-chiffre.lien:hover .l{color:var(--ink)}
.ds-var{display:inline-flex; align-items:center; gap:var(--sp-05); height:22px; padding:0 var(--sp-15) 0 var(--sp-1); border-radius:var(--r-tag); font-size:var(--fs-12); font-weight:600; letter-spacing:0; line-height:1}
.ds-var .svgi{width:13px; height:13px}
.ds-var.haut{background:var(--ok-doux); color:var(--texte-ok)}
.ds-var.bas{background:var(--danger-doux); color:var(--texte-danger)}
.ds-var.plat{background:var(--surface-piste); color:var(--muted)}
.ds-var+.ds-sous{font-size:var(--fs-12); font-weight:400; letter-spacing:0}
.ds-bande{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr)}
.ds-bande>*{padding:var(--sp-4) var(--sp-5); position:relative; min-width:0}
.ds-bande>*+*::before{content:''; position:absolute; left:0; top:var(--sp-4); bottom:var(--sp-4); width:1px; background:var(--border)}
.ds-bande .ds-chiffre .v{font-size:var(--fs-20)}
@media (max-width:760px){ .ds-bande{grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr))} .ds-bande>*+*::before{display:none} .ds-bande>*{padding:var(--sp-3) var(--sp-4)} }

/* ---- la jauge « réalisé + à venir = prévu », la courbe, la répartition ---- */
.ds-jauge{position:relative; height:10px; border-radius:var(--r-pilule); background:var(--surface-piste); display:flex}
.ds-jauge:has(.repere){margin-top:var(--sp-6)}
.ds-jauge>i{display:block; height:100%; border-radius:var(--r-pilule)}
.ds-jauge>i+i{margin-left:var(--sp-05)}
.ds-jauge .fait{background:var(--accent)}
.ds-jauge .avenir{background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--accent) 55%,transparent) 0 3px,color-mix(in srgb,var(--accent) 28%,transparent) 3px 6px)}
.ds-jauge .repere{position:absolute; top:-5px; bottom:-5px; width:2px; margin-left:-1px; border-radius:var(--r-xs); background:var(--ink-2)}
.ds-jauge .repere::after{content:attr(data-l); position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:var(--fs-11); color:var(--muted); white-space:nowrap; font-weight:500}
.ds-courbe{width:100%; height:auto; display:block; overflow:visible}
.ds-courbe .grille line{stroke:var(--chart-grille); stroke-width:1}
.ds-courbe .axe text{fill:var(--muted); font-size:var(--fs-11); font-family:var(--font-sans)}
.ds-courbe .aire-haut{stop-color:var(--chart-trait); stop-opacity:.22}
.ds-courbe .aire-bas{stop-color:var(--chart-trait); stop-opacity:0}
.ds-courbe .trait{fill:none; stroke:var(--chart-trait); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.ds-courbe .trait.encours{stroke-dasharray:3 4}
.ds-courbe .fantome{fill:none; stroke:var(--border-strong); stroke-width:1.5; stroke-dasharray:3 4}
.ds-courbe .evt rect{fill:var(--surface-piste); opacity:.8}
.ds-courbe .evt text{fill:var(--muted); font-size:var(--fs-11); font-family:var(--font-sans); font-weight:500}
.ds-courbe .pt-now{fill:var(--surface); stroke:var(--chart-trait); stroke-width:2}
.ds-barre100{display:flex; gap:var(--sp-05); height:12px; border-radius:var(--r-pilule); overflow:hidden}
.ds-barre100 i{display:block; height:100%; background:var(--cn-p,var(--point-neutre))}
.ds-rangs{display:grid; gap:var(--sp-1); margin-top:var(--sp-4)}
.ds-rang{display:grid; grid-template-columns:12px minmax(0,1fr) auto auto; align-items:center; gap:var(--sp-2); padding:var(--sp-1) var(--sp-2); margin:0 calc(-1 * var(--sp-2)); border-radius:var(--r-sm); font-size:var(--fs-13); color:var(--ink)}
.ds-rang[data-va]{cursor:pointer}
.ds-rang:hover{background:var(--surface-douce)}
.ds-rang i{width:10px; height:10px; border-radius:var(--r-xs); background:var(--cn-p,var(--point-neutre))}
.ds-rang .v{font-weight:600; text-align:right; font-variant-numeric:tabular-nums}
.ds-rang .p{width:40px; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums}

/* ---- états : vide (premier usage, filtre, tout est fait), squelette à la forme du contenu ---- */
.ds-vide{display:grid; justify-items:center; text-align:center; gap:var(--sp-2); padding:var(--sp-8) var(--sp-5)}
.ds-vide .pict{width:44px; height:44px; border-radius:var(--r-md); display:grid; place-items:center; background:var(--surface-piste); color:var(--muted)}
.ds-vide .pict .svgi{width:20px; height:20px}
.ds-vide .pict.ok{background:var(--ok-doux); color:var(--texte-ok)}
.ds-vide h4{margin:var(--sp-2) 0 0; font-size:var(--fs-16); font-weight:600; color:var(--ink)}
.ds-vide p{margin:0; max-width:420px; color:var(--muted); font-size:var(--fs-14)}
.ds-vide .ds-btn{margin-top:var(--sp-2)}
.ds-sq{display:grid; gap:var(--sp-3); padding:var(--sp-3) 0}
.ds-sq-rang{display:flex; align-items:center; gap:var(--sp-3)}
.ds-sq-chiffres{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.ds-sq-chiffre{display:grid; gap:var(--sp-2)}
.ds-squelette{display:block; height:12px; border-radius:var(--r-xs); background:linear-gradient(90deg,var(--squelette) 0 40%,var(--squelette-reflet) 50%,var(--squelette) 60% 100%); background-size:300% 100%; animation:ds-lueur 1.4s var(--ease) infinite}
.ds-squelette.rond{width:28px; height:28px; border-radius:var(--r-rond); flex:none}
.ds-squelette.grand{height:24px}
.ds-squelette.courbe{height:160px; border-radius:var(--r-md)}
.ds-squelette.w-15{width:15%} .ds-squelette.w-20{width:20%} .ds-squelette.w-40{width:40%} .ds-squelette.w-50{width:50%} .ds-squelette.w-70{width:70%} .ds-squelette.w-80{width:80%}
@keyframes ds-lueur{from{background-position:100% 0} to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){ .ds-squelette{animation:none} .ds-statut.vif::before{animation:none} }

/* ---- menu (titres, lignes avec raccourci, séparateurs), section et faits d'une fiche, résumé de l'en-tête ---- */
.ds-menu{position:fixed; z-index:var(--z-menu); min-width:220px; max-width:calc(100vw - var(--sp-4)); max-height:calc(100vh - var(--sp-4)); overflow-y:auto; background:var(--elevated); border-radius:var(--r-md); box-shadow:var(--el-2); padding:var(--sp-1); animation:ds-pop var(--t-2) var(--ease)}
.ds-menu.statique{position:static; animation:none}
@keyframes ds-pop{from{opacity:0; transform:translateY(-4px) scale(.98)} to{opacity:1; transform:none}}
.ds-menu button{display:flex; align-items:center; gap:var(--sp-2); width:100%; min-height:32px; padding:0 var(--sp-2); border:0; border-radius:var(--r-sm); background:none; font:inherit; font-size:var(--fs-14); text-align:left; color:var(--ink); cursor:pointer}
.ds-menu button:hover,.ds-menu button:focus-visible{background:var(--surface-piste); outline:none}
.ds-menu button .svgi{width:16px; height:16px; color:var(--muted)}
.ds-menu button .ds-kbd{margin-left:auto}
.ds-menu button.danger,.ds-menu button.danger .svgi{color:var(--texte-danger)}
.ds-menu button:disabled{opacity:.4; cursor:default}
.ds-menu hr{border:0; border-top:1px solid var(--border); margin:var(--sp-1) 0}
.ds-menu .t{padding:var(--sp-1) var(--sp-2); font-size:var(--fs-12); color:var(--muted); font-weight:500}
@media (pointer:coarse){ .ds-menu button{min-height:var(--h-touch)} }
.ds-section{padding:var(--sp-5); border-top:1px solid var(--border)}
.ds-section:first-child{border-top:0}
.ds-section>h3{display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-3); font-size:var(--fs-14); font-weight:600; color:var(--ink)}
.ds-section>h3 .droite{margin-left:auto; font-weight:500; font-size:var(--fs-13); color:var(--muted)}
.ds-dl{display:grid; grid-template-columns:140px minmax(0,1fr); gap:var(--sp-2) var(--sp-4); margin:0; font-size:var(--fs-14)}
.ds-dl dt{color:var(--muted)}
.ds-dl dd{margin:0; min-width:0; color:var(--ink)}
@media (max-width:760px){ .ds-dl{grid-template-columns:minmax(96px,auto) minmax(0,1fr)} }
.ds-resume{display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); min-width:0}
.ds-resume b{color:var(--ink); font-weight:600}
.ds-resume b.alerte{color:var(--texte-danger)}
.ds-sep{color:var(--faint)}
.ds-resume-lien{color:inherit; text-decoration:none; cursor:pointer; border-radius:var(--r-xs)}
.ds-resume-lien:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.ds-direct{display:inline-flex; align-items:center; gap:var(--sp-15); font-size:var(--fs-13); color:var(--muted)}
.ds-direct::before{content:''; width:8px; height:8px; border-radius:var(--r-rond); background:var(--point-ok); box-shadow:0 0 0 3px var(--ok-doux)}

/* ---- toasts : en bas au centre, empilés (trois au plus), « Annuler » 5 s et sa barre de temps or ---- */
.ds-toasts{position:fixed; left:50%; bottom:calc(var(--sp-5) + var(--bas-colle)); transform:translateX(-50%); z-index:var(--z-toast); display:grid; gap:var(--sp-2); justify-items:center; pointer-events:none; width:max-content; max-width:calc(100vw - var(--sp-6))}
.ds-toast{pointer-events:auto; display:flex; align-items:center; gap:var(--sp-3); min-height:44px; max-width:min(560px,calc(100vw - var(--sp-6))); padding:var(--sp-2) var(--sp-4); border-radius:var(--r-md);
  background:var(--nuit); color:var(--on-couleur); box-shadow:var(--el-4); font-size:var(--fs-14); line-height:1.4; animation:ds-toast-in var(--t-3) var(--ease-ressort)}
html[data-theme="dark"] .ds-toast{background:var(--nuit-3)}
.ds-toast .svgi{width:16px; height:16px; color:var(--toast-ok)}
.ds-toast.erreur .svgi{color:var(--toast-erreur)}
.ds-toast.info .svgi{color:var(--side-muted)}
.ds-toast .txt{min-width:0; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3}
.ds-toast .annuler{flex:none; height:30px; margin-right:calc(-1 * var(--sp-2)); padding:0 var(--sp-3); border:0; border-radius:var(--r-sm); background:none; font:inherit; font-weight:600; color:var(--or-clair); cursor:pointer}
.ds-toast .annuler:hover{background:rgba(255,255,255,.08)}
.ds-toast .tps{flex:none; width:28px; height:3px; border-radius:var(--r-xs); background:rgba(255,255,255,.18); overflow:hidden}
.ds-toast .tps i{display:block; height:100%; background:var(--or); animation:ds-temps var(--toast-ms,5000ms) linear forwards}
.ds-toast.sort{opacity:0; transform:translateY(8px); transition:opacity var(--t-2) var(--ease-sortie), transform var(--t-2) var(--ease-sortie)}
@keyframes ds-temps{from{width:100%} to{width:0}}
@keyframes ds-toast-in{from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:none}}
@media (max-width:760px){ .ds-toast{width:calc(100vw - var(--sp-6))} }
/* un lien d'action (vert, sans flèche ajoutée au texte) */
.ds-lien{display:inline-flex; align-items:center; gap:var(--sp-1); color:var(--texte-accent); font-weight:500; text-decoration:none; cursor:pointer}
.ds-lien:hover{text-decoration:underline; text-underline-offset:3px}
.ds-lien .svgi{width:14px; height:14px}
/* ---- les listes (DIRECTION § 3.4 à 3.6) : le champ, la barre de vue collante, les filtres posés et leur bilan, la carte, le
   tableau standard. Le tableau ne vit pas dans un conteneur qui défile (overflow) : ses en-têtes collants s'y décaleraient ;
   il tient en largeur (.fixe : colonnes posées, ellipses). Sous la barre de vue, ses en-têtes collent juste sous elle. ---- */
:root{--vue-h:48px; --th-h:36px}
.ds-cache{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
.ds-champ{display:flex; align-items:center; gap:var(--sp-2); height:32px; padding:0 var(--sp-3); border-radius:var(--r-sm); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-strong); color:var(--muted); cursor:text; transition:box-shadow var(--t-1) var(--ease)}
.ds-champ .svgi{width:16px; height:16px; flex:none}
.ds-champ input{flex:1; min-width:0; height:100%; padding:0; border:0; outline:0; background:transparent; font:inherit; font-size:var(--fs-14); color:var(--ink)}
.ds-champ input::placeholder{color:var(--muted)}
.ds-champ:focus-within{box-shadow:inset 0 0 0 1px var(--accent), var(--ring)}
.ds-champ .ds-kbd{flex:none}
@media (pointer:coarse){ .ds-champ{height:var(--h-touch)} .ds-champ input{font-size:var(--fs-16)} .ds-champ .ds-kbd{display:none} }
.ds-vue{position:sticky; top:var(--haut-barre); z-index:var(--z-collant); display:flex; align-items:center; gap:var(--sp-3); height:var(--vue-h); background:var(--page); border-bottom:1px solid var(--border)}
.ds-vue .vues{display:flex; align-items:stretch; gap:var(--sp-4); flex:1; min-width:0; height:100%; overflow-x:auto; scrollbar-width:none}
.ds-vue .vues::-webkit-scrollbar{display:none}
.ds-vue .ds-onglets{flex:none; border-bottom:0; overflow:visible}
.ds-vue .ds-onglets button{height:100%}
.ds-vue-ajout{display:inline-flex; align-items:center; gap:var(--sp-1); flex:none; padding:0 var(--sp-1); border:0; background:none; font:inherit; font-size:var(--fs-14); font-weight:500; color:var(--muted); cursor:pointer; white-space:nowrap}
.ds-vue-ajout:hover{color:var(--ink)}
.ds-vue-ajout .svgi{width:14px; height:14px}
.ds-vue .outils{display:flex; align-items:center; gap:var(--sp-2); flex:none}
.ds-vue .ds-champ{width:220px}
@media (max-width:1040px){
  .ds-vue{gap:var(--sp-2)}
  .ds-vue .ds-champ{width:var(--h-touch); padding:0; justify-content:center; transition:width var(--t-2) var(--ease)}
  .ds-vue .ds-champ input{flex:0 0 0; width:0}
  .ds-vue .ds-champ:focus-within,.ds-vue .ds-champ:has(input:not(:placeholder-shown)){width:min(240px,55vw); padding:0 var(--sp-3); justify-content:flex-start}
  .ds-vue .ds-champ:focus-within input,.ds-vue .ds-champ:has(input:not(:placeholder-shown)) input{flex:1}
}
.ds-filtres{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); padding:var(--sp-3) 0}
.ds-filtres .bilan{margin-left:auto; display:inline-flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-13); color:var(--muted)}
.ds-carte{position:relative; min-width:0; padding:var(--sp-5); background:var(--surface); border-radius:var(--r-card); box-shadow:var(--el-1)}
.ds-carte.p0{padding:0}
.ds-carte.cliquable{cursor:pointer; transition:box-shadow var(--t-2) var(--ease)}
.ds-carte.cliquable:hover{box-shadow:var(--el-1-survol)}
.ds-carte-h{display:flex; align-items:center; gap:var(--sp-2); min-height:28px; margin-bottom:var(--sp-4)}
.ds-carte.p0>.ds-carte-h{padding:var(--sp-4) var(--sp-5) 0}
.ds-carte-h h2,.ds-carte-h h3{margin:0; font-size:var(--fs-16); font-weight:600; line-height:var(--lh-titre); color:var(--ink)}
.ds-carte-h .cnt{font-size:var(--fs-13); font-weight:500; color:var(--muted)}
.ds-carte-h .droite{margin-left:auto; display:flex; align-items:center; gap:var(--sp-2)}
.ds-carte .ds-vue{padding:0 var(--sp-4); background:var(--surface); border-radius:var(--r-card) var(--r-card) 0 0}
.ds-carte .ds-filtres{padding:var(--sp-3) var(--sp-4)}
.ds-groupe-btn{display:inline-flex; align-items:center; gap:var(--sp-1)}
.ds-tableau{width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-14); color:var(--ink)}
.ds-tableau.fixe{table-layout:fixed}
.ds-tableau.fixe td{overflow:hidden; text-overflow:ellipsis}
.ds-tableau th{position:sticky; top:calc(var(--haut-barre) + var(--vue-dessus,0px)); z-index:var(--z-collant); height:var(--th-h); padding:0 var(--ligne-pad); background:var(--surface); border-bottom:1px solid var(--border); text-align:left; font-size:var(--fs-12); font-weight:500; color:var(--muted); white-space:nowrap}
.ds-vue~.ds-tableau,.ds-vue~* .ds-tableau{--vue-dessus:var(--vue-h)}
.ds-tableau td{height:var(--ligne-h); padding:0 var(--ligne-pad); background:var(--surface); border-bottom:1px solid var(--border-doux); vertical-align:middle; white-space:nowrap}
.ds-tableau th.num,.ds-tableau td.num{text-align:right; font-variant-numeric:tabular-nums}
.ds-tableau tbody tr{cursor:pointer}
.ds-tableau tbody tr:hover td{background:var(--surface-douce)}
.ds-tableau tbody tr.ouverte td{background:var(--accent-soft)}
.ds-tableau tbody tr.ouverte td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.ds-tableau tr.passee td,.ds-tableau tr.passee .heure b{color:var(--muted)}
.ds-tableau .heure b{display:block; font-size:var(--fs-16); font-weight:600; line-height:1.15; letter-spacing:-.01em}
.ds-tableau .heure small{display:block; font-size:var(--fs-12); line-height:1.2; color:var(--muted)}
.ds-tableau .heure small.urgent{color:var(--texte-danger); font-weight:600}
.ds-tableau .sous{font-size:var(--fs-13); color:var(--muted); overflow:hidden; text-overflow:ellipsis}
.ds-tableau .gestes{text-align:right}
.ds-tableau:not(.fixe) .gestes{width:1%}
.ds-tableau .gestes .ds-groupe-btn{opacity:0; transition:opacity var(--t-1) var(--ease)}
.ds-tableau tr:hover .gestes .ds-groupe-btn,.ds-tableau tr:focus-within .gestes .ds-groupe-btn{opacity:1}
@media (hover:none){ .ds-tableau .gestes .ds-groupe-btn{opacity:1} }
html[data-density="compact"] .ds-tableau .heure b{font-size:var(--fs-14)}
html[data-density="compact"] .ds-tableau .heure small{display:none}
.ds-tableau tr.jour td{position:sticky; top:calc(var(--haut-barre) + var(--vue-dessus,0px) + var(--th-h)); z-index:var(--z-collant); height:var(--th-h); background:var(--surface-douce); border-bottom:1px solid var(--border); font-size:var(--fs-13); color:var(--muted); cursor:default}
.ds-tableau tr.jour td b{color:var(--ink); font-weight:600}
.ds-tableau tbody tr.jour:hover td{background:var(--surface-douce)}
.ds-tableau tbody tr.maintenant td,.ds-tableau tbody tr.maintenant:hover td{position:relative; height:22px; padding:0 var(--ligne-pad); border:0; background:transparent; cursor:default}
.ds-tableau tr.maintenant td::before{content:''; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:var(--or)}
.ds-tableau tr.maintenant .h{position:relative; display:inline-block; height:18px; padding:0 var(--sp-2); border-radius:var(--r-pilule); background:var(--or); color:var(--nuit); font-size:var(--fs-11); font-weight:700; line-height:18px}
.ds-carte.p0>.ds-tableau tbody tr:last-child>td{border-bottom:0}
.ds-carte.p0>.ds-tableau tbody tr:last-child>td:first-child{border-bottom-left-radius:var(--r-card)}
.ds-carte.p0>.ds-tableau tbody tr:last-child>td:last-child{border-bottom-right-radius:var(--r-card)}

/* Réglages › Système › Composants : la vitrine */
.ds-vitrine-liste{flex:1 1 100%}
.ds-vitrine-l>.ds-carte{flex:1 1 280px}
.ds-vitrine-tableau .c-heure{width:84px} .ds-vitrine-tableau .c-statut{width:124px} .ds-vitrine-tableau .c-prix{width:88px} .ds-vitrine-tableau .c-gestes{width:84px}
/* la vitrine montre le tableau d'ordinateur jusqu'au téléphone : il y défile en largeur (ses en-têtes n'y collent pas) — une vraie
   liste, elle, ne défile jamais en largeur et devient une liste compacte au téléphone (lots d'écrans) */
.ds-vitrine-defile{overflow-x:auto; border-bottom-left-radius:var(--r-card); border-bottom-right-radius:var(--r-card)}
.ds-vitrine-defile .ds-tableau th,.ds-vitrine-defile .ds-tableau tr.jour td{position:static}
.ds-vitrine-tableau{min-width:560px}
.ds-vitrine-bloc{display:grid; grid-template-columns:180px minmax(0,1fr); gap:var(--sp-4); padding:var(--sp-4) 0; border-top:1px solid var(--border-doux)}
.ds-vitrine-bloc:first-child{border-top:0; padding-top:0}
.ds-vitrine-t{font-size:var(--fs-13); font-weight:600; color:var(--muted)}
.ds-vitrine-l{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); min-width:0}
.ds-vitrine-carte{flex:1 1 280px; min-width:0; background:var(--surface); border-radius:var(--r-card); box-shadow:var(--el-1); overflow:hidden}
.ds-vitrine-carte.pad{padding:var(--sp-4) var(--sp-5); display:grid; gap:var(--sp-3)}
.ds-vitrine-carte.large{flex-basis:100%}
.ds-vitrine-fiche{max-width:var(--panneau-l); margin:var(--sp-4) 0; background:var(--surface); border-radius:var(--r-card); box-shadow:var(--el-1); overflow:hidden}
@media (max-width:760px){ .ds-vitrine-bloc{grid-template-columns:1fr; gap:var(--sp-2)} }

/* ====== LOT F — DS v2 « ITINÉRAIRE » : LA COQUE (F3, 06/10/2026) ======
   DIRECTION § 3.1, 3.3, 3.7, 3.13, 3.14 — le menu en trois groupes et ses Favoris, l'en-tête de page, UN panneau à droite pour
   toutes les fiches, la barre du bas à cinq places et sa feuille « Plus », le menu replié en rail. Des jetons seulement ; les
   identifiants d'avant (#sidebar, #nav, #topbar, #drawer, #volet, #genBack, #mobileNav) restent : les écrans non migrés
   gardent leur rendu, ils changent seulement de cadre. */
:root{--panneau-large:760px}

/* ---- le menu (ordinateur) : 240 px, la marque et le périmètre, la recherche et « + », trois groupes, les Favoris, le compte ---- */
#sidebar{width:var(--side-l); flex:0 0 var(--side-l); padding:var(--sp-3) var(--sp-3) var(--sp-2); scrollbar-width:none}
#sidebar::-webkit-scrollbar{display:none}
#sidebar .brand{align-items:center}
#sidebar .brand-t{flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start}
#sidebar .brand .nm{font-size:var(--fs-14); line-height:var(--lh-serre)}
#sidebar #scopeBtn{min-height:0; height:auto; max-width:100%; padding:0; gap:var(--sp-1); border:0; border-radius:var(--r-xs); background:none; box-shadow:none;
  color:var(--side-faint); font-size:var(--fs-12); font-weight:500; justify-content:flex-start}
#sidebar #scopeBtn>svg:first-child{display:none}
#sidebar #scopeBtn .gi{width:12px; height:12px; flex:none}
#sidebar #scopeBtn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#sidebar #scopeBtn:hover{color:var(--side-ink); background:none}
#sidebar #scopeBtn.on{color:var(--or-clair); background:none}
#sidebar .rail-btn{flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:var(--r-sm); color:var(--side-icone)}
#sidebar .rail-btn:hover{background:var(--side-hover); color:var(--side-ink)}
#sidebar .rail-btn .svgi{width:16px; height:16px}
#sidebar .side-actions{gap:var(--sp-15); margin:var(--sp-1) 0 var(--sp-2)}
#sidebar .search#searchBox{flex:1; width:auto; height:34px; min-height:34px; padding:0 var(--sp-15) 0 var(--sp-3); gap:var(--sp-2); justify-content:flex-start;
  border:0; border-radius:var(--r-sm); background:var(--side-hover); box-shadow:inset 0 0 0 1px var(--side-line); color:var(--side-faint); font-size:var(--fs-13)}
#sidebar .search#searchBox:hover{background:var(--side-on); color:var(--side-ink); box-shadow:inset 0 0 0 1px var(--side-line)}
#sidebar .search#searchBox>span:first-child{display:grid; place-items:center}
#sidebar .search#searchBox .lab{flex:1; min-width:0; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#sidebar .search#searchBox .kbd{display:inline-grid; place-items:center; margin-left:auto; background:var(--side-on); color:var(--side-muted); border:0; box-shadow:none}
#sidebar .side-actions>#newBtn{flex:none; width:34px; min-height:34px; height:34px; padding:0; justify-content:center; border:0; border-radius:var(--r-sm);
  background:var(--btn); color:var(--btn-ink); box-shadow:inset 0 1px 0 var(--side-hover)}
#sidebar .side-actions>#newBtn:hover{background:var(--accent-hover)}
#sidebar .side-actions>#newBtn svg{color:var(--btn-ink); width:16px; height:16px}
#sidebar nav button,#sidebar nav .nav-fav{padding:0 var(--sp-2); gap:var(--sp-2); font-size:var(--fs-14)}
#sidebar nav button.on::before{left:calc(-1 * var(--sp-3))}
#sidebar nav button .badge-n{min-width:20px; padding:0 var(--sp-15); border-radius:var(--r-pilule); font-size:var(--fs-12); font-weight:600; text-align:center; line-height:18px}
#sidebar nav .nav-fav{position:relative; display:flex; align-items:center; border-radius:var(--r-sm); color:var(--side-muted); font-weight:500; text-decoration:none;
  transition:background var(--t-1) var(--ease), color var(--t-1) var(--ease)}
#sidebar nav .nav-fav .ic{width:16px; display:flex; justify-content:center; flex:none; color:var(--or)}
#sidebar nav .nav-fav .ic svg{width:15px; height:15px}
#sidebar nav .nav-fav .lb{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#sidebar nav .nav-fav:hover{background:var(--side-hover); color:var(--side-ink); text-decoration:none}
#sidebar nav .nav-fav-vide{margin:0; padding:0 var(--sp-2) var(--sp-2); font-size:var(--fs-12); line-height:var(--lh-serre); color:var(--side-faint)}
#sidebar .foot{gap:0; padding-top:var(--sp-2)}
#sidebar .foot .me-blk{gap:var(--sp-1); padding:var(--sp-1) 0 0 var(--sp-1)}
#sidebar .foot .me-blk .mtx{display:flex; flex-direction:column}
#sidebar .foot .me-blk .build{order:3; margin:0; padding:0; background:none; border:0; font-size:var(--fs-12); color:var(--side-faint); letter-spacing:0; font-family:inherit}
#sidebar .foot .me-blk #reglagesBtn{width:28px; height:28px; padding:0; justify-content:center; gap:0; flex:none}

/* ---- le menu replié en rail (« [ », ordinateur) : 64 px d'icônes, le nom au survol ---- */
@media (min-width:1041px){
  html.rail #sidebar{width:64px; flex-basis:64px; padding-left:var(--sp-2); padding-right:var(--sp-2)}
  html.rail #sidebar .brand{flex-direction:column; gap:var(--sp-2)}
  html.rail #sidebar .brand-t,html.rail #sidebar .search#searchBox .lab,html.rail #sidebar .search#searchBox .kbd,html.rail #sidebar nav .lb,html.rail #sidebar .navgrp,
  html.rail #sidebar nav .nav-fav-vide,html.rail #sidebar .me-blk .mtx,html.rail #sidebar .me-blk #themeBtn,html.rail #sidebar .me-blk #logoutBtn{display:none}
  html.rail #sidebar .side-actions{flex-direction:column}
  html.rail #sidebar .search#searchBox{flex:none; width:100%; padding:0; justify-content:center}
  html.rail #sidebar .side-actions>#newBtn{width:100%}
  html.rail #sidebar nav button,html.rail #sidebar nav .nav-fav{justify-content:center; padding:0}
  html.rail #sidebar nav button .badge-n{position:absolute; top:0; right:0; min-width:16px; padding:0 var(--sp-05); line-height:16px; font-size:var(--fs-12)}
  html.rail #sidebar nav button .badge-n+.badge-n{display:none}
  html.rail #sidebar .foot .me-blk{flex-direction:column; padding:var(--sp-1) 0 0}
}

/* ---- l'en-tête de page (ordinateur) : fil d'Ariane, titre, résumé vivant, actions ---- */
@media (min-width:1041px){
  :root{--haut-barre:env(safe-area-inset-top,0px)}
  #topbar{position:relative; align-items:flex-end; gap:var(--sp-2); min-height:84px; padding:var(--sp-5) var(--gutter) var(--sp-4); margin:0 calc(-1 * var(--gutter)) var(--sp-2);
    background:none; -webkit-backdrop-filter:none; backdrop-filter:none}
  #topbar .titlebox{flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:var(--sp-1); overflow:visible; min-width:0}
  #topbar h2{font-size:var(--fs-24); line-height:var(--lh-serre); letter-spacing:var(--approche-24); white-space:nowrap; max-width:100%}
  #topbar>.tbtn.icon{align-self:center}
}
#topbar .ariane[hidden]{display:none}
#topbar .ariane{display:flex; align-items:center; min-width:0}
#topbar .ariane-lien{display:inline-flex; align-items:center; gap:var(--sp-1); padding:0; font-size:var(--fs-13); color:var(--muted); font-weight:500; white-space:nowrap}
#topbar .ariane-lien:hover{color:var(--ink)}
#topbar .ariane-lien .svgi{width:14px; height:14px; color:var(--faint)}
#topbar .pg-ligne{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3); min-width:0; font-size:var(--fs-14); color:var(--muted)}
#topbar .pg-resume[hidden]{display:none}
#topbar .pg-resume .ds-resume{font-size:var(--fs-14)}
#topbar .pg-resume .ds-resume-lien{color:var(--muted)}
#topbar .pg-resume .ds-resume-lien:hover{color:var(--ink)}
#topbar .pg-ligne #liveTag{font-size:var(--fs-13); font-weight:500; gap:var(--sp-15)}
#topbar .pg-ligne #liveTag::before{width:8px; height:8px; background:var(--point-ok); box-shadow:0 0 0 3px var(--ok-doux)}
#topbar .pg-ligne #freshTag{font-size:var(--fs-12); color:var(--faint)}
#topbar .pg-actions{display:flex; align-items:center; gap:var(--sp-2); flex:none; align-self:center}
#topbar .pg-actions[hidden]{display:none}
#topbar #pageEpingle.on{color:var(--or-ink)}
#topbar #pageEpingle.on svg{fill:currentColor}
#topbar .pg-tel{display:none}
/* la cloche s'en va (DIRECTION § 3.1) : « À traiter » porte le compteur, au menu et dans la barre du bas */
@media (max-width:1040px){
  #topbar .pg-ligne,#topbar .ariane,#topbar .pg-actions,#topbar #pageEpingle{display:none}
  #topbar .pg-tel{display:flex}
}

/* ---- la capsule « Ta prochaine course » (téléphone) : son emplacement, au-dessus de la barre du bas ; le lot E5 la remplit ---- */
.capsule{position:fixed; left:var(--sp-3); right:var(--sp-3); bottom:calc(var(--bas-colle) + var(--sp-2)); z-index:var(--z-flottant)}
.capsule[hidden]{display:none}
@media (min-width:1041px){ .capsule{display:none} }
/* ---- la barre du bas (téléphone) : quatre places et « Plus » ---- */
#mobileNav .mob-plus .svgi{width:20px; height:20px}
/* la feuille « Plus » : une grille de tuiles d'un pouce */
#sheetBack[data-forme="grille"] .sheet-b{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2); padding-top:var(--sp-1)}
#sheetBack[data-forme="grille"] .sa{flex-direction:column; justify-content:center; gap:var(--sp-15); min-height:76px; padding:var(--sp-2) var(--sp-1);
  border-radius:var(--r-md); background:var(--surface-2); text-align:center}
#sheetBack[data-forme="grille"] .sa svg{width:22px; height:22px; color:var(--ink-2)}
#sheetBack[data-forme="grille"] .sa .sa-t{align-items:center; font-size:var(--fs-12); font-weight:500; line-height:var(--lh-serre); overflow-wrap:anywhere}

/* ---- LE PANNEAU : 520 px ancré à droite (≥ 1280 px, écran migré : html.pn-ancre), par-dessus avec un voile ailleurs, plein écran au téléphone ---- */
.panneau{position:fixed; top:0; right:0; bottom:0; width:var(--panneau-l); max-width:100vw; z-index:var(--z-panneau); display:flex; flex-direction:column;
  background:var(--elevated); box-shadow:var(--el-3); transform:translateX(24px); opacity:0; visibility:hidden; pointer-events:none;
  transition:transform var(--t-3) var(--ease), opacity var(--t-3) var(--ease), visibility 0s linear var(--t-3)}
html.pn-on .panneau{transform:none; opacity:1; visibility:visible; pointer-events:auto; transition:transform var(--t-3) var(--ease), opacity var(--t-3) var(--ease)}
.pn-fond{position:fixed; inset:0; z-index:var(--z-panneau-fond); background:var(--voile); opacity:0; visibility:hidden; transition:opacity var(--t-2) var(--ease), visibility 0s linear var(--t-2)}
.pn-fond.on{opacity:1; visibility:visible; transition:opacity var(--t-2) var(--ease)}
@media (min-width:1280px){
  html.pn-on.pn-ancre main{margin-right:var(--panneau-l)}
  html.pn-ancre .pn-fond.on{opacity:0; visibility:hidden}
}
html.pn-on:not(.pn-ancre),html.pn-on:not(.pn-ancre) body{overflow:hidden}
@media (max-width:1040px){ .panneau{width:100%; box-shadow:none} .pn-fond.on{opacity:0; visibility:hidden} }
/* une fiche d'avant, dessinée pour la grande fenêtre : le panneau s'élargit et passe par-dessus la liste, avec un voile */
html.pn-large .panneau{width:min(var(--panneau-large),100vw)}
@media (min-width:1280px){
  html.pn-on.pn-large main{margin-right:0}
  html.pn-large .pn-fond.on{opacity:1; visibility:visible}
}
/* pleine page : la fiche prend tout le contenu (le menu reste) */
html.pn-plein .panneau{left:var(--side-l); width:auto; box-shadow:none}
html.pn-plein.rail .panneau{left:64px}
html.pn-plein main{margin-right:0}
@media (max-width:1040px){ html.pn-plein .panneau{left:0} }
/* la barre : la pile (« 11:05 · Hiroshi Tanaka › Karim Belkacem »), la référence, ‹ ›, l'étoile, pleine page, ✕ */
.pn-barre{display:flex; align-items:center; gap:var(--sp-1); min-height:52px; padding:env(safe-area-inset-top,0px) var(--sp-2) 0 var(--sp-3); border-bottom:1px solid var(--border);
  background:var(--surface); flex:none}
.pn-pile{flex:1; min-width:0; display:flex; align-items:center; gap:var(--sp-1); overflow:hidden; white-space:nowrap; font-size:var(--fs-13); color:var(--muted)}
.pn-pile b{min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--ink); font-weight:600}
.pn-pile .svgi{width:14px; height:14px; flex:none; color:var(--faint)}
.pn-pas{flex:0 1 auto; min-width:0; max-width:160px; overflow:hidden; text-overflow:ellipsis; color:var(--muted); font-weight:500}
.pn-pas:hover{color:var(--ink)}
.pn-ref{flex:none; padding:var(--sp-05) var(--sp-15); border-radius:var(--r-xs); font-size:var(--fs-12); color:var(--muted)}
.pn-ref:hover{background:var(--surface-2); color:var(--ink)}
.pn-b{flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:var(--r-sm); color:var(--muted); transition:background var(--t-1) var(--ease), color var(--t-1) var(--ease)}
.pn-b:hover{background:var(--surface-2); color:var(--ink)}
.pn-b:disabled{opacity:.35; cursor:default; background:none}
.pn-b[hidden]{display:none}
.pn-b .svgi{width:17px; height:17px}
#panneauEpingle.on{color:var(--or-ink)}
#panneauEpingle.on svg{fill:currentColor}
@media (pointer:coarse){ .pn-b{width:44px; height:44px} }
@media (max-width:1040px){ .pn-bureau{display:none} }
.pn-corps{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
/* les conteneurs d'avant, accueillis : ils perdent leur cadre (le panneau en est un), gardent leur contenu */
#panneauCorps>#drawer,#panneauCorps>.volet,#panneauCorps>.modal{position:static; inset:auto; width:auto; height:auto; max-width:none; max-height:none; transform:none; transition:none;
  border:0; box-shadow:none; z-index:auto; display:none; background:transparent; padding:0; overflow:visible}
#panneauCorps>#drawer.on,#panneauCorps>.modal.on{display:block}
#panneauCorps>.volet.on{display:flex}
#panneau #panneauCorps>.pn-cache{display:none}
#panneauCorps #drawer .dh{display:none}
#panneauCorps #drawer .db{overflow:visible; background:transparent; padding:var(--sp-4) var(--sp-5) var(--sp-6)}
#panneauCorps .volet-tete{position:sticky; top:0; z-index:var(--z-collant); background:var(--elevated); padding-top:var(--sp-3)}
#panneauCorps #voletFermer{display:none}
#panneauCorps .volet-corps{overflow:visible}
#panneauCorps .modal .box{max-width:none; margin:0; border:0; border-radius:var(--r-nul); box-shadow:none; background:transparent; padding:var(--sp-5)}
#panneauCorps .modal.pn-fiche #genBox>.ch{display:none}
/* la croix d'une fiche d'avant fait double emploi avec celle du panneau */
#panneauCorps .modal.pn-fiche .rl-x{display:none}
#panneauCorps .modal .rl-haut{background:var(--elevated)}
/* les voiles d'avant ne servent plus : le panneau a le sien */
#drawerBack,#voletFond{display:none}
/* la palette passe au-dessus du panneau */
#pal{z-index:var(--z-palette)}
.pal-row .pk-r{margin-left:auto; flex:none; white-space:nowrap}
.pal-row .pk-r+.pk{margin-left:var(--sp-1)}
/* ====== LOT S2 — SÉCURITÉ, DEUXIÈME PASSE : Telegram (code à usage unique, qui peut appuyer), données personnelles, la clé propriétaire guidée, ce qui s'est passé ====== */
/* Réglages › Telegram : le code a servi (ou a expiré) — la carte le dit en clair, sans jamais l'afficher ni le copier */
.tg-mort{border-style:solid; background:var(--surface-2)}
.tg-mort-t{margin:0; font-size:var(--fs-14); color:var(--ink-2)}
.tg-mort-t b{font-weight:600; color:var(--ink)}
/* Réglages › Telegram › Qui peut appuyer sur les boutons : la règle en une phrase, la liste, les personnes vues */
.tg-aut-phrase{margin:0 0 var(--sp-3); font-size:var(--fs-13); color:var(--ink-2); line-height:1.5}
.tg-aut-restreint{padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--fond-info); color:var(--texte-info)}
.tg-aut-t{margin:var(--sp-4) 0 var(--sp-1); font-size:var(--fs-12); font-weight:600; color:var(--muted)}
.tg-aut-vus .badge{margin-left:var(--sp-1)}
.tg-aut-liste p,.tg-aut-vus p{overflow-wrap:anywhere}
/* Réglages › Sécurité › Données personnelles : l'effet de la durée choisie, en une phrase sous le champ */
.rgpd-apercu{margin:var(--sp-2) 0 0; font-size:var(--fs-13); color:var(--ink-2); line-height:1.5}
/* Réglages › Sécurité › Changer la clé propriétaire : trois étapes numérotées, cochées toutes seules ; une commande à copier */
.cle-avert{margin:0 0 var(--sp-3); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--fond-alerte); color:var(--texte-alerte)}
.cle-avert svg,.cle-avert b{color:var(--texte-alerte)}
.cle-avert b{font-weight:600}
.cle-etapes{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3)}
.cle-etape{display:flex; gap:var(--sp-3); align-items:flex-start}
.cle-num{flex:none; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:var(--r-rond); background:var(--surface-3); color:var(--ink-2); font-size:var(--fs-13); font-weight:600}
.cle-etape.fait .cle-num{background:var(--fond-ok); color:var(--texte-ok)}
.cle-num svg{width:14px; height:14px}
.cle-corps{flex:1 1 auto; min-width:0}
.cle-corps b{font-weight:600; color:var(--ink)}
.cle-corps p{margin:var(--sp-1) 0 0; font-size:var(--fs-13); color:var(--ink-2); line-height:1.5}
.cle-etape.fait .cle-corps p,.cle-etape.bloque .cle-corps>p:first-of-type{color:var(--muted)}
.cle-cmd{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-top:var(--sp-2)}
.cle-cmd code{flex:1 1 260px; min-width:0; padding:var(--sp-2); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font-size:var(--fs-12); line-height:1.5; overflow-wrap:anywhere; word-break:break-all}
.cle-conseils{margin-top:var(--sp-4); border-top:1px solid var(--grid)}
.cle-conseils p{margin:0; font-size:var(--fs-13); color:var(--ink-2); line-height:1.5}
/* Réglages › Sécurité › Ce qui s'est passé : un résumé, les familles, une ligne datée par événement (point de gravité) */
.secu-ev-resume{margin:0 0 var(--sp-2)}
.secu-ev-familles{margin:0 0 var(--sp-3); max-width:100%}
.secu-ev-liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.secu-ev{display:flex; align-items:flex-start; gap:var(--sp-2); padding:var(--sp-2) 0; border-bottom:1px solid var(--grid)}
.secu-ev:last-child{border-bottom:0}
.secu-ev .rg-point{margin-top:6px}
.secu-ev-corps{flex:1 1 0%; min-width:0}
.secu-ev-corps b{font-size:var(--fs-13); font-weight:600; color:var(--ink)}
.secu-ev-corps p{margin:2px 0 0; font-size:var(--fs-12); color:var(--muted); overflow-wrap:anywhere}
.secu-ev time{flex:none; font-size:var(--fs-12); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
@media (max-width:760px){
  .secu-ev{flex-wrap:wrap}
  .secu-ev time{order:-1; flex-basis:100%; padding-left:calc(9px + var(--sp-2))}
  .secu-ev-familles{flex-wrap:nowrap; overflow-x:auto}
  .secu-ev-familles button{flex:none; min-height:var(--h-touch)}
}
/* ====== LOT E4 — À TRAITER (DS v2) : une file, plusieurs portes ======
   DIRECTION § 5.8, § 3.14 — la file unique (js/pilotage/a-traiter.js) : la carte du tableau de bord (quatre lignes, les domaines,
   « Tout voir »), l'écran À traiter (barre de vue, puces de domaine, la file groupée Urgent · À traiter · À savoir, Dispatch,
   l'historique). Une ligne = la forme de dsFile (niveau, titre, détail, UN geste), plus le compteur qui déplie le fil, « Fait »
   et « Plus tard » au survol, « … » ; au doigt : balayer, des cibles de 44 px, deux rangées. Des jetons seulement. */

/* ---- une ligne de la file (sur .ds-file : niveau · texte · gestes) ---- */
.at-file{position:relative}
.at-file>li.at-l{position:relative; min-height:60px; cursor:pointer; touch-action:pan-y; outline-offset:-2px}
.at-l .txt{display:flex; flex-direction:column; gap:var(--sp-05); min-width:0}
.at-l .txt>.at-t{display:flex; align-items:center; gap:var(--sp-15); min-width:0; overflow:visible; white-space:normal}
.at-l .at-t b{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-14); font-weight:600; line-height:var(--lh-titre); color:var(--ink)}
.at-l .txt>.at-d{font-size:var(--fs-13); line-height:var(--lh-titre); color:var(--muted)}
.at-l .at-d .urg{color:var(--texte-danger); font-weight:600}
.at-nb{position:relative; flex:none; display:inline-flex; align-items:center; gap:var(--sp-05); height:20px; min-height:0; padding:0 var(--sp-1) 0 var(--sp-15); border-radius:var(--r-pilule);
  background:var(--surface-piste); color:var(--muted); font-size:var(--fs-12); font-weight:600; font-variant-numeric:tabular-nums; cursor:pointer;
  transition:background var(--t-1) var(--ease), color var(--t-1) var(--ease)}
.at-nb:empty{padding:0}
.at-nb .svgi{width:12px; height:12px}
.at-nb:hover,.at-nb[aria-expanded="true"]{background:var(--border); color:var(--ink)}
.at-l .act{flex:none; gap:var(--sp-1)}
.at-l .act .sec.vis{display:inline-flex}
.at-l .act .ext{display:inline-flex; align-items:center; gap:var(--sp-05)}
.at-l .act .plus{display:inline-flex}
.at-l .niv.ok{background:var(--ok-doux); color:var(--texte-ok)}
@media (hover:hover){
  .at-l .act .plus{opacity:0; transition:opacity var(--t-1) var(--ease)}
  .at-l:hover .act .plus,.at-l:focus-within .act .plus,.at-l.at-focus .act .plus,.at-l .act .plus:has([aria-expanded="true"]){opacity:1}
  .ds-file li.at-l.at-focus .act .sec{display:inline-flex}
}
/* l'état : traitée (l'historique), non lue (l'historique), choisie au clavier, sa fiche ouverte dans le panneau */
.at-l.at-traite .at-t b{color:var(--muted); font-weight:500}
.at-l.at-traite .niv{background:var(--surface-piste); color:var(--muted)}
.nt-historique .at-l.at-nonlu .at-t::before{content:''; flex:none; width:6px; height:6px; border-radius:var(--r-rond); background:var(--point-accent)}
.ds-file li.at-l.at-focus{background:var(--surface-douce); box-shadow:inset 2px 0 0 var(--border-strong)}
.ds-file li.at-l.ouverte{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
.at-l:focus-visible{outline:2px solid var(--accent)}
/* l'intertitre : Urgent · À traiter · À savoir (la file), le jour (l'historique) */
.ds-file>li.at-grp{display:flex; align-items:center; gap:var(--sp-2); min-height:32px; padding:var(--sp-15) var(--sp-5); background:var(--surface-douce);
  font-size:var(--fs-12); font-weight:600; color:var(--muted); cursor:default}
.ds-file>li.at-grp:hover{background:var(--surface-douce)}
.ds-file>li.at-grp:first-child{border-radius:var(--r-card) var(--r-card) 0 0}
.at-grp .n{min-width:20px; padding:0 var(--sp-15); border-radius:var(--r-pilule); background:var(--surface-piste); line-height:18px; text-align:center; font-variant-numeric:tabular-nums}
.at-grp[data-niv]::before{content:''; flex:none; width:6px; height:6px; border-radius:var(--r-rond); background:var(--point-neutre)}
.at-grp[data-niv="urgent"]::before{background:var(--point-danger)}
.at-grp[data-niv="attention"]::before{background:var(--point-alerte)}
.at-grp[data-niv="info"]::before{background:var(--point-info)}
.at-grp[data-niv="urgent"]{color:var(--texte-danger)}
.at-grp[data-niv="urgent"] .n{background:var(--danger-doux)}
/* le fil déplié par le compteur : le texte entier, puis les événements */
.at-fil{grid-column:2/-1; margin-top:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); background:var(--surface-douce); font-size:var(--fs-13); color:var(--ink-2); cursor:auto}
.ds-file li.at-l.ouverte .at-fil,.ds-file li.at-l.at-focus .at-fil{background:var(--surface)}
.at-fil p{margin:0 0 var(--sp-2); white-space:pre-line}
.at-fil p:last-child{margin-bottom:0}
.at-fil ol{list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-1)}
.at-file .at-fil li{display:grid; grid-template-columns:6px minmax(0,1fr) auto; align-items:center; gap:var(--sp-2); padding:0; border-top:0; background:none}
.at-file .at-fil li:hover{background:none}
.at-fil .pt{width:6px; height:6px; border-radius:var(--r-rond); background:var(--point-neutre)}
.at-fil .pt.urgent{background:var(--point-danger)}
.at-fil .pt.attention{background:var(--point-alerte)}
.at-fil time{font-size:var(--fs-12); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
/* au doigt : « Plus tard » se dit dans sa couleur pendant le geste (gestes.js : ton « tard ») */
.glisse-fond[data-ton="tard"]{background:var(--alerte-doux); color:var(--texte-alerte)}

/* ---- la porte du tableau de bord : quatre lignes, les domaines, « Tout voir » ---- */
.at-carte .ds-carte-h{flex-wrap:wrap; row-gap:var(--sp-2); margin-bottom:var(--sp-2)}
.at-carte .ds-carte-h .droite{min-width:0; max-width:100%}
/* tout est fait : la réussite et ce qui vient, sur une ligne (la règle .vide d'avant la mettait en colonne, centrée) */
.at-carte .ds-file li.vide{flex-direction:row; justify-content:flex-start; gap:var(--sp-2); padding:var(--sp-2) var(--sp-5) var(--sp-4); text-align:left; font-size:var(--fs-14); color:var(--muted)}
.at-carte .ds-file li.vide .svgi{color:var(--texte-ok)}
.at-pied{display:flex; align-items:center; gap:var(--sp-3); min-height:44px; padding:var(--sp-2) var(--sp-5); border-top:1px solid var(--border-doux); font-size:var(--fs-13); color:var(--muted)}
.at-pied .ds-lien{margin-left:auto; flex:none; padding:var(--sp-1) 0}
.at-carte .at-astuce,.nt-glisse{display:none}

/* ---- l'écran À traiter : la barre de vue, les puces de domaine, les cartes de la file ---- */
/* la barre de vue colle en haut de l'écran : ses enveloppes s'effacent (sinon elle ne collerait qu'à elles-mêmes) */
#s-notifs .nt-barre,#s-notifs #ntVue{display:contents}
#s-notifs .nt-filtres{min-height:56px}
#s-notifs .nt-filtres .ds-puce .n{margin-left:var(--sp-15); font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums}
#s-notifs .nt-filtres .ds-puce.active .n{color:var(--texte-accent)}
#s-notifs .nt-touches{display:inline-flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-12); color:var(--muted); white-space:nowrap}
#s-notifs .nt-touches .ds-kbd+.ds-kbd{margin-left:calc(-1 * var(--sp-05))}
.nt-mount{display:grid; gap:var(--sp-3); padding-bottom:var(--sp-6)}
.nt-mount>.ds-carte{min-width:0}
.nt-mount .at-liste>.ds-sq{padding:var(--sp-3) var(--sp-5)}
.nt-mount .at-liste>.ds-vide{padding:var(--sp-7) var(--sp-5)}
.nt-mount .nt-regles,.nt-mount .at-avis{display:flex; align-items:center; gap:var(--sp-2); margin:0; padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); border-radius:var(--r-md); font-size:var(--fs-13)}
.nt-mount .nt-regles{background:var(--ok-doux); color:var(--texte-ok)}
.nt-mount .at-avis{background:var(--alerte-doux); color:var(--texte-alerte)}
.nt-mount .nt-regles>span,.nt-mount .at-avis>span{flex:1; min-width:0}
.nt-mount .nt-regles .svgi,.nt-mount .at-avis .svgi,.nt-mount .nt-plus-ancien .svgi,.nt-mount .nt-jlien .svgi{flex:none; width:16px; height:16px}
.nt-mount .nt-regles .ds-lien{color:inherit; font-weight:600}
.nt-mount .nt-plus-ancien,.nt-mount .nt-jlien{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin:0; padding:0 var(--sp-1); font-size:var(--fs-13); color:var(--muted)}
.nt-mount .nt-dsp-info{margin:0; padding:0 var(--sp-1); font-size:var(--fs-13); color:var(--muted)}
.nt-mount .nt-suite{display:flex; justify-content:center; padding:var(--sp-3); border-top:1px solid var(--border-doux)}
.nt-sons-pied{display:none}
/* les sons (lot N) dans la barre : la puce et « Régler » à la taille des boutons du système */
#s-notifs .nt-sons-zone .son-raccourci{flex-wrap:nowrap}
#s-notifs .son-puce{min-height:32px; height:32px; padding:0 var(--sp-3); border:0; border-radius:var(--r-sm); box-shadow:inset 0 0 0 1px var(--border-strong); font-size:var(--fs-13); font-weight:500; white-space:nowrap}
#s-notifs .son-puce.s-bloque{box-shadow:inset 0 0 0 1px var(--point-alerte)}
#s-notifs .son-regl{min-height:32px; height:32px; padding:0 var(--sp-2); border:0; border-radius:var(--r-sm); background:transparent; box-shadow:none; color:var(--ink-2); font-size:var(--fs-13); font-weight:500}
#s-notifs .son-regl:hover{background:var(--surface-piste); color:var(--ink)}
/* Dispatch : « En attente de réponse » (lot N) devient une carte de la file */
#s-notifs .at-prp .prp-tete{margin:0; padding:0; border:0; border-radius:var(--r-card); background:none}
#s-notifs .at-prp .prp-h{align-items:center; margin:0; padding:var(--sp-4) var(--sp-5) var(--sp-3); font-size:var(--fs-16)}
#s-notifs .at-prp .prp-h b{font-weight:600}
#s-notifs .at-prp .prp-aide{flex-basis:100%; font-size:var(--fs-13)}
#s-notifs .at-prp .prp-l{gap:var(--sp-3); padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3); border-top:1px solid var(--border-doux)}
#s-notifs .at-prp .prp-c{padding:var(--sp-1) var(--sp-2)}
#s-notifs .at-prp .prp-l1{font-weight:600}
#s-notifs .at-prp .prp-m{font-size:var(--fs-13); color:var(--muted)}
#s-notifs .at-prp .prp-u .prp-m{color:var(--texte-danger)}
#s-notifs .at-prp .prp-vide{padding:0 var(--sp-5) var(--sp-4)}
#s-notifs .at-prp>.ds-sq,#s-notifs .at-prp .prp-tete>.ds-sq{padding:0 var(--sp-5) var(--sp-4)}
/* l'onglet Dispatch : une teinte par issue (acceptée, refusée, assignée par toi, sans réponse) sur l'icône */
.at-l.nt-issue-ok .niv{background:var(--ok-doux); color:var(--texte-ok)}
.at-l.nt-issue-ko .niv{background:var(--danger-doux); color:var(--texte-danger)}
.at-l.nt-issue-toi .niv{background:var(--info-doux); color:var(--texte-info)}
.at-l.nt-issue-attente .niv{background:var(--alerte-doux); color:var(--texte-alerte)}
/* le journal GoodJourney (le technique), dans sa carte */
.nt-journal .nt-jbarre{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border-doux)}
.nt-journal .nt-jbarre .ds-champ{flex:1 1 200px; max-width:320px}
.nt-journal .nt-jinfo{margin:0; padding:var(--sp-3) var(--sp-5) 0; font-size:var(--fs-13); color:var(--muted)}
.nt-journal #ntJournal{padding:var(--sp-2) var(--sp-3) var(--sp-3)}

/* ---- au téléphone : la liste pleine largeur, deux rangées (le texte entier, puis les gestes sous le pouce) ---- */
@media (max-width:760px){
  .ds-file>li.at-l{padding:var(--sp-3) var(--sp-4)}
  .ds-file>li.at-grp{padding:var(--sp-15) var(--sp-4)}
  /* la carte au téléphone (comme la direction) : l'icône, le titre sur deux lignes, le geste plein ; les domaines et le « … »
     restent à l'écran À traiter, l'appui long ouvre tous les gestes, l'astuce du doigt prend la place du segment */
  .at-carte .ds-carte-h .droite{display:none}
  .at-carte .at-astuce{display:inline; margin-left:auto; font-size:var(--fs-13); color:var(--muted)}
  .at-carte .at-l .act .ext,.at-carte .at-l .act .sec{display:none}
  .at-carte .at-l .at-t b{white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2}
  /* le compteur du fil reste une pastille ; sa zone de toucher, elle, s'agrandit */
  .at-nb::after{content:''; position:absolute; inset:-12px -6px}
  .at-pied{padding:var(--sp-2) var(--sp-4)}
  #s-notifs .ds-file>li.at-l{grid-template-columns:28px minmax(0,1fr); align-items:start; row-gap:var(--sp-2)}
  #s-notifs .at-l .niv{margin-top:var(--sp-05)}
  #s-notifs .at-l .at-t b{white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2}
  #s-notifs .at-l .txt>.at-d{white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2}
  #s-notifs .at-l .act{grid-column:2; flex-wrap:wrap; justify-content:flex-start}
  #s-notifs .at-l .act .sec{display:none}
  #s-notifs .at-l .act .sec.vis{display:inline-flex}
  #s-notifs .at-l .act .plus{margin-left:auto}
  #s-notifs .at-l .act>.ext{order:1}
  #s-notifs .at-l .act>.plus{order:2}
  #s-notifs .at-fil{grid-column:1/-1}
  #s-notifs .nt-sons-zone,#s-notifs .nt-touches{display:none}
  #s-notifs .nt-glisse{display:inline}
  .nt-sons-pied{display:flex; justify-content:center; padding:var(--sp-1) 0}
  #s-notifs .nt-filtres{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  #s-notifs .nt-filtres::-webkit-scrollbar{display:none}
  #s-notifs .nt-filtres .ds-puce{flex:none}
  #s-notifs .nt-filtres .bilan{flex:none; padding-left:var(--sp-2); font-size:var(--fs-12)}
  #s-notifs .at-prp .prp-g .ds-btn{min-height:var(--h-touch)}
  /* Dispatch : le segment des issues sur toute la largeur, « Tout marquer lu » dessous à droite */
  #s-notifs .nt-filtres.nt-issues{flex-wrap:wrap; overflow:visible}
  #s-notifs .nt-issues .ds-segment{display:flex; flex:1 1 100%}
  #s-notifs .nt-issues .ds-segment>button{flex:1 1 0; min-width:0; padding:0 var(--sp-1)}
  #s-notifs .nt-issues .bilan{margin-left:auto}
}
/* une barre étroite (une tablette, ou la fiche ancrée à côté de la liste) : les sons passent au pied de la liste, les onglets
   et la recherche gardent leur place */
@media (min-width:761px) and (max-width:1100px){
  #s-notifs .nt-sons-zone{display:none}
  .nt-sons-pied{display:flex; justify-content:center; padding:var(--sp-1) 0}
}
@media (min-width:1280px){
  html.pn-on.pn-ancre #s-notifs .nt-sons-zone{display:none}
  html.pn-on.pn-ancre .nt-sons-pied{display:flex; justify-content:center; padding:var(--sp-1) 0}
}
@media (prefers-reduced-motion:reduce){ .at-l .act .plus,.at-nb{transition:none} }

/* ====== LOT E2 — Tableau de bord (DS v2) ======
   DIRECTION § 5.1 — le nouveau tableau de bord (#ovNv, js/pilotage/tableau-de-bord-v2.js) : une grille de douze colonnes à
   l'ordinateur (l'argent 8 + 4, les prochaines courses 7 + 5, une carte par rangée sinon), une colonne au téléphone dans
   l'ordre du pouce (la prochaine course, la file, le bénéfice, les prochaines courses, le mois, l'activité…). Les cartes d'une
   rangée ont la même hauteur. « Comme avant » (#ovAv, le gabarit V98.0) garde ses règles d'avant : rien ici ne le touche,
   tout est sous .ov2 (ou dans l'en-tête, pour les contrôles de période du nouveau). Des jetons seulement. */
.ov2{position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--sp-5)}
.ov2>*{grid-column:1/-1; min-width:0}
.ov2>[hidden],.ov2>:empty{display:none}
.ov2 #ovATraiter{margin:0}
.ov2 #ovObjFlotte>.card{margin:0}
@media (min-width:1280px){
  .ov2>.ov2-heros{grid-column:span 8}
  .ov2>.ov2-mois{grid-column:span 4}
  .ov2.sans-mois>.ov2-heros{grid-column:1/-1}
  .ov2>.ov2-prochaines{grid-column:span 7; grid-row:span 2}
  .ov2>.ov2-prov,.ov2>.ov2-site{grid-column:span 5}
  .ov2.sans-site>.ov2-prochaines{grid-row:span 1}
}
@media (min-width:761px) and (max-width:1279px){
  .ov2>.ov2-prov,.ov2>.ov2-site{grid-column:span 6}
  .ov2.sans-site>.ov2-prov{grid-column:1/-1}
}
@media (max-width:760px){
  .ov2{gap:var(--sp-3)}
  .ov2>.ov2-prochaines{order:1}
  .ov2>.ov2-mois,.ov2>.ov2-bande,.ov2>.ov2-point,.ov2>.ov2-prov,.ov2>.ov2-site,.ov2>.ov2-pied{order:2}
  .ov2 .ds-carte{padding:var(--sp-4); border-radius:var(--r-feuille)}
  .ov2 .ds-carte.p0{padding:0}
}
/* le calendrier du système s'ouvre près du libellé de la période (le champ ne se voit pas) */
.ov2-date{position:fixed; top:0; left:0; width:1px; height:1px; opacity:0; pointer-events:none; border:0; padding:0}

/* ---- la période : Jour | Semaine | Mois | Année, puis ‹ la période › (dans l'en-tête à partir de 1280 px ; plus étroit, l'en-tête
   garde son titre et « Nouvelle réservation » : la période passe en tête de la carte du bénéfice, pleine largeur au téléphone) ---- */
.ov2-per{display:flex; align-items:center; gap:var(--sp-2)}
.ov2-pas{display:inline-flex; align-items:center; gap:var(--sp-05)}
.ov2-pas [data-ov2quand]{min-width:104px; padding:0 var(--sp-2); font-weight:600; color:var(--ink)}
.ov2-per-carte{display:none}
@media (max-width:1279px){
  #ovPerEntete{display:none}
  .ov2-per-carte{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin-bottom:var(--sp-4); padding-bottom:var(--sp-4); border-bottom:1px solid var(--border-doux)}
}
@media (max-width:760px){
  .ov2-per-carte{display:grid; gap:var(--sp-2); padding-bottom:0; border-bottom:0}
  .ov2-per-carte .ds-segment{display:flex; width:100%}
  .ov2-per-carte .ds-segment button{flex:1; height:var(--h-sm)}
  .ov2-per-carte .ov2-pas{justify-content:space-between}
  .ov2-per-carte .ov2-pas [data-ov2quand]{flex:1}
}

/* ---- petites briques : « i » (la définition), le classement, la variation et son « vs quoi » ---- */
.ov2-i{display:inline-grid; place-items:center; flex:none; width:24px; height:24px; padding:0; border:0; border-radius:var(--r-rond); background:none; color:var(--faint); cursor:help}
.ov2-i:hover{color:var(--ink-2); background:var(--surface-piste)}
.ov2-i .svgi{width:15px; height:15px}
.ov2-rang{display:inline-flex; align-items:center; gap:var(--sp-1); height:24px; padding:0 var(--sp-2); border:0; border-radius:var(--r-pilule); background:var(--or-doux); color:var(--or-ink); font:inherit; font-size:var(--fs-12); font-weight:600; white-space:nowrap; cursor:pointer}
.ov2-rang .svgi{width:13px; height:13px}
.ov2-rang sup{font-size:var(--fs-11); line-height:0}
.ov2-vs{font-size:var(--fs-13); white-space:nowrap}
@media (max-width:760px){ .ov2 .ov2-bureau{display:none} }

/* ---- l'argent : le héros (le réalisé en grand), sa jauge et ses trois chiffres ---- */
.ov2-heros{display:flex; flex-direction:column}
.ov2-h-l{display:flex; align-items:center; gap:var(--sp-1)}
.ov2-h-l h2{margin:0; font-size:var(--fs-14); font-weight:500; color:var(--ink-2); line-height:var(--lh-titre)}
.ov2-h-v{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); margin-top:var(--sp-2)}
.ov2-h-val{display:inline-flex; align-items:baseline; gap:var(--sp-05); color:var(--ink); text-decoration:none; font-variant-numeric:tabular-nums; border-radius:var(--r-sm)}
.ov2-h-val b{font-size:var(--fs-44); font-weight:600; letter-spacing:var(--approche-44); line-height:1}
.ov2-h-val small{font-size:var(--fs-24); font-weight:500; color:var(--muted)}
.ov2-h-val.zero b{color:var(--muted)}
.ov2-h-val.neg b{color:var(--texte-danger)}
.ov2-h-val:hover b{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px}
.ov2-h-d{margin-top:var(--sp-1); font-size:var(--fs-13); color:var(--muted)}
.ov2-heros .ov2-jauge{max-width:560px}
.ov2-jauge .repere.fin::after{left:auto; right:-2px; transform:none}
.ov2-jauge .repere.debut::after{left:-2px; transform:none}
.ov2-h-lg{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-5); margin-top:var(--sp-2); font-size:var(--fs-13); color:var(--muted)}
.ov2-h-lg-i{color:inherit; text-decoration:none; white-space:nowrap}
.ov2-h-lg-i b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.ov2-h-lg-i:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}

/* ---- la courbe des 14 jours : titre, total et moyenne, la mesure ; au survol, le curseur et la bulle ---- */
.ov2-courbe-tete{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3); margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--border-doux)}
.ov2-courbe-tete h3{margin:0; font-size:var(--fs-14); font-weight:600; color:var(--ink)}
.ov2-courbe-tete .ds-segment{margin-left:auto}
.ov2-courbe{position:relative; flex:1 1 auto; min-height:216px; margin-top:var(--sp-3)}
.ov2-courbe>.ds-courbe{position:absolute; top:0; left:0}   /* posée sur sa place : la redessiner ne la change pas */
.ov2-courbe .axe text.auj{fill:var(--ink); font-weight:600}
.ov2-courbe .evt rect{fill:var(--surface-piste); opacity:.7}
.ov2-curseur{opacity:0; pointer-events:none}
.ov2-curseur.on{opacity:1}
.ov2-curseur line{stroke:var(--ink-2); stroke-width:1; stroke-dasharray:2 3}
.ov2-curseur circle{fill:var(--chart-trait); stroke:var(--surface); stroke-width:2}
.ov2-evts{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2)}
.ov2-evts:empty{display:none}
.ov2-evt{max-width:100%; border:0; font:inherit; font-size:var(--fs-12); cursor:pointer}
.ov2-evt:hover{color:var(--ink)}
.ov2-evt i{display:inline-block; width:8px; height:8px; border-radius:var(--r-rond)}
@media (max-width:760px){
  .ov2-h-val b{font-size:var(--fs-44)}
  .ov2-courbe-tete{margin-top:var(--sp-4); padding-top:var(--sp-3)}
  .ov2-courbe-tete .ds-segment{margin-left:0; width:100%}
  .ov2-courbe-tete .ds-segment button{flex:1}
  .ov2-courbe{min-height:132px}
  /* les événements défilent sur une ligne, sous le pouce */
  .ov2-evts{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:var(--sp-2) calc(-1 * var(--sp-4)) 0; padding:0 var(--sp-4)}
  .ov2-evts::-webkit-scrollbar{display:none}
  .ov2-evts>*{flex:none; max-width:80%}
}

/* ---- le mois en cours : le prévu en grand, sa jauge, trois lignes ; ce qu'on te doit au pied (cartes d'une rangée : même hauteur) ---- */
.ov2-mois{display:flex; flex-direction:column}
.ov2-mois .ds-carte-h{margin-bottom:var(--sp-1)}
.ov2-m-v{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2)}
.ov2-m-val{display:inline-flex; align-items:baseline; gap:var(--sp-05); color:var(--ink); text-decoration:none; font-variant-numeric:tabular-nums}
.ov2-m-val b{font-size:var(--fs-32); font-weight:600; letter-spacing:var(--approche-32); line-height:1.1}
.ov2-m-val small{font-size:var(--fs-18); font-weight:500; color:var(--muted)}
.ov2-m-val:hover b{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px}
.ov2-m-u{font-size:var(--fs-14); color:var(--muted); margin-right:var(--sp-1)}
.ov2-mois .ov2-jauge{margin-bottom:var(--sp-2)}
.ov2-lg i{display:inline-block; width:10px; height:10px; border-radius:var(--r-xs); background:var(--accent)}
.ov2-lg i.avenir{background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--accent) 55%,transparent) 0 2px,color-mix(in srgb,var(--accent) 28%,transparent) 2px 4px)}
.ov2-lignes{display:grid; margin-top:var(--sp-4)}
.ov2-li{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:0 var(--sp-2); border-top:1px solid var(--border-doux)}
.ov2-li-a{flex:1 1 100%; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:var(--sp-3); padding:var(--sp-2) 0; color:inherit; text-decoration:none}
.ov2-li .k{font-size:var(--fs-14); color:var(--ink-2); min-width:0}
.ov2-li .k small{display:block; font-size:var(--fs-12); color:var(--muted); line-height:var(--lh-serre)}
.ov2-li .k small span{white-space:nowrap}
.ov2-li .v{display:flex; align-items:center; gap:var(--sp-2); justify-content:flex-end}
.ov2-li .v b{font-size:var(--fs-16); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.ov2-li-a:hover .k{color:var(--ink)}
.ov2-li-a:hover .v b{text-decoration:underline; text-underline-offset:3px}
.ov2-li>.ov2-rang{margin:0 0 var(--sp-2)}
/* à encaisser : le total, le retard, une ligne par canal et par mois ; « Reçu » au survol (toujours là au doigt) */
.ov2-enc{margin-top:auto; padding-top:var(--sp-4)}
.ov2-enc>div{padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); background:var(--surface-douce)}
.ov2-enc-t{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2)}
.ov2-enc-t b{font-size:var(--fs-20); font-weight:600; letter-spacing:var(--approche-24); color:var(--ink); font-variant-numeric:tabular-nums}
.ov2-enc-t>span{font-size:var(--fs-13); color:var(--muted)}
.ov2-enc-t .ds-lien{margin-left:auto; font-size:var(--fs-13)}
.ov2-enc-s{margin-top:var(--sp-05); font-size:var(--fs-13); color:var(--ink-2)}
.ov2-enc-s.retard b{color:var(--texte-alerte); font-weight:600}
.ov2-enc-d>summary{display:none}
.ov2-enc-ls{list-style:none; margin:var(--sp-2) 0 0; padding:0; display:grid}
.ov2-enc-l{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; grid-template-areas:"c e g m"; align-items:center; column-gap:var(--sp-2); min-height:32px; padding:var(--sp-05) 0; border-top:1px solid var(--border-doux)}
.ov2-enc-l:first-child{border-top:0}
.ov2-enc-l .c{grid-area:c; display:inline-flex; align-items:baseline; gap:var(--sp-15); min-width:0; font-size:var(--fs-13); font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap}
.ov2-enc-l .c i{flex:none; align-self:center; width:8px; height:8px; border-radius:var(--r-rond); background:var(--cn-p,var(--point-neutre))}
.ov2-enc-l .c .svgi{flex:none; align-self:center; width:14px; height:14px; color:var(--muted)}
.ov2-enc-l .c small{font-size:var(--fs-12); font-weight:400; color:var(--muted)}
.ov2-enc-l a.c:hover span{text-decoration:underline; text-underline-offset:3px}
.ov2-enc-l .e{grid-area:e; min-width:0; font-size:var(--fs-12); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ov2-enc-l.retard .e,.ov2-enc-l.du .e{color:var(--texte-alerte); font-weight:600}
.ov2-enc-l .m{grid-area:m; font-size:var(--fs-14); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.ov2-enc-l .g{grid-area:g; display:flex}
.ov2-enc-l .g .ds-btn{height:24px; padding:0 var(--sp-15); font-size:var(--fs-12)}
.ov2-enc-l .g .ds-btn .svgi{width:13px; height:13px}
.ov2-enc-avis{margin-top:var(--sp-2); font-size:var(--fs-13)}
@media (hover:hover) and (min-width:761px){ .ov2-enc-l .g{display:none} .ov2-enc-l:hover .g,.ov2-enc-l:focus-within .g{display:flex} }
@media (max-width:760px){
  .ov2-enc-d>summary{display:flex; align-items:center; gap:var(--sp-1); margin-top:var(--sp-2); min-height:var(--h-sm); font-size:var(--fs-13); font-weight:500; color:var(--texte-accent); cursor:pointer; list-style:none}
  .ov2-enc-d>summary::-webkit-details-marker{display:none}
  .ov2-enc-d>summary::after{content:''; width:7px; height:7px; margin-left:var(--sp-1); border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg)}
  .ov2-enc-d[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
  .ov2-enc-l{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"c m" "e g"; row-gap:var(--sp-05); padding:var(--sp-2) 0}
  .ov2-enc-l .g{justify-content:flex-end}
}

/* ---- l'activité : six chiffres dans UNE bande, chacun mène à sa liste ; sa courbe des 14 jours DESSOUS (plus par-dessus le libellé) ---- */
.ov2-b-t{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
.ov2-b>.ov2-c{display:flex; flex-direction:column}
.ov2-c-a{flex:1; display:flex; flex-direction:column; gap:var(--sp-1); min-width:0; color:inherit; text-decoration:none}
.ov2-c-l{font-size:var(--fs-13); font-weight:500; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ov2-c-v{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2); min-height:28px}
.ov2-c-v b{font-size:var(--fs-20); font-weight:600; letter-spacing:var(--approche-24); line-height:1.15; color:var(--ink); font-variant-numeric:tabular-nums}
.ov2-c.zero .ov2-c-v b{color:var(--muted)}
.ov2-c.alerte .ov2-c-v b{color:var(--texte-danger)}
.ov2-c-sq{width:64px; height:22px}
.ov2-c-s{font-size:var(--fs-12); line-height:var(--lh-serre); color:var(--muted); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
.ov2-c-sp{display:block; margin-top:auto; padding-top:var(--sp-2)}
a.ov2-c-a:hover .ov2-c-l{color:var(--ink)}
a.ov2-c-a:hover .ov2-c-v b{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.ov2-spark{display:block; width:100%; height:24px; overflow:visible; color:var(--chart-trait)}
.ov2-spark.discret{color:var(--faint)}
.ov2-sp-a{fill:currentColor; opacity:.1}
.ov2-sp-l{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.ov2-sp-p{fill:none; stroke:currentColor; stroke-width:5; stroke-linecap:round; vector-effect:non-scaling-stroke}
/* V1.9 (youcef 08/10 : « mélange les 2 widgets ») — la bande ET le classement : huit chiffres en deux rangées (l'argent, puis
   l'activité), le rang de chacun EN CLAIR sous lui (le podium en or), et le mois en cours sur une ligne au pied */
.ov2-c-rg{display:inline-flex; align-items:center; gap:var(--sp-1); align-self:flex-start; max-width:100%; margin-top:var(--sp-2); padding:0; border:0; background:none;
  font:inherit; font-size:var(--fs-12); line-height:var(--lh-serre); color:var(--muted); text-align:left; font-variant-numeric:tabular-nums; cursor:pointer}
.ov2-c-rg sup,.ov2-bm sup{font-size:var(--fs-11); line-height:0}
.ov2-c-rg .svgi,.ov2-bm .svgi{width:13px; height:13px; flex:none; color:var(--or)}
.ov2-c-rg:hover,.ov2-c-rg:focus-visible{color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.ov2-c-rg.or{color:var(--or-ink); font-weight:600}
.ov2-bm-l{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); padding:var(--sp-3) var(--sp-5); border-top:1px solid var(--border-doux)}
.ov2-bm-t{font-size:var(--fs-13); font-weight:600; color:var(--ink-2)}
.ov2-bm{display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2); padding:0; border:0; background:none; font:inherit; font-size:var(--fs-13);
  color:var(--muted); text-align:left; cursor:pointer}
.ov2-bm b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.ov2-bm-r{display:inline-flex; align-items:center; gap:var(--sp-05); font-variant-numeric:tabular-nums}
.ov2-bm.or .ov2-bm-r{color:var(--or-ink); font-weight:600}
.ov2-bm:hover .ov2-bm-r,.ov2-bm:focus-visible .ov2-bm-r{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
@media (min-width:761px){
  .ov2-b-8{grid-auto-flow:row; grid-template-columns:repeat(4,minmax(0,1fr))}
  .ov2-b-8>:nth-child(4n+1)::before{display:none}
  .ov2-b-8>:nth-child(n+5){border-top:1px solid var(--border-doux)}
}
@media (max-width:760px){
  /* au téléphone, le pied en deux colonnes : le libellé, le chiffre, le rang l'un sous l'autre */
  .ov2-bm-l{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3) var(--sp-4); padding:var(--sp-3) var(--sp-4); border-top:0}
  .ov2-bm-t{grid-column:1/-1}
  .ov2-bm{display:flex; flex-direction:column; align-items:flex-start; gap:0; min-width:0}
}
@media (min-width:761px) and (max-width:1279px){
  .ov2-b-6{grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr))}
  .ov2-b-6>:nth-child(3n+1)::before{display:none}
  .ov2-b-6>:nth-child(n+4){border-top:1px solid var(--border-doux)}
}
@media (max-width:760px){
  .ov2-bande{overflow:hidden}
  .ov2-b-t{position:static; width:auto; height:auto; margin:0; padding:var(--sp-4) var(--sp-4) var(--sp-3); overflow:visible; clip-path:none; font-size:var(--fs-16); font-weight:600; color:var(--ink); line-height:var(--lh-titre)}
  .ov2-b{gap:1px; background:var(--border-doux); border-top:1px solid var(--border-doux)}
  .ov2-b>.ov2-c{background:var(--surface)}
  .ov2-c-sp{display:none}
}

/* ---- le point du mois (du 1er au 7) ou de la semaine : un résumé, pas un écran ; « Lire le point » l'ouvre dans la carte ---- */
.ov2-pt{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--sp-3) var(--sp-5)}
.ov2-pt-pict{width:44px; height:44px; border-radius:var(--r-md); background:var(--or-doux); color:var(--or-ink); display:grid; place-items:center}
.ov2-pt-pict .svgi{width:22px; height:22px}
.ov2-pt-h{display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3)}
.ov2-pt-h h2{margin:0; font-size:var(--fs-16); font-weight:600; color:var(--ink); line-height:var(--lh-titre)}
.ov2-pt-h .ds-segment{align-self:center}
.ov2-pt-c{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-6); margin-top:var(--sp-2)}
.ov2-pt-c>div{display:flex; flex-direction:column; min-width:0; font-size:var(--fs-13); color:var(--muted)}
.ov2-pt-c b{font-size:var(--fs-16); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.ov2-pt-c span{display:inline-flex; align-items:center; flex-wrap:wrap; gap:var(--sp-05) var(--sp-1); white-space:nowrap}
.ov2-pt-c .ds-var{height:18px; padding:0 var(--sp-1)}
.ov2-pt-c .ds-var .svgi{width:12px; height:12px}
.ov2-pt-vide{margin-top:var(--sp-2); font-size:var(--fs-13); color:var(--muted)}
.ov2-pt-g{flex-wrap:wrap; justify-content:flex-end; gap:var(--sp-2)}
.ov2-pt .ds-sq{padding:var(--sp-2) 0 0}
.ov2-pt-corps{grid-column:1/-1; margin-top:var(--sp-1); padding-top:var(--sp-3); border-top:1px solid var(--border-doux)}
.ov2-pt-corps .pt-chiffres{display:none}
.ov2-pt-corps .pt-lignes{margin-top:0}
@media (max-width:760px){
  .ov2-pt{grid-template-columns:auto minmax(0,1fr); gap:var(--sp-3)}
  .ov2-pt-pict{width:36px; height:36px; align-self:start}
  .ov2-pt-c{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3)}
  .ov2-pt-g{grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
  .ov2-pt-g .ds-btn{height:var(--h-touch)}
}

/* ---- les prochaines courses : dix lignes, le trait « maintenant », Assigner en ligne, le conflit en rouge ; la ligne ouvre la course ---- */
.ov2-prochaines>.ds-carte-h{margin-bottom:var(--sp-3)}
.ov2-prochaines .ds-carte-h .ds-lien .svgi{width:14px; height:14px}
.ov2-t th{position:static}
.ov2-t td{height:52px}
.ov2-t th:first-child,.ov2-t td:first-child{padding-left:var(--sp-5)}
.ov2-t th:last-child,.ov2-t td:last-child{padding-right:var(--sp-5)}
.ov2-t col.c-h{width:84px} .ov2-t col.c-ch{width:146px} .ov2-t col.c-st{width:146px} .ov2-t col.c-px{width:92px}
.ov2-t.sans-prix col.c-ch{width:188px}
.ov2-t tbody tr:focus-visible{outline:2px solid var(--ring); outline-offset:-2px}
.ov2-t tr.encours td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.ov2-tr .ds-trajet{max-width:100%; overflow:hidden}
.ov2-tr .ds-sous{display:block; margin-top:1px; font-size:var(--fs-12); overflow:hidden; text-overflow:ellipsis}
.ov2-tr .ds-mention{font-weight:inherit; color:inherit; padding:0}
.ov2-ch .ds-mention{max-width:100%}
.ov2-ch .ds-btn{height:var(--h-sm)}
.ov2-conf{display:flex; align-items:center; gap:var(--sp-05); margin-top:1px; font-size:var(--fs-12); font-weight:600; color:var(--texte-danger); white-space:nowrap}
.ov2-conf.serre{color:var(--texte-alerte)}
.ov2-conf .svgi{width:12px; height:12px; flex:none}
.ov2-px b{display:block; font-weight:600}
.ov2-px .ds-sous{display:block; font-size:var(--fs-12); overflow:hidden; text-overflow:ellipsis}
.ov2-plus-b{display:none}
.ov2-prochaines .ds-vide{padding:var(--sp-6) var(--sp-5)}
@media (max-width:760px){
  .ov2-prochaines>.ds-carte-h{padding:var(--sp-4) var(--sp-4) 0}
  .ov2-t,.ov2-t tbody{display:block}
  .ov2-t colgroup,.ov2-t thead,.ov2-t .ov2-st,.ov2-t .ov2-px{display:none}
  .ov2-t tbody tr{display:grid; grid-template-columns:62px minmax(0,1fr) auto; align-items:center; column-gap:var(--sp-3); padding:var(--sp-2) var(--sp-4); border-top:1px solid var(--border-doux)}
  .ov2-t tbody tr.encours{box-shadow:inset 3px 0 0 var(--accent)}
  .ov2-t tbody tr.encours td:first-child{box-shadow:none}
  .ov2-t tbody tr>td,.ov2-t tbody tr>td:first-child,.ov2-t tbody tr>td:last-child{height:auto; padding:0; border:0; background:none}
  .ov2-t tbody tr.maintenant{display:block; position:relative; height:22px; padding:0; border:0}
  .ov2-t tbody tr.maintenant td{display:block; height:22px; padding:0 var(--sp-4)}
  .ov2-t .ov2-ch{max-width:132px; text-align:right}
  .ov2-t .ov2-ch .ds-btn{height:var(--h-sm)}
  .ov2-prochaines:not(.tout) .ov2-plus{display:none}
  .ov2-plus-b{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); min-height:var(--h-touch); padding:0 var(--sp-4) var(--sp-1) var(--sp-2); border-top:1px solid var(--border-doux)}
  .ov2-plus-b>.ds-lien:only-child{margin-left:auto}
}

/* ---- la prochaine course : une capsule nuit (au téléphone en tête ; à l'ordinateur, la tienne, dans l'heure) ---- */
.ov2-cap{display:grid; gap:var(--sp-2); padding:var(--sp-3) var(--sp-3) var(--sp-2); border-radius:var(--r-card); background:var(--nuit); color:var(--on-couleur); box-shadow:var(--el-1)}
html[data-theme="dark"] .ov2-cap{background:var(--nuit-2)}
.ov2-cap-a{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--sp-3); color:inherit; text-decoration:none}
.ov2-cap-a .pict{width:36px; height:36px; border-radius:var(--r-sm); background:var(--side-or-doux); color:var(--or); display:grid; place-items:center}
.ov2-cap-a .pict .svgi{width:18px; height:18px}
.ov2-cap-a b{display:block; font-size:var(--fs-15); font-weight:600}
.ov2-cap-a small{display:block; font-size:var(--fs-13); color:var(--side-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ov2-cap-a>.svgi{width:16px; height:16px; color:var(--side-faint)}
.ov2-cap-g{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2)}
.ov2-cap-g .ds-btn{justify-content:center; background:var(--side-on); color:var(--on-couleur); box-shadow:none}
.ov2-cap-g .ds-btn:hover{background:var(--side-hover)}
.ov2-cap-g .ds-btn.primaire{background:var(--accent); color:var(--on-couleur)}
.ov2-cap-g .ds-btn[disabled]{opacity:.45}
.ov2-cap-g>:only-child{grid-column:1/-1}
@media (min-width:761px){
  .ov2-cap{grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:var(--sp-3) var(--sp-4)}
  .ov2-cap-g{display:flex}
}

/* ---- la provenance : la barre à 100 %, des rangs qui mènent à leurs courses, Roulées / Reçues ; le sens dessous ---- */
.ov2-prov .ds-carte-h .ds-segment button{height:var(--h-sm)}
.ov2-prov .ds-rang{grid-template-columns:12px minmax(0,1fr) auto 40px 72px; color:var(--ink); text-decoration:none}
.ov2-prov .ds-rang .d{display:flex; justify-content:flex-end}
.ov2-prov .ds-rang .ds-var{height:20px}
.ov2-prov a.ds-rang:hover .ds-ell{text-decoration:underline; text-underline-offset:3px}
.ov2-sens-h{margin:var(--sp-5) 0 var(--sp-2)}
.ov2-sens-h:first-child{margin-top:0}
.ov2-sens-h h3{font-size:var(--fs-14)}
.ov2-vide{margin:0; padding:var(--sp-2) 0; font-size:var(--fs-13); color:var(--muted)}

/* ---- le site sur la période : quatre étapes et leurs taux, le chemin, les sources ; sa surveillance au-dessus ---- */
.ov2-site-k{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2)}
.ov2-site-k .e{min-width:0; padding:var(--sp-3); border-radius:var(--r-sm); background:var(--surface-douce)}
.ov2-site-k .h{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2)}
.ov2-site-k b{font-size:var(--fs-20); font-weight:600; letter-spacing:var(--approche-24); color:var(--ink); font-variant-numeric:tabular-nums}
.ov2-site-k .ds-var{height:20px}
.ov2-site-k .l{display:block; margin-top:var(--sp-05); font-size:var(--fs-12); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ov2-site-k .l i{font-style:normal; font-weight:600; color:var(--ink-2)}
.ov2-site-l{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); margin-top:var(--sp-3); font-size:var(--fs-12); color:var(--muted)}
.ov2-site-l b{font-weight:600; color:var(--ink)}
.ov2-site-l>i{font-style:normal; color:var(--faint)}
.ov2-site-l.src{gap:var(--sp-1) var(--sp-3); margin-top:var(--sp-2)}
.ov2-site-p{margin-top:var(--sp-2); font-size:var(--fs-12); color:var(--faint)}
.ov2 #ovSentinelle{margin-bottom:var(--sp-3)}
.ov2 #ovSentinelle .ovsent{width:100%}

/* ---- au téléphone, la provenance et le site se replient sur leur chiffre clé ---- */
.ov2-repli-b{display:none}
@media (max-width:760px){
  .ov2-repli-b{display:inline-flex; align-items:center; gap:var(--sp-1); padding:0 0 0 var(--sp-2); border:0; background:none; color:var(--muted); font:inherit; font-size:var(--fs-13); cursor:pointer}
  .ov2-repli-b .svgi{width:16px; height:16px; transition:transform var(--t-2) var(--ease)}
  .ov2-repli-b[aria-expanded="true"] .svgi{transform:rotate(180deg)}
  .ov2-repli-b[aria-expanded="true"]>span{display:none}
  .ov2-repli.ferme>:not(:first-child){display:none}
  .ov2-repli.ferme>:first-child{margin-bottom:0}
  .ov2-repli.ferme>:first-child .cnt,.ov2-repli.ferme>:first-child .ds-segment,.ov2-repli.ferme>:first-child .ds-lien{display:none}
  .ov2-repli:not(.ferme)>.ds-carte-h:first-child:has(.ds-segment) .cnt{display:none}   /* ouverte : le segment a la place */
}

/* ---- le bandeau des ventes fermées (au-dessus de la file) : un bandeau, pas une carte ---- */
.ov2 #ovArrets .ovav{margin:0; padding:var(--sp-3) var(--sp-4); border:0; border-radius:var(--r-md); background:var(--surface); box-shadow:var(--el-1)}
.ov2 #ovArrets .ovav:hover{box-shadow:var(--el-1-survol)}
.ov2 #ovArrets .ovav.on{background:var(--alerte-doux); box-shadow:none}
.ov2 #ovArrets .ovav.on .ic{background:var(--surface); color:var(--texte-alerte)}
.ov2 #ovArrets .ovav .tx b{font-size:var(--fs-14); color:var(--ink)}
.ov2 #ovArrets .ovav .d{font-size:var(--fs-13); color:var(--ink-2)}

/* ---- le pied : revenir à l'ancien tableau de bord (deux semaines), discrètement ---- */
.ov2-pied{display:flex; justify-content:center}
.ov2-retour{display:inline-flex; align-items:center; gap:var(--sp-15); padding:var(--sp-1) var(--sp-2); border:0; border-radius:var(--r-sm); background:none; font:inherit; font-size:var(--fs-13); color:var(--muted); cursor:pointer}
.ov2-retour:hover{color:var(--ink); background:var(--surface-piste)}
.ov2-retour .svgi{width:14px; height:14px}
/* ====== LOT E1L — Réservations : la liste (DS v2) ======
   DIRECTION § 3.3 à 3.6, 3.10, 3.14 et § 5.2 ; le prototype reservations.html. La barre de vue colle sous l'en-tête, les puces
   et leur bilan suivent, puis le tableau standard dans une carte : groupé par jour, le trait « maintenant », Heure · Trajet +
   client · Chauffeur (« Assigner ») · Statut · Canal · Prix + marge · gestes au survol. La fiche ouverte (panneau ancré, à partir
   de 1280 px) : les colonnes courtes. Au téléphone : une course, deux lignes. Le JS choisit l'affichage et l'écrit sur la
   section (data-vue : tableau, liste, cartes, calendrier) : la feuille le suit, sans seuil à elle. Des jetons seulement. */

/* ---- la barre de vue colle sur toute la hauteur de la liste (son conteneur ne compte pas) ; le bandeau « Filtré sur… »
   laisse la place aux puces (§ 3.2, règle 4) ---- */
#bkBarre{display:contents}
#lienBar[data-ecran="bookings"]{display:none}   /* V2.0 (vitesse) : plus de html:has() (chaque changement de la page le réévaluait sur tout le document) */
/* les vues qui ne tiennent pas défilent ; leur bout s'efface au lieu d'être coupé net */
#s-bookings .ds-vue .vues{padding-right:var(--sp-6); -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}

/* ---- l'affichage suit data-vue ---- */
#s-bookings:not([data-vue="tableau"]) #bkListe,#s-bookings[data-vue="tableau"] #bkCards,#s-bookings[data-vue="calendrier"] #bkCards,
#s-bookings:not([data-vue="calendrier"]) #bkCal{display:none}
#s-bookings[data-vue="cartes"] #bkCards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--sp-3); align-items:start}
#s-bookings[data-vue="cartes"] #bkCards>:is(.bkc-jour,.bkc-plus,.ds-carte){grid-column:1/-1}
#s-bookings #bkCal{margin-top:0; border:0; box-shadow:var(--el-1)}
@media (max-width:1040px){ #s-bookings[data-vue="cartes"] #bkCards{grid-template-columns:minmax(0,1fr)} }

/* ---- les puces : « Tout effacer », la période personnalisée, le bilan ---- */
#bkChips[hidden]{display:none}
#bkChips .ds-filtres{padding:var(--sp-15) 0}
.bk-raz{height:28px; padding:0 var(--sp-2); border:0; border-radius:var(--r-sm); background:none; font:inherit; font-size:var(--fs-13); font-weight:500; color:var(--muted); cursor:pointer; white-space:nowrap}
.bk-raz:hover{background:var(--surface-piste); color:var(--ink)}
.bk-perso{display:inline-flex; align-items:center; gap:var(--sp-1)}
.bk-date{height:28px; padding:0 var(--sp-2); border:0; border-radius:var(--r-sm); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-strong); font:inherit; font-size:var(--fs-13); color:var(--ink)}
.bk-date:focus-visible{outline:0; box-shadow:inset 0 0 0 1px var(--accent), var(--ring)}
html[data-theme="dark"] .bk-date{color-scheme:dark}

/* ---- le tableau : une carte, ses en-têtes collants sous la barre de vue, des colonnes posées (la plus large : le trajet) ---- */
#s-bookings .bk-carte{margin-bottom:var(--sp-6)}
/* douze courses à l'écran à 1440 × 900 : des en-têtes (colonnes, jours) de 32 px, le trait « maintenant » de 20 */
#s-bookings .bk-t{--vue-dessus:var(--vue-h); --th-h:32px}
#s-bookings .bk-t tbody tr.maintenant td{height:20px}
#s-bookings .bk-t thead th:first-child{border-top-left-radius:var(--r-card)}
#s-bookings .bk-t thead th:last-child{border-top-right-radius:var(--r-card)}
#bkHead th.selc{width:44px}
#bkHead th[data-col="date"]{width:92px}
#bkHead th[data-col="chauffeur"]{width:184px}
#bkHead th[data-col="ent"]{width:176px}
#bkHead th[data-col="canal"]{width:136px}   /* « console » et « Novalia » côte à côte sous le canal */
#bkHead th[data-col="montant"]{width:108px}
#bkHead th[data-col="prixch"]{width:136px}
#bkHead th[data-col="ref"]{width:156px}
#bkHead th[data-col="veh"]{width:140px}
#bkHead th[data-col="client"]{width:176px}
#bkHead th[data-col="service"]{width:128px}
#bkHead th[data-col="vol"]{width:100px}
#bkHead th[data-col="pax"]{width:104px}
#bkHead th[data-col="paiement"]{width:108px}
#bkHead th[data-col="recu"]{width:132px}
#bkHead th[data-col="gestes"]{width:120px}
/* trop de colonnes pour la largeur (youcef en a coché beaucoup) : la carte défile en largeur, ses en-têtes ne collent plus */
#bkListe.defile{overflow-x:auto; overscroll-behavior-x:contain}
#bkListe.defile .bk-t thead th,#bkListe.defile .bk-t tr.jour td{position:static}
/* l'en-tête : trier (Maj : tri secondaire), glisser pour l'ordre, le bord pour la largeur */
#bkHead th{user-select:none}
#bkHead th.sortable{cursor:pointer; transition:color var(--t-1) var(--ease)}
#bkHead th.sortable:hover,#bkHead th.tri{color:var(--ink)}
#bkHead th .lab{overflow:hidden; text-overflow:ellipsis}
#bkHead th .arr{display:inline-flex; align-items:center; margin-left:var(--sp-05); vertical-align:-2px}
#bkHead th .arr .svgi{width:12px; height:12px}
#bkHead th .arr sup{font-size:var(--fs-11)}
#bkHead th .crz{position:absolute; top:0; right:0; bottom:0; width:8px; cursor:col-resize}
#bkHead th .crz::after{content:''; position:absolute; right:3px; top:30%; bottom:30%; width:2px; border-radius:var(--r-xs); background:transparent; transition:background var(--t-1) var(--ease)}
#bkHead th:hover .crz::after{background:var(--border-strong)}
#bkHead th .crz:hover::after,#bkHead th .crz.drag::after{background:var(--accent)}
#bkHead th.th-drag{opacity:.45}
#bkHead th.th-over{box-shadow:inset 2px 0 0 var(--accent), inset 0 -1px 0 var(--border)}
#s-bookings .bk-t :is(th,td).selc{padding:0; text-align:center}
#s-bookings .bk-t .selc input{width:16px; height:16px; margin:0; accent-color:var(--accent); cursor:pointer; vertical-align:middle}
html[data-theme="dark"] #s-bookings :is(.selc,.ck) input{color-scheme:dark}

/* ---- les lignes : la cochée, celle du clavier (J / K), l'ouverte (la fiche dans le panneau), l'assignation qui part ---- */
#s-bookings .bk-t td{line-height:1.35}
#s-bookings .bk-t tbody tr.sel td{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
#s-bookings .bk-t tbody tr.bk-cur td{background:var(--surface-douce)}
#s-bookings .bk-t tbody tr.bk-cur td:first-child{box-shadow:inset 3px 0 0 var(--ink-2)}
#s-bookings .bk-t tbody tr.ouverte td{background:var(--accent-soft)}
#s-bookings .bk-t tbody tr.ouverte td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
#s-bookings .bk-t tr.bk-cur .gestes .ds-groupe-btn{opacity:1}
/* la cellule du trajet : les codes, puis le client (sa fiche), les passagers, le vol */
#s-bookings .bk-t td[data-c="trajet"] .ds-trajet{font-weight:500}
#s-bookings .bk-t .sous .ds-mention{font-weight:500; padding:1px var(--sp-05); margin:-1px calc(-1 * var(--sp-05))}   /* sans avatar : un fond de survol égal des deux côtés, le texte aligné sur le trajet */
#s-bookings .bk-t .bk-cli[data-va]{color:var(--ink-2); font-weight:500; cursor:pointer}
#s-bookings .bk-t .bk-cli[data-va]:hover{color:var(--ink); text-decoration:underline; text-underline-offset:2px}
#s-bookings .bk-court,#s-bookings .bk-chst{display:none}
/* le chauffeur, l'assignation qui part, « Assigner » et où en est la proposition, « après paiement » */
#s-bookings .bk-t td[data-c="chauffeur"] small{display:block; margin-top:var(--sp-05); font-size:var(--fs-12); line-height:1.2; overflow:hidden; text-overflow:ellipsis}
#s-bookings .bk-conflit{color:var(--texte-danger); font-weight:600}
#s-bookings .bk-envoi{color:var(--texte-accent); font-weight:500}
#s-bookings .bk-prop{color:var(--muted)}
#s-bookings .bk-sans{color:var(--muted); font-size:var(--fs-13)}
#s-bookings .bk-chst .ds-statut{font-size:var(--fs-12)}
#s-bookings .bk-t tr.bk-optimiste td[data-c="chauffeur"] .ds-mention .nom{color:var(--texte-accent)}
/* le canal, et dessous d'où vient la réservation (site, console) */
#s-bookings .bk-t td[data-c="canal"] .sous{display:flex; gap:var(--sp-1); margin-top:var(--sp-05); line-height:1}
#s-bookings .bk-t td[data-c="canal"] .sous>*{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis}
/* l'Entreprise (colonne proposée, V88.6) : sur deux lignes comme les autres — les entreprises sollicitées, puis où en est la
   proposition ; « Proposer » en bouton secondaire (« Assigner », dans la colonne Chauffeur, reste le seul plein) */
#s-bookings .bk-t td.entcell{white-space:nowrap}
#s-bookings .bk-t td.entcell .entps{flex-wrap:nowrap; overflow:hidden}
#s-bookings .bk-t td.entcell .rowsub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:var(--fs-12); color:var(--muted)}
#s-bookings .bk-t td.entcell .btn.asg{min-height:28px; height:28px; padding:0 var(--sp-2); border:0; border-radius:var(--r-sm); background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--border-strong); font-size:var(--fs-13); font-weight:500}
#s-bookings .bk-t td.entcell .btn.asg:hover{background:var(--surface-douce)}
/* V2.5 — « Proposer à d’autres » : un vrai bouton, sur sa ligne (en fin de ligne d'état, il était coupé par l'ellipsis) */
.entact{margin-top:var(--sp-05); max-width:100%}
.entlien.entbtn{display:inline-flex; align-items:center; max-width:100%; height:22px; padding:0 var(--sp-2); border-radius:var(--r-pilule);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-strong); color:var(--texte-accent); font-weight:600; text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.entlien.entbtn:hover{background:var(--surface-douce); color:var(--ink)}
/* la référence (colonne proposée) : coupée au milieu, entière au survol */
#s-bookings .bk-t td[data-c="ref"] .reffull{display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom}
/* le prix ; dessous « Payé » et la marge */
#s-bookings .bk-t td[data-c="montant"] b{display:block; font-weight:600; color:var(--ink)}
#s-bookings .bk-t td[data-c="montant"] .paye{margin:var(--sp-05) 0 0; padding:0 var(--sp-1); line-height:16px; vertical-align:0}
.bk-marge{margin-left:var(--sp-1); font-size:var(--fs-12); color:var(--muted); font-variant-numeric:tabular-nums}
.bk-marge.neg{color:var(--texte-danger)}
#s-bookings .bk-t td[data-c="montant"] b+.bk-marge{display:block; margin-left:0}
/* les gestes au survol : le geste de l'état, appeler, « … » */
#s-bookings .bk-t td.gestes{padding-left:0; padding-right:var(--sp-2)}
/* chargement, liste vide, « Afficher plus » */
#s-bookings .bk-t tr.bk-etat td{height:auto; padding:0; white-space:normal; border-bottom:0; cursor:default}
#s-bookings .bk-t tbody tr.bk-etat:hover td{background:var(--surface)}
#s-bookings .bk-t tr.bk-etat .ds-sq{padding:var(--sp-4) var(--sp-5)}
#s-bookings .bk-t tr.bkplus td{height:auto; padding:var(--sp-3); text-align:center; cursor:default}
#s-bookings .bk-t tbody tr.bkplus:hover td{background:var(--surface)}

/* ---- la fiche ouverte à côté (panneau ancré) : les colonnes courtes — heure, trajet + client, chauffeur et statut, prix ;
   le canal passe sous le client. Sous 1440 px, le prix laisse sa place au trajet. ---- */
@media (min-width:1280px){
  html.pn-on.pn-ancre #s-bookings .bk-t :is(th[data-col],td[data-c]):not([data-col="sel"],[data-col="date"],[data-c="date"],[data-col="trajet"],[data-c="trajet"],[data-col="chauffeur"],[data-c="chauffeur"],[data-col="montant"],[data-c="montant"]){display:none}
  html.pn-on.pn-ancre #s-bookings .bk-chst{display:block; margin-top:var(--sp-05)}
  html.pn-on.pn-ancre #s-bookings .bk-court{display:inline}
  html.pn-on.pn-ancre #bkHead th[data-col="date"]{width:80px}
  html.pn-on.pn-ancre #bkHead th[data-col="chauffeur"]{width:176px}
  html.pn-on.pn-ancre #bkHead th[data-col="montant"]{width:96px}
}
@media (min-width:1280px) and (max-width:1439px){
  html.pn-on.pn-ancre #s-bookings .bk-t :is([data-col="montant"],[data-c="montant"]){display:none}
}
/* l'en-tête de page, resserré à côté de la fiche : « Nouvelle réservation » garde son « + » (son nom reste lu) */
@media (min-width:1280px){
  /* V2.0 (vitesse) — #topbar porte l'écran ouvert (marquerEcran) : plus de html:has(#s-….on), réévalué sur tout le document */
  html.pn-on.pn-ancre #topbar[data-ecran="bookings"] #pageActions .ds-btn.primaire{width:32px; padding:0}
  html.pn-on.pn-ancre #topbar[data-ecran="bookings"] #pageActions .ds-btn.primaire>:is(span,kbd):not(.svgi){position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
}
/* la place manque (un portable, le menu déplié) : le tableau se resserre avant de défiler (bkLargeurMaj) — le canal passe sous le
   client, puis le statut sous le chauffeur */
#bkListe.serre .bk-t :is([data-col="canal"],[data-c="canal"]){display:none}
#bkListe.serre .bk-court{display:inline}
#bkListe.serre2 .bk-t :is([data-col="statut"],[data-c="statut"]){display:none}
#bkListe.serre2 .bk-chst{display:block; margin-top:var(--sp-05)}
#bkListe.serre3 #bkHead th[data-col="date"]{width:80px}
#bkListe.serre3 #bkHead th[data-col="chauffeur"]{width:148px}

/* ---- les menus : le choix en cours coché, le nombre de courses à droite ; « Colonnes… » ---- */
.ds-menu button[aria-current="true"]{font-weight:600}
.ds-menu button[aria-current="true"] .svgi{color:var(--texte-accent)}
#bkColsPop[hidden]{display:none}
.bk-cols{width:264px}
.bk-col{display:flex; align-items:center; gap:var(--sp-2); min-height:32px; padding:0 var(--sp-2); border-radius:var(--r-sm); font-size:var(--fs-14); color:var(--ink); cursor:pointer}
.bk-col:hover{background:var(--surface-piste)}
.bk-col input{width:16px; height:16px; margin:0; accent-color:var(--accent); cursor:pointer}
.bk-col small{margin-left:auto; font-size:var(--fs-12); color:var(--muted)}
.bk-col.lock{color:var(--muted); cursor:default}
.bk-col.lock:hover{background:none}
.bk-cols-aide{margin:var(--sp-1) var(--sp-2); font-size:var(--fs-12); line-height:1.4; color:var(--muted)}
@media (pointer:coarse){ .bk-col{min-height:var(--h-touch)} }

/* ---- la barre d'actions en lot (§ 3.10) : nuit, le geste plein en vert, au-dessus de la barre du bas ---- */
#selBar{bottom:calc(var(--sp-5) + var(--bas-colle)); z-index:var(--z-barre-haut); gap:var(--sp-2); padding:var(--sp-15) var(--sp-15) var(--sp-15) var(--sp-4); border:0; border-radius:var(--r-md);
  background:var(--nuit); color:var(--on-couleur); box-shadow:var(--el-4)}
html[data-theme="dark"] #selBar{background:var(--nuit-3)}
#selBar .n{color:var(--side-muted)}
#selBar .n b{color:var(--on-couleur)}
#selBar .btn{min-height:32px; padding:0 var(--sp-3); border:0; border-radius:var(--r-sm); background:var(--side-on); color:var(--on-couleur); box-shadow:none}
#selBar .btn:hover{background:var(--side-line)}
#selBar .btn svg{color:currentColor}
#selBar .btn[data-selact="assigner"]{background:var(--btn); color:var(--btn-ink)}
#selBar .btn[data-selact="assigner"]:hover{background:var(--accent-hover)}
#selBar .x{color:var(--side-muted)}
#selBar .x:hover{background:var(--side-on); color:var(--on-couleur)}
@media (max-width:1040px){ #selBar{bottom:calc(var(--sp-2) + var(--bas-colle))} }

/* ---- le téléphone : une course, deux lignes (§ 3.14) — l'heure et ce qui reste ; le trajet, puis le client et qui fait la
   course ; à droite le prix et le geste utile. Un jour = une carte, son en-tête colle sous la barre de vue. ---- */
.bk-li-jour{position:sticky; top:calc(var(--haut-barre) + var(--vue-h)); z-index:var(--z-collant); display:flex; align-items:baseline; gap:var(--sp-2); padding:var(--sp-3) var(--sp-1) var(--sp-2);
  background:var(--page); font-size:var(--fs-13); color:var(--muted)}
.bk-li-jour b{font-weight:600; color:var(--ink)}
.bk-li-jour .n{margin-left:auto; font-variant-numeric:tabular-nums}
.bk-li-groupe{position:relative; margin:0 0 var(--sp-2); background:var(--surface); border-radius:var(--r-card); box-shadow:var(--el-1); overflow:hidden}
.bkc.bk-li{display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; column-gap:var(--sp-3); min-height:64px; margin:0; padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
  border:0; border-radius:var(--r-nul); background:var(--surface); box-shadow:none; cursor:pointer; -webkit-tap-highlight-color:transparent}
.bkc.bk-li+.bkc.bk-li,.bk-li-now+.bkc.bk-li{border-top:1px solid var(--border-doux)}
.bkc.bk-li:has(>.ck){grid-template-columns:28px 64px minmax(0,1fr) auto; padding-left:var(--sp-2)}
.bkc.bk-li:active{background:var(--surface-douce)}
.bkc.bk-li.sel{outline:0; background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.bkc.bk-li.ouverte{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
.bkc.bk-li.nouv{animation:bkNouv 2.2s var(--ease)}
.bkc.bk-li.passee :is(.bk-li-h b,.bk-li-t,.bk-li-cl,.bk-li-p){color:var(--muted)}
.bkc.bk-li .ck{position:relative; width:28px; height:28px; margin:0; display:grid; place-items:center}
.bkc.bk-li .ck::after{content:''; position:absolute; inset:-8px -6px}
.bkc.bk-li .ck input{width:20px; height:20px; margin:0; accent-color:var(--accent)}
.bk-li-h{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.bk-li-h b{font-size:var(--fs-16); font-weight:600; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums}
.bk-li-h small{font-size:var(--fs-12); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bk-li-h small.urgent{color:var(--texte-danger); font-weight:600}
.bk-li-c{display:flex; flex-direction:column; gap:var(--sp-05); min-width:0}
/* le trajet d'abord, entier tant qu'il tient ; le badge du site prend la place qui reste (coupé, au moins « novalia… ») et, s'il
   n'en reste pas assez, passe à la ligne qu'on ne voit pas (la fiche le montre) — jamais un « n… » illisible */
.bk-li-t{display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--sp-2); min-width:0; max-height:20px; overflow:hidden; font-size:var(--fs-14); font-weight:500; color:var(--ink)}
.bk-li-t .ds-trajet{flex:0 1 auto; min-width:0; max-width:100%}
.bk-li-t .bk-site{display:block; flex:1 1 64px; max-width:max-content; min-width:0; overflow:hidden; text-overflow:ellipsis}
.bk-li-s{display:flex; align-items:center; gap:var(--sp-1); min-width:0; font-size:var(--fs-13); line-height:1.3; color:var(--muted); white-space:nowrap}
/* qui fait la course (ou son état) passe avant le nom du client : c'est le nom qui se coupe le premier */
.bk-li-cl{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--ink-2)}
.bk-li-sep{flex:none; color:var(--faint)}
.bk-li-q{flex:none; max-width:62%; overflow:hidden; text-overflow:ellipsis}
.bk-li-q .ds-statut{font-size:var(--fs-13); vertical-align:-1px}
.bk-li-a{display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:var(--sp-1); min-width:0}
.bk-li-p{font-size:var(--fs-14); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.bk-li-p .paye{margin-right:var(--sp-1); vertical-align:1px}
/* les gestes de la ligne : 28 px dessinés (la ligne reste à 64 px), 44 px au doigt */
.bk-li-a .ds-btn{position:relative}
@media (pointer:coarse){
  .bk-li-a .ds-btn{min-height:28px}
  .bk-li-a .ds-btn.icone{min-width:28px; width:28px}
  .bk-li-a .ds-btn:not([aria-busy="true"])::after{content:''; position:absolute; inset:-8px -4px}
}
.bk-li-now{position:relative; height:20px}
.bk-li-now::before{content:''; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:var(--or)}
.bk-li-now span{position:absolute; left:var(--sp-3); top:1px; height:18px; padding:0 var(--sp-2); border-radius:var(--r-pilule); background:var(--or); color:var(--nuit); font-size:var(--fs-11); font-weight:700; line-height:18px}
#s-bookings .bkc-plus{padding:var(--sp-3) 0 var(--sp-5)}
/* au téléphone : les puces sur une ligne qui défile, jusqu'aux bords */
@media (max-width:1040px){
  #bkChips .ds-filtres{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--sp-3)); padding:var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
    -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}   /* jusqu'aux bords (main : 12 px) ; ce qui dépasse s'efface */
  #bkChips .ds-filtres::-webkit-scrollbar{display:none}
  #bkChips .ds-filtres>*{flex:none}
  #bkChips .bilan{margin-left:var(--sp-2)}
  /* des puces de 32 px (la règle des 44 px de V93 vise les boutons d'avant) ; leur zone de toucher déborde */
  #bkChips :is(.ds-puce,.ds-puce.ajout,.bk-raz){height:32px; min-height:0}
  #bkChips .ds-puce button{min-height:0}
  #bkChips .ds-puce .x{width:28px; height:28px}
  /* la recherche repliée en loupe : sa touche « / » attend qu'elle s'ouvre */
  #s-bookings .ds-vue .ds-champ:not(:focus-within):not(:has(input:not(:placeholder-shown))) .ds-kbd{display:none}
}

/* ====== LOT E1F — LA FICHE DE COURSE ET LA FENÊTRE D'ASSIGNATION (DS v2) ======
   DIRECTION § 5.2 et § 3.2 : une anatomie (le billet, le prochain geste, le client, l'argent, l'activité, liée à) dans le
   panneau de 520 px comme au téléphone ; au téléphone la barre du pouce colle en bas et les sections d'après le client se
   replient. Les composants ds-* (billet, geste, suggestions, sections, mentions) ont leur forme dans la section du lot F :
   ici, ce que la fiche y ajoute. Jetons seulement : le thème sombre suit. */
#panneauCorps #drawer .db:has(>.fc){padding:0}
.fc{display:flex; flex-direction:column; min-width:0}
.fc-passage{display:flex; align-items:flex-start; gap:var(--sp-2); margin:var(--sp-4) var(--sp-5) 0; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--surface-douce); color:var(--ink-2); font-size:var(--fs-13); line-height:1.45}
.fc-passage .svgi{width:15px; height:15px; flex:none; margin-top:2px; color:var(--muted)}
.fc-sep{color:var(--faint); margin:0 var(--sp-1)}
.fc-aide{margin:var(--sp-2) 0 0; font-size:var(--fs-12); line-height:1.45; color:var(--muted)}
.fc-alerte{color:var(--texte-alerte); font-weight:600}
.fc-alerte-l{display:flex; align-items:flex-start; gap:var(--sp-2); margin:var(--sp-3) 0 0; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); background:var(--alerte-doux); color:var(--ink); font-size:var(--fs-13); line-height:1.45}
.fc-alerte-l .svgi{width:15px; height:15px; flex:none; margin-top:2px; color:var(--texte-alerte)}
.fc-vide{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-3) 0 0; font-size:var(--fs-13); color:var(--ink-2)}
.fc-vide>.svgi{width:15px; height:15px; color:var(--texte-alerte)}
.fc-vide .ds-btn{margin-left:auto}

/* ---- 1. le billet ---- */
.fc-billet .haut{row-gap:var(--sp-15)}
.fc-statut,.fc-statut-fixe{display:inline-flex; align-items:center; gap:2px; padding:0; border:0; border-radius:var(--r-pilule); background:none; color:inherit; font:inherit}
.fc-statut{cursor:pointer}
.fc-statut .svgi{width:14px; height:14px; color:var(--muted); transition:transform var(--t-1) var(--ease)}
.fc-statut:hover .ds-statut.pastille{box-shadow:0 0 0 1px var(--border-strong)}
.fc-statut[aria-expanded="true"] .svgi{transform:rotate(180deg)}
.fc-num{display:inline-flex; align-items:center; gap:var(--sp-1); padding:0 var(--sp-1); border:0; border-radius:var(--r-xs); background:none; font:inherit; font-size:var(--fs-13); color:var(--muted); cursor:copy}
.fc-num:hover{background:var(--surface-piste); color:var(--ink)}
.fc-paye{background:var(--ok-doux); color:var(--texte-ok)}
.fc-paye .svgi{color:inherit}
.fc-billet .quand{align-items:baseline}
.fc-heure{padding:0 var(--sp-1); margin:0 calc(-1 * var(--sp-1)); border:0; border-radius:var(--r-md); background:none; font-family:inherit; cursor:pointer; transition:background var(--t-1) var(--ease)}
.fc-heure:hover{background:var(--surface-piste)}
.fc-quand-t{display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3); min-width:0}
.fc-combien{margin-left:auto; display:inline-flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right}
.fc-combien:empty{display:none}
.fc-prix{font-size:var(--fs-18); font-weight:600; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1}
.fc-marge{font-size:var(--fs-12); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.fc-marge.inconnue{color:var(--texte-alerte)}
.fc-billet .codes .c b.fc-long{font-size:var(--fs-18); letter-spacing:-.01em; line-height:1.25}
.fc-billet .codes .c small.fc-orig{color:var(--faint); font-style:italic}
.fc-vol{flex-wrap:wrap; row-gap:var(--sp-1)}
.fc-vol .vol-g{font-weight:600; color:var(--ink)}
.fc-vol .vol-lien .mono{font-family:inherit; letter-spacing:.01em}
.fc-vol-sens{color:var(--muted)}
.fc-vol .etat:empty{display:none}
/* l'état du vol (retard, atterrissage, prise en charge décalée) : une phrase, sur sa ligne */
.ds-billet .fc-vol .etat{flex-basis:100%; margin-left:0}
.fc-gestes .ds-btn.primaire{flex:0 1 auto; min-width:0}
.fc-gestes .ds-btn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fc-aller{display:none}

/* ---- Modifier, Annuler : sous le billet ---- */
.fc-act:empty{display:none}
.fc-act{padding:0 var(--sp-5) var(--sp-4)}
.fc-form{padding:var(--sp-4); border-radius:var(--r-md); background:var(--surface); box-shadow:0 0 0 1px var(--border), var(--el-1)}
.fc-form-t{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-3); font-size:var(--fs-14)}
.fc-form-t>.svgi{width:16px; height:16px; color:var(--muted)}
.fc-form-annuler .fc-form-t>.svgi{color:var(--texte-danger)}
.fc-form-t b{font-weight:600; color:var(--ink)}
.fc-form-t .ds-btn{margin-left:auto}
.fc-form-g{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 var(--sp-3)}
.fc-form-g .field{margin-bottom:var(--sp-3)}
.fc-form-g .field.fc-large{grid-column:1/-1}
.fc-form-g .field input,.fc-form-g .field select{width:100%; min-width:0; box-sizing:border-box}
.fc-form-plus{margin:0 0 var(--sp-3)}
.fc-form-plus>summary{display:inline-flex; align-items:center; gap:var(--sp-1); list-style:none; cursor:pointer; font-size:var(--fs-13); font-weight:500; color:var(--texte-accent)}
.fc-form-plus>summary::-webkit-details-marker{display:none}
.fc-form-plus>summary .svgi{width:14px; height:14px; transition:transform var(--t-1) var(--ease)}
.fc-form-plus[open]>summary .svgi{transform:rotate(90deg)}
.fc-form-plus[open]>summary{margin-bottom:var(--sp-3)}
.fc-form-prev{display:flex; align-items:flex-start; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); background:var(--surface-douce); font-size:var(--fs-13); cursor:pointer}
.fc-form-prev input{width:16px; height:16px; margin-top:2px; accent-color:var(--accent); flex:none}
.fc-form-prev b{display:block; font-weight:600; color:var(--ink)}
.fc-form-prev small{display:block; color:var(--muted)}
.fc-form-b{display:flex; justify-content:flex-end; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3)}

/* ---- 2. le prochain geste ---- */
.fc-geste>.ds-geste+.ds-geste,.fc-geste>.ds-sugg+.ds-geste{margin-top:var(--sp-3)}
.fc-geste .ds-geste p .ds-mention{vertical-align:-2px}
.fc-aff{margin-top:var(--sp-2); font-size:var(--fs-13); color:var(--ink-2)}
.fc-aff:empty{display:none}
.fc-aff b{color:var(--ink); font-weight:600}
.fc-dispatch .fplan,.fc-dispatch .fprop{margin-top:var(--sp-2)}
.fc-dispatch .fplan:empty{display:none}
.fc-sugg .ds-suggestions{margin-top:var(--sp-3)}
.fc-sugg .ds-sugg .ds-mention{font-weight:inherit}
.fc-ch{margin-top:0}
.fc-qui-t{min-width:0}
.fc-qui-t b{display:block; font-size:var(--fs-15); font-weight:600; color:var(--ink)}
.fc-qui-t b .ds-mention{font-weight:inherit}
/* une ligne chacune : les noms se coupent (leur aperçu les dit en entier), jamais la plaque ni le numéro */
.fc-qui-t small{display:flex; flex-wrap:nowrap; align-items:center; min-width:0; font-size:var(--fs-12); color:var(--muted)}
.fc-qui-t small .wa-lien{flex:none; white-space:nowrap}
.fc-qui-t small .ds-mention{font-weight:400; color:var(--ink-2)}
.fc-plaque{flex:none; color:var(--ink-2); font-variant-numeric:tabular-nums; letter-spacing:.03em; white-space:nowrap}
.fc-qui-att{color:var(--texte-alerte); font-weight:600}
.fc-envoi{position:relative; overflow:hidden; background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent-border)}
.fc-envoi::after{content:''; position:absolute; left:0; bottom:0; height:2px; background:var(--or); animation:ds-temps 6000ms linear forwards}
.fc-liens{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin-top:var(--sp-3); font-size:var(--fs-13)}
.fc-liens:empty{display:none}
.fc-msg{margin-top:var(--sp-3); padding:var(--sp-3); border-radius:var(--r-md); background:var(--surface-douce)}
.fc-msg .fc-aide{margin:0 0 var(--sp-2)}
.fc-msg textarea{display:block; width:100%; box-sizing:border-box; min-height:64px; margin-top:var(--sp-2); padding:var(--sp-2) var(--sp-3); border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-14); resize:vertical}
.fc-msg textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
.fc-msg-b{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--sp-2); margin-top:var(--sp-2)}
.fc-msg-b:first-of-type{justify-content:flex-start}
.fc-reportbox:empty{display:none}
.fc-reportbox{margin-top:var(--sp-3)}
.fc-report{padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); background:var(--info-doux); color:var(--ink)}
.fc-report.lie{background:var(--surface-douce)}
.fc-report .t{display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-14)}
.fc-report .t b{font-weight:600}
.fc-report .t .svgi{width:16px; height:16px; flex:none; color:var(--texte-info)}
.fc-report.lie .t .svgi{color:var(--muted)}
.fc-report p{margin:var(--sp-1) 0 0; font-size:var(--fs-13); line-height:1.45; color:var(--ink-2)}
.fc-report .b{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3)}
.fc-conf p{margin:0 0 var(--sp-4); font-size:var(--fs-14); line-height:1.5; color:var(--ink-2)}
.fc-conf .fc-alerte-l{margin:0 0 var(--sp-4)}
.fc-conf-b{display:flex; justify-content:flex-end; gap:var(--sp-2)}

/* ---- 3. le client, 4. l'argent, 6. liée à ---- */
.fc-marques{display:inline-flex; align-items:center; gap:var(--sp-1); margin-left:var(--sp-2); vertical-align:middle}
.fc-marques:empty{display:none}
.fc-copier{margin-left:var(--sp-2); font-size:var(--fs-13)}
.fc-s .ds-dl dd .ds-sous{font-size:var(--fs-13)}
.fc-nc{margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--border-doux)}
.fc-nc-t{display:flex; align-items:baseline; gap:var(--sp-2); font-size:var(--fs-13)}
.fc-nc-t b{font-weight:600; color:var(--ink)}
.fc-nc-l{display:grid; gap:var(--sp-1); margin:var(--sp-2) 0}
.fc-nc-r{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--sp-3); font-size:var(--fs-13)}
.fc-nc-r .q{color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.fc-nc-r .x{display:flex; align-items:center; gap:var(--sp-1); min-width:0; color:var(--ink-2)}
.fc-nc-r .x span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fc-nc-r .x .svgi{width:14px; height:14px; flex:none; color:var(--muted)}
.fc-nc-r .st{font-size:var(--fs-12); font-weight:600; color:var(--muted); white-space:nowrap}
.fc-nc-r .st.ok{color:var(--texte-ok)}
.fc-nc-r .st.ko{color:var(--texte-danger)}
.fc-nc-b{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.fc-recu{display:grid}
.fc-l{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-1) 0; font-size:var(--fs-14)}
.fc-l .k{color:var(--ink-2); min-width:0}
.fc-l .v{color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; text-align:right}
.fc-l .v small{display:block; font-size:var(--fs-12); font-weight:400; color:var(--muted)}
.fc-l-sous{padding-top:0}
.fc-l-sous .k,.fc-l-sous .v{font-size:var(--fs-12); font-weight:400; color:var(--muted)}
.fc-l-fpc{align-items:center}
.fc-l-fpc .k{flex:none}
.fc-l-fpc .v{flex:1 1 auto; font-weight:400}
.fc-l-fpc .fpc-l{justify-content:flex-end}
.fc-paie{margin:var(--sp-1) 0; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); background:var(--surface-douce); font-size:var(--fs-14)}
.fc-paie:not(.edit) .paie-v{margin-left:auto}
.fc-paie .paie-k .muted{display:none}
.fc-total{margin-top:var(--sp-2); padding-top:var(--sp-3); border-top:1px solid var(--border)}
.fc-total .k{color:var(--ink); font-weight:600}
.fc-total .v{font-size:var(--fs-18); font-weight:600}
.fc-total.inconnue .v{color:var(--texte-alerte)}
.fc-total-aide{margin:0; text-align:right}
.fc-incmarge:empty{display:none}
.fc-l-qui{flex-wrap:wrap; margin-top:var(--sp-2); padding-top:var(--sp-2); border-top:1px dashed var(--border-doux)}
.fc-l-qui .v{flex:1 1 auto; font-weight:400; color:var(--ink-2)}
.fc-l-qui .v .ds-lien{font-weight:500}
.fc-lies{list-style:none; margin:0; padding:0}
.fc-lie{display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; gap:var(--sp-3); min-height:40px; padding:var(--sp-1) 0; border-top:1px solid var(--border-doux); font-size:var(--fs-14)}
.fc-lie:first-child{border-top:0}
.fc-lie:empty{display:none}
.fc-lie>.svgi{width:16px; height:16px; color:var(--muted)}
.fc-lie.alerte>.svgi{color:var(--texte-alerte)}
/* le vol : l'icône du rang suffit (celle du lien du vol ferait doublon) */
.fc-lie .vol-lien>.svgi{display:none}
.fc-lie-m{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-1); min-width:0}
.fc-lie-m>small{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.fc-lie-m>small:empty{display:none}
.fc-lie-d{display:flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-13); color:var(--muted); white-space:nowrap}
.fc-verrou{display:inline-flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-12); color:var(--muted)}
.fc-verrou .svgi{width:12px; height:12px}
.fc-prov{display:inline-flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2)}
.fc-prov-sel{height:28px; min-height:28px; padding:0 var(--sp-6) 0 var(--sp-2); font-size:var(--fs-12)}
.fc-inc{margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--border-doux)}
.fc-inc-t{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); font-size:var(--fs-13)}
.fc-inc-t>.svgi{width:16px; height:16px; color:var(--muted)}
.fc-inc-t b{margin-right:auto; font-size:var(--fs-14); font-weight:600; color:var(--ink)}
.fc-inc #incRows{margin-top:var(--sp-2)}

/* ---- 5. l'activité : les notes, en ajouter une, la chronologie et son trait « maintenant » ---- */
.fc-notes{display:grid; gap:var(--sp-2); margin-bottom:var(--sp-4)}
.fc-note{padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); background:var(--surface-douce)}
.fc-note .k{font-size:var(--fs-12); font-weight:600; color:var(--ink-2)}
.fc-note .k span{font-weight:400; color:var(--muted)}
.fc-note p{margin:2px 0 0; font-size:var(--fs-14); line-height:1.45; color:var(--ink); white-space:pre-line; overflow-wrap:anywhere}
.fc-noter{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:var(--sp-3); margin-bottom:var(--sp-4)}
.fc-noter>.ds-avatar{margin-top:var(--sp-1)}
.fc-noter textarea{display:block; width:100%; box-sizing:border-box; min-height:36px; padding:var(--sp-2) var(--sp-3); border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-14); line-height:1.4; resize:vertical; transition:border-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease)}
.fc-noter textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); min-height:72px}
.fc-noter-b{display:none; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2)}
.fc-noter-c>.fc-aide{display:none}
.fc-noter:focus-within .fc-noter-b,.fc-noter:has(textarea:not(:placeholder-shown)) .fc-noter-b{display:flex}
.fc-noter:focus-within .fc-noter-c>.fc-aide,.fc-noter:has(textarea:not(:placeholder-shown)) .fc-noter-c>.fc-aide{display:block}
.fc-fil{list-style:none; margin:0; padding:0}
.fc-fil>li{position:relative; display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:var(--sp-3); padding:0 0 var(--sp-4); font-size:var(--fs-13)}
.fc-fil>li::before{content:''; position:absolute; left:9px; top:22px; bottom:2px; width:2px; border-radius:var(--r-xs); background:var(--border-doux)}
.fc-fil>li:last-child{padding-bottom:0}
.fc-fil>li:last-child::before{display:none}
.fc-fil .pt{width:20px; height:20px; border-radius:var(--r-rond); display:grid; place-items:center; background:var(--surface-3); color:var(--muted)}
.fc-fil .pt .svgi{width:12px; height:12px}
.fc-fil .vert .pt{background:var(--ok-doux); color:var(--texte-ok)}
.fc-fil .rouge .pt{background:var(--danger-doux); color:var(--texte-danger)}
.fc-fil .or .pt{background:var(--or-doux); color:var(--or-ink)}
.fc-fil .x{min-width:0; color:var(--ink-2); line-height:1.45; overflow-wrap:anywhere}
.fc-fil .x b{font-weight:600; color:var(--ink)}
.fc-fil .x .ds-tag{margin-left:var(--sp-1); vertical-align:1px}
.fc-fil .x .t{display:block}
.fc-fil .x small{display:block; font-size:var(--fs-12); color:var(--muted)}
.fc-fil .q{font-size:var(--fs-12); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1.6}
.fc-fil>li.sys .x{color:var(--muted)}
.fc-fil>li.maintenant{grid-template-columns:20px minmax(0,1fr); padding-bottom:var(--sp-3); color:var(--or-ink); font-weight:600}
.fc-fil>li.maintenant .pt{background:var(--or); color:var(--nuit)}
.fc-fil>li.maintenant .x{display:flex; align-items:center; gap:var(--sp-2); color:inherit}
.fc-fil>li.maintenant .x::after{content:''; flex:1; height:2px; border-radius:var(--r-xs); background:var(--or); opacity:.45}
.fc-fil>li.avenir .pt{background:transparent; box-shadow:inset 0 0 0 1.5px var(--border-strong)}
.fc-fil>li.avenir::before{background:repeating-linear-gradient(to bottom,var(--border-strong) 0 3px,transparent 3px 6px)}
.fc-fil-pied{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin-top:var(--sp-3); font-size:var(--fs-13)}

/* ---- les états : lecture (le squelette du billet), introuvable, panne ---- */
.fc-sq .haut{gap:var(--sp-2)}
.fc-sq .ds-squelette{flex:none}
.ds-squelette.fc-sq-pil{width:96px; height:24px; border-radius:var(--r-pilule)}
.ds-squelette.fc-sq-tag{width:64px; height:20px; border-radius:var(--r-tag)}
.ds-squelette.fc-sq-h{width:128px; height:40px; border-radius:var(--r-sm)}
.ds-squelette.fc-sq-d{width:150px; height:14px}
.ds-squelette.fc-sq-code{width:72px; height:24px; margin-bottom:var(--sp-2)}
.fc-sq .codes .c.droite .ds-squelette{margin-left:auto}
.ds-squelette.fc-sq-btn{width:200px; height:40px; border-radius:var(--r-sm)}
.ds-squelette.fc-sq-btn.court{width:96px}
.ds-squelette.fc-sq-btn.carre{width:40px}
.fc-etat .ds-vide{padding-top:var(--sp-9)}

/* ---- au téléphone : la fiche plein écran, la barre du pouce, les sections repliables ---- */
.fc-barre{display:none}
.fc-pli>summary{display:flex; align-items:center; gap:var(--sp-2); list-style:none; cursor:pointer; margin:calc(-1 * var(--sp-2)) 0; padding:var(--sp-2) 0}
.fc-pli>summary::-webkit-details-marker{display:none}
.fc-pli>summary h3{flex:1; display:flex; align-items:center; gap:var(--sp-2); margin:0; font-size:var(--fs-14); font-weight:600; color:var(--ink)}
.fc-pli>summary h3 .droite{margin-left:auto; font-weight:500; font-size:var(--fs-13); color:var(--muted)}
.fc-pli>summary>.svgi{width:16px; height:16px; color:var(--muted); transition:transform var(--t-1) var(--ease)}
.fc-pli[open]>summary{margin-bottom:var(--sp-2)}
.fc-pli[open]>summary>.svgi{transform:rotate(180deg)}
@media (max-width:760px){
  .fc-billet{padding:var(--sp-4) var(--sp-4) var(--sp-4)}
  .fc-billet .quand{margin-top:var(--sp-3)}
  .fc-billet .codes{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); margin-top:var(--sp-4)}
  .fc-billet .fc-gestes{display:none}
  .fc-aller{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); margin-top:var(--sp-4)}
  .fc-aller .ds-btn{width:100%}
  .fc-act{padding:0 var(--sp-4) var(--sp-4)}
  .fc .ds-section{padding:var(--sp-4)}
  .fc-form-g{grid-template-columns:minmax(0,1fr)}
  .fc-passage{margin:var(--sp-3) var(--sp-4) 0}
  .fc-pli>summary{min-height:var(--h-touch); margin:calc(-1 * var(--sp-3)) 0; padding:var(--sp-1) 0}
  .fc-pli[open]>summary{margin-bottom:var(--sp-1)}
  .fc-lie{min-height:var(--h-touch)}
  .fc-lie-d{white-space:normal; justify-content:flex-end; text-align:right}
  .fc-barre{position:sticky; bottom:0; z-index:var(--z-collant); display:flex; align-items:center; gap:var(--sp-2); margin-top:auto; padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom,0px)); background:var(--elevated); border-top:1px solid var(--border)}
  .fc-barre .ds-btn{flex:none; min-height:var(--h-touch)}
  .fc-barre .ds-btn.icone{width:var(--h-touch)}
  .fc-barre .ds-btn.primaire{flex:1 1 auto; min-width:0}
  .fc-barre .ds-btn.primaire span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .fc-barre:not(:has(.primaire)){justify-content:flex-end}
  .fc-noter-b{justify-content:flex-start}
  .fc-noter-b .ds-btn{margin-left:auto}
}
@media (pointer:coarse){
  .fc-statut .ds-statut.pastille{min-height:32px}
  .fc-num{min-height:32px}
  .fc-liens .ds-lien,.fc-fil-pied .ds-lien,.ds-geste .liens .ds-lien{min-height:var(--h-touch)}
}

/* ---- la fenêtre d'assignation (« Qui prend 11:05 ? ») : la course, les chauffeurs classés, le véhicule, l'envoi ---- */
.fa>.ds-segment{display:flex}
.fa>.ds-segment button{flex:1}
.fa-recap{margin:0; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); background:var(--surface-douce); font-size:var(--fs-14); line-height:1.45; color:var(--ink-2)}
.fa-recap b{font-weight:600; color:var(--ink)}
.fa-recap .ds-sous{display:block; margin-top:2px}
.fa-recap details{margin-top:var(--sp-1)}
.fa-recap summary{cursor:pointer; font-size:var(--fs-13); color:var(--texte-accent)}
.fa-li{padding:2px 0; font-size:var(--fs-12); color:var(--ink-2)}
.fa-alerte,.fa-err{display:flex; align-items:flex-start; gap:var(--sp-2); margin:0; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); background:var(--alerte-doux); color:var(--ink); font-size:var(--fs-13); line-height:1.45}
.fa-err{align-items:center; background:var(--danger-doux)}
.fa-err .ds-btn{margin-left:auto}
.fa-alerte .svgi,.fa-err>.svgi{width:15px; height:15px; flex:none; color:var(--texte-alerte)}
.fa-err>.svgi{color:var(--texte-danger)}
.fa-outils{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3)}
.fa-outils .ds-champ{flex:1 1 220px}
.fa-libres{display:inline-flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-13); color:var(--ink-2); cursor:pointer}
.fa-libres input{width:16px; height:16px; accent-color:var(--accent)}
.fa-liste{margin-top:0; max-height:min(46vh,420px); overflow-y:auto; padding:2px}
.fa-sugg{cursor:pointer; transition:box-shadow var(--t-1) var(--ease), background var(--t-1) var(--ease)}
.fa-sugg:hover{box-shadow:0 0 0 1px var(--border-strong)}
.fa-sugg.on{background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent)}
.fa-sugg.off{cursor:default; opacity:.55}
.fa-sugg.off:hover{box-shadow:0 0 0 1px var(--border)}
.fa-moi{background:var(--or-doux)}
.fa-t{min-width:0}
.fa-t>small:not(.fa-raisons){overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fa-raisons{display:flex; flex-wrap:wrap; align-items:center; margin-top:2px; min-width:0}
.fa-r{display:inline-flex; align-items:center; gap:2px; font-weight:500}
.fa-r .svgi{width:12px; height:12px}
.fa-r.good{color:var(--texte-ok)}
.fa-r.bad{color:var(--texte-danger)}
.fa-r.warn{color:var(--texte-alerte)}
.fa-r.gray{color:var(--muted); font-weight:400}
.fa-r.fav{color:var(--or-ink)}
.fa-sep{color:var(--faint); margin:0 var(--sp-1)}
.fa-raisons .lnk{font-size:var(--fs-12)}
.fa-go{position:sticky; bottom:calc(-1 * var(--sp-4)); display:grid; gap:var(--sp-2); padding:var(--sp-3) 0 var(--sp-1); border-top:1px solid var(--border); background:var(--elevated)}
.fa-veh{display:grid; gap:var(--sp-1); font-size:var(--fs-12); color:var(--muted)}
.fa-veh select{width:100%}
.fa-fav{display:flex; align-items:center; gap:var(--sp-1); margin:0; font-size:var(--fs-12); color:var(--or-ink)}
.fa-fav .svgi{width:13px; height:13px}
.fa-retenir{display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-13); color:var(--ink-2)}
.fa-go-b{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.fa-go-b .ds-btn.primaire{flex:1 1 auto}
.fa-aide{margin:0; font-size:var(--fs-12); line-height:1.45; color:var(--muted)}
.fa-grps{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2)}
@media (max-width:760px){ .fa-liste{max-height:none} .fa .socs label{min-height:var(--h-touch)} }

/* ====== LOT E5 — LE TÉLÉPHONE ET « AU VOLANT » (DS v2) ======
   DIRECTION § 3.12, § 3.14, § 5.13, § 5.14 (06/10/2026) : les gestes du téléphone (le seuil d'un glissé se voit et se sent),
   « Au volant » (plein écran, toujours en nuit, glisser pour passer à l'étape), la capsule « Ta prochaine course » au-dessus
   de la barre du bas, le grand titre du téléphone. Des jetons seulement. */

/* ---- glisser une ligne : passé le seuil, le fond s'affirme (le geste partira au relâcher) ---- */
.glisse-fond{transition:background var(--t-1) var(--ease), color var(--t-1) var(--ease)}
.glisse-fond[data-pret="1"]{background:var(--btn); color:var(--btn-ink)}
.glisse-fond[data-pret="1"][data-ton="ok"]{background:var(--good-plein); color:var(--on-good)}

/* ---- glisser pour valider (js/noyau/gestes.js) : la piste verte, le curseur que le pouce pousse jusqu'au bout ---- */
.glisse-valider{--gv-x:0px; --gv-p:0; position:relative; display:flex; align-items:center; height:64px; padding:var(--sp-1); border-radius:var(--r-card);
  background:var(--btn); color:var(--btn-ink); overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:pan-y; transition:background var(--t-2) var(--ease)}
.glisse-valider::before{content:''; position:absolute; top:var(--sp-1); bottom:var(--sp-1); left:var(--sp-1); width:calc(var(--gv-x) + 56px); border-radius:var(--r-md);
  background:color-mix(in srgb,var(--btn-ink) 16%,transparent); pointer-events:none}
.glisse-curseur{position:relative; z-index:var(--z-dessus); flex:none; display:grid; place-items:center; width:56px; height:56px; padding:0; border:0; border-radius:var(--r-md);
  background:var(--btn-ink); color:var(--btn); box-shadow:var(--el-1); cursor:grab; touch-action:none; transform:translateX(var(--gv-x)); transition:transform var(--t-3) var(--ease-ressort)}
.glisse-curseur .svgi{width:26px; height:26px}
.glisse-curseur:focus-visible{outline:2px solid var(--btn-ink); outline-offset:2px}
.glisse-valider.en-glisse .glisse-curseur{transition:none; cursor:grabbing}
.glisse-texte,.glisse-aide,.glisse-clavier{position:absolute; top:0; bottom:0; left:76px; right:var(--sp-4); display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-16); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; transition:opacity var(--t-2) var(--ease)}
.glisse-texte{opacity:calc(1 - var(--gv-p) * 1.6)}
.glisse-aide,.glisse-clavier{opacity:0}
.glisse-valider.signe .glisse-texte,.glisse-valider.arme .glisse-texte{opacity:0}
.glisse-valider.signe .glisse-aide,.glisse-valider.arme .glisse-clavier{opacity:1}
.glisse-valider.signe .glisse-curseur{animation:glisse-signe .9s var(--ease) 1}
@keyframes glisse-signe{0%,100%{transform:translateX(0)} 30%{transform:translateX(18px)} 55%{transform:translateX(0)} 75%{transform:translateX(8px)}}
/* passé 85 % : la piste s'affirme, le geste partira au relâcher */
.glisse-valider.pret,.glisse-valider.valide{background:var(--good-plein); color:var(--on-good)}
.glisse-valider.pret .glisse-curseur,.glisse-valider.valide .glisse-curseur{color:var(--good-plein)}
.glisse-valider[aria-disabled="true"]{opacity:.5}
.glisse-valider[aria-disabled="true"] .glisse-curseur{cursor:default}
@media (prefers-reduced-motion:reduce){ .glisse-curseur,.glisse-valider{transition:none} .glisse-valider.signe .glisse-curseur{animation:none} }

/* ---- « Au volant » : plein écran, toujours en nuit (html.conduite), sans menu ni barre du bas ---- */
html.conduite,html.conduite body.hors-ligne{--bas-colle:0px}
html.conduite body.hors-ligne{--bas-colle:calc(var(--h-touch) + env(safe-area-inset-bottom,0px))}
html.conduite :is(#sidebar,#topbar,#grandTitre,#hubBar,#mobileNav,#capsule){display:none}
html.conduite main{padding:0}
html.conduite body{background:var(--page)}
/* les toasts passent en haut, sur l'en-tête : en bas vit la zone du pouce */
html.conduite .ds-toasts{top:calc(env(safe-area-inset-top,0px) + var(--sp-2)); bottom:auto}
#s-volant .vl{display:flex; flex-direction:column; min-height:100dvh; max-width:560px; margin:0 auto; padding:0 var(--sp-4); color:var(--ink)}
.vl-tete{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); min-height:60px; padding-top:env(safe-area-inset-top,0px)}
.vl-fermer{display:inline-flex; align-items:center; gap:var(--sp-1); min-height:var(--h-touch); margin-left:calc(-1 * var(--sp-2)); padding:0 var(--sp-3) 0 var(--sp-1);
  border:0; border-radius:var(--r-sm); background:none; color:var(--ink-2); font:inherit; font-size:var(--fs-16); font-weight:500; cursor:pointer}
.vl-fermer:hover{color:var(--ink); background:var(--surface-douce)}
.vl-fermer .svgi{width:22px; height:22px}
.vl-tete-d{display:flex; align-items:center; gap:var(--sp-2); min-width:0}
.vl-tete .ds-segment button{min-height:var(--h-touch); font-size:var(--fs-14)}
.vl-plus{flex:none; display:grid; place-items:center; width:var(--h-touch); height:var(--h-touch); padding:0; border:0; border-radius:var(--r-md); background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border-strong); color:var(--ink); cursor:pointer}
.vl-plus .svgi{width:20px; height:20px}
.vl-corps{flex:1 0 auto; display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-2) 0 var(--sp-5)}
.vl-vide{justify-content:center}
/* le billet : l'heure en très grand, le lieu où aller, le passager */
.vl-billet{display:flex; flex-direction:column; gap:var(--sp-3)}
.vl-haut{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; min-height:28px}
.vl-rel{margin-left:auto; font-size:var(--fs-16); font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap}
.vl-rel.presse{color:var(--texte-alerte)}
.vl-quand{display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; margin-top:calc(-1 * var(--sp-1))}
.vl-heure{font-size:clamp(var(--fs-48),19vw,calc(var(--fs-48) * 2)); font-weight:600; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--ink)}
.vl-jour{font-size:var(--fs-18); font-weight:500; color:var(--ink-2)}
.vl-fil{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-1); margin:0; padding:0; list-style:none}
.vl-fil li{display:flex; flex-direction:column; gap:var(--sp-15); font-size:var(--fs-12); font-weight:500; color:var(--muted); min-width:0}
.vl-fil li::before{content:''; height:4px; border-radius:var(--r-xs); background:var(--border-strong)}
.vl-fil li span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vl-fil li.fait{color:var(--ink-2)}
.vl-fil li.fait::before{background:var(--accent)}
.vl-fil li.vient{color:var(--ink); font-weight:600}
.vl-fil li.vient::before{background:var(--or)}
.vl-k{font-size:var(--fs-13); font-weight:500; color:var(--muted)}
/* le trajet : ● la prise en charge, ■ la destination, reliées d'un trait ; le lieu où aller maintenant en grand */
.vl-route{position:relative; display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-1); padding-left:var(--sp-6)}
.vl-pt{position:relative; display:flex; flex-direction:column; gap:var(--sp-05); min-width:0}
.vl-pt::before{content:''; position:absolute; left:calc(6px - var(--sp-6)); top:var(--sp-1); width:12px; height:12px; border-radius:var(--r-rond); background:var(--page);
  box-shadow:inset 0 0 0 3px var(--faint)}
.vl-pt.fin::before{border-radius:var(--r-xs)}
.vl-pt.actif::before{box-shadow:inset 0 0 0 3px var(--accent)}
.vl-pt:first-child::after{content:''; position:absolute; left:calc(11px - var(--sp-6)); top:calc(var(--sp-1) + 15px); bottom:calc(3px - var(--sp-3) - var(--sp-1)); width:2px;
  border-radius:var(--r-xs); background:var(--border-strong)}
.vl-pt b{font-size:var(--fs-16); font-weight:600; line-height:1.3; color:var(--ink-2); overflow-wrap:anywhere}
.vl-pt small{font-size:var(--fs-14); line-height:1.35; color:var(--muted); overflow-wrap:anywhere}
.vl-pt:not(.actif) small{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
.vl-pt.actif b{font-size:var(--fs-24); line-height:1.2; letter-spacing:-.01em; color:var(--ink)}
.vl-pt.actif small{font-size:var(--fs-16); color:var(--ink-2)}
.vl-passager{display:flex; align-items:center; gap:var(--sp-3)}
.vl-p{display:flex; flex-direction:column; min-width:0}
.vl-p b{font-size:var(--fs-18); font-weight:600; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vl-p span{font-size:var(--fs-15); color:var(--ink-2); font-variant-numeric:tabular-nums}
.vl-sans{color:var(--texte-alerte); font-weight:600}
.vl-faits{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-4); font-size:var(--fs-14); color:var(--ink-2)}
.vl-faits>span{display:inline-flex; align-items:center; gap:var(--sp-15); min-height:28px}
.vl-faits .svgi{width:16px; height:16px; color:var(--muted)}
.vl-faits .vol-g .vol-lien{font-size:var(--fs-16); font-weight:600; color:var(--ink)}
.vl-faits .vol-g .vol-lien .svgi{width:16px; height:16px}
/* sur place, le chrono d'attente prend la place de l'heure : la durée en très grand ; passé l'attente gratuite, en ambre */
.vl-heure small{margin-left:var(--sp-2); font-size:var(--fs-24); font-weight:500; letter-spacing:0; color:var(--ink-2)}
.vl-chrono .vl-jour{flex-basis:100%; margin-top:calc(-1 * var(--sp-1)); font-size:var(--fs-14); font-weight:500; color:var(--muted)}
.vl-chrono.fini .vl-heure,.vl-chrono.fini .vl-jour{color:var(--texte-alerte)}
/* la note, la course suivante : dans la page, hors de la zone du pouce */
.vl-note{display:flex; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border);
  color:var(--ink-2); font-size:var(--fs-14); line-height:1.45}
.vl-note>.svgi{width:18px; height:18px; flex:none; margin-top:var(--sp-05); color:var(--texte-info)}
.vl-note p{margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-1)}
.vl-note small{font-size:var(--fs-13); color:var(--muted)}
.vl-lien{min-height:var(--h-touch); padding:0; border:0; background:none; color:var(--texte-accent); font:inherit; font-size:var(--fs-14); font-weight:600; cursor:pointer}
.vl-suiv{display:flex; align-items:center; gap:var(--sp-4); width:100%; min-height:64px; padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); border:0; border-radius:var(--r-md);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); color:var(--ink); font:inherit; text-align:left; cursor:pointer}
.vl-suiv:hover{box-shadow:inset 0 0 0 1px var(--border-strong)}
.vl-suiv-q{display:flex; flex-direction:column; flex:none}
.vl-suiv-q b{font-size:var(--fs-20); font-weight:600; line-height:1.15; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.vl-suiv-t{flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-05)}
.vl-suiv-t>span{font-size:var(--fs-15); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vl-suiv-t small{font-size:var(--fs-13); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vl-suiv>.svgi{width:18px; height:18px; flex:none; color:var(--faint)}
/* la zone du pouce, collée en bas et opaque : les gestes du moment, la piste, Itinéraire et Appeler */
.vl-pouce{position:sticky; bottom:var(--bas-colle); z-index:var(--z-collant); display:flex; flex-direction:column; gap:var(--sp-3);
  margin:0 calc(-1 * var(--sp-4)); padding:var(--sp-4) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,var(--page) calc(100% - var(--sp-4)),transparent)}
.vl-erreur,.vl-avis{display:flex; align-items:flex-start; gap:var(--sp-2); margin:0; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); font-size:var(--fs-14); line-height:1.4}
.vl-erreur{background:var(--danger-doux); color:var(--texte-danger)}
.vl-avis{background:var(--alerte-doux); color:var(--texte-alerte)}
.vl-erreur .svgi,.vl-avis .svgi{width:18px; height:18px; flex:none; margin-top:var(--sp-05)}
.vl-gestes{display:flex; gap:var(--sp-2)}
.vl-geste-s{flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:48px; padding:0 var(--sp-3);
  border:0; border-radius:var(--r-md); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-strong); color:var(--ink); font:inherit; font-size:var(--fs-15); font-weight:600; cursor:pointer}
.vl-geste-s .svgi{width:18px; height:18px; flex:none; color:var(--ink-2)}
.vl-geste-s span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vl-geste-s.danger{background:var(--danger-doux); box-shadow:inset 0 0 0 1px var(--point-danger); color:var(--texte-danger)}
.vl-autre{align-self:center; margin-top:calc(-1 * var(--sp-2))}
/* l'étape glissée : « Annuler » pendant 5 s (le temps qui reste en barre or), puis « Envoi… » jusqu'à la réponse */
.vl-envoi{position:relative; display:flex; align-items:center; gap:var(--sp-3); min-height:64px; padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border-radius:var(--r-card);
  background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border-strong); overflow:hidden}
.vl-envoi>.svgi{width:24px; height:24px; flex:none; color:var(--texte-ok)}
.vl-envoi-t{flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-05)}
.vl-envoi-t b{font-size:var(--fs-16); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vl-envoi-t small{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:var(--fs-13); line-height:1.3; color:var(--muted)}
.vl-annuler{flex:none; min-height:48px; padding:0 var(--sp-4); border:0; border-radius:var(--r-md); background:var(--elevated); box-shadow:inset 0 0 0 1px var(--border-strong);
  color:var(--ink); font:inherit; font-size:var(--fs-16); font-weight:600; cursor:pointer}
.vl-envoi-j{position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--or); transform-origin:left; animation:vl-reste var(--vl-reste,5000ms) linear forwards}
@keyframes vl-reste{from{transform:scaleX(var(--vl-part,1))} to{transform:scaleX(0)}}
.vl-rond{flex:none; width:20px; height:20px; border-radius:var(--r-rond); border:2px solid var(--border-strong); border-top-color:var(--ink); animation:ds-tourne .7s linear infinite}
@media (prefers-reduced-motion:reduce){ .vl-envoi-j{animation:none; transform:scaleX(var(--vl-part,1))} .vl-rond{animation:none} }
.vl-actions{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2)}
.vl-nav{display:flex; min-width:0}
.vl-geste{flex:1 1 auto; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:56px; padding:0 var(--sp-3);
  border:0; border-radius:var(--r-md); background:var(--elevated); box-shadow:inset 0 0 0 1px var(--border-strong); color:var(--ink); font:inherit; font-size:var(--fs-18); font-weight:600;
  text-decoration:none; cursor:pointer}
.vl-geste:hover{text-decoration:none; background:var(--surface-2)}
.vl-geste .svgi{width:22px; height:22px; flex:none}
.vl-geste>span{display:flex; flex-direction:column; align-items:flex-start; min-width:0; line-height:1.15}
.vl-geste small{font-size:var(--fs-12); font-weight:500; color:var(--muted)}
.vl-geste:disabled{color:var(--muted); cursor:default}
.vl-nav .vl-geste:not(:only-child){border-top-right-radius:var(--r-nul); border-bottom-right-radius:var(--r-nul)}
.vl-nav-choix{flex:none; display:grid; place-items:center; width:44px; min-height:56px; margin-left:1px; padding:0; border:0; border-radius:var(--r-nul) var(--r-md) var(--r-md) var(--r-nul);
  background:var(--elevated); box-shadow:inset 0 0 0 1px var(--border-strong); color:var(--ink-2); cursor:pointer}
.vl-nav-choix .svgi{width:18px; height:18px}
/* un petit téléphone (667 px de haut) : l'heure un peu moins grande, des marges plus serrées — le passager reste au-dessus de la
   zone du pouce, qui garde ses 56 px */
@media (max-height:700px){
  .vl-tete{min-height:52px}
  .vl-corps{gap:var(--sp-3); padding-top:0}
  .vl-billet{gap:var(--sp-2)}
  .vl-heure{font-size:calc(var(--fs-48) * 1.25)}
  .vl-pouce{gap:var(--sp-2); padding-top:var(--sp-3)}
}

/* ---- la capsule « Ta prochaine course » (téléphone) : une bande de nuit au-dessus de la barre du bas ; un toucher ouvre Au volant ---- */
.capsule-b{display:flex; width:100%; min-height:56px; padding:var(--sp-2) var(--sp-3); border:0; border-radius:var(--r-card);
  background:var(--nuit); color:var(--on-couleur); box-shadow:var(--el-2); font:inherit; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent;
  animation:capsule-in var(--t-3) var(--ease-ressort)}
html[data-theme="dark"] .capsule-b{background:var(--nuit-3); box-shadow:var(--el-2), inset 0 0 0 1px color-mix(in srgb,var(--on-couleur) 10%,transparent)}
.capsule-b:active{transform:scale(.985)}
.capsule-b:focus-visible{outline:2px solid var(--or); outline-offset:2px}
.capsule-in{display:flex; align-items:center; gap:var(--sp-3); flex:1; min-width:0}
.capsule-t{flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-05)}
.capsule-t b,.capsule-t small{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.capsule-t b{font-size:var(--fs-16); font-weight:600; line-height:1.25}
/* l'heure, comme sur un billet : à gauche, en grand, un filet or la sépare du trajet */
.capsule-h{flex:none; align-self:stretch; display:flex; align-items:center; padding:0 var(--sp-3) 0 var(--sp-1); box-shadow:1px 0 0 color-mix(in srgb,var(--or) 45%,transparent);
  font-size:var(--fs-20); font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.capsule-t small{font-size:var(--fs-13); line-height:1.3; color:color-mix(in srgb,var(--on-couleur) 72%,transparent)}
.capsule-q{font-weight:600; color:var(--or-clair)}
.capsule.vif .capsule-q::before{content:''; display:inline-block; width:8px; height:8px; margin-right:var(--sp-15); border-radius:var(--r-rond); background:var(--point-ok);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--point-ok) 30%,transparent); vertical-align:1px}
.capsule-in>.svgi{flex:none; width:18px; height:18px; color:color-mix(in srgb,var(--on-couleur) 55%,transparent)}
@keyframes capsule-in{from{opacity:0; transform:translateY(var(--sp-2))} to{opacity:1; transform:none}}
/* cachée dans une feuille, le clavier ouvert, au volant (la conduite) ; jamais à l'ordinateur (lot F) */
body.sheet-on .capsule,html.saisie-active .capsule,html.conduite .capsule{display:none}
/* la place qu'elle prend : la page se termine au-dessus d'elle, et ce qui se colle en bas (toasts, barres d'action) monte d'autant */
@media (max-width:1040px){
  html.capsule-on:not(.conduite){--capsule-bas:calc(68px + env(safe-area-inset-bottom,0px)); --bas-colle:calc(var(--capsule-bas) + 56px + var(--sp-2))}
  html.capsule-on:not(.conduite) body.hors-ligne{--capsule-bas:calc(112px + env(safe-area-inset-bottom,0px)); --bas-colle:calc(var(--capsule-bas) + 56px + var(--sp-2))}
  html.capsule-on:not(.conduite) .capsule{bottom:calc(var(--capsule-bas) + var(--sp-2))}
  html.capsule-on:not(.conduite) main{padding-bottom:calc(var(--bas-colle) + var(--sp-5))}
}
@media (prefers-reduced-motion:reduce){ .capsule-b{animation:none} .capsule-b:active{transform:none} }

/* ---- le grand titre du téléphone (js/noyau/coque.js) : 32 px sous la barre ; au défilement, il passe dans la barre ---- */
.grand-titre{display:none}
@media (max-width:1040px){
  .grand-titre{display:block; margin:calc(-1 * var(--sp-1)) 0 var(--sp-4); min-width:0}
  .gt-t{font-size:var(--fs-32); font-weight:700; line-height:1.1; letter-spacing:-.025em; color:var(--ink); overflow-wrap:anywhere}
  .gt-s{margin-top:var(--sp-1); font-size:var(--fs-14); color:var(--muted)}
  /* tant que le grand titre se lit, la barre ne le répète pas */
  #topbar #pageTitle{transition:opacity var(--t-2) var(--ease)}
  html:not(.titre-reduit) #topbar #pageTitle{opacity:0}
}

/* ====== LOT MARQUE — LE LOGO NOVALIAFLEET ET LA COULEUR (V99.2) (youcef 06/10 : « met mon logo novaliafleet », « ajoute de la couleur ») ======
   Le logo NovaliaFleet (le N à la route verte, « novalia FLEET » tracé sans police) dans la barre latérale, la connexion et le
   chargement ; une teinte par écran (js/noyau/coque.js, TEINTES_ECRANS) : l'icône du menu dans sa pastille, le filet sous le
   titre, le soulignement de l'onglet ouvert ; le vert de la marque sur ce qui est actif dans la barre. Des jetons seulement
   (déclarés en tête de la feuille, « LA MARQUE NOVALIAFLEET ET LES TEINTES DES ÉCRANS »). */

/* ---- 1. Le logo ---- */
#sidebar .brand .mark{width:30px; height:30px; padding:0; background:none; color:inherit; border-radius:var(--r-sm); overflow:hidden; box-shadow:0 0 0 1px var(--side-line)}
#sidebar .brand .mark svg,#login .mark svg,#bootLoad .mark svg{display:block; width:100%; height:100%}
#sidebar .brand .nm{display:flex; align-items:center; min-height:22px; color:var(--side-ink)}
#sidebar .brand .nm svg{display:block; height:20px; width:auto; max-width:100%}
#login .mark,#bootLoad .mark{width:56px; height:56px; padding:0; background:none; border-radius:var(--r-md); overflow:hidden; box-shadow:0 0 0 1px var(--side-line)}
.marque-titre{display:flex; justify-content:center; align-items:center; color:var(--ink)}
.marque-titre svg{display:block; height:26px; width:auto}
#bootLoad .bl-t.marque-titre{color:var(--side-ink)}
#bootLoad .bl-bar span{background:var(--marque)}

/* ---- 2. La barre latérale : une pastille teintée par entrée, le vert de la marque sur l'écran ouvert ---- */
#sidebar :focus-visible{outline-color:var(--marque)}
#sidebar nav button{--t:var(--side-icone)}
#sidebar nav button[data-teinte="vert"]{--t:var(--t-vert-vif)}
#sidebar nav button[data-teinte="rose"]{--t:var(--t-rose-vif)}
#sidebar nav button[data-teinte="bleu"]{--t:var(--t-bleu-vif)}
#sidebar nav button[data-teinte="violet"]{--t:var(--t-violet-vif)}
#sidebar nav button[data-teinte="ambre"]{--t:var(--t-ambre-vif)}
#sidebar nav button[data-teinte="orange"]{--t:var(--t-orange-vif)}
#sidebar nav button[data-teinte="sarcelle"]{--t:var(--t-sarcelle-vif)}
#sidebar nav button[data-teinte="indigo"]{--t:var(--t-indigo-vif)}
#sidebar nav button[data-teinte="ciel"]{--t:var(--t-ciel-vif)}
#sidebar nav button[data-teinte="fuchsia"]{--t:var(--t-fuchsia-vif)}
#sidebar nav button[data-teinte="cyan"]{--t:var(--t-cyan-vif)}
#sidebar nav button[data-teinte="lime"]{--t:var(--t-lime-vif)}
#sidebar nav button[data-teinte="or"]{--t:var(--t-or-vif)}
#sidebar nav button[data-teinte="prune"]{--t:var(--t-prune-vif)}
#sidebar nav button[data-teinte="jaune"]{--t:var(--t-jaune-vif)}
#sidebar nav button[data-teinte="ardoise"]{--t:var(--t-ardoise-vif)}
#sidebar nav button .ic{display:inline-grid; place-items:center; flex:none; width:24px; height:24px; border-radius:var(--r-sm); color:var(--t); background:color-mix(in srgb,var(--t) 16%,transparent)}
#sidebar nav button .ic svg{width:15px; height:15px}
#sidebar nav button:hover .ic{color:var(--t); background:color-mix(in srgb,var(--t) 26%,transparent)}
#sidebar nav button.on .ic{color:var(--side); background:var(--t)}
#sidebar nav button.on::before{background:var(--marque)}
#sidebar nav button.on .badge-n{background:color-mix(in srgb,var(--t) 24%,transparent); color:var(--side-ink)}
#sidebar nav button.on .badge-n.bad{background:var(--side-alerte); color:var(--on-couleur)}
#sidebar .side-actions>.btn#newBtn{background:var(--marque); border-color:var(--marque)}
#sidebar .side-actions>.btn#newBtn svg{color:var(--marque-encre)}
#sidebar .side-actions>.btn#newBtn:hover{background:var(--t-vert-vif); border-color:var(--t-vert-vif)}
#sidebar .mav{background:color-mix(in srgb,var(--marque) 22%,transparent); color:var(--t-vert-vif); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--marque) 45%,transparent)}

/* ---- 3. La page : la teinte de l'écran ouvert sur le filet du titre et l'onglet ouvert ---- */
:root{--teinte:var(--t-ardoise)}
/* V2.0 (vitesse) — la teinte se pose sur les seuls conteneurs qui s'en servent (js/noyau/ecrans.js, marquerEcran), plus sur
   <html> : une propriété personnalisée changée sur <html> faisait recalculer les styles de TOUTE la page à chaque changement d'écran. */
#topbar[data-teinte="vert"],#hubBar[data-teinte="vert"],#panneau[data-teinte="vert"],#volet[data-teinte="vert"],#drawer[data-teinte="vert"],#genBack[data-teinte="vert"],.screen[data-teinte="vert"]{--teinte:var(--t-vert)}
#topbar[data-teinte="rose"],#hubBar[data-teinte="rose"],#panneau[data-teinte="rose"],#volet[data-teinte="rose"],#drawer[data-teinte="rose"],#genBack[data-teinte="rose"],.screen[data-teinte="rose"]{--teinte:var(--t-rose)}
#topbar[data-teinte="bleu"],#hubBar[data-teinte="bleu"],#panneau[data-teinte="bleu"],#volet[data-teinte="bleu"],#drawer[data-teinte="bleu"],#genBack[data-teinte="bleu"],.screen[data-teinte="bleu"]{--teinte:var(--t-bleu)}
#topbar[data-teinte="violet"],#hubBar[data-teinte="violet"],#panneau[data-teinte="violet"],#volet[data-teinte="violet"],#drawer[data-teinte="violet"],#genBack[data-teinte="violet"],.screen[data-teinte="violet"]{--teinte:var(--t-violet)}
#topbar[data-teinte="ambre"],#hubBar[data-teinte="ambre"],#panneau[data-teinte="ambre"],#volet[data-teinte="ambre"],#drawer[data-teinte="ambre"],#genBack[data-teinte="ambre"],.screen[data-teinte="ambre"]{--teinte:var(--t-ambre)}
#topbar[data-teinte="orange"],#hubBar[data-teinte="orange"],#panneau[data-teinte="orange"],#volet[data-teinte="orange"],#drawer[data-teinte="orange"],#genBack[data-teinte="orange"],.screen[data-teinte="orange"]{--teinte:var(--t-orange)}
#topbar[data-teinte="sarcelle"],#hubBar[data-teinte="sarcelle"],#panneau[data-teinte="sarcelle"],#volet[data-teinte="sarcelle"],#drawer[data-teinte="sarcelle"],#genBack[data-teinte="sarcelle"],.screen[data-teinte="sarcelle"]{--teinte:var(--t-sarcelle)}
#topbar[data-teinte="indigo"],#hubBar[data-teinte="indigo"],#panneau[data-teinte="indigo"],#volet[data-teinte="indigo"],#drawer[data-teinte="indigo"],#genBack[data-teinte="indigo"],.screen[data-teinte="indigo"]{--teinte:var(--t-indigo)}
#topbar[data-teinte="ciel"],#hubBar[data-teinte="ciel"],#panneau[data-teinte="ciel"],#volet[data-teinte="ciel"],#drawer[data-teinte="ciel"],#genBack[data-teinte="ciel"],.screen[data-teinte="ciel"]{--teinte:var(--t-ciel)}
#topbar[data-teinte="fuchsia"],#hubBar[data-teinte="fuchsia"],#panneau[data-teinte="fuchsia"],#volet[data-teinte="fuchsia"],#drawer[data-teinte="fuchsia"],#genBack[data-teinte="fuchsia"],.screen[data-teinte="fuchsia"]{--teinte:var(--t-fuchsia)}
#topbar[data-teinte="cyan"],#hubBar[data-teinte="cyan"],#panneau[data-teinte="cyan"],#volet[data-teinte="cyan"],#drawer[data-teinte="cyan"],#genBack[data-teinte="cyan"],.screen[data-teinte="cyan"]{--teinte:var(--t-cyan)}
#topbar[data-teinte="lime"],#hubBar[data-teinte="lime"],#panneau[data-teinte="lime"],#volet[data-teinte="lime"],#drawer[data-teinte="lime"],#genBack[data-teinte="lime"],.screen[data-teinte="lime"]{--teinte:var(--t-lime)}
#topbar[data-teinte="or"],#hubBar[data-teinte="or"],#panneau[data-teinte="or"],#volet[data-teinte="or"],#drawer[data-teinte="or"],#genBack[data-teinte="or"],.screen[data-teinte="or"]{--teinte:var(--t-or)}
#topbar[data-teinte="prune"],#hubBar[data-teinte="prune"],#panneau[data-teinte="prune"],#volet[data-teinte="prune"],#drawer[data-teinte="prune"],#genBack[data-teinte="prune"],.screen[data-teinte="prune"]{--teinte:var(--t-prune)}
#topbar[data-teinte="jaune"],#hubBar[data-teinte="jaune"],#panneau[data-teinte="jaune"],#volet[data-teinte="jaune"],#drawer[data-teinte="jaune"],#genBack[data-teinte="jaune"],.screen[data-teinte="jaune"]{--teinte:var(--t-jaune)}
#topbar[data-teinte="ardoise"],#hubBar[data-teinte="ardoise"],#panneau[data-teinte="ardoise"],#volet[data-teinte="ardoise"],#drawer[data-teinte="ardoise"],#genBack[data-teinte="ardoise"],.screen[data-teinte="ardoise"]{--teinte:var(--t-ardoise)}
#topbar h2{background:linear-gradient(var(--teinte),var(--teinte)) left bottom / 28px 3px no-repeat}
#hubBar .seg.tabs button.on::after,.ds-onglets button.on::after{background:var(--teinte)}

/* ====== LOT LISTE — RÉSERVATIONS : LA LISTE EN COULEUR (V99.3, youcef 06/10 : « l'onglet avec toutes les réservations est vraiment vraiment moche ») ======
   Chaque ligne dit son état d'un coup d'œil : le filet de son statut à gauche, le statut en pastille, l'aéroport en pastille
   bleue avec son avion, la ville en encre, le client en clair (plus de CAPITALES), la gamme avec le point de sa famille, le
   canal en point de couleur, la marge en vert. Les cases n'apparaissent qu'au survol (ou pendant une sélection) ; à la souris,
   les gestes flottent au bout de la ligne au lieu de garder une colonne vide. Les en-têtes de jour disent ce qu'ils contiennent
   (les courses sans chauffeur en rouge). Le téléphone prend le filet et les noms en clair. Des jetons seulement. */

/* ---- le filet du statut ---- */
/* le filet ne marque que ce qui demande l'œil : sans chauffeur (rouge), le paiement attendu (ambre), la course qui roule (sa
   couleur) et l'incident ; une course assignée, confirmée ou close reste calme (sa pastille dit son statut) */
#s-bookings :is(.bk-t tbody tr,.bkc.bk-li)[data-st]{--filet:transparent}
#s-bookings :is(.bk-t tbody tr,.bkc.bk-li)[data-st="aassigner"]{--filet:var(--st-aassigner-point)}
#s-bookings :is(.bk-t tbody tr,.bkc.bk-li)[data-st="en-route"]{--filet:var(--st-en-route-point)}
#s-bookings :is(.bk-t tbody tr,.bkc.bk-li)[data-st="sur-place"]{--filet:var(--st-sur-place-point)}
#s-bookings :is(.bk-t tbody tr,.bkc.bk-li)[data-st="a-bord"]{--filet:var(--st-a-bord-point)}
#s-bookings :is(.bk-t tbody tr,.bkc.bk-li)[data-st="attente"]{--filet:var(--st-attente-point)}
#s-bookings :is(.bk-t tbody tr,.bkc.bk-li)[data-st="incident"]{--filet:var(--st-incident-point)}
#s-bookings .bk-t tbody tr[data-st]:not(.ouverte):not(.bk-cur) td:first-child{box-shadow:inset 3px 0 0 var(--filet)}
#s-bookings .bkc.bk-li[data-st]:not(.ouverte){box-shadow:inset 3px 0 0 var(--filet)}

/* ---- l'heure : un peu plus grande, ce qui reste en vert quand c'est dans l'heure ---- */
#s-bookings .bk-t td.heure b{font-size:var(--fs-18); letter-spacing:-.015em; font-variant-numeric:tabular-nums}

/* ---- le trajet : la ville en encre, l'aéroport en pastille bleue ---- */
#s-bookings .bk-tr{gap:var(--sp-15); font-size:var(--fs-14)}
#s-bookings .bk-tr .bk-ville{font-weight:600; color:var(--ink)}
#s-bookings .bk-tr .fl{color:var(--faint)}
/* la ville cède la place (coupée au bout), jamais l'aéroport */
#s-bookings .bk-tr>.bk-aero{flex:none; overflow:visible}
#s-bookings .bk-tr>.bk-ville{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis}
.bk-aero{display:inline-flex; align-items:center; gap:var(--sp-05); height:22px; padding:0 var(--sp-15) 0 var(--sp-1); border-radius:var(--r-pilule);
  background:color-mix(in srgb,var(--texte-info) 12%,var(--surface)); color:var(--texte-info); font-size:var(--fs-12); line-height:1; flex:none}
.bk-aero b{font-weight:700; letter-spacing:var(--approche-iata)}
.bk-aero .svgi{width:13px; height:13px}
#s-bookings .bk-t tr.passee .bk-aero{background:var(--surface-piste); color:var(--muted)}

/* ---- sous le trajet : le client en clair, les passagers et le vol avec leur icône, la gamme avec le point de sa famille ---- */
#s-bookings .bk-t td[data-c="trajet"] .sous{margin-top:var(--sp-1); color:var(--muted)}
#s-bookings .bk-t td[data-c="trajet"] .sous .ds-mention,#s-bookings .bk-t .sous .bk-cli{color:var(--ink-2)}
.bk-pax,.bk-vol{white-space:nowrap}
.bk-pax .svgi{width:13px; height:13px; margin-right:var(--sp-05); vertical-align:-2px; color:var(--faint)}
.bk-vol{font-weight:500; color:var(--ink-2); font-variant-numeric:tabular-nums}
#s-bookings .bk-gamme{display:inline-flex; align-items:center; gap:var(--sp-1); height:18px; padding:0 var(--sp-15) 0 var(--sp-1); border-radius:var(--r-pilule);
  background:var(--surface-piste); color:var(--ink-2); font-size:var(--fs-12); font-weight:600; line-height:1; vertical-align:1px}
.bk-fam{width:7px; height:7px; border-radius:var(--r-rond); background:var(--fam,var(--faint)); flex:none}

/* ---- le chauffeur : le nom tient, la voiture dessous ---- */
#s-bookings .bk-t .bk-ch{display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#s-bookings .bk-t .bk-ch .ds-mention .nom{font-weight:500}
#s-bookings .bk-t td[data-c="chauffeur"] .bk-veh{color:var(--muted); white-space:nowrap}

/* ---- le statut en pastille (la colonne s'élargit d'un rien : « Attente paiement » y tient) ---- */
#bkHead th[data-col="statut"]{width:168px}
#s-bookings .bk-t td[data-c="statut"] .ds-statut.pastille{height:24px; font-size:var(--fs-12)}

/* ---- le canal : un point de sa couleur et son nom (plus une étiquette pleine sur chaque ligne) ; d'où elle vient, dessous, en gris ---- */
#s-bookings .bk-t td[data-c="canal"] .ds-canal{height:auto; padding:0; gap:var(--sp-15); background:none; color:var(--ink-2); font-size:var(--fs-13); font-weight:500}
#s-bookings .bk-t td[data-c="canal"] .ds-canal::before{content:''; width:8px; height:8px; border-radius:var(--r-xs); background:var(--cn-p,var(--point-neutre)); flex:none}
#s-bookings .bk-t td[data-c="canal"] .sous{padding-left:calc(8px + var(--sp-15))}
#s-bookings .bk-t td[data-c="canal"] .sous :is(.bk-site,.badge){height:auto; padding:0; background:none; color:var(--muted); font-size:var(--fs-12); font-weight:500; line-height:1.2}
#s-bookings .bk-t td[data-c="canal"] .sous :is(.bk-site,.badge)+:is(.bk-site,.badge)::before{content:'·'; margin-right:var(--sp-1); color:var(--faint)}

/* ---- le prix : la marge en vert (en rouge quand elle est négative) ---- */
#s-bookings .bk-t td[data-c="montant"] b{font-size:var(--fs-15)}
#s-bookings .bk-t .bk-marge:not(.neg){color:var(--texte-ok); font-weight:500}
#s-bookings .bk-t tr.passee .bk-marge:not(.neg){color:var(--muted)}

/* ---- l'en-tête d'un jour : son nom, sa date, et à droite ce qu'il contient ---- */
#s-bookings .bk-t tr.bk-jour td{background:var(--surface-douce); color:var(--muted)}
.bk-jour-in{display:flex; align-items:baseline; gap:var(--sp-2); min-width:0}
.bk-jour-in>b{font-size:var(--fs-14); color:var(--ink)}
.bk-jour-d{font-size:var(--fs-13)}
.bk-jour-r{display:inline-flex; align-items:baseline; gap:var(--sp-3); margin-left:auto; font-size:var(--fs-12); font-variant-numeric:tabular-nums}
.bk-jour-sans{color:var(--texte-danger); font-weight:600}
.bk-jour-ca{color:var(--ink); font-weight:600}

/* ---- les cases : au survol, au clavier ou pendant une sélection ---- */
@media (hover:hover){
  #s-bookings .bk-t:not(:has(tbody tr.sel)) tbody tr:not(:hover):not(:focus-within) td.selc input{opacity:0}
  #s-bookings .bk-t:not(:has(tbody tr.sel)) thead:not(:hover) th.selc input:not(:checked){opacity:0}
  #s-bookings .bk-t .selc input{transition:opacity var(--t-1) var(--ease)}
}

/* ---- à la souris, les gestes flottent au bout de la ligne (plus de colonne vide) ---- */
@media (hover:hover){
  #bkHead th[data-col="gestes"]{width:var(--sp-2); padding:0}
  #s-bookings .bk-t td.gestes{position:relative; padding:0; overflow:visible}
  #s-bookings .bk-t td.gestes .ds-groupe-btn{position:absolute; top:50%; right:var(--sp-2); z-index:var(--z-dessus); padding:var(--sp-05); border-radius:var(--r-md);
    background:var(--surface); box-shadow:var(--el-2); transform:translateY(-50%)}
  #s-bookings .bk-t tr:not(:hover):not(:focus-within):not(.bk-cur) td.gestes .ds-groupe-btn{pointer-events:none}
}

/* ---- le téléphone : le nom du client en clair, l'heure en encre forte ---- */
#s-bookings .bk-li .bk-tr{font-size:var(--fs-14)}
#s-bookings .bk-li .bk-aero{height:20px}

/* ====== LOT PERSO — LE TABLEAU DE BORD À TA FAÇON (V99.4, youcef 06/10 : « laisse-moi modifier l'emplacement de chaque widget ») ======
   La disposition choisie (.ovp-perso) : l'ordre vient du DOM (js/pilotage/tableau-de-bord-perso.js), la largeur de data-larg
   — sur 12 colonnes à l'ordinateur, la moitié ou toute la largeur sur tablette, toute la largeur au téléphone —, les trous se
   comblent (dense). L'édition (.ovp-edition) : chaque carte cernée de pointillés et nommée, la choisie en vert avec sa barre
   posée sur son bord ; la carte qu'on glisse flotte sous le pointeur, sa place l'attend en pointillés. Des jetons seulement. */
.ov2.ovp-perso{grid-auto-flow:row dense}
.ov2.ovp-perso>.ovp-masque{display:none}
@media (min-width:1280px){
  .ov2.ovp-perso>[data-larg="4"]{grid-column:span 4}
  .ov2.ovp-perso>[data-larg="6"]{grid-column:span 6}
  .ov2.ovp-perso>[data-larg="8"]{grid-column:span 8}
  .ov2.ovp-perso>[data-larg="12"]{grid-column:1/-1}
  .ov2.ovp-perso>[data-larg]{grid-row:auto}
}
@media (min-width:761px) and (max-width:1279px){
  .ov2.ovp-perso>:is([data-larg="4"],[data-larg="6"]){grid-column:span 6}
  .ov2.ovp-perso>:is([data-larg="8"],[data-larg="12"]){grid-column:1/-1}
}
@media (max-width:760px){ .ov2.ovp-perso>[data-larg]{grid-column:1/-1; order:0} }

/* ---- l'édition : les cartes cernées et nommées ; leur dedans ne se clique pas (un clic choisit la carte) ---- */
.ov2.ovp-edition>.ovp-masque:not([hidden]){display:block; opacity:.5}
.ov2.ovp-edition>[data-ovp]{position:relative; cursor:grab; user-select:none; outline:2px dashed var(--border-strong); outline-offset:var(--sp-1); border-radius:var(--r-card);
  transition:outline-color var(--t-1) var(--ease), opacity var(--t-1) var(--ease)}
.ov2.ovp-edition>[data-ovp]:hover{outline-color:var(--accent)}
.ov2.ovp-edition>[data-ovp].ovp-choisie{outline:2px solid var(--accent)}
.ov2.ovp-edition>[data-ovp]:focus-visible{outline:2px solid var(--accent); box-shadow:var(--ring)}
.ov2.ovp-edition>[data-ovp]::after{content:''; position:absolute; inset:0; z-index:var(--z-dessus); border-radius:inherit}
.ov2.ovp-edition>[data-ovp]::before{content:attr(data-ovp-nom); position:absolute; top:calc(-1 * var(--sp-3)); left:var(--sp-4); z-index:var(--z-flottant); height:22px; padding:0 var(--sp-2);
  border-radius:var(--r-pilule); background:var(--nuit); color:var(--on-couleur); font-size:var(--fs-12); font-weight:600; line-height:22px; white-space:nowrap; pointer-events:none}
.ov2.ovp-edition>[data-ovp].ovp-choisie::before{background:var(--btn); color:var(--btn-ink)}
.ov2.ovp-edition{row-gap:calc(var(--sp-5) + var(--sp-2))}

/* ---- glisser : la carte flotte, sa place l'attend ---- */
.ovp-place{min-height:64px; border:2px dashed var(--accent); border-radius:var(--r-card); background:color-mix(in srgb,var(--accent) 7%,transparent)}
.ov2>[data-ovp].ovp-glisse{position:fixed; z-index:var(--z-deroulant); margin:0; pointer-events:none; outline:2px solid var(--accent); box-shadow:var(--el-4); transition:none; background-color:var(--surface)}
html.ovp-glisse-en-cours,html.ovp-glisse-en-cours body{cursor:grabbing; user-select:none}

/* ---- la barre du haut (nuit et or, comme la barre de sélection) ---- */
.ovp-barre{position:sticky; top:var(--haut-barre); z-index:var(--z-collant); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3);
  margin-bottom:var(--sp-5); padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); border-radius:var(--r-card); background:var(--nuit); color:var(--on-couleur); box-shadow:var(--el-3)}
html[data-theme="dark"] .ovp-barre{background:var(--nuit-3)}
.ovp-barre-t{display:flex; align-items:center; gap:var(--sp-3); min-width:0}
.ovp-barre-t>.svgi{width:20px; height:20px; flex:none; color:var(--or)}
.ovp-barre-t b{display:block; font-size:var(--fs-14); font-weight:600}
.ovp-barre-t small{display:block; margin-top:var(--sp-05); font-size:var(--fs-12); color:var(--side-muted)}
.ovp-barre-g{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-left:auto}
.ovp-barre .ds-btn.fantome{color:var(--on-couleur)}
.ovp-barre .ds-btn.fantome:hover{background:var(--side-on)}

/* ---- la barre de la carte choisie ---- */
.ovp-outils{position:absolute; z-index:var(--z-flottant); display:flex; align-items:center; gap:var(--sp-1); padding:var(--sp-1); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--el-3); white-space:nowrap}
.ovp-outils[hidden]{display:none}
.ovp-poignee{display:inline-grid; place-items:center; width:32px; height:32px; border:0; border-radius:var(--r-sm); background:var(--surface-piste); color:var(--ink-2); cursor:grab; touch-action:none}
.ovp-poignee:active{cursor:grabbing}
.ovp-poignee .svgi{width:18px; height:18px}
.ovp-outils-nom{max-width:180px; padding:0 var(--sp-1); overflow:hidden; text-overflow:ellipsis; font-size:var(--fs-13); color:var(--ink)}
.ovp-larg{display:inline-flex; gap:2px; padding:2px; border-radius:var(--r-sm); background:var(--surface-piste)}
.ovp-larg button{height:28px; min-width:36px; padding:0 var(--sp-2); border:0; border-radius:var(--r-xs); background:none; color:var(--muted); font:inherit; font-size:var(--fs-13); font-weight:600; cursor:pointer}
.ovp-larg button:hover{color:var(--ink)}
.ovp-larg button.on{background:var(--surface); color:var(--ink); box-shadow:var(--el-1)}
.ov2-pied:has(.ov2-retour+.ov2-retour){display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-4)}
@media (pointer:coarse){ .ovp-poignee{width:var(--h-touch); height:var(--h-touch)} }
@media (max-width:760px){
  .ovp-barre{top:var(--haut-barre); margin-bottom:var(--sp-4)}
  .ovp-outils-nom{max-width:120px}
}

/* ====== LOT MODELES — MESSAGES › MODÈLES EN CLAIR (V99.5, youcef 06/10 : « améliore l'onglet modèles de message, on comprend rien ») ======
   Une explication en tête ; les messages automatiques dans l'ordre d'une course (quand, s'ils partent vraiment, par quel canal,
   leur SMS en aperçu, l'e-mail à déplier) ; les réponses prêtes par public, chacune en aperçu. Les mots remplacés à l'envoi
   (.ms-var) en couleur ; l'éditeur insère « Prénom », « Heure »… et montre l'aperçu en direct. Des jetons seulement. */
.ms-modeles{display:flex; flex-direction:column; gap:var(--sp-5)}
.ms-intro{display:flex; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); border-radius:var(--r-card); background:color-mix(in srgb,var(--texte-info) 7%,var(--surface)); color:var(--ink-2); font-size:var(--fs-14); line-height:1.5}
.ms-intro>.svgi{flex:none; width:20px; height:20px; margin-top:2px; color:var(--texte-info)}
.ms-intro b{color:var(--ink)}
.ms-intro ul{margin:var(--sp-1) 0 var(--sp-2); padding-left:var(--sp-5)}
.ms-intro p{margin:0}
.ms-var{display:inline; padding:0 var(--sp-05); border-radius:var(--r-xs); background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--texte-accent); font-weight:600; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.ms-var.inconnue{background:color-mix(in srgb,var(--texte-danger) 12%,transparent); color:var(--texte-danger)}
.ms-sous{margin:calc(-1 * var(--sp-1)) 0 var(--sp-3); font-size:var(--fs-13); line-height:1.5; color:var(--muted)}
.ms-etat{display:inline-flex; align-items:center; gap:var(--sp-1); height:24px; padding:0 var(--sp-2); border-radius:var(--r-pilule); font-size:var(--fs-12); font-weight:600}
.ms-etat .svgi{width:14px; height:14px}
.ms-etat.on{background:var(--st-terminee-fond); color:var(--st-terminee-texte)}
.ms-etat.off{background:var(--st-attente-fond); color:var(--st-attente-texte)}
/* la vie d'une course : une étape par message, reliées par un fil */
.ms-vie{position:relative; display:flex; flex-direction:column; margin:0; padding:0; list-style:none}
.ms-auto{position:relative; display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:var(--sp-3); padding:var(--sp-3) 0}
.ms-auto+.ms-auto{border-top:1px solid var(--border-doux)}
.ms-auto-ic{display:grid; place-items:center; width:36px; height:36px; border-radius:var(--r-rond); background:var(--accent-soft); color:var(--texte-accent)}
.ms-auto-ic .svgi{width:18px; height:18px}
.ms-auto.eteint .ms-auto-ic{background:var(--surface-piste); color:var(--muted)}
.ms-auto-c{min-width:0}
.ms-auto-t{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2)}
.ms-auto-t b{font-size:var(--fs-15); color:var(--ink)}
.ms-part{display:inline-flex; align-items:center; height:22px; padding:0 var(--sp-2); border-radius:var(--r-pilule); font-size:var(--fs-12); font-weight:600}
.ms-part.on{background:var(--st-terminee-fond); color:var(--st-terminee-texte)}
.ms-part.off{background:var(--surface-piste); color:var(--muted)}
.ms-quand{margin:var(--sp-05) 0 var(--sp-2); font-size:var(--fs-13); color:var(--ink-2)}
.ms-auto-pied{margin:var(--sp-1) 0 0}
.ms-ecrit{font-size:var(--fs-12); color:var(--muted)}
/* un aperçu : une bulle, le texte tel que la personne le lira */
.ms-bulle{position:relative; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--surface-douce); font-size:var(--fs-13); line-height:1.55; color:var(--ink); overflow-wrap:anywhere}
.ms-bulle p{margin:0}
.ms-bulle p+p{margin-top:var(--sp-1)}
.ms-bulle .obj{font-weight:600}
.ms-bulle .vide{color:var(--muted)}
.ms-bulle-l{display:inline-flex; align-items:center; gap:var(--sp-1); margin-bottom:var(--sp-05); font-size:var(--fs-11); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.ms-bulle-l .svgi{width:12px; height:12px}
.ms-auto .ms-bulle{max-width:640px}
.ms-mail{margin-top:var(--sp-2)}
.ms-mail>summary{display:inline-flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-13); font-weight:500; color:var(--texte-accent); cursor:pointer; list-style:none}
.ms-mail>summary::-webkit-details-marker{display:none}
.ms-mail>summary .svgi{width:14px; height:14px}
.ms-mail[open]>summary{margin-bottom:var(--sp-2)}
.ms-bulle.mail{max-width:640px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--border)}
/* les réponses prêtes */
.ms-reps-titre h2{margin:0; font-size:var(--fs-18)}
.ms-reps-titre p{margin:var(--sp-05) 0 0; font-size:var(--fs-13); color:var(--muted)}
.ms-reps{display:flex; flex-direction:column; margin:0; padding:0; list-style:none}
.ms-rep{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) 0}
.ms-rep+.ms-rep{border-top:1px solid var(--border-doux)}
.ms-rep-t{display:flex; align-items:center; gap:var(--sp-2); min-width:0}
.ms-rep-t b{font-size:var(--fs-14); color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ms-rep-a{display:inline-flex; gap:var(--sp-05); margin-left:auto}
.ms-langs{display:inline-flex; gap:2px}
.ms-langs span{padding:0 var(--sp-1); border-radius:var(--r-xs); background:var(--surface-piste); color:var(--faint); font-size:var(--fs-11); font-weight:600; line-height:18px}
.ms-langs span.on{background:var(--accent-soft); color:var(--texte-accent)}
/* l'éditeur : les variables en clair, l'aperçu en direct */
.ms-vars-l{align-self:center; font-size:var(--fs-12); color:var(--muted)}
.ms-vars .gchip .svgi{width:12px; height:12px; margin-right:2px; vertical-align:-1px}
.ms-bulle.edit{margin-top:var(--sp-3)}
@media (max-width:760px){
  .ms-intro{padding:var(--sp-3)}
  .ms-auto{grid-template-columns:28px minmax(0,1fr); column-gap:var(--sp-2)}
  .ms-auto-ic{width:28px; height:28px}
}
/* ====== LOT CAMPAGNES — MESSAGES › CAMPAGNES ET ACCUEIL DES CHAUFFEURS (V100.0, youcef 06/10 : « laisse-moi programmer différents e-mails pour les nouveaux chauffeurs ; pour les anciens, des campagnes par mail ») ======
   Campagnes : le formulaire en quatre temps numérotés (à qui, par où, le message en aperçu, quand), la colonne de droite (les
   programmées, puis celles déjà envoyées). Accueil : l'interrupteur et ce qu'il fait, l'accord demandé pour une arrivée en
   nombre, la séquence (une ligne par e-mail : son jour, son heure, son aperçu), le suivi (une pastille par e-mail et par
   chauffeur). Des jetons seulement. */
.ms-col{display:flex; flex-direction:column; gap:var(--sp-4); min-width:0}
.mc-etape{display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:var(--sp-3); padding:var(--sp-3) 0}
.mc-etape+.mc-etape{border-top:1px solid var(--border-doux)}
.mc-num{display:grid; place-items:center; width:28px; height:28px; border-radius:var(--r-rond); background:var(--accent-soft); color:var(--texte-accent); font-size:var(--fs-13); font-weight:700; font-variant-numeric:tabular-nums}
.mc-etape-c{min-width:0; display:flex; flex-direction:column; gap:var(--sp-2)}
.mc-etape-t{font-size:var(--fs-14); font-weight:600; color:var(--ink); line-height:28px}
.mc-etape-c>.seg{flex-wrap:wrap; align-self:flex-start; max-width:100%}
/* à qui : des puces de choix (cinq choix ne tiennent pas dans un segment à cette largeur) */
.mc-etape-c>.seg.mc-cibles{gap:var(--sp-1); padding:0; background:transparent; border-radius:var(--r-nul); box-shadow:none}
.seg.mc-cibles button{height:32px; padding:0 var(--sp-3); border-radius:var(--r-pilule); box-shadow:inset 0 0 0 1px var(--border); background:var(--surface); color:var(--ink-2); font-size:var(--fs-13); font-weight:500}
.seg.mc-cibles button:hover{color:var(--ink); background:var(--surface); box-shadow:inset 0 0 0 1px var(--ink-2)}
html .seg.mc-cibles button.on{background:var(--accent-soft); color:var(--texte-accent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent); font-weight:600}
.mc-go{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--border-doux)}
.mc-go-d{display:inline-flex; flex-wrap:wrap; gap:var(--sp-2); margin-left:auto}
.mc-etape-c .field{margin:0}
.mc-etape-c>.sub{margin:0}
.mc-etape-c>.ds-segment{align-self:flex-start}
/* l'avatar d'une ligne de choix garde sa taille (la règle des lignes l'étirait comme un texte) */
.ms-dests .ms-dest>span.av:not(.x){flex:none; flex-direction:row; align-items:center; justify-content:center}
.mc-tous{display:inline-flex; align-items:center; gap:var(--sp-1)}
.mc-conseil{display:flex; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:color-mix(in srgb,var(--texte-alerte) 9%,var(--surface)); color:var(--ink-2); font-size:var(--fs-13); line-height:1.5}
.mc-conseil>.svgi{flex:none; width:16px; height:16px; margin-top:2px; color:var(--texte-alerte)}
.mc-conseil .lnk{font-weight:600}
.mc-tous .svgi{width:14px; height:14px}
.mc-choix{max-height:340px; overflow-y:auto}
.mc-quand{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3)}
.mc-quand .field{flex:0 1 180px; min-width:140px}
.mc-apercu{margin-top:var(--sp-1)}
.mc-edit{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); margin-bottom:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:color-mix(in srgb,var(--texte-info) 8%,var(--surface)); color:var(--ink-2); font-size:var(--fs-13)}
.mc-edit .svgi{width:14px; height:14px; color:var(--texte-info)}
.mc-rien{margin:0}
.mc-progs{display:flex; flex-direction:column; margin:0; padding:0; list-style:none}
.mc-prog{display:grid; grid-template-columns:76px minmax(0,1fr) auto; align-items:center; column-gap:var(--sp-3); padding:var(--sp-2) 0 var(--sp-2) var(--sp-3); border-left:3px solid var(--accent)}
.mc-prog+.mc-prog{margin-top:var(--sp-2)}
.mc-prog.file{border-left-color:var(--texte-info)}
.mc-prog.gris{border-left-color:var(--border)}
.mc-prog.ko{border-left-color:var(--texte-danger)}
.mc-prog.ok{border-left-color:var(--texte-ok)}
.mc-prog-q{display:flex; flex-direction:column; font-variant-numeric:tabular-nums}
.mc-prog-q b{display:block; font-size:var(--fs-13); color:var(--ink)}
.mc-prog-q b::first-letter{text-transform:uppercase}
.mc-prog-q span{font-size:var(--fs-12); color:var(--muted)}
.mc-prog-c{min-width:0; display:flex; flex-direction:column; gap:var(--sp-05)}
.mc-prog-c b{font-size:var(--fs-14); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mc-prog-c small{font-size:var(--fs-12); color:var(--muted); overflow-wrap:anywhere}
.mc-prog-a{display:inline-flex; gap:var(--sp-05)}
.mc-prog.gris .mc-prog-c b,.mc-prog.gris .mc-prog-q b{color:var(--muted)}
/* l'accueil des nouveaux chauffeurs */
.ma{display:flex; flex-direction:column; gap:var(--sp-4)}
.ma-tete{display:flex; flex-direction:column; gap:var(--sp-3)}
.ma-tete-h{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--sp-3) var(--sp-5)}
.ma-tete-t{flex:1 1 420px; min-width:0}
.ma-tete-t h2{margin:0; font-size:var(--fs-18); color:var(--ink)}
.ma-tete-t p{margin:var(--sp-1) 0 0; max-width:72ch; font-size:var(--fs-13); line-height:1.55; color:var(--ink-2)}
.ma-etat{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2)}
.ma-etat .sub{margin:0}
.ma-conf{display:flex; flex-direction:column; gap:var(--sp-3); background:color-mix(in srgb,var(--texte-alerte) 8%,var(--surface)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--texte-alerte) 35%,transparent)}
.ma-conf-t{display:flex; gap:var(--sp-3)}
.ma-conf-t>.svgi{flex:none; width:20px; height:20px; margin-top:2px; color:var(--texte-alerte)}
.ma-conf-t b{font-size:var(--fs-15); color:var(--ink)}
.ma-conf-t p{margin:var(--sp-1) 0 0; font-size:var(--fs-13); line-height:1.5; color:var(--ink-2)}
.ma-conf-t .ma-conf-n{color:var(--muted)}
.ma-conf .go{justify-content:flex-end}
.ma-seq{display:flex; flex-direction:column; margin:0; padding:0; list-style:none}
.ma-et{display:grid; grid-template-columns:56px minmax(0,1fr) auto; column-gap:var(--sp-3); align-items:start; padding:var(--sp-3) 0}
.ma-et+.ma-et{border-top:1px solid var(--border-doux)}
.ma-jour{display:flex; flex-direction:column; align-items:center; justify-content:center; height:52px; border-radius:var(--r-md); background:var(--accent-soft); color:var(--texte-accent); font-variant-numeric:tabular-nums}
.ma-jour b{font-size:var(--fs-16); line-height:1.1; letter-spacing:-.01em}
.ma-jour span{font-size:var(--fs-12); font-weight:600}
.ma-et.eteinte .ma-jour{background:var(--surface-piste); color:var(--muted)}
.ma-et.eteinte .ma-et-c{opacity:.6}
.ma-et-c{min-width:0}
.ma-et-t{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2)}
.ma-et-t b{font-size:var(--fs-15); color:var(--ink); overflow-wrap:anywhere}
.ma-et .ms-quand{margin:var(--sp-05) 0 var(--sp-2)}
.ma-extrait{max-width:640px}
.ma-et-a{display:inline-flex; gap:var(--sp-05)}
.ma-suivi{display:flex; flex-direction:column; margin:0; padding:0; list-style:none}
.ma-ch{display:grid; grid-template-columns:minmax(200px,1.2fr) minmax(0,1fr) minmax(120px,auto) auto; align-items:center; column-gap:var(--sp-3); padding:var(--sp-2) 0}
.ma-ch+.ma-ch{border-top:1px solid var(--border-doux)}
.ma-ch.arrete{opacity:.6}
.ma-ch-n{display:flex; align-items:center; gap:var(--sp-2); min-width:0}
.ma-ch-q{display:flex; flex-direction:column; min-width:0}
.ma-ch-q .lnk{align-self:flex-start; text-align:left}
.ma-ch-q small{font-size:var(--fs-12); color:var(--muted); overflow-wrap:anywhere}
.ma-ch-p{font-size:var(--fs-12); color:var(--ink-2); font-variant-numeric:tabular-nums}
.ma-puces{display:flex; flex-wrap:wrap; gap:var(--sp-1)}
.ma-puce{display:inline-flex; align-items:center; gap:var(--sp-05); height:24px; padding:0 var(--sp-2); border-radius:var(--r-pilule); font-size:var(--fs-12); font-weight:600; font-variant-numeric:tabular-nums; background:var(--surface-piste); color:var(--muted); cursor:default}
.ma-puce .svgi{width:12px; height:12px}
.ma-puce.ok{background:var(--st-terminee-fond); color:var(--st-terminee-texte)}
.ma-puce.file{background:color-mix(in srgb,var(--texte-info) 12%,transparent); color:var(--texte-info)}
.ma-puce.bleu{background:color-mix(in srgb,var(--texte-info) 18%,transparent); color:var(--texte-info)}
.ma-puce.ko{background:color-mix(in srgb,var(--texte-danger) 12%,transparent); color:var(--texte-danger)}
.ma-puce.alerte{background:color-mix(in srgb,var(--texte-alerte) 14%,transparent); color:var(--texte-alerte)}
.ma-puce.venir{background:transparent; box-shadow:inset 0 0 0 1px var(--border); color:var(--ink-2)}
.ma-ins{display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-3); padding:var(--sp-3); border-radius:var(--r-md); background:var(--surface-douce)}
.ma-ins .sub{margin:0}
.ma-ed{display:flex; flex-direction:column; gap:var(--sp-3)}
.ma-ed-quand{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-2) var(--sp-3)}
.ma-ed-quand .field{margin:0}
.ma-ed-quand .field:first-child{flex:1 1 220px}
.ma-ed-l{display:block; margin-bottom:var(--sp-1); font-size:var(--fs-12); font-weight:600; color:var(--ink-2)}
.ma-ed .ms-sous{margin:0}
.ma-ed .field{margin:0}
.ma-ed .ms-bulle.edit{margin-top:0}
@media (max-width:760px){
  .mc-etape{grid-template-columns:24px minmax(0,1fr); column-gap:var(--sp-2)}
  .mc-num{width:24px; height:24px}
  .mc-etape-t{line-height:24px}
  .mc-prog{grid-template-columns:64px minmax(0,1fr); row-gap:var(--sp-1)}
  .mc-prog-a{grid-column:1 / -1; justify-content:flex-end}
  .ma-et{grid-template-columns:48px minmax(0,1fr); row-gap:var(--sp-2)}
  .ma-et-a{grid-column:1 / -1; justify-content:flex-end}
  .ma-jour{height:48px}
  .ma-ch{grid-template-columns:minmax(0,1fr) auto; row-gap:var(--sp-2)}
  .ma-ch-n{grid-column:1 / 2}
  .ma-ch-a{grid-column:2 / 3; grid-row:1}
  .ma-puces,.ma-ch-p{grid-column:1 / -1}
  .ma-conf .go{justify-content:stretch}
  .ma-conf .go .ds-btn{flex:1 1 auto}
}
/* ====== LOT ANALYSE — L'ANALYSE EN RÉGIME PILOTAGE (V100.2, youcef 06/10 : « améliore au maximum la partie Analyse, tous les sous-onglets ») ======
   Synthèse : une note discrète au lieu de l'encadré « À savoir », UN héros (la mesure, sa variation, sa courbe ; un point
   mène à ses courses), la bande des quatre mesures (un clic change le héros), une bande pour les autres chiffres, la marge
   opérationnelle et la santé côte à côte, les signaux en lignes ; les formules repliées sous « Comment c'est calculé ». */
.ana-note{display:flex; gap:var(--sp-2); align-items:flex-start; margin:var(--sp-1) 0 var(--sp-3); font-size:var(--fs-12); line-height:1.5; color:var(--muted)}
.ana-note>.svgi{flex:none; width:14px; height:14px; margin-top:2px; color:var(--texte-info)}
.ana-note ul{display:flex; flex-direction:column; gap:var(--sp-05); margin:0; padding:0; list-style:none}
.ana-note b{color:var(--ink-2)}
.ana-note .lnk{font-weight:600}
.ana-hero{display:flex; flex-direction:column; gap:var(--sp-2)}
.ana-hero-v{display:flex; flex-direction:column; gap:var(--sp-1); min-width:0}
.ana-hero-l{font-size:var(--fs-14); font-weight:600; color:var(--ink-2)}
.ana-hero-n{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3)}
.ana-hero-n>b{font-family:var(--font-num); font-size:var(--fs-44); font-weight:600; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--ink)}
.ana-hero-s{font-size:var(--fs-13); color:var(--muted)}
.ana-hero .delta,.ana-mes .delta{display:inline-flex; align-items:center; gap:var(--sp-05); padding:1px var(--sp-2); border-radius:var(--r-tag); font-family:var(--font-num); font-size:var(--fs-12); font-weight:600; font-variant-numeric:tabular-nums}
.ana-hero .delta .svgi,.ana-mes .delta .svgi{width:12px; height:12px}
.ana-hero .delta.g,.ana-mes .delta.g{color:var(--texte-ok); background:var(--fond-ok)}
.ana-hero .delta.r,.ana-mes .delta.r{color:var(--texte-danger); background:var(--fond-danger)}
.ana-hero .delta.n,.ana-mes .delta.n{color:var(--muted); background:transparent; padding:0}
.ana-hero .kpi-vs{margin-left:calc(-1 * var(--sp-1))}
.ana-hero-c{margin:var(--sp-2) calc(-1 * var(--sp-1)) 0}
.ana-hero-p{margin:0; font-size:var(--fs-12); color:var(--muted)}
.ch-clic .hitband{cursor:pointer}
#tooltip .tt-clic{margin-top:var(--sp-1); padding-top:var(--sp-1); border-top:1px solid color-mix(in srgb,currentColor 18%,transparent); font-weight:600}
.ana-mesures{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:var(--sp-2); border-top:1px solid var(--border-doux)}
.ana-mes{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-05); min-width:0; padding:var(--sp-3) var(--sp-3) var(--sp-2); border:0; border-radius:var(--r-nul); background:transparent; box-shadow:inset 0 2px 0 transparent; text-align:left; font:inherit; color:var(--ink); cursor:pointer}
.ana-mes+.ana-mes{border-left:1px solid var(--border-doux)}
.ana-mes:hover{background:var(--surface-2)}
.ana-mes.on{box-shadow:inset 0 2px 0 var(--accent)}
.ana-mes-l{font-size:var(--fs-12); font-weight:600; color:var(--muted)}
.ana-mes.on .ana-mes-l{color:var(--texte-accent)}
.ana-mes>b{font-family:var(--font-num); font-size:var(--fs-20); font-weight:600; letter-spacing:-.015em; font-variant-numeric:tabular-nums}
.ana-mes-0{font-size:var(--fs-12); color:var(--faint)}
.ana-mes .kpi-vs{display:none}
.ana-def{margin-top:var(--sp-2)}
.ana-def>summary{display:inline-flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-12); font-weight:600; color:var(--texte-accent); cursor:pointer; list-style:none}
.ana-def>summary::-webkit-details-marker{display:none}
.ana-def>summary::before{content:'+'; display:inline-grid; place-items:center; width:14px; height:14px; border-radius:var(--r-rond); box-shadow:inset 0 0 0 1px currentColor; font-size:var(--fs-11); line-height:1}
.ana-def[open]>summary::before{content:'–'}
.ana-def[open]>summary{margin-bottom:var(--sp-1)}
.ana-def .pil-def{margin-top:0}
.ana-bande{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:var(--sp-4); padding:0}
.ana-bc{display:flex; flex-direction:column; gap:var(--sp-05); min-width:0; padding:var(--sp-3) var(--sp-4)}
.ana-bc+.ana-bc{border-left:1px solid var(--border-doux)}
.ana-bc[data-va]{cursor:pointer}
.ana-bc[data-va]:hover{background:var(--surface-2)}
.ana-bl{font-size:var(--fs-12); font-weight:600; color:var(--muted)}
.ana-bc>b{font-family:var(--font-num); font-size:var(--fs-20); font-weight:600; letter-spacing:-.015em; font-variant-numeric:tabular-nums; color:var(--ink)}
.ana-bc>b.neg{color:var(--texte-danger)}
.ana-bs{font-size:var(--fs-12); color:var(--muted); overflow-wrap:anywhere}
.ana-duo,.ana-signaux,.ana-mouv{margin-top:var(--sp-4)}
.ana-duo>.card{margin:0}
.ana-col{display:flex; flex-direction:column; gap:var(--sp-4); min-width:0}
.ana-col>.card{margin:0}
.anasigs{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--sp-3)}
.anasigs .anasig{margin:0; display:flex; flex-direction:column}
.anasigs .anasig .btn{align-self:flex-start; margin-top:auto; padding-top:var(--sp-1)}
.anasigg{display:inline-flex; align-items:center; gap:var(--sp-05)}
.anasigs .anasigg{flex-basis:100%}
.anasigg .svgi{width:12px; height:12px}
.anasigs .anasigx{margin:var(--sp-1) 0 var(--sp-1)}
.anasigs .anasigf{margin:0 0 var(--sp-2)}
@media (max-width:1040px){
  .ana-bande{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ana-bc:nth-child(4){border-left:0}
  .ana-bc:nth-child(n+4){border-top:1px solid var(--border-doux)}
}
@media (max-width:760px){
  .ana-hero-n>b{font-size:var(--fs-32)}
  .ana-mesures{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ana-mes:nth-child(3){border-left:0}
  .ana-mes:nth-child(n+3){border-top:1px solid var(--border-doux)}
  .ana-mes>b{font-size:var(--fs-18)}
  .ana-bande{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ana-bc{padding:var(--sp-3)}
  .ana-bc:nth-child(odd){border-left:0}
  .ana-bc:nth-child(4){border-left:1px solid var(--border-doux)}
  .ana-bc:nth-child(n+3){border-top:1px solid var(--border-doux)}
  .anasigs{grid-template-columns:1fr}
}

/* ====== LOT MENU — V100.2 (youcef 07/10) : la zone en pied du menu ; le menu de gauche tient sans défiler ======
   « ça tu le places ailleurs, ça fait bizarre collé au logo » : le choix de zone (Partout, un pays, une région) quitte la
   marque pour le pied du menu, juste au-dessus du compte — une ligne comme les autres, dorée quand une zone filtre les
   courses ; son choix s'ouvre au-dessus d'elle. Au téléphone, il reste dans « Plus » et sous le titre. « Fais rentrer tout
   le menu de gauche sans que j'aie besoin de défiler » : des lignes de 30 px, des titres de groupe plus serrés ; sous
   900 px de haut, des Favoris vides ne prennent plus de place ; sous 780 px, des lignes de 28 px. */
#sidebar .foot #scopeBtn{display:flex; align-items:center; width:100%; max-width:none; height:30px; min-height:30px; margin:0 0 var(--sp-1); padding:0 var(--sp-2); gap:var(--sp-2);
  border:0; border-radius:var(--r-sm); background:none; box-shadow:none; color:var(--side-muted); font-size:var(--fs-13); font-weight:500; justify-content:flex-start}
#sidebar .foot #scopeBtn>svg:first-child{display:block; width:15px; height:15px; flex:none; color:var(--side-icone)}
#sidebar .foot #scopeBtn>.gi{width:12px; height:12px; flex:none; margin-left:auto; color:var(--side-faint)}
#sidebar .foot #scopeBtn>span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#sidebar .foot #scopeBtn>span.muted{flex:none; color:var(--side-faint)}
#sidebar .foot #scopeBtn:hover{background:var(--side-hover); color:var(--side-ink)}
#sidebar .foot #scopeBtn.on{background:var(--side-or-doux); color:var(--or-clair)}
#sidebar .foot #scopeBtn.on>svg:first-child{color:var(--or)}
html.rail #sidebar .foot #scopeBtn{justify-content:center; padding:0}
html.rail #sidebar .foot #scopeBtn>span,html.rail #sidebar .foot #scopeBtn>.gi{display:none}
@media (min-width:761px){ .scopepop{top:auto; right:auto; bottom:calc(env(safe-area-inset-bottom,0px) + 96px); left:var(--sp-3)} }
#sidebar .brand{padding:var(--sp-05) var(--sp-1) var(--sp-2)}
#sidebar nav{gap:1px}
#sidebar nav button,#sidebar nav .nav-fav{min-height:30px}
#sidebar .navgrp{padding:var(--sp-2) var(--sp-2) var(--sp-05)}
@media (min-width:761px) and (max-height:900px){
  #sidebar .nav-fav-vide,#sidebar .navgrp[data-grp="favoris"]:has(+.nav-fav-vide){display:none}
}
@media (min-width:761px) and (max-height:780px){
  #sidebar{padding-top:var(--sp-2)}
  #sidebar nav button,#sidebar nav .nav-fav{min-height:28px; font-size:var(--fs-13)}
  #sidebar .navgrp{padding-top:var(--sp-15)}
  #sidebar .side-actions{margin:0 0 var(--sp-1)}
}

/* ====== LOT RESAS — V100.2 (youcef 07/10) : le sens de l'aéroport, « Toi », la gamme d'un coup d'œil ======
   « Vers l'aéroport, NCE en orange ; depuis l'aéroport, NCE en bleu » : partout où le code se lit (liste, tableau de bord,
   billet de la fiche). « Quand c'est moi le chauffeur, "Toi" en gras et d'une couleur ». Au téléphone, la gamme en tête de
   la ligne, à la teinte de sa famille ; et les gammes en puces au-dessus de la liste, un toucher pour filtrer. */
.bk-aero.arr{background:color-mix(in srgb,var(--t-orange) 14%,var(--surface)); color:color-mix(in srgb,var(--t-orange) 70%,var(--ink))}
.ds-iata.dep,.ds-iata.dep.doux,html[data-theme="dark"] .ds-iata.dep.doux{background:color-mix(in srgb,var(--texte-info) 12%,var(--surface)); color:var(--texte-info); box-shadow:none}
.ds-iata.arr,.ds-iata.arr.doux,html[data-theme="dark"] .ds-iata.arr.doux{background:color-mix(in srgb,var(--t-orange) 14%,var(--surface)); color:color-mix(in srgb,var(--t-orange) 70%,var(--ink)); box-shadow:none}
.ds-billet .codes .c b.dep{color:var(--texte-info)}
.ds-billet .codes .c b.arr{color:color-mix(in srgb,var(--t-orange) 70%,var(--ink))}
.bk-ch-moi .ds-mention .nom,.bk-toi{display:inline-flex; align-items:center; height:20px; padding:0 var(--sp-15); border-radius:var(--r-pilule);
  background:color-mix(in srgb,var(--t-violet) 14%,var(--surface)); color:color-mix(in srgb,var(--t-violet) 78%,var(--ink)); font-weight:700}
.bk-gt{display:inline-block; flex:none; max-width:17ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; height:18px; line-height:18px; padding:0 var(--sp-15); border-radius:var(--r-xs);
  background:color-mix(in srgb,var(--fam) 16%,var(--surface)); color:color-mix(in srgb,var(--fam) 62%,var(--ink));
  font-size:var(--fs-11); font-weight:700; letter-spacing:.02em; text-transform:uppercase}
.bk-li-tg{display:flex; align-items:center; gap:var(--sp-15); flex:0 1 auto; min-width:0}
.bk-li-tg .ds-trajet{min-width:0}
.bk-gammes{display:flex; gap:var(--sp-15); overflow-x:auto; scrollbar-width:none; padding:var(--sp-05) 0 var(--sp-2)}
.bk-gammes::-webkit-scrollbar{display:none}
.bk-gp{display:inline-flex; align-items:center; gap:var(--sp-15); flex:none; height:30px; padding:0 var(--sp-3); border:1px solid var(--border); border-radius:var(--r-pilule);
  background:var(--surface); color:var(--ink-2); font-size:var(--fs-13); font-weight:500; cursor:pointer}
.bk-gp b{font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums}
.bk-gp:hover{border-color:var(--border-strong); color:var(--ink)}
.bk-gp.on{border-color:color-mix(in srgb,var(--fam,var(--accent)) 55%,var(--border)); background:color-mix(in srgb,var(--fam,var(--accent)) 12%,var(--surface)); color:var(--ink); font-weight:600}
.bk-gp.on b{color:var(--ink-2)}
@media (max-width:760px){ .bk-gp{height:34px} }
/* changer de chauffeur : au bout de la cellule (au survol, toujours au doigt) ; la course prise par un chauffeur relais le dit */
#s-bookings .bk-t td[data-c="chauffeur"]{position:relative}
.bk-chg{position:absolute; top:var(--sp-2); right:var(--sp-1); display:grid; place-items:center; width:28px; height:28px; padding:0; border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink-2); cursor:pointer; transition:opacity .12s}
.bk-chg .svgi{width:14px; height:14px}
.bk-chg:hover{border-color:var(--accent); color:var(--texte-accent)}
@media (hover:hover){ .bk-chg{opacity:0} .bk-t tr:hover .bk-chg,.bk-chg:focus-visible{opacity:1} }
.bk-relais{color:var(--texte-alerte); font-weight:600}
#s-bookings .bk-t td[data-c="chauffeur"] small.bk-relais{display:flex; align-items:center; gap:var(--sp-1)}
#s-bookings .bk-t td[data-c="chauffeur"] small.bk-relais .svgi{width:12px; height:12px; flex:none}
#s-bookings .bk-t td[data-c="chauffeur"] small.bk-relais+.ds-btn{margin-top:var(--sp-1)}
.fa-actuel{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--surface-douce); font-size:var(--fs-13); color:var(--ink-2)}
.fa-actuel>.svgi{width:15px; height:15px; flex:none; color:var(--muted)}
.fa-relais{display:flex; align-items:center; gap:var(--sp-15); margin-left:auto; font-size:var(--fs-12); color:var(--muted); cursor:pointer}
.fa-grp{padding:var(--sp-2) var(--sp-1) var(--sp-05); font-size:var(--fs-12); font-weight:600; color:var(--muted)}
.fa-grp span{color:var(--faint); font-weight:500}
/* la provenance en un geste : le canal d'une ligne (et la provenance d'une course du tableau de bord) ouvre son menu */
.bk-prov{display:inline-flex; align-items:center; gap:var(--sp-05); max-width:100%; padding:var(--sp-05) var(--sp-1); margin:calc(-1 * var(--sp-05)) calc(-1 * var(--sp-1)); border:0; border-radius:var(--r-sm); background:none; color:inherit; font:inherit; cursor:pointer}
.bk-prov>.svgi{width:12px; height:12px; flex:none; color:var(--faint); transition:opacity .12s}
.bk-prov:hover{background:var(--surface-2)}
@media (hover:hover){ .bk-prov>.svgi{opacity:0} .bk-prov:hover>.svgi,.bk-prov:focus-visible>.svgi,.bk-t tr:hover .bk-prov>.svgi{opacity:1} }
/* V100.4 — « ov2-provb » : sous le nom « ov2-prov », cette règle retirait aussi le cadre, le fond et la marge de la CARTE
   Provenance (section.ov2-prov) et soulignait tout son texte */
.ov2-provb{display:block; margin-left:auto; padding:0; border:0; background:none; font:inherit; color:inherit; text-decoration:underline dotted; text-underline-offset:2px; cursor:pointer}
.ov2-provb:hover{color:var(--texte-accent)}

/* ====== LOT MOTIF — V100.3 (youcef 07/10 : « mettre pourquoi j'ai arrêté les ventes ; l'an prochain, en comparant, on saura ») ======
   Sous une courbe, la période comparée dit ses événements (un arrêt des ventes et son motif, des vacances) ; la liste des
   arrêts dit le motif de chacun, et garde les arrêts passés. */
.evt-cmp{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2); flex-basis:100%; margin-top:var(--sp-2); font-size:var(--fs-12); color:var(--muted)}
.evt-cmp>.svgi{width:13px; height:13px; flex:none; color:var(--faint)}
.evt-cmp-t{font-weight:600; color:var(--ink-2)}
.evt-cmp-e{display:inline-flex; align-items:center; gap:var(--sp-1); max-width:100%; min-width:0; padding:var(--sp-05) var(--sp-2); border:1px dashed var(--border-strong); border-radius:var(--r-pilule);
  background:transparent; color:var(--ink-2); font:inherit; cursor:pointer}
.evt-cmp-e i{width:8px; height:8px; border-radius:var(--r-rond); flex:none}
.evt-cmp-e b{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.evt-cmp-e span{color:var(--muted); white-space:nowrap}
.evt-cmp-e em{font-style:normal; color:var(--texte-alerte); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.evt-cmp-e:hover{border-style:solid; color:var(--ink)}
.arv-motif{display:flex; align-items:flex-start; gap:var(--sp-1); margin-top:var(--sp-1); font-size:var(--fs-12); color:var(--ink-2); line-height:1.4}
.arv-motif>.svgi{width:13px; height:13px; flex:none; margin-top:var(--sp-05); color:var(--texte-alerte)}
.arv-motif .ds-lien{margin-left:var(--sp-1); font-size:var(--fs-12)}
.arv-motif-ajout{display:flex; width:fit-content; align-items:center; gap:var(--sp-05); margin-top:var(--sp-1); font-size:var(--fs-12)}
.arv-motif-ajout .svgi{width:12px; height:12px}
.arv-motif-form textarea,.evt-form textarea#evtMotif{width:100%; resize:vertical}
.arv-motif-form>.sub{margin:0 0 var(--sp-3)}

/* ====== LOT DEVIS — V100.3 (youcef 07/10 : « améliore l'onglet devis, on comprend rien ») ======
   En tête, ce qu'est un devis en une phrase ; puis son parcours en quatre étapes (à chiffrer → en attente de paiement → payés,
   ou expirés et annulés), chacune avec son nombre, son montant et ce qu'il y a à faire. Une étape touchée montre ses devis, une
   ligne chacun : qui et où, quand, où il en est (en une phrase, un point de couleur), combien, le geste. Des jetons seulement. */
.dv-intro{margin:0 0 var(--sp-3); font-size:var(--fs-14); line-height:1.5; color:var(--ink-2)}
.dv-intro b{color:var(--ink)}
.dv-parcours{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.9fr); gap:var(--sp-3); margin-bottom:var(--sp-4)}
.dv-etape{position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"n t" "n v" "n s"; column-gap:var(--sp-2); row-gap:var(--sp-05);
  align-items:center; min-width:0; padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface);
  color:var(--ink-2); font:inherit; text-align:left; cursor:pointer; transition:border-color .12s, box-shadow .12s, background-color .12s}
.dv-etape:hover{border-color:var(--border-strong); box-shadow:var(--shadow-card-hover)}
.dv-etape:focus-visible{outline:none; box-shadow:var(--ring)}
/* la flèche du parcours, entre les trois premières étapes ; la quatrième est une sortie (bord pointillé) */
.dv-etape:not(:nth-child(n+3))::after{content:""; position:absolute; top:50%; right:calc(-1 * var(--sp-3)); width:var(--sp-3); height:1px; background:var(--border-strong)}
.dv-etape:nth-child(4){border-style:dashed; background:transparent}
.dv-etape.on{border-color:var(--accent); background:var(--accent-soft); color:var(--ink)}
.dv-etape.on:nth-child(4){border-style:solid}
.dv-et-n{grid-area:n; align-self:start; display:grid; place-items:center; width:24px; height:24px; border-radius:var(--r-rond); background:var(--surface-piste);
  font-size:var(--fs-12); font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums}
.dv-etape.on .dv-et-n{background:var(--accent); color:var(--accent-ink)}
.dv-etape.urgent .dv-et-n{background:var(--st-attente-fond); color:var(--st-attente-texte)}
.dv-et-t{grid-area:t; display:flex; align-items:center; gap:var(--sp-1); min-width:0; font-size:var(--fs-13)}
.dv-et-t .svgi{width:14px; height:14px; flex:none; color:var(--muted)}
.dv-et-t b{font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dv-et-v{grid-area:v; display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2); font-family:var(--font-num); font-variant-numeric:tabular-nums}
.dv-et-v b{font-size:var(--fs-24); font-weight:700; line-height:1.1; color:var(--ink)}
.dv-et-v span{font-size:var(--fs-13); color:var(--ink-2)}
.dv-et-s{grid-area:s; font-size:var(--fs-12); line-height:1.35; color:var(--muted)}
.dv-etape.urgent .dv-et-s{color:var(--texte-alerte); font-weight:600}
/* où en est un devis : un point de couleur, une phrase (les cartes du parcours — lot C2) */
.dvl-etat{display:flex; align-items:flex-start; gap:var(--sp-1); min-width:0; font-size:var(--fs-12); line-height:1.4; color:var(--ink-2)}
.dvl-etat>i{flex:none; width:8px; height:8px; margin-top:var(--sp-05); border-radius:var(--r-rond); background:var(--faint)}
.dvl-etat.chaud{color:var(--ink)}
.dvl-etat.chaud>i{background:var(--accent)}
.dvl-etat.alerte{color:var(--texte-alerte)}
.dvl-etat.alerte>i{background:var(--texte-alerte)}
.dvl-etat.ok>i{background:var(--texte-ok)}
.dvl-etat.gris{color:var(--muted)}
@media (max-width:1100px){
  .dv-parcours{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-etape::after{display:none}
}
@media (max-width:600px){
  .dv-intro{font-size:var(--fs-13)}
  .dv-parcours{gap:var(--sp-2); margin-bottom:var(--sp-3)}
  .dv-etape{padding:var(--sp-2); grid-template-areas:"n t" "v v" "s s"}
  .dv-et-t{align-items:flex-start}
  .dv-et-t b{white-space:normal; line-height:1.25}
  .dv-et-v b{font-size:var(--fs-20)}
}

/* ====== LOT PRIX — V100.4 (youcef 07/10 : « l'onglet Tarifs, pas clair ; il n'y a pas les prix du site web ; je veux que les prix partent direct, avec un petit bruit ») ======
   Les prix de novaliafleet.com en tête de Tarifs : la phrase, les véhicules du site, le tableau trajets × véhicules (un clic sur un
   prix, Entrée : en ligne, un éclat vert), l'ajustement avec son aperçu, le journal. Au téléphone, un trajet = une carte. Des jetons. */
.ps-intro{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--sp-2) var(--sp-5); margin-bottom:var(--sp-4); padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-card); background:color-mix(in srgb,var(--texte-info) 7%,var(--surface)); color:var(--ink-2); font-size:var(--fs-14); line-height:1.5}
.ps-intro-t{display:flex; gap:var(--sp-3); flex:1 1 520px; min-width:0}
.ps-intro-t>.svgi{flex:none; width:20px; height:20px; margin-top:var(--sp-05); color:var(--texte-info)}
.ps-intro p{margin:0}
.ps-intro b{color:var(--ink)}
.ps-comment{margin-top:var(--sp-1)}
.ps-comment>summary{display:inline-flex; align-items:center; font-size:var(--fs-13); font-weight:500; color:var(--texte-accent); cursor:pointer; list-style:none}
.ps-comment>summary::-webkit-details-marker{display:none}
.ps-comment ul{margin:var(--sp-2) 0 0; padding-left:var(--sp-5); font-size:var(--fs-13)}
.ps-comment li+li{margin-top:var(--sp-05)}
.ps-grille-nom{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1); font-size:var(--fs-12)}
.ps-grille-nom b{color:var(--ink)}
.ps-autres{display:inline-flex; align-items:center; gap:var(--sp-05); color:var(--texte-alerte)}
.ps-autres .svgi{width:12px; height:12px}
/* les véhicules du site */
.ps-vehs{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-4)}
.ps-veh{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-1); min-width:0; padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface)}
.ps-veh.eteint{border-style:dashed; background:transparent}
.ps-veh-t{display:flex; flex-direction:column; max-width:100%; min-width:0; padding-right:var(--sp-5)}
.ps-veh-t b{font-size:var(--fs-15); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ps-veh-code{font-size:var(--fs-11); color:var(--muted); letter-spacing:.02em}
.ps-veh-v{display:flex; align-items:baseline; gap:var(--sp-1); font-variant-numeric:tabular-nums}
.ps-veh-v span{font-size:var(--fs-12); color:var(--muted)}
.ps-veh-v b{font-family:var(--font-num); font-size:var(--fs-22); font-weight:700; line-height:1.15; color:var(--ink)}
.ps-veh-m{font-size:var(--fs-12); color:var(--ink-2)}
.ps-veh-e{display:inline-flex; align-items:center; height:22px; padding:0 var(--sp-2); border-radius:var(--r-pilule); font-size:var(--fs-11); font-weight:600}
.ps-veh-e.on{background:var(--st-terminee-fond); color:var(--st-terminee-texte)}
.ps-veh-e.off{background:var(--st-attente-fond); color:var(--st-attente-texte)}
.ps-veh-e.hors{background:var(--surface-piste); color:var(--muted)}
.ps-veh-plus{position:absolute; top:var(--sp-2); right:var(--sp-2); display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:var(--r-rond); background:transparent; color:var(--muted); cursor:pointer}
.ps-veh-plus:hover{background:var(--surface-douce); color:var(--ink)}
.ps-veh-plus .svgi{width:16px; height:16px}
.ps-veh-ajout{justify-content:center; border-style:dashed; background:transparent; color:var(--texte-accent); font:inherit; text-align:left; cursor:pointer}
.ps-veh-ajout:hover{border-color:var(--accent); background:var(--accent-soft)}
.ps-veh-ajout>.svgi{width:18px; height:18px}
.ps-veh-ajout b{font-size:var(--fs-14)}
.ps-veh-ajout span{font-size:var(--fs-12); color:var(--muted)}
/* la barre d'outils */
.ps-outils{flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-3)}
.ps-outils .search{flex:1 1 220px; max-width:340px}
.ps-son.on{color:var(--texte-accent)}
/* le tableau : un trajet par ligne, un véhicule par colonne (les colonnes s'alignent : sous-grille) */
.ps-table{display:grid; grid-template-columns:minmax(220px,1.7fr) repeat(var(--ps-n),minmax(92px,1fr)); border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); overflow:hidden}
.ps-row{grid-column:1/-1; display:grid; grid-template-columns:subgrid; align-items:center; border-top:1px solid var(--border-doux)}
.ps-row:first-child{border-top:0}
.ps-row:not(.ps-tete):hover{background:var(--surface-douce)}
.ps-tete{background:var(--surface-2); font-size:var(--fs-12); color:var(--muted)}
.ps-tete .ps-tr{flex-direction:row; align-items:baseline; gap:var(--sp-2); padding-block:var(--sp-2)}
.ps-tete .ps-tr>span:first-child{color:var(--ink); font-weight:600; font-size:var(--fs-13)}
.ps-tete .ps-c{flex-direction:column; align-items:flex-end; gap:0; padding:var(--sp-2) var(--sp-3)}
.ps-tete .ps-c b{font-size:var(--fs-13); color:var(--ink)}
.ps-tete .ps-c span{font-size:var(--fs-11)}
.ps-tr{display:flex; flex-direction:column; gap:var(--sp-05); min-width:0; padding:var(--sp-2) var(--sp-3)}
.ps-tr-l{display:flex; align-items:baseline; gap:var(--sp-1); min-width:0}
.ps-tr-a{max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-12); color:var(--muted)}
.ps-tr-f{flex:none; font-size:var(--fs-12); color:var(--faint)}
.ps-tr-b{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-14); font-weight:600; color:var(--ink)}
.ps-dem{font-size:var(--fs-11); color:var(--muted)}
.ps-c{position:relative; display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-05); min-width:0; padding:var(--sp-1) var(--sp-2)}
.ps-p{display:inline-flex; align-items:center; justify-content:flex-end; min-width:64px; height:32px; padding:0 var(--sp-2); border:1px solid transparent; border-radius:var(--r-md);
  background:transparent; color:var(--ink); font:inherit; font-size:var(--fs-14); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
button.ps-p{cursor:pointer}
button.ps-p:hover{border-color:var(--border-strong); background:var(--surface)}
button.ps-p:focus-visible{outline:none; box-shadow:var(--ring)}
.ps-p-vide{min-width:40px; color:var(--faint)}
.ps-p-vide .svgi{width:14px; height:14px}
.ps-cm{display:grid; place-items:center; flex:none; width:24px; height:24px; border:0; border-radius:var(--r-rond); background:transparent; color:var(--muted); cursor:pointer}
.ps-cm .svgi{width:14px; height:14px}
.ps-cm:hover{background:var(--surface-piste); color:var(--ink)}
@media (hover:hover){ .ps-cm{opacity:0} .ps-c:hover .ps-cm,.ps-cm:focus-visible{opacity:1} }
.ps-in{width:92px; height:32px; padding:0 var(--sp-2); border:1px solid var(--accent); border-radius:var(--r-md); background:var(--surface); color:var(--ink); box-shadow:var(--ring);
  font:inherit; font-size:var(--fs-14); font-weight:600; text-align:right; font-variant-numeric:tabular-nums}
.ps-in:focus{outline:none}
.ps-in-e{font-size:var(--fs-12); color:var(--muted)}
.ps-c.part .ps-p{color:var(--muted)}
.ps-c.ok .ps-p{animation:psEnLigne 1.6s ease-out}
@keyframes psEnLigne{0%{background:color-mix(in srgb,var(--texte-ok) 26%,transparent); color:var(--texte-ok)} 70%{background:color-mix(in srgb,var(--texte-ok) 10%,transparent)} 100%{background:transparent}}
@media (prefers-reduced-motion:reduce){ .ps-c.ok .ps-p{animation:none; color:var(--texte-ok)} }
.ps-tout{margin-top:var(--sp-2)}
/* le journal */
.ps-journal{margin-top:var(--sp-4)}
.ps-journal>summary{cursor:pointer; list-style:none; font-size:var(--fs-14)}
.ps-journal>summary::-webkit-details-marker{display:none}
.ps-j{margin:var(--sp-2) 0 0; padding:0; list-style:none}
.ps-j li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--sp-05) var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--border-doux)}
.ps-j-q{min-width:0; font-size:var(--fs-13); color:var(--ink); overflow-wrap:anywhere}
.ps-j-m{grid-column:1; font-size:var(--fs-12); color:var(--muted)}
.ps-j li .ds-lien{grid-column:2; grid-row:1/3; align-self:center}
.ps-j li.annule .ps-j-q{color:var(--muted); text-decoration:line-through}
/* les fenêtres : ajuster, ajouter un trajet, un véhicule */
.tf-intro{display:flex; align-items:flex-start; gap:var(--sp-1); margin:0 0 var(--sp-3); font-size:var(--fs-13); line-height:1.5; color:var(--ink-2)}
.tf-intro>.svgi{flex:none; width:14px; height:14px; margin-top:var(--sp-05); color:var(--texte-info)}
.tf-intro b{color:var(--ink)}
.tf-intro .ds-lien{font-size:inherit}
.ps-aj{display:flex; flex-direction:column; gap:var(--sp-3)}
.ps-aj>.sub{margin:0}
.ps-aj .field,.ps-aj .form-row{margin:0}
.ps-aj .go{margin-top:var(--sp-1)}
.ps-aj-f{min-width:0; margin:0; padding:0; border:0}
.ps-aj-f legend{margin-bottom:var(--sp-1); padding:0; font-size:var(--fs-12); font-weight:600; color:var(--ink-2)}
.ps-cases{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2)}
.ps-case{display:inline-flex; align-items:center; gap:var(--sp-1); min-height:32px; padding:0 var(--sp-2); border:1px solid var(--border); border-radius:var(--r-pilule); font-size:var(--fs-13); cursor:pointer}
.ps-case:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.ps-unite{display:flex; align-items:center; gap:var(--sp-1)}
.ps-unite input{flex:1 1 auto; min-width:0}
.ps-unite span{font-size:var(--fs-13); color:var(--muted)}
.ps-apercu{padding:var(--sp-3); border-radius:var(--r-md); background:var(--surface-douce); font-size:var(--fs-13)}
.ps-apercu p{margin:0 0 var(--sp-1)}
.ps-ex{display:flex; flex-direction:column; gap:var(--sp-05); margin:0; padding:0; list-style:none}
.ps-ex li{display:flex; justify-content:space-between; gap:var(--sp-2); font-size:var(--fs-12); color:var(--ink-2)}
.ps-ex li span:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ps-tr-prix{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--sp-2) var(--sp-3)}
.ps-v-prix{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,1fr)}
.ps-v-ap{margin:var(--sp-2) 0 0; font-size:var(--fs-13); color:var(--ink-2)}
.ps-v-ap b{color:var(--ink)}
/* au téléphone : un trajet = une carte, un véhicule par case (son nom en tête de case) */
@media (max-width:760px){
  .ps-intro{padding:var(--sp-3); font-size:var(--fs-13)}
  .ps-vehs{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2)}
  .ps-veh{padding:var(--sp-2) var(--sp-3)}
  .ps-veh-v b{font-size:var(--fs-18)}
  .ps-table{display:flex; flex-direction:column; gap:var(--sp-2); border:0; background:transparent; overflow:visible}
  .ps-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:var(--sp-1); border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface)}
  .ps-row:first-child{border-top:1px solid var(--border)}
  /* l'en-tête ne garde que « Depuis l'aéroport · 12 trajets » : chaque case dit son véhicule */
  .ps-row.ps-tete{display:block; padding:0 var(--sp-1); border:0; background:transparent}
  .ps-tete .ps-c{display:none}
  .ps-tr{grid-column:1/-1; padding:var(--sp-1) var(--sp-2)}
  .ps-c{flex-wrap:wrap; justify-content:flex-start; align-content:flex-start; row-gap:0; padding:var(--sp-1) var(--sp-2)}
  .ps-c::before{content:attr(data-veh); flex-basis:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-11); color:var(--muted)}
  .ps-p{justify-content:flex-start; min-width:0; padding-left:0}
  button.ps-p{padding-left:var(--sp-1); margin-left:calc(-1 * var(--sp-1))}
  .ps-cm{margin-left:auto}
  .ps-in{width:96px}
}

/* ====== LOT GLISSER — V100.4 (youcef 07/10 : « je veux pouvoir déplacer les widgets du tableau de bord ») ======
   À la souris, une poignée sur le bord haut de la carte survolée : on la glisse, la carte suit (sans ouvrir « Personnaliser »).
   Au doigt, l'appui long ouvre la personnalisation : ni menu ni sélection de texte ne s'y mêlent. Des jetons seulement. */
.ovp-grip{position:absolute; z-index:var(--z-flottant); display:grid; place-items:center; width:34px; height:22px; padding:0; border:1px solid var(--border-strong);
  border-radius:var(--r-pilule); background:var(--surface); color:var(--muted); box-shadow:var(--shadow-card); cursor:grab; touch-action:none}
.ovp-grip:hover{border-color:var(--accent); color:var(--texte-accent)}
.ovp-grip:focus-visible{outline:none; box-shadow:var(--ring)}
.ovp-grip .svgi{width:16px; height:16px}
html.ovp-glisse-en-cours .ovp-grip{display:none}
@media (pointer:coarse){ .ov2>[data-ovp]{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none} }

/* ====== LOT LIENS — V1.2 (youcef 07/10 : « rends le tout interconnecté au maximum ») ======
   Un nom mène à sa fiche (une mention), un chiffre à ses courses (data-va). Une mention posée dans un texte en gras, gris
   ou en petit garde la graisse et la couleur de ce texte ; un chiffre-lien se souligne en pointillé au survol. Des jetons seulement. */
b .ds-mention,strong .ds-mention,.dsp-etat .ds-mention{font-weight:inherit}
.muted .ds-mention,.rowsub .ds-mention,small .ds-mention,.ds-sous .ds-mention,.ess-nom .ds-mention{color:inherit}
.lien-chiffre{display:inline-flex; align-items:baseline; gap:var(--sp-05); border-radius:var(--r-tag)}
.lien-chiffre:focus-visible{outline:none; box-shadow:var(--ring)}
.lien-chiffre:hover b{color:var(--texte-accent)}
.ps-dem.lien-chiffre{cursor:pointer}
.ps-dem.lien-chiffre:hover{color:var(--texte-accent)}
.anamixb i.va{cursor:pointer; transition:filter .12s}
.anamixb i.va:hover{filter:brightness(1.12)}
.ess-lecture .lnk{font:inherit}

/* ====== LOT GRAPHIQUES — V1.3 (youcef 07/10 : « améliore le design sur la présentation, sur les graphs, vraiment sur tout ») ======
   Le survol met une colonne en avant (les autres s'estompent), une part d'anneau aussi ; les barres poussent au premier rendu
   (une colonne après l'autre), les barres horizontales s'allongent ; un graphique pris au clavier porte l'anneau de focus.
   « Réduire les animations » les éteint. Des jetons seulement. */
.bc-col{transition:opacity .16s var(--ease)}
svg.survol .bc-col{opacity:.42}
svg.survol .bc-col.on{opacity:1}
@keyframes bcPousse{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.anim-col{transform-box:fill-box; transform-origin:50% 100%; animation:bcPousse .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes hbPousse{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.anim-hb .bar{transform-origin:0 50%; animation:hbPousse .6s cubic-bezier(.2,.8,.2,1) both}
svg.survol .dseg{opacity:.45}
svg.survol .dseg.on{opacity:1; transform:scale(1.03)}
.donut-leg .it{border-radius:var(--r-tag); padding:1px var(--sp-1); margin:-1px calc(-1 * var(--sp-1)); transition:background-color .12s}
.donut-leg .it:hover{background:var(--surface-piste)}
.donut-leg .it.va{cursor:pointer}
.ch-kbd:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--r-md)}
.ch-clic .hitband{cursor:pointer}
@media (prefers-reduced-motion:reduce){ .anim-col,.anim-hb .bar{animation:none} .bc-col,.dseg{transition:none} }
/* V1.3 — les mini-courbes des chiffres de Statistiques : sous la variation (en haut à droite), pas dessus ; les annulations en corail */
.kpi.gj.a-spark .kpi-spark.mauvais{color:var(--corail)}

/* ====== LOT SEMAINE — V1.3 : la semaine qui vient (tableau de bord) ======
   Sept colonnes : le jour, combien de courses, une barre (la part sans chauffeur en corail, en haut), le CA prévu ; aujourd'hui
   cerclé, le jour le plus chargé en couleur ; « 3 sans » sous la colonne mène aux courses à assigner. Des jetons seulement. */
.ov2-semaine .ds-carte-h .droite{margin-left:auto}
.ov2-sem{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--sp-2); margin-top:var(--sp-3)}
.ov2-sem-jour{display:flex; flex-direction:column; gap:var(--sp-1); min-width:0}
.ov2-sem-col{display:grid; grid-template-rows:auto auto 64px auto; justify-items:center; gap:var(--sp-1); padding:var(--sp-2) var(--sp-1);
  border-radius:var(--r-md); border:1px solid var(--border); background:var(--surface); color:var(--ink); text-decoration:none; transition:border-color .12s, background-color .12s}
a.ov2-sem-col:hover{border-color:var(--accent); background:var(--surface-piste)}
a.ov2-sem-col:focus-visible{outline:none; box-shadow:var(--ring)}
.ov2-sem-col.auj{border-color:var(--accent)}
.ov2-sem-col.pic .ov2-sem-n{color:var(--texte-accent)}
.ov2-sem-col.vide{color:var(--faint)}
.ov2-sem-j{display:flex; flex-direction:column; align-items:center; line-height:1.15}
.ov2-sem-j b{font-size:var(--fs-12); font-weight:600}
.ov2-sem-j small{font-size:var(--fs-11); color:var(--muted)}
.ov2-sem-n{font-family:var(--font-num); font-size:var(--fs-22); font-weight:600; font-variant-numeric:tabular-nums; line-height:1}
.ov2-sem-barre{display:flex; align-items:flex-end; justify-content:center; width:100%; height:64px}
.ov2-sem-barre i{display:flex; flex-direction:column; width:min(28px,60%); min-height:2px; border-radius:var(--r-xs) var(--r-xs) 0 0; background:var(--chart-hero); overflow:hidden}
.ov2-sem-barre s{display:block; width:100%; background:var(--corail); text-decoration:none}
.ov2-sem-ca{font-size:var(--fs-11); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.ov2-sem-s{align-self:center; min-height:18px; padding:0 var(--sp-1); border-radius:var(--r-pilule); font-size:var(--fs-12); font-weight:600; color:var(--texte-danger); text-decoration:none; white-space:nowrap}
.ov2-sem-s span{font-weight:500}
a.ov2-sem-s:hover{background:color-mix(in srgb,var(--corail) 14%,transparent)}
.ov2-sem-s.ok{visibility:hidden}
.ov2-sem-sans{color:var(--texte-danger)}
@media (max-width:600px){ .ov2-sem{gap:var(--sp-1)} .ov2-sem-col{grid-template-rows:auto auto 44px; padding:var(--sp-15) 0} .ov2-sem-barre{height:44px}
  .ov2-sem-n{font-size:var(--fs-16)} .ov2-sem-ca,.ov2-sem-s span{display:none}
  .ov2-semaine .ds-carte-h{flex-wrap:wrap} .ov2-semaine .ds-carte-h .ds-sous{flex-basis:100%} .ov2-semaine .ds-carte-h .droite{display:none} }

/* ====== LOT NOUVEAUTES — V1.4 : le numéro de version ouvre les nouveautés ; un point doré tant qu'elles ne sont pas lues ====== */
#buildTag{cursor:pointer; border-radius:var(--r-tag)}
#buildTag:hover{color:var(--side-ink, var(--ink))}
#buildTag:focus-visible{outline:none; box-shadow:var(--ring)}
#buildTag.nouveau::after{content:''; display:inline-block; width:6px; height:6px; margin-left:var(--sp-1); border-radius:var(--r-pilule); background:var(--gold); vertical-align:middle}
.nv-liste{display:flex; flex-direction:column; gap:var(--sp-5)}
.nv-v h3{display:flex; align-items:baseline; gap:var(--sp-2); margin:0 0 var(--sp-2); font-size:var(--fs-15)}
.nv-v h3 small{font-size:var(--fs-12); font-weight:400; color:var(--muted)}
.nv-v ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2)}
.nv-v li{display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface)}
.nv-t{display:flex; flex-direction:column; gap:var(--sp-05); min-width:0; flex:1}
.nv-t span{font-size:var(--fs-13); color:var(--muted); line-height:1.45}
.nv-voir{flex:none; align-self:center; white-space:nowrap}

/* ====== LOT CLAUDE — V1.5 : brancher Claude en deux minutes (la page des connecteurs à un clic, « Vérifier ») ====== */
.claude-url-g{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.claude-url-g .btn{white-space:nowrap}
.claude-verif:empty{display:none}
.claude-verif{margin:0 0 var(--sp-3); padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface)}
.claude-v{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2)}
.claude-v li{display:flex; align-items:flex-start; gap:var(--sp-2); font-size:var(--fs-13); color:var(--ink)}
.claude-v li .rg-point{margin-top:var(--sp-1)}
.claude-v li>span:last-child{display:flex; flex-direction:column; gap:var(--sp-05); min-width:0}
.claude-v b{font-weight:600}
.claude-v small{font-size:var(--fs-12); color:var(--muted); overflow-wrap:anywhere}
.claude-v-ok{display:flex; align-items:center; gap:var(--sp-2); margin:var(--sp-3) 0 0; font-size:var(--fs-13); font-weight:600; color:var(--texte-ok)}
.claude-v-en{display:flex; align-items:center; gap:var(--sp-2); margin:0; font-size:var(--fs-13); color:var(--muted)}
.claude-note{margin:0 0 var(--sp-3); font-size:var(--fs-12); line-height:1.6; color:var(--muted)}
.claude-note .mono{font-size:var(--fs-12); overflow-wrap:anywhere}
@media (max-width:600px){ .claude-url-g{width:100%} .claude-url-g .btn{flex:1 1 auto; justify-content:center} }

/* ====== LOT E3 — DISPATCH : LA FRISE DE LA JOURNÉE ET LE GLISSER-DÉPOSER (07/10/2026 : « améliore les fonctionnalités et le design de l'admin ») ======
   DIRECTION § 3.3 à 3.6, § 3.12 et § 5.3. L'anatomie des listes (barre de vue collante, puces et bilan, la file « À faire
   maintenant »), puis la frise : un chauffeur par ligne, l'heure en abscisse (76 px par heure : --df-px, le même nombre que DF.px
   dans js/exploitation/dispatch-frise.js), les blocs à la couleur de leur statut (les jetons --st-* par les classes .ds-st-*),
   les hachures (chevauchement, absence, bloqué), le trait or « maintenant », la ligne visée en vert ou rouge pendant un
   glissement, le fantôme qui suit le pointeur. La Liste de V90 reste telle quelle (ses règles sont plus haut). Des jetons seulement. */
#dspBarre{display:contents}
#lienBar[data-ecran="dispatch"]{display:none}   /* V2.0 (vitesse) : plus de html:has() */
#s-dispatch .ds-vue .vues{padding-right:var(--sp-6); -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
#dspChips .ds-filtres{padding:var(--sp-15) 0}
/* ---- le bilan au bout des puces : « N attendent leur paiement » (V93.11), un toucher ouvre Réservations ---- */
.dsp-attente{height:24px; padding:0 var(--sp-2); border:0; border-radius:var(--r-pilule); background:var(--alerte-doux); color:var(--texte-alerte); font:inherit; font-size:var(--fs-12); font-weight:500; cursor:pointer; white-space:nowrap}
.dsp-attente:hover{filter:brightness(.97)}
.ds-filtres .bilan .dsp-jm{font-size:var(--fs-13); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
/* ---- la pastille du dispatch automatique, dans le résumé de l'en-tête (et le grand titre du téléphone) ---- */
#pageResume .pda-past,.gt-s .pda-past{height:24px; min-height:0; margin-left:var(--sp-1); padding:0 var(--sp-2); border:0; border-radius:var(--r-pilule); background:var(--surface-piste); box-shadow:none; font-size:var(--fs-13); font-weight:500; line-height:24px; color:var(--ink-2); vertical-align:middle}
#pageResume .pda-past:hover,.gt-s .pda-past:hover{background:var(--surface-2); color:var(--ink)}
/* ---- « À faire maintenant » : une carte, la file, « Voir les N » ---- */
#s-dispatch .dsp-af{margin:var(--sp-3) 0 var(--sp-4)}
#s-dispatch .dsp-af>.ds-carte-h{margin-bottom:var(--sp-2)}
#s-dispatch .dsp-af .ds-file li.dsp-afl{cursor:pointer}
#s-dispatch .dsp-af .ds-file li.dsp-afl:focus-visible{outline:0; box-shadow:inset 0 0 0 2px var(--accent)}
#s-dispatch .dsp-af .ds-file li.dsp-afl.ouverte{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
#s-dispatch .dsp-af .ds-file li.vide{padding:var(--sp-3) var(--sp-5) var(--sp-4)}
.dsp-af-pied{padding:var(--sp-1) var(--sp-4) var(--sp-3)}
/* ---- la barre de vue : ‹ Aujourd'hui › (la frise seulement) ---- */
.df-jour{display:inline-flex; align-items:center}
.df-jour [data-dfjour="0"]{min-width:112px; justify-content:center; font-weight:600; color:var(--ink)}
/* ---- la frise : une carte, son corps qui défile (en largeur : les heures ; en hauteur : les chauffeurs), l'en-tête des heures
   collant en haut, la colonne des chauffeurs collante à gauche ---- */
#dspFrise{--df-px:76px; --df-voie:40px; margin-bottom:var(--sp-6); overflow:hidden}
#dspFrise .ds-vide{padding:var(--sp-7) var(--sp-5)}
.df-corps{position:relative; max-height:calc(100vh - var(--haut-barre) - var(--vue-h) - 132px); min-height:240px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; border-radius:var(--r-card) var(--r-card) 0 0}
.df-tete{position:sticky; top:0; z-index:var(--z-dessus-2); display:flex; height:32px; min-width:max-content; background:var(--surface); border-bottom:1px solid var(--border)}
.df-coin{position:sticky; left:0; z-index:var(--z-dessus); flex:none; display:flex; align-items:center; width:var(--df-col); padding:0 var(--sp-4); background:var(--surface); border-right:1px solid var(--border); font-size:var(--fs-12); font-weight:500; color:var(--muted)}
.df-heures{position:relative; flex:none; display:grid; grid-template-columns:repeat(var(--df-n,18),var(--df-px)); width:calc(var(--df-n,18)*var(--df-px)); font-size:var(--fs-12); color:var(--muted); font-variant-numeric:tabular-nums}
.df-h{display:flex; align-items:center; padding-left:var(--sp-15); border-left:1px solid var(--border-doux); white-space:nowrap}
.df-now-h{position:absolute; top:6px; height:20px; padding:0 var(--sp-2); border-radius:var(--r-pilule); background:var(--or); color:var(--nuit); font-size:var(--fs-11); font-weight:700; line-height:20px; transform:translateX(-50%); white-space:nowrap}
.df-ligne{display:flex; min-width:max-content; border-bottom:1px solid var(--border-doux); transition:background var(--t-1) var(--ease)}
.df-ligne:last-child{border-bottom:0}
.df-ch{position:sticky; left:0; z-index:var(--z-dessus); flex:none; display:flex; align-items:center; gap:var(--sp-2); width:var(--df-col); min-width:0; padding:var(--sp-1) var(--sp-4); background:var(--surface); border-right:1px solid var(--border); transition:background var(--t-1) var(--ease)}
.df-ch-t{display:flex; flex:1 1 auto; flex-direction:column; gap:var(--sp-05); min-width:0}
.df-ch-t>b{font-size:var(--fs-14); font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.df-ch-t>b .ds-mention{max-width:100%}
.df-ch-t>b .ds-mention .nom{overflow:hidden; text-overflow:ellipsis}
.df-ch-moi .df-ch-t>b{color:var(--or-ink)}
.df-st{display:inline-flex; align-items:center; gap:var(--sp-1); min-width:0; font-size:var(--fs-12); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.df-st i{flex:none; width:7px; height:7px; border-radius:var(--r-rond); background:var(--point-neutre)}
.df-st.good i{background:var(--point-ok)} .df-st.live i{background:var(--point-accent)} .df-st.warn i{background:var(--point-alerte)} .df-st.bad i{background:var(--point-danger)}
.df-st.bad{color:var(--texte-danger)} .df-st.live{color:var(--texte-accent)}
.df-st-d{font-weight:400}
.df-ch-sans .df-ch-ic{flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:var(--r-sm); background:var(--danger-doux); color:var(--texte-danger)}
.df-ch-sans .df-ch-ic .svgi{width:16px; height:16px}
.df-ch-sans .df-ch-t>b{color:var(--texte-danger)}
.df-ch-sans small{font-size:var(--fs-12); line-height:1.3; color:var(--muted)}
.df-sans{background:color-mix(in srgb,var(--bad) 4%,var(--surface))}
.df-sans .df-ch{background:color-mix(in srgb,var(--bad) 5%,var(--surface))}
.df-piste{position:relative; flex:none; width:calc(var(--df-n,18)*var(--df-px)); background-image:linear-gradient(90deg,var(--border-doux) 1px,transparent 1px); background-size:var(--df-px) 100%}
.df-now{position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--or); pointer-events:none}
.df-vide{position:sticky; left:calc(var(--df-col) + var(--sp-4)); display:inline-flex; align-items:center; gap:var(--sp-1); height:100%; font-size:var(--fs-13); color:var(--texte-ok); white-space:nowrap}
.df-vide .svgi{width:14px; height:14px}
/* ---- l'absence hachurée avec son motif ; un chauffeur qui ne peut pas rouler, hachuré rouge ---- */
.df-abs{position:absolute; top:0; bottom:0; left:0; right:0; display:flex; align-items:center; padding:0 var(--sp-3); background-image:repeating-linear-gradient(135deg,transparent 0 7px,color-mix(in srgb,var(--muted) 18%,transparent) 7px 10px); color:var(--muted); font-size:var(--fs-12); font-style:normal; pointer-events:none}
.df-abs span{position:sticky; left:calc(var(--df-col) + var(--sp-3)); padding:0 var(--sp-1); border-radius:var(--r-xs); background:var(--surface); white-space:nowrap}
.df-abs.bad{background-image:repeating-linear-gradient(135deg,transparent 0 7px,color-mix(in srgb,var(--bad) 22%,transparent) 7px 10px); color:var(--texte-danger)}
.df-bloque .df-ch,.df-absent .df-ch{opacity:.85}
/* ---- un bloc : la couleur du statut (les classes .ds-st-* posent --st-c, --st-p, --st-f), l'heure et le trajet en codes, le
   client ; terminée : estompée ; en mouvement : le point pulse ; chevauchement : hachuré rouge ; en attente d'envoi : pointillé ---- */
.df-bloc{position:absolute; display:flex; flex-direction:column; justify-content:center; height:36px; margin-top:4px; padding:0 var(--sp-2) 0 var(--sp-15); border:0; border-left:3px solid var(--st-p,var(--point-neutre)); border-radius:var(--r-sm); background:var(--st-f,var(--surface-piste)); color:var(--st-c,var(--ink)); font:inherit; text-align:left; cursor:pointer; overflow:hidden;
  transition:box-shadow var(--t-1) var(--ease), opacity var(--t-2) var(--ease), transform var(--t-1) var(--ease)}
.df-bloc .df-b1{display:flex; align-items:center; gap:var(--sp-1); min-width:0; font-size:var(--fs-12); font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden}
.df-bloc .df-b1 b{flex:none; font-variant-numeric:tabular-nums}
.df-bloc .df-b1 .ds-trajet{gap:var(--sp-05); min-width:0; overflow:hidden; font-size:var(--fs-12); color:inherit}
.df-bloc .df-b1 .ds-trajet .fl .svgi{width:10px; height:10px}
.df-bloc .df-b1 .ds-trajet>span:not(.fl){overflow:hidden; text-overflow:ellipsis}
.df-bloc .df-b2{font-size:var(--fs-11); font-weight:500; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.85}
.df-bloc.df-deborde{overflow:visible}
.df-bloc.df-deborde .df-b1,.df-bloc.df-deborde .df-b2{overflow:visible; width:max-content; max-width:calc(100% + var(--df-libre,0px))}
.df-bloc.df-deborde .df-b1 .ds-trajet{overflow:visible}
.df-bloc.df-coupe .df-b1,.df-bloc.df-coupe .df-b2{visibility:hidden}   /* le bloc est passé sous la colonne des chauffeurs : son libellé ne dépasse pas */
.df-bloc.fini{opacity:.55}
.df-bloc.vif .df-b1::before{content:''; flex:none; width:6px; height:6px; border-radius:var(--r-rond); background:var(--st-p); animation:ds-pouls 2s var(--ease) infinite}
.df-bloc.chev{background-image:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--bad) 22%,transparent) 6px 9px); box-shadow:inset 0 0 0 1px var(--bad)}
.df-bloc.attente{border-left-style:dashed; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)}
.df-bloc.glissable{cursor:grab; touch-action:none}
.df-bloc.df-glisse{opacity:.35}
.df-bloc:hover{box-shadow:0 0 0 1px var(--st-p,var(--border-strong)); z-index:var(--z-dessus)}
.df-bloc:focus-visible{outline:0; box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent); z-index:var(--z-dessus-2)}
.df-bloc.foc,.df-bloc.ouverte{box-shadow:0 0 0 2px var(--accent); z-index:var(--z-dessus)}
/* « Assigner » au bout d'un bloc sans chauffeur (au survol de la ligne, au focus ; toujours au doigt) ; « Annuler » sur un envoi armé */
.df-asg{position:absolute; display:grid; place-items:center; width:24px; height:24px; margin-top:10px; border:0; border-radius:var(--r-rond); background:var(--btn); color:var(--btn-ink); cursor:pointer; z-index:var(--z-dessus-2); box-shadow:var(--el-1); transition:opacity var(--t-1) var(--ease), transform var(--t-1) var(--ease)}
.df-asg .svgi{width:13px; height:13px}
.df-asg:hover{transform:scale(1.08)}
.df-asg.df-asg-annul{background:var(--ink); color:var(--page)}
.df-asg:focus-visible{outline:0; box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent)}
/* à la souris, « Assigner » paraît au survol de la ligne ou au focus ; au doigt, il reste visible */
@media (hover:hover){
  .df-asg{opacity:0}
  .df-ligne:hover .df-asg,.df-asg:focus-visible,.df-bloc:focus-visible+.df-asg,.df-bloc.foc+.df-asg{opacity:1}
}
/* ---- le glissement : la ligne visée en vert (on peut) ou en rouge (la raison au toast), le fantôme qui suit le pointeur et dit où il va ---- */
.df-ligne.df-cible-ok,.df-ligne.df-cible-ok .df-ch{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.df-ligne.df-cible-ok .df-piste{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)}
.df-ligne.df-cible-non,.df-ligne.df-cible-non .df-ch{background:var(--danger-doux)}
.df-ligne.df-cible-non .df-piste{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--bad) 45%,transparent)}
.df-fantome{position:fixed; left:0; top:0; margin:0; z-index:var(--z-menu); pointer-events:none; opacity:.92; box-shadow:var(--el-2); transform:translate(-9999px,-9999px); overflow:visible}
.df-fantome::after{content:attr(data-df-dit); position:absolute; left:0; top:100%; width:max-content; max-width:320px; margin-top:var(--sp-1); padding:var(--sp-05) var(--sp-2); border-radius:var(--r-sm); background:var(--ink); color:var(--page); font-size:var(--fs-12); font-weight:500; line-height:1.35; white-space:normal}
.df-fantome:not([data-df-dit])::after{display:none}
html.df-en-glisse{cursor:grabbing; user-select:none; -webkit-user-select:none}
html.df-en-glisse .df-bloc{cursor:grabbing}
/* ---- la légende : la couleur = le statut, les hachures, le trait or, le geste et les touches ---- */
.df-legende{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); padding:var(--sp-2) var(--sp-4); border-top:1px solid var(--border); font-size:var(--fs-12); color:var(--muted)}
.df-legende .ds-statut{font-size:var(--fs-12)}
.df-lg{display:inline-flex; align-items:center; gap:var(--sp-1)}
.df-lg::before{content:''; width:18px; height:10px; border-radius:var(--r-xs); background:var(--surface-piste)}
.df-lg-chev::before{background-image:repeating-linear-gradient(135deg,transparent 0 3px,color-mix(in srgb,var(--bad) 40%,transparent) 3px 5px); box-shadow:inset 0 0 0 1px var(--bad)}
.df-lg-abs::before{background-image:repeating-linear-gradient(135deg,transparent 0 3px,color-mix(in srgb,var(--muted) 35%,transparent) 3px 5px)}
.df-lg-now::before{width:3px; height:12px; border-radius:var(--r-xs); background:var(--or)}
.df-lg-aide{flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1)}
.df-lg-aide .svgi{width:13px; height:13px}
/* ---- la fiche ancrée à droite (≥ 1280 px) : la Liste passe en colonnes courtes, les colonnes du Dispatch se resserrent ---- */
@media (min-width:1280px){
  html.pn-on.pn-ancre #s-dispatch .dspplan{grid-template-columns:1fr}
  html.pn-on.pn-ancre #s-dispatch .dspcard.dsprow{grid-template-columns:96px minmax(0,1.4fr) auto minmax(0,1.2fr) auto}
  html.pn-on.pn-ancre #s-dispatch .dsp-vite-v{display:none}
  html.pn-on.pn-ancre #s-dispatch .dspgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  html.pn-on.pn-ancre #s-dispatch .df-corps{max-height:calc(100vh - var(--haut-barre) - var(--vue-h) - 132px)}
  /* l'en-tête de page, à côté de la fiche : l'action pleine en icône (comme Réservations), la pastille en court */
  html.pn-on.pn-ancre #topbar[data-ecran="dispatch"] #pageActions .ds-btn.primaire{width:32px; padding:0}
  html.pn-on.pn-ancre #topbar[data-ecran="dispatch"] #pageActions .ds-btn.primaire>:is(span,kbd):not(.svgi){position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  html.pn-on.pn-ancre #topbar[data-ecran="dispatch"] #pageResume .pda-past-l{display:none}
  html.pn-on.pn-ancre #topbar[data-ecran="dispatch"] #pageResume .pda-past-c{display:inline}
}
/* ---- au téléphone et sur tablette : les puces sur une ligne qui défile, jusqu'aux bords (comme Réservations) ---- */
@media (max-width:1040px){
  #dspChips .ds-filtres{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--sp-3)); padding:var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
    -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
  #dspChips .ds-filtres::-webkit-scrollbar{display:none}
  #dspChips .ds-filtres>*{flex:none}
  #dspChips .bilan{margin-left:var(--sp-2); flex-wrap:nowrap; white-space:nowrap}
  #dspChips .bilan .ds-resume{flex-wrap:nowrap; white-space:nowrap}
  #dspChips :is(.ds-puce,.ds-puce.ajout){height:32px; min-height:0}
  #dspChips .ds-puce button{min-height:0}
  #dspChips .ds-puce .x{width:28px; height:28px}
}
/* ---- le téléphone : la Liste (la frise revient avec la largeur : iPad, paysage) ; la file en deux lignes ---- */
@media (max-width:760px){
  .dsp-attente{min-height:var(--h-touch)}
  #s-dispatch .dsp-af .ds-file>li{grid-template-columns:28px minmax(0,1fr); align-items:start; row-gap:var(--sp-2)}
  #s-dispatch .dsp-af .ds-file>li .act{grid-column:2}
  #s-dispatch .dsp-af .ds-file .txt>span{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .df-bloc,.df-ligne,.df-ch,.df-asg{transition:none}
  .df-bloc.vif .df-b1::before{animation:none}
}

/* ====== LOT O1 — CHAUFFEURS : LA LISTE ET LA FICHE DANS L'ANATOMIE « ITINÉRAIRE » (07/10/2026 : « améliore les fonctionnalités et le design de l'admin ») ======
   DIRECTION § 3.3 à 3.7, § 3.14 et § 5.5 ; le modèle : Réservations (sections E1L et E1F). La barre de vue colle sous l'en-tête,
   les puces et leur bilan suivent, la ligne « Aujourd'hui » (qui roule) remplace la carte, puis le tableau standard dans une
   carte : Chauffeur · Statut du jour · Véhicule · Courses du mois · Note · Prêt à rouler · Marge · gestes. La fiche ouverte (panneau
   ancré, dès 1 280 px) : les colonnes courtes. Au téléphone : un chauffeur, deux lignes. La fiche (panneau de 520 px) : l'en-tête
   d'objet, la bande de points clés, « Prêt à rouler », les onglets collants, des sections à filets. Les composants ds-* ont leur
   forme dans la section du lot F : ici, ce qui est propre aux chauffeurs. Des jetons seulement : le thème sombre suit. */

/* ---- les statuts d'un chauffeur en point + mot (les teintes du lot J) ---- */
.ds-statut.ch-st-disponible,.ds-statut.ch-st-pret,.ds-statut.ch-st-a_jour{--st-c:var(--st-terminee-texte); --st-p:var(--st-terminee-point); --st-f:var(--st-terminee-fond)}
.ds-statut.ch-st-prochaine{--st-c:var(--st-confirmee-texte); --st-p:var(--st-confirmee-point); --st-f:var(--st-confirmee-fond)}
.ds-statut.ch-st-en_course{--st-c:var(--st-a-bord-texte); --st-p:var(--st-a-bord-point); --st-f:var(--st-a-bord-fond)}
.ds-statut.ch-st-indisponible,.ds-statut.ch-st-bloque,.ds-statut.ch-st-depasse{--st-c:var(--st-aassigner-texte); --st-p:var(--st-aassigner-point); --st-f:var(--st-aassigner-fond)}
.ds-statut.ch-st-bientot{--st-c:var(--st-attente-texte); --st-p:var(--st-attente-point); --st-f:var(--st-attente-fond)}
.ds-statut.ch-st-inactif,.ds-statut.ch-st-a_completer,.ds-statut.ch-st-regle,.ds-statut.ch-st-inconnu{--st-c:var(--st-annulee-texte); --st-p:var(--st-annulee-point); --st-f:var(--st-annulee-fond)}

/* ---- la barre de vue colle sur toute la hauteur de la liste (son enveloppe ne compte pas) ; les vues qui ne tiennent pas défilent ---- */
#chBarre{display:contents}
#s-drivers .ds-vue .vues{padding-right:var(--sp-6); -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
/* ---- les puces et leur bilan ---- */
.ch-puces .ds-filtres{padding:var(--sp-15) 0}
/* ---- « Aujourd'hui » : une ligne — qui roule en mentions (le point de son statut), puis ce qui reste à traiter ---- */
.ch-roule{display:flex; align-items:center; gap:var(--sp-3); min-height:40px; padding:0 0 var(--sp-3); font-size:var(--fs-13); color:var(--muted)}
.ch-roule-l{flex:none; font-weight:600; color:var(--ink)}
.ch-roule-m{display:flex; align-items:center; gap:var(--sp-2); flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; padding:var(--sp-05) 0}
.ch-roule-m::-webkit-scrollbar{display:none}
.ch-roule-p{flex:none}
.ch-roule-p .ds-mention{height:28px; max-width:none; padding:0 var(--sp-2) 0 var(--sp-05); border-radius:var(--r-pilule); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-strong); font-size:var(--fs-13)}
.ch-roule-p .ds-mention .nom{flex:none}
.ch-roule-p .ds-mention:hover{background:var(--surface-douce)}
.ch-roule-p .ds-mention .sous{display:inline-flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-12)}
.ch-roule-p .ds-mention .sous::before{content:''; width:6px; height:6px; border-radius:var(--r-rond); background:var(--st-p,var(--point-neutre))}
.ch-roule-p.st-en_course{--st-p:var(--st-a-bord-point)}
.ch-roule-p.st-prochaine{--st-p:var(--st-confirmee-point)}
.ch-roule-p.st-disponible{--st-p:var(--st-terminee-point)}
.ch-roule-v{color:var(--ink-2)}
.ch-roule-d{flex:none; display:inline-flex; align-items:center; gap:var(--sp-2); white-space:nowrap}
.ch-roule-s{display:inline-flex; align-items:center; gap:var(--sp-1)}
.ch-roule .ds-lien{font-size:var(--fs-13)}
/* ---- le tableau : une carte, ses en-têtes collants sous la barre de vue, des colonnes posées (la plus large : le chauffeur) ---- */
#s-drivers .ch-carte{margin-bottom:var(--sp-4)}
#s-drivers .ch-t{--vue-dessus:var(--vue-h); --th-h:32px}
#s-drivers .ch-t thead th:first-child{border-top-left-radius:var(--r-card)}
#s-drivers .ch-t thead th:last-child{border-top-right-radius:var(--r-card)}
#s-drivers .ch-t th[data-col="st"]{width:146px}
#s-drivers .ch-t th[data-col="veh"]{width:140px}
#s-drivers .ch-t th[data-col="courses"]{width:120px}
#s-drivers .ch-t th[data-col="note"]{width:100px}
#s-drivers .ch-t th[data-col="pret"]{width:164px}
#s-drivers .ch-t th[data-col="arg"]{width:88px}
#s-drivers .ch-t th[data-col="gestes"]{width:112px}
#s-drivers .ch-t th{user-select:none}
#s-drivers .ch-t th.sortable{cursor:pointer; transition:color var(--t-1) var(--ease)}
#s-drivers .ch-t th.sortable:hover,#s-drivers .ch-t th.tri{color:var(--ink)}
#s-drivers .ch-t th .arr{display:inline-flex; align-items:center; margin-left:var(--sp-05); vertical-align:-2px}
#s-drivers .ch-t th .arr .svgi{width:12px; height:12px}
#s-drivers .ch-t td{line-height:1.35}
#s-drivers .ch-t.long tbody tr{content-visibility:auto; contain-intrinsic-size:auto var(--ligne-h)}
/* le chauffeur : son avatar, son nom (une mention) et ses marques, dessous son genre et sa flotte ou son numéro */
.ch-c{display:flex; align-items:center; gap:var(--sp-2); min-width:0}
.ch-cn{min-width:0; flex:1 1 auto}
.ch-nom{display:flex; align-items:center; gap:var(--sp-1); min-width:0}
.ch-nom .ds-mention{flex:0 1 auto; padding:0; margin:0}
.ch-nom .ds-mention .nom{font-weight:600}
.ch-nom .badge{flex:none}
#s-drivers .ch-t td[data-c="ch"] .sous{display:flex; align-items:center; gap:var(--sp-1); margin-top:var(--sp-05); white-space:pre}
#s-drivers .ch-t td[data-c="ch"] .sous>*{flex:none}
#s-drivers .ch-t td[data-c="ch"] .sous>.ds-mention{flex:0 1 auto; min-width:0}
#s-drivers .ch-t td[data-c="courses"] .sous{font-size:var(--fs-12)}
#s-drivers .ch-t .sous .ds-mention{font-weight:500; padding:0 var(--sp-05); margin:0 calc(-1 * var(--sp-05))}
#s-drivers .ch-t .sous .ch-genre{vertical-align:0}
#s-drivers .ch-t td[data-c="courses"] .lien-chiffre b{font-size:var(--fs-16); font-weight:600; font-variant-numeric:tabular-nums}
.ch-plaque .ds-mention{font-weight:600; letter-spacing:.02em; font-variant-numeric:tabular-nums}
#s-drivers .ch-t td[data-c="arg"]{color:var(--ink); font-weight:600}
/* « Prêt à rouler » : le manque précis en gris (entier au survol), « Compléter » dans la même ligne */
.ch-manque{display:flex; align-items:center; gap:var(--sp-1); min-width:0}
.ch-manque-t{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis}
.ch-manque .ch-completer{flex:none; font-size:var(--fs-12)}
#s-drivers .ch-t td.gestes{padding-left:0; padding-right:var(--sp-2)}
/* la légende sous la liste */
.ch-legende{margin:0 0 var(--sp-2); font-size:var(--fs-12); line-height:1.5; color:var(--muted)}
#drvMount>.ch-legende:last-child{margin-bottom:var(--sp-6)}
/* ---- la fiche ouverte à côté (panneau ancré, dès 1 280 px) : les colonnes courtes — le chauffeur, son statut, ses courses,
   prêt à rouler ; sous 1 440 px, prêt à rouler passe sous le statut (la fiche le dit) ---- */
@media (min-width:1280px){
  html.pn-on.pn-ancre #s-drivers .ch-t :is(th[data-col],td[data-c]):not([data-col="ch"],[data-c="ch"],[data-col="st"],[data-c="st"],[data-col="courses"],[data-c="courses"],[data-col="pret"],[data-c="pret"]){display:none}
  html.pn-on.pn-ancre #s-drivers .ch-t th[data-col="st"]{width:146px}
  html.pn-on.pn-ancre #s-drivers .ch-t th[data-col="pret"]{width:168px}
  html.pn-on.pn-ancre #s-drivers .ch-t th[data-col="courses"]{width:108px}
  html.pn-on.pn-ancre #s-drivers .ch-roule-d{display:none}
  /* l'en-tête de page, resserré à côté de la fiche : « Ajouter » garde son « + » (son nom reste lu) */
  html.pn-on.pn-ancre #topbar[data-ecran="drivers"] #pageActions .ds-btn.primaire{width:32px; padding:0}
  html.pn-on.pn-ancre #topbar[data-ecran="drivers"] #pageActions .ds-btn.primaire>:is(span,kbd):not(.svgi){position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
}
@media (min-width:1280px) and (max-width:1439px){
  html.pn-on.pn-ancre #s-drivers .ch-t :is(th[data-col="pret"],td[data-c="pret"]){display:none}
}
/* ---- le téléphone (sous 1 040 px) : un chauffeur, deux lignes — son nom et son statut ; son genre, son véhicule, ses courses ;
   ce qui l'empêche de rouler en rouge ; Appeler et « … » à droite ---- */
.ch-tel{overflow:hidden}
.ch-li2{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:var(--sp-3); min-height:64px; padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); cursor:pointer; -webkit-tap-highlight-color:transparent}
.ch-li2+.ch-li2{border-top:1px solid var(--border-doux)}
.ch-li2:active{background:var(--surface-douce)}
.ch-li2.ouverte{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
.ch-li2:focus-visible{outline:none; box-shadow:inset 0 0 0 2px var(--accent)}
.ch-li2.passee :is(.ch-li2-t b,.ch-li2-s){color:var(--muted)}
.ch-li2-c{display:flex; flex-direction:column; gap:var(--sp-05); min-width:0}
.ch-li2-t{display:flex; align-items:center; gap:var(--sp-2); min-width:0; font-size:var(--fs-14); color:var(--ink)}
.ch-li2-t b{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.ch-li2-t .badge{flex:none}
.ch-li2-t .ds-statut{flex:none; margin-left:auto}   /* V3.13 (19/10) — lot L3 : le statut ne se coupe plus (« Bientô… ») : c’est le nom qui s’abrège */
.ch-li2-s{font-size:var(--fs-13); line-height:1.3; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ch-li2-ko{font-size:var(--fs-12); font-weight:600; color:var(--texte-danger); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ch-li2-doc{font-size:var(--fs-12); font-weight:600; color:var(--texte-alerte)}
.ch-li2-a{display:flex; align-items:center; gap:var(--sp-05)}
.ch-li2-a .ds-btn{position:relative}
@media (pointer:coarse){
  .ch-li2-a .ds-btn{min-height:28px}
  .ch-li2-a .ds-btn.icone{min-width:28px; width:28px}
  .ch-li2-a .ds-btn::after{content:''; position:absolute; inset:-8px -4px}
}
@media (max-width:1040px){
  .ch-puces .ds-filtres{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--sp-3)); padding:var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
    -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
  .ch-puces .ds-filtres::-webkit-scrollbar{display:none}
  .ch-puces .ds-filtres>*{flex:none}
  .ch-puces .bilan{margin-left:var(--sp-2)}
  .ch-puces :is(.ds-puce,.ds-puce.ajout,.bk-raz){height:32px; min-height:0}
  .ch-puces .ds-puce button{min-height:0}
  .ch-puces .ds-puce .x{width:28px; height:28px}
  #s-drivers .ds-vue .ds-champ:not(:focus-within):not(:has(input:not(:placeholder-shown))) .ds-kbd{display:none}
  .ch-roule{flex-wrap:wrap; row-gap:var(--sp-1)}
  .ch-roule-m{flex:1 1 100%; order:3}
  .ch-roule-d{margin-left:auto; white-space:normal}
}

/* ---- LA FICHE (panneau de 520 px) : l'en-tête d'objet, la bande, « Prêt à rouler », les onglets collants, les sections ---- */
#panneauCorps .modal.pn-fiche .box:has(>#genBody>.chf){padding:0}
.chf{display:flex; flex-direction:column; min-width:0}
.chf-sq,.chf-etat{padding:var(--sp-5)}
.chf-alerte{display:flex; align-items:flex-start; gap:var(--sp-2); margin:0 0 var(--sp-3); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--alerte-doux); color:var(--ink); font-size:var(--fs-13); line-height:1.45}
.chf-alerte .svgi{width:15px; height:15px; flex:none; margin-top:2px; color:var(--texte-alerte)}
.chf-tete{padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.chf-id{display:flex; align-items:center; gap:var(--sp-4); min-width:0}
.chf-n{min-width:0; flex:1 1 auto}
.chf-nom{margin:0; font-size:var(--fs-32); font-weight:600; letter-spacing:var(--approche-32); line-height:1.1; color:var(--ink); overflow-wrap:anywhere}
.chf-st{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2)}
.chf-st-d{font-size:var(--fs-13); color:var(--muted)}
.chf-meta{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1) 0; margin-top:var(--sp-3); font-size:var(--fs-13); color:var(--ink-2)}
.chf-meta-i{display:inline-flex; align-items:center; min-width:0}
.chf-meta-i+.chf-meta-i::before{content:'·'; margin:0 var(--sp-2); color:var(--faint)}
.chf-meta .ds-mention{padding:0 var(--sp-05); margin:0 calc(-1 * var(--sp-05))}
.chf-meta .ch-genre{vertical-align:0}
.chf-tel{color:var(--ink-2); font-variant-numeric:tabular-nums; text-decoration:none}
.chf-tel:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.chf-gestes{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4)}
.chf-bande{border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.chf-bande .ds-bande>*{padding:var(--sp-3) var(--sp-4)}
.chf-bande .ds-chiffre .v{font-size:var(--fs-18)}
.chf-bande .ds-chiffre .s{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.chf-pret{padding:var(--sp-4) var(--sp-5) 0}
.chf-pret .ds-geste .t .svgi{flex:none}
.chf-pret.ok .ds-geste .t .svgi{color:var(--texte-ok)}
.chf-pret .ds-geste .liens{gap:var(--sp-2)}
.chf-pret-r{color:var(--muted)}
.chf-phrase{color:var(--ink-2)}
.chf-onglets{position:sticky; top:0; z-index:var(--z-collant); margin-top:var(--sp-4); padding:0 var(--sp-5); background:var(--elevated)}
.chf-onglets .ds-onglets{gap:var(--sp-3)}
.chf-gestes .ds-btn[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--accent)}
.chf-corps .ds-section{padding:var(--sp-4) var(--sp-5)}
.chf-corps .ds-section:first-child{border-top:0}
.chf-corps .ds-section>h3 .droite .ds-btn{margin:calc(-1 * var(--sp-1)) 0}
.chf-corps .ds-dl{grid-template-columns:128px minmax(0,1fr)}
.chf-corps .ds-dl dd{overflow-wrap:anywhere}
.chf-vide{margin:0; font-size:var(--fs-13); color:var(--muted)}
.chf-aide{margin:0 0 var(--sp-3); font-size:var(--fs-12); line-height:1.45; color:var(--muted)}
.chf-b{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3)}
.chf-h4{margin:var(--sp-4) 0 var(--sp-2); font-size:var(--fs-12); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
/* les courses d'une fiche : l'heure et le jour, le trajet, le statut — chaque ligne s'ouvre dans le panneau */
.chf-courses{display:grid}
.chf-course{display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:var(--sp-3); min-height:44px; padding:var(--sp-1) 0; border-top:1px solid var(--border-doux); color:inherit; text-decoration:none; font-size:var(--fs-14)}
.chf-course:first-child{border-top:0}
a.chf-course:hover{text-decoration:none}
a.chf-course:hover .chf-course-t{color:var(--texte-accent)}
.chf-course-q{display:flex; flex-direction:column; line-height:1.2}
.chf-course-q b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.chf-course-q small{font-size:var(--fs-12); color:var(--muted)}
.chf-course-t{display:flex; align-items:center; gap:var(--sp-1); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2)}
.chf-course-t .svgi{width:14px; height:14px; flex:none; color:var(--faint)}
/* les documents, les absences, les incidents, les notes reçues, les messages : une ligne chacun, filets fins */
.chf-docs{display:grid}
.chf-doc{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); min-height:44px; padding:var(--sp-2) 0; border-top:1px solid var(--border-doux); font-size:var(--fs-14)}
.chf-doc:first-child{border-top:0}
.chf-doc.passee .chf-doc-t b{color:var(--muted); text-decoration:line-through}
.chf-doc-t{display:flex; flex-direction:column; gap:2px; flex:1 1 180px; min-width:0}
.chf-doc-t b{font-weight:600; color:var(--ink)}
.chf-doc-t small{font-size:var(--fs-12); color:var(--muted); overflow-wrap:anywhere}
.chf-doc-t .ds-tag{vertical-align:1px}
.chf-doc .ds-statut{flex:none}
.chf-doc-a{flex:none}
.chf-doc .ch-acts{flex:none}
.chf-inc{cursor:pointer}
.chf-inc:hover .chf-doc-t b{color:var(--texte-accent)}
.chf-msg.entrant .chf-doc-t b{color:var(--texte-accent)}
.chf-fil{margin-top:var(--sp-1)}
.chf-fil>li[role="button"]{cursor:pointer}
.chf-fil>li[role="button"]:hover .x b{color:var(--texte-accent)}
.chf-fil .x .ch-etoiles{vertical-align:-1px}
/* les notes internes : la liste (la forme des notes de course, lot E1F), puis le champ et son bouton */
.chf-noter{margin-top:var(--sp-3)}
.chf-noter textarea{display:block; width:100%; box-sizing:border-box; min-height:44px; padding:var(--sp-2) var(--sp-3); border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-14); line-height:1.4; resize:vertical}
.chf-noter textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
.chf-noter-b{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2); font-size:var(--fs-13); color:var(--ink-2)}
.chf-noter-b .ds-btn{margin-left:auto}
.chf-note-x{margin-left:var(--sp-2); font-size:var(--fs-12)}
.fc-note .k .badge{vertical-align:1px}
/* « Déclarer une absence » : la fenêtre à la place de la fiche (une colonne, § 3.8) */
.chf-form{display:grid; gap:var(--sp-1); max-width:640px}
.chf-form .field{margin:0 0 var(--sp-2)}
.chf-form .field input,.chf-form .field select{width:100%; box-sizing:border-box}
.chf-form-b{display:flex; justify-content:flex-end; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2)}
@media (max-width:760px){
  .chf-tete{padding:var(--sp-4) var(--sp-4) var(--sp-3)}
  .chf-nom{font-size:var(--fs-24); letter-spacing:var(--approche-24)}
  .chf-gestes .ds-btn.primaire{flex:1 1 auto; min-width:0}
  .chf-gestes .ds-btn{min-height:var(--h-touch)}
  .chf-pret{padding:var(--sp-3) var(--sp-4) 0}
  .chf-onglets{padding:0 var(--sp-4)}
  .chf-corps .ds-section{padding:var(--sp-4)}
  .chf-course{grid-template-columns:52px minmax(0,1fr) auto}
  .chf-form-b .ds-btn{flex:1 1 auto}
  /* 12.1 : un bouton-lien dans du texte (la légende, la phrase du genre, un fait, un titre de section, une note) garde sa ligne ;
     c'est la zone de toucher qui grandit, pas le bouton (la règle V57 « button{min-height:44px} » en faisait des pilules hautes) */
  :is(.ch-legende,.ch-roule,.chf .ds-dl,.chf .chf-vide,.chf .ds-section>h3,.chf .fc-note .k) .ds-lien{min-height:0; position:relative}
  :is(.ch-legende,.ch-roule,.chf .ds-dl,.chf .chf-vide,.chf .ds-section>h3,.chf .fc-note .k) .ds-lien::after{content:''; position:absolute; inset:-12px -4px}
}

/* ====== LOT O2 — FLOTTES : LA LISTE ET LA FICHE DANS L'ANATOMIE « ITINÉRAIRE » (07/10/2026 : « améliore les fonctionnalités et le design de l'admin ») ======
   DIRECTION § 3.3 à 3.7, § 5.6 ; le modèle : Réservations (lot E1L). La barre de vue colle sous l'en-tête, la phrase d'aide du
   genre dessous, les puces et leur bilan, puis le tableau standard dans une carte : Flotte · Statut (le manque) · Chauffeurs ·
   Courses · CA · Marge · Activité · À payer · gestes. La fiche ouverte à côté (panneau ancré) : colonnes courtes. La fiche dans le
   panneau de 520 px : en-tête d'objet, bande, prochain geste, onglets, sections à filets. Au téléphone : une flotte, deux lignes.
   Les composants ds-* ont leur forme dans la section du lot F : ici, ce que les flottes y ajoutent. Des jetons seulement. */

/* ---- la barre de vue (colle sur toute la hauteur de la liste), l'aide du genre, les puces, la légende ---- */
.ent-barre{display:contents}
:is(#s-entreprises,#s-entclients) .ds-vue .vues{padding-right:var(--sp-6); -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
.ent-aide{margin:var(--sp-2) 0 0; font-size:var(--fs-13); line-height:1.45; color:var(--muted)}
.ent-aide[hidden]{display:none}
#entPuces .ds-filtres{padding:var(--sp-15) 0}
#entPuces:empty{display:none}
.ent-legende{margin:var(--sp-3) 0 var(--sp-6); font-size:var(--fs-12); line-height:1.5; color:var(--muted)}

/* ---- le tableau : une carte, des colonnes posées (la plus large : la flotte), le tri dans l'en-tête ---- */
.ent-carte-t{margin-bottom:var(--sp-4)}
.ent-t{--vue-dessus:var(--vue-h); --th-h:32px}
.ent-t thead th:first-child{border-top-left-radius:var(--r-card)}
.ent-t thead th:last-child{border-top-right-radius:var(--r-card)}
.ent-t th[data-col="statut"]{width:156px}
.ent-t th[data-col="chauffeurs"]{width:80px}
.ent-t th[data-col="courses"]{width:72px}
.ent-t th[data-col="ca"]{width:88px}
.ent-t th[data-col="marge"]{width:92px}
.ent-t th[data-col="activite"]{width:196px}
.ent-t th[data-col="apayer"]{width:80px}
.ent-t th[data-col="gestes"]{width:160px}
.ent-t td.gestes{text-overflow:clip}   /* cinq gestes invisibles au repos : pas de « … » d'ellipse fantôme */
.ent-t .gestes .ds-groupe-btn{gap:var(--sp-05)}
/* la place manque (un portable, le menu déplié, la fiche à côté) : la Flotte garde 240 px — la marge, puis les chauffeurs (déjà sous le nom),
   puis l'activité se cachent (entLargeurMaj, mesuré) ; s'il en manque encore, la carte défile en largeur, aucune colonne écrasée (ses en-têtes ne collent plus) */
.ent-carte-t.serre .ent-t :is([data-col="marge"],[data-c="marge"]){display:none}
.ent-carte-t.serre2 .ent-t :is([data-col="chauffeurs"],[data-c="chauffeurs"]){display:none}
.ent-carte-t.serre3 .ent-t :is([data-col="activite"],[data-c="activite"]){display:none}
.ent-carte-t.defile{overflow-x:auto; overscroll-behavior-x:contain}
.ent-carte-t.defile .ent-t thead th{position:static}
.ent-t th{user-select:none}
.ent-t th.tri{cursor:pointer; transition:color var(--t-1) var(--ease)}
.ent-t th.tri:hover,.ent-t th.tri.on{color:var(--ink)}
.ent-t th .lab{overflow:hidden; text-overflow:ellipsis}
.ent-t th .arr{display:inline-flex; align-items:center; margin-left:var(--sp-05); vertical-align:-2px}
.ent-t th .arr .svgi{width:12px; height:12px}
.ent-t td{line-height:1.35}
.ent-t tbody tr.ent-cur td{background:var(--surface-douce)}
.ent-t tbody tr.ent-cur td:first-child{box-shadow:inset 3px 0 0 var(--ink-2)}
.ent-t tr.ent-cur .gestes .ds-groupe-btn{opacity:1}
.ent-t tr:focus-visible{outline:0}
.ent-t tr:focus-visible td{background:var(--surface-douce)}
.ent-t td.gestes{padding-left:0; padding-right:var(--sp-2)}
/* à la souris, comme dans Réservations : les gestes flottent au bout de la ligne survolée (la colonne vide rend sa place au nom) */
@media (hover:hover){
  .ent-t th[data-col="gestes"]{width:var(--sp-2); padding:0}
  .ent-t td.gestes{position:relative; padding:0; overflow:visible}
  .ent-t td.gestes .ds-groupe-btn{position:absolute; top:50%; right:var(--sp-2); z-index:var(--z-dessus); padding:var(--sp-05); border-radius:var(--r-md);
    background:var(--surface); box-shadow:var(--el-2); transform:translateY(-50%)}
  .ent-t tr:not(:hover):not(:focus-within):not(.ent-cur) td.gestes .ds-groupe-btn{pointer-events:none}
}
/* la flotte : son logo, son nom (une mention), « GoodJourney », puis le genre, ses chauffeurs, son contact */
.ent-t .ent-nom{display:flex; align-items:center; gap:var(--sp-3); min-width:0}
.ent-t .ent-nom .plogo{flex:none; border-radius:var(--r-sm)}
.ent-nom-t{min-width:0; flex:1}
.ent-nom-l{display:flex; align-items:center; gap:var(--sp-15); min-width:0}
.ent-nom-l .ds-mention{font-weight:600; min-width:0}
.ent-nom-l .ds-tag{flex:none}
.ent-t .ent-nom .sous{display:flex; align-items:center; gap:var(--sp-1); margin-top:var(--sp-05); white-space:nowrap; overflow:hidden}
.ent-t .ent-nom .sous :is(.ch-genre,.ds-tag){flex:none}
.ent-nom-s{min-width:0; overflow:hidden; text-overflow:ellipsis}   /* le texte s'abrège, le genre et « GoodJourney » restent entiers */
/* le statut : point + mot (teinté), le manque précis dessous ; même teinte dans la fiche (pastille) et les listes de la fiche */
.ent-st-active{--st-c:var(--texte-ok); --st-p:var(--point-ok); --st-f:var(--ok-doux)}
.ent-st-a_completer{--st-c:var(--texte-alerte); --st-p:var(--point-alerte); --st-f:var(--alerte-doux)}
.ent-st-suspendue{--st-c:var(--muted); --st-p:var(--point-neutre); --st-f:var(--surface-piste)}
.ent-st-danger{--st-c:var(--texte-danger); --st-p:var(--point-danger); --st-f:var(--danger-doux)}
.ent-manque-l{margin-top:var(--sp-05); font-size:var(--fs-12); line-height:1.25; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:var(--texte-alerte)}
/* « + » au téléphone seulement : l'en-tête de page n'y montre pas ses actions (Entreprises clientes : le bouton entier à l'ordinateur) */
.ent-ajout-tel{display:none}
@media (max-width:1040px){ .ent-ajout-tel{display:inline-flex} .ent-ajout-bur{display:none} }
/* les chiffres : un nombre qui mène à sa liste, les montants en chiffres tabulaires, un zéro en gris */
.ent-chiffre{display:inline-block; padding:0 var(--sp-05); margin:0 calc(-1 * var(--sp-05)); border:0; border-radius:var(--r-xs); background:none; font:inherit; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); cursor:pointer; text-decoration:underline dotted var(--border-strong); text-underline-offset:3px}
.ent-chiffre:hover{color:var(--texte-accent); text-decoration-color:currentColor}
.ent-cash{font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink)}
.ent-cash.zero{font-weight:500; color:var(--muted)}
.ent-du{color:var(--texte-alerte)}
/* l'activité : la dernière course, puis la prochaine (une mention de la course) */
.ent-act{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ent-act b{font-weight:500; color:var(--ink)}
.ent-act-s{margin-top:var(--sp-05); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ent-act-s .ds-mention{font-weight:500; padding:1px var(--sp-05); margin:-1px calc(-1 * var(--sp-05))}
/* chargement, liste vide */
.ent-t tr.ent-etat td{height:auto; padding:0; white-space:normal; border-bottom:0; cursor:default}
.ent-t tbody tr.ent-etat:hover td{background:var(--surface)}

/* ---- la fiche ouverte à côté (panneau ancré, ≥ 1280 px) : les colonnes courtes — flotte, statut, courses, CA, gestes ---- */
@media (min-width:1280px){
  html.pn-on.pn-ancre #s-entreprises .ent-t :is(th[data-col],td[data-c]):is([data-col="chauffeurs"],[data-c="chauffeurs"],[data-col="marge"],[data-c="marge"],[data-col="activite"],[data-c="activite"],[data-col="apayer"],[data-c="apayer"]){display:none}
  html.pn-on.pn-ancre #s-entreprises .ent-t th[data-col="statut"]{width:148px}
  html.pn-on.pn-ancre #s-entreprises .ent-t td.gestes .ds-btn:not([data-entplus]){display:none}
  /* l'en-tête de page, resserré à côté de la fiche : « Ajouter » garde son « + » (son nom reste lu), le secondaire s'efface */
  html.pn-on.pn-ancre #topbar[data-ecran="entreprises"] #pageActions .ds-btn.primaire{width:32px; padding:0}
  html.pn-on.pn-ancre #topbar[data-ecran="entreprises"] #pageActions .ds-btn.primaire>:is(span,kbd):not(.svgi){position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  html.pn-on.pn-ancre #topbar[data-ecran="entreprises"] #pageActions #entGroupes{display:none}
}
@media (min-width:1280px) and (max-width:1439px){
  html.pn-on.pn-ancre #s-entreprises .ent-t :is([data-col="ca"],[data-c="ca"]){display:none}   /* la flotte et son statut d'abord ; les chiffres sont dans la fiche */
}
@media (min-width:1280px) and (hover:none){
  html.pn-on.pn-ancre #s-entreprises .ent-t th[data-col="gestes"]{width:48px}   /* au doigt, seul « … » reste : la colonne se resserre */
}

/* ---- la fiche (le panneau de 520 px) : l'en-tête d'objet, la bande, le prochain geste, les onglets, les sections ---- */
#panneauCorps .modal.pn-fiche .box:has(>#genBody>.ent-fiche){padding:0}
.ent-fiche{display:flex; flex-direction:column; min-width:0}
.ent-fiche>.ds-sq{padding:var(--sp-5)}
.ent-fiche>.ds-vide{padding:var(--sp-8) var(--sp-5)}
.ent-ft{display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; column-gap:var(--sp-3); row-gap:var(--sp-3); padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.ent-ft .plogo{width:56px; height:56px; font-size:var(--fs-20); border-radius:var(--r-md)}
.ent-ft-t{min-width:0}
.ent-ft-n{margin:0; font-size:var(--fs-24); font-weight:600; letter-spacing:var(--approche-24); line-height:var(--lh-titre); color:var(--ink); overflow-wrap:anywhere}
.ent-ft-s{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-15); margin-top:var(--sp-1); font-size:var(--fs-13); color:var(--ink-2)}
.ent-ft-s .ds-mention{font-weight:500}
.ent-ft-st{align-self:start}
.ent-ft-g{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.ent-ft-g .ds-btn.primaire{margin-left:auto; min-width:0}
.ent-ft-g .ds-btn.primaire span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ent-bande{border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.ent-bande .ds-bande>*{padding:var(--sp-3) var(--sp-3)}
.ent-bande .ds-bande>*+*::before{top:var(--sp-3); bottom:var(--sp-3)}
.ent-bande .ds-chiffre .v{font-size:var(--fs-18)}
.ent-bande .ds-chiffre :is(.l,.s){white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* les revenus par mois (hbars) dans 520 px : le mois court, la barre laisse la place au montant */
.ent-fiche .hbar{grid-template-columns:52px 1fr; gap:var(--sp-2)}
.ent-fiche .hbar .bar{max-width:46%}
.ent-fiche .hbar .v{min-width:0; overflow:hidden; text-overflow:ellipsis}
.ent-geste{padding:var(--sp-4) var(--sp-5) 0}
.ent-note-groupe{padding-bottom:0}
.ent-note-groupe .ds-geste .t{display:none}   /* la phrase du V91.4 dit déjà tout : pas de titre au-dessus */
.ent-note-groupe .ds-geste p{margin-top:0}
.ent-onglets{position:sticky; top:0; z-index:var(--z-collant); margin:var(--sp-3) 0 0; padding:0 var(--sp-5); background:var(--elevated); overflow:visible}
.ent-onglets .ds-onglets{flex-wrap:wrap; gap:0 var(--sp-4); overflow:visible}   /* neuf onglets dans 520 px : sur deux lignes plutôt que coupés */
.ent-onglets .ds-onglets button{height:42px}
.ent-corps{display:block; padding-bottom:var(--sp-6)}
.ent-corps>.ds-section:first-child{border-top:0}
/* les onglets d'avant (chauffeurs, véhicules, comptes, grille, zones, journal, paie) gardent leurs blocs .card : dans le panneau ils
   deviennent des sections à filets — plus de carte dans la carte (§ 3.7) */
.ent-fiche .ent-corps .card{margin:0; padding:var(--sp-5); border:0; border-radius:var(--r-nul); border-top:1px solid var(--border); background:transparent; box-shadow:none}
.ent-fiche .ent-corps>.card:first-child,.ent-fiche .ent-corps>div:first-child>.card:first-child{border-top:0}
.ent-fiche .ent-corps .card.pad0{padding:0 0 var(--sp-2)}
.ent-fiche .ent-corps .card.pad0>.ch{padding:var(--sp-5) var(--sp-5) 0}
.ent-fiche .ent-corps .card>.ch h3{font-size:var(--fs-14)}
.ent-fiche .ent-corps .card.pad0>.tablewrap{padding:0 var(--sp-3)}
.ent-fiche .ent-corps .ent-ajout,.ent-fiche .ent-corps .ent-secret{margin:var(--sp-3) var(--sp-5)}
.ent-fiche .ent-corps .ent-paie-barre{padding:var(--sp-4) var(--sp-5) 0}
.ent-fiche .ent-corps>p.sub{padding:0 var(--sp-5)}
.ent-fiche .ent-corps #entPaieZone{padding:var(--sp-3) var(--sp-3) 0}
.ent-fiche .ent-corps #entPaieZone .card{border-top:0}
.ent-fiche .ent-corps .ent-grp-ajout{padding:0 var(--sp-5)}
/* les faits : une valeur qui est un lien (règle 2), les mentions de « Liée à » */
.ent-fait-l{cursor:pointer; border-radius:var(--r-xs)}
.ent-fait-l:hover b{color:var(--texte-accent)}
.ent-fait-l b{text-decoration:underline dotted var(--border-strong); text-underline-offset:3px}
.ent-liee dd{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2)}
.ent-mentions{display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); min-width:0}
.ent-plus{height:24px; padding:0 var(--sp-15); border:0; border-radius:var(--r-pilule); background:var(--surface-piste); font:inherit; font-size:var(--fs-12); font-weight:600; color:var(--ink-2); cursor:pointer}
.ent-plus:hover{color:var(--ink)}
.ent-plus-l{font-size:var(--fs-13); font-weight:500; color:var(--texte-accent); cursor:pointer; white-space:nowrap}
.ent-plus-l:hover{text-decoration:underline; text-underline-offset:3px}
.ent-fiche .ent-manques{list-style:none; margin:0; padding:0}
.ent-fiche .ent-manque{border:0; border-radius:var(--r-md)}
.ent-fiche .ent-manque .ds-btn{flex:none}
.ent-fiche .ent-contacts-vue .ds-avatar{flex:none}
.ent-fiche .ent-cv .sous{font-size:var(--fs-13); overflow-wrap:anywhere}
/* les listes des onglets : des tableaux standard faits pour 520 px (deux lignes par cellule) */
.ent-fiche .ds-tableau{--vue-dessus:0px; --th-h:32px}
.ent-fiche .ds-tableau th{position:static}
.ent-fiche .ds-tableau td{line-height:1.35}
.ent-tc .c-date{width:72px} .ent-tc .c-st{width:104px} .ent-tc .c-prix{width:72px}
.ent-tc .heure b{font-size:var(--fs-14)}
.ent-tc tr.ent-avenir td .heure b,.ent-tc tr.ent-avenir .heure b{color:var(--texte-accent)}
.ent-tch .c-mois{width:56px} .ent-tch .c-compte{width:124px} .ent-tch .c-g{width:40px}
.ent-fiche .ds-tableau td.gestes{padding:0 var(--sp-2) 0 0}
.ent-tvh .c-ch{width:132px} .ent-tvh .c-etat{width:104px}
.ent-tcpt .c-etat{width:96px}
.ent-ch-n{display:flex; align-items:center; gap:var(--sp-15); min-width:0}
.ent-ch-n .ds-mention{font-weight:600; min-width:0}
.ent-ch-n .ds-tag{flex:none}
.ent-ch-s{display:flex; align-items:center; gap:var(--sp-1); margin-top:var(--sp-05); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ent-ch-s .svgi{width:12px; height:12px; vertical-align:-2px; color:var(--muted)}
.ent-fiche .ds-tableau td .sous{margin-top:var(--sp-05); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* « Modifier » ouvre le formulaire dans le panneau : une colonne (§ 3.8) */
#panneauCorps .ent-form2{grid-template-columns:minmax(0,1fr)}

/* ---- le téléphone (≤ 1040 px) : une flotte, deux lignes — le logo, le nom et son genre, ses courses et son CA ; le statut et « … » ---- */
.ent-li-groupe{margin:0 0 var(--sp-4)}
.ent-li{display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; column-gap:var(--sp-3); min-height:64px; padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); cursor:pointer; -webkit-tap-highlight-color:transparent}
.ent-li+.ent-li{border-top:1px solid var(--border-doux)}
.ent-li:active{background:var(--surface-douce)}
.ent-li.ouverte{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
.ent-li:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.ent-li .plogo{border-radius:var(--r-sm)}
.ent-li.passee .ent-li-n b,.ent-li.passee .ent-li-s{color:var(--muted)}
.ent-li-c{display:flex; flex-direction:column; gap:var(--sp-05); min-width:0}
.ent-li-n{display:flex; align-items:center; gap:var(--sp-15); min-width:0; font-size:var(--fs-14); line-height:1.3}
.ent-li-n b{font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ent-li-n .ch-genre{flex:none}
.ent-li-s{font-size:var(--fs-13); line-height:1.3; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ent-li-d{display:flex; flex-direction:column; align-items:flex-end; gap:var(--sp-05)}
.ent-li-d .ds-statut{font-size:var(--fs-12)}
.ent-li-d .ds-btn{position:relative}
@media (pointer:coarse){ .ent-li-d .ds-btn:not([aria-busy="true"])::after{content:''; position:absolute; inset:-8px -6px} }
@media (max-width:1040px){
  #entPuces .ds-filtres{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--sp-3)); padding:var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
    -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
  #entPuces .ds-filtres::-webkit-scrollbar{display:none}
  #entPuces .ds-filtres>*{flex:none}
  #entPuces .bilan{margin-left:var(--sp-2)}
  #entPuces :is(.ds-puce,.ds-puce.ajout){height:32px; min-height:0}
  #entPuces .ds-puce button{min-height:0}
  #entPuces .ds-puce .x{width:28px; height:28px}
  :is(#s-entreprises,#s-entclients) .ds-vue .ds-champ:not(:focus-within):not(:has(input:not(:placeholder-shown))) .ds-kbd{display:none}
  .ent-aide{margin-top:var(--sp-15)}
}
@media (max-width:760px){
  .ent-ft{grid-template-columns:48px minmax(0,1fr); padding:var(--sp-4) var(--sp-4) var(--sp-3)}
  .ent-ft .plogo{width:48px; height:48px}
  .ent-ft-n{font-size:var(--fs-20)}
  .ent-ft-st{grid-column:2; justify-self:start}
  .ent-ft-g .ds-btn{min-height:var(--h-touch)}
  .ent-ft-g .ds-btn.icone{min-width:var(--h-touch)}
  .ent-ft-g .ds-btn.primaire{flex:1 1 100%; margin-left:0}
  .ent-bande .ds-bande{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ent-onglets{padding:0 var(--sp-4)}
  .ent-geste{padding:var(--sp-3) var(--sp-4) 0}
  .ent-corps>.ds-section{padding:var(--sp-4)}
  .ent-fiche .ent-corps .card{padding:var(--sp-4)}
  .ent-tc .c-st{width:88px}
}

/* ====== LOT O3 — CLIENTS : LA LISTE ET LA FICHE 360° (07/10/2026 : « améliore les fonctionnalités et le design de l'admin ») ======
   DIRECTION § 3.3 à 3.9 et § 5.7 ; le modèle : la liste des Réservations (lot E1L). La barre de vue colle sous l'en-tête, les
   puces et leur bilan suivent, la ligne des doublons, puis le tableau standard dans une carte (ou la liste de deux lignes
   sur un écran étroit : data-vue, posé par le JS). La fiche 360° et la fiche d'entreprise cliente vivent dans le panneau :
   en-tête d'objet, gestes, alertes, prochaine course, bande, onglets collants, sections à filets. Jetons seulement. */

/* ---- la rangée Clients · Entreprises clientes · Campagnes · Analyses (l'entrée est sansBarre : cette rangée tient lieu de #hubBar) ---- */
.cl-n1{display:flex; align-items:center; gap:var(--sp-3); margin:0 0 var(--sp-3)}
.cl-n1 .ds-onglets{flex:1; min-width:0}
.cl-n1>.ds-btn.on{background:var(--surface-piste); color:var(--ink)}
/* la barre de vue colle sur toute la hauteur de la liste (son conteneur ne compte pas) ; le bandeau « Filtré sur… » laisse la
   place aux puces (§ 3.2, règle 4) ; les vues qui ne tiennent pas défilent, leur bout s'efface */
.cl-barre{display:contents}
#lienBar[data-ecran="clients"],#lienBar[data-ecran="entclients"]{display:none}   /* V2.0 (vitesse) : plus de html:has() */
#s-clients .ds-vue .vues,#s-entclients .ds-vue .vues{padding-right:var(--sp-6); -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
#crmPuces .ds-filtres,#crmEntPuces .ds-filtres{padding:var(--sp-15) 0}
/* les doublons : une ligne (dsFile), pas une carte */
.cl-doublons{margin:0 0 var(--sp-3); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--el-1)}
.cl-doublons .ds-file li{padding:var(--sp-2) var(--sp-4)}

/* ---- le tableau : une carte, des colonnes posées, deux lignes par cellule au plus ---- */
.cl-carte{margin-bottom:var(--sp-4)}
.cl-t{--vue-dessus:var(--vue-h); --th-h:32px}
.cl-t thead th:first-child{border-top-left-radius:var(--r-card)}
.cl-t thead th:last-child{border-top-right-radius:var(--r-card)}
.cl-t th.selc{width:44px}
.cl-t th[data-col="contact"]{width:160px}
.cl-t th[data-col="pays"]{width:96px}
.cl-t th[data-col="courses"]{width:84px}
.cl-t th[data-col="ca"]{width:88px}
.cl-t th[data-col="marge"]{width:100px}
.cl-t th[data-col="statut"]{width:148px}
.cl-t th[data-col="quand"]{width:160px}
.cl-t th[data-col="canaux"]{width:164px}
.cl-t th[data-col="panier"]{width:84px}
.cl-t th[data-col="score"]{width:80px}
.cl-t th[data-col="etiquettes"]{width:160px}
.cl-t th[data-col="gestes"]{width:164px}   /* cinq gestes de 28 px (au doigt : la colonne reste) */
.cl-et th[data-col="gestes"]{width:132px}
.cl-t tr.ouverte .gestes .ds-groupe-btn{opacity:1}
/* trop de colonnes pour la largeur (youcef en a coché beaucoup, la fiche est ouverte à côté) : la carte défile en largeur, ses
   en-têtes ne collent plus (crmLargeurMaj) */
.cl-carte.defile{overflow-x:auto; overscroll-behavior-x:contain}
.cl-carte.defile .cl-t thead th{position:static}
.cl-t :is(th,td).selc{padding:0; text-align:center}
.cl-t .selc input{width:16px; height:16px; margin:0; accent-color:var(--accent); cursor:pointer; vertical-align:middle}
html[data-theme="dark"] :is(.cl-t .selc,.cl-li .ck) input{color-scheme:dark}
.cl-t td{line-height:1.3}
.cl-t tbody tr.sel td{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.cl-t .sous{display:block; margin-top:var(--sp-05); font-size:var(--fs-12); line-height:1.25; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cl-t .sous a{color:inherit; text-decoration:none}
.cl-t .sous a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:2px}
/* la cellule Client : avatar, mention, marques ; dessous le segment, l'entreprise, la langue */
.cl-cli{display:flex; align-items:center; gap:var(--sp-2); min-width:0}
.cl-cli-t{display:flex; flex-direction:column; min-width:0; flex:1}
.cl-cli-t .sous{margin-top:1px}
.cl-nom{display:flex; align-items:center; gap:var(--sp-1); min-width:0; overflow:hidden}
.cl-nom .ds-mention{min-width:56px; flex:0 1 auto}
.cl-nom .ds-mention .nom{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cl-nom .ds-tag{flex:0 1 auto; min-width:0; overflow:hidden}
.cl-nom .ds-tag .svgi{flex:none}
.cl-tag-alerte{background:var(--alerte-doux); color:var(--texte-alerte)}
.cl-tag-alerte .svgi{color:inherit}
.cl-tag-danger{background:var(--danger-doux); color:var(--texte-danger)}
.cl-tag-danger .svgi{color:inherit}
.cl-tag-stop{background:var(--surface-piste); color:var(--muted)}
.cl-tag-ok{background:var(--ok-doux); color:var(--texte-ok)}
.cl-tel{color:var(--ink); text-decoration:none; font-variant-numeric:tabular-nums}
.cl-tel:hover{text-decoration:underline; text-underline-offset:2px}
.cl-pays b{font-weight:600; letter-spacing:.02em; color:var(--ink)}
.cl-cash{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.cl-score b{font-weight:600; color:var(--ink)}
.cl-score small{margin-left:2px; font-size:var(--fs-12); color:var(--muted)}
/* « Dernière / prochaine » : la prochaine en avant (verte), la dernière dessous */
.cl-q{display:block; line-height:1.25; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis}
.cl-q b{font-weight:600; color:var(--ink)}
.cl-q small{margin-left:var(--sp-1); font-size:var(--fs-12); color:var(--muted)}
.cl-q.sous{margin-top:var(--sp-05); font-size:var(--fs-12); color:var(--muted)}
.cl-avenir b{color:var(--texte-accent)}
.cl-canaux{display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1)}
.cl-t td.gestes{padding-left:0; padding-right:var(--sp-2)}
/* à la souris (la même règle que Réservations) : les cases n'apparaissent qu'au survol tant que rien n'est coché, et les gestes
   flottent au bout de la ligne survolée (plus de colonne vide : la place revient au nom du client) */
@media (hover:hover){
  .cl-t:not(:has(tbody tr.sel)) tbody tr:not(:hover):not(:focus-within) td.selc input{opacity:0}
  .cl-t:not(:has(tbody tr.sel)) thead:not(:hover) th.selc input:not(:checked){opacity:0}
  .cl-t .selc input{transition:opacity var(--t-1) var(--ease)}
  .cl-t th[data-col="gestes"]{width:var(--sp-2); padding:0}
  .cl-t td.gestes{position:relative; padding:0; overflow:visible}
  .cl-t td.gestes .ds-groupe-btn{position:absolute; top:50%; right:var(--sp-2); z-index:var(--z-dessus); padding:var(--sp-05); border-radius:var(--r-md);
    background:var(--surface); box-shadow:var(--el-2); transform:translateY(-50%)}
  .cl-t tr:not(:hover):not(:focus-within):not(.ouverte) td.gestes .ds-groupe-btn{pointer-events:none}
}
/* pagination et légende */
.cl-pages{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3); padding:var(--sp-2) 0 0; font-size:var(--fs-13)}
.cl-pages-b{display:flex; gap:var(--sp-2)}
.cl-legende{margin:var(--sp-2) 0 var(--sp-5); font-size:var(--fs-12); line-height:1.45; color:var(--muted)}
/* la barre d'actions en lot (§ 3.6) : la même que Réservations — nuit, le geste plein en vert */
.cl-selbar{position:fixed; left:50%; bottom:calc(var(--sp-5) + var(--bas-colle)); z-index:var(--z-barre-haut); display:flex; align-items:center; gap:var(--sp-2); max-width:calc(100vw - var(--sp-6));
  padding:var(--sp-15) var(--sp-15) var(--sp-15) var(--sp-4); border-radius:var(--r-md); background:var(--nuit); color:var(--on-couleur); box-shadow:var(--el-4); transform:translateX(-50%)}
.cl-selbar[hidden]{display:none}
html[data-theme="dark"] .cl-selbar{background:var(--nuit-3)}
.cl-selbar .n{font-size:var(--fs-13); color:var(--side-muted); white-space:nowrap}
.cl-selbar .n b{color:var(--on-couleur); font-weight:600}
.cl-selbar .ds-btn{background:var(--side-on); color:var(--on-couleur); box-shadow:none}
.cl-selbar .ds-btn:hover{background:var(--side-line)}
.cl-selbar .ds-btn.primaire{background:var(--btn); color:var(--btn-ink)}
.cl-selbar .ds-btn.primaire:hover{background:var(--accent-hover)}
.cl-selbar .ds-btn.fantome{background:none; color:var(--side-muted)}
.cl-selbar .ds-btn.fantome:hover{background:var(--side-on); color:var(--on-couleur)}
@media (max-width:1040px){ .cl-selbar{bottom:calc(var(--sp-2) + var(--bas-colle))} }
/* la place manque (un portable) : les canaux passent, puis le pays */
@media (max-width:1279px){ #s-clients .cl-t :is([data-col="canaux"],[data-c="canaux"]){display:none} }
@media (max-width:1180px){ #s-clients .cl-t :is([data-col="pays"],[data-c="pays"]){display:none} }
/* la fiche ouverte à côté (panneau ancré) : les colonnes courtes — client, courses, CA, dernière / prochaine, gestes ; l'en-tête
   de page resserré garde son « + » (son nom reste lu) */
@media (min-width:1280px){
  html.pn-on.pn-ancre #s-clients .cl-t :is(th[data-col],td[data-c]):not([data-col="sel"],[data-c="sel"],[data-col="client"],[data-c="client"],[data-col="courses"],[data-c="courses"],[data-col="ca"],[data-c="ca"],[data-col="quand"],[data-c="quand"],[data-col="gestes"],[data-c="gestes"]){display:none}
  html.pn-on.pn-ancre #s-entclients .cl-et :is(th[data-col],td[data-c]):not([data-col="client"],[data-c="client"],[data-col="statut"],[data-c="statut"],[data-col="courses"],[data-c="courses"],[data-col="ca"],[data-c="ca"],[data-col="gestes"],[data-c="gestes"]){display:none}
  html.pn-on.pn-ancre #s-clients .cl-t th[data-col="courses"]{width:72px}
  html.pn-on.pn-ancre #s-clients .cl-t th[data-col="quand"]{width:150px}
  html.pn-on.pn-ancre #s-entclients .cl-et th[data-col="statut"]{width:120px}
  /* l'en-tête de page, resserré à côté de la fiche : les boutons gardent leur icône (leur nom reste lu), le résumé a sa ligne */
  html.pn-on.pn-ancre #topbar[data-ecran="clients"] #pageActions .ds-btn,html.pn-on.pn-ancre #topbar[data-ecran="entclients"] #pageActions .ds-btn{width:32px; padding:0}
  html.pn-on.pn-ancre #topbar[data-ecran="clients"] #pageActions .ds-btn>:is(span,kbd):not(.svgi),html.pn-on.pn-ancre #topbar[data-ecran="entclients"] #pageActions .ds-btn>:is(span,kbd):not(.svgi){position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
}
/* au doigt (une tablette, la fiche à côté) : la colonne des gestes reste, resserrée à Appeler, WhatsApp et « … » */
@media (min-width:1280px) and (hover:none){
  html.pn-on.pn-ancre #s-clients .cl-t th[data-col="gestes"]{width:100px}
  html.pn-on.pn-ancre #s-clients .cl-t td.gestes :is([data-crmecrire],[data-crmresa]){display:none}
  html.pn-on.pn-ancre #s-entclients .cl-et th[data-col="gestes"]{width:100px}
  html.pn-on.pn-ancre #s-entclients .cl-et td.gestes a[href^="mailto:"]{display:none}
}
@media (min-width:1280px) and (max-width:1535px){
  html.pn-on.pn-ancre #s-clients .cl-t :is([data-col="ca"],[data-c="ca"]){display:none}
}

/* ---- le téléphone (et tout écran étroit) : un client = deux lignes (§ 3.14) ---- */
.cl-li-groupe{margin:0 0 var(--sp-2); background:var(--surface); border-radius:var(--r-card); box-shadow:var(--el-1); overflow:hidden}
.cl-li{display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; column-gap:var(--sp-3); min-height:64px; padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); cursor:pointer; -webkit-tap-highlight-color:transparent}
.cl-li+.cl-li{border-top:1px solid var(--border-doux)}
.cl-li:has(>.ck){grid-template-columns:28px 40px minmax(0,1fr) auto; padding-left:var(--sp-2)}
.cl-li:active{background:var(--surface-douce)}
.cl-li.sel{background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.cl-li.ouverte{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
.cl-li .ck{position:relative; width:28px; height:28px; margin:0; display:grid; place-items:center}
.cl-li .ck::after{content:''; position:absolute; inset:-8px -6px}
.cl-li .ck input{width:20px; height:20px; margin:0; accent-color:var(--accent)}
.cl-li-c{display:flex; flex-direction:column; gap:var(--sp-05); min-width:0}
.cl-li-t{display:flex; align-items:center; gap:var(--sp-1); min-width:0; font-size:var(--fs-14); font-weight:600; color:var(--ink)}
.cl-li-n{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cl-li-t :is(.ds-tag,.ds-statut){flex:none}
.cl-li-s{font-size:var(--fs-13); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cl-li-a{display:flex; flex-direction:column; align-items:flex-end; gap:var(--sp-05)}
.cl-li-q{display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; font-variant-numeric:tabular-nums}
.cl-li-q b{font-size:var(--fs-13); font-weight:600; color:var(--ink)}
.cl-li-q small{font-size:var(--fs-12); color:var(--muted)}
.cl-li-q.cl-avenir b{color:var(--texte-accent)}
@media (pointer:coarse){
  .cl-li-a .ds-btn{position:relative}
  .cl-li-a .ds-btn::after{content:''; position:absolute; inset:-8px -4px}
}
@media (max-width:1040px){
  .cl-n1{margin-bottom:var(--sp-2)}
  #crmPuces .ds-filtres,#crmEntPuces .ds-filtres{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--sp-3)); padding:var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
    -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
  #crmPuces .ds-filtres::-webkit-scrollbar,#crmEntPuces .ds-filtres::-webkit-scrollbar{display:none}
  #crmPuces .ds-filtres>*,#crmEntPuces .ds-filtres>*{flex:none}
  #crmPuces .bilan,#crmEntPuces .bilan{margin-left:var(--sp-2)}
  #crmPuces :is(.ds-puce,.ds-puce.ajout,.bk-raz),#crmEntPuces .ds-puce{height:32px; min-height:0}
  #crmPuces .ds-puce button,#crmEntPuces .ds-puce button{min-height:0}
  #crmPuces .ds-puce .x{width:28px; height:28px}
  #s-clients .ds-vue .ds-champ:not(:focus-within):not(:has(input:not(:placeholder-shown))) .ds-kbd,#s-entclients .ds-vue .ds-champ:not(:focus-within):not(:has(input:not(:placeholder-shown))) .ds-kbd{display:none}
}

/* ---- la fiche 360° et la fiche d'entreprise cliente (panneau, § 3.7) ---- */
#panneauCorps .modal .box:has(>#genBody>.cl-fiche){padding:0}
.cl-fiche{display:flex; flex-direction:column; min-width:0}
.cl-tete{display:grid; grid-template-columns:56px minmax(0,1fr); gap:var(--sp-3) var(--sp-4); align-items:start; padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.cl-tete-t{min-width:0}
.cl-tete-nom{margin:0; font-size:var(--fs-32); font-weight:600; line-height:var(--lh-titre); letter-spacing:-.02em; color:var(--ink); overflow-wrap:anywhere}
.cl-tete-tags{display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-top:var(--sp-15)}
.cl-tete-meta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-15); margin-top:var(--sp-2); font-size:var(--fs-13); color:var(--muted)}
.cl-tete-meta>span{display:inline-flex; align-items:center; gap:var(--sp-05); min-width:0}
.cl-tete-meta .svgi{width:14px; height:14px; flex:none}
.cl-tete-gestes{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.cl-ment{padding:0; border:0; background:none; font:inherit; cursor:pointer; text-align:left}
.cl-alertes{display:grid; gap:var(--sp-2); padding:0 var(--sp-5) var(--sp-4)}
.cl-geste-l{display:block; margin-top:var(--sp-1)}
.cl-dbl-r{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); margin-top:var(--sp-2)}
.cl-dbl-r>span{min-width:0}
.cl-prochaine{display:flex; align-items:flex-start; gap:var(--sp-2); margin:0 var(--sp-5) var(--sp-4); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--accent-soft); font-size:var(--fs-13); line-height:1.45}
.cl-prochaine>.svgi{width:16px; height:16px; flex:none; margin-top:2px; color:var(--texte-accent)}
.cl-prochaine>span{min-width:0}
.cl-prochaine b{margin-right:var(--sp-1); font-weight:600; color:var(--ink)}
.cl-prochaine .ds-sous{display:block}
.cl-fiche .ds-bande{border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.cl-onglets{position:sticky; top:0; z-index:var(--z-collant); padding:0 var(--sp-5); background:var(--elevated)}
.cl-onglets .ds-onglets{gap:var(--sp-3); padding-right:var(--sp-5); -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-5)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-5)),transparent)}
.cl-fiche .ds-bande .ds-chiffre .l{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cl-fiche .ds-bande .ds-chiffre .v{font-size:var(--fs-18); white-space:nowrap}
.cl-fiche .ds-bande>*{padding:var(--sp-3) var(--sp-3)}
.cl-corps{min-width:0}
.cl-fiche .ds-section:first-child{border-top:0}
.cl-fiche .ds-tableau th{position:static}
.cl-fiche .ds-dl dd{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1)}
.cl-vide{margin:0; font-size:var(--fs-13); color:var(--muted)}
.cl-aide{margin:var(--sp-2) 0 0; font-size:var(--fs-12); line-height:1.4; color:var(--muted)}
.cl-prefs{display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-bottom:var(--sp-3)}
.cl-copier{margin-left:var(--sp-1); font-size:var(--fs-12)}
.cl-lies{list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2)}
.cl-lie{display:flex; align-items:center; gap:var(--sp-2); min-height:28px; font-size:var(--fs-14)}
.cl-lie>.svgi{width:16px; height:16px; flex:none; color:var(--muted)}
.cl-lie-m{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1); min-width:0}
.cl-lie-d{margin-left:auto; flex:none; font-size:var(--fs-13); color:var(--muted); white-space:nowrap}
.cl-alerte{color:var(--texte-alerte); font-weight:600}
/* le fil d'activité */
.cl-fil{list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3)}
.cl-ev{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:var(--sp-2); align-items:start}
.cl-ev-i{width:28px; height:28px; border-radius:var(--r-rond); display:grid; place-items:center; background:var(--surface-piste); color:var(--muted)}
.cl-ev-i .svgi{width:14px; height:14px}
.cl-ev-t{min-width:0; font-size:var(--fs-14); line-height:1.35}
.cl-ev-t b{font-weight:600; color:var(--ink)}
.cl-ev-t .sous{display:block; font-size:var(--fs-13); color:var(--muted)}
.cl-ev-q{display:flex; flex-direction:column; align-items:flex-end; gap:var(--sp-05); font-size:var(--fs-12); color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
/* les courses, devis et factures d'une fiche : un tableau serré */
.cl-ct{--ligne-h:48px}
.cl-ct th.c-quand{width:78px}
.cl-ct th.c-prix{width:78px}
.cl-ct th.c-statut{width:112px}
.cl-ct th.c-g{width:40px}
.cl-ct td{line-height:1.3}
.cl-ct td.heure b{font-size:var(--fs-14)}
.cl-ct .cl-ct-t{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500}
.cl-ct .sous{display:block; font-size:var(--fs-12); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* la conversation, les listes, les notes, les contacts */
.cl-mss,.cl-liste,.cl-notes,.cl-contacts{list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2)}
.cl-ms{padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--surface-douce); font-size:var(--fs-13); line-height:1.45}
.cl-ms.entrant{background:var(--accent-soft)}
.cl-ms-h{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); font-size:var(--fs-12); color:var(--muted)}
.cl-ms-h b{font-weight:600; color:var(--ink)}
.cl-ms-s{display:block; margin-top:var(--sp-05); font-weight:600; color:var(--ink)}
.cl-ms-t{display:block; margin-top:var(--sp-05); white-space:pre-line; color:var(--ink-2)}
.cl-liste li{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); font-size:var(--fs-14); color:var(--ink)}
.cl-liste li>span{min-width:0}
.cl-liste li b{font-weight:600}
.cl-liste li small{display:block; font-size:var(--fs-12); color:var(--muted)}
.cl-inc{flex-direction:column; align-items:flex-start; padding:var(--sp-2) var(--sp-3); margin:0 calc(-1 * var(--sp-3)); border-radius:var(--r-sm); cursor:pointer}
.cl-inc:hover{background:var(--surface-douce)}
.cl-note-form textarea{width:100%; box-sizing:border-box; min-height:72px; padding:var(--sp-2) var(--sp-3); border:0; border-radius:var(--r-sm); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-strong); font:inherit; font-size:var(--fs-14); color:var(--ink); resize:vertical}
.cl-note-form textarea:focus-visible{outline:0; box-shadow:inset 0 0 0 1px var(--accent), var(--ring)}
.cl-note-go{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-top:var(--sp-2)}
.cl-note{padding:var(--sp-3); border-radius:var(--r-md); background:var(--surface-douce)}
.cl-note.epinglee{background:var(--or-doux)}
.cl-note-h{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); font-size:var(--fs-13); color:var(--muted)}
.cl-note-h b{font-weight:600; color:var(--ink)}
.cl-note-acts{margin-left:auto; display:inline-flex; gap:var(--sp-1)}
.cl-note-t{display:block; margin:var(--sp-1) 0 0; white-space:pre-line; font-size:var(--fs-14); line-height:1.45; color:var(--ink)}
.cl-contact{display:flex; align-items:center; gap:var(--sp-3)}
.cl-contact-t{flex:1; min-width:0; font-size:var(--fs-14)}
.cl-contact-t b{font-weight:600; color:var(--ink); margin-right:var(--sp-1)}
.cl-contact-t .sous{display:block; font-size:var(--fs-13); color:var(--muted); overflow:hidden; text-overflow:ellipsis}
.cl-mois{list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2)}
.cl-mois li{display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:var(--sp-3); font-size:var(--fs-13)}
.cl-mois-n{color:var(--muted)}
.cl-mois-v{color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
/* le formulaire (Modifier, Nouvel incident) : une colonne dans le panneau (§ 3.8) */
.cl-fiche .ent-form2,.cl-fiche .form-row{grid-template-columns:minmax(0,1fr)}
.cl-form .field{margin-bottom:var(--sp-3)}
/* les statuts d'une entreprise cliente : point + mot (les teintes des statuts) */
.cl-st-active{--st-c:var(--texte-ok); --st-p:var(--point-ok); --st-f:var(--ok-doux)}
.cl-st-a_completer{--st-c:var(--texte-alerte); --st-p:var(--point-alerte); --st-f:var(--alerte-doux)}
.cl-st-suspendue{--st-c:var(--muted); --st-p:var(--point-neutre); --st-f:var(--surface-piste)}
/* la barre du pouce (téléphone) : Réserver · Appeler · WhatsApp · « … » ; l'en-tête se resserre */
.cl-pouce{display:none}
@media (max-width:760px){
  .cl-pouce{position:sticky; bottom:0; z-index:var(--z-collant); display:flex; gap:var(--sp-2); padding:var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom,0px)); background:var(--elevated); border-top:1px solid var(--border)}
  .cl-pouce .ds-btn.primaire{flex:1}
  .cl-tete{grid-template-columns:48px minmax(0,1fr); padding:var(--sp-4) var(--sp-4) var(--sp-3)}
  .cl-tete .ds-avatar.xl{width:48px; height:48px; font-size:var(--fs-18)}
  .cl-tete-nom{font-size:var(--fs-28)}
  .cl-fiche .cl-tete-gestes{display:none}
  .cl-alertes,.cl-prochaine,.cl-onglets{padding-left:var(--sp-4); padding-right:var(--sp-4)}
  .cl-prochaine{margin-left:var(--sp-4); margin-right:var(--sp-4); padding:var(--sp-2) var(--sp-3)}
  .cl-fiche .ds-section{padding:var(--sp-4)}
}

/* ====== LOT O4 — VÉHICULES ET CANAUX : LES LISTES ET LES FICHES DANS L'ANATOMIE « ITINÉRAIRE » (07/10/2026 : « améliore les fonctionnalités et le design de l'admin ») ======
   DIRECTION § 3.3 à 3.9, § 5.15 ; les modèles : Réservations (lot E1L) et Flottes (lot O2), dont les classes .ent-* (tableau, gestes
   flottants, fiche du panneau, téléphone en deux lignes) sont reprises telles quelles. Ici, ce qui est propre aux deux écrans : les
   largeurs de leurs colonnes, ce qui se cache quand la place manque ou que la fiche est à côté, la plaque, l'icône d'un véhicule, le
   logo d'un canal, le relevé, la bande et l'en-tête de leurs fiches. Des jetons seulement ; le sombre suit les jetons. */

/* ---- Les deux écrans : la barre de vue (les vues défilent sous un fondu), les puces, les zones vides ---- */
:is(#s-vehicles,#s-partenaires) .ds-vue .vues{padding-right:var(--sp-6); -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
:is(#vhPuces,#cnPuces) .ds-filtres{padding:var(--sp-15) 0}
#vhPuces:empty,#vhPistes:empty,#vhErreur:empty,#cnPuces:empty,#cnErreur:empty,#cnApporteurs:empty{display:none}
#vhPistes .ds-file{margin:var(--sp-1) 0 var(--sp-3)}
:is(#vhErreur,#cnErreur) .chf-alerte{margin:0 0 var(--sp-3)}
:is(.vh-t,.cn-t) td .sous{margin-top:var(--sp-05); font-size:var(--fs-12); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---- Véhicules : le tableau — la plaque d'abord (220 px au moins), une colonne par information, deux lignes au plus ---- */
.vh-t th[data-col="famille"]{width:120px}
.vh-t th[data-col="flotte"]{width:132px}
.vh-t th[data-col="chauffeur"]{width:148px}
.vh-t th[data-col="courses"]{width:128px}
.vh-t th[data-col="documents"]{width:196px}
.vh-t th[data-col="etat"]{width:140px}
.vh-t td[data-c="documents"] .ds-lien,.vh-t td[data-c="chauffeur"] .ds-lien{font-size:var(--fs-13)}
.vh-carte-t.serre .vh-t :is([data-col="famille"],[data-c="famille"]){display:none}
.vh-carte-t.serre2 .vh-t :is([data-col="flotte"],[data-c="flotte"]){display:none}
.vh-carte-t.serre3 .vh-t :is([data-col="courses"],[data-c="courses"]){display:none}
.vh-carte-t.serre4 .vh-t :is([data-col="documents"],[data-c="documents"]){display:none}
/* la plaque : une mention en chiffres de plaque, jamais coupée ; dessous le modèle s'abrège, « GoodJourney » reste entier */
.vh-plaque{flex:none; font-family:var(--font-code); font-weight:600; letter-spacing:.02em}
.vh-plaque .ds-mention{max-width:none; font-weight:600}
.vh-plaque .ds-mention .nom{overflow:visible}
.vh-nom .ent-nom-l{overflow:hidden}
.vh-nom .ent-nom-l .ds-tag{min-width:0; overflow:hidden}
.ds-tag.vh-double{background:var(--danger-doux); color:var(--texte-danger)}
/* l'icône d'un véhicule : un carré neutre (la couleur de la ligne est à l'état) */
.vh-ico.t32{width:32px; height:32px; border-radius:var(--r-sm)}
.vh-ico.t32 svg{width:16px; height:16px}
.vh-ico.t40{width:40px; height:40px; border-radius:var(--r-sm)}
.vh-ico.t56{width:56px; height:56px; border-radius:var(--r-md)}
.vh-ico.t56 svg{width:26px; height:26px}

/* ---- Véhicules : la fiche ouverte à côté (panneau ancré, ≥ 1280 px) — Véhicule, Courses, Documents, État, « … » ---- */
@media (min-width:1280px){
  html.pn-on.pn-ancre #s-vehicles .vh-t :is([data-col="famille"],[data-c="famille"],[data-col="flotte"],[data-c="flotte"],[data-col="chauffeur"],[data-c="chauffeur"]){display:none}
  html.pn-on.pn-ancre #s-vehicles .vh-t td.gestes .ds-btn:not([data-vhplusl]){display:none}
  html.pn-on.pn-ancre #topbar:is([data-ecran="vehicles"],[data-ecran="partenaires"]) #pageActions .ds-btn.primaire{width:32px; padding:0}
  html.pn-on.pn-ancre #topbar:is([data-ecran="vehicles"],[data-ecran="partenaires"]) #pageActions .ds-btn.primaire>:is(span,kbd):not(.svgi){position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
}
@media (min-width:1280px) and (max-width:1439px){
  html.pn-on.pn-ancre #s-vehicles .vh-t :is([data-col="courses"],[data-c="courses"]){display:none}
}

/* ---- Véhicules : la fiche (le panneau de 520 px) ---- */
.vh-ft{align-items:start}
.vh-ft .vh-ico{align-self:start}
.vh-ft-n{font-family:var(--font-code); font-size:var(--fs-32); letter-spacing:.01em; line-height:1.1}
.vh-ligne{padding:0 var(--sp-5) var(--sp-3)}
.vh-ligne .vh-form,.vh-ligne .vh-reassigner{margin:0}
.vh-ligne>*+*{margin-top:var(--sp-2)}
:is(.vh-fiche,.cn-fiche) .ent-bande .ds-chiffre .v{white-space:nowrap}
/* une course d'une fiche (véhicule, canal) : l'heure, le trajet et son détail, le statut */
.vh-course{grid-template-columns:56px minmax(0,1fr) auto}
.vh-course.passee .chf-course-t,.vh-course.passee .chf-course-q b{color:var(--muted)}
.vh-course-m{display:flex; flex-direction:column; gap:1px; min-width:0}
.vh-course-m small{font-size:var(--fs-12); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
:is(.vh-fiche,.cn-fiche) .ent-corps .chf-courses,.vh-fiche .ent-corps .chf-docs{margin:0}
.vh-fiche .ent-liee .pill{flex:none}

/* ---- Canaux : le tableau — le canal d'abord (200 px au moins), le relevé assez large pour « 11 185 € dus · mois clos » ---- */
.cn-t th[data-col="organisation"]{width:150px}
.cn-t th[data-col="taux"]{width:160px}
.cn-t th[data-col="courses"]{width:84px}
.cn-t th[data-col="ca"]{width:96px}
.cn-t th[data-col="montant"]{width:104px}
.cn-t th[data-col="releve"]{width:196px}
.cn-t th[data-col="derniere"]{width:84px}
.cn-app-t th[data-col="creer"]{width:180px}
.cn-app-t td[data-c="creer"]{text-align:right}
.cn-carte-t.serre .cn-t :is([data-col="derniere"],[data-c="derniere"],[data-col="organisation"],[data-c="organisation"]){display:none}
.cn-carte-t.serre2 .cn-t :is([data-col="taux"],[data-c="taux"],[data-col="montant"],[data-c="montant"]){display:none}
.cn-carte-t.serre3 .cn-t :is([data-col="courses"],[data-c="courses"]){display:none}
.cn-carte-t.serre4 .cn-t :is([data-col="ca"],[data-c="ca"]){display:none}
/* les apporteurs suivent la liste : ce qu'elle cache, leur tableau le cache aussi */
#partMount:has(.cn-carte-t.serre2) .cn-app-t :is([data-col="taux"],[data-c="taux"],[data-col="montant"],[data-c="montant"]){display:none}
#partMount:has(.cn-carte-t.serre3) .cn-app-t :is([data-col="courses"],[data-c="courses"]){display:none}
#partMount:has(.cn-carte-t.serre4) .cn-app-t :is([data-col="ca"],[data-c="ca"]){display:none}
.cn-pct{font-weight:600; font-variant-numeric:tabular-nums}
.cn-proch{color:var(--texte-alerte)}
/* le relevé : ce qui est dû en ambre (un lien vers ses relevés), en rouge quand un versement a passé sa date */
.ds-lien.cn-du{font-weight:600; font-variant-numeric:tabular-nums; color:var(--texte-alerte)}
.ds-lien.cn-du.retard,.cn-retard{color:var(--texte-danger)}
/* les apporteurs sans canal : la même carte, sous la liste */
.cn-app{margin-top:var(--sp-4)}
.cn-app .ds-carte-h .droite{font-size:var(--fs-12); color:var(--muted)}
/* la prospection (onglet de la page) : ses rappels groupés, une carte par groupe, séparées */
#partMount>.card+.card{margin-top:var(--sp-3)}

/* ---- Canaux : la fiche (le panneau de 520 px) ---- */
.cn-ft{align-items:start}
.cn-ft>.plogo{align-self:start; border-radius:var(--r-md); font-size:var(--fs-20)}
.cn-fiche .ent-corps>.cn-clair{margin:var(--sp-4) var(--sp-5) 0}
.cn-fiche .cn-avance{padding:var(--sp-4) var(--sp-5) 0; margin:0}
.cn-fiche .cn-avance .sub{margin:0}
.cn-fiche .cn-avance .ds-onglets{gap:var(--sp-4); flex-wrap:wrap}
.cn-fiche .ds-section .cn-aide{margin:var(--sp-2) 0 0}
.cn-fiche .ds-section .tablewrap{margin:0 calc(-1 * var(--sp-2))}
/* les tableaux des onglets (relevés, commission, encaissements) tiennent dans les 520 px : le texte passe à la ligne, les montants non */
.cn-fiche .ent-corps table.dt :is(th,td){padding-left:var(--sp-2); padding-right:var(--sp-2)}
.cn-fiche .ent-corps table.dt td{white-space:normal}
.cn-fiche .ent-corps table.dt td.num,.cn-fiche .ent-corps table.dt td .pill{white-space:nowrap}

/* ---- Les deux écrans au téléphone (≤ 1040 px) — un objet, deux lignes ---- */
.vh-li .vh-pl{flex:none; font-family:var(--font-code); font-weight:600; color:var(--ink)}
.vh-li-m{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2)}
:is(.vh-li-pb,.cn-li-pb).danger{color:var(--texte-danger)}
:is(.vh-li-pb,.cn-li-pb).alerte{color:var(--texte-alerte)}
.cn-li>.plogo{flex:none}
/* le logo d'un canal la nuit : ses teintes de série s'éclaircissent (graphiques), l'initiale passe en encre sombre pour rester lisible */
html[data-theme="dark"] :is(#s-partenaires,.cn-fiche) span.plogo{color:var(--page)}
@media (max-width:1040px){
  :is(#vhPuces,#cnPuces) .ds-filtres{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--sp-3)); padding:var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
    -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
  :is(#vhPuces,#cnPuces) .ds-filtres::-webkit-scrollbar{display:none}
  :is(#vhPuces,#cnPuces) .ds-filtres>*{flex:none}
  :is(#vhPuces,#cnPuces) .bilan{margin-left:var(--sp-2)}
  :is(#vhPuces,#cnPuces) :is(.ds-puce,.ds-puce.ajout){height:32px; min-height:0}
  :is(#s-vehicles,#s-partenaires) .ds-vue .ds-champ:not(:focus-within):not(:has(input:not(:placeholder-shown))) .ds-kbd{display:none}
}
@media (max-width:760px){
  .vh-ft{grid-template-columns:48px minmax(0,1fr)}
  .vh-ico.t56{width:48px; height:48px}
  .vh-ft-n{font-size:var(--fs-26)}
  .vh-ligne{padding:0 var(--sp-4) var(--sp-3)}
  .cn-fiche .ent-corps>.cn-clair{margin:var(--sp-3) var(--sp-4) 0}
  .cn-fiche .cn-avance{padding:var(--sp-3) var(--sp-4) 0}
}

/* ====== LOT O5 — MESSAGES ET INCIDENTS : LA BOÎTE EN TROIS COLONNES ET LA FILE DE TRIAGE (07/10/2026 : « améliore les fonctionnalités et le design de l'admin ») ======
   DIRECTION § 3.2 à 3.10, § 5.15 ; les modèles : Intercom (les fils | la conversation | la fiche du correspondant) et Plain / Height
   (une file de triage, la fiche visible à côté). Messages : les onglets comptés, puis UNE boîte à filets à la hauteur de l'écran —
   la liste (recherche, vues en pastilles, puce Flotte, un fil = avatar, nom, rôle, extrait, heure ; le fil ouvert porte le liseré
   vert), le fil (son en-tête, les bulles, le composeur collé en bas), la fiche du correspondant ; de 761 à 1 279 px deux colonnes et
   la fiche derrière « i » ; au téléphone la liste, puis le fil en plein écran. Incidents : la barre de vue collante, les puces et
   leur bilan, le tableau standard (l'échéance d'abord, le retard dit en rouge et seulement par elle), ses deux lignes quand la place
   manque (fiche à côté, tablette, téléphone) ; la fiche dans le panneau : en-tête d'objet, bande, sections à filets, le fil des
   notes, la résolution. Le téléphone suit le seuil de la coque (ecranTelephone : 760 px). Des jetons seulement. */

/* ---- Messages : la rangée des onglets (comptés) ; « + » quand l'en-tête de page n'a pas ses actions (≤ 1 040 px) ---- */
.ms-n1{display:flex; align-items:center; gap:var(--sp-3); margin:0 0 var(--sp-4)}
.ms-n1 .ds-onglets{flex:1; min-width:0}
.ms-nouveau-tel{display:none; flex:none}

/* ---- la boîte : trois colonnes à filets, à la hauteur de l'écran (mesurée : --ms-dessus) ; chaque colonne défile seule ---- */
.ms-boite{--ms-fil-h:60px; display:grid; grid-template-columns:minmax(272px,320px) minmax(0,1fr) 300px; min-height:520px; overflow:hidden; height:calc(100dvh - var(--ms-dessus,240px) - var(--bas-colle) - var(--sp-5))}
.ms-boite:has(>.ms-carte:empty){grid-template-columns:minmax(272px,320px) minmax(0,1fr)}
.ms-boite>*{min-width:0; min-height:0}
.ms-liste,.ms-fil{display:flex; flex-direction:column; overflow:hidden}
.ms-fil,.ms-carte{border-left:1px solid var(--border)}
.ms-carte{overflow-y:auto; overscroll-behavior:contain; background:var(--surface)}
.ms-carte:empty{display:none}

/* ---- la liste : la recherche « / », les vues en pastilles (cinq vues dans 300 px), la puce Flotte et « Écrire à… » ---- */
.ms-liste-h{flex:none; display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3); border-bottom:1px solid var(--border)}
.ms-liste-h .ds-champ{width:100%}
.ms-filtres .ds-onglets{flex-wrap:wrap; gap:var(--sp-1); border-bottom:0; overflow:visible}
.ms-filtres .ds-onglets button{height:28px; padding:0 var(--sp-2); border-radius:var(--r-pilule); font-size:var(--fs-13); color:var(--ink-2); transition:background var(--t-1) var(--ease), color var(--t-1) var(--ease)}
.ms-filtres .ds-onglets button:hover{background:var(--surface-douce); color:var(--ink)}
.ms-filtres .ds-onglets button.on{background:var(--accent-soft); color:var(--texte-accent)}
.ms-filtres .ds-onglets button.on::after{display:none}
.ms-filtres .ds-onglets button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.ms-cibles{display:flex; align-items:center; gap:var(--sp-2); min-width:0}
.ms-cibles .ds-puce{min-width:0; flex:0 1 auto}
.ms-cibles>.ds-btn{margin-left:auto; flex:none}
.ms-convs{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain}
.ms-convs>.ds-sq{padding:var(--sp-3) var(--sp-4)}
.ms-convs>.ds-vide{padding:var(--sp-7) var(--sp-4)}
/* un fil : l'avatar, le nom et l'heure, le rôle, l'extrait (une ligne) ; non lu : en gras, l'heure verte, la pastille ; l'échec dit en rouge */
.ms-conv{display:grid; grid-template-columns:40px minmax(0,1fr); align-items:start; column-gap:var(--sp-3); width:100%; padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border:0; border-bottom:1px solid var(--border-doux); background:transparent; font:inherit; color:var(--ink); text-align:left; cursor:pointer; transition:background var(--t-1) var(--ease)}
.ms-conv:hover{background:var(--surface-douce)}
.ms-conv.on,.ms-conv.on:hover{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
.ms-conv:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.ms-convs>.ms-conv:last-child{border-bottom:0}
.ms-conv-t{display:flex; flex-direction:column; gap:var(--sp-05); min-width:0}
.ms-conv-n{display:flex; align-items:baseline; gap:var(--sp-2); min-width:0}
.ms-conv-n b{flex:1; min-width:0; font-size:var(--fs-14); font-weight:500; line-height:1.3; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ms-conv-n time{flex:none; font-size:var(--fs-12); color:var(--muted); font-variant-numeric:tabular-nums}
.ms-conv-r{font-size:var(--fs-12); line-height:1.3; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ms-conv-a{display:flex; align-items:center; gap:var(--sp-2); min-width:0; font-size:var(--fs-13); line-height:1.4; color:var(--ink-2)}
.ms-conv-x{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ms-conv.ms-nonlu .ms-conv-n b{font-weight:700}
.ms-conv.ms-nonlu .ms-conv-n time{color:var(--texte-accent); font-weight:600}
.ms-conv.ms-nonlu .ms-conv-a{color:var(--ink); font-weight:500}
.ms-conv-ko{display:inline-flex; align-items:center; gap:var(--sp-05); margin-right:var(--sp-05); color:var(--texte-danger); font-weight:600; vertical-align:-2px}
.ms-conv-ko .svgi{width:13px; height:13px}
.ms-pastille{flex:none; min-width:20px; height:20px; padding:0 var(--sp-15); border-radius:var(--r-pilule); background:var(--btn); color:var(--btn-ink);
  font-size:var(--fs-12); font-weight:600; line-height:20px; text-align:center; font-variant-numeric:tabular-nums}

/* ---- le fil : son en-tête (le correspondant, le canal qui le joint, les gestes), les bulles, le composeur ---- */
.ms-fil{background:var(--surface)}
.ms-fil-h{flex:none; display:flex; align-items:center; gap:var(--sp-2); height:var(--ms-fil-h); padding:0 var(--sp-3) 0 var(--sp-4); border-bottom:1px solid var(--border); min-width:0}
.ms-fil-qui{display:flex; flex-direction:column; justify-content:center; gap:var(--sp-05); flex:1; min-width:0}
.ms-fil-qui>.ds-mention{align-self:flex-start; font-size:var(--fs-15); font-weight:600}
.ms-fil-qui small{display:block; font-size:var(--fs-12); line-height:1.3; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ms-fil-qui small .ds-sep{margin:0 var(--sp-1)}
.ms-fil-titre{font-size:var(--fs-15); font-weight:600; line-height:1.3; color:var(--ink)}
.ms-fil-g{display:flex; align-items:center; gap:var(--sp-05); flex:none}
.ms-retour,.ms-infos-b{display:none; flex:none}
.ms-corps{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-4) var(--sp-5); background:var(--surface-douce)}
.ms-corps.ms-vide{justify-content:center}
.ms-corps>.ms-vide{margin:auto 0}
.ms-jour{display:flex; justify-content:center; margin:var(--sp-2) 0}
.ms-jour span{padding:var(--sp-05) var(--sp-2); border-radius:var(--r-pilule); background:var(--surface-piste); font-size:var(--fs-12); font-weight:500; color:var(--muted)}
/* une bulle : reçue à gauche (blanche), envoyée à droite (verte), automatique en pointillé ; l'échec en rouge et dit */
.ms-b{max-width:min(78%,560px); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-lg); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border);
  font-size:var(--fs-14); line-height:1.45; color:var(--ink); overflow-wrap:anywhere}
.ms-ent{align-self:flex-start; border-bottom-left-radius:var(--r-xs)}
.ms-sort{align-self:flex-end; background:var(--accent-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent); border-bottom-right-radius:var(--r-xs)}
.ms-b.ms-hist{background:var(--surface); box-shadow:none; border:1px dashed var(--border-strong)}
.ms-b.ms-echec{box-shadow:inset 0 0 0 1px var(--point-danger)}
.ms-b-g{margin-bottom:var(--sp-05); font-size:var(--fs-12); font-weight:600; color:var(--muted)}
.ms-b-s{font-weight:600}
.ms-b-x{white-space:pre-wrap}
.ms-b-m{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-05) var(--sp-1); margin-top:var(--sp-1); font-size:var(--fs-12); color:var(--muted)}
.ms-b-e{display:flex; align-items:flex-start; gap:var(--sp-1); margin-top:var(--sp-1); font-size:var(--fs-13); color:var(--texte-danger)}
.ms-b-e .svgi{flex:none; width:14px; height:14px; margin-top:var(--sp-05)}
.ms-canal{display:inline-flex; align-items:center; gap:var(--sp-05); white-space:nowrap}
.ms-canal .svgi{width:12px; height:12px}
.ms-ref{display:inline-flex; align-items:center; border-radius:var(--r-xs); color:var(--texte-accent); text-decoration:none}
.ms-ref:hover{text-decoration:underline; text-underline-offset:3px}
/* sans conversation ouverte : « À traiter » (les réponses à lire, les envois en échec), un canal à brancher */
.ms-corps.ms-atraiter{gap:0; padding:0; background:var(--surface)}
.ms-at-alerte{margin:var(--sp-3) var(--sp-4); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--alerte-doux)}
.ms-alerte{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); font-size:var(--fs-13); color:var(--texte-alerte)}
.ms-alerte .svgi{flex:none; width:16px; height:16px}
.ms-alerte .ds-lien{margin-left:auto}
/* nouveau message : « À », la recherche d'un destinataire */
.ms-corps.ms-nouveau{gap:var(--sp-3); background:var(--surface)}
.ms-nouveau .field{margin:0}
.ms-nouveau .ms-dests{margin-top:0}
.ms-nouveau .ms-dest>span.ds-avatar{display:inline-grid; flex:none}
.ms-nouveau .ms-dest>span.ds-tag{display:inline-flex; flex:none}
.ms-nouveau .ms-dest>span.ms-warn{display:inline; flex:none; font-size:var(--fs-13)}
/* le composeur, collé en bas : le canal (pastilles), Modèles, Variables, la course ; l'objet ; le message ; l'état et « Envoyer » */
.ms-composeur{flex:none; border-top:1px solid var(--border); background:var(--surface)}
.ms-comp{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4)}
.ms-opts{display:flex; flex-direction:column; gap:var(--sp-2)}
.ms-comp-l{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2)}
.ms-canaux{display:flex; flex-wrap:wrap; gap:var(--sp-1)}
.ms-canaux button{display:inline-flex; align-items:center; gap:var(--sp-1); height:28px; padding:0 var(--sp-2); border:0; border-radius:var(--r-pilule); background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border-strong); font:inherit; font-size:var(--fs-13); font-weight:500; color:var(--ink-2); white-space:nowrap; cursor:pointer}
.ms-canaux button:hover:not(:disabled){background:var(--surface-douce); color:var(--ink)}
.ms-canaux button.on{background:var(--accent-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent); color:var(--texte-accent); font-weight:600}
.ms-canaux button.ms-nb{color:var(--texte-alerte)}
.ms-canaux button:disabled{opacity:.45; cursor:not-allowed}
.ms-canaux button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.ms-canaux .svgi{width:14px; height:14px}
.ms-comp-l .sel{flex:0 1 auto; min-width:0; max-width:220px; height:28px; min-height:28px; padding-top:0; padding-bottom:0; font-size:var(--fs-13)}
.ms-sujet{width:100%; height:36px; padding:0 var(--sp-3); border:0; border-radius:var(--r-sm); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-strong);
  font:inherit; font-size:var(--fs-14); color:var(--ink)}
.ms-vars .gchip{height:26px; padding:0 var(--sp-2); gap:var(--sp-05); font-size:var(--fs-12); font-weight:500}   /* les variables en clair (V99.5) : plus de chasse fixe */
.ms-rapides{display:flex; flex-wrap:wrap; gap:var(--sp-1)}
.ms-rapide{max-width:100%; height:26px; padding:0 var(--sp-2); border:0; border-radius:var(--r-pilule); background:var(--surface-piste); font:inherit; font-size:var(--fs-12); font-weight:500;
  color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer}
.ms-rapide:hover{background:var(--accent-soft); color:var(--texte-accent)}
.ms-comp-x{display:flex; align-items:flex-end; gap:var(--sp-2)}
.ms-comp-x textarea{flex:1; min-width:0; min-height:72px; max-height:40vh; padding:var(--sp-2) var(--sp-3); border:0; border-radius:var(--r-md); background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border-strong); font:inherit; font-size:var(--fs-14); line-height:1.45; color:var(--ink); resize:vertical}
:is(.ms-sujet,.ms-comp-x textarea):focus{outline:none; box-shadow:inset 0 0 0 1px var(--accent), 0 0 0 3px var(--ring)}
.ms-comp-b{display:flex; align-items:center; gap:var(--sp-2); min-width:0}
.ms-comp-b .sub{min-width:0; font-size:var(--fs-12); color:var(--muted)}
.ms-comp-b .spacer{flex:1}
.ms-opt-b,.ms-env-m,.ms-apercu-m{display:none; flex:none}
.ms-apercu{margin-top:var(--sp-1); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--surface-douce); font-size:var(--fs-13)}

/* ---- la fiche du correspondant (à droite) : qui, ce qu'il fait, comment le joindre, ses courses proches ---- */
.ms-qui{display:flex; flex-direction:column}
.ms-qui>.ds-sq{padding:var(--sp-4)}
.ms-qui-t{display:grid; grid-template-columns:40px minmax(0,1fr); align-items:center; gap:var(--sp-3); padding:var(--sp-4)}
.ms-qui-n{min-width:0}
.ms-qui-n h3{margin:0; font-size:var(--fs-16); font-weight:600; line-height:var(--lh-titre); color:var(--ink); overflow-wrap:anywhere}
.ms-qui-n h3 .ds-mention{font-weight:600}
.ms-qui-r{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-05) var(--sp-1); margin-top:var(--sp-05); font-size:var(--fs-13); color:var(--muted)}
.ms-qui-r .ds-mention{font-weight:500}
.ms-qui-g{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.ms-qui .ds-section{padding:var(--sp-4)}
.ms-qui .ds-section>h3{margin-bottom:var(--sp-2)}
.ms-qui .ds-dl{grid-template-columns:88px minmax(0,1fr); gap:var(--sp-2) var(--sp-3); font-size:var(--fs-13)}
.ms-qui .ds-dl dd{min-width:0}
.ms-qui .ds-dl dd .sous{display:block; margin-top:var(--sp-05); font-size:var(--fs-12); color:var(--muted)}
.ms-qui :is(.ds-dl dd,.ms-courses) .ds-mention .nom{white-space:normal}
.ms-qui-p{margin:var(--sp-2) 0 0; font-size:var(--fs-13); line-height:1.5; color:var(--muted)}
.ms-qui-p:first-child{margin-top:0}
.ms-qui .ds-section .ms-qui-g{margin-top:var(--sp-3)}
.ms-coord{display:inline-flex; align-items:center; gap:var(--sp-05); max-width:100%; min-width:0}
.ms-coord a{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.ms-coord a:hover{color:var(--texte-accent)}
.ms-coord .ds-btn{flex:none}
@media (pointer:coarse){ .ms-coord .ds-btn{margin-top:calc(-1 * var(--sp-2)); margin-bottom:calc(-1 * var(--sp-2))} }   /* la cible garde 44 px, la ligne sa hauteur */
.ms-etat-c{display:inline-flex; align-items:center; gap:var(--sp-1); font-weight:500}
.ms-etat-c.ok{color:var(--texte-ok)}
.ms-etat-c.ko{color:var(--texte-alerte)}
.ms-etat-c .svgi{width:14px; height:14px}
.ms-courses{display:flex; flex-direction:column; gap:var(--sp-2); margin:0; padding:0; list-style:none}
.ms-courses li{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-05); min-width:0; font-size:var(--fs-13)}
.ms-courses-ref{font-size:var(--fs-12); color:var(--muted)}

/* ---- Messages, la place se resserre : 1 280 à 1 439 px, trois colonnes plus étroites ; jusqu'à 1 279 px, deux colonnes et la fiche derrière « i » ---- */
@media (max-width:1439px){
  .ms-boite{grid-template-columns:minmax(260px,288px) minmax(0,1fr) 264px}
  .ms-boite:has(>.ms-carte:empty){grid-template-columns:minmax(260px,288px) minmax(0,1fr)}
}
@media (max-width:1279px){
  .ms-boite,.ms-boite:has(>.ms-carte:empty){position:relative; grid-template-columns:minmax(248px,300px) minmax(0,1fr)}
  .ms-carte{display:none}
  .ms-infos-b{display:inline-flex}
  .ms-boite.ms-infos .ms-carte:not(:empty){display:block; position:absolute; top:var(--ms-fil-h); right:0; bottom:0; z-index:var(--z-dessus-2); width:min(320px,100%); box-shadow:var(--el-2)}
}
@media (max-width:1040px){
  .ms-nouveau-tel{display:inline-flex}
}

/* ---- Incidents : la barre de vue (colle sur toute la file), les puces et leur bilan ---- */
.inc-barre{display:contents}
#s-incidents .ds-vue .vues{padding-right:var(--sp-6); -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
#incPuces .ds-filtres{padding:var(--sp-15) 0}
#incPuces:empty{display:none}
.inc-ajout-tel{display:none}
.inc-err{margin-bottom:var(--sp-4)}

/* ---- la file : le tableau standard dans une carte — Échéance · Incident · Course · Ce qui s'est passé · Responsable · gestes ---- */
.inc-carte-t{margin-bottom:var(--sp-4)}
.inc-t{--vue-dessus:var(--vue-h); --th-h:32px}
.inc-t thead th:first-child{border-top-left-radius:var(--r-card)}
.inc-t thead th:last-child{border-top-right-radius:var(--r-card)}
.inc-t th[data-col="ech"]{width:184px}
.inc-t th[data-col="inc"]{width:212px}
.inc-t th[data-col="course"]{width:236px}
.inc-t th[data-col="resp"]{width:172px}
.inc-t th[data-col="signale"]{width:132px}
.inc-t th[data-col="gestes"]{width:156px}
.inc-t td{height:auto; padding-top:var(--sp-3); padding-bottom:var(--sp-3); line-height:1.35; vertical-align:top}
.inc-t td:is([data-c="quoi"],[data-c="ech"]){white-space:normal}
.inc-t td[data-c="ech"] .inc-sla{white-space:normal; align-items:flex-start}   /* « Pris en charge par Novalia » (une flotte) passe à la ligne */
.inc-t td[data-c="ech"] .inc-sla .svgi{margin-top:var(--sp-05)}
.inc-t td .sous{margin-top:var(--sp-05); font-size:var(--fs-12); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.inc-t tbody tr.inc-cur td{background:var(--surface-douce)}
.inc-t tbody tr.inc-cur td:first-child{box-shadow:inset 3px 0 0 var(--ink-2)}
.inc-t tr.inc-cur .gestes .ds-groupe-btn{opacity:1}
.inc-t tr:focus-visible{outline:0}
.inc-t tr:focus-visible td{background:var(--surface-douce)}
.inc-t td.gestes{padding-left:0; padding-right:var(--sp-2); vertical-align:middle; text-overflow:clip}
.inc-t .gestes .ds-groupe-btn{gap:var(--sp-05)}
/* à la souris, comme dans Réservations et Flottes : les gestes flottent au bout de la ligne survolée */
@media (hover:hover){
  .inc-t th[data-col="gestes"]{width:var(--sp-2); padding:0}
  .inc-t td.gestes{position:relative; padding:0; overflow:visible}
  .inc-t td.gestes .ds-groupe-btn{position:absolute; top:50%; right:var(--sp-2); z-index:var(--z-dessus); padding:var(--sp-05); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--el-2); transform:translateY(-50%)}
  .inc-t tr:not(:hover):not(:focus-within):not(.inc-cur) td.gestes .ds-groupe-btn{pointer-events:none}
}
/* l'échéance : « dans 35 min » (orange au dernier quart), « En retard de 3 j 12 h » (rouge : le seul signal du retard) */
.inc-sla{display:inline-flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-13); font-weight:500; color:var(--ink-2); white-space:nowrap}
.inc-sla .svgi{flex:none; width:14px; height:14px}
.inc-sla.warn{color:var(--texte-alerte)}
.inc-sla.bad{color:var(--texte-danger); font-weight:600}
.inc-sla.fini{color:var(--muted); font-weight:400}
/* l'incident : son n°, son type ; sa gravité, son statut (sauf ouvert), ses échanges */
.inc-id{display:flex; align-items:baseline; gap:var(--sp-15); min-width:0}
.inc-id>b{flex:none; font-weight:600; color:var(--ink)}
.inc-id-t{min-width:0; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.inc-t td .inc-id-s{display:flex; align-items:center; gap:var(--sp-15); margin-top:var(--sp-1)}
.inc-id-s>*{flex:none}
.inc-echanges{display:inline-flex; align-items:center; gap:var(--sp-05); font-size:var(--fs-12); color:var(--muted); font-variant-numeric:tabular-nums}
.inc-echanges .svgi{width:13px; height:13px}
.grav{display:inline-flex; align-items:center; height:20px; padding:0 var(--sp-15); border-radius:var(--r-tag); background:var(--surface-piste); color:var(--ink-2); font-size:var(--fs-12); font-weight:500; white-space:nowrap}
.grav.moyenne{background:var(--info-doux); color:var(--texte-info)}
.grav.haute{background:var(--alerte-doux); color:var(--texte-alerte)}
.grav.critique{background:var(--side-alerte); color:var(--on-couleur); font-weight:600}   /* J10 : critique = rouge plein (le rouge des pastilles du menu : blanc dessus 4,8:1, dans les deux thèmes) */
/* le statut d'un incident : ouvert (bleu, il attend), en cours (ambre), résolu (vert), clos (gris) — point et mot */
.inc-st-ouvert{--st-c:var(--texte-info); --st-p:var(--point-info); --st-f:var(--info-doux)}
.inc-st-en_cours{--st-c:var(--texte-alerte); --st-p:var(--point-alerte); --st-f:var(--alerte-doux)}
.inc-st-resolu{--st-c:var(--texte-ok); --st-p:var(--point-ok); --st-f:var(--ok-doux)}
.inc-st-clos{--st-c:var(--muted); --st-p:var(--point-neutre); --st-f:var(--surface-piste)}
.inc-st .ds-statut{font-size:var(--fs-12)}
/* la course (une mention), dessous la flotte et le chauffeur ; ce qui s'est passé sur deux lignes ; le responsable */
.inc-course{display:flex; min-width:0}
.inc-course .ds-mention{font-weight:500}
.inc-qui .ds-mention{font-weight:400}
.inc-qui .svgi{width:12px; height:12px; vertical-align:-2px; color:var(--muted)}
.inc-quoi{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:var(--fs-13); line-height:1.4; color:var(--ink-2); overflow-wrap:anywhere}
.inc-resp{display:inline-flex; align-items:center; gap:var(--sp-15); max-width:100%; min-width:0; font-size:var(--fs-13); color:var(--ink)}
.inc-resp>span:last-child{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.inc-plus{margin:var(--sp-3) 0 var(--sp-6); font-size:var(--fs-13); color:var(--muted)}

/* ---- deux lignes par incident (la fiche ouverte à côté, la tablette, le téléphone) : n°, type, gravité ; ce qui s'est passé ; l'échéance et qui ---- */
.inc-li-groupe{display:none; margin:0 0 var(--sp-4)}
.inc-li{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:var(--sp-3); min-height:64px; padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background var(--t-1) var(--ease)}
.inc-li+.inc-li{border-top:1px solid var(--border-doux)}
.inc-li:first-child{border-top-left-radius:var(--r-card); border-top-right-radius:var(--r-card)}
.inc-li:last-child{border-bottom-left-radius:var(--r-card); border-bottom-right-radius:var(--r-card)}
.inc-li:hover{background:var(--surface-douce)}
.inc-li.inc-cur{background:var(--surface-douce); box-shadow:inset 3px 0 0 var(--ink-2)}
.inc-li.ouverte{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
.inc-li:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.inc-li.passee :is(.inc-li-t,.inc-li-2){color:var(--muted)}
.inc-li-c{display:flex; flex-direction:column; gap:var(--sp-05); min-width:0}
.inc-li-1{display:flex; align-items:center; gap:var(--sp-15); min-width:0; font-size:var(--fs-14); line-height:1.3}
.inc-li-1>b.mono{flex:none; font-weight:600; color:var(--ink)}
.inc-li-1>:is(.grav,.inc-st){flex:none}
.inc-li-t{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:var(--ink)}
.inc-li-2{font-size:var(--fs-13); line-height:1.35; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.inc-li-d{display:flex; flex-direction:column; align-items:flex-end; gap:var(--sp-1)}
.inc-li-a{display:inline-flex; align-items:center; gap:var(--sp-1)}
.inc-li-a .ds-btn{position:relative}
@media (pointer:coarse){ .inc-li-a .ds-btn:not([aria-busy="true"])::after{content:''; position:absolute; inset:-8px -6px} }

/* ---- Incidents, la place se resserre : colonnes plus étroites ; sous 1 200 px, et la fiche ouverte à côté, les deux lignes ---- */
@media (max-width:1439px){
  .inc-t th[data-col="ech"]{width:164px}
  .inc-t th[data-col="inc"]{width:184px}
  .inc-t th[data-col="course"]{width:204px}
  .inc-t th[data-col="resp"]{width:152px}
}
@media (max-width:1199px){
  .inc-carte-t{display:none}
  .inc-li-groupe{display:block}
}
@media (min-width:1280px){
  html.pn-on.pn-ancre #s-incidents .inc-carte-t{display:none}
  html.pn-on.pn-ancre #s-incidents .inc-li-groupe{display:block}
  html.pn-on.pn-ancre #s-incidents .ds-vue .ds-champ{width:168px}
  /* l'en-tête de page, resserré à côté de la fiche : « Déclarer » garde son « + » (son nom reste lu) */
  html.pn-on.pn-ancre #topbar[data-ecran="incidents"] #pageActions .ds-btn.primaire{width:32px; padding:0}
  html.pn-on.pn-ancre #topbar[data-ecran="incidents"] #pageActions .ds-btn.primaire>:is(span,kbd):not(.svgi){position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  /* et son résumé garde la file (à traiter, en retard, sans responsable) : les deux mesures sur 30 jours reviennent avec la fiche fermée */
  html.pn-on.pn-ancre #topbar[data-ecran="incidents"] #pageResume :is(.ds-resume-lien[href*="per=30"],.ds-sep:has(+.ds-resume-lien[href*="per=30"])){display:none}
}
@media (max-width:1040px){
  .inc-ajout-tel{display:inline-flex}
  #incPuces .ds-filtres{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--sp-3)); padding:var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
    -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
  #incPuces .ds-filtres::-webkit-scrollbar{display:none}
  #incPuces .ds-filtres>*{flex:none}
  #incPuces .bilan{margin-left:var(--sp-2)}
  #s-incidents .ds-vue .ds-champ:not(:focus-within):not(:has(input:not(:placeholder-shown))) .ds-kbd{display:none}
}

/* ---- la fiche d'un incident (le panneau de 520 px) : l'en-tête d'objet, la bande, les sections à filets ---- */
#panneauCorps .modal.pn-fiche .box:has(>#genBody>.inc-fiche){padding:0}
.inc-fiche{display:flex; flex-direction:column; min-width:0}
.inc-fiche>.ds-sq{padding:var(--sp-5)}
.inc-fiche>.ds-vide{padding:var(--sp-8) var(--sp-5)}
.inc-ft{display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; column-gap:var(--sp-3); row-gap:var(--sp-3); padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.inc-ft-ic{display:grid; place-items:center; width:48px; height:48px; border-radius:var(--r-md); background:var(--surface-piste); color:var(--ink-2)}
.inc-ft-ic .svgi{width:24px; height:24px}
.inc-ft-ic.grav-moyenne{background:var(--info-doux); color:var(--texte-info)}
.inc-ft-ic.grav-haute{background:var(--alerte-doux); color:var(--texte-alerte)}
.inc-ft-ic.grav-critique{background:var(--danger-doux); color:var(--texte-danger)}
.inc-ft-t{min-width:0}
.inc-ft-n{margin:0; font-size:var(--fs-24); font-weight:600; letter-spacing:var(--approche-24); line-height:var(--lh-titre); color:var(--ink)}
.inc-ft-s{margin-top:var(--sp-05); font-size:var(--fs-14); color:var(--ink-2); overflow-wrap:anywhere}
.inc-ft-tags{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.inc-ft-g{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.inc-ft-g .ds-btn.primaire{margin-left:auto}
.inc-bande{border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.inc-bande .ds-bande>*{padding:var(--sp-3) var(--sp-4)}
.inc-bande .ds-bande>*+*::before{top:var(--sp-3); bottom:var(--sp-3)}
.inc-bande .ds-chiffre .v{display:block; font-size:var(--fs-18); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.inc-bande .ds-chiffre :is(.l,.s){white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.inc-bande-ko{color:var(--texte-danger)}
.inc-bande-m{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); border-top:1px solid var(--border-doux)}
.inc-bande-m>*{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-1); min-width:0; padding:var(--sp-3) var(--sp-4)}
.inc-bande-m>*+*::before{content:''; position:absolute; left:0; top:var(--sp-3); bottom:var(--sp-3); width:1px; background:var(--border)}
.inc-bande-m .l{font-size:var(--fs-13); font-weight:500; color:var(--muted)}
.inc-corps{display:block; padding-bottom:var(--sp-6)}
.inc-corps>.ds-section:first-child{border-top:0}
.inc-texte{margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:var(--fs-14); line-height:1.55; color:var(--ink)}
.inc-meta{margin:var(--sp-2) 0 0; font-size:var(--fs-13); line-height:1.45; color:var(--muted)}
.inc-vide-l{margin:0; font-size:var(--fs-13); color:var(--muted)}
/* le pilotage : le responsable (et « Prendre »), la gravité et son délai, le type */
.inc-pilote{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3)}
.inc-pilote>.field:has(#incAssigne){grid-column:1 / -1}
.inc-pilote .field{margin:0; min-width:0}
.inc-pilote select{width:100%; min-width:0}
/* la course en mini-billet */
.inc-billet{border-radius:var(--r-md); box-shadow:inset 0 0 0 1px var(--border)}
.inc-billet .ds-billet{padding:var(--sp-4)}
.inc-billet .ds-billet .quand{margin-top:var(--sp-2)}
.inc-billet .ds-billet .quand .h{font-size:var(--fs-28); letter-spacing:var(--approche-24)}
.inc-billet .ds-billet .codes{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); margin-top:var(--sp-3)}
.inc-billet .ds-billet .codes .c b{font-size:var(--fs-18)}
.inc-billet .ds-billet .codes .fleche .svgi{background:var(--elevated)}
.inc-billet .ds-billet .gestes{margin-top:var(--sp-3)}
/* le fil : les notes internes sur l'or (comme une note collée), les réponses visibles par la flotte en gris ; « @compte » en vert */
.inc-fil{display:flex; flex-direction:column; gap:var(--sp-2); margin:0 0 var(--sp-3); padding:0; list-style:none}
.inc-msg{padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--surface-douce)}
.inc-msg.interne{background:var(--or-doux)}
.inc-msg-t{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-15); font-size:var(--fs-12); color:var(--muted)}
.inc-msg-t b{font-size:var(--fs-13); font-weight:600; color:var(--ink)}
.inc-msg-c{margin-top:var(--sp-1); white-space:pre-wrap; overflow-wrap:anywhere; font-size:var(--fs-14); line-height:1.5; color:var(--ink)}
.inc-at{font-weight:600; color:var(--texte-accent)}
.inc-composer{display:flex; flex-direction:column; gap:var(--sp-2)}
.inc-com-zone{position:relative}
.inc-com-zone textarea{display:block; width:100%; min-height:84px; padding:var(--sp-2) var(--sp-3); border:0; border-radius:var(--r-md); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-strong);
  font:inherit; font-size:var(--fs-14); line-height:1.45; color:var(--ink); resize:vertical}
.inc-com-zone textarea:focus{outline:none; box-shadow:inset 0 0 0 1px var(--accent), 0 0 0 3px var(--ring)}
.inc-com-bas{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.inc-com-bas .spacer{flex:1}
.inc-kbd{font-size:var(--fs-12)}
@media (pointer:coarse){ .inc-kbd{display:none} }   /* au doigt, pas de raccourci clavier à montrer */
/* la résolution (typée, le montant dans la marge), « Liée à » */
.inc-resolu{display:flex; flex-direction:column; gap:var(--sp-2); font-size:var(--fs-14)}
.inc-resoudre{display:flex; flex-direction:column; gap:var(--sp-3)}
.inc-resoudre .field{margin:0}
.inc-resoudre .inc-actions{margin-top:0}
.inc-liee dd{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2)}
.inc-pouce{display:none}

/* ---- le sombre : les bulles reçues et les notes s'éclairent sur la surface (pas de trou plus sombre que le fond) ---- */
html[data-theme="dark"] .ms-corps{background:var(--surface)}
html[data-theme="dark"] :is(.ms-ent,.ms-b.ms-hist){background:var(--surface-piste)}
html[data-theme="dark"] :is(.ms-sujet,.ms-comp-x textarea,.inc-com-zone textarea){background:var(--surface-douce)}
html[data-theme="dark"] .inc-msg:not(.interne){background:var(--surface-piste)}

/* ---- le téléphone : la liste, puis le fil en plein écran (« ‹ Messages ») ; une file en deux lignes ; la fiche et son pouce ---- */
@media (max-width:760px){
  .ms-n1{margin-bottom:var(--sp-3)}
  .ms-n1 .ds-onglets{padding-right:var(--sp-6); -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
  .ms-boite,.ms-boite:has(>.ms-carte:empty){display:block; height:auto; min-height:0; overflow:visible}
  .ms-liste,.ms-convs{overflow:visible}
  .ms-fil{display:none; border-left:0}
  .ms-boite.ms-ouvert .ms-liste{display:none}
  .ms-boite.ms-ouvert .ms-fil{display:flex; position:fixed; top:var(--haut-barre); left:0; right:0; bottom:var(--bas-colle); z-index:var(--z-flottant)}
  .ms-boite.ms-infos .ms-carte:not(:empty){position:fixed; top:calc(var(--haut-barre) + var(--ms-fil-h)); left:0; right:0; bottom:var(--bas-colle); z-index:var(--z-flottant); width:auto; border-left:0; box-shadow:none}
  .ms-retour{display:inline-flex}
  .ms-retour .ds-btn{padding:0 var(--sp-2) 0 var(--sp-1)}
  .ms-fil-h{gap:var(--sp-1); padding:0 var(--sp-2)}
  .ms-fil-g>a[target]{display:none}   /* WhatsApp : dans la fiche (« i »), la place va au nom */
  .ms-conv{min-height:64px}
  .ms-corps{padding:var(--sp-3)}
  .ms-b{max-width:88%}
  .ms-comp{padding:var(--sp-2) var(--sp-3)}
  .ms-comp:not(.ouvert) .ms-opts{display:none}
  .ms-opt-b,.ms-env-m,.ms-apercu-m{display:inline-flex}
  .ms-apercu-m{align-self:flex-start}
  .ms-comp-b .ms-env,.ms-comp-b .ms-apercu-d{display:none}
  .ms-comp-x textarea{min-height:var(--h-touch); height:var(--h-touch); resize:none}
  .ms-sujet{height:var(--h-touch)}
  .ms-comp-l .sel{flex:1 1 100%; max-width:100%; height:var(--h-touch); min-height:var(--h-touch)}
  .ms-canaux button,.ms-rapide{height:36px}
  /* une ligne au doigt : n°, type et étiquettes (qui passent à la ligne), ce qui s'est passé, l'échéance dessous ; qui et « … » à droite */
  .inc-li{align-items:start; row-gap:var(--sp-1); padding-left:var(--sp-3)}
  .inc-li-c{grid-column:1; grid-row:1}
  .inc-li-d{display:contents}
  .inc-li-d>:first-child{grid-column:1; grid-row:2; justify-self:start}
  .inc-li-a{grid-column:2; grid-row:1 / span 2; align-self:center}
  .inc-li-1{flex-wrap:wrap; row-gap:var(--sp-05)}
  .inc-li-2{white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2}
  .inc-ft{grid-template-columns:40px minmax(0,1fr); padding:var(--sp-4) var(--sp-4) var(--sp-3)}
  .inc-ft-ic{width:40px; height:40px}
  .inc-ft-n{font-size:var(--fs-20)}
  .inc-ft-g>:is([data-incfocus],[data-incfplus],.primaire){display:none}
  .inc-ft-g .ds-btn{min-height:var(--h-touch)}
  .inc-ft-g .ds-btn.icone{min-width:var(--h-touch)}
  .inc-bande .ds-bande{grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr))}
  .inc-bande .ds-bande>:nth-child(odd)::before{display:none}
  .inc-corps>.ds-section{padding:var(--sp-4)}
  .inc-pouce{position:sticky; bottom:0; z-index:var(--z-collant); display:flex; gap:var(--sp-2); padding:var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--border); background:var(--elevated)}
  .inc-pouce .ds-btn.primaire{flex:1}
}

/* ====== LOT P1 — PAIEMENTS ET FACTURES DANS L'ANATOMIE « ITINÉRAIRE » (07/10/2026 : « améliore les fonctionnalités et le design de l'admin ») ======
   DIRECTION § 3.3 à 3.7 et § 5.9 ; les modèles : Réservations (lot E1L) et Flottes (lot O2). Paiements : les onglets (Période ·
   Registre · Lots · Envois) puis, pour chacun, la barre de vue qui colle, les puces et le bilan qui suit les filtres, le tableau
   standard (jours en chiffres tabulaires, zéros gris, l'état en point + mot, le geste flottant), le Total en pied ; Factures : la
   même anatomie. Les fiches (bénéficiaire, paiement, lot, facture) dans le panneau de 520 px : en-tête d'objet, bande, sections à
   filets, « Liée à » ; leurs dialogues à leur place. Au téléphone : une ligne de deux par objet. Des jetons seulement. */

/* ---- les onglets de Paiements et ce qui reste à verser ---- */
.pay-onglets{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin:0 0 var(--sp-2)}
.pay-sous button{display:inline-flex; align-items:center; gap:var(--sp-15)}
.pay-sous .n{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 var(--sp-1); border-radius:var(--r-pilule); background:var(--alerte-doux); color:var(--texte-alerte); font-size:var(--fs-11); font-weight:600; font-variant-numeric:tabular-nums}
.pay-onglets .pay-reste{margin-left:auto; padding:0; border:0; background:none; font:inherit; font-size:var(--fs-13); color:var(--ink-2)}
.pay-onglets .pay-reste:hover{color:var(--ink)}
.pay-onglets .pay-reste b{color:var(--ink)}
.pay-hotes:empty{display:none}

/* ---- la barre de vue (colle sur toute la liste), ‹ Cette semaine ›, les puces, les notes, la légende ---- */
.pay-vbarre{display:contents}
.pay-nav{display:inline-flex; align-items:center; gap:var(--sp-05); flex:none}
.pay-nav .ds-btn[aria-current="true"]{color:var(--ink); font-weight:600}
.pay-nav-tel{display:none}
:is(#s-paiements,#s-factures) .ds-vue .vues{padding-right:var(--sp-6); -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
:is(#payPuces,#regPuces,#facPuces) .ds-filtres,.pay-bilan-seul{padding:var(--sp-15) 0}
:is(#payPuces,#regPuces,#facPuces):empty,#payNotes:empty{display:none}
.pay-bilan-seul .bilan{margin-left:0}
#payNotes{display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-3)}
#payNotes .fi-note{margin:0}
.pay-legende{margin:var(--sp-3) 0 var(--sp-6); font-size:var(--fs-12); line-height:1.5; color:var(--muted)}
.pay-tel-action{display:none}
.pay-relit{opacity:.55; transition:opacity var(--t-2) var(--ease)}
.pay-pages{display:flex; align-items:center; justify-content:center; gap:var(--sp-3); margin:0 0 var(--sp-4)}
.pay-pages-n{font-size:var(--fs-13); color:var(--muted)}

/* ---- l'état d'un paiement, d'un lot, d'une facture : point + mot (les teintes communes), pastille dans une fiche ---- */
.ds-statut.pay-st-ok{--st-c:var(--texte-ok); --st-p:var(--point-ok); --st-f:var(--ok-doux)}
.ds-statut.pay-st-alerte{--st-c:var(--texte-alerte); --st-p:var(--point-alerte); --st-f:var(--alerte-doux)}
.ds-statut.pay-st-info{--st-c:var(--texte-info); --st-p:var(--point-info); --st-f:var(--info-doux)}
.ds-statut.pay-st-danger{--st-c:var(--texte-danger); --st-p:var(--point-danger); --st-f:var(--danger-doux)}
.ds-statut.pay-st-neutre{--st-c:var(--muted); --st-p:var(--point-neutre); --st-f:var(--surface-piste)}

/* ---- les tableaux standard (Période, Registre, Lots, Factures) : une carte, des colonnes posées, les montants à droite ---- */
.pay-carte-t{margin-bottom:var(--sp-3)}
.pay-carte-t.defile{overflow-x:auto; overscroll-behavior-x:contain}
.pay-carte-t.defile .ds-tableau thead th{position:static}
:is(.pay-t,.reg-t,.lot-t,.fac-t){--vue-dessus:var(--vue-h); --th-h:32px}
:is(.pay-t,.reg-t,.lot-t,.fac-t) thead th:first-child{border-top-left-radius:var(--r-card)}
:is(.pay-t,.reg-t,.lot-t,.fac-t) thead th:last-child{border-top-right-radius:var(--r-card)}
:is(.pay-t,.reg-t,.lot-t,.fac-t) td{line-height:1.35}
:is(.pay-t,.reg-t,.lot-t,.fac-t) td .sous{margin-top:var(--sp-05); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
:is(.pay-t,.reg-t,.lot-t,.fac-t) td.num .sous{text-align:right}
:is(.pay-t,.reg-t,.lot-t,.fac-t) tr:focus-visible{outline:0}
:is(.pay-t,.reg-t,.lot-t,.fac-t) tr:focus-visible td,:is(.pay-t,.reg-t,.lot-t,.fac-t) tbody tr.pay-cur td{background:var(--surface-douce)}
:is(.pay-t,.reg-t,.lot-t,.fac-t) tbody tr.pay-cur td:first-child{box-shadow:inset 3px 0 0 var(--ink-2)}
:is(.pay-t,.reg-t,.lot-t,.fac-t) tr.pay-cur .gestes .ds-groupe-btn{opacity:1}
:is(.pay-t,.reg-t,.lot-t,.fac-t) td.gestes{padding-left:0; padding-right:var(--sp-2); text-overflow:clip}
:is(.pay-t,.reg-t,.lot-t,.fac-t) .gestes .ds-groupe-btn{gap:var(--sp-05)}
/* à la souris, comme dans Réservations et Flottes : les gestes flottent au bout de la ligne survolée */
@media (hover:hover){
  :is(.pay-t,.reg-t,.lot-t,.fac-t) thead th[data-col="gestes"]{width:var(--sp-2); padding:0}   /* (plus fort que la largeur de chaque tableau, au doigt) */
  :is(.pay-t,.reg-t,.lot-t,.fac-t) td.gestes{position:relative; padding:0; overflow:visible}
  :is(.pay-t,.reg-t,.lot-t,.fac-t) td.gestes .ds-groupe-btn{position:absolute; top:50%; right:var(--sp-2); z-index:var(--z-dessus); padding:var(--sp-05); border-radius:var(--r-md);
    background:var(--surface); box-shadow:var(--el-2); transform:translateY(-50%)}
  :is(.pay-t,.reg-t,.lot-t,.fac-t) tr:not(:hover):not(:focus-within):not(.pay-cur) td.gestes .ds-groupe-btn{pointer-events:none}
}
/* le tri dans l'en-tête d'une colonne */
.pay-tri{display:inline-flex; align-items:center; gap:var(--sp-05); max-width:100%; padding:0; border:0; background:none; font:inherit; color:inherit; cursor:pointer; white-space:nowrap}
.pay-tri:hover,.pay-tri.on{color:var(--ink)}
.pay-tri .svgi{width:12px; height:12px; flex:none}
/* les montants : chiffres tabulaires, un zéro en gris ; le Total en pied */
.pay-zero,.cash.pay-zero{color:var(--muted); font-weight:500}
:is(.pay-t,.reg-t,.lot-t,.fac-t) tbody tr.pay-total{cursor:default}
:is(.pay-t,.reg-t,.lot-t,.fac-t) tbody tr.pay-total td{height:44px; font-weight:600; background:var(--surface-douce); border-top:1px solid var(--border); border-bottom:0}
:is(.pay-t,.reg-t,.lot-t,.fac-t) tbody tr.pay-total:hover td{background:var(--surface-douce)}
/* le bénéficiaire, le client : une mention, ses marques, le détail dessous */
.pay-nom-c{min-width:0}
.pay-nom-l{display:flex; align-items:center; gap:var(--sp-15); min-width:0}
.pay-nom-l .ds-mention{font-weight:600; min-width:0}
.pay-nom-l .ds-tag{flex:none}
.pay-nom-c .sous{display:flex; align-items:center; gap:var(--sp-1)}
.pay-nom-c .sous .ds-mention{font-weight:500}

/* ---- la Période : Bénéficiaire · les jours · Dû · (Payé) · Reste · État · le geste ---- */
.pay-t th[data-col="j"]{width:72px}
.pay-t.pay-t-mois th[data-col="j"]{width:82px}
.pay-t th[data-col="du"]{width:104px}
.pay-t th[data-col="paye"]{width:92px}
.pay-t th[data-col="reste"]{width:100px}
.pay-t th[data-col="etat"]{width:136px}
.pay-t th[data-col="gestes"]{width:172px}
.pay-t td[data-c="j"]{color:var(--ink-2)}
.pay-t :is(th,td).pay-colsem{background:var(--surface-douce)}
.pay-t :is(th,td).pay-coljour{font-size:var(--fs-12); color:var(--muted)}
.pay-t tbody tr.pay-total td.pay-colsem{background:var(--surface-piste)}
.pay-t tr.pay-groupe .pay-nom-l .ds-mention .nom{font-style:italic}

/* ---- le Registre : la case · Bénéficiaire · Période · Dû · Versé · Reste · État · IBAN · le geste ---- */
.reg-t th[data-col="case"]{width:44px}
.reg-t th[data-col="periode"]{width:148px}
.reg-t th:is([data-col="du"],[data-col="verse"],[data-col="reste"]){width:100px}
.reg-t th[data-col="etat"]{width:136px}
.reg-t th[data-col="iban"]{width:156px}
.reg-t th[data-col="gestes"]{width:104px}
.reg-t :is(th,td).reg-case{padding:0; text-align:center}
.reg-t tbody tr.reg-choisi td{background:var(--accent-soft)}
.reg-t td[data-c="iban"] .ds-tag{margin-left:var(--sp-1)}

/* ---- les Lots : Lot · Valeur · Virements · Total · État · Validé · le geste ---- */
.lot-t th[data-col="valeur"]{width:104px}
.lot-t th[data-col="nb"]{width:96px}
.lot-t th[data-col="total"]{width:112px}
.lot-t th[data-col="etat"]{width:164px}
.lot-t th[data-col="valide"]{width:128px}
.lot-t th[data-col="gestes"]{width:84px}
.lot-emetteur{margin-bottom:var(--sp-6)}
.lot-emetteur .pay-aide-f{margin-top:var(--sp-3)}

/* ---- Factures : N° · Client · Montant · Émise · Échéance · État · les gestes ---- */
.fac-t th[data-col="numero"]{width:152px}
.fac-t th[data-col="montant"]{width:128px}
.fac-t th[data-col="societe"]{width:184px}   /* V3.3 — la société de la facture (serveur V3.7) */
.fac-t td[data-c="societe"] b{font-weight:600}
.fac-t th[data-col="date"]{width:104px}
.fac-t th[data-col="echeance"]{width:172px}
.fac-t th[data-col="etat"]{width:124px}
.fac-t th[data-col="gestes"]{width:212px}
.fac-ech.retard{color:var(--texte-danger); font-weight:600}
.fac-tel-action{display:none}
/* la nouvelle facture, au-dessus de la liste : des champs posés, les courses facturables, les lignes libres */
.fac-form{margin-bottom:var(--sp-4)}
.fac-form-g{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-3); margin-bottom:var(--sp-3)}
.fac-f{display:flex; flex-direction:column; gap:var(--sp-1); flex:1 1 140px; min-width:0; font-size:var(--fs-12); color:var(--ink-2)}
.fac-f-l{flex:2 1 220px}
.fac-f .sel{width:100%; min-width:0}
.fac-pays{text-transform:uppercase}
.fac-cf{max-height:300px; overflow:auto; margin-bottom:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md)}
.fac-cf-t{--vue-dessus:0px; --th-h:32px}
.fac-cf-t th{position:static}
.fac-cf-t th.fac-cf-case{width:44px}
.fac-cf-t th:nth-child(5){width:96px}
.fac-cf-t td.fac-cf-case{text-align:center}
.fac-cf-t .fac-cf-trajet{color:var(--ink-2)}
.fac-cf-t td.fac-cf-vide{white-space:normal; color:var(--muted)}
.fac-libre{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2)}
.fac-libre .facLib{flex:2 1 auto; min-width:0}
.fac-libre .facQte{flex:0 0 72px; width:72px}
.fac-libre .facPu{flex:0 0 112px; width:112px}
.fac-form-id{margin-top:var(--sp-3)}
.fac-form-pied{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--border)}
.fac-form-pied .muted{font-size:var(--fs-13)}

/* ---- la fiche ouverte à côté (panneau ancré, ≥ 1280 px) : les colonnes courtes ---- */
@media (min-width:1280px){
  html.pn-on.pn-ancre #s-paiements .pay-t :is([data-col="j"],[data-c="j"],[data-col="paye"],[data-c="paye"]){display:none}
  html.pn-on.pn-ancre #s-paiements .reg-t :is([data-col="du"],[data-c="du"],[data-col="verse"],[data-c="verse"],[data-col="iban"],[data-c="iban"]){display:none}
  html.pn-on.pn-ancre #s-paiements .lot-t :is([data-col="valeur"],[data-c="valeur"],[data-col="valide"],[data-c="valide"]){display:none}
  html.pn-on.pn-ancre #s-factures .fac-t :is([data-col="date"],[data-c="date"],[data-col="echeance"],[data-c="echeance"],[data-col="societe"],[data-c="societe"]){display:none}
  /* l'en-tête de page, resserré à côté de la fiche : l'action pleine garde son icône (son nom reste lu) */
  html.pn-on.pn-ancre #topbar:is([data-ecran="paiements"],[data-ecran="factures"]) #pageActions .ds-btn.primaire{width:32px; padding:0}
  html.pn-on.pn-ancre #topbar:is([data-ecran="paiements"],[data-ecran="factures"]) #pageActions .ds-btn.primaire>:is(span,kbd):not(.svgi){position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  html.pn-on.pn-ancre #s-paiements .pay-onglets .pay-reste{margin-left:0}
}

/* ---- les fiches dans le panneau (520 px) : sans l'en-tête du volet (l'en-tête d'objet le remplace), sans marge ---- */
#panneauCorps .volet:has(>.volet-corps>.pay-fiche)>.volet-tete{display:none}
#panneauCorps .volet-corps:has(>.pay-fiche){padding:0; gap:0}
#panneauCorps .modal.pn-fiche .box:has(>#genBody>.fac-fiche){padding:0}
.pay-fiche{display:flex; flex-direction:column; min-width:0; padding-bottom:var(--sp-6)}
.pay-fiche>.ds-sq{padding:var(--sp-5)}
.pay-fiche>.ds-vide{padding:var(--sp-8) var(--sp-5)}
.pay-ft{display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; column-gap:var(--sp-3); row-gap:var(--sp-3); padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.pay-ft-ic{display:inline-grid; place-items:center; width:56px; height:56px; border-radius:var(--r-md); background:var(--surface-piste); color:var(--ink-2)}
.pay-ft-ic .svgi{width:24px; height:24px}
.pay-ft-t{min-width:0}
.pay-ft-n{margin:0; font-size:var(--fs-24); font-weight:600; letter-spacing:var(--approche-24); line-height:var(--lh-titre); color:var(--ink); overflow-wrap:anywhere}
.pay-ft-n .ds-mention{font-weight:600; color:inherit}
.pay-ft-s{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-15); margin-top:var(--sp-1); font-size:var(--fs-13); color:var(--ink-2)}
.pay-ft-s .ds-mention{font-weight:500}
.pay-ft-st{align-self:start}
.pay-ft-g{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.pay-ft-g>.ds-btn.primaire,.pay-ft-g>.fac-emettre{margin-left:auto}
.pay-ft-g .ds-btn.primaire span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fac-emettre{display:inline-flex; align-items:center; gap:var(--sp-2); min-width:0}
.fac-emettre .sel{width:auto; min-width:0}
.pay-bande{border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.pay-bande .ds-bande>*{padding:var(--sp-3)}
.pay-bande .ds-bande>*+*::before{top:var(--sp-3); bottom:var(--sp-3)}
.pay-bande .ds-chiffre .v{font-size:var(--fs-18)}
.pay-bande .ds-chiffre :is(.l,.s){white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pay-fiche>.fi-note,.pay-notes-f,.pay-autres,.pay-gestes-bloc,.pay-fiche>.pay-aide-f{margin:var(--sp-3) var(--sp-5) 0}
.pay-notes-f{display:flex; flex-direction:column; gap:var(--sp-2)}
.pay-notes-f .fi-note{margin:0}
.pay-autres{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.pay-fiche .ds-section .pay-outils{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-2) 0}
.pay-fiche .pay-danger{display:flex; justify-content:flex-start; margin:0; padding:var(--sp-4) var(--sp-5) 0; border-top:1px solid var(--border)}
.pay-aide-f{margin:0; font-size:var(--fs-13); line-height:1.45; color:var(--muted)}
.pay-va{font-size:var(--fs-14)}
/* les tableaux d'une fiche, faits pour 520 px */
.pay-fiche .ds-tableau{--vue-dessus:0px; --th-h:32px}
.pay-fiche .ds-tableau th{position:static}
.pay-fiche .ds-tableau td{line-height:1.35}
.pay-fiche .ds-tableau td .sous{margin-top:var(--sp-05); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pay-fiche .ds-tableau tbody tr.pay-total{cursor:default}
.pay-fiche .ds-tableau tbody tr.pay-total td{height:36px; font-weight:600; background:var(--surface-douce); border-bottom:0}
.pay-fiche .ds-tableau tbody tr.pay-total+tr.pay-total td{border-top:0}
/* les lignes d'un paiement (les ajustements se saisissent dans la ligne) : des colonnes posées, les champs à leur largeur */
.pay-fiche table.pay-lignes{width:100%; table-layout:fixed}
.pay-fiche table.pay-lignes th:nth-child(1){width:68px}
.pay-fiche table.pay-lignes th:nth-child(3){width:80px}
.pay-fiche table.pay-lignes th:nth-child(4){width:136px}
.pay-fiche table.pay-lignes td{overflow:hidden; text-overflow:ellipsis}
.pay-fiche table.pay-lignes td.pay-ajust{width:auto; min-width:0}
.pay-fiche :is(.pay-adj,.pay-com){box-sizing:border-box; width:100%; min-width:0}
.pay-ct .c-q{width:84px} .pay-ct .c-m{width:100px} .pay-ct .c-src{width:100px} .pay-ct .c-iban{width:124px} .pay-ct .c-p{width:104px}
.pay-ct .heure b{font-size:var(--fs-13); font-weight:500}
.pay-ct .heure small{font-size:var(--fs-12)}
.fac-lignes.pay-ct .c-q{width:48px} .fac-lignes.pay-ct .c-pu{width:96px} .fac-lignes.pay-ct .c-mt{width:104px}
.pay-grp-t .c-n{width:72px} .pay-grp-t .c-m{width:96px} .pay-grp-t .c-st{width:116px}
.pay-fiche .tablewrap{max-height:none}
/* la feuille d'une société dans sa fiche : le tableau seul (sans carte), qui défile en largeur si la semaine ne tient pas */
.pay-fiche .pay-soc-table :is(th,td):first-child{min-width:120px}
/* « Liée à », l'historique, les paiements ouverts, les courses d'une facture */
.pay-liee dd{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2)}
.pay-histo{list-style:none; margin:0; padding:0}
.pay-histo li{display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:start; gap:var(--sp-2); padding:var(--sp-2) 0; border-top:1px solid var(--border-doux)}
.pay-histo li:first-child{border-top:0; padding-top:0}
.pay-histo li>.svgi{width:16px; height:16px; margin-top:var(--sp-05); color:var(--muted)}
.pay-histo-t{display:flex; flex-direction:column; min-width:0; font-size:var(--fs-13)}
.pay-histo-t b{font-weight:600; color:var(--ink)}
.pay-histo-t .sous{color:var(--muted)}
.pay-histo-q{font-size:var(--fs-12); color:var(--muted); white-space:nowrap}
.pay-journal:empty{display:none}
.pay-journal,.fac-hist{margin-top:var(--sp-3)}
.pay-ouverts{list-style:none; margin:0; padding:0}
.pay-ouvert{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:var(--sp-3); width:100%; min-height:var(--h-touch); padding:var(--sp-2) 0; border:0; border-top:1px solid var(--border-doux);
  background:none; font:inherit; color:inherit; text-align:left; cursor:pointer}
.pay-ouverts li:first-child .pay-ouvert{border-top:0}
.pay-ouvert:hover .pay-ouvert-t b{color:var(--texte-accent)}
.pay-ouvert-t{display:flex; flex-direction:column; min-width:0}
.pay-ouvert-t .sous{font-size:var(--fs-12); color:var(--muted)}
.pay-ouverts-t{margin:var(--sp-2) 0 0; font-size:var(--fs-13); color:var(--ink-2)}
.fac-courses{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2)}
.fac-fiche .fac-hist .pay-h4{margin-top:0}
/* un dialogue à la place de la fiche (un montant, un IBAN, « versé », annuler un lot) : son titre, « Annuler » */
.pay-dlg{padding:var(--sp-5)}
.pay-dlg-t{display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4)}
.pay-dlg-t .pay-ft-n{flex:1; font-size:var(--fs-20)}

/* ---- le téléphone : une ligne de deux par objet (comme Flottes), l'action du moment dans la page ---- */
.pay-li-groupe{margin:0 0 var(--sp-4)}
.pay-li{display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; column-gap:var(--sp-3); min-height:64px; padding:var(--sp-2) var(--sp-3); cursor:pointer; -webkit-tap-highlight-color:transparent}
.pay-li+.pay-li{border-top:1px solid var(--border-doux)}
.pay-li:active{background:var(--surface-douce)}
.pay-li.ouverte{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
.pay-li:focus-visible,.reg-li-b:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.pay-li-ic{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:var(--r-md); background:var(--surface-piste); color:var(--ink-2)}
.pay-li-ic .svgi{width:18px; height:18px}
.pay-li-c{display:flex; flex-direction:column; gap:var(--sp-05); min-width:0}
.pay-li-n{display:flex; align-items:center; gap:var(--sp-15); min-width:0; font-size:var(--fs-14); line-height:1.3}
.pay-li-n b{font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pay-li-n .ds-statut{flex:none; font-size:var(--fs-12)}
.pay-li-s{font-size:var(--fs-13); line-height:1.3; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pay-li-d{display:flex; flex-direction:column; align-items:flex-end; gap:var(--sp-05); text-align:right}
.pay-li-d small{font-size:var(--fs-12); color:var(--muted)}
.pay-li.reg-li{display:flex; align-items:center; gap:0; padding:0}
.reg-li .reg-case{display:inline-grid; place-items:center; flex:none; width:var(--h-touch); min-height:64px}
.reg-li-b{flex:1; display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; column-gap:var(--sp-3); min-width:0; min-height:64px; padding:var(--sp-2) var(--sp-3);
  border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer}
.pay-li.reg-choisi{background:var(--accent-soft)}
@media (max-width:1040px){
  .pay-nav-bur{display:none}
  .pay-nav-tel{display:inline-flex; flex:none}
  .pay-tel-action,.fac-tel-action{display:block; margin:0 0 var(--sp-3)}
  .pay-tel-action:empty{display:none}
  .pay-onglets .pay-reste{margin-left:0}
  :is(#payPuces,#regPuces,#facPuces) .ds-filtres{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--sp-3)); padding:var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
    -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
  :is(#payPuces,#regPuces,#facPuces) .ds-filtres::-webkit-scrollbar{display:none}
  :is(#payPuces,#regPuces,#facPuces) .ds-filtres>*{flex:none}
  :is(#payPuces,#regPuces,#facPuces) .bilan{margin-left:var(--sp-2)}
  :is(#payPuces,#regPuces,#facPuces) :is(.ds-puce,.ds-puce.ajout){height:32px; min-height:0}
  :is(#s-paiements,#s-factures) .ds-vue .ds-champ:not(:focus-within):not(:has(input:not(:placeholder-shown))) .ds-kbd{display:none}
}
@media (max-width:759px){
  .pay-ft{grid-template-columns:48px minmax(0,1fr); padding:var(--sp-4) var(--sp-4) var(--sp-3)}
  .pay-ft .ds-avatar.xl,.pay-ft-ic{width:48px; height:48px}
  .pay-ft-n{font-size:var(--fs-20)}
  .pay-ft-st{grid-column:2; justify-self:start}
  .pay-ft-g .ds-btn{min-height:var(--h-touch)}
  .pay-ft-g>.ds-btn.primaire,.pay-ft-g>.fac-emettre{flex:1 1 100%; margin-left:0}
  .fac-emettre .ds-btn{flex:1}
  .pay-fiche>.fi-note,.pay-notes-f,.pay-autres,.pay-gestes-bloc,.pay-fiche>.pay-aide-f{margin-left:var(--sp-4); margin-right:var(--sp-4)}
  .pay-fiche .ds-section{padding:var(--sp-4)}
  .pay-fiche .pay-danger{padding:var(--sp-4) var(--sp-4) 0}
  .pay-dlg{padding:var(--sp-4)}
  .pay-onglets .pay-sous{max-width:100%}
  .pay-ouvert{grid-template-columns:minmax(0,1fr) auto}
  .pay-ouvert .ds-statut{display:none}
  .pay-pages .ds-btn{min-height:var(--h-touch)}
  .fac-libre{flex-wrap:wrap}
  .fac-libre .facLib{flex:1 1 100%}
}

/* ====== LOT P5 — NOUVELLE RÉSERVATION : L'ANATOMIE ITINÉRAIRE, LE CANAL EN TÊTE, LA RÉUSSITE ET « COLLER UNE DEMANDE » (07/10/2026 : « améliore les fonctionnalités et le design de l'admin ») ======
   DIRECTION § 5.4, § 3.8 à § 3.10. Une page : le formulaire en UNE colonne (640 px au plus) sur une surface, quatre sections
   numérotées séparées de filets (jamais une carte dans la carte), libellés au-dessus, aide dessous ; le récapitulatif collant
   à droite (le trajet, le prix, la marge en vert ou en rouge, le bouton plein et son raccourci). En tête : le mode (segment),
   la grille (une puce), « Coller une demande » au téléphone (sur l'ordinateur, il est dans l'en-tête de page). La zone
   « Coller une demande » et sa feuille de relecture ; la réussite, qui remplace la page. Des jetons seulement. */
#s-new [hidden]{display:none}
#s-new .nv-page{display:grid; grid-template-columns:minmax(0,640px) minmax(300px,380px); gap:var(--sp-6); align-items:start}
#s-new .nv-page[hidden]{display:none}
#s-new .nv-gauche{display:flex; flex-direction:column; gap:var(--sp-4); min-width:0}

/* ---- la tête : le mode, la grille, « Coller une demande » ; la phrase du mode dessous ---- */
#s-new .nv-tete{display:flex; flex-direction:column; gap:var(--sp-2)}
#s-new .nv-tete-l{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3)}
#s-new .nv-tete-aide{margin:0; transition:background var(--t-2) var(--ease)}
#nvModeBar.devis .nv-tete-aide{padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--accent-soft); color:var(--ink)}
#s-new .nv-chan .ds-puce{height:30px}
#s-new .nv-coller-tel{display:none}

/* ---- le formulaire : une surface, des sections à filets ---- */
#s-new .nv-form{background:var(--surface); border-radius:var(--r-card); box-shadow:var(--el-1); min-width:0}
#s-new .nv-sec{padding:var(--sp-5) var(--sp-6) var(--sp-2)}
#s-new .nv-sec + .nv-sec{border-top:1px solid var(--border-doux)}
#s-new .nv-sec-h{display:flex; align-items:center; gap:var(--sp-3); min-height:28px; margin-bottom:var(--sp-4)}
#s-new .nv-sec-t{display:flex; align-items:center; margin:0; font-size:var(--fs-16); font-weight:600; line-height:var(--lh-titre); color:var(--ink)}
#s-new .nv-sec-etat{margin-left:auto; font-size:var(--fs-12); color:var(--muted); font-variant-numeric:tabular-nums}
#s-new .nv-sec-h .ds-segment{margin-left:auto}
#s-new .nvnum{width:22px; height:22px; margin-right:var(--sp-2); font-size:var(--fs-12)}
#s-new .nv-sous-t{display:flex; align-items:baseline; gap:var(--sp-2); margin:var(--sp-5) 0 var(--sp-3); font-size:var(--fs-14); font-weight:600; color:var(--ink)}
#s-new .nv-sous-t .cnt{font-size:var(--fs-12); font-weight:400; color:var(--muted)}
#s-new .field{margin-bottom:var(--sp-4); min-width:0}
#s-new .field label,#s-new .nv-lab{font-size:var(--fs-13); font-weight:500; color:var(--ink-2)}
#s-new .nv-lab{display:block; margin-bottom:var(--sp-1)}
#s-new .field .nv-lab{margin-bottom:0}
#s-new .nv-opt{margin-left:var(--sp-1); font-weight:400; color:var(--muted)}
#s-new .field input:not([type=checkbox]):not([type=radio]),#s-new .field select{width:100%; min-width:0}
#s-new .field>.ds-segment{align-self:flex-start}
#s-new .field .f-aide{margin:0}
#s-new .f-aide.alerte{color:var(--texte-alerte); font-weight:500}
#s-new .ds-segment button{height:auto; min-height:28px; white-space:nowrap}
#s-new .nv-ligne{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0 var(--sp-4)}
#s-new .nv-ligne.nv-deux{grid-template-columns:repeat(2,minmax(0,1fr))}
#s-new .nv-ligne.nv-quand{grid-template-columns:auto minmax(0,1fr) minmax(0,.85fr)}
#s-new .nvitin{margin-bottom:0}
#s-new .nv-itin-aide{margin:calc(-1 * var(--sp-2)) 0 var(--sp-4) 25px}
#s-new .nv-ou{margin:0 0 var(--sp-4)}
#s-new .nv-vol{max-width:360px}
#s-new details.nvadv{margin:var(--sp-1) 0 var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--border-doux)}
#s-new details.nvadv summary{display:block; line-height:1.5}
#s-new details.nvadv summary::before{display:inline-block; margin-right:var(--sp-2); vertical-align:1px}
/* le client : la carte du client trouvé (ce que le CRM sait, son dernier trajet), entre la recherche et les champs */
#s-new .nv-client{display:flex; flex-direction:column; gap:var(--sp-2); margin:calc(-1 * var(--sp-1)) 0 var(--sp-4)}
#s-new .nv-client:not(:has(> :not([hidden]))){display:none}
#s-new .nv-client .nv-fiche,#s-new .nv-client .nv-dernier{margin:0; padding:var(--sp-3); border-radius:var(--r-md); background:var(--surface-douce); font-size:var(--fs-13)}
#s-new .nv-dernier .nvd-k{color:var(--muted)}
#s-new .nv-dernier b{color:var(--ink)}
/* les véhicules : des choix (boutons radio) avec le prix de la grille à droite */
#s-new .vehlist{gap:var(--sp-2); margin-bottom:var(--sp-2)}
#s-new .vehrow{min-height:56px; padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3); border-radius:var(--r-md); transition:border-color var(--t-1) var(--ease), background var(--t-1) var(--ease)}
#s-new .vehrow .vt{min-width:0}
#s-new .vehrow .vn{font-size:var(--fs-14); font-weight:600; color:var(--ink)}
#s-new .vehrow .vm{font-size:var(--fs-12)}
#s-new .vehrow .vp{font-size:var(--fs-16); color:var(--ink)}
#s-new .vehrow.dim{opacity:.6}
#s-new .vehlist .empty{padding:var(--sp-5) var(--sp-4); border-radius:var(--r-md); font-size:var(--fs-13); text-align:center; color:var(--muted)}
#s-new #nvSvcList{margin-bottom:var(--sp-4)}

/* ---- le récapitulatif collant ---- */
#s-new .nv-recap{position:sticky; top:calc(var(--haut-barre) + var(--sp-4)); max-height:calc(100vh - var(--haut-barre) - var(--sp-8)); overflow:auto; overscroll-behavior:contain;
  padding:var(--sp-5); background:var(--surface); border-radius:var(--r-card); box-shadow:var(--el-1); scrollbar-width:thin}
#s-new .nv-recap-h{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-4)}
#s-new .nv-recap-h h2{margin:0; font-size:var(--fs-16); font-weight:600; color:var(--ink)}
#s-new .nv-recap-h .ds-tag{margin-left:auto}
#s-new .nv-recap-tete{padding-bottom:var(--sp-4); margin-bottom:var(--sp-1); border-bottom:1px solid var(--border-doux)}
#s-new .nv-rt-quand{display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2); margin-bottom:var(--sp-3)}
#s-new .nv-rt-quand b{font-size:var(--fs-24); font-weight:600; line-height:1.1; letter-spacing:var(--approche-24); color:var(--ink); font-variant-numeric:tabular-nums}
#s-new .nv-rt-quand span{font-size:var(--fs-13); color:var(--ink-2)}
#s-new .nv-recap-tete .ds-trajet{font-size:var(--fs-14)}
#s-new .nv-rt-qui{margin-top:var(--sp-3); font-size:var(--fs-13); color:var(--ink-2)}
#s-new .nv-rt-vide{margin:0; font-size:var(--fs-13); color:var(--muted)}
#s-new #nvPrixChauffeur.lecture{background:var(--surface-douce); color:var(--ink-2)}
#s-new .nv-marge.pos{color:var(--texte-ok)}
#s-new .nv-marge.neg{color:var(--texte-danger)}
#s-new .nvcta{margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--border-doux)}
#s-new .nvcta-row{display:grid; grid-template-columns:1fr auto; gap:var(--sp-2); margin-top:var(--sp-2)}
#s-new .nvcta #nvCreateHint{margin:var(--sp-3) 0 0}
#nvCreate .ds-kbd{margin-left:var(--sp-2); background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.28); color:inherit}
#s-new .nv-recap:has(#nvGo) #nvCreate{display:none}
#s-new .nvconf{margin-top:var(--sp-3); padding:var(--sp-4); border-radius:var(--r-md); background:var(--surface-douce); box-shadow:inset 0 0 0 1px var(--border)}
#s-new .nvconf h3{margin:0 0 var(--sp-2); font-size:var(--fs-14); font-weight:600; color:var(--ink)}
#s-new .nvconf-act{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3)}
#s-new #nvResult .card{box-shadow:none; padding:var(--sp-4); border-radius:var(--r-md)}
#s-new .nv-refus .ds-btn,#s-new .nv-erreur .ds-btn{margin-top:var(--sp-2)}
#s-new .nv-erreur{display:flex; align-items:flex-start; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); background:var(--alerte-doux); font-size:var(--fs-13); color:var(--ink)}
#s-new .nv-erreur>.svgi{flex:none; margin-top:2px; color:var(--texte-alerte)}
#s-new .nv-erreur p{margin:var(--sp-1) 0 0; color:var(--ink-2)}
#s-new .nv-erreur-g{display:flex; flex-wrap:wrap; gap:var(--sp-2)}

/* ---- « Coller une demande » : le message, la feuille de relecture, puis une ligne repliée ---- */
#s-new .nv-coller{padding:var(--sp-5); background:var(--surface); border-radius:var(--r-card); box-shadow:var(--el-2)}
#s-new .nvc-tete{display:flex; align-items:flex-start; gap:var(--sp-3); margin-bottom:var(--sp-3)}
#s-new .nvc-tete>div{flex:1; min-width:0}
#s-new .nvc-t{display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-1); font-size:var(--fs-16); font-weight:600; color:var(--ink)}
#s-new .nvc-t .svgi{color:var(--texte-accent)}
#s-new .nvc-tete .f-aide{margin:0}
#nvCollerTexte{display:block; width:100%; min-height:112px; margin-top:var(--sp-1); padding:var(--sp-3); resize:vertical; border:1px solid var(--border-strong); border-radius:var(--r-md);
  background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-14); line-height:1.5; box-shadow:var(--shadow-ctl)}
#nvCollerTexte:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
#nvCollerTexte::placeholder{color:var(--faint)}
#s-new .nvc-relecture{margin-top:var(--sp-4)}
#s-new .nvc-relecture:empty{display:none}
#s-new .nvc-liste{list-style:none; margin:0; padding:0; border-top:1px solid var(--border-doux)}
#s-new .nvc-l{border-bottom:1px solid var(--border-doux)}
#s-new .nvc-l>label{display:grid; grid-template-columns:20px 112px minmax(0,1fr) minmax(0,max-content); align-items:baseline; gap:var(--sp-1) var(--sp-3); padding:var(--sp-2) 0; cursor:pointer}
#s-new .nvc-l input[type=checkbox]{align-self:center; width:16px; height:16px; margin:0; accent-color:var(--accent)}
#s-new .nvc-k{font-size:var(--fs-12); color:var(--muted)}
#s-new .nvc-k .ds-tag{margin-left:var(--sp-1)}
#s-new .nvc-v{min-width:0; font-size:var(--fs-14); font-weight:500; color:var(--ink); overflow-wrap:anywhere}
#s-new .nvc-v small{display:block; margin-top:var(--sp-05); font-size:var(--fs-12); font-weight:400; color:var(--muted)}
#s-new .nvc-s{max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-12); color:var(--faint); quotes:'«\a0' '\a0»'}
#s-new .nvc-l.note .nvc-v{font-size:var(--fs-13); font-weight:400; color:var(--ink-2)}
#s-new .nvc-l:has(input:not(:checked)) .nvc-v{color:var(--muted)}
#s-new .nvc-l.doute{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); margin:var(--sp-2) 0; padding:var(--sp-2) var(--sp-3); border:0; border-radius:var(--r-sm); background:var(--alerte-doux)}
#s-new .nvc-l.doute>.svgi{flex:none; color:var(--texte-alerte)}
#s-new .nvc-l.doute .nvc-v{flex:1 1 240px; font-size:var(--fs-13); font-weight:400}
#s-new .nvc-opts{display:flex; flex-wrap:wrap; gap:var(--sp-1)}
#s-new .nvc-opt{height:28px; padding:0 var(--sp-3); border-radius:var(--r-pilule); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-strong); font-size:var(--fs-13); font-weight:500}
#s-new .nvc-opt:hover{box-shadow:inset 0 0 0 1px var(--accent); color:var(--texte-accent)}
#s-new .nvc-vide{display:flex; align-items:center; gap:var(--sp-2); margin:0; font-size:var(--fs-13); color:var(--muted)}
#s-new .nvc-pied{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4)}
#s-new .nv-coller.replie{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); padding:var(--sp-3) var(--sp-4); box-shadow:var(--el-1)}
#s-new .nv-coller.replie>.svgi{flex:none; color:var(--texte-ok)}
#s-new .nvc-rt{flex:1 1 220px; min-width:0; font-size:var(--fs-13); color:var(--ink-2)}
#s-new .nvc-rt b{color:var(--ink)}
#s-new .nvc-ra{display:flex; gap:var(--sp-1)}

/* ---- la réussite : ce qui a été créé, les gestes, « Assigner maintenant », la course ---- */
#s-new .nv-fin{max-width:760px}
#s-new .nv-fin-carte{padding:var(--sp-6); background:var(--surface); border-radius:var(--r-card); box-shadow:var(--el-1)}
#s-new .nv-fin-tete{display:flex; align-items:flex-start; gap:var(--sp-4)}
#s-new .nv-fin-ok{flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:var(--r-rond); background:var(--ok-doux); color:var(--texte-ok)}
#s-new .nv-fin-ok .svgi{width:22px; height:22px}
#s-new .nv-fin-ok.ko{background:var(--alerte-doux); color:var(--texte-alerte)}
#s-new .nv-fin-t{min-width:0}
#s-new .nv-fin-t h2{margin:0; font-size:var(--fs-24); font-weight:600; line-height:var(--lh-titre); letter-spacing:var(--approche-24); color:var(--ink)}
#s-new .nv-fin-ligne{margin:var(--sp-1) 0 0; font-size:var(--fs-18); font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
#s-new .nv-fin-meta{margin:var(--sp-1) 0 0; font-size:var(--fs-13); color:var(--muted)}
#s-new .nv-fin-gestes{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-5) 0}
#nvFinAssigner{margin-bottom:var(--sp-5)}
#nvFinAssigner:empty{display:none}
#s-new .nv-fin .ds-section{padding:var(--sp-4) 0 0; border-top:1px solid var(--border-doux)}
#s-new .nv-fin .ds-dl{align-items:center}
#s-new .nv-fin .ds-dl dd{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2)}
#s-new .nv-fin-vide{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin:var(--sp-3) 0 0; font-size:var(--fs-13); color:var(--ink-2)}
#s-new .nv-fin .nvserie{margin:var(--sp-4) 0}
#nvFinReport:empty{display:none}
#nvFinReport{margin-top:var(--sp-4)}
#s-new.nv-fini .formbar{display:none}

/* ---- tablette : une colonne, le récapitulatif sous le formulaire ; « Coller une demande » passe dans la tête ---- */
@media (max-width:1040px){
  #s-new .nv-page{grid-template-columns:minmax(0,1fr); max-width:720px}
  #s-new .nv-recap{position:static; max-height:none; overflow:visible}
  #s-new .nv-coller-tel{display:inline-flex; margin-left:auto}
  #s-new.nv-fini.on{padding-bottom:0}
}
/* ---- téléphone : une étape à la fois, des champs pleine largeur, des cibles de 44 px ---- */
@media (max-width:759px){
  #s-new .nv-sec{padding:var(--sp-4) var(--sp-4) var(--sp-1)}
  #s-new .nv-ligne,#s-new .nv-ligne.nv-deux,#s-new .nv-ligne.nv-quand{grid-template-columns:minmax(0,1fr)}
  #s-new .nv-ligne.nv-court{grid-template-columns:repeat(2,minmax(0,1fr))}
  #s-new .nv-tete-l>.ds-segment{display:grid; grid-template-columns:1fr 1fr; width:100%}
  #s-new #nvPaySeg{display:grid; grid-template-columns:1fr 1fr; width:100%}
  #s-new .ds-segment button{min-height:var(--h-touch); white-space:normal; line-height:1.25}
  #s-new .nv-coller-tel{margin-left:0}
  #s-new .nv-seg-plus{display:none}
  #s-new .nv-vol{max-width:none}
  #s-new .nv-recap{padding:var(--sp-4)}
  #s-new .nvc-l>label{grid-template-columns:20px minmax(0,1fr); row-gap:0}
  #s-new .nvc-l>label .nvc-v,#s-new .nvc-l>label .nvc-s{grid-column:2}
  #s-new .nvc-s{max-width:none}
  #s-new .nv-coller,#s-new .nv-fin-carte{padding:var(--sp-4)}
  #s-new .nv-fin-gestes .ds-btn{flex:1 1 calc(50% - var(--sp-2))}
}
@media (pointer:coarse){ #nvCreate .ds-kbd{display:none} #s-new .nv-chan .ds-puce,#s-new .nvc-opt,#s-new .nvc-l>label{min-height:var(--h-touch)} #s-new .nv-chan .ds-puce,#s-new .nvc-opt{height:auto} }
/* ====== LOT T1 — TARIFS › GOODJOURNEY : LA GRILLE DE VENTE ÉDITABLE ET LE SIMULATEUR (07/10/2026 : « améliore les fonctionnalités et le design de l'admin ») ======
   Une boîte à filets : la liste des grilles (240 px, comme les fils de Messages), la grille ouverte ; la grille éditable (Airtable) :
   la case active au contour vert, la case modifiée ambrée (le prix d'avant au survol), la case à vérifier rouge, la plage teintée ;
   la ligne de la case ; la barre de la plage ; la barre de sauvegarde contextuelle (Polaris) ; le récapitulatif par route ; le
   Simulateur en deux colonnes (le formulaire en une colonne, le résultat). Jetons seulement ; téléphone : 760 px. */
#s-prices .tf-intro{margin:0 0 var(--sp-3)}
.tf-boite{display:grid; grid-template-columns:240px minmax(0,1fr); align-items:stretch; overflow:clip}
.tf-boite>.tf-side{position:sticky; top:var(--haut-barre); align-self:start; max-height:calc(100vh - var(--haut-barre)); overflow:auto; padding:var(--sp-3) var(--sp-2) var(--sp-3); border-right:1px solid var(--border); background:var(--surface); box-shadow:none; border-radius:var(--r-nul)}
.tf-side-h{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); padding:0 var(--sp-1) var(--sp-2) var(--sp-2)}
.tf-side-t{display:flex; align-items:baseline; gap:var(--sp-2); margin:0; font-size:var(--fs-15); font-weight:600; color:var(--ink)}
.tf-side-t .cnt{font-size:var(--fs-12); font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums}
.tf-boite .tf-scope{display:flex; gap:var(--sp-2); align-items:flex-start; margin:0 var(--sp-1) var(--sp-2); padding:var(--sp-2); border-radius:var(--r-sm); background:var(--accent-soft); font-size:var(--fs-12); color:var(--ink-2)}
.tf-boite .tf-scope>.svgi{flex:none; width:14px; height:14px; margin-top:var(--sp-05); color:var(--texte-accent)}
.tf-boite .tf-side .tf-srch{display:block; margin:0 var(--sp-1) var(--sp-2)}
.tf-boite .tf-side .tf-srch .ds-champ{width:100%}
.tf-boite .tf-list{display:flex; flex-direction:column; gap:0}
.tf-boite .tf-grp{margin:0 0 var(--sp-1)}
.tf-boite .tf-grp-t{display:flex; align-items:center; gap:var(--sp-15); padding:var(--sp-3) var(--sp-2) var(--sp-1) var(--sp-3); font-size:var(--fs-12); font-weight:600; color:var(--muted)}
.tf-boite .tf-grp-t .cnt{font-size:var(--fs-12); font-weight:500; color:var(--muted)}
.tf-boite .tf-grp-s{padding:0 var(--sp-2) var(--sp-1) var(--sp-3); font-size:var(--fs-12); line-height:1.35; color:var(--muted)}
.tf-boite .tf-item{display:flex; align-items:center; gap:var(--sp-2); width:100%; min-height:36px; padding:0 var(--sp-2) 0 var(--sp-3); border:0; border-radius:var(--r-sm); background:transparent; color:var(--ink-2); font:inherit; font-size:var(--fs-14); font-weight:500; text-align:left; cursor:pointer; transition:background var(--t-1) var(--ease), color var(--t-1) var(--ease)}
.tf-boite .tf-item:hover{background:var(--surface-douce); color:var(--ink)}
.tf-boite .tf-item.on,.tf-boite .tf-item.on:hover{background:var(--accent-soft); color:var(--ink); font-weight:600; box-shadow:inset 3px 0 0 var(--accent)}
.tf-boite .tf-item:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.tf-boite .tf-item .nm{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tf-boite .tf-item.off .nm{color:var(--muted); font-weight:500}
.tf-it-off{flex:none; font-size:var(--fs-11); font-weight:500; color:var(--muted)}
.tf-it-modif{flex:none; min-width:20px; height:20px; padding:0 var(--sp-15); border-radius:var(--r-pilule); background:var(--fond-alerte); color:var(--texte-alerte); font-size:var(--fs-12); font-weight:700; line-height:20px; text-align:center; font-variant-numeric:tabular-nums}
.tf-boite .tf-reg{margin-left:0; font-size:var(--fs-11); letter-spacing:0; border-radius:var(--r-xs)}
.tf-boite .tf-save{margin:var(--sp-3) var(--sp-2) 0; padding:var(--sp-3) 0 0; border-top:1px solid var(--border)}
.tf-boite .tf-save .sub{margin:0; font-size:var(--fs-12); line-height:1.5}
.tf-boite .tf-selrang{display:none}
.tf-selmob-l{flex:none; font-size:var(--fs-12); font-weight:500; color:var(--muted)}
.tf-boite>.tf-main{min-width:0}
.tf-boite .ds-sq{padding:var(--sp-4)}
.tf-boite .tf-carte{padding:var(--sp-4) var(--sp-5) var(--sp-5)}
.tf-boite .tf-head{display:flex; align-items:flex-start; gap:var(--sp-3); padding:0 0 var(--sp-3); border-bottom:1px solid var(--border); flex-wrap:nowrap}
.tf-boite .tf-titre-bloc{flex:1 1 auto; min-width:0}
.tf-boite .tf-title{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin:0; font-size:var(--fs-20); font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.tf-boite .tf-title .pill{font-size:var(--fs-12)}
.tf-boite #tfMeta{margin:var(--sp-1) 0 0; font-size:var(--fs-13)}
.tf-tel-actions{display:none; flex:none; align-items:center; gap:var(--sp-2)}
.tf-boite .tf-outils{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin:var(--sp-3) 0 var(--sp-2)}
.tf-boite .tf-outils .ds-champ{width:min(320px,100%)}
.tf-boite .tf-outils .spacer{flex:1 1 auto}
/* la barre de la plage (Maj+clic, Maj+flèches) */
.tf-selbarre{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-2); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--accent-soft)}
.tf-selbarre[hidden]{display:none}
.tf-sel-n{margin-right:auto; font-size:var(--fs-13); color:var(--ink-2)}
.tf-sel-n b{color:var(--ink)}
/* la ligne de la case : la case active, en clair, et ses gestes */
.tf-caseinfo{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-3); min-height:44px; margin:0 0 var(--sp-2); padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-douce); font-size:var(--fs-13); line-height:1.45; color:var(--ink-2)}
.tf-caseinfo:empty{display:none}
.tf-ci-qui b{color:var(--ink); font-weight:600}
.tf-ci-faits{display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); font-variant-numeric:tabular-nums}
.tf-ci-faits b{color:var(--ink)}
.tf-ci-motif{display:inline-flex; align-items:flex-start; gap:var(--sp-1); flex:1 1 260px; min-width:0; color:var(--texte-alerte); font-weight:500}
.tf-ci-motif.ko{color:var(--texte-danger)}
.tf-ci-motif .svgi{flex:none; width:14px; height:14px; margin-top:var(--sp-05)}
.tf-ci-g{display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1); margin-left:auto}
.tf-ci-aide{display:inline-flex; align-items:center; gap:var(--sp-2); color:var(--muted)}
.tf-ci-aide .svgi{flex:none; width:14px; height:14px}
/* LA GRILLE */
.tf-boite .tf-grille{min-width:0}
.tf-boite .tf-grille thead th{font-size:var(--fs-12); font-weight:500; color:var(--muted)}
.tf-boite .tf-grille th.tf-ph{padding-right:calc(var(--sp-2) + var(--sp-3)); text-align:right}
.tf-boite .tf-grille td{vertical-align:middle}
.tf-boite .tf-grille td.tf-route{min-width:170px}
.tf-boite .tf-grille td.tf-cell{padding:var(--sp-1) var(--sp-1); text-align:right; white-space:nowrap}
.tf-boite .tf-grille .tf-inwrap{display:inline-flex; align-items:center; justify-content:flex-end; gap:var(--sp-1)}
.tf-boite .tf-grille .tf-in{width:84px; height:var(--h-md); padding:0 var(--sp-2); border:1px solid transparent; border-radius:var(--r-sm); background:transparent; font-size:var(--fs-14); font-weight:500; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); transition:border-color var(--t-1) var(--ease), background var(--t-1) var(--ease)}
.tf-boite .tf-grille .tf-in:hover{border-color:var(--border-strong); background:var(--surface)}
.tf-boite .tf-grille td.tf-cell:focus-within .tf-in,.tf-boite .tf-grille .tf-in:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.tf-boite .tf-grille td.tf-cell:not([class*="tf-c-"]):focus-within .tf-in{background:var(--surface)}
.tf-boite .tf-grille td.tf-case-active:not(:focus-within) .tf-in{border-color:var(--accent-border)}
.tf-boite .tf-grille td.tf-dans-plage{background:var(--accent-soft)}
.tf-boite .tf-grille td.tf-c-modif .tf-in,.tf-boite .tf-grille td.tf-c-confirme .tf-in{background:var(--fond-alerte); color:var(--ink)}
.tf-boite .tf-grille td.tf-c-confirme .tf-in{box-shadow:inset 0 -2px 0 var(--point-alerte)}
.tf-boite .tf-grille :is(td.tf-c-alerte,td.tf-c-invalide,td.tf-c-bloque,td.tf-c-refuse) .tf-in{background:var(--fond-danger); border-color:var(--point-danger); color:var(--texte-danger)}
.tf-boite .tf-grille :is(td.tf-c-alerte,td.tf-c-invalide,td.tf-c-bloque,td.tf-c-refuse):focus-within .tf-in{box-shadow:0 0 0 1px var(--point-danger)}
.tf-boite .tf-grille td.tf-c-sous .tf-in{box-shadow:inset 0 -2px 0 var(--point-alerte)}
.tf-boite .tf-grille td.ve-hot:not([class*="tf-c-"]) .tf-in{box-shadow:inset 0 -2px 0 var(--point-danger)}
.tf-boite .tf-grille tr.tf-l-modif>td:first-child{box-shadow:inset 2px 0 0 var(--point-alerte)}
/* le prix d'avant, au survol d'une case modifiée */
.tf-boite .tf-grille td.tf-cell[data-avant]{position:relative}
.tf-boite .tf-grille td.tf-cell[data-avant]:hover::after{content:attr(data-avant); position:absolute; right:var(--sp-1); bottom:calc(100% - var(--sp-1)); z-index:var(--z-collant); padding:var(--sp-05) var(--sp-2); border-radius:var(--r-xs); background:var(--ink); color:var(--page); font-size:var(--fs-12); font-weight:500; white-space:nowrap; pointer-events:none}
.tf-boite .tf-grille td.mkcol{width:200px; text-align:left; white-space:normal}
.tf-boite .tf-grille td.tf-route b{overflow-wrap:normal; word-break:normal}
.tf-boite .tf-grille td.mkcol .mk{white-space:normal}
.mk .mk-l{margin-right:var(--sp-1); font-weight:600; color:var(--ink-2)}
/* LA BARRE DE SAUVEGARDE CONTEXTUELLE (Polaris) */
.tf-boite .tf-lot{gap:var(--sp-2) var(--sp-4); margin:var(--sp-4) 0 0; padding:var(--sp-3) var(--sp-4); border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--elevated); box-shadow:var(--el-2)}
.tf-lot-t{flex-direction:row; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-3)}
.tf-lot-t b{color:var(--ink); font-size:var(--fs-15)}
.tf-lot-pt{flex:none; width:8px; height:8px; border-radius:var(--r-rond); background:var(--point-alerte); box-shadow:0 0 0 3px var(--fond-alerte)}
.tf-lot-verif{display:inline-flex; align-items:center; gap:var(--sp-1); padding:0; border:0; background:none; color:var(--texte-danger); font:inherit; font-size:var(--fs-14); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.tf-lot-verif .svgi{width:14px; height:14px}
.tf-lot-g{align-items:center}
/* LE RÉCAPITULATIF, PAR ROUTE (le panneau) */
.tf-recap{width:100%}
.tf-recap th,.tf-recap td{vertical-align:top}
.tf-recap tr.tf-recap-route>th{padding-top:var(--sp-3); background:var(--surface-douce); text-align:left; font-size:var(--fs-13); font-weight:600; color:var(--ink)}
.tf-recap tr.tf-recap-alerte>td:first-child{box-shadow:inset 2px 0 0 var(--point-alerte)}
.tf-recap :is(tr.tf-recap-ko,tr.tf-lot-bloque)>td:first-child{box-shadow:inset 2px 0 0 var(--point-danger)}
.tf-recap .tf-av{white-space:nowrap}
.tf-recap td .rowsub{white-space:normal}
.tf-recap td .ds-btn{margin-top:var(--sp-1)}
.tf-recap-g{display:flex; flex-wrap:wrap; gap:var(--sp-1)}
/* le motif d'un prix et ses gestes, sur la ligne d'en dessous, pleine largeur */
.tf-recap tr.tf-recap-a-suite>td{border-bottom:0}
.tf-recap tr.tf-recap-suite>td{padding-top:0; white-space:normal; text-align:left}
.tf-recap-s{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-3)}
.tf-recap-motif{flex:1 1 240px; min-width:0; font-size:var(--fs-12); line-height:1.45; color:var(--muted)}
.tf-recap tr.tf-recap-alerte .tf-recap-motif{color:var(--texte-alerte)}
.tf-recap :is(tr.tf-recap-ko,tr.tf-lot-bloque) .tf-recap-motif{color:var(--texte-danger)}
.tf-recap .tf-recap-s .ds-btn{margin-top:0}
.tf-recap-bloque{display:flex; align-items:flex-start; gap:var(--sp-2); margin:var(--sp-3) 0 0; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--fond-danger); color:var(--texte-danger); font-size:var(--fs-13); font-weight:500}
.tf-recap-bloque .svgi{flex:none; width:16px; height:16px; margin-top:var(--sp-05)}
@media (max-width:1040px){
  .tf-boite{grid-template-columns:minmax(0,1fr)}
  .tf-boite>.tf-side{position:static; max-height:none; overflow:visible; padding:var(--sp-3) var(--sp-4); border-right:0; border-bottom:1px solid var(--border)}
  .tf-boite .tf-side-h,.tf-boite .tf-side .tf-srch,.tf-boite .tf-list,.tf-boite .tf-save{display:none}
  .tf-boite .tf-selrang{display:flex; align-items:center; gap:var(--sp-2)}
  .tf-boite .tf-selrang .tf-selmob{flex:1 1 auto; min-width:0; margin:0}
  .tf-tel-actions{display:flex}
}
@media (max-width:760px){
  .tf-boite .tf-carte{padding:var(--sp-3) var(--sp-4) var(--sp-4)}
  .tf-boite .tf-title{font-size:var(--fs-16)}
  .tf-tel-actions .ds-btn{width:var(--h-touch); height:var(--h-touch)}
  .tf-boite .tf-outils .ds-champ{width:auto; flex:1 1 100%; height:var(--h-touch)}
  .tf-boite .tf-outils .spacer{display:none}
  .tf-boite .tf-outils .ds-btn{flex:1 1 auto; height:var(--h-touch)}
  .tf-caseinfo.tf-ci-on{position:sticky; top:var(--haut-barre); z-index:var(--z-collant); box-shadow:var(--el-1)}
  .tf-ci-g{margin-left:0}
  .tf-ci-g .ds-btn{min-height:var(--h-touch)}
  .tf-boite .tf-grille .tf-in{width:100%; height:var(--h-touch); font-size:var(--fs-input-mobile)}
  .tf-boite .tf-grille td.tf-cell{padding:0}
  .tf-boite .tf-grille .tf-inwrap{display:flex; width:100%}
  .tf-boite .tf-grille td.tf-cell[data-avant]:hover::after{display:none}
  .tf-boite .tf-lot{padding:var(--sp-3)}
  .tf-lot-gj{display:none}
  .tf-recap tr:not(.tf-recap-route){display:grid; grid-template-columns:minmax(56px,auto) minmax(0,1fr) minmax(0,auto); gap:var(--sp-1) var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--grid)}
  .tf-recap thead{display:none}
  .tf-recap tr:not(.tf-recap-route)>td{display:block; padding:0; border:0}
  .tf-recap tr:not(.tf-recap-route)>td:last-child{grid-column:1/-1}
  .tf-recap tr.tf-recap-a-suite{padding-bottom:0; border-bottom:0}
  .tf-recap tr.tf-recap-suite{padding-top:var(--sp-1)}
  .tf-recap tr.tf-recap-route>th{display:block}
}
/* LE SIMULATEUR : le formulaire en une colonne, à gauche (collant), le résultat à droite ; dessous au téléphone */
#s-simulateur .sim-wrap{display:grid; grid-template-columns:minmax(300px,380px) minmax(0,1fr); gap:var(--sp-5); align-items:start}
#s-simulateur .sim-wrap>.sim-form{position:sticky; top:calc(var(--haut-barre) + var(--sp-3)); padding:var(--sp-4) var(--sp-5) var(--sp-5)}
#s-simulateur .sim-form .sim-grille{grid-template-columns:minmax(0,1fr); gap:var(--sp-3)}
#s-simulateur .sim-form .sim-grille>.field,#s-simulateur .sim-form :is(.sim-f-depart,.sim-f-arrivee,.sim-f-quand){grid-column:1/-1}
.sim-duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-2) var(--sp-3)}
.sim-aide{margin:var(--sp-1) 0 0; font-size:var(--fs-12); line-height:1.4; color:var(--muted)}
#s-simulateur .sim-go{padding-top:var(--sp-1)}
#s-simulateur .sim-go .btn{flex:1 1 100%; justify-content:center}
#s-simulateur .sim-res .sim-cols{grid-template-columns:minmax(0,1fr)}
.sim-essentiel .ds-bande>*{padding:var(--sp-4)}
.sim-essentiel .ds-chiffre .v{font-size:var(--fs-22)}
@media (min-width:1600px){ #s-simulateur .sim-res .sim-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media (min-width:1101px){ #s-simulateur .sim-rappel{display:none} }
@media (max-width:1100px){
  #s-simulateur .sim-wrap{grid-template-columns:minmax(0,1fr)}
  #s-simulateur .sim-wrap>.sim-form{position:static}
}
@media (max-width:760px){
  #s-simulateur .sim-wrap>.sim-form{padding:var(--sp-4)}
  .sim-essentiel .ds-bande{grid-auto-flow:row; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sim-essentiel .ds-bande>*{padding:var(--sp-3)}
}
/* la case « proposé » s'efface quand le prix est proposé : elle revient au survol de la ligne, sur la case active, ou éteinte */
@media (hover:hover){
  .tf-boite .tf-grille td.tf-cell:not(.off) .tf-tog{opacity:0; transition:opacity var(--t-1) var(--ease)}
  .tf-boite .tf-grille tr:hover td.tf-cell .tf-tog,.tf-boite .tf-grille td.tf-cell:focus-within .tf-tog{opacity:1}
}
.tf-recap :is(th,td):last-child{min-width:110px; text-align:left}
#s-simulateur .sim-form>.ch{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); margin:0}
#s-simulateur .sim-form>.ch h3{margin:0}
@media (max-width:760px){
  #s-prices .tf-outils #tfAjuster{width:auto; padding:0 var(--sp-3)}
  .tf-boite .tf-grille .tf-in{border-color:var(--border); background:var(--surface)}
}

/* ====== LOT T2 — TARIFS : ACHAT, MES TARIFS, MAJORATIONS, OPTIONS & ZONES, CODES PROMO, ARRÊT DES VENTES DANS L'ANATOMIE « ITINÉRAIRE » (07/10/2026 : « améliore les fonctionnalités et le design de l'admin ») ======
   DIRECTION § 3.2 à 3.10, § 5.11 ; les modèles : Réservations (lot E1L), Flottes (lot O2), Véhicules et Canaux (lot O4), Paiements et
   Factures (lot P1), dont les classes .ent-* (tableau, gestes flottants, fiche du panneau, téléphone en deux lignes) sont reprises telles
   quelles. Ici, ce qui est propre aux onglets de Tarifs : les largeurs de leurs colonnes, ce qui se cache quand la place manque ou que la
   fiche est à côté, leurs icônes d'objet, leurs formulaires en une colonne dans le panneau. Des jetons seulement ; le sombre suit les jetons. */

/* ---- Les onglets de Tarifs : la barre de vue (les vues défilent sous un fondu), les puces, les zones vides ---- */
:is(#s-arrets,#s-promos,#s-surcharges,#s-options,#s-zones,#s-fournisseurs) .ds-vue .vues{padding-right:var(--sp-6); -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
:is(#arvPuces,#promoPuces,#scPuces,#zoPuces) .ds-filtres{padding:var(--sp-15) 0}
:is(#arvPuces,#arvAlertes,#promoPuces,#promoAlerte,#scPuces,#zoPuces):empty{display:none}
#arvAlertes>*{margin-bottom:var(--sp-3)}

/* ---- Arrêt des ventes : le tableau — le nom et son motif d'abord (220 px au moins), le créneau en clair sur deux lignes ---- */
.arv-t th[data-col="quand"]{width:224px}
.arv-t th[data-col="zones"]{width:148px}
.arv-t th[data-col="voitures"]{width:132px}
.arv-t th[data-col="etat"]{width:176px}
.arv-t th[data-col="refus"]{width:112px}
.arv-t td{line-height:1.35}
.arv-nom b{display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.arv-t .arv-motif{flex-wrap:nowrap; margin-top:var(--sp-05); white-space:nowrap; overflow:hidden}
.arv-t .arv-motif>span{min-width:0; overflow:hidden; text-overflow:ellipsis}
.arv-t .arv-motif .ds-lien,.arv-t .arv-motif-ajout{flex:none}
.arv-quand{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:normal}
.t2-tags{display:inline-flex; align-items:center; gap:var(--sp-1); max-width:100%; min-width:0; vertical-align:middle}
.t2-tags .ds-tag{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ds-tag.t2-tag-warn{background:var(--alerte-doux); color:var(--texte-alerte)}
.arv-refus{font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink)}
.arv-carte-t.serre .arv-t :is([data-col="voitures"],[data-c="voitures"]){display:none}
.arv-carte-t.serre2 .arv-t :is([data-col="zones"],[data-c="zones"]){display:none}
.arv-carte-t.serre3 .arv-t :is([data-col="refus"],[data-c="refus"]){display:none}
/* l'icône d'un arrêt : teintée par son état (rouge : il ferme maintenant ; ambre : il fermera) — l'état est aussi dit en mots */
.vh-ico.t2-ico.danger{background:var(--danger-doux); color:var(--texte-danger)}
.vh-ico.t2-ico.alerte{background:var(--alerte-doux); color:var(--texte-alerte)}
.arv-legende .ds-lien{display:inline-flex; align-items:center; gap:var(--sp-05)}
.arv-legende .ds-lien .svgi{width:12px; height:12px}
/* « Vérifier un créneau » (ne crée rien) : quatre champs sur une ligne quand ils tiennent, sinon deux, puis un */
.arv-verif-carte{margin:0 0 var(--sp-6)}
.arv-verif{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--sp-3)}
.arv-verif .field{margin:0}
.arv-verif-res{font-size:var(--fs-13); color:var(--ink-2)}
.arv-verif-res .ds-statut{margin-right:var(--sp-1)}

/* ---- Arrêt des ventes : la fiche ouverte à côté (panneau ancré, ≥ 1280 px) — Nom, Quand, État, Refusées, gestes ---- */
@media (min-width:1280px){
  html.pn-on.pn-ancre #s-arrets .arv-t :is([data-col="zones"],[data-c="zones"],[data-col="voitures"],[data-c="voitures"]){display:none}
  html.pn-on.pn-ancre #s-arrets .arv-t td.gestes .ds-btn:not([data-avplusl]){display:none}
  html.pn-on.pn-ancre #topbar:is([data-ecran="arrets"],[data-ecran="promos"],[data-ecran="zones"],[data-ecran="surcharges"],[data-ecran="options"],[data-ecran="fournisseurs"]) #pageActions .ds-btn:not(.icone){width:32px; padding:0}
  html.pn-on.pn-ancre #topbar:is([data-ecran="arrets"],[data-ecran="promos"],[data-ecran="zones"],[data-ecran="surcharges"],[data-ecran="options"],[data-ecran="fournisseurs"]) #pageActions .ds-btn:not(.icone)>:is(span,kbd):not(.svgi){position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
}

/* ---- Arrêt des ventes : la fiche (le panneau de 520 px) et son formulaire en une colonne ---- */
.arv-ft{align-items:start}
.arv-ft .vh-ico{align-self:start}
.t2-pq{margin:0; font-size:var(--fs-14); line-height:1.5; color:var(--ink); overflow-wrap:anywhere}
.t2-pq.muted{color:var(--muted)}
.t2-pq+.ds-dl{margin-top:var(--sp-3)}
.arv-fiche .t2-tags{flex-wrap:wrap}
.arv-fiche .arv-aide{margin:var(--sp-2) 0 0}
.arv-courses{margin-top:var(--sp-2)}
.t2-danger{padding:var(--sp-4) var(--sp-5) 0}
.t2-danger .ds-btn{color:var(--texte-danger)}
.t2-form{display:flex; flex-direction:column; gap:var(--sp-3); max-width:640px}
.t2-form .field{margin:0}
.t2-form .f-aide{margin:var(--sp-1) 0 0}
.t2-form .arv-presets{margin:0}
.arv-choix{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-3)}
.t2-form .go,.arv-motif-form .go{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--sp-2); margin-top:var(--sp-2)}
.arv-motif-form .field{margin:0}

/* ---- Arrêt des ventes au téléphone (≤ 1040 px) — un arrêt, deux lignes ---- */
.arv-li .ent-li-d .ds-statut{font-size:var(--fs-12)}
@media (max-width:1040px){
  :is(#arvPuces,#promoPuces,#scPuces,#zoPuces) .ds-filtres{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--sp-3)); padding:var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
    -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
  :is(#arvPuces,#promoPuces,#scPuces,#zoPuces) .ds-filtres::-webkit-scrollbar{display:none}
  :is(#arvPuces,#promoPuces,#scPuces,#zoPuces) .ds-filtres>*{flex:none}
  :is(#arvPuces,#promoPuces,#scPuces,#zoPuces) .bilan{margin-left:var(--sp-2)}
  :is(#arvPuces,#promoPuces,#scPuces,#zoPuces) :is(.ds-puce,.ds-puce.ajout){height:32px; min-height:0}
  :is(#s-arrets,#s-promos,#s-surcharges,#s-options,#s-zones,#s-fournisseurs) .ds-vue .ds-champ:not(:focus-within):not(:has(input:not(:placeholder-shown))) .ds-kbd{display:none}
}
@media (max-width:760px){
  .arv-verif-go .ds-btn{flex:1 1 auto; min-height:var(--h-touch)}
  .t2-danger{padding:var(--sp-3) var(--sp-4) 0}
  .t2-form .go .ds-btn,.arv-motif-form .go .ds-btn{flex:1 1 auto; min-height:var(--h-touch)}
}

/* ---- Partagé : l'icône d'objet verte (un code actif), le bandeau d'une liste qui garde ses données après un échec (§ 3.9) ---- */
.vh-ico.t2-ico.ok{background:var(--ok-doux); color:var(--texte-ok)}
.t2-bandeau{display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-3); padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border-radius:var(--r-md);
  background:var(--fond-danger); color:var(--texte-danger); font-size:var(--fs-13); line-height:1.5}
.t2-bandeau>.svgi{width:16px; height:16px; flex:none}
.t2-bandeau p{flex:1; min-width:0; margin:0}
.t2-bandeau b{font-weight:600}

/* ---- Codes promo : le tableau — le code (200 px au moins), la remise, les conditions sur deux lignes, la validité, les chiffres ---- */
.pr-t th[data-col="remise"]{width:136px}
.pr-t th[data-col="conditions"]{width:232px}
.pr-t th[data-col="validite"]{width:200px}
.pr-t th[data-col="usages"]{width:112px}
.pr-t th[data-col="remises"]{width:104px}
.pr-t th[data-col="etat"]{width:120px}
.pr-code{font-weight:600; letter-spacing:.02em}
.pr-t td[data-c="remise"] .muted{font-size:var(--fs-12)}
.pr-cond{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:normal}
.pr-t td[data-c="validite"]{white-space:normal}
.pr-carte-t.serre .pr-t :is([data-col="conditions"],[data-c="conditions"]){display:none}
.pr-carte-t.serre2 .pr-t :is([data-col="validite"],[data-c="validite"]){display:none}
.pr-carte-t.serre3 .pr-t :is([data-col="remises"],[data-c="remises"]){display:none}
/* la fiche ouverte à côté (panneau ancré, ≥ 1280 px) : Code, Remise, Utilisations, Remises, État, « … » */
@media (min-width:1280px){
  html.pn-on.pn-ancre #s-promos .pr-t :is([data-col="conditions"],[data-c="conditions"],[data-col="validite"],[data-c="validite"]){display:none}
  html.pn-on.pn-ancre #s-promos .pr-t td.gestes .ds-btn:not([data-promoplusl]){display:none}
}
.pr-vide-pied{display:flex; justify-content:center; padding:0 0 var(--sp-5)}
.pr-li .ent-li-d .ds-statut{font-size:var(--fs-12)}

/* ---- Codes promo : la fiche, ses utilisations, le formulaire et le testeur (une colonne dans le panneau) ---- */
.pr-ft{align-items:start}
.pr-ft .vh-ico{align-self:start}
.pr-fiche .t2-tags{flex-wrap:wrap}
.pr-usages{list-style:none; margin:0; padding:0}
.pr-usages li{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--border-doux)}
.pr-usages li:first-child{border-top:0}
.pr-u-c{display:flex; flex-direction:column; gap:var(--sp-05); min-width:0}
.pr-u-t{display:flex; align-items:center; gap:var(--sp-1); min-width:0}
.pr-u-s{font-size:var(--fs-12); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pr-usages .cash{flex:none; font-variant-numeric:tabular-nums}
.t2-pq+.pr-usages{margin-top:var(--sp-2)}
.pr-code-l{display:flex; gap:var(--sp-2)}
.pr-code-l input{flex:1; min-width:0}
.pr-coches{border:0; padding:0; margin:0; min-width:0}
.pr-coches legend{padding:0; margin-bottom:var(--sp-1); font-size:var(--fs-12); font-weight:500; color:var(--ink-2)}
.pr-coches .allist{display:flex; flex-wrap:wrap; gap:0 var(--sp-4)}
.pr-coches .alopt{font-size:var(--fs-13); font-weight:400; color:var(--ink)}
.pr-actif{margin:0}
.pr-test .sub{margin:0}
.pr-test-res{font-size:var(--fs-13); color:var(--ink-2); line-height:1.5}
.pr-test-res:empty{display:none}
.pr-test-res .ds-statut{margin-right:var(--sp-1)}

/* ---- Majorations : le tableau — la règle et son moment (200 px au moins), le supplément, la réservation, les zones, les paliers,
   ce que font les concurrents ---- */
.sc-t th[data-col="fee"]{width:120px}
.sc-t th[data-col="resa"]{width:184px}
.sc-t th[data-col="zones"]{width:148px}
.sc-t th[data-col="paliers"]{width:200px}
.sc-t th[data-col="concurrents"]{width:152px}
.sc-nom{font-weight:600}
.sc-t td[data-c="resa"],.sc-t td[data-c="concurrents"]{white-space:normal}
.sc-pal-txt{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:normal; font-size:var(--fs-13); color:var(--ink-2)}
.sc-carte-t.serre .sc-t :is([data-col="paliers"],[data-c="paliers"]){display:none}
.sc-carte-t.serre2 .sc-t :is([data-col="zones"],[data-c="zones"]){display:none}
.sc-carte-t.serre3 .sc-t :is([data-col="resa"],[data-c="resa"]){display:none}
@media (min-width:1280px){
  html.pn-on.pn-ancre #s-surcharges .sc-t :is([data-col="resa"],[data-c="resa"],[data-col="zones"],[data-c="zones"],[data-col="paliers"],[data-c="paliers"]){display:none}
  html.pn-on.pn-ancre #s-surcharges .sc-t td.gestes .ds-btn:not([data-scplusl]){display:none}
}
.sc-li .ent-li-d .ds-btn{min-width:var(--h-touch); min-height:var(--h-touch)}

/* ---- Majorations : la fiche d'une règle (ses paliers en liste, sans carte dans la carte) ---- */
.sc-ft{align-items:start}
.sc-ft .vh-ico{align-self:start}
.sc-fiche .t2-tags{flex-wrap:wrap}
.sc-paliers{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-05)}
.sc-paliers li{display:flex; justify-content:space-between; gap:var(--sp-3); font-variant-numeric:tabular-nums}
.sc-paliers b{font-weight:600}

/* ---- Majorations : « Concurrents Trip », une carte propre — les réglages sur une ligne, trois chiffres en bande, les graphiques ---- */
.scv-carte{padding:var(--sp-5) var(--sp-6)}
.scv-carte>summary .ds-lien{margin-left:auto}
.scv-outils{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); margin:0 0 var(--sp-4)}
.scv-l{font-size:var(--fs-12); color:var(--muted)}
.scv-esp{flex:1 1 auto}
.scv-bande{margin:0 0 var(--sp-3)}
@media (max-width:760px){
  .scv-carte{padding:var(--sp-4)}
  .scv-outils .ds-segment{flex:1 1 100%}
  .scv-outils .ds-segment button{flex:1 1 0}
  .scv-outils .ds-btn{flex:1 1 100%; min-height:var(--h-touch)}
}

/* ---- Options : une option par ligne — le nom et sa description, qui paie, le prix, obligatoire ---- */
.oz-t th[data-col="qui"]{width:140px}
.oz-t th[data-col="prix"]{width:150px}
.oz-t th[data-col="oblig"]{width:150px}
.oz-t tr.oz-lecture{cursor:default}

/* ---- Zones : la barre des quatre vues, puis « Par zone » — la zone (220 px au moins) et ses six comptes, chacun un lien vers sa section ---- */
.zones-onglets{margin-bottom:var(--sp-1)}
.zo-t th[data-col="vente"],.zo-t th[data-col="achat"],.zo-t th[data-col="regles"],.zo-t th[data-col="arrets"]{width:92px}
.zo-t th[data-col="client"]{width:116px}
.zo-t th[data-col="courses"]{width:116px}
.zo-nom{display:flex; align-items:center; gap:var(--sp-15); min-width:0}
.zo-nom b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.zo-nom .ds-tag{flex:none}
.zo-sans{color:var(--texte-alerte)}
.zo-n{min-width:32px; height:28px; padding:0 var(--sp-15); border:0; border-radius:var(--r-sm); background:none; color:var(--ink); font:inherit; font-variant-numeric:tabular-nums; cursor:pointer}
.zo-n:hover{background:var(--accent-soft); color:var(--texte-accent); text-decoration:underline}
.zo-n:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.zo-n.alerte{color:var(--texte-alerte); font-weight:600}
.zo-t td.num .zo-n{margin-right:calc(-1 * var(--sp-15))}
.zo-carte-t.serre .zo-t :is([data-col="regles"],[data-c="regles"]){display:none}
.zo-carte-t.serre2 .zo-t :is([data-col="client"],[data-c="client"]){display:none}
.zo-carte-t.serre3 .zo-t :is([data-col="achat"],[data-c="achat"]){display:none}
@media (min-width:1280px){
  html.pn-on.pn-ancre #s-zones .zo-t :is([data-col="client"],[data-c="client"],[data-col="achat"],[data-c="achat"],[data-col="regles"],[data-c="regles"]){display:none}
}
.zo-li .ent-li-d .ds-statut{font-size:var(--fs-12)}

/* ---- Zones : la fiche d'une zone — des listes à filets (tarifs, grilles, règles, arrêts, délégation), dépliables quand elles sont longues ---- */
.zo-ft{align-items:start}
.zo-ft .vh-ico{align-self:start}
.zo-l{list-style:none; margin:0; padding:0}
.zo-l li{display:flex; flex-direction:column; gap:var(--sp-05); padding:var(--sp-2) 0; border-top:1px solid var(--border-doux)}
.zo-l li:first-child{border-top:0}
.zo-l-t{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); min-width:0; font-size:var(--fs-14)}
.zo-l-s{font-size:var(--fs-12); color:var(--muted); font-variant-numeric:tabular-nums}
.zo-regles{margin-top:var(--sp-1)}
.zo-det{padding:var(--sp-2) 0; border-top:1px solid var(--border-doux)}
.zo-det:first-of-type{border-top:0; padding-top:0}
.zo-det>summary{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); cursor:pointer; list-style:none; min-height:var(--h-sm)}
.zo-det>summary::-webkit-details-marker{display:none}
.zo-det>summary .muted{font-size:var(--fs-13)}
.zo-det[open]>summary{margin-bottom:var(--sp-1)}
.zo-det>.ds-lien{display:inline-block; margin-top:var(--sp-2)}

/* ---- Zones › GoodJourney : le type en segment compté, une zone par ligne (sa silhouette, son nom) ---- */
.ozg-outils{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin:var(--sp-3) 0}
.ozg-t th[data-col="cree"]{width:140px}
.ozg-t th[data-col="dispatch"],.ozg-t th[data-col="pickup"]{width:190px}
.ozg-t tbody tr{cursor:default}
.ozg-li{cursor:default}
.ozg-sil{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:var(--r-sm); background:var(--surface-2)}
@media (max-width:760px){
  .ozg-outils .ds-segment{flex:1 1 100%}
}

/* ---- Achat : la liste des grilles en fils, rangés par flotte — le nom (et « À relire » en ambre), puis l'état en clair ; elle reste
   en vue sous la barre quand la grille ouverte est longue ---- */
.ds-carte.ga-side{position:sticky; top:calc(var(--haut-barre) + var(--vue-h) + var(--sp-3)); max-height:calc(100vh - var(--haut-barre) - var(--vue-h) - var(--sp-6)); padding:var(--sp-3) var(--sp-2)}
.ga-item{flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:var(--sp-05); padding:var(--sp-2) var(--sp-3)}
.ga-l1{display:flex; align-items:center; gap:var(--sp-2); min-width:0}
.ga-l1 .ga-nm{flex:1 1 auto; color:var(--ink)}
.ga-item:has(.t2-tag-warn) .ga-nm{font-weight:600}
.ga-l1 .ds-tag{flex:none}
.ga-l2{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-05) var(--sp-2); font-size:var(--fs-12); color:var(--muted); font-weight:400}
.ga-l2 .ds-statut{font-size:var(--fs-12)}
.ga-l2>:is(.ga-fil-n,.ga-off)::before{content:"·"; margin-right:var(--sp-2)}
.ga-l2 .ga-off{flex-basis:auto; font-size:var(--fs-12)}
.ds-statut.t2-st-prog{--st-c:var(--texte-accent); --st-p:var(--accent); --st-f:var(--accent-soft)}

/* ---- Achat et Mes tarifs : la grille ouverte — son en-tête d'objet, sa bande (entre deux filets), la proposition en « prochain geste » ---- */
#gaCorps>:first-child,#mtCorps>.ent-barre+.ds-carte{margin-top:var(--sp-3)}
.ga-tete{align-items:center}
.ga-tete>.vh-ico{align-self:flex-start}
.ga-bande .ds-bande{border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.ga-bande .ds-bande>*{padding:var(--sp-3) var(--sp-4)}
.ga-bande .ds-bande>:first-child{padding-left:0}
.ga-bande .ds-bande>*+*::before{top:var(--sp-3); bottom:var(--sp-3)}
.ga-bande .ds-chiffre .v{font-size:var(--fs-18)}
.ga-bande .ds-chiffre .s{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ga-fiche .ga-bande .ds-chiffre.alerte .v{color:var(--texte-alerte)}
.ga-geste .ds-geste p .ge-note{display:block; margin-top:var(--sp-2)}
.ga-geste .ds-geste p .sub{display:block; margin-top:var(--sp-1)}
.ga-geste .ds-geste p b{font-weight:600; color:var(--ink)}
.ga-geste .ge-decision{flex:1 1 100%; margin:0; padding:0; border:0}
/* les quatre décisions sur une rangée (dans la grille ouverte comme dans « À relire ») : programmer et refuser se déplient dessous */
:is(.ga-geste,.ge-revue) .ge-decision{flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:var(--sp-2)}
:is(.ga-geste,.ge-revue) .ge-dec-go{display:contents}
:is(.ga-geste,.ge-revue) .ge-decision>.ge-ajout{border:0; background:none}
:is(.ga-geste,.ge-revue) .ge-decision>.ge-ajout>summary{display:inline-flex; height:var(--h-sm); padding:0 var(--sp-3); border-radius:var(--r-sm); background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border-strong); font-size:var(--fs-14); font-weight:500; color:var(--ink)}
:is(.ga-geste,.ge-revue) .ge-decision>.ge-ajout>summary:hover{background:var(--surface-douce)}
:is(.ga-geste,.ge-revue) .ge-decision>.ge-ajout[open]{flex:1 1 100%}
:is(.ga-geste,.ge-revue) .ge-decision>.ge-ajout[open]>summary{border-bottom:0; box-shadow:inset 0 0 0 1px var(--accent)}
:is(.ga-geste,.ge-revue) .ge-decision>.ge-ajout>.ge-form{padding:var(--sp-3) 0 var(--sp-1)}
.ge-revue .ge-decision{padding-top:var(--sp-4)}
/* l'effet sur ses trajets : une carte par trajet au téléphone, des filets dans la carte (pas une carte dans la carte) */
@media (max-width:700px){
  :is(.ga-fiche,.ge-revue) .dt.dt-cartes tbody tr{margin:0; padding:var(--sp-3) 0; border-radius:var(--r-nul); box-shadow:none; border-top:1px solid var(--grid)}
  :is(.ga-fiche,.ge-revue) .dt.dt-cartes tbody tr:first-child{border-top:0}
  :is(.ga-fiche,.ge-revue) .dt.dt-cartes td{padding-left:0; padding-right:0}
  :is(.ga-fiche,.ge-revue) .dt-cartes.ge-impact tbody tr{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--sp-4)}
  :is(.ga-fiche,.ge-revue) .dt-cartes.ge-impact td:is(:first-child,:nth-child(6)){grid-column:1/-1}
}
@media (max-width:1040px){
  .ds-carte.ga-side{position:static; max-height:none; padding:var(--sp-3) var(--sp-4)}
}
@media (max-width:760px){
  .ds-carte:is(.ga-fiche,.mt-fiche,.ge-revue){padding:var(--sp-4)}
  .ga-tete .ga-titre{flex:1 1 0}
  .ga-tete .ga-gestes .ds-btn{flex:1 1 auto; min-height:var(--h-touch)}
  .ga-bande .ds-bande>*{padding:var(--sp-3) var(--sp-3) var(--sp-3) 0}
  :is(.ga-geste,.ge-revue) .ge-decision .ge-dec-go>.ds-btn,:is(.ga-geste,.ge-revue) .ge-decision>.ge-ajout{flex:1 1 100%}
  :is(.ga-geste,.ge-revue) .ge-decision .ds-btn{min-height:var(--h-touch)}
  :is(.ga-geste,.ge-revue) .ge-decision>.ge-ajout>summary{display:flex; justify-content:center; height:auto; min-height:var(--h-touch)}
  .ga-geste .ds-geste .liens>.ds-btn{flex:1 1 100%; min-height:var(--h-touch)}
}

/* ====== LOT F2 — FINANCES, SUITE : RÉSULTAT DÉTAILLÉ, TRÉSORERIE, RAPPROCHEMENT, CHARGES, CLÔTURE, REPRISE & CORRECTIONS, ENVOI DES RELEVÉS DANS L'ANATOMIE « ITINÉRAIRE » (07/10/2026 : « améliore les fonctionnalités et le design de l'admin ») ======
   DIRECTION § 4.1 (le régime PILOTAGE : des cartes en relief, UN héros par écran, des courbes en aire, les couleurs de catégorie — la
   référence Finary), § 3.3 à 3.10 (l'en-tête chiffré, la barre de vue, les puces et le bilan, le tableau standard, la fiche dans le
   panneau, les états) et § 5.9. Les modèles : Paiements et Factures (lot P1), L'essentiel (lot G), l'Analyse (le héros et sa bande).
   Des jetons seulement ; au téléphone (760 px), une ligne de deux par objet et des fiches plein écran. */

/* ---- ce que partagent les onglets : le montant négatif, l'œil mené à un bloc, la rangée des boutons d'un formulaire ---- */
:is(#finMount,#treMount,#rapMount,#chgMount,#cloMount,#histMount,#envMount,.pay-fiche) .neg{color:var(--texte-danger)}
@keyframes fi-eclaire{0%,100%{outline-color:transparent} 20%,80%{outline-color:var(--accent)}}
.fi-eclaire{outline:2px solid transparent; outline-offset:3px; animation:fi-eclaire calc(var(--t-4) * 5) var(--ease)}
@keyframes fi-eclaire-fond{0%,100%{background:var(--surface)} 20%,80%{background:var(--accent-soft)}}
tr.fi-eclaire{outline:0; animation:none}
tr.fi-eclaire td{animation:fi-eclaire-fond calc(var(--t-4) * 5) var(--ease)}
@media (prefers-reduced-motion:reduce){ .fi-eclaire{animation:none; outline-color:var(--accent)} tr.fi-eclaire td{animation:none; background:var(--accent-soft)} }
:is(#rapMount,#histMount,.pay-fiche,.imp-p-form) .go{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3)}
/* les puces sous la barre de vue (comme Paiements) ; rien de posé : rien */
:is(#chgPuces,#histPuces,#rapPuces,#envPuces) .ds-filtres{padding:var(--sp-15) 0}
:is(#chgPuces,#histPuces,#rapPuces,#envPuces):empty{display:none}
:is(#rapPuces,#envPuces,#histPuces):empty+:is(#rapCorps,#envCorps,#histVue){margin-top:var(--sp-3)}
:is(#s-charges,#s-historique,#s-rapprochement) .ds-vue .vues{padding-right:var(--sp-6); -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
:is(#s-tresorerie,#s-rapprochement,#s-clotures,#s-historique,#s-charges) .ds-carte{margin-bottom:var(--sp-4)}

/* ---- LE TABLEAU STANDARD des onglets (finTableHtml) : une carte, des colonnes posées, les montants à droite, le Total en pied ---- */
.fi-t{--th-h:32px}
:is(#s-charges,#s-historique,#s-rapprochement,#envMount,.fi-det) .fi-t{--vue-dessus:var(--vue-h)}
.pay-fiche .fi-t{--vue-dessus:0px}
.fi-t thead th:first-child{border-top-left-radius:var(--r-card)}
.fi-t thead th:last-child{border-top-right-radius:var(--r-card)}
.ds-carte-h~.fi-t thead th,.ds-carte-h~* .fi-t thead th{border-radius:var(--r-nul)}
.fi-t td{line-height:1.35}
.fi-t td .sous{margin-top:var(--sp-05); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fi-t td .fi-trajet{display:block; max-width:none}   /* un trajet trop long se termine par « … » au bord de sa colonne (le titre le dit en entier) */
.fi-t td.num .sous{text-align:right}
.fi-t tbody tr:not([tabindex]){cursor:default}
.fi-t tr:focus-visible{outline:0}
.fi-t tr:focus-visible td{background:var(--surface-douce)}
.fi-t td.gestes{padding-left:0; padding-right:var(--sp-2); text-overflow:clip}
.fi-t .gestes .ds-groupe-btn{gap:var(--sp-05)}
.fi-t tbody tr.pay-total td{height:44px; font-weight:600; background:var(--surface-douce); border-top:1px solid var(--border); border-bottom:0}
.fi-t tbody tr.pay-total:hover td{background:var(--surface-douce)}
.fi-t tbody tr.pay-total{cursor:default}
/* à la souris, comme Paiements : les gestes flottent au bout de la ligne survolée (sauf là où ils restent visibles) */
@media (hover:hover){
  .fi-t:not(.rap-lignes-t):not(.imp-fus-t) thead th[data-col="gestes"]{width:var(--sp-2); padding:0}
  .fi-t:not(.rap-lignes-t):not(.imp-fus-t) td.gestes{position:relative; padding:0; overflow:visible}
  .fi-t:not(.rap-lignes-t):not(.imp-fus-t) td.gestes .ds-groupe-btn{position:absolute; top:50%; right:var(--sp-2); z-index:var(--z-dessus); padding:var(--sp-05); border-radius:var(--r-md);
    background:var(--surface); box-shadow:var(--el-2); transform:translateY(-50%)}
  .fi-t:not(.rap-lignes-t):not(.imp-fus-t) tr:not(:hover):not(:focus-within) td.gestes .ds-groupe-btn{pointer-events:none}
}
/* au téléphone, les lignes de deux : une ligne qu'on ne touche pas n'a pas de main */
.pay-li.fi-li:not([role="button"]){cursor:default}
.pay-li.fi-li:not([role="button"]):active{background:none}

/* ---- RÉSULTAT DÉTAILLÉ : la barre, le héros (le bénéfice, sa puce, sa courbe), la bande des mesures ---- */
.fi-puces{display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-left:auto}
.fi-heros{margin-bottom:var(--sp-4)}
.fi-heros-tete{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--sp-3) var(--sp-4)}
.fi-heros-g{display:flex; flex-direction:column; gap:var(--sp-1); min-width:0}
.fi-heros-t{margin:0; font-size:var(--fs-14); font-weight:600; line-height:var(--lh-titre); color:var(--ink-2)}
.fi-heros-t span{font-weight:500; color:var(--muted)}
.fi-heros-v{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3)}
.fi-heros-val{display:inline-flex; align-items:baseline; gap:var(--sp-1); padding:0; border:0; background:none; font:inherit; color:var(--ink); text-align:left}
button.fi-heros-val{cursor:pointer}
button.fi-heros-val:hover b{color:var(--texte-accent)}
.fi-heros-val b{font-family:var(--font-num); font-size:var(--fs-44); font-weight:600; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.fi-heros-val small{font-size:var(--fs-20); font-weight:600; color:var(--muted)}
.fi-heros-val.neg b{color:var(--texte-danger)}
.fi-heros-val.zero b{color:var(--faint)}
.fi-heros-s{font-size:var(--fs-13); color:var(--muted)}
.fi-heros-d{flex:none}
.fi-heros-c{margin:var(--sp-3) calc(-1 * var(--sp-1)) 0}
.fi-heros .pil-def{margin-top:var(--sp-3)}
.fi-mesures{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:var(--sp-3) calc(-1 * var(--sp-5)) 0; padding:0; list-style:none; border-top:1px solid var(--border-doux); border-bottom:1px solid var(--border-doux)}
.fi-mesures>li{display:flex; min-width:0}
.fi-mesures>li+li{border-left:1px solid var(--border-doux)}
.fi-mes{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-05); width:100%; min-width:0; padding:var(--sp-3) var(--sp-5); border:0; border-radius:var(--r-nul); background:transparent;
  font:inherit; color:var(--ink); text-align:left; cursor:pointer}
.fi-mes:hover{background:var(--surface-2)}
.fi-mes-l{font-size:var(--fs-12); font-weight:600; color:var(--muted)}
.fi-mes>b{font-family:var(--font-num); font-size:var(--fs-20); font-weight:600; letter-spacing:-.015em; font-variant-numeric:tabular-nums}
.fi-mes>b.zero{color:var(--faint)}
.fi-mes-s{font-size:var(--fs-12); line-height:1.4; color:var(--muted)}
.fi-mes .kpi-vs{display:none}
/* le compte et, à côté, la répartition et les commissions ; « Tableau » prend toute la largeur */
.fi-grille>.ds-carte,.fi-col>.ds-carte{margin:0}
.fi-grille{gap:var(--sp-4); margin-bottom:var(--sp-4)}
.fi-grille.fi-grille-large{grid-template-columns:minmax(0,1fr)}
.fi-col{display:flex; flex-direction:column; gap:var(--sp-4); min-width:0}
.fi-compte .fi-et-l{min-width:0; overflow-wrap:anywhere}
.fi-rep-outils{display:inline-flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--sp-2)}
.fi-b100{display:block; width:100%; height:10px; margin:0 0 var(--sp-3); clip-path:inset(0 round var(--r-pilule))}
.fi-rangs{margin:0; padding:0; list-style:none}
.fi-rang{display:grid; grid-template-columns:10px minmax(0,1fr) auto auto auto; align-items:center; column-gap:var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--border-doux)}
.fi-rang:first-child{border-top:0}
.fi-pt{width:10px; height:10px}
.fi-rang-n{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-05); min-width:0}
.fi-rang-n .ds-mention,.fi-rang-n .fi-lib{max-width:100%; font-weight:600}
.fi-rang-va{font-size:var(--fs-12); color:var(--muted); text-decoration:none; cursor:pointer}
a.fi-rang-va:hover{color:var(--texte-accent); text-decoration:underline; text-underline-offset:2px}
.fi-rang-m{display:flex; flex-direction:column; align-items:flex-end; gap:var(--sp-05); white-space:nowrap}
.fi-rang-m small{font-size:var(--fs-12); color:var(--muted)}
.fi-rang-p{display:inline-flex; align-items:center; gap:var(--sp-2); min-width:84px; justify-content:flex-end; font-size:var(--fs-12); color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap}
.fi-part .fond{fill:var(--meter-track)}
.fi-part .part{fill:var(--fin-ca)}
.fi-rang-e{min-width:56px; font-size:var(--fs-12); text-align:right; white-space:nowrap}
.fi-rep-total{margin:var(--sp-3) 0 0; font-size:var(--fs-12); color:var(--muted)}
.fi-vt-cadre{margin:0 calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)); border-top:1px solid var(--border-doux)}
.fi-vt th[data-col="nom"]{width:auto}
.fi-vt th:is([data-col="courses"],[data-col="tauxMarge"],[data-col="part"],[data-col="ecart"]){width:88px}
.fi-vt th:is([data-col="caBrut"],[data-col="commissions"],[data-col="caNet"],[data-col="couts"],[data-col="margeBrute"]){width:112px}
.fi-vt thead th{position:static}
.fi-vt tbody tr.pay-total td{position:sticky; bottom:0; z-index:var(--z-collant)}   /* V80 : le total reste en vue quand la répartition est longue */
.fi-ct th[data-col="canal"]{width:auto}
.fi-ct th[data-col="courses"]{width:13%}
.fi-ct th:is([data-col="brut"],[data-col="comm"]){width:21%}
.fi-ct th[data-col="taux"]{width:16%}
.fi-ct thead th{position:static}
/* le détail des courses : sa barre de vue dans la carte, son tableau standard */
.fi-det .fi-det-barre .ds-vue{background:var(--surface)}
.fi-dt th[data-col="ref"]{width:156px}
.fi-dt th[data-col="date"]{width:108px}
.fi-dt th[data-col="trajet"]{width:auto}
.fi-dt th[data-col="canal"]{width:132px}
.fi-dt th:is([data-col="caBrut"],[data-col="commission"],[data-col="caNet"],[data-col="cout"],[data-col="marge"]){width:100px}
.fi-dt td[data-c="trajet"] .fi-trajet{display:block; max-width:none}
.fi-dt tr.fi-exclue td{background:var(--surface-douce)}
.fi-dliste .fi-trajet{max-width:none}

/* ---- TRÉSORERIE : les deux prochains gestes côte à côte, le héros (le solde prévisionnel), les postes, les semaines ---- */
.tre-gestes{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:var(--sp-3); margin-bottom:var(--sp-4)}
.tre-gestes .ds-geste p .lnk{min-height:0}
.tre-heros .fi-heros-v .ds-statut{font-size:var(--fs-12)}
.tre-heros .tre-hyp{margin-top:var(--sp-2)}
@media (min-width:1366px){ #s-tresorerie .fi-grille{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)} }
.tre-poste .tre-p-l{justify-content:flex-start; text-align:left; min-height:0}
.tre-t th[data-col="semaine"]{width:auto}
.tre-t th:is([data-col="entrees"],[data-col="sorties"],[data-col="solde"],[data-col="cumul"]){width:20%}
.tre-t thead th{position:static}
.tre-t tbody tr.tre-neg td:first-child{box-shadow:inset 3px 0 0 var(--point-danger)}
.tre-t tbody tr.tre-bas td,.tre-t tbody tr.tre-bas:hover td{background:var(--surface-douce)}   /* le point le plus bas : repéré ; en rouge seulement sous le solde d'aujourd'hui */
.tre-t tbody tr.tre-neg.tre-bas td,.tre-t tbody tr.tre-neg.tre-bas:hover td{background:var(--danger-doux)}
.tre-t td[data-c="semaine"] .ds-statut{font-size:var(--fs-12)}

/* ---- RAPPROCHEMENT : la zone de dépôt, ‹ le mois ›, les canaux du mois, le relevé et le geste de chaque écart ---- */
.rap-zone{position:relative; display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-4); padding:var(--sp-6) var(--sp-5); border:2px dashed var(--border-strong); border-radius:var(--r-card);
  background:var(--surface); color:var(--ink-2); cursor:pointer; transition:border-color var(--t-1) var(--ease), background var(--t-1) var(--ease)}
.rap-zone:hover,.rap-zone.survol{border-color:var(--accent); background:var(--accent-soft)}
.rap-zone:focus-within{border-color:var(--accent); outline:2px solid var(--ring); outline-offset:2px}
.rap-zone input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.rap-zone-ic{display:inline-grid; place-items:center; flex:none; width:48px; height:48px; border-radius:var(--r-md); background:var(--accent-soft); color:var(--texte-accent)}
.rap-zone-ic .svgi{width:22px; height:22px}
.rap-zone-t{display:flex; flex-direction:column; gap:var(--sp-1); flex:1; min-width:0}
.rap-zone-t b{font-size:var(--fs-16); font-weight:600; color:var(--ink)}
.rap-zone-t small{max-width:90ch; font-size:var(--fs-13); line-height:var(--lh-texte); color:var(--muted)}
.rap-zone-b{flex:none; display:inline-flex; align-items:center; min-height:36px; padding:0 var(--sp-4); border-radius:var(--r-md); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-strong);
  font-size:var(--fs-14); font-weight:600; color:var(--ink)}
.rap-zone.compacte{gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-width:1px}
.rap-zone.compacte .rap-zone-ic{width:36px; height:36px}
.rap-zone.compacte .rap-zone-ic .svgi{width:18px; height:18px}
.rap-zone.compacte .rap-zone-t b{font-size:var(--fs-14)}
.rap-zone.compacte .rap-zone-t small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rap-zone.occupee{opacity:.6; cursor:progress}
.rap-canaux-t th[data-col="canal"]{width:auto}
.rap-canaux-t th:is([data-col="terminees"],[data-col="noshow"]){width:96px}
.rap-canaux-t th:is([data-col="attendu"],[data-col="recu"],[data-col="ecart"]){width:116px}
.rap-canaux-t th[data-col="etat"]{width:136px}
.rap-vue .rap-lu{margin:0; padding:0 var(--sp-5) var(--sp-2)}
.rap-releve-tete{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2) var(--sp-4); padding:var(--sp-2) var(--sp-5) var(--sp-3)}
.rap-releve-tete .rap-puces,.rap-releve-tete .rap-somme{margin:0}
.rap-puce b.alerte{color:var(--texte-danger)}
.rap-lignes-t th[data-col="etat"]{width:120px}
.rap-lignes-t th[data-col="course"]{width:164px}
.rap-lignes-t th[data-col="date"]{width:84px}
.rap-lignes-t th[data-col="trajet"]{width:auto}
.rap-lignes-t th:is([data-col="attendu"],[data-col="recu"],[data-col="ecart"]){width:100px}
.rap-lignes-t th[data-col="note"]{width:15%}
.rap-lignes-t th[data-col="gestes"]{width:116px}
.rap-lignes-t tbody tr.rap-ecart td:first-child{box-shadow:inset 3px 0 0 var(--point-danger)}
.rap-lignes-t tbody tr.rap-manquante td:first-child{box-shadow:inset 3px 0 0 var(--point-alerte)}
.rap-lignes-t tbody tr.rap-rapprochee td{color:var(--ink-2)}
.rap-lignes-t .gestes .ds-groupe-btn{opacity:1}
.rap-lignes-t td[data-c="note"]{white-space:normal; font-size:var(--fs-13); color:var(--ink-2)}
.rap-li-geste{display:block; margin-top:var(--sp-1)}
.rap-releves-t th[data-col="periode"]{width:180px}
.rap-releves-t th[data-col="fichier"]{width:auto}
.rap-releves-t th[data-col="lignes"]{width:80px}
.rap-releves-t th[data-col="total"]{width:116px}
.rap-releves-t th[data-col="rap"]{width:24%}
.rap-releves-t th[data-col="etat"]{width:132px}
.rap-fichier{font-weight:500; color:var(--ink)}
.rap-enc-t th[data-col="periode"]{width:180px}
.rap-enc-t th[data-col="montant"]{width:132px}
.rap-enc .rap-vide .ds-vide{padding:var(--sp-4) var(--sp-5)}
.rap-enc .rap-main{margin:0; padding:var(--sp-3) var(--sp-5) var(--sp-4); border-top:1px solid var(--border-doux)}
.rap-enc .rap-main summary{min-height:var(--h-touch); display:flex; align-items:center}
.rap-enc .rap-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--sp-3); margin-top:var(--sp-2)}
.rap-enc .rap-form .field{margin:0}

/* ---- LE DÉPÔT DU MOIS : ce qui a été reconnu, ce qui reste à voir, les lignes d'un fichier, l'enregistrement, le mois canal par canal ---- */
.imp-nom{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:var(--ink)}
.imp-fichiers-t th[data-col="fichier"]{width:22%}
.imp-fichiers-t th[data-col="canal"]{width:140px}
.imp-fichiers-t th[data-col="periode"]{width:136px}
.imp-fichiers-t th[data-col="courses"]{width:124px}
.imp-fichiers-t th[data-col="montant"]{width:144px}
.imp-fichiers-t th[data-col="constat"]{width:auto}
.imp-fichiers-t th[data-col="etat"]{width:132px}
.imp-fichiers-t td[data-c="constat"]{white-space:normal; padding-top:var(--sp-2); padding-bottom:var(--sp-2)}
.imp-fichiers-t tbody tr.imp-ko td:first-child{box-shadow:inset 3px 0 0 var(--point-danger)}
.imp-fichiers-t .imp-canal{width:100%; min-width:0; min-height:32px}
.imp-cs{display:flex; flex-wrap:wrap; gap:var(--sp-1)}
.imp-c{display:inline-flex; align-items:center; gap:var(--sp-05); height:24px; padding:0 var(--sp-2); border:1px solid var(--border); border-radius:var(--r-pilule); background:var(--surface);
  font:inherit; font-size:var(--fs-12); color:var(--ink-2); white-space:nowrap; cursor:pointer}
.imp-c:hover{border-color:var(--border-strong)}
.imp-c.on{border-color:var(--accent); background:var(--accent-soft); color:var(--ink)}
.imp-c b{font-weight:600}
.imp-c.imp-c-ok b{color:var(--texte-ok)}
.imp-c.imp-c-alerte b{color:var(--texte-alerte)}
.imp-c.imp-c-danger b{color:var(--texte-danger)}
.imp-c.imp-c-neutre b{color:var(--muted)}
.imp-reste{margin:0; padding:0; list-style:none}
.imp-reste li{display:grid; grid-template-columns:16px minmax(0,1fr) auto; align-items:center; gap:var(--sp-3); min-height:var(--h-touch); padding:var(--sp-1) 0; border-top:1px solid var(--border-doux); font-size:var(--fs-14); color:var(--ink-2)}
.imp-reste li:first-child{border-top:0}
.imp-reste li>.svgi{width:16px; height:16px}
.imp-reste .imp-r-danger>.svgi{color:var(--point-danger)}
.imp-reste .imp-r-alerte>.svgi{color:var(--point-alerte)}
.imp-reste .imp-r-info>.svgi{color:var(--point-info)}
.imp-reste .imp-r-ok>.svgi{color:var(--point-ok)}
.imp-reste .imp-r-neutre>.svgi{color:var(--muted)}
.imp-r-t{min-width:0}
.imp-r-t b{font-weight:600; color:var(--ink); overflow-wrap:anywhere}
.imp-r-g{display:inline-flex; flex:none}
.imp-tout-bon{display:flex; align-items:center; gap:var(--sp-2); color:var(--texte-ok)}
.imp-tout-bon .svgi{width:16px; height:16px}
.imp-lignes-t th[data-col="etat"]{width:156px}
.imp-lignes-t th[data-col="ref"]{width:184px}
.imp-lignes-t th[data-col="date"]{width:112px}
.imp-lignes-t th[data-col="client"]{width:136px}
.imp-lignes-t th[data-col="trajet"]{width:auto}
.imp-lignes-t th:is([data-col="verse"],[data-col="prix"]){width:100px}
.imp-lignes-t th[data-col="novalia"]{width:20%}
.imp-lignes-t td[data-c="novalia"]{white-space:normal}
.imp-lignes-t .ds-tag{margin-left:var(--sp-1)}
.imp-pied{position:sticky; bottom:var(--sp-3); z-index:var(--z-collant); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3) var(--sp-4);
  padding:var(--sp-3) var(--sp-4); box-shadow:var(--el-2)}
.imp-pied .chk{flex:1 1 320px; min-width:0; align-items:flex-start; line-height:1.45; color:var(--ink-2)}
.imp-pied .chk input{margin-top:var(--sp-05); flex:none}
.imp-pied-g{display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-left:auto}
.imp-res-t th[data-col="nom"]{width:40%}
.imp-res-t th[data-col="st"]{width:176px}
.imp-mois-t th[data-col="canal"]{width:168px}
.imp-mois-t th[data-col="releve"]{width:auto}
.imp-mois-t th[data-col="courses"]{width:104px}
.imp-mois-t th[data-col="attendu"]{width:120px}
.imp-mois-t th[data-col="vers"]{width:200px}
.imp-mois-t tbody tr.imp-manque td:first-child{box-shadow:inset 3px 0 0 var(--point-alerte)}
/* l'historique : les ressaisies à fusionner (leurs gestes visibles), le mois par mois, les réservations des relevés, les dépôts */
.imp-aide{margin:0; padding:0 var(--sp-5) var(--sp-3)}
.imp-fus-t th[data-col="ligne"]{width:auto}
.imp-fus-t th[data-col="montant"]{width:96px}
.imp-fus-t th[data-col="resa"]{width:28%}
.imp-fus-t th[data-col="pourquoi"]{width:168px}
.imp-fus-t th[data-col="gestes"]{width:216px}
.imp-fus-t .gestes .ds-groupe-btn{opacity:1}
.imp-fus-t tbody tr.imp-suite td{border-top:0}
.imp-fus-t td[data-c="pourquoi"]{white-space:normal; font-size:var(--fs-13); color:var(--ink-2)}
.imp-fus-t td .sous{white-space:normal}   /* la date, le client et le trajet de chaque côté : ce qu'on compare pour fusionner, en entier */
.imp-hist-t th[data-col="mois"]{width:auto}
.imp-hist-t th[data-col="canal"]{width:150px}
.imp-hist-t th:is([data-col="courses"],[data-col="realisees"],[data-col="annulees"]){width:96px}
.imp-hist-t th:is([data-col="apayees"],[data-col="hors"]){width:128px}
.imp-hist-t th:is([data-col="verse"],[data-col="paye"]){width:116px}
.imp-cours-t th[data-col="date"]{width:150px}
.imp-cours-t th[data-col="canal"]{width:132px}
.imp-cours-t th[data-col="ref"]{width:176px}
.imp-cours-t th[data-col="client"]{width:auto}
.imp-cours-t th[data-col="verse"]{width:136px}
.imp-cours-t th[data-col="statut"]{width:140px}
.imp-cours-t th[data-col="novalia"]{width:184px}
.imp-cours-t td .sous.fi-trajet{display:block; max-width:none}
.imp-depots-t th[data-col="le"]{width:120px}
.imp-depots-t th[data-col="canal"]{width:136px}
.imp-depots-t th[data-col="nom"]{width:auto}
.imp-depots-t th[data-col="periode"]{width:152px}
.imp-depots-t th[data-col="lignes"]{width:80px}
.imp-depots-t th[data-col="total"]{width:112px}
.imp-depots-t th[data-col="paiement"]{width:164px}
.imp-part-t th[data-col="canal"]{width:auto}
.imp-part-t th[data-col="etat"]{width:180px}
.imp-part-t th[data-col="comm"]{width:120px}
.imp-p-form{display:flex; flex-direction:column; gap:var(--sp-3); max-width:640px}
.imp-p-form .field{margin:0}
/* au téléphone : le fichier, ses comptes et son canal sous sa ligne ; la fusion et ses deux gestes */
.imp-li+.imp-li{border-top:1px solid var(--border-doux)}
.imp-li>.pay-li{border-top:0}
.imp-li-x{padding:0 var(--sp-3) var(--sp-3) calc(40px + var(--sp-3) * 2); font-size:var(--fs-13); color:var(--ink-2)}
.imp-li-x .imp-canal{width:100%}
.imp-li-g{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2)}

/* ---- CHARGES : par catégorie, par entité, douze mois ; le tableau ; la fiche et la saisie dans le panneau ---- */
.chg-graphes{align-items:stretch}
.chg-graphes>.ds-carte{margin:0}
.chg-graphes>.ds-carte:last-child{grid-column:1 / -1}
.chg-donut{min-height:200px}
.chg-entites{display:flex; flex-direction:column; margin:0; padding:0; list-style:none}
.chg-entites>li{display:block}
.chg-entites>li+li{border-top:1px solid var(--border-doux)}
.chg-entites>li.chg-somme{display:flex; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-2) 0 0; border-top:1px solid var(--border)}
.chg-ent{display:grid; grid-template-columns:minmax(0,1fr) auto 48px; align-items:center; column-gap:var(--sp-3); row-gap:var(--sp-1); width:100%; padding:var(--sp-2) 0; border:0; background:none;
  font:inherit; color:var(--ink); text-align:left; cursor:pointer}
.chg-ent:hover .chg-ent-n{color:var(--texte-accent)}
.chg-ent-n{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-14)}
.chg-ent-b{grid-column:1 / -1; grid-row:2; width:100%; height:6px; clip-path:inset(0 round var(--r-pilule))}
.chg-ent-b .fond{fill:var(--meter-track)}
.chg-ent-b .part{fill:var(--fin-charges)}
.chg-ent-p{font-size:var(--fs-12); color:var(--muted); text-align:right; font-variant-numeric:tabular-nums}
.chg-t th[data-col="libelle"]{width:auto}
/* le libellé tel qu'il est saisi, sa première lettre en capitale (« Loyer du bureau — Cagnes-sur-Mer », plus « Loyer Du Bureau — Cagnes-Sur-Mer ») */
.chg-t .chg-lib{display:inline-block}
.chg-t .chg-lib::first-letter{text-transform:uppercase}
.chg-t th[data-col="entite"]{width:21%}
.chg-t th[data-col="recurrence"]{width:156px}
.chg-t th[data-col="montant"]{width:128px}
.chg-t th[data-col="echeance"]{width:136px}
.chg-t th[data-col="etat"]{width:136px}
.chg-t tbody tr.chg-archivee td{color:var(--muted)}
.chg-vide .chg-modeles{margin-top:var(--sp-2)}
.chg-echeances{margin:0; padding:0; list-style:none}
.chg-ech-l{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; column-gap:var(--sp-3); row-gap:var(--sp-1); padding:var(--sp-2) 0; border-top:1px solid var(--border-doux)}
.chg-ech-l:first-child{border-top:0; padding-top:0}
.chg-ech-t{display:flex; flex-direction:column; min-width:0; font-size:var(--fs-14)}
.chg-ech-t .sous{font-size:var(--fs-12); color:var(--muted)}
.chg-ech-g{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.chg-fiche .chg-aide-f{margin-top:var(--sp-2)}
.fi-dlg>.pay-aide-f{margin:0 0 var(--sp-3)}
.chg-saisie .chg-form{gap:0}
.chg-saisie .chg-form fieldset{padding:0 0 var(--sp-2); border:0; border-top:1px solid var(--border-doux); border-radius:var(--r-nul)}
.chg-saisie .chg-form fieldset:first-of-type{border-top:0}
.chg-saisie .chg-form legend{float:left; width:100%; padding:var(--sp-3) 0 var(--sp-2); font-size:var(--fs-14); color:var(--ink)}
.chg-saisie .chg-form fieldset:first-of-type legend{padding-top:0}
.chg-saisie .chg-form legend+*{clear:both}
.chg-saisie .chg-grille{grid-template-columns:minmax(0,1fr)}
.chg-saisie .go{position:sticky; bottom:0; z-index:var(--z-collant); padding:var(--sp-3) 0; background:var(--surface); border-top:1px solid var(--border-doux)}

/* ---- CLÔTURE : « Clore septembre » (sa liste de contrôle), les 18 mois, la fiche d'un mois ---- */
.clo-note{display:flex; align-items:flex-start; gap:var(--sp-2); margin:0 0 var(--sp-3); font-size:var(--fs-13); line-height:var(--lh-texte); color:var(--muted)}
.clo-note>.svgi{flex:none; width:14px; height:14px; margin-top:var(--sp-05); color:var(--texte-info)}
.clo-geste{margin-bottom:var(--sp-4)}
.clo-geste .ds-geste .liens{flex-direction:column; align-items:stretch; gap:var(--sp-3); font-size:var(--fs-13)}
.clo-geste .clo-liste{margin:0}
.clo-geste .clo-compte{margin:0; background:var(--surface)}
.clo-go{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.clo-liste li .lnk{min-height:0; flex:none}
.clo-t th[data-col="mois"]{width:auto}
.clo-t th[data-col="etat"]{width:148px}
.clo-t th[data-col="courses"]{width:96px}
.clo-t th:is([data-col="caNet"],[data-col="margeNette"]){width:128px}
.clo-t th[data-col="cloture"]{width:26%}
.clo-t thead th{position:static}
.clo-t tbody tr.clo-sel td{background:var(--alerte-doux)}
.clo-t tbody tr.clo-sel td:first-child{box-shadow:inset 3px 0 0 var(--point-alerte)}
.clo-t td[data-c="cloture"] .sous.clo-a{color:var(--texte-alerte)}
.clo-etapes{margin:0; padding:0; list-style:none}
.clo-etapes li{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-15) 0; border-top:1px solid var(--border-doux); font-size:var(--fs-14); color:var(--ink-2)}
.clo-etapes li:first-child{border-top:0; padding-top:0}
.clo-etapes li.tot{font-weight:600; color:var(--ink)}
.clo-etapes li b{font-family:var(--font-num); font-variant-numeric:tabular-nums; white-space:nowrap}
.clo-relu-t thead th{position:static}
.clo-fiche .clo-compte{margin:var(--sp-3) 0 0}
.clo-fiche .clo-geste{margin:var(--sp-3) var(--sp-5) 0}

/* ---- REPRISE & CORRECTIONS : le tableau des corrections, leur fiche ; la reprise des mois passés en tableaux ---- */
.hc-t th[data-col="date"]{width:120px}
.hc-t th[data-col="poste"]{width:176px}
.hc-t th[data-col="motif"]{width:auto}
.hc-t th[data-col="course"]{width:168px}
.hc-t th[data-col="montant"]{width:112px}
.hc-t th[data-col="origine"]{width:176px}
.hc-t th[data-col="par"]{width:104px}
.hc-t .hc-motif{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; white-space:normal}   /* le motif : deux lignes au plus, en entier au survol */
.hc-t tbody tr.hc-annulee .hc-motif,.hc-cartes .hc-annulee .hc-motif{text-decoration:line-through}
.hc-cartes .hc-annulee{opacity:.7}
.hc-fiche .hc-motif-f{margin:0; font-size:var(--fs-14); line-height:var(--lh-texte); color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere}
.hc-saisie .hc-form{grid-template-columns:minmax(0,1fr)}
.hc-saisie .form-row{display:grid; grid-template-columns:minmax(0,1fr); gap:0}
.hc-chart{min-height:220px}
.hc-annee-t th[data-col="mois"]{width:auto}
.hc-annee-t th:is([data-col="ca"],[data-col="caC"],[data-col="paie"],[data-col="paieC"],[data-col="enc"],[data-col="marge"]){width:13%}
.hc-annee-t thead th{position:static}
.hc-annee-t tbody tr.ouverte td{background:var(--accent-soft)}
.hc-cell{display:inline-flex; align-items:center; justify-content:flex-end; min-width:72px; min-height:32px; padding:0 var(--sp-2); border:1px dashed var(--border); border-radius:var(--r-sm); background:none;
  font:inherit; font-variant-numeric:tabular-nums; color:var(--ink); cursor:pointer}
.hc-cell:hover,.hc-cell:focus-visible{border-color:var(--accent); background:var(--accent-soft)}
.hc-duo{margin-top:var(--sp-4)}
.hc-duo .ds-carte{margin:0}
.hc-saisie-t thead th{position:static}
.hc-saisie-t th[data-col="montant"]{width:136px}
.hc-saisie-t th[data-col="courses"]{width:88px}
.hc-saisie-t th[data-col="gestes"]{width:48px}
.hc-saisie-t td:is([data-c="montant"],[data-c="courses"]){text-overflow:clip}
.hc-saisie-t .hc-in{width:100%; max-width:120px; min-width:0; box-sizing:border-box; text-align:right}
.hc-saisie-t .hc-nb{width:100%; max-width:64px; min-width:0; box-sizing:border-box; text-align:right}
.hc-saisie-t tr.hc-nouveau .sel{width:100%; min-width:0}
.hc-pied{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2) var(--sp-3); padding:var(--sp-3) 0 0; font-size:var(--fs-13); color:var(--ink-2)}

/* ---- ENVOI DES RELEVÉS : le tableau qui tient (l'interrupteur, le rythme lisible, l'adresse, l'état), la sélection, la fiche ---- */
.env-t th[data-col="sel"]{width:44px}
.env-t th[data-col="dest"]{width:auto}
.env-t th[data-col="auto"]{width:72px}
.env-t th[data-col="rythme"]{width:18%}
.env-t th[data-col="email"]{width:22%}
.env-t th[data-col="etat"]{width:21%}
.env-t th[data-col="gestes"]{width:240px}
.env-t :is(th,td).selc{padding:0; text-align:center}
.env-t td[data-c="auto"]{text-align:left}
.env-t tbody tr.env-on td:first-child{box-shadow:inset 3px 0 0 var(--point-ok)}
.env-t tbody tr.sel td{background:var(--accent-soft)}
.env-t tbody tr.ouverte td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.env-t .env-mail{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (hover:hover){
  .env-t thead th[data-col="gestes"]{width:var(--sp-2); padding:0}
  .env-t td.gestes{position:relative; padding:0; overflow:visible}
  .env-t td.gestes .ds-groupe-btn{position:absolute; top:50%; right:var(--sp-2); z-index:var(--z-dessus); padding:var(--sp-05); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--el-2); transform:translateY(-50%)}
  .env-t tr:not(:hover):not(:focus-within) td.gestes .ds-groupe-btn{pointer-events:none}
}
.env-aide{max-width:110ch}
.env-journal-t th[data-col="quand"]{width:156px}
.env-journal-t th[data-col="qui"]{width:auto}
.env-journal-t th[data-col="periode"]{width:184px}
.env-journal-t th[data-col="format"]{width:150px}
.env-journal-t th[data-col="email"]{width:22%}
.env-journal-t th[data-col="res"]{width:136px}
.env-journal-t .env-mail{display:block; overflow:hidden; text-overflow:ellipsis}
.env-form{display:flex; flex-direction:column; gap:var(--sp-3); max-width:640px}
.env-form .field{margin:0}
.env-auto{display:flex; align-items:flex-start; gap:var(--sp-3); cursor:pointer}
.env-auto>span:last-child{display:flex; flex-direction:column; gap:var(--sp-05)}
.env-auto small{font-size:var(--fs-12); line-height:1.4; color:var(--muted)}
.env-form .env-quand{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,128px); gap:var(--sp-3)}
.env-form .env-quand .field{min-width:0}
.env-form .env-quand .sel{width:100%; min-width:0; box-sizing:border-box}
.env-li .ds-avatar{width:40px; height:40px}

/* ---- la fiche ouverte à côté (panneau ancré, ≥ 1280 px) : les colonnes courtes ---- */
@media (min-width:1280px){
  html.pn-on.pn-ancre #s-charges .chg-t :is([data-col="recurrence"],[data-c="recurrence"],[data-col="echeance"],[data-c="echeance"]){display:none}
  html.pn-on.pn-ancre #s-clotures .clo-t :is([data-col="courses"],[data-c="courses"],[data-col="cloture"],[data-c="cloture"]){display:none}
  html.pn-on.pn-ancre #s-historique .hc-t :is([data-col="poste"],[data-c="poste"],[data-col="par"],[data-c="par"],[data-col="origine"],[data-c="origine"]){display:none}
  html.pn-on.pn-ancre #s-paiements .env-t :is([data-col="rythme"],[data-c="rythme"],[data-col="email"],[data-c="email"]){display:none}
  /* l'en-tête de page, resserré à côté de la fiche : ses boutons gardent leur icône (leur nom reste lu), comme Paiements */
  html.pn-on.pn-ancre #topbar:is([data-ecran="charges"],[data-ecran="clotures"],[data-ecran="historique"]) #pageActions .ds-btn:not(.icone){width:32px; padding:0}
  html.pn-on.pn-ancre #topbar:is([data-ecran="charges"],[data-ecran="clotures"],[data-ecran="historique"]) #pageActions .ds-btn:not(.icone)>:is(span,kbd):not(.svgi){position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
}

/* ---- le téléphone : des puces qui défilent, les héros resserrés, des lignes de deux, les fiches plein écran ---- */
@media (max-width:1040px){
  :is(#chgPuces,#histPuces,#rapPuces,#envPuces) .ds-filtres{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--sp-3)); padding:var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
    -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
  :is(#chgPuces,#histPuces,#rapPuces,#envPuces) .ds-filtres::-webkit-scrollbar{display:none}
  :is(#chgPuces,#histPuces,#rapPuces,#envPuces) .ds-filtres>*{flex:none}
  :is(#chgPuces,#histPuces,#rapPuces,#envPuces) .bilan{margin-left:var(--sp-2)}
  .fi-mesures{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fi-mesures>li:nth-child(3){border-left:0}
  .fi-mesures>li:nth-child(n+3){border-top:1px solid var(--border-doux)}
}
@media (max-width:760px){
  .fi-puces{margin-left:0}
  .fi-heros-val b{font-size:var(--fs-32)}
  .fi-heros-val small{font-size:var(--fs-16)}
  .fi-heros-d{width:100%}
  .fi-heros-d .ds-segment{width:100%}
  .fi-mesures{margin-left:calc(-1 * var(--sp-4)); margin-right:calc(-1 * var(--sp-4))}
  .fi-mes{padding:var(--sp-3) var(--sp-4)}
  .fi-mes>b{font-size:var(--fs-18)}
  .fi-rang{grid-template-columns:10px minmax(0,1fr) auto; row-gap:var(--sp-1)}
  .fi-rang-p{grid-column:2 / -1; justify-content:flex-start; min-width:0}
  .fi-rang-e{grid-column:2 / -1; text-align:left}
  .fi-rep-outils{justify-content:flex-start; max-width:100%}
  .fi-rep-outils .ds-segment{max-width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none}
  .fi-rep-outils .ds-segment::-webkit-scrollbar{display:none}
  /* l'en-tête d'une carte : le titre sur sa ligne, le compte et les outils dessous */
  :is(#finMount,#treMount,#rapMount,#chgMount,#cloMount,#histMount,#envMount) .ds-carte-h{flex-wrap:wrap; row-gap:var(--sp-1)}
  :is(#finMount,#treMount,#rapMount,#chgMount,#cloMount,#histMount,#envMount) .ds-carte-h .droite{flex:1 1 100%; flex-wrap:wrap; margin-left:0}
  .rap-nav .ds-btn:not(.icone){display:none}
  .tre-gestes{grid-template-columns:minmax(0,1fr)}
  .rap-zone{flex-wrap:wrap; gap:var(--sp-3); padding:var(--sp-4)}
  .rap-zone-b{flex:1 1 100%; justify-content:center; min-height:var(--h-touch)}
  .rap-zone.compacte .rap-zone-t small{display:none}
  .rap-releve-tete{padding:var(--sp-2) var(--sp-4) var(--sp-3)}
  .rap-vue .rap-lu{padding:0 var(--sp-4) var(--sp-2)}
  .rap-enc .rap-main{padding:var(--sp-3) var(--sp-4)}
  .imp-pied{position:static; padding:var(--sp-3); box-shadow:var(--el-1)}
  .imp-pied-g{flex:1 1 100%; margin-left:0}
  .imp-pied-g .ds-btn{flex:1 1 100%; justify-content:center; min-height:var(--h-touch)}
  .imp-reste li{grid-template-columns:16px minmax(0,1fr); padding:var(--sp-2) 0}
  .imp-r-g{grid-column:2}
  .imp-aide{padding:0 var(--sp-4) var(--sp-3)}
  .chg-ent{grid-template-columns:minmax(0,1fr) auto 40px}
  .clo-go .ds-btn{flex:1 1 auto; justify-content:center; min-height:var(--h-touch)}
  .clo-fiche .clo-geste{margin:var(--sp-3) var(--sp-4) 0}
  .hc-pied .ds-btn{flex:1 1 100%; justify-content:center; min-height:var(--h-touch)}
  .env-form .env-quand{grid-template-columns:minmax(0,1fr) 112px}
  .pay-li .rap-li-geste .ds-btn{min-height:var(--h-touch)}
}

/* ====== LOT C2 — CHAUFFEURS › CANDIDATURES, ÉCHÉANCES, NOTES, ET LE DEVIS DANS L'ANATOMIE « ITINÉRAIRE » (07/10/2026 : « améliore les fonctionnalités et le design de l'admin ») ======
   Les trois onglets de Chauffeurs et Exploitation › Devis reprennent l'anatomie des lots O1 et O2 : l'en-tête chiffré, la barre de
   vue collante, les puces et leur bilan, le tableau standard (gestes au survol, dans leur propre colonne), la fiche dans le panneau
   (en-tête d'objet, bande, prochain geste, sections à filets) ; au téléphone, deux lignes par objet et 44 px au doigt. Le parcours
   d'un devis (V100.3) devient quatre colonnes au bureau. Des jetons seulement. */
.cd-barre,.ech-barre,.rtg-barre,.dv-barre{display:contents}
/* un état en point + mot : la teinte dit le ton (jamais seule : le mot dit l'état) */
:is(.ds-statut,.dv-pt).ton-ok{--st-c:var(--texte-ok); --st-p:var(--point-ok); --st-f:var(--ok-doux)}
:is(.ds-statut,.dv-pt).ton-alerte{--st-c:var(--texte-alerte); --st-p:var(--point-alerte); --st-f:var(--alerte-doux)}
:is(.ds-statut,.dv-pt).ton-info{--st-c:var(--texte-info); --st-p:var(--point-info); --st-f:var(--info-doux)}
:is(.ds-statut,.dv-pt).ton-neutre{--st-c:var(--muted); --st-p:var(--point-neutre); --st-f:var(--surface-piste)}
:is(.ds-statut,.dv-pt).ton-chaud{--st-c:var(--texte-accent); --st-p:var(--point-accent); --st-f:var(--accent-soft)}
/* ---- les quatre tableaux : une carte, les en-têtes collants sous la barre de vue, trier d'un clic ---- */
:is(.cd-t,.ech-t,.rtg-t,.dv-t){--vue-dessus:var(--vue-h); --th-h:32px}
:is(.cd-t,.ech-t,.rtg-t,.dv-t) thead th:first-child{border-top-left-radius:var(--r-card)}
:is(.cd-t,.ech-t,.rtg-t,.dv-t) thead th:last-child{border-top-right-radius:var(--r-card)}
:is(.cd-t,.ech-t,.rtg-t,.dv-t) th{user-select:none}
:is(.cd-t,.ech-t,.rtg-t,.dv-t) th.sortable{cursor:pointer; transition:color var(--t-1) var(--ease)}
:is(.cd-t,.ech-t,.rtg-t,.dv-t) :is(th.sortable:hover,th.tri){color:var(--ink)}
:is(.cd-t,.ech-t,.rtg-t,.dv-t) th .arr{display:inline-flex; align-items:center; margin-left:var(--sp-05); vertical-align:-2px}
:is(.cd-t,.ech-t,.rtg-t,.dv-t) th .arr .svgi{width:12px; height:12px}
:is(.cd-t,.ech-t,.rtg-t,.dv-t) td{line-height:1.35}
:is(.cd-t,.ech-t,.rtg-t,.dv-t) td.gestes{padding-left:0; padding-right:var(--sp-2); text-overflow:clip}
:is(.cd-carte-t,.ech-carte-t,.rtg-carte,.dv-carte-t){margin-bottom:var(--sp-4)}
.ch-legende[hidden]{display:none}

/* ---- Candidatures : le candidat (avatar, nom, profil, ville), son véhicule, son expérience, ce qu'il déclare, depuis quand, l'état ---- */
#s-candidatures .cd-t th[data-col="veh"]{width:150px}
#s-candidatures .cd-t th[data-col="exp"]{width:112px}
#s-candidatures .cd-t th[data-col="atouts"]{width:216px}
#s-candidatures .cd-t th[data-col="recue"]{width:184px}   /* « relance auto demain 14:05 » en entier */
#s-candidatures .cd-t th[data-col="etat"]{width:112px}
#s-candidatures .cd-t th[data-col="gestes"]{width:152px}
.cd-t td[data-c="atouts"]{white-space:normal}
.cd-t td[data-c="atouts"] .cd-decla{max-height:44px; overflow:hidden}
.cd-t td[data-c="recue"] .sous{overflow:hidden; text-overflow:ellipsis}
.cd-t td[data-c="recue"] .sous .cd-auto{display:inline}
.cd-t td[data-c="recue"] .sous .cd-auto .svgi{vertical-align:-2px; margin-right:var(--sp-05)}
/* l'e-mail automatique, dans l'en-tête : un mot qui ouvre son réglage */
.cd-auto-r{min-height:0; padding:0; border:0; background:none; font:inherit; color:inherit}
.cd-auto-r b{font-weight:600}
.cd-aide{margin:var(--sp-2) 0 0}
.cd-tel .ch-li2-doc{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
:is(#cdMount,#echMount,#rtgMount,#dvMount)>.ch-legende{margin-top:var(--sp-3)}

/* ---- Échéances : le porteur en mention, le document, la date (relative, en couleur), la référence ---- */
#s-echeances .ech-t th[data-col="doc"]{width:280px}
#s-echeances .ech-t th[data-col="date"]{width:176px}
#s-echeances .ech-t th[data-col="ref"]{width:160px}
#s-echeances .ech-t th[data-col="gestes"]{width:144px}
.ech-porteur{display:flex; align-items:center; gap:var(--sp-15); min-width:0}
.ech-v-ic{display:inline-grid; place-items:center; flex:none; width:20px; height:20px; border-radius:var(--r-xs); background:var(--surface-piste); color:var(--muted)}
.ech-v-ic .svgi{width:12px; height:12px}
.ech-li2-s{display:flex; align-items:center; gap:var(--sp-2)}
.ech-li2-s .ds-statut{flex:none; font-size:var(--fs-12)}
.ech-li2-s>span:last-child{min-width:0; overflow:hidden; text-overflow:ellipsis}
.ech-porteur .ds-mention .nom{font-weight:600}
.ech-doc{font-weight:600}
/* « Renouveler » : la nouvelle date sous la ligne */
.ech-t tr.ech-renouv td{height:auto; padding:var(--sp-3) var(--ligne-pad); background:var(--surface-douce); white-space:normal; cursor:default}
.ech-renouv-f{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.ech-renouv-f label{flex:1 1 100%; font-size:var(--fs-12); color:var(--muted)}
.ech-renouv-f input[type="date"]{min-height:36px; padding:0 var(--sp-2); border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-14)}
.ech-tel-l .ech-renouv{padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--border-doux); background:var(--surface-douce)}
/* la saisie rapide, l'ajout d'une date, « Noter » : des formulaires dans le panneau */
:is(.ech-saisie,.ech-ajout,.rtgf)>.chf-corps{padding:var(--sp-4) var(--sp-5)}
.ech-saisie>.chf-corps{overflow-x:auto}
.ech-saisie-t{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2); margin-bottom:var(--sp-3)}
.ech-saisie-n{font-size:var(--fs-13); color:var(--muted)}
.ech-saisie .ds-champ{margin-bottom:var(--sp-3)}
.ech-saisie .ech-grille{margin-bottom:var(--sp-3)}
.ech-saisie .ech-grille th{position:static}
.ech-saisie .ech-grille td{height:auto; padding-top:var(--sp-2); padding-bottom:var(--sp-2)}
.ech-saisie .ech-grille :is(th,td):first-child{white-space:normal}
.ech-saisie .ech-grille :is(th,td):not(:first-child){width:1%; padding-left:var(--sp-1); padding-right:var(--sp-1)}
.ech-saisie .ech-grille tbody tr{cursor:default}
.ech-saisie .ech-grille tbody tr:hover td{background:var(--surface)}

/* ---- Notes : le classement (le rang, le chauffeur, sa note en étoiles, ses avis, ses critères, la dernière) ---- */
#s-rating .rtg-t th[data-col="note"]{width:168px}
#s-rating .rtg-t th[data-col="avis"]{width:84px}
#s-rating .rtg-t :is(th[data-col="ponct"],th[data-col="veh"],th[data-col="att"]){width:104px}
#s-rating .rtg-t th[data-col="der"]{width:136px}
#s-rating .rtg-t th[data-col="gestes"]{width:56px}
.rtg-rang{display:inline-grid; place-items:center; width:24px; height:24px; margin-right:var(--sp-2); border-radius:var(--r-rond); background:var(--surface-piste); font-size:var(--fs-12); font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; vertical-align:middle}
.rtg-nom{display:inline-flex; max-width:calc(100% - 24px - var(--sp-2)); min-width:0; vertical-align:middle}
/* la mention garde sa largeur : son « max-width:100% » se mesurait sur ce conteneur à la taille du contenu, et la marge de -1px
   de la mention coupait le nom d'un pixel (« Luca Ros… ») ; c'est le conteneur qui borne, la mention rétrécit avec lui */
.rtg-nom>.ds-mention{max-width:none}
.rtg-nom .ds-mention .nom{font-weight:600}
.rtg-t td[data-c="nom"] .sous{padding-left:calc(24px + var(--sp-2))}
.rtg-t tr.rtg-sans td{cursor:default}
.rtg-n{display:inline-flex; align-items:center; gap:var(--sp-1); flex:none; margin-left:auto; font-size:var(--fs-13); font-weight:600; color:var(--ink)}
.rtg-qui{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin:0 0 var(--sp-3)}
.rtg-qui b{font-size:var(--fs-15)}
.rtg-qui .sous{flex-basis:100%; font-size:var(--fs-12); color:var(--muted)}
.rtg-lab{display:block; margin-bottom:var(--sp-1); font-size:var(--fs-13); font-weight:500; color:var(--ink-2)}
.rtgf .rtg-etoiles button{width:var(--h-touch); height:var(--h-touch); cursor:pointer}
.rtgf .rtg-etoiles button:focus-visible{outline:none; box-shadow:var(--ring)}

/* ---- Devis : le parcours en quatre colonnes (au bureau) — l'en-tête de chaque étape, puis ses cartes ---- */
.dvb{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(248px,1fr); gap:var(--sp-3); align-items:start; margin-bottom:var(--sp-4); padding-bottom:var(--sp-1); overflow-x:auto; scroll-snap-type:x proximity}
.dvb-col{display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; padding:var(--sp-2); border-radius:var(--r-card); background:var(--surface-piste); scroll-snap-align:start}
.dvb-col.sortie{background:transparent; box-shadow:inset 0 0 0 1px var(--border)}
.dvb-col>.ds-btn{align-self:flex-start}
.dvb-tete{display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"n t v" "n s s"; column-gap:var(--sp-2); row-gap:var(--sp-05); align-items:center; padding:var(--sp-1) var(--sp-1) var(--sp-15)}
.dvb-tete .dv-et-n{grid-area:n; align-self:start}
.dvb-tete.urgent .dv-et-n{background:var(--st-attente-fond); color:var(--st-attente-texte)}
.dvb-t{grid-area:t; display:flex; align-items:center; gap:var(--sp-1); min-width:0; font-size:var(--fs-13)}
.dvb-t .svgi{width:14px; height:14px; flex:none; color:var(--muted)}
.dvb-t b{font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dvb-v{grid-area:v; display:flex; align-items:baseline; gap:var(--sp-1); font-variant-numeric:tabular-nums; white-space:nowrap}
.dvb-v b{font-size:var(--fs-18); font-weight:700; color:var(--ink)}
.dvb-s{grid-area:s; font-size:var(--fs-12); line-height:1.35; color:var(--muted)}
.dvb-s b{font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums}
.dvb-tete.urgent .dvb-s{color:var(--texte-alerte); font-weight:600}
.dvb-cartes{display:flex; flex-direction:column; gap:var(--sp-2)}
.dvb-vide{margin:0; padding:var(--sp-2) var(--sp-1) var(--sp-3); font-size:var(--fs-12); line-height:1.45; color:var(--muted)}
/* une carte : le client et le prix ; le trajet ; la course ; où il en est ; le geste de l'état — la carte ouvre la fiche */
.dvb-c{display:flex; flex-direction:column; gap:var(--sp-1); min-width:0; padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); cursor:pointer;
  transition:border-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease)}
.dvb-c:hover{border-color:var(--border-strong); box-shadow:var(--shadow-card-hover)}
.dvb-c:focus-visible{outline:none; box-shadow:var(--ring)}
.dvb-c.ouverte{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
.dvb-c.nouvelle{box-shadow:inset 3px 0 0 var(--point-alerte)}
.dvb-c.dv-essai{opacity:.62}
.dvb-l1{display:flex; align-items:center; gap:var(--sp-2); min-width:0}
.dvb-cl{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-14); font-weight:600; color:var(--ink)}
.dvb-cl .ds-mention{padding:0; margin:0}
.dvb-cl .ds-mention .nom{font-weight:600; overflow:hidden; text-overflow:ellipsis}
.dvb-px{flex:none; font-size:var(--fs-15); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.dvb-l1 .ds-statut{flex:none; font-size:var(--fs-12)}
.dvb-tr{font-size:var(--fs-13); color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dvb-q{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); font-size:var(--fs-12); color:var(--muted); font-variant-numeric:tabular-nums}
.dvb-q .svgi{width:12px; height:12px; flex:none}
.dvb-q.urgent{color:var(--texte-alerte); font-weight:600}
.dvb-msg{font-size:var(--fs-12); font-style:italic; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dvb-c .dm-alerte{margin-top:0}
.dvb-g{display:flex; align-items:center; gap:var(--sp-1); margin-top:var(--sp-1)}
.dvb-g>.ds-btn:last-child{margin-left:auto}

/* ---- Devis : la liste (le tableau standard, demandes du site comprises) ---- */
#s-devis .dv-t th[data-col="trajet"]{width:24%}
#s-devis .dv-t th[data-col="course"]{width:132px}
#s-devis .dv-t th[data-col="etape"]{width:23%}
#s-devis .dv-t th[data-col="montant"]{width:104px}
#s-devis .dv-t th[data-col="gestes"]{width:176px}
.dv-t :is(th[data-col="montant"],td[data-c="montant"]){text-align:right}
.dv-cl{font-weight:600; overflow:hidden; text-overflow:ellipsis}
.dv-cl .ds-mention{padding:0; margin:0}
.dv-cl .ds-mention .nom{font-weight:600}
.dv-t td[data-c="client"] .sous{display:flex; align-items:center; gap:var(--sp-1); white-space:nowrap}
.dv-t td[data-c="client"] .sous>*{flex:none}
.dv-px{font-size:var(--fs-15); font-weight:600; font-variant-numeric:tabular-nums}
.dv-t tr.dv-essai td{opacity:.62}
/* au téléphone (sous 1 040 px) : deux lignes par devis — le client et le prix ; un point, l'état, le trajet, la date */
.dv-li2-px{flex:none; margin-left:auto; font-size:var(--fs-14); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.dv-pt{display:inline-block; width:7px; height:7px; margin-right:var(--sp-1); border-radius:var(--r-rond); background:var(--st-p,var(--point-neutre)); vertical-align:1px}
.ch-li2.dv-essai{opacity:.62}
#dvListe>.dv-parcours{margin-bottom:var(--sp-3)}

/* ---- la fiche d'un devis, d'une demande du site (panneau) : le client en mention, le trajet, l'activité, la page du client ---- */
:is(.dvf,.dmf) .chf-nom .ds-mention{padding:0; margin:0; font:inherit; letter-spacing:inherit; color:inherit}
.dvf-tr{margin-bottom:var(--sp-3); font-size:var(--fs-15)}
.dvf-opts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-1)}
.dvf-opts li{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3); border:1px solid var(--border-doux); border-radius:var(--r-md); font-size:var(--fs-14)}
.dvf-opts li.principal{background:var(--surface-douce)}
.dvf-opts li>span{display:flex; flex-direction:column; min-width:0}
.dvf-opts small{font-size:var(--fs-12); color:var(--muted)}
.dvf-opts li>b{flex:none; font-variant-numeric:tabular-nums}
.dvf-note{margin:0; font-size:var(--fs-14); color:var(--ink-2); white-space:pre-wrap; overflow-wrap:anywhere}
.dv-conf .sub{margin:0 0 var(--sp-4)}
/* les demandes traitées : une ligne chacune, qui ouvre sa fiche */
.dm-traitees{list-style:none; margin:0; padding:0}
.dm-traitees li+li{border-top:1px solid var(--border-doux)}
.dm-tr{display:flex; flex-direction:column; gap:var(--sp-05); width:100%; padding:var(--sp-2) var(--sp-1); border:0; border-radius:var(--r-sm); background:none; font:inherit; text-align:left; color:var(--ink); cursor:pointer}
.dm-tr:hover{background:var(--surface-douce)}
.dm-tr:focus-visible{outline:none; box-shadow:var(--ring)}
.dm-tr-t{display:flex; align-items:center; gap:var(--sp-2)}
.dm-tr-t .ds-statut{font-size:var(--fs-12)}
.dm-tr-s{font-size:var(--fs-12); color:var(--muted)}

/* ---- la fiche ouverte à côté (panneau ancré, dès 1 280 px) : les colonnes courtes, les gestes d'une ligne rangés dans « … » ---- */
@media (min-width:1280px){
  html.pn-on.pn-ancre #s-candidatures .cd-t :is(th[data-col="veh"],td[data-c="veh"],th[data-col="exp"],td[data-c="exp"],th[data-col="atouts"],td[data-c="atouts"]){display:none}
  html.pn-on.pn-ancre #s-echeances .ech-t :is(th[data-col="ref"],td[data-c="ref"]){display:none}
  html.pn-on.pn-ancre #s-echeances .ech-t th[data-col="doc"]{width:180px}
  html.pn-on.pn-ancre #s-echeances .ech-t th[data-col="date"]{width:172px}   /* « dépassée depuis 16 j » en entier */
  html.pn-on.pn-ancre #s-rating .rtg-t :is(th[data-col="ponct"],td[data-c="ponct"],th[data-col="veh"],td[data-c="veh"],th[data-col="att"],td[data-c="att"]){display:none}
  /* le nom d'abord : la note, les avis et la dernière note se resserrent (« Youcef (junior) Belaouinat » tient à 1440) */
  html.pn-on.pn-ancre #s-rating .rtg-t th[data-col="note"]{width:132px}
  html.pn-on.pn-ancre #s-rating .rtg-t th[data-col="avis"]{width:64px}
  html.pn-on.pn-ancre #s-rating .rtg-t th[data-col="der"]{width:112px}
  html.pn-on.pn-ancre #s-devis .dv-t :is(th[data-col="trajet"],td[data-c="trajet"],th[data-col="course"],td[data-c="course"]){display:none}
  html.pn-on.pn-ancre :is(#s-candidatures .cd-t,#s-echeances .ech-t,#s-devis .dv-t) td.gestes .ds-btn:not([data-cdplus],[data-echplus],[data-dvplus],[data-dmplus]){display:none}
  html.pn-on.pn-ancre :is(#s-candidatures .cd-t,#s-echeances .ech-t,#s-devis .dv-t) th[data-col="gestes"]{width:48px}
  html.pn-on.pn-ancre #s-devis .dvb{grid-auto-columns:minmax(236px,1fr)}
  /* l'en-tête, resserré à côté de la fiche : l'action pleine garde son icône (son nom reste lu) */
  html.pn-on.pn-ancre #topbar:is([data-ecran="echeances"],[data-ecran="rating"],[data-ecran="devis"]) #pageActions .ds-btn.primaire{width:32px; padding:0}
  html.pn-on.pn-ancre #topbar:is([data-ecran="echeances"],[data-ecran="rating"],[data-ecran="devis"]) #pageActions .ds-btn.primaire>:is(span,kbd):not(.svgi){position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
}
/* ---- le téléphone : la recherche sans sa touche, les puces qui défilent (lot O1), 44 px au doigt ---- */
@media (max-width:1040px){
  :is(#s-candidatures,#s-echeances,#s-rating,#s-devis) .ds-vue .ds-champ:not(:focus-within):not(:has(input:not(:placeholder-shown))) .ds-kbd{display:none}
}
@media (max-width:760px){
  /* la saisie rapide au doigt : un porteur, puis ses dates côte à côte, chacune sous son nom de document */
  .ech-saisie .ech-grille thead{display:none}
  .ech-saisie .ech-grille,.ech-saisie .ech-grille tbody{display:block}
  .ech-saisie .ech-grille tr{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-1) var(--sp-2); padding:var(--sp-3) 0; border-bottom:1px solid var(--border-doux)}
  .ech-saisie .ech-grille td,.ech-saisie .ech-grille :is(th,td):not(:first-child){display:block; width:auto; height:auto; padding:0; border:0; background:none}
  .ech-saisie .ech-grille td:first-child{grid-column:1/-1}
  .ech-saisie .ech-grille td[data-l]::before{content:attr(data-l); display:block; margin-bottom:var(--sp-05); font-size:var(--fs-12); color:var(--muted)}
  .ech-saisie .ech-g{display:flex; width:100%}
  .ech-saisie .ech-g input[type="date"]{width:100%; font-size:var(--fs-16)}
  .ech-renouv-f input[type="date"]{min-height:var(--h-touch); flex:1 1 160px; font-size:var(--fs-16)}
  .ech-renouv-f .ds-btn{min-height:var(--h-touch)}
  :is(.ech-saisie,.ech-ajout,.rtgf)>.chf-corps{padding:var(--sp-4)}
  .dm-tr{min-height:var(--h-touch)}
}

/* ====== LOT R1 — RÉGLAGES ET ÉQUIPE : LA BARRE DE SAUVEGARDE CONTEXTUELLE, L'ÉTAT EN PHRASES, L'ÉQUIPE DANS L'ANATOMIE ITINÉRAIRE (07/10/2026 : « améliore les fonctionnalités et le design de l'admin ») ======
   DIRECTION § 3.8, § 3.10 et § 5.12 pour les Réglages ; § 3.3 à 3.7 et § 3.14 pour l'Équipe, avec les classes de Chauffeurs (O1),
   de Flottes (O2) et de leurs fiches (ent-fiche, ent-ft, ent-bande, ent-geste, ent-onglets, ent-corps) reprises telles quelles.
   · la liste des pages : le liseré vert de la page ouverte, le compteur de ce qui attend (le nombre, la phrase pour le lecteur) ;
   · « ‹ Réglages » au téléphone ; la barre de sauvegarde collée en bas (au-dessus de la barre du téléphone : sous le pouce) ;
   · le dialogue « Modifications non enregistrées » quand on part ; le résumé en phrases de Système › État ;
   · l'Équipe : la barre de vue, les puces, le tableau (gestes au survol), deux lignes au téléphone, la fiche, l'ajout en une colonne.
   Des jetons seulement : le thème sombre suit (la barre de sauvegarde prend la nuit d'un toast). */

/* ---- la liste des pages : le titre à gauche, le compteur à droite ; la page ouverte a son liseré vert ---- */
.rg-lien{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:var(--sp-2)}
.rg-lien>.rg-lien-t,.rg-lien>.rg-lien-s{grid-column:1}
@media (min-width:901px){ .rg-lien.on{box-shadow:inset 3px 0 0 var(--accent); border-radius:var(--r-nul) var(--r-sm) var(--r-sm) var(--r-nul)} }
.rg-compte{grid-column:2; grid-row:1; min-width:18px; height:18px; padding:0 var(--sp-1); border-radius:var(--r-pilule); background:var(--alerte-doux); color:var(--texte-alerte);
  font-size:var(--fs-11); font-weight:700; line-height:18px; text-align:center; font-variant-numeric:tabular-nums}
.rg-compte.ko{background:var(--danger-doux); color:var(--texte-danger)}
/* ---- au téléphone, la page en plein écran revient à la liste par « ‹ Réglages » (sa place : V86, sous 900 px) ---- */
.rg-retour{align-items:center; gap:var(--sp-05); min-height:var(--h-touch); margin:0 0 0 calc(-1 * var(--sp-2)); padding:0 var(--sp-2); border:0; border-radius:var(--r-sm);
  background:none; font:inherit; font-size:var(--fs-15); font-weight:500; color:var(--texte-accent); cursor:pointer}
.rg-retour .svgi{width:18px; height:18px}
.rg-retour:hover{background:var(--surface-piste)}
.rg-retour:focus-visible{outline:2px solid var(--ring); outline-offset:0}

/* ---- LA BARRE DE SAUVEGARDE CONTEXTUELLE : « Modifications non enregistrées — Abandonner · Enregistrer », collée au bas de la page ---- */
.rg-sauve{position:sticky; bottom:calc(var(--bas-colle) + var(--sp-3)); z-index:var(--z-collant); display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4);
  padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border-radius:var(--r-md); background:var(--nuit); color:var(--on-couleur); box-shadow:var(--el-4);
  animation:rg-sauve-in var(--t-3) var(--ease-ressort)}
.rg-sauve[hidden]{display:none}
html[data-theme="dark"] .rg-sauve{background:var(--nuit-3)}
.rg-sauve-t{display:flex; align-items:center; gap:var(--sp-2); flex:1 1 260px; min-width:0; font-size:var(--fs-14); line-height:1.35}
.rg-sauve-t b{flex:none; font-weight:600}
.rg-sauve-point{flex:none; width:8px; height:8px; border-radius:var(--r-rond); background:var(--or)}
.rg-sauve-d{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-13); color:var(--side-muted)}
.rg-sauve-d:not(:empty)::before{content:'·'; margin-right:var(--sp-2)}
.rg-sauve-g{display:flex; align-items:center; gap:var(--sp-2); margin-left:auto}
.rg-sauve .ds-btn.fantome{color:var(--on-couleur)}
.rg-sauve .ds-btn.fantome:hover{background:rgba(255,255,255,.1); color:var(--on-couleur)}
.rg-sauve .ds-btn:focus-visible{outline:2px solid var(--or-clair); outline-offset:2px}
@keyframes rg-sauve-in{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .rg-sauve{animation:none} }
/* les toasts montent au-dessus de la barre tant qu'elle est là */
html.rg-sauve-on .ds-toasts{bottom:calc(var(--sp-5) + var(--bas-colle) + 64px)}
/* « Modifications non enregistrées » quand on quitte la page ou l'écran : trois issues, la principale à droite */
.rg-garde p{margin:0 0 var(--sp-4); font-size:var(--fs-14); line-height:1.5; color:var(--ink-2)}
.rg-garde-g{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-2)}
.rg-garde-g .ds-btn.primaire{grid-column:1/-1; height:40px}

/* ---- SYSTÈME › ÉTAT : la phrase d'abord (« Tout fonctionne »), ce qui va en une ligne, puis les points ---- */
.et-resume{display:flex; flex-direction:column; gap:var(--sp-1); margin:0 0 var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); background:var(--ok-doux)}
.et-resume.et-att{background:var(--alerte-doux)}
.et-resume.et-ko{background:var(--danger-doux)}
.et-titre{display:flex; align-items:center; gap:var(--sp-2); margin:0; font-size:var(--fs-18); line-height:1.3; color:var(--ink)}
.et-titre b{font-weight:600}
.et-titre .rg-point{width:12px; height:12px}
.et-suite{margin:0; font-size:var(--fs-14); line-height:1.5; color:var(--ink-2)}
.et-va{margin:0; font-size:var(--fs-13); line-height:1.5; color:var(--ink-2)}

/* ---- ÉQUIPE : « Qui a accès · Avancé », la barre de vue collante sur toute la liste, les puces et leur bilan ---- */
.usr-onglets{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3)}
.usr-av-aide{margin:0; font-size:var(--fs-13); color:var(--muted)}
.usr-av{margin:0 0 var(--sp-3)}
#usrBarre{display:contents}
#s-utilisateurs .ds-vue .vues{padding-right:var(--sp-6); -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
.usr-puces .ds-filtres{padding:var(--sp-15) 0}
#usrMount>.ent-secret{margin:0 0 var(--sp-3)}
/* ---- le tableau : une carte, les en-têtes collants sous la barre de vue, des colonnes posées (la plus large : la personne) ---- */
#s-utilisateurs .usr-carte{margin-bottom:var(--sp-4)}
#s-utilisateurs .usr-t{--vue-dessus:var(--vue-h); --th-h:32px}
#s-utilisateurs .usr-t thead th:first-child{border-top-left-radius:var(--r-card)}
#s-utilisateurs .usr-t thead th:last-child{border-top-right-radius:var(--r-card)}
.usr-t th[data-col="acces"]{width:24%}
.usr-t th[data-col="vu"]{width:176px}
.usr-t th[data-col="dv"]{width:156px}
.usr-t th[data-col="etat"]{width:124px}
.usr-t th[data-col="gestes"]{width:148px}
.usr-t th{user-select:none}
.usr-t th.tri{cursor:pointer; transition:color var(--t-1) var(--ease)}
.usr-t th.tri:hover,.usr-t th.tri.on{color:var(--ink)}
.usr-t th .arr{display:inline-flex; align-items:center; margin-left:var(--sp-05); vertical-align:-2px}
.usr-t th .arr .svgi{width:12px; height:12px}
.usr-t td{line-height:1.35}
.usr-t td .sous{margin-top:var(--sp-05); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.usr-t td .sous .ds-mention{font-weight:500; padding:0 var(--sp-05); margin:0 calc(-1 * var(--sp-05))}
.usr-t tr:focus-visible{outline:0}
.usr-t tr:focus-visible td{background:var(--surface-douce)}
.usr-t td.gestes{padding-left:0; padding-right:var(--sp-2); text-overflow:clip}
.usr-t .gestes .ds-groupe-btn{gap:var(--sp-05)}
/* à la souris, comme dans Flottes : les gestes flottent au bout de la ligne survolée (la colonne vide rend sa place) */
@media (hover:hover){
  .usr-t th[data-col="gestes"]{width:var(--sp-2); padding:0}
  .usr-t td.gestes{position:relative; padding:0; overflow:visible}
  .usr-t td.gestes .ds-groupe-btn{position:absolute; top:50%; right:var(--sp-2); z-index:var(--z-dessus); padding:var(--sp-05); border-radius:var(--r-md);
    background:var(--surface); box-shadow:var(--el-2); transform:translateY(-50%)}
  .usr-t tr:not(:hover):not(:focus-within) td.gestes .ds-groupe-btn{pointer-events:none}
}
/* « Confirmer ? » (le deuxième appui d'un geste qui ne se défait pas) : le bouton en icône s'élargit, en rouge doux */
:is(.usr-t,.usr-li2) .ds-btn.sc-arme{width:auto; padding:0 var(--sp-2); background:var(--bad-soft); color:var(--texte-danger); box-shadow:none}
/* la personne : son avatar, son nom (une mention), dessous son rôle en mots */
.usr-c{display:flex; align-items:center; gap:var(--sp-3); min-width:0}
.usr-c>.ds-avatar{width:32px; height:32px; font-size:var(--fs-12)}
.usr-cn{flex:1 1 auto; min-width:0}
.usr-nom .ds-mention{flex:0 1 auto; min-width:0; padding:0; margin:0}
.usr-nom .ds-mention .nom{font-weight:600}
.usr-voit{font-weight:500; color:var(--ink)}
.usr-manque{color:var(--texte-alerte)}
/* l'état et la double vérification : un point et un mot (les teintes du lot J) */
.ds-statut.usr-st-actif,.ds-statut.usr-dv-oui{--st-c:var(--st-terminee-texte); --st-p:var(--st-terminee-point); --st-f:var(--st-terminee-fond)}
.ds-statut.usr-st-verrou{--st-c:var(--st-aassigner-texte); --st-p:var(--st-aassigner-point); --st-f:var(--st-aassigner-fond)}
.ds-statut.usr-dv-non{--st-c:var(--st-attente-texte); --st-p:var(--st-attente-point); --st-f:var(--st-attente-fond)}
.ds-statut.usr-st-off,.ds-statut.usr-dv-fac{--st-c:var(--st-annulee-texte); --st-p:var(--st-annulee-point); --st-f:var(--st-annulee-fond)}
.usr-legende{margin:0 0 var(--sp-6); font-size:var(--fs-12); line-height:1.5; color:var(--muted)}
/* la fiche ouverte à côté (panneau ancré, dès 1 280 px) : la personne, sa dernière connexion, son état */
@media (min-width:1280px){
  html.pn-on.pn-ancre #s-utilisateurs .usr-t :is(th[data-col],td[data-c]):not([data-col="p"],[data-c="p"],[data-col="vu"],[data-c="vu"],[data-col="etat"],[data-c="etat"],[data-col="gestes"],[data-c="gestes"]){display:none}
  html.pn-on.pn-ancre #topbar[data-ecran="utilisateurs"] #pageActions .ds-btn.primaire{width:32px; padding:0}
  html.pn-on.pn-ancre #topbar[data-ecran="utilisateurs"] #pageActions .ds-btn.primaire>:is(span,kbd):not(.svgi){position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
}
/* ---- le téléphone (sous 1 040 px) : une personne, deux lignes — son nom (et son état s'il n'est pas actif), son rôle et sa
   dernière connexion ; ce qui manque en couleur ; « … » à droite (44 px au doigt) ---- */
.usr-tel{overflow:hidden}
.usr-li2{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:var(--sp-3); min-height:64px; padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); cursor:pointer; -webkit-tap-highlight-color:transparent}
.usr-li2+.usr-li2{border-top:1px solid var(--border-doux)}
.usr-li2:active{background:var(--surface-douce)}
.usr-li2.ouverte{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
.usr-li2:focus-visible{outline:none; box-shadow:inset 0 0 0 2px var(--accent)}
.usr-li2.passee :is(.usr-li2-t b,.usr-li2-s){color:var(--muted)}
.usr-li2-c{display:flex; flex-direction:column; gap:var(--sp-05); min-width:0}
.usr-li2-t{display:flex; align-items:center; gap:var(--sp-2); min-width:0; font-size:var(--fs-14); color:var(--ink)}
.usr-li2-t b{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.usr-li2-t .ds-statut{flex:none; margin-left:auto; font-size:var(--fs-12)}
.usr-li2-s{font-size:var(--fs-13); line-height:1.3; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.usr-li2-ko{font-size:var(--fs-12); font-weight:600; color:var(--texte-danger)}
.usr-li2-dv{font-size:var(--fs-12); font-weight:600; color:var(--texte-alerte)}
.usr-li2-a{display:flex; align-items:center}
.usr-li2-a .ds-btn{position:relative}
@media (pointer:coarse){
  .usr-li2-a .ds-btn{min-height:28px}
  .usr-li2-a .ds-btn.icone{min-width:28px; width:28px}
  .usr-li2-a .ds-btn::after{content:''; position:absolute; inset:-8px}
}
@media (max-width:1040px){
  .usr-puces .ds-filtres{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--sp-3)); padding:var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
    -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}
  .usr-puces .ds-filtres::-webkit-scrollbar{display:none}
  .usr-puces .ds-filtres>*{flex:none}
  .usr-puces .bilan{margin-left:var(--sp-2)}
  .usr-puces :is(.ds-puce,.ds-puce.ajout,.bk-raz){height:32px; min-height:0}
  .usr-puces .ds-puce button{min-height:0}
  .usr-puces .ds-puce .x{width:28px; height:28px}
  #s-utilisateurs .ds-vue .ds-champ:not(:focus-within):not(:has(input:not(:placeholder-shown))) .ds-kbd{display:none}
}

/* ---- LA FICHE D'UNE PERSONNE (panneau de 520 px) : l'anatomie des fiches de Flottes ; ici ce qui lui est propre ---- */
.usr-f-secret{padding:0 var(--sp-5) var(--sp-3)}
.usr-f-secret .ent-secret{margin:0}
.usr-f-role{margin:0; font-size:var(--fs-14); color:var(--ink)}
.usr-f-aide{margin:var(--sp-1) 0 0; font-size:var(--fs-13); line-height:1.5; color:var(--ink-2)}
.usr-f .ds-dl dd .ds-tag{vertical-align:1px}
.usr-f .ds-section>h3 .droite .ds-lien{font-size:var(--fs-13)}
.usr-f .usr-form{max-width:640px}
.usr-f .usr-permsgrille{grid-template-columns:minmax(0,1fr)}
/* ses appareils connectés : une ligne chacun, « Déconnecter » au bout */
.usr-apps{display:grid; margin-top:var(--sp-2)}
.usr-app-li{display:flex; align-items:center; gap:var(--sp-3); min-height:52px; padding:var(--sp-2) 0; border-top:1px solid var(--border-doux)}
.usr-app-li:first-child{border-top:0}
.usr-app-t{display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; font-size:var(--fs-14)}
.usr-app-t b{font-weight:600; color:var(--ink)}
.usr-app-t small{font-size:var(--fs-12); line-height:1.4; color:var(--muted); overflow-wrap:anywhere}
/* « Ajouter quelqu'un » et « Changer son rôle » dans le panneau : les cartes en une colonne, l'icône à gauche */
#panneauCorps .usr-ajcartes{grid-template-columns:minmax(0,1fr); gap:var(--sp-2)}
#panneauCorps .usr-ajcarte{display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:var(--sp-3); row-gap:var(--sp-05); align-items:start; padding:var(--sp-3) var(--sp-4); text-align:left}
#panneauCorps .usr-ajcarte .usr-ajcarte-ic{grid-row:span 2}
@media (max-width:760px){
  .usr-f .ent-ft .ds-avatar.xl{width:48px; height:48px; font-size:var(--fs-18)}
  .usr-f-secret{padding:0 var(--sp-4) var(--sp-3)}
  .usr-app-li{flex-wrap:wrap}
  .usr-app-li .ds-btn{min-height:var(--h-touch)}
  /* la barre de sauvegarde sous le pouce : la phrase au-dessus, les deux boutons côte à côte, 44 px */
  .rg-sauve{padding:var(--sp-2) var(--sp-3); gap:var(--sp-2)}
  .rg-sauve-t{flex:1 1 100%}
  .rg-sauve-g{width:100%; margin-left:0}
  .rg-sauve-g .ds-btn{flex:1 1 0; min-height:var(--h-touch)}
  .rg-garde-g .ds-btn{min-height:var(--h-touch)}
  /* un lien dans la légende garde sa ligne : c'est sa zone de toucher qui grandit (12.1, comme Chauffeurs) */
  .usr-legende .ds-lien{min-height:0; position:relative}
  .usr-legende .ds-lien::after{content:''; position:absolute; inset:-12px -4px}
}

/* ====== LOT Q1 — FINITIONS DE LA COQUE (07/10/2026 : « ameliore encore tout ») ======
   Le menu : une entrée qui porte deux pastilles (Chauffeurs : 4 candidatures et 2 documents dépassés) n'en montre plus qu'une
   quand l'une presse — la rouge ; l'autre se lit dans les onglets de l'écran, qui sont comptés. La barre de vue : quand ses
   onglets ne tiennent pas (fiche ancrée, petite fenêtre), le dernier s'efface en fondu au lieu d'être coupé net, sur TOUS les
   écrans (les lots en avaient posé le même fondu écran par écran). */
#sidebar nav button:has(.badge-n.bad) .badge-n:not(.bad){display:none}
.ds-vue .vues{padding-right:var(--sp-6); -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent); mask-image:linear-gradient(90deg,black calc(100% - var(--sp-6)),transparent)}

/* ====== LOT W1 — DISPATCH, SUITE : CHANGER DE CHAUFFEUR EN GLISSANT, UN CRÉNEAU LIBRE DEVIENT UNE RÉSERVATION, LA FRISE PLUS UTILE (07/10/2026 : « améliore les fonctionnalités et le design de l'admin ») ======
   DIRECTION § 5.3, § 3.10, § 3.12 (js/exploitation/dispatch-frise.js, section « LOT W1 »). Une course assignée se glisse sur un
   autre chauffeur : sa ligne d'origine se teinte, la ligne visée en vert ou rouge (les règles du lot E3), puis la confirmation à
   côté du bloc (un dialogue léger, pas une fenêtre), la course en pointillé sur la ligne visée, estompée chez son chauffeur. Au
   survol de la place libre, la marque du créneau (« Double-clic : une course à 14:15 »). Sur « Toi », le temps libre du jour ;
   sous chaque nom, le bilan (« 3 courses · 2 h 40 ») — une ligne de trois textes a 56 px (DF.haut3), ses blocs centrés. */
/* ---- la colonne des chauffeurs : 240 px (le même nombre que DF.col) — « Toi libre de 11:15 à 19:00 » y tient sur une ligne ---- */
#dspFrise{--df-col:240px}
/* ---- le glissement d'une course assignée : la ligne d'où elle part se teinte, légèrement ---- */
.df-ligne.df-origine,.df-ligne.df-origine .df-ch{background:color-mix(in srgb,var(--ink) 5%,var(--surface))}
/* ---- la confirmation ouverte : la course reste chez son chauffeur, estompée ; elle paraît en pointillé sur la ligne visée ---- */
.df-bloc.df-part{opacity:.45; box-shadow:inset 0 0 0 1px var(--border-strong)}
.df-bloc.df-propose{border-left-style:dashed; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent), 0 0 0 3px var(--accent-soft); pointer-events:none; z-index:var(--z-dessus);
  animation:df-propose var(--t-3) var(--ease-ressort) both}
@keyframes df-propose{from{opacity:0; transform:scale(.96)} to{opacity:1; transform:none}}
/* ---- la confirmation : à côté du bloc, un dialogue léger (alertdialog) — la question, Changer (Entrée) · Annuler (Échap) ---- */
.df-chg{position:fixed; left:0; top:0; z-index:var(--z-popover); width:max-content; max-width:min(360px,calc(100vw - var(--sp-4))); padding:var(--sp-3) var(--sp-3) var(--sp-2);
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--elevated); box-shadow:var(--el-2); color:var(--ink);
  opacity:0; transform:translateY(4px); transition:opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease-ressort)}
.df-chg.dessus{transform:translateY(-4px)}
.df-chg.on{opacity:1; transform:none}
.df-chg-q{margin:0; font-size:var(--fs-14); font-weight:600; line-height:1.4; color:var(--ink)}
.df-chg-d{margin:var(--sp-1) 0 0; font-size:var(--fs-12); line-height:1.4; color:var(--muted)}
.df-chg-b{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3)}
.df-chg-b .ds-btn .ds-kbd{margin-left:var(--sp-1)}
/* ---- un créneau libre : la marque au quart d'heure (à la souris), discrète ; au doigt, l'appui long (rien ne se sélectionne) ---- */
.df-piste{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.df-creneau{position:absolute; top:var(--sp-1); bottom:var(--sp-1); width:0; border-left:1px dashed color-mix(in srgb,var(--accent) 70%,transparent); font-style:normal; pointer-events:none;
  opacity:0; transition:opacity var(--t-1) var(--ease)}
.df-creneau.on{opacity:1; transition-delay:var(--t-4)}
.df-creneau span{position:absolute; left:var(--sp-15); top:50%; padding:var(--sp-05) var(--sp-2); border:1px solid var(--border); border-radius:var(--r-pilule); background:var(--surface);
  box-shadow:var(--el-1); color:var(--muted); font-size:var(--fs-11); font-weight:500; line-height:1.4; white-space:nowrap; transform:translateY(-50%)}
.df-creneau.df-gauche span{left:auto; right:var(--sp-15)}
html.df-en-glisse .df-creneau{display:none}
/* ---- « Toi » : le temps libre du jour, à droite du nom ; chacun : le bilan du jour sous son nom ---- */
.df-libre{margin-left:var(--sp-15); font-size:var(--fs-12); font-weight:500; color:var(--texte-ok); font-variant-numeric:tabular-nums}
.df-bil{min-width:0; font-size:var(--fs-11); line-height:1.3; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.df-ligne.df-l3 .df-ch-t{gap:0}
.df-ligne.df-l3 .df-ch-t>b{line-height:1.3}
.df-ligne.df-l3 .df-st{line-height:1.35}
.df-ligne.df-l3 .df-bloc{margin-top:10px}
.df-ligne.df-l3 .df-asg{margin-top:16px}
/* ---- la légende : le texte à côté de son icône (il passe à la ligne dans sa colonne, l'icône reste en tête) ---- */
.df-lg-txt{flex:1 1 0; min-width:0}
/* ---- au doigt (iPad, paysage) : la légende ne parle pas des touches ; la confirmation, des cibles de 44 px sans « Entrée » ni « Échap » ---- */
@media (pointer:coarse){
  .df-lg-touches{display:none}
  .df-chg-b .ds-btn{min-height:var(--h-touch)}
  .df-chg-b .ds-kbd{display:none}
}
@media (prefers-reduced-motion:reduce){
  .df-chg,.df-creneau{transition:none}
  .df-bloc.df-propose{animation:none}
}


/* ====== LOT W2 — ANALYSE : RENTABILITÉ, STATISTIQUES, OBJECTIFS, SITE WEB, STRATÉGIE DANS L'ANATOMIE « ITINÉRAIRE » (07/10/2026 : « améliore les fonctionnalités et le design de l'admin ») ====== */
/* DIRECTION § 4.1 (le régime PILOTAGE : un héros par écran, des cartes en relief, des courbes ; la référence Finary), § 3.3 (l'en-tête
   chiffré), § 3.2 règle 2 (un chiffre agrégé mène à sa liste). Les cinq onglets d'Analyse partagent : la rangée de la période (le même
   endroit sur les cinq), le « i » des définitions, la bande des chiffres (ana-bande, qui devient un lien chiffre par chiffre), le héros.
   Des jetons seulement ; au téléphone (760 px), la pastille de période et sa feuille, les actions au bout de la rangée. */

/* ---- la rangée de la période : la période à gauche, les puces à droite, ce qu'elle couvre dessous ---- */
.ana-per{gap:var(--sp-2); margin-bottom:var(--sp-3)}
.ana-puces{display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.ana-per>.ana-per-note{flex:1 1 100%; order:9; font-size:var(--fs-12); color:var(--muted); line-height:var(--lh-texte)}
/* les actions de l'en-tête, au bout de la rangée, quand l'en-tête n'en a plus la place (sous 1 040 px) */
.ana-tel{display:none; align-items:center; gap:var(--sp-1)}
@media (max-width:1040px){ .ana-tel{display:inline-flex} }
/* les onglets de la rentabilité, sous la rangée de la période */
#s-analyse .ana-per+.anatabs{margin-bottom:var(--sp-3)}
.anatabs[role="tablist"] button:focus-visible{outline:none; box-shadow:var(--ring)}

/* ---- le « i » : une définition au survol, une bulle au toucher ---- */
.ana-i{display:inline-grid; place-items:center; flex:none; width:24px; height:24px; padding:0; border:0; border-radius:var(--r-rond); background:none; color:var(--faint); cursor:help; vertical-align:middle}
.ana-i:hover{color:var(--ink-2); background:var(--surface-piste)}
.ana-i:focus-visible{outline:none; box-shadow:var(--ring)}
.ana-i .svgi{width:15px; height:15px}
.card .ch .ana-i{margin-left:calc(-1 * var(--sp-1))}
@media (pointer:coarse){ .ana-i{position:relative} .ana-i::after{content:''; position:absolute; inset:-10px} }

/* ---- le héros : son titre dit la période, son « i » à côté ---- */
.ana-hero-t{display:flex; align-items:center; gap:var(--sp-1); min-width:0}
h2.ana-hero-l{margin:0; font-size:var(--fs-14); font-weight:600; line-height:var(--lh-titre); color:var(--ink-2)}
h2.ana-hero-l span{font-weight:500; color:var(--muted)}
.ana-hero-n .kpi-var{display:inline-flex; align-items:center; gap:var(--sp-1)}

/* ---- la bande : un chiffre qui mène quelque part est un lien ---- */
.ana-bande.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ana-bande.n7{grid-template-columns:repeat(4,minmax(0,1fr))}
.ana-bande.n7 .ana-bc:nth-child(5){border-left:0}
.ana-bande.n7 .ana-bc:nth-child(n+5){border-top:1px solid var(--border-doux)}
.ana-bc{position:relative}
.ana-bc.lien{cursor:pointer; transition:background var(--t-1) var(--ease)}
.ana-bc.lien:hover{background:var(--surface-2)}
.ana-bc.lien:hover .ana-bl{color:var(--ink)}
.ana-bc.lien:focus-visible{outline:none; box-shadow:inset var(--ring)}
.ana-bc .kpi-var{display:inline-flex; align-items:center; gap:var(--sp-1); align-self:flex-start}
.ana-bc .kpi-var .kpi-rang{font-size:var(--fs-12)}
.ana-bc .kpi-spark{display:none}
@media (min-width:761px){
  .ana-bc .kpi-spark{display:block; position:absolute; right:var(--sp-4); bottom:var(--sp-3); width:64px; height:22px; color:var(--chart-hero); pointer-events:none; overflow:visible}
  .ana-bc .kpi-spark.mauvais{color:var(--corail)}
  .ana-bc:has(.kpi-spark)>.ana-bs{padding-right:calc(64px + var(--sp-3))}
}
@media (max-width:1040px){
  .ana-bande.n4,.ana-bande.n7{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ana-bande.n4 .ana-bc:nth-child(odd),.ana-bande.n7 .ana-bc:nth-child(odd){border-left:0}
  .ana-bande.n4 .ana-bc:nth-child(even),.ana-bande.n7 .ana-bc:nth-child(even){border-left:1px solid var(--border-doux)}
  .ana-bande.n4 .ana-bc:nth-child(n+3),.ana-bande.n7 .ana-bc:nth-child(n+3){border-top:1px solid var(--border-doux)}
}

/* ---- l'œil mené à une carte (un chiffre de l'en-tête, une cellule de la bande) ---- */
@keyframes ana-eclaire{0%,100%{outline-color:transparent} 20%,80%{outline-color:var(--accent)}}
.ana-eclaire{outline:2px solid transparent; outline-offset:3px; animation:ana-eclaire calc(var(--t-4) * 5) var(--ease)}
@media (prefers-reduced-motion:reduce){ .ana-eclaire{animation:none; outline-color:var(--accent)} }
:is(#anaMount,#statsMount,#objMount,#audMount,#stratMount) :is(.card,details){scroll-margin-top:calc(var(--haut-barre) + var(--sp-4))}

/* ---- « Comment c'est calculé » : chaque chiffre, sa règle ---- */
.ana-calcul .sub{margin:0 0 var(--sp-3)}
.ana-calcul .ds-dl{grid-template-columns:minmax(120px,max-content) minmax(0,1fr)}
.ana-calcul .ds-dl dd{line-height:var(--lh-texte)}

/* ---- Rentabilité › Prévisions : le héros (la fin du mois) ---- */
.ana-prev-heros .anafb b{font-size:var(--fs-32); letter-spacing:var(--approche-32)}

/* ---- Statistiques : le héros (la mesure, sa courbe), la bande, les cartes qui mènent à leurs courses ---- */
.stt-heros-h{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2) var(--sp-4)}
.stt-heros .ana-hero-c{margin-top:var(--sp-1)}
.stt-bande{margin-bottom:var(--sp-4)}
.stt-villes,.stt-duo{margin-bottom:var(--sp-4)}
.stt-duo>.card{margin:0}
.stt-hbar>.tr.va{cursor:pointer; border-radius:var(--r-xs)}
.stt-hbar>.tr.va:hover .v{color:var(--ink)}
.stt-hbar .nm .ds-mention{font-weight:500}
#sttStatuts .hbar.va{cursor:pointer}
#sttRecords .drow.va{cursor:pointer; border-radius:var(--r-xs)}
#sttRecords .drow.va:hover{background:var(--surface-2)}
.stt-ve-lien{cursor:pointer}
.stt-ve-lien:hover{color:var(--texte-accent)}
@media (max-width:760px){
  .ana-per{gap:var(--sp-2)}
  .ana-per .ds-puce .k{display:none}
  .stt-heros-h .ds-segment{width:100%}
}
/* la variation d'un chiffre de la bande : la puce du héros (kpiChip), en petit */
.ana-bc .delta{display:inline-flex; align-items:center; gap:var(--sp-05); padding:1px var(--sp-2); border-radius:var(--r-tag); font-family:var(--font-num); font-size:var(--fs-12); font-weight:600; font-variant-numeric:tabular-nums}
.ana-bc .delta .svgi{width:12px; height:12px}
.ana-bc :is(.delta.g,.delta.up){color:var(--texte-ok); background:var(--fond-ok)}
.ana-bc :is(.delta.r,.delta.down){color:var(--texte-danger); background:var(--fond-danger)}
.ana-bc :is(.delta.n,.delta.flat){color:var(--muted); background:transparent; padding:0}
.ana-bc .kpi-vs{font-size:var(--fs-12); color:var(--muted)}
.ana-bande.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ob-alerte.ds-puce{gap:var(--sp-15); padding:0 var(--sp-3) 0 var(--sp-2); cursor:pointer}
.ob-alerte.ds-puce input{margin:0}
@media (max-width:760px){
  .ana-bande.n3 .ana-bc{padding:var(--sp-3) var(--sp-2)}
  .ana-bande.n3 .ana-bc:nth-child(n+2){border-left:1px solid var(--border-doux); border-top:0}
}

/* ---- Site web : la rangée de la période (les fenêtres, le mois au choix), le héros (les visites, leur courbe), la bande ---- */
#audMount>.aud-per{margin-bottom:0}
#audMount>.ana-bande{margin-top:0}
.aud-heros>.aud-exemple{align-self:flex-start; margin-bottom:0}
.aud-heros .aud-faits{margin-top:0}
.aud-heros .aud-courbe{margin-top:var(--sp-2)}
.aud-heros .aud-vide{margin-top:var(--sp-2)}
.aud-heros>.aud-hors{margin-top:var(--sp-1)}
.ana-hero .delta.up{color:var(--texte-ok); background:var(--fond-ok)}
.ana-hero .delta.down{color:var(--texte-danger); background:var(--fond-danger)}
.ana-hero .delta.flat{color:var(--muted); background:transparent; padding:0}
.aud-live>b{display:inline-flex; align-items:center}

/* ---- Stratégie : la rangée des deux vues, les chiffres d'un conseil qui mènent à leur écran ---- */
#stratMount .st-barre{margin:0}
#stRisques{scroll-margin-top:calc(var(--haut-barre) + var(--sp-4))}
.st-chiffres.va{cursor:pointer; border-radius:var(--r-sm)}
.st-chiffres.va:hover span{background:var(--surface-piste)}
.st-chiffres.va:hover b{color:var(--texte-accent)}
.st-chiffres.va:focus-visible{outline:none; box-shadow:var(--ring)}
@media (max-width:760px){
  /* le mois au choix passe sous les fenêtres ; les actions restent au bout de la première ligne */
  .aud-per #audMois{order:5}
  /* trois chiffres côte à côte : la comparaison se lit une fois, au héros ; la variation passe à la ligne au besoin */
  .ana-bande.n3 .kpi-vs{display:none}
  .ana-bande.n3 .kpi-var{flex-wrap:wrap}
}


/* ====== LOT W4 — LA DÉMO COMPLÈTE, SANS SERVEUR : LE BANDEAU « DÉMO » ET L'ÉCHEC DU CHARGEMENT (07/10/2026 : « "Voir la démo" remplit tous les écrans, sans serveur ») ======
   ?demo=1 (js/noyau/demo.js) : une bande mince en tête de la page, sur toute la largeur du contenu, dans l'or doux de la marque
   (comme le « mode test » de Stripe) : « Démo : rien n'est enregistré », « Partager le lien », « Quitter la démo ». Elle
   défile avec la page (la barre du haut reste seule collée). Au téléphone : la phrase courte, le partage en icône, 44 px.
   Sur l'écran d'ouverture, si le monde de démonstration ne se charge pas : la raison, « Réessayer », « Quitter la démo ». */
.demo-bandeau{display:flex; align-items:center; justify-content:center; gap:var(--sp-1) var(--sp-3); flex-wrap:wrap; margin:0 calc(-1 * var(--gutter));
  padding:calc(var(--sp-05) + env(safe-area-inset-top,0px)) var(--gutter) var(--sp-05); background:var(--or-doux); color:var(--gold-ink);
  border-bottom:1px solid color-mix(in srgb,var(--or) 40%,transparent); font-size:var(--fs-12); line-height:1.4}
html[data-density="compact"] .demo-bandeau{margin:0 -20px; padding-left:20px; padding-right:20px}
.demo-bandeau-t{min-width:0}
.demo-bandeau-t b{font-weight:600}
.demo-bandeau .ds-btn{height:28px; padding:0 var(--sp-2); color:var(--gold-ink); font-size:var(--fs-12)}
.demo-bandeau .ds-btn .svgi{width:14px; height:14px; color:inherit}
.demo-bandeau .ds-btn:hover{background:color-mix(in srgb,var(--or) 20%,transparent); color:var(--gold-ink)}
#bootLoad #demoEchec .ds-btn{width:100%; height:var(--h-lg)}
#bootLoad #demoEchec .ds-btn.fantome{color:var(--side-ink); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
#bootLoad #demoEchec .ds-btn.fantome:hover{background:rgba(255,255,255,.08)}
@media (max-width:1040px){
  .demo-bandeau,html[data-density="compact"] .demo-bandeau{margin:0 calc(-1 * var(--sp-3)); padding-left:var(--sp-3); padding-right:var(--sp-1)}
}
@media (max-width:760px){
  .demo-bandeau{justify-content:flex-start; flex-wrap:nowrap; gap:0}
  .demo-bandeau-t{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .demo-bandeau-plus,.demo-bandeau [data-demo-partager] span{display:none}
  .demo-bandeau .ds-btn{flex:none; height:var(--h-touch); min-width:var(--h-touch)}
}
/* « Au volant » (html.conduite : la page sans marges) : le bandeau sans débord */
html.conduite .demo-bandeau{margin:0; padding-left:var(--sp-3); padding-right:var(--sp-1)}

/* ====== LOT N1 — NOUVELLE RÉSERVATION : « QUI CONDUIT ? », LE PRIX ET LA PAIE DE LA GRILLE (08/10/2026 : « quand je crée une réservation je peux choisir à qui je l'assigne, et le prix est tiré de la grille, même le paiement chauffeur ») ======
   « Qui conduit ? » est une liste de choix comme les véhicules (boutons radio, la paie de la grille à droite) : « Plus tard », « Toi »,
   les trois chauffeurs qui conviennent le mieux à cette heure, « Un autre chauffeur… » (une recherche). L'état de chacun à cette heure
   se lit en couleur de texte : libre en vert, un conflit ou une absence en ambre. Le récapitulatif dit qui conduit, sous le client. */
#s-new .nv-qui{margin-top:var(--sp-5)}
#s-new .nv-qui .nv-sous-t{margin-top:0}
#s-new .nv-qui-r .ds-avatar{width:30px; height:30px}
#s-new .nv-qui-r .nv-qui-ok{color:var(--texte-ok)}
#s-new .nv-qui-r .nv-qui-alerte{color:var(--texte-alerte)}
#s-new .nv-qui-r .nv-qui-fl{font-weight:500; color:var(--ink-2)}
#s-new .nv-qui-r.dim{cursor:not-allowed}
#s-new .nv-qui-r .vp small{max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#s-new .nv-qui-autre{margin:0 0 var(--sp-2)}
#s-new .nv-qui-autre:empty{display:none}
#s-new .nv-qui-autre>.ds-lien{margin:var(--sp-1) 0}
#s-new .nv-qui-q{margin:var(--sp-3) 0 var(--sp-2)}
#s-new #nvQuiTrouves{max-height:340px; overflow:auto; overscroll-behavior:contain; padding:2px}
#s-new .nv-qui .ds-sq{margin-top:var(--sp-2)}
#s-new #nvQuiAide{margin:var(--sp-1) 0 var(--sp-2)}
#s-new .nv-rt-ch{display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-2); font-size:var(--fs-13); font-weight:500; color:var(--ink)}
#s-new .nv-rt-ch .svgi{width:15px; height:15px; color:var(--texte-accent)}
#s-new #nvGrilleLbl{overflow-wrap:anywhere}
#s-new .vehrow .vp.nv-vp-autre{color:var(--muted)}
#s-new .vehrow .vp.nv-vp-autre small{color:var(--texte-alerte)}
@media (max-width:760px){
  #s-new .nv-qui-r .vp small{max-width:120px}
}

/* V2.6 (youcef, 10/10) — QUI A PU VOIR LA COURSE PROPOSÉE : la dernière activité de l'app GoodJourney des chauffeurs visés.
   Colonne Entreprise (Réservations), fiche d'une course sans chauffeur, fiche d'une flotte (onglet Chauffeurs) et sa liste. */
.entvu{display:flex; align-items:flex-start; gap:var(--sp-05); color:var(--muted)}
.entvu svg{width:12px; height:12px; flex:none; margin-top:1px}
.entvu span{min-width:0}
/* la ligne d'état de la colonne est coupée (nowrap + ellipsis) : celle-ci passe à la ligne, elle est faite pour être lue */
#s-bookings .bk-t td.entcell .rowsub.entvu{white-space:normal; overflow:visible; text-overflow:clip; align-items:flex-start}
#s-bookings .bk-t td.entcell .rowsub.entvu-ok{color:var(--texte-ok)}
#s-bookings .bk-t td.entcell .rowsub.entvu-ko{color:var(--texte-danger)}
.entvu-ok{color:var(--texte-ok)}
.entvu-ko{color:var(--texte-danger)}
.fvu{margin-top:var(--sp-2)}
.fvu-t{display:flex; align-items:center; gap:var(--sp-1); flex-wrap:wrap; font-size:var(--fs-13); margin-bottom:var(--sp-1)}
.fvu-t svg{width:14px; height:14px; flex:none}
.fvu-l .fvu-ouvert .prp-pt{background:var(--good)}
.fvu-l .fvu-joignable .prp-pt{background:var(--warn)}
.fvu-l .fvu-injoignable .prp-pt{background:var(--faint)}
.fvu-l .fvu-injoignable{color:var(--muted)}
.fvu-note{margin:var(--sp-1) 0 0; font-size:var(--fs-12); color:var(--muted)}
.ent-app-l{margin-top:var(--sp-05)}
.ent-app{display:inline-flex; align-items:center; gap:var(--sp-05); color:var(--muted); font-size:var(--fs-12)}
.ent-app svg{width:12px; height:12px; flex:none}
.ent-app-on,.ent-app.ent-app-on,.ds-tableau .sous.ent-app-on{color:var(--texte-ok)}
.ent-app-n{white-space:nowrap}
.ent-app-n svg{width:11px; height:11px; vertical-align:-1px; margin-right:2px}

/* ====== LOT 11-10 B — À traiter plus net (une course, une ligne) ====== */
/* ce que la ligne réunit d'autre sur la même course (« Toujours sans réponse de … », « 1 payée · 4 essais de paiement non
   aboutis… ») se lit sous le détail, en petit, derrière un filet : le geste reste celui de la ligne */
.at-l .txt>.at-d2{font-size:var(--fs-12); line-height:var(--lh-titre); color:var(--muted); padding-left:var(--sp-1); border-left:2px solid var(--border)}
/* au téléphone, elle passe à la ligne (deux lignes au plus) comme le détail : « … ils partent seuls dans 22 h » se lit en entier */
@media (max-width:760px){
  #s-notifs .at-l .txt>.at-d2,.at-carte .at-l .txt>.at-d2{white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2}
}

/* ====== LOT 11-10 E — les gestes du quotidien, moins de friction ====== */
/* Dispatch › Liste : le sommaire des jours (un toucher descend à demain) ; au téléphone il défile sur une ligne */
.dsp-jnav{display:flex; gap:var(--sp-2); overflow-x:auto; scrollbar-width:none; margin:0 0 var(--sp-3); padding:var(--sp-05) var(--sp-05) var(--sp-1); width:0; min-width:100%; box-sizing:border-box}
/* width:0 + min-width:100% : le sommaire prend la largeur de la colonne sans l'élargir (ses boutons défilent dedans) */
.dsp-jnav::-webkit-scrollbar{display:none}
.dsp-jnav-b{display:inline-flex; align-items:center; gap:var(--sp-15); flex:none; min-height:36px; padding:0 var(--sp-3); border:0; border-radius:var(--r-pilule); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-strong); font:inherit; font-size:var(--fs-13); color:var(--ink); white-space:nowrap; cursor:pointer}
.dsp-jnav-b b{font-weight:600}
.dsp-jnav-n{color:var(--muted); font-variant-numeric:tabular-nums}
.dsp-jnav-s{color:var(--texte-danger); font-weight:600}
.dsp-jnav-b.sans{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 45%,var(--border-strong))}
.dsp-jnav-b:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (hover:hover){ .dsp-jnav-b:hover{background:var(--surface-2)} }
@media (max-width:760px){ .dsp-jnav-b{min-height:44px} }
/* Tableau de bord : un compte qui mène à ses courses (« 8 sans chauffeur », « 3 demain ») garde la couleur de sa phrase */
.ov2-lien-chiffre{color:inherit; border-bottom:1px dotted color-mix(in srgb,currentColor 45%,transparent)}
.ov2-lien-chiffre:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--r-tag)}
/* Réservations au téléphone : « dans 38 min » se coupait (« dans 38 … ») dans la colonne de 64 px ; le plus long libellé (68 px)
   déborde de 4 px au plus dans l'espace de 12 px qui la sépare du trajet : il se lit en entier, rien n'est recouvert */
.bkc.bk-li .bk-li-h small{overflow:visible; text-overflow:clip}
/* Réservations au téléphone : la destination se lisait coupée sur 17 courses sur 26 au banc (« NCE → M. »). Sur la ligne du
   téléphone seulement : la pastille de l'aéroport garde son code et sa couleur (le sens, V100.2) sans l'avion, la gamme garde son
   nom entier (V2.3) sans espacement des lettres, l'écart se resserre — 19 destinations sur 26 se lisent en entier */
.bkc.bk-li .bk-li-tg{gap:var(--sp-1)}
.bkc.bk-li .bk-aero .svgi{display:none}
.bkc.bk-li .bk-aero{padding:0 var(--sp-15)}
.bkc.bk-li .bk-gt{letter-spacing:0}
/* ====== LOT 11-10 R — CANDIDATURES : L'APERÇU AVANT L'ENVOI, L'ENVOI GROUPÉ, LES ÉTAPES DU RECRUTEMENT (11/10/2026 : « quand j'envoie le mail voir l'aperçu avant et pouvoir envoyer plusieurs mails en même temps et voir les étapes du recrutement ») ====== */
/* ---- le tableau des étapes, en tête de la liste : une carte, une case par étape, la flèche du parcours entre elles ---- */
.cd-etapes{margin:0 0 var(--sp-3)}
.cd-et-liste{list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); box-shadow:var(--el-1); overflow:hidden}
.cd-et{position:relative; display:flex; flex-direction:column; min-width:0}
.cd-et+.cd-et{border-left:1px solid var(--border-doux)}
/* la flèche du parcours : un chevron posé sur le filet, entre deux étapes */
.cd-et+.cd-et::before{content:''; position:absolute; top:22px; left:-5px; width:8px; height:8px; border-top:1px solid var(--border); border-right:1px solid var(--border); background:var(--surface); transform:rotate(45deg); pointer-events:none}
/* le bouton garde sa hauteur (un bouton étiré centre son contenu) : le survol et l'étape choisie teintent toute la case */
.cd-et{transition:background var(--t-1) var(--ease)}
.cd-et:has(.cd-et-b:hover){background:var(--surface-douce)}
.cd-et-b{flex:none; display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-05); width:100%; min-width:0; padding:var(--sp-3) var(--sp-4) var(--sp-3); border:0; background:none; font:inherit; text-align:left; color:var(--ink); cursor:pointer}
.cd-et-b:focus-visible{outline:none; box-shadow:inset var(--ring)}
.cd-et-n{font-size:var(--fs-22); font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.cd-et-l{max-width:100%; font-size:var(--fs-13); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cd-et-s{max-width:100%; font-size:var(--fs-12); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cd-et.vide .cd-et-n{color:var(--faint)}
.cd-et.tard .cd-et-s{color:var(--texte-alerte)}
.cd-et.issue:not(.vide) .cd-et-n{color:var(--texte-ok)}
.cd-et.on,.cd-et.on:has(.cd-et-b:hover){background:var(--accent-soft)}
.cd-et.on::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent)}
.cd-et.on .cd-et-l{color:var(--texte-accent)}
/* « Écrire aux 3 » : le geste des reçues, sous leur compte */
.cd-et-go{display:inline-flex; align-items:center; gap:var(--sp-1); align-self:flex-start; max-width:calc(100% - var(--sp-6)); margin:0 var(--sp-4) var(--sp-3); padding:var(--sp-05) var(--sp-2); border:1px solid var(--accent-border); border-radius:var(--r-pilule); background:var(--accent-soft); color:var(--texte-accent); font:inherit; font-size:var(--fs-12); font-weight:600; white-space:nowrap; cursor:pointer}
.cd-et-go span{overflow:hidden; text-overflow:ellipsis}
.cd-et-go .svgi{flex:none; width:12px; height:12px}
.cd-et-go:hover{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.cd-et-go:focus-visible{outline:none; box-shadow:var(--ring)}
.cd-et-emploi{display:inline-block; margin:var(--sp-2) 0 0; font-size:var(--fs-12)}
/* ---- la colonne « Étape » : le mot court, la piste (une barre par étape), puis l'état ou depuis quand ---- */
#s-candidatures .cd-t th[data-col="sel"]{width:40px}
#s-candidatures .cd-t th[data-col="recue"]{width:168px}
#s-candidatures .cd-t th[data-col="etat"]{width:200px}
.cd-t :is(th,td).selc{padding:0; text-align:center}
.cd-t .selc input{width:16px; height:16px; margin:0; accent-color:var(--accent); cursor:pointer; vertical-align:middle}
html[data-theme="dark"] :is(.cd-t .selc,.cd-tel .ck) input{color-scheme:dark}
.cd-t tr.sel td{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.cd-et-c{display:block; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cd-et-c.close{color:var(--muted)}
.cd-et-sous{display:flex; align-items:center; gap:var(--sp-2); min-width:0; white-space:nowrap}
.cd-et-sous .ds-statut{font-size:var(--fs-12)}
.cd-depuis{font-size:var(--fs-12); color:var(--muted)}
.cd-piste{flex:none; display:inline-flex; gap:2px}
.cd-piste i{display:block; width:9px; height:4px; border-radius:var(--r-pilule); background:var(--surface-piste)}
.cd-piste i.fait{background:color-mix(in srgb,var(--accent) 55%,var(--surface-piste))}
.cd-piste i.ici{background:var(--accent)}
.cd-piste.fini i{background:var(--point-ok)}
.cd-piste.close i.fait,.cd-piste.close i.ici{background:var(--point-neutre)}
/* la place manque (un portable) : le véhicule passe, puis ce qu'il déclare — la fiche les garde */
@media (min-width:1041px) and (max-width:1359px){ #s-candidatures .cd-t[data-colsauto] :is(th[data-col="veh"],td[data-c="veh"]){display:none} }
@media (min-width:1041px) and (max-width:1199px){ #s-candidatures .cd-t[data-colsauto] :is(th[data-col="atouts"],td[data-c="atouts"]){display:none} }
/* ---- au téléphone : la case du mode « Sélectionner » devant l'avatar ---- */
.cd-tel .ch-li2:has(>.ck){grid-template-columns:auto auto minmax(0,1fr) auto; padding-left:var(--sp-2)}
.cd-tel .ch-li2 .ck{position:relative; width:28px; height:28px; margin:0; display:grid; place-items:center}
.cd-tel .ch-li2 .ck::after{content:''; position:absolute; inset:-8px -6px}
.cd-tel .ch-li2 .ck input{width:20px; height:20px; margin:0; accent-color:var(--accent)}
.cd-tel .ch-li2.sel{background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
/* ---- la frise de la fiche : chaque étape (faite, ici, à venir) et sa date ; toucher une étape l'y passe ---- */
.cd-frise{margin:0 0 var(--sp-3); padding:var(--sp-3) var(--sp-4) var(--sp-2); border:1px solid var(--border-doux); border-radius:var(--r-md); background:var(--surface-3)}
.cd-frise-t{margin:0 0 var(--sp-2); font-size:var(--fs-12); font-weight:500; color:var(--ink-2)}
.cd-frise ol{list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr)}
.cd-frise li{position:relative; min-width:0}
/* le trait du parcours : de chaque point au suivant, plein jusqu'à l'étape où il en est */
.cd-frise li+li::before{content:''; position:absolute; top:9px; left:calc(-50% + 11px); right:calc(50% + 11px); height:2px; border-radius:var(--r-pilule); background:var(--border)}
.cd-frise li:is(.fait,.ici)+li:is(.fait,.ici)::before{background:var(--accent)}
.cd-frise button{display:flex; flex-direction:column; align-items:center; gap:var(--sp-05); width:100%; min-width:0; padding:0 var(--sp-05) var(--sp-1); border:0; border-radius:var(--r-sm); background:none; font:inherit; color:var(--muted); cursor:pointer}
.cd-frise button:disabled{cursor:default}
.cd-frise button:not(:disabled):hover .pt{box-shadow:0 0 0 4px var(--accent-soft)}
.cd-frise button:focus-visible{outline:none; box-shadow:var(--ring)}
.cd-frise .pt{display:grid; place-items:center; width:20px; height:20px; border:2px solid var(--border); border-radius:var(--r-rond); background:var(--surface); transition:box-shadow var(--t-1) var(--ease)}
.cd-frise .pt .svgi{width:11px; height:11px; stroke-width:3}
.cd-frise .lab{max-width:100%; font-size:var(--fs-11); font-weight:500; line-height:1.25; text-align:center}
.cd-frise .d{min-height:14px; font-size:var(--fs-11); color:var(--faint); font-variant-numeric:tabular-nums}
.cd-frise li.fait .pt{border-color:var(--accent); background:var(--accent); color:var(--accent-ink)}
.cd-frise li.fait .lab{color:var(--ink-2)}
.cd-frise li.ici .pt{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.cd-frise li.ici .pt::after{content:''; width:8px; height:8px; border-radius:var(--r-rond); background:var(--accent)}
.cd-frise li.ici .lab{color:var(--texte-accent); font-weight:600}
.cd-frise.fini li .pt{border-color:var(--point-ok); background:var(--point-ok)}
.cd-frise.fini li+li::before{background:var(--point-ok)}
.cd-frise.close{background:var(--surface-2)}
.cd-frise.close li:is(.fait,.ici) .pt{border-color:var(--point-neutre); background:var(--point-neutre); box-shadow:none}
.cd-frise.close li.ici .pt::after{background:var(--surface)}
.cd-frise.close li:is(.fait,.ici)+li:is(.fait,.ici)::before{background:var(--point-neutre)}
.cd-frise.close li.ici .lab{color:var(--ink-2)}
/* deux libellés pour un geste : le long au bureau, le court au téléphone */
.cd-court{display:none}
/* ---- l'aperçu partagé (un e-mail, l'envoi groupé) : de qui, à qui, les réponses, l'objet ; l'essai ---- */
.cd-ap-meta{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-05) var(--sp-3); margin:0 0 var(--sp-3); font-size:var(--fs-13)}
.cd-ap-meta dt{color:var(--muted)}
.cd-ap-meta dd{margin:0; min-width:0; overflow-wrap:anywhere; color:var(--ink)}
.cd-ap-essai{margin:var(--sp-3) 0 0}
/* ---- l'envoi groupé : les destinataires à gauche, l'aperçu (ou le texte) de chacun à droite ---- */
.cd-lot-g{display:grid; grid-template-columns:268px minmax(0,1fr); gap:var(--sp-4); align-items:start}
.cd-lot-l{position:sticky; top:0; min-width:0; border:1px solid var(--border-doux); border-radius:var(--r-md); background:var(--surface-3); overflow:hidden}
.cd-lot-lh{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--border-doux); font-size:var(--fs-13)}
.cd-lot-l ul{list-style:none; margin:0; padding:var(--sp-1); max-height:440px; overflow-y:auto}
.cd-lot-l li{display:flex; align-items:center; gap:var(--sp-1); border-radius:var(--r-sm)}
.cd-lot-l li.on{background:var(--accent-soft)}
.cd-lot-l li.hors .cd-lot-qui{opacity:.6}
.cd-lot-ck{flex:none; display:grid; place-items:center; width:32px; height:36px; cursor:pointer}
.cd-lot-ck input{width:16px; height:16px; margin:0; accent-color:var(--accent); cursor:pointer}
.cd-lot-qui{flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; padding:var(--sp-1) var(--sp-2) var(--sp-1) 0; border:0; background:none; font:inherit; text-align:left; color:var(--ink); cursor:pointer}
.cd-lot-qui:disabled{cursor:default}
.cd-lot-qui:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--r-sm)}
.cd-lot-n{display:flex; align-items:center; gap:var(--sp-1); min-width:0; font-size:var(--fs-13); font-weight:500}
.cd-lot-nom{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cd-lot-n .badge{flex:none; font-size:var(--fs-11)}
.cd-lot-qui small{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-12); color:var(--muted)}
.cd-lot-qui small.ko{color:var(--texte-alerte)}
.cd-lot-qui small.att{color:var(--texte-info)}
.cd-lot-d{min-width:0}
.cd-lot .cd-rendu{height:440px}
.cd-lot-nav{display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-3)}
.cd-lot-pos{flex:1; display:flex; flex-direction:column; align-items:center; min-width:0; text-align:center; font-size:var(--fs-14)}
.cd-lot-pos b{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cd-lot-pos .subtle{font-size:var(--fs-12)}
/* ---- le modèle (un e-mail, l'envoi groupé) : le questionnaire ou la demande de documents ---- */
.cd-ec-types{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin:0 0 var(--sp-3)}
.cd-ec-types-l{font-size:var(--fs-13); color:var(--muted)}
/* ---- l'envoi groupé : les groupes dont on n'a pas encore vu l'e-mail (chacun part tel qu'on l'a vu) ---- */
.cd-lot-avoir{display:flex; align-items:flex-start; gap:var(--sp-2); margin:0 0 var(--sp-3); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--accent-soft); color:var(--ink); font-size:var(--fs-13); line-height:1.45}
.cd-lot-avoir>.svgi{flex:none; width:16px; height:16px; margin-top:2px; color:var(--texte-accent)}
.cd-lot-avoir .ds-lien{display:inline; font-size:inherit}
.cd-lot-gr{display:flex; flex-wrap:wrap; margin:0 0 var(--sp-1)}
.cd-lot-gr .n{margin-left:var(--sp-1); font-variant-numeric:tabular-nums; color:var(--muted)}
.cd-lot-aide{margin:0 0 var(--sp-3)}
/* le suivi de l'envoi : la jauge, une ligne par destinataire */
.cd-lot-envoi{display:flex; flex-direction:column; gap:var(--sp-3)}
.cd-lot-et{display:flex; align-items:center; gap:var(--sp-2); margin:0; font-size:var(--fs-15)}
.cd-lot-et .svgi{flex:none; width:18px; height:18px; color:var(--texte-accent)}
.cd-lot-res{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; border:1px solid var(--border-doux); border-radius:var(--r-md)}
.cd-lot-res li{display:flex; align-items:flex-start; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); font-size:var(--fs-13)}
.cd-lot-res li+li{border-top:1px solid var(--border-doux)}
.cd-lot-res li>.svgi{flex:none; width:15px; height:15px; margin-top:2px; color:var(--faint)}
.cd-lot-res li>span{display:flex; flex-direction:column; min-width:0}
.cd-lot-res li small{font-size:var(--fs-12); color:var(--muted); overflow-wrap:anywhere}
.cd-lot-res li.ok>.svgi{color:var(--point-ok)}
.cd-lot-res li.ko>.svgi{color:var(--point-alerte)}
.cd-lot-res li.ko small{color:var(--texte-alerte)}
.cd-lot-res li.encours>.svgi{color:var(--texte-accent)}
@media (prefers-reduced-motion:no-preference){ .cd-lot-res li.encours>.svgi{animation:cd-lot-pulse 1s var(--ease) infinite alternate} }
@keyframes cd-lot-pulse{from{opacity:1} to{opacity:.35}}
@media (min-width:1280px){
  html.pn-on.pn-ancre .cd-et-liste{grid-auto-columns:minmax(124px,1fr); overflow-x:auto; scrollbar-width:thin}
  html.pn-on.pn-ancre .cd-et-b{padding:var(--sp-2) var(--sp-3)}
  html.pn-on.pn-ancre .cd-et-go{margin:0 var(--sp-3) var(--sp-2)}
  html.pn-on.pn-ancre .cd-et-go .cd-long{display:none}
  html.pn-on.pn-ancre .cd-et-go .cd-court{display:inline}
}
@media (max-width:1040px){
  /* le tableau des étapes défile de côté, une case par pouce */
  .cd-et-liste{grid-auto-columns:minmax(132px,1fr); overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .cd-et-liste::-webkit-scrollbar{display:none}
  .cd-et{scroll-snap-align:start}
  .cd-et-b{min-height:var(--h-touch)}
}
@media (max-width:760px){
  .cd-etapes{margin:0 0 var(--sp-2)}
  .cd-et-liste{grid-auto-columns:minmax(144px,1fr)}
  .cd-et-b{padding:var(--sp-2) var(--sp-3)}
  .cd-et-n{font-size:var(--fs-20)}
  .cd-et-go{max-width:calc(100% - var(--sp-4)); margin:0 var(--sp-2) var(--sp-2) var(--sp-3); min-height:32px}
  .cd-long{display:none}
  .cd-court{display:inline}
  /* la barre d'actions en lot tient dans la largeur : « Étape » en icône (son nom reste lu) */
  .cd-selbar{gap:var(--sp-1); padding-left:var(--sp-3)}
  .cd-selbar [data-cdsellot="etape"]>span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  /* l'envoi groupé : la croix ferme ; deux gestes au pouce */
  .cd-lot .cd-go [data-cdlotannuler]{display:none}
  /* la frise se lit de haut en bas : chaque étape sur sa ligne, son nom entier, sa date à droite, 36 px au doigt */
  .cd-frise{padding:var(--sp-3) var(--sp-3) var(--sp-2)}
  .cd-frise ol{grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:minmax(0,1fr)}
  .cd-frise li+li::before{top:-8px; left:calc(var(--sp-1) + 9px); right:auto; width:2px; height:16px}
  .cd-frise button{flex-direction:row; align-items:center; gap:var(--sp-3); min-height:36px; padding:var(--sp-1)}
  .cd-frise .pt{flex:none}
  .cd-frise .lab{flex:1; min-width:0; font-size:var(--fs-13); text-align:left}
  .cd-frise .d{min-height:0; font-size:var(--fs-12)}
  .cd-lot-g{grid-template-columns:1fr; gap:var(--sp-3)}
  .cd-lot-l{position:static}
  .cd-lot-l ul{max-height:180px}
  .cd-lot-nav .ds-btn{min-width:var(--h-touch); min-height:var(--h-touch)}
  .cd-ec-types .seg{width:100%}
  .cd-ec-types .seg button{flex:1 1 0; justify-content:center}
}

/* ====== LOT 15-10 T — le prix conseillé sous sa case, un clic (15/10/2026 : « mettre le prix conseillé d'un clic juste en dessous du bon prix ») ====== */
.tf-cons1{display:flex; align-items:center; gap:3px; margin:3px 0 0; padding:1px 6px; border:1px solid var(--good-soft); border-radius:var(--r-sm); background:var(--good-soft); color:var(--texte-ok); font-size:var(--fs-11); font-weight:600; font-variant-numeric:tabular-nums; cursor:pointer; white-space:nowrap; line-height:1.5}
.tf-cons1 .gi{width:11px; height:11px}
.tf-cons1:hover{background:var(--good); color:var(--page); border-color:var(--good)}
.tf-cons1:disabled{opacity:.5; cursor:default}

/* ====== LOT 15-10 S — qui l'a vraiment faite : sous-traitant et prix fournisseur, Novalia seulement (15/10/2026) ====== */
.fc-st{margin:6px 0; padding:8px 10px; border:1px dashed var(--border-strong); border-radius:var(--r-sm); font-size:var(--fs-12)}
.fc-st-l{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; color:var(--ink-2)}
.fc-st-f{display:grid; gap:6px}
.fc-st-ck{display:flex; align-items:center; gap:6px; font-weight:600}
.fc-st-c{display:grid; gap:2px}
.fc-st-c span{color:var(--muted); font-size:var(--fs-11)}
.fc-st-c input{width:100%; min-width:0}
.fc-st-b{display:flex; gap:6px; flex-wrap:wrap}
.fc-st-err{color:var(--texte-danger); margin:0}

/* ====== LOT 15-10 P — l'annulation tardive payée quand même, chauffeur payé ou non (15/10/2026) ====== */
.fc-ap{border-style:solid; border-color:var(--warn-soft, var(--border-strong)); background:var(--surface-2, transparent)}
.fc-ap-b{display:flex; gap:6px; flex-wrap:wrap}
.fc-ap .fc-aide{margin:4px 0 0}

/* ====== LOT 15-10 F — la facture d'une course, dans sa fiche ; un brouillon se corrige (15/10/2026 : « je veux sur admin pouvoir sortir des factures ») ====== */
.fc-fac{margin-top:var(--sp-2); padding-top:var(--sp-2); border-top:1px solid var(--border)}
.fc-l-fac .v{display:flex; justify-content:flex-end; min-width:0}
.ffac-l{display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-2); flex-wrap:wrap; text-align:right}
.ffac-s{margin:2px 0 0; text-align:right}
.ffac-b{display:flex; justify-content:flex-end; gap:6px; flex-wrap:wrap; margin-top:var(--sp-2)}
.fac-ed{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2) var(--sp-3)}
.fac-ed-c{display:grid; gap:2px; min-width:0; font-size:var(--fs-12)}
.fac-ed-c>span{color:var(--muted); font-size:var(--fs-11)}
.fac-ed-c input,.fac-ed-c textarea,.fac-ed-c select{width:100%; min-width:0}
.fac-ed-c small{font-size:var(--fs-11)}
.fac-ed-b{grid-column:1 / -1; display:flex; justify-content:flex-end}
@media (max-width:640px){ .fac-ed{grid-template-columns:minmax(0,1fr)} }

/* V3.3 — LA FACTURE AU NOM D'UNE SOCIÉTÉ (serveur V3.7) : le formulaire partagé (fiche de la course, brouillon) */
.fsoc{margin:var(--sp-2) 0 var(--sp-1)}
.fsoc .fsoc-l{grid-column:1 / -1}
.fsoc .fac-ed-b{gap:var(--sp-2)}

/* ====== LOT 16-10 M — Réservations › Mozio Driver : les courses de l’app Mozio Driver, hors chiffres (16/10/2026, js/exploitation/mozio-driver.js) ====== */
.bk-sous{margin:0 0 var(--sp-3)}
#s-bookings.mz-on > :not(#bkSous):not(#mzMount){display:none}
#s-bookings:not(.mz-on) #mzMount{display:none}
.mz-tete{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-3)}
.mz-info{display:flex; gap:var(--sp-2); align-items:flex-start; margin:0 0 var(--sp-4); font-size:var(--fs-13); color:var(--muted)}
.mz-info .svgi{flex:none; width:1.2em; height:1.2em; margin-top:.1em}
.mz-jour{margin-bottom:var(--sp-4)}
.mz-jour-t{margin:0 0 var(--sp-2); font-size:var(--fs-13); font-weight:600; color:var(--muted)}
.mz-jour-t::first-letter{text-transform:uppercase}
.mz-jour-t b{margin-left:var(--sp-1); font-weight:600; color:var(--ink)}
.mz-c{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-4); margin-bottom:var(--sp-2)}
.mz-c.vip{border-left:3px solid var(--or)}
.mz-h{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2)}
.mz-heure{font-size:var(--fs-20); font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink)}
.mz-ref{margin-left:auto; font-size:var(--fs-12); color:var(--muted)}
.mz-trajet{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-2); font-size:var(--fs-14); font-weight:500; color:var(--ink); min-width:0}
.mz-trajet span{min-width:0; overflow-wrap:anywhere}
.mz-fl{color:var(--muted)}
.mz-infos{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); font-size:var(--fs-13); color:var(--muted)}
.mz-infos .svgi{width:1.1em; height:1.1em}
.mz-pt{font-style:normal; opacity:.5}
.mz-alerte{display:flex; gap:var(--sp-2); align-items:flex-start; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); background:var(--warn-soft); color:var(--texte-alerte); font-size:var(--fs-13)}
.mz-alerte .svgi{flex:none; width:1.2em; height:1.2em}
.mz-sous{display:flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-12); color:var(--muted)}
.mz-sous .svgi{width:1.1em; height:1.1em}
.mz-actions{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-1)}
.mz-aide{margin:0 0 var(--sp-3); font-size:var(--fs-13); color:var(--muted)}
.mz-texte{width:100%; min-height:14em; box-sizing:border-box; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:var(--fs-12); line-height:1.4; padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); resize:vertical}
.mz-apercu{margin-top:var(--sp-3); font-size:var(--fs-13); color:var(--ink)}
.mz-apercu ul{margin:var(--sp-1) 0 0; padding-left:var(--sp-5)}
.mz-apercu li{margin:var(--sp-1) 0; overflow-wrap:anywhere}
.mz-apercu .svgi{width:1.1em; height:1.1em; vertical-align:-.15em}
.mz-err{color:var(--texte-danger)}
.mz-pied{display:flex; justify-content:flex-end; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4)}
@media (max-width:640px){ .mz-tete{flex-direction:column; align-items:stretch} .mz-ref{margin-left:0; flex-basis:100%} }

/* V3.6 — ÉVÉNEMENTS (les grands événements de la Côte d'Azur, js/exploitation/evenements-riviera.js) */
.ag-bandeau{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-3); border-radius:var(--r-sm); background:var(--warn-soft); color:var(--texte-alerte); font-size:var(--fs-13)}
.ag-bandeau .svgi{flex:none; width:1.2em; height:1.2em}
.ag-bandeau span{flex:1 1 220px}
.ag-barre{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-4)}
.ag-barre-d{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.ag-mois{margin-bottom:var(--sp-5)}
.ag-mois-t{margin:0 0 var(--sp-2); font-size:var(--fs-13); font-weight:600; color:var(--muted)}
.ag-c{display:flex; align-items:center; gap:var(--sp-3); width:100%; padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-2); text-align:left; font:inherit; color:inherit; cursor:pointer; border:0; border-left:3px solid transparent}
.ag-c:hover{background:var(--surface-2)}
.ag-c.aff3{border-left-color:var(--t-ambre)}
.ag-c.aff2{border-left-color:var(--t-ciel)}
.ag-c.passe{opacity:.6}
.ag-date{flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; width:48px; height:48px; border-radius:var(--r-md); background:var(--surface-2); line-height:1.05}
.ag-date b{font-size:var(--fs-20); font-weight:600; color:var(--ink)}
.ag-date small{font-size:var(--fs-11); text-transform:uppercase; color:var(--muted)}
.ag-corps{flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0}
.ag-l1{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.ag-nom{font-size:var(--fs-14); font-weight:600; color:var(--ink); overflow-wrap:anywhere}
.ag-l2,.ag-l3{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1); font-size:var(--fs-13); color:var(--muted)}
.ag-l3 .svgi{width:1em; height:1em}
.ag-pt{font-style:normal; opacity:.5; margin:0 2px}
.ag-tag{display:inline-flex; align-items:center; padding:1px 8px; border-radius:var(--r-pilule); background:var(--surface-2); font-size:var(--fs-11); font-weight:600; color:var(--muted); white-space:nowrap}
.ag-tag.vif{background:var(--accent-soft); color:var(--texte-accent)}
.ag-tag.nouveau{background:var(--warn-soft); color:var(--texte-alerte)}
.ag-tag.danger{color:var(--texte-danger)}
.ag-tag.or{color:var(--texte-alerte); box-shadow:inset 0 0 0 1px var(--or)}
.ag-droite{flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:var(--sp-1)}
.ag-dans{font-size:var(--fs-12); color:var(--muted); white-space:nowrap}
.ag-aff{display:inline-flex; gap:3px; vertical-align:middle}
.ag-aff i{width:7px; height:7px; border-radius:var(--r-rond); background:var(--border)}
.ag-aff i.on{background:var(--t-ambre)}
.ag-veille{display:flex; gap:var(--sp-2); align-items:flex-start; margin-top:var(--sp-5); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); background:var(--surface-2); font-size:var(--fs-13); color:var(--muted)}
.ag-veille.retard{background:var(--warn-soft); color:var(--texte-alerte)}
.ag-veille .svgi{flex:none; width:1.2em; height:1.2em; margin-top:.1em}
.ag-veille details{margin-top:var(--sp-2)}
.ag-veille ul{margin:var(--sp-1) 0 0; padding-left:var(--sp-5)}
.ag-desc{margin:0 0 var(--sp-3); font-size:var(--fs-14); color:var(--ink)}
.ag-faits{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:var(--sp-1) var(--sp-3); margin:0 0 var(--sp-4); font-size:var(--fs-13)}
.ag-faits dt{color:var(--muted)}
.ag-faits dd{margin:0; overflow-wrap:anywhere}
.ag-sec{margin:0 0 var(--sp-5)}
.ag-sec h3{display:flex; align-items:baseline; gap:var(--sp-2); margin:0 0 var(--sp-2); font-size:var(--fs-14); font-weight:600}
.ag-sec h3 .muted{font-weight:400; font-size:var(--fs-12)}
.ag-actions{list-style:none; margin:0 0 var(--sp-3); padding:0}
.ag-actions li{display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-1) 0; border-bottom:1px solid var(--border); font-size:var(--fs-13)}
.ag-actions label{flex:1 1 auto; display:flex; align-items:center; gap:var(--sp-2); min-width:0; cursor:pointer}
.ag-actions li.fait label span{text-decoration:line-through; color:var(--muted)}
.ag-rap{display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-12); color:var(--muted); white-space:nowrap}
.ag-rap .svgi{width:1em; height:1em}
.ag-ajout{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-2)}
.ag-ajout input:not([type=datetime-local]){flex:1 1 220px; min-width:0}
.ag-modeles{display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-bottom:var(--sp-2)}
.ag-modele{padding:4px 10px; border:1px dashed var(--border); border-radius:var(--r-pilule); background:none; font:inherit; font-size:var(--fs-12); color:var(--muted); cursor:pointer}
.ag-modele:hover{color:var(--ink); border-style:solid}
.ag-aide{margin:var(--sp-1) 0 var(--sp-2); font-size:var(--fs-12); color:var(--muted)}
.ag-maj{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.ag-maj > input{flex:1 1 200px; min-width:0}
.ag-pct{display:inline-flex; align-items:center; gap:4px}
.ag-pct input{width:6em}
.ag-fiche textarea{width:100%; box-sizing:border-box}
.ag-pied-sec{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2); margin-top:var(--sp-2)}
.ag-annonce{display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-12); color:var(--muted)}
.ag-pied{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--sp-2); margin-top:var(--sp-3)}
.ag-form .form-row{display:flex; flex-wrap:wrap; gap:var(--sp-3)}
.ag-form .form-row .field{flex:1 1 140px}
.ag-ajout-tel{display:none}
.ag-err{min-height:1.2em; margin:var(--sp-2) 0 0; font-size:var(--fs-13); color:var(--texte-danger)}
@media (max-width:760px){ .ag-ajout-tel{display:inline-flex} .ag-barre{flex-direction:column; align-items:stretch} .ag-c{padding:var(--sp-3)} .ag-droite .ag-aff{display:none} }

/* ====== LOT 18-10 E — Novalia à grande échelle : Mes villes (flotte), À valider (Novalia), listes par tranches (18/10/2026) ====== */
.vf-t td{white-space:normal; line-height:1.35; padding-top:var(--sp-2); padding-bottom:var(--sp-2)}
.vf-t .sous{margin-top:var(--sp-05); font-size:var(--fs-12); line-height:1.4; color:var(--muted)}
.vf-geste{text-align:right; white-space:nowrap}
.vf-geste .ds-btn+.ds-btn{margin-left:var(--sp-1)}
.vf-motif{display:flex; gap:var(--sp-1); align-items:flex-start; margin-top:var(--sp-1); font-size:var(--fs-12); line-height:1.4; color:var(--texte-danger)}
.vf-motif svg{flex:none; width:14px; height:14px; margin-top:var(--sp-05)}
.ls-plus{display:flex; align-items:center; justify-content:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--border-doux); font-size:var(--fs-13); color:var(--muted)}
@media (max-width:1040px){
  .vf-t thead{display:none}
  .vf-t tr{display:block; padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--border-doux)}
  .vf-t td{display:block; height:auto; padding:var(--sp-05) 0; border:0; background:none}
  .vf-t td:nth-child(2), .vf-t td:nth-child(4){display:inline-block; margin-right:var(--sp-2); font-size:var(--fs-13); color:var(--muted)}
  .vf-geste{text-align:left; padding-top:var(--sp-2)}
}
/* ====== LOT 18-10 S — ANALYSE › SITE WEB, ENCORE (V3.8 ; youcef, 18/10/2026 : « améliore encore la page analyse du site web ») ======
   Le direct (une ligne par visite des 30 dernières minutes, son étape, son blocage), ce que coûte la pub (quatre chiffres et
   le tableau par source), les trajets cherchés et la demande perdue, ce qui bloque. Tout en jetons. */
.aud-etq{display:inline-flex; align-items:center; padding:1px var(--sp-2); border-radius:var(--r-pilule); background:var(--surface-2); color:var(--ink-2); font-size:var(--fs-12); font-weight:500; white-space:nowrap}
.aud-etq.info{background:var(--fond-info); color:var(--texte-info)}
.aud-etq.alerte{background:var(--fond-alerte); color:var(--texte-alerte)}
.aud-etq.ok{background:var(--fond-ok); color:var(--texte-ok)}
.aud-etq.danger{background:var(--fond-danger); color:var(--texte-danger); max-width:100%; overflow:hidden; text-overflow:ellipsis}
.aud-plus{margin-top:var(--sp-3); color:var(--texte-accent); font-size:var(--fs-13); text-decoration:underline}
/* le direct */
.aud-direct-rien{margin:0; color:var(--muted); font-size:var(--fs-13)}
.aud-direct-l{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.aud-v{display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--grid)}
.aud-v:first-child{border-top:0; padding-top:0}
.aud-v-p{position:relative; flex:none; width:9px; height:9px; margin-top:6px; border-radius:var(--r-rond); background:var(--point-ok)}
.aud-v-p::after{content:''; position:absolute; inset:0; border-radius:inherit; background:var(--point-ok); animation:aud-pouls 2.4s ease-out infinite}
.aud-v-p.zero{background:var(--point-neutre)}
.aud-v-p.zero::after{display:none}
@media (prefers-reduced-motion:reduce){ .aud-v-p::after{animation:none; display:none} }
.aud-v-c{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.aud-v-t{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); font-size:var(--fs-13)}
.aud-v-camp{font-size:var(--fs-12)}
.aud-v-s{font-size:var(--fs-12); overflow-wrap:anywhere}
.aud-v-s .mono{color:var(--ink)}
.aud-v-h{flex:none; font-size:var(--fs-12); white-space:nowrap; font-variant-numeric:tabular-nums}
/* la pub : quatre chiffres, puis le tableau (une campagne en retrait sous sa source) */
.aud-pks{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-4)}
.aud-pk{display:flex; flex-direction:column; gap:2px; padding:var(--sp-3); border-radius:var(--r-md); background:var(--surface-2); min-width:0}
.aud-pk span{font-size:var(--fs-12); color:var(--muted)}
.aud-pk b{font-family:var(--font-num); font-size:var(--fs-20); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.aud-pk small{font-size:var(--fs-12); color:var(--muted); overflow-wrap:anywhere}
.aud-pks b.ok,.aud-pub-t b.ok{color:var(--texte-ok)}
.aud-pks b.alerte,.aud-pub-t b.alerte{color:var(--texte-alerte)}
.aud-pub-t tr.aud-camp td{font-size:var(--fs-12); color:var(--ink-2)}
.aud-camp-n{display:block; margin-left:var(--sp-3); padding-left:var(--sp-3); border-left:2px solid var(--border); overflow-wrap:anywhere}
.aud-saisir{color:var(--texte-accent); text-decoration:underline; font-size:var(--fs-12)}
/* les budgets (fenêtre) */
.aud-bud .sub{margin-top:0}
.aud-bud-l{list-style:none; margin:0 0 var(--sp-4); padding:0}
.aud-bud-l li{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--grid)}
.aud-bud-q,.aud-bud-m{display:flex; flex-direction:column; gap:2px; min-width:0}
.aud-bud-q{flex:1 1 auto}
.aud-bud-m{align-items:flex-end; text-align:right; font-variant-numeric:tabular-nums}
.aud-bud-l .muted{font-size:var(--fs-12)}
.aud-bud-f h4{margin:0 0 var(--sp-2); font-size:var(--fs-13)}
/* les trajets cherchés */
.aud-tr-f{margin-top:0; margin-bottom:var(--sp-3)}
.aud-delais{margin-bottom:var(--sp-4)}
.aud-delais h4,.aud-dates h4{margin:0 0 var(--sp-2); font-size:var(--fs-12); font-weight:600; color:var(--muted)}
.aud-tr{display:flex; flex-direction:column; gap:2px; min-width:0}
.aud-tr b{font-weight:500; color:var(--ink); overflow-wrap:anywhere}
.aud-tr small{font-size:var(--fs-12)}
.aud-dates{margin-top:var(--sp-4)}
.aud-dates-l{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.aud-date{display:inline-flex; align-items:baseline; gap:var(--sp-1); padding:2px var(--sp-2); border-radius:var(--r-pilule); border:1px solid var(--border); font-size:var(--fs-12); color:var(--ink-2)}
.aud-date b{color:var(--ink); font-variant-numeric:tabular-nums}
.aud-date.sans{border-color:color-mix(in srgb,var(--bad) 35%,var(--border))}
/* la demande perdue */
.aud-sp{list-style:none; margin:var(--sp-3) 0 0; padding:0}
.aud-sp li{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--grid)}
.aud-sp-c{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.aud-sp-c b{font-weight:500; color:var(--ink); overflow-wrap:anywhere}
.aud-sp-c .muted{font-size:var(--fs-12)}
.aud-sp li>.ds-btn{flex:none}
/* ce qui bloque */
.aud-bl{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3)}
.aud-bl-t{display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-13)}
.aud-bl-t b{flex:1 1 auto; min-width:0; font-weight:500; color:var(--ink)}
.aud-bl-p{flex:none; width:8px; height:8px; border-radius:var(--r-rond); background:var(--point-alerte)}
.aud-bl li.grave .aud-bl-p{background:var(--point-danger)}
.aud-bl-n{font-family:var(--font-num); font-size:var(--fs-15); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.aud-bl-s{margin:2px 0 0 calc(8px + var(--sp-2)); font-size:var(--fs-12)}
.aud-bl-d{display:flex; flex-wrap:wrap; gap:var(--sp-1); margin:var(--sp-1) 0 0 calc(8px + var(--sp-2))}
.aud-bl-d span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:1px var(--sp-2); border-radius:var(--r-pilule); background:var(--surface-2); font-size:var(--fs-12); color:var(--ink-2)}
.aud-bl-r{margin-top:var(--sp-4); font-size:var(--fs-13)}
.aud-bl-r summary{cursor:pointer; color:var(--texte-accent)}
.aud-bl-r ul{list-style:none; margin:var(--sp-2) 0 0; padding:0}
.aud-bl-r li{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px var(--sp-1); padding:var(--sp-1) 0; border-top:1px solid var(--grid); font-size:var(--fs-12); overflow-wrap:anywhere}
.aud-bl-r li small{flex:1 1 100%}
@media (max-width:760px){
  .aud-pks{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2)}
  .aud-pk{padding:var(--sp-2)}
  .aud-pk b{font-size:var(--fs-18)}
  .aud-v{gap:var(--sp-2)}
  .aud-camp-n{margin-left:var(--sp-1); padding-left:var(--sp-2)}
  .aud-sp li,.aud-bud-l li{flex-wrap:wrap}
  .aud-bud-m{align-items:flex-start; text-align:left}
}
/* ====== LOT 18-10 T — ANALYSE › SITE WEB AU MAXIMUM (V3.9 ; youcef, 18/10/2026 : « améliore encore l'analyse de site web au maximum ») ======
   Le segment (menu et puce), « À regarder », la grille jour × heure, le blog et les guides, les lignes de source cliquables. */
#audSegS{min-width:170px}
.aud-seg-x{display:inline-flex; align-items:center; gap:var(--sp-1); padding:var(--sp-1) var(--sp-3); border:0; border-radius:var(--r-pilule); background:var(--accent-soft); color:var(--texte-accent); font:inherit; font-size:var(--fs-13); font-weight:600; cursor:pointer}
.aud-seg-x svg{width:13px; height:13px; flex:none}
.aud-table tr.aud-cliq{cursor:pointer}
.aud-table tr.aud-cliq:hover td{background:var(--surface-3)}
/* à regarder : un point par ton (alerte, info, bonne nouvelle), le geste au bout */
.aud-cs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.aud-cs li{display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3) 0; border-top:1px solid var(--grid)}
.aud-cs li:first-child{border-top:0; padding-top:0}
.aud-cs-p{flex:none; width:9px; height:9px; margin-top:6px; border-radius:var(--r-rond); background:var(--point-info)}
.aud-cs li.alerte .aud-cs-p{background:var(--point-danger)}
.aud-cs li.ok .aud-cs-p{background:var(--point-ok)}
.aud-cs-c{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.aud-cs-c b{font-weight:600; color:var(--ink); font-size:var(--fs-14); overflow-wrap:anywhere}
.aud-cs-c span{font-size:var(--fs-13); color:var(--ink-2); line-height:var(--lh-texte)}
.aud-cs li>.ds-btn{flex:none}
/* jour × heure : 24 colonnes, cinq teintes de la série 1 */
.aud-hm{display:flex; flex-direction:column; gap:3px; margin-top:var(--sp-3)}
.aud-hm-h,.aud-hm-l{display:grid; grid-template-columns:34px repeat(24,minmax(0,1fr)); gap:3px; align-items:center}
.aud-hm-h span{font-size:var(--fs-11); color:var(--muted); white-space:nowrap; overflow:visible}
.aud-hm-j{font-size:var(--fs-12); color:var(--ink-2)}
.aud-hm-c{display:block; height:20px; border-radius:var(--r-xs); background:var(--surface-2)}
.aud-hm-c.n1{background:color-mix(in srgb,var(--serie-1) 16%,var(--surface-2))}
.aud-hm-c.n2{background:color-mix(in srgb,var(--serie-1) 34%,var(--surface-2))}
.aud-hm-c.n3{background:color-mix(in srgb,var(--serie-1) 54%,var(--surface-2))}
.aud-hm-c.n4{background:color-mix(in srgb,var(--serie-1) 76%,var(--surface-2))}
.aud-hm-c.n5{background:var(--serie-1)}
.aud-hm-c.r{box-shadow:inset 0 0 0 2px var(--point-ok)}
.aud-hm-leg{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); margin-top:var(--sp-3); font-size:var(--fs-12); color:var(--muted)}
.aud-hm-leg .aud-hm-c{width:16px; height:12px}
@media (max-width:760px){
  #audSegS{flex:1 1 100%; min-width:0}
  .aud-hm-h,.aud-hm-l{grid-template-columns:26px repeat(24,minmax(0,1fr)); gap:1px}
  .aud-hm-c{height:14px}
  .aud-cs li{flex-wrap:wrap}
}
/* ====== LOT 19-10 U — LE TUNNEL FACE À LA PÉRIODE D'AVANT (V3.10 ; youcef, 19/10/2026 : « améliore encore ») ====== */
.aud-dpt{flex:none; font-size:var(--fs-12); font-weight:600; font-variant-numeric:tabular-nums; color:var(--muted)}
.aud-dpt.up{color:var(--texte-ok)}
.aud-dpt.down{color:var(--texte-alerte)}

/* ====== LOT 19-10 V — LA COURBE AU CHOIX, LE TUNNEL PAR APPAREIL, CE QUI SE RÉSERVE (V3.11 ; youcef, 19/10/2026 : « améliore encore x20 ») ====== */
.aud-basc{display:inline-flex; flex-wrap:wrap; gap:2px; padding:2px; border-radius:var(--r-pilule); background:var(--surface-2)}
.aud-basc button{border:0; background:transparent; color:var(--ink-2); font:inherit; font-size:var(--fs-12); font-weight:500; padding:4px 10px; border-radius:var(--r-pilule); cursor:pointer; min-height:28px}
.aud-basc button:hover{color:var(--ink)}
.aud-basc button.on{background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--el-1)}
.aud-mes{display:flex; justify-content:flex-start; margin:var(--sp-2) 0}
.aud-faible{color:var(--texte-alerte); font-weight:600}
.aud-eclair-haut{color:var(--texte-alerte); font-weight:600}
.aud-table tr.aud-meilleur td{background:var(--accent-soft)}
.aud-cqr{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:var(--sp-4)}
.aud-tranches h4{margin:0 0 var(--sp-2); font-size:var(--fs-13); font-weight:600; color:var(--ink-2)}
.aud-tr>.lnk{align-self:flex-start; font-size:var(--fs-12)}

/* ====== LOT 19-10 W — LA VISITE ENGAGÉE, LES SOURCES JOUR PAR JOUR, LES CONSEILS MASQUÉS (V3.12 ; youcef, 19/10/2026 : « améliore encore x20 ») ====== */
.aud-mes{gap:var(--sp-2); flex-wrap:wrap}
.aud-table .aud-dpt{margin-left:var(--sp-1)}
.aud-sjs{display:flex; flex-direction:column}
.aud-sj{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(80px,2fr) auto auto; align-items:center; gap:var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--grid)}
.aud-sj:first-child{border-top:0}
.aud-sj>b{font-variant-numeric:tabular-nums; font-weight:600; text-align:right}
.aud-sk{display:block; width:100%; height:28px; overflow:visible; stroke:var(--serie-autres)}
.aud-sk polyline{fill:none; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.aud-sk.k-gads{stroke:var(--aud-google-ads)}
.aud-sk.k-goog{stroke:var(--aud-google)}
.aud-sk.k-gpt{stroke:var(--aud-chatgpt)}
.aud-sk.k-gptads{stroke:var(--aud-chatgpt-ads)}
.aud-sk.k-bing{stroke:var(--aud-bing)}
.aud-sk.k-msads{stroke:var(--aud-microsoft-ads)}
.aud-sk.k-fb{stroke:var(--aud-facebook)}
.aud-sk.k-dir{stroke:var(--aud-direct)}
.aud-sk.k-autre{stroke:var(--serie-autres)}
.aud-masq{flex:none; font-size:var(--fs-12); color:var(--muted)}
.aud-masques{margin:0 0 var(--sp-3); font-size:var(--fs-12); color:var(--muted)}
.aud-direct-r{margin:0 0 var(--sp-3)}
.aud-tr>.aud-etq{align-self:flex-start}
@media (max-width:700px){
  .aud-sj{grid-template-columns:minmax(0,1fr) minmax(64px,1fr) auto}
}

/* ===== V3.13 (19/10) — lot L8 ===== */
/* la session expirée en cours de route (api.js, sessionBandeau) et l'écran dont le rendu a échoué (navigation.js, ecranEnPanne) :
   un bandeau dans le flux, la cause en gras, ce qu'on peut faire, un bouton */
.sess-bar,.ecran-panne{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin:0 0 var(--sp-4); padding:var(--sp-3) var(--sp-4);
  border:1px solid color-mix(in srgb,var(--bad) 40%,var(--border)); border-radius:var(--r-md); background:var(--bad-soft); color:var(--ink); font-size:var(--fs-13); line-height:1.45}
.sess-bar[hidden]{display:none}
.sess-ic,.ep-ic{display:inline-flex; flex:none; color:var(--texte-danger)}
.sess-ic svg,.ep-ic svg{width:18px; height:18px}
.sess-tx,.ep-tx{flex:1; min-width:min(100%,220px)}
.sess-tx b,.ep-tx b{font-weight:600}
.ep-tx{display:flex; flex-direction:column; gap:2px}
.ep-tx small{color:var(--muted); font-size:var(--fs-11); overflow-wrap:anywhere}
.sess-bar .btn,.ecran-panne .btn{flex:none; min-height:40px}
/* Actualiser tourne le temps de la relecture complète (donnees.js, reloadLive) */
#refreshBtn.tourne svg{animation:v92-tourne .9s linear infinite}
@media (prefers-reduced-motion:reduce){ #refreshBtn.tourne svg{animation:none} }
/* le clavier du téléphone est ouvert (coque.js, clavierMaj) : la barre du bas et la capsule s'effacent, les barres collées descendent */
html.clavier-ouvert #mobileNav{display:none}   /* la capsule, elle, se cache déjà pendant une saisie (html.saisie-active, volant.js) */
html.clavier-ouvert body{--bas-colle:0px}
/* l'aide des raccourcis rangée en groupes, avec sa croix (recherche.js, kbdAideOuvre) */
.kbd-panel .ch{display:flex; align-items:center; gap:var(--sp-2)}
.kbd-panel .kbd-x{margin-left:auto}
.kbd-panel:focus{outline:none}
.kbd-grp{padding:var(--sp-3) 0 var(--sp-1); font-size:var(--fs-11); font-weight:600; color:var(--muted)}
.kbd-grp:first-child{padding-top:0}
/* au téléphone, les chiffres du grand titre (« 18 courses sur 48 h · 5 sans chauffeur ») sont des liens de 22 px de haut : leur
   zone de toucher s'étend à 40 px, sans changer leur dessin ni l'espace entre eux */
@media (max-width:1040px){
  .grand-titre .ds-resume-lien{position:relative}
  .grand-titre .ds-resume-lien::after{content:''; position:absolute; inset:-9px -3px}
}
/* le compteur d'une tuile de « Plus » (coque.js, plusPastille) : la pastille du menu, en haut à droite de la tuile */
#sheetBack .sa{position:relative}
.sa .sa-n{position:absolute; top:var(--sp-1); right:var(--sp-15); min-width:18px; height:18px; padding:0 var(--sp-1); border-radius:var(--r-pilule);
  display:inline-grid; place-items:center; background:var(--bad); color:var(--accent-ink); font-size:var(--fs-11); font-weight:600; line-height:1; font-variant-numeric:tabular-nums}
/* ===== V3.13 (19/10) — lot L1 ===== */
/* À traiter : « Tout marquer fait » au bout de l'intertitre « À savoir » */
.ds-file>li.at-grp .at-lot{margin-left:auto; min-height:32px; padding:0 var(--sp-1); font-size:var(--fs-12); font-weight:600}
@media (max-width:760px){
  .ds-file>li.at-grp .at-lot{min-height:40px}
  /* la carte du tableau de bord au doigt : « Fait » et « Plus tard » ne s'ouvrent jamais au survol (un toucher laisse un survol
     collant sur certains téléphones : le titre de la ligne disparaissait, écrasé par les boutons) — balayer ou l'appui long */
  .at-carte .ds-file li.at-l .act .sec,.at-carte .ds-file li.at-l:hover .act .sec{display:none}
}
/* Événements : les rappels passés sans que l'action soit faite, la vue « Avec une action à faire » */
.ag-c .ag-retard,.ag-actions li.retard .ag-rap{color:var(--texte-danger); font-weight:600}
.ag-vue-actions{display:flex; margin:0 0 var(--sp-2)}
/* Tableau de bord : la ligne « maintenant » sous le titre se coupe entre ses chiffres, jamais au milieu d'un chiffre */
#topbar[data-ecran="overview"] .pg-resume .ds-resume>:not(.ds-sep){white-space:nowrap}
/* ===== V3.13 (19/10) — lot L2 ===== */
/* Réservations — « 3 sans chauffeur » d'un jour se touche (sélectionne ces courses) */
button.bk-jour-sans{appearance:none; border:0; background:none; padding:2px 6px; margin:-2px 0; border-radius:var(--r-sm); font:inherit; font-weight:600; color:var(--texte-danger); cursor:pointer}
button.bk-jour-sans:hover{background:var(--danger-doux); text-decoration:underline}
button.bk-jour-sans:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
/* Nouvelle réservation — le jour en un toucher */
.nv-jours{display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-top:var(--sp-1)}
.nv-jour{appearance:none; height:30px; padding:0 12px; border:0; border-radius:var(--r-pilule); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-strong); font:inherit; font-size:var(--fs-13); color:var(--ink); cursor:pointer}
.nv-jour:hover{background:var(--surface-2)}
.nv-jour:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
@media (max-width:760px){ .nv-jour{height:40px; padding:0 14px; font-size:var(--fs-14)} }
/* Dispatch › Frise — sa journée sur WhatsApp (au bout du nom), les chauffeurs sans course repliés */
.df-ch [data-dfwa]{flex:none; color:var(--texte-ok)}
.df-ligne.df-pli .df-ch{width:auto; min-width:var(--df-col); border-right:0}
.df-ligne.df-pli{min-width:0}
/* ===== V3.13 (19/10) — lot L3 ===== */
/* Choisir un chauffeur (ou une flotte, un véhicule) parmi des milliers : la recherche, puis la liste ouverte (6 lignes), puis l'aide */
.ch-pick{display:flex; flex-direction:column; gap:var(--sp-1); min-width:0}
.ch-pick .ch-pick-q,.ch-pick .ch-pick-l{width:100%; min-width:0}
.field .ch-pick select.ch-pick-l{background-image:none; padding-right:10px; min-height:0}
.ch-pick-l option{padding:4px 2px}
.ch-pick-i{min-height:16px; font-size:var(--fs-12); color:var(--muted)}
@media (max-width:700px){ .ch-pick .ch-pick-q{min-height:var(--h-touch)} }
/* Notes › Jamais notés : le bouton « Noter » reste visible (pas seulement au survol) */
.rtg-jamais td.gestes .ds-groupe-btn{opacity:1}
/* À valider : « Tout accepter » à côté du compte de la section */
.ds-section h3 .droite [data-afvtout]{margin-right:var(--sp-2)}
/* À valider au téléphone : une demande est un bloc ; le survol (collant au doigt) teintait chaque ligne du bloc en bandes */
@media (max-width:1040px){ .vf-t tbody tr:hover td{background:none} }
/* ===== V3.13 (19/10) — lot L4 ===== */
/* Clients, Entreprises clientes : la ligne où le clavier se trouve (J / K), comme Réservations et Canaux */
.cl-t tbody tr.cl-cur td{background:var(--surface-douce)}
.cl-t tbody tr.cl-cur td:first-child{box-shadow:inset 3px 0 0 var(--ink-2)}
.cl-t tr.cl-cur .gestes .ds-groupe-btn{opacity:1}
.cl-li.cl-cur{background:var(--surface-douce)}
/* Messages : le brouillon laissé dans une conversation ; « Marquer les N conversations comme lues » */
.ms-brouillon{color:var(--texte-alerte); font-weight:600}
.ms-toutlire{display:flex; justify-content:flex-end; padding:var(--sp-1) var(--sp-3); border-bottom:1px solid var(--filet)}
.ms-toutlire .ds-lien,.ms-fil-g .ds-lien[data-mstoutlire]{min-height:40px; white-space:nowrap}
/* ===== V3.13 (19/10) — lot L5 ===== */
/* Charges › « Tout noter payé » : le geste en lot au-dessus de la liste (vues À payer, En retard) */
.chg-lot{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); margin:0 0 var(--sp-3)}
.chg-lot:empty{display:none}
.chg-lot .muted{font-size:var(--fs-13)}
/* L'essentiel › Mois par mois : l'export à côté de la légende */
.ess-histo .ess-csv{margin-left:var(--sp-2)}
/* Factures › nouvelle facture : la TVA sous le total */
.fac-form-pied .fac-tva{font-size:var(--fs-13)}
@media (max-width:760px){
  /* au téléphone, les petits boutons d'export restent des cibles de 40 px */
  [data-fiexprep],[data-esscsv],[data-rapcsv],.chg-lot .ds-btn{min-height:40px; min-width:40px}
}
/* ===== V3.13 (19/10) — lot L6 ===== */
/* Tarifs › Prix du site : la bande « zones au prix d'une autre », le filtre « Sur devis », la fenêtre des règles */
.ps-eq{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); margin:calc(-1 * var(--sp-2)) 0 var(--sp-4); padding:var(--sp-2) var(--sp-4);
  border:1px solid var(--grid); border-radius:var(--r-md); background:var(--surface); color:var(--ink-2); font-size:var(--fs-13); line-height:1.45}
.ps-eq>.svgi{flex:none; width:16px; height:16px; color:var(--texte-info)}
.ps-eq-t{flex:1 1 280px; min-width:0}
.ps-eq-t b{color:var(--ink)}
.ps-eq .ds-lien{min-height:40px}
.ps-devis .cnt{margin-left:var(--sp-1); font-variant-numeric:tabular-nums; color:var(--muted)}
.ps-devis.on{border-color:var(--texte-accent); color:var(--texte-accent)}
.ps-eq-l{display:flex; flex-direction:column; margin:0; padding:0; list-style:none}
.ps-eq-l li{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); min-height:44px; border-top:1px solid var(--grid); font-size:var(--fs-14)}
.ps-eq-l li:first-child{border-top:0}
/* Tarifs › Options : l'écart à la règle des sièges enfant (10 € par siège et par course) */
.oz-siege{margin-left:var(--sp-1); white-space:nowrap; font-variant-numeric:normal}
.oz-siege-aide{margin:var(--sp-1) 0 0; font-size:var(--fs-12)}
/* Tarifs › Simulateur : « Comparer les gammes » (un bouton discret sous l'essentiel, puis le tableau des gammes) */
.sim-cmp-go{display:flex; justify-content:flex-end; margin:calc(-1 * var(--sp-2)) 0 var(--sp-3)}
.sim-cmp-go .btn{min-height:40px}
.sim-cmp{margin-bottom:var(--sp-4)}
.sim-cmp-t .sim-lien{font-weight:600}
/* ===== V3.13 (19/10) — lot L7 ===== */
/* Analyse › Flottes & chauffeurs : la recherche d'un nom tient dans la rangée des gestes, pleine largeur au téléphone */
#anaMount .ana-flo-q{width:180px;min-height:40px}
#anaMount .ana-risque-g{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:760px){ #anaMount .ana-flo-q{width:100%;flex:1 1 100%} }

/* ====== LOT 20-10 X — LES RECHERCHES UNE PAR UNE (V3.14 ; youcef, 20/10/2026 : « voir ce que les clients recherchent exactement de ville à ville ») ====== */
.aud-rq-l{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.aud-rq{display:flex; flex-direction:column; gap:var(--sp-1); padding:var(--sp-3) 0; border-top:1px solid var(--grid); min-width:0}
.aud-rq:first-child{border-top:0; padding-top:0}
.aud-rq-t{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); min-width:0}
.aud-rq-t>b{font-weight:600; color:var(--ink); font-size:var(--fs-14); overflow-wrap:anywhere}
.aud-rq-h{margin-left:auto; font-size:var(--fs-12); white-space:nowrap}
.aud-rq-a{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-4); font-size:var(--fs-13); color:var(--ink-2)}
.aud-rq-a>span{min-width:0; overflow-wrap:anywhere}
.aud-rq-s{font-size:var(--fs-12); color:var(--ink-2); font-variant-numeric:tabular-nums}
.aud-rq-g{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2)}
.aud-rq-p{display:inline-flex; align-items:baseline; gap:var(--sp-1); padding:1px var(--sp-2); border-radius:var(--r-pilule); background:var(--surface-2); font-size:var(--fs-12); color:var(--ink-2)}
.aud-rq-p b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.aud-rq-p.sans{background:var(--fond-danger); color:var(--texte-danger)}
.aud-rq-p.sans b{color:var(--texte-danger)}
.aud-rq-m{display:flex; flex-direction:column; gap:var(--sp-3)}
.aud-rq-f{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3)}
.aud-rq-f .search{flex:1 1 240px; min-width:0}
.aud-rq-c{display:inline-flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-13); color:var(--ink-2); white-space:nowrap}

/* ====== LOT 20-10 Y — LE COMPTE D'UNE PERSONNE (youcef, 20/10/2026 : « mon père je le paie tous les mois et c'est lui qui
   m'avance l'essence prélevée le 15 et le 1er… pour ma mère je la paie ponctuellement et des fois je lui prête de l'argent
   donc elle peut être en négatif… je veux pouvoir faire des avances également aux chauffeurs ») ====== */
/* un montant NÉGATIF (on me doit) se lit d'un coup d'œil, sans déchiffrer un signe */
.cash.neg{color:var(--texte-danger)}
.cpt-l{cursor:pointer}
.cpt-f{display:flex; flex-direction:column; gap:var(--sp-4); min-width:0}
/* LE SOLDE, en grand : il dit son SENS en mots (« je dois à … », « … me doit »), jamais un signe seul */
.cpt-solde{display:flex; flex-direction:column; gap:2px; padding:var(--sp-4); border-radius:var(--r-carte, 12px); background:var(--surface-2)}
.cpt-solde-v{font-family:var(--font-num); font-size:var(--fs-28, 28px); font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink)}
.cpt-solde-l{font-size:var(--fs-14); color:var(--ink-2)}
.cpt-solde-d{font-size:var(--fs-12); color:var(--ink-2)}
.cpt-solde.du{background:var(--fond-alerte, var(--surface-2))}
.cpt-solde.du .cpt-solde-v{color:var(--texte-alerte, var(--ink))}
.cpt-solde.neg{background:var(--fond-danger, var(--surface-2))}
.cpt-solde.neg .cpt-solde-v{color:var(--texte-danger)}
.cpt-solde.ok .cpt-solde-v{color:var(--ink)}
/* LES GESTES : un bouton par type, tous visibles d'un coup — « je veux que tout ça soit simple à ajouter » */
.cpt-gestes{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.cpt-form{display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4); border-radius:var(--r-carte, 12px);
  background:var(--surface); border:1px solid var(--border-strong)}
.cpt-form-t{display:flex; align-items:center; gap:var(--sp-2); margin:0; font-size:var(--fs-14); color:var(--ink)}
.cpt-form>label{display:flex; flex-direction:column; gap:var(--sp-1); font-size:var(--fs-13); color:var(--ink-2)}
.cpt-form .go{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-1)}
.cpt-sens{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4)}
.cpt-regle{margin:0; font-size:var(--fs-12)}

/* ====== LOT 20-10 Z — TRIER EN CLIQUANT SUR UN INTITULÉ (youcef, 20/10/2026 : « je dois pouvoir trier à chaque fois…
   juste en cliquant sur le nom… et pareil pour tout le reste où c'est logique de trier dans tout l'admin ») ====== */
.dt th.tri,.ds-tableau th.tri{cursor:pointer; user-select:none}
.dt th.tri:hover,.ds-tableau th.tri:hover{color:var(--ink)}
.dt th.tri:focus-visible,.ds-tableau th.tri:focus-visible{outline:2px solid var(--focus,currentColor); outline-offset:-2px}
/* la flèche ne prend sa place que lorsqu'elle sert : l'intitulé ne bouge pas au premier clic */
.tri-fl{display:inline-flex; align-items:center; width:0; overflow:hidden; vertical-align:middle; transition:width .12s ease}
.tri-fl .svgi{width:13px; height:13px; margin-left:3px}
th.tri-on .tri-fl{width:16px}
th.tri-on{color:var(--ink); font-weight:600}
@media (prefers-reduced-motion:reduce){ .tri-fl{transition:none} }

/* ====== LOT 20-10 T — TARIFS : OÙ SE DÉCIDE QUEL PRIX, LE COMPARATIF ET SES RÈGLES (youcef, 20/10/2026 :
   « améliore l'onglet Tarifs au maximum, on ne comprend absolument rien » ; « une limite où le prix est
   automatiquement baissé 10 centimes moins cher que la concurrence » ; « 100 comparatifs par jour si je veux ») ====== */
/* le plan, en tête de l'accueil : une question par carte, et l'onglet qui y répond */
.ps-plan{display:flex; flex-direction:column; gap:var(--sp-3)}
.ps-plan>h2{margin:0; font-size:var(--fs-14); font-weight:600; color:var(--ink-2)}
.ps-plan-g{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--sp-2)}
.ps-plan-c{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3); min-width:0; text-align:left; cursor:pointer;
  border:1px solid var(--border-strong); border-radius:var(--r-card,12px); background:var(--surface); color:inherit; font:inherit}
.ps-plan-c:hover{background:var(--surface-2)}
.ps-plan-c:focus-visible{outline:2px solid var(--focus,currentColor); outline-offset:2px}
.ps-plan-i{display:inline-flex; flex:0 0 auto; color:var(--ink-2)}
.ps-plan-t{display:flex; flex-direction:column; min-width:0; gap:1px}
.ps-plan-t>b{font-size:var(--fs-14); font-weight:600; color:var(--ink)}
.ps-plan-t>small{font-size:var(--fs-12); color:var(--ink-2); overflow-wrap:anywhere}
.ps-plan-o{margin-left:auto; flex:0 0 auto; font-size:var(--fs-12); color:var(--ink-2); white-space:nowrap}
/* les comparatifs de la journée : une puce par heure, qui se retire */
.trg-heures{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.trg-h{display:inline-flex; align-items:center; gap:var(--sp-1); padding:2px var(--sp-2); border-radius:var(--r-pilule);
  background:var(--surface-2); font-size:var(--fs-13); font-variant-numeric:tabular-nums}
.trg-h-x{display:inline-flex; padding:0; border:0; background:none; color:var(--ink-2); cursor:pointer}
.trg-h-x:hover{color:var(--texte-danger)}
.trg-h-x .svgi{width:13px; height:13px}
.trg-ajout{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-2) var(--sp-3)}
.trg-sep{flex:0 0 1px; align-self:stretch; background:var(--grid)}
.trg-c{display:flex; flex-direction:column; gap:var(--sp-1); font-size:var(--fs-13); color:var(--ink-2); min-width:0}
.trg-alerte{color:var(--texte-alerte,var(--ink-2)); display:flex; align-items:center; gap:var(--sp-2)}
/* le formulaire d'une règle */
.trg-form{display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-3); padding:var(--sp-4);
  border:1px solid var(--border-strong); border-radius:var(--r-card,12px); background:var(--surface)}
.trg-form-t{margin:0; font-size:var(--fs-14)}
.trg-l2,.trg-l3{display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.trg-aide{margin:0}
.trg-portee>summary{cursor:pointer; font-size:var(--fs-13); color:var(--ink-2)}
.trg-portee>summary>.ds-sous{margin-left:var(--sp-2)}
.trg-g{display:flex; flex-direction:column; gap:var(--sp-1); margin-top:var(--sp-3)}
.trg-g>b{font-size:var(--fs-13)}
.trg-coches{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-4)}
.trg-parregle{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-3)}
/* la file « À traiter » : le choix du rangement, au-dessus de la liste (lot 20-10) */
.at-rang{display:flex; justify-content:flex-end; margin-bottom:var(--sp-2)}
@media (max-width:760px){ .at-rang{justify-content:stretch} .at-rang>.ds-segment{flex:1} }
/* la programmation Telegram : une ligne par envoi, l'heure dans sa cellule (lot 20-10) */
.tg-pg-h{font-variant-numeric:tabular-nums}
/* ====== LOT 20-10 U — VÉHICULES ET RÉGLAGES : DES FAMILLES NOMMÉES (youcef, 20/10/2026 : « l'onglet véhicule, tout est
   mélangé, on comprend rien » ; « Réglages c'est le désordre aussi, on comprend rien ») ====== */
/* le plan de la flotte : trois familles de vues, leur compte et ce qu'elles veulent dire */
.vh-plan{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-3)}
.vh-plan-g{display:flex; flex-direction:column; gap:var(--sp-1); min-width:0}
.vh-plan-g>h3{margin:0 0 2px; font-size:var(--fs-12); font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-2)}
.vh-plan-c{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3); min-width:0; text-align:left; cursor:pointer;
  border:1px solid var(--border-strong); border-radius:var(--r-card,12px); background:var(--surface); color:inherit; font:inherit}
.vh-plan-c:hover{background:var(--surface-2)}
.vh-plan-c:focus-visible{outline:2px solid var(--focus,currentColor); outline-offset:2px}
.vh-plan-c.vide{opacity:.6}
.vh-plan-n{flex:0 0 auto; min-width:2ch; text-align:right; font-size:var(--fs-18); font-weight:600; font-variant-numeric:tabular-nums}
.vh-plan-c.alerte .vh-plan-n{color:var(--texte-danger)}
.vh-plan-t{display:flex; flex-direction:column; min-width:0; gap:1px}
.vh-plan-t>b{font-size:var(--fs-13); font-weight:600; color:var(--ink)}
.vh-plan-t>small{font-size:var(--fs-12); color:var(--ink-2); overflow-wrap:anywhere}
/* ====== LOT 20-10 V — PAR OÙ JE COMMENCE (RÉGLAGES) ET L'ACCEPTATION (ANALYSE) (youcef, 20/10/2026 :
   « Réglage c'est le désordre aussi on comprend rien » ; « dans Analyse je veux pouvoir voir en combien de
   temps les chauffeurs accepte les resa après combien de changement de prix ») ====== */
/* « Par où je commence » : les réglages qu'on vient changer, en tête de la navigation */
.rg-vite{margin-bottom:var(--sp-2)}
.rg-vite .rg-lien-t{font-weight:600}
/* l'acceptation : ce que ça veut dire, les barres comparables, les 24 heures de Paris */
.acc-barre{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); align-items:center; margin-bottom:var(--sp-3)}
.acc-dits{display:flex; flex-direction:column; gap:var(--sp-2)}
.acc-dit{display:flex; gap:var(--sp-3); padding:var(--sp-3); border:1px solid var(--border-strong); border-radius:var(--r-card); background:var(--surface)}
.acc-dit>.svgi{flex:0 0 auto; color:var(--ink-2)}
.acc-dit.att>.svgi{color:var(--texte-alerte)}
.acc-dit b{display:block; font-size:var(--fs-14)}
.acc-dit p{margin:var(--sp-1) 0 0; font-size:var(--fs-13); color:var(--ink-2)}
.acc-verdict{display:flex; gap:var(--sp-2); align-items:flex-start; margin:0 0 var(--sp-3); font-size:var(--fs-13); color:var(--ink-2)}
.acc-verdict>.svgi{flex:0 0 auto; color:var(--texte-alerte)}
.acc-bars .hbar.acc-vide{opacity:.5}
.acc-bars .bar.acc-dur{background:var(--texte-danger)}
.acc-24{display:flex; align-items:flex-end; gap:var(--sp-1); height:calc(var(--sp-6) * 2 + var(--sp-2)); margin-top:var(--sp-3)}
.acc-h{display:flex; flex-direction:column; justify-content:flex-end; align-items:center; flex:1 1 0; min-width:0; height:100%; gap:var(--sp-1)}
.acc-h>i{display:block; width:100%; min-height:var(--sp-1); border-radius:var(--r-xs) var(--r-xs) var(--r-nul) var(--r-nul); background:var(--serie-1)}
.acc-h.acc-dur>i{background:var(--texte-danger)}
.acc-h.acc-vide>i{background:var(--grid)}
.acc-h>small{font-size:var(--fs-11); color:var(--ink-2); font-variant-numeric:tabular-nums}
@media (max-width:760px){ .acc-h>small{display:none} .acc-24{height:calc(var(--sp-6) + var(--sp-5))} }
.acc-comment>summary{cursor:pointer; font-size:var(--fs-13); color:var(--ink-2)}
.acc-comment ul{margin:var(--sp-2) 0 0; padding-left:var(--sp-4); font-size:var(--fs-13); color:var(--ink-2); display:flex; flex-direction:column; gap:var(--sp-1)}

/* V3.20 (20/10) — lot L1 */
/* les pages serveur (Annuaire, Candidatures, Échéances) : « Précédente · Suivante » sous la liste, dans sa carte */
:is(.ch-pages,.cd-pages,.ech-pages){padding:var(--sp-2) var(--sp-3) var(--sp-3); border-top:1px solid var(--border)}
:is(#chListeZone,#cdListe,#echListe)[aria-busy="true"]{opacity:.6; transition:opacity .15s}
/* au téléphone, la deuxième ligne d'un chauffeur ou d'une candidature ne se coupe plus en plein mot : deux lignes au plus */
#drvMount .ch-tel :is(.ch-li2-s,.ch-li2-ko), #cdMount .cd-tel :is(.ch-li2-s,.ch-li2-doc){white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
/* V3.20 (20/10) — lot L2 : les gestes EN LOT (Flottes › À valider, Messages, Clients) — la case d'une demande, la conversation
   cochée, la ligne « Afficher plus ». La barre du bas est celle de Clients (.cl-selbar). Tout en jetons. */
.vf-sel{display:inline-flex; align-items:center; justify-content:center; min-width:28px; min-height:28px; margin:calc(-1 * var(--sp-1)) var(--sp-1) calc(-1 * var(--sp-1)) calc(-1 * var(--sp-1)); vertical-align:middle; cursor:pointer}
.vf-sel input{width:16px; height:16px; margin:0; accent-color:var(--accent); cursor:pointer}
.vf-t tbody tr.vf-coche td{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.ms-toutlire{justify-content:space-between; align-items:center; gap:var(--sp-2)}
.ms-ck{display:flex; align-items:center; justify-content:center; width:24px; height:24px; margin:var(--sp-2) auto 0; border:1.5px solid var(--border); border-radius:var(--r-pilule); background:var(--surface); color:var(--btn-ink)}
.ms-ck svg{width:14px; height:14px}
.ms-conv.ms-coche{background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.ms-conv.ms-coche .ms-ck{border-color:var(--accent); background:var(--accent)}
.ms-plus{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--border-doux); font-size:var(--fs-12); color:var(--muted); text-align:center}
@media (max-width:1040px){ .vf-sel{min-width:44px; min-height:44px; margin:calc(-1 * var(--sp-2)) 0 calc(-1 * var(--sp-2)) calc(-1 * var(--sp-3))} .vf-sel input{width:20px; height:20px} }
/* au téléphone, la barre d'une sélection tient dans l'écran : l'aide se tait, les gestes passent à la ligne s'il le faut */
@media (max-width:760px){ #afvSelBar .n small{display:none} .cl-selbar.on{width:max-content; flex-wrap:wrap; justify-content:center; row-gap:var(--sp-1)} }
/* au téléphone, l'en-tête du tableau se cache : « tout cocher » passe à côté du titre de la section */
.vf-tout-tel{display:none}
@media (max-width:1040px){ .vf-tout-tel{display:inline-flex; margin:0 var(--sp-2) 0 0} .vf-t tbody tr.vf-coche{background:color-mix(in srgb,var(--accent) 6%,var(--surface))} .vf-t tbody tr.vf-coche td{background:none} }
/* Clients au téléphone : une ligne cochée (.cl-li.sel) prenait le style des champs (.sel : bordure, forme de pilule) — elle garde
   celui d'une ligne, avec son filet */
.cl-li.sel{border:0; border-radius:initial}
.cl-li+.cl-li.sel{border-top:1px solid var(--border-doux)}
/* V3.20 (20/10) — lot L3 */
/* Dispatch : « Afficher tous les chauffeurs » sous le panneau Chauffeurs (le serveur n'a rendu que les chauffeurs utiles) */
.dsp-plan-pli{display:flex; justify-content:center; padding:var(--sp-2) 0 0}
.df-pli .df-ch .ds-btn{white-space:normal; text-align:left}
/* Nouvelle réservation : un siège enfant se demande au compteur (pas deux fois) */
.nv-svc-siege{display:flex; gap:var(--sp-2); align-items:flex-start; margin:var(--sp-2) 0 0}
.nv-svc-siege svg{flex:none; width:14px; height:14px; margin-top:1px}
/* V3.20 (20/10) — lot L4 */
/* La fin de session dite d'avance (api.js, echeanceAfficher) : le bandeau de la session perdue, en ton « attention » */
.sess-bar.avertir{border-color:color-mix(in srgb,var(--warn) 45%,var(--border)); background:var(--warn-soft)}
.sess-bar.avertir .sess-ic{color:var(--texte-alerte)}
/* Réglages › Telegram, au téléphone : « Envoyer maintenant » passait sur la description du débrief (bouton posé en haut à
   droite de la carte, place prévue pour un « … ») ; il prend sa ligne, sous les réglages de l'envoi */
@media (max-width:700px){
  #tgDebriefs .dt.dt-cartes td.ra-cell{position:static; display:flex; justify-content:flex-start; padding-top:var(--sp-2)}
  #tgDebriefs .dt.dt-cartes td:first-child{padding-right:0}
}
/* « Mon compte » : les liens vers ses autres réglages (membres.js, monCompteLiensHtml) */
.moncompte-liens{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2)}
/* V3.20 (20/10) — lot L5 */
/* Marché : le prix d'une règle de prix, à côté du conseillé (même geste d'un clic, teinte de l'accent pour le distinguer) */
.mk .c.mk-rg::before{content:none}
.mk .mk-rg{color:var(--texte-accent)}
.mk span.mk-rg:not(.c){display:block; padding-left:10px; font-size:var(--fs-11); color:var(--muted)}
.tf-cons1.tf-cons-rg{border-color:var(--accent-border); background:var(--accent-soft); color:var(--texte-accent)}
.tf-cons1.tf-cons-rg:hover{background:var(--accent); border-color:var(--accent); color:var(--page)}
/* Comparatif & règles : une ligne bloquée par les garde-fous se voit dans l'essai */
.trg-bloque td{background:var(--bad-soft)}
.trg-orphelin{display:flex; align-items:center; gap:var(--sp-1); color:var(--texte-alerte)}
.trg-orphelin .gi{width:12px; height:12px; flex:none}
/* V3.20 (20/10) — lot L6 */
/* Trésorerie : le solde en banque (saisie, relevés et écarts), les versements attendus des plateformes */
.tre-plus{margin-top:0}
.tre-solde-f{display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:flex-end; margin:0 0 var(--sp-3)}
.tre-solde-f label{display:flex; flex-direction:column; gap:var(--sp-1); font-size:var(--fs-12); color:var(--ink-2); flex:1 1 150px; min-width:0}
.tre-solde-f .tre-solde-note{flex:2 1 220px}
.tre-solde-f .go{display:flex; flex:none}
.tre-t.tre-t-bq th:is([data-col="entrees"],[data-col="sorties"],[data-col="solde"],[data-col="cumul"],[data-col="banque"]){width:16%}
.tre-soldes-t th[data-col="le"]{width:22%}
.tre-soldes-t th:is([data-col="solde"],[data-col="attendu"],[data-col="ecart"]){width:17%}
.tre-soldes-t th[data-col="gestes"]{width:110px}
.tre-vers-t th[data-col="qui"]{width:20%}
.tre-vers-t th[data-col="pour"]{width:16%}
.tre-vers-t th[data-col="quand"]{width:20%}
.tre-vers-t th[data-col="montant"]{width:14%}
#treVersements .ds-carte-h .droite .muted{font-size:var(--fs-12)}
/* Charges : « Choisir… » — les échéances cochées et le jour du paiement */
.chg-lotf .chg-lotf-l{flex:1 1 100%; display:flex; flex-direction:column; gap:var(--sp-2); margin:0; padding:0; border:0; min-width:0}
.chg-lotf .chg-lotf-l legend{font-size:var(--fs-12); color:var(--ink-2); margin-bottom:var(--sp-1); padding:0}
.chg-lotf .chg-lotf-l label.chk{flex-direction:row; align-items:flex-start; gap:var(--sp-2); flex:none; font-size:var(--fs-13); color:var(--ink)}
.chg-lotf #chgLotRes{flex:1 1 100%}
@media (max-width:760px){
  .tre-solde-f label,.tre-solde-f .tre-solde-note{flex:1 1 100%}
  .tre-solde-f .go,.tre-solde-f .go .ds-btn{flex:1 1 100%}
}
/* la rangée « Solde en banque » · « Versements attendus » : une colonne pleine largeur (la règle de l'écran à 1366 px et plus l'emportait) */
#s-tresorerie .fi-grille.tre-plus{grid-template-columns:minmax(0,1fr)}
/* V3.20 (20/10) — lot L7 */
/* À traiter rangé par famille : les urgences d'une famille dites dans son intertitre */
.at-grp .at-grp-urg{display:inline-flex; align-items:center; gap:var(--sp-1); color:var(--texte-danger); font-weight:600}
.at-grp .at-grp-urg::before{content:''; width:6px; height:6px; border-radius:var(--r-rond); background:var(--point-danger)}
/* l'historique chargé ne couvre pas toute la période : la ligne qui le dit, et son geste */
.hist-avis{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); margin:var(--sp-2) 0; padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-sm); background:var(--warn-soft); color:var(--texte-alerte); font-size:var(--fs-13); line-height:1.4}
.hist-avis>.gi,.hist-avis>svg{flex:none; width:16px; height:16px}
.hist-avis>span{flex:1 1 220px; min-width:0}
.hist-avis .ds-lien{font-weight:600}
/* ====== LOT 20-10 P — PEAU « ATELIER » (V3.21 ; youcef, 20/10/2026 : « améliore tout le design sans changer les fonctionnalités sur l'admin,
   améliore également l'expérience client au maximum », puis « ça fait trop IA à chaque fois ») ======
   Trois pistes lui ont été montrées en image sur son Tableau de bord et ses Réservations (Registre, Atelier, Nuit & or épurée) ;
   il a choisi ATELIER, et gardé la pastille de couleur de chaque entrée du menu. Les écrans restent à leur place ; la peau change :
   · UN OUTIL DE PRO, PAS UN TABLEAU DE BORD GÉNÉRÉ — angles nets (4 px), des filets d'un pixel au lieu des ombres douces, des
     gris neutres, aucune lueur ni dégradé ; une ombre seulement pour ce qui flotte (menus, fenêtres, toasts) ;
   · IBM PLEX — Plex Sans pour le texte, Plex Mono pour les chiffres (heures, montants, grands chiffres, références) : des
     colonnes qui s'alignent comme sur un terminal de salle des marchés, servies par la console (fonts/construire-plex.py) ;
   · LE VERT DE LA MARQUE, ET LUI SEUL, POUR AGIR — un bouton plein vert, rectangulaire ; les boutons secondaires blancs bordés ;
   · LA BARRE LATÉRALE BLANCHE (graphite en sombre), filet à droite ; chaque entrée garde sa pastille de couleur, pleine sur
     l'écran ouvert ;
   · LES STATUTS EN MOTS — un point de couleur et le mot, sans pastille pastel ;
   · SOMBRE GRAPHITE — un gris presque noir, des cartes un cran au-dessus, sans teinte bleue ; les capsules nuit y deviennent des surfaces cerclées.
   Les jetons de la peau sont en tête de feuille (« PEAU « ATELIER » (V3.21, 20/10/2026) — LES JETONS »). Chaque couleur de texte tient 4,5:1 (test/v94-0-socle-design, test/lot-j-nuit-or, test/peau-atelier). */

/* en graphite, la nuit bleue jurerait : ces capsules deviennent une surface cerclée, un cran au-dessus des cartes */
html[data-theme="dark"] :is(.ov2-cap,.capsule-b,#selBar,.cl-selbar,.ovp-barre,.rg-sauve,.ds-toast){background:var(--surface-2); box-shadow:0 0 0 1px var(--border-strong), 0 18px 44px -14px rgba(0,0,0,.75)}

/* ---- 1. La barre latérale : blanche, un filet, la pastille de couleur de chaque entrée ---- */
#sidebar{border-right:1px solid var(--side-line); scrollbar-color:color-mix(in srgb,var(--side-ink) 18%,transparent) transparent}
#sidebar::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--side-ink) 16%,transparent)}
/* une teinte assez foncée pour un trait sur blanc ; en sombre, ces jetons sont déjà les vifs */
#sidebar nav button[data-teinte="vert"]{--t:var(--t-vert)}
#sidebar nav button[data-teinte="rose"]{--t:var(--t-rose)}
#sidebar nav button[data-teinte="bleu"]{--t:var(--t-bleu)}
#sidebar nav button[data-teinte="violet"]{--t:var(--t-violet)}
#sidebar nav button[data-teinte="ambre"]{--t:var(--t-ambre)}
#sidebar nav button[data-teinte="orange"]{--t:var(--t-orange)}
#sidebar nav button[data-teinte="sarcelle"]{--t:var(--t-sarcelle)}
#sidebar nav button[data-teinte="indigo"]{--t:var(--t-indigo)}
#sidebar nav button[data-teinte="ciel"]{--t:var(--t-ciel)}
#sidebar nav button[data-teinte="fuchsia"]{--t:var(--t-fuchsia)}
#sidebar nav button[data-teinte="cyan"]{--t:var(--t-cyan)}
#sidebar nav button[data-teinte="lime"]{--t:var(--t-lime)}
#sidebar nav button[data-teinte="or"]{--t:var(--t-or)}
#sidebar nav button[data-teinte="prune"]{--t:var(--t-prune)}
#sidebar nav button[data-teinte="jaune"]{--t:var(--t-jaune)}
#sidebar nav button[data-teinte="ardoise"]{--t:var(--t-ardoise)}
#sidebar nav button .ic{border-radius:var(--r-sm); background:color-mix(in srgb,var(--t) 12%,transparent)}
#sidebar nav button:hover .ic{background:color-mix(in srgb,var(--t) 20%,transparent)}
#sidebar nav button.on{background:var(--side-on); font-weight:600}
#sidebar nav button.on .ic{color:var(--on-couleur)}
html[data-theme="dark"] #sidebar nav button.on .ic{color:var(--page)}
#sidebar nav button.on::before{display:none}
#sidebar nav button.on .badge-n{background:var(--surface); color:var(--side-ink)}
#sidebar .side-actions>.btn#newBtn{background:var(--btn); border-color:var(--btn-border); box-shadow:none}
#sidebar .side-actions>.btn#newBtn svg{color:var(--btn-ink)}
#sidebar .side-actions>.btn#newBtn:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
#sidebar .search#searchBox{background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--border); color:var(--muted)}
#sidebar .search#searchBox:hover{background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--border-strong); color:var(--ink)}
#sidebar .search#searchBox .kbd{background:var(--surface); color:var(--muted); box-shadow:inset 0 0 0 1px var(--border)}
#sidebar .mav{background:var(--accent-soft); color:var(--texte-accent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
#sidebar nav .nav-fav .ic{color:var(--gold)}
#sidebar #scopeBtn.on{color:var(--gold-ink)}

/* ---- 2. Les commandes : rectangulaires ; le plein est vert, le secondaire blanc bordé ---- */
.btn,.btn.ico,.btn.assign,.btn.asg,.ds-btn,.tbtn,.tbtn.icon,.dd-btn,.pnb,.pnl,.seg,.seg button,.ds-segment,.ds-segment button,.chip{border-radius:var(--r-sm)}
.btn.ghost,.tbtn,.dd-btn,.pnb{background:var(--surface); color:var(--ink); border-color:var(--border-strong); box-shadow:none}
.btn.ghost:hover,.tbtn:hover,.dd-btn:hover,.pnb:hover{background:var(--surface-3); border-color:color-mix(in srgb,var(--border-strong) 50%,var(--muted))}
#topbar .tbtn.icon{border-color:transparent; background:transparent}
.ds-btn{box-shadow:inset 0 0 0 1px var(--border-strong)}
.ds-btn.primaire{box-shadow:none}
.ds-btn.fantome{box-shadow:none}
html[data-theme="dark"] :is(.btn.ghost,.tbtn,.dd-btn,.pnb),
html[data-theme="dark"] .ds-btn:not(.primaire):not(.fantome){background:var(--surface-2)}
html[data-theme="dark"] :is(.btn.ghost,.tbtn,.dd-btn,.pnb):hover,
html[data-theme="dark"] .ds-btn:not(.primaire):not(.fantome):hover{background:var(--surface-piste)}
/* un plein qui travaille : l'anneau de chargement prend l'encre du bouton */
.ds-btn.primaire[aria-busy="true"]::after{border-color:color-mix(in srgb,var(--btn-ink) 32%,transparent); border-top-color:var(--btn-ink)}
/* segments : une piste, l'option choisie blanche et cerclée (plus claire que sa piste, en sombre aussi) */
.seg button.on,.ds-segment button.on{box-shadow:inset 0 0 0 1px var(--border-strong)}
html[data-theme="dark"] .seg:not(.tabs):not(.fam),html[data-theme="dark"] .ds-segment{background:var(--surface-3)}
html[data-theme="dark"] .seg:not(.tabs):not(.fam) button.on,html[data-theme="dark"] .ds-segment button.on{background:var(--surface-piste)}
/* les compteurs pleins de vert foncé, en sombre : un chiffre blanc (le vert d'accent clair y tombait à 2:1) */
html[data-theme="dark"] :is(#hubBar button.on .hubn,.nvsteps button.on b,.dm-tete .cnt,.tirer.pret .tirer-rond){color:var(--btn-ink)}

/* ---- 3. Les champs : blancs bordés ; en sombre, un même puits pour toutes les saisies ---- */
html[data-theme="dark"] .field :is(input:not([type=checkbox]):not([type=radio]),select,textarea),html[data-theme="dark"] .sel{background-color:var(--page)}
/* des champs laissés au style du navigateur (cadre en relief, angles vifs, gris système en sombre) */
:is(.rg-evj-filtres input[type="search"],.rg-tva input,#tgDebriefMH,#tgDebriefH,#tgPointH,.trg-c input[type="time"]){min-height:32px; padding:0 var(--sp-2);
  border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit}
html[data-theme="dark"] :is(.rg-evj-filtres input[type="search"],.rg-tva input,#tgDebriefMH,#tgDebriefH,#tgPointH,.trg-c input[type="time"]){background:var(--page); color-scheme:dark}
code,kbd,samp,pre{font-family:var(--font-code)}

/* ---- 4. Les statuts en mots : un point et le mot, sans pastille pastel ---- */
.pill:is(.a_assigner,.confirmee,.assignee,.en_attente_paiement,.live,.terminee,.annulee,.no_show,.incident,.warn,.bad){padding:0; background:none; border-radius:var(--r-nul); font-weight:500}
.ds-statut.pastille{height:auto; padding:0; background:none}
.bkc .l1 .st{padding:0; background:none}

/* ---- 5. La typographie : Plex Sans ; les chiffres en Plex Mono ---- */
@media (min-width:1041px){ #topbar h2{font-size:var(--fs-22); font-weight:600; letter-spacing:-.01em} }
#topbar h2{background:none}
.ds-carte-h h2,.ds-carte-h h3,.card .ch h3{font-size:var(--fs-14); font-weight:600; letter-spacing:0}
:is(.ov2-h-val,.ov2-m-val,.fi-heros-val) b,.ana-hero-n>b{font-family:var(--font-num); font-weight:500; letter-spacing:-.03em}
.screen td:is([data-c="date"],[data-c="montant"]) b,.dt td.num{font-family:var(--font-num); letter-spacing:-.01em}

/* ---- 6. Des retouches de l'existant ---- */
#s-echeances .ech-t th[data-col="gestes"]{width:160px}
html[data-theme="dark"] :is(.ds-av-moi,.ds-cn-black){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--or) 40%,transparent)}
.rg-lien.on{background:var(--side-on); color:var(--ink)}
.rg-lien.on .rg-lien-t{color:var(--ink)}
@media (min-width:901px){ .rg-lien.on{box-shadow:none; border-radius:var(--r-sm)} }
.hub-plus-btn.on::after{background:var(--teinte,var(--accent))}
.ps-plan+.ps-eq{margin-top:var(--sp-3)}
a.ov2-sem-col{border-bottom-style:solid; border-bottom-color:var(--border)}
.ov2 .ds-carte{border-radius:var(--r-card)}

/* ---- 7. La revue écran par écran (banc : 112 cibles, ordinateur et téléphone, clair et sombre) ---- */
/* l'interrupteur, seule pièce ronde */
.switch,.tgl-sw span{border-radius:var(--r-capsule)}
/* les chiffres en Plex Mono, partout où ils sont seuls dans leur case ; jamais les mots, boutons et libellés qui les côtoient */
:is(.dt,.ds-tableau) td.num,.screen td.heure b,td.ov2-px b,:is(.ov2-c-v,.ov2-enc-t,.ov2-pt-c) b,.ov2-li-a .v b,.ov2-enc-l .m,.ps-p,
.ds-billet .quand .h,.fc-heure,.bk-li-h b,.bk-li-p,.dsp-h,.df-h,.df-bloc .df-b1 b,.cd-et-n,.dvb-px,.dvb-s b,.donut-tot,.vl-heure,.vl-suiv-q b,
.capsule-h,.rg-kpis b,.st-chiffres b,input.mono,.gf-num,table.ge-table td.ge-n,.ds-tableau tr.maintenant .h,.bk-li-now span,.df-now-h,.ds-var,.ana-hero-n>b{
  font-family:var(--font-num); letter-spacing:-.01em}
.dt td.num :is(.btn,.ds-btn,button,.muted,small,.badge,.rowsub),.dt.dt-cartes td::before,:is(.ana-hero-n,.num) .badge,.ob-q-v small,.paie-v.cash .muted,
#s-bookings .bk-t td[data-c="montant"] .bk-marge{font-family:var(--font-sans); letter-spacing:0}
#s-bookings .bk-t td[data-c="montant"] .bk-marge{font-size:var(--fs-11)}
#s-bookings .bk-t td[data-c="montant"] .badge.paye{padding:0; background:none; font-family:var(--font-sans)}
#s-bookings .bk-t td[data-c="montant"] .badge.paye+.bk-marge{display:block; margin-left:0}
/* les canaux : un point et le nom, comme dans le tableau des Réservations (plus de pastilles arc-en-ciel) */
.ds-canal{height:auto; padding:0; gap:var(--sp-15); background:none; color:var(--ink-2); font-weight:500}
.ds-canal::before{content:''; width:var(--sp-2); height:var(--sp-2); border-radius:var(--r-xs); background:var(--cn-p,var(--point-neutre)); flex:none}
html[data-theme="dark"] .ds-canal.ds-cn-black{box-shadow:none}
/* les avatars : un monogramme neutre (le sien garde la nuit et l'or) */
:is(.ds-av-1,.ds-av-2,.ds-av-3,.ds-av-4,.ds-av-5,.ds-av-6){--av-f:var(--surface-2); --av-t:var(--ink-2)}
/* des statuts, des variations et des étiquettes en mots colorés, sans aplat pastel */
:is(.rg-pastille,.intgdot,.ps-veh-e,.ov2-rang,.grav:not(.critique),.badge.ob-st,.pil-chip .delta,.ds-var,.kpi-var .delta,.badge.entp,.cd-dec,.dsp-risque,.paie-src.s-gj),
:is(.ana-hero,.ana-mes,.kpi) .delta:is(.g,.r,.up,.down){height:auto; padding:0; background:none}
.tg-g{background:none; box-shadow:inset 0 0 0 1px var(--border)}
.rg-compte{background:var(--surface-2)}
/* les encadrés d'alerte : un filet de leur couleur à gauche sur une surface, plus un aplat */
.ds-geste{background:var(--surface); box-shadow:inset 3px 0 0 var(--point-danger), 0 0 0 1px var(--border)}
.ds-geste.attente{background:var(--surface); box-shadow:inset 3px 0 0 var(--point-alerte), 0 0 0 1px var(--border)}
.ds-geste.calme,:is(.fc-vol,.fc-report.lie,.paie-box,.fc-note){box-shadow:inset 0 0 0 1px var(--border)}
.ps-intro{background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--border)}
/* ce qui gardait une lueur : le point de santé, la version choisie, « Toi » dans l'assignation */
#healthDot .hd,#healthDot.warn .hd,#healthDot.bad .hd{box-shadow:none}
.ge-v.on{box-shadow:none}
html[data-theme="dark"] .fa-moi{background:var(--surface); box-shadow:inset 2px 0 0 var(--or), 0 0 0 1px var(--border)}
.vide-ic{background:var(--surface-piste); color:var(--muted)}
.anasig{border-left-width:2px}
.dspmenu>summary{background-size:var(--sp-3) var(--sp-3)}
.ov2-sem-col{border-radius:var(--r-card)}
/* en clair, le toast est l'encre (la nuit bleue jurait avec les gris) */
html:not([data-theme="dark"]) .ds-toast{background:var(--ink)}
/* en sombre, la piste des segments se creuse et l'option choisie se lève, cerclée */
html[data-theme="dark"] :is(.seg:not(.tabs):not(.fam),.ds-segment){background:var(--page); box-shadow:inset 0 0 0 1px var(--border)}
html[data-theme="dark"] :is(.seg:not(.tabs):not(.fam),.ds-segment) button.on{box-shadow:inset 0 0 0 1px var(--border-strong)}
/* un bouton secondaire désactivé se voit désactivé, en sombre aussi */
.btn.ghost:is(:disabled,[aria-disabled="true"]){border-color:var(--border); color:var(--faint)}
html[data-theme="dark"] .btn.ghost:is(:disabled,[aria-disabled="true"]){background:var(--surface)}
/* des défauts d'avant la peau, vus au banc */
:is(.ga-geste,.ge-revue) .ge-decision>.ge-ajout:not([open])>.ge-form{display:none}
.fi-ct td .fi-lib{display:flex; min-width:0}
.chg-plan .go{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.rg-corps>#rg-debriefs{grid-column:1/-1}
.ds-trajet.ligne>span:first-child:not(.ds-iata){min-width:0; overflow:hidden; text-overflow:ellipsis}
.ds-trajet.ligne>.ds-iata{flex:none}
.ov2-t col.c-h{width:7em}
@media (max-width:760px){
  .dt th[title]{position:sticky}
  #panneauCorps>.modal.pn-fiche{height:100%}
  #panneauCorps .modal.pn-fiche .box{max-height:100%}
}
/* les variations (« ↓ 63 % ») : le mot coloré seul, sur toutes leurs cartes (la classe doublée passe devant leurs règles à trois crans) */
:is(.kpi,.kpi-var,.pil-chip,.ovsite,.ptsem,.ovh,.ess-chiffre,.hbars,.chart-hero,.ana-hero,.ana-mes) .delta.delta:is(.g,.r,.n,.up,.down){padding:0; background:none}
/* les aires sous les courbes : une teinte plate, plus de dégradé */
linearGradient:is([id^="lg"],[id^="ksg"]) stop,.ds-courbe :is(.aire-haut,.aire-bas){stop-opacity:.1}
:is(.dt,.ds-tableau) td.num :is(.ds-sous,.sous,button,.btn,.ds-btn,.muted,small,.badge,.pay-zero){font-family:var(--font-sans); letter-spacing:0}
.hbar .v small{font-family:var(--font-sans); letter-spacing:0}
.et-resume.et-att{background:var(--surface); box-shadow:inset 3px 0 0 var(--point-alerte), 0 0 0 1px var(--border)}
/* troisième passe du banc */
.vl-heure small,.ob-rows dd .muted,.ob-in::placeholder{font-family:var(--font-sans); letter-spacing:0}
.anamop-val>b,.tf-boite .tf-grille .tf-in{font-family:var(--font-num)}
.anamop-val>b{font-weight:500; letter-spacing:-.03em}
.ob-carte{box-shadow:none}
.ana-hero .kpi-vs{margin-left:0}
.ana-hero-c>svg{overflow:visible}
#s-drivers .ch-t th[data-col="note"]{width:calc(100px + var(--sp-3))}
#hubBar .hubn{border-radius:var(--r-pilule)}
#panneau .ds-billet .codes .fleche .svgi{background:var(--elevated)}
#s-bookings .bk-li-p .badge.paye,.ds-tag.urgent{padding:0; background:none}
/* les canaux du Dispatch au téléphone (chanChip) : un point et le nom, comme partout */
.chan,.chan:is(.trip,.mozio,.direct,.black,.b2b,.site){padding:0; background:none; color:var(--ink-2); box-shadow:none; border:0}
.chan::before{content:''; display:inline-block; width:var(--sp-2); height:var(--sp-2); margin-right:var(--sp-15); border-radius:var(--r-xs); background:var(--point-neutre); vertical-align:0}
.chan.trip::before{background:var(--canal-trip-point)}
.chan.mozio::before{background:var(--canal-mozio-point)}
.chan.direct::before{background:var(--canal-direct-point)}
.chan.black::before{background:var(--canal-black-point)}
.chan.b2b::before{background:var(--canal-b2b-point)}
.chan.site::before{background:var(--canal-vtc-point)}
/* des bandeaux d'information : un filet de leur couleur à gauche, plus un aplat */
.fc-report:not(.lie){background:var(--surface); box-shadow:inset 3px 0 0 var(--point-info), 0 0 0 1px var(--border)}
.ag-bandeau{background:var(--surface); box-shadow:inset 3px 0 0 var(--point-alerte), 0 0 0 1px var(--border)}
.cd-et-go{background:var(--surface); border-color:var(--border-strong)}
html[data-theme="dark"] .cd-et-go{background:var(--surface-2)}
#tgDebriefs .dt td:is(:first-child,:nth-child(3)){white-space:normal}
.rg-champs>.field:only-child{grid-column:1 / -1; max-width:calc(var(--sp-6) * 12)}
@media (max-width:600px){ .ov2-t tbody tr{grid-template-columns:calc(62px + var(--sp-2)) minmax(0,1fr) auto} }

/* V3.25 — Finances › Chiffre d'affaires (js/pilotage/finances-ca.js) ; V3.28 : en jetons, comme toute la fin de la feuille */
.ca-legende{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);margin:var(--sp-05) 0 var(--sp-3)}
.ca-leg{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);border:1px solid var(--border);border-radius:var(--r-pilule);background:transparent;color:inherit;font:inherit;font-size:var(--fs-13);cursor:pointer}
.ca-leg .dot{width:9px;height:9px;border-radius:var(--r-rond);flex:none}
.ca-leg small{color:var(--muted);font-variant-numeric:tabular-nums}
.ca-leg.off{opacity:.45;text-decoration:line-through}
.ca-leg:focus-visible{outline:none;box-shadow:var(--ring)}
.ca-per{display:inline-block;min-width:120px;text-align:center;font-variant-numeric:tabular-nums}
.ca-courbe{min-height:280px}
.ca-aide{margin:var(--sp-2) 0 0;font-size:var(--fs-13)}
.ds-carte.p0 .ca-aide{padding:var(--sp-3) var(--sp-4) 0}
.ca-hausse{color:var(--texte-ok);font-weight:600}
.ca-baisse{color:var(--texte-danger);font-weight:600}
.ca-tab tfoot td{border-top:1px solid var(--border)}

/* V3.29 (23/10) — charges (lot A) : la saisie (moyen, mois exclus, mois suivant, bénéficiaire), le plan de Réglages › Finances,
   la vue « Année » (js/pilotage/finances-charges.js). En jetons, comme toute la fin de la feuille. */
.chg-grille label.chg-coche{flex-direction:row; align-items:center; gap:var(--sp-2); font-size:var(--fs-13); color:var(--ink); cursor:pointer}
.chg-coche input{flex:none; width:18px; height:18px; margin:0; accent-color:var(--accent)}
.chg-excl{display:flex; flex-direction:column; gap:var(--sp-1); font-size:var(--fs-12); color:var(--ink-2); min-width:0}
.chg-excl[hidden],.chg-grille .chg-coche[hidden]{display:none}
.chg-excl-l{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--sp-1)}
.chg-grille label.chg-excl-m{flex-direction:row; align-items:center; justify-content:center; gap:var(--sp-1); min-height:36px; padding:0 var(--sp-1); border:1px solid var(--border); border-radius:var(--r-sm);
  font-size:var(--fs-13); color:var(--ink-2); cursor:pointer; user-select:none}
.chg-excl-m input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.chg-grille label.chg-excl-m:has(input:checked){border-color:var(--point-danger); background:var(--danger-doux); color:var(--texte-danger); font-weight:600; text-decoration:line-through}
.chg-excl-m:has(input:focus-visible){box-shadow:var(--ring)}
.chg-zone{margin:0}
/* le plan : une catégorie par ligne (nom, compte, TVA, proposée), son résumé, ses réglages dépliés */
.chg-plan-entete,.chg-plan-tete{display:grid; grid-template-columns:minmax(0,1fr) 88px 76px auto auto; align-items:center; gap:var(--sp-2)}
.chg-plan-entete{padding:0 0 var(--sp-1); font-size:var(--fs-12); color:var(--muted)}
.chg-plan-entete span:last-child{grid-column:4 / -1}
.chg-plan-liste{margin:0; padding:0; list-style:none}
.chg-plan-l{padding:var(--sp-2) 0; border-top:1px solid var(--border-doux)}
.chg-plan-l.off .chg-plan-res{opacity:.6}
.chg-plan-tete .sel{width:100%; min-width:0}
.chg-plan-tva{display:flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-13); color:var(--muted)}
.chg-plan-tva .sel{text-align:right}
.chg-plan-res{display:flex; align-items:center; gap:var(--sp-1); width:100%; min-height:32px; margin-top:var(--sp-1); padding:0; border:0; background:none; color:var(--ink-2); font:inherit; font-size:var(--fs-13); text-align:left; cursor:pointer}
.chg-plan-res .svgi{flex:none; width:14px; height:14px; color:var(--muted)}
.chg-plan-res:hover span{color:var(--ink)}
.chg-plan-res:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--r-xs)}
.chg-plan-det{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2) var(--sp-3); align-items:end; margin:var(--sp-2) 0 var(--sp-1); padding:var(--sp-3); border-radius:var(--r-sm); background:var(--surface-douce)}
.chg-plan-det[hidden]{display:none}
.chg-plan-c{display:flex; flex-direction:column; gap:var(--sp-1); min-width:0; font-size:var(--fs-12); color:var(--ink-2)}
.chg-plan-c .sel{width:100%; min-width:0}
.chg-plan-k{display:flex; align-items:center; gap:var(--sp-2); min-height:40px; font-size:var(--fs-13); color:var(--ink); cursor:pointer}
.chg-plan-k input{flex:none; width:18px; height:18px; margin:0; accent-color:var(--accent)}
.chg-plan-aide{margin:var(--sp-2) 0 0; font-size:var(--fs-13)}
/* l'année : la bande, la courbe, le tableau qui défile dans sa carte (le mois reste à gauche) */
.chg-an{display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-3)}
.chg-an>.ds-carte{margin:0}
.chg-an .ds-chiffre.lien{cursor:pointer}
.chg-an .ds-chiffre.lien:hover .s{color:var(--texte-accent)}
.chg-an .ds-chiffre.lien:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--r-sm)}
.chg-an-courbe{min-height:var(--sp-9)}
.chg-an-pdf{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--sp-2)}
.chg-an-defil{overflow-x:auto; overscroll-behavior-x:contain; border-radius:var(--r-nul) var(--r-nul) var(--r-card) var(--r-card)}
.chg-an-defil:focus-visible{outline:none; box-shadow:inset var(--ring)}
.chg-an-t{--ligne-h:40px; --ligne-pad:var(--sp-2); font-size:var(--fs-13)}
.chg-an-t th,.chg-an-t td{position:static; top:auto; height:var(--ligne-h); white-space:nowrap}
.chg-an-t :is(th,td):first-child{padding-left:var(--sp-4)}
.chg-an-t :is(th,td):last-child{padding-right:var(--sp-4)}
.chg-an-t thead th{height:var(--th-h)}
.chg-an-t tbody tr{cursor:default}
.chg-an-t .chg-an-m{position:sticky; left:0; z-index:var(--z-collant); min-width:112px; background:var(--surface); box-shadow:inset -1px 0 0 var(--border-doux)}
.chg-an-t :is(tbody,tfoot) th.chg-an-m{font-size:var(--fs-14); font-weight:500; color:var(--ink); border-bottom:1px solid var(--border-doux)}
.chg-an-t tbody tr:hover :is(td,th){background:var(--surface-douce)}
.chg-an-t .chg-an-m .ds-lien{padding:0; border:0; background:none; font:inherit; color:var(--ink)}
.chg-an-t .chg-an-m .ds-lien:hover{color:var(--texte-accent)}
.chg-an-t .chg-an-ch{padding:0; border:0; background:none; font:inherit; font-variant-numeric:tabular-nums}
.chg-an-t .chg-an-tot{background:var(--surface-douce)}
.chg-an-t tr.chg-an-futur :is(td,th){color:var(--muted)}
.chg-an-t tr.chg-an-futur .chg-an-m .ds-lien{color:var(--muted)}
.chg-an-t tr.chg-an-cours .chg-an-m{box-shadow:inset 3px 0 0 var(--accent), inset -1px 0 0 var(--border-doux)}
.chg-an-t tfoot :is(td,th){background:var(--surface-3)}
.chg-an-t tfoot tr.chg-an-somme :is(td,th){border-top:1px solid var(--border)}
.chg-an-t tfoot tr:is(.chg-an-n1,.chg-an-evo) :is(td,th){height:var(--th-h); font-size:var(--fs-13); color:var(--muted)}
.chg-an-t tfoot tr:is(.chg-an-n1,.chg-an-evo) th.chg-an-m{font-size:var(--fs-13); color:var(--ink-2)}
.chg-an-t .chg-an-m .sous{display:block; font-size:var(--fs-12); font-weight:400; line-height:1.2; color:var(--muted)}
.chg-an-neg,.chg-an-moins{color:var(--texte-danger)}
.chg-an-mieux{color:var(--texte-ok)}
.chg-an-t tfoot .chg-an-moins,.chg-an-t tfoot .chg-an-mieux{font-weight:600}
.chg-an-ben>li{display:block}
.chg-an-ben-m{margin:0 0 var(--sp-2); font-size:var(--fs-12); color:var(--muted); line-height:1.4}
@media (max-width:760px){
  .chg-excl-l{grid-template-columns:repeat(4,minmax(0,1fr))}
  .chg-plan-entete{display:none}
  .chg-plan-tete{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto; gap:var(--sp-1) var(--sp-2)}
  .chg-plan-tete>[data-plan="libelle"]{grid-column:1 / -1}
  .chg-plan-det{grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:var(--sp-2)}
  .chg-an-pdf .ds-btn{min-height:40px}
  .chg-an-t .chg-an-m{min-width:72px}
}

/* V3.29 (23/10) — lot B : la course donnée au groupe WhatsApp (fiche de course, sous « Prix et paie… » :
   js/exploitation/reservation-fiche.js). Les champs côte à côte tant qu'ils tiennent ; la ligne « Faite par le groupe
   WhatsApp » et ses gestes. En jetons. */
.fc-wa-g{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--sp-2)}
.fc-wa .fc-st-c :is(input,select){width:100%; min-width:0; min-height:36px; padding:0 var(--sp-2); border:1px solid var(--border-strong); border-radius:var(--r-sm); background-color:var(--surface); color:var(--ink)}
.fc-wa .fc-st-c select{appearance:none; background-image:var(--chev); background-repeat:no-repeat; background-position:right 9px center; background-size:12px 12px; padding-right:28px}
.fc-wa .fc-st-c :is(input,select):focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
html[data-theme="dark"] .fc-wa .fc-st-c :is(input,select){background-color:var(--page); color-scheme:dark}
.fc-wa-t{display:inline-flex; align-items:flex-start; gap:var(--sp-2); min-width:0}
.fc-wa-t>.svgi{flex:none; width:14px; height:14px; margin-top:2px; color:var(--muted)}
.fc-wa-b{display:inline-flex; gap:var(--sp-1); flex-wrap:wrap}