/* ===================================================================
   BaobabProcure — Thème « Verdant » (light-first)
   Réécriture du design system d'après les captures de référence HiveQ.

   Charge APRÈS app.css et dark-mode.css. Ne modifie aucun markup :
   tout passe par les tokens + un jeu ciblé de surcharges pour les
   composants qui codaient leurs valeurs en dur.

   Partis pris vs. « Clarity v3 » :
     · sidebar BLANCHE (était noire dans les deux thèmes)
     · primaire ÉMERAUDE plat (était bleu roi + dégradé)
     · une seule famille : Plus Jakarta Sans, chiffres tabulaires
       (le mono JetBrains ne sert plus aux montants)
     · bandeaux colorés en haut des KPI supprimés → tuiles d'icônes
     · ombres divisées par ~3, la hairline porte la séparation
   =================================================================== */


/* ============================================================
   1. TOKENS — MODE CLAIR
   ============================================================ */
:root {
    /* ── Typographie ── */
    --font-body: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Segoe UI', 'Liberation Sans', Arial, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Segoe UI', 'Liberation Sans', Arial, sans-serif;
    --font-num: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Segoe UI', 'Liberation Sans', Arial, sans-serif;

    /* Échelle fixe (produit : pas de fluide) — ratio ~1.15 */
    --text-xs: 0.6875rem;   /* 11 */
    --text-sm: 0.8125rem;   /* 13 */
    --text-base: 0.875rem;  /* 14 — corps */
    --text-md: 0.9375rem;   /* 15 */
    --text-lg: 1.0625rem;   /* 17 */
    --text-xl: 1.25rem;     /* 20 */
    --text-2xl: 1.5rem;     /* 24 */
    --text-3xl: 1.875rem;   /* 30 */
    --text-4xl: 2.25rem;    /* 36 */

    /* ── Surfaces ── */
    --bg-page:     #F6F7F9;
    --bg-surface:  #FFFFFF;
    --bg-elevated: #FCFCFD;
    --bg-hover:    #F2F4F7;
    --bg-active:   #E8EBF0;
    --bg-input:    #FFFFFF;
    --bg-overlay:  rgba(16, 22, 34, 0.42);
    --bg-glass:    rgba(255, 255, 255, 0.86);

    /* ── Sidebar : BLANCHE ── */
    --sidebar-bg:       #FFFFFF;
    --sidebar-bg-2:     #FFFFFF;
    --sidebar-text:     #545B67;
    --sidebar-text-dim: #98A0AC;
    --sidebar-hover:    #F4F6F8;
    --sidebar-active:   #E9F6F0;
    --sidebar-active-2: #E9F6F0;
    --sidebar-border:   #EDEFF3;

    /* ── Primaire : émeraude, plat ── */
    --primary:        #0E9F6E;
    --primary-hover:  #0B855C;
    --primary-active: #096F4D;
    --primary-light:  #34C48E;
    --primary-soft:   #E6F6EF;
    --primary-muted:  rgba(14, 159, 110, 0.09);
    --primary-gradient: #0E9F6E;   /* neutralise le dégradé hérité */
    --primary-glow:   0 1px 2px rgba(9, 111, 77, 0.16);

    /* ── Sémantiques ── */
    --success:       #0E9F6E;
    --success-light: #34C48E;
    --success-soft:  #E6F6EF;
    --success-muted: rgba(14, 159, 110, 0.09);
    --danger:        #D93A3F;
    --danger-light:  #F27478;
    --danger-soft:   #FDECEC;
    --danger-muted:  rgba(217, 58, 63, 0.09);
    --warning:       #C25E12;
    --warning-light: #F2762E;
    --warning-soft:  #FDF0E6;
    --warning-muted: rgba(242, 118, 46, 0.11);
    --info:          #3B5BDB;
    --info-light:    #6C8BF0;
    --info-soft:     #EAEEFC;
    --info-muted:    rgba(59, 91, 219, 0.09);
    --purple:        #6D4AF0;
    --purple-muted:  rgba(109, 74, 240, 0.09);

    /* ── Texte — tous ≥ 4.5:1 sur blanc pour le corps ── */
    --text-primary:   #14171C;  /* 16.6:1 */
    --text-secondary: #4A515C;  /* 8.4:1  */
    --text-muted:     #626A77;  /* 5.6:1  */
    --text-faint:     #98A0AC;  /* décor / disabled uniquement */
    --text-inverse:   #FFFFFF;

    /* ── Bordures : la hairline porte la séparation ── */
    --border:        #EBEDF1;
    --border-strong: #DCE0E6;
    --border-light:  #F2F4F7;
    --border-focus:  rgba(14, 159, 110, 0.38);

    /* ── Ombres : ~3× plus légères ── */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 2px 6px rgba(16, 24, 40, 0.05), 0 6px 16px rgba(16, 24, 40, 0.04);
    --shadow-lg: 0 4px 12px rgba(16, 24, 40, 0.06), 0 16px 40px rgba(16, 24, 40, 0.08);
    --shadow-xl: 0 8px 20px rgba(16, 24, 40, 0.08), 0 28px 64px rgba(16, 24, 40, 0.12);
    --shadow-focus: 0 0 0 3px var(--primary-muted), 0 0 0 1px var(--primary);

    /* ── Rayons ── */
    --radius-xs: 5px;
    --radius-sm: 7px;
    --radius-md: 9px;
    --radius-lg: 11px;
    --radius-xl: 14px;
    --radius-2xl: 18px;
    --radius-full: 9999px;

    /* ── Layout ── */
    --sidebar-width: 254px;
    --topbar-height: 64px;

    /* ── Motion : 150–220 ms, ease-out ── */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    --duration: 160ms;
    --duration-slow: 220ms;

    /* Échelle z sémantique */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-backdrop: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;
}

/* ============================================================
   2. BASE
   ============================================================ */
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    background: var(--bg-page);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text-primary);
    letter-spacing: -0.018em;
    font-weight: 700;
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Chiffres : la sans à chasse tabulaire remplace le mono.
   code / pre / kbd restent en chasse fixe — c'est du vrai code. */
.stat-value, .kpi-value, .rpt-kpi-value, .metric-value,
.amount, .reference, .ref, .text-mono, .mono, .stat-card .stat-value {
    font-family: var(--font-num) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
/* Échappatoire si du vrai code doit rester en chasse fixe */
.force-mono { font-family: 'JetBrains Mono', ui-monospace, monospace !important; }

/* ============================================================
   3. SIDEBAR — passage au blanc
   ============================================================ */
.sidebar {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid var(--sidebar-border);
}

.sidebar-logo {
    padding: 18px 16px;
    border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-logo:hover { background: var(--sidebar-hover); }
.sidebar-logo .logo-icon {
    background: var(--primary) !important;
    border-radius: 9px;
    width: 34px; height: 34px;
    font-size: 17px;
    box-shadow: none !important;
}
.sidebar-logo .logo-text { color: var(--text-primary) !important; font-size: 17px; font-weight: 700; }
.sidebar-logo .logo-sub  { color: var(--sidebar-text-dim) !important; letter-spacing: 0.1em; }

.sidebar-nav { padding: 12px 12px 16px; }

.nav-section-title {
    color: var(--sidebar-text-dim);
    font-size: 11px;
    font-weight: 600;
    text-transform: none;      /* la réf. n'est pas en capitales */
    letter-spacing: 0.01em;
    padding: 16px 12px 6px;
}

.nav-link {
    color: var(--sidebar-text);
    font-weight: 500;
    font-size: 13.5px;
    padding: 9px 12px;
    border-radius: 9px;
    margin: 2px 0;
}
.nav-link:hover { color: var(--text-primary); background: var(--sidebar-hover); }
.nav-link.active {
    color: var(--primary) !important;
    background: var(--sidebar-active) !important;
    font-weight: 600;
}
/* Indicateur de sélection collé au bord de la sidebar (pattern nav standard) */
.nav-link.active::before {
    left: -12px;
    top: 9px; bottom: 9px;
    width: 3px;
    background: var(--primary);
    border-radius: 0 3px 3px 0;
}
.nav-link i, .nav-link .nav-icon { opacity: 1; color: var(--sidebar-text-dim); font-size: 15px; }
.nav-link:hover i, .nav-link:hover .nav-icon { color: var(--text-secondary); }
.nav-link.active i, .nav-link.active .nav-icon { color: var(--primary) !important; }

.nav-badge {
    background: var(--primary);
    box-shadow: none;
    font-weight: 700;
    font-size: 10px;
}
.nav-badge.danger  { background: var(--danger);  box-shadow: none; }
.nav-badge.warning { background: var(--warning-light); box-shadow: none; }
.nav-badge.info    { background: var(--info);    box-shadow: none; }

/* ============================================================
   4. TOP BAR
   ============================================================ */
.top-bar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}
.top-bar-left .breadcrumb strong { font-weight: 700; letter-spacing: -0.015em; }
.top-bar-search {
    background: var(--bg-hover);
    border: 1px solid transparent;
    border-radius: 9px;
}
.top-bar-search:focus-within {
    background: var(--bg-surface);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-focus);
}
.top-bar-search input::placeholder { color: var(--text-muted); }

.icon-btn {
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ============================================================
   5. CARTES
   ============================================================ */
.card, .glass-panel, .kpi-tile, .rpt-kpi-card,
.metric-card, .detail-card, .org-card, .cat-card, .budget-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs) !important;
}
.card:hover, .kpi-tile:hover, .rpt-kpi-card:hover, .metric-card:hover {
    box-shadow: var(--shadow-sm) !important;
    transform: none !important;          /* la réf. ne fait pas léviter les cartes */
    border-color: var(--border-strong) !important;
}
.card.interactive:hover { transform: none !important; border-color: var(--border-strong); }

.card-title { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; }
.card-subtitle { font-size: 12.5px; color: var(--text-muted); }

/* Le verre n'est pas un défaut : on l'aplatit */
.glass-panel { backdrop-filter: none !important; }

/* ============================================================
   6. KPI / STAT CARDS — suppression des bandeaux colorés
   ============================================================ */
.kpi-tile::before, .kpi-tile::after,
.stat-card::before, .stat-card::after,
.rpt-kpi-card::before, .metric-card::before {
    display: none !important;
    content: none !important;
}
.kpi-tile, .stat-card { border-top-width: 1px !important; padding: 18px !important; }

/* Tuile d'icône pleine, à la manière de la référence */
.kpi-icon, .stat-icon, .rpt-kpi-icon {
    width: 38px !important; height: 38px !important;
    border-radius: 10px !important;
    color: #FFFFFF !important;
    font-size: 15px !important;
    box-shadow: none !important;
    display: flex; align-items: center; justify-content: center;
}
.kpi-icon.accent,  .stat-icon.primary { background: var(--primary) !important; }
.kpi-icon.green,   .stat-icon.success { background: var(--primary) !important; }
.kpi-icon.amber,   .stat-icon.warning { background: var(--warning-light) !important; }
.kpi-icon.red,     .stat-icon.danger  { background: var(--danger) !important; }
.kpi-icon.blue,    .stat-icon.info    { background: var(--info) !important; }
.kpi-icon.purple                       { background: var(--purple) !important; }
.kpi-icon.teal, .kpi-icon.cyan         { background: var(--info) !important; }

.kpi-value, .stat-value, .rpt-kpi-value {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    line-height: 1.15;
}
.kpi-label, .stat-label, .rpt-kpi-label {
    font-size: 12.5px !important;
    font-weight: 500;
    color: var(--text-muted) !important;
}
.kpi-trend, .stat-trend {
    font-size: 11px; font-weight: 700;
    border-radius: var(--radius-full);
    padding: 3px 8px;
}
.kpi-trend.up, .stat-trend.up       { background: var(--primary-soft); color: var(--primary-active); }
.kpi-trend.down, .stat-trend.down   { background: var(--danger-soft);  color: var(--danger); }
.kpi-trend.neutral, .stat-trend.neutral { background: var(--bg-hover); color: var(--text-muted); }

/* ============================================================
   7. BOUTONS — plats, calmes
   ============================================================ */
.btn {
    border-radius: 9px;
    font-weight: 600;
    font-size: 13.5px;
    padding: 9px 16px;
    letter-spacing: -0.005em;
}
.btn:active { transform: scale(0.985); }
.btn:focus-visible { box-shadow: var(--shadow-focus); }

.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #FFFFFF !important;
    box-shadow: var(--primary-glow) !important;
}
.btn-primary:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; transform: none !important; }
.btn-primary:active { background: var(--primary-active) !important; }

.btn-secondary, .btn-outline-primary {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-secondary) !important;
    box-shadow: var(--shadow-xs);
}
.btn-secondary:hover, .btn-outline-primary:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    transform: none !important;
}
.btn-success { background: var(--primary) !important; border-color: var(--primary) !important; }
.btn-success:hover { background: var(--primary-hover) !important; transform: none !important; }
.btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; }
.btn-danger:hover { background: #BE2F34 !important; transform: none !important; }
.btn-ghost:hover { background: var(--bg-hover); }
.btn:disabled { opacity: 0.45; }

/* ============================================================
   8. FORMULAIRES
   ============================================================ */
.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], select, textarea {
    border-radius: 9px !important;
    border: 1px solid var(--border-strong) !important;
    background: var(--bg-input) !important;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--text-primary);
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: var(--shadow-focus) !important;
    outline: none;
}
.form-control::placeholder, input::placeholder, textarea::placeholder {
    color: var(--text-muted);   /* 5.6:1 — pas de gris fantôme */
    opacity: 1;
}
.form-label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }

