/* Solution simple : tailles optimales du 1714px appliquées à tous les écrans */

/* Écrans très larges (1200px et plus) */
@media (min-width: 1200px) {
    .header .primary-header-inner .header-menu-wrap ul li {
        margin: 0 22px;
    }
    
    .header .primary-header-inner .header-menu-wrap ul li a {
        font-size: 14px;
        padding: 26px 0;
    }
}

/* Écrans larges (992px - 1199px) - NOUVELLE PLAGE */
@media (min-width: 992px) and (max-width: 1199px) {
    .header .primary-header-inner .header-menu-wrap ul li {
        margin: 0 18px; /* Réduit pour s'adapter à l'espace */
    }
    
    .header .primary-header-inner .header-menu-wrap ul li a {
        font-size: 13px; /* Taille réduite pour cette plage */
        padding: 24px 0;
    }
    
    /* Ajuster le logo pour cette plage */
    .header .primary-header-inner .header-logo img {
        max-width: 120px;
        height: auto;
    }
    
    /* Ajuster le bouton pour cette plage */
    .header .primary-header-inner .header-right-wrap .header-right .bz-primary-btn {
        padding: 11px 16px;
        font-size: 13px;
    }
}

/* Écrans moyens (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .header .primary-header-inner .header-menu-wrap ul li {
        margin: 0 15px;
    }
    
    .header .primary-header-inner .header-menu-wrap ul li a {
        font-size: 13px;
        padding: 22px 0;
    }
}

/* Écrans petits (moins de 768px) */
@media (max-width: 767px) {
    .header .primary-header-inner .header-menu-wrap ul li {
        margin: 0 10px;
    }
    
    .header .primary-header-inner .header-menu-wrap ul li a {
        font-size: 12px;
        padding: 20px 0;
    }
}

/* Masquer le menu principal sur mobile et afficher le menu hamburger */
@media (max-width: 991px) {
    .header .primary-header-inner .header-menu-wrap {
        display: none !important;
    }
    
    .header .primary-header-inner .header-right-wrap .sidebar-icon-2 {
        display: block !important;
    }
}

/* Afficher le menu principal sur desktop */
@media (min-width: 992px) {
    .header .primary-header-inner .header-menu-wrap {
        display: flex !important;
    }
    
    .header .primary-header-inner .header-right-wrap .sidebar-icon-2 {
        display: none !important;
    }
}

/* ===== RESTAURATION DU MENU BURGER RESPONSIVE ===== */

/* S'assurer que le menu burger fonctionne */
@media (max-width: 991px) {
    /* S'assurer que le bouton hamburger est visible et fonctionnel */
    .header .primary-header-inner .header-right-wrap .header-right .sidebar-icon-2 .sidebar-trigger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: transparent;
        border: none;
        cursor: pointer;
        position: relative;
        z-index: 1000;
    }
    
    .header .primary-header-inner .header-right-wrap .header-right .sidebar-icon-2 .sidebar-trigger span {
        display: block !important;
        width: 25px;
        height: 3px;
        background-color: #333;
        margin: 3px 0;
        transition: 0.3s;
    }
    
    /* Animation du bouton hamburger au hover */
    .header .primary-header-inner .header-right-wrap .header-right .sidebar-icon-2 .sidebar-trigger:hover span {
        background-color: var(--bz-color-theme-primary);
    }
}

/* ===== S'ASSURER QUE LE SIDEBAR FONCTIONNE ===== */

/* S'assurer que le sidebar est visible quand ouvert */
#sidebar-area {
    z-index: 9999;
}

/* S'assurer que le contenu du sidebar est visible */
.side-menu-wrap {
    display: block !important;
}

