/* ==============================
   VARIABLES CSS
   Toutes les couleurs du projet
   ============================== */

:root {
    /* ===== COULEURS PRIMAIRES (Or/Gold) ===== */
    --gold: #c9a962;
    --gold-light: #e8d5a3;
    --gold-lighter: #d4b977;
    --gold-dark: #8b7355;
    
    /* ===== ACCENT (éléments interactifs) ===== */
    --accent: var(--gold);
    --accent-dark: var(--gold-dark);
    --accent-alpha: rgba(201, 168, 98, 0.22);
    
    /* ===== FONDS SOMBRES ===== */
    --dark: #1a1a1a;
    --dark-soft: #2d2d2d;
    --dark-lighter: #3d3d3d;
    --dark-blue: #1a1a2e;
    --dark-blue-deep: #16213e;
    
    /* ===== FONDS CLAIRS ===== */
    --white: #ffffff;
    --cream: #f8f6f1;
    --cream-dark: #e8e4db;
    --cream-darker: #ebe6dc;
    --cream-darkest: #e0dbd0;
    --bg-light: #fbfaf8;
    --bg-lighter: #f8f8f8;
    --bg-gray: #f5f5f5;
    
    /* ===== BORDURES & SÉPARATEURS ===== */
    --border-light: #f0f0f0;
    --border-medium: #e8e8e8;
    --border-dark: #e0e0e0;
    --border-darker: #ddd;
    --border-darkest: #ccc;
    
    /* ===== TEXTES ===== */
    --text-dark: #333333;
    --text-medium: #555555;
    --text-light: #666666;
    --text-muted: #888888;
    --text-placeholder: #999999;
    --text-disabled: #aaaaaa;
    
    /* ===== COULEURS SÉMANTIQUES ===== */
    --success: #16a34a;
    --success-dark: #15803d;
    --danger: #dc2626;
    
    /* ===== WIDGET ICONS ===== */
    --widget-icon: #c9a962;
    
    /* ===== AVATAR ===== */
    --avatar-bg: #c9a962;
    --avatar-text: #333333;
    
    /* ===== DIMENSIONS ===== */
    --sidebar-width: 120px;
    --header-height: 80px;
    
    /* ===== SCROLLBAR ===== */
    --scrollbar-thumb: #888888;
    --scrollbar-thumb-hover: #777777;
    --scrollbar-thumb-active: #666666;
    --scrollbar-size: 5px;
    
    /* ===== CHART ===== */
    --chart-line: #c9a962;
    --chart-gradient-start: rgba(201, 169, 98, 0.15);
    --chart-gradient-end: rgba(201, 169, 98, 0);
    --chart-point-hover: #c9a962;
    --chart-text: #999999;
    --chart-grid: rgba(0, 0, 0, 0.05);
    --chart-tooltip-bg: #1a1a1a;
    --chart-tooltip-title: #ffffff;
    --chart-tooltip-body: #c9a962;
}
/* ==============================
   THÈME : MONOCHROME
   ============================== */

body.theme-monochrome {
    /* Accent → Gris foncé */
    --accent: #666666;
    --accent-dark: #444444;
    --accent-alpha: rgba(102, 102, 102, 0.22);
    
    /* Gold → Blanc */
    --gold: #ffffff;
    --gold-light: #fafafa;
    --gold-lighter: #f5f5f5;
    --gold-dark: #e0e0e0;
    
    /* Cream → Gris clair */
    --cream: #f5f5f5;
    --cream-dark: #e8e8e8;
    --cream-darker: #e0e0e0;
    --cream-darkest: #d0d0d0;
    --bg-light: #fafafa;
    --bg-lighter: #fcfcfc;
    --bg-gray: #f0f0f0;
    
    /* Chart → Gris foncé (éclairci) */
    --chart-line: #666666;
    --chart-gradient-start: rgba(102, 102, 102, 0.12);
    --chart-gradient-end: rgba(102, 102, 102, 0);
    --chart-point-hover: #666666;
    --chart-tooltip-body: #ffffff;
    
    /* Scrollbar → Gris clair */
    --scrollbar-thumb: #888888;
    --scrollbar-thumb-hover: #777777;
    --scrollbar-thumb-active: #666666;
    
    /* Couleurs sémantiques */
    --success: #2bc664;
    --success-dark: #1f954a;
    --danger: #fb4c4c;
    
    /* Widget icons */
    --widget-icon: #666666;
    
    /* Avatar */
    --avatar-bg: #666666;
    --avatar-text: #ffffff;
}