/* ============================================================
   9. TABLEAUX
   ============================================================ */
.table, .data-table { font-size: 13.5px; }
.table th, .data-table th {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.045em;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    padding: 12px 14px;
}
.table td, .data-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
}
.table tbody tr:hover, .data-table tbody tr:hover { background: var(--bg-hover); }
.table tbody tr:last-child td { border-bottom: none; }
.table a, .data-table a { color: var(--primary); font-weight: 600; }

/* ============================================================
   10. BADGES — statut en contour, priorité en fond doux
   ============================================================ */
.badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-width: 1px;
    border-style: solid;
    letter-spacing: -0.005em;
}
.badge-success, .badge-approved, .badge-matched, .badge-complete, .badge-paid {
    background: var(--bg-surface); color: var(--primary-active); border-color: rgba(14, 159, 110, 0.34);
}
.badge-danger, .badge-rejected, .badge-blacklisted, .badge-cancelled, .badge-disputed {
    background: var(--bg-surface); color: var(--danger); border-color: rgba(217, 58, 63, 0.32);
}
.badge-warning, .badge-pendingapproval, .badge-pending {
    background: var(--bg-surface); color: var(--warning); border-color: rgba(194, 94, 18, 0.32);
}
.badge-info, .badge-sent, .badge-acknowledged, .badge-received {
    background: var(--bg-surface); color: var(--info); border-color: rgba(59, 91, 219, 0.32);
}
.badge-draft, .badge-neutral {
    background: var(--bg-surface); color: var(--text-muted); border-color: var(--border-strong);
}
/* Priorités : fond doux, sans contour — les deux vocabulaires restent distincts */
.badge-priority-low    { background: var(--bg-hover);      color: var(--text-muted); border-color: transparent; }
.badge-priority-normal { background: var(--info-soft);     color: var(--info);       border-color: transparent; }
.badge-priority-high   { background: var(--warning-soft);  color: var(--warning);    border-color: transparent; }
.badge-priority-urgent { background: var(--danger-soft);   color: var(--danger);     border-color: transparent; }
.badge-primary { background: var(--primary-soft); color: var(--primary-active); border-color: transparent; }

/* ============================================================
   11. CHIPS / ONGLETS / PAGINATION
   ============================================================ */
.filter-chip {
    border-radius: var(--radius-full);
    border: 1px solid var(--border-strong);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 15px;
}
.filter-chip:hover { background: var(--bg-hover); color: var(--text-primary); }
.filter-chip.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}
.tab-btn.active { color: var(--primary) !important; border-color: var(--primary) !important; }
.pagination .page-btn.active, .pagination button.active {
    background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important;
}

/* ============================================================
   12. PROGRESSION / FEEDBACK
   ============================================================ */
.progress-bar { background: var(--bg-active); height: 7px; }
.progress-fill { background: var(--primary); }
.progress-fill.green { background: var(--primary); }
.progress-fill.blue  { background: var(--info); }
.progress-fill.yellow{ background: var(--warning-light); }
.progress-fill.red   { background: var(--danger); }

.alert { border-radius: var(--radius-lg); border: 1px solid var(--border); font-size: 13.5px; }
.alert-success { background: var(--primary-soft); border-color: rgba(14,159,110,.22); color: var(--primary-active); }
.alert-danger  { background: var(--danger-soft);  border-color: rgba(217,58,63,.22);  color: var(--danger); }
.alert-warning { background: var(--warning-soft); border-color: rgba(194,94,18,.22);  color: var(--warning); }
.alert-info    { background: var(--info-soft);    border-color: rgba(59,91,219,.22);  color: var(--info); }

.toast { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.spinner, .loading { border-top-color: var(--primary) !important; }

.empty-state { color: var(--text-muted); }
.empty-state i { color: var(--text-faint); }

/* ============================================================
   13. MODALES
   ============================================================ */
.modal-overlay { background: var(--bg-overlay); backdrop-filter: blur(2px); z-index: var(--z-backdrop); }
.modal-container {
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    z-index: var(--z-modal);
}
.modal-header { border-bottom: 1px solid var(--border); }
.modal-footer { border-top: 1px solid var(--border); background: var(--bg-elevated); }
.toast-container { z-index: var(--z-toast); }

/* ============================================================
   14. EN-TÊTE DE PAGE
   ============================================================ */
.page-header h2, .dash-hero h1, .dash-hero h2 {
    font-size: var(--text-3xl);
    font-weight: 800;
    letter-spacing: -0.03em;
}
.page-header .subtitle, .dash-hero p { color: var(--text-muted); font-size: 14px; }
.app-footer { background: var(--bg-page); border-top: 1px solid var(--border); color: var(--text-muted); }

/* ============================================================
   15. AUTH
   ============================================================ */
.login-btn, .login-page .btn-primary {
    background: var(--primary) !important;
    box-shadow: var(--primary-glow) !important;
}
.login-btn:hover { background: var(--primary-hover) !important; }
.login-card { border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); border: 1px solid var(--border); }

/* ============================================================
   16. MODE SOMBRE — on garde l'émeraude, on rend la sidebar sombre
   ============================================================ */
