SPB Git
spboucher.ai

spb/resto-ka

Public

Resto·Ka — tous les restaurants du Québec, menus complets et prix réels (famille ·Ka)

header opaque + z-index en tokens + scroll-lock ka-scroll-lock (standard header/menu KA 2026-08-22)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Simon-Pierre Boucher committed (Aug 22, 2026) parent 6b03213 Browse files

2 changed files +14 −11

2 changed files
Unified Split
modified frontend/src/App.tsx +2 −2
@@ -150,8 +150,8 @@ function Header() {
150 // fermer le menu à chaque navigation + verrouiller le défilement en dessous 150 // fermer le menu à chaque navigation + verrouiller le défilement en dessous
151 useEffect(() => { setOpen(false); }, [location]); 151 useEffect(() => { setOpen(false); }, [location]);
152 useEffect(() => { 152 useEffect(() => {
153− document.body.style.overflow = open ? "hidden" : ""; 153+ document.documentElement.classList.toggle("ka-scroll-lock", open);
154− return () => { document.body.style.overflow = ""; }; 154+ return () => { document.documentElement.classList.remove("ka-scroll-lock"); };
155 }, [open]); 155 }, [open]);
156 156
157 return ( 157 return (
modified frontend/src/styles.css +12 −9
@@ -31,12 +31,11 @@ img { display: block; }
31 31
32 /* ================= Header ================= */ 32 /* ================= Header ================= */
33 .header { 33 .header {
34− position: sticky; top: 0; z-index: 50; 34+ position: sticky; top: 0; z-index: var(--z-header, 500);
35− background: rgba(245, 243, 238, 0.88); 35+ background: var(--paper);
36− backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
37 border-bottom: 1.5px solid var(--ink); 36 border-bottom: 1.5px solid var(--ink);
38 } 37 }
39−:root { --header-h: 66px; } /* hauteur du header (ancre du menu compte fixed) */ 38+:root { --header-h: 64px; } /* hauteur du header (ancre du menu compte fixed) */
40 .header-inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); } 39 .header-inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
41 .brand { 40 .brand {
42 font-family: var(--font-display); font-weight: 700; font-size: 24px; 41 font-family: var(--font-display); font-weight: 700; font-size: 24px;
@@ -592,7 +591,7 @@ img { display: block; }
592 .fab { display: none; } 591 .fab { display: none; }
593 592
594 @media (max-width: 640px) { 593 @media (max-width: 640px) {
595− :root { --header-h: 58px; } 594+ :root { --header-h: 56px; }
596 .brand { font-size: 20px; } 595 .brand { font-size: 20px; }
597 .nav a { padding: 8px 13px; font-size: 13.5px; } 596 .nav a { padding: 8px 13px; font-size: 13.5px; }
598 .ticker { font-size: 10px; padding: 6px 0; } 597 .ticker { font-size: 10px; padding: 6px 0; }
@@ -610,7 +609,7 @@ img { display: block; }
610 .filterbar.open .f-ctl select { max-width: none; width: 100%; } 609 .filterbar.open .f-ctl select { max-width: none; width: 100%; }
611 .filterbar.open { 610 .filterbar.open {
612 display: flex; flex-direction: column; gap: 12px; 611 display: flex; flex-direction: column; gap: 12px;
613− position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; 612+ position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal, 900);
614 margin: 0; border-radius: 16px 16px 0 0; border: none; border-top: 2px solid var(--ink); 613 margin: 0; border-radius: 16px 16px 0 0; border: none; border-top: 2px solid var(--ink);
615 max-height: 82dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; 614 max-height: 82dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
616 padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); 615 padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
@@ -631,7 +630,7 @@ img { display: block; }
631 } 630 }
632 .filterbar.open .sheet-apply { display: flex; width: 100%; } 631 .filterbar.open .sheet-apply { display: flex; width: 100%; }
633 .sheet-backdrop { 632 .sheet-backdrop {
634− display: block; position: fixed; inset: 0; z-index: 90; 633+ display: block; position: fixed; inset: 0; z-index: var(--z-overlay, 800);
635 background: rgba(20, 24, 20, 0.45); backdrop-filter: blur(2px); 634 background: rgba(20, 24, 20, 0.45); backdrop-filter: blur(2px);
636 } 635 }
637 .fab { 636 .fab {
@@ -661,7 +660,7 @@ img { display: block; }
661 @media (max-width: 760px) { 660 @media (max-width: 760px) {
662 .tabbar { 661 .tabbar {
663 display: grid; 662 display: grid;
664− position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; 663+ position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottombar, 600);
665 background: rgba(245, 243, 238, 0.94); 664 background: rgba(245, 243, 238, 0.94);
666 backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); 665 backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
667 border-top: 1.5px solid var(--ink); 666 border-top: 1.5px solid var(--ink);
@@ -811,7 +810,11 @@ img { display: block; }
811 max-height: 0; overflow: hidden; opacity: 0; 810 max-height: 0; overflow: hidden; opacity: 0;
812 transition: max-height 0.3s ease, opacity 0.22s ease; 811 transition: max-height 0.3s ease, opacity 0.22s ease;
813 } 812 }
813+.mobile-menu { z-index: var(--z-modal, 900); }
814 .mobile-menu.open { max-height: 480px; opacity: 1; } 814 .mobile-menu.open { max-height: 480px; opacity: 1; }
815+/* Le drawer vit DANS le header : quand il est ouvert, le header monte au niveau
816+ modal pour peindre au-dessus du .mm-backdrop (frère du header, overlay 800). */
817+.header:has(.mobile-menu.open) { z-index: var(--z-modal, 900); }
815 .mm-link { 818 .mm-link {
816 display: flex; align-items: center; gap: 12px; 819 display: flex; align-items: center; gap: 12px;
817 padding: 15px 10px; min-height: 52px; 820 padding: 15px 10px; min-height: 52px;
@@ -832,7 +835,7 @@ img { display: block; }
832 font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.02em; 835 font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.02em;
833 } 836 }
834 .mm-backdrop { 837 .mm-backdrop {
835− position: fixed; inset: 0; z-index: 40; 838+ position: fixed; inset: 0; z-index: var(--z-overlay, 800);
836 background: rgba(20, 24, 20, 0.35); backdrop-filter: blur(2px); 839 background: rgba(20, 24, 20, 0.35); backdrop-filter: blur(2px);
837 } 840 }
838 @media (max-width: 760px) { 841 @media (max-width: 760px) {
839 842
Menu

Theme
↑↓ navigate ↵ open esc close / or ⌘K anywhere