/* ===================================================================== Barre de navigation mobile — masquée à la descente, révélée à la montée. ===================================================================== COMPORTEMENT À l'arrivée sur une page, la barre est masquée : le héros occupe tout l'écran. Elle le reste tant que le visiteur descend. Dès qu'il remonte, elle réapparaît — remonter est précisément le geste de quelqu'un qui cherche à naviguer. De retour tout en haut, elle s'efface de nouveau. PORTÉE Uniquement sous 720 px, seuil auquel .vm-nav passe en position: fixed avec une hauteur de 80 px (voir main-2.css). Au-dessus, la barre garde son comportement collant habituel : sur grand écran elle ne gêne pas, et la masquer priverait l'utilisateur d'un repère sans rien gagner. Comme .vm-nav est en position: fixed à ce seuil, la translation ne déplace aucun contenu : pas de décalage de mise en page, le CLS reste à zéro. SÛRETÉ La règle de masquage est conditionnée à html.vm-has-js, classe posée par le thème au tout début du . Si le JavaScript échoue ou est désactivé, la barre reste visible en permanence — le menu ne devient jamais inatteignable. ===================================================================== */ @media (max-width: 720px) { .vm-has-js .vm-nav { transform: translateY(-100%); transition: transform 280ms ease; will-change: transform; } /* Révélée à la montée, et toujours visible menu ouvert : sans cette seconde règle, ouvrir le menu depuis une barre masquée afficherait un panneau sans son en-tête. */ .vm-has-js .vm-nav[data-scroll="visible"], .vm-has-js .vm-nav[data-open="true"] { transform: translateY(0); } } /* Le mouvement est décoratif : on le supprime pour qui demande moins d'animations, sans rien changer à la logique d'affichage. */ @media (prefers-reduced-motion: reduce) { .vm-has-js .vm-nav { transition: none; } }