[data-theme="dark"] {
    --primary:        #2FBF89;
    --primary-hover:  #46CE9A;
    --primary-active: #23A876;
    --primary-light:  #5BD9AC;
    --primary-soft:   rgba(47, 191, 137, 0.16);
    --primary-muted:  rgba(47, 191, 137, 0.13);
    --primary-gradient: #2FBF89;
    --primary-glow:   none;

    --success: #2FBF89;  --success-light: #5BD9AC;
    --success-soft: rgba(47,191,137,.16); --success-muted: rgba(47,191,137,.13);
    --danger: #F2686C;   --danger-soft: rgba(242,104,108,.16);  --danger-muted: rgba(242,104,108,.13);
    --warning: #F0913F;  --warning-soft: rgba(240,145,63,.16);  --warning-muted: rgba(240,145,63,.13);
    --info: #7A96F5;     --info-soft: rgba(122,150,245,.16);    --info-muted: rgba(122,150,245,.13);
    --purple: #9B84F7;

    --sidebar-bg:       #14171D;
    --sidebar-bg-2:     #14171D;
    --sidebar-text:     #A2AAB6;
    --sidebar-text-dim: #6B7480;
    --sidebar-hover:    rgba(255, 255, 255, 0.05);
    --sidebar-active:   rgba(47, 191, 137, 0.15);
    --sidebar-border:   rgba(255, 255, 255, 0.07);

    --border-focus: rgba(47, 191, 137, 0.45);
}
[data-theme="dark"] .sidebar-logo .logo-text { color: #FFFFFF !important; }
[data-theme="dark"] .sidebar-logo .logo-icon { background: var(--primary) !important; color: #0B1F17 !important; }
[data-theme="dark"] .badge-success, [data-theme="dark"] .badge-approved,
[data-theme="dark"] .badge-danger,  [data-theme="dark"] .badge-rejected,
[data-theme="dark"] .badge-warning, [data-theme="dark"] .badge-pending,
[data-theme="dark"] .badge-info,    [data-theme="dark"] .badge-draft,
[data-theme="dark"] .badge-neutral { background: transparent; }
[data-theme="dark"] .kpi-icon, [data-theme="dark"] .stat-icon { color: #0B1F17 !important; }
[data-theme="dark"] .top-bar-search { background: rgba(255,255,255,.05); }

/* ============================================================
   17. MOUVEMENT RÉDUIT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .btn:active { transform: none; }
}

/* ===================================================================
   18. REFONTE DE COMPOSITION — densité, hiérarchie, proportions
   Passe « SaaS produit » : on ne recolore pas, on recompose.
   =================================================================== */

/* ── 18.1 Échelle typographique (spec brief) ────────────────────── */
.page-header h2, .dash-hero h1, .dash-hero h2, h1 {
    font-size: 26px !important;     /* était 30–32 : titres moins imposants */
    font-weight: 700 !important;
    letter-spacing: -0.025em;
    line-height: 1.2;
}
h2 { font-size: 20px; }
h3, .section-title { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.card-title { font-size: 15px !important; font-weight: 600 !important; }
.page-header .subtitle, .dash-hero p, .dash-date {
    font-size: 13px !important; font-weight: 400; color: var(--text-muted) !important;
}
/* Medium/semibold plutôt que bold, partout où le gras n'informe pas */
.table td strong, .activity-text strong { font-weight: 600; }

/* ── 18.2 Sidebar affinée ───────────────────────────────────────── */
:root { --sidebar-width: 232px; }
.sidebar-logo { padding: 16px 14px; }
.sidebar-logo .logo-icon { width: 30px; height: 30px; font-size: 15px; border-radius: 8px; }
.sidebar-logo .logo-text { font-size: 15px !important; }
.sidebar-logo .logo-sub { font-size: 9px !important; }
.sidebar-nav { padding: 8px 10px 16px; }
.nav-section { margin-bottom: 4px; }
.nav-section-title { font-size: 10.5px !important; padding: 14px 10px 4px !important; font-weight: 600; }
.nav-link {
    font-size: 13px !important;
    padding: 7px 10px !important;
    margin: 1px 0 !important;
    border-radius: 8px !important;
    gap: 10px !important;
}
.nav-link i, .nav-link .nav-icon { font-size: 13.5px !important; width: 18px !important; }
.nav-link.active::before { left: -10px; top: 7px; bottom: 7px; width: 2.5px; }
.nav-badge { font-size: 9.5px; padding: 1px 6px; }

/* ── 18.3 Header minimaliste ────────────────────────────────────── */
:root { --topbar-height: 56px; }
.top-bar { padding: 0 20px !important; }
.top-bar-left .breadcrumb { font-size: 13px; }
.top-bar-left .breadcrumb strong { font-size: 14px; }
.top-bar-search { height: 34px; font-size: 13px; }
.icon-btn { width: 34px; height: 34px; font-size: 13px; }
.user-avatar { width: 32px !important; height: 32px !important; font-size: 12px !important; }

/* ── 18.4 Cartes compactes ──────────────────────────────────────── */
.card, .glass-panel { padding: 18px !important; border-radius: 12px !important; }
.card-header { margin-bottom: 14px !important; }
.content-area { padding: 20px !important; }

/* ── 18.5 KPI compacts : icône fine, valeur lisible, lien détail ── */
.kpi-grid { gap: 12px !important; margin-bottom: 16px !important; }
.kpi-tile, .stat-card {
    padding: 14px !important;
    border-radius: 12px !important;
    display: flex; flex-direction: column; gap: 2px;
}
.kpi-header { margin-bottom: 8px !important; align-items: center !important; }
/* Tuile d'icône plus discrète : teinte + icône colorée, pas d'aplat saturé */
.kpi-icon, .stat-icon, .rpt-kpi-icon {
    width: 30px !important; height: 30px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
}
.kpi-icon.accent, .stat-icon.primary,
.kpi-icon.green, .stat-icon.success { background: var(--primary-soft) !important; color: var(--primary-active) !important; }
.kpi-icon.amber, .stat-icon.warning { background: var(--warning-soft) !important; color: var(--warning) !important; }
.kpi-icon.red,   .stat-icon.danger  { background: var(--danger-soft) !important;  color: var(--danger) !important; }
.kpi-icon.blue,  .stat-icon.info,
.kpi-icon.teal,  .kpi-icon.cyan     { background: var(--info-soft) !important;    color: var(--info) !important; }
.kpi-icon.purple                     { background: var(--purple-muted) !important; color: var(--purple) !important; }
.kpi-value, .stat-value, .rpt-kpi-value { font-size: 22px !important; font-weight: 700 !important; }
.kpi-label, .stat-label, .rpt-kpi-label { font-size: 12px !important; }
.kpi-trend, .stat-trend { font-size: 10px; padding: 2px 7px; }
/* Affordance « Voir détails » : la tuile entière est déjà cliquable */
.kpi-tile[onclick], .kpi-tile { cursor: pointer; }
.kpi-tile:hover .kpi-value { color: var(--primary-active) !important; }

/* ── 18.6 Espacement : 4 / 8 / 12 / 16 / 20 / 24 / 32 ───────────── */
:root {
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
    --space-10: 40px; --space-12: 48px; --space-16: 64px;
}
.dash-hero { margin-bottom: 20px !important; align-items: center !important; }
.dash-grid-main, .dash-grid-bottom { gap: 12px !important; margin-bottom: 12px !important; }

/* ── 18.7 Boutons compacts ──────────────────────────────────────── */
.btn { padding: 8px 14px !important; font-size: 13px !important; border-radius: 8px !important; }
.btn-sm { padding: 6px 11px !important; font-size: 12px !important; }
.btn-lg { padding: 10px 20px !important; font-size: 14px !important; }
.quick-btn { padding: 14px 8px !important; border-radius: 10px !important; }
.quick-btn i { font-size: 16px !important; }
.quick-btn span { font-size: 11.5px !important; }
.quick-btn:hover { transform: none !important; border-color: var(--primary); background: var(--primary-soft); }

/* ── 18.8 Tables compactes ──────────────────────────────────────── */
.table th, .data-table th { padding: 10px 12px !important; font-size: 10.5px !important; }
.table td, .data-table td { padding: 10px 12px !important; font-size: 13px !important; }
.filter-chip { padding: 6px 13px !important; font-size: 12.5px !important; }
.badge { font-size: 10.5px !important; padding: 3px 9px !important; }

/* ── 18.9 Activité récente : liste dense ────────────────────────── */
.activity-item { padding: 9px 0 !important; gap: 9px !important; }
.activity-text { font-size: 12.5px !important; }
.activity-meta { font-size: 11.5px !important; color: var(--text-muted) !important; }
.activity-feed { max-height: 300px !important; }

/* ── 18.10 Formulaires compacts ─────────────────────────────────── */
.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], select, textarea {
    padding: 8px 11px !important; font-size: 13px !important;
}
.form-group { margin-bottom: 14px; }

/* ── 18.11 Responsive : tablette puis mobile ────────────────────── */
@media (max-width: 992px) {
    .content-area { padding: 14px !important; }
    .page-header h2, .dash-hero h1 { font-size: 22px !important; }
    .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
}
@media (max-width: 640px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .dash-hero { flex-direction: column; align-items: flex-start !important; gap: 12px; }
    .dash-hero-actions { width: 100%; }
    .dash-hero-actions .btn { flex: 1; }
    .page-header h2, .dash-hero h1 { font-size: 20px !important; }
    .card, .glass-panel { padding: 14px !important; }
}

/* ── 18.12 Le token mono devient la sans tabulaire ───────────────
   --font-mono est consommé à ~12 endroits (budgets, approbations,
   rapports…). On bascule le token une fois plutôt que de surcharger
   chaque sélecteur ; le vrai code garde sa chasse fixe juste après. */
:root, [data-theme="dark"] {
    --font-mono: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Segoe UI', 'Liberation Sans', Arial, sans-serif;
}
code, pre, kbd, samp, .force-mono {
    font-family: 'JetBrains Mono', ui-monospace, 'Fira Code', monospace !important;
}

/* ===================================================================
   19. PASSE LISIBILITÉ — corrige la sur-compression de la section 18
   Principe : LISIBILITÉ > DENSITÉ. La 18 avait rétréci sans
   retravailler le contraste ; les menus viraient au gris pâle.
   =================================================================== */

/* ── 19.1 Trois niveaux de texte, tous testés sur blanc ─────────── */
:root {
    --text-primary:   #12151A;   /* 17.4:1 */
    --text-secondary: #3E4650;   /* 10.2:1 */
    --text-muted:     #5C6470;   /*  6.4:1 — plancher pour du texte réel */
    --text-faint:     #8B93A0;   /*  3.6:1 — décor / disabled UNIQUEMENT */

    /* Navigation : jamais du gris pâle */
    --sidebar-text:     #39404A;  /* 11.4:1 — lecture immédiate */
    --sidebar-text-dim: #6B7380;  /*  5.1:1 — titres de groupe lisibles */
    --sidebar-width: 244px;
}

/* ── 19.2 Échelle typographique (valeurs exactes du brief) ──────── */
.page-header h2, .dash-hero h1, h1 {
    font-size: 28px !important; font-weight: 650 !important;
    letter-spacing: -0.022em; line-height: 1.25;
}
h2, .section-title { font-size: 18px !important; font-weight: 600 !important; letter-spacing: -0.012em; }
h3 { font-size: 17px; font-weight: 600; }
.card-title { font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.008em; }
body, .table td, .form-control, input, select, textarea {
    font-size: 13.5px !important; font-weight: 450;
}
.page-header .subtitle, .dash-hero p, .dash-date, .card-subtitle {
    font-size: 13px !important; font-weight: 450 !important; color: var(--text-muted) !important;
}
.kpi-value, .stat-value, .rpt-kpi-value {
    font-size: 28px !important; font-weight: 650 !important; letter-spacing: -0.025em;
}
.kpi-label, .stat-label, .form-label, .table th {
    font-size: 12px !important; font-weight: 500 !important;
}
.table th { font-size: 11px !important; font-weight: 600 !important; color: var(--text-muted) !important; }

/* ── 19.3 Sidebar : cible tactile 38 px, texte lisible ──────────── */
.nav-link {
    min-height: 38px;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    gap: 11px !important;
    color: var(--sidebar-text) !important;
    border-radius: 9px !important;
}
.nav-link:hover { background: var(--sidebar-hover) !important; color: var(--text-primary) !important; }
.nav-link.active { font-weight: 600 !important; color: var(--primary-active) !important; }
.nav-link i, .nav-link .nav-icon {
    font-size: 14.5px !important; width: 19px !important;
    color: #7A828E !important;                    /* discret mais visible */
}
.nav-link:hover i, .nav-link:hover .nav-icon { color: var(--text-secondary) !important; }
.nav-link.active i, .nav-link.active .nav-icon { color: var(--primary) !important; }
/* Teinte douce, pas un bloc vert */
.nav-link.active { background: rgba(14, 159, 110, 0.07) !important; }
.nav-link.active::before { width: 2.5px; background: var(--primary); }
.nav-section-title {
    font-size: 11px !important; font-weight: 600 !important;
    color: var(--sidebar-text-dim) !important;
    letter-spacing: 0.04em; text-transform: uppercase;
    padding: 18px 12px 6px !important;
}
.sidebar-logo .logo-text { font-size: 16px !important; }

/* ── 19.4 Sidebar repliable ─────────────────────────────────────── */
.sidebar.collapsed { width: 68px; }
.sidebar.collapsed + .main-area, .sidebar.collapsed ~ .main-area { margin-left: 68px; }
/* remplacé plus bas — les libellés sont des nœuds texte, pas des éléments */
.sidebar.collapsed .sidebar-logo { justify-content: center; padding: 16px 8px; }
.sidebar, .main-area { transition: width 200ms var(--ease), margin-left 200ms var(--ease); }
/* tooltip replié : retiré — les NavLink n'ont pas de title, la boîte serait vide */

/* ── 19.5 Cartes : plus légères, mieux calibrées ────────────────── */
.card, .glass-panel, .kpi-tile, .stat-card {
    border-radius: 14px !important;
    padding: 20px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
    border-color: #EDEFF3 !important;
}
.kpi-tile, .stat-card { padding: 16px 18px !important; }
.content-area { padding: 24px !important; }

/* ── 19.6 KPI : icône + label, valeur, indicateur ───────────────── */
.kpi-header { margin-bottom: 10px !important; }
.kpi-icon, .stat-icon { width: 32px !important; height: 32px !important; font-size: 13.5px !important; }
.kpi-trend, .stat-trend { font-size: 10.5px !important; font-weight: 600 !important; padding: 3px 8px !important; }
.kpi-label, .stat-label { color: var(--text-muted) !important; margin-top: 3px !important; }

/* ── 19.7 Boutons : hauteurs cohérentes ─────────────────────────── */
.btn { min-height: 38px; padding: 0 16px !important; font-size: 13.5px !important; font-weight: 600 !important; }
.btn-sm { min-height: 32px; padding: 0 12px !important; font-size: 12.5px !important; }
.icon-btn { width: 36px !important; height: 36px !important; }
.top-bar-search { height: 36px !important; font-size: 13.5px !important; }

/* ── 19.8 Badges : peu saturés ──────────────────────────────────── */
.badge { font-size: 11px !important; font-weight: 600 !important; padding: 3px 10px !important; }

/* ── 19.9 Tables : lisibles avant d'être compactes ──────────────── */
.table td, .data-table td { padding: 13px 14px !important; color: var(--text-secondary) !important; }
.table th, .data-table th { padding: 11px 14px !important; }

/* ── 19.10 Formulaires : champs confortables ────────────────────── */
.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], select, textarea {
    min-height: 38px; padding: 9px 12px !important;
}
.form-label { color: var(--text-secondary) !important; margin-bottom: 5px; }
.form-error { color: var(--danger); font-size: 12px; font-weight: 500; }

/* ── 19.11 Focus visible partout (accessibilité) ────────────────── */
a:focus-visible, button:focus-visible, .nav-link:focus-visible,
.btn:focus-visible, .filter-chip:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ── 19.12 Dépenses par catégorie : barres horizontales ──────────
   Remplace barres verticales + anneau (même donnée affichée deux
   fois). Lisible même quand une catégorie pèse 98 % du total. */
.spend-total { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.spend-total-value {
    font-size: 30px; font-weight: 650; color: var(--text-primary);
    letter-spacing: -0.028em; font-variant-numeric: tabular-nums;
}
.spend-total-value span { font-size: 14px; font-weight: 550; color: var(--text-muted); letter-spacing: 0; }
.spend-total-label { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }

.spend-rows { display: flex; flex-direction: column; gap: 2px; }
.spend-row {
    display: grid;
    grid-template-columns: minmax(120px, 1.4fr) minmax(80px, 3fr) auto 52px;
    align-items: center; gap: 14px;
    padding: 9px 8px; border-radius: 8px;
    transition: background 140ms var(--ease);
}
.spend-row:hover { background: var(--bg-hover); }
.spend-name {
    font-size: 13px; font-weight: 550; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spend-track { height: 8px; border-radius: 99px; background: var(--bg-active); overflow: hidden; }
.spend-fill {
    display: block; height: 100%; border-radius: 99px; min-width: 3px;
    transition: width 320ms var(--ease);
}
.spend-amount {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.spend-share {
    font-size: 12px; font-weight: 550; color: var(--text-muted);
    font-variant-numeric: tabular-nums; text-align: right;
}
@media (prefers-reduced-motion: reduce) { .spend-fill { transition: none; } }
@media (max-width: 640px) {
    .spend-row { grid-template-columns: 1fr auto; row-gap: 6px; }
    .spend-track { grid-column: 1 / -1; order: 3; }
    .spend-share { order: 2; }
}

/* ── 19.13 Sidebar repliable : bouton de bascule ─────────────────── */
.sidebar-toggle {
    position: absolute; top: 20px; right: -11px; z-index: 60;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--bg-surface); border: 1px solid var(--border-strong);
    color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; box-shadow: var(--shadow-sm);
    transition: color 140ms var(--ease), border-color 140ms var(--ease);
}
.sidebar-toggle:hover { color: var(--primary); border-color: var(--primary); }
.sidebar { overflow: visible !important; }
.sidebar-nav { overflow-y: auto; overflow-x: hidden; }

/* ===================================================================
   20. REPLI DE LA NAVBAR — correction
   Le libellé d'un .nav-link est un NŒUD TEXTE nu, pas un élément :
   aucun sélecteur `> *` ne l'atteint. font-size:0 sur le parent le
   masque (il s'hérite aux nœuds texte), et on rétablit la taille
   sur l'icône. Sans ça le texte se replie sur 68 px et déborde.
   =================================================================== */
.sidebar.collapsed { width: 72px !important; }
.sidebar.collapsed ~ .main-area, .sidebar.collapsed + .main-area { margin-left: 72px !important; }

.sidebar.collapsed .nav-link {
    font-size: 0 !important;
    justify-content: center;
    gap: 0 !important;
    padding: 9px 0 !important;
    white-space: nowrap;
    overflow: hidden;
}
.sidebar.collapsed .nav-link i,
.sidebar.collapsed .nav-link .nav-icon {
    font-size: 15px !important;
    width: auto !important;
}
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .logo-text,
.sidebar.collapsed .logo-sub,
.sidebar.collapsed .nav-badge { display: none !important; }
.sidebar.collapsed .nav-section { margin-bottom: 6px; padding-top: 8px; border-top: 1px solid var(--border-light); }
.sidebar.collapsed .nav-section:first-child { border-top: none; padding-top: 0; }
.sidebar.collapsed .sidebar-logo { justify-content: center; padding: 16px 0; }
.sidebar.collapsed .nav-link.active::before { left: 0; border-radius: 0 3px 3px 0; }
.sidebar-nav { overflow-x: hidden !important; }

/* ===================================================================
   21. MODERNISATION DES COMPOSANTS RESTANTS
   Inputs, selects, cases, tables, pagination, onglets, dropdowns,
   modales, états vides, tooltips, scrollbars.
   =================================================================== */

/* ── 21.1 Champs de saisie ──────────────────────────────────────── */
.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"], input[type="tel"],
select, textarea {
    border-radius: 9px !important;
    border: 1px solid #DDE1E7 !important;
    background: #FFFFFF !important;
    color: var(--text-primary) !important;
    transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.form-control:hover:not(:focus), input:hover:not(:focus), select:hover:not(:focus) {
    border-color: #C9CFD8 !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(14, 159, 110, 0.13) !important;
}
.form-control:disabled, input:disabled, select:disabled, textarea:disabled {
    background: #F4F6F8 !important; color: var(--text-faint) !important; cursor: not-allowed;
}
.form-control.is-invalid, input.is-invalid, .form-control[aria-invalid="true"] {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(217, 58, 63, 0.11) !important;
}
/* Chevron du select en SVG inline — homogène tous navigateurs */
select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6470' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 11px center !important;
    padding-right: 32px !important;
}
textarea { min-height: 88px; line-height: 1.55; resize: vertical; }
.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.form-label.required::after { content: ' *'; color: var(--danger); font-weight: 600; }

/* ── 21.2 Cases à cocher et boutons radio ───────────────────────── */
input[type="checkbox"], input[type="radio"] {
    appearance: none; -webkit-appearance: none;
    width: 17px; height: 17px; min-height: 17px;
    border: 1.5px solid #C9CFD8 !important;
    background: #fff !important;
    cursor: pointer; flex-shrink: 0;
    transition: background 130ms var(--ease), border-color 130ms var(--ease);
    box-shadow: none !important;
    padding: 0 !important;
}
input[type="checkbox"] { border-radius: 5px !important; }
input[type="radio"]    { border-radius: 50% !important; }
input[type="checkbox"]:checked, input[type="radio"]:checked {
    background: var(--primary) !important; border-color: var(--primary) !important;
}
input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") !important;
    background-size: 11px; background-position: center; background-repeat: no-repeat;
}
input[type="radio"]:checked { box-shadow: inset 0 0 0 3.5px #fff !important; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 2px;
}

/* ── 21.3 Tables ────────────────────────────────────────────────── */
.table, .data-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.table thead th, .data-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: #FBFCFD !important;
    border-bottom: 1px solid var(--border) !important;
    white-space: nowrap;
}
.table th.sortable, .data-table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover, .data-table th.sortable:hover { color: var(--text-primary) !important; }
.table tbody tr, .data-table tbody tr { transition: background 120ms var(--ease); }
.table tbody tr:hover, .data-table tbody tr:hover { background: #F7F9FA !important; }
/* Séparateur de ligne : token, jamais un hex. En dur (#F1F3F6) il restait
   quasi blanc en thème sombre et les tableaux viraient à la grille. */
.table tbody td, .data-table tbody td { border-bottom: 1px solid var(--border-light) !important; vertical-align: middle; }
/* Colonnes numériques alignées à droite */
.table td.num, .table th.num, .data-table td.num, .table td.amount { text-align: right; }
.table-responsive { border-radius: 12px; overflow: auto; }
/* Actions de ligne révélées au survol, mais toujours accessibles au clavier */
.table tbody tr .row-actions { opacity: 0.5; transition: opacity 130ms var(--ease); }
.table tbody tr:hover .row-actions,
.table tbody tr:focus-within .row-actions { opacity: 1; }

/* ── 21.4 Pagination ────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; gap: 5px; }
.pagination button, .pagination .page-btn {
    min-width: 32px; height: 32px;
    border-radius: 8px; border: 1px solid var(--border);
    background: #fff; color: var(--text-secondary);
    font-size: 12.5px; font-weight: 550; cursor: pointer;
    transition: background 130ms var(--ease), border-color 130ms var(--ease);
}
.pagination button:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-strong); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── 21.5 Onglets ───────────────────────────────────────────────── */
.tabs-container { border-bottom: 1px solid var(--border); gap: 2px; }
.tab-btn {
    padding: 10px 14px !important;
    font-size: 13.5px !important; font-weight: 550 !important;
    color: var(--text-muted) !important;
    border: none !important; border-bottom: 2px solid transparent !important;
    background: transparent !important; border-radius: 0 !important;
    transition: color 130ms var(--ease), border-color 130ms var(--ease);
}
.tab-btn:hover { color: var(--text-primary) !important; }
.tab-btn.active { color: var(--primary-active) !important; border-bottom-color: var(--primary) !important; font-weight: 600 !important; }

/* ── 21.6 Dropdowns et modales ──────────────────────────────────── */
.user-dropdown, .dropdown-menu, .notif-panel {
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 4px 12px rgba(16,24,40,.07), 0 16px 40px rgba(16,24,40,.10) !important;
    padding: 5px !important;
    z-index: var(--z-dropdown);
}
.user-dropdown-item, .dropdown-item {
    border-radius: 8px !important; padding: 8px 11px !important;
    font-size: 13.5px !important; color: var(--text-secondary) !important;
}
.user-dropdown-item:hover, .dropdown-item:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; }
.modal-container { border-radius: 16px !important; }
.modal-header { padding: 18px 20px !important; }
.modal-header h3, .modal-header .modal-title { font-size: 16px !important; font-weight: 600 !important; }
.modal-footer { padding: 14px 20px !important; gap: 8px; }

/* ── 21.7 États vides ───────────────────────────────────────────── */
.empty-state { padding: 40px 20px !important; text-align: center; }
.empty-state .icon, .empty-state > i {
    width: 44px; height: 44px; margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; background: var(--bg-hover);
    color: var(--text-muted) !important; font-size: 17px !important;
}
.empty-state h3 { font-size: 14.5px !important; font-weight: 600 !important; margin-bottom: 4px; }
.empty-state p { font-size: 13px !important; color: var(--text-muted) !important; max-width: 42ch; margin: 0 auto; }

/* ── 21.8 Barres de défilement discrètes ────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: #D3D8DF transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D3D8DF; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #B9C0CA; background-clip: content-box; }

/* ── 21.9 Squelettes de chargement (plutôt qu'un spinner centré) ── */
.skeleton {
    background: linear-gradient(90deg, #EEF0F3 25%, #F6F7F9 50%, #EEF0F3 75%);
    background-size: 200% 100%;
    animation: skeletonSweep 1.3s ease-in-out infinite;
    border-radius: 6px; color: transparent !important;
}
@keyframes skeletonSweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ── 21.10 Mode sombre : champs et tables suivent ───────────────── */
[data-theme="dark"] .form-control, [data-theme="dark"] input, [data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: var(--text-primary) !important;
    box-shadow: none;
}
[data-theme="dark"] input[type="checkbox"], [data-theme="dark"] input[type="radio"] {
    background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.2) !important;
}
[data-theme="dark"] .table thead th, [data-theme="dark"] .data-table thead th { background: rgba(255,255,255,.03) !important; }
[data-theme="dark"] .table tbody tr:hover { background: rgba(255,255,255,.03) !important; }
[data-theme="dark"] .empty-state .icon { background: rgba(255,255,255,.05); }
[data-theme="dark"] * { scrollbar-color: #3A414C transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3A414C; background-clip: content-box; }

/* ===================================================================
   22. PRIMAIRE BLEU — « Indigo Baobab »
   Le vert quitte le rôle de primaire et devient la sémantique
   SUCCÈS : l'identité Baobab reste présente là où elle a du sens
   (validé, approuvé, progression) sans porter chaque bouton.
   #2E51CC : indigo profond, assez dense pour paraître premium,
   assez sobre pour se faire oublier sur 8 h d'usage quotidien.
   =================================================================== */
:root {
    --primary:        #2E51CC;
    --primary-hover:  #2643AB;
    --primary-active: #1D3489;
    --primary-light:  #6E88E4;
    --primary-soft:   #EBEFFC;
    --primary-muted:  rgba(46, 81, 204, 0.09);
    --primary-gradient: #2E51CC;
    --primary-glow:   0 1px 2px rgba(29, 52, 137, 0.18);
    --border-focus:   rgba(46, 81, 204, 0.38);
    --shadow-focus:   0 0 0 3px rgba(46, 81, 204, 0.13), 0 0 0 1px var(--primary);

    /* Vert Baobab conservé — désormais purement sémantique */
    --success:       #0E9F6E;
    --success-light: #34C48E;
    --success-soft:  #E6F6EF;
    --success-muted: rgba(14, 159, 110, 0.09);

    /* Info déplacé vers le ciel pour ne pas se confondre avec le primaire */
    --info:       #0C93D4;
    --info-light: #46B4E8;
    --info-soft:  #E7F4FC;
    --info-muted: rgba(12, 147, 212, 0.09);

    /* Sidebar : sélection en teinte indigo */
    --sidebar-active: #EBEFFC;
}
.nav-link.active { background: rgba(46, 81, 204, 0.07) !important; }
.form-control:focus, input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(46, 81, 204, 0.13) !important;
}
/* Les badges « approuvé / payé / reçu » restent verts : c'est un statut, pas une marque */
.badge-success, .badge-approved, .badge-matched, .badge-complete, .badge-paid {
    color: #0B7F58 !important; border-color: rgba(14, 159, 110, 0.34) !important;
}
.progress-fill, .progress-fill.green { background: var(--success); }

/* ===================================================================
   23. FILTRES ET RECHERCHE — barre d'outils unifiée
   =================================================================== */
.page-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 16px;
}
/* La recherche cesse d'être une grosse boîte grise détachée */
.page-toolbar .search-box, .search-box, .toolbar-search {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    height: 38px; min-width: 240px; max-width: 340px;
    padding: 0 12px;
    background: #FFFFFF;
    border: 1px solid #DDE1E7;
    border-radius: 9px;
    transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
    margin-left: auto;
}
.search-box:focus-within, .toolbar-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(46, 81, 204, 0.13);
}
.search-box input, .toolbar-search input {
    border: none !important; background: transparent !important;
    box-shadow: none !important; padding: 0 !important;
    height: 100%; flex: 1; min-height: 0 !important;
    font-size: 13.5px;
}
.search-box input:focus, .toolbar-search input:focus { box-shadow: none !important; }
.search-box i, .toolbar-search i { color: var(--text-muted); font-size: 13px; flex-shrink: 0; }

