SPB Git forge
spboucher.ai ↗

spb/lou-ka

Public

Lou·Ka — tous les logements à louer du Québec, un seul endroit.

www.lou-ka.com
webappreal-estatequebecrental
232commits 1branches 0releases
172.9 MBsize
maindefault branch
3 days agolast push
HTML 98.9% Python 0.6%

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 1 mo ago (Aug 22, 2026) parent fe391f1

2 changed files +17 −14

modified frontend/src/App.tsx +2 −2
@@ -211,8 +211,8 @@ function Header() {
211 211 // fermer le menu à chaque navigation + verrouiller le défilement en dessous
212 212 useEffect(() => { setOpen(false); }, [location]);
213 213 useEffect(() => {
214 − document.body.style.overflow = open ? "hidden" : "";
215 − return () => { document.body.style.overflow = ""; };
214 + document.documentElement.classList.toggle("ka-scroll-lock", open);
215 + return () => { document.documentElement.classList.remove("ka-scroll-lock"); };
216 216 }, [open]);
217 217
218 218 return (
modified frontend/src/styles.css +15 −12
@@ -46,12 +46,11 @@ html, body { overflow-x: clip; }
46 46
47 47 /* ================= Header ================= */
48 48 .header {
49 − position: sticky; top: 0; z-index: 50;
50 − background: rgba(255, 255, 255, 0.86);
51 − backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
49 + position: sticky; top: 0; z-index: var(--z-header, 500);
50 + background: var(--paper);
52 51 border-bottom: 1px solid var(--line);
53 52 }
54 −.header-inner { display: flex; align-items: center; gap: 20px; height: 66px; }
53 +.header-inner { display: flex; align-items: center; gap: 20px; height: 64px; }
55 54 .brand {
56 55 font-family: var(--font-display); font-weight: 700; font-size: 25px;
57 56 letter-spacing: -0.03em; display: flex; align-items: center; line-height: 1;
@@ -400,7 +399,7 @@ html, body { overflow-x: clip; }
400 399
401 400 /* ================= Lightbox ================= */
402 401 .lightbox {
403 − position: fixed; inset: 0; background: rgba(20, 24, 20, 0.94); z-index: 100;
402 + position: fixed; inset: 0; background: rgba(20, 24, 20, 0.94); z-index: var(--z-modal, 900);
404 403 display: flex; align-items: center; justify-content: center; cursor: zoom-out;
405 404 padding: max(16px, env(safe-area-inset-top)) 16px;
406 405 }
@@ -522,7 +521,7 @@ html, body { overflow-x: clip; }
522 521
523 522 /* Infobulle */
524 523 .viz-tip {
525 − position: fixed; z-index: 120; pointer-events: none; max-width: 180px;
524 + position: fixed; z-index: var(--z-toast, 950); pointer-events: none; max-width: 180px;
526 525 background: var(--navy); color: var(--white); border-radius: 12px;
527 526 padding: 9px 12px; font-size: 12px; line-height: 1.5;
528 527 box-shadow: 0 8px 24px rgba(20, 24, 20, 0.35);
@@ -549,7 +548,7 @@ html, body { overflow-x: clip; }
549 548
550 549 @media (max-width: 640px) {
551 550 /* En-tête compact */
552 − .header-inner { height: 58px; }
551 + .header-inner { height: 56px; }
553 552 .brand { font-size: 21px; }
554 553 .nav a { padding: 8px 13px; font-size: 13.5px; }
555 554 .ticker { font-size: 10.5px; padding: 6px 0; }
@@ -571,7 +570,7 @@ html, body { overflow-x: clip; }
571 570 .filterbar.open .f-adv { margin-top: 4px; }
572 571 .filterbar.open {
573 572 display: flex; flex-direction: column; gap: 12px;
574 − position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
573 + position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal, 900);
575 574 margin: 0; border-radius: 24px 24px 0 0; border: none;
576 575 max-height: 82dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
577 576 padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
@@ -592,7 +591,7 @@ html, body { overflow-x: clip; }
592 591 }
593 592 .filterbar.open .sheet-apply { display: block; width: 100%; }
594 593 .sheet-backdrop {
595 − display: block; position: fixed; inset: 0; z-index: 90;
594 + display: block; position: fixed; inset: 0; z-index: var(--z-overlay, 800);
596 595 background: rgba(20, 24, 20, 0.45); backdrop-filter: blur(2px);
597 596 }
598 597
@@ -625,7 +624,7 @@ html, body { overflow-x: clip; }
625 624 @media (max-width: 760px) {
626 625 .tabbar {
627 626 display: grid; grid-template-columns: repeat(4, 1fr);
628 − position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
627 + position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottombar, 600);
629 628 background: rgba(255, 255, 255, 0.92);
630 629 backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
631 630 border-top: 1px solid var(--line);
@@ -781,7 +780,11 @@ html, body { overflow-x: clip; }
781 780 max-height: 0; overflow: hidden; opacity: 0;
782 781 transition: max-height 0.3s ease, opacity 0.22s ease;
783 782 }
783 +.mobile-menu { z-index: var(--z-modal, 900); }
784 784 .mobile-menu.open { max-height: 480px; opacity: 1; }
785 +/* Le drawer vit DANS le header : quand il est ouvert, le header monte au niveau
786 + modal pour peindre au-dessus du .mm-backdrop (frère du header, overlay 800). */
787 +.header:has(.mobile-menu.open) { z-index: var(--z-modal, 900); }
785 788 .mm-link {
786 789 display: flex; align-items: center; gap: 12px;
787 790 padding: 15px 10px; min-height: 52px;
@@ -802,7 +805,7 @@ html, body { overflow-x: clip; }
802 805 font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em;
803 806 }
804 807 .mm-backdrop {
805 − position: fixed; inset: 0; z-index: 40;
808 + position: fixed; inset: 0; z-index: var(--z-overlay, 800);
806 809 background: rgba(20, 24, 20, 0.35); backdrop-filter: blur(2px);
807 810 }
808 811 @media (max-width: 760px) {
@@ -1024,7 +1027,7 @@ html { scroll-padding-top: 76px; } /* header sticky au-dessus des ancres */
1024 1027
1025 1028 /* CTA sticky mobile */
1026 1029 .cta-sticky {
1027 − position: fixed; left: 0; right: 0; z-index: 88;
1030 + position: fixed; left: 0; right: 0; z-index: var(--z-dropdown, 700);
1028 1031 bottom: var(--consent-h, 0px);
1029 1032 display: flex; align-items: center; gap: 12px;
1030 1033 background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px);
1031 1034