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

Simon-Pierre Boucher committed 1 mo ago (Aug 22, 2026) parent ea11de7

2 changed files +8 −6

modified frontend/src/App.tsx +2 −2

		`@@ -130,8 +130,8 @@ function Header() {`
130	130
131	131	useEffect(() => { setOpen(false); }, [location]);
132	132	useEffect(() => {
133		− document.body.style.overflow = open ? "hidden" : "";
134		− return () => { document.body.style.overflow = ""; };
	133	+ document.documentElement.classList.toggle("ka-scroll-lock", open);
	134	+ return () => { document.documentElement.classList.remove("ka-scroll-lock"); };
135	135	}, [open]);
136	136
137	137	return (

modified frontend/src/styles.css +6 −4

		`@@ -37,11 +37,13 @@ button { font-family: inherit; }`
37	37
38	38	/* ================= Header ================= */
39	39	.header {
40		− position: sticky; top: 0; z-index: 50;
41		− background: rgba(247, 241, 239, 0.88);
42		− backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	40	+ position: sticky; top: 0; z-index: var(--z-header, 500);
	41	+ background: var(--paper);
43	42	border-bottom: 2px solid var(--ink);
44	43	}
	44	+/* Menu mobile ouvert : le panneau vit DANS le header — on monte tout le header
	45	+ au niveau modale pour qu il passe au-dessus du voile (--z-overlay). */
	46	+.header:has(.mobile-menu.open) { z-index: var(--z-modal, 900); }
45	47	.header-inner { display: flex; align-items: center; gap: 20px; height: 64px; }
46	48	.brand { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.04em; display: flex; align-items: center; line-height: 1; }
47	49	.brand .ka { background: var(--ink); color: var(--lime); padding: 2px 7px 4px; border-radius: 6px; margin-left: 3px; transform: rotate(-2deg); transition: transform 0.2s ease; }
		`@@ -491,7 +493,7 @@ table.rooms tr:nth-child(even) td { background: var(--surface-2); }`
491	493	.mm-arrow { margin-left: auto; opacity: 0.25; }
492	494	.mm-link:active { background: var(--lime-soft); border-radius: var(--r-ctl); }
493	495	.mm-foot { padding: 12px 10px 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.04em; }
494		−.mm-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(26, 18, 20, 0.35); backdrop-filter: blur(2px); }
	496	+.mm-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay, 800); background: rgba(26, 18, 20, 0.35); backdrop-filter: blur(2px); }
495	497	@media (max-width: 760px) { .menu-btn { display: flex; } .nav { display: none; } .mobile-menu { display: block; } }
496	498
497	499	/* ================= Footer =================
498	500