/* =============================================================================
   PALETTE UNIFIÉE (2026-08) — un seul paradigme teal/navy sur TOUS les écrans.
   -----------------------------------------------------------------------------
   Décision produit : front + portail partagent la palette mobile
   (--cdb-mobile-* dans cdb-mobile-ux-2026.css). L’orange historique
   (--c26-* / --cdb-* / --cdb26-* / --ck-*) ne doit plus apparaître hors
   CTAs commerce (amber / .cdb-btn--commerce).

   Cette couche est chargée EN DERNIER dans layouts/cdb.blade.php (après
   container / polish / download / mobile-ux). Remappe les tokens orange →
   teal/navy sans ajouter une 5e guerre de !important sur le layout.
   Les !important ci-dessous concernent uniquement les CTA (spécificité
   vs cdb-mobile-ux / polish), pas le shell tactile.
   tokens orange → teal/navy, à tous les breakpoints (plus seulement ≥1367px) :
     - teal  = action produit
     - amber = commerce uniquement (règles .cdb-btn--commerce ci-dessous)
     - navy  = fonds / surfaces
     - ink   = texte, copy = texte atténué, stroke = bordures

   Les variables --cdb-mobile-* basculent déjà en thème clair
   (html[data-theme="light"]).
   ============================================================================= */

/* ---------------------------------------------------------------------
   1) REMAPPAGE DES TOKENS — niveau racine + body.
   On pose les tokens sur html[data-theme] ET sur chaque classe de body
   pour gagner la guerre de spécificité contre cdb-2026-theme-lock.css
   (qui définit encore l'orange historique).
   --------------------------------------------------------------------- */
:root,
html[data-theme="dark"],
html[data-theme="light"],
body.cdb-body,
body.cdb26-site,
body.cdb-marketing-charter,
body.cdb-user-dashboard-2026,
body.cdb-workspace-2026,
body.cdb-cockpit,
body.cdb-cockpit--driver,
body.cdb-cockpit--admin,
body.cdb-cockpit--recruiter {
    /* — Accent : tout en teal (produit + commerce) — */
    --cdb-accent: var(--cdb-mobile-teal);
    --cdb-accent-2: var(--cdb-mobile-teal-strong);
    /* WCAG 2.1 : teal Code import #006D77 + blanc ≥ AA. Ancien #16878b
       (4.31, AA-large seulement) n'est plus la source. Hover / CTA plein
       restent sur teal-strong #0f7276 (blanc = 5.69 → AA plein). */
    --cdb-mobile-teal-strong: #0f7276;   /* renforcé pour contraste AA */
    --cdb-cta: var(--cdb-mobile-teal-strong);
    --cdb-cta-hover: color-mix(in srgb, var(--cdb-mobile-teal-strong) 88%, #000000);
    --cdb-accent-dim: color-mix(in srgb, var(--cdb-mobile-teal) 13%, transparent);
    --cdb-on-cta: #ffffff;
    --cdb-on-primary: #ffffff;

    --c26-orange: var(--cdb-mobile-teal);
    --c26-orange-strong: var(--cdb-mobile-teal-strong);
    --c26-accent: var(--cdb-mobile-teal);

    --cdb26-accent: var(--cdb-mobile-teal);
    --cdb26-accent-2: var(--cdb-mobile-teal-strong);
    --cdb26-accent-ink: #ffffff;
    --cdb26-portal-accent: var(--cdb-mobile-teal);
    --cdb26-portal-orange: var(--cdb-mobile-teal);
    --cdb26-portal-orange-strong: var(--cdb-mobile-teal-strong);
    --cdb26-portal-orange-soft: color-mix(in srgb, var(--cdb-mobile-teal) 13%, transparent);

    --ck-accent: var(--cdb-mobile-teal);
    --ck-accent-strong: var(--cdb-mobile-teal-strong);
    --ck-glow: color-mix(in srgb, var(--cdb-mobile-teal) 14%, transparent);

    --cdbm-accent: var(--cdb-mobile-teal);

    /* Dégradé de marque (consommé par .cdb-btn--cta de base) */
    --ds-gradient-brand: linear-gradient(
        135deg,
        var(--cdb-mobile-teal) 0%,
        color-mix(in srgb, var(--cdb-mobile-teal) 78%, #ffffff) 48%,
        var(--cdb-mobile-teal-strong) 100%
    );

    /* — Fonds / surfaces : navy — */
    --cdb-bg: var(--cdb-mobile-navy);
    --cdb-bg-elevated: var(--cdb-mobile-navy-soft);
    --cdb-bg-card: var(--cdb-mobile-navy-soft);
    --cdb-surface: var(--cdb-mobile-slate);

    --c26-bg: var(--cdb-mobile-navy);
    --c26-bg-soft: var(--cdb-mobile-navy-soft);
    --c26-surface: var(--cdb-mobile-navy-soft);
    --c26-surface-2: var(--cdb-mobile-slate);

    --cdb26-bg: var(--cdb-mobile-navy);
    --cdb26-surface: var(--cdb-mobile-navy-soft);
    --cdb26-surface-2: var(--cdb-mobile-slate);

    --ck-bg: var(--cdb-mobile-navy);
    --ck-bg-deep: var(--cdb-mobile-navy);
    --ck-rail: var(--cdb-mobile-navy-soft);
    --ck-panel: var(--cdb-mobile-navy-soft);
    --ck-panel-2: var(--cdb-mobile-slate);

    --cdb26-portal-bg: var(--cdb-mobile-navy);
    --cdb26-portal-bg-deep: var(--cdb-mobile-navy);
    --cdb26-portal-sidebar-bg: var(--cdb-mobile-navy-soft);
    --cdb26-portal-panel: var(--cdb-mobile-navy-soft);
    --cdb26-portal-panel-raised: var(--cdb-mobile-slate);
    --cdb26-portal-input: var(--cdb-mobile-navy-soft);

    /* — Texte — */
    --cdb-text: var(--cdb-mobile-ink);
    --c26-text: var(--cdb-mobile-ink);
    --cdb26-ink: var(--cdb-mobile-ink);
    --ck-ink: var(--cdb-mobile-ink);
    --cdb26-portal-text: var(--cdb-mobile-ink);

    --cdb-muted: var(--cdb-mobile-copy);
    --c26-muted: var(--cdb-mobile-copy);
    --cdb26-muted: var(--cdb-mobile-copy);
    --ck-muted: var(--cdb-mobile-copy);
    --cdb26-portal-muted: var(--cdb-mobile-copy);
    --cdb26-portal-faint: color-mix(in srgb, var(--cdb-mobile-copy) 72%, transparent);
    --ck-faint: color-mix(in srgb, var(--cdb-mobile-copy) 72%, transparent);

    /* — Bordures — */
    --cdb-border: var(--cdb-mobile-stroke);
    --c26-line: var(--cdb-mobile-stroke);
    --c26-line-strong: color-mix(in srgb, var(--cdb-mobile-stroke) 62%, var(--cdb-mobile-ink));
    --cdb26-line: var(--cdb-mobile-stroke);
    --cdb26-line-strong: color-mix(in srgb, var(--cdb-mobile-stroke) 62%, var(--cdb-mobile-ink));
    --ck-line: var(--cdb-mobile-stroke);
    --cdb26-portal-line: var(--cdb-mobile-stroke);
    --cdb26-portal-line-soft: color-mix(in srgb, var(--cdb-mobile-stroke) 55%, transparent);
}

/* ---------------------------------------------------------------------
   2) BOUTONS PRIMAIRES / CTA — teal + texte blanc.
   cdb-2026-theme-lock.css pose un dégradé orange codé en dur sur
   .cdb-btn--cta/.cdb-btn--primary (et sur les routes auth) : on le
   surclasse ici avec le teal et la bonne couleur de texte.
   --------------------------------------------------------------------- */
body.cdb26-site .cdb-btn--cta,
body.cdb26-site .cdb-btn--primary,
.cdb26-page .cdb-btn--cta,
.cdb26-page .cdb-btn--primary,
.cdb26-shell .cdb-btn--cta,
.cdb26-shell .cdb-btn--primary,
body.cdb-route-login .cdb-btn--primary,
body.cdb-route-login .cdb-btn--cta,
body.cdb-route-admin-login .cdb-btn--primary,
body.cdb-route-admin-login .cdb-btn--cta,
body[class*="cdb-route-portal-classic-"] .cdb-btn--primary,
body[class*="cdb-route-portal-classic-"] .cdb-btn--cta,
body.cdb-route-portal-register .cdb-btn--primary,
body.cdb-route-portal-register .cdb-btn--cta,
.cdb-user-dashboard .cdb-btn--primary,
.cdb-user-dashboard .cdb-btn--cta,
.cdb26-shell .cdb26-cta,
.cdb26-page .cdb26-cta,
.cdb26-shell a.cdb26-btn--primary,
.cdb26-page a.cdb26-btn--primary {
    border-color: color-mix(in srgb, var(--cdb-mobile-teal-strong) 68%, transparent) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--cdb-mobile-teal-strong) 82%, #ffffff),
        var(--cdb-mobile-teal-strong)
    ) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 35px -18px color-mix(in srgb, var(--cdb-mobile-teal-strong) 85%, transparent) !important;
}

