spb/lou-ka

1/* -----------------------------------------------------------------------------2  Lou-Ka — Agrégateur de logements à louer (province de Québec)3  Auteur : Simon-Pierre Boucher — contact@spboucher.ai4  styles.css : styles LOCAUX de Lou-Ka, posés SUR le design system commun5  Groupe KA « éditorial sharp » (frontend/src/ka/tokens.css, importé AVANT6  ce fichier dans main.tsx).7    · Palette commune : papier #f5f3ee · encre #141814 · vert profond #1c5c418    · ACCENT Lou-Ka : orange #FF6A00 (seule surcharge de tokens.css)9    · Typo : display Space Grotesk / texte Inter / micro-étiquettes JetBrains Mono10    · Signature : bordures encre 1,5 px + ombres décalées dures, rayons 10/6 px11    · Baseline : « La porte d'entrée vers votre prochain chez-vous. »12    · 100 % adaptatif mobile (PWA installable, safe-areas iOS)13----------------------------------------------------------------------------- */14:root {15  /* ---- ACCENT Lou-Ka (surcharge officielle des jetons ka-ui) ---- */16  --accent: #ff6a00;17  --accent-soft: #fff1e6;18  --accent-deep: #cc5500;19  --on-accent: #ffffff;20  --lime: var(--accent);21  --lime-soft: var(--accent-soft);2223  /* ---- Alias hérités de l'ancienne identité marine/bleu — remappés sur24         les jetons communs (le fond redevient papier via tokens.css) ---- */25  --navy: var(--ink);26  --navy-soft: var(--surface-2);27  --blue: var(--green);28  --blue-soft: #e8f0ea;29  --orange: var(--accent);30  --orange-soft: var(--accent-soft);31  --orange-deep: var(--accent-deep);32  --grey: var(--surface-2);33  --white: #ffffff;34}3536#root { position: relative; z-index: 1; }37a { text-decoration: none; }38button { font-family: inherit; }3940.mono { font-family: var(--font-mono); }4142/* Garde-fou : jamais de défilement horizontal de la page, même transitoire43   pendant le chargement (bandeau défilant, polices) — clip ne casse pas44   position: sticky, contrairement à hidden. */45html, body { overflow-x: clip; }4647/* ================= Header ================= */48.header {49  position: sticky; top: 0; z-index: var(--z-header, 500);50  background: var(--paper);51  border-bottom: 1px solid var(--line);52}53.header-inner { display: flex; align-items: center; gap: 20px; height: 64px; }54.brand {55  font-family: var(--font-display); font-weight: 700; font-size: 25px;56  letter-spacing: -0.03em; display: flex; align-items: center; line-height: 1;57  color: var(--navy);58}59.brand .logo-ico { margin-right: 12px; flex: none; }  /* ≈ 40 % de la largeur de l'icône */60.brand .ka { color: var(--orange); }61.brand-tag {62  font-size: 11px; font-weight: 500; color: var(--ink-3);63  letter-spacing: 0.02em; margin-left: 12px;64}65@media (max-width: 900px) { .brand-tag { display: none; } }66.nav { margin-left: auto; display: flex; gap: 4px; }67.nav a {68  padding: 9px 16px; border-radius: var(--r-pill); font-weight: 600; font-size: 14px;69  color: var(--navy); transition: all 0.15s ease; min-height: 40px;70  display: inline-flex; align-items: center;71}72.nav a:hover { color: var(--orange); background: var(--orange-soft); }73.nav a.active { background: var(--navy); color: var(--white); }7475/* ================= Ticker ================= */76.ticker {77  background: var(--navy); color: rgba(255, 255, 255, 0.85); overflow: hidden;78  font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em;79  text-transform: uppercase; padding: 7px 0; white-space: nowrap;80}81.ticker-track { display: inline-flex; gap: 0; animation: ticker 40s linear infinite; will-change: transform; }82.ticker span { padding: 0 26px; position: relative; }83.ticker span::after { content: "◆"; position: absolute; right: -6px; color: var(--orange); opacity: 0.8; font-size: 8px; top: 3px; }84@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }85@media (prefers-reduced-motion: reduce) {86  .ticker-track { animation: none; }87  * { transition-duration: 0.01ms !important; }88}8990/* ================= Hero ================= */91.hero { padding: 58px 0 22px; }92@media (max-width: 640px) { .hero { padding: 34px 0 14px; } }93.hero h1 {94  font-size: clamp(36px, 5.4vw, 56px); font-weight: 700; line-height: 1.06;95  letter-spacing: -0.03em; max-width: 900px; margin-top: 14px; color: var(--navy);96}97.hero h1 .outline { color: var(--navy); }98.hero p.lede { color: var(--ink-2); font-size: 17px; max-width: 640px; margin: 18px 0 0; }99.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }100.stat-chip {101  background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-pill);102  padding: 8px 16px; font-size: 12.5px; font-weight: 500;103  color: var(--ink-2); display: flex; gap: 8px; align-items: center;104  box-shadow: var(--shadow-flat);105}106.stat-chip b { color: var(--navy); font-weight: 700; }107.stat-chip .pulse {108  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);109  box-shadow: 0 0 0 4px var(--orange-soft); animation: pulse 2.4s ease infinite;110}111@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 106, 0, 0.18); } }112113/* ================= Rangée d'avantages ================= */114.benefits {115  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));116  gap: 14px; margin-top: 30px;117}118.benefit { display: flex; align-items: center; gap: 12px; }119.benefit-ico {120  width: 42px; height: 42px; border-radius: var(--r-pill); flex: none;121  display: flex; align-items: center; justify-content: center;122  background: var(--orange-soft); color: var(--orange);123}124.benefit-ico.blue { background: var(--blue-soft); color: var(--blue); }125.benefit-label {126  font-size: 11.5px; font-weight: 700; text-transform: uppercase;127  letter-spacing: 0.08em; color: var(--navy);128}129@media (max-width: 640px) {130  .benefits { grid-template-columns: 1fr 1fr; gap: 12px; }131}132133/* ================= Filter bar ================= */134.filterbar {135  background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card);136  box-shadow: var(--shadow-off-soft); padding: 14px; margin: 30px 0 6px;137  display: flex; flex-direction: column; gap: 0; min-width: 0;138}139140/* — rangée principale — */141.f-primary { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; min-width: 0; }142.f-search {143  flex: 1 1 220px; min-width: 0; max-width: 440px; align-self: center;144  display: flex; align-items: center; gap: 8px;145  border: 1px solid transparent; border-radius: var(--r-pill); background: var(--grey);146  padding: 0 15px; min-height: 42px; color: var(--ink-2);147  transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;148}149.f-search:focus-within {150  background: var(--white); border-color: var(--blue);151  box-shadow: 0 0 0 3px rgba(28, 92, 65, 0.15);152}153.f-search input {154  border: none; background: none; outline: none; flex: 1; min-width: 0;155  font-size: 14px; color: var(--ink); font-family: inherit;156}157.f-clear {158  border: none; background: var(--line); color: var(--ink-2); border-radius: 50%;159  width: 20px; height: 20px; font-size: 10px; cursor: pointer; flex: none;160  display: grid; place-items: center;161}162.f-ctl {163  flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center;164  gap: 2px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--surface);165  padding: 7px 14px 6px; min-height: 52px; cursor: pointer;166  transition: box-shadow 0.15s ease, border-color 0.15s ease;167}168.f-ctl:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(28, 92, 65, 0.15); }169.f-ctl > span {170  font-size: 9.5px; font-weight: 700;171  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);172}173.f-ctl select {174  border: none; background: transparent; outline: none; font-family: var(--font-display);175  font-weight: 700; font-size: 14.5px; color: var(--navy); cursor: pointer;176  appearance: none; -webkit-appearance: none; padding-right: 16px; min-width: 0; max-width: 170px;177  text-overflow: ellipsis;178  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");179  background-repeat: no-repeat; background-position: right center;180}181.range-pair { display: flex; align-items: center; gap: 4px; }182.range-pair select { max-width: 86px; }183.range-sep { color: var(--ink-3); font-size: 11px; }184.f-more {185  flex: none; align-self: stretch; border: 1.5px solid var(--ink); border-radius: var(--r-pill);186  background: var(--surface); color: var(--navy); padding: 0 20px; cursor: pointer;187  font-family: var(--font-display); font-weight: 600; font-size: 14px; min-height: 52px;188  transition: all 0.13s ease;189}190.f-more:hover { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }191.f-more.on { background: var(--blue); border-color: var(--blue); color: var(--white); }192193/* — panneau avancé — */194.f-adv {195  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 22px;196  border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; min-width: 0;197  animation: adv-in 0.18s ease;198}199@keyframes adv-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }200.f-group { display: flex; flex-direction: column; gap: 7px; min-width: 0; }201.f-group > label {202  font-size: 10.5px; font-weight: 700;203  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);204}205.f-group-end { justify-content: flex-end; }206.f-group .btn:disabled { opacity: 0.4; cursor: default; }207.f-native {208  border: 1.5px solid var(--ink); background: var(--grey); border-radius: var(--r-ctl);209  padding: 10px 30px 10px 14px; font-size: 14px; color: var(--ink); outline: none;210  font-family: inherit; min-height: 42px; width: 100%; min-width: 0;211  appearance: none; -webkit-appearance: none;212  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");213  background-repeat: no-repeat; background-position: right 12px center;214}215.f-native:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(28, 92, 65, 0.15); background: var(--white); }216217/* segments (pilules soudées) */218.seg { display: inline-flex; flex-wrap: wrap; row-gap: 6px; }219.seg button {220  border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink-2);221  padding: 8px 14px; font-family: var(--font-display); font-weight: 600; font-size: 13px;222  cursor: pointer; margin-left: -1px; white-space: nowrap; min-height: 38px;223  transition: all 0.12s ease;224}225.seg button:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); margin-left: 0; padding-left: 16px; }226.seg button:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; padding-right: 16px; }227.seg button:hover { background: var(--blue-soft); color: var(--blue); }228.seg button.on { background: var(--blue); border-color: var(--blue); color: var(--white); position: relative; z-index: 1; }229230/* pastilles de filtres actifs */231.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }232.pill {233  display: inline-flex; align-items: center; gap: 7px;234  border: 1px solid rgba(28, 92, 65, 0.3); background: var(--blue-soft); color: var(--blue);235  border-radius: var(--r-pill); padding: 6px 14px; font-size: 12.5px; font-weight: 600;236  cursor: pointer; transition: all 0.13s ease;237}238.pill:hover { background: var(--blue); color: var(--white); }239.pill-x { font-size: 10px; opacity: 0.65; }240.pill-clear { background: var(--surface); border-color: var(--danger); color: var(--danger); }241.pill-clear:hover { background: var(--danger); color: #fff; }242.chip-sep { width: 1px; align-self: stretch; background: var(--line); margin: 4px 4px; flex: none; }243.link-btn {244  background: none; border: none; padding: 0; color: var(--blue); font: inherit;245  text-decoration: underline; cursor: pointer;246}247.field { display: flex; flex-direction: column; gap: 5px; }248.field label {249  font-size: 10.5px; font-weight: 700;250  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); padding-left: 2px;251}252.field input, .field select {253  border: 1.5px solid var(--ink); background: var(--grey); border-radius: var(--r-ctl);254  padding: 11px 14px; font-size: 15px; color: var(--ink); outline: none; font-family: inherit;255  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; min-height: 44px;256  appearance: none; -webkit-appearance: none;257}258.field select {259  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");260  background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px;261}262.field input:focus, .field select:focus {263  border-color: var(--blue); background: var(--white);264  box-shadow: 0 0 0 3px rgba(28, 92, 65, 0.15);265}266/* .btn / .btn-primary / .btn-ghost : fournis par tokens.css (ka-ui). */267268/* ================= Chips ================= */269.chips { display: flex; gap: 8px; margin: 16px 0 4px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }270.chips::-webkit-scrollbar { display: none; }271.chip {272  border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink);273  border-radius: var(--r-pill); padding: 8px 18px; font-size: 13px; font-weight: 700; cursor: pointer;274  font-family: var(--font-display); white-space: nowrap; min-height: 40px;275  transition: transform 0.13s, box-shadow 0.13s, background 0.13s, color 0.13s;276}277.chip:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-off-mid); }278.chip.on { background: var(--ink); border-color: var(--ink); color: var(--accent); box-shadow: 3px 3px 0 var(--accent); }279280/* ================= Results ================= */281.results-head { display: flex; align-items: baseline; gap: 14px; margin: 28px 0 18px; }282.results-head h2 { font-size: 22px; letter-spacing: -0.02em; color: var(--navy); }283.results-head span { color: var(--ink-3); font-size: 12.5px; font-weight: 500; }284.grid {285  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));286  gap: 22px; padding-bottom: 70px;287}288@media (max-width: 640px) { .grid { grid-template-columns: 1fr; gap: 16px; padding-bottom: 48px; } }289290.card {291  background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card);292  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-flat);293  transition: transform 0.16s ease, box-shadow 0.16s ease;294}295.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-off); }296.card:focus-visible { outline: 3px solid rgba(28, 92, 65, 0.4); outline-offset: 2px; }297.card-img { position: relative; aspect-ratio: 16/10.5; background: var(--grey); overflow: hidden; }298.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }299.card:hover .card-img img { transform: scale(1.05); }300.card-img .noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-3); font-size: 34px; }301.badge {302  position: absolute; top: 12px; left: 12px; border-radius: var(--r-pill); padding: 4px 12px;303  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;304  background: rgba(255, 255, 255, 0.94); color: var(--navy);305  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);306}307.badge.type { background: var(--orange); color: var(--white); }308.badge.right { left: auto; right: 12px; background: rgba(255, 255, 255, 0.92); }309.card-body { padding: 16px 18px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }310.card-price { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; color: var(--navy); }311.card-price small { font-weight: 500; color: var(--ink-3); font-size: 11.5px; }312.card-title { font-weight: 600; font-size: 14.5px; color: var(--ink); }313.card-meta { color: var(--ink-3); font-size: 12.5px; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }314.card-meta .sep { width: 4px; height: 4px; background: var(--orange); border-radius: 50%; }315.card-foot { margin-top: auto; padding-top: 11px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; }316.source-tag {317  font-size: 10px; font-weight: 700; text-transform: uppercase;318  letter-spacing: 0.06em; color: var(--blue); background: var(--blue-soft);319  border-radius: var(--r-pill); padding: 3px 10px;320  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%;321}322.avail { font-size: 11.5px; color: var(--ink-2); font-weight: 500; text-align: right; }323324/* ================= Skeletons ================= */325@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }326.skel { border-radius: var(--r-card); border: 1.5px solid var(--ink); overflow: hidden; background: var(--surface); }327.skel .sk-img, .skel .sk-line {328  background: linear-gradient(90deg, #ececef 25%, #f7f7f9 50%, #ececef 75%);329  background-size: 800px 100%; animation: shimmer 1.4s infinite linear;330}331.skel .sk-img { aspect-ratio: 16/10.5; }332.skel .sk-line { height: 14px; border-radius: 4px; margin: 12px 16px; }333.skel .sk-line.short { width: 45%; }334335/* ================= Empty / error ================= */336.notice { text-align: center; padding: 72px 24px; color: var(--ink-2); }337.notice .big { font-size: 44px; margin-bottom: 10px; }338.notice h2 { color: var(--navy); }339340/* ================= Detail page ================= */341.detail { padding: 30px 0 90px; }342.crumbs {343  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;344  color: var(--ink-3); margin-bottom: 20px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;345}346.crumbs a { border-bottom: 1.5px solid transparent; }347.crumbs a:hover { color: var(--blue); border-color: var(--blue); }348.detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; }349@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }350/* les enfants de grille ont min-width:auto par défaut : un contenu large351   (grille du quartier) déborderait de l'écran mobile sans ceci */352.detail-grid > * { min-width: 0; }353354.gallery { display: flex; flex-direction: column; gap: 10px; }355.gallery-main {356  border-radius: var(--r-card); overflow: hidden; border: 1.5px solid var(--ink);357  aspect-ratio: 16/10; background: var(--grey); cursor: zoom-in; box-shadow: var(--shadow-off-soft);358}359.gallery-main img { width: 100%; height: 100%; object-fit: cover; }360.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }361.thumbs button {362  border: 2px solid var(--line); border-radius: 12px; overflow: hidden; padding: 0; cursor: pointer;363  aspect-ratio: 4/3; background: var(--grey); transition: border-color 0.12s ease, transform 0.12s ease;364}365.thumbs button:hover { transform: translateY(-2px); }366.thumbs button.on { border-color: var(--orange); }367.thumbs img { width: 100%; height: 100%; object-fit: cover; }368369.panel {370  background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card);371  box-shadow: var(--shadow-off-soft); padding: 26px; position: sticky; top: 120px;372}373@media (max-width: 900px) { .panel { position: static; } }374.panel .price { font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -0.03em; color: var(--navy); }375.panel .price small { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }376.panel h1 { font-size: 22px; margin: 8px 0 2px; }377.panel .loc { color: var(--ink-2); font-size: 14px; }378.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }379@media (max-width: 380px) { .kv { grid-template-columns: 1fr; } }380.kv .cell { background: var(--grey); border-radius: var(--r-ctl); padding: 10px 14px; }381.kv .cell .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 700; }382.kv .cell .v { font-weight: 700; font-size: 14.5px; margin-top: 2px; font-family: var(--font-display); color: var(--navy); }383/* .klabel : fourni par tokens.css (ka-ui). */384.panel .klabel, .f-bloc .klabel { display: block; margin-bottom: 8px; }385.amenity-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; }386.amenity {387  background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 600;388  border: 1px solid rgba(28, 92, 65, 0.25); border-radius: var(--r-pill); padding: 5px 13px;389}390.cta {391  display: block; text-align: center; background: var(--orange); color: var(--white);392  font-weight: 600; font-family: var(--font-display); border-radius: var(--r-pill);393  padding: 15px; min-height: 48px;394  box-shadow: 0 8px 22px rgba(255, 106, 0, 0.34); transition: all 0.14s ease;395}396.cta:hover { background: var(--orange-deep); }397.cta:active { transform: translateY(1px); }398.panel .fine { font-size: 11.5px; color: var(--ink-3); margin-top: 14px; text-align: center; }399400/* ================= Lightbox ================= */401.lightbox {402  position: fixed; inset: 0; background: rgba(20, 24, 20, 0.94); z-index: var(--z-modal, 900);403  display: flex; align-items: center; justify-content: center; cursor: zoom-out;404  padding: max(16px, env(safe-area-inset-top)) 16px;405}406.lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 12px; }407408/* Lightbox v2 : balayage entre photos (scroll-snap) + pincement pour zoomer */409.lightbox-v2 { padding: 0; cursor: default; display: block; }410.lightbox-track {411  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; height: 100%;412  -webkit-overflow-scrolling: touch; scrollbar-width: none;413  touch-action: pan-x pinch-zoom;414}415.lightbox-track::-webkit-scrollbar { display: none; }416.lightbox-cell {417  flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center;418  display: flex; align-items: center; justify-content: center;419  padding: max(52px, env(safe-area-inset-top)) 10px max(24px, env(safe-area-inset-bottom));420  overflow: hidden;421}422.lightbox-cell img {423  max-width: 100%; max-height: 100%; border-radius: 10px;424  user-select: none; -webkit-user-drag: none; will-change: transform;425}426.lightbox-close {427  position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 3;428  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.4);429  background: rgba(20, 24, 20, 0.6); color: #fff; font-size: 18px; cursor: pointer;430  display: flex; align-items: center; justify-content: center;431  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);432}433.lightbox-count {434  position: fixed; left: 50%; transform: translateX(-50%); right: auto;435  top: max(22px, env(safe-area-inset-top)); bottom: auto; z-index: 3;436}437.lightbox-v2 .carousel-nav { position: fixed; z-index: 3; }438439/* visuel de secours (SmartImg) directement sous .carousel (galerie vide) */440.carousel > img { display: block; width: 100%; aspect-ratio: 16/11; object-fit: cover; }441442/* ================= Sources page ================= */443.sources { padding: 44px 0 90px; }444.sources h1 { font-size: clamp(28px, 4vw, 40px); margin: 10px 0 6px; color: var(--navy); }445.sources .sub { color: var(--ink-2); margin-bottom: 30px; max-width: 700px; }446.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); }447.src-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; }448.src-table th {449  text-align: left; font-size: 10.5px; text-transform: uppercase;450  letter-spacing: 0.1em; color: var(--ink-3); padding: 14px 18px;451  border-bottom: 1px solid var(--line-strong); background: var(--grey);452}453.src-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }454.src-table tr:last-child td { border-bottom: none; }455.src-table tr:hover td { background: var(--navy-soft); }456.src-table a { color: var(--blue); font-weight: 600; border-bottom: 1.5px solid rgba(28, 92, 65, 0.35); }457.pill { display: inline-block; border-radius: var(--r-pill); padding: 3px 10px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }458.pill.ok { background: var(--blue-soft); color: var(--blue); }459.pill.todo { background: var(--orange-soft); color: var(--orange-deep); }460.count-pill { font-weight: 700; font-family: var(--font-display); font-size: 16px; color: var(--navy); }461462/* ================= Page Statistiques ================= */463.stats-page { padding: 44px 0 90px; }464.stats-title { font-size: clamp(30px, 4.6vw, 46px); margin: 10px 0 6px; color: var(--navy); }465.stats-page .sub { color: var(--ink-2); max-width: 640px; margin-bottom: 30px; }466467.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 30px; }468.tile {469  background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card);470  padding: 18px 20px; box-shadow: var(--shadow-flat);471}472.tile-v { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.03em; line-height: 1.05; color: var(--navy); }473.tile-k { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-top: 6px; }474.hero-tile { background: var(--navy); color: var(--white); border-color: var(--navy); }475.hero-tile .tile-v { color: var(--white); }476.hero-tile .tile-k { color: rgba(255, 255, 255, 0.6); }477478.viz-card {479  background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card);480  box-shadow: var(--shadow-off-soft); padding: 26px 28px 20px; margin-bottom: 22px;481}482.viz-card h2 { font-size: 19px; letter-spacing: -0.01em; color: var(--navy); }483.viz-sub { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 20px; }484.viz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }485@media (max-width: 900px) { .viz-grid { grid-template-columns: 1fr; } }486487/* Histogramme (mono-série, bleu vif) */488.histo { display: flex; align-items: stretch; gap: 2px; height: 240px; }489.histo-col { flex: 1; display: flex; flex-direction: column; min-width: 0; cursor: default; }490.histo-bar-zone { flex: 1; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line-strong); }491.histo-bar {492  width: 100%; background: var(--blue); border-radius: 6px 6px 0 0;493  min-height: 2px; transition: background 0.12s ease;494}495.histo-col:hover .histo-bar { background: var(--orange); }496.histo-x { font-size: 9.5px; color: var(--ink-3); text-align: left; height: 18px; padding-top: 5px; overflow: visible; white-space: nowrap; }497498/* Barres horizontales (mono-série) */499.hbars { display: flex; flex-direction: column; gap: 7px; }500.hbar-row {501  display: grid; grid-template-columns: minmax(96px, 170px) 1fr auto;502  gap: 12px; align-items: center; min-height: 26px; cursor: default;503}504.hbar-label { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }505.hbar-label a { border-bottom: 1.5px solid rgba(28, 92, 65, 0.35); }506.hbar-label a:hover { color: var(--blue); }507.hbar-track { background: var(--grey); border-radius: var(--r-pill); height: 18px; overflow: hidden; }508.hbar-fill {509  display: block; height: 100%; background: var(--blue); border-radius: var(--r-pill);510  min-width: 2px; transition: background 0.12s ease;511}512.hbar-row:hover .hbar-fill { background: var(--orange); }513.hbar-value { font-size: 11.5px; font-weight: 700; white-space: nowrap; color: var(--navy); }514.hbar-value em { font-style: normal; font-weight: 500; color: var(--ink-3); }515@media (max-width: 640px) {516  .hbar-row { grid-template-columns: minmax(80px, 110px) 1fr auto; gap: 8px; }517  .hbar-value em { display: none; }518  .viz-card { padding: 20px 16px 14px; }519  .histo { height: 170px; }520}521522/* Infobulle */523.viz-tip {524  position: fixed; z-index: var(--z-toast, 950); pointer-events: none; max-width: 180px;525  background: var(--navy); color: var(--white); border-radius: 12px;526  padding: 9px 12px; font-size: 12px; line-height: 1.5;527  box-shadow: 0 8px 24px rgba(20, 24, 20, 0.35);528}529.viz-tip-title { font-family: var(--font-display); font-weight: 700; color: var(--orange); margin-bottom: 2px; }530531/* Vue tableau repliable (accessibilité / relief) */532.viz-table { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }533.viz-table summary {534  cursor: pointer; font-size: 11.5px; font-weight: 700;535  text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue);536}537.viz-table table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }538.viz-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); padding: 6px 10px; border-bottom: 1px solid var(--line-strong); }539.viz-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); }540541.stats-foot { font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.02em; margin-top: 6px; }542543/* ================= Mobile : feuille de filtres + FAB ================= */544.sheet-head { display: none; }545.sheet-apply { display: none; }546.sheet-backdrop { display: none; }547.fab { display: none; }548549@media (max-width: 640px) {550  /* En-tête compact */551  .header-inner { height: 56px; }552  .brand { font-size: 21px; }553  .nav a { padding: 8px 13px; font-size: 13.5px; }554  .ticker { font-size: 10.5px; padding: 6px 0; }555556  /* Héro resserré + stats en rangée défilante */557  .hero h1 { font-size: clamp(30px, 8.6vw, 42px); }558  .hero p.lede { font-size: 15px; }559  .stat-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin-right: -16px; padding-right: 16px; }560  .stat-row::-webkit-scrollbar { display: none; }561  .stat-chip { flex: 0 0 auto; white-space: nowrap; }562563  /* La barre de filtres devient une feuille coulissante (bottom sheet) */564  .filterbar { display: none; }565  .filterbar.open .f-primary { flex-direction: column; }566  .filterbar.open .f-search { align-self: stretch; max-width: none; min-height: 46px; }567  .filterbar.open .f-search input { font-size: 16px; }  /* anti-zoom iOS */568  .filterbar.open .f-ctl select { max-width: none; width: 100%; }569  .filterbar.open .f-more { display: none; }570  .filterbar.open .f-adv { margin-top: 4px; }571  .filterbar.open {572    display: flex; flex-direction: column; gap: 12px;573    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal, 900);574    margin: 0; border-radius: 24px 24px 0 0; border: none;575    max-height: 82dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;576    padding: 16px 18px calc(18px + env(safe-area-inset-bottom));577    box-shadow: 0 -16px 48px rgba(20, 24, 20, 0.28);578    animation: sheet-up 0.22s ease;579  }580  @keyframes sheet-up { from { transform: translateY(30%); opacity: 0.4; } to { transform: none; opacity: 1; } }581  .filterbar.open .sheet-head {582    display: flex; justify-content: space-between; align-items: center;583    font-family: var(--font-display); font-weight: 700; font-size: 17px;584    letter-spacing: -0.01em; color: var(--navy);585    position: sticky; top: -16px; background: var(--surface); padding: 6px 0 8px;586    border-bottom: 1px solid var(--line); margin-bottom: 2px; z-index: 1;587  }588  .sheet-close {589    border: 1.5px solid var(--ink); background: var(--surface); border-radius: 50%;590    width: 36px; height: 36px; font-size: 15px; cursor: pointer; line-height: 1; color: var(--navy);591  }592  .filterbar.open .sheet-apply { display: block; width: 100%; }593  .sheet-backdrop {594    display: block; position: fixed; inset: 0; z-index: var(--z-overlay, 800);595    background: rgba(20, 24, 20, 0.45); backdrop-filter: blur(2px);596  }597598  /* Bouton flottant */599  .fab {600    display: flex; align-items: center; gap: 6px;601    position: fixed; left: 50%; transform: translateX(-50%);602    bottom: calc(74px + env(safe-area-inset-bottom) + var(--consent-h, 0px)); z-index: 80;603    background: var(--orange); color: var(--white); border: none;604    border-radius: var(--r-pill); padding: 13px 24px; font-family: var(--font-display);605    font-weight: 600; font-size: 15px; cursor: pointer;606    box-shadow: 0 10px 28px rgba(255, 106, 0, 0.4);607  }608  .fab:active { transform: translateX(-50%) scale(0.97); }609610  /* Fiche logement : vignettes en bande défilante + panneau non collant */611  .thumbs { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }612  .thumbs::-webkit-scrollbar { display: none; }613  .thumbs button { flex: 0 0 96px; }614  .detail { padding-top: 20px; }615  .panel { padding: 20px; }616  .panel .price { font-size: 28px; }617  .results-head { margin-top: 20px; }618  .chips { margin-right: -16px; padding-right: 16px; }619  .notice { padding: 48px 16px; }620}621622/* ================= Barre de navigation inférieure (mobile) ================= */623.tabbar { display: none; }624@media (max-width: 760px) {625  .tabbar {626    display: grid; grid-template-columns: repeat(4, 1fr);627    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottombar, 600);628    background: rgba(255, 255, 255, 0.92);629    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);630    border-top: 1px solid var(--line);631    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));632  }633  .tabbar a {634    display: flex; flex-direction: column; align-items: center; gap: 3px;635    padding: 5px 2px; min-height: 48px; justify-content: center;636    font-size: 10.5px; font-weight: 600; color: var(--ink-3);637    border-radius: var(--r-ctl); transition: color 0.12s ease;638  }639  .tabbar a.active { color: var(--orange); }640  .tabbar a svg { display: block; }641  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }642  .footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }643}644645/* Anti-zoom iOS : les champs doivent faire >= 16px646   (filet global : tokens.css force aussi 16 px au doigt) */647@media (max-width: 900px) {648  .field input, .field select,649  .f-search input, .f-native, .f-ctl select, .ms-sort select { font-size: 16px; }650}651652/* Cible tactile ≥44 px du logo (124×30 rendus) : zone étendue invisible */653@media (pointer: coarse) {654  .brand { position: relative; }655  .brand::after { content: ""; position: absolute; inset: -8px; }656}657658/* ================= Footer ================= */659.footer { background: var(--navy); color: rgba(255, 255, 255, 0.72); margin-top: 20px; padding: 44px 0 max(40px, env(safe-area-inset-bottom)); font-size: 13px; }660.footer .fbrand { font-family: var(--font-display); font-weight: 700; font-size: 32px; color: var(--white); letter-spacing: -0.03em; margin-bottom: 4px; display: flex; align-items: center; }661.footer .fbrand .logo-ico { margin-right: 13px; }662.footer .fbrand .ka { color: var(--orange); }663.footer .fbaseline { color: rgba(255, 255, 255, 0.65); font-size: 14px; margin-bottom: 16px; }664.footer .fbaseline .hl { color: var(--orange); font-weight: 600; }665.footer b { color: var(--white); }666.footer .frow { display: flex; flex-direction: column; gap: 5px; max-width: 720px; }667.footer .fmono { font-size: 11.5px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.42); margin-top: 18px; }668669/* --- Carte interactive (mission 4) --------------------------------------- */670.results-tools { display: flex; align-items: center; gap: 14px; }671.view-toggle {672  display: inline-flex; border: 1.5px solid var(--ink);673  border-radius: var(--r-pill); overflow: hidden; background: var(--surface);674  box-shadow: var(--shadow-flat);675}676.view-toggle button {677  border: 0; background: transparent; padding: 7px 16px; cursor: pointer;678  font-size: 12.5px; font-weight: 600; color: var(--ink-2);679}680/* zone tactile >= 44 px au doigt (coarse pointer = mobile/tablette) */681@media (pointer: coarse) {682  .view-toggle button { min-height: 44px; padding: 10px 18px; }683}684.view-toggle button + button { border-left: 1px solid var(--line); }685.view-toggle button.on { background: var(--blue); color: var(--white); }686687.map-split {688  display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 18px;689  height: calc(100dvh - 170px); min-height: 420px;690}691.map-list {692  overflow-y: auto; display: flex; flex-direction: column; gap: 14px;693  padding-right: 4px; scrollbar-width: thin;694}695.map-list .card { margin: 0; flex: 0 0 auto; }696.mapview {697  width: 100%; height: 100%; border: 1.5px solid var(--ink);698  border-radius: var(--r-card); box-shadow: var(--shadow-off-soft);699  overflow: hidden; background: var(--grey);700}701.map-loading {702  display: flex; align-items: center; justify-content: center;703  color: var(--ink-3); font-size: 13px;704}705706/* mobile d'abord : carte plein écran, liste masquée (bascule via l'onglet) */707@media (max-width: 780px) {708  .map-split { grid-template-columns: 1fr; height: calc(100dvh - 210px); }709  .map-list { display: none; }710  .results-tools { width: 100%; justify-content: space-between; }711}712713/* popup MapLibre au style Lou-Ka */714.maplibregl-popup-content {715  padding: 0; border-radius: var(--r-card); overflow: hidden;716  border: 1.5px solid var(--ink); box-shadow: var(--shadow-off);717  font-family: var(--font-body);718}719.maplibregl-popup-close-button {720  font-size: 18px; padding: 2px 8px; color: var(--white); z-index: 2;721  text-shadow: 0 0 4px rgba(20, 24, 20, 0.8);722}723.mv-pop img, .mv-noimg { width: 100%; height: 130px; object-fit: cover; }724.mv-noimg { display: flex; align-items: center; justify-content: center;725  font-size: 34px; background: var(--grey); }726.mv-pop-body { padding: 10px 12px 12px; }727.mv-pop-price { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy); }728.mv-pop-price small { font-weight: 400; color: var(--ink-3); font-size: 12px; }729.mv-pop-title { font-size: 13px; color: var(--ink-2); margin-top: 2px;730  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }731.mv-pop-meta { font-size: 11.5px; color: var(--ink-2); margin-top: 6px; }732.mv-pop-src { font-size: 10px; color: var(--ink-3);733  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }734.mv-pop-cta {735  display: block; margin-top: 10px; padding: 9px 10px; text-align: center;736  background: var(--orange); color: var(--white); border-radius: var(--r-pill);737  font-weight: 600; font-size: 13px;738}739.mv-pop-cta:hover { background: var(--orange-deep); }740741/* --- Commodités de proximité (fiche) -------------------------------------- */742.poi-list {743  list-style: none; margin: 0; padding: 0;744  display: flex; flex-direction: column; gap: 2px;745}746.poi-list li {747  display: flex; align-items: center; gap: 9px;748  padding: 5px 2px; border-bottom: 1px solid var(--line);749  font-size: 13px;750}751.poi-list li:last-child { border-bottom: 0; }752.poi-ico { width: 20px; text-align: center; flex: 0 0 auto; }753.poi-name { flex: 1; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }754.poi-dist { font-size: 11.5px; color: var(--navy); font-weight: 600; flex: 0 0 auto; }755756/* --- Menu déroulant mobile ------------------------------------------------- */757.menu-btn {758  display: none; position: relative; z-index: 60;759  width: 44px; height: 44px; margin-left: auto;760  border: 1.5px solid var(--ink); border-radius: var(--r-ctl);761  background: var(--surface); cursor: pointer; padding: 0;762  flex-direction: column; align-items: center; justify-content: center; gap: 5px;763  box-shadow: var(--shadow-flat);764  transition: box-shadow 0.15s ease, transform 0.15s ease;765}766.menu-btn:active { transform: scale(0.96); }767.menu-btn span {768  display: block; width: 18px; height: 2px; background: var(--navy);769  border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease;770}771.menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }772.menu-btn.open span:nth-child(2) { opacity: 0; }773.menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }774775/* KA Nav v2 (2026-08-25) : panneau PLEIN ECRAN fixed inset:0 - visible peu776   importe le scroll (l'ancien dropdown absolute 480px clippait/se coupait). */777.mobile-menu {778  display: none; position: fixed; inset: 0;779  background: var(--paper);780  padding: 76px 16px calc(24px + env(safe-area-inset-bottom));781  overflow-y: auto; overscroll-behavior: contain;782}783.mobile-menu.open { display: block; animation: mm-in 0.16s ease; }784@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }785/* burger masque a l'ouverture : la fermeture passe par le X fixe du panneau */786.header:has(.mobile-menu.open) .menu-btn { visibility: hidden; }787/* bouton de fermeture du panneau : fixe en haut a droite du viewport */788.mm-close {789  position: fixed; top: 10px; right: 14px; z-index: 2;790  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;791  border: 1.5px solid var(--ink); border-radius: 999px;792  background: var(--ink); color: var(--paper);793  font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0;794}795/* verrou du scroll d'arriere-plan quand le menu est ouvert (CSS pur) */796html:has(.mobile-menu.open) { overflow: hidden; }797/* Le drawer vit DANS le header : quand il est ouvert, le header monte au niveau798   modal pour peindre au-dessus du .mm-backdrop (frère du header, overlay 800). */799.header:has(.mobile-menu.open) { z-index: var(--z-modal, 900); }800.mm-link {801  display: flex; align-items: center; gap: 12px;802  padding: 15px 10px; min-height: 52px;803  font-family: var(--font-display); font-weight: 700; font-size: 19px;804  letter-spacing: -0.02em; border-bottom: 1px solid var(--line);805  color: var(--navy);806  opacity: 0; transform: translateY(-8px);807  transition: opacity 0.25s ease, transform 0.25s ease;808}809.mobile-menu.open .mm-link { opacity: 1; transform: translateY(0); }810.mm-link.active { color: var(--orange); }811.mm-link.active .mm-arrow { opacity: 1; color: var(--orange); }812.mm-ico { width: 26px; text-align: center; font-size: 17px; }813.mm-arrow { margin-left: auto; opacity: 0.25; color: var(--orange); transition: opacity 0.15s ease; }814.mm-link:active { background: var(--orange-soft); border-radius: var(--r-ctl); }815.mm-foot {816  padding: 12px 10px 4px;817  font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em;818}819.mm-backdrop {820  position: fixed; inset: 0; z-index: var(--z-overlay, 800);821  background: rgba(20, 24, 20, 0.35); backdrop-filter: blur(2px);822}823@media (max-width: 760px) {824  .menu-btn { display: flex; }825  .nav { display: none; }826}827828/* --- Bandeau de consentement (témoins) ------------------------------------- */829.cookie-banner {830  position: fixed; left: 12px; right: 12px;831  bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 80;832  animation: cookie-in 0.35s ease;833}834@keyframes cookie-in { from { transform: translateY(24px); opacity: 0; } }835.cookie-inner {836  max-width: 720px; margin: 0 auto; background: var(--surface);837  border: 1.5px solid var(--ink); border-radius: var(--r-card);838  box-shadow: var(--shadow-off); padding: 16px 18px;839}840.cookie-text { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }841.cookie-text b { color: var(--navy); }842.cookie-text a { text-decoration: underline; text-underline-offset: 2px; }843.cookie-options { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }844.cookie-opt {845  display: flex; align-items: flex-start; gap: 10px; font-size: 13px;846  color: var(--ink-2); cursor: pointer;847}848.cookie-opt input { margin-top: 2px; accent-color: var(--orange); width: 16px; height: 16px; }849.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; justify-content: flex-end; }850@media (max-width: 640px) {851  .cookie-actions { justify-content: stretch; }852  .cookie-actions .btn { flex: 1; text-align: center; justify-content: center; }853}854855/* --- Page confidentialité + lien pied de page ------------------------------- */856.legal { padding: 48px 0 70px; max-width: 760px; }857.legal h1 { font-size: clamp(30px, 5vw, 46px); margin: 12px 0 8px; letter-spacing: -0.03em; color: var(--navy); }858.legal section { margin-top: 26px; }859.legal h3 { font-size: 18px; margin-bottom: 8px; }860.legal p, .legal li { color: var(--ink-2); font-size: 14.5px; }861.legal ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }862.flink {863  border: 0; background: none; padding: 0; cursor: pointer;864  color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px;865}866867/* --- Section « Le quartier » (fiche) --------------------------------------- */868.quartier { margin-top: 34px; }869.quartier h2 { font-size: 24px; letter-spacing: -0.02em; color: var(--navy); }870.q-sub { color: var(--ink-3); font-size: 13px; margin: 4px 0 16px; }871.q-grid {872  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;873}874@media (max-width: 640px) { .q-grid { grid-template-columns: repeat(2, 1fr); } }875.q-cell {876  background: var(--surface); border: 1.5px solid var(--ink);877  border-radius: var(--r-card); padding: 12px 14px; box-shadow: var(--shadow-flat);878}879.q-val { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--navy); }880.q-label { font-size: 10.5px; font-weight: 600; color: var(--ink-3);881  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }882.q-prox { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }883.q-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; }884.q-bar-label { flex: 0 0 150px; color: var(--ink-2); }885@media (max-width: 640px) { .q-bar-label { flex-basis: 120px; font-size: 12px; } }886.q-bar-track {887  flex: 1; height: 10px; background: var(--grey);888  border-radius: var(--r-pill); overflow: hidden;889}890.q-bar-fill { display: block; height: 100%; background: var(--blue); border-radius: var(--r-pill); }891.q-bar-num { flex: 0 0 30px; text-align: right;892  font-size: 11.5px; font-weight: 700; color: var(--navy); }893.q-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }894.q-badge {895  display: inline-flex; align-items: center; gap: 6px;896  border: 1.5px solid var(--ink); border-radius: var(--r-pill);897  padding: 7px 14px; font-size: 12.5px; background: var(--surface);898}899.q-badge.cool { background: var(--blue-soft); border-color: rgba(28, 92, 65, 0.3); color: var(--blue); }900.q-badge.hot { background: var(--orange-soft); border-color: rgba(255, 106, 0, 0.35); color: var(--orange-deep); }901.quartier .fine { margin-top: 10px; }902903/* --- Fiche v2 (mobile-first) ------------------------------------------------ */904/* Ordre DOM = ordre visuel sur TOUS les breakpoints (standard Groupe Ka905   « Ordre des sections — pages détail »). Interdit : `order` / `column-reverse`906   / `display:contents` pour réordonner — les blocs sans `order` retombaient à907   order:0 et passaient devant la galerie sur mobile. Mobile : colonnes908   empilées ; desktop : grid 2 colonnes (logement | synthèse). */909.fiche { display: flex; flex-direction: column; gap: 22px; }910.f-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }911@media (min-width: 900px) {912  .fiche { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; }913  .f-col { gap: 26px; }914}915.f-bloc { min-width: 0; }916.f-bloc h2 { font-size: 21px; letter-spacing: -0.02em; margin-bottom: 10px; color: var(--navy); }917.f-bloc:empty { display: none; }918919/* galerie à balayage natif */920.carousel { position: relative; border-radius: var(--r-card); overflow: hidden;921  border: 1.5px solid var(--ink); background: var(--grey); box-shadow: var(--shadow-off-soft); }922.carousel-track {923  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;924  -webkit-overflow-scrolling: touch; scrollbar-width: none; aspect-ratio: 16/11;925}926.carousel-track::-webkit-scrollbar { display: none; }927.carousel-track img {928  flex: 0 0 100%; width: 100%; object-fit: cover; scroll-snap-align: center;929  cursor: zoom-in;930}931.carousel-empty { display: flex; align-items: center; justify-content: center;932  aspect-ratio: 16/11; font-size: 48px; }933.carousel-count {934  position: absolute; right: 12px; bottom: 12px; z-index: 2;935  background: rgba(20, 24, 20, 0.78); color: var(--white);936  font-size: 12px; font-weight: 600;937  padding: 4px 11px; border-radius: var(--r-pill);938  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);939}940.carousel-nav {941  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;942  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink);943  background: rgba(255, 255, 255, 0.92); color: var(--navy); font-size: 22px; cursor: pointer;944  display: flex; align-items: center; justify-content: center; line-height: 1;945  box-shadow: var(--shadow-flat);946}947.carousel-nav.prev { left: 10px; } .carousel-nav.next { right: 10px; }948@media (max-width: 640px) { .carousel-nav { display: none; } }  /* balayage natif */949950/* bandeau prix + badge marché */951.f-hero .price { font-size: clamp(34px, 8vw, 44px); }952.deal-badge {953  display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 4px;954  border-radius: var(--r-pill); padding: 7px 14px; font-size: 13px; font-weight: 600;955  border: 1.5px solid var(--ink);956}957.deal-good { background: var(--blue-soft); border-color: rgba(28, 92, 65, 0.3); color: var(--blue); }958.deal-ok { background: var(--surface); color: var(--ink-2); }959.deal-high { background: var(--orange-soft); border-color: rgba(255, 106, 0, 0.35); color: var(--orange-deep); }960.f-hero h1 { font-size: clamp(20px, 4.5vw, 26px); margin-top: 8px; }961962/* chips clés à défilement horizontal */963.chips-scroll {964  display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 6px;965  scrollbar-width: none; -webkit-overflow-scrolling: touch;966}967.chips-scroll::-webkit-scrollbar { display: none; }968.chip-key {969  flex: 0 0 auto; background: var(--navy); color: var(--white);970  border-radius: var(--r-pill); padding: 8px 15px;971  font-size: 12px; font-weight: 600; white-space: nowrap; min-height: 34px;972  display: inline-flex; align-items: center;973}974975/* ancres de navigation rapide */976.ancres {977  display: flex; gap: 4px; overflow-x: auto; padding: 6px 0 2px;978  scrollbar-width: none; border-bottom: 1px solid var(--line); margin-bottom: 8px;979}980.ancres::-webkit-scrollbar { display: none; }981.ancres a {982  flex: 0 0 auto; padding: 9px 14px; font-size: 13.5px; font-weight: 600;983  color: var(--ink-2); border-radius: var(--r-pill); min-height: 44px;984  display: inline-flex; align-items: center;985}986.ancres a:hover { background: var(--orange-soft); color: var(--orange); }987html { scroll-padding-top: 76px; }   /* header sticky au-dessus des ancres */988989/* description restructurée */990.enbref {991  background: var(--blue-soft); border: 1px solid rgba(28, 92, 65, 0.25);992  border-radius: var(--r-card); padding: 12px 16px; color: var(--navy);993  font-size: 15px; margin: 0 0 14px;994}995.desc-section { margin-bottom: 12px; }996.desc-section h4 { font-size: 15px; margin-bottom: 3px; }997.desc-section p { color: var(--ink-2); font-size: 14.5px; margin: 0; white-space: pre-line; }998.texte-original { margin-top: 12px; }999.texte-original summary {1000  cursor: pointer; font-size: 12.5px;1001  color: var(--ink-3); min-height: 44px; display: flex; align-items: center;1002}1003.texte-original p { color: var(--ink-3); font-size: 13px; white-space: pre-line; }10041005/* inclusions : confirmées vs mentionnées */1006.amenity.confirmed { background: var(--blue-soft); border-color: rgba(28, 92, 65, 0.25); color: var(--blue); font-weight: 600; }1007.amenity.unconfirmed { background: transparent; border-style: dashed; border-color: var(--line-strong); color: var(--ink-3); }10081009/* détails pratiques : historique de prix */1010.prix-histo {1011  margin-top: 12px; padding: 10px 14px; border-radius: var(--r-card);1012  border: 1.5px solid var(--ink); font-size: 13.5px; background: var(--surface);1013}1014.prix-histo.down { background: var(--blue-soft); border-color: rgba(28, 92, 65, 0.3); color: var(--blue); }10151016/* quartier compacté sur mobile */1017@media (max-width: 640px) {1018  .q-cell { padding: 9px 11px; }1019  .q-val { font-size: 16px; }1020  .q-bar { gap: 8px; font-size: 12px; }1021  .q-bar-track { height: 8px; }1022}1023.q-badge-sub { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 400; margin-left: 4px; }10241025/* POI groupés repliables */1026.poi-groupe { border: 1.5px solid var(--ink); border-radius: var(--r-card);1027  margin-bottom: 8px; background: var(--surface); overflow: hidden; }1028.poi-groupe summary {1029  display: flex; justify-content: space-between; align-items: center; gap: 10px;1030  padding: 12px 14px; cursor: pointer; font-weight: 600; font-size: 14px;1031  min-height: 48px; list-style: none;1032}1033.poi-groupe summary::-webkit-details-marker { display: none; }1034.poi-groupe summary::after { content: "▾"; color: var(--ink-3); transition: transform 0.15s ease; }1035.poi-groupe[open] summary::after { transform: rotate(180deg); }1036.poi-resume { font-size: 11.5px; color: var(--ink-3); font-weight: 400; }1037.poi-groupe .poi-list { padding: 0 14px 10px; }10381039/* CTA sticky mobile */1040.cta-sticky {1041  position: fixed; left: 0; right: 0; z-index: var(--z-dropdown, 700);1042  bottom: var(--consent-h, 0px);1043  display: flex; align-items: center; gap: 12px;1044  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px);1045  border-top: 1px solid var(--line);1046  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));1047}1048.cta-sticky .cta { flex: 1; margin: 0; text-align: center; }1049.cta-sticky-prix { font-family: var(--font-display); font-weight: 700; font-size: 19px; white-space: nowrap; color: var(--navy); }1050.cta-sticky-prix small { font-weight: 500; font-size: 10px; color: var(--ink-3); }1051@media (min-width: 900px) { .cta-sticky { display: none; } }1052@media (max-width: 899px) {1053  .cta-desktop { display: none; }1054  .detail { padding-bottom: 84px; }   /* place pour le CTA sticky */1055}1056.f-foot { margin-top: 26px; }10571058/* --- Passerelle vers l'annonce originale ------------------------------------ */1059.passerelle {1060  min-height: calc(100dvh - 120px); display: flex; align-items: center;1061  justify-content: center; padding: 24px 16px;1062}1063.pass-card {1064  width: 100%; max-width: 520px; background: var(--surface);1065  border: 1.5px solid var(--ink); border-radius: var(--r-card);1066  box-shadow: var(--shadow-off); padding: 30px 28px; text-align: center;1067}1068.pass-brands {1069  display: flex; align-items: center; justify-content: center; gap: 14px;1070  margin-bottom: 22px; flex-wrap: wrap;1071}1072.pass-brand {1073  font-family: var(--font-display); font-weight: 700; font-size: 24px;1074  letter-spacing: -0.03em; display: inline-flex; align-items: center; color: var(--navy);1075}1076.pass-brand .ka { color: var(--orange); }1077.pass-trajet { display: inline-flex; align-items: center; gap: 5px; }1078.pass-dot {1079  width: 6px; height: 6px; border-radius: 50%; background: var(--orange);1080  opacity: 0.25; animation: pass-dot 1.2s ease infinite;1081}1082.pass-dot:nth-child(2) { animation-delay: 0.2s; }1083.pass-dot:nth-child(3) { animation-delay: 0.4s; }1084@keyframes pass-dot { 40% { opacity: 1; transform: translateX(2px); } }1085.pass-fleche { color: var(--orange); font-size: 18px; }1086.pass-gestionnaire {1087  font-family: var(--font-display); font-weight: 700; font-size: 19px;1088  display: inline-flex; align-items: center; gap: 8px;1089  background: var(--blue-soft); border: 1px solid rgba(28, 92, 65, 0.25);1090  border-radius: var(--r-pill); padding: 6px 16px; color: var(--blue);1091}1092.pass-card h1 { font-size: 20px; letter-spacing: -0.02em; }1093.pass-texte { color: var(--ink-2); font-size: 14.5px; margin: 10px 0 20px; }1094.pass-progress {1095  height: 10px; border-radius: var(--r-pill);1096  overflow: hidden; background: var(--grey); margin-bottom: 20px;1097}1098.pass-progress-fill {1099  display: block; height: 100%; width: 0; background: var(--orange);1100  border-radius: var(--r-pill);1101}1102.pass-progress-fill.go { animation: pass-fill 2.2s linear forwards; }1103@keyframes pass-fill { to { width: 100%; } }1104@media (prefers-reduced-motion: reduce) {1105  .pass-progress-fill.go { animation: none; width: 100%; }1106  .pass-dot { animation: none; opacity: 0.7; }1107}1108.pass-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }11091110/* --- boutons PDF -------------------------------------------------------- */1111.btn-pdf { display: block; text-align: center; margin-top: 10px; width: 100%; }11121113/* --- Onglets de la page Stats -------------------------------------------- */1114.onglets {1115  display: flex; gap: 8px; overflow-x: auto; margin: 26px 0 22px;1116  padding-bottom: 4px; scrollbar-width: none;1117  border-bottom: 1px solid var(--line);1118}1119.onglets::-webkit-scrollbar { display: none; }1120.onglet {1121  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;1122  border: 1.5px solid var(--ink);1123  border-radius: var(--r-pill);1124  background: var(--surface); color: var(--ink-2); cursor: pointer;1125  padding: 10px 18px; font-weight: 600; font-size: 13.5px; min-height: 44px;1126  margin-bottom: 8px;1127  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;1128}1129.onglet:hover { background: var(--blue-soft); color: var(--blue); border-color: var(--blue); }1130.onglet.on { background: var(--blue); border-color: var(--blue); color: var(--white); }11311132/* baisses de prix */1133.baisses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }1134.baisses li {1135  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;1136  padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px;1137}1138.baisses li a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }1139.baisse-ville { color: var(--ink-3); font-size: 11.5px; }1140.baisse-prix { margin-left: auto; }1141.baisse-prix s { color: var(--ink-3); }1142.baisse-pct {1143  font-style: normal; font-weight: 700;1144  background: var(--blue-soft);1145  color: var(--blue); border-radius: var(--r-pill); padding: 2px 9px;1146  font-size: 11px; margin-left: 8px;1147}1148.alertes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); }11491150/* ================= Pagination (12 annonces/page) ================= */1151.pager {1152  display: flex; align-items: center; justify-content: space-between;1153  gap: 16px; flex-wrap: wrap; margin: 26px 0 10px; padding-top: 18px;1154  border-top: 1px solid var(--line);1155}1156.pager-info {1157  font-size: 12.5px; color: var(--ink-2); letter-spacing: 0.02em;1158}1159.pager-info em { font-style: normal; color: var(--ink-3); }1160.pager-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }1161.pager-btn {1162  min-width: 38px; height: 38px; padding: 0 10px;1163  display: inline-flex; align-items: center; justify-content: center;1164  background: var(--surface); border: 1.5px solid var(--ink);1165  border-radius: var(--r-pill); cursor: pointer;1166  font-size: 13px; font-weight: 600;1167  color: var(--navy); transition: all 0.12s ease;1168}1169.pager-btn:hover:not(:disabled):not(.on) {1170  background: var(--blue-soft); border-color: var(--blue); color: var(--blue);1171}1172.pager-btn.on { background: var(--navy); border-color: var(--navy); color: var(--white); cursor: default; }1173.pager-btn:disabled { opacity: 0.35; cursor: not-allowed; }1174.pager-ellipsis { color: var(--ink-3); padding: 0 2px; }1175.map-list .pager { margin: 10px 0 4px; }1176@media (max-width: 640px) {1177  .pager { justify-content: center; }1178  .pager-info { width: 100%; text-align: center; order: 2; }1179}11801181/* ================= Icônes SVG inline — alignement ================= */1182.chip-ico { display: inline-flex; align-items: center; gap: 6px; }1183.chip-ico svg { flex: none; }1184.view-toggle button, .seg button { display: inline-flex; align-items: center; gap: 6px; }1185.fab { align-items: center; gap: 8px; }1186.fab svg { flex: none; }1187.mm-ico { display: inline-flex; align-items: center; }1188.notice .big { display: flex; justify-content: center; color: var(--ink-3); }1189.notice .big svg { display: block; }1190.card-img .noimg { color: var(--ink-3); }1191.badge.right { display: inline-flex; align-items: center; gap: 4px; }1192.btn-pdf { display: inline-flex; align-items: center; gap: 7px; }1193.f-search svg { flex: none; color: var(--ink-3); }1194.mv-noimg { display: flex; align-items: center; justify-content: center; color: var(--ink-3); }11951196/* footer — liens (Groupe KA, courriels, mentions légales) */1197.footer .frow a { color: var(--white); text-decoration: underline; text-decoration-color: rgba(255, 106, 0, 0.5); text-underline-offset: 3px; }1198.footer .frow a:hover { color: var(--orange); }1199.footer .fmono a:hover { color: var(--orange); }12001201/* ================= Compte (connexion Google) ================= */1202.login-btn {1203  display: inline-flex; align-items: center; gap: 8px;1204  padding: 8px 16px; margin-left: 10px; min-height: 38px;1205  background: var(--navy); border: none;1206  border-radius: var(--r-pill); font-weight: 600; font-size: 13.5px; color: var(--white);1207  transition: all 0.12s ease; white-space: nowrap;1208  box-shadow: 0 4px 14px rgba(20, 24, 20, 0.22);1209}1210.login-btn:hover { background: var(--blue); }1211.account { position: relative; margin-left: 10px; }1212.account-btn {1213  width: 38px; height: 38px; padding: 0; border: 2px solid var(--orange);1214  border-radius: var(--r-pill); overflow: hidden; cursor: pointer;1215  background: var(--orange-soft); display: flex; align-items: center; justify-content: center;1216}1217.account-btn img { width: 100%; height: 100%; object-fit: cover; }1218.account-initial { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--orange); }1219/* Click-catcher plein écran rendu via createPortal à la racine de <body>1220   (un fixed descendant du header blurré se re-parentait → 66 px de haut).1221   z-index SOUS le header (50) : le menu .account-menu reste ancré DANS le1222   header et doit peindre au-dessus du voile. */1223.account-backdrop { position: fixed; inset: 0; z-index: 40; }1224.account-menu {1225  position: absolute; right: 0; top: calc(100% + 10px); z-index: 91;1226  min-width: 220px; background: var(--surface); border: 1.5px solid var(--ink);1227  border-radius: var(--r-card); box-shadow: var(--shadow-off); overflow: hidden;1228}1229.account-id { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-bottom: 1px solid var(--line); }1230.account-id b { font-size: 14px; }1231.account-id span { font-size: 11.5px; color: var(--ink-3); word-break: break-all; }1232.account-menu button {1233  width: 100%; text-align: left; padding: 11px 14px; border: 0; cursor: pointer;1234  background: transparent; font-weight: 600; font-size: 13.5px; color: var(--danger);1235}1236.account-menu button:hover { background: var(--orange-soft); color: var(--navy); }1237@media (max-width: 640px) { .login-btn { padding: 8px 12px; font-size: 12.5px; } }12381239/* ================= Profil — carte de membre Groupe KA ================= */1240.profil { padding-top: 40px; padding-bottom: 60px; }1241.profil h1 { font-size: clamp(30px, 5vw, 44px); margin: 10px 0 26px; color: var(--navy); }1242.profil .lede { max-width: 520px; color: var(--ink-2); margin-bottom: 22px; }12431244.pc {1245  position: relative; max-width: 520px; overflow: hidden;1246  background: linear-gradient(135deg, #101a40 0%, var(--navy) 55%, #080e24 100%);1247  color: var(--white);1248  border-radius: 20px;1249  padding: 24px 26px 0; box-shadow: var(--shadow-off);1250}1251.pc-watermark {1252  position: absolute; right: -18px; top: -34px; pointer-events: none;1253  font-family: var(--font-display); font-weight: 700; font-size: 170px;1254  letter-spacing: -0.06em; color: rgba(255, 106, 0, 0.07);1255  transform: rotate(-8deg); line-height: 1;1256}1257.pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }1258.pc-brand { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; }1259.pc-ka { color: var(--orange); margin-left: 1px; display: inline-block; }1260.pc-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.5); }1261.pc-id-block { margin: 26px 0 22px; display: flex; flex-direction: column; gap: 4px; }1262.pc-id-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255, 106, 0, 0.75); }1263.pc-id {1264  font-weight: 700; color: var(--orange);1265  font-size: clamp(22px, 6vw, 34px); letter-spacing: 0.14em;1266  text-shadow: 0 0 24px rgba(255, 106, 0, 0.35);1267}1268.pc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-bottom: 18px; }1269.pc-holder { display: flex; flex-direction: column; gap: 2px; min-width: 0; }1270.pc-holder-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }1271.pc-holder-since { font-size: 10.5px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.06em; }1272.pc-role-badge {1273  display: inline-block; width: fit-content; margin: 3px 0 2px;1274  background: var(--orange); color: var(--white);1275  font-size: 9px; font-weight: 700;1276  text-transform: uppercase; letter-spacing: 0.12em;1277  padding: 2px 8px 3px; border-radius: var(--r-pill);1278}1279.pc-avatar { width: 52px; height: 52px; border-radius: var(--r-pill); border: 2px solid var(--orange); flex: none; }1280.pc-strip { display: flex; gap: 5px; margin: 0 -26px; padding: 9px 18px; background: rgba(255, 106, 0, 0.1); border-top: 1px solid rgba(255, 106, 0, 0.25); overflow: hidden; }1281.pc-strip i { display: block; width: 3px; border-radius: 1px; background: var(--orange); opacity: 0.7; }1282.pc-strip i:nth-child(3n) { height: 14px; opacity: 0.35; }1283.pc-strip i:nth-child(3n+1) { height: 9px; }1284.pc-strip i:nth-child(3n+2) { height: 17px; opacity: 0.9; }1285.pc-copy { margin-top: 16px; }1286.pc-copy.ok { background: var(--blue); color: var(--white); }12871288.profil-grid {1289  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));1290  gap: 12px; margin-top: 30px; max-width: 760px;1291}1292.pg-item {1293  background: var(--surface); border: 1.5px solid var(--ink);1294  border-radius: var(--r-card); padding: 14px 16px;1295  display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-flat);1296}1297.pg-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }1298.pg-value { font-weight: 600; font-size: 14.5px; word-break: break-word; }1299.pg-value.mono { color: var(--blue); }13001301.profil-note { max-width: 640px; color: var(--ink-2); font-size: 13.5px; margin-top: 22px; }1302.profil-note a { text-decoration: underline; text-underline-offset: 3px; }1303.profil-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }1304.profil-actions .btn { display: inline-flex; align-items: center; gap: 7px; }13051306.account-kaid { font-size: 10.5px; color: var(--blue); letter-spacing: 0.08em; }1307.account-link {1308  display: block; width: 100%; text-align: left; padding: 11px 14px;1309  font-weight: 600; font-size: 13.5px; color: var(--navy);1310  border-bottom: 1px solid var(--line);1311}1312.account-link:hover { background: var(--orange-soft); }13131314/* profil public — section + lien partageable */1315.profil-public { margin-top: 30px; max-width: 640px; }1316.profil-public h3 { font-size: 18px; margin-bottom: 6px; }1317.profil-public p { color: var(--ink-2); font-size: 13.5px; margin: 0 0 12px; }1318.public-link {1319  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;1320  margin-top: 14px; padding: 12px 14px; background: var(--blue-soft);1321  border: 1px solid rgba(28, 92, 65, 0.25); border-radius: var(--r-card);1322}1323.public-link a { font-size: 13px; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }13241325/* ================= Bienvenue — choix du rôle ================= */1326.bienvenue { padding-top: 44px; padding-bottom: 70px; }1327.bienvenue h1 { font-size: clamp(30px, 5vw, 46px); margin: 10px 0 14px; color: var(--navy); }1328.bienvenue .lede { max-width: 480px; color: var(--ink-2); margin-bottom: 30px; }1329.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 780px; }1330.role-card {1331  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;1332  text-align: left; padding: 24px 24px 20px; cursor: pointer;1333  background: var(--surface); border: 1.5px solid var(--ink);1334  border-radius: var(--r-card); box-shadow: var(--shadow-flat);1335  font-family: var(--font-body); transition: all 0.15s ease;1336}1337.role-card:hover:not(:disabled) { transform: translateY(-4px); box-shadow: var(--shadow-off); border-color: rgba(255, 106, 0, 0.4); }1338.role-card:disabled { opacity: 0.6; cursor: wait; }1339.role-ico { display: flex; width: 54px; height: 54px; align-items: center; justify-content: center; background: var(--orange-soft); color: var(--orange); border-radius: 16px; }1340.role-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--navy); }1341.role-desc { color: var(--ink-2); font-size: 13.5px; }1342.role-perks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }1343.role-perks li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }1344.role-perks li::before {1345  content: "✓"; flex: none; width: 16px; height: 16px; border-radius: 50%;1346  background: var(--orange); color: var(--white); font-size: 10px; font-weight: 700;1347  display: inline-flex; align-items: center; justify-content: center;1348}1349.role-cta { margin-top: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--orange); }13501351/* ================= Favoris — cœur sur les cartes ================= */1352.fav-btn {1353  position: absolute; right: 10px; bottom: 10px; z-index: 2;1354  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;1355  background: rgba(255, 255, 255, 0.94); border: none;1356  border-radius: var(--r-pill); cursor: pointer; color: var(--navy);1357  box-shadow: var(--shadow-flat);1358  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;1359}1360.fav-btn:hover { transform: scale(1.12); }1361.fav-btn.on { background: var(--white); color: var(--orange); }1362.fav-btn.on svg { filter: drop-shadow(0 0 3px rgba(255, 106, 0, 0.35)); }13631364/* ================= Espace gestionnaire ================= */1365.claim-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; max-width: 640px; }1366.claim-row select {1367  flex: 1; min-width: 260px; padding: 11px 14px; font-size: 14px;1368  border: 1.5px solid var(--ink); border-radius: var(--r-ctl);1369  background: var(--surface); font-family: var(--font-body);1370}1371.claim-error { color: var(--danger); font-size: 13.5px; font-weight: 600; margin-top: 10px; }1372.org-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 22px; }1373.org-stat { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-2); }1374.org-form { max-width: 640px; display: flex; flex-direction: column; gap: 14px; }1375.org-form h3 { font-size: 18px; }1376.org-form label { display: flex; flex-direction: column; gap: 5px; flex: 1; }1377.org-form label span { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }1378.org-form input, .org-form textarea {1379  padding: 10px 14px; font-size: 14px; font-family: var(--font-body);1380  border: 1.5px solid var(--ink); border-radius: var(--r-ctl); background: var(--surface);1381}1382.org-form textarea { resize: vertical; }1383.org-form input:focus, .org-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(28, 92, 65, 0.15); }1384.org-form-row { display: flex; gap: 12px; flex-wrap: wrap; }1385.org-form .btn { align-self: flex-start; }13861387/* ================= Page publique /g/{source} ================= */1388.orgpub-head { display: flex; gap: 20px; align-items: flex-start; margin-top: 8px; }1389.orgpub-logo { width: 84px; height: 84px; object-fit: contain; background: var(--surface); border: 1.5px solid var(--ink); border-radius: 18px; padding: 8px; flex: none; box-shadow: var(--shadow-flat); }1390.orgpub-id h1 { font-size: clamp(26px, 4.4vw, 40px); margin: 6px 0 8px; color: var(--navy); }1391.orgpub-tagline { font-size: 16px; color: var(--ink-2); margin: 0 0 12px; max-width: 640px; }1392.orgpub-meta { display: flex; gap: 8px; flex-wrap: wrap; }1393.orgpub-meta a.stat-chip:hover { background: var(--blue-soft); }1394.orgpub-verified { background: var(--blue-soft); border-color: rgba(28, 92, 65, 0.3); color: var(--blue); font-weight: 600; }1395.orgpub-desc { max-width: 720px; color: var(--ink-2); margin: 18px 0 6px; white-space: pre-line; }1396.orgpub .results-head h2 { display: inline-flex; align-items: center; gap: 8px; }1397@media (max-width: 560px) { .orgpub-head { flex-direction: column; } }13981399/* ================= Éditeur de profil (photo, bio, réseaux) ================= */1400.profil-edit { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line-strong); }1401/* profil géré au hub Groupe KA — lecture seule */1402.hub-profile .hub-bio { color: var(--ink-2); font-size: 14px; margin: 0; max-width: 560px; }1403.hub-profile .pub-meta { display: flex; gap: 8px; flex-wrap: wrap; }1404.hub-profile .stat-chip { display: inline-flex; align-items: center; gap: 6px; }1405.hub-profile a.stat-chip:hover { background: var(--blue-soft); }1406.hub-profile .btn-primary { display: inline-flex; align-items: center; gap: 7px; }1407.pe-avatar-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }1408.pe-avatar {1409  width: 84px; height: 84px; border-radius: var(--r-pill); object-fit: cover;1410  border: 2.5px solid var(--orange); box-shadow: var(--shadow-flat);1411  display: flex; align-items: center; justify-content: center;1412}1413.pe-avatar-empty { background: var(--orange-soft); color: var(--orange); font-family: var(--font-display); font-weight: 700; font-size: 34px; }1414.pe-avatar-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }1415.pe-avatar-actions .btn { display: inline-flex; align-items: center; gap: 7px; }1416.pe-hint { font-size: 11px; color: var(--ink-3); }1417.pe-socials-title { font-size: 15px; margin-top: 6px; }1418.pe-socials { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }1419.pe-social { display: flex !important; flex-direction: row !important; align-items: center; gap: 0 !important; }1420.pe-social-ico {1421  display: flex; align-items: center; justify-content: center;1422  width: 40px; align-self: stretch; flex: none;1423  background: var(--navy); color: var(--white);1424  border-radius: var(--r-ctl) 0 0 var(--r-ctl);1425}1426.pe-social input { flex: 1; border-radius: 0 var(--r-ctl) var(--r-ctl) 0; border-left: 0; }14271428/* profil public — à propos + réseaux */1429.pub-about { max-width: 640px; margin-top: 22px; }1430.pub-bio { font-size: 15.5px; color: var(--ink); margin: 0 0 12px; white-space: pre-line; }1431.pub-meta { display: flex; gap: 8px; flex-wrap: wrap; }1432.pub-socials { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }1433.pub-social {1434  display: flex; align-items: center; justify-content: center;1435  width: 44px; height: 44px; background: var(--surface);1436  border: 1.5px solid var(--ink); border-radius: 14px; color: var(--navy);1437  transition: all 0.12s ease;1438}1439.pub-social:hover { background: var(--navy); border-color: var(--navy); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-off-soft); }14401441/* -----------------------------------------------------------------------------1442   Lou-Ka Maps (framework Ka Maps par Groupe Ka)1443   Jetons du design system appliqués au chrome de la carte + sync liste↔carte.1444----------------------------------------------------------------------------- */1445.mapview .ka-map {1446  --ka-accent: var(--accent);1447  --ka-on-accent: var(--on-accent);1448  --ka-surface: var(--surface);1449  --ka-ink: var(--navy);1450  --ka-line: var(--line-strong);1451  --ka-radius: var(--r-ctl);1452  --ka-shadow: 0 8px 24px rgba(20, 24, 20, 0.14);1453  --ka-font: var(--font-body);1454}1455.mapview { position: relative; overflow: hidden; }1456.mapview .ka-map { position: absolute; inset: 0; }14571458/* mini-carte 3D de la fiche (Emplacement) — bâtiment de l'annonce en orange */1459.lmap3d {1460  position: relative; height: 340px; border: 1.5px solid var(--ink);1461  border-radius: var(--r-card); box-shadow: var(--shadow-off-soft);1462  overflow: hidden; background: var(--grey);1463}1464.lmap3d .ka-map {1465  --ka-accent: var(--accent);1466  --ka-on-accent: var(--on-accent);1467  --ka-surface: var(--surface);1468  --ka-ink: var(--navy);1469  --ka-line: var(--line-strong);1470  --ka-radius: var(--r-ctl);1471  --ka-shadow: 0 8px 24px rgba(20, 24, 20, 0.14);1472  --ka-font: var(--font-body);1473  position: absolute; inset: 0;1474}1475.lmap3d-skel {1476  background: linear-gradient(90deg, #ececef 25%, #f7f7f9 50%, #ececef 75%);1477  background-size: 800px 100%; animation: shimmer 1.4s infinite linear;1478}1479.lmap3d-legende {1480  position: absolute; left: 10px; bottom: 10px; z-index: 5;1481  display: inline-flex; align-items: center; gap: 6px;1482  padding: 4px 10px; border: 1.5px solid var(--ink);1483  border-radius: var(--r-pill); background: var(--surface);1484  font-size: 10.5px; font-weight: 500; color: var(--ink-2);1485  pointer-events: none;1486}1487.lmap3d-legende i {1488  width: 10px; height: 10px; border-radius: 3px;1489  background: var(--orange); border: 1px solid rgba(20, 24, 20, 0.25);1490}1491@media (max-width: 780px) { .lmap3d { height: 280px; } }1492.ka-preview .mv-pop img, .ka-preview .mv-noimg { height: 120px; }1493.ka-preview-sheet .mv-pop { display: grid; grid-template-columns: 130px 1fr; }1494.ka-preview-sheet .mv-pop img, .ka-preview-sheet .mv-noimg { height: 100%; min-height: 120px; }14951496/* carte de liste synchronisée avec la carte (survol / sélection) */1497.map-card { border-radius: var(--r-card); }1498.map-card-sel { outline: 2px solid var(--blue); outline-offset: 2px; }14991500/* =============================================================================1501   HARMONISATION « ÉDITORIAL SHARP » (Groupe KA) — couche finale posée après1502   les styles historiques : géométrie 10/6 px, bordures encre 1,5 px, ombres1503   décalées dures, accent orange Lou-Ka. La carte Ka Maps (Mapbox) conserve1504   son propre thème marine/orange à l'intérieur du canevas.1505============================================================================= */15061507/* — contrôles : plus de pilules (les chips/badges gardent --r-pill) — */1508.nav a, .login-btn, .cta, .mv-pop-cta, .f-search, .f-more, .pager-btn,1509.onglet, .view-toggle, .fab, .f-ctl, .pass-gestionnaire, .hbar-track,1510.q-bar-track, .pass-progress { border-radius: var(--r-ctl); }1511.seg button:first-child { border-radius: var(--r-ctl) 0 0 var(--r-ctl); }1512.seg button:last-child { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }15131514/* — header : papier translucide + trait d'encre — */1515.header {1516  background: rgba(245, 243, 238, 0.92);1517  border-bottom: 1.5px solid var(--ink);1518}1519.nav a { font-family: var(--font-display); }1520.nav a:hover { color: var(--accent-deep); background: var(--accent-soft); }1521.nav a.active { background: var(--ink); color: var(--accent); }1522.brand .ka {1523  background: var(--accent); color: var(--on-accent);1524  border-radius: 6px; padding: 0 6px 2px; margin-left: 2px; transform: rotate(-2deg);1525}1526.header .gk-badge { margin-left: 4px; flex: none; }1527@media (max-width: 1080px) { .header .gk-badge { display: none; } }1528.mm-badge {1529  display: flex; align-items: center; min-height: var(--touch);1530  padding: 8px 10px 2px;1531}15321533/* — ticker : encre + mono — */1534.ticker { font-family: var(--font-mono); border-bottom: 1.5px solid var(--ink); }15351536/* — états sélectionnés : encre + accent (fini le bleu) — */1537.seg button.on, .onglet.on, .view-toggle button.on, .f-more.on {1538  background: var(--ink); border-color: var(--ink); color: var(--accent);1539}1540.pager-btn.on { background: var(--ink); border-color: var(--ink); color: var(--accent); }15411542/* — CTA / FAB : aplat accent, bordure encre, ombre décalée — */1543.cta, .mv-pop-cta, .fab {1544  background: var(--accent); color: var(--on-accent);1545  border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);1546  font-family: var(--font-display); font-weight: 700;1547}1548.cta:hover, .mv-pop-cta:hover, .fab:hover { background: var(--accent-deep); }1549.cta:active, .fab:active { box-shadow: none; }1550.fab { box-shadow: 4px 4px 0 var(--ink), 0 10px 28px rgba(20, 24, 20, 0.25); }1551.login-btn {1552  background: var(--ink); color: var(--accent);1553  border: 1.5px solid var(--ink); box-shadow: none;1554  font-family: var(--font-display); font-weight: 700;1555}1556.login-btn:hover { background: var(--accent-deep); color: var(--on-accent); }15571558/* — cartes : levée nette diagonale (signature du groupe) — */1559.card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off); }1560.role-card:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: var(--shadow-off); border-color: var(--ink); }1561.badge { border: 1.5px solid var(--ink); border-radius: var(--r-ctl); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; }1562.badge.type { background: var(--accent); color: var(--on-accent); }1563.source-tag { font-family: var(--font-mono); }15641565/* — barre d'onglets mobile : papier + encre, actif = accent orange — */1566@media (max-width: 760px) {1567  .tabbar { background: rgba(245, 243, 238, 0.95); border-top: 1.5px solid var(--ink); }1568  .tabbar a { font-family: var(--font-display); }1569  .tabbar a.active { color: var(--accent); }1570}1571.mobile-menu { background: var(--paper); border-bottom: 1.5px solid var(--ink); }15721573/* — carte de membre KA : encre plutôt que marine — */1574.pc { background: linear-gradient(135deg, #1d231d 0%, var(--ink) 55%, #0b0e0b 100%); }15751576/* — micro-étiquettes en mono (système) — */1577.f-ctl > span, .f-group > label, .field label, .tile-k, .pg-label,1578.pc-label, .pc-id-label, .crumbs, .viz-sub { font-family: var(--font-mono); }15791580/* — page Contact (design system) — */1581.contact-page { padding: 44px 0 90px; }1582.contact-page h1 { margin: 10px 0 8px; }1583.contact-page .lede { color: var(--ink-2); max-width: 640px; margin: 0 0 26px; }1584.contact-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 26px 0; }1585@media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }1586.contact-card { padding: 18px 20px; }1587.contact-card .klabel { display: block; margin-bottom: 6px; }1588.contact-card a.mail {1589  font-family: var(--font-mono); font-weight: 700; font-size: 13.5px;1590  color: var(--accent-deep); word-break: break-all;1591  text-decoration: underline; text-underline-offset: 3px;1592  display: inline-flex; align-items: center; min-height: 44px;1593}1594.contact-card p { margin: 6px 0 0; color: var(--ink-2); font-size: 13.5px; }1595.contact-note {1596  border-left: 3px solid var(--accent); background: var(--surface);1597  border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink);1598  border-bottom: 1.5px solid var(--ink); border-radius: 0 var(--r-card) var(--r-card) 0;1599  padding: 14px 18px; max-width: 720px; color: var(--ink-2); font-size: 14px;1600}1601.contact-note b { color: var(--ink); }1602.contact-sites { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }1603.contact-sites a {1604  display: inline-flex; align-items: center; min-height: 34px;1605  padding: 4px 12px; border: 1.5px solid var(--ink); border-radius: var(--r-pill);1606  background: var(--surface); font-family: var(--font-mono); font-size: 11px;1607  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;1608  transition: transform 0.12s, box-shadow 0.12s;1609}1610.contact-sites a:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-off-mid); }1611.contact-hub { margin-top: 26px; }16121613/* — rangée de navigation locale au-dessus du footer commun — */1614.prefooter { border-top: 1.5px solid var(--ink); background: var(--surface-2); padding: 18px 0; }1615.prefooter .container {1616  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;1617  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;1618  text-transform: uppercase; letter-spacing: 0.08em;1619}1620.prefooter a, .prefooter .flink {1621  color: var(--ink-2); text-decoration: none; text-transform: uppercase;1622  letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 700; font-size: 11.5px;1623  min-height: var(--touch); display: inline-flex; align-items: center;1624}1625.prefooter a:hover, .prefooter .flink:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 4px; }1626.prefooter .baseline { width: 100%; font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--ink-2); text-transform: none; letter-spacing: 0; }1627.ka-footer { margin-top: 0; }1628@media (max-width: 760px) { .ka-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } }16291630/* ============ Juste valeur (fair value) — pastilles & analyse de prix ====== */1631.fv-badge {1632  display: inline-flex; align-items: center; gap: 6px;1633  border-radius: var(--r-pill); padding: 6px 12px;1634  font-size: 12.5px; font-weight: 700; border: 1.5px solid var(--ink);1635  white-space: nowrap;1636}1637.fv-badge .fv-ico { font-size: 10px; line-height: 1; }1638.fv-badge .fv-pct { margin-left: 4px; }1639.fv-badge.fv-compact { padding: 2px 8px; font-size: 11px; gap: 4px; margin-left: 8px; vertical-align: 2px; }1640/* états (mêmes jetons que les badges marché existants — daltonien-compatible :1641   l'icône ▼ ≈ ▲ et le libellé portent l'information, pas la couleur seule) */1642.fv-badge.deal-good { background: var(--blue-soft); border-color: rgba(28, 92, 65, 0.35); color: var(--blue); }1643.fv-badge.deal-ok { background: var(--surface); color: var(--ink-2); }1644.fv-badge.deal-high { background: var(--orange-soft); border-color: rgba(255, 106, 0, 0.4); color: var(--orange-deep); }16451646.f-fairvalue .fv-head {1647  display: flex; align-items: flex-start; justify-content: space-between;1648  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;1649}1650.f-fairvalue .fv-value { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--navy); }1651.f-fairvalue .fv-value small { font-size: 12px; font-weight: 500; color: var(--ink-3); }1652.f-fairvalue .fv-range { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }1653.fv-histo { display: block; width: 100%; height: auto; margin: 10px 0 4px; }1654.fv-histo-lbl { font: 700 10px Inter, system-ui, sans-serif; fill: var(--ink); }1655.fv-histo-lbl-fv { fill: var(--accent-deep, #cc5500); }1656.fv-histo-axis { font: 500 9px Inter, system-ui, sans-serif; fill: var(--ink-3); }1657.fv-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); margin: 6px 0 4px; }1658.fv-demo { display: flex; flex-wrap: wrap; gap: 8px; }1659.chip.chip-deal.on { background: var(--blue); border-color: var(--blue); color: var(--white); }16601661/* =============================================================================1662   MapSearch — recherche synchronisée liste ↔ carte (search/MapSearch.tsx)1663   Une seule vérité partagée : compteur, tri, survols et sélections miroirs.1664============================================================================= */16651666.ms { position: relative; }1667.ms-list { position: relative; scroll-behavior: smooth; }16681669.ms-list-head {1670  display: flex; align-items: center; justify-content: space-between;1671  gap: 10px; flex-wrap: wrap; padding: 2px 2px 4px;1672}1673.ms-count { font-size: 13.5px; color: var(--ink-2); }1674.ms-count b { color: var(--ink); font-size: 15px; }1675.ms-nopos {1676  margin-left: 8px; font-size: 11px; color: var(--ink-3);1677  border: 1px dashed var(--line-strong); border-radius: var(--r-pill);1678  padding: 2px 8px; cursor: help;1679}1680.ms-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }1681.ms-sort select {1682  border: 1.5px solid var(--ink); border-radius: var(--r-ctl);1683  background: var(--surface); padding: 6px 8px; font-size: 12.5px;1684  font-weight: 600; color: var(--ink);1685}16861687.ms-pills { margin: 0 0 4px; }16881689.ms-refit {1690  align-self: flex-start; border: 1.5px solid var(--ink);1691  border-radius: var(--r-pill); background: var(--surface);1692  padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--ink-2);1693  cursor: pointer; box-shadow: var(--shadow-off-soft);1694}1695.ms-refit:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }16961697/* barre de progression fine — jamais d'écran qui clignote */1698.ms-progress {1699  position: sticky; top: 0; z-index: 4; height: 3px; border-radius: 2px;1700  background: linear-gradient(90deg, transparent, var(--accent), transparent);1701  background-size: 200% 100%; animation: ms-progress 1s linear infinite;1702}1703@keyframes ms-progress { from { background-position: 200% 0; } to { background-position: -200% 0; } }17041705.ms-empty {1706  border: 1.5px dashed var(--line-strong); border-radius: var(--r-card);1707  padding: 26px 18px; text-align: center; color: var(--ink-2);1708}1709.ms-empty .big { margin-bottom: 6px; color: var(--ink-3); }1710.ms-empty h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink); }1711.ms-empty p { margin: 0 0 14px; font-size: 13px; }1712.ms-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }17131714/* miroirs survol / sélection venus de la carte */1715.map-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }1716.map-card-hover {1717  outline: 2px solid var(--accent); outline-offset: 2px;1718  transform: translateY(-1px);1719}1720.map-card-pulse { animation: ms-pulse 0.9s ease 1; }1721@keyframes ms-pulse {1722  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }1723  70% { box-shadow: 0 0 0 12px transparent; }1724  100% { box-shadow: 0 0 0 0 transparent; }1725}17261727/* indicateur discret : l'annonce survolée sur la carte est hors écran */1728.ms-hover-hint {1729  position: sticky; z-index: 5; align-self: center;1730  background: var(--navy); color: var(--white);1731  border-radius: var(--r-pill); padding: 5px 12px;1732  font-size: 11.5px; font-weight: 600; pointer-events: none;1733  box-shadow: var(--shadow-off-soft);1734}1735.ms-hover-hint.haut { top: 8px; order: -1; }1736.ms-hover-hint.bas { bottom: 8px; }17371738/* ---------------- carrousel mobile synchronisé aux marqueurs ------------- */1739.ms-carousel {1740  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 12;1741  display: flex; gap: 10px; overflow-x: auto; padding: 4px 12px;1742  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;1743  scrollbar-width: none;1744}1745.ms-carousel::-webkit-scrollbar { display: none; }1746.ms-car-item {1747  flex: 0 0 78%; max-width: 340px; scroll-snap-align: center;1748  display: grid; grid-template-columns: 108px 1fr; gap: 0;1749  background: var(--surface); border: 1.5px solid var(--ink);1750  border-radius: var(--r-card); overflow: hidden;1751  box-shadow: var(--shadow-off-soft); text-decoration: none; color: inherit;1752}1753.ms-car-item.sel { outline: 2.5px solid var(--accent); outline-offset: 1px; }1754.ms-car-item img, .ms-car-item .smart-img, .ms-car-item .card-fallback {1755  width: 108px; height: 96px; object-fit: cover; display: block;1756}1757.ms-car-body { padding: 9px 12px; min-width: 0; }1758.ms-car-price { font-size: 14.5px; font-weight: 700; color: var(--ink); display: flex; gap: 6px; align-items: center; }1759.ms-car-title {1760  font-size: 12px; color: var(--ink-2); margin-top: 2px;1761  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;1762}1763.ms-car-meta { font-size: 11px; color: var(--ink-3); margin-top: 3px; }1764.ms-car-more {1765  flex: 0 0 auto; scroll-snap-align: center; align-self: stretch;1766  border: 1.5px solid var(--ink); border-radius: var(--r-card);1767  background: var(--navy); color: var(--white);1768  font-size: 12.5px; font-weight: 600; padding: 0 18px; cursor: pointer;1769}17701771/* mobile : carte plein cadre, liste masquée, carrousel par-dessus la carte */1772@media (max-width: 780px) {1773  .ms { height: calc(100dvh - 190px); }1774  .ms-list { display: none; }1775  .ms .mapview { height: 100%; }1776  .ka-search-area { top: 8px; }1777}1778@media (min-width: 781px) {1779  .ms-carousel { display: none; }1780}17811782/* mobile : réorganisation du chrome carte autour du carrousel */1783@media (max-width: 780px) {1784  .ms .ka-draw-btn { top: 56px; left: 10px; bottom: auto; }1785  .ms .ka-loading { bottom: 132px; }1786  .ms .ka-empty { transform: translate(-50%, -70%); }1787}1788/* l'auto-défilement vers la carte laisse l'entête de résultats visible */1789.ms { scroll-margin-top: 108px; }17901791/* mobile, vue carte : chrome sans chevauchement (case en haut, outils sous1792   elle, FAB Filtres au-dessus du carrousel) */1793@media (max-width: 780px) {1794  .ms .ka-draw-btn { top: 88px; left: 10px; bottom: auto; }1795  .ms .ka-locate { top: 88px; right: 10px; }1796  .fab-carte { bottom: 148px; }1797}17981799/* =============================================================================1800   KA Scores — pastilles, jauges circulaires, page méthodologie1801============================================================================= */1802.ka-badge {1803  display: inline-flex; align-items: center; gap: 4px;1804  border: 1.5px solid var(--ink); border-radius: var(--r-pill);1805  padding: 1px 8px 1px 3px; font-size: 11px; font-weight: 700;1806  color: var(--ink); background: var(--surface); line-height: 1.5;1807  vertical-align: middle;1808}1809.ka-badge-logo {1810  background: var(--ink); color: var(--white); border-radius: 999px;1811  font-size: 8.5px; font-weight: 800; padding: 1.5px 5px; letter-spacing: 0.4px;1812}1813.ka-badge.ka-haut  { border-color: var(--green, #256d43); }1814.ka-badge.ka-haut .ka-badge-logo { background: var(--green, #256d43); }1815.ka-badge.ka-bon   { border-color: var(--accent); }1816.ka-badge.ka-bon .ka-badge-logo { background: var(--accent); }1817.ka-badge.ka-moyen { opacity: 0.9; }1818.ka-badge.ka-bas   { opacity: 0.75; }18191820.ka-circles, .ka-demo-circles {1821  display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0 6px;1822}1823.ka-circle { text-align: center; width: 92px; }1824.ka-circle-fond {1825  fill: none; stroke: var(--line); stroke-width: 6;1826}1827.ka-circle-arc {1828  fill: none; stroke: var(--ink-3); stroke-width: 6; stroke-linecap: round;1829  transition: stroke-dasharray 0.6s ease;1830}1831.ka-circle.ka-haut .ka-circle-arc  { stroke: var(--green, #256d43); }1832.ka-circle.ka-bon .ka-circle-arc   { stroke: var(--accent); }1833.ka-circle.ka-moyen .ka-circle-arc { stroke: var(--orange, #d97a2b); }1834.ka-circle.ka-bas .ka-circle-arc   { stroke: #b3543f; }1835.ka-circle-val { font: 700 17px var(--font-body); fill: var(--ink); }1836.ka-circle-nom { font-size: 12px; font-weight: 700; color: var(--ink); margin-top: 4px; }1837.ka-circle-label { font-size: 10.5px; color: var(--ink-3); }18381839.f-kascores h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }1840.ka-perso {1841  font-size: 12px; font-weight: 600; color: var(--ink-2);1842  border: 1.5px dashed var(--line-strong); border-radius: var(--r-pill);1843  padding: 2px 10px;1844}1845.ka-detail summary {1846  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2);1847  padding: 6px 0;1848}1849.ka-detail-grille {1850  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));1851  gap: 14px; padding: 8px 0 4px;1852}1853.ka-detail-grille h4 { margin: 0 0 4px; font-size: 12px; color: var(--ink); }1854.ka-detail-grille ul { margin: 0 0 10px; padding-left: 16px; font-size: 12.5px; color: var(--ink-2); }1855.ka-detail-grille li { margin: 2px 0; }18561857.ka-poids { display: grid; gap: 10px; margin: 14px 0; max-width: 460px; }1858.ka-poids-row {1859  display: grid; grid-template-columns: 90px 1fr 48px; align-items: center;1860  gap: 12px; font-size: 13px; font-weight: 600; color: var(--ink);1861}1862.ka-poids-row input[type="range"] { accent-color: var(--accent); }1863.ka-poids-row b { text-align: right; font-variant-numeric: tabular-nums; }18641865.ms-car-price .ka-badge { margin-left: 2px; }1866@media (max-width: 780px) {1867  .ms .ka-3d { top: 148px; right: 10px; }1868}186918701871/* ---- Registre des loyers (fiche) — bloc citoyen registre-des-loyers.ca ---- */1872.f-rdl .rdl-resume { margin: 2px 0 6px; }1873.f-rdl .rdl-ecart { margin: 0 0 8px; }1874.rdl-rooms { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 10px; }1875.rdl-room { font-size: 13px; color: var(--ink-2); white-space: nowrap; }1876.rdl-room i { font-style: normal; color: var(--ink-3); }1877.rdl-table { width: 100%; border-collapse: collapse; font-size: 13px; }1878.rdl-table td { padding: 5px 8px 5px 0; border-top: 1px solid var(--line, #e6e4df);1879                vertical-align: top; }1880.rdl-table .rdl-addr { max-width: 46%; }1881.rdl-table .rdl-prix { font-weight: 600; white-space: nowrap; }1882.rdl-table .rdl-date { white-space: nowrap; color: var(--ink-2); }1883.rdl-table .rdl-dist { color: var(--ink-3); white-space: nowrap; text-align: right; }1884.rdl-room-on { background: var(--sand, #f4efe7); border-radius: 6px; padding: 2px 8px; }188518861887/* ---- Risque d'inondation (fiche) — BDZI gouv. du Québec ---- */1888.f-zi .zi-head { display: flex; align-items: center; gap: 10px; }1889.zi-badge { display: inline-block; padding: 3px 10px; border-radius: 999px;1890            font-size: 12.5px; font-weight: 700; }1891.zi-eleve { background: #fde8e8; color: #a12622; }1892.zi-modere { background: #fdf3e0; color: #8a5a00; }1893.zi-present { background: #fdf3e0; color: #8a5a00; }1894.zi-ok { background: #e7f4ea; color: #1e6b34; }1895.zi-nc { background: var(--sand, #f0ede8); color: var(--ink-3); }1896.zi-liste { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; }1897.zi-liste li { padding: 4px 0; border-top: 1px solid var(--line, #e6e4df); }189818991900/* ---- Historique TAL (fiche) — décisions SOQUIJ à l'adresse ---- */1901.f-tal .tal-pending, .f-tal .tal-ok, .f-tal .tal-resume { margin: 2px 0 8px; }1902.tal-liste { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; }1903.tal-liste li { padding: 8px 0; border-top: 1px solid var(--line, #e6e4df); }1904.tal-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }1905.tal-date { font-weight: 600; color: var(--ink-2); }1906.tal-part { font-size: 12px; padding: 1px 8px; border-radius: 999px;1907            background: var(--sand, #f0ede8); color: var(--ink-2); }1908.tal-part-locateur { background: #fdf3e0; color: #8a5a00; }1909.tal-verdict { font-size: 12px; color: var(--ink-3); }1910.tal-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 3px; }1911.tal-tag { font-size: 12px; padding: 1px 8px; border-radius: 999px;1912           background: #fde8e8; color: #a12622; }1913.tal-ref { font-size: 12.5px; color: var(--ink-3); }191419151916/* ---- Registre des loyers v2 : tuiles, bande de position, barres ---- */1917.rdl-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 12px; }1918.rdl-kpi { flex: 1 1 90px; min-width: 90px; background: var(--surface-2, #f7f5f1);1919           border-radius: 10px; padding: 10px 12px; }1920.rdl-kpi-v { display: block; font-size: 20px; font-weight: 700;1921             letter-spacing: -0.02em; color: var(--navy); }1922.rdl-kpi-l { display: block; font-size: 11px; line-height: 1.35;1923             color: var(--ink-3); margin-top: 2px; }1924.rdl-strip { width: 100%; height: auto; display: block; margin: 2px 0 4px; }1925.rdl-strip-track { fill: var(--surface-2, #f0ede8); }1926.rdl-strip-box { fill: var(--accent-soft, #fff1e6);1927                 stroke: var(--accent, #ff6a00); stroke-width: 1; }1928.rdl-strip-med { stroke: var(--ink-2, #4c4a45); stroke-width: 2; }1929.rdl-strip-me { stroke: var(--accent-deep, #cc5500); stroke-width: 2; }1930.rdl-strip-me-dot { fill: var(--accent-deep, #cc5500);1931                    stroke: var(--surface, #fff); stroke-width: 2; }1932.rdl-strip-lbl, .rdl-strip-axis { font-size: 10.5px; fill: var(--ink-3); }1933.rdl-strip-me-lbl { font-size: 11px; font-weight: 700;1934                    fill: var(--accent-deep, #cc5500); }1935.rdl-bars { width: 100%; height: auto; display: block; margin: 6px 0 2px; }1936.rdl-bar { fill: var(--accent, #ff6a00); opacity: 0.55; }1937.rdl-bar-on { fill: var(--accent-deep, #cc5500); opacity: 1; }1938.rdl-bar-val { font-size: 10.5px; fill: var(--ink-2, #4c4a45); }1939.rdl-bar-cat { font-size: 11px; fill: var(--ink-2, #4c4a45); }1940.rdl-bar-cat-on { font-weight: 700; fill: var(--ink, #1c1b18); }1941.rdl-bar-n { font-size: 9.5px; fill: var(--ink-3, #8a877f); }1942.rdl-bars-axe { stroke: var(--line, #e6e4df); stroke-width: 1; }1943.rdl-ecart { margin: 4px 0 8px; }1944.rdl-cap { caption-side: top; text-align: left; font-size: 13px; font-weight: 700; color: var(--navy); padding: 6px 0; }194519461947/* ---- Criminalité détaillée SPVM (bloc quartier) ---- */1948.q-crime { width: 100%; }1949.q-crime-cats { list-style: none; margin: 8px 0 0; padding: 0; }1950.q-crime-cats li { display: flex; align-items: center; gap: 8px;1951                   padding: 3px 0; font-size: 12.5px; }1952.q-crime-nom { flex: 0 0 46%; color: var(--ink-2); overflow: hidden;1953               text-overflow: ellipsis; white-space: nowrap; }1954.q-crime-barre { flex: 1 1 auto; height: 10px; background: var(--surface-2, #f0ede8);1955                 border-radius: 5px; overflow: hidden; }1956.q-crime-barre i { display: block; height: 100%; border-radius: 5px;1957                   background: var(--accent, #ff6a00); opacity: 0.6; }1958.q-crime-n { flex: 0 0 52px; text-align: right; font-weight: 600;1959             color: var(--ink); white-space: nowrap; }1960.q-crime-n small { font-weight: 400; color: var(--ink-3); }1961.q-crime-src { margin-top: 8px; }196219631964/* ---- Qualité de l'air (RSQAQ) + Essence à proximité ---- */1965.air-liste { list-style: none; margin: 10px 0 0; padding: 0; }1966.air-liste li { display: flex; align-items: center; gap: 8px;1967                padding: 4px 0; font-size: 12.5px; }1968.air-nom { flex: 0 0 44%; color: var(--ink-2); overflow: hidden;1969           text-overflow: ellipsis; white-space: nowrap; }1970.air-barre { flex: 1 1 auto; height: 10px; background: var(--surface-2, #f0ede8);1971             border-radius: 5px; overflow: hidden; }1972.air-barre i { display: block; height: 100%; border-radius: 5px;1973               background: #4d9e64; }1974.air-barre i.air-sur { background: #c96a1f; }1975.air-val { flex: 0 0 34%; text-align: right; font-weight: 600;1976           color: var(--ink); white-space: nowrap; overflow: hidden;1977           text-overflow: ellipsis; }1978.air-val small { font-weight: 400; color: var(--ink-3); }1979.air-val .air-ref { display: block; font-size: 10px; }1980.gaz-head th { text-align: left; font-size: 11px; color: var(--ink-3);1981               font-weight: 600; padding: 2px 8px 2px 0; }1982.gaz-best { display: inline-block; margin-left: 6px; padding: 1px 7px;1983            border-radius: 999px; background: #e7f4ea; color: #1e6b34;1984            font-size: 10.5px; font-weight: 700; }1985.gaz-adr { display: block; font-size: 11px; color: var(--ink-3); }198619871988/* ---- Commerces et transport (fiche) ---- */1989.cm-grille { list-style: none; margin: 6px 0 0; padding: 0;1990             display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }1991@media (max-width: 560px) { .cm-grille { grid-template-columns: 1fr; } }1992.cm-item { display: flex; align-items: center; gap: 9px; padding: 5px 0;1993           border-bottom: 1px solid var(--line, #eeece7); min-width: 0; }1994.cm-ico { flex: 0 0 28px; }1995.cm-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }1996.cm-nom { font-size: 13px; font-weight: 600; color: var(--ink, #222);1997          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }1998.cm-poi { font-size: 11px; color: var(--ink-3, #8a877f);1999          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }2000.cm-dist { flex: 0 0 auto; font-size: 13px; font-weight: 700;2001           color: var(--ink-2, #4c4a45); white-space: nowrap; }200220032004/* ---- Coût d'électricité (Hydro-Québec) ---- */2005.hydro-intro { margin: 2px 0 12px; color: var(--ink-2, #4c4a45); }2006.hydro-btn { appearance: none; border: 0; border-radius: 10px; cursor: pointer;2007             background: var(--accent, #2b7a3b); color: #fff; font-weight: 700;2008             font-size: 14px; padding: 11px 18px; }2009.hydro-btn:disabled { opacity: 0.6; cursor: progress; }2010.hydro-montant { font-size: 26px; font-weight: 800; letter-spacing: -0.02em;2011                 color: var(--navy, #1c1b18); display: flex; align-items: baseline;2012                 gap: 10px; flex-wrap: wrap; }2013.hydro-montant small { font-size: 14px; font-weight: 500; color: var(--ink-3); }2014.hydro-an { font-size: 14px; font-weight: 600; color: var(--ink-2, #4c4a45); }2015.hydro-vide { color: var(--ink-3, #8a877f); }201620172018/* ============================================================================2019   PASSE DE DESIGN v3 — « éditorial sharp » appliqué à toute la fiche2020   Blocs = cartes encre (bordure 1,5 px + ombre décalée douce), titres à2021   marqueur accent + filet, tuiles KPI blanches à ombre dure, tableaux zébrés,2022   barres en dégradé, pastilles unifiées (mono, point d'état, liseré).2023   Aucune propriété `order` (règle Groupe Ka : ordre DOM = ordre visuel).2024   ========================================================================== */20252026/* --- Blocs de la fiche : cartes posées sur le papier --- */2027.f-bloc:not(.f-galerie):not(.f-hero) {2028  background: var(--surface);2029  border: 1.5px solid var(--ink);2030  border-radius: var(--r-card);2031  padding: 18px 20px 16px;2032  box-shadow: var(--shadow-off-soft);2033}2034@media (max-width: 640px) {2035  .f-bloc:not(.f-galerie):not(.f-hero) { padding: 15px 15px 13px; }2036}20372038/* --- Titres de section : carré accent + filet éditorial --- */2039.f-bloc h2, .quartier h2 {2040  display: flex; align-items: center; gap: 10px;2041  font-size: 19px; letter-spacing: -0.015em; margin-bottom: 14px;2042}2043.f-bloc h2::before, .quartier h2::before {2044  content: ""; flex: 0 0 9px; width: 9px; height: 9px;2045  background: var(--accent); border: 1.5px solid var(--ink);2046  box-shadow: 2px 2px 0 var(--ink);2047}2048.f-bloc h2::after, .quartier h2::after {2049  content: ""; flex: 1 1 auto; height: 1.5px; min-width: 20px;2050  background: var(--line);2051}20522053/* --- Tuiles KPI : blanches, bord encre, ombre dure accent --- */2054.rdl-kpi, .kv .cell {2055  background: var(--surface);2056  border: 1.5px solid var(--ink);2057  border-radius: var(--r-ctl);2058  box-shadow: 3px 3px 0 var(--accent-soft, #fff1e6);2059}2060.rdl-kpi-v { font-family: var(--font-display); }2061.q-cell { box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.1); border-radius: var(--r-ctl); }2062.q-val { font-size: 20px; }20632064/* --- Tableaux : en-têtes mono, zébrure, survol accent --- */2065.rdl-table td { padding: 7px 8px 7px 0; }2066.rdl-table tbody tr:nth-child(even) td,2067.rdl-table > tr:nth-child(even) td { background: var(--surface-2, #faf9f5); }2068.rdl-table tr:hover td { background: var(--accent-soft, #fff1e6); }2069.gaz-head th {2070  font-family: var(--font-mono); font-size: 10px; font-weight: 700;2071  text-transform: uppercase; letter-spacing: 0.08em;2072  border-bottom: 1.5px solid var(--ink);2073}2074.rdl-cap { font-family: var(--font-display); }20752076/* --- Barres : pistes bordées + remplissage en dégradé --- */2077.q-bar-track, .q-crime-barre, .air-barre {2078  background: var(--surface-2, #faf9f5);2079  border: 1px solid var(--line);2080  height: 12px;2081}2082.q-bar-fill {2083  background: linear-gradient(90deg, var(--accent, #ff6a00), var(--accent-deep, #cc5500));2084}2085.q-crime-barre i {2086  background: linear-gradient(90deg, #ff9a52, var(--accent, #ff6a00));2087  opacity: 0.9;2088}2089.air-barre i { background: linear-gradient(90deg, #6fbc85, #2e7d4a); }2090.air-barre i.air-sur { background: linear-gradient(90deg, #e08a48, #c96a1f); }20912092/* --- Pastilles d'état unifiées (zi-badge & cie) : mono + point d'état --- */2093.zi-badge {2094  display: inline-flex; align-items: center; gap: 6px;2095  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;2096  text-transform: uppercase; letter-spacing: 0.06em;2097  padding: 4px 10px; border: 1.5px solid currentColor;2098}2099.zi-badge::before {2100  content: ""; width: 6px; height: 6px; border-radius: 50%;2101  background: currentColor;2102}2103.gaz-best { border: 1px solid currentColor; }21042105/* --- Historique TAL : chaque décision devient une mini-carte --- */2106.tal-liste { display: flex; flex-direction: column; gap: 8px; }2107.tal-liste li {2108  border: 1px solid var(--line); border-left: 3px solid var(--accent, #ff6a00);2109  border-top: 1px solid var(--line);2110  border-radius: var(--r-ctl); padding: 9px 12px;2111  background: var(--surface-2, #faf9f5);2112}2113.tal-part, .tal-tag {2114  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;2115  text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px;2116}2117.tal-ref { font-family: var(--font-mono); font-size: 11px; }21182119/* --- Notes de bas de bloc : filet pointillé --- */2120.f-bloc .fine, .quartier .fine {2121  margin-top: 12px; padding-top: 9px;2122  border-top: 1px dashed var(--line);2123}21242125/* --- Listes à liseré (inondation) alignées sur le reste --- */2126.zi-liste li { padding: 6px 0; }21272128/* ============================================================================2129   Dossier d'intelligence locative — Coût réel, Historique Lou-Ka, Immeuble,2130   Gestionnaire, Vie quotidienne en hiver2131   ========================================================================== */21322133/* --- Pastilles de statut de donnée (observed / estimated / …) --- */2134.st-pill {2135  display: inline-block;2136  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;2137  text-transform: uppercase; letter-spacing: 0.06em;2138  padding: 2px 7px; border: 1.5px solid currentColor; border-radius: 3px;2139  white-space: nowrap; vertical-align: 1px;2140}2141.cr-poste .st-pill { margin-left: 8px; }2142.st-included { color: #2e7d4a; background: #eef7f0; }2143.st-observed { color: var(--ink); background: var(--surface); }2144.st-estimated { color: var(--accent-deep, #cc5500); background: var(--accent-soft, #fff1e6); }2145.st-unknown { color: var(--ink-3); background: var(--surface-2, #faf9f5); border-style: dashed; }21462147/* --- Coût réel mensuel --- */2148.cr-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }2149.cr-table td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }2150.cr-table tbody tr:nth-child(even) td { background: var(--surface-2, #faf9f5); }2151.cr-table tbody tr:hover td { background: var(--accent-soft, #fff1e6); }2152.cr-table tfoot tr:first-child td { background: var(--accent-soft, #fff1e6); }2153.cr-poste { color: var(--ink-2); }2154.cr-montant {2155  text-align: right; font-family: var(--font-mono); font-weight: 600;2156  white-space: nowrap;2157}2158.cr-table tfoot td {2159  border-bottom: none; border-top: 1.5px solid var(--ink);2160  font-weight: 700; padding-top: 9px;2161}2162.cr-annuel { color: var(--ink-3); font-weight: 500; font-size: 12px; }2163.cr-inconnus {2164  margin: 10px 0 0; padding: 8px 12px; font-size: 12.5px; color: var(--ink-2);2165  background: var(--accent-soft, #fff1e6);2166  border-left: 3px solid var(--accent, #ff6a00);2167  border-radius: var(--r-ctl);2168}2169.cr-pi2 { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }2170.cr-pi2 b { font-family: var(--font-mono); }21712172/* --- Historique Lou-Ka : timeline --- */2173.hl-timeline {2174  list-style: none; margin: 12px 0 0; padding: 0 0 0 14px;2175  border-left: 2px solid var(--ink);2176  display: flex; flex-direction: column; gap: 8px;2177}2178.hl-item { position: relative; font-size: 13px; color: var(--ink-2); }2179.hl-item::before {2180  content: ""; position: absolute; left: -19.5px; top: 5px;2181  width: 9px; height: 9px; border-radius: 50%;2182  background: var(--surface); border: 2px solid var(--ink-3);2183}2184.hl-item.hl-prix::before { border-color: var(--accent, #ff6a00); background: var(--accent-soft, #fff1e6); }2185.hl-item.hl-disparition::before { border-color: #b3552e; background: #fdeee7; }2186.hl-item.hl-reapparition::before { border-color: #2e7d4a; background: #eef7f0; }2187.hl-date {2188  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;2189  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3);2190  display: inline-block; min-width: 92px;2191}2192.hl-texte b { font-family: var(--font-mono); }21932194/* --- Vies antérieures (annonces recyclées) --- */2195.hl-recyclees { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); }2196.hl-recyclees h3 {2197  margin: 0 0 8px; font-size: 13px; font-weight: 700;2198  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2);2199}2200.hl-match {2201  border: 1px solid var(--line); border-left: 3px solid var(--accent, #ff6a00);2202  border-radius: var(--r-ctl); background: var(--surface-2, #faf9f5);2203  padding: 8px 12px; margin: 0 0 8px; font-size: 13px;2204}2205.hl-signaux {2206  margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px;2207  color: var(--ink-3); letter-spacing: 0.02em;2208}22092210/* --- Passeport de l'immeuble --- */2211.im-parcc { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }2212.im-indicateurs { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }2213.im-indic { font-size: 13px; }2214.im-indic > .k {2215  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;2216  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3);2217  display: inline-block; margin-right: 4px;2218}2219.im-detail { color: var(--ink-2); font-size: 12.5px; }22202221/* --- Qui gère ce logement? --- */2222.gest-head { margin-bottom: 10px; }2223.gest-nom { font-family: var(--font-display); font-weight: 700; font-size: 17px; }2224.gest-meta { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }2225.gest-google { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }2226.gest-note {2227  font-family: var(--font-display); font-weight: 700; font-size: 20px;2228  color: var(--accent-deep, #cc5500);2229  background: var(--surface); border: 1.5px solid var(--ink);2230  border-radius: var(--r-ctl); padding: 5px 10px;2231  box-shadow: 3px 3px 0 var(--accent-soft, #fff1e6);2232  white-space: nowrap;2233}2234.gest-navis { font-size: 12.5px; color: var(--ink-2); }2235.gest-bars { margin: 10px 0; display: flex; flex-direction: column; gap: 4px; }2236.gest-bar { display: flex; align-items: center; gap: 8px; }2237.gb-n {2238  font-family: var(--font-mono); font-size: 11px; font-weight: 600;2239  color: var(--ink-2); min-width: 26px; text-align: right;2240}2241.gb-track {2242  flex: 1 1 auto; height: 12px;2243  background: var(--surface-2, #faf9f5); border: 1px solid var(--line);2244  overflow: hidden; display: block;2245}2246.gb-fill { display: block; height: 100%; background: var(--ink-3); min-width: 0; }2247.gb-fill.pos { background: linear-gradient(90deg, #6fbc85, #2e7d4a); }2248.gb-fill.neg { background: linear-gradient(90deg, #e08a48, #c96a1f); }2249.gb-c {2250  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);2251  min-width: 24px;2252}2253.gest-stats {2254  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;2255  font-size: 13px; color: var(--ink-2); margin: 8px 0;2256}2257.gest-themes { font-size: 13px; margin: 8px 0; }2258.gest-themes > .k { color: var(--ink-2); }2259.gest-themes .zi-badge { margin: 2px 4px 2px 0; }2260.gest-avis { margin-top: 10px; }2261.gest-avis summary {2262  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2);2263}2264.gest-citation {2265  margin: 10px 0 0; padding: 8px 12px; font-size: 13px; color: var(--ink-2);2266  border-left: 3px solid var(--line); background: var(--surface-2, #faf9f5);2267  border-radius: var(--r-ctl);2268}2269.gest-citation footer {2270  margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px;2271  color: var(--ink-3);2272}22732274/* --- Vie quotidienne en hiver --- */2275.hiver-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }2276.hiver-score {2277  font-family: var(--font-display); font-weight: 700; font-size: 30px;2278  line-height: 1; color: var(--ink);2279  background: var(--surface); border: 1.5px solid var(--ink);2280  border-radius: var(--r-ctl); padding: 8px 12px;2281  box-shadow: 3px 3px 0 var(--accent-soft, #fff1e6);2282}2283.hiver-sur { font-size: 12.5px; color: var(--ink-3); }2284.hiver-detail {2285  list-style: none; margin: 12px 0 0; padding: 0;2286  display: flex; flex-direction: column; gap: 6px;2287}2288.hiver-detail li {2289  display: flex; align-items: baseline; gap: 8px;2290  font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--line);2291}2292.hiver-detail li:last-child { border-bottom: none; }2293.hd-crit {2294  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;2295  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3);2296  min-width: 110px;2297}2298.hd-val { flex: 1 1 auto; color: var(--ink-2); }2299.hd-score {2300  font-family: var(--font-mono); font-weight: 700; font-size: 12px;2301  min-width: 28px; text-align: right;2302}23032304/* --- Adaptatif mobile : dossier d'intelligence locative --- */2305@media (max-width: 640px) {2306  .cr-table { font-size: 12.5px; }2307  .cr-table td { padding: 6px 6px 6px 0; }2308  .cr-poste .st-pill { margin-left: 6px; }2309  .cr-montant { font-size: 12.5px; }2310  .hl-date { display: block; min-width: 0; margin-bottom: 2px; }2311  .hl-item { font-size: 12.5px; }2312  .hl-match { font-size: 12.5px; }2313  .im-indic .im-detail { display: block; margin-top: 3px; }2314  .gest-nom { font-size: 16px; }2315  .gest-stats { font-size: 12.5px; gap: 8px; }2316  .gest-citation { font-size: 12.5px; }2317  .gb-n { min-width: 24px; font-size: 10.5px; }2318  .gb-c { min-width: 20px; font-size: 10.5px; }2319  .hiver-score { font-size: 26px; padding: 6px 10px; }2320  .hiver-sur { flex-basis: 100%; }2321  .hd-crit { min-width: 86px; font-size: 10px; }2322  .hiver-detail li { font-size: 12.5px; }2323}2324