/* ==========================================================================
   HEADER GLOBAL
   ========================================================================== */
header {
    min-height: 80px;
    width: 100%;
    background-color: #333333;
    display: flex;
    align-items: center;
    border-bottom: greenyellow 1px solid;
    position: relative; /* Important pour le positionnement du menu mobile */
    z-index: 1000;
}

.navbar2 {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
}

.navlinks {
    display: flex;
    width: 80%;
    justify-content: space-around;
    transition: all 0.5s ease;
}

.navlinks a {
    font-family: "Orbitron", sans-serif;
    text-decoration: none;
    color: white;
    text-shadow: black 2px 3px 3px;
    font-size: 0.9rem;
}

.navlinks a:hover {
    text-decoration: underline 1px solid #adff2f;
    color: greenyellow;
}

/* ==========================================================================
   BOUTON BURGER (Caché par défaut)
   ========================================================================== */
.btnBurger {
    display: none;
    cursor: pointer;
    position: absolute;
    top: 24px; /* Centré verticalement dans les 80px */
    right: 20px;
    z-index: 1001; /* Au dessus du menu */
}

header img {
    height: 32px;
    width: 32px;
}

/* ==========================================================================
   RESPONSIVE (Max 900px)
   ========================================================================== */
@media screen and (max-width: 900px) {
    
    .btnBurger {
        display: block; /* On affiche le burger */
    }

    .navlinks {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        /* Positionnement fixe pour couvrir l'écran */
        position: fixed; 
        top: 80px; /* Commence juste après le header */
        left: 0;
        width: 100%;
        height: calc(100vh - 80px); /* Toute la hauteur moins le header */
        
        background-color: #333333;
        background-image: url('image/bg3.webp');
        background-position: center;
        background-size: cover;
        
        
        /* Effet de glisse */
        transform: translateX(-100%); 
        transition: transform 0.5s ease-in-out;
        margin-left: 0; /* On reset ton margin-left */
    }

    /* Quand la classe .mobile-menu est ajoutée via JS */
    .navlinks.mobile-menu {
        transform: translateX(0); /* Le menu revient à sa place */
    }

    .navlinks a {
        padding: 20px 0;
        font-size: 1.2rem;
        width: 100%;
        text-align: center;
       
    }
    @media screen and (max-width: 900px) {
    
    .btnBurger {
        display: block;
        z-index: 1001;
    }

    .navlinks {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px; /* Espace entre les liens */
        
        position: fixed; 
        top: 80px; 
        left: 0;
        width: 100%;
        height: calc(100vh - 80px); 
        
        /* --- LE FOND COHÉRENT (Comme tes boutons/contact) --- */
        /* On utilise le gris sombre à 85% d'opacité */
        background-color: rgba(51, 51, 51, 0.85); 
        
        /* L'effet de flou sur le fond BG3 */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        
        /* La bordure greenyellow subtile sur le côté ou en haut */
        border-top: 1px solid rgba(173, 255, 47, 0.3);

        /* Animation de glisse */
        transform: translateX(-100%); 
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* État ouvert */
    .navlinks.mobile-menu {
        transform: translateX(0);
    }

    /* --- STYLE DES LIENS (Pour ressembler aux boutons CTA) --- */
    .navlinks a {
        padding: 15px 30px;
        font-size: 1.1rem;
        width: 80%; /* Largeur comme tes boutons de contact */
        max-width: 300px;
        text-align: center;
        border: 1px solid rgba(173, 255, 47, 0.5); /* Bordure comme les CTA */
        border-radius: 5px;
        color: greenyellow; /* Texte vert comme les CTA */
        background: rgba(173, 255, 47, 0.05);
        transition: all 0.3s ease;
    }

    /* Effet Hover sur les liens du menu (Même que tes CTA) */
    .navlinks a:hover {
        background-color: greenyellow;
        color: #333 !important;
        box-shadow: 0 0 15px rgba(173, 255, 47, 0.5);
        text-decoration: none; /* On enlève le soulignement pour le style bouton */
    }
}
}