body.cdb26-site .cdb-btn--cta:hover,
body.cdb26-site .cdb-btn--primary:hover,
.cdb26-shell .cdb26-cta:hover,
.cdb26-page .cdb26-cta:hover {
    background: var(--cdb-mobile-teal-strong) !important;
}

/* Bouton nav Premium : rester orange (commerce), pas teal produit. */
body.cdb26-site .cdb-nav--2026 .cdb-nav__signup-btn.cdb-btn--cta,
body.cdb26-site .cdb-nav--2026 .cdb-nav__signup-btn.cdb-btn--commerce {
    background: linear-gradient(180deg, #ffb347 0%, #f58216 55%, #e86f00 100%) !important;
    color: #1a0f03 !important;
    box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--cdb-mobile-amber, #f0a83a) 85%, transparent) !important;
}

/* Hero + tous les CTA commerce (Premium) : amber, jamais teal. */
body.cdb26-site .cdb-btn--cta.cdb-btn--commerce,
body.cdb26-site .cdb-btn--commerce,
body.cdb26-site [data-cdb-hero-primary-cta].cdb-btn--commerce,
html[data-skin="cockpit"] body.cdb26-site .cdb-hero-stage__actions .cdb-btn--commerce {
    border-color: color-mix(in srgb, #f0a83a 76%, transparent) !important;
    background: linear-gradient(180deg, #ffb347 0%, #f58216 55%, #e86f00 100%) !important;
    color: #1a0f03 !important;
    box-shadow: 0 12px 28px -12px rgba(240, 168, 58, 0.55) !important;
}

body.cdb26-site .cdb-btn--cta.cdb-btn--commerce:hover,
body.cdb26-site .cdb-btn--commerce:hover,
body.cdb26-site [data-cdb-hero-primary-cta].cdb-btn--commerce:hover,
html[data-skin="cockpit"] body.cdb26-site .cdb-hero-stage__actions .cdb-btn--commerce:hover {
    background: linear-gradient(180deg, #f9c36a, #e89528) !important;
    color: #1a1000 !important;
}

/* CTA section finale home : commerce = amber ; autres = teal produit renforcé. */
body.cdb26-site .cdb-home-section--cta .cdb-btn--cta:not(.cdb-btn--commerce) {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cdb-mobile-teal-strong) 82%, #ffffff),
        var(--cdb-mobile-teal-strong)
    ) !important;
    border: 1px solid color-mix(in srgb, var(--cdb-mobile-teal-strong) 76%, transparent) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--cdb-mobile-teal-strong) 55%, transparent) !important;
}

