/* ============================================================
   compat.css — Pont de compatibilité hérité → design system
   Chargé EN DERNIER (AppAsset) : redéfinit toutes les variables
   des anciennes feuilles (frontend.css, professional-hardware-
   theme.css, modern-theme.css, ecommerce-theme.css) depuis les
   tokens officiels (css/theme/tokens.css), en clair ET en sombre
   ([data-theme="dark"]). Neutralise ainsi les blocs :root codés
   en dur des anciens thèmes sans les modifier.

   Règle : toute variable d'ancien thème doit finir ici, pas dans
   les vieux fichiers. À retirer avec le pont (après Epic 3).
   ============================================================ */

/* ---------- Variables héritées : CLAIR ---------- */
:root {
    /* Couleurs de marque */
    --primary: #FF6B35;                  /* token --primary              */
    --primary-dark: var(--primary-hover);
    --primary-light: var(--primary-container);
    --primary-gradient: linear-gradient(135deg, var(--primary), var(--primary-hover));
    --secondary: #1E3A8A;                /* token --secondary            */
    --secondary-hover: #1B3274;          /* token --secondary-hover      */
    --accent: var(--tertiary);
    --accent-blue: var(--info);
    --accent-purple: var(--secondary);

    /* Sémantiques (noms en conflit avec les tokens → valeurs du token) */
    --success: #15803D;                  /* token --success              */
    --warning: #B45309;                  /* token --warning              */
    --info: #2563EB;                     /* token --info                 */
    --danger: var(--error);
    --success-light: var(--success-container);
    --warning-light: var(--warning-container);
    --danger-light: var(--error-container);
    --info-light: color-mix(in srgb, var(--info) 12%, white);

    /* Surfaces / texte / bordures */
    --bg-primary: var(--surface-low);
    --bg-secondary: var(--surface-cont);
    --bg-tertiary: var(--surface-high);
    --bg-light: var(--surface-cont);
    --bg-white: var(--surface);
    --bg-gray: var(--surface-cont);
    --text-primary: var(--on-surface);
    --text-secondary: var(--on-surface-variant);
    --text-muted: var(--on-surface-variant);
    --text-light: var(--on-surface-variant);
    --border-color: var(--outline);
    --border-light: var(--outline-variant);
    --border-dark: var(--outline);

    /* Zones sombres volontaires (identiques en clair et en sombre) */
    --bg-dark: #1A202C;
    --bg-darker: #0F1419;
    --text-white: #FFFFFF;

    /* Ombres */
    --shadow-xs: var(--el-1);
    --shadow-sm: var(--el-1);
    --shadow: var(--el-2);
    --shadow-md: var(--el-2);
    --shadow-lg: var(--el-3);
    --shadow-xl: var(--el-3);
    --shadow-2xl: var(--el-3);
    --shadow-primary: 0 8px 30px color-mix(in srgb, var(--primary) 25%, transparent);
    --shadow-orange: 0 8px 30px color-mix(in srgb, var(--primary) 25%, transparent);
    --shadow-success: 0 8px 30px color-mix(in srgb, var(--success) 25%, transparent);
    --shadow-danger: 0 8px 30px color-mix(in srgb, var(--error) 25%, transparent);

    /* Arrondis */
    --radius-none: 0;
    --radius-sm: var(--r-sm);
    --radius: var(--r);
    --radius-md: var(--r-md);
    --radius-lg: var(--r-lg);
    --radius-xl: var(--r-xl);
    --radius-2xl: var(--r-2xl);
    --radius-full: var(--r-full);

    /* Transitions */
    --transition: 0.2s ease;
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-slower: 0.45s ease;

    /* Espacements hérités (modern-theme) */
    --spacing-xs: var(--s-1);
    --spacing-sm: var(--s-2);
    --spacing-md: var(--s-3);
    --spacing-lg: var(--s-4);
    --spacing-xl: var(--s-6);
    --spacing-2xl: var(--s-8);
    --spacing-3xl: var(--s-12);

    /* Espacements hérités (professional-hardware) */
    --space-1: var(--s-1);
    --space-2: var(--s-2);
    --space-3: var(--s-3);
    --space-4: var(--s-4);
    --space-5: var(--s-5);
    --space-6: var(--s-6);
    --space-8: var(--s-8);
    --space-10: var(--s-10);
    --space-12: var(--s-12);
    --space-16: var(--s-16);
    --space-20: var(--s-20);
    --space-24: 96px;

    /* Typographie héritée */
    --font-family: var(--font-body);
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    /* Disposition */
    --container-max-width: var(--container);
    --header-height: 72px;
    --header-height-mobile: 60px;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* Dégradés hérités */
    --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-hover));
    --gradient-primary-hover: linear-gradient(135deg, var(--primary-hover), var(--primary-pressed));
    --gradient-dark: linear-gradient(135deg, var(--secondary), var(--secondary-hover));
    --gradient-success: linear-gradient(135deg, var(--success), color-mix(in srgb, var(--success) 70%, var(--on-success)));
    --gradient-danger: linear-gradient(135deg, var(--error), color-mix(in srgb, var(--error) 70%, var(--on-error)));
}

