/**************************************************/
/*      STYLES DE BASE POUR LES HEADERS           */
/**************************************************/
  /* Version Desktop cachée sur mobile */
.desktopOnly {
    display: none;
}
  
  /* Version Mobile cachée sur desktop */
.mobileOnly {
    display: none;
}
  
/**************************************************/
/*                VERSION MOBILE                  */
/**************************************************/
@media (max-width: 768px) {
    /* On masque la version desktop */
    .desktopOnly {
        display: none;
    }
    /* On affiche la version mobile */
    .mobileOnly {
        display: block;
        /* 
            Si tu veux qu'il reste toujours visible en haut, même en scrollant :
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 9999; 
        */
    }

    /* La bande en haut contenant le burger */
    .banner-burger {
        position:fixed;
        display: flex;
        justify-content: space-between; /* ou "space-around", selon ton besoin */
        align-items: center;
        height: 60px;           /* Hauteur du header mobile */
        padding: 0 15px;
        padding-left:100%;
        right: 0;
        background-color: #333;
    }

    /* Le bouton burger */
    .burger-menu {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .burger-menu span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: #fff;
        margin: 4px 0;
    }

    /* Le nav est masqué par défaut (menu replié) */
    .mobileOnly nav {
        display: none;
        position: absolute; 
        top: 60px;          /* Juste sous la banner-burger */
        left: 0;
        width: 100%;
        background-color: #333;
    }

    /* Quand la classe "active" est ajoutée au <nav>, le menu se déploie */
    .mobileOnly nav.active {
        display: block;
        position:fixed;
    }

    /* Liste en colonne + centrée */
    .mobileOnly nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;      /* Pour centrer horizontalement la colonne */
        justify-content: center;  /* Optionnel, selon le design */
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Chaque lien prend la largeur totale, bordure en bas pour séparer */
    .mobileOnly nav ul li {
        width: 100%;                   /* Pour occuper toute la largeur du nav */
        /* border-bottom: 1px solid #444; Séparation visuelle */
    }

    /* Liens centrés horizontalement */
    .mobileOnly nav ul li a {
        display: block;
        width: 100%;             /* Pour que le texte soit cliquable sur toute la ligne */
        padding: 10px 15px;
        color: #fff;
        text-align: center;      /* Centre le texte dans le bloc */
        text-decoration: none;
    }
}


/**************************************************/
/*                VERSION DESKTOP                 */
/**************************************************/
@media (min-width: 769px) {
    /* On affiche la version desktop, on cache la mobile */
    .desktopOnly {
        display: block;
        /* Si tu veux un header fixe sur desktop aussi :
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 9999;
        */
    }

    .desktopOnly nav {
        /* Pour centrer horizontalement le menu */
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;       /* Hauteur du header desktop */
        background-color: #333;
    }

    .desktopOnly nav ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    nav.active ul{
        display: flex;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .desktopOnly nav ul li {
        margin: 0 15px;
    }

    .desktopOnly nav ul li a {
        color: #fff;
        text-decoration: none;
        padding: 10px;
    }

    /* Exemple de style pour le lien actif */
    .desktopOnly nav ul li a.active {
        color: red;
    }
}