body.cdb26-site .cdb-home-section--cta .cdb-btn--commerce {
    background: linear-gradient(180deg, #f7b554, #f0a83a) !important;
    border: 1px solid color-mix(in srgb, #f0a83a 76%, transparent) !important;
    color: #251701 !important;
    box-shadow: 0 12px 28px -12px rgba(240, 168, 58, 0.55) !important;
}

/* ---------------------------------------------------------------------
   3) HERO HOME — CTA teal (mobile) au lieu de l'orange desktop.
   --------------------------------------------------------------------- */
html[data-skin="cockpit"] body.cdb26-site .cdb-hero__cta-primary,
body.cdb26-site .cdb-hero__cta-primary {
    border-color: color-mix(in srgb, var(--cdb-mobile-teal-strong) 65%, #ffffff 10%) !important;
    background: linear-gradient(180deg, var(--cdb-mobile-teal-strong), var(--cdb-mobile-teal-strong)) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--cdb-mobile-teal-strong) 55%, transparent) !important;
}

html[data-skin="cockpit"] body.cdb26-site .cdb-hero__cta-primary:hover,
body.cdb26-site .cdb-hero__cta-primary:hover {
    background: var(--cdb-mobile-teal-strong) !important;
}

/* Lien « déjà un compte ? » : hover teal. */
html[data-skin="cockpit"] body.cdb26-site .cdb-hero__account-cta:hover,
body.cdb26-site .cdb-hero__account-cta:hover {
    border-bottom-color: color-mix(in srgb, var(--cdb-mobile-teal) 60%, transparent);
}

/* Pastilles stats du hero : hover teal (au lieu d'orange). */
html[data-skin="cockpit"] .cdb-hero__stat:hover {
    border-color: color-mix(in srgb, var(--cdb-mobile-teal) 38%, transparent);
    background: color-mix(in srgb, var(--cdb-mobile-teal) 6%, transparent);
}

/* ---------------------------------------------------------------------
   4) NAVIGATION — liens actifs / hover en teal.
   --------------------------------------------------------------------- */
body.cdb26-site .cdb-nav.cdb-nav--2026 .cdb-nav__links a.is-active,
body.cdb26-site .cdb-nav.cdb-nav--2026 .cdb-nav__links a:hover {
    color: var(--cdb-mobile-teal);
}

body.cdb26-site .cdb26-theme-toggle:hover,
body.cdb26-site .cdb-nav--2026 .cdb-nav__theme:hover {
    border-color: color-mix(in srgb, var(--cdb-mobile-teal) 45%, var(--c26-line));
    color: var(--cdb-mobile-teal);
    background: color-mix(in srgb, var(--cdb-mobile-teal) 10%, transparent);
}

/* ---------------------------------------------------------------------
   5) FORMULAIRES — anneau de focus teal.
   --------------------------------------------------------------------- */
body.cdb26-site .cdb-field :where(input, textarea, select):focus,
.cdb26-page .cdb-field :where(input, textarea, select):focus,
body.cdb-route-login .cdb-field :where(input, textarea, select):focus,
body.cdb-route-admin-login .cdb-field :where(input, textarea, select):focus,
body[class*="cdb-route-portal-classic-"] .cdb-field :where(input, textarea, select):focus,
body.cdb-route-portal-register .cdb-field :where(input, textarea, select):focus,
.cdb-contact-form .cdb-field :where(input, textarea, select):focus,
.cdb26-form .cdb-field :where(input, textarea, select):focus {
    border-color: var(--cdb-mobile-teal) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdb-mobile-teal) 18%, transparent) !important;
}

/* ---------------------------------------------------------------------
   6) AUTH — panneau, cartes de choix, icônes en teal.
   --------------------------------------------------------------------- */
body.cdb-route-login .cdb-panel::before,
body.cdb-route-admin-login .cdb-panel::before,
body[class*="cdb-route-portal-classic-"] .cdb-panel::before,
body.cdb-route-portal-register .cdb-panel::before,
body.cdb-route-portal-password-request .cdb-panel::before,
body.cdb-route-portal-magic-link-request .cdb-panel::before,
body.cdb-route-portal-auth-action .cdb-panel::before {
    background: linear-gradient(90deg, var(--cdb-mobile-teal), transparent 78%);
}

.cdb-auth-choice__card:hover {
    border-color: var(--cdb-mobile-teal);
}

.cdb-auth-choice__icon {
    color: var(--cdb-mobile-teal);
}

/* ---------------------------------------------------------------------
   7) DASHBOARD CONDUCTEUR / COCKPITS — accents teal.
   Les widgets/KPIs utilisent var(--cdb26-portal-orange) et var(--ck-accent)
   déjà remappés ci-dessus ; on neutralise ici les lueurs / bordures orange
   codées en dur dans cdb-2026-portal.css.
   --------------------------------------------------------------------- */
body.cdb-user-dashboard-2026 .cdb-dash-widget,
body.cdb-user-dashboard-2026 .cdb-dash-kpi,
body.cdb-user-dashboard-2026 .cdb-dash-mission,
body.cdb-user-dashboard-2026 .cdb-dash-glance__item {
    border-color: var(--cdb26-portal-line);
    box-shadow: none;
}

body.cdb-user-dashboard-2026 .cdb-user-dashboard__sidebar,
body.cdb-cockpit--driver .cdb-user-dashboard__sidebar {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--cdb-mobile-teal) 6%, transparent), transparent 28%),
        var(--ck-rail);
    box-shadow: inset -1px 0 0 color-mix(in srgb, var(--cdb-mobile-teal) 12%, transparent);
}

