/* Menu burger (mobile) : logo + bouton, les liens passent dans un panneau plein écran.
   Activé uniquement quand js/menu.js a ajouté la classe .has-menu sur la nav :
   sans JavaScript, la nav classique reste affichée. */

.menu-toggle{ display: none; }

@media (max-width: 600px){
    nav.has-menu{
        flex-wrap: nowrap;
    }
    nav.has-menu div.left-container-nav p{ display: none; }
    nav.has-menu div.left-container-nav,
    nav.has-menu .menu-toggle{
        position: relative;
        z-index: 60;
    }

    /* Bouton burger : trois traits qui deviennent une croix */
    nav.has-menu .menu-toggle{
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        margin-right: -10px;
        padding: 0;
        border: 0;
        background: none;
        color: #121212;
        cursor: inherit;
    }
    .menu-toggle-bar{
        display: block;
        width: 24px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
    }
    nav.is-open .menu-toggle-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
    nav.is-open .menu-toggle-bar:nth-child(2){ opacity: 0; transform: scaleX(.4); }
    nav.is-open .menu-toggle-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

    /* Panneau plein écran : fondu + léger glissement vers le bas */
    nav.has-menu div.right-container-nav{
        position: fixed;
        inset: 0;
        z-index: 50;
        display: flex;
        flex-direction: column;
        padding: 120px clamp(16px, 4vw, 40px) 40px;
        background-color: var(--page-bg, #FFFBF4);
        overflow-y: auto;
        overscroll-behavior: contain;

        visibility: hidden;
        opacity: 0;
        transform: translateY(-16px);
        transition:
            opacity .3s ease,
            transform .4s cubic-bezier(.22, 1, .36, 1),
            visibility 0s linear .4s;
    }
    nav.is-open div.right-container-nav{
        visibility: visible;
        opacity: 1;
        transform: none;
        transition:
            opacity .35s ease,
            transform .5s cubic-bezier(.22, 1, .36, 1),
            visibility 0s;
    }

    nav.has-menu div.right-container-nav ul{
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    nav.has-menu div.right-container-nav ul li a:not(.lang-switch){
        display: inline-flex;
        align-items: center;
        min-height: 56px;
        font-size: clamp(40px, 12vw, 56px);
        font-weight: 300;
        line-height: 1.1;
    }
    /* Sélecteur de langue en bas du panneau */
    nav.has-menu div.right-container-nav ul li:last-child{
        margin-top: auto;
    }
    nav.has-menu div.right-container-nav ul li a.lang-switch{
        min-height: 0;
        padding: 10px 18px;
        font-size: 16px;
    }

    /* Les liens suivent le panneau avec un petit décalage */
    nav.has-menu div.right-container-nav ul li{
        opacity: 0;
        transform: translateY(12px);
        transition: opacity .2s ease, transform .3s ease;
    }
    nav.is-open div.right-container-nav ul li{
        opacity: 1;
        transform: none;
        transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
    }
    nav.is-open div.right-container-nav ul li:nth-child(1){ transition-delay: .08s; }
    nav.is-open div.right-container-nav ul li:nth-child(2){ transition-delay: .14s; }
    nav.is-open div.right-container-nav ul li:nth-child(3){ transition-delay: .2s; }

    /* Pas d'animation tant que le menu n'est pas prêt (évite un flash au chargement) */
    nav.has-menu:not(.menu-ready) div.right-container-nav,
    nav.has-menu:not(.menu-ready) div.right-container-nav *{
        transition: none !important;
    }

    /* Page figée derrière le panneau ouvert */
    body.menu-open{ overflow: hidden; }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce){
    .menu-toggle-bar,
    nav.has-menu div.right-container-nav,
    nav.has-menu div.right-container-nav ul li{
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        transform: none !important;
    }
}