/**
 * Reparly — Theme Indigo Override
 * Auteur : Imad Meskini — Reparly
 * Version : 1.2 — FIX dashboard cassé (cards stat blanches, colonnes blanches)
 *
 * STRATÉGIE v1.2 :
 *   L'app était DÉJÀ en mode sombre à la base (bleu nuit + vert).
 *   On ne fait QUE remplacer :
 *     - Le bleu nuit (#0a1628) → noir (#0a0a0a)
 *     - Le vert (#10b981)      → indigo (#6366f1)
 *   Et on PRÉSERVE les surfaces sombres (--ink-800, --ink-700) qui sont
 *   utilisées pour les cards/colonnes du dashboard.
 */

/* ============================================
   1. PALETTE — REMAP CIBLÉ (pas total)
   ============================================ */
:root {
    /* INDIGO remplace VERT (changement de couleur d'accent) */
    --green-50:  #eef2ff;
    --green-100: #e0e7ff;
    --green-300: #a5b4fc;
    --green-500: #6366f1;
    --green-600: #4f46e5;
    --green-700: #4338ca;
    --green-900: #312e81;
    --shadow-green: 0 12px 30px rgba(99, 102, 241, .35);

    /* BACKGROUND PAGE : noir au lieu de bleu nuit / paper */
    --paper:      #0a0a0a;
    --paper-warm: #14141a;

    /* INK : on inverse SEULEMENT --ink-900 et --ink-50 (text/bg de page)
       On PRÉSERVE --ink-800, --ink-700 etc. en SOMBRE car ce sont les
       surfaces utilisées par .dash-stat, .column, .dossier-card */
    --ink-900: #f8fafc;        /* texte principal (était #0a1628) */
    --ink-800: #14141a;        /* surface card (légèrement plus clair que bg) */
    --ink-700: #1f1f28;        /* surface élevée (cartes dossier) */
    --ink-600: #94a3b8;        /* texte secondaire (gardé) */
    --ink-400: #64748b;        /* texte muted (gardé) */
    --ink-300: #475569;
    --ink-200: #334155;
    --ink-100: #1f2937;        /* bordures sombres */
    --ink-50:  #111114;

    /* Shadows adaptées au sombre */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,.4);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.5);
    --shadow-xl: 0 24px 60px rgba(0,0,0,.6);

    /* Police principale → Inter au lieu de Bricolage Grotesque */
    --fd: 'Inter', system-ui, sans-serif;
}

/* Force le mode sombre permanent */
:root,
[data-theme="dark"],
[data-theme="light"] {
    --bg-page:      #0a0a0a;
    --bg-surface:   #14141a;
    --bg-surface-2: rgba(255,255,255,.03);
    --bg-surface-3: rgba(255,255,255,.06);
    --bg-input:     rgba(255,255,255,.04);
    --border-subtle: rgba(255,255,255,.06);
    --border-medium: rgba(255,255,255,.12);
    --border-strong: rgba(255,255,255,.2);
    --text-primary:   #f8fafc;
    --text-secondary: rgba(255,255,255,.75);
    --text-muted:     rgba(255,255,255,.55);
    --text-disabled:  rgba(255,255,255,.3);
    --topbar-bg:     rgba(10,10,10,.85);
    --topbar-border: rgba(255,255,255,.08);
    --hover-bg:      rgba(99,102,241,.08);
    --shadow-card:   0 4px 12px rgba(0,0,0,.4);
}


/* ============================================
   2. NEUTRALISER LE MODE LIGHT
   Toutes les règles html[data-theme="light"] sont écrasées
   pour forcer l'apparence sombre/indigo partout.
   ============================================ */

