Nav mobile v2 : le dropdown 480px devient un panneau plein écran fixed
Standard KA 2026-08-25 : .mobile-menu passe de position:absolute top:100% (max-height 480px) à position:fixed inset:0 — menu visible peu importe la position de scroll. Rang du header (marque + burger→✕) maintenu au-dessus du panneau, verrou de scroll CSS pur via html:has(.mobile-menu.open). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 changed file +13 −10
modified
frontend/src/styles.css
+13 −10
@@ -818,16 +818,20 @@ img { display: block; } | ||
| 818 | 818 | .menu-btn.open span:nth-child(2) { opacity: 0; } |
| 819 | 819 | .menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } |
| 820 | 820 | |
| 821 | +/* KA Nav v2 (2026-08-25) : panneau PLEIN ECRAN fixed inset:0 - visible peu | |
| 822 | + importe le scroll (l'ancien dropdown absolute 480px clippait/se coupait). */ | |
| 821 | 823 | .mobile-menu { |
| 822 | − display: none; position: absolute; left: 0; right: 0; top: 100%; | |
| 823 | − background: var(--paper); border-bottom: 2px solid var(--ink); | |
| 824 | − box-shadow: 0 18px 30px rgba(20, 24, 20, 0.14); | |
| 825 | − padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); | |
| 826 | − max-height: 0; overflow: hidden; opacity: 0; | |
| 827 | − transition: max-height 0.3s ease, opacity 0.22s ease; | |
| 828 | −} | |
| 829 | −.mobile-menu { z-index: var(--z-modal, 900); } | |
| 830 | −.mobile-menu.open { max-height: 480px; opacity: 1; } | |
| 824 | + display: none; position: fixed; inset: 0; | |
| 825 | + background: var(--paper); | |
| 826 | + padding: 76px 16px calc(24px + env(safe-area-inset-bottom)); | |
| 827 | + overflow-y: auto; overscroll-behavior: contain; | |
| 828 | +} | |
| 829 | +.mobile-menu.open { display: block; animation: mm-in 0.16s ease; } | |
| 830 | +@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } | |
| 831 | +/* le rang du header (marque + burger devenu X) reste au-dessus du panneau */ | |
| 832 | +.header:has(.mobile-menu.open) .header-inner { position: relative; z-index: 60; } | |
| 833 | +/* verrou du scroll d'arriere-plan quand le menu est ouvert (CSS pur) */ | |
| 834 | +html:has(.mobile-menu.open) { overflow: hidden; } | |
| 831 | 835 | /* Le drawer vit DANS le header : quand il est ouvert, le header monte au niveau |
| 832 | 836 | modal pour peindre au-dessus du .mm-backdrop (frère du header, overlay 800). */ |
| 833 | 837 | .header:has(.mobile-menu.open) { z-index: var(--z-modal, 900); } |
@@ -857,7 +861,6 @@ img { display: block; } | ||
| 857 | 861 | @media (max-width: 760px) { |
| 858 | 862 | .menu-btn { display: flex; } |
| 859 | 863 | .nav { display: none; } |
| 860 | − .mobile-menu { display: block; } | |
| 861 | 864 | } |
| 862 | 865 | |
| 863 | 866 | /* ================= Badge « Un service Groupe KA » (ka-ui) ================= */ |
| 864 | 867 | |