body.cdb-cockpit--driver .cdb-user-dashboard__nav a.is-active,
body.cdb-cockpit--admin .cdb-admin-sidebar__link.is-active,
body.cdb-cockpit--recruiter .cdb-admin-sidebar__link.is-active {
    color: var(--cdb-mobile-teal);
    border-color: color-mix(in srgb, var(--cdb-mobile-teal) 28%, transparent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--cdb-mobile-teal) 16%, transparent), transparent);
    box-shadow: inset 3px 0 0 var(--cdb-mobile-teal);
}

/* Valeurs chiffrées / métriques mises en avant en teal. */
body.cdb-user-dashboard-2026 .cdb-dash-vision__big,
body.cdb-user-dashboard-2026 .cdb-dash-fuel__kpi--accent .cdb-dash-widget__metric,
body.cdb-user-dashboard-2026 .cdb-dash-fuel__consumption {
    color: var(--cdb-mobile-teal);
}

/* Barre d'onglets du bas : onglet actif teal. */
body.cdb-user-dashboard-2026 .cdb-driver-bottom-nav :where(a, button).is-active {
    background: color-mix(in srgb, var(--cdb-mobile-teal) 18%, transparent);
    color: color-mix(in srgb, var(--cdb-mobile-teal) 72%, var(--cdb-mobile-ink));
}

/* ---------------------------------------------------------------------
   8) PORTAIL / DASHBOARD — lueurs et bordures orange codées en dur
      (rgba(255,155,57,·)) dans cdb-2026-portal.css : on les remplace par
      des équivalents teal pour rester cohérent avec le remappage des tokens.
   --------------------------------------------------------------------- */
/* Fond de page des routes portail/auth : halo orange → halo teal. */
body[class*="cdb-route-portal-"],
body.cdb-route-login,
body.cdb-route-admin-login,
body.cdb-route-fortify-two-factor-index {
    background:
        linear-gradient(var(--cdb26-portal-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--cdb26-portal-grid) 1px, transparent 1px),
        radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--cdb-mobile-teal) 8%, transparent), transparent 28rem),
        var(--cdb26-portal-bg);
    background-size: 28px 28px, 28px 28px, auto, auto;
}

/* Nav latérale / sidebar : lien actif teal (au lieu du gradient orange). */
body.cdb-user-dashboard-2026 .cdb-user-dashboard__nav a.is-active,
.cdb-admin-sidebar__link.is-active {
    color: var(--cdb-mobile-teal);
    border-color: color-mix(in srgb, var(--cdb-mobile-teal) 20%, transparent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--cdb-mobile-teal) 15%, transparent), color-mix(in srgb, var(--cdb-mobile-teal) 2%, transparent));
}

/* Spotlight du hub : lueur orange en haut à droite → lueur teal. */
body.cdb-user-dashboard-2026 .cdb-user-dashboard__spotlight {
    background:
        radial-gradient(circle at 78% 55%, color-mix(in srgb, var(--cdb-mobile-teal) 13%, transparent), transparent 19rem),
        linear-gradient(120deg, var(--cdb26-portal-panel) 20%, var(--cdb26-portal-bg-deep));
}

/* Choix du hub (cartes « ouvrez l'app / portail ») : hover + icône teal. */
body[class*="cdb-route-portal-"] .cdb-portal-hub__choice:hover {
    border-color: color-mix(in srgb, var(--cdb-mobile-teal) 65%, transparent);
}

body[class*="cdb-route-portal-"] .cdb-portal-hub__choice-icon {
    border: 1px solid color-mix(in srgb, var(--cdb-mobile-teal) 28%, transparent);
}

/* Widget missions : halo orange → halo teal. */
body.cdb-user-dashboard-2026 .cdb-dash-widget--mission {
    background:
        radial-gradient(circle at 82% 58%, color-mix(in srgb, var(--cdb-mobile-teal) 12%, transparent), transparent 18rem),
        var(--cdb26-portal-panel);
}

/* Onglets de rôle (connexion/inscription) : ombre portée orange → teal. */
body[class*="cdb-route-portal-"] .cdb-auth-role-switch a.is-active,
body[class*="cdb-route-portal-"] .cdb-auth-role-switch button.is-active,
body.cdb-route-login .cdb-auth-role-switch a.is-active,
body.cdb-route-login .cdb-auth-role-switch button.is-active,
body.cdb-route-portal-register .cdb-auth-role-switch a.is-active,
body.cdb-route-portal-register .cdb-auth-role-switch button.is-active {
    box-shadow: 0 8px 22px color-mix(in srgb, var(--cdb-mobile-teal) 20%, transparent);
}

/* Messages non lus + icône message : orange → teal. */
body.cdb-user-dashboard-2026 .cdb-dash-message.is-unread {
    border-color: color-mix(in srgb, var(--cdb-mobile-teal) 22%, transparent);
    background: color-mix(in srgb, var(--cdb-mobile-teal) 5%, transparent);
}

body.cdb-user-dashboard-2026 .cdb-dash-message__icon {
    background: linear-gradient(135deg, color-mix(in srgb, var(--cdb-mobile-teal) 25%, transparent), color-mix(in srgb, var(--ck-info, #1678aa) 18%, transparent));
}

/* Agenda : étape courante teal. */
body.cdb-user-dashboard-2026 .cdb-dash-schedule__item--current::before {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cdb-mobile-teal) 16%, transparent);
}

/* Aperçu tablette/téléphone (page app) : lueur orange → teal. */
body.cdb-user-dashboard-2026 .cdb-dash-preview__tablet,
body.cdb-user-dashboard-2026 .cdb-dash-preview__phone {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--cdb-mobile-teal) 12%, transparent), transparent 40%),
        var(--cdb26-portal-panel-raised);
}

/* KPI accentué : bordure + halo orange → teal. */
body.cdb-user-dashboard-2026 .cdb-dash-kpi.is-accent {
    border-color: color-mix(in srgb, var(--cdb-mobile-teal) 32%, transparent);
    background:
        radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--cdb-mobile-teal) 16%, transparent), transparent 60%),
        var(--cdb26-portal-panel);
}

