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.mobile-menu {776  display: none; position: absolute; left: 0; right: 0; top: 100%;777  background: var(--white); border-bottom: 1px solid var(--line);778  box-shadow: 0 18px 30px rgba(20, 24, 20, 0.14);779  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));780  max-height: 0; overflow: hidden; opacity: 0;781  transition: max-height 0.3s ease, opacity 0.22s ease;782}783.mobile-menu { z-index: var(--z-modal, 900); }784.mobile-menu.open { max-height: 480px; opacity: 1; }785/* Le drawer vit DANS le header : quand il est ouvert, le header monte au niveau786   modal pour peindre au-dessus du .mm-backdrop (frère du header, overlay 800). */787.header:has(.mobile-menu.open) { z-index: var(--z-modal, 900); }788.mm-link {789  display: flex; align-items: center; gap: 12px;790  padding: 15px 10px; min-height: 52px;791  font-family: var(--font-display); font-weight: 700; font-size: 19px;792  letter-spacing: -0.02em; border-bottom: 1px solid var(--line);793  color: var(--navy);794  opacity: 0; transform: translateY(-8px);795  transition: opacity 0.25s ease, transform 0.25s ease;796}797.mobile-menu.open .mm-link { opacity: 1; transform: translateY(0); }798.mm-link.active { color: var(--orange); }799.mm-link.active .mm-arrow { opacity: 1; color: var(--orange); }800.mm-ico { width: 26px; text-align: center; font-size: 17px; }801.mm-arrow { margin-left: auto; opacity: 0.25; color: var(--orange); transition: opacity 0.15s ease; }802.mm-link:active { background: var(--orange-soft); border-radius: var(--r-ctl); }803.mm-foot {804  padding: 12px 10px 4px;805  font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em;806}807.mm-backdrop {808  position: fixed; inset: 0; z-index: var(--z-overlay, 800);809  background: rgba(20, 24, 20, 0.35); backdrop-filter: blur(2px);810}811@media (max-width: 760px) {812  .menu-btn { display: flex; }813  .nav { display: none; }814  .mobile-menu { display: block; }815}816817/* --- Bandeau de consentement (témoins) ------------------------------------- */818.cookie-banner {819  position: fixed; left: 12px; right: 12px;820  bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 80;821  animation: cookie-in 0.35s ease;822}823@keyframes cookie-in { from { transform: translateY(24px); opacity: 0; } }824.cookie-inner {825  max-width: 720px; margin: 0 auto; background: var(--surface);826  border: 1.5px solid var(--ink); border-radius: var(--r-card);827  box-shadow: var(--shadow-off); padding: 16px 18px;828}829.cookie-text { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }830.cookie-text b { color: var(--navy); }831.cookie-text a { text-decoration: underline; text-underline-offset: 2px; }832.cookie-options { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }833.cookie-opt {834  display: flex; align-items: flex-start; gap: 10px; font-size: 13px;835  color: var(--ink-2); cursor: pointer;836}837.cookie-opt input { margin-top: 2px; accent-color: var(--orange); width: 16px; height: 16px; }838.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; justify-content: flex-end; }839@media (max-width: 640px) {840  .cookie-actions { justify-content: stretch; }841  .cookie-actions .btn { flex: 1; text-align: center; justify-content: center; }842}843844/* --- Page confidentialité + lien pied de page ------------------------------- */845.legal { padding: 48px 0 70px; max-width: 760px; }846.legal h1 { font-size: clamp(30px, 5vw, 46px); margin: 12px 0 8px; letter-spacing: -0.03em; color: var(--navy); }847.legal section { margin-top: 26px; }848.legal h3 { font-size: 18px; margin-bottom: 8px; }849.legal p, .legal li { color: var(--ink-2); font-size: 14.5px; }850.legal ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }851.flink {852  border: 0; background: none; padding: 0; cursor: pointer;853  color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px;854}855856/* --- Section « Le quartier » (fiche) --------------------------------------- */857.quartier { margin-top: 34px; }858.quartier h2 { font-size: 24px; letter-spacing: -0.02em; color: var(--navy); }859.q-sub { color: var(--ink-3); font-size: 13px; margin: 4px 0 16px; }860.q-grid {861  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;862}863@media (max-width: 640px) { .q-grid { grid-template-columns: repeat(2, 1fr); } }864.q-cell {865  background: var(--surface); border: 1.5px solid var(--ink);866  border-radius: var(--r-card); padding: 12px 14px; box-shadow: var(--shadow-flat);867}868.q-val { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--navy); }869.q-label { font-size: 10.5px; font-weight: 600; color: var(--ink-3);870  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }871.q-prox { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }872.q-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; }873.q-bar-label { flex: 0 0 150px; color: var(--ink-2); }874@media (max-width: 640px) { .q-bar-label { flex-basis: 120px; font-size: 12px; } }875.q-bar-track {876  flex: 1; height: 10px; background: var(--grey);877  border-radius: var(--r-pill); overflow: hidden;878}879.q-bar-fill { display: block; height: 100%; background: var(--blue); border-radius: var(--r-pill); }880.q-bar-num { flex: 0 0 30px; text-align: right;881  font-size: 11.5px; font-weight: 700; color: var(--navy); }882.q-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }883.q-badge {884  display: inline-flex; align-items: center; gap: 6px;885  border: 1.5px solid var(--ink); border-radius: var(--r-pill);886  padding: 7px 14px; font-size: 12.5px; background: var(--surface);887}888.q-badge.cool { background: var(--blue-soft); border-color: rgba(28, 92, 65, 0.3); color: var(--blue); }889.q-badge.hot { background: var(--orange-soft); border-color: rgba(255, 106, 0, 0.35); color: var(--orange-deep); }890.quartier .fine { margin-top: 10px; }891892/* --- Fiche v2 (mobile-first) ------------------------------------------------ */893/* Ordre DOM = ordre visuel sur TOUS les breakpoints (standard Groupe Ka894   « Ordre des sections — pages détail »). Interdit : `order` / `column-reverse`895   / `display:contents` pour réordonner — les blocs sans `order` retombaient à896   order:0 et passaient devant la galerie sur mobile. Mobile : colonnes897   empilées ; desktop : grid 2 colonnes (logement | synthèse). */898.fiche { display: flex; flex-direction: column; gap: 22px; }899.f-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }900@media (min-width: 900px) {901  .fiche { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; }902  .f-col { gap: 26px; }903}904.f-bloc { min-width: 0; }905.f-bloc h2 { font-size: 21px; letter-spacing: -0.02em; margin-bottom: 10px; color: var(--navy); }906.f-bloc:empty { display: none; }907908/* galerie à balayage natif */909.carousel { position: relative; border-radius: var(--r-card); overflow: hidden;910  border: 1.5px solid var(--ink); background: var(--grey); box-shadow: var(--shadow-off-soft); }911.carousel-track {912  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;913  -webkit-overflow-scrolling: touch; scrollbar-width: none; aspect-ratio: 16/11;914}915.carousel-track::-webkit-scrollbar { display: none; }916.carousel-track img {917  flex: 0 0 100%; width: 100%; object-fit: cover; scroll-snap-align: center;918  cursor: zoom-in;919}920.carousel-empty { display: flex; align-items: center; justify-content: center;921  aspect-ratio: 16/11; font-size: 48px; }922.carousel-count {923  position: absolute; right: 12px; bottom: 12px; z-index: 2;924  background: rgba(20, 24, 20, 0.78); color: var(--white);925  font-size: 12px; font-weight: 600;926  padding: 4px 11px; border-radius: var(--r-pill);927  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);928}929.carousel-nav {930  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;931  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink);932  background: rgba(255, 255, 255, 0.92); color: var(--navy); font-size: 22px; cursor: pointer;933  display: flex; align-items: center; justify-content: center; line-height: 1;934  box-shadow: var(--shadow-flat);935}936.carousel-nav.prev { left: 10px; } .carousel-nav.next { right: 10px; }937@media (max-width: 640px) { .carousel-nav { display: none; } }  /* balayage natif */938939/* bandeau prix + badge marché */940.f-hero .price { font-size: clamp(34px, 8vw, 44px); }941.deal-badge {942  display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 4px;943  border-radius: var(--r-pill); padding: 7px 14px; font-size: 13px; font-weight: 600;944  border: 1.5px solid var(--ink);945}946.deal-good { background: var(--blue-soft); border-color: rgba(28, 92, 65, 0.3); color: var(--blue); }947.deal-ok { background: var(--surface); color: var(--ink-2); }948.deal-high { background: var(--orange-soft); border-color: rgba(255, 106, 0, 0.35); color: var(--orange-deep); }949.f-hero h1 { font-size: clamp(20px, 4.5vw, 26px); margin-top: 8px; }950951/* chips clés à défilement horizontal */952.chips-scroll {953  display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 6px;954  scrollbar-width: none; -webkit-overflow-scrolling: touch;955}956.chips-scroll::-webkit-scrollbar { display: none; }957.chip-key {958  flex: 0 0 auto; background: var(--navy); color: var(--white);959  border-radius: var(--r-pill); padding: 8px 15px;960  font-size: 12px; font-weight: 600; white-space: nowrap; min-height: 34px;961  display: inline-flex; align-items: center;962}963964/* ancres de navigation rapide */965.ancres {966  display: flex; gap: 4px; overflow-x: auto; padding: 6px 0 2px;967  scrollbar-width: none; border-bottom: 1px solid var(--line); margin-bottom: 8px;968}969.ancres::-webkit-scrollbar { display: none; }970.ancres a {971  flex: 0 0 auto; padding: 9px 14px; font-size: 13.5px; font-weight: 600;972  color: var(--ink-2); border-radius: var(--r-pill); min-height: 44px;973  display: inline-flex; align-items: center;974}975.ancres a:hover { background: var(--orange-soft); color: var(--orange); }976html { scroll-padding-top: 76px; }   /* header sticky au-dessus des ancres */977978/* description restructurée */979.enbref {980  background: var(--blue-soft); border: 1px solid rgba(28, 92, 65, 0.25);981  border-radius: var(--r-card); padding: 12px 16px; color: var(--navy);982  font-size: 15px; margin: 0 0 14px;983}984.desc-section { margin-bottom: 12px; }985.desc-section h4 { font-size: 15px; margin-bottom: 3px; }986.desc-section p { color: var(--ink-2); font-size: 14.5px; margin: 0; white-space: pre-line; }987.texte-original { margin-top: 12px; }988.texte-original summary {989  cursor: pointer; font-size: 12.5px;990  color: var(--ink-3); min-height: 44px; display: flex; align-items: center;991}992.texte-original p { color: var(--ink-3); font-size: 13px; white-space: pre-line; }993994/* inclusions : confirmées vs mentionnées */995.amenity.confirmed { background: var(--blue-soft); border-color: rgba(28, 92, 65, 0.25); color: var(--blue); font-weight: 600; }996.amenity.unconfirmed { background: transparent; border-style: dashed; border-color: var(--line-strong); color: var(--ink-3); }997998/* détails pratiques : historique de prix */999.prix-histo {1000  margin-top: 12px; padding: 10px 14px; border-radius: var(--r-card);1001  border: 1.5px solid var(--ink); font-size: 13.5px; background: var(--surface);1002}1003.prix-histo.down { background: var(--blue-soft); border-color: rgba(28, 92, 65, 0.3); color: var(--blue); }10041005/* quartier compacté sur mobile */1006@media (max-width: 640px) {1007  .q-cell { padding: 9px 11px; }1008  .q-val { font-size: 16px; }1009  .q-bar { gap: 8px; font-size: 12px; }1010  .q-bar-track { height: 8px; }1011}1012.q-badge-sub { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 400; margin-left: 4px; }10131014/* POI groupés repliables */1015.poi-groupe { border: 1.5px solid var(--ink); border-radius: var(--r-card);1016  margin-bottom: 8px; background: var(--surface); overflow: hidden; }1017.poi-groupe summary {1018  display: flex; justify-content: space-between; align-items: center; gap: 10px;1019  padding: 12px 14px; cursor: pointer; font-weight: 600; font-size: 14px;1020  min-height: 48px; list-style: none;1021}1022.poi-groupe summary::-webkit-details-marker { display: none; }1023.poi-groupe summary::after { content: "▾"; color: var(--ink-3); transition: transform 0.15s ease; }1024.poi-groupe[open] summary::after { transform: rotate(180deg); }1025.poi-resume { font-size: 11.5px; color: var(--ink-3); font-weight: 400; }1026.poi-groupe .poi-list { padding: 0 14px 10px; }10271028/* CTA sticky mobile */1029.cta-sticky {1030  position: fixed; left: 0; right: 0; z-index: var(--z-dropdown, 700);1031  bottom: var(--consent-h, 0px);1032  display: flex; align-items: center; gap: 12px;1033  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px);1034  border-top: 1px solid var(--line);1035  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));1036}1037.cta-sticky .cta { flex: 1; margin: 0; text-align: center; }1038.cta-sticky-prix { font-family: var(--font-display); font-weight: 700; font-size: 19px; white-space: nowrap; color: var(--navy); }1039.cta-sticky-prix small { font-weight: 500; font-size: 10px; color: var(--ink-3); }1040@media (min-width: 900px) { .cta-sticky { display: none; } }1041@media (max-width: 899px) {1042  .cta-desktop { display: none; }1043  .detail { padding-bottom: 84px; }   /* place pour le CTA sticky */1044}1045.f-foot { margin-top: 26px; }10461047/* --- Passerelle vers l'annonce originale ------------------------------------ */1048.passerelle {1049  min-height: calc(100dvh - 120px); display: flex; align-items: center;1050  justify-content: center; padding: 24px 16px;1051}1052.pass-card {1053  width: 100%; max-width: 520px; background: var(--surface);1054  border: 1.5px solid var(--ink); border-radius: var(--r-card);1055  box-shadow: var(--shadow-off); padding: 30px 28px; text-align: center;1056}1057.pass-brands {1058  display: flex; align-items: center; justify-content: center; gap: 14px;1059  margin-bottom: 22px; flex-wrap: wrap;1060}1061.pass-brand {1062  font-family: var(--font-display); font-weight: 700; font-size: 24px;1063  letter-spacing: -0.03em; display: inline-flex; align-items: center; color: var(--navy);1064}1065.pass-brand .ka { color: var(--orange); }1066.pass-trajet { display: inline-flex; align-items: center; gap: 5px; }1067.pass-dot {1068  width: 6px; height: 6px; border-radius: 50%; background: var(--orange);1069  opacity: 0.25; animation: pass-dot 1.2s ease infinite;1070}1071.pass-dot:nth-child(2) { animation-delay: 0.2s; }1072.pass-dot:nth-child(3) { animation-delay: 0.4s; }1073@keyframes pass-dot { 40% { opacity: 1; transform: translateX(2px); } }1074.pass-fleche { color: var(--orange); font-size: 18px; }1075.pass-gestionnaire {1076  font-family: var(--font-display); font-weight: 700; font-size: 19px;1077  display: inline-flex; align-items: center; gap: 8px;1078  background: var(--blue-soft); border: 1px solid rgba(28, 92, 65, 0.25);1079  border-radius: var(--r-pill); padding: 6px 16px; color: var(--blue);1080}1081.pass-card h1 { font-size: 20px; letter-spacing: -0.02em; }1082.pass-texte { color: var(--ink-2); font-size: 14.5px; margin: 10px 0 20px; }1083.pass-progress {1084  height: 10px; border-radius: var(--r-pill);1085  overflow: hidden; background: var(--grey); margin-bottom: 20px;1086}1087.pass-progress-fill {1088  display: block; height: 100%; width: 0; background: var(--orange);1089  border-radius: var(--r-pill);1090}1091.pass-progress-fill.go { animation: pass-fill 2.2s linear forwards; }1092@keyframes pass-fill { to { width: 100%; } }1093@media (prefers-reduced-motion: reduce) {1094  .pass-progress-fill.go { animation: none; width: 100%; }1095  .pass-dot { animation: none; opacity: 0.7; }1096}1097.pass-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }10981099/* --- boutons PDF -------------------------------------------------------- */1100.btn-pdf { display: block; text-align: center; margin-top: 10px; width: 100%; }11011102/* --- Onglets de la page Stats -------------------------------------------- */1103.onglets {1104  display: flex; gap: 8px; overflow-x: auto; margin: 26px 0 22px;1105  padding-bottom: 4px; scrollbar-width: none;1106  border-bottom: 1px solid var(--line);1107}1108.onglets::-webkit-scrollbar { display: none; }1109.onglet {1110  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;1111  border: 1.5px solid var(--ink);1112  border-radius: var(--r-pill);1113  background: var(--surface); color: var(--ink-2); cursor: pointer;1114  padding: 10px 18px; font-weight: 600; font-size: 13.5px; min-height: 44px;1115  margin-bottom: 8px;1116  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;1117}1118.onglet:hover { background: var(--blue-soft); color: var(--blue); border-color: var(--blue); }1119.onglet.on { background: var(--blue); border-color: var(--blue); color: var(--white); }11201121/* baisses de prix */1122.baisses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }1123.baisses li {1124  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;1125  padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px;1126}1127.baisses li a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }1128.baisse-ville { color: var(--ink-3); font-size: 11.5px; }1129.baisse-prix { margin-left: auto; }1130.baisse-prix s { color: var(--ink-3); }1131.baisse-pct {1132  font-style: normal; font-weight: 700;1133  background: var(--blue-soft);1134  color: var(--blue); border-radius: var(--r-pill); padding: 2px 9px;1135  font-size: 11px; margin-left: 8px;1136}1137.alertes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); }11381139/* ================= Pagination (12 annonces/page) ================= */1140.pager {1141  display: flex; align-items: center; justify-content: space-between;1142  gap: 16px; flex-wrap: wrap; margin: 26px 0 10px; padding-top: 18px;1143  border-top: 1px solid var(--line);1144}1145.pager-info {1146  font-size: 12.5px; color: var(--ink-2); letter-spacing: 0.02em;1147}1148.pager-info em { font-style: normal; color: var(--ink-3); }1149.pager-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }1150.pager-btn {1151  min-width: 38px; height: 38px; padding: 0 10px;1152  display: inline-flex; align-items: center; justify-content: center;1153  background: var(--surface); border: 1.5px solid var(--ink);1154  border-radius: var(--r-pill); cursor: pointer;1155  font-size: 13px; font-weight: 600;1156  color: var(--navy); transition: all 0.12s ease;1157}1158.pager-btn:hover:not(:disabled):not(.on) {1159  background: var(--blue-soft); border-color: var(--blue); color: var(--blue);1160}1161.pager-btn.on { background: var(--navy); border-color: var(--navy); color: var(--white); cursor: default; }1162.pager-btn:disabled { opacity: 0.35; cursor: not-allowed; }1163.pager-ellipsis { color: var(--ink-3); padding: 0 2px; }1164.map-list .pager { margin: 10px 0 4px; }1165@media (max-width: 640px) {1166  .pager { justify-content: center; }1167  .pager-info { width: 100%; text-align: center; order: 2; }1168}11691170/* ================= Icônes SVG inline — alignement ================= */1171.chip-ico { display: inline-flex; align-items: center; gap: 6px; }1172.chip-ico svg { flex: none; }1173.view-toggle button, .seg button { display: inline-flex; align-items: center; gap: 6px; }1174.fab { align-items: center; gap: 8px; }1175.fab svg { flex: none; }1176.mm-ico { display: inline-flex; align-items: center; }1177.notice .big { display: flex; justify-content: center; color: var(--ink-3); }1178.notice .big svg { display: block; }1179.card-img .noimg { color: var(--ink-3); }1180.badge.right { display: inline-flex; align-items: center; gap: 4px; }1181.btn-pdf { display: inline-flex; align-items: center; gap: 7px; }1182.f-search svg { flex: none; color: var(--ink-3); }1183.mv-noimg { display: flex; align-items: center; justify-content: center; color: var(--ink-3); }11841185/* footer — liens (Groupe KA, courriels, mentions légales) */1186.footer .frow a { color: var(--white); text-decoration: underline; text-decoration-color: rgba(255, 106, 0, 0.5); text-underline-offset: 3px; }1187.footer .frow a:hover { color: var(--orange); }1188.footer .fmono a:hover { color: var(--orange); }11891190/* ================= Compte (connexion Google) ================= */1191.login-btn {1192  display: inline-flex; align-items: center; gap: 8px;1193  padding: 8px 16px; margin-left: 10px; min-height: 38px;1194  background: var(--navy); border: none;1195  border-radius: var(--r-pill); font-weight: 600; font-size: 13.5px; color: var(--white);1196  transition: all 0.12s ease; white-space: nowrap;1197  box-shadow: 0 4px 14px rgba(20, 24, 20, 0.22);1198}1199.login-btn:hover { background: var(--blue); }1200.account { position: relative; margin-left: 10px; }1201.account-btn {1202  width: 38px; height: 38px; padding: 0; border: 2px solid var(--orange);1203  border-radius: var(--r-pill); overflow: hidden; cursor: pointer;1204  background: var(--orange-soft); display: flex; align-items: center; justify-content: center;1205}1206.account-btn img { width: 100%; height: 100%; object-fit: cover; }1207.account-initial { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--orange); }1208/* Click-catcher plein écran rendu via createPortal à la racine de <body>1209   (un fixed descendant du header blurré se re-parentait → 66 px de haut).1210   z-index SOUS le header (50) : le menu .account-menu reste ancré DANS le1211   header et doit peindre au-dessus du voile. */1212.account-backdrop { position: fixed; inset: 0; z-index: 40; }1213.account-menu {1214  position: absolute; right: 0; top: calc(100% + 10px); z-index: 91;1215  min-width: 220px; background: var(--surface); border: 1.5px solid var(--ink);1216  border-radius: var(--r-card); box-shadow: var(--shadow-off); overflow: hidden;1217}1218.account-id { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-bottom: 1px solid var(--line); }1219.account-id b { font-size: 14px; }1220.account-id span { font-size: 11.5px; color: var(--ink-3); word-break: break-all; }1221.account-menu button {1222  width: 100%; text-align: left; padding: 11px 14px; border: 0; cursor: pointer;1223  background: transparent; font-weight: 600; font-size: 13.5px; color: var(--danger);1224}1225.account-menu button:hover { background: var(--orange-soft); color: var(--navy); }1226@media (max-width: 640px) { .login-btn { padding: 8px 12px; font-size: 12.5px; } }12271228/* ================= Profil — carte de membre Groupe KA ================= */1229.profil { padding-top: 40px; padding-bottom: 60px; }1230.profil h1 { font-size: clamp(30px, 5vw, 44px); margin: 10px 0 26px; color: var(--navy); }1231.profil .lede { max-width: 520px; color: var(--ink-2); margin-bottom: 22px; }12321233.pc {1234  position: relative; max-width: 520px; overflow: hidden;1235  background: linear-gradient(135deg, #101a40 0%, var(--navy) 55%, #080e24 100%);1236  color: var(--white);1237  border-radius: 20px;1238  padding: 24px 26px 0; box-shadow: var(--shadow-off);1239}1240.pc-watermark {1241  position: absolute; right: -18px; top: -34px; pointer-events: none;1242  font-family: var(--font-display); font-weight: 700; font-size: 170px;1243  letter-spacing: -0.06em; color: rgba(255, 106, 0, 0.07);1244  transform: rotate(-8deg); line-height: 1;1245}1246.pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }1247.pc-brand { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; }1248.pc-ka { color: var(--orange); margin-left: 1px; display: inline-block; }1249.pc-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.5); }1250.pc-id-block { margin: 26px 0 22px; display: flex; flex-direction: column; gap: 4px; }1251.pc-id-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255, 106, 0, 0.75); }1252.pc-id {1253  font-weight: 700; color: var(--orange);1254  font-size: clamp(22px, 6vw, 34px); letter-spacing: 0.14em;1255  text-shadow: 0 0 24px rgba(255, 106, 0, 0.35);1256}1257.pc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-bottom: 18px; }1258.pc-holder { display: flex; flex-direction: column; gap: 2px; min-width: 0; }1259.pc-holder-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }1260.pc-holder-since { font-size: 10.5px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.06em; }1261.pc-role-badge {1262  display: inline-block; width: fit-content; margin: 3px 0 2px;1263  background: var(--orange); color: var(--white);1264  font-size: 9px; font-weight: 700;1265  text-transform: uppercase; letter-spacing: 0.12em;1266  padding: 2px 8px 3px; border-radius: var(--r-pill);1267}1268.pc-avatar { width: 52px; height: 52px; border-radius: var(--r-pill); border: 2px solid var(--orange); flex: none; }1269.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; }1270.pc-strip i { display: block; width: 3px; border-radius: 1px; background: var(--orange); opacity: 0.7; }1271.pc-strip i:nth-child(3n) { height: 14px; opacity: 0.35; }1272.pc-strip i:nth-child(3n+1) { height: 9px; }1273.pc-strip i:nth-child(3n+2) { height: 17px; opacity: 0.9; }1274.pc-copy { margin-top: 16px; }1275.pc-copy.ok { background: var(--blue); color: var(--white); }12761277.profil-grid {1278  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));1279  gap: 12px; margin-top: 30px; max-width: 760px;1280}1281.pg-item {1282  background: var(--surface); border: 1.5px solid var(--ink);1283  border-radius: var(--r-card); padding: 14px 16px;1284  display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-flat);1285}1286.pg-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }1287.pg-value { font-weight: 600; font-size: 14.5px; word-break: break-word; }1288.pg-value.mono { color: var(--blue); }12891290.profil-note { max-width: 640px; color: var(--ink-2); font-size: 13.5px; margin-top: 22px; }1291.profil-note a { text-decoration: underline; text-underline-offset: 3px; }1292.profil-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }1293.profil-actions .btn { display: inline-flex; align-items: center; gap: 7px; }12941295.account-kaid { font-size: 10.5px; color: var(--blue); letter-spacing: 0.08em; }1296.account-link {1297  display: block; width: 100%; text-align: left; padding: 11px 14px;1298  font-weight: 600; font-size: 13.5px; color: var(--navy);1299  border-bottom: 1px solid var(--line);1300}1301.account-link:hover { background: var(--orange-soft); }13021303/* profil public — section + lien partageable */1304.profil-public { margin-top: 30px; max-width: 640px; }1305.profil-public h3 { font-size: 18px; margin-bottom: 6px; }1306.profil-public p { color: var(--ink-2); font-size: 13.5px; margin: 0 0 12px; }1307.public-link {1308  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;1309  margin-top: 14px; padding: 12px 14px; background: var(--blue-soft);1310  border: 1px solid rgba(28, 92, 65, 0.25); border-radius: var(--r-card);1311}1312.public-link a { font-size: 13px; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }13131314/* ================= Bienvenue — choix du rôle ================= */1315.bienvenue { padding-top: 44px; padding-bottom: 70px; }1316.bienvenue h1 { font-size: clamp(30px, 5vw, 46px); margin: 10px 0 14px; color: var(--navy); }1317.bienvenue .lede { max-width: 480px; color: var(--ink-2); margin-bottom: 30px; }1318.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 780px; }1319.role-card {1320  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;1321  text-align: left; padding: 24px 24px 20px; cursor: pointer;1322  background: var(--surface); border: 1.5px solid var(--ink);1323  border-radius: var(--r-card); box-shadow: var(--shadow-flat);1324  font-family: var(--font-body); transition: all 0.15s ease;1325}1326.role-card:hover:not(:disabled) { transform: translateY(-4px); box-shadow: var(--shadow-off); border-color: rgba(255, 106, 0, 0.4); }1327.role-card:disabled { opacity: 0.6; cursor: wait; }1328.role-ico { display: flex; width: 54px; height: 54px; align-items: center; justify-content: center; background: var(--orange-soft); color: var(--orange); border-radius: 16px; }1329.role-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--navy); }1330.role-desc { color: var(--ink-2); font-size: 13.5px; }1331.role-perks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }1332.role-perks li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }1333.role-perks li::before {1334  content: "✓"; flex: none; width: 16px; height: 16px; border-radius: 50%;1335  background: var(--orange); color: var(--white); font-size: 10px; font-weight: 700;1336  display: inline-flex; align-items: center; justify-content: center;1337}1338.role-cta { margin-top: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--orange); }13391340/* ================= Favoris — cœur sur les cartes ================= */1341.fav-btn {1342  position: absolute; right: 10px; bottom: 10px; z-index: 2;1343  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;1344  background: rgba(255, 255, 255, 0.94); border: none;1345  border-radius: var(--r-pill); cursor: pointer; color: var(--navy);1346  box-shadow: var(--shadow-flat);1347  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;1348}1349.fav-btn:hover { transform: scale(1.12); }1350.fav-btn.on { background: var(--white); color: var(--orange); }1351.fav-btn.on svg { filter: drop-shadow(0 0 3px rgba(255, 106, 0, 0.35)); }13521353/* ================= Espace gestionnaire ================= */1354.claim-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; max-width: 640px; }1355.claim-row select {1356  flex: 1; min-width: 260px; padding: 11px 14px; font-size: 14px;1357  border: 1.5px solid var(--ink); border-radius: var(--r-ctl);1358  background: var(--surface); font-family: var(--font-body);1359}1360.claim-error { color: var(--danger); font-size: 13.5px; font-weight: 600; margin-top: 10px; }1361.org-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 22px; }1362.org-stat { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-2); }1363.org-form { max-width: 640px; display: flex; flex-direction: column; gap: 14px; }1364.org-form h3 { font-size: 18px; }1365.org-form label { display: flex; flex-direction: column; gap: 5px; flex: 1; }1366.org-form label span { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }1367.org-form input, .org-form textarea {1368  padding: 10px 14px; font-size: 14px; font-family: var(--font-body);1369  border: 1.5px solid var(--ink); border-radius: var(--r-ctl); background: var(--surface);1370}1371.org-form textarea { resize: vertical; }1372.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); }1373.org-form-row { display: flex; gap: 12px; flex-wrap: wrap; }1374.org-form .btn { align-self: flex-start; }13751376/* ================= Page publique /g/{source} ================= */1377.orgpub-head { display: flex; gap: 20px; align-items: flex-start; margin-top: 8px; }1378.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); }1379.orgpub-id h1 { font-size: clamp(26px, 4.4vw, 40px); margin: 6px 0 8px; color: var(--navy); }1380.orgpub-tagline { font-size: 16px; color: var(--ink-2); margin: 0 0 12px; max-width: 640px; }1381.orgpub-meta { display: flex; gap: 8px; flex-wrap: wrap; }1382.orgpub-meta a.stat-chip:hover { background: var(--blue-soft); }1383.orgpub-verified { background: var(--blue-soft); border-color: rgba(28, 92, 65, 0.3); color: var(--blue); font-weight: 600; }1384.orgpub-desc { max-width: 720px; color: var(--ink-2); margin: 18px 0 6px; white-space: pre-line; }1385.orgpub .results-head h2 { display: inline-flex; align-items: center; gap: 8px; }1386@media (max-width: 560px) { .orgpub-head { flex-direction: column; } }13871388/* ================= Éditeur de profil (photo, bio, réseaux) ================= */1389.profil-edit { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line-strong); }1390/* profil géré au hub Groupe KA — lecture seule */1391.hub-profile .hub-bio { color: var(--ink-2); font-size: 14px; margin: 0; max-width: 560px; }1392.hub-profile .pub-meta { display: flex; gap: 8px; flex-wrap: wrap; }1393.hub-profile .stat-chip { display: inline-flex; align-items: center; gap: 6px; }1394.hub-profile a.stat-chip:hover { background: var(--blue-soft); }1395.hub-profile .btn-primary { display: inline-flex; align-items: center; gap: 7px; }1396.pe-avatar-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }1397.pe-avatar {1398  width: 84px; height: 84px; border-radius: var(--r-pill); object-fit: cover;1399  border: 2.5px solid var(--orange); box-shadow: var(--shadow-flat);1400  display: flex; align-items: center; justify-content: center;1401}1402.pe-avatar-empty { background: var(--orange-soft); color: var(--orange); font-family: var(--font-display); font-weight: 700; font-size: 34px; }1403.pe-avatar-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }1404.pe-avatar-actions .btn { display: inline-flex; align-items: center; gap: 7px; }1405.pe-hint { font-size: 11px; color: var(--ink-3); }1406.pe-socials-title { font-size: 15px; margin-top: 6px; }1407.pe-socials { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }1408.pe-social { display: flex !important; flex-direction: row !important; align-items: center; gap: 0 !important; }1409.pe-social-ico {1410  display: flex; align-items: center; justify-content: center;1411  width: 40px; align-self: stretch; flex: none;1412  background: var(--navy); color: var(--white);1413  border-radius: var(--r-ctl) 0 0 var(--r-ctl);1414}1415.pe-social input { flex: 1; border-radius: 0 var(--r-ctl) var(--r-ctl) 0; border-left: 0; }14161417/* profil public — à propos + réseaux */1418.pub-about { max-width: 640px; margin-top: 22px; }1419.pub-bio { font-size: 15.5px; color: var(--ink); margin: 0 0 12px; white-space: pre-line; }1420.pub-meta { display: flex; gap: 8px; flex-wrap: wrap; }1421.pub-socials { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }1422.pub-social {1423  display: flex; align-items: center; justify-content: center;1424  width: 44px; height: 44px; background: var(--surface);1425  border: 1.5px solid var(--ink); border-radius: 14px; color: var(--navy);1426  transition: all 0.12s ease;1427}1428.pub-social:hover { background: var(--navy); border-color: var(--navy); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-off-soft); }14291430/* -----------------------------------------------------------------------------1431   Lou-Ka Maps (framework Ka Maps par Groupe Ka)1432   Jetons du design system appliqués au chrome de la carte + sync liste↔carte.1433----------------------------------------------------------------------------- */1434.mapview .ka-map {1435  --ka-accent: var(--accent);1436  --ka-on-accent: var(--on-accent);1437  --ka-surface: var(--surface);1438  --ka-ink: var(--navy);1439  --ka-line: var(--line-strong);1440  --ka-radius: var(--r-ctl);1441  --ka-shadow: 0 8px 24px rgba(20, 24, 20, 0.14);1442  --ka-font: var(--font-body);1443}1444.mapview { position: relative; overflow: hidden; }1445.mapview .ka-map { position: absolute; inset: 0; }14461447/* mini-carte 3D de la fiche (Emplacement) — bâtiment de l'annonce en orange */1448.lmap3d {1449  position: relative; height: 340px; border: 1.5px solid var(--ink);1450  border-radius: var(--r-card); box-shadow: var(--shadow-off-soft);1451  overflow: hidden; background: var(--grey);1452}1453.lmap3d .ka-map {1454  --ka-accent: var(--accent);1455  --ka-on-accent: var(--on-accent);1456  --ka-surface: var(--surface);1457  --ka-ink: var(--navy);1458  --ka-line: var(--line-strong);1459  --ka-radius: var(--r-ctl);1460  --ka-shadow: 0 8px 24px rgba(20, 24, 20, 0.14);1461  --ka-font: var(--font-body);1462  position: absolute; inset: 0;1463}1464.lmap3d-skel {1465  background: linear-gradient(90deg, #ececef 25%, #f7f7f9 50%, #ececef 75%);1466  background-size: 800px 100%; animation: shimmer 1.4s infinite linear;1467}1468.lmap3d-legende {1469  position: absolute; left: 10px; bottom: 10px; z-index: 5;1470  display: inline-flex; align-items: center; gap: 6px;1471  padding: 4px 10px; border: 1.5px solid var(--ink);1472  border-radius: var(--r-pill); background: var(--surface);1473  font-size: 10.5px; font-weight: 500; color: var(--ink-2);1474  pointer-events: none;1475}1476.lmap3d-legende i {1477  width: 10px; height: 10px; border-radius: 3px;1478  background: var(--orange); border: 1px solid rgba(20, 24, 20, 0.25);1479}1480@media (max-width: 780px) { .lmap3d { height: 280px; } }1481.ka-preview .mv-pop img, .ka-preview .mv-noimg { height: 120px; }1482.ka-preview-sheet .mv-pop { display: grid; grid-template-columns: 130px 1fr; }1483.ka-preview-sheet .mv-pop img, .ka-preview-sheet .mv-noimg { height: 100%; min-height: 120px; }14841485/* carte de liste synchronisée avec la carte (survol / sélection) */1486.map-card { border-radius: var(--r-card); }1487.map-card-sel { outline: 2px solid var(--blue); outline-offset: 2px; }14881489/* =============================================================================1490   HARMONISATION « ÉDITORIAL SHARP » (Groupe KA) — couche finale posée après1491   les styles historiques : géométrie 10/6 px, bordures encre 1,5 px, ombres1492   décalées dures, accent orange Lou-Ka. La carte Ka Maps (Mapbox) conserve1493   son propre thème marine/orange à l'intérieur du canevas.1494============================================================================= */14951496/* — contrôles : plus de pilules (les chips/badges gardent --r-pill) — */1497.nav a, .login-btn, .cta, .mv-pop-cta, .f-search, .f-more, .pager-btn,1498.onglet, .view-toggle, .fab, .f-ctl, .pass-gestionnaire, .hbar-track,1499.q-bar-track, .pass-progress { border-radius: var(--r-ctl); }1500.seg button:first-child { border-radius: var(--r-ctl) 0 0 var(--r-ctl); }1501.seg button:last-child { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }15021503/* — header : papier translucide + trait d'encre — */1504.header {1505  background: rgba(245, 243, 238, 0.92);1506  border-bottom: 1.5px solid var(--ink);1507}1508.nav a { font-family: var(--font-display); }1509.nav a:hover { color: var(--accent-deep); background: var(--accent-soft); }1510.nav a.active { background: var(--ink); color: var(--accent); }1511.brand .ka {1512  background: var(--accent); color: var(--on-accent);1513  border-radius: 6px; padding: 0 6px 2px; margin-left: 2px; transform: rotate(-2deg);1514}1515.header .gk-badge { margin-left: 4px; flex: none; }1516@media (max-width: 1080px) { .header .gk-badge { display: none; } }1517.mm-badge {1518  display: flex; align-items: center; min-height: var(--touch);1519  padding: 8px 10px 2px;1520}15211522/* — ticker : encre + mono — */1523.ticker { font-family: var(--font-mono); border-bottom: 1.5px solid var(--ink); }15241525/* — états sélectionnés : encre + accent (fini le bleu) — */1526.seg button.on, .onglet.on, .view-toggle button.on, .f-more.on {1527  background: var(--ink); border-color: var(--ink); color: var(--accent);1528}1529.pager-btn.on { background: var(--ink); border-color: var(--ink); color: var(--accent); }15301531/* — CTA / FAB : aplat accent, bordure encre, ombre décalée — */1532.cta, .mv-pop-cta, .fab {1533  background: var(--accent); color: var(--on-accent);1534  border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);1535  font-family: var(--font-display); font-weight: 700;1536}1537.cta:hover, .mv-pop-cta:hover, .fab:hover { background: var(--accent-deep); }1538.cta:active, .fab:active { box-shadow: none; }1539.fab { box-shadow: 4px 4px 0 var(--ink), 0 10px 28px rgba(20, 24, 20, 0.25); }1540.login-btn {1541  background: var(--ink); color: var(--accent);1542  border: 1.5px solid var(--ink); box-shadow: none;1543  font-family: var(--font-display); font-weight: 700;1544}1545.login-btn:hover { background: var(--accent-deep); color: var(--on-accent); }15461547/* — cartes : levée nette diagonale (signature du groupe) — */1548.card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off); }1549.role-card:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: var(--shadow-off); border-color: var(--ink); }1550.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; }1551.badge.type { background: var(--accent); color: var(--on-accent); }1552.source-tag { font-family: var(--font-mono); }15531554/* — barre d'onglets mobile : papier + encre, actif = accent orange — */1555@media (max-width: 760px) {1556  .tabbar { background: rgba(245, 243, 238, 0.95); border-top: 1.5px solid var(--ink); }1557  .tabbar a { font-family: var(--font-display); }1558  .tabbar a.active { color: var(--accent); }1559}1560.mobile-menu { background: var(--paper); border-bottom: 1.5px solid var(--ink); }15611562/* — carte de membre KA : encre plutôt que marine — */1563.pc { background: linear-gradient(135deg, #1d231d 0%, var(--ink) 55%, #0b0e0b 100%); }15641565/* — micro-étiquettes en mono (système) — */1566.f-ctl > span, .f-group > label, .field label, .tile-k, .pg-label,1567.pc-label, .pc-id-label, .crumbs, .viz-sub { font-family: var(--font-mono); }15681569/* — page Contact (design system) — */1570.contact-page { padding: 44px 0 90px; }1571.contact-page h1 { margin: 10px 0 8px; }1572.contact-page .lede { color: var(--ink-2); max-width: 640px; margin: 0 0 26px; }1573.contact-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 26px 0; }1574@media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }1575.contact-card { padding: 18px 20px; }1576.contact-card .klabel { display: block; margin-bottom: 6px; }1577.contact-card a.mail {1578  font-family: var(--font-mono); font-weight: 700; font-size: 13.5px;1579  color: var(--accent-deep); word-break: break-all;1580  text-decoration: underline; text-underline-offset: 3px;1581  display: inline-flex; align-items: center; min-height: 44px;1582}1583.contact-card p { margin: 6px 0 0; color: var(--ink-2); font-size: 13.5px; }1584.contact-note {1585  border-left: 3px solid var(--accent); background: var(--surface);1586  border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink);1587  border-bottom: 1.5px solid var(--ink); border-radius: 0 var(--r-card) var(--r-card) 0;1588  padding: 14px 18px; max-width: 720px; color: var(--ink-2); font-size: 14px;1589}1590.contact-note b { color: var(--ink); }1591.contact-sites { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }1592.contact-sites a {1593  display: inline-flex; align-items: center; min-height: 34px;1594  padding: 4px 12px; border: 1.5px solid var(--ink); border-radius: var(--r-pill);1595  background: var(--surface); font-family: var(--font-mono); font-size: 11px;1596  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;1597  transition: transform 0.12s, box-shadow 0.12s;1598}1599.contact-sites a:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-off-mid); }1600.contact-hub { margin-top: 26px; }16011602/* — rangée de navigation locale au-dessus du footer commun — */1603.prefooter { border-top: 1.5px solid var(--ink); background: var(--surface-2); padding: 18px 0; }1604.prefooter .container {1605  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;1606  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;1607  text-transform: uppercase; letter-spacing: 0.08em;1608}1609.prefooter a, .prefooter .flink {1610  color: var(--ink-2); text-decoration: none; text-transform: uppercase;1611  letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 700; font-size: 11.5px;1612  min-height: var(--touch); display: inline-flex; align-items: center;1613}1614.prefooter a:hover, .prefooter .flink:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 4px; }1615.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; }1616.ka-footer { margin-top: 0; }1617@media (max-width: 760px) { .ka-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } }16181619/* ============ Juste valeur (fair value) — pastilles & analyse de prix ====== */1620.fv-badge {1621  display: inline-flex; align-items: center; gap: 6px;1622  border-radius: var(--r-pill); padding: 6px 12px;1623  font-size: 12.5px; font-weight: 700; border: 1.5px solid var(--ink);1624  white-space: nowrap;1625}1626.fv-badge .fv-ico { font-size: 10px; line-height: 1; }1627.fv-badge .fv-pct { margin-left: 4px; }1628.fv-badge.fv-compact { padding: 2px 8px; font-size: 11px; gap: 4px; margin-left: 8px; vertical-align: 2px; }1629/* états (mêmes jetons que les badges marché existants — daltonien-compatible :1630   l'icône ▼ ≈ ▲ et le libellé portent l'information, pas la couleur seule) */1631.fv-badge.deal-good { background: var(--blue-soft); border-color: rgba(28, 92, 65, 0.35); color: var(--blue); }1632.fv-badge.deal-ok { background: var(--surface); color: var(--ink-2); }1633.fv-badge.deal-high { background: var(--orange-soft); border-color: rgba(255, 106, 0, 0.4); color: var(--orange-deep); }16341635.f-fairvalue .fv-head {1636  display: flex; align-items: flex-start; justify-content: space-between;1637  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;1638}1639.f-fairvalue .fv-value { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--navy); }1640.f-fairvalue .fv-value small { font-size: 12px; font-weight: 500; color: var(--ink-3); }1641.f-fairvalue .fv-range { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }1642.fv-histo { display: block; width: 100%; height: auto; margin: 10px 0 4px; }1643.fv-histo-lbl { font: 700 10px Inter, system-ui, sans-serif; fill: var(--ink); }1644.fv-histo-lbl-fv { fill: var(--accent-deep, #cc5500); }1645.fv-histo-axis { font: 500 9px Inter, system-ui, sans-serif; fill: var(--ink-3); }1646.fv-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); margin: 6px 0 4px; }1647.fv-demo { display: flex; flex-wrap: wrap; gap: 8px; }1648.chip.chip-deal.on { background: var(--blue); border-color: var(--blue); color: var(--white); }16491650/* =============================================================================1651   MapSearch — recherche synchronisée liste ↔ carte (search/MapSearch.tsx)1652   Une seule vérité partagée : compteur, tri, survols et sélections miroirs.1653============================================================================= */16541655.ms { position: relative; }1656.ms-list { position: relative; scroll-behavior: smooth; }16571658.ms-list-head {1659  display: flex; align-items: center; justify-content: space-between;1660  gap: 10px; flex-wrap: wrap; padding: 2px 2px 4px;1661}1662.ms-count { font-size: 13.5px; color: var(--ink-2); }1663.ms-count b { color: var(--ink); font-size: 15px; }1664.ms-nopos {1665  margin-left: 8px; font-size: 11px; color: var(--ink-3);1666  border: 1px dashed var(--line-strong); border-radius: var(--r-pill);1667  padding: 2px 8px; cursor: help;1668}1669.ms-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }1670.ms-sort select {1671  border: 1.5px solid var(--ink); border-radius: var(--r-ctl);1672  background: var(--surface); padding: 6px 8px; font-size: 12.5px;1673  font-weight: 600; color: var(--ink);1674}16751676.ms-pills { margin: 0 0 4px; }16771678.ms-refit {1679  align-self: flex-start; border: 1.5px solid var(--ink);1680  border-radius: var(--r-pill); background: var(--surface);1681  padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--ink-2);1682  cursor: pointer; box-shadow: var(--shadow-off-soft);1683}1684.ms-refit:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }16851686/* barre de progression fine — jamais d'écran qui clignote */1687.ms-progress {1688  position: sticky; top: 0; z-index: 4; height: 3px; border-radius: 2px;1689  background: linear-gradient(90deg, transparent, var(--accent), transparent);1690  background-size: 200% 100%; animation: ms-progress 1s linear infinite;1691}1692@keyframes ms-progress { from { background-position: 200% 0; } to { background-position: -200% 0; } }16931694.ms-empty {1695  border: 1.5px dashed var(--line-strong); border-radius: var(--r-card);1696  padding: 26px 18px; text-align: center; color: var(--ink-2);1697}1698.ms-empty .big { margin-bottom: 6px; color: var(--ink-3); }1699.ms-empty h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink); }1700.ms-empty p { margin: 0 0 14px; font-size: 13px; }1701.ms-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }17021703/* miroirs survol / sélection venus de la carte */1704.map-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }1705.map-card-hover {1706  outline: 2px solid var(--accent); outline-offset: 2px;1707  transform: translateY(-1px);1708}1709.map-card-pulse { animation: ms-pulse 0.9s ease 1; }1710@keyframes ms-pulse {1711  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }1712  70% { box-shadow: 0 0 0 12px transparent; }1713  100% { box-shadow: 0 0 0 0 transparent; }1714}17151716/* indicateur discret : l'annonce survolée sur la carte est hors écran */1717.ms-hover-hint {1718  position: sticky; z-index: 5; align-self: center;1719  background: var(--navy); color: var(--white);1720  border-radius: var(--r-pill); padding: 5px 12px;1721  font-size: 11.5px; font-weight: 600; pointer-events: none;1722  box-shadow: var(--shadow-off-soft);1723}1724.ms-hover-hint.haut { top: 8px; order: -1; }1725.ms-hover-hint.bas { bottom: 8px; }17261727/* ---------------- carrousel mobile synchronisé aux marqueurs ------------- */1728.ms-carousel {1729  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 12;1730  display: flex; gap: 10px; overflow-x: auto; padding: 4px 12px;1731  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;1732  scrollbar-width: none;1733}1734.ms-carousel::-webkit-scrollbar { display: none; }1735.ms-car-item {1736  flex: 0 0 78%; max-width: 340px; scroll-snap-align: center;1737  display: grid; grid-template-columns: 108px 1fr; gap: 0;1738  background: var(--surface); border: 1.5px solid var(--ink);1739  border-radius: var(--r-card); overflow: hidden;1740  box-shadow: var(--shadow-off-soft); text-decoration: none; color: inherit;1741}1742.ms-car-item.sel { outline: 2.5px solid var(--accent); outline-offset: 1px; }1743.ms-car-item img, .ms-car-item .smart-img, .ms-car-item .card-fallback {1744  width: 108px; height: 96px; object-fit: cover; display: block;1745}1746.ms-car-body { padding: 9px 12px; min-width: 0; }1747.ms-car-price { font-size: 14.5px; font-weight: 700; color: var(--ink); display: flex; gap: 6px; align-items: center; }1748.ms-car-title {1749  font-size: 12px; color: var(--ink-2); margin-top: 2px;1750  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;1751}1752.ms-car-meta { font-size: 11px; color: var(--ink-3); margin-top: 3px; }1753.ms-car-more {1754  flex: 0 0 auto; scroll-snap-align: center; align-self: stretch;1755  border: 1.5px solid var(--ink); border-radius: var(--r-card);1756  background: var(--navy); color: var(--white);1757  font-size: 12.5px; font-weight: 600; padding: 0 18px; cursor: pointer;1758}17591760/* mobile : carte plein cadre, liste masquée, carrousel par-dessus la carte */1761@media (max-width: 780px) {1762  .ms { height: calc(100dvh - 190px); }1763  .ms-list { display: none; }1764  .ms .mapview { height: 100%; }1765  .ka-search-area { top: 8px; }1766}1767@media (min-width: 781px) {1768  .ms-carousel { display: none; }1769}17701771/* mobile : réorganisation du chrome carte autour du carrousel */1772@media (max-width: 780px) {1773  .ms .ka-draw-btn { top: 56px; left: 10px; bottom: auto; }1774  .ms .ka-loading { bottom: 132px; }1775  .ms .ka-empty { transform: translate(-50%, -70%); }1776}1777/* l'auto-défilement vers la carte laisse l'entête de résultats visible */1778.ms { scroll-margin-top: 108px; }17791780/* mobile, vue carte : chrome sans chevauchement (case en haut, outils sous1781   elle, FAB Filtres au-dessus du carrousel) */1782@media (max-width: 780px) {1783  .ms .ka-draw-btn { top: 88px; left: 10px; bottom: auto; }1784  .ms .ka-locate { top: 88px; right: 10px; }1785  .fab-carte { bottom: 148px; }1786}17871788/* =============================================================================1789   KA Scores — pastilles, jauges circulaires, page méthodologie1790============================================================================= */1791.ka-badge {1792  display: inline-flex; align-items: center; gap: 4px;1793  border: 1.5px solid var(--ink); border-radius: var(--r-pill);1794  padding: 1px 8px 1px 3px; font-size: 11px; font-weight: 700;1795  color: var(--ink); background: var(--surface); line-height: 1.5;1796  vertical-align: middle;1797}1798.ka-badge-logo {1799  background: var(--ink); color: var(--white); border-radius: 999px;1800  font-size: 8.5px; font-weight: 800; padding: 1.5px 5px; letter-spacing: 0.4px;1801}1802.ka-badge.ka-haut  { border-color: var(--green, #256d43); }1803.ka-badge.ka-haut .ka-badge-logo { background: var(--green, #256d43); }1804.ka-badge.ka-bon   { border-color: var(--accent); }1805.ka-badge.ka-bon .ka-badge-logo { background: var(--accent); }1806.ka-badge.ka-moyen { opacity: 0.9; }1807.ka-badge.ka-bas   { opacity: 0.75; }18081809.ka-circles, .ka-demo-circles {1810  display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0 6px;1811}1812.ka-circle { text-align: center; width: 92px; }1813.ka-circle-fond {1814  fill: none; stroke: var(--line); stroke-width: 6;1815}1816.ka-circle-arc {1817  fill: none; stroke: var(--ink-3); stroke-width: 6; stroke-linecap: round;1818  transition: stroke-dasharray 0.6s ease;1819}1820.ka-circle.ka-haut .ka-circle-arc  { stroke: var(--green, #256d43); }1821.ka-circle.ka-bon .ka-circle-arc   { stroke: var(--accent); }1822.ka-circle.ka-moyen .ka-circle-arc { stroke: var(--orange, #d97a2b); }1823.ka-circle.ka-bas .ka-circle-arc   { stroke: #b3543f; }1824.ka-circle-val { font: 700 17px var(--font-body); fill: var(--ink); }1825.ka-circle-nom { font-size: 12px; font-weight: 700; color: var(--ink); margin-top: 4px; }1826.ka-circle-label { font-size: 10.5px; color: var(--ink-3); }18271828.f-kascores h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }1829.ka-perso {1830  font-size: 12px; font-weight: 600; color: var(--ink-2);1831  border: 1.5px dashed var(--line-strong); border-radius: var(--r-pill);1832  padding: 2px 10px;1833}1834.ka-detail summary {1835  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2);1836  padding: 6px 0;1837}1838.ka-detail-grille {1839  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));1840  gap: 14px; padding: 8px 0 4px;1841}1842.ka-detail-grille h4 { margin: 0 0 4px; font-size: 12px; color: var(--ink); }1843.ka-detail-grille ul { margin: 0 0 10px; padding-left: 16px; font-size: 12.5px; color: var(--ink-2); }1844.ka-detail-grille li { margin: 2px 0; }18451846.ka-poids { display: grid; gap: 10px; margin: 14px 0; max-width: 460px; }1847.ka-poids-row {1848  display: grid; grid-template-columns: 90px 1fr 48px; align-items: center;1849  gap: 12px; font-size: 13px; font-weight: 600; color: var(--ink);1850}1851.ka-poids-row input[type="range"] { accent-color: var(--accent); }1852.ka-poids-row b { text-align: right; font-variant-numeric: tabular-nums; }18531854.ms-car-price .ka-badge { margin-left: 2px; }1855@media (max-width: 780px) {1856  .ms .ka-3d { top: 148px; right: 10px; }1857}1858