/* ---------- Variables héritées : SOMBRE ---------- */
[data-theme="dark"] {
    --primary: #FF8A5C;                  /* token --primary (sombre)     */
    --primary-dark: var(--primary-hover);
    --primary-light: var(--primary-container);
    --primary-gradient: linear-gradient(135deg, var(--primary), var(--primary-hover));
    --secondary: #A5B8F0;                /* token --secondary (sombre)   */
    --secondary-hover: color-mix(in srgb, var(--secondary) 78%, white);
    --accent: var(--tertiary);
    --accent-blue: var(--info);
    --accent-purple: var(--secondary);

    --success: #4ADE80;                  /* token --success (sombre)     */
    --warning: #FBBF24;                  /* token --warning (sombre)     */
    --info: #60A5FA;                     /* token --info (sombre)        */
    --danger: var(--error);
    --success-light: var(--success-container);
    --warning-light: var(--warning-container);
    --danger-light: var(--error-container);
    --info-light: color-mix(in srgb, var(--info) 22%, var(--surface));

    --bg-primary: var(--surface-low);
    --bg-secondary: var(--surface-cont);
    --bg-tertiary: var(--surface-high);
    --bg-light: var(--surface-cont);
    --bg-white: var(--surface);
    --bg-gray: var(--surface-cont);
    --text-primary: var(--on-surface);
    --text-secondary: var(--on-surface-variant);
    --text-muted: var(--on-surface-variant);
    --text-light: var(--on-surface-variant);
    --border-color: var(--outline);
    --border-light: var(--outline-variant);
    --border-dark: var(--outline);

    --bg-dark: #1A202C;
    --bg-darker: #0F1419;
    --text-white: #FFFFFF;

    --shadow-xs: var(--el-1);
    --shadow-sm: var(--el-1);
    --shadow: var(--el-2);
    --shadow-md: var(--el-2);
    --shadow-lg: var(--el-3);
    --shadow-xl: var(--el-3);
    --shadow-2xl: var(--el-3);
    --shadow-primary: 0 8px 30px color-mix(in srgb, var(--primary) 25%, transparent);
    --shadow-orange: 0 8px 30px color-mix(in srgb, var(--primary) 25%, transparent);
    --shadow-success: 0 8px 30px color-mix(in srgb, var(--success) 25%, transparent);
    --shadow-danger: 0 8px 30px color-mix(in srgb, var(--error) 25%, transparent);

    --radius-none: 0;
    --radius-sm: var(--r-sm);
    --radius: var(--r);
    --radius-md: var(--r-md);
    --radius-lg: var(--r-lg);
    --radius-xl: var(--r-xl);
    --radius-2xl: var(--r-2xl);
    --radius-full: var(--r-full);

    --transition: 0.2s ease;
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-slower: 0.45s ease;

    --spacing-xs: var(--s-1);
    --spacing-sm: var(--s-2);
    --spacing-md: var(--s-3);
    --spacing-lg: var(--s-4);
    --spacing-xl: var(--s-6);
    --spacing-2xl: var(--s-8);
    --spacing-3xl: var(--s-12);

    --space-1: var(--s-1);
    --space-2: var(--s-2);
    --space-3: var(--s-3);
    --space-4: var(--s-4);
    --space-5: var(--s-5);
    --space-6: var(--s-6);
    --space-8: var(--s-8);
    --space-10: var(--s-10);
    --space-12: var(--s-12);
    --space-16: var(--s-16);
    --space-20: var(--s-20);
    --space-24: 96px;

    --font-family: var(--font-body);
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    --container-max-width: var(--container);
    --header-height: 72px;
    --header-height-mobile: 60px;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-hover));
    --gradient-primary-hover: linear-gradient(135deg, var(--primary-hover), var(--primary-pressed));
    --gradient-dark: linear-gradient(135deg, var(--secondary), var(--secondary-hover));
    --gradient-success: linear-gradient(135deg, var(--success), color-mix(in srgb, var(--success) 70%, var(--on-success)));
    --gradient-danger: linear-gradient(135deg, var(--error), color-mix(in srgb, var(--error) 70%, var(--on-error)));
}

