/* ==========================================================================
   FAMILLE ZIBLI ERP - NAVIGATION MULTI-NIVEAUX & HEADER RESPONSIVE UNIFIÉ
   Architecture Dark Luxury Glassmorphism & Light Mode Standardisé
   Support Multi-Viewports (100px à 1440px+)
   ========================================================================== */

:root {
    --nav-glass-bg: rgba(8, 16, 38, 0.96);
    --nav-glass-border: rgba(255, 255, 255, 0.14);
    --nav-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 102, 255, 0.12);
    --nav-primary: #0066ff;
    --nav-primary-hover: #0052cc;
    --nav-text: #ffffff;
    --nav-text-muted: #94a3b8;
    --nav-radius: 12px;
}

/* ==========================================================================
   0. HEADER GLOBAL CONTAINER & CADRAGE MAX-WIDTH
   ========================================================================== */
.header-modern {
    width: 100% !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 99995 !important;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Header en Mode Sombre (Défaut / body.dark-mode) */
.header-modern,
body.dark-mode .header-modern,
[data-theme="dark"] .header-modern {
    background: #060d1f !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.45) !important;
}

/* Header en Mode Clair */
body:not(.dark-mode) .header-modern,
body.light-mode .header-modern,
[data-theme="light"] .header-modern {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

.header-modern .container.header-content {
    width: 100% !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 0.5rem 1.25rem !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 50000 !important;
}

.header-search-row .container {
    width: 100% !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 0 1.25rem !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   1. ICÔNES DU HEADER & BOUTONS D'ACTION (THÈME ET NOTIFICATIONS)
   ========================================================================== */
.nav-icon,
.main-nav .nav-icon,
body.dark-mode .main-nav .nav-icon,
.logout-icon-svg,
.search-icon,
.nav-link .nav-icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)) !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nav-link:hover .nav-icon {
    transform: scale(1.18) !important;
}

/* Boutons d'action en Mode Sombre */
.header-actions-tools-row .header-action-btn,
.dark-mode-toggle,
.notification-toggle,
#globalDarkModeToggle,
#globalNotificationToggle,
body.dark-mode .header-actions-tools-row .header-action-btn,
body.dark-mode .dark-mode-toggle,
body.dark-mode .notification-toggle,
body.dark-mode #globalDarkModeToggle,
body.dark-mode #globalNotificationToggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.header-actions-tools-row .header-action-btn:hover,
.dark-mode-toggle:hover,
.notification-toggle:hover,
body.dark-mode .header-actions-tools-row .header-action-btn:hover,
body.dark-mode .dark-mode-toggle:hover,
body.dark-mode .notification-toggle:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: #38bdf8 !important;
    transform: translateY(-2px) scale(1.06) !important;
    box-shadow: 0 6px 16px rgba(56, 189, 248, 0.35) !important;
}

/* Boutons d'action en Mode Clair */
body:not(.dark-mode) .header-actions-tools-row .header-action-btn,
body:not(.dark-mode) .dark-mode-toggle,
body:not(.dark-mode) .notification-toggle,
body:not(.dark-mode) #globalDarkModeToggle,
body:not(.dark-mode) #globalNotificationToggle,
body.light-mode .header-actions-tools-row .header-action-btn,
body.light-mode .dark-mode-toggle,
body.light-mode .notification-toggle,
body.light-mode #globalDarkModeToggle,
body.light-mode #globalNotificationToggle {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

body:not(.dark-mode) .header-actions-tools-row .header-action-btn:hover,
body:not(.dark-mode) .dark-mode-toggle:hover,
body:not(.dark-mode) .notification-toggle:hover,
body.light-mode .header-actions-tools-row .header-action-btn:hover,
body.light-mode .dark-mode-toggle:hover,
body.light-mode .notification-toggle:hover {
    background: #e2e8f0 !important;
    border-color: #0066ff !important;
    color: #0066ff !important;
    transform: translateY(-2px) scale(1.06) !important;
    box-shadow: 0 6px 16px rgba(0, 102, 255, 0.2) !important;
}

/* Icônes Thème Soleil / Lune */
.dark-mode-icon-sun,
.dark-mode-icon-moon {
    font-size: 1.15rem !important;
    line-height: 1 !important;
    transition: all 0.25s ease !important;
}

body.dark-mode .dark-mode-icon-sun,
[data-theme="dark"] .dark-mode-icon-sun {
    color: #facc15 !important;
    filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.85)) !important;
}

body:not(.dark-mode) .dark-mode-icon-moon,
body.light-mode .dark-mode-icon-moon,
[data-theme="light"] .dark-mode-icon-moon {
    color: #0284c7 !important;
    filter: drop-shadow(0 0 4px rgba(2, 132, 199, 0.4)) !important;
}

/* Badge de notification flottant */
.notif-bell-badge {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    padding: 0.15rem 0.35rem !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.8) !important;
    border: 1.5px solid #060d1f !important;
    animation: pulseBadge 2s infinite !important;
}

body:not(.dark-mode) .notif-bell-badge,
body.light-mode .notif-bell-badge {
    border-color: #ffffff !important;
}

@keyframes pulseBadge {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* User Chip */
.header-user-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.28rem 0.65rem !important;
    border-radius: 999px !important;
    transition: all 0.2s ease !important;
}

body.dark-mode .header-user-chip,
.header-user-chip {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

body.dark-mode .header-user-chip .user-chip-text,
.header-user-chip .user-chip-text {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
}

body:not(.dark-mode) .header-user-chip,
body.light-mode .header-user-chip {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

body:not(.dark-mode) .header-user-chip .user-chip-text,
body.light-mode .header-user-chip .user-chip-text {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
}

/* Bouton Déconnexion (Icône pure sans texte, circulaire élégant) */
.header-logout-btn,
.header-login-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.header-logout-btn .logout-label-text,
.header-login-btn .login-label-text {
    display: none !important;
}

.logout-icon-svg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.logout-icon-svg svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}

/* Déconnexion en Mode Sombre */
body.dark-mode .header-logout-btn,
.header-logout-btn {
    background: rgba(239, 68, 68, 0.18) !important;
    border: 1.5px solid rgba(239, 68, 68, 0.45) !important;
    color: #fca5a5 !important;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.25) !important;
}

body.dark-mode .header-logout-btn .logout-icon-svg,
.header-logout-btn .logout-icon-svg {
    color: #fca5a5 !important;
}

body.dark-mode .header-logout-btn:hover,
.header-logout-btn:hover {
    background: rgba(239, 68, 68, 0.4) !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.55) !important;
    transform: translateY(-2px) scale(1.06) !important;
}

body.dark-mode .header-logout-btn:hover .logout-icon-svg,
.header-logout-btn:hover .logout-icon-svg {
    color: #ffffff !important;
    transform: scale(1.12) !important;
}

/* Déconnexion en Mode Clair */
body:not(.dark-mode) .header-logout-btn,
body.light-mode .header-logout-btn {
    background: #fee2e2 !important;
    border: 1.5px solid #fca5a5 !important;
    color: #dc2626 !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15) !important;
}

body:not(.dark-mode) .header-logout-btn .logout-icon-svg,
body.light-mode .header-logout-btn .logout-icon-svg {
    color: #dc2626 !important;
}

body:not(.dark-mode) .header-logout-btn:hover,
body.light-mode .header-logout-btn:hover {
    background: #fecaca !important;
    border-color: #ef4444 !important;
    color: #b91c1c !important;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.25) !important;
    transform: translateY(-2px) scale(1.06) !important;
}

body:not(.dark-mode) .header-logout-btn:hover .logout-icon-svg,
body.light-mode .header-logout-btn:hover .logout-icon-svg {
    color: #b91c1c !important;
    transform: scale(1.12) !important;
}

/* Nettoyage des pseudo-éléments carets */
.dropdown-caret i {
    display: none !important;
}

.dropdown-submenu::after,
.dropdown-submenu > a::after,
.dropdown-submenu > .nav-link::after,
.dropdown-menu li::after,
.mobile-menu-toggle::before,
.mobile-menu-toggle::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   2. DESKTOP & LAPTOP (>= 1024px) : CAPSULE NAV, DROPDOWNS & SOUS-DROPDOWNS
   ========================================================================== */
