Python 67%
TypeScript 18.2%
CSS 14.4%
1/* -----------------------------------------------------------------------------2 House-Ka — Homes-for-sale aggregator (Canada outside Québec, Ontario first)3 Author: Simon-Pierre Boucher — contact@spboucher.ai4 styles.css : House-Ka business classes on top of the shared Groupe KA design5 system (ka/tokens.css, imported BEFORE this file in main.tsx).6 House-Ka overrides MORE than the accent: pine/cream palette + serif7 display type (Fraunces) — a deliberately different skin from Immo-Ka.8----------------------------------------------------------------------------- */9:root {10 /* ---- House-Ka PINE accent + warm cream paper + serif display ---- */11 --accent: #0f6b4f;12 --accent-soft: #dcefe6;13 --accent-deep: #0a4a37;14 --on-accent: #ffffff;15 --paper: #faf7f0;16 --ink: #14201a;17 --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;18 /* legacy aliases — all the business CSS below uses --lime */19 --lime: var(--accent);20 --lime-soft: var(--accent-soft);21}22/* Serif display: Fraunces is wider than Space Grotesk — soften the tracking */23h1, h2, h3, h4, .brand, .price, .card-price { letter-spacing: -0.015em; }2425/* Ancre sous le header collant (spécifique Immo-Ka) */26html { scroll-padding-top: 76px; }27h1, h2, h3, h4 { margin: 0; }28a { text-decoration: none; }29button { font-family: inherit; }3031.mono { font-family: var(--font-mono); }32.kicker {33 font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;34 text-transform: uppercase; letter-spacing: 0.14em; color: var(--green);35 display: inline-flex; align-items: center; gap: 8px;36}37.kicker::before { content: ""; width: 22px; height: 2px; background: var(--green); }3839.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }40@media (max-width: 640px) { .container { padding: 0 16px; } }4142/* ================= Header ================= */43.header {44 position: sticky; top: 0; z-index: var(--z-header, 500);45 background: var(--paper);46 border-bottom: 2px solid var(--ink);47}48/* Menu mobile ouvert : le panneau vit DANS le header — on monte tout le header49 au niveau modale pour qu il passe au-dessus du voile (--z-overlay). */50.header:has(.mobile-menu.open) { z-index: var(--z-modal, 900); }51.header-inner { display: flex; align-items: center; gap: 20px; height: 64px; }52.brand { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.04em; display: flex; align-items: center; line-height: 1; }53.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; }54.brand:hover .ka { transform: rotate(0deg); }55.brand-tag { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; margin-left: 12px; }56@media (max-width: 860px) { .brand-tag { display: none; } }57.nav { margin-left: auto; display: flex; gap: 4px; }58.nav a { padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ink-2); border: 1.5px solid transparent; transition: all 0.15s ease; min-height: 40px; display: inline-flex; align-items: center; }59.nav a:hover { border-color: var(--ink); color: var(--ink); }60.nav a.active { background: var(--ink); color: var(--lime); }6162/* ================= Ticker ================= */63.ticker { background: var(--ink); color: var(--lime); overflow: hidden; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 0; white-space: nowrap; border-bottom: 1px solid rgba(15, 107, 79, 0.25); }64.ticker-track { display: inline-flex; gap: 0; animation: ticker 48s linear infinite; will-change: transform; }65.ticker span { padding: 0 26px; position: relative; }66.ticker span::after { content: "◆"; position: absolute; right: -6px; opacity: 0.5; font-size: 8px; top: 3px; }67@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }68@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } * { transition-duration: 0.01ms !important; } }6970/* ================= Hero ================= */71.hero { position: relative; padding: 64px 0 26px; }72@media (max-width: 640px) { .hero { padding: 36px 0 14px; } }73/* halo cerise + trame de points en fond — décoratif, sous le texte */74.hero::before {75 content: ""; position: absolute; z-index: -1; top: -60px; right: -120px;76 width: 580px; height: 460px; pointer-events: none;77 background: radial-gradient(closest-side, rgba(15, 107, 79, 0.12), transparent 72%);78}79.hero::after {80 content: ""; position: absolute; z-index: -1; inset: -20px -40px 0 0; pointer-events: none;81 background-image: radial-gradient(rgba(20, 24, 20, 0.18) 1.2px, transparent 1.7px);82 background-size: 22px 22px;83 -webkit-mask-image: linear-gradient(112deg, transparent 58%, rgba(0, 0, 0, 0.9));84 mask-image: linear-gradient(112deg, transparent 58%, rgba(0, 0, 0, 0.9));85}86.hero h1 { font-size: clamp(38px, 6.4vw, 78px); font-weight: 700; line-height: 0.98; text-transform: uppercase; letter-spacing: -0.035em; max-width: 940px; margin-top: 14px; }87.hero h1 .outline { color: transparent; -webkit-text-stroke: 2px var(--ink); }88.hero h1 .hl { background: var(--lime); color: #fff; padding: 0 10px; border-radius: 8px; display: inline-block; transform: rotate(-1deg); }89.hero p.lede { color: var(--ink-2); font-size: 16.5px; max-width: 680px; margin: 20px 0 0; }9091@media (max-width: 640px) {92 .hero::before { width: 320px; height: 260px; top: -30px; right: -90px; }93}9495.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }96.stat-chip { background: var(--surface); border: 1.5px solid var(--ink); border-radius: 999px; padding: 8px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; box-shadow: 3px 3px 0 rgba(26, 18, 20, 0.12); transition: transform 0.13s ease, box-shadow 0.13s ease; }97@media (hover: hover) { .stat-chip:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(26, 18, 20, 0.2); } }98.stat-chip b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }99.stat-chip .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--lime-soft); animation: pulse 2.4s ease infinite; }100@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(15, 107, 79, 0.4); } }101102/* ================= Filter bar ================= */103.filterbar { background: var(--surface); border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-off-soft); padding: 14px; margin: 34px 0 6px; display: flex; flex-direction: column; gap: 0; min-width: 0; }104.f-primary { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; min-width: 0; }105.f-search { flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 9px; border: 1.5px solid var(--ink); border-radius: 9px; background: var(--surface-2); padding: 0 14px; min-height: 52px; color: var(--ink-2); transition: box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease; }106.f-search:focus-within { box-shadow: 3px 3px 0 var(--lime); background: var(--surface); color: var(--accent-deep); }107.f-search input { border: none; background: none; outline: none; flex: 1; min-width: 0; font-size: 15px; color: var(--ink); font-family: inherit; }108.f-search input::placeholder { color: var(--ink-3); }109.f-clear { border: none; background: var(--line); color: var(--ink-2); border-radius: 50%; width: 22px; height: 22px; font-size: 10px; cursor: pointer; flex: none; display: grid; place-items: center; transition: background 0.12s ease, color 0.12s ease; }110.f-clear:hover { background: var(--ink); color: #fff; }111.f-ctl { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; border: 1.5px solid var(--ink); border-radius: 9px; background: var(--surface); padding: 7px 12px 6px; min-height: 52px; cursor: pointer; transition: box-shadow 0.15s ease, background 0.15s ease; }112@media (hover: hover) { .f-ctl:hover { background: var(--surface-2); } }113.f-ctl:focus-within { box-shadow: 3px 3px 0 var(--lime); background: var(--surface); }114.f-ctl > span { font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }115.f-ctl select { border: none; background: transparent; outline: none; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--ink); cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 16px; min-width: 0; max-width: 180px; text-overflow: ellipsis; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%23141814'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; }116.range-pair { display: flex; align-items: center; gap: 4px; }117.range-pair select { max-width: 92px; }118.range-sep { color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; }119.f-more { flex: none; align-self: stretch; display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--ink); border-radius: 9px; background: var(--surface); color: var(--ink); padding: 0 18px; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 14px; min-height: 52px; transition: transform 0.13s ease, box-shadow 0.13s ease, background 0.13s ease, color 0.13s ease; }120.f-more:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-off-mid); background: var(--surface); }121.f-more:active { transform: none; box-shadow: none; }122.f-more.on { background: var(--ink); border-color: var(--ink); color: var(--lime); box-shadow: 3px 3px 0 var(--lime); }123.f-more.on:hover { transform: none; }124.f-more-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--lime); color: var(--on-accent); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }125.f-chev { width: 8px; height: 8px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -4px; transition: transform 0.18s ease, margin 0.18s ease; }126.f-chev.up { transform: rotate(-135deg); margin-top: 4px; }127.f-adv { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 26px; border-top: 1.5px dashed var(--line); margin-top: 14px; padding-top: 16px; min-width: 0; animation: adv-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1); }128@keyframes adv-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }129.f-group { display: flex; flex-direction: column; gap: 7px; min-width: 0; }130.f-group > label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }131.f-group-end { justify-content: flex-end; }132.f-group .btn:disabled { opacity: 0.4; cursor: default; }133.f-native { border: 1.5px solid var(--line); background: var(--surface-2); border-radius: var(--r-ctl); padding: 10px 30px 10px 12px; font-size: 14px; color: var(--ink); outline: none; font-family: inherit; min-height: 42px; width: 100%; min-width: 0; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23141814'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }134.f-native:focus { border-color: var(--ink); box-shadow: 3px 3px 0 var(--lime); }135.seg { display: inline-flex; flex-wrap: wrap; row-gap: 6px; }136.seg button { border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink-2); padding: 8px 13px; font-family: var(--font-display); font-weight: 600; font-size: 13px; cursor: pointer; margin-left: -1.5px; white-space: nowrap; min-height: 40px; transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease; }137.seg button:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }138.seg button:last-child { border-radius: 0 8px 8px 0; }139.seg button:hover { background: var(--lime-soft); color: var(--ink); }140.seg button.on { background: var(--ink); color: var(--lime); position: relative; z-index: 1; box-shadow: inset 0 -2.5px 0 var(--lime); }141142/* pastilles de filtres actifs — survol = intention de retrait (danger) */143.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }144.pills .pill { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; font-family: var(--font-mono); text-transform: none; letter-spacing: normal; cursor: pointer; transition: all 0.13s ease; box-shadow: 2px 2px 0 var(--lime-soft); animation: pill-in 0.18s ease; }145@keyframes pill-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }146.pills .pill:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); box-shadow: none; }147.pills .pill:hover .pill-x { opacity: 1; }148.pill-x { font-size: 10px; opacity: 0.6; }149.pills .pill-clear { background: var(--surface); border-color: var(--danger); color: var(--danger); box-shadow: none; }150.pills .pill-clear:hover { background: var(--danger); color: #fff; }151.link-btn { background: none; border: none; padding: 0; color: var(--green); font: inherit; text-decoration: underline; cursor: pointer; }152153.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--ink); border-radius: var(--r-ctl); padding: 11px 20px; font-weight: 700; font-size: 14px; cursor: pointer; min-height: 44px; background: var(--surface); color: var(--ink); transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease, color 0.15s ease; font-family: var(--font-display); letter-spacing: 0.01em; text-decoration: none; }154.btn:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-off-mid); }155.btn:active { transform: translate(2px, 2px); box-shadow: none !important; }156.btn:disabled { opacity: 0.45; pointer-events: none; }157.btn-primary { background: var(--ink); color: var(--lime); box-shadow: 4px 4px 0 rgba(26, 18, 20,0.25); }158.btn-primary:hover { background: var(--green-deep); box-shadow: 4px 4px 0 rgba(26, 18, 20,0.25); }159.btn-ghost { background: transparent; color: var(--ink); }160.btn-ghost:hover { background: var(--lime); color: #fff; box-shadow: 4px 4px 0 rgba(26, 18, 20,0.2); }161162/* ================= Chips ================= */163.chips { display: flex; gap: 8px; margin: 16px 0 4px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }164.chips::-webkit-scrollbar { display: none; }165.chip { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 9px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: var(--font-display); white-space: nowrap; min-height: 42px; transition: transform 0.13s ease, box-shadow 0.13s ease, background 0.13s ease, color 0.13s ease; }166.chip:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-off-mid); }167.chip:active { transform: none; box-shadow: none; }168.chip.on { background: var(--ink); color: var(--lime); box-shadow: 3px 3px 0 var(--lime); }169170/* ================= Results ================= */171.results-head { display: flex; align-items: baseline; gap: 14px; margin: 28px 0 18px; flex-wrap: wrap; }172.results-head h2 { font-size: 22px; text-transform: uppercase; letter-spacing: -0.02em; }173.results-head > span { font-family: var(--font-mono); color: var(--ink-3); font-size: 12px; letter-spacing: 0.06em; }174.results-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }175.sort-ctl select { border: 1.5px solid var(--ink); background: var(--surface); border-radius: var(--r-ctl); padding: 8px 28px 8px 12px; min-height: 36px; font-family: var(--font-mono); font-size: 12px; color: var(--ink); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23141814'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; transition: box-shadow 0.13s ease; }176.sort-ctl select:hover { box-shadow: 2px 2px 0 rgba(26, 18, 20, 0.18); }177.sort-ctl select:focus { outline: none; box-shadow: 3px 3px 0 var(--lime); }178.view-toggle { display: inline-flex; border: 1.5px solid var(--ink); border-radius: var(--r-ctl); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-flat); }179.view-toggle button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 8px 14px; min-height: 36px; cursor: pointer; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink-2); transition: background 0.12s ease, color 0.12s ease; }180.view-toggle button:hover { background: var(--surface-2); color: var(--ink); }181.view-toggle button + button { border-left: 1.5px solid var(--ink); }182.view-toggle button.on { background: var(--ink); color: var(--lime); box-shadow: inset 0 -2.5px 0 var(--lime); }183184.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; padding-bottom: 20px; }185@media (max-width: 640px) { .grid { grid-template-columns: 1fr; gap: 16px; } }186.more-wrap { display: flex; justify-content: center; padding: 8px 0 70px; }187188.card { background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-flat); transition: transform 0.16s ease, box-shadow 0.16s ease; }189.card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-off); }190.card:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }191.card-img { position: relative; aspect-ratio: 16/10.5; background: repeating-linear-gradient(45deg, #eceae3 0 12px, #f3f1ea 12px 24px); overflow: hidden; }192.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }193.card:hover .card-img img { transform: scale(1.05); }194.card-img .noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-3); font-size: 34px; }195.badge { position: absolute; top: 12px; left: 12px; border-radius: 6px; padding: 4px 10px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; background: rgba(255, 255, 255, 0.95); color: var(--ink); border: 1px solid var(--ink); }196.badge.type { background: var(--ink); color: var(--lime); border-color: var(--ink); }197.badge.right { left: auto; right: 12px; background: rgba(255,255,255,0.92); border-color: transparent; }198.card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }199.card-price { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; }200.card-title { font-weight: 600; font-size: 14.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }201.card-meta { color: var(--ink-3); font-size: 12.5px; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; font-family: var(--font-mono); }202.card-meta .sep { width: 4px; height: 4px; background: var(--lime); border: 1px solid var(--ink); border-radius: 1px; transform: rotate(45deg); }203.card-specs { display: flex; gap: 12px; font-size: 12.5px; color: var(--ink-2); font-family: var(--font-mono); }204.card-foot { margin-top: auto; padding-top: 11px; border-top: 1.5px dashed var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; }205.source-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--green-deep); background: var(--lime-soft); border: 1px solid var(--green); border-radius: 4px; padding: 3px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62%; }206.avail { font-size: 11px; color: var(--ink-3); font-weight: 500; text-align: right; font-family: var(--font-mono); }207208/* ================= Skeletons ================= */209@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }210.skel { border-radius: var(--r-card); border: 1.5px solid var(--line); overflow: hidden; background: var(--surface); }211.skel .sk-img, .skel .sk-line { background: linear-gradient(90deg, #eeece5 25%, #f7f5ef 50%, #eeece5 75%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; }212.skel .sk-img { aspect-ratio: 16/10.5; }213.skel .sk-line { height: 14px; border-radius: 4px; margin: 12px 16px; }214.skel .sk-line.short { width: 45%; }215216/* ================= Empty / error ================= */217.notice { text-align: center; padding: 72px 24px; color: var(--ink-2); }218.notice .big { font-size: 44px; margin-bottom: 10px; }219.notice h2 { text-transform: uppercase; }220221/* ================= Detail page ================= */222.detail { padding: 30px 0 90px; }223.crumbs { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }224.crumbs a { border-bottom: 1.5px solid transparent; }225.crumbs a:hover { color: var(--green); border-color: var(--green); }226227/* Ordre DOM = ordre visuel sur TOUS les breakpoints (standard Groupe Ka228 « Ordre des sections — pages détail »). Interdit : `order` / `column-reverse`229 / `display:contents` pour réordonner — un bloc sans `order` retombe à230 order:0 et passe devant la galerie sur mobile (bug corrigé sur Lou-Ka).231 Mobile : colonnes empilées ; desktop : grid 2 colonnes (fiche | annexes). */232.fiche { display: flex; flex-direction: column; gap: 22px; }233.f-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }234@media (min-width: 900px) {235 .fiche { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; }236 .f-col { gap: 26px; }237 .f-col:last-child { position: sticky; top: 88px; }238}239.f-bloc { min-width: 0; }240.f-bloc h2 { font-size: 21px; letter-spacing: -0.02em; margin-bottom: 12px; border-left: 4px solid var(--lime); padding-left: 10px; }241.f-bloc:empty { display: none; }242243/* galerie */244.carousel { position: relative; border-radius: var(--r-card); overflow: hidden; border: 1.5px solid var(--line-strong); background: var(--surface-2); box-shadow: var(--shadow-off-soft); }245.carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; aspect-ratio: 16/11; }246.carousel-track::-webkit-scrollbar { display: none; }247.carousel-track img { flex: 0 0 100%; width: 100%; object-fit: cover; scroll-snap-align: center; cursor: zoom-in; }248.carousel-empty { display: flex; align-items: center; justify-content: center; aspect-ratio: 16/11; font-size: 48px; }249.carousel-count { position: absolute; right: 12px; bottom: 12px; z-index: 2; background: rgba(26, 18, 20, 0.82); color: var(--lime); font-family: var(--font-mono); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }250.carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); background: rgba(255, 255, 255, 0.92); font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }251.carousel-nav.prev { left: 10px; } .carousel-nav.next { right: 10px; }252@media (max-width: 640px) { .carousel-nav { display: none; } }253.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 10px; }254.thumbs button { border: 2px solid var(--line); border-radius: 8px; overflow: hidden; padding: 0; cursor: pointer; aspect-ratio: 4/3; background: #eceae3; transition: border-color 0.12s ease, transform 0.12s ease; }255.thumbs button:hover { transform: translateY(-2px); }256.thumbs button.on { border-color: var(--ink); box-shadow: 3px 3px 0 var(--lime); }257.thumbs img { width: 100%; height: 100%; object-fit: cover; }258@media (max-width: 640px) { .thumbs { display: flex; overflow-x: auto; scrollbar-width: none; } .thumbs::-webkit-scrollbar { display: none; } .thumbs button { flex: 0 0 84px; } }259260/* lightbox */261.lightbox { position: fixed; inset: 0; background: rgba(16, 18, 16, 0.94); z-index: 100; display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: max(16px, env(safe-area-inset-top)) 16px; }262.lightbox img { max-width: 94vw; max-height: 86vh; border-radius: 6px; border: 2px solid var(--lime); object-fit: contain; }263.lb-close { position: absolute; top: 18px; right: 22px; background: none; border: none; color: #fff; font-size: 30px; cursor: pointer; }264.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--lime); font-size: 52px; cursor: pointer; padding: 0 22px; user-select: none; }265.lb-nav.prev { left: 6px; } .lb-nav.next { right: 6px; }266.lb-count { position: absolute; bottom: 24px; color: #c9ccc2; font-family: var(--font-mono); font-size: 13px; }267268/* hero panneau (colonne droite) */269.f-hero { background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow-off-soft); padding: 26px; }270.price-kicker { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--green); }271.price-kicker::before { content: ""; display: inline-block; width: 16px; height: 2px; background: var(--lime); vertical-align: 3px; margin-right: 7px; }272.price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }273.f-hero .price { font-family: var(--font-display); font-size: clamp(30px, 6vw, 40px); font-weight: 700; letter-spacing: -0.03em; }274.type-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; background: var(--lime-soft); color: var(--green-deep); border: 1px solid rgba(179, 32, 43, 0.25); border-radius: 999px; font-size: 12px; font-weight: 600; }275.price-sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }276.f-hero h1 { font-size: clamp(20px, 4.5vw, 24px); margin-top: 10px; }277.f-hero .loc { color: var(--ink-2); font-size: 13.5px; margin-top: 3px; display: flex; align-items: center; gap: 5px; }278.f-hero .loc .ico { color: var(--lime); }279280/* liste de specs — fiche technique premium */281.spec-list { margin: 18px 0 4px; border-top: 1.5px solid var(--line-strong); }282.spec-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 11px; padding: 8.5px 0; border-bottom: 1px dashed var(--line); }283.spec-row:last-child { border-bottom: 1.5px solid var(--line-strong); }284.spec-badge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--lime-soft); color: var(--green-deep); }285.spec-k { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }286.spec-v { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; text-align: right; }287.deal-badge { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 4px; border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; border: 1.5px solid var(--line-strong); }288.deal-ok { background: var(--lime-soft); border-color: var(--green); color: var(--green-deep); }289290.specs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 18px 0; }291.spec { border: 1.5px solid var(--line-strong); border-radius: var(--r-ctl); padding: 9px 11px; background: var(--surface-2); }292.spec b { display: block; font-family: var(--font-display); font-size: 16px; }293.spec span { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }294295.broker { margin: 16px 0; padding: 14px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-ctl); background: var(--surface-2); }296.broker-k { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }297.broker-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-top: 3px; }298.broker-tel { display: inline-block; margin-top: 6px; color: var(--green-deep); font-weight: 600; border-bottom: 1.5px solid var(--lime); }299300.cta { display: block; text-align: center; background: var(--ink); color: var(--lime); font-weight: 700; font-family: var(--font-display); border-radius: var(--r-ctl); padding: 15px; border: 1.5px solid var(--ink); min-height: 48px; box-shadow: 4px 4px 0 rgba(26, 18, 20,0.25); transition: all 0.14s ease; margin-top: 6px; }301.cta:hover { background: var(--lime); color: #fff; }302.cta:active { transform: translate(2px, 2px); box-shadow: none; }303.f-hero .fine { font-size: 11.5px; color: var(--ink-3); margin-top: 14px; text-align: center; font-family: var(--font-mono); letter-spacing: 0.02em; }304305.desc-text { color: var(--ink-2); font-size: 14.5px; white-space: pre-line; line-height: 1.6; margin: 0; }306307/* tableau caractéristiques */308.dtable { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 22px; }309.drow { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }310.drow span { color: var(--ink-3); } .drow b { text-align: right; font-family: var(--font-display); }311312/* tableau pièces */313.rooms-wrap { overflow-x: auto; border: 1.5px solid var(--line-strong); border-radius: var(--r-card); }314table.rooms { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 460px; }315table.rooms th { text-align: left; background: var(--ink); color: var(--paper); padding: 9px 12px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }316table.rooms td { padding: 8px 12px; border-bottom: 1px solid var(--line); }317table.rooms tr:last-child td { border-bottom: none; }318table.rooms tr:nth-child(even) td { background: var(--surface-2); }319320.amenity-row { display: flex; flex-wrap: wrap; gap: 7px; }321.amenity { background: var(--lime-soft); color: var(--green-deep); font-size: 12px; font-weight: 600; border: 1px solid var(--green); border-radius: 999px; padding: 5px 12px; }322323.prix-histo { margin-top: 14px; padding: 10px 14px; border-radius: var(--r-card); border: 1.5px solid var(--line-strong); font-size: 13.5px; background: var(--surface); }324.prix-histo.down { background: var(--lime-soft); border-color: var(--green); color: var(--green-deep); }325326.mini-map { height: 320px; border: 1.5px solid var(--line-strong); border-radius: var(--r-card); overflow: hidden; }327.mini-map .mapview { border: none; border-radius: 0; box-shadow: none; height: 100%; }328329.cta-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 12px; background: rgba(247, 241, 239, 0.94); backdrop-filter: blur(12px); border-top: 2px solid var(--ink); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }330.cta-sticky .cta { flex: 1; margin: 0; }331.cta-sticky-prix { font-family: var(--font-display); font-weight: 700; font-size: 19px; white-space: nowrap; }332@media (min-width: 900px) { .cta-sticky { display: none; } }333@media (max-width: 899px) { .detail { padding-bottom: 84px; } }334.f-foot { margin-top: 26px; }335.fine { font-size: 12px; color: var(--ink-3); }336337/* Box « Aussi publiée sur… » : autres publications de la même propriété */338.dups-note { font-size: 13px; color: var(--ink-3); margin: 4px 0 10px; }339.dups-list { display: flex; flex-direction: column; gap: 8px; }340.dup-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 13px; border: 1.5px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface-2); transition: all 0.14s ease; min-height: 44px; }341.dup-item:hover { border-color: var(--ink); box-shadow: 3px 3px 0 rgba(26, 18, 20, 0.18); }342.dup-src { font-family: var(--font-display); font-weight: 700; font-size: 14px; }343.dup-broker { font-size: 12.5px; color: var(--ink-3); }344.dup-go { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--green-deep); border-bottom: 1.5px solid var(--lime); white-space: nowrap; }345.dup-go .ico { vertical-align: -2px; }346347/* ================= Sources / Agences ================= */348.sources { padding: 44px 0 90px; }349.sources h1 { font-size: clamp(28px, 4vw, 40px); text-transform: uppercase; margin: 10px 0 6px; }350.sources .sub { color: var(--ink-2); margin-bottom: 30px; max-width: 720px; }351.src-wrap { overflow-x: auto; border: 1.5px solid var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow-off-soft); background: var(--surface); }352.src-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 760px; }353.src-table th { text-align: left; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); padding: 14px 18px; border-bottom: 1.5px solid var(--ink); background: var(--surface-2); }354.src-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }355.src-table tr:last-child td { border-bottom: none; }356.src-table tr:hover td { background: var(--surface-2); }357.src-table a { color: var(--green-deep); font-weight: 600; border-bottom: 1.5px solid var(--lime); }358.pill.ok { background: var(--lime); color: #fff; border: 1px solid var(--ink); border-radius: 4px; padding: 3px 10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; }359.pill.todo { background: var(--amber-soft); color: #8a5a12; border: 1px solid var(--amber); border-radius: 4px; padding: 3px 10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; }360.count-pill { font-weight: 700; font-family: var(--font-display); font-size: 16px; border-bottom: 1.5px solid var(--lime); }361362/* ================= Stats ================= */363.stats-page { padding: 44px 0 90px; }364.stats-title { font-size: clamp(30px, 4.6vw, 46px); text-transform: uppercase; margin: 10px 0 6px; }365.stats-page .sub { color: var(--ink-2); max-width: 660px; margin-bottom: 30px; }366.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 30px; }367.tile { background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); padding: 18px 20px; box-shadow: 3px 3px 0 rgba(26, 18, 20, 0.1); }368.tile-v { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.03em; line-height: 1.05; }369.tile-k { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-top: 6px; }370.hero-tile { background: var(--ink); color: var(--lime); border-color: var(--ink); }371.hero-tile .tile-k { color: rgba(15, 107, 79, 0.7); }372.viz-card { background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow-off-soft); padding: 26px 28px 20px; margin-bottom: 22px; min-width: 0; max-width: 100%; overflow-x: auto; }373/* mobile : une table large ne doit JAMAIS déborder la page (grid blowout) —374 chaque bloc de la page Stats défile horizontalement en interne au besoin */375.stats-page section, .stats-page > * { min-width: 0; max-width: 100%; }376@media (max-width: 640px) { .stats-page .viz-card { padding: 18px 14px 14px; } }377.viz-card h2 { font-size: 19px; text-transform: uppercase; letter-spacing: -0.01em; }378.viz-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 20px; }379.viz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }380@media (max-width: 900px) { .viz-grid { grid-template-columns: 1fr; } }381.hbars { display: flex; flex-direction: column; gap: 7px; }382.hbar-row { display: grid; grid-template-columns: minmax(96px, 180px) 1fr auto; gap: 12px; align-items: center; min-height: 26px; }383.hbar-label { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }384.hbar-label a { border-bottom: 1.5px solid var(--lime); }385.hbar-label a:hover { color: var(--green-deep); }386.hbar-track { background: var(--surface-2); border-radius: 0 4px 4px 0; height: 18px; overflow: hidden; }387.hbar-fill { display: block; height: 100%; background: var(--green); border-radius: 0 4px 4px 0; min-width: 2px; transition: background 0.12s ease; }388.hbar-row:hover .hbar-fill { background: var(--ink); box-shadow: inset 0 0 0 2px var(--lime); }389.hbar-value { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; white-space: nowrap; }390.hbar-value em { font-style: normal; font-weight: 500; color: var(--ink-3); }391.viz-table { margin-top: 4px; }392.viz-table table { width: 100%; border-collapse: collapse; font-size: 13px; }393.viz-table th { text-align: left; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); padding: 6px 10px; border-bottom: 1.5px solid var(--ink); }394.viz-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); }395.stats-foot { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; margin-top: 6px; }396397/* ---- Iconographie maison (Icons.tsx) ---- */398.ico { vertical-align: -3px; flex-shrink: 0; }399.card-specs span { display: inline-flex; align-items: center; gap: 5px; }400.card-specs .ico { color: var(--green); }401.badge.right .ico { vertical-align: -2px; }402.noimg .ico, .carousel-empty .ico { color: var(--ink-3); }403.notice .big .ico { color: var(--lime); }404.amenity .ico { color: var(--green); margin-right: 2px; }405.q-badge .ico { vertical-align: -3px; margin-right: 2px; }406.q-bar-label { display: inline-flex; align-items: center; gap: 7px; }407.q-bar-label .ico { color: var(--green); }408.mm-ico .ico { vertical-align: -4px; }409.mv-noimg svg { color: var(--ink-3); }410.broker-tel .ico { vertical-align: -2.5px; }411.cta .ico { vertical-align: -2.5px; margin-left: 3px; }412.prix-histo .ico { vertical-align: -3.5px; }413.spec { position: relative; }414.spec-ico { position: absolute; top: 10px; right: 10px; color: var(--lime); opacity: 0.85; }415416/* ---- Survalorisation vs Vrai-Prix (jauges divergentes) ---- */417.vpg-axis { display: grid; grid-template-columns: 220px 1fr 74px 90px; gap: 10px; margin-bottom: 2px; }418.vpg-axis > div { grid-column: 2; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }419.vpg-row { display: grid; grid-template-columns: 220px 1fr 74px 90px; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); }420.vpg-row:last-of-type { border-bottom: none; }421.vpg-name { font-size: 13.5px; font-weight: 600; }422.vpg-name em { display: block; font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }423.vpg-track { position: relative; height: 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }424.vpg-zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; background: var(--line-strong); opacity: 0.5; }425.vpg-band { position: absolute; top: 3px; bottom: 3px; background: rgba(26, 18, 20, 0.14); border-radius: 999px; }426.vpg-median { position: absolute; top: 1px; bottom: 1px; width: 4px; margin-left: -2px; border-radius: 2px; }427.vpg-median.vp-sur { background: var(--lime); }428.vpg-median.vp-juste { background: #d9a942; }429.vpg-median.vp-sous { background: #4c8b4f; }430.vpg-value { font-family: var(--font-display); font-weight: 700; font-size: 15px; text-align: right; }431.vpg-value.vp-sur { color: var(--green); }432.vpg-value.vp-juste { color: #a97b1e; }433.vpg-value.vp-sous { color: #3c7440; }434.vpg-split { display: flex; height: 10px; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }435.vps-sous { background: #7fb283; }436.vps-juste { background: #d9cfc7; }437.vps-sur { background: var(--lime); }438.vpg-sep { border-top: 1.5px solid var(--line-strong); margin: 4px 0; }439.vpg-legend { display: flex; gap: 16px; margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); flex-wrap: wrap; }440.vpg-legend i { display: inline-block; width: 14px; height: 9px; border-radius: 999px; margin-right: 5px; vertical-align: -1px; }441@media (max-width: 780px) { .vpg-row { grid-template-columns: 1fr 64px; } .vpg-track { grid-column: 1 / -1; } .vpg-split { grid-column: 1 / -1; } .vpg-axis { display: none; } }442443/* ================= Carte (Ka Maps — framework partagé Groupe Ka) =========444 Jetons du design system appliqués au chrome de la carte, mêmes réglages445 que Lou-Ka Maps. */446.mapview .ka-map, .lmap3d .ka-map {447 --ka-accent: var(--accent);448 --ka-on-accent: var(--on-accent);449 --ka-surface: var(--surface);450 --ka-ink: var(--ink);451 --ka-line: var(--line-strong);452 --ka-radius: var(--r-ctl);453 --ka-shadow: 0 8px 24px rgba(26, 18, 20, 0.14);454 --ka-font: var(--font-body);455}456.mapview { position: relative; overflow: hidden; }457.mapview .ka-map { position: absolute; inset: 0; }458459/* mini-carte 3D de la fiche (Emplacement) — bâtiment de l'annonce en cerise */460.lmap3d {461 position: relative; height: 340px; border: 1.5px solid var(--ink);462 border-radius: var(--r-card); box-shadow: var(--shadow-off-soft);463 overflow: hidden; background: var(--surface-2);464}465.lmap3d-skel {466 background: linear-gradient(90deg, #eeece5 25%, #f7f5ef 50%, #eeece5 75%);467 background-size: 800px 100%; animation: shimmer 1.4s infinite linear;468}469.lmap3d-legende {470 position: absolute; left: 10px; bottom: 10px; z-index: 5;471 display: inline-flex; align-items: center; gap: 6px;472 padding: 4px 10px; border: 1.5px solid var(--ink);473 border-radius: 999px; background: var(--surface);474 font-size: 10.5px; font-weight: 500; color: var(--ink-2);475 pointer-events: none;476}477.lmap3d-legende i {478 width: 10px; height: 10px; border-radius: 3px;479 background: var(--accent); border: 1px solid rgba(26, 18, 20, 0.25);480}481@media (max-width: 780px) { .lmap3d { height: 280px; } }482483/* ================= Carte ================= */484.map-split { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 18px; height: calc(100dvh - 200px); min-height: 420px; }485.map-list { overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding-right: 4px; scrollbar-width: thin; }486.map-list .card { margin: 0; flex: 0 0 auto; }487/* sync liste ↔ carte : fiche sélectionnée depuis une pastille de la carte */488.map-card { border-radius: var(--r-card); }489.map-card-sel .card { border-color: var(--accent); box-shadow: 4px 4px 0 var(--accent-soft), 0 0 0 2px var(--accent); }490.mapwrap { position: relative; width: 100%; height: 100%; }491.mapview { width: 100%; height: 100%; border: 1.5px solid var(--line-strong); border-radius: var(--r-card); box-shadow: var(--shadow-off-soft); overflow: hidden; background: var(--surface-2); }492.mv-brand { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 5px 11px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 999px; box-shadow: var(--shadow-off-soft); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-2); pointer-events: none; }493.mv-brand b { color: var(--ink); }494.mv-brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px var(--lime-soft); }495.mv-legend { position: absolute; bottom: 26px; left: 10px; z-index: 3; display: flex; flex-direction: column; gap: 4px; padding: 8px 11px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line); border-radius: var(--r-ctl); font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); pointer-events: none; }496.mv-legend span { display: flex; align-items: center; gap: 7px; }497.mv-lg-pill { display: inline-block; width: 22px; height: 12px; border-radius: 999px; background: #fff; border: 1.5px solid rgba(26, 18, 20, 0.35); }498.mv-lg-deal { background: var(--lime); border-color: var(--green); }499.mv-credit { position: absolute; bottom: 8px; right: 8px; z-index: 3; padding: 4px 10px; background: rgba(255, 255, 255, 0.9); border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-2); pointer-events: none; }500.mv-credit b { color: var(--ink); }501.mini-map .mv-brand, .mini-map .mv-legend { display: none; }502.mini-map .mapwrap { height: 100%; }503504/* ---- carte propriété (fiche) : marqueur pulsant + anneaux piéton ---- */505.pm-wrap { position: relative; width: 100%; height: 100%; }506.pm-marker { display: flex; flex-direction: column; align-items: center; }507.pm-pill { padding: 5px 13px; background: #fff; border: 1.5px solid var(--line-strong); border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); box-shadow: var(--shadow-off-soft); white-space: nowrap; margin-bottom: 4px; }508.pm-pill-deal { background: var(--lime); border-color: var(--green); color: #fff; }509.pm-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--lime); border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(26, 18, 20, 0.4); }510.pm-pulse { position: absolute; bottom: -8px; width: 30px; height: 30px; border-radius: 50%; background: var(--lime); opacity: 0.35; animation: pm-pulse 2s ease-out infinite; }511@keyframes pm-pulse { 0% { transform: scale(0.5); opacity: 0.45; } 80% { transform: scale(1.9); opacity: 0; } 100% { opacity: 0; } }512.pm-rings-legend { position: absolute; bottom: 8px; left: 8px; z-index: 3; display: flex; gap: 12px; padding: 4px 10px; background: rgba(255, 255, 255, 0.9); border-radius: 999px; font-family: var(--font-mono); font-size: 10px; color: var(--green); pointer-events: none; }513.mini-map .pm-wrap .mv-credit { display: block; }514.map-loading { display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-family: var(--font-mono); font-size: 13px; }515@media (max-width: 780px) { .map-split { grid-template-columns: 1fr; height: calc(100dvh - 230px); } .map-list { display: none; } .results-tools { width: 100%; justify-content: space-between; } }516.maplibregl-popup-content { padding: 0; border-radius: var(--r-card); overflow: hidden; border: 1.5px solid var(--line-strong); box-shadow: var(--shadow-off); font-family: var(--font-body); }517.maplibregl-popup-close-button { font-size: 18px; padding: 2px 8px; color: var(--paper); z-index: 2; text-shadow: 0 0 4px rgba(26, 18, 20, 0.8); }518.mv-pop img, .mv-noimg { width: 100%; height: 130px; object-fit: cover; }519.mv-noimg { display: flex; align-items: center; justify-content: center; font-size: 34px; background: var(--surface-2); }520.mv-pop-body { padding: 10px 12px 12px; }521.mv-pop-price { font-family: var(--font-display); font-weight: 700; font-size: 18px; }522.mv-pop-title { font-size: 13px; color: var(--ink-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }523.mv-pop-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); margin-top: 6px; }524.mv-pop-src { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }525.mv-pop-cta { display: block; margin-top: 10px; padding: 8px 10px; text-align: center; background: var(--ink); color: #fff; border-radius: var(--r-ctl); font-weight: 600; font-size: 13px; }526.mv-pop-cta:hover { background: var(--green-deep); }527.mv-pop-deal { display: inline-block; margin-left: 6px; padding: 2px 8px; vertical-align: 3px; background: var(--lime); color: #fff; border-radius: 999px; font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; }528.maplibregl-ctrl-attrib { font-size: 10px; }529530/* ================= Menu mobile ================= */531.menu-btn { display: none; position: relative; z-index: 60; width: 44px; height: 44px; margin-left: auto; border: 1.5px solid var(--ink); border-radius: var(--r-ctl); background: var(--surface); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; box-shadow: 3px 3px 0 rgba(26, 18, 20, 0.15); transition: box-shadow 0.15s ease, transform 0.15s ease; }532.menu-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(26, 18, 20,0.15); }533.menu-btn span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }534.menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }535.menu-btn.open span:nth-child(2) { opacity: 0; }536.menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }537/* KA Nav v2 (2026-08-25) : panneau PLEIN ECRAN fixed inset:0 - visible peu538 importe le scroll (l'ancien dropdown absolute 480px clippait/se coupait). */539.mobile-menu {540 display: none; position: fixed; inset: 0;541 background: var(--paper);542 padding: 76px 16px calc(24px + env(safe-area-inset-bottom));543 overflow-y: auto; overscroll-behavior: contain;544}545.mobile-menu.open { display: block; animation: mm-in 0.16s ease; }546@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }547/* burger masque a l'ouverture : la fermeture passe par le X fixe du panneau */548.header:has(.mobile-menu.open) .menu-btn { visibility: hidden; }549/* bouton de fermeture du panneau : fixe en haut a droite du viewport */550.mm-close {551 position: fixed; top: 10px; right: 14px; z-index: 2;552 width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;553 border: 1.5px solid var(--ink); border-radius: 999px;554 background: var(--ink); color: var(--paper);555 font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0;556}557/* verrou du scroll d'arriere-plan quand le menu est ouvert (CSS pur) */558html:has(.mobile-menu.open) { overflow: hidden; }559.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; }560.mobile-menu.open .mm-link { opacity: 1; transform: translateY(0); }561.mm-link.active { color: var(--green); }562.mm-ico { width: 26px; text-align: center; font-size: 17px; }563.mm-arrow { margin-left: auto; opacity: 0.25; }564.mm-link:active { background: var(--lime-soft); border-radius: var(--r-ctl); }565.mm-foot { padding: 12px 10px 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.04em; }566.mm-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay, 800); background: rgba(26, 18, 20, 0.35); backdrop-filter: blur(2px); }567@media (max-width: 760px) { .menu-btn { display: flex; } .nav { display: none; } }568569/* ================= Footer =================570 Remplacé par le footer commun Groupe KA (ka/KaFooter.tsx — styles .ka-footer571 dans ka/tokens.css). */572573/* ================= Mobile : feuille de filtres + FAB ================= */574.sheet-head { display: none; }575.sheet-handle { display: none; }576.sheet-apply { display: none; }577.sheet-backdrop { display: none; }578.fab { display: none; }579.fab-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--lime); color: #fff; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 2px; }580@media (max-width: 640px) {581 .header-inner { height: 56px; }582 .brand { font-size: 21px; }583 .hero h1 { font-size: clamp(30px, 9.4vw, 44px); }584 .hero p.lede { font-size: 15px; }585 .stat-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin-right: -16px; padding-right: 16px; }586 .stat-row::-webkit-scrollbar { display: none; }587 .stat-chip { flex: 0 0 auto; white-space: nowrap; }588 .filterbar { display: none; }589 .filterbar.open .f-primary { flex-direction: column; }590 .filterbar.open .f-ctl select { max-width: none; width: 100%; }591 .filterbar.open .f-more { display: none; }592 .filterbar.open { display: flex; flex-direction: column; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal, 900); margin: 0; border-radius: 20px 20px 0 0; border-width: 2px 0 0 0; max-height: 82dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -16px 48px rgba(16, 18, 16, 0.35); animation: sheet-up 0.24s cubic-bezier(0.2, 0.9, 0.3, 1); }593 @keyframes sheet-up { from { transform: translateY(30%); opacity: 0.4; } to { transform: none; opacity: 1; } }594 .filterbar.open .sheet-handle { display: block; flex: none; width: 44px; height: 5px; border-radius: 999px; background: var(--line); margin: 0 auto 2px; }595 .filterbar.open .sheet-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 17px; text-transform: uppercase; position: sticky; top: -10px; background: var(--surface); padding: 6px 0 8px; border-bottom: 1.5px solid var(--line); margin-bottom: 2px; z-index: 1; }596 .sheet-close { border: 1.5px solid var(--ink); background: var(--surface); border-radius: 50%; width: 36px; height: 36px; font-size: 15px; cursor: pointer; line-height: 1; }597 .filterbar.open .sheet-apply { display: flex; width: 100%; min-height: 50px; position: sticky; bottom: 0; z-index: 1; box-shadow: 0 -14px 18px -12px rgba(16, 18, 16, 0.4), 5px 5px 0 var(--lime); }598 .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(16, 18, 16, 0.45); backdrop-filter: blur(2px); }599 .fab { display: flex; align-items: center; gap: 8px; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 80; background: var(--ink); color: var(--lime); border: 1.5px solid var(--ink); border-radius: 999px; padding: 13px 24px; font-family: var(--font-display); font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 8px 24px rgba(16, 18, 16, 0.35), 4px 4px 0 rgba(15, 107, 79, 0.55); }600 .fab:active { transform: translateX(-50%) scale(0.97); }601 .results-head { margin-top: 20px; }602 .chips { margin-right: -16px; padding-right: 16px; }603 .notice { padding: 48px 16px; }604}605@media (max-width: 900px) { .f-search input, .f-native, .f-ctl select { font-size: 16px; } }606607/* --- Sources : bannières → sous-agences -------------------------------- */608.franchise-list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }609.franchise { border: 2px solid var(--ink); background: var(--surface); box-shadow: var(--shadow-off-soft); }610.franchise-head {611 width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px;612 background: none; border: 0; cursor: pointer; font-family: var(--font-display);613 font-size: 16px; font-weight: 600; color: var(--ink); text-align: left;614}615.franchise-head:hover { background: var(--surface-2); }616.fh-caret { color: var(--green); width: 14px; }617.fh-name { flex: 1; }618.fh-sub { font-size: 12px; font-weight: 500; color: var(--ink-3); font-family: var(--font-mono); }619.fh-count {620 font-family: var(--font-mono); font-weight: 700; background: var(--ink);621 color: var(--lime); padding: 3px 10px; min-width: 64px; text-align: right;622}623.subagency-list { list-style: none; margin: 0; padding: 0 16px 10px 40px; border-top: 1px solid var(--line); }624.subagency-list li {625 display: flex; align-items: center; justify-content: space-between; gap: 12px;626 padding: 8px 0; border-bottom: 1px dotted var(--line); font-size: 14px;627}628.subagency-list li:last-child { border-bottom: 0; }629.sa-name { color: var(--ink-2); }630631/* --- Pagination (accueil) ---------------------------------------------- */632.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;633 gap: 6px; margin: 32px 0 8px; }634.pager-btn {635 font-family: var(--font-mono); font-size: 14px; min-width: 42px; min-height: 42px; padding: 8px 12px;636 border: 2px solid var(--ink); border-radius: 8px; background: var(--surface); color: var(--ink);637 cursor: pointer; box-shadow: 3px 3px 0 rgba(26, 18, 20, 0.14);638 transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;639}640.pager-btn:hover:not(:disabled):not(.on) { background: var(--lime-soft); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(26, 18, 20, 0.2); }641.pager-btn:active:not(:disabled) { transform: none; box-shadow: none; }642.pager-btn.on { background: var(--ink); color: var(--lime); font-weight: 700; box-shadow: 3px 3px 0 var(--lime); }643.pager-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }644.pager-gap { padding: 0 4px; color: var(--ink-3); }645.pager-info { width: 100%; text-align: center; margin-top: 8px; font-size: 12px;646 color: var(--ink-3); font-family: var(--font-mono); }647648649650/* --- Le quartier (census / proximité / chaleur / crime) — porté de Lou-Ka --- */651/* --- Section « Le quartier » (fiche) --------------------------------------- */652.quartier { margin-top: 34px; }653.quartier h2 { font-size: 24px; letter-spacing: -0.02em; }654.q-sub { color: var(--ink-3); font-size: 13px; margin: 4px 0 16px; }655.q-grid {656 display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;657}658.q-grid { grid-template-columns: repeat(2, 1fr); }659.q-cell {660 background: var(--surface); border: 1.5px solid var(--line-strong);661 border-radius: var(--r-card); padding: 12px 14px; box-shadow: var(--shadow-flat);662}663.q-val { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }664.q-label { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);665 text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }666.q-prox { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }667.q-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; }668.q-bar-label { flex: 0 0 150px; color: var(--ink-2); }669.q-bar-label { flex-basis: 120px; font-size: 12px; }670.q-bar-track {671 flex: 1; height: 10px; background: var(--surface-2);672 border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden;673}674.q-bar-fill { display: block; height: 100%; background: var(--green); border-radius: 999px; }675.q-bar-num { flex: 0 0 30px; text-align: right; font-family: var(--font-mono);676 font-size: 11.5px; font-weight: 700; }677.q-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }678.q-badge {679 display: inline-flex; align-items: center; gap: 6px;680 border: 1.5px solid var(--line-strong); border-radius: 999px;681 padding: 7px 13px; font-size: 12.5px; background: var(--surface);682}683.q-badge.cool { background: var(--lime-soft); border-color: var(--green); color: var(--green-deep); }684.q-badge.hot { background: var(--amber-soft); border-color: var(--amber); color: #8a5a12; }685.quartier .fine { margin-top: 10px; }686.q-cell { padding: 9px 11px; }687.q-val { font-size: 16px; }688.q-bar { gap: 8px; font-size: 12px; }689.q-bar-track { height: 8px; }690.q-badge-sub { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 400; margin-left: 4px; }691692/* --- Vrai-Prix : estimation de valeur ---------------------------------- */693.vraiprix { border: 2px solid var(--ink); background: var(--surface-2);694 box-shadow: var(--shadow-off-soft); padding: 14px; margin: 14px 0; }695.vp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }696.vp-logo { font-family: var(--font-display); font-weight: 700; color: var(--green-deep);697 letter-spacing: -.3px; }698.vp-conf { font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; border: 1px solid var(--ink); }699.vp-conf-A { background: var(--lime); color: #fff; } .vp-conf-B { background: var(--lime-soft); }700.vp-conf-C { background: var(--amber-soft); } .vp-conf-D { background: #f0d9d9; }701.vp-k { font-size: 11px; color: var(--ink-3); text-transform: uppercase;702 letter-spacing: .5px; margin-top: 8px; }703.vp-value { font-family: var(--font-display); font-size: 26px; font-weight: 700;704 letter-spacing: -1px; color: var(--ink); }705.vp-range { font-size: 12px; color: var(--ink-2); font-family: var(--font-mono); }706/* jauge Vrai-Prix : fourchette P10–P90 + marqueurs estimation / prix demandé */707.vp-gauge { margin-top: 10px; }708.vp-gauge-track { position: relative; height: 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); overflow: hidden; }709.vp-gauge-band { position: absolute; inset: 3px 6%; background: linear-gradient(90deg, var(--lime-soft), rgba(15, 107, 79, 0.35), var(--lime-soft)); border-radius: 999px; }710.vp-gauge-est { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--lime); border-radius: 2px; }711.vp-gauge-ask { position: absolute; top: 2px; bottom: 2px; width: 4px; margin-left: -2px; background: var(--ink); border-radius: 2px; }712.vp-gauge-ends { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 4px; }713.vp-gauge-legend { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); margin-top: 5px; }714.vp-dot-est, .vp-dot-ask { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }715.vp-dot-est { background: var(--lime); }716.vp-dot-ask { background: var(--ink); }717.vp-delta { font-size: 13px; margin-top: 8px; padding: 6px 8px; border-radius: var(--r-ctl); }718.vp-over { background: #f6e2e2; color: #8a2b2b; }719.vp-under { background: #e2f0e6; color: #1c5c41; }720.vp-fair { background: var(--surface); color: var(--ink-2); }721.vp-link { display: block; text-align: center; margin-top: 10px; font-weight: 700;722 font-size: 13px; padding: 8px; background: var(--green-deep); color: #fff;723 text-decoration: none; }724.vp-link:hover { background: var(--green); }725726/* =============================================================================727 Harmonisation Groupe KA — header (badge + compte KA ID), pages Profil,728 Contact et légales. Le socle vient de ka/tokens.css.729============================================================================= */730731/* ---- Header : badge « Un service Groupe KA » + zone compte ---- */732.header-inner .gk-badge { flex: none; }733@media (max-width: 900px) { .header-inner .gk-badge { display: none; } }734.header-acct { display: flex; align-items: center; gap: 10px; flex: none; }735.ka-auth { display: flex; align-items: center; gap: 10px; }736.ka-login {737 display: inline-flex; align-items: center; gap: 6px; min-height: 40px;738 padding: 8px 15px; border: 1.5px solid var(--ink); border-radius: 999px;739 background: var(--surface); color: var(--ink); cursor: pointer;740 font-family: var(--font-display); font-weight: 600; font-size: 13.5px;741 box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.15);742 transition: transform 0.13s ease, box-shadow 0.13s ease, background 0.15s ease;743}744.ka-login b { background: var(--ink); color: var(--accent); border-radius: 5px; padding: 0 6px 1px; transform: rotate(-2deg); transition: transform 0.15s ease; }745.ka-login:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(20, 24, 20, 0.2); }746.ka-login:hover b { transform: rotate(0); }747.ka-login:active { transform: translate(2px, 2px); box-shadow: none; }748.ka-signup { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }749.ka-signup:hover { color: var(--accent-deep); }750@media (max-width: 1100px) { .header-acct .ka-signup { display: none; } }751.ka-acct {752 display: inline-flex; align-items: center; gap: 8px; min-height: 40px;753 padding: 6px 14px; border: 1.5px solid var(--ink); border-radius: 999px;754 background: var(--surface); font-family: var(--font-display);755 font-weight: 600; font-size: 13.5px; color: var(--ink);756 max-width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;757}758.ka-acct:hover, .ka-acct.active { background: var(--ink); color: var(--accent); }759.ka-acct-pic { width: 24px; height: 24px; border-radius: 50%; flex: none; border: 1px solid var(--line); }760@media (max-width: 760px) {761 .header-acct { margin-left: auto; }762 .menu-btn { margin-left: 0; }763 .ka-login { min-height: 44px; }764}765@media (max-width: 380px) { .header-acct { display: none; } } /* → menu mobile */766767/* ---- Menu mobile : compte + badge groupe ---- */768.mm-auth { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 15px 10px; border-bottom: 1.5px dashed var(--line); }769.mm-auth .ka-login { min-height: 44px; }770.mm-foot p { margin: 10px 0 0; }771772/* ---- Générique : lede (Profil / Contact) ---- */773.lede { color: var(--ink-2); font-size: 15.5px; max-width: 640px; }774775/* ================= Page Profil (KA ID) ================= */776.profil { padding: 44px 0 90px; }777.profil h1 { font-size: clamp(28px, 4.6vw, 44px); margin: 10px 0 24px; letter-spacing: -0.03em; }778.profil .lede { margin-bottom: 22px; }779.profil .notice { padding: 60px 0; }780781/* Carte de membre — encre + cerise */782.pc {783 position: relative; overflow: hidden; max-width: 460px;784 background: var(--ink); color: var(--paper);785 border: 1.5px solid var(--ink); border-radius: var(--r-card);786 box-shadow: var(--shadow-off-soft); padding: 22px 26px 0;787}788.pc-watermark {789 position: absolute; right: -18px; bottom: 14px; font-family: var(--font-display);790 font-weight: 700; font-size: 150px; line-height: 1; letter-spacing: -0.06em;791 color: rgba(245, 243, 238, 0.05); pointer-events: none; user-select: none;792}793.pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }794.pc-brand { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; }795.pc-ka { display: inline-block; background: var(--accent); color: var(--on-accent); border-radius: 6px; padding: 0 7px 2px; margin-left: 3px; transform: rotate(-2deg); }796.pc-label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(245, 243, 238, 0.5); }797.pc-id-block { margin: 26px 0 22px; display: flex; flex-direction: column; gap: 4px; }798.pc-id-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent); }799.pc-id { font-family: var(--font-mono); font-weight: 700; font-size: clamp(17px, 4.4vw, 22px); letter-spacing: 0.04em; word-break: break-all; }800.pc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-bottom: 18px; }801.pc-holder { display: flex; flex-direction: column; gap: 3px; min-width: 0; }802.pc-holder-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }803.pc-role-badge { align-self: flex-start; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 2px 9px; }804.pc-holder-since { font-family: var(--font-mono); font-size: 10.5px; color: rgba(245, 243, 238, 0.5); letter-spacing: 0.06em; }805.pc-avatar { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--accent); flex: none; object-fit: cover; }806.pc-strip { display: flex; align-items: flex-end; gap: 5px; margin: 0 -26px; padding: 9px 18px; background: rgba(15, 107, 79, 0.14); border-top: 1px solid rgba(15, 107, 79, 0.4); overflow: hidden; }807.pc-strip i { display: block; width: 3px; border-radius: 1px; background: var(--accent); opacity: 0.75; }808.pc-strip i:nth-child(3n) { height: 14px; opacity: 0.4; }809.pc-strip i:nth-child(3n+1) { height: 9px; }810.pc-strip i:nth-child(3n+2) { height: 17px; opacity: 0.95; }811.pc-copy { margin-top: 16px; }812.pc-copy.ok { background: var(--ink); color: var(--accent); }813814.profil-grid {815 display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));816 gap: 12px; margin-top: 28px; max-width: 720px;817}818.pg-item { background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-ctl); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }819.pg-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }820.pg-value { font-weight: 600; font-size: 14.5px; word-break: break-word; }821.pg-value.mono { font-family: var(--font-mono); color: var(--accent-deep); }822.profil-note { max-width: 640px; color: var(--ink-2); font-size: 13.5px; margin-top: 22px; }823.profil-note a { text-decoration: underline; text-underline-offset: 3px; }824.profil-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }825826/* Profil hub Groupe KA (lecture seule) */827.hub-profile { margin-top: 34px; padding-top: 24px; border-top: 1.5px solid var(--line-strong); max-width: 720px; display: flex; flex-direction: column; gap: 14px; }828.hub-profile h3 { font-size: 18px; }829.hub-profile .hub-bio { color: var(--ink-2); font-size: 14px; margin: 0; max-width: 560px; }830.hub-profile .pub-meta { display: flex; gap: 8px; flex-wrap: wrap; }831.hub-profile .stat-chip { display: inline-flex; align-items: center; gap: 6px; }832.hub-profile a.stat-chip:hover { background: var(--accent-soft); }833.hub-hint { color: var(--ink-3); font-size: 12.5px; margin: 0; }834835/* ================= Pages légales ================= */836.legal { padding: 48px 0 80px; max-width: 780px; }837.legal h1 { font-size: clamp(28px, 4.6vw, 44px); margin: 8px 0 6px; }838.legal .legal-meta { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; margin: 0 0 26px; }839.legal h2 { font-size: 20px; margin: 30px 0 8px; border-left: 4px solid var(--accent); padding-left: 10px; }840.legal p, .legal li { color: var(--ink-2); font-size: 14.5px; }841.legal ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }842.legal a { text-decoration: underline; text-underline-offset: 3px; }843.legal b { color: var(--ink); }844845/* ================= Page Contact (écosystème Groupe KA) ================= */846.contact { padding: 48px 0 90px; }847.contact h1 { font-size: clamp(30px, 5vw, 52px); margin: 12px 0 14px; text-transform: uppercase; letter-spacing: -0.03em; }848.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 28px 0 6px; max-width: 900px; }849.contact-card {850 display: flex; flex-direction: column; gap: 8px; min-height: var(--touch, 44px);851 background: var(--surface); border: 1.5px solid var(--ink);852 border-radius: var(--r-card); padding: 18px 20px;853 box-shadow: var(--shadow-off-soft);854 transition: transform 0.15s ease, box-shadow 0.15s ease;855}856.contact-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off); }857.contact-role { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--green); }858.contact-mail { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 2vw, 17px); word-break: break-all; border-bottom: 2px solid var(--accent); align-self: flex-start; }859.contact-disclaimer { max-width: 720px; margin: 24px 0 0; padding: 14px 16px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--ink-2); font-size: 13.5px; }860.contact-disclaimer b { color: var(--ink); }861.contact-hub { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }862.contact-sites { margin-top: 46px; }863.contact-sites h2 { font-size: 21px; text-transform: uppercase; margin-bottom: 14px; }864.contact-sites ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }865.contact-sites a { display: flex; flex-direction: column; gap: 3px; min-height: var(--touch, 44px); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-ctl); padding: 12px 14px; transition: transform 0.14s ease, box-shadow 0.14s ease; }866.contact-sites a:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }867.contact-sites b { font-family: var(--font-display); font-size: 15px; }868.contact-sites span { font-size: 12px; color: var(--ink-3); }869@media (max-width: 480px) {870 .header-inner { gap: 10px; }871 .ka-login { font-size: 12px; padding: 6px 10px; gap: 4px; min-height: 44px; }872}873874/* Bulle KA Agent : sur mobile, remontée au-dessus de la barre CTA collante des875 fiches (sinon elle chevauche le bouton « Voir chez … »). */876@media (max-width: 899px) {877 .kaa-btn {878 bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;879 }880}881882/* Footer commun KA : zones tactiles ≥ 44 px pour les petits liens (Ka2, Ka4…)883 — padding compensé par une marge négative : aucun changement visuel. */884.ka-footer .sites a, .ka-footer .legal a, .ka-footer .contacts a {885 display: inline-block; padding: 12px 8px; margin: -12px -8px;886}887888/* ================= Qualité des annonces / images ================= */889/* Image de secours par TYPE DE BIEN (jamais d'icône d'image cassée) */890.type-fallback {891 display: flex; flex-direction: column; align-items: center; justify-content: center;892 gap: 9px; width: 100%; height: 100%; min-height: 120px;893 background:894 radial-gradient(circle at 78% 18%, rgba(15, 107, 79, 0.14), transparent 52%),895 repeating-linear-gradient(45deg, #f3ece9 0 14px, #f7f1ef 14px 28px);896 color: var(--accent-deep);897}898.type-fallback .ico { opacity: 0.75; }899.type-fallback span {900 font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;901 text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3);902}903.carousel-empty .type-fallback { aspect-ratio: 16/11; }904905/* légende de photo (étiquette de pièce de la source) */906.carousel-caption {907 position: absolute; left: 12px; bottom: 12px; z-index: 2; max-width: 60%;908 background: rgba(26, 18, 20, 0.82); color: #f5f3ee;909 font-family: var(--font-mono); font-size: 11px; font-weight: 600;910 padding: 4px 10px; border-radius: 999px;911 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;912}913914/* mention loyer mensuel (transaction = location) */915.per-month { font-size: 0.55em; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }916917/* lightbox : l'image zoomable ne doit pas déclencher le scroll de la page */918.lightbox img { user-select: none; -webkit-user-drag: none; }919920/* ---- Stats : qualité des données ---- */921.q-table-wrap { overflow-x: auto; }922.q-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }923.q-table th { text-align: left; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); padding: 6px 10px; border-bottom: 1.5px solid var(--ink); }924.q-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); }925.q-table .num { text-align: right; font-family: var(--font-mono); }926.q-meter { display: inline-block; width: 74px; height: 9px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; vertical-align: -1px; margin-right: 7px; }927.q-meter i { display: block; height: 100%; background: var(--green); }928929930/* ---- Criminalité détaillée SPVM (bloc quartier) ---- */931.q-crime { width: 100%; }932.q-crime-cats { list-style: none; margin: 8px 0 0; padding: 0; }933.q-crime-cats li { display: flex; align-items: center; gap: 8px;934 padding: 3px 0; font-size: 12.5px; }935.q-crime-nom { flex: 0 0 46%; color: var(--ink-2, #555); overflow: hidden;936 text-overflow: ellipsis; white-space: nowrap; }937.q-crime-barre { flex: 1 1 auto; height: 10px; background: var(--surface-2, #f0ede8);938 border-radius: 5px; overflow: hidden; }939.q-crime-barre i { display: block; height: 100%; border-radius: 5px;940 background: var(--accent, #0f6b4f); opacity: 0.55; }941.q-crime-n { flex: 0 0 52px; text-align: right; font-weight: 600;942 color: var(--ink, #222); white-space: nowrap; }943.q-crime-n small { font-weight: 400; color: var(--ink-3, #888); }944.q-crime-src { margin-top: 8px; }945946947/* ---- Risque d'inondation (fiche) — BDZI gouv. du Québec ---- */948.f-zi .zi-head { display: flex; align-items: center; gap: 10px; }949.zi-badge { display: inline-block; padding: 3px 10px; border-radius: 999px;950 font-size: 12.5px; font-weight: 700; }951.zi-eleve { background: #fde8e8; color: #a12622; }952.zi-modere { background: #fdf3e0; color: #8a5a00; }953.zi-present { background: #fdf3e0; color: #8a5a00; }954.zi-ok { background: #e7f4ea; color: #1e6b34; }955.zi-nc { background: var(--surface-2, #f0ede8); color: var(--ink-3, #888); }956.zi-liste { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; }957.zi-liste li { padding: 4px 0; border-top: 1px solid var(--line, #e6e4df); }958959960/* ---- tuiles KPI + tableau compacts (partagés air/essence) ---- */961.rdl-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 12px; }962.rdl-kpi { flex: 1 1 90px; min-width: 90px; background: var(--surface-2, #f7f5f1);963 border-radius: 10px; padding: 10px 12px; }964.rdl-kpi-v { display: block; font-size: 20px; font-weight: 700;965 letter-spacing: -0.02em; color: var(--ink, #222); }966.rdl-kpi-l { display: block; font-size: 11px; line-height: 1.35;967 color: var(--ink-3, #888); margin-top: 2px; }968.rdl-table { width: 100%; border-collapse: collapse; font-size: 13px; }969.rdl-table td { padding: 5px 8px 5px 0; border-top: 1px solid var(--line, #e6e4df);970 vertical-align: top; }971.rdl-table .rdl-addr { max-width: 46%; }972.rdl-table .rdl-prix { font-weight: 600; white-space: nowrap; }973.rdl-table .rdl-date { white-space: nowrap; color: var(--ink-2, #555); }974.rdl-table .rdl-dist { color: var(--ink-3, #888); white-space: nowrap; text-align: right; }975.rdl-cap { caption-side: top; text-align: left; font-size: 13px; font-weight: 700;976 color: var(--ink, #222); padding: 6px 0; }977978/* ---- Qualité de l'air (RSQAQ) + Essence à proximité ---- */979.air-liste { list-style: none; margin: 10px 0 0; padding: 0; }980.air-liste li { display: flex; align-items: center; gap: 8px;981 padding: 4px 0; font-size: 12.5px; }982.air-nom { flex: 0 0 44%; color: var(--ink-2); overflow: hidden;983 text-overflow: ellipsis; white-space: nowrap; }984.air-barre { flex: 1 1 auto; height: 10px; background: var(--surface-2, #f0ede8);985 border-radius: 5px; overflow: hidden; }986.air-barre i { display: block; height: 100%; border-radius: 5px;987 background: #4d9e64; }988.air-barre i.air-sur { background: #c96a1f; }989.air-val { flex: 0 0 34%; text-align: right; font-weight: 600;990 color: var(--ink); white-space: nowrap; overflow: hidden;991 text-overflow: ellipsis; }992.air-val small { font-weight: 400; color: var(--ink-3); }993.air-val .air-ref { display: block; font-size: 10px; }994.gaz-head th { text-align: left; font-size: 11px; color: var(--ink-3);995 font-weight: 600; padding: 2px 8px 2px 0; }996.gaz-best { display: inline-block; margin-left: 6px; padding: 1px 7px;997 border-radius: 999px; background: #e7f4ea; color: #1e6b34;998 font-size: 10.5px; font-weight: 700; }999.gaz-adr { display: block; font-size: 11px; color: var(--ink-3); }100010011002/* ---- Commerces et transport (fiche) ---- */1003.cm-grille { list-style: none; margin: 6px 0 0; padding: 0;1004 display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }1005@media (max-width: 560px) { .cm-grille { grid-template-columns: 1fr; } }1006.cm-item { display: flex; align-items: center; gap: 9px; padding: 5px 0;1007 border-bottom: 1px solid var(--line, #eeece7); min-width: 0; }1008.cm-ico { flex: 0 0 28px; }1009.cm-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }1010.cm-nom { font-size: 13px; font-weight: 600; color: var(--ink, #222);1011 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }1012.cm-poi { font-size: 11px; color: var(--ink-3, #8a877f);1013 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }1014.cm-dist { flex: 0 0 auto; font-size: 13px; font-weight: 700;1015 color: var(--ink-2, #4c4a45); white-space: nowrap; }101610171018/* ---- Coût d'électricité (Hydro-Québec) ---- */1019.hydro-intro { margin: 2px 0 12px; color: var(--ink-2, #4c4a45); }1020.hydro-btn { appearance: none; border: 0; border-radius: 10px; cursor: pointer;1021 background: var(--accent, #2b7a3b); color: #fff; font-weight: 700;1022 font-size: 14px; padding: 11px 18px; }1023.hydro-btn:disabled { opacity: 0.6; cursor: progress; }1024.hydro-montant { font-size: 26px; font-weight: 800; letter-spacing: -0.02em;1025 color: var(--navy, #1c1b18); display: flex; align-items: baseline;1026 gap: 10px; flex-wrap: wrap; }1027.hydro-montant small { font-size: 14px; font-weight: 500; color: var(--ink-3); }1028.hydro-an { font-size: 14px; font-weight: 600; color: var(--ink-2, #4c4a45); }1029.hydro-vide { color: var(--ink-3, #8a877f); }103010311032/* ============================================================================1033 PASSE DE DESIGN — « éditorial sharp » appliqué à toute la fiche1034 Blocs = cartes encre (bordure 1,5 px + ombre décalée douce), titres à1035 marqueur accent + filet, tuiles KPI blanches à ombre dure, tableaux zébrés,1036 barres en dégradé, pastilles unifiées (mono, point d'état, liseré).1037 Aucune propriété `order` (règle Groupe Ka : ordre DOM = ordre visuel).1038 ========================================================================== */10391040/* --- Blocs de la fiche : cartes posées sur le papier --- */1041.f-bloc:not(.f-galerie):not(.f-hero),1042.quartier {1043 background: var(--surface);1044 border: 1.5px solid var(--ink);1045 border-radius: var(--r-card);1046 padding: 18px 20px 16px;1047 box-shadow: var(--shadow-off-soft);1048}1049@media (max-width: 640px) {1050 .f-bloc:not(.f-galerie):not(.f-hero),1051 .quartier { padding: 15px 15px 13px; }1052}1053/* blocs pleine largeur sous la grille : respiration entre les cartes */1054.detail > .f-bloc { margin-top: 22px; }10551056/* --- Titres de section : carré accent + filet éditorial --- */1057.f-bloc h2, .quartier h2 {1058 display: flex; align-items: center; gap: 10px;1059 font-size: 19px; letter-spacing: -0.015em; margin-bottom: 14px;1060 border-left: 0; padding-left: 0;1061}1062.f-bloc h2::before, .quartier h2::before {1063 content: ""; flex: 0 0 9px; width: 9px; height: 9px;1064 background: var(--accent); border: 1.5px solid var(--ink);1065 box-shadow: 2px 2px 0 var(--ink);1066}1067.f-bloc h2::after, .quartier h2::after {1068 content: ""; flex: 1 1 auto; height: 1.5px; min-width: 20px;1069 background: var(--line);1070}10711072/* --- Tuiles KPI : blanches, bord encre, ombre dure accent --- */1073.rdl-kpi {1074 background: var(--surface);1075 border: 1.5px solid var(--ink);1076 border-radius: var(--r-ctl);1077 box-shadow: 3px 3px 0 var(--accent-soft);1078}1079.rdl-kpi-v { font-family: var(--font-display); }1080.q-cell { box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.1); border-radius: var(--r-ctl); }1081.q-val { font-size: 20px; }10821083/* --- Tableaux : en-têtes mono, zébrure, survol accent --- */1084.rdl-table td { padding: 7px 8px 7px 0; }1085.rdl-table tbody tr:nth-child(even) td,1086.rdl-table > tr:nth-child(even) td { background: var(--surface-2); }1087.rdl-table tr:hover td { background: var(--accent-soft); }1088.gaz-head th {1089 font-family: var(--font-mono); font-size: 10px; font-weight: 700;1090 text-transform: uppercase; letter-spacing: 0.08em;1091 border-bottom: 1.5px solid var(--ink);1092}1093.rdl-cap { font-family: var(--font-display); }1094table.rooms tbody tr:hover td { background: var(--accent-soft); }10951096/* --- Barres : pistes bordées + remplissage en dégradé --- */1097.q-bar-track, .q-crime-barre, .air-barre {1098 background: var(--surface-2);1099 border: 1px solid var(--line);1100 height: 12px;1101}1102.q-bar-fill {1103 background: linear-gradient(90deg, var(--accent), var(--accent-deep));1104}1105.q-crime-barre i {1106 background: linear-gradient(90deg, #f0808a, var(--accent));1107 opacity: 0.9;1108}1109.air-barre i { background: linear-gradient(90deg, #6fbc85, #2e7d4a); }1110.air-barre i.air-sur { background: linear-gradient(90deg, #e08a48, #c96a1f); }11111112/* --- Pastilles d'état unifiées (zi-badge & cie) : mono + point d'état --- */1113.zi-badge {1114 display: inline-flex; align-items: center; gap: 6px;1115 font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;1116 text-transform: uppercase; letter-spacing: 0.06em;1117 padding: 4px 10px; border: 1.5px solid currentColor;1118}1119.zi-badge::before {1120 content: ""; width: 6px; height: 6px; border-radius: 50%;1121 background: currentColor;1122}1123.gaz-best { border: 1px solid currentColor; }11241125/* --- Listes riches (zones d'inondation) : mini-cartes à liseré accent --- */1126.zi-liste { display: flex; flex-direction: column; gap: 8px; }1127.zi-liste li {1128 border: 1px solid var(--line); border-left: 3px solid var(--accent);1129 border-top: 1px solid var(--line);1130 border-radius: var(--r-ctl); padding: 9px 12px;1131 background: var(--surface-2);1132}11331134/* --- Inclusions : icône et libellé alignés sur une seule ligne --- */1135.amenity { display: inline-flex; align-items: center; gap: 6px; }11361137/* --- Notes de bas de bloc : filet pointillé --- */1138.f-bloc .fine, .quartier .fine {1139 margin-top: 12px; padding-top: 9px;1140 border-top: 1px dashed var(--line);1141}11421143/* --- CTA secondaire : téléchargement de la fiche PDF --- */1144.cta-pdf {1145 background: var(--surface); color: var(--ink);1146 box-shadow: 4px 4px 0 rgba(26, 18, 20, 0.12);1147 margin-top: 10px;1148}1149.cta-pdf:hover { background: var(--ink); color: var(--paper); }11501151/* ================= Financement (fiche) + page Taux hypothécaires ========= */1152.f-mtg .mtg-intro { color: var(--ink-2); font-size: 14px; margin: 4px 0 14px; }1153.f-mtg .mtg-intro a { color: var(--lime); font-weight: 600; }11541155.mtg-form {1156 display: grid; gap: 10px;1157 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));1158}1159.mtg-form label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }1160.mtg-form label > span {1161 font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;1162 text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);1163}1164.mtg-form input, .mtg-form select {1165 border: 1.5px solid var(--ink); border-radius: 9px; background: var(--surface);1166 padding: 9px 10px; font-size: 14.5px; font-family: inherit; color: var(--ink);1167 min-height: 42px; min-width: 0;1168}1169.mtg-form input:focus, .mtg-form select:focus {1170 outline: none; box-shadow: 3px 3px 0 var(--lime);1171}11721173.mtg-err { color: var(--accent-deep); font-size: 13.5px; margin: 12px 0 0; }11741175.mtg-resultat {1176 display: grid; gap: 10px; margin-top: 16px;1177 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));1178}1179.mtg-kpi {1180 border: 1.5px solid var(--line-strong); border-radius: var(--r-card);1181 background: var(--surface-2); padding: 12px 14px;1182 display: flex; flex-direction: column; gap: 2px; min-width: 0;1183}1184.mtg-kpi-k {1185 font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;1186 text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3);1187}1188.mtg-kpi-v {1189 font-family: var(--font-display); font-weight: 700; font-size: 22px;1190 letter-spacing: -0.02em;1191}1192.mtg-kpi-sub { font-size: 12px; color: var(--ink-3); }1193.mtg-kpi:first-child { background: var(--ink); border-color: var(--ink); }1194.mtg-kpi:first-child .mtg-kpi-v { color: var(--lime); }1195.mtg-kpi:first-child .mtg-kpi-k, .mtg-kpi:first-child .mtg-kpi-sub { color: rgba(255,255,255,0.75); }11961197.mtg-source { margin-top: 10px; }11981199.mtg-schl {1200 margin-top: 14px; border: 1.5px dashed var(--line-strong);1201 border-radius: var(--r-card); padding: 12px 14px; font-size: 13.5px;1202 background: var(--surface);1203}1204.mtg-schl ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 3px; }1205.mtg-schl-no { border-color: var(--accent-deep); }1206.mtg-issue { margin: 8px 0 0; color: var(--accent-deep); font-size: 13px; }12071208.mtg-detail {1209 margin-top: 10px; border: 1.5px solid var(--line-strong);1210 border-radius: var(--r-card); background: var(--surface);1211}1212.mtg-detail > summary {1213 cursor: pointer; padding: 11px 14px; font-weight: 700; font-size: 14px;1214 list-style: none; display: flex; align-items: center; gap: 8px;1215}1216.mtg-detail > summary::before { content: "+"; font-family: var(--font-mono); color: var(--lime); font-weight: 700; }1217.mtg-detail[open] > summary::before { content: "−"; }1218.mtg-detail > summary::-webkit-details-marker { display: none; }1219.mtg-detail > *:not(summary) { margin: 0 14px 12px; }1220.mtg-detail .fine { border-top: none; padding-top: 0; }1221.mtg-total { border-top: 2px solid var(--ink); }1222.mtg-comp td, .mtg-comp th { white-space: nowrap; }1223.mtg-stale { color: var(--accent-deep); }12241225.mtg-chart svg { width: 100%; height: auto; display: block; }1226.mtg-grid { stroke: var(--line); stroke-width: 1; }1227.mtg-tick { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-3); }1228.mtg-line { fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-linejoin: round; }1229.mtg-dot { fill: var(--ink); stroke: var(--lime); stroke-width: 2.5; }12301231/* ---- page /taux-hypothecaires ---- */1232.taux-page { padding-bottom: 40px; }1233.taux-head { margin: 28px 0 6px; max-width: 760px; }1234.taux-head h1 { font-family: var(--font-display); font-size: clamp(28px, 5vw, 40px); letter-spacing: -0.03em; }1235.taux-head p { color: var(--ink-2); font-size: 15px; margin: 12px 0 0; }1236.taux-page > .f-bloc { margin-top: 22px; }12371238.taux-grid {1239 display: grid; gap: 10px;1240 grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));1241}1242.taux-card {1243 border: 1.5px solid var(--ink); border-radius: var(--r-card);1244 background: var(--surface); padding: 12px 14px; text-align: left;1245 cursor: pointer; display: flex; flex-direction: column; gap: 2px;1246 transition: box-shadow 0.15s ease; font-family: inherit; min-width: 0;1247}1248.taux-card:hover { box-shadow: 3px 3px 0 var(--lime); }1249.taux-card.on { background: var(--ink); color: var(--paper); }1250.taux-card.on .taux-card-v { color: var(--lime); }1251.taux-card-k {1252 font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;1253 text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3);1254}1255.taux-card.on .taux-card-k, .taux-card.on .taux-card-sub { color: rgba(255,255,255,0.7); }1256.taux-card-v { font-family: var(--font-display); font-weight: 700; font-size: 24px; }1257.taux-card-sub { font-size: 11.5px; color: var(--ink-3); }12581259.taux-filtres { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }1260.taux-filtres label { display: flex; flex-direction: column; gap: 3px; }1261.taux-filtres label > span {1262 font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;1263 text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);1264}1265.taux-filtres select {1266 border: 1.5px solid var(--ink); border-radius: 9px; background: var(--surface);1267 padding: 9px 12px; font-size: 14.5px; font-family: inherit; min-height: 42px;1268}1269.taux-best td { background: var(--lime-soft); }1270.taux-badge {1271 font-family: var(--font-mono); font-size: 9px; font-weight: 700;1272 text-transform: uppercase; letter-spacing: 0.1em; background: var(--ink);1273 color: var(--lime); border-radius: 999px; padding: 2px 8px; margin-left: 8px;1274}1275.taux-sante { display: flex; flex-wrap: wrap; gap: 8px; }1276.taux-src {1277 border: 1.5px solid var(--line-strong); border-radius: 999px;1278 padding: 6px 12px; font-size: 12.5px; font-weight: 600;1279 display: inline-flex; align-items: center; gap: 7px;1280}1281.taux-src::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }1282.taux-src-ok::before { background: var(--green, #2f9e44); }1283.taux-src-warning::before { background: #e8a000; }1284.taux-src-error::before { background: var(--accent-deep); }12851286/* =============================================================================1287 REFONTE ÉDITORIALE v2 (2026-08-25) — accueil « produit premium »1288 Personnalité Immo-Ka : architecturale et financière — composition1289 typographique majuscule plein/outline décalée, colonne de données mono1290 façon terminal, cerise en couleur de SIGNAL (jamais en aplat décoratif).1291 Primitives locales : rayons 0/6/10/18, durées 150/240/350 ms.1292 Couche posée en FIN de fichier : elle a le dernier mot sur la cascade.1293============================================================================= */1294:root {1295 --r-0: 0px; --r-1: 6px; --r-2: 10px; --r-3: 18px;1296 --dur-1: 150ms; --dur-2: 240ms; --dur-3: 350ms;1297 --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);1298 --hairline: rgba(20, 24, 20, 0.14);1299 --hairline-strong: rgba(20, 24, 20, 0.6);1300}13011302/* ---- Héro : composition typographique + colonne de données ---- */1303.hero-wrap { display: grid; grid-template-columns: 1fr auto; gap: 24px 56px; align-items: end; }1304.hero h1.hero-display {1305 display: flex; flex-direction: column;1306 font-size: clamp(40px, 6.8vw, 92px); line-height: 0.96;1307 text-transform: uppercase; letter-spacing: -0.04em;1308 max-width: none; margin-top: 16px;1309}1310.hero-display .hd-l1, .hero-display .hd-l2,1311.hero-display .hd-l3, .hero-display .hd-l4 { display: block; }1312.hero-display .hd-l2 { color: transparent; -webkit-text-stroke: 2.5px var(--ink); }1313.hero-display .hd-l3 { margin-left: clamp(24px, 6vw, 110px); }1314.hero-display .hd-l4 {1315 font-size: 0.5em; letter-spacing: -0.02em; margin-top: 0.35em;1316 margin-left: clamp(2px, 1vw, 8px);1317}1318.hero-display .signal {1319 font-style: normal; color: var(--lime); position: relative;1320 border-bottom: 4px solid var(--lime); padding-bottom: 1px;1321}1322.hero p.lede { font-size: 16px; max-width: 560px; }1323.hero::before { opacity: 0.7; }1324.hero::after { opacity: 0.5; }13251326/* colonne « terminal » : les chiffres du marché comme élément graphique */1327.hero-data {1328 display: flex; flex-direction: column; gap: 18px;1329 border-left: 1px solid var(--hairline-strong); padding-left: 28px;1330 min-width: 190px;1331}1332.hd-row b {1333 display: block; font-family: var(--font-display); font-weight: 700;1334 font-size: clamp(20px, 2vw, 27px); letter-spacing: -0.03em; color: var(--ink);1335 font-variant-numeric: tabular-nums; line-height: 1.1;1336}1337.hd-row span {1338 font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;1339 text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3);1340}1341@media (max-width: 900px) {1342 .hero-wrap { grid-template-columns: 1fr; align-items: start; }1343 .hero-data {1344 flex-direction: row; flex-wrap: wrap; gap: 16px 28px;1345 border-left: 0; border-top: 1px solid var(--hairline);1346 padding: 16px 0 0; min-width: 0; margin-top: 6px;1347 }1348}13491350/* ---- Ligne de données vivantes (mono + filets) ---- */1351.live-line {1352 display: flex; flex-wrap: wrap; align-items: baseline;1353 margin-top: 30px; font-family: var(--font-mono); font-size: 12px;1354 color: var(--ink-2); letter-spacing: 0.02em; row-gap: 10px;1355}1356.live-flag {1357 display: inline-flex; align-items: center; gap: 7px;1358 font-weight: 700; font-size: 10.5px; letter-spacing: 0.18em;1359 text-transform: uppercase; color: var(--accent-deep);1360 padding-right: 14px; margin-right: 14px; border-right: 1px solid var(--hairline-strong);1361}1362.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: pulse 2.4s ease infinite; }1363.live-item { padding-right: 14px; margin-right: 14px; border-right: 1px solid var(--hairline); }1364.live-item:last-child { border-right: 0; padding-right: 0; margin-right: 0; }1365.live-item b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }1366@media (max-width: 640px) {1367 .live-line { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;1368 white-space: nowrap; margin-right: -16px; padding-right: 16px; }1369 .live-line::-webkit-scrollbar { display: none; }1370}13711372/* ---- Recherche au cœur : grand champ souligné + critères en filets ---- */1373.search-zone { margin: 42px 0 0; }1374.q-big {1375 display: flex; align-items: center; gap: 14px;1376 border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;1377 background: transparent; padding: 4px 2px 14px; color: var(--ink-3);1378 transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) ease;1379}1380.q-big:focus-within { border-color: var(--lime); color: var(--accent-deep); }1381.q-big svg { flex: none; }1382.q-big input {1383 flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 0;1384 font-family: var(--font-display); font-weight: 600;1385 font-size: clamp(19px, 2.8vw, 28px); letter-spacing: -0.02em; color: var(--ink);1386}1387.q-big input::placeholder { color: var(--ink-3); font-weight: 500; }1388.crit-line { display: flex; align-items: stretch; flex-wrap: wrap; }1389.crit {1390 display: flex; flex-direction: column; justify-content: center; gap: 1px;1391 padding: 12px 26px 12px 0; margin-right: 26px;1392 border-right: 1px solid var(--hairline); min-width: 0; cursor: pointer;1393}1394.crit > span {1395 font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;1396 text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3);1397}1398.crit select {1399 border: 0; background: transparent; outline: none; cursor: pointer;1400 font-family: var(--font-display); font-weight: 700; font-size: 15.5px;1401 color: var(--ink); appearance: none; -webkit-appearance: none;1402 padding: 2px 18px 2px 0; min-width: 0; max-width: 190px; text-overflow: ellipsis;1403 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%238b928c'/%3E%3C/svg%3E");1404 background-repeat: no-repeat; background-position: right center;1405}1406.crit:hover select { color: var(--accent-deep); }1407.crit .range-pair select { max-width: 92px; }1408.crit-more {1409 display: inline-flex; align-items: center; gap: 9px; align-self: center;1410 border: 0; background: none; padding: 12px 0; cursor: pointer;1411 font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--ink);1412 transition: color var(--dur-1) ease;1413}1414.crit-more:hover, .crit-more.on { color: var(--accent-deep); }1415.crit-badge, .rb-badge {1416 display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;1417 border-radius: 999px; background: var(--lime); color: #fff;1418 font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;1419}1420.search-zone .f-adv { border-top: 1px solid var(--hairline); margin-top: 2px; padding-top: 18px; }1421.search-zone .seg button {1422 border: 1px solid var(--hairline-strong); background: transparent; color: var(--ink-2);1423 min-height: 38px; font-weight: 600; margin-left: -1px;1424}1425.search-zone .seg button:first-child { border-radius: var(--r-1) 0 0 var(--r-1); }1426.search-zone .seg button:last-child { border-radius: 0 var(--r-1) var(--r-1) 0; }1427.search-zone .seg button:hover { background: var(--lime-soft); color: var(--accent-deep); }1428.search-zone .seg button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: none; }1429.search-zone .f-native { border: 1px solid var(--hairline-strong); background: transparent; }14301431/* résumé mobile des critères — remplace le FAB (voir media 640 plus bas) */1432.crit-summary { display: none; }14331434/* ---- Barre de résultats sticky : N propriétés · tri · Liste|Carte ---- */1435.results-bar {1436 position: sticky; top: 64px; z-index: var(--z-sticky, 300);1437 display: flex; align-items: center; gap: 16px;1438 margin: 30px 0 22px; padding: 12px 0 11px;1439 border-bottom: 1px solid var(--hairline-strong);1440 background: color-mix(in srgb, var(--paper) 86%, transparent);1441 backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);1442}1443@supports not (background: color-mix(in srgb, red 50%, blue)) {1444 .results-bar { background: rgba(245, 243, 238, 0.92); }1445}1446.rb-count { margin: 0; font-size: clamp(16px, 2vw, 20px); letter-spacing: -0.02em; color: var(--ink); text-transform: none; }1447.rb-count b { font-variant-numeric: tabular-nums; }1448.rb-tools { margin-left: auto; display: flex; align-items: center; gap: 20px; }1449.rb-sort select {1450 border: 0; background: transparent; outline: none; cursor: pointer;1451 font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;1452 text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2);1453 appearance: none; -webkit-appearance: none; padding: 8px 16px 8px 0;1454 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%238b928c'/%3E%3C/svg%3E");1455 background-repeat: no-repeat; background-position: right center;1456}1457.rb-sort select:hover { color: var(--ink); }1458.rb-tabs { display: flex; gap: 18px; }1459.rb-tab {1460 position: relative; display: inline-flex; align-items: center; gap: 6px;1461 border: 0; background: none; padding: 8px 0; cursor: pointer;1462 font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink-3);1463 transition: color var(--dur-1) ease;1464}1465.rb-tab:hover, .rb-tab.on { color: var(--ink); }1466.rb-tab::after {1467 content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 2.5px;1468 background: var(--lime); transform: scaleX(0); transform-origin: left;1469 transition: transform var(--dur-2) var(--ease-out);1470}1471.rb-tab.on::after { transform: scaleX(1); }1472.rb-filters {1473 display: inline-flex; align-items: center; gap: 7px;1474 border: 0; background: none; padding: 8px 0; cursor: pointer;1475 font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink);1476}1477.rb-filters:hover { color: var(--accent-deep); }1478@media (min-width: 641px) { .rb-filters { display: none; } }14791480/* ---- Transition douce liste ↔ carte ---- */1481.view-pane { animation: pane-in var(--dur-2) var(--ease-out); }1482@keyframes pane-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }14831484/* ---- Chips rapides : plus légères ---- */1485.chip {1486 border: 1px solid var(--hairline-strong); background: transparent;1487 min-height: 38px; padding: 7px 15px; font-size: 12.5px; box-shadow: none;1488}1489.chip:hover { transform: none; box-shadow: none; background: var(--lime-soft); color: var(--accent-deep); }1490.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: none; }1491.chips { margin: 20px 0 0; }14921493/* ---- Pastilles actives : discrètes, survol = retrait ---- */1494.pills { margin: 14px 0 0; }1495.pills .pill { border: 1px solid var(--hairline-strong); background: transparent; box-shadow: none; padding: 5px 12px; font-size: 12px; }1496.pills .pill:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }14971498/* ---- Fiches éditoriales : l'image domine, plus de boîte ---- */1499.card, .card:hover { background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }1500.card-img { border-radius: var(--r-2); aspect-ratio: 4/3; }1501.card-img img { transition: transform var(--dur-3) var(--ease-out); }1502@media (hover: hover) {1503 .card:hover .card-img img { transform: scale(1.025); }1504 .card:hover .card-price { color: var(--accent-deep); }1505}1506.card:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: var(--r-2); }1507.card-body { padding: 13px 2px 0; gap: 3px; }1508.card-price { font-size: 22px; letter-spacing: -0.03em; color: var(--ink); transition: color var(--dur-1) ease; }1509.card-title { font-size: 14px; font-weight: 500; color: var(--ink-2); }1510.card-meta { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }1511.card-meta .sep { width: 3px; height: 3px; border: 0; border-radius: 50%; background: var(--lime); transform: none; }1512.card-specs { font-size: 11.5px; color: var(--ink-2); }1513.card-foot { border-top: 0; padding-top: 8px; }1514.source-tag { background: none; border: 0; border-radius: 0; padding: 0; color: var(--ink-3); font-size: 10px; letter-spacing: 0.08em; max-width: 62%; }1515.avail { font-size: 11px; color: var(--ink-3); }1516.badge { border: 0; border-radius: 4px; background: rgba(20, 24, 20, 0.78); color: var(--paper);1517 backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);1518 font-size: 9.5px; padding: 4px 9px; letter-spacing: 0.08em; }1519.badge.type { background: var(--lime); color: #fff; }1520.badge.right { background: rgba(20, 24, 20, 0.55); }1521/* la liste latérale de la vue carte garde ses fiches synchronisées lisibles */1522.map-card { border-radius: var(--r-2); }1523.map-card-sel { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: var(--r-2); }15241525/* ---- Grille à rythme éditorial (accueil) ---- */1526.grid.grid-edito { grid-template-columns: repeat(3, 1fr); gap: 36px 26px; align-items: start; }1527@media (max-width: 980px) {1528 .grid.grid-edito { grid-template-columns: 1fr 1fr; gap: 30px 20px; }1529}1530@media (max-width: 640px) {1531 .grid.grid-edito { grid-template-columns: 1fr; gap: 32px; }1532}1533@media (prefers-reduced-motion: no-preference) {1534 .grid-edito > * { animation: rise 0.5s var(--ease-out) backwards; }1535 .grid-edito > *:nth-child(3n+2) { animation-delay: 60ms; }1536 .grid-edito > *:nth-child(3n) { animation-delay: 120ms; }1537}1538@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }15391540/* ---- Squelettes sans boîte ---- */1541.skel { border: 0; border-radius: 0; background: transparent; }1542.skel .sk-img { aspect-ratio: 4/3; border-radius: var(--r-2); }1543.skel .sk-line { margin: 12px 2px; }15441545/* ---- Pagination éditoriale : chiffres nus, page courante soulignée ---- */1546.pager { border-top: 1px solid var(--hairline); padding-top: 16px; margin-top: 26px; }1547.pager-info { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }1548.pager-btn {1549 min-width: 34px; min-height: 38px; height: auto; padding: 0 10px; border: 0; border-radius: var(--r-1);1550 background: none; color: var(--ink-2); box-shadow: none;1551 font-family: var(--font-display); font-size: 13.5px; font-weight: 600; position: relative;1552}1553.pager-btn:hover:not(:disabled):not(.on) { background: var(--lime-soft); color: var(--accent-deep); transform: none; box-shadow: none; }1554.pager-btn.on { background: none; border: 0; color: var(--ink); font-weight: 700; box-shadow: none; }1555.pager-btn.on::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 3px; height: 2.5px; background: var(--lime); }1556.pager-btn:disabled { box-shadow: none; }15571558/* ---- Mobile : recherche condensée + feuille de critères premium ---- */1559@media (max-width: 640px) {1560 .hero h1.hero-display { font-size: clamp(38px, 11vw, 52px); }1561 .results-bar { top: 64px; gap: 10px; flex-wrap: wrap; }1562 .rb-tools { gap: 14px; }1563 .search-zone { margin: 30px 0 0; }1564 .crit-line, .search-zone .f-adv, .search-zone .sheet-apply { display: none; }1565 .crit-summary {1566 display: flex; align-items: center; gap: 10px; width: 100%;1567 border: 0; border-bottom: 1px solid var(--hairline); background: none;1568 padding: 14px 2px; margin: 0; cursor: pointer; text-align: left;1569 font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);1570 }1571 .crit-summary svg { flex: none; color: var(--ink); }1572 .crit-summary .cs-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }1573 .crit-summary .f-chev { margin: 0 2px 0 0; }15741575 .search-zone.open {1576 display: flex; flex-direction: column; gap: 12px;1577 position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal, 900);1578 margin: 0; border-radius: var(--r-3) var(--r-3) 0 0; background: var(--surface);1579 border: 0;1580 max-height: 86dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;1581 padding: 10px 18px calc(16px + env(safe-area-inset-bottom));1582 box-shadow: 0 -18px 50px rgba(20, 24, 20, 0.3);1583 animation: sheet-up 0.26s var(--ease-out);1584 }1585 .search-zone.open .sheet-handle {1586 display: block; flex: none; width: 40px; height: 4.5px;1587 border-radius: 999px; background: var(--line); margin: 0 auto;1588 }1589 .search-zone.open .sheet-head {1590 display: flex; justify-content: space-between; align-items: center;1591 font-family: var(--font-display); font-weight: 700; font-size: 17px;1592 letter-spacing: -0.01em; color: var(--ink); text-transform: none;1593 position: sticky; top: -10px; background: var(--surface); padding: 6px 0 8px;1594 border-bottom: 1px solid var(--hairline); z-index: 1;1595 }1596 .search-zone.open .crit-summary { display: none; }1597 .search-zone.open .q-big { padding: 2px 0 10px; }1598 .search-zone.open .q-big input { font-size: 17px; }1599 .search-zone.open .crit-line { display: flex; flex-direction: column; }1600 .search-zone.open .crit { border-right: 0; border-bottom: 1px solid var(--hairline); margin: 0; padding: 10px 0; }1601 .search-zone.open .crit select { max-width: none; width: 100%; font-size: 16px; }1602 .search-zone.open .crit .range-pair select { width: auto; flex: 1; }1603 .search-zone.open .crit-more { display: none; }1604 .search-zone.open .f-adv { display: grid; border-top: 0; padding-top: 4px; margin-top: 0; }1605 .search-zone.open .sheet-apply {1606 display: flex; position: sticky; bottom: 0; z-index: 1; width: 100%; min-height: 50px;1607 box-shadow: 0 -14px 18px -12px rgba(20, 24, 20, 0.35);1608 }1609}16101611/* ---- Navigation mobile flottante (pilule détachée du bord) ---- */1612.tabbar { display: none; }1613@media (max-width: 760px) {1614 .tabbar {1615 display: grid; grid-template-columns: repeat(4, 1fr);1616 position: fixed; left: 12px; right: 12px;1617 bottom: calc(10px + env(safe-area-inset-bottom));1618 z-index: var(--z-bottombar, 600);1619 border: 1px solid var(--hairline-strong); border-radius: var(--r-3);1620 background: rgba(250, 249, 245, 0.88);1621 backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);1622 box-shadow: 0 14px 34px rgba(20, 24, 20, 0.16);1623 padding: 6px;1624 }1625 .tabbar a {1626 display: flex; flex-direction: column; align-items: center; justify-content: center;1627 gap: 2px; padding: 5px 2px; min-height: 48px; border-radius: 12px;1628 font-family: var(--font-display); font-size: 10px; font-weight: 600;1629 color: var(--ink-3); text-decoration: none; transition: color var(--dur-1) ease;1630 }1631 .tabbar a svg { display: block; }1632 .tabbar a.active { color: var(--ink); }1633 .tabbar a.active::after { content: ""; width: 16px; height: 2.5px; border-radius: 2px; background: var(--lime); }1634 body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }1635 .ka-footer { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }16361637 /* widget KA Agent : dégagé de la tabbar (style injecté après le bundle →1638 spécificité doublée pour gagner) */1639 .kaa-btn.kaa-btn { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); right: 14px; }1640 .kaa-panel.kaa-panel:not(.kaa-full) { bottom: calc(152px + env(safe-area-inset-bottom, 0px)); }1641}16421643/* ---- Header : jamais de débordement à droite ----1644 La nav (8 entrées) + connexion dépassaient le conteneur même à 1440px1645 (masqué par overflow-x: clip). Resserrage, badge Groupe KA masqué quand1646 l'espace manque, burger sous 1200px. ---- */1647.nav a { white-space: nowrap; padding: 8px 11px; font-size: 13px; }1648@media (max-width: 1400px) { .header .gk-badge { display: none; } }1649@media (max-width: 1200px) {1650 .nav { display: none; }1651 .menu-btn { display: flex; }1652}16531654/* header pleine largeur : la nav dense s'aligne aux bords de l'écran au lieu1655 de déborder du conteneur 1240px sur les grands écrans */1656.header .header-inner { max-width: none; }16571658/* ---- Fiche propriété : DA v2 — sections en filets, icônes contextuelles ---- */1659.f-bloc h2 { border-left: 0; padding-left: 0; display: flex; align-items: center; gap: 10px; }1660.f-bloc h2::before { content: ""; width: 20px; height: 3px; border-radius: 2px; background: var(--lime); flex: none; }1661/* le panneau héros perd sa boîte : la typographie structure */1662.f-hero { background: transparent; border: 0; box-shadow: none; padding: 0; }1663.f-hero .price { font-size: clamp(36px, 7vw, 54px); letter-spacing: -0.04em; }1664/* inclusions : grille d'items en filets — chaque inclusion a SON icône */1665.amenity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 0 28px; margin-bottom: 8px; }1666.amenity-it {1667 display: flex; align-items: center; gap: 11px; padding: 7px 0;1668 border-bottom: 1px solid var(--hairline); font-size: 13.5px; color: var(--ink); min-height: 46px;1669}1670.am-ico {1671 display: inline-grid; place-items: center; width: 32px; height: 32px;1672 border-radius: 10px; background: var(--lime-soft); color: var(--green-deep); flex: none;1673}1674.am-txt { min-width: 0; }1675/* caractéristiques : clés en micro-mono */1676.dtable { gap: 0 28px; }1677.drow { padding: 9px 0; }1678.drow span { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); align-self: center; }1679/* galerie : cadre allégé */1680.carousel { border: 1px solid var(--hairline-strong); box-shadow: none; border-radius: var(--r-2); }1681.thumbs button { border-radius: 8px; }1682/* CTA sticky : sur la fiche, il prend le bas d'écran — la tabbar s'efface */1683body:has(.cta-sticky) .tabbar { display: none; }1684.cta-sticky { z-index: var(--z-dropdown, 700); border-top: 1px solid var(--hairline-strong); background: rgba(250, 249, 245, 0.92); }1685@media (max-width: 760px) {1686 body:has(.cta-sticky) { padding-bottom: 0; }1687}16881689/* colonnes de la fiche : les sections respirent sans boîte — les modules1690 pleine largeur (.detail > .f-bloc : financement, quartier…) restent en cartes */1691.fiche > .f-col > .f-bloc:not(.f-galerie) {1692 background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none;1693}1694@media (max-width: 640px) {1695 .fiche > .f-col > .f-bloc:not(.f-galerie) { padding: 0; }1696}1697/* tiret accent des titres : sans bordure ni ombre héritées de la couche fiche */1698.f-bloc h2::before, .quartier h2::before { border: 0; box-shadow: none; }16991700/* =============================================================================1701 KA MAP SYSTEM v2 — MODE CARTE IMMO-KA (shell plein viewport)1702 Jetons du design system appliqués au shell ; le sélecteur .ka-map du1703 framework pose ses défauts directement sur le canevas — re-déclarer les1704 jetons dessus, sinon l'accent retombe au noir générique dans la carte.1705============================================================================= */1706.ka-shell,1707.ka-shell .ka-map {1708 --ka-accent: var(--accent);1709 --ka-on-accent: var(--on-accent, #fff);1710 --ka-surface: var(--surface);1711 --ka-ink: var(--ink);1712 --ka-line: var(--line-strong);1713 --ka-radius: var(--r-ctl);1714 --ka-shadow: 0 8px 24px rgba(26, 18, 20, 0.14);1715 --ka-font: var(--font-body);1716}1717.ka-shell-fallback {1718 position: fixed; inset: 0; z-index: 640;1719 display: grid; place-items: center;1720 background: var(--surface); color: var(--ink-3);1721 font-family: var(--font-mono, inherit); font-size: 13px;1722}1723.ms2-brand { display: inline-flex; align-items: baseline; gap: 7px; font-family: var(--font-display); min-width: 0; }1724.ms2-brand b { font-size: 15px; letter-spacing: -0.01em; }1725.ms2-brand span {1726 font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;1727 color: var(--ink-3); font-weight: 600;1728}1729.ka-top-btn {1730 display: inline-flex; align-items: center; gap: 6px;1731 border: 1.5px solid var(--ink); border-radius: var(--r-ctl);1732 background: var(--surface); color: var(--ink);1733 font-family: var(--font-display); font-weight: 600; font-size: 12.5px;1734 padding: 8px 13px; cursor: pointer; min-height: 38px; white-space: nowrap;1735}1736.ka-top-btn:hover { background: var(--ink); color: #fff; }1737.ka-top-badge {1738 min-width: 17px; height: 17px; border-radius: 999px;1739 background: var(--accent); color: var(--on-accent, #fff);1740 font-size: 10.5px; font-weight: 700; line-height: 17px;1741 text-align: center; padding: 0 4px;1742}1743.ms2-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; }1744.ms2-count { font-size: 13px; color: var(--ink-2); min-width: 0; }1745.ms2-count b { color: var(--ink); font-size: 15px; }1746.ms2-zone {1747 margin-left: 8px; font-size: 11px; color: var(--accent-deep, var(--accent));1748 border: 1px dashed var(--accent); border-radius: 999px; padding: 2px 8px;1749}1750.ms2-sort select {1751 border: 1.5px solid var(--ink); border-radius: var(--r-ctl);1752 background: var(--surface); padding: 6px 8px; font-size: 12.5px;1753 font-weight: 600; color: var(--ink); max-width: 168px;1754}1755.ms2-list { display: flex; flex-direction: column; gap: 14px; position: relative; }1756.ms2-list .map-card { flex: 0 0 auto; }1757.ka-sheet .ms2-list { gap: 12px; padding-bottom: 10px; }1758.ms2-pager { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 0 4px; }17591760/* mode carte : le widget Ka Agent s'efface (le sheet occupe son coin) */1761body.ka-map-mode .kaa-btn, body.ka-map-mode .kaa-hello { display: none !important; }17621763/* filtres de la page AU-DESSUS du mode carte — desktop : modale centrée */1764@media (min-width: 781px) {1765 body.ka-map-mode .sheet-backdrop {1766 display: block; position: fixed; inset: 0;1767 z-index: var(--z-overlay, 800); background: rgba(26, 18, 20, 0.45);1768 }1769 body.ka-map-mode .search-zone { display: none; }1770 body.ka-map-mode .search-zone.open {1771 display: block; position: fixed; top: 7dvh; left: 50%;1772 transform: translateX(-50%); width: min(760px, 94vw);1773 max-height: 84dvh; overflow-y: auto; z-index: var(--z-modal, 900);1774 background: var(--surface); border: 1.5px solid var(--ink);1775 border-radius: var(--r-card); box-shadow: var(--shadow-off);1776 padding: 16px 22px 20px; margin: 0;1777 }1778 body.ka-map-mode .search-zone.open .sheet-head {1779 display: flex; align-items: center; justify-content: space-between;1780 font-weight: 700; font-size: 14px; margin-bottom: 10px;1781 }1782 body.ka-map-mode .search-zone.open .sheet-close {1783 display: grid; place-items: center; width: 34px; height: 34px;1784 border: 1.5px solid var(--ink); border-radius: 50%;1785 background: var(--surface); cursor: pointer; font-size: 14px;1786 }1787}17881789/* --- KA ID v2 : badge « Recommandé pour vous » (parcimonieux, serveur) --- */1790.badge.ka-reco { top: auto; bottom: 12px; background: var(--ink); color: var(--accent); }17911792/* ================= House-Ka footer (replaces the shared KaFooter) ========== */1793.hk-footer {1794 margin-top: 72px; background: var(--ink); color: rgba(250, 247, 240, 0.78);1795 padding: 52px 0 40px; position: relative; overflow: hidden;1796}1797.hk-footer::before {1798 content: ""; position: absolute; inset: 0; pointer-events: none;1799 background:1800 radial-gradient(circle at 78% 18%, rgba(15, 107, 79, 0.35), transparent 52%),1801 radial-gradient(circle at 8% 90%, rgba(15, 107, 79, 0.18), transparent 45%);1802}1803.hk-footer .container { position: relative; }1804.hk-foot-brand {1805 font-family: var(--font-display); font-weight: 700; font-size: 30px;1806 letter-spacing: -0.02em; color: var(--paper); display: inline-flex; align-items: center;1807}1808.hk-foot-brand .ka {1809 background: var(--accent); color: #fff; padding: 2px 8px 4px;1810 border-radius: 7px; margin-left: 4px; transform: rotate(-2deg);1811}1812.hk-foot-desc { max-width: 640px; margin: 16px 0 10px; line-height: 1.65; font-size: 14.5px; }1813.hk-foot-desc b { color: var(--paper); }1814.hk-foot-notice { max-width: 640px; margin: 0 0 24px; font-size: 12.5px; line-height: 1.6; color: rgba(250, 247, 240, 0.55); }1815.hk-foot-sites { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }1816.hk-foot-sites li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }1817.hk-foot-sites a { color: var(--paper); font-family: var(--font-display); font-weight: 600; font-size: 15px; }1818.hk-foot-sites a:hover { color: var(--accent-soft); }1819.hk-foot-sites span { color: rgba(250, 247, 240, 0.5); }1820.hk-foot-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 18px; border-top: 1px solid rgba(250, 247, 240, 0.14); font-size: 12.5px; }1821.hk-foot-legal a { color: rgba(250, 247, 240, 0.72); }1822.hk-foot-legal a:hover { color: var(--paper); }1823.hk-foot-legal span { margin-left: auto; color: rgba(250, 247, 240, 0.45); }1824@media (max-width: 780px) {1825 .hk-footer { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }1826}1827.legal .legal-date { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; margin: 0 0 26px; }18281829/* ♥ favourite on the listing hero (KA ID account) */1830.fav-heart {1831 margin-left: 10px; border: 1.5px solid var(--hairline-strong, #d8d2c6);1832 background: transparent; border-radius: 999px; width: 40px; height: 40px;1833 font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink-2);1834 vertical-align: middle; transition: all 0.15s ease;1835}1836.fav-heart:hover { border-color: var(--accent); color: var(--accent); }1837.fav-heart.on { background: var(--accent); border-color: var(--accent); color: #fff; }1838