html, body { background: #0a0a0a !important; color: #f8fafc !important; }


/* ============================================
   3. LOGO MARK
   ============================================ */
.logo-mark,
.mockup-logo,
.dash-logo {
    background: linear-gradient(135deg, #6366f1, #4338ca) !important;
    box-shadow: 0 8px 20px rgba(99, 102, 241, .35) !important;
    color: #fff !important;
}


/* ============================================
   4. TOPBAR — public + dashboard
   ============================================ */
.topbar,
.dash-topbar {
    background: rgba(10, 10, 10, .85) !important;
    border-bottom-color: rgba(255, 255, 255, .08) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

html[data-theme="light"] .topbar,
html[data-theme="light"] .dash-topbar {
    background: rgba(10, 10, 10, .85) !important;
    border-bottom-color: rgba(255, 255, 255, .08) !important;
}

.logo,
.dash-name { color: #f8fafc !important; }
.dash-breadcrumb { color: rgba(255, 255, 255, .5) !important; }

.nav-links a { color: rgba(255, 255, 255, .75) !important; }
.nav-links a:hover { color: #a5b4fc !important; }

.nav-cta {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px -6px rgba(99, 102, 241, .45);
}
.nav-cta:hover {
    background: linear-gradient(135deg, #4f46e5, #4338ca) !important;
    transform: translateY(-1px);
}

/* Dashboard search */
.dash-search,
html[data-theme="light"] .dash-search {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    color: #f8fafc !important;
}
.dash-search::placeholder,
html[data-theme="light"] .dash-search::placeholder {
    color: rgba(255, 255, 255, .4) !important;
}


/* ============================================
   5. HERO + FIX BUG 1 (text gradient)
   ============================================ */
.hero { overflow: hidden !important; position: relative; }

.hero::before {
    background: radial-gradient(circle, rgba(99, 102, 241, .15) 0%, transparent 60%) !important;
    width: 500px !important; height: 500px !important;
    top: -200px !important; right: -150px !important;
    filter: blur(40px);
}
.hero::after {
    background: radial-gradient(circle, rgba(67, 56, 202, .12) 0%, transparent 60%) !important;
    width: 400px !important; height: 400px !important;
    bottom: -150px !important; left: -100px !important;
    filter: blur(40px);
}

.eyebrow {
    background: rgba(99, 102, 241, .08) !important;
    border-color: rgba(99, 102, 241, .25) !important;
    color: #a5b4fc !important;
}
.eyebrow .dot { background: #6366f1 !important; }

h1.hero-title,
.hero-title { color: #f8fafc !important; }

.hero-title .accent,
.block-title .accent {
    background: linear-gradient(135deg, #6366f1, #818cf8, #a5b4fc) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-style: normal !important;
    display: inline-block;
    padding-bottom: 0.05em;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-title .accent,
    .block-title .accent {
        background: none !important;
        color: #818cf8 !important;
        -webkit-text-fill-color: #818cf8 !important;
    }
}

.hero-subtitle { color: rgba(255, 255, 255, .7) !important; }
.hero-stats { border-top-color: rgba(255, 255, 255, .08) !important; }
.stat-item .stat-value { color: #f8fafc !important; }
.stat-item .stat-label { color: rgba(255, 255, 255, .55) !important; }


/* ============================================
   6. BLOCKS / SECTIONS
   ============================================ */
section.block {
    background: #0a0a0a !important;
    overflow: hidden !important;
    position: relative;
}
.block-inner { position: relative; z-index: 1; }
.block-num { color: #818cf8 !important; }
.block-eyebrow {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: rgba(255, 255, 255, .7) !important;
}
.block-title { color: #f8fafc !important; }
.block-title .strike { color: #f87171 !important; }
.block-subtitle { color: rgba(255, 255, 255, .65) !important; }


/* ============================================
   7. BOUTONS
   ============================================ */
.btn-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px -6px rgba(99, 102, 241, .45) !important;
    border: none !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #4f46e5, #4338ca) !important;
    box-shadow: 0 16px 32px -6px rgba(99, 102, 241, .6) !important;
    transform: translateY(-2px);
}
.btn-secondary {
    background: rgba(255, 255, 255, .04) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(99, 102, 241, .4) !important;
    transform: translateY(-2px);
}


/* ============================================
   8. FEATURE LIST
   ============================================ */
.feature-list li {
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
}
.feature-list .num { color: #818cf8 !important; }
.feature-list .text strong { color: #f8fafc !important; }
.feature-list .text span { color: rgba(255, 255, 255, .65) !important; }


/* ============================================
   9. PILOT / DOSSIER MOCKUPS LANDING
   ============================================ */
.pilot-mockup,
.dossier-mockup,
.mockup-card {
    background: #14141a !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
}
.pilot-meta .badge {
    background: rgba(99, 102, 241, .15) !important;
    color: #a5b4fc !important;
}
.pilot-card,
.mockup-card-item {
    background: #1f1f28 !important;
    border-color: rgba(255, 255, 255, .04) !important;
}
.dossier-mockup-head .pill-cours {
    background: rgba(99, 102, 241, .15) !important;
    color: #a5b4fc !important;
}
.bonus-row {
    background: rgba(99, 102, 241, .08) !important;
    border-color: rgba(99, 102, 241, .25) !important;
}
.bonus-row .amount,
.bonus-row .piec { color: #a5b4fc !important; }


/* ============================================
   10. COMPARISON CARDS
   ============================================ */
.comp-card {
    background: #14141a !important;
    color: #f8fafc !important;
    box-shadow: 0 12px 30px -10px rgba(0,0,0,.5) !important;
    overflow: hidden !important;
    position: relative !important;
}
.comp-card::before {
    height: 4px !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    bottom: auto !important; width: auto !important; z-index: 2;
}
.comp-card.bad::before {
    background: linear-gradient(90deg, #ef4444, #fca5a5) !important;
}
.comp-card.good::before {
    background: linear-gradient(90deg, #6366f1, #a5b4fc) !important;
}
.comp-card::after { display: none !important; }
.comp-card.bad { border: 1px solid rgba(239, 68, 68, .25) !important; }
.comp-card.good {
    background: linear-gradient(180deg, rgba(99,102,241,.06), #14141a 60%) !important;
    border: 1px solid rgba(99, 102, 241, .3) !important;
}
.comp-eyebrow.bad { color: #fca5a5 !important; }
.comp-eyebrow.good { color: #a5b4fc !important; }
.comp-title { color: #f8fafc !important; }
.comp-list li { color: rgba(255, 255, 255, .8) !important; }
.comp-list li strong { color: #f8fafc !important; }
.comp-list .ic.bad {
    background: rgba(239, 68, 68, .15) !important;
    color: #fca5a5 !important;
}
.comp-list .ic.good {
    background: rgba(99, 102, 241, .18) !important;
    color: #a5b4fc !important;
}
.comp-foot { border-top-color: rgba(255, 255, 255, .08) !important; }
.comp-foot-label { color: rgba(255, 255, 255, .5) !important; }
.comp-foot-value.bad { color: #fca5a5 !important; }
.comp-foot-value.good {
    background: linear-gradient(135deg, #6366f1, #a5b4fc) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.comp-arrow {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: #fff !important;
}


/* ============================================
   11. ⭐  DASHBOARD — fix critique du bazar visuel
   ============================================ */

.dash-body { background: #0a0a0a !important; color: #f8fafc !important; }
.dash-main { background: transparent !important; }

/* Titre + sous-titre */
.dash-title,
html[data-theme="light"] .dash-title {
    color: #f8fafc !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}
.dash-subtitle,
html[data-theme="light"] .dash-subtitle {
    color: rgba(255, 255, 255, .55) !important;
}

/* Cards de statistiques (TOTAL / EN COURS / RÉPARÉS / BONUS CRÉDITÉ) */
.dash-stat,
html[data-theme="light"] .dash-stat {
    background: #14141a !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 14px !important;
    color: #f8fafc !important;
}
.dash-stat-label,
html[data-theme="light"] .dash-stat-label {
    color: rgba(255, 255, 255, .55) !important;
}
.dash-stat-value,
html[data-theme="light"] .dash-stat-value {
    color: #f8fafc !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}
.dash-stat-value.green {
    color: #a5b4fc !important;  /* le "vert" devient indigo */
}
.dash-stat-value.amber {
    color: #fbbf24 !important;
}

/* Trial banner (28 jours restants…) */
.trial-banner,
html[data-theme="light"] .trial-banner {
    background: rgba(245, 158, 11, .08) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, .25) !important;
    border-radius: 12px !important;
}
.trial-banner-text,
html[data-theme="light"] .trial-banner-text {
    color: #fbbf24 !important;
}
.trial-banner a,
.trial-banner button {
    color: #fff !important;
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
}

/* Stock low banner */
[class*="stock-low"],
[class*="stock-banner"] {
    background: rgba(245, 158, 11, .08) !important;
    border: 1px solid rgba(245, 158, 11, .25) !important;
    color: #fbbf24 !important;
}


/* ============================================
   12. ⭐  KANBAN COLONNES — fix bazar
   ============================================ */

.columns,
html[data-theme="light"] .columns {
    background: transparent !important;
}

/* Colonnes : surface sombre uniforme indigo, plus de gris clair */
.column,
html[data-theme="light"] .column {
    background: #14141a !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 14px !important;
    padding: 18px !important;
}
.column-header,
html[data-theme="light"] .column-header {
    color: #f8fafc !important;
    border-bottom-color: rgba(255, 255, 255, .06) !important;
}
.column-title,
html[data-theme="light"] .column-title {
    color: rgba(255, 255, 255, .8) !important;
}
.column-count,
html[data-theme="light"] .column-count {
    background: rgba(255, 255, 255, .06) !important;
    color: rgba(255, 255, 255, .7) !important;
}

/* Dots colonnes */
.column-dot.diagnostic { background: #60a5fa !important; }
.column-dot.devis      { background: #c084fc !important; }
.column-dot.attente    { background: #fbbf24 !important; }
.column-dot.repare     { background: #a5b4fc !important; }
.column-dot.restitue   { background: rgba(255, 255, 255, .5) !important; }

/* Cartes dossier dans le kanban */
.dossier-card,
html[data-theme="light"] .dossier-card {
    background: #1f1f28 !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}
.dossier-card:hover,
html[data-theme="light"] .dossier-card:hover {
    background: #25252e !important;
    border-color: rgba(99, 102, 241, .35) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, .12) !important;
    transform: translateY(-2px);
}
.dossier-id,
html[data-theme="light"] .dossier-id {
    color: rgba(255, 255, 255, .5) !important;
}

/* État vide colonne */
.empty-col,
html[data-theme="light"] .empty-col {
    color: rgba(255, 255, 255, .35) !important;
}

/* Bouton + ajout dans colonne */
.add-btn,
html[data-theme="light"] .add-btn {
    background: rgba(255, 255, 255, .03) !important;
    color: rgba(255, 255, 255, .55) !important;
    border: 1px dashed rgba(255, 255, 255, .15) !important;
}
.add-btn:hover,
html[data-theme="light"] .add-btn:hover {
    background: rgba(99, 102, 241, .08) !important;
    color: #a5b4fc !important;
    border-color: rgba(99, 102, 241, .4) !important;
}


/* ============================================
   13. NAV-ICON / NAV-ACTION (icônes topbar dashboard)
   ============================================ */

.nav-icon,
html[data-theme="light"] .nav-icon {
    color: rgba(255, 255, 255, .65) !important;
}
.nav-icon:hover,
html[data-theme="light"] .nav-icon:hover {
    color: #a5b4fc !important;
    background: rgba(99, 102, 241, .08) !important;
    border-color: rgba(99, 102, 241, .25) !important;
}
.nav-action,
html[data-theme="light"] .nav-action {
    color: rgba(255, 255, 255, .8) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    background: rgba(255, 255, 255, .04) !important;
}
.nav-action:hover,
html[data-theme="light"] .nav-action:hover {
    color: #f8fafc !important;
    background: rgba(99, 102, 241, .08) !important;
    border-color: rgba(99, 102, 241, .35) !important;
}
.nav-divider,
html[data-theme="light"] .nav-divider {
    background: rgba(255, 255, 255, .12) !important;
}
.lang-toggle,
html[data-theme="light"] .lang-toggle {
    color: rgba(255, 255, 255, .65) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    background: transparent !important;
}
.lang-toggle:hover,
html[data-theme="light"] .lang-toggle:hover {
    color: #a5b4fc !important;
    border-color: rgba(99, 102, 241, .35) !important;
    background: rgba(99, 102, 241, .08) !important;
}


/* ============================================
   14. FORMULAIRES / INPUTS / AUTH
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea,
.form-input,
.form-select,
.form-textarea,
.input,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .form-input,
html[data-theme="light"] .form-select,
html[data-theme="light"] .form-textarea {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    color: #f8fafc !important;
}
input::placeholder,
textarea::placeholder { color: rgba(255, 255, 255, .35) !important; }

input:focus,
select:focus,
textarea:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15) !important;
    outline: none;
}

.form-label,
label { color: rgba(255, 255, 255, .8) !important; }

.auth-wrap {
    background: #0a0a0a !important;
    min-height: 100vh;
}
.auth-card,
html[data-theme="light"] .auth-card {
    background: #14141a !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 16px !important;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.6) !important;
}
.auth-title { color: #f8fafc !important; }
.auth-subtitle { color: rgba(255, 255, 255, .7) !important; }
.auth-subtitle strong { color: #a5b4fc !important; }
.auth-footer {
    color: rgba(255, 255, 255, .55) !important;
    border-top-color: rgba(255, 255, 255, .08) !important;
}
.auth-footer a {
    color: #a5b4fc !important;
    font-weight: 600;
}
.auth-footer a:hover { color: #818cf8 !important; }

.btn-submit {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 12px 24px -6px rgba(99, 102, 241, .45) !important;
}
.btn-submit:hover {
    background: linear-gradient(135deg, #4f46e5, #4338ca) !important;
    transform: translateY(-1px);
}

/* Alerts */
.alert { border-radius: 10px !important; padding: 12px 16px !important; }
.alert-error {
    background: rgba(239, 68, 68, .1) !important;
    border: 1px solid rgba(239, 68, 68, .3) !important;
    color: #fca5a5 !important;
}
.alert-success {
    background: rgba(99, 102, 241, .1) !important;
    border: 1px solid rgba(99, 102, 241, .3) !important;
    color: #a5b4fc !important;
}
.alert-info {
    background: rgba(59, 130, 246, .1) !important;
    border: 1px solid rgba(59, 130, 246, .3) !important;
    color: #93c5fd !important;
}
.alert-warning {
    background: rgba(245, 158, 11, .1) !important;
    border: 1px solid rgba(245, 158, 11, .3) !important;
    color: #fbbf24 !important;
}


/* ============================================
   15. CARDS / TABLES / GENERIC
   ============================================ */
.card,
.stat-card,
.dashboard-card {
    background: #14141a !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    color: #f8fafc !important;
}

table { color: #f8fafc !important; background: transparent !important; }
th {
    background: rgba(255, 255, 255, .04) !important;
    color: rgba(255, 255, 255, .7) !important;
    border-bottom-color: rgba(255, 255, 255, .08) !important;
}
td { border-bottom-color: rgba(255, 255, 255, .04) !important; }
tr:hover { background: rgba(99, 102, 241, .04) !important; }

html[data-theme="light"] table,
html[data-theme="light"] th,
html[data-theme="light"] td {
    background: transparent !important;
    color: #f8fafc !important;
}


/* ============================================
   16. BADGES / CHIPS / TAGS
   ============================================ */
.badge,
.chip,
.tag {
    background: rgba(255, 255, 255, .06) !important;
    color: #f8fafc !important;
}
.badge-green,
.chip-green,
.tag-green,
.mockup-tag.brand {
    background: rgba(99, 102, 241, .15) !important;
    color: #a5b4fc !important;
}
.mockup-tag.bonus {
    background: rgba(251, 191, 36, .15) !important;
    color: #fbbf24 !important;
}


/* ============================================
   17. FOOTER
   ============================================ */
footer {
    background: #14141a !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
    color: rgba(255, 255, 255, .65) !important;
}
footer a { color: rgba(255, 255, 255, .65) !important; }
footer a:hover { color: #a5b4fc !important; }


/* ============================================
   18. PRICING CARDS
   ============================================ */
.pricing-card,
.plan-card,
.tier-card,
html[data-theme="light"] .pricing-card {
    background: #14141a !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    color: #f8fafc !important;
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3) !important;
}
.pricing-card.featured,
.plan-card.featured,
.tier-card.popular {
    background: linear-gradient(180deg, rgba(99,102,241,.08), #14141a 50%) !important;
    border-color: rgba(99, 102, 241, .3) !important;
    box-shadow: 0 30px 60px -20px rgba(99, 102, 241, .25) !important;
}


/* ============================================
   19. MODALS
   ============================================ */
.modal,
.dialog,
[role="dialog"] {
    background: #14141a !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    color: #f8fafc !important;
}
.modal-overlay,
.backdrop { background: rgba(0, 0, 0, .7) !important; }


/* ============================================
   20. SIDEBAR
   ============================================ */
.sidebar,
.app-sidebar {
    background: #14141a !important;
    border-right: 1px solid rgba(255, 255, 255, .06) !important;
}
.sidebar a,
.sidebar-link { color: rgba(255, 255, 255, .65) !important; }
.sidebar a:hover,
.sidebar-link:hover {
    background: rgba(99, 102, 241, .08) !important;
    color: #a5b4fc !important;
}
.sidebar a.active,
.sidebar-link.active {
    background: rgba(99, 102, 241, .12) !important;
    color: #a5b4fc !important;
    border-left: 3px solid #6366f1;
}


/* ============================================
   21. TEAM / ANNUAIRE / FEAT-CARD ÉLÉMENTS LANDING
   ============================================ */
.team-mockup,
.annuaire-mockup,
.feat-card,
.signature-demo,
.notif-row,
.sync-demo .box,
.stats-demo,
.integ-card,
.onb-step,
.trust-card,
.testimonial,
.faq-item,
.demand-item {
    background: #14141a !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    color: #f8fafc !important;
}


/* ============================================
   22. ANIMATIONS
   ============================================ */
@keyframes float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(20px, -15px); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}