spb/ka-ui

1/* ===== KA Nav v2 — menu mobile plein écran (standard 2026-08-25) =====2   Panneau en position:fixed inset:0 → toujours visible, peu importe le scroll.3   Thémé par les tokens de l'app : --paper --ink --ink-2 --ink-3 --accent4   --on-accent --font-display --font-mono --z-modal. Préfixe ka-mnav (zéro collision). */56/* bouton hamburger (masqué en desktop) */7.ka-mnav-btn{display:none;width:44px;height:44px;margin-left:auto;flex:none;8  flex-direction:column;align-items:center;justify-content:center;gap:5px;9  background:var(--paper);border:1.5px solid var(--ink);border-radius:999px;10  cursor:pointer;padding:0}11.ka-mnav-btn span{display:block;width:18px;height:2px;background:var(--ink);12  border-radius:2px;transition:transform .18s ease,opacity .14s ease}13.ka-mnav-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}14.ka-mnav-btn[aria-expanded="true"] span:nth-child(2){opacity:0}15.ka-mnav-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}1617/* panneau plein écran */18.ka-mnav{position:fixed;inset:0;z-index:var(--z-modal,900);background:var(--paper);19  display:none;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}20.ka-mnav.open{display:flex;animation:ka-mnav-in .16s ease}21@keyframes ka-mnav-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}2223.ka-mnav-top{display:flex;align-items:center;justify-content:space-between;flex:none;24  min-height:64px;padding:0 18px;border-bottom:2px solid var(--ink);background:var(--paper)}25.ka-mnav-close{width:44px;height:44px;flex:none;display:flex;align-items:center;26  justify-content:center;border:1.5px solid var(--ink);border-radius:999px;27  background:var(--ink);color:var(--accent,var(--paper));font-size:17px;font-weight:700;28  font-family:var(--font-display,inherit);cursor:pointer;padding:0;line-height:1}2930.ka-mnav-links{display:flex;flex-direction:column;justify-content:center;flex:1;31  padding:28px 24px}32.ka-mnav-links a{display:flex;align-items:baseline;gap:14px;padding:17px 0;33  border-bottom:1.5px dashed color-mix(in srgb,var(--ink) 18%,transparent);34  text-decoration:none;color:var(--ink)}35.ka-mnav-links a:last-child{border-bottom:0}36.ka-mnav-links a i{font-style:normal;font-family:var(--font-mono,monospace);37  font-size:12px;font-weight:700;color:var(--accent-deep,var(--ink-3,#777))}38.ka-mnav-links a b{font-family:var(--font-display,inherit);font-weight:700;39  font-size:27px;line-height:1;letter-spacing:-.03em;text-transform:uppercase}40.ka-mnav-links a.active b{background:var(--ink);color:var(--accent,var(--paper));41  border-radius:6px;padding:4px 10px 6px}4243.ka-mnav-foot{flex:none;border-top:2px solid var(--ink);padding:16px 24px;44  padding-bottom:max(20px,env(safe-area-inset-bottom))}45.ka-mnav-foot .ka-mnav-sec{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px;46  font-family:var(--font-mono,monospace);font-size:10.5px;text-transform:uppercase;47  letter-spacing:.06em}48.ka-mnav-foot .ka-mnav-sec a{color:var(--ink-3,var(--ink));text-decoration:none}4950/* verrou de scroll quand le panneau est ouvert */51html.ka-menu-locked,html.ka-menu-locked body{overflow:hidden}5253/* bascule mobile : masquer la nav inline, montrer le hamburger.54   ⚠️ PAR APP : remplacer `.nav` par le sélecteur réel de la nav desktop. */55@media(max-width:760px){56  .ka-mnav-btn{display:flex}57}58