/* ============================
   THEME: ROSE GOLD
   ============================ */
body.theme-rosegold {
    /* Accent → Rose Gold flashy */
    --accent: #D4708A;
    --accent-dark: #B85A73;
    --accent-alpha: rgba(212, 112, 138, 0.22);
    
    /* Gold → Rose Gold flashy */
    --gold: #D4708A;
    --gold-light: #E091A6;
    --gold-lighter: #EAABB9;
    --gold-dark: #B85A73;
    
    /* Cream → Gris clair (comme monochrome) */
    --cream: #f5f5f5;
    --cream-dark: #e8e8e8;
    --cream-darker: #e0e0e0;
    --cream-darkest: #d0d0d0;
    --bg-light: #fafafa;
    --bg-lighter: #fcfcfc;
    --bg-gray: #f0f0f0;
    
    /* Chart → Rose Gold flashy */
    --chart-line: #D4708A;
    --chart-gradient-start: rgba(212, 112, 138, 0.12);
    --chart-gradient-end: rgba(212, 112, 138, 0);
    --chart-point-hover: #D4708A;
    --chart-tooltip-body: #ffffff;
    
    /* Scrollbar → Gris foncé opaque */
    --scrollbar-thumb: #666666;
    --scrollbar-thumb-hover: #555555;
    --scrollbar-thumb-active: #444444;
    
    /* Couleurs sémantiques */
    --success: #43e098;
    --success-dark: #38bd80;
    --danger: #D4708A;
    
    /* Widget icons */
    --widget-icon: #666666;
    
    /* Avatar */
    --avatar-bg: #D4708A;
    --avatar-text: #ffffff;
}

/* ============================
   THEME: SAPPHIRE
   ============================ */
body.theme-sapphire {
    /* Accent → Bleu Saphir lumineux */
    --accent: #5A9CE8;
    --accent-dark: #4A88D0;
    --accent-alpha: rgba(90, 156, 232, 0.22);
    
    /* Gold → Bleu Saphir lumineux */
    --gold: #5A9CE8;
    --gold-light: #7BB4F0;
    --gold-lighter: #9CCAF8;
    --gold-dark: #4A88D0;
    
    /* Dark → Noir profond (header/sidebar) */
    --dark: #1A2535;
    --dark-soft: #243045;
    --dark-lighter: #2E3A50;
    
    /* Cream → Gris clair (comme monochrome) */
    --cream: #f5f5f5;
    --cream-dark: #e8e8e8;
    --cream-darker: #e0e0e0;
    --cream-darkest: #d0d0d0;
    --bg-light: #fafafa;
    --bg-lighter: #fcfcfc;
    --bg-gray: #f0f0f0;
    
    /* Chart → Bleu Saphir lumineux */
    --chart-line: #5A9CE8;
    --chart-gradient-start: rgba(90, 156, 232, 0.12);
    --chart-gradient-end: rgba(90, 156, 232, 0);
    --chart-point-hover: #5A9CE8;
    --chart-tooltip-body: #ffffff;
    
    /* Scrollbar → Gris foncé opaque */
    --scrollbar-thumb: #666666;
    --scrollbar-thumb-hover: #555555;
    --scrollbar-thumb-active: #444444;
    
    /* Couleurs sémantiques */
    --success: #38A169;
    --success-dark: #2F855A;
    --danger: #C53030;
    
    /* Widget icons */
    --widget-icon: #666666;
    
    /* Avatar */
    --avatar-bg: #5A9CE8;
    --avatar-text: #ffffff;
}

/* ============================
   THEME: COPPER
   ============================ */