/* Vitrine véhicule : halo orange → teal. */
body.cdb-user-dashboard-2026 .cdb-vehicle-showcase {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--cdb-mobile-teal) 8%, transparent), transparent 14rem),
        var(--cdb26-portal-panel);
}

/* Onglets de sections (profil / offres / recrutement) : actif teal. */
body[class*="cdb-route-portal-"] :where(.cdb-portal-profile__tab, .cdb-portal-jobs__tab, .cdb-recruiter-hiring-tabs a).is-active {
    color: var(--cdb-mobile-teal);
    border-color: color-mix(in srgb, var(--cdb-mobile-teal) 25%, transparent);
    background: var(--cdb26-portal-orange-soft);
}

/* Focus dans les champs du portail : anneau orange → teal. */
body[class*="cdb-route-portal-"] :where(input, textarea, select):focus-visible,
body.cdb-route-login :where(input, textarea, select):focus-visible,
body.cdb-route-admin-login :where(input, textarea, select):focus-visible,
body.cdb-user-dashboard-2026 :where(input, textarea, select):focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdb-mobile-teal) 14%, transparent);
}

/* ---------------------------------------------------------------------
   9) DIVERS — hovers / accents orange résiduels codés en dur.
   --------------------------------------------------------------------- */
body.cdb26-site .cdb-nav__actions .cdb-btn--cta.cdb-btn--sm {
    box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--cdb-mobile-teal) 70%, transparent);
}

/* Liens « en savoir plus » / plans-link déjà teal sur mobile ; on garde la
   cohérence du soulignement teal sur desktop. */
body.cdb26-site a.cdb-link--accent,
body.cdb26-site .cdb-link--accent {
    color: var(--cdb-mobile-teal);
}

/* Lueur de survol des cartes bento de la home (var(--cdb-accent) déjà teal
   via le remappage, mais on neutralise le halo orange codé en dur). */
body.cdb26-site.cdb-home-page .cdb-bento .cdb-card::before {
    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--cdb-mobile-teal) 10%, transparent), transparent 70%);
}

/* ---------------------------------------------------------------------
   10) VERROUS À HAUTE SPÉCIFICITÉ — règles composées html[data-theme]+body
       qui battent le remappage simple du §1. On les surclasse en reprenant
       la même forme de sélecteur (fichiers : cockpits, theme-lock, refonte,
       marketing-charter, design-system).
   --------------------------------------------------------------------- */
/* Fonds cockpit (driver / admin / recruteur) : halo orange → halo teal. */
html[data-theme="dark"] body.cdb-cockpit,
html[data-theme="light"] body.cdb-cockpit {
    --ck-glow: color-mix(in srgb, var(--cdb-mobile-teal) 14%, transparent);
}

body.cdb-cockpit--driver {
    background:
        radial-gradient(ellipse 50% 40% at 85% 0%, var(--ck-glow), transparent 55%),
        linear-gradient(var(--ck-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--ck-grid) 1px, transparent 1px),
        var(--ck-bg);
    background-size: auto, 32px 32px, 32px 32px, auto;
}

body.cdb-cockpit--admin {
    background:
        radial-gradient(ellipse 40% 30% at 100% 0%, var(--ck-glow), transparent 50%),
        linear-gradient(var(--ck-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--ck-grid) 1px, transparent 1px),
        var(--ck-bg);
    background-size: auto, 28px 28px, 28px 28px, auto;
}

body.cdb-cockpit--recruiter {
    background:
        radial-gradient(ellipse 45% 35% at 10% 0%, color-mix(in srgb, var(--ck-info) 12%, transparent), transparent 50%),
        radial-gradient(ellipse 40% 30% at 90% 0%, var(--ck-glow), transparent 50%),
        linear-gradient(var(--ck-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--ck-grid) 1px, transparent 1px),
        var(--ck-bg);
    background-size: auto, auto, 32px 32px, 32px 32px, auto;
}

/* Tokens cockpit : les définitions html[data-theme] body.cdb-cockpit de
   cdb-2026-cockpits.css gagnent sur le remappage body simple du §1. */
html[data-theme="dark"] body.cdb-cockpit,
html[data-theme="light"] body.cdb-cockpit {
    --ck-bg: var(--cdb-mobile-navy);
    --ck-bg-deep: var(--cdb-mobile-navy);
    --ck-rail: var(--cdb-mobile-navy-soft);
    --ck-panel: var(--cdb-mobile-navy-soft);
    --ck-panel-2: var(--cdb-mobile-slate);
    --ck-ink: var(--cdb-mobile-ink);
    --ck-muted: var(--cdb-mobile-copy);
    --ck-line: var(--cdb-mobile-stroke);
    --ck-accent: var(--cdb-mobile-teal);
    --ck-accent-strong: var(--cdb-mobile-teal-strong);
}

/* Body du site public : theme-lock définit --c26-orange sur
   html[data-theme] body.cdb26-site → on reprend le sélecteur exact. */
html[data-theme] body.cdb26-site {
    --c26-orange: var(--cdb-mobile-teal);
    --c26-orange-strong: var(--cdb-mobile-teal-strong);
}

/* Portails (driver + workspace) : theme-lock L168–198 redéfinit accent et
   --cdb26-portal-orange-strong sur le body ; on surclasse de même forme. */
html[data-theme] body.cdb-user-dashboard-2026,
html[data-theme] body.cdb-workspace-2026 {
    --cdb-accent: var(--cdb-mobile-teal);
    --cdb26-portal-orange-strong: var(--cdb-mobile-teal-strong);
}

/* Refonte : .cdb-marketing-charter et body.cdb-body:not(.cdb-marketing-charter)
   posent leurs tokens orange à haute spécificité. */