/* ---------- Variables héritées : professional-hardware-theme ---------- */
:root,
[data-theme="dark"] {
    --color-primary: var(--secondary);
    --color-primary-light: var(--info);
    --color-primary-dark: var(--secondary-hover);
    --color-accent: var(--primary);              /* ancien #F97316 → token */
    --color-accent-dark: var(--primary-hover);
    --color-accent-darker: var(--error);
    --color-bg: var(--bg);
    --color-surface: var(--surface);
    --color-surface-alt: var(--surface-cont);
    --color-border: var(--outline);
    --color-border-dark: var(--outline);
    --color-text-primary: var(--on-surface);
    --color-text-secondary: var(--on-surface-variant);
    --color-text-muted: var(--on-surface-variant);
    --color-text-light: var(--on-surface-variant);
    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-danger: var(--error);
    --color-info: var(--info);
    --color-success-light: var(--success-container);
    --color-warning-light: var(--warning-container);
    --color-danger-light: var(--error-container);
    --color-info-light: var(--info-light);
}

/* ============================================================
   Bootstrap 5.3 : remap complet vers les tokens
   (les composants .card, .form-control, .alert, .badge, .text-*,
   .bg-* consomment tous var(--bs-*) — une seule redéfinition
   les aligne sur le design system, clair ET sombre).
   ============================================================ */
