/* =========================================
   HEADER MODULAIRE - STYLE
   ========================================= */

.header-fixed {
    background-color: #ffffff; 
    height: 110px;
    display: flex; align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: fixed; top: 0; width: 100%; z-index: 1000;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

.header-container { 
    width: 96%; max-width: 1600px; margin: 0 auto; 
    display: flex; justify-content: space-between; align-items: center; 
}

/* =========================================
   LA CORRECTION EST ICI : ALIGNEMENT DES MENUS
   ========================================= */
.nav-block { 
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; /* <-- MAGIE : On centre pour combler le vide énorme autour du logo */
    gap: 45px; /* <-- On a augmenté de 35px à 45px pour bien "aérer" l'espace entre les mots */
}

/* Liens de navigation */
.nav-item { 
    text-decoration: none; display: flex; flex-direction: column; 
    cursor: pointer; position: relative; 
}
.nav-item .num { 
    font-size: 10px; font-weight: 800; margin-bottom: 4px; 
    color: #8414e1; 
    display: inline-block; 
}
.nav-item .txt { 
    color: #0F172A; font-size: 11px; font-weight: 900; 
    text-transform: uppercase; letter-spacing: 0.5px; 
    transition: color 0.3s ease; 
}
.nav-item:hover .txt, .nav-item.active .txt { color: #C7D629; }

/* =========================================
   LOGO (AGRANDI ET TEXTE LISSÉ)
   ========================================= */
.logo-block { 
    display: flex; 
    align-items: center; 
    justify-content: center;
    width: 250px; 
    height: 110px; /* On bloque strictement à la hauteur du header */
    overflow: hidden; /* Empêche le cadre de l'image de déborder en bas */
}

.logo-block a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.logo-block img {
    height: 100% !important; 
    width: auto !important;
    object-fit: contain;
    transform: scale(2); /* Un peu plus grand pour bien remplir l'espace */
    mix-blend-mode: multiply; /* Supprime le fond blanc de l'image */
    transition: transform 0.3s ease;
    /* Plus d'image-rendering pour laisser les lettres lisses */
}

.logo-block a:hover img {
    transform: scale(1.9); /* Petit effet fluide au survol */
}

/* =========================================
   LANGUE & DROPDOWNS
   ========================================= */
.lang-btn { 
    width: 40px; height: 40px; 
    background: linear-gradient(135deg, #a13bf7 0%, #6a11cb 100%); 
    border-radius: 50%; color: white; font-size: 9px; font-weight: 800; 
    display: flex; align-items: center; justify-content: center; 
    margin-left: 15px; cursor: pointer; transition: transform 0.2s; 
    box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
}
.lang-btn:hover { transform: scale(1.1); }

.dropdown-container { position: relative; }
.dropdown { 
    display: none; position: absolute; top: 100%; left: -10px; 
    background: white; box-shadow: 0 10px 30px rgba(0,0,0,0.15); 
    list-style: none; min-width: 180px; padding: 10px 0; 
    border-radius: 8px; margin-top: 15px; border: 1px solid #eee; 
}
.dropdown-container:hover .dropdown { display: block; }
.dropdown li a { 
    display: block; padding: 10px 20px; text-decoration: none; 
    color: #0F172A; font-size: 12px; font-weight: 600; transition: 0.2s; 
}
.dropdown li a:hover { background: #f8f9fa; color: #6a11cb; padding-left: 25px; }


/* =========================================
   RESPONSIVE / MOBILE MENU
   ========================================= */
.burger-menu { display: none; cursor: pointer; z-index: 1100; }
.mobile-nav-overlay { display: none; }

@media (max-width: 1024px) {
    .desktop-only { display: none !important; }
    
    .header-container { 
        justify-content: space-between; 
        position: relative; /* TRÈS IMPORTANT pour positionner la langue et le burger */
    }
    
    .logo-block { width: auto; justify-content: flex-start; }

    /* =========================================
       RÉAPPARITION DU BOUTON DE LANGUE (MOBILE)
       ========================================= */
    .dropdown-container {
        display: block !important; /* Force l'affichage si caché */
        position: absolute;
        right: 45px; /* On le place juste à gauche du burger menu */
        top: 50%;
        transform: translateY(-50%);
        z-index: 1100;
    }

    .lang-btn {
        margin-left: 0;
        width: 36px;  /* Légèrement plus petit pour s'adapter au mobile */
        height: 36px;
        font-size: 9px;
    }

    /* Le menu déroulant des langues s'ouvre vers la gauche pour ne pas déborder de l'écran */
    .dropdown {
        left: auto;
        right: 0;
        min-width: 150px;
    }
    /* ========================================= */

    .burger-menu { 
        display: block; 
        position: absolute; 
        right: 0; 
        top: 50%;
        transform: translateY(-50%);
    }
    
    .bar1, .bar2, .bar3 {
        width: 30px; height: 3px; 
        background-color: #0F172A; 
        margin: 6px 0; 
        transition: 0.4s;
        border-radius: 3px;
    }

    .burger-menu.open .bar1 { transform: rotate(-45deg) translate(-5px, 6px); background: #8414e1; } 
    .burger-menu.open .bar2 { opacity: 0; }
    .burger-menu.open .bar3 { transform: rotate(45deg) translate(-5px, -6px); background: #8414e1; } 

    .mobile-nav-overlay {
        display: flex !important; 
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        z-index: 1050;
        transform: translateY(-100%); 
        transition: transform 0.4s ease-in-out;
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
    }

    .mobile-nav-overlay.active {
        transform: translateY(0); 
    }

    .mobile-nav-content {
        display: flex; flex-direction: column; gap: 30px; text-align: center;
    }

    .mobile-nav-content a {
        text-decoration: none;
        font-size: 22px; font-weight: 800;
        color: #0F172A; text-transform: uppercase;
        transition: 0.3s;
    }
    
    .mobile-nav-content a:hover { color: #C7D629; letter-spacing: 2px; }
}