/* Groupe de filtres : segmenté, plus des pilules éparpillées */
.filter-group, .filter-chips {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 3px;
    background: var(--bg-hover);
    border-radius: 10px;
}
.filter-group .filter-chip, .filter-chips .filter-chip {
    border: none !important; background: transparent !important;
    box-shadow: none !important;
    padding: 6px 13px !important; border-radius: 7px !important;
    color: var(--text-muted) !important; font-weight: 550 !important;
}
.filter-group .filter-chip:hover, .filter-chips .filter-chip:hover {
    background: rgba(255,255,255,.7) !important; color: var(--text-primary) !important;
}
.filter-group .filter-chip.active, .filter-chips .filter-chip.active {
    background: #FFFFFF !important; color: var(--primary-active) !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.07) !important; font-weight: 600 !important;
}

/* Section 24 retirée : elle ciblait les classes .mkt- et .product- qui
   n'existent pas dans Marketplace.razor (classes réelles : .mp-).
   Ne jamais écrire une étoile suivie d'une barre oblique dans un
   commentaire : la séquence le referme et la règle suivante est perdue.
   Voir section 32. */

/* ===================================================================
   26. MODE SOMBRE — BLOC FINAL
   Doit rester en DERNIER : `:root` et `[data-theme="dark"]` ont la
   même spécificité (0,1,0), donc l'ordre décide. Les sections 19-21
   redéfinissaient `:root` après le bloc sombre de la section 16 et
   l'écrasaient — d'où la navbar illisible en sombre.
   Spécificité portée à html[data-theme="dark"] (0,1,1) : ce bloc bat
   désormais tout :root (0,1,0) quel que soit l'ordre des sections.
   =================================================================== */