body.theme-copper {
    /* Accent → Cuivre */
    --accent: #C87941;
    --accent-dark: #A66335;
    --accent-alpha: rgba(200, 121, 65, 0.22);
    
    /* Gold → Cuivre */
    --gold: #C87941;
    --gold-light: #D99A6A;
    --gold-lighter: #E5B78E;
    --gold-dark: #A66335;
    
    /* Dark → Noir profond (header/sidebar) */
    --dark: #2A1F1A;
    --dark-soft: #352820;
    --dark-lighter: #403228;
    
    /* Cream → Gris clair (comme monochrome) */
    --cream: #f5f5f5;
    --cream-dark: #e8e8e8;
    --cream-darker: #e0e0e0;
    --cream-darkest: #d0d0d0;
    --bg-light: #fafafa;
    --bg-lighter: #fcfcfc;
    --bg-gray: #f0f0f0;
    
    /* Chart → Cuivre */
    --chart-line: #C87941;
    --chart-gradient-start: rgba(200, 121, 65, 0.12);
    --chart-gradient-end: rgba(200, 121, 65, 0);
    --chart-point-hover: #C87941;
    --chart-tooltip-body: #ffffff;
    
    /* Scrollbar → Gris foncé opaque */
    --scrollbar-thumb: #666666;
    --scrollbar-thumb-hover: #555555;
    --scrollbar-thumb-active: #444444;
    
    /* Couleurs sémantiques */
    --success: #3D9970;
    --success-dark: #2E7D5A;
    --danger: #C75050;
    
    /* Widget icons */
    --widget-icon: #666666;
    
    /* Avatar */
    --avatar-bg: #C87941;
    --avatar-text: #ffffff;
}

/* ============================
   THEME: BORDEAUX
   ============================ */
body.theme-bordeaux {
    /* Accent → Rouge Carmin */
    --accent: #D93636;
    --accent-dark: #B82D2D;
    --accent-alpha: rgba(217, 54, 54, 0.22);
    
    /* Gold → Rouge Carmin */
    --gold: #D93636;
    --gold-light: #E85555;
    --gold-lighter: #F07878;
    --gold-dark: #B82D2D;
    
    /* Dark → Noir profond (header/sidebar) */
    --dark: #2A1A1A;
    --dark-soft: #352020;
    --dark-lighter: #402828;
    
    /* Cream → Gris clair (comme monochrome) */
    --cream: #f5f5f5;
    --cream-dark: #e8e8e8;
    --cream-darker: #e0e0e0;
    --cream-darkest: #d0d0d0;
    --bg-light: #fafafa;
    --bg-lighter: #fcfcfc;
    --bg-gray: #f0f0f0;
    
    /* Chart → Rouge Carmin */
    --chart-line: #D93636;
    --chart-gradient-start: rgba(217, 54, 54, 0.12);
    --chart-gradient-end: rgba(217, 54, 54, 0);
    --chart-point-hover: #D93636;
    --chart-tooltip-body: #ffffff;
    
    /* Scrollbar → Gris foncé opaque */
    --scrollbar-thumb: #666666;
    --scrollbar-thumb-hover: #555555;
    --scrollbar-thumb-active: #444444;
    
    /* Couleurs sémantiques */
    --success: #3D9970;
    --success-dark: #2E7D5A;
    --danger: #D93636;
    
    /* Widget icons */
    --widget-icon: #666666;
    
    /* Avatar */
    --avatar-bg: #D93636;
    --avatar-text: #ffffff;
}

/* ============================
   THEME: DARK MONOCHROME
   ============================ */