:root {
    --bs-primary: #FF6B35; --bs-primary-rgb: 255, 107, 53;
    --bs-secondary: #1E3A8A; --bs-secondary-rgb: 30, 58, 138;
    --bs-success: #15803D; --bs-success-rgb: 21, 128, 61;
    --bs-info: #2563EB; --bs-info-rgb: 37, 99, 235;
    --bs-warning: #B45309; --bs-warning-rgb: 180, 83, 9;
    --bs-danger: #DC2626; --bs-danger-rgb: 220, 38, 38;
    --bs-light: #F8F9FB; --bs-light-rgb: 248, 249, 251;
    --bs-dark: #15191F; --bs-dark-rgb: 21, 25, 31;
    --bs-body-color: #15191F; --bs-body-color-rgb: 21, 25, 31;
    --bs-body-bg: #FFFFFF; --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #15191F; --bs-emphasis-color-rgb: 21, 25, 31;
    --bs-secondary-color: #5A6472; --bs-secondary-color-rgb: 90, 100, 114;
    --bs-secondary-bg: #F2F4F7; --bs-secondary-bg-rgb: 242, 244, 247;
    --bs-tertiary-color: #5A6472; --bs-tertiary-color-rgb: 90, 100, 114;
    --bs-tertiary-bg: #F8F9FB; --bs-tertiary-bg-rgb: 248, 249, 251;
    --bs-link-color: #FF6B35; --bs-link-color-rgb: 255, 107, 53;
    --bs-link-hover-color: #E8551F; --bs-link-hover-color-rgb: 232, 85, 31;
    --bs-border-color: var(--outline);
    --bs-border-color-translucent: rgba(21, 25, 31, 0.12);
    --bs-card-bg: var(--surface);
    --bs-card-color: var(--on-surface);
    --bs-card-cap-bg: var(--surface-cont);
    --bs-card-border-color: var(--outline-variant);
    --bs-heading-color: var(--on-surface);
    --bs-code-color: var(--error);
    --bs-highlight-bg: var(--warning-container);
    /* Variantes sémantiques (alertes, badges text-bg-*, .text-*) */
    --bs-primary-text-emphasis: var(--primary);
    --bs-primary-bg-subtle: var(--primary-container);
    --bs-primary-border-subtle: color-mix(in srgb, var(--primary) 30%, var(--surface));
    --bs-secondary-text-emphasis: var(--secondary);
    --bs-secondary-bg-subtle: var(--secondary-container);
    --bs-secondary-border-subtle: color-mix(in srgb, var(--secondary) 30%, var(--surface));
    --bs-success-text-emphasis: var(--success);
    --bs-success-bg-subtle: var(--success-container);
    --bs-success-border-subtle: color-mix(in srgb, var(--success) 30%, var(--surface));
    --bs-info-text-emphasis: var(--info);
    --bs-info-bg-subtle: var(--info-light);
    --bs-info-border-subtle: color-mix(in srgb, var(--info) 30%, var(--surface));
    --bs-warning-text-emphasis: var(--warning);
    --bs-warning-bg-subtle: var(--warning-container);
    --bs-warning-border-subtle: color-mix(in srgb, var(--warning) 30%, var(--surface));
    --bs-danger-text-emphasis: var(--error);
    --bs-danger-bg-subtle: var(--error-container);
    --bs-danger-border-subtle: color-mix(in srgb, var(--error) 30%, var(--surface));
    --bs-light-text-emphasis: var(--on-surface-variant);
    --bs-light-bg-subtle: var(--surface-cont);
    --bs-light-border-subtle: var(--outline-variant);
    --bs-dark-text-emphasis: var(--on-surface);
    --bs-dark-bg-subtle: var(--surface-high);
    --bs-dark-border-subtle: var(--outline);
}