@media (min-width: 1024px) {
    .mobile-nav-header,
    .mobile-menu-toggle,
    .mobile-menu-backdrop {
        display: none !important;
    }

    .header-modern .container.header-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 1320px !important;
        margin: 0 auto !important;
        padding: 0.5rem 1rem 0.5rem 0.65rem !important;
        box-sizing: border-box !important;
        gap: 0.5rem !important;
        position: relative !important;
        z-index: 50000 !important;
    }

    /* 2.1 LOGO GAUCHE */
    .logo-section {
        order: 1 !important;
        flex: 0 0 240px !important;
        width: 240px !important;
        max-width: 240px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-left: 0 !important;
        position: relative !important;
        z-index: 50001 !important;
    }

    .logo-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
        text-align: left !important;
        text-decoration: none !important;
        width: auto !important;
        max-width: 230px !important;
        margin: 0 !important;
    }

    .logo-icon {
        width: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        object-fit: contain !important;
        filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45)) !important;
    }

    .logo-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        margin: 0 !important;
        max-width: none !important;
        overflow: visible !important;
    }

    /* Logo Titre & Sous-titre en Dark Mode */
    .logo-title,
    body.dark-mode .logo-title,
    [data-theme="dark"] .logo-title {
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        color: #f59e0b !important;
        -webkit-text-fill-color: #f59e0b !important;
        margin: 0 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        text-align: left !important;
        letter-spacing: 0.2px !important;
    }

    .logo-subtitle,
    body.dark-mode .logo-subtitle,
    [data-theme="dark"] .logo-subtitle {
        font-size: 0.6rem !important;
        color: #94a3b8 !important;
        -webkit-text-fill-color: #94a3b8 !important;
        margin: 0.1rem 0 0 0 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        max-width: 175px !important;
        text-align: left !important;
        opacity: 0.85 !important;
    }

    /* Logo Titre & Sous-titre en Light Mode */
    body:not(.dark-mode) .logo-title,
    body.light-mode .logo-title,
    [data-theme="light"] .logo-title {
        color: #d97706 !important;
        -webkit-text-fill-color: #d97706 !important;
    }

    body:not(.dark-mode) .logo-subtitle,
    body.light-mode .logo-subtitle,
    [data-theme="light"] .logo-subtitle {
        color: #64748b !important;
        -webkit-text-fill-color: #64748b !important;
    }

    /* 2.2 CAPSULE DE NAVIGATION CENTRALE */
    .main-nav {
        order: 2 !important;
        flex: 0 1 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        width: auto !important;
        max-width: none !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        height: auto !important;
        position: relative !important;
        z-index: 50001 !important;
        min-width: 0 !important;
        transform: none !important;
        top: auto !important;
        right: auto !important;
        overflow: visible !important;
    }

    .main-nav .nav-list {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.12rem !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0.25rem 0.5rem !important;
        width: auto !important;
        max-width: 100% !important;
        flex-wrap: nowrap !important;
        border-radius: 12px !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        transition: all 0.25s ease !important;
        position: relative !important;
        z-index: 50002 !important;
    }

    /* Capsule Nav en MODE SOMBRE (Défaut / body.dark-mode) */
    .main-nav .nav-list,
    body.dark-mode .main-nav .nav-list,
    [data-theme="dark"] .main-nav .nav-list {
        background: rgba(15, 23, 42, 0.75) !important;
        background-color: rgba(15, 23, 42, 0.75) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    }

    /* Capsule Nav en MODE CLAIR */
    body:not(.dark-mode) .main-nav .nav-list,
    body.light-mode .main-nav .nav-list,
    [data-theme="light"] .main-nav .nav-list {
        background: #f1f5f9 !important;
        background-color: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
    }

    .main-nav .nav-item {
        margin: 0 !important;
        border: none !important;
        position: relative !important;
        flex: 0 0 auto !important;
        z-index: 50003 !important;
    }

    .main-nav .nav-item:hover,
    .main-nav .nav-item.active {
        z-index: 50010 !important;
    }

    /* Liens Nav Desktop en MODE SOMBRE */
    .main-nav .nav-item > .nav-link,
    body.dark-mode .main-nav .nav-item > .nav-link,
    [data-theme="dark"] .main-nav .nav-item > .nav-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.2rem !important;
        padding: 0.3rem 0.42rem !important;
        font-size: 0.74rem !important;
        font-weight: 600 !important;
        color: #cbd5e1 !important;
        -webkit-text-fill-color: #cbd5e1 !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        background: transparent !important;
    }

    .main-nav .nav-item > .nav-link .nav-text,
    body.dark-mode .main-nav .nav-item > .nav-link .nav-text {
        font-size: 0.74rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        letter-spacing: 0.15px !important;
        color: inherit !important;
        -webkit-text-fill-color: inherit !important;
    }

    .main-nav .nav-item > .nav-link:hover,
    body.dark-mode .main-nav .nav-item > .nav-link:hover,
    [data-theme="dark"] .main-nav .nav-item > .nav-link:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #38bdf8 !important;
        -webkit-text-fill-color: #38bdf8 !important;
        transform: translateY(-1px) !important;
        text-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
    }

    /* Liens Nav Desktop en MODE CLAIR */
    body:not(.dark-mode) .main-nav .nav-item > .nav-link,
    body.light-mode .main-nav .nav-item > .nav-link,
    [data-theme="light"] .main-nav .nav-item > .nav-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.2rem !important;
        padding: 0.3rem 0.42rem !important;
        font-size: 0.74rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        background: transparent !important;
    }

    body:not(.dark-mode) .main-nav .nav-item > .nav-link .nav-text,
    body.light-mode .main-nav .nav-item > .nav-link .nav-text,
    [data-theme="light"] .main-nav .nav-item > .nav-link .nav-text {
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
        font-weight: 700 !important;
    }

    body:not(.dark-mode) .main-nav .nav-item > .nav-link:hover,
    body.light-mode .main-nav .nav-item > .nav-link:hover,
    [data-theme="light"] .main-nav .nav-item > .nav-link:hover {
        background: #e2e8f0 !important;
        color: #0066ff !important;
        -webkit-text-fill-color: #0066ff !important;
        transform: translateY(-1px) !important;
    }

    /* Onglet Actif (Bleu Royal avec Texte Blanc) */
    .main-nav .nav-item.active > .nav-link,
    body.dark-mode .main-nav .nav-item.active > .nav-link,
    body:not(.dark-mode) .main-nav .nav-item.active > .nav-link,
    body.light-mode .main-nav .nav-item.active > .nav-link {
        background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%) !important;
        background-color: #0066ff !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        box-shadow: 0 4px 14px rgba(0, 102, 255, 0.45) !important;
    }

    .main-nav .nav-item.active > .nav-link .nav-text,
    body.dark-mode .main-nav .nav-item.active > .nav-link .nav-text,
    body:not(.dark-mode) .main-nav .nav-item.active > .nav-link .nav-text,
    body.light-mode .main-nav .nav-item.active > .nav-link .nav-text {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    .main-nav .nav-icon {
        font-size: 0.82rem !important;
        margin: 0 !important;
    }

    /* Chevron Bas pour desktop */
    .main-nav .nav-item > .nav-link .dropdown-caret {
        display: inline-block !important;
        width: 5px !important;
        height: 5px !important;
        border-right: 1.5px solid #94a3b8 !important;
        border-bottom: 1.5px solid #94a3b8 !important;
        transform: rotate(45deg) translateY(-2px) !important;
        margin-left: 0.25rem !important;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
    }

    .main-nav .nav-item:hover > .nav-link .dropdown-caret {
        transform: rotate(225deg) translateY(-1px) translateX(-1px) !important;
        border-color: #38bdf8 !important;
    }

    body:not(.dark-mode) .main-nav .nav-item > .nav-link .dropdown-caret,
    body.light-mode .main-nav .nav-item > .nav-link .dropdown-caret {
        border-color: #64748b !important;
    }

    body:not(.dark-mode) .main-nav .nav-item:hover > .nav-link .dropdown-caret,
    body.light-mode .main-nav .nav-item:hover > .nav-link .dropdown-caret {
        border-color: #0066ff !important;
    }

    .main-nav .nav-item.active > .nav-link .dropdown-caret {
        border-color: #ffffff !important;
    }

    /* 2.3 DROPDOWNS & SOUS-DROPDOWNS MULTI-NIVEAUX DESKTOP */
    .nav-item .dropdown-menu {
        display: none;
        position: absolute !important;
        top: calc(100% + 6px) !important;
        left: 0 !important;
        min-width: 230px !important;
        max-width: 330px !important;
        border-radius: 14px !important;
        padding: 0.5rem !important;
        z-index: 999999 !important;
        list-style: none !important;
        margin: 0 !important;
        transition: all 0.2s ease !important;
    }

    /* Dropdowns Desktop en MODE SOMBRE */
    .nav-item .dropdown-menu,
    body.dark-mode .nav-item .dropdown-menu,
    [data-theme="dark"] .nav-item .dropdown-menu {
        background: rgba(10, 20, 48, 0.97) !important;
        background-color: rgba(10, 20, 48, 0.97) !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 30px rgba(0, 102, 255, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
    }

    /* Dropdowns Desktop en MODE CLAIR */
    body:not(.dark-mode) .nav-item .dropdown-menu,
    body.light-mode .nav-item .dropdown-menu,
    [data-theme="light"] .nav-item .dropdown-menu {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    }

    .nav-item:hover > .dropdown-menu {
        display: block !important;
        animation: fadeInFlyout 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

    .dropdown-menu li {
        margin: 0 0 0.15rem 0 !important;
        position: relative !important;
        list-style: none !important;
    }

    .dropdown-menu li:last-child {
        margin-bottom: 0 !important;
    }

    /* Liens Dropdowns Desktop en MODE SOMBRE */
    .dropdown-menu a,
    body.dark-mode .dropdown-menu a,
    [data-theme="dark"] .dropdown-menu a {
        display: flex !important;
        align-items: center !important;
        padding: 0.52rem 0.8rem !important;
        color: #e2e8f0 !important;
        -webkit-text-fill-color: #e2e8f0 !important;
        font-size: 0.78rem !important;
        font-weight: 500 !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
        white-space: nowrap !important;
        position: relative !important;
        background: transparent !important;
    }

    .dropdown-menu a:hover,
    body.dark-mode .dropdown-menu a:hover,
    [data-theme="dark"] .dropdown-menu a:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #38bdf8 !important;
        -webkit-text-fill-color: #38bdf8 !important;
        transform: translateX(3px) !important;
    }

    /* Liens Dropdowns Desktop en MODE CLAIR */
    body:not(.dark-mode) .dropdown-menu a,
    body.light-mode .dropdown-menu a,
    [data-theme="light"] .dropdown-menu a {
        display: flex !important;
        align-items: center !important;
        padding: 0.52rem 0.8rem !important;
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
        white-space: nowrap !important;
        position: relative !important;
        background: transparent !important;
    }

    body:not(.dark-mode) .dropdown-menu a:hover,
    body.light-mode .dropdown-menu a:hover,
    [data-theme="light"] .dropdown-menu a:hover {
        background: #f1f5f9 !important;
        color: #0066ff !important;
        -webkit-text-fill-color: #0066ff !important;
        transform: translateX(3px) !important;
    }

    /* 2.4 FLYOUTS NIVEAU 2 & 3 DESKTOP */
    .dropdown-submenu {
        position: relative !important;
        z-index: 1000000 !important;
    }

    .dropdown-submenu:hover {
        z-index: 1000010 !important;
    }

    .dropdown-submenu > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-right: 0.6rem !important;
    }

    .dropdown-submenu > a .dropdown-caret,
    .dropdown-submenu > .nav-link .dropdown-caret {
        display: inline-block !important;
        width: 5px !important;
        height: 5px !important;
        border-right: 1.5px solid #94a3b8 !important;
        border-bottom: 1.5px solid #94a3b8 !important;
        transform: rotate(-45deg) !important;
        margin-left: auto !important;
        margin-right: 0.1rem !important;
        transition: transform 0.2s ease, border-color 0.2s ease !important;
    }

    .dropdown-submenu:hover > a .dropdown-caret {
        transform: rotate(-45deg) translateX(2px) !important;
        border-color: #38bdf8 !important;
    }

    body:not(.dark-mode) .dropdown-submenu > a .dropdown-caret,
    body.light-mode .dropdown-submenu > a .dropdown-caret {
        border-color: #64748b !important;
    }

    body:not(.dark-mode) .dropdown-submenu:hover > a .dropdown-caret,
    body.light-mode .dropdown-submenu:hover > a .dropdown-caret {
        border-color: #0066ff !important;
    }

    .dropdown-submenu > .dropdown-menu {
        top: -6px !important;
        left: 100% !important;
        margin-left: 6px !important;
        z-index: 2000000 !important;
    }

    /* Flyout Sous-menus en MODE SOMBRE */
    .dropdown-submenu > .dropdown-menu,
    body.dark-mode .dropdown-submenu > .dropdown-menu,
    [data-theme="dark"] .dropdown-submenu > .dropdown-menu {
        background: rgba(8, 16, 42, 0.98) !important;
        background-color: rgba(8, 16, 42, 0.98) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
    }

    /* Flyout Sous-menus en MODE CLAIR */
    body:not(.dark-mode) .dropdown-submenu > .dropdown-menu,
    body.light-mode .dropdown-submenu > .dropdown-menu,
    [data-theme="light"] .dropdown-submenu > .dropdown-menu {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block !important;
        animation: flyoutRight 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

    /* Niveau 3 Flyout */
    .dropdown-submenu .dropdown-submenu {
        position: relative !important;
        z-index: 2000001 !important;
    }

    .dropdown-submenu .dropdown-submenu:hover {
        z-index: 2000010 !important;
    }

    .dropdown-submenu .dropdown-submenu > .dropdown-menu {
        top: -6px !important;
        left: 100% !important;
        margin-left: 6px !important;
        z-index: 3000000 !important;
    }

    /* Flip à gauche pour les derniers menus desktop */
    .nav-item:nth-last-child(-n+3) .dropdown-submenu > .dropdown-menu {
        left: auto !important;
        right: 100% !important;
        margin-left: 0 !important;
        margin-right: 6px !important;
    }

    .nav-item:nth-last-child(-n+3) .dropdown-submenu:hover > .dropdown-menu {
        animation: flyoutLeft 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

    /* 2.5 ACTIONS DROITE (TOOLS + AUTH SUR LA MÊME LIGNE) */
    .header-actions {
        order: 3 !important;
        flex: 0 0 240px !important;
        width: 240px !important;
        max-width: 240px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.4rem !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 50005 !important;
    }

    .header-actions-menu-row {
        display: none !important;
    }

    .header-actions-tools-row {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }

    .header-actions-auth-row {
        display: none !important;
    }
}

/* Optimisation d'ajustement spécifique pour Laptop (1024px à 1240px) */
@media (min-width: 1024px) and (max-width: 1240px) {
    .header-modern .container.header-content {
        padding: 0.35rem 0.65rem !important;
        gap: 0.25rem !important;
    }

    .logo-section {
        flex: 0 0 110px !important;
        width: 110px !important;
        max-width: 110px !important;
        justify-content: flex-start !important;
    }

    .logo-wrapper {
        gap: 0 !important;
        max-width: 48px !important;
    }

    .logo-icon {
        width: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
    }

    .logo-text {
        display: none !important;
    }

    .main-nav {
        flex: 1 1 auto !important;
        margin: 0 auto !important;
        justify-content: center !important;
    }

    .main-nav .nav-list {
        padding: 0.15rem 0.25rem !important;
        gap: 0.02rem !important;
        border-radius: 10px !important;
    }

    .main-nav .nav-item > .nav-link {
        padding: 0.2rem 0.26rem !important;
        font-size: 0.67rem !important;
        gap: 0.12rem !important;
    }

    .main-nav .nav-item > .nav-link .nav-text {
        font-size: 0.67rem !important;
    }

    .main-nav .nav-icon {
        font-size: 0.72rem !important;
    }

    .main-nav .nav-item > .nav-link .dropdown-caret {
        width: 4px !important;
        height: 4px !important;
        margin-left: 0.15rem !important;
    }

    .header-actions {
        flex: 0 0 110px !important;
        width: 110px !important;
        max-width: 110px !important;
        justify-content: flex-end !important;
        gap: 0.25rem !important;
    }

    .header-actions-tools-row {
        gap: 0.25rem !important;
    }

    .header-actions-tools-row .header-action-btn,
    .dark-mode-toggle,
    .notification-toggle,
    #globalDarkModeToggle,
    #globalNotificationToggle,
    .header-logout-btn,
    .header-login-btn {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        font-size: 0.85rem !important;
    }

    .header-logout-btn .logout-icon-svg svg {
        width: 15px !important;
        height: 15px !important;
    }
}

@keyframes fadeInFlyout {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes flyoutRight {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes flyoutLeft {
    from { opacity: 0; transform: translateX(6px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ==========================================================================
   3. MOBILE, TABLETTE, COMPACT & MICRO (< 1024px)
   TIROIR OVERLAY, ACCORDÉONS MULTI-NIVEAUX & GOUVERNANCE THÈME
   ========================================================================== */
@media (max-width: 1023.98px) {
    .mobile-menu-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 10, 30, 0.65);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 9000 !important;
        transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        opacity: 0;
        pointer-events: none;
    }

    .mobile-menu-backdrop.active,
    body.menu-open .mobile-menu-backdrop {
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .header-modern .container.header-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 0.6rem !important;
        padding: 0.8rem 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Logo Centré */
    .logo-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    .logo-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        text-decoration: none !important;
        width: 100% !important;
        gap: 0.4rem !important;
    }

    .logo-icon {
        width: 44px !important;
        height: 44px !important;
        max-height: 44px !important;
        margin: 0 auto !important;
        object-fit: contain !important;
    }

    .logo-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .logo-title {
        color: #f59e0b !important;
        -webkit-text-fill-color: #f59e0b !important;
        font-size: 1.15rem !important;
        font-weight: 800 !important;
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
        line-height: 1.25 !important;
    }

    body:not(.dark-mode) .logo-title,
    body.light-mode .logo-title {
        color: #d97706 !important;
        -webkit-text-fill-color: #d97706 !important;
    }

    .logo-subtitle {
        color: #94a3b8 !important;
        font-size: 0.72rem !important;
        text-align: center !important;
        margin: 0.2rem auto 0 auto !important;
        width: 100% !important;
        line-height: 1.3 !important;
    }

    body:not(.dark-mode) .logo-subtitle,
    body.light-mode .logo-subtitle {
        color: #64748b !important;
    }

    /* Actions Colonne */
    .header-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 0.45rem !important;
        margin: 0 auto !important;
    }

    .header-actions-row {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 3.1 BOUTON MENU HAMBURGER PRO */
    .header-actions-menu-row {
        order: 1 !important;
        margin-bottom: 0.15rem !important;
    }

    .header-actions-menu-row .mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.6rem !important;
        background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 999px !important;
        padding: 0.5rem 1.4rem !important;
        font-size: 0.9rem !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        box-shadow: 0 4px 15px rgba(0, 102, 255, 0.45) !important;
        cursor: pointer !important;
        width: auto !important;
        max-width: fit-content !important;
        margin: 0 auto !important;
        transition: all 0.2s ease !important;
    }

    .header-actions-menu-row .mobile-menu-toggle:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(0, 102, 255, 0.6) !important;
    }

    .hamburger-lines {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 18px !important;
        height: 12px !important;
    }

    .hamburger-line {
        display: block !important;
        height: 2px !important;
        width: 100% !important;
        background: #ffffff !important;
        border-radius: 2px !important;
        transition: all 0.2s ease !important;
    }

    .menu-label-text {
        font-size: 0.88rem !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        letter-spacing: 0.3px !important;
    }

    /* 3.2 LIGNE TOOLS & AUTH SUR LA MÊME LIGNE (THEME ☀️ + NOTIF 🔔 + DECONNEXION 🚪) */
    .header-actions-tools-row {
        order: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    .header-actions-tools-row .header-action-btn,
    .header-actions-tools-row .dark-mode-toggle,
    .header-actions-tools-row .notification-toggle,
    .header-actions-tools-row .header-logout-btn,
    .header-actions-tools-row .header-login-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 50% !important;
        font-size: 1.05rem !important;
    }

    .header-actions-tools-row .header-logout-btn .logout-icon-svg svg {
        width: 19px !important;
        height: 19px !important;
    }

    .header-actions-auth-row {
        display: none !important;
    }

    /* ==========================================================================
       3.4 TIROIR OVERLAY MOBILE - GOUVERNANCE DARK / LIGHT STRICTE
       ========================================================================== */
    .main-nav {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: min(85vw, 360px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 99999 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-direction: column !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease !important;
    }

    .main-nav.active,
    body.menu-open .main-nav {
        display: flex !important;
    }

    /* Tiroir en MODE SOMBRE */
    .main-nav,
    body.dark-mode .main-nav,
    body.dark-mode .main-nav.active,
    [data-theme="dark"] .main-nav {
        background: #080f24 !important;
        background-color: #080f24 !important;
        box-shadow: -8px 0 40px rgba(0, 0, 0, 0.65) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    /* Tiroir en MODE CLAIR */
    body:not(.dark-mode) .main-nav,
    body:not(.dark-mode) .main-nav.active,
    body.light-mode .main-nav,
    body.light-mode .main-nav.active,
    [data-theme="light"] .main-nav {
        background: #ffffff !important;
        background-color: #ffffff !important;
        box-shadow: -8px 0 40px rgba(0, 0, 0, 0.2) !important;
        border-left: 1px solid #e2e8f0 !important;
    }

    /* 3.5 HEADER DU MENU MOBILE */
    .mobile-nav-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 1.1rem 1.25rem !important;
        flex-shrink: 0 !important;
    }

    /* Header Mobile en MODE SOMBRE */
    .mobile-nav-header,
    body.dark-mode .mobile-nav-header,
    [data-theme="dark"] .mobile-nav-header {
        background: #080f24 !important;
        background-color: #080f24 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .mobile-nav-title,
    body.dark-mode .mobile-nav-title,
    [data-theme="dark"] .mobile-nav-title {
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        margin: 0 !important;
    }

    .mobile-nav-close,
    body.dark-mode .mobile-nav-close,
    [data-theme="dark"] .mobile-nav-close {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        font-size: 1.1rem !important;
    }

    /* Header Mobile en MODE CLAIR */
    body:not(.dark-mode) .mobile-nav-header,
    body.light-mode .mobile-nav-header,
    [data-theme="light"] .mobile-nav-header {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    body:not(.dark-mode) .mobile-nav-title,
    body.light-mode .mobile-nav-title,
    [data-theme="light"] .mobile-nav-title {
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
        margin: 0 !important;
    }

    body:not(.dark-mode) .mobile-nav-close,
    body.light-mode .mobile-nav-close,
    [data-theme="light"] .mobile-nav-close {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !important;
        color: #0f172a !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        font-size: 1.1rem !important;
    }

    /* 3.6 LISTE DES MODULES DANS LE TIROIR */
    .main-nav .nav-list {
        display: flex !important;
        flex-direction: column !important;
        padding: 1rem !important;
        gap: 0.55rem !important;
        list-style: none !important;
        margin: 0 !important;
    }

    /* Liste & Cartes en MODE SOMBRE */
    .main-nav .nav-list,
    body.dark-mode .main-nav .nav-list,
    [data-theme="dark"] .main-nav .nav-list {
        background: #080f24 !important;
        background-color: #080f24 !important;
    }

    .main-nav .nav-item,
    body.dark-mode .main-nav .nav-item,
    [data-theme="dark"] .main-nav .nav-item {
        background: #0f172a !important;
        background-color: #0f172a !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin-bottom: 0.55rem !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }

    .main-nav .nav-item > .nav-link,
    body.dark-mode .main-nav .nav-item > .nav-link,
    [data-theme="dark"] .main-nav .nav-item > .nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.65rem !important;
        padding: 0.82rem 1.1rem !important;
        background: rgba(255, 255, 255, 0.03) !important;
        background-color: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-size: 0.96rem !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .main-nav .nav-item > .nav-link .nav-icon,
    body.dark-mode .main-nav .nav-item > .nav-link .nav-icon,
    [data-theme="dark"] .main-nav .nav-item > .nav-link .nav-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        min-width: 24px !important;
        font-size: 1.15rem !important;
        flex-shrink: 0 !important;
    }

    .main-nav .nav-item > .nav-link .nav-text,
    body.dark-mode .main-nav .nav-item > .nav-link .nav-text {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 0.96rem !important;
        display: inline-block !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        text-align: left !important;
    }

    .main-nav .nav-item > .nav-link .dropdown-caret,
    body.dark-mode .main-nav .nav-item > .nav-link .dropdown-caret {
        display: inline-block !important;
        width: 7px !important;
        height: 7px !important;
        border-right: 2px solid #94a3b8 !important;
        border-bottom: 2px solid #94a3b8 !important;
        transform: rotate(45deg) !important;
        margin-left: auto !important;
        margin-right: 0.2rem !important;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
    }

    /* Liste & Cartes en MODE CLAIR */
    body:not(.dark-mode) .main-nav .nav-list,
    body.light-mode .main-nav .nav-list,
    [data-theme="light"] .main-nav .nav-list {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }

    body:not(.dark-mode) .main-nav .nav-item,
    body.light-mode .main-nav .nav-item,
    [data-theme="light"] .main-nav .nav-item {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin-bottom: 0.55rem !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    }

    body:not(.dark-mode) .main-nav .nav-item > .nav-link,
    body.light-mode .main-nav .nav-item > .nav-link,
    [data-theme="light"] .main-nav .nav-item > .nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.65rem !important;
        padding: 0.82rem 1.1rem !important;
        background: #f8fafc !important;
        background-color: #f8fafc !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 12px !important;
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
        font-size: 0.96rem !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    body:not(.dark-mode) .main-nav .nav-item > .nav-link .nav-icon,
    body.light-mode .main-nav .nav-item > .nav-link .nav-icon,
    [data-theme="light"] .main-nav .nav-item > .nav-link .nav-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        min-width: 24px !important;
        font-size: 1.15rem !important;
        flex-shrink: 0 !important;
    }

    body:not(.dark-mode) .main-nav .nav-item > .nav-link .nav-text,
    body.light-mode .main-nav .nav-item > .nav-link .nav-text,
    [data-theme="light"] .main-nav .nav-item > .nav-link .nav-text {
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
        font-weight: 700 !important;
        font-size: 0.96rem !important;
        display: inline-block !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        text-align: left !important;
    }

    body:not(.dark-mode) .main-nav .nav-item > .nav-link .dropdown-caret,
    body.light-mode .main-nav .nav-item > .nav-link .dropdown-caret,
    [data-theme="light"] .main-nav .nav-item > .nav-link .dropdown-caret {
        display: inline-block !important;
        width: 7px !important;
        height: 7px !important;
        border-right: 2px solid #64748b !important;
        border-bottom: 2px solid #64748b !important;
        transform: rotate(45deg) !important;
        margin-left: auto !important;
        margin-right: 0.2rem !important;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
    }

    /* Carte Navlink Active Mobile (Pilule Bleu Royal avec Texte Blanc Pur) */
    .main-nav .nav-item.active > .nav-link,
    .main-nav .nav-item.open > .nav-link,
    .main-nav .nav-item.dropdown.active > .nav-link,
    body.dark-mode .main-nav .nav-item.active > .nav-link,
    body.dark-mode .main-nav .nav-item.open > .nav-link,
    body.dark-mode .main-nav .nav-item.dropdown.active > .nav-link,
    body:not(.dark-mode) .main-nav .nav-item.active > .nav-link,
    body:not(.dark-mode) .main-nav .nav-item.open > .nav-link,
    body.light-mode .main-nav .nav-item.active > .nav-link,
    body.light-mode .main-nav .nav-item.open > .nav-link {
        background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%) !important;
        background-color: #0066ff !important;
        border-color: #0066ff !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        box-shadow: 0 4px 15px rgba(0, 102, 255, 0.4) !important;
    }

    .main-nav .nav-item.active > .nav-link *,
    .main-nav .nav-item.open > .nav-link *,
    .main-nav .nav-item.dropdown.active > .nav-link *,
    body.dark-mode .main-nav .nav-item.active > .nav-link *,
    body.dark-mode .main-nav .nav-item.open > .nav-link *,
    body:not(.dark-mode) .main-nav .nav-item.active > .nav-link *,
    body:not(.dark-mode) .main-nav .nav-item.open > .nav-link *,
    body.light-mode .main-nav .nav-item.active > .nav-link *,
    body.light-mode .main-nav .nav-item.open > .nav-link * {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    .main-nav .nav-item.active > .nav-link .dropdown-caret,
    .main-nav .nav-item.open > .nav-link .dropdown-caret {
        transform: rotate(225deg) !important;
        border-right-color: #ffffff !important;
        border-bottom-color: #ffffff !important;
    }

    /* ==========================================================================
       3.7 ACCORDÉONS MULTI-NIVEAUX SUR MOBILE (< 1024px)
       Isolation stricte niveau par niveau - Tous les sous-menus fermés par défaut
       ========================================================================== */
    /* Neutraliser tout déclenchement de :hover sur mobile/tablette */
    .main-nav .nav-item:hover > .dropdown-menu,
    .main-nav .dropdown-submenu:hover > .dropdown-menu,
    .main-nav .dropdown-submenu .dropdown-submenu:hover > .dropdown-menu {
        display: none !important;
    }

    /* 1. Par défaut, TOUS les dropdowns et sous-menus mobile sont STRICTEMENT FERMÉS */
    .main-nav .dropdown-menu,
    .main-nav .nav-item .dropdown-menu,
    .main-nav .dropdown-submenu .dropdown-menu,
    .main-nav .dropdown-submenu > .dropdown-menu {
        display: none !important;
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        border-radius: 0 0 10px 10px !important;
        padding: 0.4rem 0.6rem !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        list-style: none !important;
    }

    /* 2. NIVEAU 1 : Ouvert UNIQUEMENT si le parent direct .nav-item a la classe .active */
    .main-nav .nav-item.active > .dropdown-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
    }

    /* Verrouillage absolu : Tous les sous-menus (Niveau 2 et 3) à l'intérieur du Niveau 1
       restent STRICTEMENT FERMÉS par défaut tant que leur propre .dropdown-submenu n'est pas .active */
    .main-nav .nav-item.active > .dropdown-menu .dropdown-menu,
    .main-nav .nav-item.active > .dropdown-menu .dropdown-submenu > .dropdown-menu,
    .main-nav .nav-item.active > .dropdown-menu .dropdown-submenu:not(.active) > .dropdown-menu {
        display: none !important;
    }

    /* 3. NIVEAU 2 : Ouvert UNIQUEMENT si le .dropdown-submenu direct a la classe .active */
    .main-nav .nav-item.active > .dropdown-menu > .dropdown-submenu.active > .dropdown-menu,
    .main-nav .dropdown-submenu.active > .dropdown-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
        margin-top: 0.35rem !important;
        margin-bottom: 0.35rem !important;
    }

    /* Verrouillage Niveau 3 : Le sous-menu Niveau 3 à l'intérieur du Niveau 2 reste FERMÉ tant qu'il n'est pas .active */
    .main-nav .dropdown-submenu.active > .dropdown-menu .dropdown-menu,
    .main-nav .dropdown-submenu.active > .dropdown-menu .dropdown-submenu:not(.active) > .dropdown-menu {
        display: none !important;
    }

    /* 4. NIVEAU 3 : Ouvert UNIQUEMENT si le .dropdown-submenu enfant de Niveau 3 a la classe .active */
    .main-nav .dropdown-submenu.active > .dropdown-menu > .dropdown-submenu.active > .dropdown-menu,
    .main-nav .dropdown-submenu.active > .dropdown-menu .dropdown-submenu.active > .dropdown-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
        margin-top: 0.35rem !important;
        margin-bottom: 0.35rem !important;
    }

    /* ==========================================================================
       3.8 SOUS-MENUS ACCORDÉONS MOBILE EN MODE SOMBRE
       ========================================================================== */
    .main-nav .dropdown-menu,
    body.dark-mode .main-nav .dropdown-menu,
    body.dark-mode .main-nav .nav-item .dropdown-menu,
    [data-theme="dark"] .main-nav .dropdown-menu {
        background: #060d1f !important;
        background-color: #060d1f !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-left: 3px solid #0066ff !important;
    }

    /* Harmonisation stricte de la disposition de tous les liens de dropdown mobile (Mode Sombre) */
    .main-nav .dropdown-menu a,
    .main-nav .dropdown-menu .nav-link,
    body.dark-mode .main-nav .dropdown-menu a,
    body.dark-mode .main-nav .dropdown-menu .nav-link,
    [data-theme="dark"] .main-nav .dropdown-menu a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0.55rem 0.85rem !important;
        gap: 0.45rem !important; /* Proximité immédiate entre icône et texte */
        color: #cbd5e1 !important;
        -webkit-text-fill-color: #cbd5e1 !important;
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        transition: all 0.18s ease !important;
        background: transparent !important;
        margin: 0 !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
        line-height: 1.35 !important;
    }

    .main-nav .dropdown-menu a:hover,
    body.dark-mode .main-nav .dropdown-menu a:hover,
    [data-theme="dark"] .main-nav .dropdown-menu a:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        color: #38bdf8 !important;
        -webkit-text-fill-color: #38bdf8 !important;
        transform: translateX(3px) !important;
    }

    /* Icône dans les sous-liens : taille fixe 22px et alignement parfait */
    .main-nav .dropdown-menu .nav-icon,
    .main-nav .dropdown-menu .nav-link .nav-icon,
    .main-nav .dropdown-submenu > a .nav-icon,
    body.dark-mode .main-nav .dropdown-menu .nav-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 22px !important;
        min-width: 22px !important;
        font-size: 1rem !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        text-align: center !important;
    }

    /* Texte dans les sous-liens : départ immédiat à côté de l'icône et expansion */
    .main-nav .dropdown-menu .nav-text,
    .main-nav .dropdown-menu .nav-link .nav-text,
    .main-nav .dropdown-submenu > a .nav-text,
    .main-nav .dropdown-menu a > span:not(.dropdown-caret):not(.nav-icon),
    body.dark-mode .main-nav .dropdown-menu .nav-text {
        display: inline-block !important;
        flex-grow: 1 !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
    }

    /* Niveau 2 Sombre (Bleu Dégradé) */
    .main-nav .dropdown-submenu.active > .dropdown-menu,
    body.dark-mode .main-nav .dropdown-submenu.active > .dropdown-menu,
    [data-theme="dark"] .main-nav .dropdown-submenu.active > .dropdown-menu {
        background: #0a1430 !important;
        background-color: #0a1430 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-left: 2px solid #38bdf8 !important;
        border-radius: 8px !important;
    }

    /* Niveau 3 Sombre */
    .main-nav .dropdown-submenu.active > .dropdown-menu .dropdown-submenu.active > .dropdown-menu,
    body.dark-mode .main-nav .dropdown-submenu.active > .dropdown-menu .dropdown-submenu.active > .dropdown-menu,
    [data-theme="dark"] .main-nav .dropdown-submenu.active > .dropdown-menu .dropdown-submenu.active > .dropdown-menu {
        background: #060d1f !important;
        background-color: #060d1f !important;
        border-left: 2px solid #f59e0b !important;
    }

    /* ==========================================================================
       3.9 SOUS-MENUS ACCORDÉONS MOBILE EN MODE CLAIR
       ========================================================================== */
    body:not(.dark-mode) .main-nav .dropdown-menu,
    body:not(.dark-mode) .main-nav .nav-item .dropdown-menu,
    body:not(.dark-mode) .main-nav .dropdown-submenu .dropdown-menu,
    body.light-mode .main-nav .dropdown-menu,
    body.light-mode .main-nav .nav-item .dropdown-menu,
    body.light-mode .main-nav .dropdown-submenu .dropdown-menu,
    [data-theme="light"] .main-nav .dropdown-menu {
        background: #f8fafc !important;
        background-color: #f8fafc !important;
        border-top: 1px solid #e2e8f0 !important;
        border-left: 3px solid #0066ff !important;
    }

    /* Harmonisation stricte de la disposition de tous les liens de dropdown mobile (Mode Clair) */
    body:not(.dark-mode) .main-nav .dropdown-menu a,
    body:not(.dark-mode) .main-nav .dropdown-menu .nav-link,
    body.light-mode .main-nav .dropdown-menu a,
    body.light-mode .main-nav .dropdown-menu .nav-link,
    [data-theme="light"] .main-nav .dropdown-menu a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0.55rem 0.85rem !important;
        gap: 0.45rem !important; /* Proximité immédiate entre icône et texte */
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        transition: all 0.18s ease !important;
        background: transparent !important;
        margin: 0 !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
        line-height: 1.35 !important;
    }

    body:not(.dark-mode) .main-nav .dropdown-menu a:hover,
    body.light-mode .main-nav .dropdown-menu a:hover,
    [data-theme="light"] .main-nav .dropdown-menu a:hover {
        background: #e2e8f0 !important;
        color: #0066ff !important;
        -webkit-text-fill-color: #0066ff !important;
        transform: translateX(3px) !important;
    }

    body:not(.dark-mode) .main-nav .dropdown-menu .nav-icon,
    body.light-mode .main-nav .dropdown-menu .nav-icon,
    [data-theme="light"] .main-nav .dropdown-menu .nav-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 22px !important;
        min-width: 22px !important;
        font-size: 1rem !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        text-align: center !important;
    }

    body:not(.dark-mode) .main-nav .dropdown-menu .nav-text,
    body.light-mode .main-nav .dropdown-menu .nav-text,
    [data-theme="light"] .main-nav .dropdown-menu .nav-text,
    body:not(.dark-mode) .main-nav .dropdown-menu a > span:not(.dropdown-caret):not(.nav-icon),
    body.light-mode .main-nav .dropdown-menu a > span:not(.dropdown-caret):not(.nav-icon),
    [data-theme="light"] .main-nav .dropdown-menu a > span:not(.dropdown-caret):not(.nav-icon) {
        display: inline-block !important;
        flex-grow: 1 !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }

    /* Niveau 2 Clair */
    body:not(.dark-mode) .main-nav .dropdown-submenu.active > .dropdown-menu,
    body.light-mode .main-nav .dropdown-submenu.active > .dropdown-menu,
    [data-theme="light"] .main-nav .dropdown-submenu.active > .dropdown-menu {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-left: 2px solid #38bdf8 !important;
        border-radius: 8px !important;
    }

    /* Niveau 3 Clair */
    body:not(.dark-mode) .main-nav .dropdown-submenu.active > .dropdown-menu .dropdown-submenu.active > .dropdown-menu,
    body.light-mode .main-nav .dropdown-submenu.active > .dropdown-menu .dropdown-submenu.active > .dropdown-menu,
    [data-theme="light"] .main-nav .dropdown-submenu.active > .dropdown-menu .dropdown-submenu.active > .dropdown-menu {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border-left: 2px solid #f59e0b !important;
    }

    /* ==========================================================================
       3.10 CHEVRONS DE SIGNALEMENT DES SOUS-DROPDOWNS MULTI-NIVEAUX (MOBILE OVERLAY)
       ========================================================================== */
    /* Conteneur de l'icône chevron sur tous les sous-menus multi-niveaux */
    .main-nav .dropdown-submenu > a .dropdown-caret,
    .main-nav .dropdown-submenu > .nav-link .dropdown-caret,
    .main-nav li.dropdown-submenu > a .dropdown-caret {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 14px !important;
        height: 14px !important;
        margin-left: auto !important; /* Pousse l'icône chevron à l'extrême droite */
        margin-right: 0.2rem !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }

    /* Forme du chevron en flèche vectorielle pure (Fermé : Pointe vers la droite >) */
    .main-nav .dropdown-submenu > a .dropdown-caret::before,
    .main-nav .dropdown-submenu > .nav-link .dropdown-caret::before,
    .main-nav li.dropdown-submenu > a .dropdown-caret::before {
        content: '' !important;
        display: block !important;
        width: 6px !important;
        height: 6px !important;
        border-right: 2px solid #94a3b8 !important;
        border-bottom: 2px solid #94a3b8 !important;
        transform: rotate(-45deg) !important; /* Pointe vers la droite > */
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
    }

    /* Fallback si l'élément <a> n'a pas de span .dropdown-caret */
    .main-nav .dropdown-submenu > a:not(:has(.dropdown-caret))::after,
    .main-nav .dropdown-submenu > .nav-link:not(:has(.dropdown-caret))::after {
        content: '' !important;
        display: block !important;
        width: 6px !important;
        height: 6px !important;
        border-right: 2px solid #94a3b8 !important;
        border-bottom: 2px solid #94a3b8 !important;
        transform: rotate(-45deg) !important; /* Pointe vers la droite > */
        margin-left: auto !important;
        margin-right: 0.2rem !important;
        flex-shrink: 0 !important;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
    }

    /* Couleurs du chevron en Mode Clair (Fermé) */
    body:not(.dark-mode) .main-nav .dropdown-submenu > a .dropdown-caret::before,
    body:not(.dark-mode) .main-nav .dropdown-submenu > .nav-link .dropdown-caret::before,
    body.light-mode .main-nav .dropdown-submenu > a .dropdown-caret::before,
    body.light-mode .main-nav .dropdown-submenu > .nav-link .dropdown-caret::before,
    [data-theme="light"] .main-nav .dropdown-submenu > a .dropdown-caret::before,
    body:not(.dark-mode) .main-nav .dropdown-submenu > a:not(:has(.dropdown-caret))::after,
    body.light-mode .main-nav .dropdown-submenu > a:not(:has(.dropdown-caret))::after,
    [data-theme="light"] .main-nav .dropdown-submenu > a:not(:has(.dropdown-caret))::after {
        border-right-color: #64748b !important;
        border-bottom-color: #64748b !important;
    }

    /* Rotation du chevron lorsque le sous-menu est OUVERT (Niveau 2, 3...) */
    .main-nav .dropdown-submenu.active > a .dropdown-caret::before,
    .main-nav .dropdown-submenu.open > a .dropdown-caret::before,
    .main-nav .dropdown-submenu.active > .nav-link .dropdown-caret::before,
    .main-nav .dropdown-submenu.open > .nav-link .dropdown-caret::before,
    .main-nav .dropdown-submenu.active > a:not(:has(.dropdown-caret))::after,
    .main-nav .dropdown-submenu.open > a:not(:has(.dropdown-caret))::after {
        transform: rotate(45deg) !important; /* Pointe vers le bas v lorsque déployé */
        border-right-color: #38bdf8 !important;
        border-bottom-color: #38bdf8 !important;
    }

    body:not(.dark-mode) .main-nav .dropdown-submenu.active > a .dropdown-caret::before,
    body:not(.dark-mode) .main-nav .dropdown-submenu.open > a .dropdown-caret::before,
    body.light-mode .main-nav .dropdown-submenu.active > a .dropdown-caret::before,
    body.light-mode .main-nav .dropdown-submenu.open > a .dropdown-caret::before,
    [data-theme="light"] .main-nav .dropdown-submenu.active > a .dropdown-caret::before,
    [data-theme="light"] .main-nav .dropdown-submenu.open > a .dropdown-caret::before,
    body:not(.dark-mode) .main-nav .dropdown-submenu.active > a:not(:has(.dropdown-caret))::after,
    body.light-mode .main-nav .dropdown-submenu.active > a:not(:has(.dropdown-caret))::after,
    [data-theme="light"] .main-nav .dropdown-submenu.active > a:not(:has(.dropdown-caret))::after {
        border-right-color: #0066ff !important;
        border-bottom-color: #0066ff !important;
    }

    /* Niveau 3 Actif (Or/Ambre) */
    .main-nav .dropdown-submenu.active > .dropdown-menu .dropdown-submenu.active > a .dropdown-caret::before,
    .main-nav .dropdown-submenu.open > .dropdown-menu .dropdown-submenu.open > a .dropdown-caret::before,
    .main-nav .dropdown-submenu.active > .dropdown-menu .dropdown-submenu.active > a:not(:has(.dropdown-caret))::after,
    .main-nav .dropdown-submenu.open > .dropdown-menu .dropdown-submenu.open > a:not(:has(.dropdown-caret))::after {
        border-right-color: #f59e0b !important;
        border-bottom-color: #f59e0b !important;
    }

    /* Style actif de la ligne parent sous-menu */
    .main-nav .dropdown-submenu.active > a,
    .main-nav .dropdown-submenu.open > a,
    .main-nav .dropdown-submenu.active > .nav-link,
    .main-nav .dropdown-submenu.open > .nav-link {
        background: rgba(56, 189, 248, 0.12) !important;
        color: #38bdf8 !important;
        -webkit-text-fill-color: #38bdf8 !important;
        font-weight: 700 !important;
    }

    body:not(.dark-mode) .main-nav .dropdown-submenu.active > a,
    body:not(.dark-mode) .main-nav .dropdown-submenu.open > a,
    body.light-mode .main-nav .dropdown-submenu.active > a,
    body.light-mode .main-nav .dropdown-submenu.open > a,
    [data-theme="light"] .main-nav .dropdown-submenu.active > a,
    [data-theme="light"] .main-nav .dropdown-submenu.open > a {
        background: rgba(0, 102, 255, 0.08) !important;
        color: #0066ff !important;
        -webkit-text-fill-color: #0066ff !important;
    }
}

