/* ==========================================================
   menu.css — panneau de navigation plein ecran
   Le menu est toujours present dans le DOM ; il est masque par .is-hidden.
   On ne le detruit pas et on ne le reconstruit pas : c'est ce qui permet la
   transition en fondu et flou dans les deux sens.
   
   Attention au bouton : son etat pointer-events est pilote depuis menu.js
   pendant les transitions de page (lockButton / unlockButton). Ne pas ajouter
   ici de regle pointer-events sur .menu-button, elle entrerait en conflit avec
   ce verrou et le bouton pourrait rester bloque.
   ========================================================== */

/* ==========================================================
   BOUTON D'OUVERTURE
   ========================================================== */
.menu-button {
    z-index: 11;
    position: fixed;
    right: var(--page-padding);
    top: calc(var(--page-padding) / 1.5);
    width: 24px;
    height: 24px;
    cursor: pointer;
    transform: scale(1);
    transition: transform 0.200s ease;

    /* Cadre natif au toucher.
       main.css neutralise deja le tap highlight sur les <a>, mais
       .menu-button est un <div> : il n'etait pas couvert, d'ou le
       rectangle bleu au tap sur Android.
       -webkit-touch-callout supprime en plus le menu contextuel
       d'iOS a l'appui long. */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Sur un ecran tactile, :hover reste colle apres le tap : le bouton
   resterait agrandi indefiniment. `.is-active` est posee au toucher
   par le meme ecouteur delegue que .btn-gradient dans main.js, et
   retiree au relachement. Meme motif, meme comportement. */
.menu-button:hover,
.menu-button.is-active {
    transform: scale(1.2);
}

/* ==========================================================
   ETATS MASQUE ET VISIBLE
   Deux couches distinctes, volontairement dissociees :
   
     nav     le fond opaque et le flou d'arriere-plan   0.3s / 0.5s
     .menu   le contenu, qui part en blur(15px)         0.8s
   
   Le contenu s'efface donc plus lentement que le fond : sans ce decalage,
   l'ensemble tomberait d'un bloc comme un rideau.
   
   visibility accompagne systematiquement opacity pour que l'element sorte
   reellement de l'ordre de tabulation une fois masque — un element a
   opacity:0 reste focusable au clavier.
   ========================================================== */
nav.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(5, 5, 5, 0);
}

.menu.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    filter: blur(15px);
}

.menu {
    transition: filter 0.8s ease-in-out, opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
    opacity: 1;
    visibility: visible;
    filter: blur(0px);
}

nav {
    z-index: 10;
    position: fixed;
    top: 0;
    background: rgba(5, 5, 5, 0.95);
    backdrop-filter: blur(25px);
    width: 100vw;
    /* dvh : sans cela le fond du menu s'arrete sous la barre d'url.
       Voir la note detaillee dans main.css. */
    height: 100vh;
    height: 100dvh;

    transition: background 0.5s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    opacity: 1;
    visibility: visible;
}

.menu {
    position: fixed;
    width: calc(100vw - 2 * var(--page-padding));
    /* dvh indispensable ici : .menu-bottom est ancre par `bottom: 0`
       DANS ce conteneur. En vh, les deux liens du bas — « Victor » et
       « Contact » — se retrouvaient sous la barre d'url. */
    height: calc(100vh - var(--page-padding));
    height: calc(100dvh - var(--page-padding));
    margin-left: 50vw;

    /* Le centrage DOIT etre exprime dans la meme unite que la hauteur
       juste au-dessus.
       Le bloc est place a 50 % de la hauteur puis remonte de la moitie
       de la sienne. Avec une hauteur en dvh et un decalage reste en vh,
       les deux moities ne se referaient plus a la meme reference : le
       bas du menu depassait alors sous la zone visible de la moitie de
       la hauteur de la barre d'url, et « Victor » et « Contact »
       restaient rognes. */
    margin-top: 50vh;
    margin-top: 50dvh;
    transform: translate(-50%, -50%);
}

/* ==========================================================
   TITRE ET LIENS
   ========================================================== */
.big-title-menu {
    margin-left: auto;
    margin-right: auto;
    /* Meme exigence de coherence : cette valeur vaut la moitie de la
       hauteur de .menu, qui est calc(100dvh - var(--page-padding)).
       En vh, le titre se decalerait du centre des que la barre d'url
       apparait. */
    margin-top: calc(50vh - calc(var(--page-padding) / 2));
    margin-top: calc(50dvh - calc(var(--page-padding) / 2));
    transform: translateY(-50%);
    width: fit-content;
    text-align: center;
}

.big-title-menu .display-xl {
    font-size: 6rem;
    line-height: 5.5rem;
}

.menu ul {
    list-style-type: none;
    padding: 0;
}

.menu-bottom {
    position: absolute;
    bottom: 0;
}

.menu-bottom.left {
    left: 0;
}

.menu-bottom.right {
    right: 0;
}

.menu a {
    color: white;
    text-decoration: none;
}

.menu .display-lg {
    font-weight: 500;
}

/* ==========================================================
   ENTREE DES LIENS EN CASCADE
   Les liens partent invisibles ; menu.js ajoute .showed sur chacun avec un
   decalage, ce qui declenche l'animation `entering` en cascade. Le retrait de
   .showed a la fermeture les remet a l'etat initial pour l'ouverture suivante.
   ========================================================== */
.menu .display-xl,
.menu .display-lg {
    opacity: 0;
    visibility: hidden;
}

.menu .display-xl.showed,
.menu .display-lg.showed {
    animation: entering 0.5s ease forwards;
}

@keyframes entering {
    from {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-100px);
    }

    to {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
    }
}