body.theme-dark {
    /* Accent → Gris moyen */
    --accent: #888888;
    --accent-dark: #666666;
    --accent-alpha: rgba(136, 136, 136, 0.22);
    
    /* Gold → Blanc/Gris clair */
    --gold: #ffffff;
    --gold-light: #e0e0e0;
    --gold-lighter: #cccccc;
    --gold-dark: #aaaaaa;
    
    /* Dark → Noir profond (header/sidebar) */
    --dark: #0D0D0D;
    --dark-soft: #151515;
    --dark-lighter: #1E1E1E;
    --dark-blue: #0D0D0D;
    --dark-blue-deep: #0A0A0A;
    
    /* Fonds principaux → Sombres avec hiérarchie */
    --white: #1E1E1E;
    --cream: #282828;
    --cream-dark: #323232;
    --cream-darker: #3C3C3C;
    --cream-darkest: #464646;
    --bg-light: #1A1A1A;
    --bg-lighter: #222222;
    --bg-gray: #151515;
    
    /* Bordures → Sombres */
    --border-light: #3A3A3A;
    --border-medium: #444444;
    --border-dark: #4E4E4E;
    --border-darker: #585858;
    --border-darkest: #626262;
    
    /* Textes → Clairs */
    --text-dark: #E8E8E8;
    --text-medium: #CCCCCC;
    --text-light: #AAAAAA;
    --text-muted: #888888;
    --text-placeholder: #888888;
    --text-disabled: #555555;
    
    /* Chart → Gris clair */
    --chart-line: #888888;
    --chart-gradient-start: rgba(136, 136, 136, 0.15);
    --chart-gradient-end: rgba(136, 136, 136, 0);
    --chart-point-hover: #888888;
    --chart-text: #888888;
    --chart-grid: rgba(255, 255, 255, 0.08);
    --chart-tooltip-bg: #333333;
    --chart-tooltip-title: #ffffff;
    --chart-tooltip-body: #ffffff;
    
    /* Scrollbar → Gris */
    --scrollbar-thumb: #555555;
    --scrollbar-thumb-hover: #666666;
    --scrollbar-thumb-active: #777777;
    
    /* Couleurs sémantiques → Style marché financier */
    --success: #10B981;
    --success-dark: #059669;
    --danger: #EF4444;
    
    /* Widget icons */
    --widget-icon: #ffffff;
    
    /* Avatar */
    --avatar-bg: #888888;
    --avatar-text: #ffffff;
}

/* Overrides spécifiques thème dark */
body.theme-dark .header-logo {
    color: #AAAAAA;
}

body.theme-dark .mobile-header-title {
    color: #ffffff;
}

body.theme-dark .mobile-hamburger {
    color: #ffffff;
}

body.theme-dark .product-fab {
    color: #ffffff;
}

body.theme-dark .product-fab svg {
    stroke: #ffffff;
}

body.theme-dark .history-invoice-btn {
    color: #ffffff;
}

body.theme-dark .table-action-btn {
    color: #ffffff;
}
/* ============================
   THEME: DARK GOLD
   ============================ */
body.theme-dark-gold {
    /* Accent → Or */
    --accent: #c9a962;
    --accent-dark: #b8954a;
    --accent-alpha: rgba(201, 168, 98, 0.22);
    
    /* Gold → Or */
    --gold: #c9a962;
    --gold-light: #e8d5a3;
    --gold-lighter: #d4b977;
    --gold-dark: #8b7355;
    
    /* Dark → Noir profond (header/sidebar) */
    --dark: #0D0D0D;
    --dark-soft: #151515;
    --dark-lighter: #1E1E1E;
    --dark-blue: #0D0D0D;
    --dark-blue-deep: #0A0A0A;
    
    /* Fonds principaux → Sombres */
    --white: #1E1E1E;
    --cream: #282828;
    --cream-dark: #323232;
    --cream-darker: #3C3C3C;
    --cream-darkest: #464646;
    --bg-light: #1A1A1A;
    --bg-lighter: #222222;
    --bg-gray: #151515;
    
    /* Bordures → Sombres */
    --border-light: #3A3A3A;
    --border-medium: #444444;
    --border-dark: #4E4E4E;
    --border-darker: #585858;
    --border-darkest: #626262;
    
    /* Textes → Clairs */
    --text-dark: #E8E8E8;
    --text-medium: #CCCCCC;
    --text-light: #AAAAAA;
    --text-muted: #888888;
    --text-placeholder: #888888;
    --text-disabled: #555555;
    
    /* Chart → Or */
    --chart-line: #c9a962;
    --chart-gradient-start: rgba(201, 169, 98, 0.15);
    --chart-gradient-end: rgba(201, 169, 98, 0);
    --chart-point-hover: #c9a962;
    --chart-text: #888888;
    --chart-grid: rgba(255, 255, 255, 0.08);
    --chart-tooltip-bg: #333333;
    --chart-tooltip-title: #ffffff;
    --chart-tooltip-body: #ffffff;
    
    /* Scrollbar → Gris */
    --scrollbar-thumb: #555555;
    --scrollbar-thumb-hover: #666666;
    --scrollbar-thumb-active: #777777;
    
    /* Couleurs sémantiques */
    --success: #10B981;
    --success-dark: #059669;
    --danger: #EF4444;
    
    /* Widget icons */
    --widget-icon: #ffffff;
    
    /* Avatar */
    --avatar-bg: #c9a962;
    --avatar-text: #1E1E1E;
}

