.menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    display: grid;
    /* « safe » : plus haut que l'écran (téléphone), le menu part du haut au lieu
       d'avoir son début coupé, hors d'atteinte du défilement. */
    align-content: safe center;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: calc(var(--entete-h) + 2rem) 2rem;
}

.menu[hidden] {
    display: none;
}

.menu__fond {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(90rem 50rem at 82% -10%, rgb(113 34 246 / 0.14), transparent 62%),
        radial-gradient(70rem 40rem at 4% 104%, rgb(46 163 242 / 0.12), transparent 60%),
        var(--fond);
    /*
     * Le voile est opaque par défaut. C'est le contrôleur qui, en mode animé,
     * pose lui-même l'état de départ (clip-path fermé) avant de l'ouvrir :
     * ainsi, sans JavaScript ou en mouvement réduit, le menu s'affiche
     * simplement, au lieu de rester transparent sur le contenu de la page.
     */
}

.menu__contenu {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(2.5rem, 6vh, 5rem);
}

.menu__colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(2rem, 5vw, 4.5rem);
}

.menu__colonne .surtitre {
    margin-block-end: 1.5rem;
}

.menu__liste li {
    /* Le masque coupe le lien pendant qu'il monte : il apparaît « depuis »
       la ligne, au lieu de glisser par-dessus. */
    overflow: hidden;
}

.menu__liste a {
    display: block;
    padding-block: 0.28em;
    font-family: var(--police-texte);
    font-size: clamp(1.35rem, 0.9rem + 1.5vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.08;
    text-decoration: none;
    color: var(--texte);
    transition: color 0.35s var(--ease-sortie), transform 0.45s var(--ease-sortie);
}

.menu__liste a span {
    display: inline-block;
    background-image: linear-gradient(var(--cyan), var(--cyan));
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 0 92%;
    transition: background-size 0.5s var(--ease-sortie);
}

.menu__liste a:hover {
    color: var(--cyan);
    transform: translateX(0.6rem);
}

.menu__liste a:hover span {
    background-size: 100% 1px;
}

.menu__liste--petite a {
    font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.45rem);
    font-weight: 500;
    color: var(--texte-doux);
}

.menu__liste--petite a:hover {
    color: var(--texte);
}

.menu__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    padding-block-start: 2rem;
    border-block-start: 1px solid var(--trait);
}

.menu__coordonnees {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
}

.menu__agence {
    display: grid;
    gap: 0.3rem;
    font-style: normal;
}

.menu__agence .mono {
    color: var(--texte-tres-doux);
}

.menu__agence a {
    font-family: var(--police-texte);
    font-size: var(--t-md);
    font-weight: 500;
    text-decoration: none;
}

.menu__mail {
    font-family: var(--police-texte);
    font-size: clamp(1.1rem, 0.9rem + 1vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--texte);
}

.menu__mail:hover {
    color: var(--cyan);
}

/*
 * Sans JavaScript, le panneau reste `hidden` : les liens du pied de page
 * couvrent alors l'intégralité du plan du site, donc rien n'est perdu.
 */