/* ==========================================================================
   4. BARRE DE RECHERCHE GLOBALE & COMMAND PALETTE
   ========================================================================== */
.header-search-row {
    width: 100% !important;
    padding: 0.4rem 0 0.85rem 0 !important;
    background: transparent !important;
    position: relative !important;
    z-index: 100 !important;
}

.header-search-row .container {
    width: 100% !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 0 1rem 0 0.65rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.search-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 746px !important; /* Calibré sur la largeur de la capsule nav-list desktop */
    margin: 0 auto !important;
    transition: max-width 0.2s ease, width 0.2s ease !important;
}

@media (min-width: 1024px) and (max-width: 1240px) {
    .header-search-row .container {
        padding: 0 0.65rem !important;
    }
    .search-wrapper {
        max-width: 698px !important; /* Calibré sur la largeur de la capsule nav-list laptop */
    }
}

@media (max-width: 1023.98px) {
    .search-wrapper {
        max-width: 100% !important;
    }
}

/* Conteneur Capsule Pilule de Recherche */
.search-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 46px !important;
    border-radius: 9999px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

/* Recherche en MODE SOMBRE */
.search-container,
body.dark-mode .search-container,
[data-theme="dark"] .search-container {
    background: #081028 !important;
    background-color: #081028 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .search-container:hover,
[data-theme="dark"] .search-container:hover {
    border-color: rgba(56, 189, 248, 0.4) !important;
    background: #0a1432 !important;
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .search-container:focus-within,
[data-theme="dark"] .search-container:focus-within {
    background: #060c20 !important;
    border-color: #0066ff !important;
    box-shadow: 0 0 0 3.5px rgba(0, 102, 255, 0.32), 0 10px 35px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    transform: translateY(-1px) !important;
}

/* Recherche en MODE CLAIR */
body:not(.dark-mode) .search-container,
body.light-mode .search-container,
[data-theme="light"] .search-container {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

body:not(.dark-mode) .search-container:hover,
body.light-mode .search-container:hover,
[data-theme="light"] .search-container:hover {
    border-color: #94a3b8 !important;
    background: #e2e8f0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

body:not(.dark-mode) .search-container:focus-within,
body.light-mode .search-container:focus-within,
[data-theme="light"] .search-container:focus-within {
    background: #ffffff !important;
    border-color: #0066ff !important;
    box-shadow: 0 0 0 3.5px rgba(0, 102, 255, 0.2), 0 6px 20px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) !important;
}

/* Icône Loupe */
.search-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 18px !important;
    padding-right: 12px !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
}

body.dark-mode .search-icon,
[data-theme="dark"] .search-icon,
.search-icon {
    color: #38bdf8 !important;
}

body:not(.dark-mode) .search-icon,
body.light-mode .search-icon,
[data-theme="light"] .search-icon {
    color: #0066ff !important;
}

.search-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
}

/* Champ de saisie input */
.search-input,
#header-search-input {
    flex: 1 !important;
    height: 100% !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.94rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.2px !important;
    padding: 0 10px 0 0 !important;
    box-shadow: none !important;
    line-height: 46px !important;
}

