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 | .menu-btn.open span:nth-child(2) { opacity: 0; } | 818 | .menu-btn.open span:nth-child(2) { opacity: 0; } | ||
| 819 | .menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } | 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 | .mobile-menu { | 823 | .mobile-menu { | ||
| 822 | − display: none; position: absolute; left: 0; right: 0; top: 100%; | 824 | + display: none; position: fixed; inset: 0; | ||
| 823 | − background: var(--paper); border-bottom: 2px solid var(--ink); | 825 | + background: var(--paper); | ||
| 824 | − box-shadow: 0 18px 30px rgba(20, 24, 20, 0.14); | 826 | + padding: 76px 16px calc(24px + env(safe-area-inset-bottom)); | ||
| 825 | − padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); | 827 | + overflow-y: auto; overscroll-behavior: contain; | ||
| 826 | − max-height: 0; overflow: hidden; opacity: 0; | 828 | +} | ||
| 827 | − transition: max-height 0.3s ease, opacity 0.22s ease; | 829 | +.mobile-menu.open { display: block; animation: mm-in 0.16s ease; } | ||
| 828 | −} | 830 | +@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } | ||
| 829 | −.mobile-menu { z-index: var(--z-modal, 900); } | 831 | +/* le rang du header (marque + burger devenu X) reste au-dessus du panneau */ | ||
| 830 | −.mobile-menu.open { max-height: 480px; opacity: 1; } | 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 | /* Le drawer vit DANS le header : quand il est ouvert, le header monte au niveau | 835 | /* Le drawer vit DANS le header : quand il est ouvert, le header monte au niveau | ||
| 832 | modal pour peindre au-dessus du .mm-backdrop (frère du header, overlay 800). */ | 836 | modal pour peindre au-dessus du .mm-backdrop (frère du header, overlay 800). */ | ||
| 833 | .header:has(.mobile-menu.open) { z-index: var(--z-modal, 900); } | 837 | .header:has(.mobile-menu.open) { z-index: var(--z-modal, 900); } | ||
@@ -857,7 +861,6 @@ img { display: block; } | |||||
| 857 | @media (max-width: 760px) { | 861 | @media (max-width: 760px) { | ||
| 858 | .menu-btn { display: flex; } | 862 | .menu-btn { display: flex; } | ||
| 859 | .nav { display: none; } | 863 | .nav { display: none; } | ||
| 860 | − .mobile-menu { display: block; } | ||||
| 861 | } | 864 | } | ||
| 862 | 865 | ||||
| 863 | /* ================= Badge « Un service Groupe KA » (ka-ui) ================= */ | 866 | /* ================= Badge « Un service Groupe KA » (ka-ui) ================= */ | ||
| 864 | 867 | ||||