/* ============================
   THEME: DARK ROSE GOLD
   ============================ */
body.theme-dark-rosegold {
    /* Accent → Rose Gold */
    --accent: #D4708A;
    --accent-dark: #B85A73;
    --accent-alpha: rgba(212, 112, 138, 0.22);
    
    /* Gold → Rose Gold */
    --gold: #D4708A;
    --gold-light: #E8A0B3;
    --gold-lighter: #F5C5D2;
    --gold-dark: #B85A73;
    
    /* Dark → Noir profond (header/sidebar) */
    --dark: #0D0D0D;
    --dark-soft: #151515;
    --dark-lighter: #1E1E1E;
    --dark-blue: #0D0D0D;
    --dark-blue-deep: #0A0A0A;
    
    /* Fonds principaux → Sombres */
    --white: #1E1E1E;
    --cream: #282828;
    --cream-dark: #323232;
    --cream-darker: #3C3C3C;
    --cream-darkest: #464646;
    --bg-light: #1A1A1A;
    --bg-lighter: #222222;
    --bg-gray: #151515;
    
    /* Bordures → Sombres */
    --border-light: #3A3A3A;
    --border-medium: #444444;
    --border-dark: #4E4E4E;
    --border-darker: #585858;
    --border-darkest: #626262;
    
    /* Textes → Clairs */
    --text-dark: #E8E8E8;
    --text-medium: #CCCCCC;
    --text-light: #AAAAAA;
    --text-muted: #888888;
    --text-placeholder: #888888;
    --text-disabled: #555555;
    
    /* Chart → Rose Gold */
    --chart-line: #D4708A;
    --chart-gradient-start: rgba(212, 112, 138, 0.15);
    --chart-gradient-end: rgba(212, 112, 138, 0);
    --chart-point-hover: #D4708A;
    --chart-text: #888888;
    --chart-grid: rgba(255, 255, 255, 0.08);
    --chart-tooltip-bg: #333333;
    --chart-tooltip-title: #ffffff;
    --chart-tooltip-body: #ffffff;
    
    /* Scrollbar → Gris */
    --scrollbar-thumb: #555555;
    --scrollbar-thumb-hover: #666666;
    --scrollbar-thumb-active: #777777;
    
    /* Couleurs sémantiques */
    --success: #10B981;
    --success-dark: #059669;
    --danger: #EF4444;
    
    /* Widget icons */
    --widget-icon: #ffffff;
    
    /* Avatar */
    --avatar-bg: #D4708A;
    --avatar-text: #ffffff;
}

/* ============================
   THEME: DARK SAPPHIRE
   ============================ */