html[data-theme] .cdb-marketing-charter,
html[data-theme] body.cdb-body:not(.cdb-marketing-charter) {
    --cdb-accent: var(--cdb-mobile-teal);
    --cdb-cta: var(--cdb-mobile-teal);
    --cdb-cta-hover: var(--cdb-mobile-teal-strong);
    --cdb-accent-dim: color-mix(in srgb, var(--cdb-mobile-teal) 13%, transparent);
}

/* Charter marketing : tokens posés directement sur les classes de body. */
body.cdb-home-page,
body.cdb-marketing-charter,
html[data-theme="light"] body.cdb-home-page,
html[data-theme="light"] body.cdb-marketing-charter {
    --cdb-accent: var(--cdb-mobile-teal);
    --cdb-cta: var(--cdb-mobile-teal);
    --cdb-cta-hover: var(--cdb-mobile-teal-strong);
    --cdb-accent-dim: color-mix(in srgb, var(--cdb-mobile-teal) 12%, transparent);
}

/* Design-system : --cdb-accent orange sur les deux shells portail. */
html[data-theme="dark"] body.cdb-user-dashboard-2026,
html[data-theme="light"] body.cdb-user-dashboard-2026,
html[data-theme="dark"] body.cdb-workspace-2026,
html[data-theme="light"] body.cdb-workspace-2026 {
    --cdb-accent: var(--cdb-mobile-teal);
    --cdb-accent-dim: color-mix(in srgb, var(--cdb-mobile-teal) 13%, transparent);
}

/* Marketing : --cdb26-accent (site public). */
:root,
html[data-theme="light"] {
    --cdb26-accent: var(--cdb-mobile-teal);
}

/* ---------------------------------------------------------------------
   11) FOND DE PAGE GLOBAL (.cdb-bg-mesh / .cdb-bg-grid) — les halos orange
       codés en dur dans cdb-site.css / cdb-marketing-charter.css sont fixes
       (z-index -2, position fixed) : on les repeint aux couleurs mobiles.
       Scopé aux corps du produit pour ne pas toucher l'admin legacy.
   --------------------------------------------------------------------- */
body.cdb-body.cdb26-site .cdb-bg-mesh,
body.cdb-body.cdb-marketing-charter .cdb-bg-mesh {
    background:
        radial-gradient(ellipse 80% 50% at 10% -10%, color-mix(in srgb, var(--cdb-mobile-teal) 14%, transparent), transparent 50%),
        radial-gradient(ellipse 60% 40% at 90% 20%, color-mix(in srgb, var(--cdb-mobile-teal) 8%, transparent), transparent 45%),
        radial-gradient(ellipse 50% 30% at 50% 100%, color-mix(in srgb, var(--cdb-mobile-teal) 6%, transparent), transparent 40%),
        var(--cdb-bg);
}

body.cdb-body.cdb26-site .cdb-bg-mesh::before,
body.cdb-body.cdb-marketing-charter .cdb-bg-mesh::before {
    background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--cdb-mobile-teal) 16%, transparent), transparent 42%);
}

body.cdb-body.cdb26-site .cdb-bg-mesh::after,
body.cdb-body.cdb-marketing-charter .cdb-bg-mesh::after {
    background: radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--cdb-mobile-teal) 9%, transparent), transparent 45%);
}

html[data-theme="light"] body.cdb-body.cdb26-site .cdb-bg-mesh,
html[data-theme="light"] body.cdb-body.cdb-marketing-charter .cdb-bg-mesh {
    background:
        radial-gradient(ellipse 70% 45% at 12% 0%, color-mix(in srgb, var(--cdb-mobile-teal) 10%, transparent), transparent 52%),
        radial-gradient(ellipse 55% 40% at 88% 15%, color-mix(in srgb, var(--cdb-mobile-teal) 7%, transparent), transparent 48%),
        radial-gradient(ellipse 45% 28% at 50% 100%, color-mix(in srgb, var(--cdb-mobile-teal) 5%, transparent), transparent 42%),
        var(--cdb-bg);
}

/* Halo orange du fond des routes portail/auth (body background codé en dur). */
body.cdb-body.cdb-route-login,
body.cdb-body.cdb-route-admin-login,
body.cdb-body.cdb-route-fortify-two-factor-index {
    background:
        linear-gradient(var(--cdb26-portal-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--cdb26-portal-grid) 1px, transparent 1px),
        radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--cdb-mobile-teal) 8%, transparent), transparent 28rem),
        var(--cdb26-portal-bg);
    background-size: 28px 28px, 28px 28px, auto, auto;
}

/* Toggle thème du dashboard (pied de sidebar) : hover orange → teal. */
html[data-theme] .cdb-user-dashboard__sidebar-theme .cdb26-theme-toggle:hover {
    border-color: color-mix(in srgb, var(--cdb-mobile-teal) 45%, var(--c26-line));
    color: var(--cdb-mobile-teal);
}

/* Écran de connexion avec visuel (auth surface) : voile orange → teal. */
body.cdb-auth-surface .cdb26-auth__visual::after {
    background:
        linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--cdb-mobile-navy) 55%, transparent)),
        linear-gradient(90deg, color-mix(in srgb, var(--cdb-mobile-teal) 12%, transparent), transparent 45%);
}

/* Loader du site marketing : étincelle orange → teal. */
body.cdb-body .cdb-loader__fx-spark {
    background: var(--cdb-mobile-teal);
}

/* ---------------------------------------------------------------------
   12) DERNIERS ORANGES CODÉS EN DUR VISIBLES EN DESKTOP
       (home hero, marketing home, dream banner, contact, plans, loader).
   --------------------------------------------------------------------- */
/* Focus génériques du portail (cdb-2026-portal.css utilise :focus, pas
   :focus-visible) : anneau orange → teal. */
body[class*="cdb-route-portal-"] :where(input, select, textarea):focus,
body.cdb-route-login :where(input, select, textarea):focus,
body.cdb-route-admin-login :where(input, select, textarea):focus,
.cdb-workspace-2026 :where(input, select, textarea):focus {
    border-color: var(--cdb-mobile-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdb-mobile-teal) 14%, transparent);
}

