/* [2.0.67.2 · CHARTE + UI-FLUIDE] Socle visuel de TOUTE l'application, chargé en dernier par les trois gabarits (cockpit, messagerie,
   administration) et par la page de connexion. Aucun composant nouveau : on harmonise les existants.
   1. Palette PREYA (preya.fr, charte du 18/09) : crème #F7F5F0, texte #1E1E1C / #4C4C4C, vert PREYA (olive) #2E4A35, vert clair #7A9D6A,
      cartes blanches. Couleurs d'ÉTAT réservées à l'état : rouge, orange, vert, gris — jamais en décoration. Zone WhatsApp : ses codes.
   2. Une échelle typographique, une grille d'espacements, une profondeur de carte (ombre, bordure, rayon identiques partout).
   3. Mise en page fluide (UI-FLUIDE du 23/09) : fr / % / clamp, plafond 1800 px centré, trois états (> 1100, 900–1100, < 900),
      panneau de droite en % borné (380 px à 34 %), jamais de défilement horizontal, jamais de chiffre ni de référence tronqués. */

:root {
  /* ── palette : neutres chauds (crème → texte) */
  --p-n-0: #FFFFFF; --p-n-50: #F7F5F0; --p-n-100: #EFECE4; --p-n-200: #E4DFD3; --p-n-300: #CFC9BB; --p-n-500: #5E5D56;
  --p-n-600: #57564F; --p-n-700: #4C4C4C; --p-n-900: #1E1E1C;
  /* ── vert PREYA (olive) : marque, actions, sélection */
  --p-olive-50: #EEF2EA; --p-olive-100: #DCE5D5; --p-olive-300: #7A9D6A; --p-olive-600: #3B5A3F; --p-olive-700: #2E4A35; --p-olive-800: #26392B;
  /* ── états (texte foncé AA sur fond pâle ; pastille pleine = texte blanc AA) */
  --p-rouge-50: #FDECEA; --p-rouge-100: #FBD7D2; --p-rouge-200: #F4A9A0; --p-rouge-500: #C4320A; --p-rouge-600: #B42318;
  --p-orange-50: #FEF0E1; --p-orange-100: #FDDCB5; --p-orange-200: #F9C58A; --p-orange-400: #DC6803; --p-orange-600: #9A4A06;
  --p-vert-50: #E3F4EA; --p-vert-100: #C9E9D5; --p-vert-200: #9AD3B0; --p-vert-500: #1F7A4D; --p-vert-600: #1A6340;
  --p-gris-50: #EFEDE7; --p-gris-600: #5F5E57;
  /* ── [2.0.84.1] badges d'options et badge € : bronze = ajouté, à payer · vert = payé ; pictogramme crème (couleurs de Rémy) */
  --p-sw-600: #a4322a; --p-sw-50: #fdf0ee; --p-sw-100: #ecd4d0; --p-sw-texte: #7a2a23;   /* [2.0.82.12] « sans WhatsApp » (maquette 2.0.91.8), dans la palette */
  --p-bronze-600: #8A5A24; --p-bronze-700: #6E461C;   /* [2.0.94.23 · ALERTES-FINITIONS, Rémy 04/11] bronze texte : ≥ 4,5 aussi sur les fonds surlignés orange-100 / rouge-100 (le 600 tombait à 4,28-4,41) */ --p-paye-600: #1A6340;   /* [2.0.82.12] vert payé foncé : pictogramme crème 6,9:1 (avant #1A7F4B, 4,46) */ --p-badge-picto: #F7F1E4;
  /* [ENVELOPPE CLIENT · 14/10] contrastes calculés ≥ 4,5:1 (pictogramme crème ou foncé sur la tuile, coches sur le fond de ligne) */
  --p-env-bleu-100: #D6E6F5;   /* variante A, envoyé / remis : fond (pictogramme --p-env-bleu-800, 6,70:1) */
  --p-env-bleu-800: #1D4F7C;
  --p-env-bleu-600: #1F6FB2;   /* variante A, lu : fond (pictogramme crème, 4,69:1) */
  --p-env-coche-lu: #1A5C94;   /* variante B, ✓✓ lu : coches bleues (6,99:1 sur blanc, 6,42:1 sur ligne survolée) */
  --p-coche-lu: #2E8BD8;   /* [2.0.92.28] décision de Rémy (09/10) : ✓✓ lu en BLEU, comme WhatsApp ; réservé aux coches de lecture de la messagerie */

  /* ── échelle typographique unique (rem : suit le zoom du navigateur) */
  --t-titre: 1.375rem;   /* titre de page */
  --t-sous-titre: 1.0625rem;
  --t-chiffre: 1.5rem;   /* chiffres clés (compteurs, gains) */
  --t-corps: var(--ck-font, .875rem);   /* 14 px, 13 px sous 1440 px (palier du cockpit) */
  --t-libelle: .8125rem; /* 13 px : libellés, en-têtes de colonnes */
  --t-legende: .75rem;   /* 12 px : légendes (jamais en dessous) */
  --t-graisse-titre: 650; --t-graisse-libelle: 600;

  /* ── grille d'espacements unique */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px;

  /* ── profondeur unique des cartes */
  --carte-fond: var(--p-n-0);
  --carte-bord: 1px solid var(--p-n-200);
  --carte-rayon: 12px;
  --carte-ombre: 0 1px 2px rgba(30, 30, 28, .05), 0 2px 8px rgba(30, 30, 28, .04);

  /* ── mise en page */
  --plafond: 1800px;
  --ck-pan-col: clamp(380px, 30vw, min(34vw, 612px));   /* 380 px à 34 % de l'écran, jamais plus que 34 % du plafond de 1800 px */

  /* ── raccord des deux systèmes de jetons existants (cockpit --ck-*, messagerie v2) */
  --ck-nuit: var(--p-n-900); --ck-texte: var(--p-n-900); --ck-muet: var(--p-n-500); --ck-fond: var(--p-n-50); --ck-carte: var(--p-n-0);
  --ck-bord: var(--p-n-200); --ck-accent: var(--p-olive-700); --ck-accent-2: var(--p-olive-700); --ck-sel: var(--p-olive-50);
  --ck-sidebar-1: var(--p-olive-800); --ck-sidebar-2: var(--p-olive-800); --ck-sidebar-3: var(--p-olive-800);
  --ck-side-txt: #E9E6DC; --ck-pill: var(--p-olive-600);
  --navy: var(--p-olive-800); --navy-2: var(--p-olive-700); --preya: var(--p-olive-700); --preya-2: var(--p-olive-800);
  --preya-pale: var(--p-olive-50); --preya-pale-2: var(--p-olive-100);
  --rouge: var(--p-rouge-600); --rouge-pale: var(--p-rouge-50); --orange: var(--p-orange-400); --orange-pale: var(--p-orange-50);
  --vert: var(--p-vert-600); --vert-pale: var(--p-vert-50);
  --txt: var(--p-n-900); --muted: var(--p-n-500); --muted-2: var(--p-n-500); --bord: var(--p-n-200);
  --fond: var(--p-n-0); --fond-2: var(--p-n-50); --fond-3: var(--p-n-100);
  --r: var(--carte-rayon); --r-lg: var(--carte-rayon); --ombre: var(--carte-ombre);
}

/* ═════════ 1. base : fond crème, texte, liens olive */
body.ck, body.v2, .app, .ck-app { background: var(--p-n-50); color: var(--p-n-900); }
body.ck, body.v2 { font-size: var(--t-corps); }
.ck-sidebar { transition: transform .2s; }   /* largeur du menu sans animation : jamais d'état intermédiaire débordant au changement de palier */
:where(.ck, .contenu) a:not([class]) { color: var(--p-olive-700); }
:where(.ck, .contenu) a:not([class]):hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--p-olive-700); outline-offset: 2px; }

/* échelle typographique */
/* :where() = spécificité nulle : l'échelle s'applique partout où un composant ne fixe pas lui-même sa taille ou sa couleur */
:where(.ck, .contenu) :where(h1, .ck-titre-page, .entete-titre h1) { font-size: var(--t-titre); font-weight: var(--t-graisse-titre); color: var(--p-n-900); line-height: 1.25; }
:where(.ck, .contenu) h2 { font-size: var(--t-sous-titre); font-weight: var(--t-graisse-titre); color: var(--p-n-900); line-height: 1.3; }
:where(.ck, .contenu) h3 { font-size: var(--t-corps); font-weight: var(--t-graisse-titre); color: var(--p-n-900); }
:where(.ck, .contenu) th { font-size: var(--t-libelle); font-weight: var(--t-graisse-libelle); color: var(--p-n-600); }
:where(.ck, .contenu) small { font-size: max(var(--t-legende), 12px); }   /* couleur héritée : lisible sur fond clair comme sur fond foncé */
:where(.ck, .contenu) .ck-muet, .ck-cpt-sous { font-size: max(var(--t-legende), 12px); color: var(--p-n-500); }
.ck-sidebar small, .sidebar small { color: inherit; }