[data-theme="dark"] {
    --bs-primary: #FF8A5C; --bs-primary-rgb: 255, 138, 92;
    --bs-secondary: #A5B8F0; --bs-secondary-rgb: 165, 184, 240;
    --bs-success: #4ADE80; --bs-success-rgb: 74, 222, 128;
    --bs-info: #60A5FA; --bs-info-rgb: 96, 165, 250;
    --bs-warning: #FBBF24; --bs-warning-rgb: 251, 191, 36;
    --bs-danger: #F87171; --bs-danger-rgb: 248, 113, 113;
    --bs-light: #1A1F26; --bs-light-rgb: 26, 31, 38;
    --bs-dark: #E8EBF0; --bs-dark-rgb: 232, 235, 240;
    --bs-body-color: #E8EBF0; --bs-body-color-rgb: 232, 235, 240;
    --bs-body-bg: #1A1F26; --bs-body-bg-rgb: 26, 31, 38;
    --bs-emphasis-color: #E8EBF0; --bs-emphasis-color-rgb: 232, 235, 240;
    --bs-secondary-color: #A0AAB8; --bs-secondary-color-rgb: 160, 170, 184;
    --bs-secondary-bg: #1A1F26; --bs-secondary-bg-rgb: 26, 31, 38;
    --bs-tertiary-color: #A0AAB8; --bs-tertiary-color-rgb: 160, 170, 184;
    --bs-tertiary-bg: #15191F; --bs-tertiary-bg-rgb: 21, 25, 31;
    --bs-link-color: #FF8A5C; --bs-link-color-rgb: 255, 138, 92;
    --bs-link-hover-color: #FFB088; --bs-link-hover-color-rgb: 255, 176, 136;
    --bs-border-color: var(--outline);
    --bs-border-color-translucent: rgba(232, 235, 240, 0.14);
    --bs-card-bg: var(--surface);
    --bs-card-color: var(--on-surface);
    --bs-card-cap-bg: var(--surface-cont);
    --bs-card-border-color: var(--outline-variant);
    --bs-heading-color: var(--on-surface);
    --bs-code-color: var(--error);
    --bs-highlight-bg: color-mix(in srgb, var(--warning) 18%, var(--surface));
    --bs-primary-text-emphasis: var(--primary);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--primary) 18%, var(--surface));
    --bs-primary-border-subtle: color-mix(in srgb, var(--primary) 35%, var(--surface));
    --bs-secondary-text-emphasis: var(--secondary);
    --bs-secondary-bg-subtle: color-mix(in srgb, var(--secondary) 18%, var(--surface));
    --bs-secondary-border-subtle: color-mix(in srgb, var(--secondary) 35%, var(--surface));
    --bs-success-text-emphasis: var(--success);
    --bs-success-bg-subtle: color-mix(in srgb, var(--success) 18%, var(--surface));
    --bs-success-border-subtle: color-mix(in srgb, var(--success) 35%, var(--surface));
    --bs-info-text-emphasis: var(--info);
    --bs-info-bg-subtle: color-mix(in srgb, var(--info) 18%, var(--surface));
    --bs-info-border-subtle: color-mix(in srgb, var(--info) 35%, var(--surface));
    --bs-warning-text-emphasis: var(--warning);
    --bs-warning-bg-subtle: color-mix(in srgb, var(--warning) 18%, var(--surface));
    --bs-warning-border-subtle: color-mix(in srgb, var(--warning) 35%, var(--surface));
    --bs-danger-text-emphasis: var(--error);
    --bs-danger-bg-subtle: color-mix(in srgb, var(--error) 18%, var(--surface));
    --bs-danger-border-subtle: color-mix(in srgb, var(--error) 35%, var(--surface));
    --bs-light-text-emphasis: var(--on-surface-variant);
    --bs-light-bg-subtle: var(--surface-cont);
    --bs-light-border-subtle: var(--outline-variant);
    --bs-dark-text-emphasis: var(--on-surface);
    --bs-dark-bg-subtle: var(--surface-high);
    --bs-dark-border-subtle: var(--outline);
}

/* Corps : le canevas suit le basculeur du site, jamais l'OS */
[data-theme="dark"] body {
    background-color: var(--bg);
    color: var(--on-surface);
}

/* ---------- Boutons hérités : propriétés directes ----------
   ecommerce-theme/modern-theme/frontend.css écrasent la base
   var(--bs-*) de Bootstrap avec des couleurs codées en dur.
   Ces règles (chargées en dernier) remettent les boutons sur
   les tokens, clair ET sombre. */
:root .btn-primary,
[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: var(--on-primary);
    border-color: transparent;
}
:root .btn-primary:hover:not(:disabled),
[data-theme="dark"] .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-pressed));
    color: var(--on-primary);
}
:root .btn-secondary,
[data-theme="dark"] .btn-secondary {
    background: var(--surface);
    border-color: var(--outline);
    color: var(--on-surface);
}
:root .btn-secondary:hover,
[data-theme="dark"] .btn-secondary:hover {
    background: var(--surface-cont);
    border-color: var(--outline);
    color: var(--on-surface);
}
:root .btn-outline,
[data-theme="dark"] .btn-outline {
    background: transparent;
    border-color: var(--outline);
    color: var(--on-surface);
}
:root .btn-outline:hover,
[data-theme="dark"] .btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ---------- Boutons Bootstrap : texte sur couleur (contraste sombre) ---------- */
[data-theme="dark"] .btn-primary {
    --bs-btn-color: var(--on-primary);
    --bs-btn-hover-color: var(--on-primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-active-bg: var(--primary-pressed);
    --bs-btn-active-border-color: var(--primary-pressed);
    --bs-btn-disabled-color: var(--on-primary);
}
[data-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--secondary);
    --bs-btn-border-color: var(--secondary);
    --bs-btn-hover-color: var(--on-secondary);
    --bs-btn-hover-bg: var(--secondary);
    --bs-btn-hover-border-color: var(--secondary);
    --bs-btn-active-color: var(--on-secondary);
    --bs-btn-active-bg: var(--secondary);
    --bs-btn-active-border-color: var(--secondary);
}
[data-theme="dark"] .badge.text-bg-primary { color: var(--on-primary) !important; }
[data-theme="dark"] .badge.text-bg-success { color: var(--on-success) !important; }
[data-theme="dark"] .badge.text-bg-warning { color: var(--on-warning) !important; }
[data-theme="dark"] .badge.text-bg-danger { color: var(--on-error) !important; }
[data-theme="dark"] .badge.text-bg-info { color: var(--on-secondary) !important; }
[data-theme="dark"] .badge.text-bg-dark { color: var(--on-surface) !important; }