body.theme-dark-sapphire {
    /* Accent → Bleu Saphir */
    --accent: #5A9CE8;
    --accent-dark: #4A88D0;
    --accent-alpha: rgba(90, 156, 232, 0.22);
    
    /* Gold → Bleu Saphir */
    --gold: #5A9CE8;
    --gold-light: #7BB4F0;
    --gold-lighter: #9CCAF8;
    --gold-dark: #4A88D0;
    
    /* Dark → Noir profond (header/sidebar) */
    --dark: #0D0D0D;
    --dark-soft: #151515;
    --dark-lighter: #1E1E1E;
    --dark-blue: #0D0D0D;
    --dark-blue-deep: #0A0A0A;
    
    /* Fonds principaux → Sombres */
    --white: #1E1E1E;
    --cream: #282828;
    --cream-dark: #323232;
    --cream-darker: #3C3C3C;
    --cream-darkest: #464646;
    --bg-light: #1A1A1A;
    --bg-lighter: #222222;
    --bg-gray: #151515;
    
    /* Bordures → Sombres */
    --border-light: #3A3A3A;
    --border-medium: #444444;
    --border-dark: #4E4E4E;
    --border-darker: #585858;
    --border-darkest: #626262;
    
    /* Textes → Clairs */
    --text-dark: #E8E8E8;
    --text-medium: #CCCCCC;
    --text-light: #AAAAAA;
    --text-muted: #888888;
    --text-placeholder: #888888;
    --text-disabled: #555555;
    
    /* Chart → Bleu Saphir */
    --chart-line: #5A9CE8;
    --chart-gradient-start: rgba(90, 156, 232, 0.15);
    --chart-gradient-end: rgba(90, 156, 232, 0);
    --chart-point-hover: #5A9CE8;
    --chart-text: #888888;
    --chart-grid: rgba(255, 255, 255, 0.08);
    --chart-tooltip-bg: #333333;
    --chart-tooltip-title: #ffffff;
    --chart-tooltip-body: #ffffff;
    
    /* Scrollbar → Gris */
    --scrollbar-thumb: #555555;
    --scrollbar-thumb-hover: #666666;
    --scrollbar-thumb-active: #777777;
    
    /* Couleurs sémantiques */
    --success: #10B981;
    --success-dark: #059669;
    --danger: #EF4444;
    
    /* Widget icons */
    --widget-icon: #ffffff;
    
    /* Avatar */
    --avatar-bg: #5A9CE8;
    --avatar-text: #ffffff;
}

/* ============================
   THEME: DARK COPPER
   ============================ */
body.theme-dark-copper {
    /* Accent → Cuivre */
    --accent: #C87941;
    --accent-dark: #A66335;
    --accent-alpha: rgba(200, 121, 65, 0.22);
    
    /* Gold → Cuivre */
    --gold: #C87941;
    --gold-light: #D99A6A;
    --gold-lighter: #E5B78E;
    --gold-dark: #A66335;
    
    /* Dark → Noir profond (header/sidebar) */
    --dark: #0D0D0D;
    --dark-soft: #151515;
    --dark-lighter: #1E1E1E;
    --dark-blue: #0D0D0D;
    --dark-blue-deep: #0A0A0A;
    
    /* Fonds principaux → Sombres */
    --white: #1E1E1E;
    --cream: #282828;
    --cream-dark: #323232;
    --cream-darker: #3C3C3C;
    --cream-darkest: #464646;
    --bg-light: #1A1A1A;
    --bg-lighter: #222222;
    --bg-gray: #151515;
    
    /* Bordures → Sombres */
    --border-light: #3A3A3A;
    --border-medium: #444444;
    --border-dark: #4E4E4E;
    --border-darker: #585858;
    --border-darkest: #626262;
    
    /* Textes → Clairs */
    --text-dark: #E8E8E8;
    --text-medium: #CCCCCC;
    --text-light: #AAAAAA;
    --text-muted: #888888;
    --text-placeholder: #888888;
    --text-disabled: #555555;
    
    /* Chart → Cuivre */
    --chart-line: #C87941;
    --chart-gradient-start: rgba(200, 121, 65, 0.15);
    --chart-gradient-end: rgba(200, 121, 65, 0);
    --chart-point-hover: #C87941;
    --chart-text: #888888;
    --chart-grid: rgba(255, 255, 255, 0.08);
    --chart-tooltip-bg: #333333;
    --chart-tooltip-title: #ffffff;
    --chart-tooltip-body: #ffffff;
    
    /* Scrollbar → Gris */
    --scrollbar-thumb: #555555;
    --scrollbar-thumb-hover: #666666;
    --scrollbar-thumb-active: #777777;
    
    /* Couleurs sémantiques */
    --success: #10B981;
    --success-dark: #059669;
    --danger: #EF4444;
    
    /* Widget icons */
    --widget-icon: #ffffff;
    
    /* Avatar */
    --avatar-bg: #C87941;
    --avatar-text: #ffffff;
}