/* S'assurer que les liens du sidebar sont accessibles */
.side-menu-wrap ul {
    display: block !important;
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-menu-wrap ul li {
    display: block !important;
    margin: 0;
    padding: 0;
}

.side-menu-wrap ul li a {
    display: block !important;
    padding: 15px 20px;
    color: var(--bz-color-heading-secondary);
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.side-menu-wrap ul li a:hover {
    background-color: var(--bz-color-theme-primary);
    color: white;
}

/* ===== RESTAURATION DU COMPORTEMENT ORIGINAL DU SOUS-MENU ===== */

/* Amélioration du sous-menu - comportement original */
.header .primary-header-inner .header-menu-wrap ul li.menu-item-has-children > a i {
    margin-left: 5px;
    font-size: 10px;
    transition: transform 0.3s ease;
}

.header .primary-header-inner .header-menu-wrap ul li.menu-item-has-children:hover > a i {
    transform: rotate(180deg);
}

/* ===== Ajustements pour le logo ===== */
@media (max-width: 1200px) {
    .header .primary-header-inner .header-logo img {
        max-width: 130px;
        height: auto;
    }
}

@media (max-width: 992px) {
    .header .primary-header-inner .header-logo img {
        max-width: 110px;
        height: auto;
    }
}

@media (max-width: 768px) {
    .header .primary-header-inner .header-logo img {
        max-width: 90px;
        height: auto;
    }
}

/* ===== Ajustements pour le bouton "Ouvrir un compte" ===== */
@media (max-width: 1200px) {
    .header .primary-header-inner .header-right-wrap .header-right .bz-primary-btn {
        padding: 12px 18px;
        font-size: 15px;
    }
}

@media (max-width: 992px) {
    .header .primary-header-inner .header-right-wrap .header-right .bz-primary-btn {
        padding: 10px 15px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .header .primary-header-inner .header-right-wrap .header-right .bz-primary-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ===== Amélioration de l'espacement général ===== */
.header .primary-header-inner .inner-left {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

@media (max-width: 1200px) {
    .header .primary-header-inner .inner-left {
        gap: 20px;
    }
}

@media (max-width: 992px) {
    .header .primary-header-inner .inner-left {
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .header .primary-header-inner .inner-left {
        gap: 12px;
    }
}

/* ===== GESTION DES DÉBORDEMENTS ===== */

/* Container responsive */
.header .primary-header-inner {
    max-width: 100%;
    overflow: visible; /* Permet les sous-menus */
}

/* Flexbox pour éviter les débordements */
.header .primary-header-inner .inner-left {
    flex: 1;
    min-width: 0;
}

.header .primary-header-inner .header-menu-wrap {
    flex: 1;
    min-width: 0;
    overflow: visible; /* Permet les sous-menus */
}

.header .primary-header-inner .header-menu-wrap ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

/* ===== FALLBACK POUR ÉCRANS TRÈS ÉTROITS ===== */

@media (max-width: 480px) {
    .header .primary-header-inner .header-menu-wrap ul li {
        margin: 0 6px;
    }
    
    .header .primary-header-inner .header-menu-wrap ul li a {
        font-size: 13px;
        padding: 16px 0;
    }
    
    .header .primary-header-inner .header-logo img {
        max-width: 80px;
    }
    
    .header .primary-header-inner .header-right-wrap .header-right .bz-primary-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* ===== ANIMATIONS ET TRANSITIONS ===== */

.header .primary-header-inner .header-menu-wrap ul li a {
    transition: all 0.3s ease;
}

.header .primary-header-inner .header-menu-wrap ul li:hover a {
    color: var(--bz-color-theme-primary);
}

/* Correction pour les sous-menus - couleur noire par défaut */
.header .primary-header-inner .header-menu-wrap ul li li a {
    color: #000000 !important;
}

/* Empêcher le hover du menu parent de s'appliquer aux sous-menus */
.header .primary-header-inner .header-menu-wrap ul li:hover > ul li a {
    color: #000000 !important;
}

/* Permettre le hover blanc sur les sous-menus individuels */
.header .primary-header-inner .header-menu-wrap ul li li:hover a {
    color: var(--bz-color-common-white) !important;
}

/* Règle très spécifique pour forcer le hover blanc */
.header .primary-header-inner .header-menu-wrap ul li.menu-item-has-children:hover ul li:hover a {
    color: #ffffff !important;
}

/* ===== FORCER L'AFFICHAGE DU BOUTON HAMBURGER ===== */

/* S'assurer que le bouton hamburger est toujours visible sur mobile */
.sidebar-icon-2 {
    position: relative;
    z-index: 1000;
}

.sidebar-trigger {
    position: relative;
    z-index: 1001;
}

/* Styles de fallback pour le bouton hamburger */
@media (max-width: 991px) {
    .sidebar-icon-2 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar-trigger {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar-trigger span {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ===== PRÉSERVATION DE LA LISIBILITÉ ===== */

/* S'assurer que les textes restent lisibles */
.header .primary-header-inner .header-menu-wrap ul li a {
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Éviter les textes trop petits */
@media (max-width: 480px) {
    .header .primary-header-inner .header-menu-wrap ul li a {
        font-size: 13px !important;
        letter-spacing: 0.3px;
    }
}