/* ---------- Boutons Bootstrap : outline-primary + variantes sémantiques ----------
   Bootstrap 5.3 code les hovers outline en dur (bleu #0d6efd) → on les
   remet sur les tokens dans les DEUX thèmes. En sombre, success/danger
   basculent sur des couleurs claires (tokens Material) → texte on-* pour
   garder le contraste (le blanc codé en dur par les thèmes hérités devient illisible). */
:root .btn-outline-primary,
[data-theme="dark"] .btn-outline-primary {
    --bs-btn-hover-color: var(--on-primary);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-active-bg: var(--primary-pressed);
    --bs-btn-active-border-color: var(--primary-pressed);
    --bs-btn-disabled-color: var(--primary);
}
:root .btn-outline-primary {
    --bs-btn-focus-shadow-rgb: 255, 107, 53; /* --primary #FF6B35 (focus ring) */
}
[data-theme="dark"] .btn-outline-primary {
    --bs-btn-focus-shadow-rgb: 255, 138, 92; /* --primary #FF8A5C (focus ring) */
}
/* Les thèmes hérités écrasent le hover outline-primary avec `color: white` ;
   en sombre le fond clair #FF8A5C rendrait le texte illisible → on reprend la main. */
[data-theme="dark"] .btn-outline-primary:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}
[data-theme="dark"] .btn-outline-primary:active {
    background: var(--primary-pressed);
    border-color: var(--primary-pressed);
    color: var(--on-primary);
}

[data-theme="dark"] .btn-success {
    background: var(--success);
    border-color: transparent;
    color: var(--on-success);
}
[data-theme="dark"] .btn-success:hover:not(:disabled) {
    background: var(--success-container);
    border-color: transparent;
    color: var(--on-success);
}
[data-theme="dark"] .btn-danger {
    background: var(--error);
    border-color: transparent;
    color: var(--on-error);
}
[data-theme="dark"] .btn-danger:hover:not(:disabled) {
    background: var(--error-container);
    border-color: transparent;
    color: var(--on-error);
}
[data-theme="dark"] .btn-outline-danger {
    color: var(--error);
    border-color: var(--error);
}
[data-theme="dark"] .btn-outline-danger:hover:not(:disabled) {
    background: var(--error);
    border-color: var(--error);
    color: var(--on-error);
}

/* ============================================================
   Blancs codés en dur dans ecommerce-theme.css / modern-theme.css
   → surfaces du design system en sombre.
   ============================================================ */
[data-theme="dark"] .main-header { background: var(--surface); }
[data-theme="dark"] .main-header.scrolled { background: color-mix(in srgb, var(--surface) 88%, transparent); }
[data-theme="dark"] .search-input { background: var(--surface-low); color: var(--on-surface); border-color: var(--outline); }
[data-theme="dark"] .product-card .card { background: var(--surface); border-color: var(--outline); color: var(--on-surface); }
[data-theme="dark"] .product-card:hover .card { border-color: var(--primary); }
[data-theme="dark"] .filters-sidebar { background: var(--surface); border-color: var(--outline); }
[data-theme="dark"] .cart-summary { background: var(--surface); border-color: var(--outline); }
[data-theme="dark"] .btn-secondary {
    background: var(--surface);
    border-color: var(--outline);
    color: var(--on-surface);
}
[data-theme="dark"] .btn-secondary:hover {
    background: var(--surface-cont);
    border-color: var(--outline);
    color: var(--on-surface);
}