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, overflow:hidden qui CLIPPAIT compte + pied de menu) à position:fixed inset:0 avec overflow-y:auto — menu complet et visible peu importe la position de scroll. Verrou de scroll CSS pur via html:has(). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 changed file +15 −3
modified
frontend/src/styles.css
+15 −3
@@ -494,8 +494,20 @@ table.rooms tr:nth-child(even) td { background: var(--surface-2); } | ||
| 494 | 494 | .menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } |
| 495 | 495 | .menu-btn.open span:nth-child(2) { opacity: 0; } |
| 496 | 496 | .menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } |
| 497 | −.mobile-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 2px solid var(--ink); box-shadow: 0 18px 30px rgba(26, 18, 20, 0.18); padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.22s ease; } | |
| 498 | −.mobile-menu.open { max-height: 480px; opacity: 1; } | |
| 497 | +/* KA Nav v2 (2026-08-25) : panneau PLEIN ECRAN fixed inset:0 - visible peu | |
| 498 | + importe le scroll (l'ancien dropdown absolute 480px clippait/se coupait). */ | |
| 499 | +.mobile-menu { | |
| 500 | + display: none; position: fixed; inset: 0; | |
| 501 | + background: var(--paper); | |
| 502 | + padding: 76px 16px calc(24px + env(safe-area-inset-bottom)); | |
| 503 | + overflow-y: auto; overscroll-behavior: contain; | |
| 504 | +} | |
| 505 | +.mobile-menu.open { display: block; animation: mm-in 0.16s ease; } | |
| 506 | +@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } | |
| 507 | +/* le rang du header (marque + burger devenu X) reste au-dessus du panneau */ | |
| 508 | +.header:has(.mobile-menu.open) .header-inner { position: relative; z-index: 60; } | |
| 509 | +/* verrou du scroll d'arriere-plan quand le menu est ouvert (CSS pur) */ | |
| 510 | +html:has(.mobile-menu.open) { overflow: hidden; } | |
| 499 | 511 | .mm-link { display: flex; align-items: center; gap: 12px; padding: 15px 10px; min-height: 52px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; border-bottom: 1.5px dashed var(--line); opacity: 0; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease; } |
| 500 | 512 | .mobile-menu.open .mm-link { opacity: 1; transform: translateY(0); } |
| 501 | 513 | .mm-link.active { color: var(--green); } |
@@ -504,7 +516,7 @@ table.rooms tr:nth-child(even) td { background: var(--surface-2); } | ||
| 504 | 516 | .mm-link:active { background: var(--lime-soft); border-radius: var(--r-ctl); } |
| 505 | 517 | .mm-foot { padding: 12px 10px 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.04em; } |
| 506 | 518 | .mm-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay, 800); background: rgba(26, 18, 20, 0.35); backdrop-filter: blur(2px); } |
| 507 | −@media (max-width: 760px) { .menu-btn { display: flex; } .nav { display: none; } .mobile-menu { display: block; } } | |
| 519 | +@media (max-width: 760px) { .menu-btn { display: flex; } .nav { display: none; } } | |
| 508 | 520 | |
| 509 | 521 | /* ================= Footer ================= |
| 510 | 522 | Remplacé par le footer commun Groupe KA (ka/KaFooter.tsx — styles .ka-footer |
| 511 | 523 | |