/* Input en MODE SOMBRE */
body.dark-mode .search-input,
body.dark-mode #header-search-input,
[data-theme="dark"] .search-input,
[data-theme="dark"] #header-search-input,
.search-input,
#header-search-input {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.dark-mode .search-input::placeholder,
body.dark-mode #header-search-input::placeholder,
[data-theme="dark"] .search-input::placeholder,
[data-theme="dark"] #header-search-input::placeholder,
.search-input::placeholder,
#header-search-input::placeholder {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}

/* Input en MODE CLAIR */
body:not(.dark-mode) .search-input,
body:not(.dark-mode) #header-search-input,
body.light-mode .search-input,
body.light-mode #header-search-input,
[data-theme="light"] .search-input,
[data-theme="light"] #header-search-input {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

body:not(.dark-mode) .search-input::placeholder,
body:not(.dark-mode) #header-search-input::placeholder,
body.light-mode .search-input::placeholder,
body.light-mode #header-search-input::placeholder,
[data-theme="light"] .search-input::placeholder,
[data-theme="light"] #header-search-input::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

/* Badge Raccourci Clavier Ctrl+K */
.search-kbd-shortcut {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 3px 8px !important;
    margin-right: 14px !important;
    border-radius: 6px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    letter-spacing: 0.5px !important;
    pointer-events: none !important;
    user-select: none !important;
    transition: opacity 0.2s ease !important;
    flex-shrink: 0 !important;
}