/* ============================
   THEME: DARK BORDEAUX
   ============================ */
body.theme-dark-bordeaux {
    /* Accent → Rouge Carmin */
    --accent: #D93636;
    --accent-dark: #B82D2D;
    --accent-alpha: rgba(217, 54, 54, 0.22);
    
    /* Gold → Rouge Carmin */
    --gold: #D93636;
    --gold-light: #E85555;
    --gold-lighter: #F07878;
    --gold-dark: #B82D2D;
    
    /* Dark → Noir profond (header/sidebar) */
    --dark: #0D0D0D;
    --dark-soft: #151515;
    --dark-lighter: #1E1E1E;
    --dark-blue: #0D0D0D;
    --dark-blue-deep: #0A0A0A;
    
    /* Fonds principaux → Sombres */
    --white: #1E1E1E;
    --cream: #282828;
    --cream-dark: #323232;
    --cream-darker: #3C3C3C;
    --cream-darkest: #464646;
    --bg-light: #1A1A1A;
    --bg-lighter: #222222;
    --bg-gray: #151515;
    
    /* Bordures → Sombres */
    --border-light: #3A3A3A;
    --border-medium: #444444;
    --border-dark: #4E4E4E;
    --border-darker: #585858;
    --border-darkest: #626262;
    
    /* Textes → Clairs */
    --text-dark: #E8E8E8;
    --text-medium: #CCCCCC;
    --text-light: #AAAAAA;
    --text-muted: #888888;
    --text-placeholder: #888888;
    --text-disabled: #555555;
    
    /* Chart → Rouge Carmin */
    --chart-line: #D93636;
    --chart-gradient-start: rgba(217, 54, 54, 0.15);
    --chart-gradient-end: rgba(217, 54, 54, 0);
    --chart-point-hover: #D93636;
    --chart-text: #888888;
    --chart-grid: rgba(255, 255, 255, 0.08);
    --chart-tooltip-bg: #333333;
    --chart-tooltip-title: #ffffff;
    --chart-tooltip-body: #ffffff;
    
    /* Scrollbar → Gris */
    --scrollbar-thumb: #555555;
    --scrollbar-thumb-hover: #666666;
    --scrollbar-thumb-active: #777777;
    
    /* Couleurs sémantiques */
    --success: #10B981;
    --success-dark: #059669;
    --danger: #D93636;
    
    /* Widget icons */
    --widget-icon: #ffffff;
    
    /* Avatar */
    --avatar-bg: #D93636;
    --avatar-text: #ffffff;
}

/* Overrides spécifiques thèmes dark colorés */
body.theme-dark-gold .header-logo,
body.theme-dark-rosegold .header-logo,
body.theme-dark-sapphire .header-logo,
body.theme-dark-copper .header-logo,
body.theme-dark-bordeaux .header-logo {
    color: #AAAAAA;
}

body.theme-dark-gold .mobile-header-title,
body.theme-dark-rosegold .mobile-header-title,
body.theme-dark-sapphire .mobile-header-title,
body.theme-dark-copper .mobile-header-title,
body.theme-dark-bordeaux .mobile-header-title,
body.theme-dark-gold .mobile-hamburger,
body.theme-dark-rosegold .mobile-hamburger,
body.theme-dark-sapphire .mobile-hamburger,
body.theme-dark-copper .mobile-hamburger,
body.theme-dark-bordeaux .mobile-hamburger,
body.theme-dark-gold .product-fab,
body.theme-dark-rosegold .product-fab,
body.theme-dark-sapphire .product-fab,
body.theme-dark-copper .product-fab,
body.theme-dark-bordeaux .product-fab,
body.theme-dark-gold .table-action-btn,
body.theme-dark-rosegold .table-action-btn,
body.theme-dark-sapphire .table-action-btn,
body.theme-dark-copper .table-action-btn,
body.theme-dark-bordeaux .table-action-btn,
body.theme-dark-gold .history-invoice-btn,
body.theme-dark-rosegold .history-invoice-btn,
body.theme-dark-sapphire .history-invoice-btn,
body.theme-dark-copper .history-invoice-btn,
body.theme-dark-bordeaux .history-invoice-btn {
    color: #ffffff;
}

