/* =====================================================================
   G6M_MENU_MOBILE_CSP_V1041 (05/09/2026)

   LE MENU MOBILE NE S'OUVRAIT JAMAIS.

   Sa visibilite etait confiee a `x-show`. Or Alpine applique x-show en
   ecrivant un attribut style=, et la CSP du site sert
   `style-src 'self' 'nonce-...'` sans 'unsafe-inline' ni 'unsafe-hashes' :
   un nonce ne valide QUE les elements <style>, jamais un attribut.

   Mesure faite au clic sur le bouton : l'etat Alpine passait bien a true,
   mais le <nav> gardait `style="display: none;"` — hauteur 0, zero lien
   atteignable. Sous 1280 px, c'est-a-dire sur tous les telephones et
   tablettes, la navigation etait donc inaccessible. Rien ne se voyait cote
   serveur : le HTML servi etait correct, seule la console signalait le refus.

   La visibilite passe desormais par la classe `.is-open`, deja posee par le
   binding `:class="navClass"` du composant Alpine g6mMobileMenu. Une classe
   se manipule via classList, sans jamais toucher a style= : la CSP n'a plus
   rien a bloquer.

   POURQUOI UNE FEUILLE SEPAREE. La regle avait naturellement sa place dans
   animations.css, qui porte deja la finition `.is-open`. Mais animations.css
   est @importe par app.css et absorbe par le build Vite : une regle ecrite
   la-bas n'atteint le navigateur qu'apres `npm run build`, et le build livre
   date du 18/08. Reconstruire activerait d'un coup toutes les classes
   ajoutees depuis — ce n'est pas une operation a glisser dans un correctif.

   L'animation d'entree passe par @keyframes et non par une transition : on ne
   peut pas faire transitionner une propriete depuis `display: none`.
   ===================================================================== */

[data-mobile-menu] {
    display: none;
}

[data-mobile-menu].is-open {
    display: block;
    animation: g6m-menu-mobile-entree 200ms cubic-bezier(0.33, 1, 0.68, 1) both;
}

@keyframes g6m-menu-mobile-entree {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Au-dela du point de rupture, la barre de navigation complete reprend la
   main : le panneau reste masque meme si l'etat Alpine est demeure ouvert
   apres un redimensionnement de la fenetre. */
@media (min-width: 1280px) {
    [data-mobile-menu],
    [data-mobile-menu].is-open {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-mobile-menu].is-open {
        animation: none;
    }
}