/*------------------- Styles par défaut (Mobile First) -----------------------------*/

/* Le menu desktop est caché par défaut */
.menuSansBurger {
    display: none;
}

/* Le menu burger est affiché par défaut */
.menu {
    display: block;
    justify-content: center;
    align-items: center;
    margin-right: 10px; 
}


/* Sidenav menu par défaut (caché à droite) */
.sidenav {
    height: 80%;
    width: 210px;
    border-radius: 20px;
    position: fixed;
    z-index: 1;
    top: 0;
    right: -100%;
    border: solid;
    padding-top: 60px;
    transition: right 0.5s ease;
    box-shadow: #000 5px 3px 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #e0c9d6; 
}
.sidenav button{
   margin-bottom: 15px;
}

/* Close btn */
.sidenav .close {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
}

.burger-icon span {
    display: block;
    width: 35px;
    height: 5px;
    background-color: rgb(251, 251, 251);
    margin: 6px 0;
}
.sidenav.active {
    right: 0;
}


/*------------------- mode desktop -----------------------------*/
@media (min-width: 1300px) {
    
    /* AFFICHAGE DU MENU DESKTOP ET MASQUAGE DU MENU MOBILE */
    header .menuSansBurger {
        display: flex !important; 
        flex-grow: 1; 
        justify-content: center; 
    }
    header .menu {
        display: none !important; 
    }

    /* Le bouton 'A propos' est à nouveau aligné avec le menu horizontal */
    .header-controls {
        gap: 15px;
    }

    #openBtn {
        display: none; /* Masqué sur desktop */
    }
}

/*------------------- mode smart (Mobile) -----------------------------*/
@media (max-width: 800px) {
    
    /* MASQUAGE DU MENU DESKTOP ET AFFICHAGE DU MENU MOBILE */
    header .menuSansBurger {
        display: none !important; 
    }
    
    header .menu {
        display: block !important; 
    }

    /* FIX: Réduire la hauteur du header sur mobile */
    header {
        height: 70px !important; 
        padding: 0 10px !important;
    }

    /* FIX CRITIQUE : Ajuster la taille du logo sur mobile */
    header .Img1 img {
        width: 80px !important; 
        height: 45px !important;
    }
    
    /* Rends les conteneurs principaux plus larges sur mobile */
    main, .titre {
        width: 80vw !important; 
        padding: 10px !important; /* Réduire le padding de la section titre */
    }
    
    /* Réduit la taille des boutons du menu burger (sidenav) */
    .sidenav .Acc1c, .sidenav .Acc1d {
        height: 60px;
        width: 60px;
        font-size: 10px;
    }
    
    
    /* Réduit l'espace entre les éléments de la grille */
    .main1 {
        gap: 10px; 
    }
    .ppo {
        gap: 10px;
    }

    /* Ajustement du pied de page */
    .pied {
        flex-direction: column; 
        gap: 5px; 
    }
}