/* ========================================================================== */
/* 1. NAVIGATION DESKTOP                                                      */
/* ========================================================================== */

/* Barre de navigation principale, collée en haut pendant le scroll. */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 4rem;
    background-color: white;
}

/* Centre la liste de navigation. */
nav ul {
    margin: auto;
}

/* Place les éléments de navigation sur une même ligne. */
nav ul li {
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
}

/* Style des liens du menu. */
nav ul li a {
    position: relative;
    top: 8px;
    /* Ajustement visuel lié à la police décorative. */
    font-family: 'Aboreto' !important;
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none !important;
}

/* Réduit légèrement le menu quand l'écran devient trop étroit pour le desktop. */
@media (min-width: 816px) and (max-width: 1140px) {
    nav ul li a {
        font-size: 0.9rem !important;
    }
}

/* ========================================================================== */
/* 2. BOUTON BURGER                                                           */
/* ========================================================================== */

/* Checkbox technique qui mémorise l'état ouvert/fermé du menu mobile. */
#menu-toggle {
    display: none;
}

/* Bouton burger caché sur desktop. */
.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    margin-left: auto;
    padding: 1rem;
    cursor: pointer;
}

/* Les trois barres du bouton burger. */
.burger span {
    display: block;
    width: 28px;
    height: 3px;
    background: black;
}

/* ========================================================================== */
/* 3. NAVIGATION MOBILE                                                       */
/* ========================================================================== */

@media (max-width: 815px) {

    /* La barre devient horizontale et centre le burger. */
    nav {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        min-height: 4rem;
    }

    /* Affiche le bouton burger. */
    .burger {
        display: flex;
        margin: 0 auto;
    }

    /* Rend les calculs de largeur prévisibles dans tout le menu mobile. */
    nav ul.nav-links,
    nav ul.nav-links li,
    nav ul.nav-links li a {
        box-sizing: border-box;
    }

    /* Menu déroulant fermé par défaut. */
    nav ul.nav-links {
        position: absolute;
        top: 4rem;
        left: 0;
        z-index: 99;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin: 0 !important;
        padding: 0 !important;
        background: white;
        list-style: none;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }

    /* Ouvre le menu quand le checkbox caché est coché. */
    #menu-toggle:checked+.burger+.nav-links {
        max-height: 100vh !important;
        padding: 1rem 0 !important;
    }

    /* Chaque entrée occupe toute la largeur. */
    nav ul.nav-links li {
        width: 100%;
        margin-left: 0 !important;
        text-align: center;
    }

    /* Centre le texte de chaque lien et annule le décalage desktop. */
    nav ul.nav-links li a {
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
}