/* ═════════ 2. menu latéral (cockpit et messagerie) : vert PREYA */
.ck-sidebar, .sidebar { background: var(--p-olive-800); color: #E9E6DC; }
.ck-sidebar .ck-item, .sidebar .nav-item { color: #E9E6DC; }
.ck-sidebar .ck-item svg, .sidebar .nav-item .ico { color: #C9D6BE; }
.ck-sidebar .ck-item:hover, .sidebar .nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.ck-sidebar .ck-item.actif, .sidebar .nav-item.actif { background: var(--p-olive-600); color: #fff; box-shadow: none; }
.ck-sidebar .ck-item.actif svg, .sidebar .nav-item.actif .ico { color: #fff; }
.ck-sidebar .ck-item.bientot, .sidebar .nav-item.bientot { color: #B9C2B0; opacity: 1; }
.ck-logo, .ck-logo span, .logo, .baseline { color: #F7F5F0; }
.ck-sidebar .ck-item em, .sidebar .nav-item em { color: #E9E6DC; border-color: rgba(233, 230, 220, .35); background: transparent; }
.ck-nav-pastille, .nav-badge { background: var(--p-orange-600); color: #fff; }
.ck-sidebar .ck-nav-pastille { background: #F7F5F0; color: var(--p-olive-800); }
.ck-sidebar .ck-pied, .ck-sidebar .ck-pied a, .ck-sidebar .ck-pied span { color: #C9D6BE; opacity: 1; }

/* en-tête : bandeau d'état et badge TEST lisibles (contraste AA) */
.ck-badge-test { background: var(--p-orange-50); color: var(--p-orange-600); border-color: var(--p-orange-200); }
.ck-sante, .ck-sante .ck-long { color: var(--p-orange-600); }
.ck-avatar, .ck-avatar[class*=" t"], .avatar { background: var(--p-olive-50); color: var(--p-olive-700); }   /* identité, pas un état : une seule teinte */

/* ═════════ 3. une profondeur de carte, partout */
.ck-carte, .ck-tablezone, .ck-dsp, .ck-pan, .ck-cpt, .ck-ano-carte, .ck-fr-carte, .ck-ctr-carte, .ck-g009, .gn, .carte, .card, .kpi,
.ck-fiche > section, .ck-pris-item-carte, .ck-finance, .ck-notes, main.connexion, .ck-notif, .t-carte, .ck-rapport, .ck-dd-carte {
  background-color: var(--carte-fond); border: var(--carte-bord); border-radius: var(--carte-rayon); box-shadow: var(--carte-ombre);
}
/* l'état se lit au liseré gauche, jamais par une autre profondeur */
.ck-fr-carte.niv-rouge, .ck-ano-carte.niv-rouge, .carte-alertes, .bandeau-rouge { border-left: 4px solid var(--p-rouge-600); }
.ck-fr-carte.niv-orange, .ck-ano-carte.niv-orange { border-left: 4px solid var(--p-orange-400); }
.ck-fr-carte.niv-jaune, .ck-ano-carte.niv-jaune { border-left: 4px solid var(--p-orange-200); }
.bandeau-test { border-left: 4px solid var(--p-orange-400); }

/* ═════════ 4. dashboard : trois accents, une palette */
/* bandeau de bienvenue : vert PREYA plein, texte crème */
.ck-bandeau { background-color: var(--p-olive-700); color: #F7F5F0; border: 1px solid var(--p-olive-700); border-radius: var(--carte-rayon); box-shadow: var(--carte-ombre); }
.ck-bandeau:not([style]) { background-image: none; }
.ck-bandeau h1 { font-size: var(--t-titre); font-weight: var(--t-graisse-titre); color: #fff; }
.ck-bandeau p, .ck-bandeau small, .ck-bandeau-date { color: #F7F5F0; opacity: 1; }
/* compteurs : tuile d'icône olive pâle ; seule « À dispatcher » non nulle et « Retards vol » non nul portent une couleur d'état */
.ck-cpt7 .ck-cpt, .ck-compteurs .ck-cpt { color: var(--p-n-900); }
.ck-cpt .ck-cpt-ico, .ck-cpt-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px;
  background: var(--p-olive-50); color: var(--p-olive-700); }
.ck-cpt7 .ck-cpt-ico { margin-top: 0; }
.ck-cpt.cpt-rouge .ck-cpt-ico { background: var(--p-rouge-50); color: var(--p-rouge-600); }
.ck-cpt.cpt-rouge .ck-cpt-val { color: var(--p-rouge-600); }
.ck-cpt.cpt-orange .ck-cpt-ico { background: var(--p-orange-50); color: var(--p-orange-600); }
.ck-cpt.cpt-orange .ck-cpt-val { color: var(--p-orange-600); }
.ck-cpt-val { font-size: var(--t-chiffre); font-weight: 700; color: var(--p-n-900); font-variant-numeric: tabular-nums; }
.ck-cpt-lib { color: var(--p-n-900); }
.ck-cpt.actif { outline-color: var(--p-olive-700); }
/* bloc Gains : chiffres en texte, gain en vert PREYA (marque), pas en vert d'état */
section.gn { color: var(--p-n-900); border-radius: var(--carte-rayon); border: var(--carte-bord); box-shadow: var(--carte-ombre); }   /* l'élément porte aussi son propre <style> : spécificité supérieure */
.gn .gn-gain, .gn .gain, .gn b.vert { color: var(--p-olive-700); }

/* boutons primaires : vert PREYA */
.btn-primary, .btn-primaire, .ck-btn-primaire, .btn.primaire, button.primaire, .bouton-primaire {   /* boutons primaires seulement : les boutons « contour » gardent leur forme */
  background: var(--p-olive-700); border-color: var(--p-olive-700); color: #fff;
}
.btn-primary:hover, .btn-primaire:hover, .ck-btn-primaire:hover, button.primaire:hover { background: var(--p-olive-800); }

/* ═════════ 5. mise en page fluide : plafond 1800 px centré */
.ck-page, .dash, .page-admin-contenu, main.ck-admin-main {
  width: 100%; max-width: var(--plafond); margin-inline: auto; box-sizing: border-box;   /* retraits d'origine de chaque page conservés */
}
/* panneau de droite : 380 px à 34 % de l'écran (vw), borné à 612 px (34 % du plafond) sur les très grands écrans */
.ck-avecpan { --ck-pan-col: clamp(380px, 30vw, min(34vw, 612px)); }
/* colonnes en fr / % / clamp (fiche de course) */
.ck-fiche { grid-template-columns: minmax(0, clamp(14rem, 24%, 22rem)) minmax(0, 1fr) minmax(0, clamp(18rem, 30%, 28rem)); }

/* état 2 : 900 – 1100 px — menu en rail d'icônes, panneau superposé à droite */
@media (min-width: 900px) and (max-width: 1099.98px) {
  :root { --ck-side-w: 64px; }
  .ck-burger { display: none !important; }
  .ck-sidebar { position: sticky !important; transform: none !important; width: 64px !important; flex: 0 0 64px !important; padding-inline: 8px; }
  .ck-sidebar .ck-item { justify-content: center; padding: 10px 0; font-size: 0; gap: 0; }
  .ck-sidebar .ck-item svg { width: 20px; height: 20px; flex-basis: 20px; }
  .ck-sidebar .ck-item em, .ck-sidebar .ck-logo span, .ck-sidebar .ck-logo-nom, .ck-sidebar .ck-micro, .ck-sidebar .ck-nav-pastille, .ck-sidebar .ck-pied { display: none; }
  .ck-sidebar .ck-logo { font-size: 0; padding: 0 0 12px; text-align: center; }
  .ck-avecpan.ck-pan-ouvert { grid-template-columns: minmax(0, 1fr) 0px; column-gap: 0; }
  .ck-avecpan.ck-pan-ouvert .ck-panneau { position: fixed; inset: 60px 0 0 auto; width: var(--ck-pan-col-fixe, clamp(380px, 46vw, 520px)); max-width: 100%;
    height: calc(100dvh - 60px); max-height: calc(100dvh - 60px); z-index: 95; border-top-left-radius: var(--carte-rayon); background: var(--p-n-50); padding: var(--e-3); box-shadow: -8px 0 24px rgba(30, 30, 28, .18); }
  .ck-fiche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* état 3 : < 900 px — téléphone : menu replié (tiroir), panneau plein écran, une colonne */
@media (max-width: 899.98px) {
  .ck-avecpan.ck-pan-ouvert .ck-panneau { position: fixed; inset: 60px 0 0 0; width: 100%; max-width: 100%; height: calc(100dvh - 60px); max-height: calc(100dvh - 60px); z-index: 95;   /* sous la cloche, toujours accessible */
    border-radius: 0; background: var(--p-n-50); padding: var(--e-3); box-shadow: none; }
  .ck-fiche { grid-template-columns: minmax(0, 1fr); }
}

/* ═════════ 6. aucun chiffre ni référence tronqués (règle du 23/09) : on passe à la ligne, on ne coupe pas */
.ck-tab td, .ck-tab th { text-overflow: clip; }
/* mots : césure française avec tiret (« Écono-mique »), jamais coupés n'importe où ; codes et références : coupés au caractère si la
   colonne est plus étroite qu'eux, toujours entiers à l'écran */
.ck-tab .ck-c-trajet, .ck-tab .ck-trajet, .ck-tab .ck-cat, .ck-tab .ck-c-heure, .ck-th-col, .ck-cpt-lib, .ck-pan-quand b, .ck-pan-quand small,
.ck-tab td.ck-ellipsis, .ck-tab td.ck-ellipsis *, .ck-pan-pers b, .ck-pan-pers small, .ck-sidebar .ck-item > span:not(.ck-nav-pastille) {
  white-space: normal; overflow: visible; text-overflow: clip; max-width: none; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}
.ck-tab .ck-rc-code, .ck-tab .ck-c-refclient small {   /* codes de référence seulement : un montant ou un numéro de réservation ne se coupe jamais au chiffre */
  white-space: normal; overflow: visible; text-overflow: clip; max-width: none; word-break: break-all; hyphens: none;
}
.ck-tab td .ck-cat.ck-cat { display: inline-block; max-width: 100%; }   /* plus spécifique que « td.ck-ellipsis * » (la cellule Trajet porte les deux) */

/* ═════════ 7. états : quatre familles seulement (rouge, orange, vert, gris) — les anciennes nuances « info » (bleu, violet) deviennent gris */
.bleu, .sev-info { background: var(--p-gris-50); color: var(--p-gris-600); }
.ev-info, .al-info, .info { border-left-color: var(--p-gris-600); }
.ev-info { border-color: var(--p-gris-600); }
.st-bleu, .st-bleufonce { background: var(--p-vert-50); color: var(--p-vert-600); }
.st-jaune { background: var(--p-orange-50); color: var(--p-orange-600); }
.st-gris { background: var(--p-gris-50); color: var(--p-gris-600); }

/* ═════════ 8. plus rien de tronqué : cellules « ellipse » de la table, libellés du menu, numéros */
.sidebar .nav-item, .ck-sidebar .ck-item { line-height: 1.25; }
.ck-tab td .ck-cat.ck-cat { overflow-wrap: anywhere; }   /* après la césure, dernier recours : jamais plus large que sa cellule */
.ck-fr-pec { white-space: normal; }
.entete-titre, .entete-titre *, .conv-entete small, .ctx-num, .conv-num { overflow-wrap: anywhere; white-space: normal; text-overflow: clip; }
/* puces actives (période, filtres, onglets) : vert PREYA, jamais noir */
.ck-jours a.actif, .ck-puces a.actif, .ck-filtres a.actif, .ck-vues a.actif, .ck-onglets a.actif, .puce.actif, .filtre.actif {
  background: var(--p-olive-700); border-color: var(--p-olive-700); color: #fff;
}
.fil-tete-txt b, .fil-tete-txt small, .fil-tete-txt h2 { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; hyphens: auto; }
/* [PRIX-DRIVERPRICE-S16] mettait la référence client et le vol en ellipse entre 981 et 1300 px de table : la règle du 23/09 l'emporte,
   la référence passe à la ligne (entière, jamais masquée) */
@container ckcol (min-width: 981px) and (max-width: 1300px) {
  .ck-tab td.ck-c-refclient small, .ck-tab td.ck-c-refclient small .ck-rc-code, .ck-tab td.ck-c-vol b {
    overflow: visible; text-overflow: clip; white-space: normal; word-break: break-all; max-width: 100%;
  }
}
/* ligne de course en carte (téléphone) et détails « satisfaction » : même profondeur que toute carte ; la sélection se lit au contour */
@media (max-width: 1099.98px) {
  .ck-tab tr.ck-ligne { border: var(--carte-bord); border-radius: var(--carte-rayon); box-shadow: var(--carte-ombre); background-color: var(--carte-fond); }
  .ck-tab tr.ck-ligne.sel { outline: 2px solid var(--p-olive-700); outline-offset: -2px; }
}
details.sat-attente { background: var(--carte-fond); border: var(--carte-bord); border-radius: var(--carte-rayon); box-shadow: var(--carte-ombre); color: var(--p-n-900); }

/* ═════════ 9. pages d'administration (Tailwind) : jamais de défilement horizontal, même dans une carte ; actions qui passent à la ligne */
.ck-admin-main { width: 100%; max-width: var(--plafond); margin-inline: auto; box-sizing: border-box; padding-inline: clamp(var(--e-3), 1.6vw, var(--e-5)); }
.ck-admin-main .overflow-x-auto { overflow-x: visible; }
.ck-admin-main table { width: 100%; table-layout: auto; }
.ck-admin-main td, .ck-admin-main th { overflow-wrap: break-word; hyphens: auto; }
.ck-admin-main td .btn, .ck-admin-main td button { white-space: normal; }
.ck-admin-main td:has(> form), .ck-admin-main td:has(> .btn) { display: flex; flex-wrap: wrap; gap: var(--e-1); align-items: flex-start; }
.ck-admin-main input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), .ck-admin-main select { min-height: 40px; box-sizing: border-box; }
.ck-admin-main .card { border: var(--carte-bord); border-radius: var(--carte-rayon); box-shadow: var(--carte-ombre); }
/* tableau empilé (reglages.js) : une fiche par ligne, libellé au dessus de chaque valeur */
table.tbl-empile, table.tbl-empile tbody, table.tbl-empile tr, table.tbl-empile td { display: block; width: 100%; min-width: 0 !important; box-sizing: border-box; }   /* min-width en ligne (style="min-width:900px") neutralisé */
table.tbl-empile thead { display: none; }
table.tbl-empile tr { border: var(--carte-bord); border-radius: var(--carte-rayon); background: var(--carte-fond); margin: 0 0 var(--e-2); padding: var(--e-2) var(--e-3); }
table.tbl-empile td { border: 0; padding: var(--e-1) 0; overflow-wrap: anywhere; text-align: left; }
table.tbl-empile td[data-libelle]:not([data-libelle=""])::before { content: attr(data-libelle); display: block; font-size: var(--t-legende); font-weight: var(--t-graisse-libelle); color: var(--p-n-600); }

/* ═════════ 10. encarts d'état (fond pâle) : plats, même rayon que les cartes, jamais d'ombre */
.bandeau, .ck-pan-vol, .ck-dsp-test, .notes li, .drv-bandeau, .ck-mt-texte, .sat-attente[open] > div, .bandeau-paiement, .ck-pay-l,
.ck-ecr-annule, .ck-ns-carte, .t-dem, .ck-pan-alerte, .ck-alerte {
  border-radius: var(--carte-rayon); box-shadow: none;
}
.ck-tab tr.ck-ligne .ck-pan-vol { border-radius: var(--carte-rayon); }
table.tbl-empile tr { box-shadow: var(--carte-ombre); }
/* libellé de statut : jamais tronqué (passe à la ligne dans sa pastille) */
.ck-st, .ck-st-t { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; hyphens: auto; }
/* messagerie : plafond 1800 px centré aussi (trois colonnes) */
.ck-main > .contenu, .msg-layout { max-width: var(--plafond); margin-inline: auto; width: 100%; box-sizing: border-box; }
.ck-tab td.ck-c-statut .ck-st .ck-st-t, .ck-tab td:not(.dr):not(.ck-ellipsis) .ck-st .ck-st-t { white-space: normal; overflow: visible; text-overflow: clip; max-width: 100%; hyphens: auto; }   /* libellé de statut entier (passe à la ligne) */

/* référence client : entière, passe à la ligne au caractère si sa colonne est plus étroite qu'elle (même sélecteur que l'ancienne règle
   « insécable », chargé après elle) */
.ck-tab td:not(.dr):not(.ck-ellipsis) .ck-rc-code, .ck-rc-code, .ck-tab td.ck-c-refclient small { white-space: normal; word-break: break-all; overflow-wrap: anywhere; }
/* prix : « 47.00 € » insécable tant que la colonne le permet ; sinon le symbole passe à la ligne (jamais masqué) — numéro de réservation
   toujours insécable, le reste de la cellule Réf. (« à traiter », pictogrammes) passe à la ligne */
.ck-tab td.dr.ck-c-prixc, .ck-tab td.dr.ck-c-prixch { white-space: normal; }
.ck-tab td.ck-c-ref:not(.dr) *:not(a) { white-space: normal; }
/* table : la tranche la plus étroite du palier large (981 – 1100 px de table, atteinte depuis le plafond 1800 px) prend les retraits du
   palier serré — le numéro de réservation, insécable, tient toujours dans sa colonne */
@container ckcol (min-width: 981px) and (max-width: 1100px) { .ck-tab tr > td, .ck-tab tr > th { padding-left: 5px; padding-right: 5px; } }
.ck-fr-pris { white-space: normal; overflow: visible; text-overflow: clip; }
/* [2.0.72.2 · E00x] compte chauffeur externe sans prénom : état « attention » (orange), jamais le code E00x */
.ck-pastille-ch { display: inline-block; max-width: 100%; padding: 0 var(--e-2); border-radius: 999px; background: var(--p-orange-50); color: var(--p-orange-600);
  border: 1px solid var(--p-orange-200); font-size: max(var(--t-legende), 12px); font-weight: 600; line-height: 1.5; white-space: normal; overflow-wrap: break-word; }
.gab-item.gab-bloque { opacity: .6; cursor:help; }
/* [2.0.72.2 · R-45] modale paiement : source de la réservation, case de vérification partenaire */
.pay-source { display: grid; gap: 2px; margin: var(--e-2) 0; padding: var(--e-2) var(--e-3); border-radius: var(--r); border: 1px solid var(--p-n-200); background: var(--p-n-0); }
.pay-source small { color: var(--p-n-700); }
.pay-source-partenaire, .pay-source-inconnue { border-color: var(--p-orange-200); background: var(--p-orange-50); }
.pay-verif { display: flex !important; gap: var(--e-2); align-items: flex-start; margin: var(--e-2) 0 !important; font-weight: 600; }
.pay-verif input { margin-top: 3px; flex: none; width: 18px; height: 18px; }
/* [2.0.72.2] modale Vol (messagerie) : étapes choix → vérification → confirmation ; bandeaux vert et gris de la charte */
.bandeau-vert { background: var(--p-vert-50); color: var(--p-vert-700, var(--p-vert-600)); border-left: 4px solid var(--p-vert-600); }
.bandeau-gris { background: var(--p-n-50, #f6f5f2); color: var(--p-n-700); border-left: 4px solid var(--p-n-300, #c9c6bd); }
.vol-modale .vm-bandeau, .pay-modale .pay-off { margin: var(--e-2) 0; display: block; line-height: 1.45; overflow-wrap: anywhere; }
.vm-fs { border: 1px solid var(--p-n-200); border-radius: var(--r); padding: var(--e-2) var(--e-3); margin: var(--e-2) 0; display: grid; gap: var(--e-2); min-width: 0; }
.vm-fs legend { font-weight: 600; padding: 0 4px; }
.vm-choix { display: flex; gap: var(--e-2); align-items: flex-start; min-width: 0; line-height: 1.4; cursor: pointer; }
.vm-choix input { margin-top: 3px; flex: none; }
.vm-choix small { color: var(--p-n-700); overflow-wrap: anywhere; }
.vm-saisie { display: grid; gap: 4px; font-weight: 600; margin: var(--e-2) 0; }
.vm-saisie input { font: inherit; font-weight: 400; min-height: 40px; padding: 0 var(--e-3); border: 1px solid var(--p-n-200); border-radius: var(--r); max-width: 220px; text-transform: uppercase; }
.vm-verif { display: grid; gap: 6px; border: 1px solid var(--p-n-200); border-radius: var(--r); padding: var(--e-3); margin: var(--e-2) 0; background: var(--p-n-0); box-shadow: var(--ombre); }
.vm-l { display: grid; grid-template-columns: 120px 1fr; gap: 2px var(--e-3); align-items: baseline; min-width: 0; }
.vm-l > span { color: var(--p-n-700); font-size: max(var(--t-legende), 12px); }
.vm-l small { grid-column: 2; color: var(--p-n-700); overflow-wrap: anywhere; }
@media (max-width: 520px) { .vm-l { grid-template-columns: 1fr; } .vm-l small { grid-column: 1; } }
/* [2.0.72.2] messagerie poste CS : pilules d'action branchées, badge alerte de la conversation, frise de la course dans le panneau */
.pil-action.pil-on { cursor: pointer; text-decoration: none; border-color: var(--p-n-300); box-shadow: var(--ombre); }
.pil-action.pil-on:hover { background: var(--p-n-50); }
.pil.pil-alerte { background: var(--p-orange-50); color: var(--p-orange-600); border: 1px solid var(--p-orange-200); font-weight: 700; }
.pil.pil-alerte.rouge { background: var(--p-rouge-50); color: var(--p-rouge-600); border-color: var(--p-rouge-600); }
.badge-cpt.rouge { background: var(--p-rouge-600); color: #fff; }
.ctx-frise { margin: 0 0 var(--e-2); min-width: 0; }
.ctx-frise .ck-frise { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.ctx-frise .ck-frise-nav, .ctx-frise .ck-frise-ancre { display: none; }
.ctx-frise .ck-frise-piste { display: flex; flex-direction: column; gap: var(--e-2); overflow: visible; min-height: 0 !important; padding: 0; scroll-snap-type: none; }
.ctx-frise .ck-fr-carte { width: auto; min-width: 0; max-width: none; flex: none; }
.ctx-frise .ck-fr-vide { padding: var(--e-2) 0; color: var(--p-n-700); }
.ctx-lien-centre { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; margin: 0 0 var(--e-2); color: var(--p-n-900); }
.ctx-ecr { margin: 0 0 var(--e-2); }
.note-cab9 { font-weight: 600; }
.note-cab9.ok { color: var(--p-vert-600); }
.note-cab9.ko { color: var(--p-rouge-600); }
.carte-chauffeur .chauffeur-vide > div, .carte-vol .vol-vide > div { display: grid; gap: 2px; min-width: 0; }
.carte-vol .vol-vide small, .carte-chauffeur .chauffeur-vide small { overflow-wrap: anywhere; }
/* [2.0.72.2] barre d'actions de la messagerie : pilules jamais rétrécies (elles défilent à l'horizontale sur téléphone, sans chevauchement) */
.actions-rapides > .pil-action { flex: none; }
.ctx-frise .ck-fr-vide { display: none; }   /* [2.0.72.2] l'en-tête dit déjà « Aucune alerte à prendre » */
.gab-alerte-chauffeur { margin: 0 0 var(--e-2); }   /* [2.0.72.2] bandeau aligné sur la liste des messages type */
/* [2.0.72.4] actions sur la course : bouton destructif rouge de la charte, statuts impossibles atténués, motif d'annulation */
.btn.btn-rouge { background: var(--p-rouge-600); color: #fff; border: 1px solid var(--p-rouge-600); }
.btn.btn-rouge:hover { filter: brightness(.95); }
.btn.btn-rouge:disabled, .btn.btn-bleu:disabled { opacity: .5; cursor:help; }
.act-modale .act-inactif { opacity: .55; cursor:help; }
.vm-saisie textarea { font: inherit; font-weight: 400; padding: var(--e-2) var(--e-3); border: 1px solid var(--p-n-200); border-radius: var(--r); resize: vertical; min-height: 72px; width: 100%; box-sizing: border-box; }

/* [2.0.76.4] en-têtes du tableau : coupure aux espaces seulement (« Prix / chauffeur »), jamais de césure dans un mot */
.ck-tab thead th, .ck-tab thead th * { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; }
/* [2.0.76.7] signe de supplément sur la ligne de course : à la taille du texte, posé sur la ligne de base (la hauteur des lignes ne bouge pas) */
.ck-supp { display: inline-block; margin-left: .3em; line-height: 0; }
.ck-supp .ico { width: 1em; height: 1em; vertical-align: -.12em; }

/* [2.0.76.8] écran propre : bandeau d'accueil sur une ligne ; gains repliés tant que tout vaut zéro ; note finance en infobulle */
.ck-bandeau.ck-bandeau-ligne { padding: var(--e-3) var(--e-4); align-items: center; }
.ck-bandeau.ck-bandeau-ligne h1 { margin: 0; }
.ck-bandeau.ck-bandeau-ligne .ck-bandeau-date { display: flex; align-items: baseline; gap: var(--e-2); }
.ck-bandeau.ck-bandeau-ligne .ck-bandeau-date b { display: inline; font-size: var(--t-titre); }
.gn.gn-replie .gn-per, .gn.gn-replie .gn-corps { display: none; }
.ck-fin-info { align-self: center; cursor: help; font-size: 15px; margin-left: var(--e-2); }

/* [2.0.77 · VOL] ligne « Estimée » : vert sous le seuil (Paramètres → Vols), rouge à partir du seuil, avance comme retard */
.ck-vol-c.vs-ecart { color: var(--ck-rouge); font-weight: 600; }
/* [2.0.77 · VOL] une information par ligne (téléphone compris) ; dans une colonne étroite la ligne se coupe après « Estimée » ou avant
   un « · » (espaces insécables ailleurs), jamais au milieu de « −9 min » ; elle ne déborde jamais de sa cellule [2.0.77.1 · correctif S16] */
.ck-tab td.ck-c-vol > b, .ck-tab td.ck-c-vol > small.ck-vol-c { display: block; }

/* [2.0.82.2] retour d'une écriture depuis le panneau : collant en haut de la partie visible du panneau (jamais caché tout en haut quand le CS
   a défilé jusqu'au geste) ; « en cours » de même ; fermeture à la croix */
#ck-panneau .ck-pan-ecr, #ck-panneau #ck-encours { position: sticky; top: 0; z-index: 6; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
#ck-panneau .ck-pan-ecr { display: flex; align-items: flex-start; gap: var(--e-2); font-size: 13px; line-height: 1.4; }
#ck-panneau .ck-pan-ecr > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#ck-panneau .ck-pan-ecr.warn { background: var(--p-orange-50); color: var(--p-orange-600); border: 1px solid var(--p-orange-400); }
.ck-pan-ecr-x { flex: none; width: 28px; height: 28px; border: 0; background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
/* [2.0.82.2] prix chauffeur : une seule ligne (champ TTC, HT, enregistrer, puis ± 2,5 %) */
.ck-pxch-bloc { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.ck-pxch-u { font-size: 12px; color: var(--p-n-600); margin: 0 var(--e-1); }
.ck-pas-l { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.ck-pas-l .ck-ajust { font-size: 12px; color: var(--p-n-700); }

/* [2.0.82.2] notes du panneau : deux blocs nettement distincts (bureau en vert, chauffeur en rouge, comme la fiche), même code couleur au choix
   et à l'écriture ; le choix est explicite (« Quelle note écrire ? ») */
.ck-notes-pan .ck-note-lect { border-left: 4px solid var(--p-n-200); background: var(--p-n-0, #fafaf7); border-radius: 6px; padding: var(--e-2) var(--e-3); margin-top: var(--e-2); }
.ck-notes-pan .ck-note-lect.n-bureau, .ck-notes-pan .ck-notes-form.n-bureau { border-left: 4px solid var(--p-vert-600); }
.ck-notes-pan .ck-note-lect.n-chauffeur, .ck-notes-pan .ck-notes-form.n-chauffeur { border-left: 4px solid var(--p-rouge-600); }
.ck-notes-pan .ck-notes-form { padding-left: var(--e-3); }
.ck-notes-pan .ck-note-lect-t { display: block; font-weight: 700; font-size: 13px; color: var(--p-n-900); }
.ck-notes-pan .ck-note-lect-t small { font-weight: 400; font-size: 12px; color: var(--p-n-600); }
.ck-notes-pan .n-bureau .ck-note-lect-t { color: var(--p-vert-700, var(--p-vert-600)); }
.ck-notes-pan .n-chauffeur .ck-note-lect-t { color: var(--p-rouge-600); }
.ck-notes-choix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-top: var(--e-2); }
.ck-notes-q { font-weight: 600; font-size: 13px; margin-right: var(--e-1); }
.ck-note-choix.n-bureau { border-left: 4px solid var(--p-vert-600); }
.ck-note-choix.n-chauffeur { border-left: 4px solid var(--p-rouge-600); }

/* [2.0.82.2] historique : « Tout voir » charge l'historique complet dans le panneau */
.ck-histo-tout { margin-top: var(--e-2); }
.ck-histo-fin { list-style: none; font-size: 12px; color: var(--p-n-600); padding: var(--e-2) 0 0; }

/* [2.0.82.2] un bouton grisé a l'air grisé : « Attribuer » / « Offrir au job pool » désactivés ne gardent plus le vert plein ni le contour
   noir (la règle :disabled était écrasée par .plein / .contour) ; idem ± 2,5 % */
.ck-dsp .ck-dsp-btn:disabled, .ck-dsp .ck-dsp-btn.plein:disabled, .ck-dsp .ck-dsp-btn.contour:disabled,
.ck-pas-l .ck-btn-pas:disabled { background: var(--ck-gris-f, var(--p-n-50)); color: var(--ck-muet, var(--p-n-600)); border: 1px dashed var(--ck-bord, var(--p-n-200)); cursor:help; filter: none; }
.ck-pay-err { display:block; color: var(--p-rouge-600); font-size: 12px; margin-top: var(--e-1); }
.ec-bloques { border: 1px dashed var(--p-n-200); border-radius: 6px; padding: 4px 8px; font-size: 12px; } .ec-bloques > summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; gap: 4px; } .ec-bloques > summary small { font-weight: 400; color: var(--p-n-600); }
/* [2.0.82.2] tout bouton désactivé du panneau a l'air désactivé (« Enregistrer dans CAB9 » tant que le prix n'a pas changé, etc.) */
#ck-panneau .ck-btn-pan:disabled, #ck-panneau .ck-btn-pan.actif:disabled, #ck-panneau .ck-btn:disabled { background: var(--ck-gris-f, var(--p-n-50)); color: var(--ck-muet, var(--p-n-600)); border: 1px dashed var(--ck-bord, var(--p-n-200)); cursor:help; box-shadow: none; }

/* ======================================================================================================================================
   [2.0.82.3 · NOUVEAU PANNEAU] 4 blocs : ① client et course ② chauffeur ③ actions ④ prix, zone rouge en bas. Charte crème / olive.
   Une colonne lue de haut en bas ; ce qui se fait est un bouton, l'information n'en a jamais l'air ; chiffres du prix tabulaires.
   ====================================================================================================================================== */
.pv2 { display: flex; flex-direction: column; gap: var(--e-3); }
.pv2-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.pv2-liens { display: inline-flex; gap: var(--e-2); margin-left: auto; }
.pv2-liens .ck-lien-cab9 { font-size: 12px; }
.pv2-attention { display: flex; flex-direction: column; gap: var(--e-2); }
.pv2-bloc { background: var(--carte-fond, #fff); border: var(--carte-bord); border-radius: var(--carte-rayon, 12px); box-shadow: var(--carte-ombre);   /* [2.0.88] profondeur unique de la charte : la S16 refusait la carte sans ombre (1/8976) */ padding: var(--e-3) var(--e-4); display: flex; flex-direction: column; gap: var(--e-2); }
.pv2-titre { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--p-olive-600); }
/* ① client et course */
.pv2-ref { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }
.pv2-ref small, .pv2-quand small, .pv2-frise small, .pv2-eta small, .pv2-geo small, .pv2-chiffres small { display: block; font-size: 12px; color: var(--p-n-600); font-weight: 500; }
.pv2-ref-client { font-size: 20px; font-weight: 800; letter-spacing: .01em; color: var(--p-n-900); font-variant-numeric: tabular-nums; }
.pv2-ref-ag { text-align: right; }
.pv2-ref-ag a { color: var(--p-n-700); }
.pv2-quand b { font-size: 22px; font-weight: 800; color: var(--p-n-900); line-height: 1.15; }
.pv2-quand { display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; padding: var(--e-2) var(--e-3); background: var(--p-olive-50, #f3f4ec); border-radius: 8px; }
.pv2-pass { font-size: 14px; color: var(--p-n-900); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1); }
.pv2-partenaire { font-size: 13px; font-weight: 600; }
.pv2-partenaire.pv2-rouge { color: var(--p-rouge-600); } .pv2-partenaire.pv2-orange { color: var(--p-orange-600); } .pv2-partenaire.pv2-vert { color: var(--p-vert-600); }
.pv2-frise { list-style: none; margin: var(--e-1) 0 0; padding: 0; position: relative; }
.pv2-pt { display: grid; grid-template-columns: 18px 1fr; gap: var(--e-3); position: relative; padding-bottom: var(--e-3); }
.pv2-pt b { display: block; font-size: 14px; line-height: 1.35; color: var(--p-n-900); overflow-wrap: anywhere; }
.pv2-pt span:not(.pv2-pastille) { display: block; font-size: 13px; color: var(--p-n-600); }
.pv2-pastille { width: 14px; height: 14px; border-radius: 50%; margin-top: 18px; box-sizing: border-box; position: relative; z-index: 1; }
.pv2-a .pv2-pastille { background: var(--p-olive-600); }
.pv2-b .pv2-pastille { background: #fff; border: 3px solid var(--p-olive-600); }
.pv2-a::before { content: ""; position: absolute; left: 6px; top: 32px; bottom: -18px; border-left: 2px dashed var(--p-olive-300, #b9bf9a); }
.pv2-b { padding-bottom: 0; }
.pv2-vol { margin-top: var(--e-1); font-size: 13px; color: var(--p-n-700); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pv2-vol.pv2-manque { color: var(--p-orange-600); font-weight: 600; }
.pv2-resa > summary, .pv2-conv > summary, .pv2 .ck-pan-histo > summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; gap: var(--e-2); font-weight: 600; font-size: 14px; }
.pv2-resa > summary small, .pv2-conv > summary small { font-weight: 400; font-size: 12px; color: var(--p-n-600); }
/* ② chauffeur */
.pv2-id { display: flex; align-items: center; gap: var(--e-3); }
.pv2-id b { display: block; font-size: 16px; }
.pv2-id small { display: block; font-size: 13px; color: var(--p-n-700); }
.pv2-tel { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pv2-tel a { color: var(--p-n-900); text-decoration: none; border-bottom: 1px solid var(--p-olive-300, #b9bf9a); }
.pv2-ch-src { font-size: 12px; color: var(--p-n-600); overflow-wrap: anywhere; }   /* [2.0.141.36 · SUPPORT-05] source du numéro */
.pv2-ch-src.est-manque { color: var(--rouge); font-weight: 600; }
.pv2-eta b { display: block; font-size: 14px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
.pv2-geo { font-size: 13px; color: var(--p-n-700); }
.pv2-vide { font-size: 14px; font-weight: 600; color: var(--p-n-700); padding: var(--e-2) var(--e-3); background: var(--p-n-50, #f6f5f2); border-radius: 8px; }
/* ③ actions */
.pv2-groupe { display: flex; flex-direction: column; gap: var(--e-2); padding-top: var(--e-2); border-top: 1px solid var(--p-n-100, #ece9e1); }
.pv2-groupe:first-of-type { border-top: 0; padding-top: 0; }
.pv2-gt { font-size: 12px; font-weight: 700; color: var(--p-n-700); }
.pv2-plan { margin: 2px 0 8px; font-size: 12px; line-height: 1.35; }   /* [J-1 TEMPLATES] aperçu du prochain envoi automatique */
.pv2-plan-txt { color: var(--p-n-700); }
.pv2-plan-annonce { margin-top: 2px; }
.pv2-boutons { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.pv2-boutons > * { flex: 1 1 160px; }
.pv2-boutons form { display: flex; }
.pv2-boutons form > button { flex: 1; }
.pv2-vol-f { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.pv2-vol-f input[type=text] { flex: 1 1 120px; min-height: 36px; }
.pv2-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: 13px; }
.pv2-inline input[type=number] { width: 72px; min-height: 32px; }
.pv2 .ck-dsp { border: 0; padding: 0; background: transparent; box-shadow: none; }
/* ④ prix */
.pv2-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }
.pv2-chiffres.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv2-chiffres > div { background: var(--p-n-50, #f6f5f2); border-radius: 8px; padding: var(--e-2) var(--e-3); min-width: 0; }
.pv2-chiffres b { display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--p-n-900); line-height: 1.2; }
.pv2-chiffres em { display: block; font-style: normal; font-size: 12px; color: var(--p-n-600); }
.pv2-chiffres .ck-marge-p { background: transparent; padding: 0; }
.pv2-saisie { display: flex; flex-direction: column; gap: var(--e-2); }
.pv2-saisie .ck-ecr-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.pv2-lbl { flex: 1 0 100%; font-size: 12px; font-weight: 600; color: var(--p-n-700); }
.pv2-prix-pied { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); font-size: 12px; color: var(--p-n-700); }
/* zone rouge */
.pv2-rouge { border: 1px solid var(--p-rouge-100, #f6d6d2); background: var(--p-rouge-50, #fdf3f2); border-radius: 12px; padding: var(--e-3) var(--e-4); display: flex; flex-direction: column; gap: var(--e-3); }
.pv2-annule { display: flex; flex-direction: column; gap: var(--e-2); padding-top: var(--e-2); border-top: 1px solid var(--p-rouge-100, #f6d6d2); }
.pv2-annule > span { font-size: 12px; font-weight: 700; color: var(--p-rouge-600); }
.pv2-annule textarea { width: 100%; box-sizing: border-box; }
.pv2-ns-etat { font-size: 13px; font-weight: 600; }
@container ckpan (max-width: 420px) { .pv2-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv2-chiffres > div:nth-child(3) { grid-column: 1 / -1; } .pv2-ref-client { font-size: 18px; } .pv2-quand b { font-size: 20px; } }
.pv2-rouge .ck-noshow:not(:has(*)) { display: none; }   /* [2.0.82.3] pas d'espace vide sans dossier no-show */
/* [2.0.82.3] nouveau panneau : le formulaire d'annulation ne prend que sa hauteur (sa base flex de 180 px venait d'une mise en ligne) ;
   le bandeau « Offerte au job pool » est une information : fond clair, jamais l'aspect d'un bouton */
.pv2-annule .ck-ecr-annule { flex: none; width: 100%; }
.pv2-annule .ck-ecr-annule .ck-btn-annule { align-self: flex-start; }
.pv2 .ck-dsp-pool { background: var(--p-olive-50, #f3f4ec); color: var(--p-n-900); border: 1px solid var(--p-olive-300, #b9bf9a); font-weight: 500; }

/* ═════════ [2.0.84.1] badges d'options (siège bébé, siège enfant, animal, bagages, attente) et badge € : gabarit unique 16 px, coins 4 px,
   sous la référence de la course ; deux états seulement (bronze à payer, vert payé) ; bulle flottante unique (static/options.js) */
.nb-badges { display: flex; flex-wrap: wrap; gap: 3px; margin: 3px 0 1px; line-height: 0; }
.nb-badge { box-sizing: border-box; flex: 0 0 auto; width: 16px; height: 16px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; background: transparent; cursor: pointer; line-height: 0; }
.nb-pic { box-sizing: border-box; flex: 0 0 16px; width: 16px; height: 16px; padding: 2px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--p-bronze-600); color: var(--p-badge-picto); line-height: 0; }
.nb-badge.nb-paye .nb-pic { background: var(--p-paye-600); }
.nb-pic svg { display: block; width: 12px; height: 12px; fill: currentColor; pointer-events: none; }
.nb-badge:focus-visible { outline: 2px solid var(--p-olive-700); outline-offset: 1px; }
.ck-pan-lig .nb-badges { flex: 1 1 auto; font-size: inherit; color: inherit; }   /* les lignes de panneau étirent leurs span (libellés) : jamais les badges */
.ck-pan-lig .nb-pic, .nb-badges .nb-pic { flex: 0 0 16px; font-size: 0; color: var(--p-badge-picto); }
@media (max-width: 480px) {   /* [CIBLES-40] zone de clic 40 × 40 (règle de Rémy du 01/10), pictogramme toujours 16 px, aligné sur le texte */
  .nb-badges { gap: 0; margin-left: -12px; }
  .nb-badge { width: 40px; height: 40px; }
}
#nb-bulle { position: fixed; z-index: 2147483000; box-sizing: border-box; max-width: min(340px, calc(100vw - 32px)); padding: 6px 10px; background: var(--carte-fond);
  color: var(--p-n-900); border: var(--carte-bord); border-radius: var(--carte-rayon); box-shadow: var(--carte-ombre); font-size: var(--t-libelle); line-height: 1.4;
  pointer-events: none; overflow-wrap: anywhere; }
#nb-bulle[hidden] { display: none; }

/* [2.0.82.4] en-tête du bloc ① : abréviation du partenaire (TFZ, MOZ, KWT) puis numéro de course en gras */
.pv2-ref-ag { font-size: 14px; color: var(--p-n-700); }
.pv2-abr { font-weight: 700; letter-spacing: .04em; color: var(--p-n-900); }
.pv2-num, .pv2-num a { font-weight: 800; color: var(--p-n-900); }
.ck-ch-code { font-variant-numeric: tabular-nums; letter-spacing: .02em; }   /* [2.0.82.4] identifiant du compte CAB9 (E006 · Joseph) */
/* [2.0.82.4] barres de section pleines : chaque titre de bloc (① Client et course, ✈ Vol, ② Chauffeur, ③ Actions, ④ Prix) est un bandeau
   olive sur toute la largeur du panneau, titre crème (contraste 7,1), hauteur compacte ; ce sont les séparateurs : ni bordure ni ombre */
.pv2 .pv2-bloc { border: 0; box-shadow: none; border-radius: 10px; padding: 0 var(--e-4) var(--e-3); overflow: hidden; }
.pv2 .pv2-titre { margin: 0 calc(-1 * var(--e-4)) var(--e-1); padding: 6px var(--e-4); background: var(--p-olive-600); color: var(--p-n-50); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.4; }
.pv2-volb-vide { padding-bottom: var(--e-3); }
.pv2-vol-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2); }
.pv2-vol-num { font-size: 18px; font-weight: 800; color: var(--p-n-900); }
.pv2-vol-tete span { font-size: 13px; color: var(--p-n-700); }
.pv2-vol-lignes { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--p-n-900); font-variant-numeric: tabular-nums; }
.pv2-vol-lignes .vs-ok { color: var(--ck-vert-vif, var(--p-vert-600)); font-weight: 600; } .pv2-vol-lignes .vs-ecart { color: var(--ck-rouge, var(--p-rouge-600)); font-weight: 600; }
.pv2-vol-form { display: flex; flex-direction: column; gap: var(--e-2); padding-top: var(--e-2); border-top: 1px dashed var(--p-n-200, #ddd8cc); }
.pv2-vol-rappel { margin-top: 2px; font-size: 12px; color: var(--p-n-600); }
/* [2.0.82.9 · BLOC VOL] mini panneau d'aéroport (maquette architecte, à l'échelle NAMI : l'heure d'atterrissage = l'heure de PEC de l'en-tête,
   22 px ; codes aéroport 20 px ; le reste 12–14 px) ; couleurs de la charte seulement ; aucune source de données affichée */
.pv2-vol-rappel .ico, .pv2-titre .ico { width: 13px; height: 13px; vertical-align: -2px; }
.pva { display: flex; flex-direction: column; gap: var(--e-2); }
.pva-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-1) var(--e-2); }
.pva-num { font-size: 16px; font-weight: 800; color: var(--p-n-900); letter-spacing: .01em; }
.pva-num span { font-weight: 600; color: var(--p-n-700); }
.pva-pastille { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pva-vert { background: var(--p-vert-50); color: var(--p-vert-600); }
.pva-orange { background: var(--p-orange-50); color: var(--p-orange-600); }
.pva-rouge { background: var(--p-rouge-50); color: var(--p-rouge-600); }
.pva-neutre { background: var(--p-olive-50); color: var(--p-olive-700); }
.pva-gris { background: var(--p-n-100); color: var(--p-n-600); }
.pva-route { display: grid; grid-template-columns: auto minmax(48px, 1fr) auto; align-items: start; gap: var(--e-2); }
.pva-apt b { display: block; font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--p-n-900); letter-spacing: .02em; }
.pva-apt small { display: block; font-size: 12px; color: var(--p-n-600); max-width: 11ch; overflow-wrap: anywhere; }
.pva-arr { text-align: right; }
.pva-trait { position: relative; display: flex; align-items: center; gap: 4px; padding-top: 16px; color: var(--p-olive-600); }
.pva-trait i { flex: 1; height: 0; border-top: 1px solid var(--p-n-300); }
.pva-trait span { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--p-n-600); font-variant-numeric: tabular-nums; }
.pva-avion { width: 14px; height: 14px; flex: none; transform: rotate(45deg); }
.pva-atr { display: flex; align-items: stretch; gap: var(--e-2); }
.pva-encart { flex: 1; min-width: 0; background: var(--p-n-50); border: 1px solid var(--p-n-200); border-radius: var(--carte-rayon); padding: 8px 12px; }
.pva-encart small { display: block; font-size: 12px; font-weight: 600; color: var(--p-n-600); }
.pva-jour { white-space: nowrap; }
.pva-encart b { display: block; font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--p-n-900); font-variant-numeric: tabular-nums; }
.pva-encart s { font-size: 15px; font-weight: 600; color: var(--p-n-500); }
.pva-nouvelle { color: var(--p-orange-600); }
.pva-encart .pva-inconnue { font-size: 14px; font-weight: 600; color: var(--p-n-600); }
.pva-terminal { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; padding: 6px 10px;
  border-radius: var(--carte-rayon); background: var(--p-olive-600); color: var(--p-n-50); }
.pva-terminal small { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pva-terminal b { font-size: 20px; font-weight: 800; line-height: 1.1; }
.pva-chauffeur b { display: block; font-size: 14px; font-weight: 800; color: var(--p-n-900); font-variant-numeric: tabular-nums; }
.pva-chauffeur small { display: block; font-size: 12px; color: var(--p-n-600); }
.pva-chauffeur small.pva-alerte { color: var(--p-orange-600); font-weight: 600; }
.pva-sans { font-size: 14px; font-weight: 600; color: var(--p-n-700); }
.pva-depart { font-size: 13px; color: var(--p-n-700); }
.pva-depart b { color: var(--p-n-900); }
.pva-depart small { display: block; font-size: 12px; color: var(--p-n-600); }
.pv2-volb .pva-modifier { flex: 1 1 auto; }
@container ckpan (max-width: 340px) { .pva-apt b { font-size: 18px; } .pva-encart b { font-size: 20px; } .pva-terminal { min-width: 54px; padding: 6px 8px; } }
.ck-dsp-statuts { display: flex; flex-wrap: wrap; gap: var(--e-2); } .ck-dsp-stbtn2 { flex: 1 1 140px; min-height: 36px; }   /* [2.0.82.4] statuts suivants = vrais boutons */
/* [2.0.82.4] composeur : emoji branché ; dans le panneau, les boutons encore « Bientôt » (pièce jointe, appareil photo) disparaissent */
.cmp-emo { position: relative; display: inline-flex; }
.cmp-emo-pop { position: absolute; bottom: 110%; left: 0; z-index: 20; display: grid; grid-template-columns: repeat(6, 36px); gap: 2px; padding: 6px; background: #fff; border: 1px solid var(--p-n-200, #ddd8cc); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.cmp-emo-pop[hidden] { display: none; }
.cmp-emo-item { width: 36px; height: 36px; border: 0; background: transparent; font-size: 18px; cursor: pointer; border-radius: 6px; }
.cmp-emo-item:hover { background: var(--p-n-50, #f7f5f0); }
#ck-panneau .composer-outils .btn-ico[disabled][title="Bientôt"] { display: none; }
.pv2-vol-form[hidden] { display: none; }   /* [2.0.82.4] le formulaire du vol ne s'ouvre qu'au clic sur Poser / Modifier le vol */

/* ═════════ [2.0.83.3 · PANNEAU FLOTTANT] « Parler à NAMI » : carte flottante en bas à gauche, à droite du menu (jamais sur le panneau
   d'une course, les pop-ups d'alerte ni le bouton Envoyer) ; pastille « NAMI » quand elle est réduite ; tons de la charte seulement */
.nami-flottant { position: fixed; z-index: 60; left: calc(var(--ck-side-w, 0px) + 16px); bottom: 16px; width: min(380px, calc(100vw - var(--ck-side-w, 0px) - 32px));
  max-height: 70vh; display: flex; flex-direction: column; background: var(--carte-fond, #fff); border: var(--carte-bord); border-radius: var(--carte-rayon, 12px);
  box-shadow: var(--carte-ombre); color: var(--p-n-900); overflow: hidden; }
.nami-flottant[hidden], .nami-pastille[hidden], .nami-point[hidden] { display: none; }
.nami-tete { display: flex; align-items: center; gap: var(--e-2, 8px); padding: 8px 8px 8px 14px; background: var(--p-olive-700); color: var(--p-n-0); }
.nami-tete b { font-size: var(--t-sous, 15px); margin-right: auto; }
.nami-tete-lien { color: var(--p-n-0); font-size: 13px; text-decoration: underline; min-height: 40px; display: inline-flex; align-items: center; padding: 0 4px; }
.nami-tete-btn { min-width: 40px; min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--p-n-0); font-size: 18px; line-height: 1; cursor: pointer; }
.nami-tete-btn:hover, .nami-tete-btn:focus-visible { background: var(--p-olive-600); }
.nami-sous { margin: 0; padding: 6px 14px; font-size: 12px; color: var(--p-n-600); background: var(--p-n-50); border-bottom: 1px solid var(--p-n-100); }
.nami-fil { flex: 1 1 auto; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--p-n-0); }
.nami-bulle { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.nami-bulle .nami-liste { margin: 2px 0 4px 18px; padding: 0; list-style: disc; } .nami-bulle .nami-liste li { margin: 1px 0; }   /* [lot F · B5] */
.nami-bulle.nami { white-space: normal; }
.nami-bulle .nami-ecran { margin: 6px 0 2px; } .nami-bulle .nami-ecran img { display: block; max-width: 100%; border: 1px solid var(--p-n-200); border-radius: 8px; }
.nami-bulle .nami-ecran figcaption { font-size: 12px; color: var(--p-n-500); margin-top: 2px; }   /* [lot F · C3] capture de référence */   /* [lot F · B5] bulles de NAMI rendues en lignes (markdown léger) */
.nami-bulle.humain { align-self: flex-end; background: var(--p-olive-50); border: 1px solid var(--p-olive-100); }
.nami-bulle.nami { align-self: flex-start; background: var(--carte-fond, #fff); border: 1px solid var(--p-n-100); }
.nami-bulle time { display: block; margin-top: 2px; font-size: 11px; color: var(--p-n-600); text-align: right; }
.nami-vide { margin: auto; color: var(--p-n-600); font-size: 13px; text-align: center; }
.nami-saisie { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--p-n-100); background: var(--carte-fond, #fff); }
.nami-saisie input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--p-n-200); border-radius: 10px; font: inherit; background: var(--p-n-0); }
.nami-micro { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--p-n-200); background: var(--p-n-0); color: var(--p-olive-700); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.nami-micro svg { width: 20px; height: 20px; }
.nami-envoyer { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--p-olive-700); color: var(--p-n-0); font-weight: 600; cursor: pointer; }
.nami-pastille { position: fixed; z-index: 60; left: calc(var(--ck-side-w, 0px) + 16px); bottom: 16px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 22px;
  background: var(--p-olive-700); color: var(--p-n-0); font-weight: 700; letter-spacing: .04em; box-shadow: var(--carte-ombre); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.nami-point { width: 10px; height: 10px; border-radius: 50%; background: var(--p-olive-100); box-shadow: 0 0 0 2px var(--p-olive-700); }
@media (max-width: 480px) {
  .nami-flottant { left: 0; right: 0; bottom: 0; width: 100%; max-height: 80vh; border-radius: var(--carte-rayon, 12px) var(--carte-rayon, 12px) 0 0; }
  .nami-pastille { left: 12px; bottom: 12px; }
}
.nami-micro.enregistre { background: var(--p-olive-700); color: var(--p-n-0); border-color: var(--p-olive-700); }

/* ═════════ [2.0.82.13 · PANNEAU V2 · BLOC ①] maquette finale validée par Rémy le 08/10 (refonte visuelle seule : ordre des blocs inchangé).
   En-tête : réf. CAB9 en titre 17 px avec copie en un clic ; badge partenaire olive + réf. client 13 px à droite. Ligne PEC 12,5 px grise,
   heure 14 px gras, compte à rebours en couleur (vert, orange à 30 min, rouge dépassée, rien si terminée ou annulée). Adresses sans libellés
   (point plein olive, fil pointillé, point blanc cerclé) à gauche ; carte CLIENT à droite, gabarit partagé avec la carte VÉHICULE (bloc ②). */
.pv2b-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-1) var(--e-3); }
.pv2b-ref { display: inline-flex; align-items: center; gap: 2px; }
.pv2b-lid { display: inline-flex; align-items: center; min-height: 40px; font-size: 17px; font-weight: 800; color: var(--p-n-900); text-decoration: none; font-variant-numeric: tabular-nums; }
.pv2b-lid:hover { text-decoration: underline; }
.pv2b-copie { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--p-olive-600); font-size: 18px; line-height: 1; cursor: pointer; }
.pv2b-copie:hover, .pv2b-copie:focus-visible { background: var(--p-olive-50); }
.pv2b-copie.ok { color: var(--p-vert-600); background: var(--p-vert-50); }
.pv2b-client { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pv2b-abr { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--p-olive-600); color: var(--p-n-50); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.pv2b-refc { font-size: 13px; font-weight: 600; color: var(--p-n-900); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pv2b-pec { font-size: 12.5px; color: var(--p-n-600); line-height: 1.5; }
.pv2b-pec b { font-size: 14px; font-weight: 800; color: var(--p-n-900); font-variant-numeric: tabular-nums; }
.pv2b-rb { font-weight: 700; white-space: nowrap; }
.pv2b-rb-vert { color: var(--p-vert-600); }
.pv2b-rb-orange { color: var(--p-orange-600); }
.pv2b-rb-rouge { color: var(--p-rouge-600); }
.pv2b-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: var(--e-3); align-items: start; }
.pv2b-frise .pv2-pastille { margin-top: 3px; }
.pv2b-frise .pv2-a::before { top: 19px; bottom: -3px; border-left: 2px dotted var(--p-olive-300); }
.pv2b-carte { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; background: var(--p-n-50); border: 1px solid var(--p-n-200); border-radius: var(--carte-rayon); }   /* encart de la charte (profondeur unique, S16) */
.pv2b-carte-t { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--p-olive-600); }
.pv2b-carte-n { font-size: 14px; font-weight: 800; color: var(--p-n-900); overflow-wrap: anywhere; }
.pv2b-carte small { font-size: 12px; color: var(--p-n-600); }
.pv2b-tel { font-size: 13px; color: var(--p-n-900); font-variant-numeric: tabular-nums; }
.pv2b-form { margin: 0; }
.pv2b-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 40px; margin-top: 6px; padding: 0 12px; box-sizing: border-box;
  border: 0; border-radius: 8px; background: var(--p-olive-600); color: var(--p-n-50); font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.pv2b-btn:hover { background: var(--p-olive-700); }
.pv2b-btn:disabled { background: var(--p-n-100); color: var(--p-n-600); cursor:help; outline: 1px dashed var(--p-n-300); outline-offset: -1px; }
.pv2b-btn .ico { width: 14px; height: 14px; }
@container ckpan (max-width: 400px) { .pv2b-corps { grid-template-columns: minmax(0, 1fr); } }

/* ═════════ [2.0.82.14 · PANNEAU V2 · CARTE VÉHICULE] bloc ② : chauffeur à gauche, carte VÉHICULE à droite (gabarit .pv2b-carte de la carte
   CLIENT) : modèle + couleur, plaque · catégorie, pastille de conformité verte (la catégorie couvre la demande) ou orange (« Van demandé ») ;
   fiche véhicule inconnue = pas de carte, catégorie inconnue = pas de pastille. */
.pv2c-corps.pv2c-avec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: var(--e-3); align-items: start; }
.pv2c-ch { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.pv2c-conf { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pv2c-conf .ico { width: 13px; height: 13px; flex: none; }
.pv2c-ok { background: var(--p-vert-50); color: var(--p-vert-600); }
.pv2c-ecart { background: var(--p-orange-50); color: var(--p-orange-600); }
@container ckpan (max-width: 400px) { .pv2c-corps.pv2c-avec { grid-template-columns: minmax(0, 1fr); } }

/* ═════════ [2.0.82.15 · PANNEAU V2 · PRIX] trois cases : Prix client, Prix chauffeur, Marge (fond ambre, montant + pourcentage) ; mêmes valeurs */
.pv2-chiffres > .pv2p-case { border: 1px solid var(--p-n-200); border-radius: var(--carte-rayon); }
.pv2-chiffres > .pv2p-marge { background: var(--p-orange-50); border-color: var(--p-orange-200); }
.pv2-chiffres > .pv2p-marge small { color: var(--p-orange-600); }
.pv2-chiffres > .pv2p-marge em { color: var(--p-n-900); font-weight: 700; }
@container ckpan (max-width: 340px) { .pv2-chiffres b { font-size: 17px; } }   /* [2.0.82.15] 320 px : « 102,20 € » sur une ligne */

/* [2.0.82.20 · RAISON AU SURVOL] règle de Rémy du 08/10 : plus jamais de curseur « interdit » ; un bouton désactivé montre un curseur d'aide
   et sa raison au survol (title posé par le gabarit ou par le filet de la barre latérale). */
button:disabled, input[type=submit]:disabled, .ck-btn-grise, [aria-disabled="true"] { cursor: help !important; }
/* [2.0.82.20] un bouton cliquable n'a jamais l'air éteint : fond blanc, texte et bord olive, main au survol ; seul le bouton désactivé est grisé */
#ck-panneau .ck-btn-pan:not(:disabled):not(.actif), .ck-btn-pan:not(:disabled):not(.actif) { background: var(--p-n-0); color: var(--p-olive-700); border: 1px solid var(--p-olive-300); cursor: pointer; }
#ck-panneau .ck-btn-pan:not(:disabled):not(.actif):hover, .ck-btn-pan:not(:disabled):not(.actif):hover { background: var(--p-olive-50); }

/* ═════════ [2.0.82.23 · ACTIONS] pastilles « Note bureau » / « Note chauffeur » franchement cliquables (main, 40 px) ; enfoncée = zone ouverte.
   Bandeau « Conversation à ouvrir » de WhatsApp chauffeurs (bouton « Message au chauffeur » du panneau). */
.pv2-pilules { display: flex; flex-wrap: wrap; gap: 8px; }
.pv2-pilule { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--p-olive-300);
  background: var(--p-n-0); color: var(--p-olive-700); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pv2-pilule:hover:not(:disabled) { background: var(--p-olive-50); }
.pv2-pilule[aria-pressed="true"] { background: var(--p-olive-600); border-color: var(--p-olive-600); color: var(--p-n-0); }
.pv2-pilule:disabled { background: var(--p-n-100); border-color: var(--p-n-200); color: var(--p-n-600); }
.pv2-pilule:focus-visible { outline: 2px solid var(--p-olive-600); outline-offset: 2px; }
.drv-cible { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px; border-radius: var(--carte-rayon); border: 1px solid var(--p-olive-300); background: var(--p-n-0); color: var(--p-n-900); }
.drv-cible-t { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--p-olive-700); }
.drv-cible-n { font-size: 16px; }
.drv-cible-num { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.drv-cible-c { font-size: 12px; color: var(--p-n-600); }

/* ═════════ [2.0.82.24 · DISPATCH V3] barre verte, puce du dispatch auto collée au titre, statut à droite ; ligne discrète de l'indemnité
   (plus d'encart orange) ; ligne machine ; « Course attribuée » grisé + « Désattribuer » rouge ; UN « Statut suivant » aux couleurs du
   statut proposé (palette des statuts du dashboard) ; « Vendre sur WhatsApp » : bulle verte (jamais le logo officiel). */
.pv2d { display: flex; flex-direction: column; gap: 8px; }
.pv2d-barre { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--p-vert-600); color: var(--p-n-0); }
.pv2d-titre { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pv2d-auto { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--p-n-0); color: var(--p-vert-600); font-size: 12px; font-weight: 700; }
.pv2d-auto-off { color: var(--p-n-700); }
.pv2d-barre .pv2d-statut { margin-left: auto; }
.pv2d-indem { font-size: 12px; color: var(--p-n-700); }
.pv2d-indem b { color: var(--p-n-900); }
.pv2d-machine, .pv2d-ligne { font-size: 12.5px; color: var(--p-n-700); }
.pv2d-machine .ico { width: 14px; height: 14px; vertical-align: -2px; color: var(--p-olive-600); }
.pv2d-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.pv2d-form { margin: 0; display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pv2d-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid transparent; }
.pv2d-plein { background: var(--p-olive-600); color: var(--p-n-0); border-color: var(--p-olive-600); }
.pv2d-contour { background: var(--p-n-0); color: var(--p-olive-700); border-color: var(--p-olive-300); }
.pv2d-contour:hover:not(:disabled) { background: var(--p-olive-50); }
.pv2d-rouge { background: var(--p-rouge-600); color: var(--p-n-0); border-color: var(--p-rouge-600); }
.pv2d-btn:disabled, .pv2d-attribuee { background: var(--p-n-100); color: var(--p-n-600); border-color: var(--p-n-200); }
.pv2d-choix > summary { list-style: none; }
.pv2d-choix > summary::-webkit-details-marker { display: none; }
.pv2d-offrir select { min-height: 40px; border: 1px solid var(--p-n-200); border-radius: 10px; padding: 0 8px; font: inherit; font-size: 13px; background: var(--p-n-0); }
.pv2d-suivant { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pv2d-suivant-t { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pv2d-suivant:disabled { background: var(--p-n-100); color: var(--p-n-600); border-color: var(--p-n-200); }
.pv2d-vendre { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--p-olive-300); background: var(--p-n-0); color: var(--p-olive-700); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pv2d-vendre:hover { background: var(--p-olive-50); }
.pv2d-bulle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--p-vert-600); color: var(--p-n-0); }
.pv2d-bulle .ico { width: 14px; height: 14px; fill: var(--p-n-0); }
.pv2d .pv2d-suivant.ck-st:disabled { background: var(--p-n-100); color: var(--p-n-600); border-color: var(--p-n-200); }   /* grisé l'emporte sur la palette */
.pv2d-suivant .ico { transform: rotate(-90deg); }

/* ═════════ [2.0.82.25 · PAIEMENT & OPTIONS] une seule liste d'objets payables ; état en tête ; « Ajouter » et « Créer un lien de paiement » en pastilles. */
.pv2e { display: flex; flex-direction: column; gap: 8px; }
.pv2e-etat { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--p-n-900); }
.pv2e-point { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--p-vert-600); }
.pv2e-point.pv2e-du { background: var(--p-orange-600); }
.pv2e-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pv2e-l > .ck-opt-l, .pv2e-l > .ck-pay-l { margin: 0; }
.pv2e-ajout > summary { list-style: none; }
.pv2e-ajout > summary::-webkit-details-marker { display: none; }
.pv2e-bouton { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--p-olive-300); background: var(--p-n-0); color: var(--p-olive-700); font-size: 13px; font-weight: 700; cursor: pointer; }
.pv2e-bouton:hover { background: var(--p-olive-50); }
.pv2e-ajout[open] > .pv2e-bouton { background: var(--p-olive-600); border-color: var(--p-olive-600); color: var(--p-n-0); }
.pv2e-choix { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0; font-size: 13px; }
.pv2e-choix label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; }
.pv2e-supp input[type=number] { width: 8rem; }
.pv2e-ajout.ck-pay-lien > .ck-pay-libre { margin-top: 8px; }
/* [2.0.82.28 · CIBLES] bloc ③ du panneau : toute cible cliquable à 40 px au moins (boutons, listes, champs, choix lien / à bord, « voir plus ») */
#ck-panneau .pv2-actions .ck-btn-pan, #ck-panneau .pv2-actions select, #ck-panneau .pv2-actions input[type=number], #ck-panneau .pv2-actions input[type=text],
#ck-panneau .pv2-actions .ck-pay-f select, #ck-panneau .pv2-actions .ck-pay-f input[type=number], #ck-panneau .pv2-actions .ck-pay-f input[type=text] { min-height: 40px; box-sizing: border-box; }
#ck-panneau .pv2-actions .ck-opt-mode label, #ck-panneau .pv2-actions .ck-note-plus { min-height: 40px; display: inline-flex; align-items: center; }
/* [2.0.82.28] barre DISPATCH étroite (téléphone, 320 px) : la barre passe à la ligne, les puces ne se coupent jamais */
.pv2d-barre { flex-wrap: wrap; row-gap: 6px; }
.pv2d-barre .pv2d-auto, .pv2d-barre .pv2d-statut, .pv2d-suivant-t { white-space: nowrap; hyphens: none; -webkit-hyphens: none; }
.pv2d-suivant { flex-wrap: wrap; text-align: left; row-gap: 2px; }

/* [2.0.82.28 · NOMS LONGS] liste de la messagerie : un nom long passe à la ligne au lieu d'être coupé (S16 « texte tronqué b.conv-nom »,
   défaut connu des noms longs, toléré jusqu'ici à 1366 ; constaté aussi à 1000 et 1920 zoom 150 avec « PegazussGreen VTC ») */
.conv-l1 .conv-nom { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; min-width: 0; line-height: 1.25; }
/* [2.0.82.30 · STATUT LONG] barre DISPATCH étroite (320 px) : la puce de statut passe à la ligne (mots entiers) au lieu de sortir de la barre
   (« Arrivé au point de rendez-vous », S16 « ck-st st-Arrived pv2d-statut hors parent ») ; la puce « Auto · mode », courte, reste sur une ligne */
.pv2d-barre .pv2d-statut { white-space: normal; max-width: 100%; min-width: 0; text-align: left; }
/* [2.0.82.31] bandeau « Conversation à ouvrir » : bouton « Copier le texte » (40 px, contour olive) */
.drv-cible-copie { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--p-olive-300); background: var(--p-n-0); color: var(--p-olive-700); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.drv-cible-copie:hover { background: var(--p-olive-50); }

/* ═════════ [2.0.82.33 · WHATSAPP CHAUFFEURS PLEIN ÉCRAN] la projection occupe toute la hauteur et toute la largeur à côté du menu ; [2.0.82.39] plus aucune ligne au-dessus */
.page-chauffeurs_wa .contenu { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.drv-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 4px 6px 6px; }
.drv-cadre { flex: 1 1 auto; min-height: 0; border: 1px solid var(--p-n-200); border-radius: var(--carte-rayon); overflow: hidden; background: var(--p-n-900); }
.drv-cadre iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--p-n-900); }
.drv-cible { flex: none; }
@media (max-width: 899.98px) { .drv-page { padding: 2px; gap: 2px; } .drv-cadre { border-radius: 0; border: 0; } }

/* [2.0.140.2 · CS JOUR 1] Paramètres → NAMI → Véhicules et lien « Compléter la ligne » : uniquement par les jetons de la charte */
.vh-ctl{ min-height:calc(var(--e-6) + var(--e-2)); }
.vh-l{ width:15em; max-width:100%; } .vh-m{ width:13em; max-width:100%; } .vh-s{ width:6em; } .vh-plein{ max-width:100%; }
.vh-lien-btn{ display:inline-flex; align-items:center; padding:0 var(--e-3); }
.vh-pastille{ min-width:12em; } .vh-intro{ max-width:70em; } .vh-inline{ display:inline; } .vh-coupe{ overflow-wrap:anywhere; }
.vh-defile{ overflow-x:auto; } .vh-table{ min-width:760px; }
.vh-ong-actif{ background:var(--nuit); border-color:var(--nuit); }
.vh-completer{ display:inline-block; margin-top:var(--e-1); }
.vh-p{ width:18em; max-width:100%; }
/* [2.0.140.2] pastille « Business · SUV » : deux segments (catégorie, « · pastille ») ; la césure de la charte (§ mots) s'applique */
.ctx-vdem{ font-size:var(--t-libelle); margin:0 0 var(--e-2); } .ctx-vdem small{ color:var(--p-n-600); }

/* [2.0.82.43] « Rescanner » rendu (direction) à sa place de 2.0.111, en haut à droite au-dessus de la projection ; consigne si le micro est
   refusé ; onglet séparé : la projection prend toute la fenêtre. Jetons de la charte seulement (couleurs, espacements, rayon, typographie) */
.drv-outils { flex: none; display: flex; justify-content: flex-end; }
.drv-etat-lien { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--e-3); border-radius: var(--carte-rayon); border: 1px solid var(--p-olive-300); background: var(--p-n-0); color: var(--p-olive-700); font-size: var(--t-libelle); font-weight: var(--t-graisse-libelle); text-decoration: none; }
.drv-etat-lien:hover { background: var(--p-olive-50); }
.drv-micro-avis { flex: none; padding: var(--e-2) var(--e-3); border-radius: var(--carte-rayon); border: 1px solid var(--p-orange-200); background: var(--p-orange-50); color: var(--p-orange-600); font-size: var(--t-libelle); line-height: 1.4; }
.drv-micro-avis[hidden] { display: none; }
body.drv-onglet { margin: 0; height: 100vh; display: flex; background: var(--p-n-900); }
.drv-page-onglet { flex: 1 1 auto; height: 100vh; padding: 0; gap: 0; }
.drv-page-onglet .drv-cadre { border: 0; border-radius: 0; }

/* [2.0.82.52 · A1 · décision Rémy R1 14/10] WhatsApp chauffeurs BORD À BORD (CS et direction), /chauffeurs seulement : plus de plafond de
   largeur, de marge, de cadre ni d'arrondi autour de la projection ; fond de la charte derrière la projection pendant son chargement. Aucun
   gabarit touché ; l'onglet séparé est déjà plein écran. Jusqu'à +36 % de pixels projetés : fluidité mesurée avec F1. */
.page-chauffeurs_wa .ck-main > .contenu { max-width: none; margin: 0; padding: 0; }
.page-chauffeurs_wa .drv-page { padding: 0; gap: 0; }
.page-chauffeurs_wa .drv-cadre { border: 0; border-radius: 0; background: var(--p-n-50); }
.page-chauffeurs_wa .drv-cadre iframe { background: var(--p-n-50); }

/* [2.0.82.53 · B1 · décisions Rémy R2 R3, architecte A12 14/10] « Rescanner » : sous-entrée du menu (direction, /chauffeurs seulement) et panneau
   de consignes FIXE, à gauche sur le menu, hors du flux de la page : la projection garde sa taille et sa place ; pas de voile (code net et
   cliquable). Largeur clamp(280px, 22vw, 360px) : s'arrête avant la carte de connexion de WhatsApp à 1920 et 1366 (cadrage §3.3). */
.ck-sidebar .ck-nav a.ck-item.ck-sous { gap: 8px; padding: 4px 12px 4px 34px; font-size: var(--t-libelle); font-weight: 500; opacity: .86; }
.ck-sidebar .ck-nav a.ck-item.ck-sous svg { width: 15px; height: 15px; flex: 0 0 15px; }
.ck-sidebar .ck-nav a.ck-item.ck-sous:hover, .ck-sidebar .ck-nav a.ck-item.ck-sous:focus-visible, .ck-sidebar .ck-nav a.ck-item.ck-sous[aria-expanded="true"] { opacity: 1; }
@media (min-width: 1100px) { .ck-sidebar .ck-nav a.ck-item.ck-sous { min-height: 32px; } }
body.ck-side-replie .ck-sidebar .ck-nav a.ck-item.ck-sous { padding: 4px 0; }
@media (min-width: 900px) and (max-width: 1099.98px) {
  .ck-sidebar .ck-nav a.ck-item.ck-sous { padding: 4px 0; font-size: 0; }
  .ck-sidebar .ck-nav a.ck-item.ck-sous svg { width: 15px; height: 15px; flex-basis: 15px; }
}
.drv-rescan[hidden] { display: none; }
.drv-rescan { position: fixed; z-index: 85; left: var(--e-3); top: calc(var(--drv-rescan-haut, 64px) + var(--e-3));
  width: clamp(280px, 22vw, 360px); max-width: calc(100vw - 2 * var(--e-3)); max-height: calc(100dvh - var(--drv-rescan-haut, 64px) - 2 * var(--e-3)); overflow: hidden;
  display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4); box-sizing: border-box;
  background: var(--p-n-0); color: var(--p-n-900); border: 1px solid var(--p-olive-300); border-radius: var(--carte-rayon);
  box-shadow: 0 14px 36px rgba(30, 30, 28, .30); }
.drv-rescan-corps { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--e-3); }
.drv-rescan-tete { display: flex; align-items: center; gap: var(--e-2); }
.drv-rescan-t { margin: 0; flex: 1 1 auto; font-size: var(--t-sous-titre); font-weight: var(--t-graisse-titre); color: var(--p-olive-800); outline: none; }
.drv-rescan-num { margin: 0; font-size: var(--t-libelle); color: var(--p-n-600); font-variant-numeric: tabular-nums; }
.drv-rescan-ou { margin: 0; padding: var(--e-2) var(--e-3); border-radius: var(--carte-rayon); background: var(--p-olive-50);
  color: var(--p-olive-800); font-size: var(--t-libelle); font-weight: var(--t-graisse-libelle); }
.drv-rescan-etapes { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--e-2); font-size: var(--t-corps); line-height: 1.45; }
.drv-rescan-note { margin: 0; font-size: var(--t-libelle); color: var(--p-n-600); line-height: 1.4; }
.drv-rescan-etroit { display: none; }
@media (max-width: 899.98px) { .drv-rescan-large { display: none; } .drv-rescan-etroit { display: inline; } }
.drv-rescan-retour { flex: none; min-height: 44px; padding: 0 var(--e-4); border-radius: var(--carte-rayon); border: 1px solid var(--p-olive-700);
  background: var(--p-olive-700); color: var(--p-n-0); font: inherit; font-size: var(--t-corps); font-weight: var(--t-graisse-libelle); cursor: pointer; }
.drv-rescan-retour:hover { background: var(--p-olive-800); }
.drv-rescan-retour:focus-visible, .ck-sous:focus-visible { outline: 3px solid var(--p-olive-300); outline-offset: 2px; }

/* [2.0.82.51 · B4 · décision Rémy R10 14/10] avis SUPERPOSÉS à la projection (jamais dans la colonne : l'iframe garde sa taille) ; verrou entre
   onglets : « déjà ouvert », « en pause », « l'autre onglet a été fermé », « autre poste ». Jetons de la charte (voile = --p-n-900 à 45 %, comme .modale) */
.drv-cadre { position: relative; }
.drv-sur { position: absolute; z-index: 4; top: var(--e-3); left: var(--e-3); right: var(--e-3); display: flex; align-items: center; gap: var(--e-3); box-shadow: var(--carte-ombre); }
.drv-sur > span { flex: 1 1 auto; min-width: 0; }
.drv-cadre > .drv-cible { position: absolute; z-index: 4; left: var(--e-3); bottom: var(--e-3); max-width: min(620px, calc(100% - 2 * var(--e-3))); box-shadow: 0 8px 24px rgba(30, 30, 28, .25); }
.drv-cadre > .drv-cible[hidden], .drv-sur[hidden] { display: none; }
.drv-sur-x { flex: none; min-height: 40px; padding: 0 var(--e-3); border-radius: var(--carte-rayon); border: 1px solid var(--p-n-300); background: var(--p-n-0); color: var(--p-n-900); font: inherit; font-size: var(--t-libelle); font-weight: var(--t-graisse-libelle); cursor: pointer; }
.drv-sur-x:hover { background: var(--p-n-50); }
.drv-micro-oui { flex: none; min-height: 40px; padding: 0 var(--e-3); border-radius: var(--carte-rayon); border: 1px solid var(--p-olive-700); background: var(--p-olive-700); color: var(--p-n-0); font: inherit; font-size: var(--t-libelle); font-weight: var(--t-graisse-libelle); cursor: pointer; }
.drv-micro-oui:hover { background: var(--p-olive-800); }
.drv-micro-oui[hidden] { display: none; }
.drv-micro-oui:focus-visible { outline: 3px solid var(--p-olive-300); outline-offset: 2px; }
/* [WA-PROJECTION · défaut visible, capture 390 du 06/11] téléphone : le texte du bandeau micro était écrasé sur 5 lignes à côté des boutons → texte sur toute la largeur, boutons dessous */
@media (max-width: 520px) { .drv-micro-avis.drv-sur { flex-wrap: wrap; } .drv-micro-avis.drv-sur > span { flex-basis: 100%; } }
.drv-v { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: var(--e-4); background: rgba(30, 30, 28, .45); }
.drv-v[hidden] { display: none; }
.drv-v-boite { width: min(520px, 100%); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5); border-radius: var(--carte-rayon); background: var(--p-n-0); box-shadow: 0 14px 36px rgba(30, 30, 28, .30); }
.drv-v-boite h2 { margin: 0; font-size: var(--t-sous-titre); font-weight: var(--t-graisse-titre); color: var(--p-olive-800); }
.drv-v-boite p { margin: 0; font-size: var(--t-corps); line-height: 1.45; color: var(--p-n-600); }
.drv-v-boite p.drv-v-aide { padding: var(--e-2) var(--e-3); border-radius: var(--carte-rayon); background: var(--p-olive-50); color: var(--p-olive-800); font-weight: var(--t-graisse-libelle); }
.drv-v-boite p.drv-v-aide[hidden] { display: none; }
.drv-v-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2); }
.drv-v-actions button { min-height: 44px; padding: 0 var(--e-4); border-radius: var(--carte-rayon); font: inherit; font-size: var(--t-corps); font-weight: var(--t-graisse-libelle); cursor: pointer; }
.drv-v-b1 { border: 1px solid var(--p-olive-700); background: var(--p-olive-700); color: var(--p-n-0); }
.drv-v-b1:hover { background: var(--p-olive-800); }
.drv-v-b2 { border: 1px solid var(--p-olive-300); background: var(--p-n-0); color: var(--p-olive-700); }
.drv-v-b2:hover { background: var(--p-olive-50); }
.drv-v-actions button:focus-visible, .drv-sur-x:focus-visible { outline: 3px solid var(--p-olive-300); outline-offset: 2px; }
.drv-v-poste .drv-v-boite { border: 2px solid var(--p-orange-200); }
.drv-v-poste .drv-v-boite h2 { color: var(--p-orange-600); }
.drv-v-actions .drv-v-lien { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e-4); border-radius: var(--carte-rayon); font-size: var(--t-corps); font-weight: var(--t-graisse-libelle); text-decoration: none; }   /* [2.0.82.56 · D3a] */

/* [2.0.142.1] table des pastilles : groupe introuvable en orange (jetons de la charte) */
.vh-table-p{ min-width:560px; } .vh-orange td{ background:var(--p-orange-50); } .vh-etat-orange{ color:var(--p-orange-600); font-weight:600; }
.vh-f{ display:none; } .vh-sel-p{ width:100%; max-width:24em; }