# Standard KA Nav v2 — menu mobile plein écran (2026-08-25) ## Problème corrigé Sur mobile, plusieurs sites KA affichaient soit des liens de nav qui wrappent dans le header (2-3 lignes), soit un dropdown `position:absolute` ancré au header. Quand le header n'est pas sticky (ou que le panneau est ancré au flux du document), ouvrir le menu en bas de page ne montre RIEN — le panneau se dessine hors écran. Rendu incohérent d'un site à l'autre. ## Standard (obligatoire sur tous les sites publics KA) - Desktop (>760px) : nav pilules inline inchangée. - Mobile (≤760px) : les liens inline sont masqués, remplacés par un bouton hamburger 44×44 (3 barres → ✕ animé, `aria-expanded`). - Panneau : `position:fixed; inset:0; z-index:var(--z-modal,900); background:var(--paper)` → TOUJOURS visible, peu importe la position de scroll (c'est le fix du bug). Structure : barre du haut (marque + bouton ✕ 44px) / liens géants numérotés (font-display 700, min-height 52px, bordure pointillée) / pied (badge Groupe KA + liens secondaires), `padding-bottom:max(20px, env(safe-area-inset-bottom))`. - Verrou de scroll : classe `ka-menu-locked` sur `` (`overflow:hidden`). - Fermeture : clic sur un lien, ✕, touche Escape. Le panneau s'ouvre sans animation lourde (fade+translate 160ms max). - A11y : `role="dialog" aria-modal="true"`, `aria-label="Menu"`, focus visible. - Thème automatique par app via tokens : `--paper, --ink, --ink-2, --ink-3, --accent, --on-accent, --accent-soft, --font-display, --font-mono, --z-modal`. - Référence Next.js : vrai-prix `src/components/HeaderNav.tsx` (checkbox + peer-checked). - Référence vanilla SPA : `ka-nav.css` + `ka-nav.js` de ce dossier (copiés/adaptés dans chaque index.html monolithique). ## Règles - JAMAIS de dropdown `position:absolute` ancré au header pour le menu mobile. - **Le ✕ de fermeture DOIT vivre DANS le panneau** (barre interne ou bouton `position:fixed` en haut à droite), jamais uniquement dans le header : si le header n'est pas épinglé (bas de page, sticky cassé par un ancêtre overflow), le burger→✕ défile hors écran alors que le panneau fixed reste affiché (bug corrigé le 2026-08-25 sur les 6 apps React + trouve-ka : `.mm-close` fixed + burger `visibility:hidden` à l'ouverture — une seule commande). - Le hamburger et le ✕ font ≥44×44px (cible tactile). - Les liens du panneau reprennent EXACTEMENT les liens de la nav desktop (+ liens secondaires du footer si pertinent), i18n fr-CA. - L'état actif (page courante) est marqué dans le panneau (fond --ink, texte --accent ou inversion propre au thème).