body.dark-mode .search-kbd-shortcut,
[data-theme="dark"] .search-kbd-shortcut,
.search-kbd-shortcut {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #94a3b8 !important;
}

body:not(.dark-mode) .search-kbd-shortcut,
body.light-mode .search-kbd-shortcut,
[data-theme="light"] .search-kbd-shortcut {
    background: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

/* 4.1 DROPDOWN DES RÉSULTATS DE RECHERCHE */
.search-dropdown {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 18px !important;
    max-height: 480px !important;
    overflow-y: auto !important;
    z-index: 2000 !important;
    padding: 6px 0 !important;
    box-sizing: border-box !important;
    animation: searchDropdownFade 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes searchDropdownFade {
    from { opacity: 0; transform: translateY(-8px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Dropdown Recherche en MODE SOMBRE */
.search-dropdown,
body.dark-mode .search-dropdown,
[data-theme="dark"] .search-dropdown {
    background: #080f24 !important;
    background-color: #080f24 !important;
    border: 1.5px solid rgba(0, 102, 255, 0.35) !important;
    box-shadow: 0 25px 60px -5px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 102, 255, 0.15) !important;
}

.search-dropdown-header,
body.dark-mode .search-dropdown-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 20px 8px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 6px !important;
}

.search-results-title,
body.dark-mode .search-results-title {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}

.search-result-item,
body.dark-mode .search-result-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 10px 14px !important;
    margin: 3px 6px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    cursor: pointer !important;
}

.search-result-item:hover,
body.dark-mode .search-result-item:hover {
    background: linear-gradient(90deg, rgba(0, 102, 255, 0.28) 0%, rgba(56, 189, 248, 0.1) 100%) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.search-result-title,
body.dark-mode .search-result-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 0.94rem !important;
    font-weight: 600 !important;
}

/* Dropdown Recherche en MODE CLAIR */
body:not(.dark-mode) .search-dropdown,
body.light-mode .search-dropdown,
[data-theme="light"] .search-dropdown {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.06) !important;
}

body:not(.dark-mode) .search-dropdown-header,
body.light-mode .search-dropdown-header,
[data-theme="light"] .search-dropdown-header {
    border-bottom: 1px solid #e2e8f0 !important;
}

body:not(.dark-mode) .search-results-title,
body.light-mode .search-results-title,
[data-theme="light"] .search-results-title {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

body:not(.dark-mode) .search-result-item,
body.light-mode .search-result-item,
[data-theme="light"] .search-result-item {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

body:not(.dark-mode) .search-result-item:hover,
body.light-mode .search-result-item:hover,
[data-theme="light"] .search-result-item:hover {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.08) !important;
}

body:not(.dark-mode) .search-result-title,
body.light-mode .search-result-title,
[data-theme="light"] .search-result-title {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
}

body:not(.dark-mode) .search-result-desc,
body.light-mode .search-result-desc,
[data-theme="light"] .search-result-desc {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

/* ==========================================================================
   5. CENTRE DE NOTIFICATIONS (DARK LUXURY & LIGHT REFINED)
   ========================================================================== */
.notification-panel,
#notificationPanel {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    width: 440px !important;
    max-width: calc(100vw - 32px) !important;
    border-radius: 20px !important;
    z-index: 999999 !important;
    box-sizing: border-box !important;
    display: none;
    flex-direction: column !important;
    animation: notificationPanelFade 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transition: all 0.25s ease !important;
    overflow: hidden !important;
}

.notification-panel.active,
#notificationPanel.active {
    display: flex !important;
}

@keyframes notificationPanelFade {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header du panel */
.notification-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.notification-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.notification-header-icon-wrap {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    flex-shrink: 0 !important;
}

.notification-header-titles {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.notification-header-title {
    font-size: 1rem !important;
    font-weight: 800 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.notification-header-count {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
}

.notification-close,
#notificationCloseBtn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

/* Liste des notifications */
.notification-list,
#notificationList {
    max-height: 400px !important;
    overflow-y: auto !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

.notification-list::-webkit-scrollbar {
    width: 6px !important;
}

.notification-list::-webkit-scrollbar-thumb {
    border-radius: 6px !important;
}

/* Item Notification */
.notification-item {
    display: flex !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    align-items: flex-start !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.notification-item:hover {
    transform: translateX(3px) !important;
}

.notif-icon-box {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
    flex-shrink: 0 !important;
}

.notif-content {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    text-align: left !important;
}

.notif-top-row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.notif-title {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.notif-badge-pill {
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
}

.notif-msg {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    margin: 2px 0 !important;
}

.notif-bottom-row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.74rem !important;
    margin-top: 4px !important;
    padding-top: 4px !important;
}

.notif-date {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: 500 !important;
}

.notif-action-link {
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
}

/* Footer du panel */
.notification-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 18px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.notification-time-wrap {
    font-size: 0.76rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 500 !important;
}

.notification-refresh,
#notificationRefreshBtn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.notification-refresh:hover,
#notificationRefreshBtn:hover {
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   5.1 COULEURS DU PANEL EN MODE SOMBRE
   ========================================================================== */
.notification-panel,
#notificationPanel,
body.dark-mode .notification-panel,
body.dark-mode #notificationPanel,
[data-theme="dark"] .notification-panel {
    background: #080f24 !important;
    background-color: #080f24 !important;
    border: 1.5px solid rgba(0, 102, 255, 0.35) !important;
    box-shadow: 0 25px 60px -5px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 102, 255, 0.18) !important;
}

.notification-header,
body.dark-mode .notification-header,
[data-theme="dark"] .notification-header {
    background: #080f24 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.notification-header-icon-wrap,
body.dark-mode .notification-header-icon-wrap {
    background: rgba(0, 102, 255, 0.2) !important;
    border: 1px solid rgba(0, 102, 255, 0.4) !important;
}

.notification-header-title,
body.dark-mode .notification-header-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.notification-header-count,
body.dark-mode .notification-header-count {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}

.notification-close,
#notificationCloseBtn,
body.dark-mode .notification-close,
body.dark-mode #notificationCloseBtn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #cbd5e1 !important;
}

.notification-close:hover,
#notificationCloseBtn:hover,
body.dark-mode .notification-close:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #f87171 !important;
}

.notification-list::-webkit-scrollbar-thumb,
body.dark-mode .notification-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Alertes Sombre */
.notification-item.type-danger,
body.dark-mode .notification-item.type-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-left: 4px solid #ef4444 !important;
}

.notification-item.type-warning,
body.dark-mode .notification-item.type-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    border-left: 4px solid #f59e0b !important;
}

.notif-icon-box.type-danger,
body.dark-mode .notif-icon-box.type-danger {
    background: rgba(239, 68, 68, 0.2) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

.notif-icon-box.type-warning,
body.dark-mode .notif-icon-box.type-warning {
    background: rgba(245, 158, 11, 0.2) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

.notif-badge-pill.type-danger,
body.dark-mode .notif-badge-pill.type-danger {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #f87171 !important;
    -webkit-text-fill-color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
}

.notif-badge-pill.type-warning,
body.dark-mode .notif-badge-pill.type-warning {
    background: rgba(245, 158, 11, 0.25) !important;
    color: #fbbf24 !important;
    -webkit-text-fill-color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
}

.notif-title,
body.dark-mode .notif-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.notif-msg,
body.dark-mode .notif-msg {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

.notif-bottom-row,
body.dark-mode .notif-bottom-row {
    border-top: 1px dashed rgba(255, 255, 255, 0.08) !important;
}

.notif-date,
body.dark-mode .notif-date {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}

.notif-action-link,
body.dark-mode .notif-action-link {
    color: #38bdf8 !important;
    -webkit-text-fill-color: #38bdf8 !important;
}

.notification-footer,
body.dark-mode .notification-footer,
[data-theme="dark"] .notification-footer {
    background: rgba(0, 0, 0, 0.35) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.notification-time-wrap,
body.dark-mode .notification-time-wrap {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}

.notification-time-wrap strong,
body.dark-mode .notification-time-wrap strong {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

.notification-refresh,
#notificationRefreshBtn,
body.dark-mode .notification-refresh,
body.dark-mode #notificationRefreshBtn {
    background: rgba(0, 102, 255, 0.25) !important;
    border: 1px solid rgba(0, 102, 255, 0.5) !important;
    color: #38bdf8 !important;
    -webkit-text-fill-color: #38bdf8 !important;
}

.notification-refresh:hover,
#notificationRefreshBtn:hover,
body.dark-mode .notification-refresh:hover {
    background: rgba(0, 102, 255, 0.45) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ==========================================================================
   5.2 COULEURS DU PANEL EN MODE CLAIR
   ========================================================================== */
body:not(.dark-mode) .notification-panel,
body.light-mode .notification-panel,
[data-theme="light"] .notification-panel {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

body:not(.dark-mode) .notification-header,
body.light-mode .notification-header,
[data-theme="light"] .notification-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body:not(.dark-mode) .notification-header-icon-wrap,
body.light-mode .notification-header-icon-wrap {
    background: #e0f2fe !important;
    border: 1px solid #bae6fd !important;
}

body:not(.dark-mode) .notification-header-title,
body.light-mode .notification-header-title {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

body:not(.dark-mode) .notification-header-count,
body.light-mode .notification-header-count {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

body:not(.dark-mode) .notification-close,
body:not(.dark-mode) #notificationCloseBtn,
body.light-mode .notification-close,
body.light-mode #notificationCloseBtn {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

body:not(.dark-mode) .notification-close:hover,
body:not(.dark-mode) #notificationCloseBtn:hover,
body.light-mode .notification-close:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #ef4444 !important;
}

body:not(.dark-mode) .notification-list::-webkit-scrollbar-thumb,
body.light-mode .notification-list::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
}

/* Alertes Clair */
body:not(.dark-mode) .notification-item.type-danger,
body.light-mode .notification-item.type-danger {
    background: #fff5f5 !important;
    border: 1px solid #fed7d7 !important;
    border-left: 4px solid #ef4444 !important;
}

body:not(.dark-mode) .notification-item.type-warning,
body.light-mode .notification-item.type-warning {
    background: #fffbeb !important;
    border: 1px solid #fef3c7 !important;
    border-left: 4px solid #f59e0b !important;
}

body:not(.dark-mode) .notif-icon-box.type-danger,
body.light-mode .notif-icon-box.type-danger {
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
}

body:not(.dark-mode) .notif-icon-box.type-warning,
body.light-mode .notif-icon-box.type-warning {
    background: #fef3c7 !important;
    border: 1px solid #fde68a !important;
}

body:not(.dark-mode) .notif-badge-pill.type-danger,
body.light-mode .notif-badge-pill.type-danger {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    -webkit-text-fill-color: #b91c1c !important;
    border: 1px solid #fca5a5 !important;
}

body:not(.dark-mode) .notif-badge-pill.type-warning,
body.light-mode .notif-badge-pill.type-warning {
    background: #fef3c7 !important;
    color: #b45309 !important;
    -webkit-text-fill-color: #b45309 !important;
    border: 1px solid #fde68a !important;
}

body:not(.dark-mode) .notif-title,
body.light-mode .notif-title {
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

body:not(.dark-mode) .notif-msg,
body.light-mode .notif-msg {
    font-size: 0.86rem !important;
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
}

body:not(.dark-mode) .notif-bottom-row,
body.light-mode .notif-bottom-row {
    border-top: 1px dashed #e2e8f0 !important;
}

body:not(.dark-mode) .notif-date,
body.light-mode .notif-date {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

body:not(.dark-mode) .notif-action-link,
body.light-mode .notif-action-link {
    color: #0066ff !important;
    -webkit-text-fill-color: #0066ff !important;
}

body:not(.dark-mode) .notification-footer,
body.light-mode .notification-footer,
[data-theme="light"] .notification-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

body:not(.dark-mode) .notification-time-wrap,
body.light-mode .notification-time-wrap {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

body:not(.dark-mode) .notification-time-wrap strong,
body.light-mode .notification-time-wrap strong {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

body:not(.dark-mode) .notification-refresh,
body:not(.dark-mode) #notificationRefreshBtn,
body.light-mode .notification-refresh,
body.light-mode #notificationRefreshBtn {
    background: #e0f2fe !important;
    border: 1px solid #bae6fd !important;
    color: #0284c7 !important;
    -webkit-text-fill-color: #0284c7 !important;
}

body:not(.dark-mode) .notification-refresh:hover,
body:not(.dark-mode) #notificationRefreshBtn:hover,
body.light-mode .notification-refresh:hover {
    background: #bae6fd !important;
    border-color: #0284c7 !important;
    color: #0369a1 !important;
    -webkit-text-fill-color: #0369a1 !important;
}

/* ==========================================================================
   6. RESPONSIVE COMPACT & MICRO ADAPTATIONS (<= 480px, <= 250px)
   ========================================================================== */
@media (max-width: 480px) {
    .main-nav {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
    }

    .header-actions-tools-row {
        gap: 0.55rem !important;
    }

    .header-actions-tools-row .header-action-btn,
    .header-actions-tools-row .dark-mode-toggle,
    .header-actions-tools-row .notification-toggle,
    .header-actions-tools-row .header-logout-btn,
    .header-actions-tools-row .header-login-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: 0.95rem !important;
    }

    .header-actions-tools-row .header-logout-btn .logout-icon-svg svg {
        width: 17px !important;
        height: 17px !important;
    }

    .notification-panel,
    #notificationPanel {
        position: fixed !important;
        top: 75px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
    }
}

@media (max-width: 250px) {
    .header-actions-tools-row {
        gap: 0.25rem !important;
    }

    .header-actions-tools-row .header-action-btn,
    .header-actions-tools-row .dark-mode-toggle,
    .header-actions-tools-row .notification-toggle,
    .header-actions-tools-row .header-logout-btn,
    .header-actions-tools-row .header-login-btn {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        font-size: 0.75rem !important;
    }

    .header-actions-tools-row .header-logout-btn .logout-icon-svg svg {
        width: 13px !important;
        height: 13px !important;
    }

    .notification-panel,
    #notificationPanel {
        top: 160px !important;
        left: 4px !important;
        right: 4px !important;
        max-width: calc(100vw - 8px) !important;
        border-radius: 10px !important;
    }

    .notification-header {
        padding: 8px 10px !important;
    }

    .notification-header-title {
        font-size: 0.78rem !important;
    }

    .notification-close,
    #notificationCloseBtn {
        width: 26px !important;
        height: 26px !important;
    }

    .notification-item {
        padding: 8px !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
}