/* Refonte : anneau de focus global --cdb-ring (utilisé par .cdb-field). */
.cdb-marketing-charter,
body.cdb-body {
    --cdb-ring: 0 0 0 3px color-mix(in srgb, var(--cdb-mobile-teal) 30%, transparent);
}

/* Home hero cockpit (home-heroes.css) : survol stats, ombre camion, halo sol. */
html[data-skin="cockpit"] .cdb-hero__stat:hover {
    border-color: color-mix(in srgb, var(--cdb-mobile-teal) 38%, transparent);
    background: color-mix(in srgb, var(--cdb-mobile-teal) 6%, transparent);
}

html[data-skin="cockpit"] .cdb-hero__truck {
    filter:
        drop-shadow(0 34px 55px rgba(0, 0, 0, 0.5))
        drop-shadow(0 12px 30px color-mix(in srgb, var(--cdb-mobile-teal) 16%, transparent));
}

html[data-skin="cockpit"] .cdb-hero__visual::after {
    background: radial-gradient(ellipse, color-mix(in srgb, var(--cdb-mobile-teal) 28%, transparent), transparent 68%);
}

html[data-skin="cockpit"][data-theme="light"] .cdb-hero--cockpit {
    background:
        radial-gradient(ellipse at 75% 40%, color-mix(in srgb, var(--cdb-mobile-teal) 10%, transparent), transparent 55%),
        linear-gradient(180deg, #eef2f4 0%, var(--cdb-bg) 100%);
}

/* Marketing home (cdb-marketing-charter.css) : badge, logo, panneau CTA,
   cadres illustrés, hovers de cartes — tout en teal. */
body.cdb-home-page .cdb-badge,
body.cdb-marketing-charter .cdb-badge {
    border-color: color-mix(in srgb, var(--cdb-mobile-teal) 35%, transparent);
}

body.cdb-home-page .cdb-brand img,
body.cdb-marketing-charter .cdb-brand img {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--cdb-mobile-teal) 38%, transparent);
}

.cdb-home-cta__panel {
    background:
        radial-gradient(ellipse 75% 45% at 100% 0%, color-mix(in srgb, var(--cdb-mobile-teal) 14%, transparent), transparent 55%),
        radial-gradient(ellipse 50% 35% at 0% 100%, rgba(116, 167, 239, 0.08), transparent 50%),
        linear-gradient(145deg, rgba(12, 18, 28, 0.96), rgba(8, 12, 19, 0.94));
}

.cdb-home-cta__panel::before {
    background: conic-gradient(
        from 200deg,
        transparent,
        color-mix(in srgb, var(--cdb-mobile-teal) 7%, transparent),
        transparent,
        rgba(116, 167, 239, 0.05),
        transparent
    );
}

html[data-theme="light"] .cdb-home-cta__panel {
    background:
        radial-gradient(ellipse 75% 45% at 100% 0%, color-mix(in srgb, var(--cdb-mobile-teal) 12%, transparent), transparent 55%),
        radial-gradient(ellipse 50% 35% at 0% 100%, color-mix(in srgb, var(--cdb-mobile-teal) 5%, transparent), transparent 50%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(244, 248, 251, 0.95));
}

.cdb-home-cta__panel:hover {
    border-color: color-mix(in srgb, var(--cdb-mobile-teal) 22%, transparent);
}

.cdb-illustration-frame::before {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--cdb-mobile-teal) 55%, transparent) 0%,
        rgba(116, 167, 239, 0.35) 42%,
        rgba(255, 255, 255, 0.08) 70%,
        transparent 100%
    );
}

body.cdb-home-page .cdb-home-shot,
body.cdb-marketing-charter .cdb-home-shot {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.07),
        0 28px 56px rgba(0, 0, 0, 0.42),
        0 0 72px color-mix(in srgb, var(--cdb-mobile-teal) 10%, transparent);
}

body.cdb-home-page .cdb-home-shot--hero::after,
body.cdb-marketing-charter .cdb-home-shot--hero::after {
    background: radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--cdb-mobile-teal) 14%, transparent), transparent 58%);
}

body.cdb-home-page .cdb-card:hover {
    border-color: color-mix(in srgb, var(--cdb-mobile-teal) 22%, transparent);
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.32),
        0 0 32px color-mix(in srgb, var(--cdb-mobile-teal) 8%, transparent);
}

body.cdb-home-page .cdb-quote:hover {
    border-color: color-mix(in srgb, var(--cdb-mobile-teal) 12%, transparent);
}

/* Front public (cdb-site.css) : bannière dev abonnement, badge plan mis en
   avant, bannière « dream », vitrine contact, loader fx. */
.cdb-subscribe-dev-banner {
    border-color: color-mix(in srgb, var(--cdb-mobile-teal) 55%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--cdb-mobile-teal) 12%, transparent), color-mix(in srgb, var(--cdb-mobile-teal) 6%, transparent));
}

.cdb-subscribe-dev-banner__dot {
    background: var(--cdb-mobile-teal);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--cdb-mobile-teal) 18%, transparent);
}

.cdb-plan-card--featured .cdb-plan-card__badge {
    background: linear-gradient(135deg, var(--cdb-mobile-teal), var(--cdb-mobile-teal-strong));
    box-shadow:
        0 4px 16px color-mix(in srgb, var(--cdb-mobile-teal) 45%, transparent),
        0 0 0 1px color-mix(in srgb, var(--cdb-mobile-teal) 30%, transparent);
}

.cdb-plan-card__badge {
    box-shadow:
        0 4px 14px color-mix(in srgb, var(--cdb-mobile-teal) 40%, transparent),
        0 0 0 1px color-mix(in srgb, var(--cdb-mobile-teal) 25%, transparent);
}