html[data-theme="dark"] {
    --primary:        #6E8DF0;
    --primary-hover:  #86A0F4;
    --primary-active: #5878DC;
    --primary-light:  #9DB2F6;
    --primary-soft:   rgba(110, 141, 240, 0.16);
    --primary-muted:  rgba(110, 141, 240, 0.13);
    --primary-gradient: #6E8DF0;
    --primary-glow:   none;
    --border-focus:   rgba(110, 141, 240, 0.45);
    --shadow-focus:   0 0 0 3px rgba(110, 141, 240, 0.22), 0 0 0 1px var(--primary);

    --success: #34C48E;  --success-light: #5BD9AC;
    --success-soft: rgba(52,196,142,.16);  --success-muted: rgba(52,196,142,.13);
    --danger:  #F2686C;  --danger-soft: rgba(242,104,108,.16);  --danger-muted: rgba(242,104,108,.13);
    --warning: #F0913F;  --warning-soft: rgba(240,145,63,.16);  --warning-muted: rgba(240,145,63,.13);
    --info:    #46B4E8;  --info-soft: rgba(70,180,232,.16);     --info-muted: rgba(70,180,232,.13);
    --purple:  #9B84F7;

    --bg-page:     #0E1116;
    --bg-surface:  #161A21;
    --bg-elevated: #1B2029;
    --bg-hover:    #1F2530;
    --bg-active:   #262D3A;
    --bg-input:    #161A21;
    --bg-overlay:  rgba(6, 8, 12, 0.62);

    --text-primary:   #E9ECF1;   /* 14.1:1 sur #161A21 */
    --text-secondary: #B4BBC6;   /*  8.3:1 */
    --text-muted:     #8C95A3;   /*  5.1:1 — plancher pour du texte réel */
    --text-faint:     #646D7B;

    --border:        rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --border-light:  rgba(255, 255, 255, 0.05);

    /* Navbar sombre — la source de l'incohérence signalée */
    --sidebar-bg:       #12161C;
    --sidebar-bg-2:     #12161C;
    --sidebar-text:     #C2C9D4;   /* était #39404A : gris foncé sur fond foncé */
    --sidebar-text-dim: #7C8593;
    --sidebar-hover:    rgba(255, 255, 255, 0.055);
    --sidebar-active:   rgba(110, 141, 240, 0.15);
    --sidebar-border:   rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .sidebar { background: var(--sidebar-bg) !important; }
[data-theme="dark"] .nav-link { color: var(--sidebar-text) !important; }
[data-theme="dark"] .nav-link:hover { color: #FFFFFF !important; background: var(--sidebar-hover) !important; }
[data-theme="dark"] .nav-link.active {
    color: var(--primary-light) !important;
    background: rgba(110, 141, 240, 0.14) !important;
}
[data-theme="dark"] .nav-link i, [data-theme="dark"] .nav-link .nav-icon { color: #8791A0 !important; }
[data-theme="dark"] .nav-link:hover i, [data-theme="dark"] .nav-link:hover .nav-icon { color: var(--text-secondary) !important; }
[data-theme="dark"] .nav-link.active i, [data-theme="dark"] .nav-link.active .nav-icon { color: var(--primary-light) !important; }
[data-theme="dark"] .nav-section-title { color: var(--sidebar-text-dim) !important; }
[data-theme="dark"] .sidebar-logo .logo-text { color: #FFFFFF !important; }
[data-theme="dark"] .sidebar-logo .logo-sub { color: var(--sidebar-text-dim) !important; }
[data-theme="dark"] .sidebar-logo .logo-icon { background: var(--primary) !important; color: #0C1020 !important; }
[data-theme="dark"] .sidebar-toggle { background: var(--bg-elevated); border-color: var(--border-strong); color: var(--text-muted); }
[data-theme="dark"] .nav-link.active::before { background: var(--primary-light); }
[data-theme="dark"] .card, [data-theme="dark"] .kpi-tile, [data-theme="dark"] .stat-card,
[data-theme="dark"] .glass-panel { background: var(--bg-surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .top-bar { background: var(--bg-surface); border-bottom-color: var(--border); }
[data-theme="dark"] .top-bar-search { background: var(--bg-hover); }
[data-theme="dark"] .icon-btn { background: var(--bg-surface); border-color: var(--border); color: var(--text-secondary); }
[data-theme="dark"] .btn-secondary, [data-theme="dark"] .btn-outline-primary {
    background: var(--bg-elevated) !important; border-color: var(--border-strong) !important; color: var(--text-secondary) !important;
}
[data-theme="dark"] .btn-primary { color: #0C1020 !important; font-weight: 650 !important; }
/* retiré : vidait aussi les badges de priorité en sombre */
[data-theme="dark"] .filter-group, [data-theme="dark"] .filter-chips { background: var(--bg-hover); }
[data-theme="dark"] .filter-group .filter-chip.active, [data-theme="dark"] .filter-chips .filter-chip.active {
    background: var(--bg-elevated) !important; color: var(--primary-light) !important;
}
[data-theme="dark"] .search-box, [data-theme="dark"] .toolbar-search {
    background: var(--bg-hover); border-color: var(--border);
}
[data-theme="dark"] .spend-track { background: var(--bg-active); }
[data-theme="dark"] .mkt-card-img, [data-theme="dark"] .product-card-img { background: var(--bg-hover); }
[data-theme="dark"] .marketplace-hero, [data-theme="dark"] .mkt-hero,
[data-theme="dark"] .mkt-filters { background: var(--bg-surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .login-card { background: var(--bg-surface) !important; }
[data-theme="dark"] .kpi-icon.accent, [data-theme="dark"] .stat-icon.primary {
    background: rgba(110,141,240,.16) !important; color: var(--primary-light) !important;
}

/* ===================================================================
   27. BADGES — retour au fond teinté
   Le contour sur blanc (section 10) était trop discret : un statut
   doit se repérer en balayant une colonne, pas en la lisant.
   Fond teinté + texte soutenu + pastille = repérable à 4.5:1 minimum.
   =================================================================== */
.badge {
    display: inline-flex !important; align-items: center; gap: 6px;
    font-size: 11.5px !important; font-weight: 650 !important;
    padding: 4px 10px !important;
    border-radius: 7px !important;
    border: 1px solid transparent !important;
    letter-spacing: -0.003em;
    line-height: 1.45;
    white-space: nowrap;
}
.badge::before { width: 6px !important; height: 6px !important; opacity: 1 !important; }

.badge-success, .badge-approved, .badge-matched, .badge-complete, .badge-paid, .badge-received {
    background: #DCF5EA !important; color: #06714E !important;      /* 5.6:1 */
    border-color: rgba(14, 159, 110, 0.28) !important;
}
.badge-danger, .badge-rejected, .badge-blacklisted, .badge-cancelled, .badge-disputed {
    background: #FCE4E4 !important; color: #A81F24 !important;      /* 6.2:1 */
    border-color: rgba(217, 58, 63, 0.28) !important;
}
.badge-warning, .badge-pendingapproval, .badge-pending, .badge-partiallyreceived {
    background: #FCEEDF !important; color: #92450A !important;      /* 6.4:1 */
    border-color: rgba(194, 94, 18, 0.28) !important;
}
.badge-info, .badge-sent, .badge-acknowledged {
    background: #E1F1FB !important; color: #0A6791 !important;      /* 5.5:1 */
    border-color: rgba(12, 147, 212, 0.28) !important;
}
.badge-primary, .badge-converted {
    background: #E6EBFB !important; color: #24409E !important;      /* 7.1:1 */
    border-color: rgba(46, 81, 204, 0.26) !important;
}
.badge-draft, .badge-neutral {
    background: #EDEFF3 !important; color: #4A515C !important;      /* 8.0:1 */
    border-color: rgba(20, 23, 28, 0.11) !important;
}
.badge-priority-low    { background: #EDEFF3 !important; color: #4A515C !important; }
.badge-priority-normal { background: #E1F1FB !important; color: #0A6791 !important; }
.badge-priority-high   { background: #FCEEDF !important; color: #92450A !important; }
.badge-priority-urgent { background: #FCE4E4 !important; color: #A81F24 !important; }

/* Statut rendu en texte nu + point (ex. « Convertie ») : même poids visuel */
td .status-dot + span, td .badge-plain { font-weight: 600; color: var(--text-secondary); }

/* ===================================================================
   28. TABLEAUX — harmonisation et lisibilité
   =================================================================== */
.table, .data-table {
    font-size: 13.5px !important;
    color: var(--text-secondary);
}
.table thead th, .data-table thead th {
    font-size: 11px !important; font-weight: 700 !important;
    color: #5C6470 !important;                 /* 6.4:1 — pas un gris fantôme */
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 12px 14px !important;
    background: #F8F9FB !important;
    border-bottom: 1px solid var(--border-strong) !important;
}
.table tbody td, .data-table tbody td {
    padding: 13px 14px !important;
    color: var(--text-secondary) !important;
    line-height: 1.5;
}
/* La 1re colonne porte l'identité de la ligne : plus lisible que le reste */
.table tbody td:first-child, .data-table tbody td:first-child {
    color: var(--text-primary) !important; font-weight: 550;
}
/* Références : lien identifiable, sans être criard */
.table a, .data-table a { color: var(--primary) !important; font-weight: 600 !important; }
.table a:hover, .data-table a:hover { color: var(--primary-hover) !important; text-decoration: underline; }
/* Montants : tabulaires, alignés à droite, poids soutenu */
.table td.amount, .table td .amount, .data-table td .amount,
.table td.num, .table th.num {
    text-align: right; font-variant-numeric: tabular-nums;
    font-weight: 600; color: var(--text-primary) !important;
}
.table tbody tr:hover, .data-table tbody tr:hover { background: #F5F7FA !important; }
.table tbody tr:last-child td { border-bottom: none !important; }
/* Densité homogène : une seule hauteur de ligne partout */
.table tbody tr, .data-table tbody tr { height: 48px; }
.table td .btn-sm, .data-table td .btn-sm { min-height: 30px; }
/* Cellules secondaires (dates, auteurs) volontairement en retrait */
.table td.meta, .table td .muted, .data-table td .muted {
    color: var(--text-muted) !important; font-size: 12.5px;
}

[data-theme="dark"] .table thead th, [data-theme="dark"] .data-table thead th {
    background: rgba(255,255,255,.035) !important; color: #9AA3B1 !important;
    border-bottom-color: var(--border-strong) !important;
}
[data-theme="dark"] .table tbody tr:hover { background: rgba(255,255,255,.035) !important; }
[data-theme="dark"] .badge-success, [data-theme="dark"] .badge-approved,
[data-theme="dark"] .badge-paid, [data-theme="dark"] .badge-matched, [data-theme="dark"] .badge-received
{ background: rgba(52,196,142,.17) !important; color: #6FDDB4 !important; border-color: rgba(52,196,142,.3) !important; }
[data-theme="dark"] .badge-danger, [data-theme="dark"] .badge-rejected, [data-theme="dark"] .badge-cancelled
{ background: rgba(242,104,108,.17) !important; color: #FF9EA1 !important; border-color: rgba(242,104,108,.3) !important; }
[data-theme="dark"] .badge-warning, [data-theme="dark"] .badge-pending, [data-theme="dark"] .badge-pendingapproval
{ background: rgba(240,145,63,.17) !important; color: #FFBC7E !important; border-color: rgba(240,145,63,.3) !important; }
[data-theme="dark"] .badge-info, [data-theme="dark"] .badge-sent
{ background: rgba(70,180,232,.17) !important; color: #8FD4F5 !important; border-color: rgba(70,180,232,.3) !important; }
[data-theme="dark"] .badge-primary, [data-theme="dark"] .badge-converted
{ background: rgba(110,141,240,.17) !important; color: #A8BCF8 !important; border-color: rgba(110,141,240,.3) !important; }
[data-theme="dark"] .badge-draft, [data-theme="dark"] .badge-neutral
{ background: rgba(255,255,255,.07) !important; color: #B4BBC6 !important; border-color: rgba(255,255,255,.14) !important; }
[data-theme="dark"] .table tbody td:first-child { color: var(--text-primary) !important; }

/* Priorités en mode sombre — même vocabulaire que les statuts */
[data-theme="dark"] .badge-priority-low
{ background: rgba(255,255,255,.07) !important; color: #B4BBC6 !important; border-color: rgba(255,255,255,.14) !important; }
[data-theme="dark"] .badge-priority-normal
{ background: rgba(70,180,232,.17) !important; color: #8FD4F5 !important; border-color: rgba(70,180,232,.3) !important; }
[data-theme="dark"] .badge-priority-high
{ background: rgba(240,145,63,.17) !important; color: #FFBC7E !important; border-color: rgba(240,145,63,.3) !important; }
[data-theme="dark"] .badge-priority-urgent
{ background: rgba(242,104,108,.17) !important; color: #FF9EA1 !important; border-color: rgba(242,104,108,.3) !important; }

/* ===================================================================
   29. INFOBULLES
   Les 25 NavLink portent désormais un `title` : en mode réduit,
   l'icône seule ne dit plus rien sans lui. Infobulle stylée qui
   remplace celle du navigateur (instantanée, lisible, thémée).
   =================================================================== */
.sidebar.collapsed .nav-link { position: relative; }
.sidebar.collapsed .nav-link::after {
    content: attr(title);
    position: absolute; left: calc(100% + 10px); top: 50%;
    transform: translateY(-50%) translateX(-4px);
    z-index: var(--z-tooltip);
    background: #1B2029; color: #FFFFFF;
    font-size: 12.5px; font-weight: 550; letter-spacing: 0;
    padding: 6px 10px; border-radius: 7px;
    white-space: nowrap; pointer-events: none;
    opacity: 0; visibility: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
    transition: opacity 130ms var(--ease), transform 130ms var(--ease), visibility 130ms;
}
.sidebar.collapsed .nav-link::before { z-index: var(--z-tooltip); }
.sidebar.collapsed .nav-link:hover::after,
.sidebar.collapsed .nav-link:focus-visible::after {
    opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0);
}
/* La sidebar doit laisser sortir l'infobulle */
.sidebar.collapsed, .sidebar.collapsed .sidebar-nav { overflow: visible !important; }

/* Infobulles génériques — boutons d'action des tableaux et barres d'outils.
   Marquer l'élément avec data-tip="…" (le title natif reste le repli). */
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 7px); left: 50%;
    transform: translateX(-50%) translateY(3px);
    z-index: var(--z-tooltip);
    background: #1B2029; color: #FFFFFF;
    font-size: 12px; font-weight: 550;
    padding: 5px 9px; border-radius: 6px;
    white-space: nowrap; pointer-events: none;
    opacity: 0; visibility: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
    transition: opacity 130ms var(--ease), transform 130ms var(--ease), visibility 130ms;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* Les boutons d'action de ligne deviennent de vraies cibles cliquables */
.table td .icon-btn, .data-table td .icon-btn,
.table td button:not(.btn), .data-table td button:not(.btn) {
    width: 30px; height: 30px; border-radius: 7px;
    border: 1px solid transparent; background: transparent;
    color: var(--text-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 130ms var(--ease), color 130ms var(--ease);
}
.table td .icon-btn:hover, .data-table td .icon-btn:hover,
.table td button:not(.btn):hover, .data-table td button:not(.btn):hover {
    background: var(--bg-hover); color: var(--primary); border-color: var(--border);
}
[data-theme="dark"] [data-tip]::after,
[data-theme="dark"] .sidebar.collapsed .nav-link::after { background: #2A313D; }

/* ===================================================================
   31. ILLUSTRATIONS FONCTIONNELLES
   Repères graphiques légers pour signaler ce qu'une zone permet,
   là où un écran vide ne dit rien. Motif discret + icône cadrée.
   =================================================================== */
.empty-state {
    position: relative;
    background:
        radial-gradient(circle at 50% 34%, var(--primary-muted) 0%, transparent 58%),
        repeating-linear-gradient(45deg, var(--border-light) 0 1px, transparent 1px 9px);
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
}
.empty-state .icon, .empty-state > i {
    width: 54px !important; height: 54px !important;
    border-radius: 14px !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border);
    color: var(--primary) !important; font-size: 20px !important;
    box-shadow: 0 2px 8px rgba(16,24,40,.06);
}
.empty-state h3 { color: var(--text-primary) !important; }
/* Appel à l'action dans l'état vide : il enseigne l'écran */
.empty-state .btn { margin-top: 14px; }

/* Vignette produit sans image : motif plutôt qu'un carton gris */
.mkt-card-img, .product-card-img, .mkt-thumb {
    background:
        radial-gradient(circle at 50% 45%, rgba(46,81,204,.07) 0%, transparent 62%),
        repeating-linear-gradient(135deg, rgba(20,23,28,.028) 0 1px, transparent 1px 8px),
        var(--bg-hover) !important;
}
[data-theme="dark"] .empty-state { border-color: var(--border-strong); }
[data-theme="dark"] .empty-state .icon { background: var(--bg-elevated) !important; color: var(--primary-light) !important; }

/* ===================================================================
   32. MARKETPLACE — nouveau design (classes réelles .mp-*)
   Ergonomie repensée :
     · le bandeau dégradé devient une barre d'outils utile
     · les filtres remontent près des résultats, pas dans un rail vide
     · le panier devient un rail collant : c'est l'objet persistant
     · la carte perd 40 % de hauteur, l'action passe pleine largeur
   =================================================================== */
.mp-container {
    display: grid !important;
    grid-template-columns: 1fr 296px !important;   /* résultats d'abord, panier à droite */
    gap: 16px !important;
    align-items: start;
}
.mp-main { order: 1; min-width: 0; }
.mp-sidebar {
    order: 2;
    position: sticky; top: 16px;
    width: auto !important; max-width: none !important;
    display: flex; flex-direction: column; gap: 12px;
}

/* ── Barre d'outils : titre, recherche, filtres sur une ligne ───── */
.mp-hero {
    background: var(--bg-surface) !important;
    background-image: none !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    color: var(--text-primary) !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
    display: flex !important; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
}
.mp-hero-text h1, .mp-hero-text h2 { color: var(--text-primary) !important; font-size: 19px !important; margin: 0; }
.mp-hero-text p { color: var(--text-muted) !important; font-size: 12.5px !important; margin-top: 2px; }
.mp-search-wrap {
    display: flex !important; align-items: center; gap: 8px;
    flex: 1 1 260px; max-width: 400px; margin-left: auto;
}
.mp-search-wrap .form-control, .mp-search-wrap input {
    height: 38px; min-height: 38px !important; width: 100%;
}

/* ── Filtres : bloc horizontal au-dessus de la grille ───────────── */
.mp-filter-block {
    display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
}
.mp-filter-label {
    font-size: 11px !important; font-weight: 650 !important;
    color: var(--text-muted) !important; text-transform: uppercase;
    letter-spacing: 0.05em; margin: 0 !important; white-space: nowrap;
}
.mp-filter-block select { min-width: 200px; max-width: 260px; }
.mp-sidebar-header { display: none; }   /* l'en-tête « Filtres » ne porte plus rien */

/* ── Panier : rail collant, toujours lisible ────────────────────── */
.mp-cart {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.mp-cart-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 14px; font-weight: 650; color: var(--text-primary);
    padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.mp-cart-count {
    background: var(--primary); color: #fff;
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px;
    font-variant-numeric: tabular-nums;
}
.mp-cart-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.mp-cart-list > * { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 8px; }
.mp-cart-list > *:hover { background: var(--bg-hover); }
.mp-cart-item-detail { flex: 1; min-width: 0; }
.mp-cart-item-name {
    font-size: 12.5px; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-cart-item-sub { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mp-cart-item-ctrl { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.mp-cart-item-ctrl button, .mp-cart-item-ctrl .btn {
    width: 26px; height: 26px; min-height: 26px !important; padding: 0 !important;
    border-radius: 7px; font-size: 11px;
}
.mp-cart-total {
    display: flex; align-items: baseline; justify-content: space-between;
    padding-top: 10px; border-top: 1px solid var(--border);
    font-size: 15px; font-weight: 700; color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.mp-cart-btn { width: 100%; min-height: 40px !important; }

/* ── Cartes produit : plus courtes, action pleine largeur ───────── */
.mp-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)) !important;
    gap: 12px !important;
}
.mp-card {
    display: flex; flex-direction: column;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden; position: relative;
    transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.mp-card:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(16,24,40,.08); }
.mp-card--selected { border-color: var(--primary) !important; box-shadow: 0 0 0 1px var(--primary); }
.mp-card-img {
    aspect-ratio: 4 / 3; max-height: 118px; width: 100%;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(46,81,204,.07) 0%, transparent 62%),
        repeating-linear-gradient(135deg, rgba(20,23,28,.028) 0 1px, transparent 1px 8px),
        var(--bg-hover);
}
.mp-card-img img { width: 100%; height: 100%; object-fit: cover; }
.mp-card-icon { color: var(--text-faint); font-size: 20px; }
.mp-card-check {
    position: absolute; top: 7px; right: 7px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 10px;
}
.mp-card-body { padding: 11px 12px 12px !important; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mp-card-cat {
    font-size: 10px !important; font-weight: 700 !important;
    color: var(--text-muted) !important; text-transform: uppercase; letter-spacing: 0.05em;
}
.mp-card-name {
    font-size: 13px !important; font-weight: 600 !important;
    color: var(--text-primary) !important; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.7em;
}
.mp-card-desc { display: none; }              /* la description noyait la carte */
.mp-card-footer {
    display: flex !important; flex-direction: column; gap: 8px;
    margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-light);
}
.mp-card-pricing { display: flex; align-items: baseline; gap: 4px; }
.mp-card-price {
    font-size: 16px !important; font-weight: 700 !important;
    color: var(--text-primary) !important; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.mp-card-currency { font-size: 11px !important; font-weight: 550 !important; color: var(--text-muted) !important; }
/* L'action devient un bouton pleine largeur : cible franche, intention claire */
.mp-add-btn {
    width: 100% !important; height: 34px !important;
    border-radius: 8px !important; border: 1px solid var(--primary) !important;
    background: var(--primary) !important; color: #fff !important;
    font-size: 12.5px !important; font-weight: 600 !important;
    display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; transition: background 140ms var(--ease);
}
.mp-add-btn:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }
.mp-add-btn.mp-add-btn--in, .mp-card--selected .mp-add-btn {
    background: var(--success-soft) !important; color: #06714E !important;
    border-color: rgba(14,159,110,.32) !important;
}

@media (max-width: 1100px) {
    .mp-container { grid-template-columns: 1fr !important; }
    .mp-sidebar { position: static; order: 1; }
    .mp-main { order: 2; }
}
@media (max-width: 560px) {
    .mp-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .mp-hero { flex-direction: column; align-items: flex-start; }
    .mp-search-wrap { margin-left: 0; max-width: none; }
}

[data-theme="dark"] .mp-hero, [data-theme="dark"] .mp-filter-block,
[data-theme="dark"] .mp-cart, [data-theme="dark"] .mp-card {
    background: var(--bg-surface) !important; border-color: var(--border) !important;
}
[data-theme="dark"] .mp-card-img { background: var(--bg-hover); }
[data-theme="dark"] .mp-add-btn { color: #0C1020 !important; }

/* ── 32.1 Correctifs après vérification au rendu ─────────────────
   Le <style> de Marketplace.razor est injecté après ce fichier :
   il faut !important pour reprendre la main sur la vignette. */
.mp-card-img {
    height: 112px !important; min-height: 112px !important; max-height: 112px !important;
    aspect-ratio: auto !important; flex-shrink: 0;
}
.mp-card-icon { font-size: 19px !important; }
.mp-card { min-height: 0 !important; }
.mp-card-name { min-height: 2.6em; margin-bottom: 2px; }

/* Prix : montant et unité sur une ligne, alignés à gauche */
.mp-card-pricing {
    display: flex !important; align-items: baseline !important;
    gap: 5px !important; flex-wrap: wrap; text-align: left !important;
}
.mp-card-price { text-align: left !important; }
.mp-card-currency { text-align: left !important; white-space: nowrap; }
/* Prix absent : dire « Prix à définir » plutôt qu'un tiret orphelin */
.mp-card-price:empty::before { content: '—'; color: var(--text-faint); }

/* Bouton : le libellé revient à côté de l'icône */
.mp-add-btn::after {
    content: 'Ajouter';
    font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em;
}
.mp-card--selected .mp-add-btn::after, .mp-add-btn--in::after { content: 'Dans le panier'; }
.mp-add-btn i { font-size: 12px; }

/* Recherche : icône et repère visuel dans le champ vide */
.mp-search-wrap { position: relative; }
.mp-search-wrap::before {
    content: '\f002'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: 12.5px; pointer-events: none; z-index: 1;
}
.mp-search-wrap .form-control, .mp-search-wrap input { padding-left: 34px !important; }

/* Colonne filtres : compacte, elle ne prend plus toute la hauteur */
.mp-sidebar { align-self: start; }
.mp-filter-block { margin-bottom: 0; }

/* ===================================================================
   33. MARKETPLACE — rail de catégories façon Facebook Marketplace
   Le combobox est remplacé par une liste navigable : les catégories
   deviennent visibles d'un coup d'œil au lieu d'être cachées derrière
   un clic. Le rail passe à gauche, la grille occupe le reste.
   =================================================================== */
.mp-container {
    grid-template-columns: 258px 1fr !important;   /* rail à GAUCHE désormais */
}
.mp-sidebar { order: 1 !important; top: 12px; }
.mp-main    { order: 2 !important; }

.mp-sidebar-header {
    display: flex !important; align-items: center; gap: 9px;
    font-size: 15px; font-weight: 700; color: var(--text-primary);
    padding: 0 4px 12px; margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.mp-sidebar-header i { color: var(--primary); font-size: 15px; }

.mp-cats { display: flex; flex-direction: column; gap: 1px; }
.mp-cat {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 9px 10px; border: none; background: transparent;
    border-radius: 9px; cursor: pointer; text-align: left;
    font-size: 13.5px; font-weight: 550; color: var(--text-secondary);
    transition: background 130ms var(--ease), color 130ms var(--ease);
}
.mp-cat:hover { background: var(--bg-hover); color: var(--text-primary); }
.mp-cat:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.mp-cat-ico {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 50%; background: var(--bg-active);
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; color: var(--text-secondary);
    transition: background 130ms var(--ease), color 130ms var(--ease);
}
.mp-cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-cat--on { background: var(--primary-soft) !important; color: var(--primary-active) !important; font-weight: 650; }
.mp-cat--on .mp-cat-ico { background: var(--primary) !important; color: #FFFFFF !important; }
.mp-subcats { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 3px 22px; padding-left: 10px; border-left: 1px solid var(--border); }
.mp-cat--sub { padding: 6px 10px; font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
.mp-cat--sub.mp-cat--on { background: transparent !important; color: var(--primary) !important; font-weight: 650; }

/* Panier sous le rail de catégories */
.mp-cart { margin-top: 14px; }

/* Grille : cartes plus nombreuses, format vignette produit */
.mp-grid { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)) !important; gap: 12px !important; }
.mp-hero { padding: 13px 16px !important; }
.mp-hero-text h1 { font-size: 18px !important; }

@media (max-width: 1100px) {
    .mp-container { grid-template-columns: 1fr !important; }
    .mp-cats { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
    .mp-cat { width: auto; white-space: nowrap; flex-shrink: 0; }
    .mp-cat-ico { display: none; }
    .mp-subcats { display: none; }
}
[data-theme="dark"] .mp-cat-ico { background: rgba(255,255,255,.07); }
[data-theme="dark"] .mp-cat--on { background: rgba(110,141,240,.15) !important; color: var(--primary-light) !important; }
[data-theme="dark"] .mp-cat--on .mp-cat-ico { background: var(--primary) !important; color: #0C1020 !important; }

/* ===================================================================
   35. PANIER EN MODALE
   Le panier quitte le rail : il n'y a pas de raison qu'il occupe
   en permanence une colonne alors qu'on l'ouvre une fois en fin de
   parcours. Bouton flottant + récapitulatif complet avant envoi.
   =================================================================== */
.mp-fab {
    position: fixed; right: 24px; bottom: 24px; z-index: var(--z-sticky);
    display: inline-flex; align-items: center; gap: 10px;
    height: 48px; padding: 0 20px 0 16px;
    border: none; border-radius: 99px;
    background: var(--primary); color: #FFFFFF;
    font-size: 13.5px; font-weight: 650; cursor: pointer;
    box-shadow: 0 4px 12px rgba(29,52,137,.22), 0 12px 32px rgba(16,24,40,.14);
    transition: background 140ms var(--ease), transform 140ms var(--ease);
}
.mp-fab:hover { background: var(--primary-hover); transform: translateY(-1px); }
.mp-fab:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.mp-fab i { font-size: 15px; }
.mp-fab-count {
    min-width: 21px; height: 21px; padding: 0 6px;
    border-radius: 99px; background: rgba(255,255,255,.22);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) { .mp-fab-label { display: none; } .mp-fab { padding: 0 16px; } }

.mp-modal-overlay { position: fixed; inset: 0; z-index: var(--z-backdrop); }
.mp-modal {
    position: fixed; z-index: var(--z-modal);
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(660px, calc(100vw - 32px));
    max-height: min(86vh, 760px);
    display: flex; flex-direction: column;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: 16px; box-shadow: var(--shadow-xl);
    animation: mpModalIn 180ms var(--ease);
}
@keyframes mpModalIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } }
@media (prefers-reduced-motion: reduce) { .mp-modal { animation: none; } }
.mp-modal .modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mp-modal-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.mp-modal .modal-close {
    background: transparent; border: none; font-size: 22px; line-height: 1;
    color: var(--text-muted); cursor: pointer; padding: 0 4px; border-radius: 7px;
}
.mp-modal .modal-close:hover { color: var(--text-primary); background: var(--bg-hover); }
.mp-modal-body { padding: 16px 20px; overflow-y: auto; flex: 1; }

/* Récapitulatif : un vrai tableau, lisible ligne à ligne */
.mp-recap { width: 100%; border-collapse: collapse; }
.mp-recap th {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); text-align: left; padding: 0 8px 8px;
    border-bottom: 1px solid var(--border);
}
.mp-recap th.num, .mp-recap td.num { text-align: right; }
.mp-recap td { padding: 10px 8px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.mp-recap tr:last-child td { border-bottom: none; }
.mp-recap-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.mp-recap-cat { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.mp-recap td.num, .mp-recap-tot { font-variant-numeric: tabular-nums; font-size: 13px; }
.mp-recap-tot { font-weight: 700; color: var(--text-primary); }
.mp-qty { display: inline-flex; align-items: center; gap: 2px; }
.mp-qty button {
    width: 26px; height: 26px; border-radius: 7px;
    border: 1px solid var(--border-strong); background: var(--bg-surface);
    color: var(--text-secondary); font-size: 13px; cursor: pointer; line-height: 1;
}
.mp-qty button:hover { background: var(--bg-hover); color: var(--primary); border-color: var(--primary); }
.mp-qty span { min-width: 26px; text-align: center; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.mp-recap-del {
    width: 26px; height: 26px; border-radius: 7px; border: none;
    background: transparent; color: var(--text-faint); cursor: pointer; font-size: 12px;
}
.mp-recap-del:hover { background: var(--danger-soft); color: var(--danger); }

.mp-recap-total {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 14px 0 18px; padding: 12px 14px;
    background: var(--bg-hover); border-radius: 10px;
    font-size: 13.5px; color: var(--text-secondary);
}
.mp-recap-total strong { font-size: 18px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mp-modal-fields { display: grid; grid-template-columns: 1fr 150px; gap: 12px; }
@media (max-width: 560px) { .mp-modal-fields { grid-template-columns: 1fr; } }
.mp-modal .modal-footer { display: flex; justify-content: flex-end; gap: 8px; }

/* La grille récupère la largeur libérée par le panier */
.mp-sidebar { position: sticky; }
[data-theme="dark"] .mp-recap-total { background: var(--bg-hover); }
[data-theme="dark"] .mp-fab { color: #0C1020; }

/* ===================================================================
   36. BARRE DE FILTRES — classes réelles des pages de liste
   .filter-bar / .filter-chips / .search-box (vérifiées dans
   PurchaseOrders/Index.razor). Le <style> de page est injecté après
   ce fichier : !important est nécessaire pour reprendre la main.
   =================================================================== */
.filter-bar {
    display: flex !important; align-items: center !important;
    gap: 10px !important; flex-wrap: wrap !important;
    margin-bottom: 14px !important;
    background: transparent !important; border: none !important; padding: 0 !important;
}
.filter-chips {
    display: inline-flex !important; align-items: center; gap: 2px !important;
    padding: 3px !important; background: var(--bg-hover) !important;
    border: 1px solid var(--border) !important; border-radius: 10px !important;
}
.filter-chips .filter-chip {
    border: none !important; background: transparent !important; box-shadow: none !important;
    padding: 6px 13px !important; border-radius: 7px !important;
    font-size: 12.5px !important; font-weight: 550 !important;
    color: var(--text-muted) !important;
}
.filter-chips .filter-chip:hover { background: rgba(255,255,255,.75) !important; color: var(--text-primary) !important; }
.filter-chips .filter-chip.active {
    background: var(--bg-surface) !important; color: var(--primary-active) !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.08) !important; font-weight: 650 !important;
}
/* La recherche cesse d'être un pavé gris détaché */
.search-box {
    display: flex !important; align-items: center !important; gap: 8px !important;
    height: 38px !important; min-width: 230px; max-width: 320px;
    padding: 0 12px !important; margin-left: auto !important;
    background: var(--bg-surface) !important;
    border: 1px solid #DDE1E7 !important; border-radius: 9px !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.03) !important;
    transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.search-box:focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(46,81,204,.13) !important;
}
.search-box i { color: var(--text-muted) !important; font-size: 13px; flex-shrink: 0; }
.search-box input {
    border: none !important; background: transparent !important; box-shadow: none !important;
    padding: 0 !important; height: 100% !important; min-height: 0 !important;
    flex: 1; font-size: 13.5px !important;
}
[data-theme="dark"] .filter-chips { background: var(--bg-hover) !important; border-color: var(--border) !important; }
[data-theme="dark"] .filter-chips .filter-chip:hover { background: rgba(255,255,255,.06) !important; }
[data-theme="dark"] .filter-chips .filter-chip.active { background: var(--bg-elevated) !important; color: var(--primary-light) !important; }
[data-theme="dark"] .search-box { background: var(--bg-hover) !important; border-color: var(--border) !important; }


/* ===================================================================
   37. PAGE DE CONNEXION — panneau de marque CLAIR & SOBRE
   Panneau gauche en aplat neutre (var(--bg-page)) contre le
   formulaire en var(--bg-surface) : la séparation se fait par une
   nuance et un filet, sans dégradé ni teinte colorée. Tout passe par
   les tokens, donc le thème sombre suit sans surcharge dédiée.
   L'illustration a un canal alpha : aucun raccord de fond à gérer.
   Classes réelles de Auth/Login.razor ; le <style> de page passe
   après ce fichier, d'où les !important.
   =================================================================== */
.login-brand {
    /* Aplat neutre en tokens : clair en thème clair, sombre en thème
       sombre, sans aucun dégradé. L'illustration a un canal alpha,
       elle se pose donc sur n'importe quel fond. */
    background: var(--bg-page) !important;
    background-image: none !important;
    border-right: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
}
.login-brand::before, .login-brand::after { display: none !important; }

.login-brand-icon {
    background: var(--text-primary) !important; background-image: none !important;
    color: var(--bg-surface) !important;
    width: 50px !important; height: 50px !important;
    border-radius: 13px !important;
    box-shadow: none !important;
}
.brand-eyebrow { color: var(--text-muted) !important; letter-spacing: .11em !important; font-size: 10.5px !important; font-weight: 700 !important; }
.login-brand h1, .login-brand h2 {
    color: var(--text-primary) !important;
    font-size: 31px !important; letter-spacing: -.028em !important; line-height: 1.2 !important;
}
.login-brand h1 span { color: var(--text-muted) !important; }
.brand-desc { color: var(--text-muted) !important; font-size: 14px !important; line-height: 1.6 !important; }

.login-feature {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 10px !important;
    color: var(--text-secondary) !important;
    backdrop-filter: none !important;
    font-size: 13px !important; font-weight: 600 !important;
    box-shadow: none !important;
}
.login-feature i { color: var(--text-muted) !important; }

/* L'illustration se fond dans le panneau : aucun cadre, aucun masque */
.login-illus {
    display: block; margin: 22px auto 0; width: 100%;
    max-width: 340px; pointer-events: none;
}
.login-illus img { display: block; width: 100%; height: auto;
    filter: drop-shadow(0 18px 36px rgba(15,19,32,.16)); }
@media (max-height: 900px) { .login-illus { max-width: 268px; margin-top: 14px; } }
@media (max-width: 980px)  { .login-illus { display: none; } }

/* Formulaire */
.login-form-side { background: var(--bg-surface) !important; padding: 56px 48px !important; }
.login-form-card { max-width: 372px !important; width: 100% !important; margin: auto !important; }
.login-form-card h1, .login-form-card h2 { font-size: 26px !important; font-weight: 650 !important; letter-spacing: -.024em !important; }
.form-sub { color: var(--text-muted) !important; font-size: 13.5px !important; margin-bottom: 26px !important; }
.field-group { margin-bottom: 16px !important; }
.field-label { font-size: 12.5px !important; font-weight: 600 !important; color: var(--text-secondary) !important; margin-bottom: 6px !important; }
.field-input {
    min-height: 46px !important; padding: 12px 14px !important;
    border-radius: 10px !important; border: 1px solid #DDE1E7 !important;
    background: var(--bg-surface) !important; font-size: 14px !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.03) !important;
}
.field-input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(46,81,204,.13) !important; outline: none !important; }
.login-submit {
    background: var(--primary) !important; background-image: none !important;
    min-height: 46px !important; padding: 0 20px !important;
    border-radius: 10px !important; border: none !important;
    font-size: 14.5px !important; font-weight: 650 !important;
    box-shadow: 0 1px 2px rgba(29,52,137,.2) !important;
}
.login-submit:hover { background: var(--primary-hover) !important; transform: none !important; }
.login-links a { color: var(--primary) !important; font-weight: 600 !important; font-size: 13.5px !important; }
.login-error {
    background: var(--danger-soft) !important; border: 1px solid rgba(217,58,63,.24) !important;
    color: #A81F24 !important; border-radius: 10px !important; font-size: 13px !important; padding: 11px 13px !important;
}
.login-test-info {
    background: var(--bg-hover) !important; border: 1px dashed var(--border-strong) !important;
    border-radius: 10px !important; font-size: 12.5px !important; color: var(--text-muted) !important;
}

/* États vides : le carton garde son fond clair, il est sur surface claire */
.empty-state .icon, .empty-state > i {
    width: 108px !important; height: 108px !important;
    border: none !important; background: transparent !important; box-shadow: none !important;
    border-radius: 0 !important; font-size: 0 !important; color: transparent !important;
    background-image: url('../img/illus-empty-box.webp') !important;
    background-size: contain !important; background-repeat: no-repeat !important;
    background-position: center !important; mix-blend-mode: multiply;
    margin: 0 auto 12px !important;
}
.empty-state { background: transparent !important; border: 1px dashed var(--border-strong) !important; padding: 30px 20px !important; }

[data-theme="dark"] .login-illus img { opacity: .93; filter: drop-shadow(0 18px 36px rgba(0,0,0,.34)); }
[data-theme="dark"] .empty-state .icon { mix-blend-mode: normal; opacity: .8; }


/* ===================================================================
   38. CURSEURS — toute cible cliquable prend la main
   <button>, <select> et <summary> affichent la flèche par défaut dans
   tous les navigateurs : seul un <a href> passe en main tout seul.
   Jusqu'ici le pointeur n'était posé qu'au cas par cas (.btn, .icon-btn,
   .sidebar-toggle…), donc tout bouton sans ces classes gardait la flèche.
   On couvre par élément plutôt que par classe : plus rien à oublier.
   =================================================================== */
/* ── Cibles natives ─────────────────────────────────────────────── */
button, select, summary, label[for], a[href],
[role="button"], [role="tab"], [role="menuitem"], [role="option"],
input[type="checkbox"], input[type="radio"], input[type="file"],
input[type="range"], input[type="submit"], input[type="button"],

/* ── Navigation ─────────────────────────────────────────────────── */
.nav-link, .sidebar-nav a, .nav-item, .sidebar-toggle,

/* ── Boutons et actions, toutes variantes ───────────────────────── */
.btn, .icon-btn, .quick-action, .action-card, .btn-add-user,
.chip, .filter-chip, .tab, .clickable, .card.interactive,

/* ── Éléments rendus cliquables par @onclick sur un <div> : Blazor
   n'émet aucun attribut DOM pour @onclick, la classe est le seul
   sélecteur possible. Liste relevée dans Pages/ et Shared/. ─────── */
.kpi-tile, .metric-card, .org-card, .approval-row, .activity-item,
.pr-catalog-item, .notif-bell, .notif-item, .user-menu,
.user-dropdown-item,

/* ── En-têtes de colonne triables ───────────────────────────────── */
th.sortable, .table th.sortable, .data-table th.sortable {
    cursor: pointer !important;
}

/* Un élément inactif ne doit pas promettre un clic */
button:disabled, select:disabled,
.btn:disabled, .btn.disabled,
[aria-disabled="true"], .is-disabled {
    cursor: not-allowed !important;
}

/* Les champs de saisie gardent le curseur texte */
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]):not([type="range"]),
textarea {
    cursor: text;
}

/* Volontairement exclus : .modal-overlay et .modal-container. Le voile
   ferme la boîte mais ne doit pas s'annoncer comme un bouton, et le
   conteneur ne porte un @onclick que pour stopper la propagation. */


/* ===================================================================
   39. SURVOL DE LIGNE — une seule couche, posée sur les cellules
   Le fond était déclaré à la fois sur <tr> (ici, en !important, avec
   trois valeurs successives) et sur <td> (app.css). Avec
   border-collapse: separate, le fond d'un <td> est peint PAR-DESSUS
   celui de son <tr> : la couleur affichée n'était donc jamais celle
   des règles !important, et .data-table n'avait même pas de variante
   sombre. On neutralise la couche <tr> et on ne garde que les cellules.
   La transition était elle aussi posée sur <tr>, donc sur une couche
   invisible : déplacée sur <td>, le fondu se voit enfin.
   =================================================================== */
.table tbody tr:hover,
.data-table tbody tr:hover { background: transparent !important; }

.table tbody td,
.data-table tbody td { transition: background 120ms var(--ease); }

.table tbody tr:hover > td,
.data-table tbody tr:hover > td { background: var(--bg-hover) !important; }

/* En-tête collant : le fond doit être opaque, sinon les lignes défilent
   visiblement dessous et le survol « bave » à travers l'en-tête.
   La règle sombre précédente utilisait rgba(255,255,255,.035). */
.table thead th,
.data-table thead th { background: var(--bg-elevated) !important; }

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .data-table thead th { background: var(--bg-elevated) !important; }


/* ===================================================================
   40. MENU — supprimer le clignotement main/flèche
   Les .nav-link sont espacés (margin: 2px 0) et la nav a un padding
   latéral : ces vides appartiennent aux conteneurs, sans règle de
   curseur. En parcourant le menu la souris traversait sans arrêt
   lien → vide → lien, et le curseur alternait main/flèche.
   On étend la main aux conteneurs pour que la bande du menu soit
   continue ; seuls les intitulés de groupe, réellement non
   cliquables, gardent la flèche.
   =================================================================== */
.sidebar-nav,
.sidebar-nav .nav-section {
    cursor: pointer;
}
.sidebar-nav .nav-section-title,
.sidebar-logo .logo-sub {
    cursor: default;
}

/* ===================================================================
   41. MENU — le débordement doit se voir
   Le menu admin fait 27 entrées (1360 px de contenu) pour une bande
   visible de ~870 px sur un écran 1080p, et ~620 px sur un portable :
   jusqu'à 11 entrées sont hors champ. macOS affiche une barre de
   défilement en superposition (gutter de 0 px) qui reste invisible
   tant qu'on ne fait pas défiler : rien n'indiquait qu'il y avait
   une suite. On rend le débordement perceptible sans rien masquer.
   =================================================================== */

/* Ombre de bord : n'apparaît qu'en présence de contenu hors champ,
   et disparaît en fin de course. Purement CSS via scroll-driven
   background-attachment (technique « scroll shadows » de Roman Komarov). */
.sidebar-nav {
    background:
        linear-gradient(var(--sidebar-bg) 30%, rgba(255, 255, 255, 0)) top / 100% 22px no-repeat local,
        linear-gradient(rgba(255, 255, 255, 0), var(--sidebar-bg) 70%) bottom / 100% 22px no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(16, 24, 40, 0.13), rgba(0, 0, 0, 0)) top / 100% 9px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(16, 24, 40, 0.13), rgba(0, 0, 0, 0)) bottom / 100% 9px no-repeat scroll;
}
[data-theme="dark"] .sidebar-nav {
    background:
        linear-gradient(var(--sidebar-bg) 30%, rgba(0, 0, 0, 0)) top / 100% 22px no-repeat local,
        linear-gradient(rgba(0, 0, 0, 0), var(--sidebar-bg) 70%) bottom / 100% 22px no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)) top / 100% 9px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)) bottom / 100% 9px no-repeat scroll;
}

/* Barre de défilement toujours réservée dans le menu : sur macOS la
   barre en superposition ne prend aucune place et ne se voit jamais
   au repos. On force un gutter stable pour qu'elle soit visible. */
.sidebar-nav { scrollbar-gutter: stable; }
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(16, 24, 40, 0.18);
    border-radius: 99px; border: 2px solid transparent; background-clip: content-box;
}
.sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(16, 24, 40, 0.30); background-clip: content-box; }
[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); background-clip: content-box; }

/* Densité : on récupère ~190 px sur les 27 entrées en resserrant les
   espacements inter-sections, sans toucher à la taille des cibles de
   clic (les .nav-link gardent leurs 9 px de padding vertical). */
.sidebar-nav .nav-section { margin-bottom: 2px; }
.sidebar-nav .nav-section-title { padding: 12px 12px 4px !important; }
.sidebar-nav .nav-link { margin: 1px 0; }

/* ===================================================================
   42. MENU — lisibilité et curseur réellement uniforme
   =================================================================== */

/* ── 42.1 Curseur : une seule main sur toute la bande ─────────────
   La section 40 avait déjà couvert les vides entre liens, mais les
   intitulés de groupe gardaient `cursor: default` : en descendant le
   menu on traversait 4 bandes de ~36 px où la main redevenait flèche,
   d'où l'impression d'aléatoire. Ces intitulés sont purement
   décoratifs — on les rend transparents aux événements. Le curseur
   résolu est alors celui du .nav-section parent (main), sans mentir
   sur une cible cliquable puisqu'il n'y a plus de cible du tout. */
.sidebar-nav .nav-section-title,
.sidebar-logo .logo-sub,
.sidebar-logo .logo-text {
    pointer-events: none;
}
/* Filet de sécurité : tout descendant non interactif de la bande de
   navigation hérite de la main, y compris icônes et badges. */
.sidebar-nav .nav-icon,
.sidebar-nav .nav-link i,
.sidebar-nav .nav-badge {
    cursor: inherit;
}

/* ── 42.2 Taille et lisibilité ────────────────────────────────────
   13,5 px pour 27 entrées, c'était juste. On monte d'un cran sans
   changer la densité perçue : la cible de clic passe à 40 px et
   l'interligne est fixé pour que la hauteur ne dérive pas. */
.sidebar-nav .nav-link {
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    min-height: 40px;
    letter-spacing: -0.006em;
}
.sidebar-nav .nav-link.active { font-weight: 600 !important; }

/* Icônes : un poil plus grandes et surtout plus contrastées.
   #7A828E donnait 3,88:1 sur blanc — au-dessus du minimum de 3:1
   pour un élément non textuel, mais délavé à côté du libellé. */
.sidebar-nav .nav-link i,
.sidebar-nav .nav-link .nav-icon {
    font-size: 15.5px !important;
    width: 20px !important;
    color: var(--nav-icon-ink) !important;
}
.sidebar-nav .nav-link:hover i,
.sidebar-nav .nav-link:hover .nav-icon { color: var(--text-secondary) !important; }
.sidebar-nav .nav-link.active i,
.sidebar-nav .nav-link.active .nav-icon { color: var(--primary) !important; }

/* Intitulés de groupe : 11 px en capitales très espacées se lisent
   mal. On agrandit, on desserre moins, on contraste davantage. */
.sidebar-nav .nav-section-title {
    font-size: 11.5px !important;
    font-weight: 650 !important;
    letter-spacing: 0.02em !important;
    color: var(--nav-group-ink) !important;
}

/* Badges : suivent la taille du libellé pour rester lisibles. */
.sidebar-nav .nav-badge { font-size: 10.5px !important; padding: 2px 7px !important; }

/* ── 42.3 Largeur : de la place pour le texte agrandi ─────────────
   `--sidebar-width` est redéfini 4 fois dans la cascade (256 → 254 →
   232 → 244). À 244 px il reste 168 px pour le libellé, or « Absences
   & Suppléances » en fait 176 à la nouvelle taille : seul lui passait
   sur deux lignes. On repasse à 256 px et on resserre les marges
   latérales de la bande — le libellé le plus long tient alors sur une
   ligne avec 8 px de réserve. */
:root { --sidebar-width: 256px; }
/* Ces règles ne valent qu'au-dessus du point de rupture : sous 992 px le
   menu sort de l'écran (app.css) et la zone de contenu doit reprendre
   toute la largeur. Sans ce cadrage, leur spécificité (0,2,0) écrasait
   le `.main-area { margin-left: 0 }` (0,1,0) du bloc responsive et
   laissait une bande vide de 256 px à gauche sur petit écran. */
@media (min-width: 993px) {
    .sidebar:not(.collapsed) { width: var(--sidebar-width); }
    .sidebar:not(.collapsed) ~ .main-area,
    .sidebar:not(.collapsed) + .main-area { margin-left: var(--sidebar-width); }
}
@media (max-width: 992px) {
    .sidebar:not(.collapsed) ~ .main-area,
    .sidebar:not(.collapsed) + .main-area,
    .sidebar.collapsed ~ .main-area,
    .sidebar.collapsed + .main-area,
    .main-area { margin-left: 0 !important; }
}
.sidebar-nav { padding-left: 8px !important; padding-right: 8px !important; }
.sidebar-nav .nav-link { padding-left: 11px !important; padding-right: 11px !important; }

/* ── 42.4 Les encres du menu suivent le thème ─────────────────────
   Les deux teintes ci-dessus étaient codées en dur : à spécificité
   égale avec les règles [data-theme="dark"] et chargées après elles,
   elles gagnaient et repeignaient le menu sombre en gris clair
   (titres de groupe retombés à 3,0:1). On passe par des tokens. */
:root {
    --nav-icon-ink:  #656D7A;   /* 5,2:1 sur blanc */
    --nav-group-ink: #5C6470;   /* 6,0:1 sur blanc */
}
[data-theme="dark"] {
    --nav-icon-ink:  #8791A0;
    --nav-group-ink: #A3ACBA;
}

/* ===================================================================
   43. IDENTITÉ DE MARQUE — logo Baobab Procurement
   Le pictogramme « B » sur carré vert est remplacé par la marque
   réelle (squircle dégradé bleu + baobab). Le conteneur .logo-icon
   portait un fond et une ombre : on les neutralise, l'image porte
   désormais sa propre forme et son propre fond.
   =================================================================== */
.sidebar-logo .logo-icon {
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 8px;
}
.sidebar-logo .logo-icon img {
    width: 100%; height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}
/* Le libellé « Procurement » est plus long que l'ancien « Procure » :
   on resserre l'interlettrage pour qu'il tienne sous « Baobab ». */
.sidebar-logo .logo-sub { letter-spacing: 0.07em !important; white-space: nowrap; }

/* Pictogramme de marque sur les écrans d'authentification secondaires
   (mot de passe oublié, double facteur). Le modificateur .brand évite
   de toucher .logo-big « ! » de ChangePassword, qui reste un pavé
   d'alerte et garde son fond. */
.login-logo .logo-big.brand {
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: hidden;
}
.login-logo .logo-big.brand img {
    width: 100%; height: 100%;
    display: block; object-fit: cover;
    border-radius: inherit;
}

/* ===================================================================
   44. PETIT ÉCRAN — menu en tiroir
   Sous 992 px, app.css sort le menu de l'écran avec
   `transform: translateX(-100%); width: 0`. Deux problèmes :
     • `width: 0` rend le déplacement nul, et comme la sidebar est en
       `overflow: visible` (§19.13), son contenu restait affiché
       par-dessus la page ;
     • rien dans le code n'ajoutait la classe `.open` prévue par
       app.css : la navigation était donc tout simplement
       inaccessible en dessous du point de rupture.
   On garde la largeur réelle pour que le hors-écran soit complet, et
   on pilote l'ouverture depuis un bouton de la barre du haut.
   =================================================================== */
.nav-burger { display: none; }

@media (max-width: 992px) {
    .sidebar { width: var(--sidebar-width) !important; }
    .sidebar:not(.open) { transform: translateX(-100%); }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 8px 0 34px -10px rgba(16, 24, 40, 0.30);
    }
    /* Replier un menu déjà hors écran n'a pas de sens. */
    .sidebar .sidebar-toggle { display: none; }
    /* Le tiroir ignore l'état replié : on veut les libellés. */
    .sidebar.collapsed { width: var(--sidebar-width) !important; }
    .sidebar.collapsed .nav-link { font-size: 14.5px !important; justify-content: flex-start; gap: 11px !important; padding: 9px 11px !important; }
    .sidebar.collapsed .nav-section-title,
    .sidebar.collapsed .logo-text,
    .sidebar.collapsed .logo-sub,
    .sidebar.collapsed .nav-badge { display: revert !important; }

    .nav-burger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 38px; height: 38px; margin-right: 10px;
        border: 1px solid var(--border);
        background: var(--bg-surface);
        border-radius: 10px;
        color: var(--text-secondary);
        cursor: pointer; flex-shrink: 0;
        font-size: 15px;
        transition: background 140ms var(--ease), color 140ms var(--ease);
    }
    .nav-burger:hover { background: var(--bg-hover); color: var(--text-primary); }

    .nav-backdrop {
        position: fixed; inset: 0; z-index: 45;
        background: rgba(16, 24, 40, 0.42);
        animation: navBackdropIn 180ms var(--ease);
        border: 0; padding: 0; cursor: pointer;
    }
    @keyframes navBackdropIn { from { opacity: 0; } to { opacity: 1; } }
}
/* Si la fenêtre est réélargie alors que le tiroir est ouvert, le voile
   ne doit pas rester au-dessus de la page. */
@media (min-width: 993px) { .nav-backdrop { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .nav-backdrop { animation: none; }
}

/* ── 44.1 Barre du haut : dégraissage sous 992 px ─────────────────
   app.css ne retire la recherche qu'à 768 px. Entre les deux, bouton
   menu + fil d'Ariane + recherche + sélecteur d'entité + cloche +
   thème + identité ne tiennent pas : le fil d'Ariane passait sous la
   recherche et « Admin Système » se coupait en deux lignes.
   On ne garde que l'essentiel, dans l'ordre d'importance. */
@media (max-width: 992px) {
    .top-bar-search { display: none !important; }
    .top-bar .user-info-block { display: none !important; }
    .tenant-switcher-name { display: none !important; }
    .tenant-switcher-btn { padding: 0 10px !important; }

    .top-bar { padding: 0 14px !important; gap: 10px; }
    .top-bar-left { flex: 1 1 auto; min-width: 0; }
    .top-bar-right { flex: 0 0 auto; gap: 6px; }

    /* Le fil d'Ariane se tronque proprement au lieu de pousser le reste. */
    .top-bar-left .breadcrumb {
        min-width: 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
}
/* Sous 560 px, seul le niveau courant reste utile. */
@media (max-width: 560px) {
    .top-bar-left .breadcrumb > *:not(strong) { display: none; }
    .top-bar-left .breadcrumb strong { font-size: 14px; }
}