/* CSS valable sur Mobile & Desktop */
.hero-logo {
    position: relative;
    width: 130px;
    transition: transform 0.3s ease;
    display: block;
    z-index: 20000;
}

.hero-logo:hover {
    transform: scale(1.05);
    cursor: pointer;
}


@media screen and (max-width: 768px) {

    .hero-logo {
        padding: 1rem;
    }

    .hero-header {
        position: relative;
        flex-direction: column;
        align-items: center;
        padding: 0rem;
        z-index: 2;
        display: flex;
    }

    /* Menu BURGER */
    .hero-nav {
        position: fixed;  /* Fixe le menu en haut de l'écran */
        top: 0;
        width: 100%;      /* Prend toute la largeur de l'écran */
        height: 100vh;    /* Prend toute la hauteur de la fenêtre */
        background-color: #000000;
        z-index: 1000;    /* Placer le menu au-dessus des autres éléments */
        gap: 1rem;
        display: flex;    /* Utilisation de flexbox pour le menu */
        flex-direction: column; /* Aligne les éléments verticalement */
        justify-content:center; /* Aligne les éléments du menu en haut */
        transition: top 0.8s ease, opacity 0.8s ease;
        transform: translateX(-100%);  /* Menu caché à gauche */
    }

    .hero-nav a {
        font-size: 2rem;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: bolder;
        text-align: center;
        padding: 20px;
        border-bottom: 1px solid #fff; /* Séparation entre les liens */
    }

    .hero-nav a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 0;
        transition: width 0.7s ease;
    }

    .hero-nav a:hover::after {
        width: 100%;
    }

    /* Bouton BURGER */
    .burger {
        display: block; /* Affiche le burger en mode mobile */
        position: absolute;
        font-size: 42px;
        top: 50px;
        left: 40px;
        color: rgb(0, 0, 0);
    }

    /* Croix pour fermer le menu BURGER */
    .close-menu {
        font-size: 40px;
        color: white;
        position: absolute;
        top: 50px;  /* Décale la croix de 20px du haut */
        left: 40px; /* Décale la croix de 20px de la gauche */
        z-index: 1050; /* Placer la croix au-dessus des autres éléments */
    }

    /* Styles des liens de navigation */
    .nav-white {
        color: white;
    }

    .nav-red {
        color: #ff0000;
    }

}


@media screen and (min-width: 769px) {

    .hero-header {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 4rem;
    }   

    /* Barre de navigation */
    .hero-nav {
        display: flex;  /* Affiche les liens du menu horizontalement */
        justify-content: flex-end;  /* Aligne les liens à droite */
        gap: 3rem;
        z-index: 2;
        position: relative;  /* Pour éviter les problèmes d'affichage */
    }

    .hero-nav a {
        position: relative;
        text-decoration: none;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 1.2rem;
        padding-bottom: 4px;
        transition: color 0.2s ease;
        letter-spacing: 2px;
    }

    .hero-nav a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 0;
        transition: width 0.7s ease;
    }

    .hero-nav a:hover::after {
        width: 100%;
    }

    /* Styles des liens de navigation */
    .nav-white {
        color: white;
    }

    .nav-red {
        color: #ff0000;
    }

    .nav-white::after {
        background-color: rgb(255, 0, 0);
    }

    .nav-red::after {
        background-color: #ffffff;
    }

    /* Cacher le burger et la croix en mode desktop */
    .burger {
        display: none; /* Cacher le burger en mode PC */
    }

    .close-menu {
        display: none; /* Cacher la croix en mode PC */
    }
}