.cdb-dream-banner {
    background:
        linear-gradient(118deg, color-mix(in srgb, var(--cdb-mobile-teal) 10%, transparent) 0%, transparent 42%),
        linear-gradient(245deg, color-mix(in srgb, var(--cdb-mobile-teal) 9%, transparent) 0%, transparent 38%),
        var(--cdb-bg-elevated, var(--c26-bg-soft, var(--c26-bg)));
}

body.cdb-site-2026 .cdb-dream-banner {
    background:
        radial-gradient(ellipse at 12% 20%, color-mix(in srgb, var(--cdb-mobile-teal) 12%, transparent), transparent 42%),
        radial-gradient(ellipse at 88% 78%, color-mix(in srgb, var(--cdb-mobile-teal) 8%, transparent), transparent 40%),
        linear-gradient(
            180deg,
            var(--c26-bg-soft, var(--cdb-bg-elevated, var(--c26-bg))) 0%,
            var(--c26-bg, var(--cdb-bg)) 55%,
            var(--c26-bg-soft, var(--cdb-bg-elevated, var(--c26-bg))) 100%
        );
}

.cdb-contact-showcase {
    border-color: color-mix(in srgb, var(--cdb-mobile-teal) 22%, transparent);
    background:
        radial-gradient(ellipse 80% 55% at 50% 0%, color-mix(in srgb, var(--cdb-mobile-teal) 14%, transparent), transparent 70%),
        linear-gradient(165deg, var(--cdb-bg-card) 0%, var(--cdb-bg-elevated) 100%);
}

.cdb-loader__fx.is-active .cdb-loader__fx-flash {
    background: radial-gradient(circle, color-mix(in srgb, var(--cdb-mobile-teal) 85%, transparent) 0%, color-mix(in srgb, var(--cdb-mobile-teal) 45%, transparent) 35%, transparent 68%);
}

.cdb-loader__fx.is-active .cdb-loader__fx-ring {
    border-color: color-mix(in srgb, var(--cdb-mobile-teal) 90%, #ffffff);
    box-shadow: 0 0 40px color-mix(in srgb, var(--cdb-mobile-teal) 60%, transparent);
}

/* Bouton découverte du hero home : retiré (ne plus styler / ne pas réafficher). */
html[data-skin="cockpit"] body.cdb-site-2026.cdb-home-page .cdb-hero__discover {
    display: none !important;
}

/* Colonne auth : halo derrière le panneau étroit. */
body.cdb-site-2026 .cdb-page-narrow {
    background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--cdb-mobile-teal) 10%, transparent), transparent 55%);
}

/* -----------------------------------------------------------------------------
   Cockpits (admin / chauffeur / recruteur) : CTA teal + texte blanc.
   Admin n’a pas `cdb26-site` → sans ceci, `.cdb-btn--cta` retombe sur l’orange
   marketing de cdb-site.css. Couche finale palette (avant polish).
   ----------------------------------------------------------------------------- */
body.cdb-cockpit .cdb-btn--cta:not(.cdb-btn--commerce),
body.cdb-cockpit .cdb-btn--primary:not(.cdb-btn--commerce),
body.cdb-admin-accent .cdb-btn--cta:not(.cdb-btn--commerce),
body.cdb-admin-accent .cdb-btn--primary:not(.cdb-btn--commerce),
.cdb-admin-shell .cdb-btn--cta:not(.cdb-btn--commerce),
.cdb-admin-shell .cdb-btn--primary:not(.cdb-btn--commerce),
.cdb-user-dashboard .cdb-btn--cta:not(.cdb-btn--commerce),
.cdb-user-dashboard .cdb-btn--primary:not(.cdb-btn--commerce) {
    border-color: color-mix(in srgb, var(--cdb-mobile-teal-strong) 68%, transparent) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--cdb-mobile-teal-strong) 82%, #ffffff),
        var(--cdb-mobile-teal-strong)
    ) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 35px -18px color-mix(in srgb, var(--cdb-mobile-teal-strong) 85%, transparent) !important;
}

body.cdb-cockpit .cdb-btn--cta:not(.cdb-btn--commerce):hover,
body.cdb-cockpit .cdb-btn--primary:not(.cdb-btn--commerce):hover,
body.cdb-admin-accent .cdb-btn--cta:not(.cdb-btn--commerce):hover,
body.cdb-admin-accent .cdb-btn--primary:not(.cdb-btn--commerce):hover,
.cdb-admin-shell .cdb-btn--cta:not(.cdb-btn--commerce):hover,
.cdb-admin-shell .cdb-btn--primary:not(.cdb-btn--commerce):hover,
.cdb-user-dashboard .cdb-btn--cta:not(.cdb-btn--commerce):hover,
.cdb-user-dashboard .cdb-btn--primary:not(.cdb-btn--commerce):hover {
    background: var(--cdb-mobile-teal-strong) !important;
    color: #ffffff !important;
}

/* -----------------------------------------------------------------------------
   Version réduite des préférences : on coupe les transitions de survol.
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cdb-btn--cta,
    .cdb-btn--primary,
    .cdb-hero__cta-primary {
        transition: none !important;
    }
}

/* Invisible reCAPTCHA : dernière couche — les styles « tous les textarea »
   du marketing ne doivent pas repeindre le widget Google dans le formulaire. */
textarea.g-recaptcha-response {
    display: none !important;
    visibility: hidden !important;
    min-height: 0 !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Consentement inscription : la case et son libellé restent sur la même ligne.
   Le texte peut se replier dans sa propre colonne sur les petits écrans. */
body.cdb-sales-register .cdb-field.cdb-register-terms .cdb-auth-remember__label {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 0.55rem !important;
}

body.cdb-sales-register .cdb-field.cdb-register-terms .cdb-auth-remember__label > input[type="checkbox"] {
    flex: 0 0 auto;
}

body.cdb-sales-register .cdb-field.cdb-register-terms .cdb-auth-remember__label > [data-cdb-role-terms]:not([hidden]) {
    flex: 1 1 auto;
    min-width: 0;
}