body.theme-dark-gold .product-fab svg,
body.theme-dark-rosegold .product-fab svg,
body.theme-dark-sapphire .product-fab svg,
body.theme-dark-copper .product-fab svg,
body.theme-dark-bordeaux .product-fab svg {
    stroke: #ffffff;
}

/* ==============================
   DARK THEMES - TABLE ALTERNANCE LÉGÈRE
   ============================== */
body.theme-dark .catalogue-table tbody tr.row-even,
body.theme-dark-gold .catalogue-table tbody tr.row-even,
body.theme-dark-rosegold .catalogue-table tbody tr.row-even,
body.theme-dark-sapphire .catalogue-table tbody tr.row-even,
body.theme-dark-copper .catalogue-table tbody tr.row-even,
body.theme-dark-bordeaux .catalogue-table tbody tr.row-even {
    background: rgba(255, 255, 255, 0.02);
}

body.theme-dark .stock-table tbody tr.row-even,
body.theme-dark-gold .stock-table tbody tr.row-even,
body.theme-dark-rosegold .stock-table tbody tr.row-even,
body.theme-dark-sapphire .stock-table tbody tr.row-even,
body.theme-dark-copper .stock-table tbody tr.row-even,
body.theme-dark-bordeaux .stock-table tbody tr.row-even {
    background: rgba(255, 255, 255, 0.02);
}

body.theme-dark .history-table tbody tr.row-even,
body.theme-dark-gold .history-table tbody tr.row-even,
body.theme-dark-rosegold .history-table tbody tr.row-even,
body.theme-dark-sapphire .history-table tbody tr.row-even,
body.theme-dark-copper .history-table tbody tr.row-even,
body.theme-dark-bordeaux .history-table tbody tr.row-even {
    background: rgba(255, 255, 255, 0.02);
}

/* ==============================
   DARK THEMES - TABLE HOVER SUBTIL
   ============================== */
body.theme-dark .catalogue-table tbody tr:hover,
body.theme-dark-gold .catalogue-table tbody tr:hover,
body.theme-dark-rosegold .catalogue-table tbody tr:hover,
body.theme-dark-sapphire .catalogue-table tbody tr:hover,
body.theme-dark-copper .catalogue-table tbody tr:hover,
body.theme-dark-bordeaux .catalogue-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.theme-dark .stock-table tbody tr:hover,
body.theme-dark-gold .stock-table tbody tr:hover,
body.theme-dark-rosegold .stock-table tbody tr:hover,
body.theme-dark-sapphire .stock-table tbody tr:hover,
body.theme-dark-copper .stock-table tbody tr:hover,
body.theme-dark-bordeaux .stock-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.theme-dark .history-table tbody tr:hover,
body.theme-dark-gold .history-table tbody tr:hover,
body.theme-dark-rosegold .history-table tbody tr:hover,
body.theme-dark-sapphire .history-table tbody tr:hover,
body.theme-dark-copper .history-table tbody tr:hover,
body.theme-dark-bordeaux .history-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* ==============================
   DARK THEMES - XRP ICON FIX (noir → blanc)
   ============================== */
body.theme-dark .crypto-logo svg path[fill="#23292f"],
body.theme-dark-gold .crypto-logo svg path[fill="#23292f"],
body.theme-dark-rosegold .crypto-logo svg path[fill="#23292f"],
body.theme-dark-sapphire .crypto-logo svg path[fill="#23292f"],
body.theme-dark-copper .crypto-logo svg path[fill="#23292f"],
body.theme-dark-bordeaux .crypto-logo svg path[fill="#23292f"] {
    fill: #ffffff;
}