/**
 * OptiGest360° — Design System v2 (corail) — COMPOSANTS (refonte)
 * ==============================================================
 * Additif, chargé après v2-theme.css, scopé sous html[data-ds-v2]
 * (donc actif seulement quand le flag design_system_v2 est ON).
 * Affine l'anatomie/les états des composants pour matcher les
 * prototypes (lots D Boutons, E Formulaires, F Données), au-delà
 * du simple recolorage par tokens.
 *
 * Specs source (handoff) : focus ring 0 0 0 3px var(--ds-focus-ring) ;
 * transitions 0.15s ; rayons boutons/inputs md(10) · cartes lg(14) ·
 * pills full ; hit targets ≥ 36–40px ; survol = légère élévation.
 */

/* ============================================================
   LOT D — BOUTONS & ACTIONS
   ============================================================ */
html[data-ds-v2] .ds-btn {
    font-family: var(--ds-font-sans);
    font-weight: var(--ds-font-semibold);
    border-radius: var(--ds-radius-md);
    min-height: 40px;
    letter-spacing: 0;
    transition: background .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease, transform .15s ease;
}
html[data-ds-v2] .ds-btn--sm { min-height: 34px; border-radius: var(--ds-radius-sm); }
html[data-ds-v2] .ds-btn--lg { min-height: 46px; }
html[data-ds-v2] .ds-btn:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus-ring);
}
html[data-ds-v2] .ds-btn:not(:disabled):hover { transform: translateY(-1px); }
html[data-ds-v2] .ds-btn:not(:disabled):active { transform: translateY(0); }
html[data-ds-v2] .ds-btn:disabled,
html[data-ds-v2] .ds-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* Tons pleins : texte clair, ombre douce, hover = ton -hover */
html[data-ds-v2] .ds-btn--primary {
    background: var(--ds-primary);
    color: var(--ds-text-on-primary, #fff);
    border-color: transparent;
    box-shadow: var(--ds-shadow-xs);
}
html[data-ds-v2] .ds-btn--primary:not(:disabled):hover { background: var(--ds-primary-hover); box-shadow: var(--ds-shadow-sm); }
html[data-ds-v2] .ds-btn--success { background: var(--ds-success); color: #fff; border-color: transparent; }
html[data-ds-v2] .ds-btn--warning { background: var(--ds-warning); color: #3a2a05; border-color: transparent; }
html[data-ds-v2] .ds-btn--danger  { background: var(--ds-danger);  color: #fff; border-color: transparent; }
/* Bouton « info » : plus de fond bleu en v2 → secondaire outline corail
   (bordure + texte corail, fond transparent, hover tint corail). */
html[data-ds-v2] .ds-btn--info {
    background: transparent;
    color: var(--ds-primary);
    border: var(--ds-border-width-md, 1.5px) solid var(--ds-primary);
}
html[data-ds-v2] .ds-btn--info:not(:disabled):hover {
    background: var(--ds-primary-50);
    color: var(--ds-primary-hover);
    border-color: var(--ds-primary-hover);
}

/* Secondaire : surface + bordure */
html[data-ds-v2] .ds-btn--secondary {
    background: var(--ds-bg-primary);
    color: var(--ds-text-primary);
    border: var(--ds-border-width-md, 1.5px) solid var(--ds-border-strong);
}
html[data-ds-v2] .ds-btn--secondary:not(:disabled):hover { background: var(--ds-bg-tertiary); border-color: var(--ds-primary); color: var(--ds-primary); }

/* Ghost / link */
html[data-ds-v2] .ds-btn--ghost {
    background: transparent; border-color: transparent; color: var(--ds-text-secondary);
}
html[data-ds-v2] .ds-btn--ghost:not(:disabled):hover { background: var(--ds-primary-light); color: var(--ds-primary); transform: none; }
html[data-ds-v2] .ds-btn--link { color: var(--ds-primary); border-radius: var(--ds-radius-sm); }
html[data-ds-v2] .ds-btn--link:not(:disabled):hover { color: var(--ds-primary-hover); text-decoration: underline; transform: none; }

/* Icon-only carré, FAB rond */
html[data-ds-v2] .ds-btn--icon-only { min-width: 40px; padding-left: 0; padding-right: 0; }
html[data-ds-v2] .ds-btn-group .ds-btn { border-radius: 0; }
html[data-ds-v2] .ds-btn-group .ds-btn:first-child { border-top-left-radius: var(--ds-radius-md); border-bottom-left-radius: var(--ds-radius-md); }
html[data-ds-v2] .ds-btn-group .ds-btn:last-child  { border-top-right-radius: var(--ds-radius-md); border-bottom-right-radius: var(--ds-radius-md); }

/* ============================================================
   LOT E — FORMULAIRES & SAISIE
   ============================================================ */
html[data-ds-v2] .ds-input,
html[data-ds-v2] .ds-form-input,
html[data-ds-v2] .ds-select,
html[data-ds-v2] .ds-textarea {
    font-family: var(--ds-font-sans);
    border-radius: var(--ds-radius-md);
    border: var(--ds-border-width-hair, 1px) solid var(--ds-border-strong);
    background: var(--ds-bg-primary);
    color: var(--ds-text-primary);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
html[data-ds-v2] .ds-input:focus,
html[data-ds-v2] .ds-form-input:focus,
html[data-ds-v2] .ds-select:focus,
html[data-ds-v2] .ds-textarea:focus {
    outline: none;
    border-color: var(--ds-primary);
    box-shadow: var(--ds-focus-ring);
}
html[data-ds-v2] .ds-input::placeholder,
html[data-ds-v2] .ds-form-input::placeholder { color: var(--ds-text-muted); }
html[data-ds-v2] .ds-input--error,
html[data-ds-v2] .ds-form-input--error { border-color: var(--ds-danger); }
html[data-ds-v2] .ds-input--error:focus,
html[data-ds-v2] .ds-form-input--error:focus { box-shadow: 0 0 0 3px rgba(224, 68, 91, .35); }
html[data-ds-v2] .ds-form-label { font-size: 0.8125rem; font-weight: var(--ds-font-semibold); color: var(--ds-text-secondary); }
html[data-ds-v2] .ds-form-label--required::after { content: " *"; color: var(--ds-danger); }
/* Montants FCFA / codes en mono tabulaire */
html[data-ds-v2] .ds-input[inputmode="numeric"],
html[data-ds-v2] .ds-input--amount {
    font-family: var(--ds-font-mono); font-feature-settings: 'tnum' 1; text-align: right;
}

/* ============================================================
   LOT F — DONNÉES (cartes, badges, KPI, tables)
   ============================================================ */
html[data-ds-v2] .ds-card {
    border-radius: var(--ds-radius-lg);
    border: var(--ds-border-width-hair, 1px) solid var(--ds-border);
    background: var(--ds-surface, var(--ds-bg-primary));
    box-shadow: var(--ds-shadow-xs);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
html[data-ds-v2] .ds-card--clickable:hover,
html[data-ds-v2] .ds-card--lift:hover { box-shadow: var(--ds-shadow-md); transform: translateY(-2px); }
html[data-ds-v2] .ds-card-title { font-family: var(--ds-font-display); letter-spacing: -.01em; }

/* Badges : pill, libellé + pastille (info portée pas que par la couleur) */
html[data-ds-v2] .ds-badge {
    border-radius: var(--ds-radius-full);
    font-weight: var(--ds-font-medium);
    font-size: var(--ds-text-xs);
    letter-spacing: .01em;
    padding: 3px 10px;
    display: inline-flex; align-items: center; gap: 6px;
}
html[data-ds-v2] .ds-badge::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: .9; flex: none;
}
html[data-ds-v2] .ds-badge--primary { background: var(--ds-primary-light); color: var(--ds-primary-700); }
html[data-ds-v2] .ds-badge--success { background: var(--ds-success-50); color: var(--ds-success-700); }
html[data-ds-v2] .ds-badge--warning { background: var(--ds-warning-50); color: var(--ds-warning-700); }
html[data-ds-v2] .ds-badge--danger  { background: var(--ds-danger-50);  color: var(--ds-danger-700); }
html[data-ds-v2] .ds-badge--info    { background: var(--ds-info-50);    color: var(--ds-info-700); }
html[data-ds-v2] .ds-badge--neutral { background: var(--ds-bg-tertiary); color: var(--ds-text-secondary); }

/* Dark theme : le texte foncé (-700) des badges est lisible sur la tuile claire
   en thème clair, mais devient foncé-sur-foncé sur la tuile (translucide) posée
   sur une carte sombre. On éclaircit le TEXTE (variante -300) en dark ; la tuile
   reste inchangée. Scopé [data-ds-v2][data-theme=dark] → spécificité > règle v2. */
html[data-ds-v2][data-theme="dark"] .ds-badge--success { color: var(--ds-success-300); }
html[data-ds-v2][data-theme="dark"] .ds-badge--warning { color: var(--ds-warning-300); }
html[data-ds-v2][data-theme="dark"] .ds-badge--danger  { color: var(--ds-danger-300); }
html[data-ds-v2][data-theme="dark"] .ds-badge--info    { color: var(--ds-info-300); }
html[data-ds-v2][data-theme="dark"] .ds-badge--primary { color: var(--ds-primary-300, #ffb4a3); }

/* KPI / stat-card */
html[data-ds-v2] .ds-stat-card { border-radius: var(--ds-radius-lg); border: 1px solid var(--ds-border); background: var(--ds-surface, var(--ds-bg-primary)); }

/* Data table : header warm, lignes aérées, montants mono */
html[data-ds-v2] .ds-table { border-collapse: separate; border-spacing: 0; }
html[data-ds-v2] .ds-table thead th {
    background: var(--ds-bg-tertiary);
    color: var(--ds-text-secondary);
    font-weight: var(--ds-font-semibold);
    font-size: var(--ds-text-xs);
    letter-spacing: .04em; text-transform: uppercase;
    border-bottom: 1px solid var(--ds-border-strong);
}
html[data-ds-v2] .ds-table tbody td { border-bottom: 1px solid var(--ds-border); }
html[data-ds-v2] .ds-table tbody tr:hover td { background: var(--ds-bg-secondary); }
html[data-ds-v2] .ds-table .ds-amount,
html[data-ds-v2] .ds-table td.text-right { font-family: var(--ds-font-mono); font-feature-settings: 'tnum' 1; }

/* Variante BEM ds-data-table__* : mêmes surfaces warm que ds-table
   (utilisait --ds-white / --ds-gray-* qui ne se réchauffent pas en v2). */
html[data-ds-v2] .ds-data-table__header { background: var(--ds-bg-tertiary); border-bottom-color: var(--ds-border-strong); }
html[data-ds-v2] .ds-data-table__th { color: var(--ds-text-secondary); }
html[data-ds-v2] .ds-data-table__body { background: var(--ds-bg-primary); }
html[data-ds-v2] .ds-data-table__tr { border-bottom-color: var(--ds-border); }
html[data-ds-v2] .ds-data-table__tr:hover { background: var(--ds-bg-secondary); }

/* ============================================================
   LOT C — NAVIGATION : sidebar sombre (warm), conforme au prototype
   Fond neutral-900 (#1B1815, indépendant du thème), texte clair,
   item actif = fond corail teinté + icône corail remplie + texte blanc,
   sous-menu avec filet corail à gauche.
   ============================================================ */
html[data-ds-v2] .sidebar {
    background: #1B1815;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    color: #fff;
}
html[data-ds-v2][data-theme="dark"] .sidebar { background: #121009; }
html[data-ds-v2] .sidebar-header { border-bottom-color: rgba(255, 255, 255, 0.08); }
html[data-ds-v2] .sidebar-title h2 { color: #fff; font-family: var(--ds-font-display); }
html[data-ds-v2] .sidebar-title p { color: #948b7f; }

/* Liens & groupes */
html[data-ds-v2] .nav-link,
html[data-ds-v2] .nav-group-toggle {
    color: #cdc6bd;
    border-radius: var(--ds-radius-md);
    font-weight: var(--ds-font-medium);
    transition: background .15s ease, color .15s ease;
}
html[data-ds-v2] .nav-link i,
html[data-ds-v2] .nav-group-label i { color: #cdc6bd; transition: color .15s ease; }
html[data-ds-v2] .nav-link:hover,
html[data-ds-v2] .nav-group-toggle:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
html[data-ds-v2] .nav-link:hover i,
html[data-ds-v2] .nav-group-toggle:hover .nav-group-label i { color: #fff; }

/* Item actif : fond corail teinté (pas plein), icône corail remplie, texte blanc */
html[data-ds-v2] .nav-link.active,
html[data-ds-v2] .nav-group-toggle.active {
    background: rgba(242, 102, 78, 0.18) !important;
    color: #fff !important;
    font-weight: var(--ds-font-semibold);
}
html[data-ds-v2] .nav-link.active i,
html[data-ds-v2] .nav-group-toggle.active .nav-group-label i { color: var(--ds-primary-500) !important; }
html[data-ds-v2] .nav-link.active i::before,
html[data-ds-v2] .nav-group-toggle.active .nav-group-label i::before { font-family: 'Phosphor-Fill' !important; }

/* En-tête de groupe OUVERT : la règle de base le passe en fond corail clair
   (--ds-primary-light) — illisible sur sidebar sombre. On force le rendu sombre
   (sauf si c'est aussi l'item actif de la page). Spécificité ≥ règle de base. */
html[data-ds-v2] .nav-group .nav-group-toggle,
html[data-ds-v2] .nav-group.open .nav-group-toggle {
    background: transparent !important;
    color: #cdc6bd !important;
}
html[data-ds-v2] .nav-group .nav-group-toggle .nav-group-label i,
html[data-ds-v2] .nav-group.open .nav-group-toggle .nav-group-label i { color: #cdc6bd !important; }
html[data-ds-v2] .nav-group .nav-group-toggle:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
}
html[data-ds-v2] .nav-group .nav-group-toggle:hover .nav-group-label i { color: #fff !important; }
html[data-ds-v2] .nav-group .nav-group-toggle.active {
    background: rgba(242, 102, 78, 0.18) !important;
    color: #fff !important;
}
html[data-ds-v2] .nav-group .nav-group-toggle.active .nav-group-label i { color: var(--ds-primary-500) !important; }

/* ============================================================
   LOT G — FEEDBACK & OVERLAYS (modales, drawer, toasts, alertes)
   ============================================================ */
/* Modale : panneau radius lg, ombre xl, titre display, pied surface-2 */
html[data-ds-v2] .ds-modal__panel { border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-xl); }
html[data-ds-v2] .ds-modal-title { font-family: var(--ds-font-display); font-weight: var(--ds-font-semibold); letter-spacing: -0.01em; }
html[data-ds-v2] .ds-modal-footer { background: var(--ds-bg-tertiary); }
html[data-ds-v2] .ds-modal-header,
html[data-ds-v2] .ds-modal-footer { border-color: var(--ds-border); }

/* Drawer latéral droit */
html[data-ds-v2] .ds-drawer__panel,
html[data-ds-v2] .ds-drawer { box-shadow: var(--ds-shadow-xl); }
html[data-ds-v2] .ds-drawer__title { font-family: var(--ds-font-display); font-weight: var(--ds-font-semibold); }

/* Alertes / bannières : icône au ton -600 (titre/texte déjà -700 via tokens) */
html[data-ds-v2] .ds-alert { border-radius: var(--ds-radius-md); align-items: flex-start; }
html[data-ds-v2] .ds-alert--success .ds-alert__icon { color: var(--ds-success-600); }
html[data-ds-v2] .ds-alert--warning .ds-alert__icon { color: var(--ds-warning-600); }
html[data-ds-v2] .ds-alert--danger  .ds-alert__icon { color: var(--ds-danger-600); }
html[data-ds-v2] .ds-alert--info    .ds-alert__icon { color: var(--ds-info-600); }

/* Toasts : surface + filet gauche 3px au ton + ombre portée */
html[data-ds-v2] .ds-toast {
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-lg);
    border-left: 3px solid var(--ds-border-strong);
}
html[data-ds-v2] .ds-toast--success { border-left-color: var(--ds-success-500); }
html[data-ds-v2] .ds-toast--error   { border-left-color: var(--ds-danger-500); }
html[data-ds-v2] .ds-toast--warning { border-left-color: var(--ds-warning-500); }
html[data-ds-v2] .ds-toast--info    { border-left-color: var(--ds-info-500); }
html[data-ds-v2] .ds-toast__progress { background: var(--ds-primary-500); }

/* Centre de notifications : ligne non-lue teintée corail, titres display */
html[data-ds-v2] .ds-notification__panel,
html[data-ds-v2] .notification-panel,
html[data-ds-v2] .notifications-dropdown { border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-lg); }
html[data-ds-v2] .notification-item.is-unread,
html[data-ds-v2] .ds-notification--unread { background: var(--ds-primary-50); }

/* Loaders / spinners au corail */
html[data-ds-v2] .ds-spinner,
html[data-ds-v2] .spinner { border-top-color: var(--ds-primary-500) !important; }
html[data-ds-v2] .ds-progress__bar,
html[data-ds-v2] .progress-bar--primary { background: var(--ds-primary-500); }

/* ============================================================
   LOT H — WIDGETS ERP (cartes entité, prix/totaux, paiement, statut)
   ============================================================ */
/* Carte entité (client / fournisseur / lead) */
html[data-ds-v2] .ds-entity-card {
    border-radius: var(--ds-radius-lg);
    border-color: var(--ds-border);
    box-shadow: var(--ds-shadow-xs);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
html[data-ds-v2] .ds-entity-card--clickable:hover { box-shadow: var(--ds-shadow-md); transform: translateY(-2px); }
html[data-ds-v2] .ds-entity-card__avatar { border-radius: var(--ds-radius-md); font-family: var(--ds-font-display); font-weight: var(--ds-font-bold); }
html[data-ds-v2] .ds-entity-card__name,
html[data-ds-v2] .ds-entity-card__title { font-family: var(--ds-font-display); font-weight: var(--ds-font-semibold); letter-spacing: -.01em; }

/* Prix / montants FCFA en mono ; total au corail */
html[data-ds-v2] .ds-price__amount,
html[data-ds-v2] .ds-price-cell { font-family: var(--ds-font-mono); font-feature-settings: 'tnum' 1; }
html[data-ds-v2] .ds-price-cell--total,
html[data-ds-v2] .ds-price--total .ds-price__amount { color: var(--ds-primary-600); font-weight: var(--ds-font-medium); }

/* Éditeur de lignes : ligne en édition teintée + bouton « ajouter » pointillé corail */
html[data-ds-v2] tr.is-editing,
html[data-ds-v2] .ds-line-row--editing { background: var(--ds-primary-50); }
html[data-ds-v2] .ds-add-line,
html[data-ds-v2] .btn-add-line {
    color: var(--ds-primary-600);
    border: 1px dashed var(--ds-primary-300);
    border-radius: var(--ds-radius-md);
    background: transparent;
}

/* Sélecteur de mode de paiement (Mobile Money / espèces / banque).
   État sélectionné réel = radio :checked + .pm-card. Le survol/sélection
   utilisait un fond mauve hardcodé (#f5f3ff) → on le passe au corail-50. */
html[data-ds-v2] .pm-card { border-radius: var(--ds-radius-md); transition: border-color .15s ease, background .15s ease; }
html[data-ds-v2] .pm-card:hover,
html[data-ds-v2] .pm-option input:checked + .pm-card {
    border-color: var(--ds-primary-500) !important;
    background: var(--ds-primary-50) !important;
}
html[data-ds-v2] .pm-card:hover i,
html[data-ds-v2] .pm-option input:checked + .pm-card i { color: var(--ds-primary-600) !important; }
/* fallback pour d'autres sélecteurs de tuiles éventuels */
html[data-ds-v2] .pm-option.selected,
html[data-ds-v2] .pm-option.is-active,
html[data-ds-v2] .payment-method.selected {
    border-color: var(--ds-primary-500) !important;
    background: var(--ds-primary-50) !important;
}

/* Bandeau d'impersonation / consultation tenant : ton warning warm */
html[data-ds-v2] .impersonation-banner,
html[data-ds-v2] .tenant-impersonation-banner {
    background: var(--ds-warning-50);
    border-color: var(--ds-warning-500);
    color: var(--ds-warning-700);
}

/* Régime fiscal / statut : pills (déjà couverts par .ds-badge ; renforce le sélectionné) */
html[data-ds-v2] .regime-pill.active,
html[data-ds-v2] .status-pill.active { background: var(--ds-primary-500); color: #fff; border-color: transparent; }

/* ============================================================
   LOT C (suite) + I — pagination, breadcrumb, onglets, en-tête de page
   ============================================================ */
/* Pagination : bouton actif corail plein, radius md */
html[data-ds-v2] .ds-pagination__btn,
html[data-ds-v2] .ds-pagination__item {
    border-radius: var(--ds-radius-md);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
html[data-ds-v2] .ds-pagination__btn:hover { border-color: var(--ds-border-strong); }
html[data-ds-v2] .ds-pagination__btn--active,
html[data-ds-v2] .ds-pagination__item.is-active,
html[data-ds-v2] .ds-pagination__item.active {
    background: var(--ds-primary-500) !important;
    border-color: var(--ds-primary-500) !important;
    color: #fff !important;
    font-weight: var(--ds-font-semibold);
}
html[data-ds-v2] .ds-pagination__info { font-family: var(--ds-font-mono); color: var(--ds-text-muted); }

/* Fil d'Ariane */
html[data-ds-v2] .ds-breadcrumb__link { color: var(--ds-text-muted); }
html[data-ds-v2] .ds-breadcrumb__link:hover { color: var(--ds-primary-600); }
html[data-ds-v2] .ds-breadcrumb__current { color: var(--ds-text-primary); font-weight: var(--ds-font-semibold); }
html[data-ds-v2] .ds-breadcrumb__separator { color: var(--ds-text-muted); }

/* Onglets : actif = texte fort + filet corail dessous */
html[data-ds-v2] .ds-tabs__btn,
html[data-ds-v2] .ds-tab { color: var(--ds-text-muted); font-weight: var(--ds-font-medium); transition: color .15s ease, box-shadow .15s ease; }
html[data-ds-v2] .ds-tabs__btn:hover,
html[data-ds-v2] .ds-tab:hover { color: var(--ds-text-primary); }
html[data-ds-v2] .ds-tabs__btn.is-active,
html[data-ds-v2] .ds-tabs__btn.active,
html[data-ds-v2] .ds-tab.is-active,
html[data-ds-v2] .ds-tab.active,
html[data-ds-v2] .ds-tabs__btn[aria-selected="true"] {
    color: var(--ds-text-primary) !important;
    font-weight: var(--ds-font-semibold);
    box-shadow: inset 0 -2px 0 var(--ds-primary-500);
}
html[data-ds-v2] .ds-tab__badge { background: var(--ds-bg-tertiary); color: var(--ds-text-secondary); border-radius: var(--ds-radius-full); }

/* En-tête de page / contenu : titre Sora, sous-titre muted */
html[data-ds-v2] .ds-content-header__text > :first-child,
html[data-ds-v2] .ds-content-header h1,
html[data-ds-v2] .ds-content-header h2 { font-family: var(--ds-font-display); letter-spacing: -.02em; }
html[data-ds-v2] .ds-content-header__subtitle { color: var(--ds-text-muted); }

/* Stepper / wizard d'onboarding (classes génériques fréquentes) */
html[data-ds-v2] .wizard-step.completed .wizard-step__circle,
html[data-ds-v2] .step.is-complete .step__num { background: var(--ds-success-500); color: #fff; border-color: transparent; }
html[data-ds-v2] .wizard-step.active .wizard-step__circle,
html[data-ds-v2] .step.is-active .step__num {
    background: var(--ds-primary-500); color: #fff; border-color: transparent;
    box-shadow: 0 0 0 4px var(--ds-primary-100);
}

/* États d'erreur (404/500…) : le grand code passait corail→indigo (#6366f1
   hardcodé). On le rend full-corail (le proto montre un code corail uni). */
html[data-ds-v2] .error-code {
    background-image: linear-gradient(135deg, var(--ds-primary-500), var(--ds-primary-700)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ============================================================
   POLISH — searchable-select (SYSCOHADA), ⌘K, wizard onboarding
   ============================================================ */
/* Sélecteur recherchable (compte SYSCOHADA, pickers) */
html[data-ds-v2] .searchable-select__input-wrap:focus-within {
    border-color: var(--ds-primary-500);
    box-shadow: var(--ds-focus-ring);
}
html[data-ds-v2] .searchable-select__dropdown { border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-lg); }
html[data-ds-v2] .searchable-select__option:hover,
html[data-ds-v2] .searchable-select__option.is-active { background: var(--ds-bg-tertiary); }
html[data-ds-v2] .searchable-select__option.is-selected {
    background: var(--ds-primary-50) !important;
    color: var(--ds-primary-700) !important;
    font-weight: var(--ds-font-semibold);
}

/* Palette de commandes ⌘K */
html[data-ds-v2] .command-palette__panel,
html[data-ds-v2] .command-palette .cmdk-panel { border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-xl); }
html[data-ds-v2] .command-palette__item.is-active,
html[data-ds-v2] .command-palette__item:hover { background: var(--ds-bg-tertiary); }
html[data-ds-v2] .command-palette__item.is-active i { color: var(--ds-primary-600); }

/* Commentaires & mentions */
html[data-ds-v2] .mention { color: var(--ds-primary-600); font-weight: var(--ds-font-semibold); }

/* Wizard d'onboarding : son thème indigo Tailwind → corail (scopé .wizard-shell) */
html[data-ds-v2] .wizard-shell .bg-indigo-600,
html[data-ds-v2] .wizard-shell .bg-indigo-500 { background-color: var(--ds-primary-500) !important; }
html[data-ds-v2] .wizard-shell .bg-indigo-100 { background-color: var(--ds-primary-100) !important; }
html[data-ds-v2] .wizard-shell .bg-indigo-50 { background-color: var(--ds-primary-50) !important; }
html[data-ds-v2] .wizard-shell .text-indigo-600,
html[data-ds-v2] .wizard-shell .text-indigo-700,
html[data-ds-v2] .wizard-shell .text-indigo-800 { color: var(--ds-primary-700) !important; }
html[data-ds-v2] .wizard-shell .border-indigo-500,
html[data-ds-v2] .wizard-shell .border-indigo-600 { border-color: var(--ds-primary-500) !important; }
html[data-ds-v2] .wizard-step-circle.bg-gray-300 { background-color: var(--ds-bg-tertiary) !important; color: var(--ds-text-muted) !important; }
html[data-ds-v2] .wizard-stepper-item.is-active .wizard-step-circle { box-shadow: 0 0 0 4px var(--ds-primary-100); }
html[data-ds-v2] .wizard-header h1,
html[data-ds-v2] .wizard-step-card h2,
html[data-ds-v2] .wizard-step-card h3 { font-family: var(--ds-font-display); }

/* ============================================================
   CORRECTIFS AUDIT (2026-06-22)
   ============================================================ */
/* 1. Contrôles natifs (radio/checkbox/date/range) au corail — accent-color hérite */
html[data-ds-v2] { accent-color: var(--ds-primary-500); }

/* 2. Dialogues og-dialog.js : voile + bouton + focus + icône verts (#06352c) → corail/warm */
html[data-ds-v2] .og-dlg-backdrop { background: var(--ds-bg-overlay) !important; }
html[data-ds-v2] .og-dlg { border-radius: var(--ds-radius-lg) !important; }
html[data-ds-v2] .og-dlg-btn--primary {
    background: var(--ds-primary-500) !important;
    border-color: var(--ds-primary-500) !important;
    box-shadow: 0 4px 14px -6px rgba(242, 102, 78, .5) !important;
}
html[data-ds-v2] .og-dlg-icon--info { background: var(--ds-primary-50) !important; color: var(--ds-primary-600) !important; }
html[data-ds-v2] .og-dlg-input:focus { border-color: var(--ds-primary-500) !important; box-shadow: var(--ds-focus-ring) !important; }

/* 3. Remap GLOBAL des utilitaires indigo Tailwind (ancien primaire #4F46E5/#6366F1) → corail.
   Couvre /settings (pire offenseur), le wizard, et toute autre page Tailwind-indigo. */
html[data-ds-v2] .bg-indigo-500,
html[data-ds-v2] .bg-indigo-600,
html[data-ds-v2] .bg-indigo-700 { background-color: var(--ds-primary-500) !important; }
html[data-ds-v2] .hover\:bg-indigo-600:hover,
html[data-ds-v2] .hover\:bg-indigo-700:hover { background-color: var(--ds-primary-600) !important; }
html[data-ds-v2] .text-indigo-500,
html[data-ds-v2] .text-indigo-600,
html[data-ds-v2] .text-indigo-700,
html[data-ds-v2] .text-indigo-800 { color: var(--ds-primary-600) !important; }
html[data-ds-v2] .border-indigo-300 { border-color: var(--ds-primary-200) !important; }
html[data-ds-v2] .border-indigo-400,
html[data-ds-v2] .border-indigo-500,
html[data-ds-v2] .border-indigo-600 { border-color: var(--ds-primary-500) !important; }
html[data-ds-v2] .bg-indigo-50 { background-color: var(--ds-primary-50) !important; }
html[data-ds-v2] .bg-indigo-100 { background-color: var(--ds-primary-100) !important; }
html[data-ds-v2] .ring-indigo-400,
html[data-ds-v2] .ring-indigo-500,
html[data-ds-v2] .ring-indigo-600 { --tw-ring-color: var(--ds-primary-500) !important; }
html[data-ds-v2] .from-indigo-500,
html[data-ds-v2] .from-indigo-600 { --tw-gradient-from: var(--ds-primary-500) !important; }
html[data-ds-v2] .to-indigo-500,
html[data-ds-v2] .to-indigo-600 { --tw-gradient-to: var(--ds-primary-600) !important; }

/* Auth pages — logo container : border + shadow corail en v2 */
html[data-ds-v2] .logo-section .logo {
    border-color: var(--ds-primary-300) !important;
    box-shadow: 0 8px 24px rgba(242, 102, 78, 0.20) !important;
    background: #fff !important;
}

/* 4. Liens sans classe (titres de carte /audit en bleu #0000EE par défaut) → texte lisible */
html[data-ds-v2] a:not([class]) { color: var(--ds-text-primary); text-decoration: none; }
html[data-ds-v2] a:not([class]):hover { color: var(--ds-primary-600); }

/* Sous-menu accordéon */
html[data-ds-v2] .nav-submenu { padding-left: 14px; }
html[data-ds-v2] .nav-sublink {
    color: #cdc6bd;
    border-left: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
}
html[data-ds-v2] .nav-sublink:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
html[data-ds-v2] .nav-sublink.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--ds-primary-500);
}
html[data-ds-v2] .nav-group-icon { color: #948b7f; }
html[data-ds-v2] .nav-divider { background: rgba(255, 255, 255, 0.08); }

/* Pied : profil + bouton Launcher */
html[data-ds-v2] .sidebar-footer { border-top-color: rgba(255, 255, 255, 0.08); }
html[data-ds-v2] .user-name-sidebar { color: #fff; }
html[data-ds-v2] .user-email-sidebar { color: #948b7f; }
/* Hover profil : la règle de base met var(--ds-bg-secondary) (crème) → texte
   blanc invisible sur sidebar sombre. On aligne sur le hover du bouton Launcher
   (translucide blanc) pour garder le nom/email lisibles. */
html[data-ds-v2] .user-profile-sidebar:hover { background-color: rgba(255, 255, 255, 0.08); }
html[data-ds-v2] .user-avatar-sidebar { background: var(--ds-primary-500); color: #fff; }
html[data-ds-v2] .btn-back {
    color: #cdc6bd;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ds-radius-md);
}
html[data-ds-v2] .btn-back:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
html[data-ds-v2] .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); }

/* --- Sidebar REPLIÉE (v2) : icônes centrées, labels/chevrons/sous-menus masqués,
       item actif = carré corail teinté (conforme à la variante repliée du proto) --- */
/* Lignes PLEINE LARGEUR (pas de marge horizontale → aucun débordement possible,
   le toggle a width:100% en base), contenu centré, sans surlignage de ligne :
   le surlignage actif est porté par l'ICÔNE (carré 38px corail), conforme au proto.
   → toutes les icônes (lien ET groupe) tombent exactement sur l'axe central. */
html[data-ds-v2] .sidebar.collapsed .nav-link,
html[data-ds-v2] .sidebar.collapsed .nav-group-toggle {
    justify-content: center;
    width: 100%;
    margin: 2px 0;
    padding: 4px 0;
    background: transparent !important;
    border-radius: 0;
}
html[data-ds-v2] .sidebar.collapsed .nav-link span,
html[data-ds-v2] .sidebar.collapsed .nav-group-label span,
html[data-ds-v2] .sidebar.collapsed .nav-group-icon,
html[data-ds-v2] .sidebar.collapsed .nav-link__badge,
html[data-ds-v2] .sidebar.collapsed .nav-submenu { display: none !important; }
html[data-ds-v2] .sidebar.collapsed .nav-group-label { flex: none; justify-content: center; gap: 0; margin: 0; }
html[data-ds-v2] .sidebar.collapsed .nav-link.active::before { display: none; } /* pas de filet gauche en replié */
/* Icône = carré 38px centré ; survol/actif = carré teinté */
html[data-ds-v2] .sidebar.collapsed .nav-link i,
html[data-ds-v2] .sidebar.collapsed .nav-group-label i {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--ds-radius-md);
    font-size: 18px;
    transition: background .15s ease, color .15s ease;
}
html[data-ds-v2] .sidebar.collapsed .nav-link:hover i,
html[data-ds-v2] .sidebar.collapsed .nav-group-toggle:hover .nav-group-label i { background: rgba(255, 255, 255, 0.06); color: #fff; }
html[data-ds-v2] .sidebar.collapsed .nav-link.active i,
html[data-ds-v2] .sidebar.collapsed .nav-group-toggle.active .nav-group-label i {
    background: rgba(242, 102, 78, 0.18) !important;
    color: var(--ds-primary-500) !important;
}
/* En-tête replié : titre MASQUÉ (display:none, sinon flex:1 pousse le logo à gauche)
   + logo centré et réduit pour le rail étroit. */
html[data-ds-v2] .sidebar.collapsed .sidebar-header { justify-content: center; padding: 1rem 0; gap: 0; }
html[data-ds-v2] .sidebar.collapsed .sidebar-title { display: none !important; }
html[data-ds-v2] .sidebar.collapsed .sidebar-logo {
    width: 40px !important; height: 40px !important;
    font-size: 0.9rem !important; flex: none;
}
/* Pied replié : profil + avatar centrés, infos masquées, Launcher en icône centrée. */
html[data-ds-v2] .sidebar.collapsed .sidebar-footer { padding-left: 0; padding-right: 0; }
html[data-ds-v2] .sidebar.collapsed .user-profile-sidebar { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
html[data-ds-v2] .sidebar.collapsed .user-info-sidebar { display: none !important; }
html[data-ds-v2] .sidebar.collapsed .btn-back {
    justify-content: center;
    margin: 0.5rem 12px 0;
    padding: 10px 0;
    border-radius: var(--ds-radius-md);
}
html[data-ds-v2] .sidebar.collapsed .btn-back span { display: none; }

/* --- DOUBLE-ACTIF : si un sous-lien est actif dans un groupe, le toggle parent
       n'est PAS rendu « corail actif » — il reste neutre (ouvert). Seul le
       sous-lien actif porte le surlignage. (Empêche 2 items corail simultanés.) --- */
html[data-ds-v2] .sidebar:not(.collapsed) .nav-group:has(.nav-sublink.active) .nav-group-toggle.active {
    background: transparent !important;
    color: #fff !important;
}
html[data-ds-v2] .sidebar:not(.collapsed) .nav-group:has(.nav-sublink.active) .nav-group-toggle.active .nav-group-label i { color: #cdc6bd !important; }
html[data-ds-v2] .sidebar:not(.collapsed) .nav-group:has(.nav-sublink.active) .nav-group-toggle.active .nav-group-label i::before { font-family: 'Phosphor' !important; }

/* ============================================================
   PROTO-SYNC (lots A→I lus 2026-06-22) — raffinements pixel
   ============================================================ */

/* --- Lot D: boutons — variante outline --- */
html[data-ds-v2] .ds-btn--outline {
    background: transparent;
    border: 1.5px solid var(--ds-primary-500);
    color: var(--ds-primary-600);
}
html[data-ds-v2] .ds-btn--outline:not(:disabled):hover {
    background: var(--ds-primary-50);
    border-color: var(--ds-primary-600);
}

/* --- Lot B / F: variante carte avec accent corail à gauche --- */
html[data-ds-v2] .ds-card--accent {
    border-left: 4px solid var(--ds-primary-500) !important;
}

/* --- Lot E: focus ring sur les inputs natifs dans les grilles et formulaires --- */
html[data-ds-v2] .ds-form-grid input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,
html[data-ds-v2] .ds-form-grid select:focus,
html[data-ds-v2] .ds-form-grid textarea:focus,
html[data-ds-v2] .og-form input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,
html[data-ds-v2] .og-form select:focus,
html[data-ds-v2] .og-form textarea:focus {
    outline: none;
    border-color: var(--ds-primary-500) !important;
    box-shadow: var(--ds-focus-ring) !important;
}
/* Barre de recherche principale (ds-search-box__input) */
html[data-ds-v2] .ds-search-box__input:focus {
    border-color: var(--ds-primary-500) !important;
    box-shadow: var(--ds-focus-ring) !important;
    outline: none;
}

/* --- Lot E: addon / group texte (prefix FCFA, suffix %) --- */
html[data-ds-v2] .input-group-text,
html[data-ds-v2] .ds-input-addon {
    background: var(--ds-bg-tertiary) !important;
    border-color: var(--ds-border-strong) !important;
    color: var(--ds-text-muted) !important;
    font-family: var(--ds-font-mono);
}

/* --- Lot E: toggle/switch — état activé en corail --- */
html[data-ds-v2] .ds-toggle input:checked ~ .ds-toggle__track,
html[data-ds-v2] .ds-switch input:checked ~ .ds-switch__track,
html[data-ds-v2] .toggle-input:checked + .toggle-track {
    background: var(--ds-primary-500) !important;
}

/* --- Lot E: zone d'upload (drag-and-drop) --- */
html[data-ds-v2] .ds-upload-zone,
html[data-ds-v2] .ds-dropzone,
html[data-ds-v2] .upload-area {
    border: 1.5px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-bg-tertiary);
    transition: border-color .15s ease, background .15s ease;
}
html[data-ds-v2] .ds-upload-zone:hover,
html[data-ds-v2] .ds-upload-zone.is-dragover,
html[data-ds-v2] .ds-dropzone:hover {
    border-color: var(--ds-primary-500) !important;
    background: var(--ds-primary-50) !important;
}
html[data-ds-v2] .ds-upload-zone__icon,
html[data-ds-v2] .ds-dropzone__icon { color: var(--ds-primary-500); }

/* --- Lot F: icônes stat — couleurs hardcodées vertes → tokens sémantiques --- */
html[data-ds-v2] .ds-stat__icon--primary {
    background-color: var(--ds-primary-50) !important;
    color: var(--ds-primary-600) !important;
    box-shadow: inset 0 0 0 1px var(--ds-primary-100) !important;
}
html[data-ds-v2] .ds-stat__icon--warning {
    background-color: var(--ds-warning-50) !important;
    color: var(--ds-warning-700) !important;
    box-shadow: inset 0 0 0 1px var(--ds-warning-100) !important;
}
html[data-ds-v2] .ds-stat__icon--danger {
    background-color: var(--ds-danger-50) !important;
    color: var(--ds-danger-600) !important;
    box-shadow: inset 0 0 0 1px var(--ds-danger-100) !important;
}
html[data-ds-v2] .ds-stat__icon--info {
    background-color: var(--ds-info-50) !important;
    color: var(--ds-info-600) !important;
    box-shadow: inset 0 0 0 1px var(--ds-info-100) !important;
}
html[data-ds-v2] .ds-stat__icon--success {
    background-color: var(--ds-success-50) !important;
    color: var(--ds-success-600) !important;
    box-shadow: inset 0 0 0 1px var(--ds-success-100) !important;
}

/* --- Lot F: ligne sélectionnée dans les tableaux → primary-50 --- */
html[data-ds-v2] .ds-table tr.is-selected td,
html[data-ds-v2] .ds-table tr:has(input[type="checkbox"]:checked) td { background: var(--ds-primary-50) !important; }

/* --- Lot F: barre d'actions groupées (bulk) → fond corail teinté --- */
html[data-ds-v2] .ds-table__bulk-actions,
html[data-ds-v2] .bulk-action-bar,
html[data-ds-v2] .ds-bulk-bar {
    background: var(--ds-primary-50) !important;
    border-bottom: 1px solid var(--ds-primary-100) !important;
    color: var(--ds-primary-700) !important;
}

/* --- Lot F: chip/filtre actif dans la barre de filtres --- */
html[data-ds-v2] .ds-filter-chip--active,
html[data-ds-v2] .filter-chip.is-active,
html[data-ds-v2] .ds-filter-badge {
    background: var(--ds-primary-50) !important;
    color: var(--ds-primary-700) !important;
    border-radius: var(--ds-radius-full) !important;
    font-weight: var(--ds-font-semibold);
}
html[data-ds-v2] .ds-filter-chip--active .ds-icon,
html[data-ds-v2] .filter-chip.is-active i { color: var(--ds-primary-700) !important; }

/* --- Lot F: tendance KPI (▲ / ▼) --- */
html[data-ds-v2] .ds-stat__trend--up,
html[data-ds-v2] .ds-stat__change--positive { color: var(--ds-success-600) !important; }
html[data-ds-v2] .ds-stat__trend--down,
html[data-ds-v2] .ds-stat__change--negative { color: var(--ds-danger-600) !important; }

/* --- Lot F: timeline — point actif avec anneau corail-100 --- */
html[data-ds-v2] .ds-timeline-dot--active,
html[data-ds-v2] .timeline-item--current .timeline-dot,
html[data-ds-v2] .timeline-event.is-current .event-dot {
    background: var(--ds-primary-500) !important;
    box-shadow: 0 0 0 3px var(--ds-primary-100) !important;
}

/* --- Lot F: dropdowns / combobox — option sélectionnée → primary-50 --- */
html[data-ds-v2] .ds-dropdown__item--selected,
html[data-ds-v2] .ds-dropdown__option.is-selected,
html[data-ds-v2] .autocomplete-option.is-selected,
html[data-ds-v2] .og-autocomplete-option.selected {
    background: var(--ds-primary-50) !important;
    color: var(--ds-primary-700) !important;
    font-weight: var(--ds-font-semibold);
}

/* --- Lot I: navigation latérale Settings — onglet actif = surface + shadow-xs --- */
html[data-ds-v2] .ds-settings-sidebar__item.is-active,
html[data-ds-v2] .settings-nav-item.active,
html[data-ds-v2] .tab-nav-item.active {
    background: var(--ds-bg-primary) !important;
    box-shadow: var(--ds-shadow-xs) !important;
    border-radius: var(--ds-radius-sm) !important;
    color: var(--ds-text-primary) !important;
    font-weight: var(--ds-font-semibold);
}

/* --- Laravel pagination ul.pagination (vendor/pagination/default.blade.php) --- */
html[data-ds-v2] ul.pagination {
    display: flex; gap: 4px; list-style: none; margin: 0; padding: 0;
    font-family: var(--ds-font-mono); font-size: 12px;
}
html[data-ds-v2] ul.pagination li a,
html[data-ds-v2] ul.pagination li span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 6px;
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border-strong);
    background: var(--ds-bg-primary);
    color: var(--ds-text-secondary);
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}
html[data-ds-v2] ul.pagination li a:hover { border-color: var(--ds-primary-300); color: var(--ds-primary-600); }
html[data-ds-v2] ul.pagination li.active span,
html[data-ds-v2] ul.pagination li.active a {
    background: var(--ds-primary-500) !important;
    border-color: var(--ds-primary-500) !important;
    color: #fff !important;
    font-weight: var(--ds-font-semibold);
}
html[data-ds-v2] ul.pagination li.disabled span,
html[data-ds-v2] ul.pagination li.disabled a { opacity: .4; cursor: not-allowed; }

/* --- Lot B: pill badges legacy (ds-pill-green → success, ds-pill-blue → info) --- */
html[data-ds-v2] .ds-pill-green { background: var(--ds-success-50) !important; color: var(--ds-success-700) !important; }
html[data-ds-v2] .ds-pill-blue  { background: var(--ds-info-50) !important;    color: var(--ds-info-700) !important;    }