/* CSS personnalise genere automatiquement */
    :root {
        --primary-color: #3b82f6;
        --secondary-color: #8b5cf6;
        --accent-color: #10b981;
        --success-color: #059669;
        --warning-color: #D97706;
        --danger-color: #DC2626;
        --dark-bg-primary: #111827;
        --dark-bg-secondary: #1f2937;
        --dark-bg-white: #1f2937;
        --dark-text-primary: #FFFFFF;
        --dark-text-secondary: #B0B3B8;
        --dark-border-color: #4A4B4C;
        --light-bg-primary: #FFFFFF;
        --light-bg-secondary: #F9FAFB;
        --light-text-primary: #111827;
        --light-text-secondary: #6B7280;
        --light-border-color: #E5E7EB;
        --header-bg-primary: #ffffff;
        --header-bg-secondary: #3B82F6;
        --header-text-primary: #ffffff;
        --header-text-secondary: #E0E7FF;
        --header-hover-bg: #1D4ED8;
        --header-hover-text: #FFFFFF;
        --header-border-color: #1E3A8A;
        --header-dark-bg-primary: #1f2937;
        --header-dark-bg-secondary: #374151;
        --header-dark-text-primary: #ffffff;
        --header-dark-text-secondary: #D1D5DB;
        --header-dark-hover-bg: #374151;
        --header-dark-hover-text: #FFFFFF;
        --header-dark-border-color: #4B5563;
        --menu-bg-primary: #ffffff;
        --menu-bg-secondary: #F9FAFB;
        --menu-text-primary: #111827;
        --menu-text-secondary: #6B7280;
        --menu-border-color: #E5E7EB;
        --menu-hover-bg: #F3F4F6;
        --menu-hover-text: #111827;
        --menu-dark-bg-primary: #1f2937;
        --menu-dark-bg-secondary: #374151;
        --menu-dark-text-primary: #ffffff;
        --menu-dark-text-secondary: #D1D5DB;
        --menu-dark-border-color: #4B5563;
        --menu-dark-hover-bg: #374151;
        --menu-dark-hover-text: #FFFFFF;
        --header-icon-primary: #737373;
        --header-icon-secondary: #E0E7FF;
        --header-icon-hover: #FFFFFF;
        --header-dark-icon-primary: #FFFFFF;
        --header-dark-icon-secondary: #D1D5DB;
        --header-dark-icon-hover: #FFFFFF;
    }
    
    /* Classes utilitaires pour les couleurs personnalisees */
    .bg-custom-primary { background-color: var(--primary-color) !important; }
    .bg-custom-secondary { background-color: var(--secondary-color) !important; }
    .bg-custom-accent { background-color: var(--accent-color) !important; }
    .bg-custom-success { background-color: var(--success-color) !important; }
    .bg-custom-warning { background-color: var(--warning-color) !important; }
    .bg-custom-danger { background-color: var(--danger-color) !important; }
    
    .text-custom-primary { color: var(--primary-color) !important; }
    .text-custom-secondary { color: var(--secondary-color) !important; }
    .text-custom-accent { color: var(--accent-color) !important; }
    .text-custom-success { color: var(--success-color) !important; }
    .text-custom-warning { color: var(--warning-color) !important; }
    .text-custom-danger { color: var(--danger-color) !important; }
    
    .border-custom-primary { border-color: var(--primary-color) !important; }
    .border-custom-secondary { border-color: var(--secondary-color) !important; }
    .border-custom-accent { border-color: var(--accent-color) !important; }
    .border-custom-success { border-color: var(--success-color) !important; }
    .border-custom-warning { border-color: var(--warning-color) !important; }
    .border-custom-danger { border-color: var(--danger-color) !important; }
    
    /* Mode sombre personnalise - REGLES FORCEES */
    .dark {
        --bg-primary: var(--dark-bg-primary);
        --bg-secondary: var(--dark-bg-secondary);
        --text-primary: var(--dark-text-primary);
        --text-secondary: var(--dark-text-secondary);
        --border-color: var(--dark-border-color);
    }
    
    /* Mode clair personnalise */
    :root {
        --bg-primary: var(--light-bg-primary);
        --bg-secondary: var(--light-bg-secondary);
        --text-primary: var(--light-text-primary);
        --text-secondary: var(--light-text-secondary);
        --border-color: var(--light-border-color);
    }
    
    /* APPLICATION FORCEE DES COULEURS PERSONNALISEES - PRIORITE MAXIMALE */
    
    /* Remplacer les couleurs Tailwind par defaut - REGLES TRES SPECIFIQUES */
    html.dark .bg-blue-500 { background-color: var(--primary-color) !important; }
    html.dark .bg-blue-600 { background-color: var(--primary-color) !important; }
    html.dark .bg-blue-700 { background-color: var(--primary-color) !important; }
    html.dark .bg-purple-500 { background-color: var(--secondary-color) !important; }
    html.dark .bg-purple-600 { background-color: var(--secondary-color) !important; }
    html.dark .bg-green-500 { background-color: var(--accent-color) !important; }
    html.dark .bg-green-600 { background-color: var(--accent-color) !important; }
    
    /* Regles pour ecraser les styles inline du header */
    html.dark .bg-gray-50 { background-color: var(--dark-bg-primary) !important; }
    html.dark .bg-gray-100 { background-color: var(--dark-bg-secondary) !important; }
    html.dark .bg-gray-200 { background-color: var(--dark-bg-secondary) !important; }
    html.dark .bg-gray-300 { background-color: var(--dark-bg-secondary) !important; }
    html.dark .bg-gray-400 { background-color: var(--dark-bg-secondary) !important; }
    html.dark .bg-gray-500 { background-color: var(--dark-bg-secondary) !important; }
    html.dark .bg-gray-600 { background-color: var(--dark-bg-secondary) !important; }
    html.dark .bg-gray-700 { background-color: var(--dark-bg-secondary) !important; }
    html.dark .bg-gray-800 { background-color: var(--dark-bg-secondary) !important; }
    html.dark .bg-gray-900 { background-color: var(--dark-bg-primary) !important; }
    html.dark .bg-white { background-color: var(--dark-bg-white) !important; }
    
    /* Remplacer les couleurs de fond - ECRASER LES STYLES INLINE */
    .dark .bg-white {
        background-color: var(--dark-bg-white) !important;
    }
    
    .dark .bg-gray-50 {
        background-color: var(--dark-bg-primary) !important;
    }
    
    /* Ecraser les styles inline du header */
    body.dark .bg-gray-50 {
        background-color: var(--dark-bg-primary) !important;
    }
    
    .dark body .bg-gray-50 {
        background-color: var(--dark-bg-primary) !important;
    }
    
    /* Cartes en mode sombre - ECRASER LES STYLES INLINE */
    .dark .bg-white {
        background-color: var(--dark-bg-white) !important;
    }
    
    body.dark .bg-white {
        background-color: var(--dark-bg-white) !important;
    }
    
    .dark body .bg-white {
        background-color: var(--dark-bg-white) !important;
    }
    
    .dark .bg-gray-100 {
        background-color: var(--dark-bg-secondary) !important;
    }
    
    .dark .bg-gray-200 {
        background-color: var(--dark-bg-secondary) !important;
    }
    
    .dark .bg-gray-300 {
        background-color: var(--dark-bg-secondary) !important;
    }
    
    .dark .bg-gray-400 {
        background-color: var(--dark-bg-secondary) !important;
    }
    
    .dark .bg-gray-500 {
        background-color: var(--dark-bg-secondary) !important;
    }
    
    .dark .bg-gray-600 {
        background-color: var(--dark-bg-secondary) !important;
    }
    
    .dark .bg-gray-700 {
        background-color: var(--dark-bg-secondary) !important;
    }
    
    .dark .bg-gray-800 {
        background-color: var(--dark-bg-secondary) !important;
    }
    
    .dark .bg-gray-900 {
        background-color: var(--dark-bg-primary) !important;
    }
    
    /* Remplacer les couleurs de texte */
    .dark .text-gray-900 {
        color: var(--dark-text-primary) !important;
    }
    
    .dark .text-gray-700 {
        color: var(--dark-text-secondary) !important;
    }
    
    .dark .text-gray-600 {
        color: var(--dark-text-secondary) !important;
    }
    
    .dark .text-gray-500 {
        color: var(--dark-text-secondary) !important;
    }
    
    .dark .text-gray-100 {
        color: var(--dark-text-primary) !important;
    }
    
    .dark .text-gray-300 {
        color: var(--dark-text-secondary) !important;
    }
    
    .dark .text-gray-400 {
        color: var(--dark-text-secondary) !important;
    }
    
    .dark .text-white {
        color: var(--dark-text-primary) !important;
    }
    
    /* Remplacer les couleurs de bordure */
    .dark .border-gray-200 {
        border-color: var(--dark-border-color) !important;
    }
    
    .dark .border-gray-300 {
        border-color: var(--dark-border-color) !important;
    }
    
    .dark .border-gray-600 {
        border-color: var(--dark-border-color) !important;
    }
    
    .dark .border-gray-700 {
        border-color: var(--dark-border-color) !important;
    }
    
    /* Regles specifiques pour les elements principaux */
    .dark body {
        background-color: var(--dark-bg-primary) !important;
        color: var(--dark-text-primary) !important;
    }
    
    /* Regles pour les cartes et conteneurs */
    .dark .bg-white {
        background-color: var(--dark-bg-white) !important;
    }
    
    /* Regles pour les icones et elements colores */
    .dark .text-blue-500 { color: var(--primary-color) !important; }
    .dark .text-purple-500 { color: var(--secondary-color) !important; }
    .dark .text-green-500 { color: var(--accent-color) !important; }
    
    /* Regles pour les boutons */
    .dark .bg-blue-600 { background-color: var(--primary-color) !important; }
    .dark .bg-purple-600 { background-color: var(--secondary-color) !important; }
    .dark .bg-green-600 { background-color: var(--accent-color) !important; }
    
    /* Regles pour les hover states */
    .dark .hover\:bg-blue-700:hover { background-color: var(--primary-color) !important; }
    .dark .hover\:bg-purple-700:hover { background-color: var(--secondary-color) !important; }
    .dark .hover\:bg-green-700:hover { background-color: var(--accent-color) !important; }
    
    /* COULEURS DU HEADER - MODE CLAIR */
    /* .bg-blue-600 { background-color: var(--header-bg-primary) !important; } */
    .bg-blue-700 { background-color: var(--header-bg-secondary) !important; }
    .text-white { color: var(--header-text-primary) !important; }
    .text-blue-100 { color: var(--header-text-secondary) !important; }
    .hover\:bg-blue-700:hover { background-color: var(--header-hover-bg) !important; }
    .hover\:text-white:hover { color: var(--header-hover-text) !important; }
    .border-blue-800 { border-color: var(--header-border-color) !important; }
    
    /* COULEURS DU HEADER - MODE SOMBRE */
    .dark .bg-blue-600 { background-color: var(--header-dark-bg-primary) !important; }
    .dark .bg-blue-700 { background-color: var(--header-dark-bg-secondary) !important; }
    .dark .text-white { color: var(--header-dark-text-primary) !important; }
    .dark .text-blue-100 { color: var(--header-dark-text-secondary) !important; }
    .dark .hover\:bg-blue-700:hover { background-color: var(--header-dark-hover-bg) !important; }
    .dark .hover\:text-white:hover { color: var(--header-dark-hover-text) !important; }
    .dark .border-blue-800 { border-color: var(--header-dark-border-color) !important; }
    
    /* Regles specifiques pour les elements du header */
    .header-bg { background-color: var(--header-bg-primary) !important; }
    .dark .header-bg { background-color: var(--header-dark-bg-primary) !important; }
    
    .header-text { color: var(--header-text-primary) !important; }
    .dark .header-text { color: var(--header-dark-text-primary) !important; }
    
    .header-hover { background-color: var(--header-hover-bg) !important; }
    .dark .header-hover { background-color: var(--header-dark-hover-bg) !important; }
    
    /* REGLES SPECIFIQUES POUR LE HEADER - REMPLACER LES CLASSES TAILWIND */
    
    /* Header principal - REGLES TRES SPECIFIQUES */
    header.bg-white { background-color: var(--header-bg-primary) !important; }
    .dark header.bg-white { background-color: var(--header-dark-bg-primary) !important; }
    
    /* Regles pour ecraser les styles inline du header */
    header { background-color: var(--header-bg-primary) !important; }
    .dark header { background-color: var(--header-dark-bg-primary) !important; }
    
    /* Regles tres specifiques avec selecteurs multiples */
    header.bg-white.shadow-sm.border-b { background-color: var(--header-bg-primary) !important; }
    .dark header.bg-white.shadow-sm.border-b { background-color: var(--header-dark-bg-primary) !important; }
    
    /* Regles pour forcer l'application meme avec d'autres classes */
    header[class*='bg-white'] { background-color: var(--header-bg-primary) !important; }
    .dark header[class*='bg-white'] { background-color: var(--header-dark-bg-primary) !important; }
    
    /* Navigation links */
    .text-gray-500 { color: var(--header-text-primary) !important; }
    .dark .text-gray-500 { color: var(--header-dark-text-primary) !important; }
    
    /* Hover states pour la navigation */
    .hover\:text-gray-900:hover { color: var(--header-text-primary) !important; }
    .dark .hover\:text-gray-900:hover { color: var(--header-dark-text-primary) !important; }
    
    /* Boutons et elements interactifs */
    .hover\:bg-gray-100:hover { background-color: var(--header-hover-bg) !important; }
    .dark .hover\:bg-gray-100:hover { background-color: var(--header-dark-hover-bg) !important; }
    
    /* Icones dans le header */
    .text-gray-600 { color: var(--header-text-primary) !important; }
    .dark .text-gray-600 { color: var(--header-dark-text-primary) !important; }
    
    /* Regles tres specifiques pour le header */
    header .text-gray-500 { color: var(--header-text-primary) !important; }
    .dark header .text-gray-500 { color: var(--header-dark-text-primary) !important; }
    
    header .hover\:text-gray-900:hover { color: var(--header-text-primary) !important; }
    .dark header .hover\:text-gray-900:hover { color: var(--header-dark-text-primary) !important; }
    
    header .hover\:bg-gray-100:hover { background-color: var(--header-hover-bg) !important; }
    .dark header .hover\:bg-gray-100:hover { background-color: var(--header-dark-hover-bg) !important; }
    
    /* Regles pour les elements specifiques du header */
    header .bg-white { background-color: var(--header-bg-primary) !important; }
    .dark header .bg-white { background-color: var(--header-dark-bg-primary) !important; }
    
    /* Regles pour les boutons du header */
    header button { color: var(--header-text-primary) !important; }
    .dark header button { color: var(--header-dark-text-primary) !important; }
    
    header button:hover { background-color: var(--header-hover-bg) !important; }
    .dark header button:hover { background-color: var(--header-dark-hover-bg) !important; }
    
    /* Regles pour les icones et badges dans le header */
    header .fas { color: var(--header-text-primary) !important; }
    .dark header .fas { color: var(--header-dark-text-primary) !important; }
    
    /* Regles pour les badges de notification */
    header .bg-red-500 { background-color: #EF4444 !important; }
    header .text-white { color: #FFFFFF !important; }
    
    /* Regles pour les avatars et images */
    header img { border-color: var(--header-text-primary) !important; }
    .dark header img { border-color: var(--header-dark-text-primary) !important; }
    
    /* Regles pour les liens de navigation specifiques */
    header nav a { color: var(--header-text-primary) !important; }
    .dark header nav a { color: var(--header-dark-text-primary) !important; }
    
    header nav a:hover { color: var(--header-text-primary) !important; }
    .dark header nav a:hover { color: var(--header-dark-text-primary) !important; }
    
    /* Regles pour les icones dans la navigation */
    header nav .fas { color: var(--header-text-primary) !important; }
    .dark header nav .fas { color: var(--header-dark-text-primary) !important; }
    
    /* REGLES DE PRIORITE MAXIMALE POUR LE HEADER */
    
    /* Forcer l'application des couleurs du header avec une specificite maximale */
    html body header.bg-white { background-color: var(--header-bg-primary) !important; }
    html.dark body header.bg-white { background-color: var(--header-dark-bg-primary) !important; }
    
    /* Regles pour tous les elements du header */
    html body header { background-color: var(--header-bg-primary) !important; }
    html.dark body header { background-color: var(--header-dark-bg-primary) !important; }
    
    /* Regles pour les liens de navigation avec priorite maximale */
    html body header nav a { color: var(--header-text-primary) !important; }
    html.dark body header nav a { color: var(--header-dark-text-primary) !important; }
    
    html body header nav a:hover { color: var(--header-text-primary) !important; }
    html.dark body header nav a:hover { color: var(--header-dark-text-primary) !important; }
    
    /* Regles pour les icones avec priorite maximale */
    html body header .fas { color: var(--header-text-primary) !important; }
    html.dark body header .fas { color: var(--header-dark-text-primary) !important; }
    
    /* Regles pour les boutons avec priorite maximale */
    html body header button { color: var(--header-text-primary) !important; }
    html.dark body header button { color: var(--header-dark-text-primary) !important; }
    
    html body header button:hover { background-color: var(--header-hover-bg) !important; }
    html.dark body header button:hover { background-color: var(--header-dark-hover-bg) !important; }
    
    /* REGLES SPECIFIQUES POUR LA CLASSE CUSTOM-HEADER */
    
    /* Header avec classe personnalisee */
    .custom-header { background-color: var(--header-bg-primary) !important; }
    .dark .custom-header { background-color: var(--header-dark-bg-primary) !important; }
    
    /* Navigation dans le header personnalise */
    .custom-header nav a { color: var(--header-text-primary) !important; }
    .dark .custom-header nav a { color: var(--header-dark-text-primary) !important; }
    
    .custom-header nav a:hover { color: var(--header-text-primary) !important; }
    .dark .custom-header nav a:hover { color: var(--header-dark-text-primary) !important; }
    
    /* Icones dans le header personnalise */
    .custom-header .fas { color: var(--header-text-primary) !important; }
    .dark .custom-header .fas { color: var(--header-dark-text-primary) !important; }
    
    /* Boutons dans le header personnalise */
    .custom-header button { color: var(--header-text-primary) !important; }
    .dark .custom-header button { color: var(--header-dark-text-primary) !important; }
    
    .custom-header button:hover { background-color: var(--header-hover-bg) !important; }
    .dark .custom-header button:hover { background-color: var(--header-dark-hover-bg) !important; }
    
    /* Regles avec priorite maximale pour la classe custom-header */
    html body .custom-header { background-color: var(--header-bg-primary) !important; }
    html.dark body .custom-header { background-color: var(--header-dark-bg-primary) !important; }
    
    html body .custom-header nav a { color: var(--header-text-primary) !important; }
    html.dark body .custom-header nav a { color: var(--header-dark-text-primary) !important; }
    
    html body .custom-header .fas { color: var(--header-icon-primary) !important; }
    html.dark body .custom-header .fas { color: var(--header-dark-icon-primary) !important; }
    
    /* Regles specifiques pour les icones du header */
    header .fas { color: var(--header-icon-primary) !important; }
    .dark header .fas { color: var(--header-dark-icon-primary) !important; }
    
    header .fas:hover { color: var(--header-icon-hover) !important; }
    .dark header .fas:hover { color: var(--header-dark-icon-hover) !important; }
    
    /* Icones secondaires du header */
    header .text-gray-500 { color: var(--header-icon-secondary) !important; }
    .dark header .text-gray-500 { color: var(--header-dark-icon-secondary) !important; }
    
    header .text-gray-500:hover { color: var(--header-icon-hover) !important; }
    .dark header .text-gray-500:hover { color: var(--header-dark-icon-hover) !important; }
    
    /* Regles pour les boutons du header personnalise */
    .custom-header button:hover {
        background-color: #ffffff00 !important;
    }
    
    /* Regles pour les fleches du header */
    .custom-header .fas.fa-chevron-down {
        color: #9CA3AF !important; /* text-gray-400 */
    }
    
    .dark .custom-header .fas.fa-chevron-down {
        color: var(--header-dark-text-primary) !important;
    }
    
    /* COULEURS DU MENU UTILISATEUR */
    
    /* Menu principal - Mode Clair */
    #desktopUserMenu { background-color: var(--menu-bg-primary) !important; }
    #desktopUserMenu .text-gray-900 { color: var(--menu-text-primary) !important; }
    #desktopUserMenu .text-gray-500 { color: var(--menu-text-secondary) !important; }
    #desktopUserMenu .text-gray-700 { color: var(--menu-text-secondary) !important; }
    #desktopUserMenu .border-b { border-color: var(--menu-border-color) !important; }
    #desktopUserMenu .hover\:bg-gray-50:hover { background-color: var(--menu-hover-bg) !important; }
    #desktopUserMenu .hover\:text-gray-700:hover { color: var(--menu-hover-text) !important; }
    
    /* Menu principal - Mode Sombre */
    .dark #desktopUserMenu { background-color: var(--menu-dark-bg-primary) !important; }
    .dark #desktopUserMenu .text-gray-900 { color: var(--menu-dark-text-primary) !important; }
    .dark #desktopUserMenu .text-gray-500 { color: var(--menu-dark-text-secondary) !important; }
    .dark #desktopUserMenu .text-gray-700 { color: var(--menu-dark-text-secondary) !important; }
    .dark #desktopUserMenu .border-b { border-color: var(--menu-dark-border-color) !important; }
    .dark #desktopUserMenu .hover\:bg-gray-50:hover { background-color: var(--menu-dark-hover-bg) !important; }
    .dark #desktopUserMenu .hover\:text-gray-700:hover { color: var(--menu-dark-hover-text) !important; }
    
    /* Menu mobile */
    #mobileUserMenu { background-color: var(--menu-bg-primary) !important; }
    #mobileUserMenu .text-gray-900 { color: var(--menu-text-primary) !important; }
    #mobileUserMenu .text-gray-500 { color: var(--menu-text-secondary) !important; }
    #mobileUserMenu .text-gray-700 { color: var(--menu-text-secondary) !important; }
    #mobileUserMenu .border-b { border-color: var(--menu-border-color) !important; }
    #mobileUserMenu .hover\:bg-gray-50:hover { background-color: var(--menu-hover-bg) !important; }
    #mobileUserMenu .hover\:text-gray-700:hover { color: var(--menu-hover-text) !important; }
    
    /* Menu mobile - Mode Sombre */
    .dark #mobileUserMenu { background-color: var(--menu-dark-bg-primary) !important; }
    .dark #mobileUserMenu .text-gray-900 { color: var(--menu-dark-text-primary) !important; }
    .dark #mobileUserMenu .text-gray-500 { color: var(--menu-dark-text-secondary) !important; }
    .dark #mobileUserMenu .text-gray-700 { color: var(--menu-dark-text-secondary) !important; }
    .dark #mobileUserMenu .border-b { border-color: var(--menu-dark-border-color) !important; }
    .dark #mobileUserMenu .hover\:bg-gray-50:hover { background-color: var(--menu-dark-hover-bg) !important; }
    .dark #mobileUserMenu .hover\:text-gray-700:hover { color: var(--menu-dark-hover-text) !important; }
    
    /* Regles avec priorite maximale pour les menus */
    html body #desktopUserMenu { background-color: var(--menu-bg-primary) !important; }
    html.dark body #desktopUserMenu { background-color: var(--menu-dark-bg-primary) !important; }
    
    html body #mobileUserMenu { background-color: var(--menu-bg-primary) !important; }
    html.dark body #mobileUserMenu { background-color: var(--menu-dark-bg-primary) !important; }