spb/rent-ka

1/* -----------------------------------------------------------------------------2  Rent-Ka — Rental listings aggregator (Canada, outside Québec)3  Author: Simon-Pierre Boucher — contact@spboucher.ai4  styles.css: Rent-Ka LOCAL styles, laid ON TOP of the shared Groupe KA5  "editorial sharp" design system (frontend/src/ka/tokens.css, imported6  BEFORE this file in main.tsx).7    · Shared palette: paper #f5f3ee · ink #141814 · deep green #1c5c418    · Rent-Ka ACCENT: cobalt #2456E6 (+ display font, only tokens.css overrides)9    · Type: display Bricolage Grotesque / text Inter / micro-labels JetBrains Mono10    · Signature: 1.5 px ink borders + hard offset shadows, radii 10/6 px11    · Baseline: "Apartments and homes for rent across Canada."12    · 100 % mobile adaptive (installable PWA, iOS safe-areas)13----------------------------------------------------------------------------- */14:root {15  /* ---- Rent-Ka ACCENT + display font (official ka-ui token overrides) ---- */16  --accent: #2456e6;17  --accent-soft: #e9efff;18  --accent-deep: #1738a8;19  --on-accent: #ffffff;20  --lime: var(--accent);21  --lime-soft: var(--accent-soft);22  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;2324  /* ---- Aliases inherited from the old navy/blue identity — remapped onto25         the shared tokens (the background goes back to paper via tokens.css) ---- */26  --navy: var(--ink);27  --navy-soft: var(--surface-2);28  --blue: var(--green);29  --blue-soft: #e8f0ea;30  --orange: var(--accent);31  --orange-soft: var(--accent-soft);32  --orange-deep: var(--accent-deep);33  --grey: var(--surface-2);34  --white: #ffffff;35}3637#root { position: relative; z-index: 1; }38a { text-decoration: none; }39button { font-family: inherit; }4041.mono { font-family: var(--font-mono); }4243/* Garde-fou : jamais de défilement horizontal de la page, même transitoire44   pendant le chargement (bandeau défilant, polices) — clip ne casse pas45   position: sticky, contrairement à hidden. */46html, body { overflow-x: clip; }4748/* ================= Header ================= */49.header {50  position: sticky; top: 0; z-index: var(--z-header, 500);51  background: var(--paper);52  border-bottom: 1px solid var(--line);53}54.header-inner { display: flex; align-items: center; gap: 20px; height: 64px; }55.brand {56  font-family: var(--font-display); font-weight: 700; font-size: 25px;57  letter-spacing: -0.03em; display: flex; align-items: center; line-height: 1;58  color: var(--navy);59}60.brand .logo-ico { margin-right: 12px; flex: none; }  /* ≈ 40 % de la largeur de l'icône */61.brand .ka { color: var(--orange); }62.brand-tag {63  font-size: 11px; font-weight: 500; color: var(--ink-3);64  letter-spacing: 0.02em; margin-left: 12px;65}66@media (max-width: 900px) { .brand-tag { display: none; } }67.nav { margin-left: auto; display: flex; gap: 4px; }68.nav a {69  padding: 9px 16px; border-radius: var(--r-pill); font-weight: 600; font-size: 14px;70  color: var(--navy); transition: all 0.15s ease; min-height: 40px;71  display: inline-flex; align-items: center;72}73.nav a:hover { color: var(--orange); background: var(--orange-soft); }74.nav a.active { background: var(--navy); color: var(--white); }7576/* ================= Ticker ================= */77.ticker {78  background: var(--navy); color: rgba(255, 255, 255, 0.85); overflow: hidden;79  font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em;80  text-transform: uppercase; padding: 7px 0; white-space: nowrap;81}82.ticker-track { display: inline-flex; gap: 0; animation: ticker 40s linear infinite; will-change: transform; }83.ticker span { padding: 0 26px; position: relative; }84.ticker span::after { content: "◆"; position: absolute; right: -6px; color: var(--orange); opacity: 0.8; font-size: 8px; top: 3px; }85@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }86@media (prefers-reduced-motion: reduce) {87  .ticker-track { animation: none; }88  * { transition-duration: 0.01ms !important; }89}9091/* ================= Hero ================= */92.hero { position: relative; padding: 64px 0 26px; }93@media (max-width: 640px) { .hero { padding: 36px 0 14px; } }94/* halo d'accent + trame de points en fond — purement décoratif, sous le texte */95.hero::before {96  content: ""; position: absolute; z-index: -1; top: -60px; right: -120px;97  width: 560px; height: 460px; pointer-events: none;98  background: radial-gradient(closest-side, rgba(36, 86, 230, 0.13), transparent 72%);99}100.hero::after {101  content: ""; position: absolute; z-index: -1; inset: -20px -40px 0 0; pointer-events: none;102  background-image: radial-gradient(rgba(20, 24, 20, 0.16) 1px, transparent 1.5px);103  background-size: 24px 24px;104  -webkit-mask-image: linear-gradient(112deg, transparent 58%, rgba(0, 0, 0, 0.85));105  mask-image: linear-gradient(112deg, transparent 58%, rgba(0, 0, 0, 0.85));106}107.hero h1 {108  font-size: clamp(36px, 5.4vw, 56px); font-weight: 700; line-height: 1.06;109  letter-spacing: -0.03em; max-width: 900px; margin-top: 14px; color: var(--navy);110}111.hero h1 .outline { color: var(--navy); }112.hero p.lede { color: var(--ink-2); font-size: 17px; max-width: 640px; margin: 18px 0 0; }113114.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }115.stat-chip {116  background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-pill);117  padding: 8px 16px; font-size: 12.5px; font-weight: 500;118  color: var(--ink-2); display: flex; gap: 8px; align-items: center;119  box-shadow: var(--shadow-flat);120  transition: transform 0.13s ease, box-shadow 0.13s ease;121}122@media (hover: hover) {123  .stat-chip:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-off-mid); }124}125.stat-chip b { color: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums; }126.stat-chip .pulse {127  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);128  box-shadow: 0 0 0 4px var(--orange-soft); animation: pulse 2.4s ease infinite;129}130@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(36, 86, 230, 0.18); } }131132/* ================= Rangée d'avantages ================= */133.benefits {134  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));135  gap: 14px; margin-top: 30px;136}137.benefit {138  display: flex; align-items: center; gap: 12px;139  background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card);140  padding: 11px 14px; box-shadow: var(--shadow-flat);141  transition: transform 0.15s ease, box-shadow 0.15s ease;142}143@media (hover: hover) {144  .benefit:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off-mid); }145}146.benefit-ico {147  width: 42px; height: 42px; border-radius: var(--r-pill); flex: none;148  display: flex; align-items: center; justify-content: center;149  background: var(--orange-soft); color: var(--orange);150  border: 1px solid rgba(36, 86, 230, 0.25);151}152.benefit-ico.blue { background: var(--blue-soft); color: var(--blue); border-color: rgba(28, 92, 65, 0.25); }153.benefit-label {154  font-size: 11.5px; font-weight: 700; text-transform: uppercase;155  letter-spacing: 0.08em; color: var(--navy);156}157@media (max-width: 640px) {158  .benefits { grid-template-columns: 1fr 1fr; gap: 12px; }159}160161/* ================= Filter bar ================= */162.filterbar {163  background: var(--surface); border: 2px solid var(--ink); border-radius: 16px;164  box-shadow: var(--shadow-off-soft); padding: 14px; margin: 34px 0 6px;165  display: flex; flex-direction: column; gap: 0; min-width: 0;166}167168/* — rangée principale — */169.f-primary { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; min-width: 0; }170.f-search {171  flex: 1 1 240px; min-width: 0; max-width: 460px;172  display: flex; align-items: center; gap: 9px;173  border: 1.5px solid var(--ink); border-radius: var(--r-pill); background: var(--grey);174  padding: 0 16px; min-height: 52px; color: var(--ink-2);175  transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;176}177.f-search:focus-within {178  background: var(--white); border-color: var(--ink);179  box-shadow: 3px 3px 0 var(--accent); color: var(--accent-deep);180}181.f-search input {182  border: none; background: none; outline: none; flex: 1; min-width: 0;183  font-size: 14.5px; color: var(--ink); font-family: inherit;184}185.f-search input::placeholder { color: var(--ink-3); }186.f-clear {187  border: none; background: var(--line); color: var(--ink-2); border-radius: 50%;188  width: 22px; height: 22px; font-size: 10px; cursor: pointer; flex: none;189  display: grid; place-items: center; transition: background 0.12s ease, color 0.12s ease;190}191.f-clear:hover { background: var(--ink); color: var(--white); }192.f-ctl {193  flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center;194  gap: 2px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--surface);195  padding: 7px 14px 6px; min-height: 52px; cursor: pointer;196  transition: box-shadow 0.15s ease, background 0.15s ease;197}198@media (hover: hover) { .f-ctl:hover { background: var(--grey); } }199.f-ctl:focus-within { background: var(--white); box-shadow: 3px 3px 0 var(--accent); }200.f-ctl > span {201  font-size: 9.5px; font-weight: 700;202  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);203}204.f-ctl select {205  border: none; background: transparent; outline: none; font-family: var(--font-display);206  font-weight: 700; font-size: 14.5px; color: var(--navy); cursor: pointer;207  appearance: none; -webkit-appearance: none; padding-right: 16px; min-width: 0; max-width: 170px;208  text-overflow: ellipsis;209  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");210  background-repeat: no-repeat; background-position: right center;211}212.range-pair { display: flex; align-items: center; gap: 4px; }213.range-pair select { max-width: 86px; }214.range-sep { color: var(--ink-3); font-size: 11px; }215.f-more {216  flex: none; align-self: stretch; display: inline-flex; align-items: center; gap: 8px;217  border: 1.5px solid var(--ink); border-radius: var(--r-pill);218  background: var(--surface); color: var(--navy); padding: 0 20px; cursor: pointer;219  font-family: var(--font-display); font-weight: 700; font-size: 14px; min-height: 52px;220  transition: transform 0.13s ease, box-shadow 0.13s ease, background 0.13s ease, color 0.13s ease;221}222.f-more:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-off-mid); }223.f-more:active { transform: none; box-shadow: none; }224.f-more.on { background: var(--ink); border-color: var(--ink); color: var(--white); box-shadow: 3px 3px 0 var(--accent); }225.f-more.on:hover { transform: none; }226.f-more-badge {227  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;228  border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent);229  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;230}231.f-chev {232  width: 8px; height: 8px; flex: none;233  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;234  transform: rotate(45deg); margin-top: -4px; transition: transform 0.18s ease, margin 0.18s ease;235}236.f-chev.up { transform: rotate(-135deg); margin-top: 4px; }237238/* — panneau avancé — */239.f-adv {240  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 26px;241  border-top: 1.5px dashed var(--line); margin-top: 14px; padding-top: 16px; min-width: 0;242  animation: adv-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);243}244@keyframes adv-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }245.f-group { display: flex; flex-direction: column; gap: 7px; min-width: 0; }246.f-group > label {247  font-size: 10.5px; font-weight: 700;248  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);249}250.f-group-end { justify-content: flex-end; }251.f-group .btn:disabled { opacity: 0.4; cursor: default; }252.f-native {253  border: 1.5px solid var(--ink); background: var(--grey); border-radius: var(--r-ctl);254  padding: 10px 30px 10px 14px; font-size: 14px; color: var(--ink); outline: none;255  font-family: inherit; min-height: 42px; width: 100%; min-width: 0;256  appearance: none; -webkit-appearance: none;257  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");258  background-repeat: no-repeat; background-position: right 12px center;259}260.f-native:focus { border-color: var(--ink); box-shadow: 3px 3px 0 var(--accent); background: var(--white); }261262/* segments (pilules soudées) */263.seg { display: inline-flex; flex-wrap: wrap; row-gap: 6px; }264.seg button {265  border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink-2);266  padding: 8px 14px; font-family: var(--font-display); font-weight: 600; font-size: 13px;267  cursor: pointer; margin-left: -1.5px; white-space: nowrap; min-height: 40px;268  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;269}270.seg button:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); margin-left: 0; padding-left: 16px; }271.seg button:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; padding-right: 16px; }272.seg button:hover { background: var(--orange-soft); color: var(--orange-deep); }273.seg button.on {274  background: var(--ink); border-color: var(--ink); color: var(--white);275  position: relative; z-index: 1; box-shadow: inset 0 -2.5px 0 var(--accent);276}277278/* pastilles de filtres actifs — survol = intention de retrait (danger) */279.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }280.pills .pill {281  display: inline-flex; align-items: center; gap: 7px;282  border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink);283  border-radius: var(--r-pill); padding: 6px 14px; font-size: 12.5px; font-weight: 600;284  text-transform: none; letter-spacing: normal;285  cursor: pointer; transition: all 0.13s ease; box-shadow: 2px 2px 0 var(--orange-soft);286  animation: pill-in 0.18s ease;287}288@keyframes pill-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }289.pills .pill:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); box-shadow: none; }290.pills .pill:hover .pill-x { opacity: 1; }291.pill-x { font-size: 10px; opacity: 0.6; }292.pills .pill-clear { background: var(--surface); border-color: var(--danger); color: var(--danger); box-shadow: none; }293.pills .pill-clear:hover { background: var(--danger); color: #fff; }294.chip-sep { width: 1px; align-self: stretch; background: var(--line); margin: 4px 4px; flex: none; }295.link-btn {296  background: none; border: none; padding: 0; color: var(--blue); font: inherit;297  text-decoration: underline; cursor: pointer;298}299.field { display: flex; flex-direction: column; gap: 5px; }300.field label {301  font-size: 10.5px; font-weight: 700;302  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); padding-left: 2px;303}304.field input, .field select {305  border: 1.5px solid var(--ink); background: var(--grey); border-radius: var(--r-ctl);306  padding: 11px 14px; font-size: 15px; color: var(--ink); outline: none; font-family: inherit;307  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; min-height: 44px;308  appearance: none; -webkit-appearance: none;309}310.field select {311  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");312  background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px;313}314.field input:focus, .field select:focus {315  border-color: var(--blue); background: var(--white);316  box-shadow: 0 0 0 3px rgba(28, 92, 65, 0.15);317}318/* .btn / .btn-primary / .btn-ghost : fournis par tokens.css (ka-ui). */319320/* ================= Chips ================= */321.chips { display: flex; gap: 8px; margin: 18px 0 4px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }322.chips::-webkit-scrollbar { display: none; }323.chip {324  display: inline-flex; align-items: center; gap: 7px;325  border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink);326  border-radius: var(--r-pill); padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer;327  font-family: var(--font-display); white-space: nowrap; min-height: 42px;328  transition: transform 0.13s, box-shadow 0.13s, background 0.13s, color 0.13s;329}330.chip:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-off-mid); }331.chip:active { transform: none; box-shadow: none; }332.chip.on { background: var(--ink); border-color: var(--ink); color: var(--accent); box-shadow: 3px 3px 0 var(--accent); }333334/* ================= Results ================= */335.results-head { display: flex; align-items: baseline; gap: 14px; margin: 28px 0 18px; }336.results-head h2 { font-size: 22px; letter-spacing: -0.02em; color: var(--navy); }337.results-head span { color: var(--ink-3); font-size: 12.5px; font-weight: 500; }338.grid {339  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));340  gap: 22px; padding-bottom: 70px;341}342@media (max-width: 640px) { .grid { grid-template-columns: 1fr; gap: 16px; padding-bottom: 48px; } }343344.card {345  background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card);346  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-flat);347  transition: transform 0.16s ease, box-shadow 0.16s ease;348}349.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-off); }350.card:focus-visible { outline: 3px solid rgba(28, 92, 65, 0.4); outline-offset: 2px; }351.card-img { position: relative; aspect-ratio: 16/10.5; background: var(--grey); overflow: hidden; }352.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }353.card:hover .card-img img { transform: scale(1.05); }354.card-img .noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-3); font-size: 34px; }355.badge {356  position: absolute; top: 12px; left: 12px; border-radius: var(--r-pill); padding: 4px 12px;357  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;358  background: rgba(255, 255, 255, 0.94); color: var(--navy);359  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);360}361.badge.type { background: var(--orange); color: var(--white); }362.badge.right { left: auto; right: 12px; background: rgba(255, 255, 255, 0.92); }363.card-body { padding: 16px 18px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }364.card-price { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; color: var(--navy); }365.card-price small { font-weight: 500; color: var(--ink-3); font-size: 11.5px; }366.card-title { font-weight: 600; font-size: 14.5px; color: var(--ink); }367.card-meta { color: var(--ink-3); font-size: 12.5px; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }368.card-meta .sep { width: 4px; height: 4px; background: var(--orange); border-radius: 50%; }369.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; }370.source-tag {371  font-size: 10px; font-weight: 700; text-transform: uppercase;372  letter-spacing: 0.06em; color: var(--blue); background: var(--blue-soft);373  border-radius: var(--r-pill); padding: 3px 10px;374  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%;375}376.avail { font-size: 11.5px; color: var(--ink-2); font-weight: 500; text-align: right; }377378/* ================= Skeletons ================= */379@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }380.skel { border-radius: var(--r-card); border: 1.5px solid var(--ink); overflow: hidden; background: var(--surface); }381.skel .sk-img, .skel .sk-line {382  background: linear-gradient(90deg, #ececef 25%, #f7f7f9 50%, #ececef 75%);383  background-size: 800px 100%; animation: shimmer 1.4s infinite linear;384}385.skel .sk-img { aspect-ratio: 16/10.5; }386.skel .sk-line { height: 14px; border-radius: 4px; margin: 12px 16px; }387.skel .sk-line.short { width: 45%; }388389/* ================= Empty / error ================= */390.notice { text-align: center; padding: 72px 24px; color: var(--ink-2); }391.notice .big { font-size: 44px; margin-bottom: 10px; }392.notice h2 { color: var(--navy); }393394/* ================= Detail page ================= */395.detail { padding: 30px 0 90px; }396.crumbs {397  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;398  color: var(--ink-3); margin-bottom: 20px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;399}400.crumbs a { border-bottom: 1.5px solid transparent; }401.crumbs a:hover { color: var(--blue); border-color: var(--blue); }402.detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; }403@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }404/* les enfants de grille ont min-width:auto par défaut : un contenu large405   (grille du quartier) déborderait de l'écran mobile sans ceci */406.detail-grid > * { min-width: 0; }407408.gallery { display: flex; flex-direction: column; gap: 10px; }409.gallery-main {410  border-radius: var(--r-card); overflow: hidden; border: 1.5px solid var(--ink);411  aspect-ratio: 16/10; background: var(--grey); cursor: zoom-in; box-shadow: var(--shadow-off-soft);412}413.gallery-main img { width: 100%; height: 100%; object-fit: cover; }414.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }415.thumbs button {416  border: 2px solid var(--line); border-radius: 12px; overflow: hidden; padding: 0; cursor: pointer;417  aspect-ratio: 4/3; background: var(--grey); transition: border-color 0.12s ease, transform 0.12s ease;418}419.thumbs button:hover { transform: translateY(-2px); }420.thumbs button.on { border-color: var(--orange); }421.thumbs img { width: 100%; height: 100%; object-fit: cover; }422423.panel {424  background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card);425  box-shadow: var(--shadow-off-soft); padding: 26px; position: sticky; top: 120px;426}427@media (max-width: 900px) { .panel { position: static; } }428.panel .price { font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -0.03em; color: var(--navy); }429.panel .price small { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }430.panel h1 { font-size: 22px; margin: 8px 0 2px; }431.panel .loc { color: var(--ink-2); font-size: 14px; }432.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }433@media (max-width: 380px) { .kv { grid-template-columns: 1fr; } }434.kv .cell { background: var(--grey); border-radius: var(--r-ctl); padding: 10px 14px; }435.kv .cell .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 700; }436.kv .cell .v { font-weight: 700; font-size: 14.5px; margin-top: 2px; font-family: var(--font-display); color: var(--navy); }437/* .klabel : fourni par tokens.css (ka-ui). */438.panel .klabel, .f-bloc .klabel { display: block; margin-bottom: 8px; }439.amenity-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; }440.amenity {441  background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 600;442  border: 1px solid rgba(28, 92, 65, 0.25); border-radius: var(--r-pill); padding: 5px 13px;443}444.cta {445  display: block; text-align: center; background: var(--orange); color: var(--white);446  font-weight: 600; font-family: var(--font-display); border-radius: var(--r-pill);447  padding: 15px; min-height: 48px;448  box-shadow: 0 8px 22px rgba(36, 86, 230, 0.34); transition: all 0.14s ease;449}450.cta:hover { background: var(--orange-deep); }451.cta:active { transform: translateY(1px); }452.panel .fine { font-size: 11.5px; color: var(--ink-3); margin-top: 14px; text-align: center; }453454/* ================= Lightbox ================= */455.lightbox {456  position: fixed; inset: 0; background: rgba(20, 24, 20, 0.94); z-index: var(--z-modal, 900);457  display: flex; align-items: center; justify-content: center; cursor: zoom-out;458  padding: max(16px, env(safe-area-inset-top)) 16px;459}460.lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 12px; }461462/* Lightbox v2 : balayage entre photos (scroll-snap) + pincement pour zoomer */463.lightbox-v2 { padding: 0; cursor: default; display: block; }464.lightbox-track {465  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; height: 100%;466  -webkit-overflow-scrolling: touch; scrollbar-width: none;467  touch-action: pan-x pinch-zoom;468}469.lightbox-track::-webkit-scrollbar { display: none; }470.lightbox-cell {471  flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center;472  display: flex; align-items: center; justify-content: center;473  padding: max(52px, env(safe-area-inset-top)) 10px max(24px, env(safe-area-inset-bottom));474  overflow: hidden;475}476.lightbox-cell img {477  max-width: 100%; max-height: 100%; border-radius: 10px;478  user-select: none; -webkit-user-drag: none; will-change: transform;479}480.lightbox-close {481  position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 3;482  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.4);483  background: rgba(20, 24, 20, 0.6); color: #fff; font-size: 18px; cursor: pointer;484  display: flex; align-items: center; justify-content: center;485  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);486}487.lightbox-count {488  position: fixed; left: 50%; transform: translateX(-50%); right: auto;489  top: max(22px, env(safe-area-inset-top)); bottom: auto; z-index: 3;490}491.lightbox-v2 .carousel-nav { position: fixed; z-index: 3; }492493/* visuel de secours (SmartImg) directement sous .carousel (galerie vide) */494.carousel > img { display: block; width: 100%; aspect-ratio: 16/11; object-fit: cover; }495496/* ================= Sources page ================= */497.sources { padding: 44px 0 90px; }498.sources h1 { font-size: clamp(28px, 4vw, 40px); margin: 10px 0 6px; color: var(--navy); }499.sources .sub { color: var(--ink-2); margin-bottom: 30px; max-width: 700px; }500.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); }501.src-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; }502.src-table th {503  text-align: left; font-size: 10.5px; text-transform: uppercase;504  letter-spacing: 0.1em; color: var(--ink-3); padding: 14px 18px;505  border-bottom: 1px solid var(--line-strong); background: var(--grey);506}507.src-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }508.src-table tr:last-child td { border-bottom: none; }509.src-table tr:hover td { background: var(--navy-soft); }510.src-table a { color: var(--blue); font-weight: 600; border-bottom: 1.5px solid rgba(28, 92, 65, 0.35); }511.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; }512.pill.ok { background: var(--blue-soft); color: var(--blue); }513.pill.todo { background: var(--orange-soft); color: var(--orange-deep); }514.count-pill { font-weight: 700; font-family: var(--font-display); font-size: 16px; color: var(--navy); }515516/* ================= Page Statistiques ================= */517.stats-page { padding: 44px 0 90px; }518.stats-title { font-size: clamp(30px, 4.6vw, 46px); margin: 10px 0 6px; color: var(--navy); }519.stats-page .sub { color: var(--ink-2); max-width: 640px; margin-bottom: 30px; }520521.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 30px; }522.tile {523  background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card);524  padding: 18px 20px; box-shadow: var(--shadow-flat);525}526.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); }527.tile-k { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-top: 6px; }528.hero-tile { background: var(--navy); color: var(--white); border-color: var(--navy); }529.hero-tile .tile-v { color: var(--white); }530.hero-tile .tile-k { color: rgba(255, 255, 255, 0.6); }531532.viz-card {533  background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card);534  box-shadow: var(--shadow-off-soft); padding: 26px 28px 20px; margin-bottom: 22px;535}536.viz-card h2 { font-size: 19px; letter-spacing: -0.01em; color: var(--navy); }537.viz-sub { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 20px; }538.viz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }539@media (max-width: 900px) { .viz-grid { grid-template-columns: 1fr; } }540541/* Histogramme (mono-série, bleu vif) */542.histo { display: flex; align-items: stretch; gap: 2px; height: 240px; }543.histo-col { flex: 1; display: flex; flex-direction: column; min-width: 0; cursor: default; }544.histo-bar-zone { flex: 1; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line-strong); }545.histo-bar {546  width: 100%; background: var(--blue); border-radius: 6px 6px 0 0;547  min-height: 2px; transition: background 0.12s ease;548}549.histo-col:hover .histo-bar { background: var(--orange); }550.histo-x { font-size: 9.5px; color: var(--ink-3); text-align: left; height: 18px; padding-top: 5px; overflow: visible; white-space: nowrap; }551552/* Barres horizontales (mono-série) */553.hbars { display: flex; flex-direction: column; gap: 7px; }554.hbar-row {555  display: grid; grid-template-columns: minmax(96px, 170px) 1fr auto;556  gap: 12px; align-items: center; min-height: 26px; cursor: default;557}558.hbar-label { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }559.hbar-label a { border-bottom: 1.5px solid rgba(28, 92, 65, 0.35); }560.hbar-label a:hover { color: var(--blue); }561.hbar-track { background: var(--grey); border-radius: var(--r-pill); height: 18px; overflow: hidden; }562.hbar-fill {563  display: block; height: 100%; background: var(--blue); border-radius: var(--r-pill);564  min-width: 2px; transition: background 0.12s ease;565}566.hbar-row:hover .hbar-fill { background: var(--orange); }567.hbar-value { font-size: 11.5px; font-weight: 700; white-space: nowrap; color: var(--navy); }568.hbar-value em { font-style: normal; font-weight: 500; color: var(--ink-3); }569@media (max-width: 640px) {570  .hbar-row { grid-template-columns: minmax(80px, 110px) 1fr auto; gap: 8px; }571  .hbar-value em { display: none; }572  .viz-card { padding: 20px 16px 14px; }573  .histo { height: 170px; }574}575576/* Infobulle */577.viz-tip {578  position: fixed; z-index: var(--z-toast, 950); pointer-events: none; max-width: 180px;579  background: var(--navy); color: var(--white); border-radius: 12px;580  padding: 9px 12px; font-size: 12px; line-height: 1.5;581  box-shadow: 0 8px 24px rgba(20, 24, 20, 0.35);582}583.viz-tip-title { font-family: var(--font-display); font-weight: 700; color: var(--orange); margin-bottom: 2px; }584585/* Vue tableau repliable (accessibilité / relief) */586.viz-table { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }587.viz-table summary {588  cursor: pointer; font-size: 11.5px; font-weight: 700;589  text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue);590}591.viz-table table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }592.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); }593.viz-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); }594595.stats-foot { font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.02em; margin-top: 6px; }596597/* ================= Mobile : feuille de filtres + FAB ================= */598.sheet-head { display: none; }599.sheet-handle { display: none; }600.sheet-apply { display: none; }601.sheet-backdrop { display: none; }602.fab { display: none; }603.fab-badge {604  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;605  border-radius: var(--r-pill); background: var(--white); color: var(--accent-deep);606  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 2px;607}608609@media (max-width: 640px) {610  /* En-tête compact */611  .header-inner { height: 56px; }612  .brand { font-size: 21px; }613  .nav a { padding: 8px 13px; font-size: 13.5px; }614  .ticker { font-size: 10.5px; padding: 6px 0; }615616  /* Héro resserré + stats en rangée défilante */617  .hero::before { width: 320px; height: 260px; top: -30px; right: -90px; }618  .hero h1 { font-size: clamp(30px, 8.6vw, 42px); }619  .hero p.lede { font-size: 15px; }620  .stat-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin-right: -16px; padding-right: 16px; }621  .stat-row::-webkit-scrollbar { display: none; }622  .stat-chip { flex: 0 0 auto; white-space: nowrap; }623624  /* La barre de filtres devient une feuille coulissante (bottom sheet) */625  .filterbar { display: none; }626  .filterbar.open .f-primary { flex-direction: column; }627  .filterbar.open .f-search { align-self: stretch; max-width: none; min-height: 46px; }628  .filterbar.open .f-search input { font-size: 16px; }  /* anti-zoom iOS */629  .filterbar.open .f-ctl select { max-width: none; width: 100%; }630  .filterbar.open .f-more { display: none; }631  .filterbar.open .f-adv { margin-top: 4px; }632  .filterbar.open {633    display: flex; flex-direction: column; gap: 12px;634    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal, 900);635    margin: 0; border-radius: 24px 24px 0 0; border: none;636    max-height: 82dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;637    padding: 10px 18px calc(18px + env(safe-area-inset-bottom));638    box-shadow: 0 -16px 48px rgba(20, 24, 20, 0.28);639    animation: sheet-up 0.24s cubic-bezier(0.2, 0.9, 0.3, 1);640  }641  @keyframes sheet-up { from { transform: translateY(30%); opacity: 0.4; } to { transform: none; opacity: 1; } }642  .filterbar.open .sheet-handle {643    display: block; flex: none; width: 44px; height: 5px; border-radius: var(--r-pill);644    background: var(--line); margin: 0 auto 2px;645  }646  .filterbar.open .sheet-head {647    display: flex; justify-content: space-between; align-items: center;648    font-family: var(--font-display); font-weight: 700; font-size: 17px;649    letter-spacing: -0.01em; color: var(--navy);650    position: sticky; top: -10px; background: var(--surface); padding: 6px 0 8px;651    border-bottom: 1px solid var(--line); margin-bottom: 2px; z-index: 1;652  }653  .sheet-close {654    border: 1.5px solid var(--ink); background: var(--surface); border-radius: 50%;655    width: 36px; height: 36px; font-size: 15px; cursor: pointer; line-height: 1; color: var(--navy);656  }657  .filterbar.open .sheet-apply {658    display: block; width: 100%; min-height: 50px;659    position: sticky; bottom: 0; z-index: 1;660    box-shadow: 0 -14px 18px -12px rgba(20, 24, 20, 0.35), 5px 5px 0 var(--accent);661  }662  .sheet-backdrop {663    display: block; position: fixed; inset: 0; z-index: var(--z-overlay, 800);664    background: rgba(20, 24, 20, 0.45); backdrop-filter: blur(2px);665  }666667  /* Bouton flottant */668  .fab {669    display: flex; align-items: center; gap: 6px;670    position: fixed; left: 50%; transform: translateX(-50%);671    bottom: calc(74px + env(safe-area-inset-bottom) + var(--consent-h, 0px)); z-index: 80;672    background: var(--orange); color: var(--white); border: none;673    border-radius: var(--r-pill); padding: 13px 24px; font-family: var(--font-display);674    font-weight: 600; font-size: 15px; cursor: pointer;675    box-shadow: 0 10px 28px rgba(36, 86, 230, 0.4);676  }677  .fab:active { transform: translateX(-50%) scale(0.97); }678679  /* Fiche logement : vignettes en bande défilante + panneau non collant */680  .thumbs { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }681  .thumbs::-webkit-scrollbar { display: none; }682  .thumbs button { flex: 0 0 96px; }683  .detail { padding-top: 20px; }684  .panel { padding: 20px; }685  .panel .price { font-size: 28px; }686  .results-head { margin-top: 20px; }687  .chips { margin-right: -16px; padding-right: 16px; }688  .notice { padding: 48px 16px; }689}690691/* ================= Barre de navigation inférieure (mobile) ================= */692.tabbar { display: none; }693@media (max-width: 760px) {694  .tabbar {695    display: grid; grid-template-columns: repeat(4, 1fr);696    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottombar, 600);697    background: rgba(255, 255, 255, 0.92);698    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);699    border-top: 1px solid var(--line);700    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));701  }702  .tabbar a {703    display: flex; flex-direction: column; align-items: center; gap: 3px;704    padding: 5px 2px; min-height: 48px; justify-content: center;705    font-size: 10.5px; font-weight: 600; color: var(--ink-3);706    border-radius: var(--r-ctl); transition: color 0.12s ease;707  }708  .tabbar a.active { color: var(--orange); }709  .tabbar a svg { display: block; }710  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }711  .footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }712}713714/* Anti-zoom iOS : les champs doivent faire >= 16px715   (filet global : tokens.css force aussi 16 px au doigt) */716@media (max-width: 900px) {717  .field input, .field select,718  .f-search input, .f-native, .f-ctl select, .ms-sort select { font-size: 16px; }719}720721/* Cible tactile ≥44 px du logo (124×30 rendus) : zone étendue invisible */722@media (pointer: coarse) {723  .brand { position: relative; }724  .brand::after { content: ""; position: absolute; inset: -8px; }725}726727/* ================= Footer ================= */728.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; }729.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; }730.footer .fbrand .logo-ico { margin-right: 13px; }731.footer .fbrand .ka { color: var(--orange); }732.footer .fbaseline { color: rgba(255, 255, 255, 0.65); font-size: 14px; margin-bottom: 16px; }733.footer .fbaseline .hl { color: var(--orange); font-weight: 600; }734.footer b { color: var(--white); }735.footer .frow { display: flex; flex-direction: column; gap: 5px; max-width: 720px; }736.footer .fmono { font-size: 11.5px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.42); margin-top: 18px; }737738/* --- Carte interactive (mission 4) --------------------------------------- */739.results-tools { display: flex; align-items: center; gap: 14px; }740.view-toggle {741  display: inline-flex; border: 1.5px solid var(--ink);742  border-radius: var(--r-pill); overflow: hidden; background: var(--surface);743  box-shadow: var(--shadow-flat);744}745.view-toggle button {746  border: 0; background: transparent; padding: 8px 16px; cursor: pointer;747  font-size: 12.5px; font-weight: 700; color: var(--ink-2);748  font-family: var(--font-display); transition: background 0.12s ease, color 0.12s ease;749}750.view-toggle button:hover { background: var(--grey); color: var(--ink); }751/* zone tactile >= 44 px au doigt (coarse pointer = mobile/tablette) */752@media (pointer: coarse) {753  .view-toggle button { min-height: 44px; padding: 10px 18px; }754}755.view-toggle button + button { border-left: 1px solid var(--line); }756.view-toggle button.on { background: var(--ink); color: var(--white); box-shadow: inset 0 -2.5px 0 var(--accent); }757758.map-split {759  display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 18px;760  height: calc(100dvh - 170px); min-height: 420px;761}762.map-list {763  overflow-y: auto; display: flex; flex-direction: column; gap: 14px;764  padding-right: 4px; scrollbar-width: thin;765}766.map-list .card { margin: 0; flex: 0 0 auto; }767.mapview {768  width: 100%; height: 100%; border: 1.5px solid var(--ink);769  border-radius: var(--r-card); box-shadow: var(--shadow-off-soft);770  overflow: hidden; background: var(--grey);771}772.map-loading {773  display: flex; align-items: center; justify-content: center;774  color: var(--ink-3); font-size: 13px;775}776777/* mobile d'abord : carte plein écran, liste masquée (bascule via l'onglet) */778@media (max-width: 780px) {779  .map-split { grid-template-columns: 1fr; height: calc(100dvh - 210px); }780  .map-list { display: none; }781  .results-tools { width: 100%; justify-content: space-between; }782}783784/* MapLibre popup in the Rent-Ka style */785.maplibregl-popup-content {786  padding: 0; border-radius: var(--r-card); overflow: hidden;787  border: 1.5px solid var(--ink); box-shadow: var(--shadow-off);788  font-family: var(--font-body);789}790.maplibregl-popup-close-button {791  font-size: 18px; padding: 2px 8px; color: var(--white); z-index: 2;792  text-shadow: 0 0 4px rgba(20, 24, 20, 0.8);793}794.mv-pop img, .mv-noimg { width: 100%; height: 130px; object-fit: cover; }795.mv-noimg { display: flex; align-items: center; justify-content: center;796  font-size: 34px; background: var(--grey); }797.mv-pop-body { padding: 10px 12px 12px; }798.mv-pop-price { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy); }799.mv-pop-price small { font-weight: 400; color: var(--ink-3); font-size: 12px; }800.mv-pop-title { font-size: 13px; color: var(--ink-2); margin-top: 2px;801  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }802.mv-pop-meta { font-size: 11.5px; color: var(--ink-2); margin-top: 6px; }803.mv-pop-src { font-size: 10px; color: var(--ink-3);804  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }805.mv-pop-cta {806  display: block; margin-top: 10px; padding: 9px 10px; text-align: center;807  background: var(--orange); color: var(--white); border-radius: var(--r-pill);808  font-weight: 600; font-size: 13px;809}810.mv-pop-cta:hover { background: var(--orange-deep); }811812/* --- Commodités de proximité (fiche) -------------------------------------- */813.poi-list {814  list-style: none; margin: 0; padding: 0;815  display: flex; flex-direction: column; gap: 2px;816}817.poi-list li {818  display: flex; align-items: center; gap: 9px;819  padding: 5px 2px; border-bottom: 1px solid var(--line);820  font-size: 13px;821}822.poi-list li:last-child { border-bottom: 0; }823.poi-ico { width: 20px; text-align: center; flex: 0 0 auto; }824.poi-name { flex: 1; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }825.poi-dist { font-size: 11.5px; color: var(--navy); font-weight: 600; flex: 0 0 auto; }826827/* --- Menu déroulant mobile ------------------------------------------------- */828.menu-btn {829  display: none; position: relative; z-index: 60;830  width: 44px; height: 44px; margin-left: auto;831  border: 1.5px solid var(--ink); border-radius: var(--r-ctl);832  background: var(--surface); cursor: pointer; padding: 0;833  flex-direction: column; align-items: center; justify-content: center; gap: 5px;834  box-shadow: var(--shadow-flat);835  transition: box-shadow 0.15s ease, transform 0.15s ease;836}837.menu-btn:active { transform: scale(0.96); }838.menu-btn span {839  display: block; width: 18px; height: 2px; background: var(--navy);840  border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease;841}842.menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }843.menu-btn.open span:nth-child(2) { opacity: 0; }844.menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }845846/* KA Nav v2 (2026-08-25) : panneau PLEIN ECRAN fixed inset:0 - visible peu847   importe le scroll (l'ancien dropdown absolute 480px clippait/se coupait). */848.mobile-menu {849  display: none; position: fixed; inset: 0;850  background: var(--paper);851  padding: 76px 16px calc(24px + env(safe-area-inset-bottom));852  overflow-y: auto; overscroll-behavior: contain;853}854.mobile-menu.open { display: block; animation: mm-in 0.16s ease; }855@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }856/* burger masque a l'ouverture : la fermeture passe par le X fixe du panneau */857.header:has(.mobile-menu.open) .menu-btn { visibility: hidden; }858/* bouton de fermeture du panneau : fixe en haut a droite du viewport */859.mm-close {860  position: fixed; top: 10px; right: 14px; z-index: 2;861  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;862  border: 1.5px solid var(--ink); border-radius: 999px;863  background: var(--ink); color: var(--paper);864  font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0;865}866/* verrou du scroll d'arriere-plan quand le menu est ouvert (CSS pur) */867html:has(.mobile-menu.open) { overflow: hidden; }868/* Le drawer vit DANS le header : quand il est ouvert, le header monte au niveau869   modal pour peindre au-dessus du .mm-backdrop (frère du header, overlay 800). */870.header:has(.mobile-menu.open) { z-index: var(--z-modal, 900); }871.mm-link {872  display: flex; align-items: center; gap: 12px;873  padding: 15px 10px; min-height: 52px;874  font-family: var(--font-display); font-weight: 700; font-size: 19px;875  letter-spacing: -0.02em; border-bottom: 1px solid var(--line);876  color: var(--navy);877  opacity: 0; transform: translateY(-8px);878  transition: opacity 0.25s ease, transform 0.25s ease;879}880.mobile-menu.open .mm-link { opacity: 1; transform: translateY(0); }881.mm-link.active { color: var(--orange); }882.mm-link.active .mm-arrow { opacity: 1; color: var(--orange); }883.mm-ico { width: 26px; text-align: center; font-size: 17px; }884.mm-arrow { margin-left: auto; opacity: 0.25; color: var(--orange); transition: opacity 0.15s ease; }885.mm-link:active { background: var(--orange-soft); border-radius: var(--r-ctl); }886.mm-foot {887  padding: 12px 10px 4px;888  font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em;889}890.mm-backdrop {891  position: fixed; inset: 0; z-index: var(--z-overlay, 800);892  background: rgba(20, 24, 20, 0.35); backdrop-filter: blur(2px);893}894@media (max-width: 760px) {895  .menu-btn { display: flex; }896  .nav { display: none; }897}898899/* --- Bandeau de consentement (témoins) ------------------------------------- */900.cookie-banner {901  position: fixed; left: 12px; right: 12px;902  bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 80;903  animation: cookie-in 0.35s ease;904}905@keyframes cookie-in { from { transform: translateY(24px); opacity: 0; } }906.cookie-inner {907  max-width: 720px; margin: 0 auto; background: var(--surface);908  border: 1.5px solid var(--ink); border-radius: var(--r-card);909  box-shadow: var(--shadow-off); padding: 16px 18px;910}911.cookie-text { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }912.cookie-text b { color: var(--navy); }913.cookie-text a { text-decoration: underline; text-underline-offset: 2px; }914.cookie-options { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }915.cookie-opt {916  display: flex; align-items: flex-start; gap: 10px; font-size: 13px;917  color: var(--ink-2); cursor: pointer;918}919.cookie-opt input { margin-top: 2px; accent-color: var(--orange); width: 16px; height: 16px; }920.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; justify-content: flex-end; }921@media (max-width: 640px) {922  .cookie-actions { justify-content: stretch; }923  .cookie-actions .btn { flex: 1; text-align: center; justify-content: center; }924}925926/* --- Page confidentialité + lien pied de page ------------------------------- */927.legal { padding: 48px 0 70px; max-width: 760px; }928.legal h1 { font-size: clamp(30px, 5vw, 46px); margin: 12px 0 8px; letter-spacing: -0.03em; color: var(--navy); }929.legal section { margin-top: 26px; }930.legal h3 { font-size: 18px; margin-bottom: 8px; }931.legal p, .legal li { color: var(--ink-2); font-size: 14.5px; }932.legal ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }933.flink {934  border: 0; background: none; padding: 0; cursor: pointer;935  color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px;936}937938/* --- Section « Le quartier » (fiche) --------------------------------------- */939.quartier { margin-top: 34px; }940.quartier h2 { font-size: 24px; letter-spacing: -0.02em; color: var(--navy); }941.q-sub { color: var(--ink-3); font-size: 13px; margin: 4px 0 16px; }942.q-grid {943  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;944}945@media (max-width: 640px) { .q-grid { grid-template-columns: repeat(2, 1fr); } }946.q-cell {947  background: var(--surface); border: 1.5px solid var(--ink);948  border-radius: var(--r-card); padding: 12px 14px; box-shadow: var(--shadow-flat);949}950.q-val { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--navy); }951.q-label { font-size: 10.5px; font-weight: 600; color: var(--ink-3);952  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }953.q-prox { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }954.q-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; }955.q-bar-label { flex: 0 0 150px; color: var(--ink-2); }956@media (max-width: 640px) { .q-bar-label { flex-basis: 120px; font-size: 12px; } }957.q-bar-track {958  flex: 1; height: 10px; background: var(--grey);959  border-radius: var(--r-pill); overflow: hidden;960}961.q-bar-fill { display: block; height: 100%; background: var(--blue); border-radius: var(--r-pill); }962.q-bar-num { flex: 0 0 30px; text-align: right;963  font-size: 11.5px; font-weight: 700; color: var(--navy); }964.q-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }965.q-badge {966  display: inline-flex; align-items: center; gap: 6px;967  border: 1.5px solid var(--ink); border-radius: var(--r-pill);968  padding: 7px 14px; font-size: 12.5px; background: var(--surface);969}970.q-badge.cool { background: var(--blue-soft); border-color: rgba(28, 92, 65, 0.3); color: var(--blue); }971.q-badge.hot { background: var(--orange-soft); border-color: rgba(36, 86, 230, 0.35); color: var(--orange-deep); }972.quartier .fine { margin-top: 10px; }973974/* --- Fiche v2 (mobile-first) ------------------------------------------------ */975/* Ordre DOM = ordre visuel sur TOUS les breakpoints (standard Groupe Ka976   « Ordre des sections — pages détail »). Interdit : `order` / `column-reverse`977   / `display:contents` pour réordonner — les blocs sans `order` retombaient à978   order:0 et passaient devant la galerie sur mobile. Mobile : colonnes979   empilées ; desktop : grid 2 colonnes (logement | synthèse). */980.fiche { display: flex; flex-direction: column; gap: 22px; }981.f-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }982@media (min-width: 900px) {983  .fiche { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; }984  .f-col { gap: 26px; }985}986.f-bloc { min-width: 0; }987.f-bloc h2 { font-size: 21px; letter-spacing: -0.02em; margin-bottom: 10px; color: var(--navy); }988.f-bloc:empty { display: none; }989990/* galerie à balayage natif */991.carousel { position: relative; border-radius: var(--r-card); overflow: hidden;992  border: 1.5px solid var(--ink); background: var(--grey); box-shadow: var(--shadow-off-soft); }993.carousel-track {994  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;995  -webkit-overflow-scrolling: touch; scrollbar-width: none; aspect-ratio: 16/11;996}997.carousel-track::-webkit-scrollbar { display: none; }998.carousel-track img {999  flex: 0 0 100%; width: 100%; object-fit: cover; scroll-snap-align: center;1000  cursor: zoom-in;1001}1002.carousel-empty { display: flex; align-items: center; justify-content: center;1003  aspect-ratio: 16/11; font-size: 48px; }1004.carousel-count {1005  position: absolute; right: 12px; bottom: 12px; z-index: 2;1006  background: rgba(20, 24, 20, 0.78); color: var(--white);1007  font-size: 12px; font-weight: 600;1008  padding: 4px 11px; border-radius: var(--r-pill);1009  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);1010}1011.carousel-nav {1012  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;1013  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink);1014  background: rgba(255, 255, 255, 0.92); color: var(--navy); font-size: 22px; cursor: pointer;1015  display: flex; align-items: center; justify-content: center; line-height: 1;1016  box-shadow: var(--shadow-flat);1017}1018.carousel-nav.prev { left: 10px; } .carousel-nav.next { right: 10px; }1019@media (max-width: 640px) { .carousel-nav { display: none; } }  /* balayage natif */10201021/* bandeau prix + badge marché */1022.f-hero .price { font-size: clamp(34px, 8vw, 44px); }1023.deal-badge {1024  display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 4px;1025  border-radius: var(--r-pill); padding: 7px 14px; font-size: 13px; font-weight: 600;1026  border: 1.5px solid var(--ink);1027}1028.deal-good { background: var(--blue-soft); border-color: rgba(28, 92, 65, 0.3); color: var(--blue); }1029.deal-ok { background: var(--surface); color: var(--ink-2); }1030.deal-high { background: var(--orange-soft); border-color: rgba(36, 86, 230, 0.35); color: var(--orange-deep); }1031.f-hero h1 { font-size: clamp(20px, 4.5vw, 26px); margin-top: 8px; }10321033/* chips clés à défilement horizontal */1034.chips-scroll {1035  display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 6px;1036  scrollbar-width: none; -webkit-overflow-scrolling: touch;1037}1038.chips-scroll::-webkit-scrollbar { display: none; }1039.chip-key {1040  flex: 0 0 auto; background: var(--navy); color: var(--white);1041  border-radius: var(--r-pill); padding: 8px 15px;1042  font-size: 12px; font-weight: 600; white-space: nowrap; min-height: 34px;1043  display: inline-flex; align-items: center;1044}10451046/* ancres de navigation rapide */1047.ancres {1048  display: flex; gap: 4px; overflow-x: auto; padding: 6px 0 2px;1049  scrollbar-width: none; border-bottom: 1px solid var(--line); margin-bottom: 8px;1050}1051.ancres::-webkit-scrollbar { display: none; }1052.ancres a {1053  flex: 0 0 auto; padding: 9px 14px; font-size: 13.5px; font-weight: 600;1054  color: var(--ink-2); border-radius: var(--r-pill); min-height: 44px;1055  display: inline-flex; align-items: center;1056}1057.ancres a:hover { background: var(--orange-soft); color: var(--orange); }1058html { scroll-padding-top: 76px; }   /* header sticky au-dessus des ancres */10591060/* description restructurée */1061.enbref {1062  background: var(--blue-soft); border: 1px solid rgba(28, 92, 65, 0.25);1063  border-radius: var(--r-card); padding: 12px 16px; color: var(--navy);1064  font-size: 15px; margin: 0 0 14px;1065}1066.desc-section { margin-bottom: 12px; }1067.desc-section h4 { font-size: 15px; margin-bottom: 3px; }1068.desc-section p { color: var(--ink-2); font-size: 14.5px; margin: 0; white-space: pre-line; }1069.texte-original { margin-top: 12px; }1070.texte-original summary {1071  cursor: pointer; font-size: 12.5px;1072  color: var(--ink-3); min-height: 44px; display: flex; align-items: center;1073}1074.texte-original p { color: var(--ink-3); font-size: 13px; white-space: pre-line; }10751076/* inclusions : confirmées vs mentionnées */1077.amenity.confirmed { background: var(--blue-soft); border-color: rgba(28, 92, 65, 0.25); color: var(--blue); font-weight: 600; }1078.amenity.unconfirmed { background: transparent; border-style: dashed; border-color: var(--line-strong); color: var(--ink-3); }10791080/* détails pratiques : historique de prix */1081.prix-histo {1082  margin-top: 12px; padding: 10px 14px; border-radius: var(--r-card);1083  border: 1.5px solid var(--ink); font-size: 13.5px; background: var(--surface);1084}1085.prix-histo.down { background: var(--blue-soft); border-color: rgba(28, 92, 65, 0.3); color: var(--blue); }10861087/* quartier compacté sur mobile */1088@media (max-width: 640px) {1089  .q-cell { padding: 9px 11px; }1090  .q-val { font-size: 16px; }1091  .q-bar { gap: 8px; font-size: 12px; }1092  .q-bar-track { height: 8px; }1093}1094.q-badge-sub { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 400; margin-left: 4px; }10951096/* POI groupés repliables */1097.poi-groupe { border: 1.5px solid var(--ink); border-radius: var(--r-card);1098  margin-bottom: 8px; background: var(--surface); overflow: hidden; }1099.poi-groupe summary {1100  display: flex; justify-content: space-between; align-items: center; gap: 10px;1101  padding: 12px 14px; cursor: pointer; font-weight: 600; font-size: 14px;1102  min-height: 48px; list-style: none;1103}1104.poi-groupe summary::-webkit-details-marker { display: none; }1105.poi-groupe summary::after { content: "▾"; color: var(--ink-3); transition: transform 0.15s ease; }1106.poi-groupe[open] summary::after { transform: rotate(180deg); }1107.poi-resume { font-size: 11.5px; color: var(--ink-3); font-weight: 400; }1108.poi-groupe .poi-list { padding: 0 14px 10px; }11091110/* CTA sticky mobile */1111.cta-sticky {1112  position: fixed; left: 0; right: 0; z-index: var(--z-dropdown, 700);1113  bottom: var(--consent-h, 0px);1114  display: flex; align-items: center; gap: 12px;1115  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px);1116  border-top: 1px solid var(--line);1117  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));1118}1119.cta-sticky .cta { flex: 1; margin: 0; text-align: center; }1120.cta-sticky-prix { font-family: var(--font-display); font-weight: 700; font-size: 19px; white-space: nowrap; color: var(--navy); }1121.cta-sticky-prix small { font-weight: 500; font-size: 10px; color: var(--ink-3); }1122@media (min-width: 900px) { .cta-sticky { display: none; } }1123@media (max-width: 899px) {1124  .cta-desktop { display: none; }1125  .detail { padding-bottom: 84px; }   /* place pour le CTA sticky */1126}1127.f-foot { margin-top: 26px; }11281129/* --- Fiche court terme : hébergements similaires (pleine largeur) --- */1130.f-similaires { margin-top: 22px; }1131.f-similaires .grid { margin-top: 4px; }11321133/* --- Passerelle vers l'annonce originale ------------------------------------ */1134.passerelle {1135  min-height: calc(100dvh - 120px); display: flex; align-items: center;1136  justify-content: center; padding: 24px 16px;1137}1138.pass-card {1139  width: 100%; max-width: 520px; background: var(--surface);1140  border: 1.5px solid var(--ink); border-radius: var(--r-card);1141  box-shadow: var(--shadow-off); padding: 30px 28px; text-align: center;1142}1143.pass-brands {1144  display: flex; align-items: center; justify-content: center; gap: 14px;1145  margin-bottom: 22px; flex-wrap: wrap;1146}1147.pass-brand {1148  font-family: var(--font-display); font-weight: 700; font-size: 24px;1149  letter-spacing: -0.03em; display: inline-flex; align-items: center; color: var(--navy);1150}1151.pass-brand .ka { color: var(--orange); }1152.pass-trajet { display: inline-flex; align-items: center; gap: 5px; }1153.pass-dot {1154  width: 6px; height: 6px; border-radius: 50%; background: var(--orange);1155  opacity: 0.25; animation: pass-dot 1.2s ease infinite;1156}1157.pass-dot:nth-child(2) { animation-delay: 0.2s; }1158.pass-dot:nth-child(3) { animation-delay: 0.4s; }1159@keyframes pass-dot { 40% { opacity: 1; transform: translateX(2px); } }1160.pass-fleche { color: var(--orange); font-size: 18px; }1161.pass-gestionnaire {1162  font-family: var(--font-display); font-weight: 700; font-size: 19px;1163  display: inline-flex; align-items: center; gap: 8px;1164  background: var(--blue-soft); border: 1px solid rgba(28, 92, 65, 0.25);1165  border-radius: var(--r-pill); padding: 6px 16px; color: var(--blue);1166}1167.pass-card h1 { font-size: 20px; letter-spacing: -0.02em; }1168.pass-texte { color: var(--ink-2); font-size: 14.5px; margin: 10px 0 20px; }1169.pass-progress {1170  height: 10px; border-radius: var(--r-pill);1171  overflow: hidden; background: var(--grey); margin-bottom: 20px;1172}1173.pass-progress-fill {1174  display: block; height: 100%; width: 0; background: var(--orange);1175  border-radius: var(--r-pill);1176}1177.pass-progress-fill.go { animation: pass-fill 2.2s linear forwards; }1178@keyframes pass-fill { to { width: 100%; } }1179@media (prefers-reduced-motion: reduce) {1180  .pass-progress-fill.go { animation: none; width: 100%; }1181  .pass-dot { animation: none; opacity: 0.7; }1182}1183.pass-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }11841185/* --- boutons PDF -------------------------------------------------------- */1186.btn-pdf { display: block; text-align: center; margin-top: 10px; width: 100%; }11871188/* --- Onglets de la page Stats -------------------------------------------- */1189.onglets {1190  display: flex; gap: 8px; overflow-x: auto; margin: 26px 0 22px;1191  padding-bottom: 4px; scrollbar-width: none;1192  border-bottom: 1px solid var(--line);1193}1194.onglets::-webkit-scrollbar { display: none; }1195.onglet {1196  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;1197  border: 1.5px solid var(--ink);1198  border-radius: var(--r-pill);1199  background: var(--surface); color: var(--ink-2); cursor: pointer;1200  padding: 10px 18px; font-weight: 600; font-size: 13.5px; min-height: 44px;1201  margin-bottom: 8px;1202  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;1203}1204.onglet:hover { background: var(--blue-soft); color: var(--blue); border-color: var(--blue); }1205.onglet.on { background: var(--blue); border-color: var(--blue); color: var(--white); }12061207/* baisses de prix */1208.baisses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }1209.baisses li {1210  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;1211  padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px;1212}1213.baisses li a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }1214.baisse-ville { color: var(--ink-3); font-size: 11.5px; }1215.baisse-prix { margin-left: auto; }1216.baisse-prix s { color: var(--ink-3); }1217.baisse-pct {1218  font-style: normal; font-weight: 700;1219  background: var(--blue-soft);1220  color: var(--blue); border-radius: var(--r-pill); padding: 2px 9px;1221  font-size: 11px; margin-left: 8px;1222}1223.alertes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); }12241225/* ================= Pagination (12 annonces/page) ================= */1226.pager {1227  display: flex; align-items: center; justify-content: space-between;1228  gap: 16px; flex-wrap: wrap; margin: 26px 0 10px; padding-top: 18px;1229  border-top: 1px solid var(--line);1230}1231.pager-info {1232  font-size: 12.5px; color: var(--ink-2); letter-spacing: 0.02em;1233}1234.pager-info em { font-style: normal; color: var(--ink-3); }1235.pager-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }1236.pager-btn {1237  min-width: 38px; height: 38px; padding: 0 10px;1238  display: inline-flex; align-items: center; justify-content: center;1239  background: var(--surface); border: 1.5px solid var(--ink);1240  border-radius: var(--r-pill); cursor: pointer;1241  font-size: 13px; font-weight: 600;1242  color: var(--navy); transition: all 0.12s ease;1243}1244.pager-btn:hover:not(:disabled):not(.on) {1245  background: var(--blue-soft); border-color: var(--blue); color: var(--blue);1246}1247.pager-btn.on { background: var(--navy); border-color: var(--navy); color: var(--white); cursor: default; }1248.pager-btn:disabled { opacity: 0.35; cursor: not-allowed; }1249.pager-ellipsis { color: var(--ink-3); padding: 0 2px; }1250.map-list .pager { margin: 10px 0 4px; }1251@media (max-width: 640px) {1252  .pager { justify-content: center; }1253  .pager-info { width: 100%; text-align: center; order: 2; }1254}12551256/* ================= Icônes SVG inline — alignement ================= */1257.chip-ico { display: inline-flex; align-items: center; gap: 6px; }1258.chip-ico svg { flex: none; }1259.view-toggle button, .seg button { display: inline-flex; align-items: center; gap: 6px; }1260.fab { align-items: center; gap: 8px; }1261.fab svg { flex: none; }1262.mm-ico { display: inline-flex; align-items: center; }1263.notice .big { display: flex; justify-content: center; color: var(--ink-3); }1264.notice .big svg { display: block; }1265.card-img .noimg { color: var(--ink-3); }1266.badge.right { display: inline-flex; align-items: center; gap: 4px; }1267.btn-pdf { display: inline-flex; align-items: center; gap: 7px; }1268.f-search svg { flex: none; color: var(--ink-3); }1269.mv-noimg { display: flex; align-items: center; justify-content: center; color: var(--ink-3); }12701271/* footer — liens (Groupe KA, courriels, mentions légales) */1272.footer .frow a { color: var(--white); text-decoration: underline; text-decoration-color: rgba(36, 86, 230, 0.5); text-underline-offset: 3px; }1273.footer .frow a:hover { color: var(--orange); }1274.footer .fmono a:hover { color: var(--orange); }12751276/* ================= Compte (connexion Google) ================= */1277.login-btn {1278  display: inline-flex; align-items: center; gap: 8px;1279  padding: 8px 16px; margin-left: 10px; min-height: 38px;1280  background: var(--navy); border: none;1281  border-radius: var(--r-pill); font-weight: 600; font-size: 13.5px; color: var(--white);1282  transition: all 0.12s ease; white-space: nowrap;1283  box-shadow: 0 4px 14px rgba(20, 24, 20, 0.22);1284}1285.login-btn:hover { background: var(--blue); }1286.account { position: relative; margin-left: 10px; }1287.account-btn {1288  width: 38px; height: 38px; padding: 0; border: 2px solid var(--orange);1289  border-radius: var(--r-pill); overflow: hidden; cursor: pointer;1290  background: var(--orange-soft); display: flex; align-items: center; justify-content: center;1291}1292.account-btn img { width: 100%; height: 100%; object-fit: cover; }1293.account-initial { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--orange); }1294/* Click-catcher plein écran rendu via createPortal à la racine de <body>1295   (un fixed descendant du header blurré se re-parentait → 66 px de haut).1296   z-index SOUS le header (50) : le menu .account-menu reste ancré DANS le1297   header et doit peindre au-dessus du voile. */1298.account-backdrop { position: fixed; inset: 0; z-index: 40; }1299.account-menu {1300  position: absolute; right: 0; top: calc(100% + 10px); z-index: 91;1301  min-width: 220px; background: var(--surface); border: 1.5px solid var(--ink);1302  border-radius: var(--r-card); box-shadow: var(--shadow-off); overflow: hidden;1303}1304.account-id { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-bottom: 1px solid var(--line); }1305.account-id b { font-size: 14px; }1306.account-id span { font-size: 11.5px; color: var(--ink-3); word-break: break-all; }1307.account-menu button {1308  width: 100%; text-align: left; padding: 11px 14px; border: 0; cursor: pointer;1309  background: transparent; font-weight: 600; font-size: 13.5px; color: var(--danger);1310}1311.account-menu button:hover { background: var(--orange-soft); color: var(--navy); }1312@media (max-width: 640px) { .login-btn { padding: 8px 12px; font-size: 12.5px; } }13131314/* ================= Profil — carte de membre Groupe KA ================= */1315.profil { padding-top: 40px; padding-bottom: 60px; }1316.profil h1 { font-size: clamp(30px, 5vw, 44px); margin: 10px 0 26px; color: var(--navy); }1317.profil .lede { max-width: 520px; color: var(--ink-2); margin-bottom: 22px; }13181319.pc {1320  position: relative; max-width: 520px; overflow: hidden;1321  background: linear-gradient(135deg, #101a40 0%, var(--navy) 55%, #080e24 100%);1322  color: var(--white);1323  border-radius: 20px;1324  padding: 24px 26px 0; box-shadow: var(--shadow-off);1325}1326.pc-watermark {1327  position: absolute; right: -18px; top: -34px; pointer-events: none;1328  font-family: var(--font-display); font-weight: 700; font-size: 170px;1329  letter-spacing: -0.06em; color: rgba(36, 86, 230, 0.07);1330  transform: rotate(-8deg); line-height: 1;1331}1332.pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }1333.pc-brand { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; }1334.pc-ka { color: var(--orange); margin-left: 1px; display: inline-block; }1335.pc-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.5); }1336.pc-id-block { margin: 26px 0 22px; display: flex; flex-direction: column; gap: 4px; }1337.pc-id-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(36, 86, 230, 0.75); }1338.pc-id {1339  font-weight: 700; color: var(--orange);1340  font-size: clamp(22px, 6vw, 34px); letter-spacing: 0.14em;1341  text-shadow: 0 0 24px rgba(36, 86, 230, 0.35);1342}1343.pc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-bottom: 18px; }1344.pc-holder { display: flex; flex-direction: column; gap: 2px; min-width: 0; }1345.pc-holder-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }1346.pc-holder-since { font-size: 10.5px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.06em; }1347.pc-role-badge {1348  display: inline-block; width: fit-content; margin: 3px 0 2px;1349  background: var(--orange); color: var(--white);1350  font-size: 9px; font-weight: 700;1351  text-transform: uppercase; letter-spacing: 0.12em;1352  padding: 2px 8px 3px; border-radius: var(--r-pill);1353}1354.pc-avatar { width: 52px; height: 52px; border-radius: var(--r-pill); border: 2px solid var(--orange); flex: none; }1355.pc-strip { display: flex; gap: 5px; margin: 0 -26px; padding: 9px 18px; background: rgba(36, 86, 230, 0.1); border-top: 1px solid rgba(36, 86, 230, 0.25); overflow: hidden; }1356.pc-strip i { display: block; width: 3px; border-radius: 1px; background: var(--orange); opacity: 0.7; }1357.pc-strip i:nth-child(3n) { height: 14px; opacity: 0.35; }1358.pc-strip i:nth-child(3n+1) { height: 9px; }1359.pc-strip i:nth-child(3n+2) { height: 17px; opacity: 0.9; }1360.pc-copy { margin-top: 16px; }1361.pc-copy.ok { background: var(--blue); color: var(--white); }13621363.profil-grid {1364  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));1365  gap: 12px; margin-top: 30px; max-width: 760px;1366}1367.pg-item {1368  background: var(--surface); border: 1.5px solid var(--ink);1369  border-radius: var(--r-card); padding: 14px 16px;1370  display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-flat);1371}1372.pg-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }1373.pg-value { font-weight: 600; font-size: 14.5px; word-break: break-word; }1374.pg-value.mono { color: var(--blue); }13751376.profil-note { max-width: 640px; color: var(--ink-2); font-size: 13.5px; margin-top: 22px; }1377.profil-note a { text-decoration: underline; text-underline-offset: 3px; }1378.profil-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }1379.profil-actions .btn { display: inline-flex; align-items: center; gap: 7px; }13801381.account-kaid { font-size: 10.5px; color: var(--blue); letter-spacing: 0.08em; }1382.account-link {1383  display: block; width: 100%; text-align: left; padding: 11px 14px;1384  font-weight: 600; font-size: 13.5px; color: var(--navy);1385  border-bottom: 1px solid var(--line);1386}1387.account-link:hover { background: var(--orange-soft); }13881389/* profil public — section + lien partageable */1390.profil-public { margin-top: 30px; max-width: 640px; }1391.profil-public h3 { font-size: 18px; margin-bottom: 6px; }1392.profil-public p { color: var(--ink-2); font-size: 13.5px; margin: 0 0 12px; }1393.public-link {1394  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;1395  margin-top: 14px; padding: 12px 14px; background: var(--blue-soft);1396  border: 1px solid rgba(28, 92, 65, 0.25); border-radius: var(--r-card);1397}1398.public-link a { font-size: 13px; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }13991400/* ================= Bienvenue — choix du rôle ================= */1401.bienvenue { padding-top: 44px; padding-bottom: 70px; }1402.bienvenue h1 { font-size: clamp(30px, 5vw, 46px); margin: 10px 0 14px; color: var(--navy); }1403.bienvenue .lede { max-width: 480px; color: var(--ink-2); margin-bottom: 30px; }1404.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 780px; }1405.role-card {1406  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;1407  text-align: left; padding: 24px 24px 20px; cursor: pointer;1408  background: var(--surface); border: 1.5px solid var(--ink);1409  border-radius: var(--r-card); box-shadow: var(--shadow-flat);1410  font-family: var(--font-body); transition: all 0.15s ease;1411}1412.role-card:hover:not(:disabled) { transform: translateY(-4px); box-shadow: var(--shadow-off); border-color: rgba(36, 86, 230, 0.4); }1413.role-card:disabled { opacity: 0.6; cursor: wait; }1414.role-ico { display: flex; width: 54px; height: 54px; align-items: center; justify-content: center; background: var(--orange-soft); color: var(--orange); border-radius: 16px; }1415.role-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--navy); }1416.role-desc { color: var(--ink-2); font-size: 13.5px; }1417.role-perks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }1418.role-perks li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }1419.role-perks li::before {1420  content: "✓"; flex: none; width: 16px; height: 16px; border-radius: 50%;1421  background: var(--orange); color: var(--white); font-size: 10px; font-weight: 700;1422  display: inline-flex; align-items: center; justify-content: center;1423}1424.role-cta { margin-top: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--orange); }14251426/* ================= Favoris — cœur sur les cartes ================= */1427.fav-btn {1428  position: absolute; right: 10px; bottom: 10px; z-index: 2;1429  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;1430  background: rgba(255, 255, 255, 0.94); border: none;1431  border-radius: var(--r-pill); cursor: pointer; color: var(--navy);1432  box-shadow: var(--shadow-flat);1433  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;1434}1435.fav-btn:hover { transform: scale(1.12); }1436.fav-btn.on { background: var(--white); color: var(--orange); }1437.fav-btn.on svg { filter: drop-shadow(0 0 3px rgba(36, 86, 230, 0.35)); }14381439/* ================= Espace gestionnaire ================= */1440.claim-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; max-width: 640px; }1441.claim-row select {1442  flex: 1; min-width: 260px; padding: 11px 14px; font-size: 14px;1443  border: 1.5px solid var(--ink); border-radius: var(--r-ctl);1444  background: var(--surface); font-family: var(--font-body);1445}1446.claim-error { color: var(--danger); font-size: 13.5px; font-weight: 600; margin-top: 10px; }1447.org-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 22px; }1448.org-stat { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-2); }1449.org-form { max-width: 640px; display: flex; flex-direction: column; gap: 14px; }1450.org-form h3 { font-size: 18px; }1451.org-form label { display: flex; flex-direction: column; gap: 5px; flex: 1; }1452.org-form label span { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }1453.org-form input, .org-form textarea {1454  padding: 10px 14px; font-size: 14px; font-family: var(--font-body);1455  border: 1.5px solid var(--ink); border-radius: var(--r-ctl); background: var(--surface);1456}1457.org-form textarea { resize: vertical; }1458.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); }1459.org-form-row { display: flex; gap: 12px; flex-wrap: wrap; }1460.org-form .btn { align-self: flex-start; }14611462/* ================= Page publique /g/{source} ================= */1463.orgpub-head { display: flex; gap: 20px; align-items: flex-start; margin-top: 8px; }1464.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); }1465.orgpub-id h1 { font-size: clamp(26px, 4.4vw, 40px); margin: 6px 0 8px; color: var(--navy); }1466.orgpub-tagline { font-size: 16px; color: var(--ink-2); margin: 0 0 12px; max-width: 640px; }1467.orgpub-meta { display: flex; gap: 8px; flex-wrap: wrap; }1468.orgpub-meta a.stat-chip:hover { background: var(--blue-soft); }1469.orgpub-verified { background: var(--blue-soft); border-color: rgba(28, 92, 65, 0.3); color: var(--blue); font-weight: 600; }1470.orgpub-desc { max-width: 720px; color: var(--ink-2); margin: 18px 0 6px; white-space: pre-line; }1471.orgpub .results-head h2 { display: inline-flex; align-items: center; gap: 8px; }1472@media (max-width: 560px) { .orgpub-head { flex-direction: column; } }14731474/* ================= Éditeur de profil (photo, bio, réseaux) ================= */1475.profil-edit { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line-strong); }1476/* profil géré au hub Groupe KA — lecture seule */1477.hub-profile .hub-bio { color: var(--ink-2); font-size: 14px; margin: 0; max-width: 560px; }1478.hub-profile .pub-meta { display: flex; gap: 8px; flex-wrap: wrap; }1479.hub-profile .stat-chip { display: inline-flex; align-items: center; gap: 6px; }1480.hub-profile a.stat-chip:hover { background: var(--blue-soft); }1481.hub-profile .btn-primary { display: inline-flex; align-items: center; gap: 7px; }1482.pe-avatar-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }1483.pe-avatar {1484  width: 84px; height: 84px; border-radius: var(--r-pill); object-fit: cover;1485  border: 2.5px solid var(--orange); box-shadow: var(--shadow-flat);1486  display: flex; align-items: center; justify-content: center;1487}1488.pe-avatar-empty { background: var(--orange-soft); color: var(--orange); font-family: var(--font-display); font-weight: 700; font-size: 34px; }1489.pe-avatar-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }1490.pe-avatar-actions .btn { display: inline-flex; align-items: center; gap: 7px; }1491.pe-hint { font-size: 11px; color: var(--ink-3); }1492.pe-socials-title { font-size: 15px; margin-top: 6px; }1493.pe-socials { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }1494.pe-social { display: flex !important; flex-direction: row !important; align-items: center; gap: 0 !important; }1495.pe-social-ico {1496  display: flex; align-items: center; justify-content: center;1497  width: 40px; align-self: stretch; flex: none;1498  background: var(--navy); color: var(--white);1499  border-radius: var(--r-ctl) 0 0 var(--r-ctl);1500}1501.pe-social input { flex: 1; border-radius: 0 var(--r-ctl) var(--r-ctl) 0; border-left: 0; }15021503/* profil public — à propos + réseaux */1504.pub-about { max-width: 640px; margin-top: 22px; }1505.pub-bio { font-size: 15.5px; color: var(--ink); margin: 0 0 12px; white-space: pre-line; }1506.pub-meta { display: flex; gap: 8px; flex-wrap: wrap; }1507.pub-socials { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }1508.pub-social {1509  display: flex; align-items: center; justify-content: center;1510  width: 44px; height: 44px; background: var(--surface);1511  border: 1.5px solid var(--ink); border-radius: 14px; color: var(--navy);1512  transition: all 0.12s ease;1513}1514.pub-social:hover { background: var(--navy); border-color: var(--navy); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-off-soft); }15151516/* -----------------------------------------------------------------------------1517   Rent-Ka Maps (Ka Maps framework by Groupe Ka)1518   Jetons du design system appliqués au chrome de la carte + sync liste↔carte.1519----------------------------------------------------------------------------- */1520.mapview .ka-map {1521  --ka-accent: var(--accent);1522  --ka-on-accent: var(--on-accent);1523  --ka-surface: var(--surface);1524  --ka-ink: var(--navy);1525  --ka-line: var(--line-strong);1526  --ka-radius: var(--r-ctl);1527  --ka-shadow: 0 8px 24px rgba(20, 24, 20, 0.14);1528  --ka-font: var(--font-body);1529}1530.mapview { position: relative; overflow: hidden; }1531.mapview .ka-map { position: absolute; inset: 0; }15321533/* mini-carte 3D de la fiche (Emplacement) — bâtiment de l'annonce en orange */1534.lmap3d {1535  position: relative; height: 340px; border: 1.5px solid var(--ink);1536  border-radius: var(--r-card); box-shadow: var(--shadow-off-soft);1537  overflow: hidden; background: var(--grey);1538}1539.lmap3d .ka-map {1540  --ka-accent: var(--accent);1541  --ka-on-accent: var(--on-accent);1542  --ka-surface: var(--surface);1543  --ka-ink: var(--navy);1544  --ka-line: var(--line-strong);1545  --ka-radius: var(--r-ctl);1546  --ka-shadow: 0 8px 24px rgba(20, 24, 20, 0.14);1547  --ka-font: var(--font-body);1548  position: absolute; inset: 0;1549}1550.lmap3d-skel {1551  background: linear-gradient(90deg, #ececef 25%, #f7f7f9 50%, #ececef 75%);1552  background-size: 800px 100%; animation: shimmer 1.4s infinite linear;1553}1554.lmap3d-legende {1555  position: absolute; left: 10px; bottom: 10px; z-index: 5;1556  display: inline-flex; align-items: center; gap: 6px;1557  padding: 4px 10px; border: 1.5px solid var(--ink);1558  border-radius: var(--r-pill); background: var(--surface);1559  font-size: 10.5px; font-weight: 500; color: var(--ink-2);1560  pointer-events: none;1561}1562.lmap3d-legende i {1563  width: 10px; height: 10px; border-radius: 3px;1564  background: var(--orange); border: 1px solid rgba(20, 24, 20, 0.25);1565}1566@media (max-width: 780px) { .lmap3d { height: 280px; } }1567.ka-preview .mv-pop img, .ka-preview .mv-noimg { height: 120px; }1568.ka-preview-sheet .mv-pop { display: grid; grid-template-columns: 130px 1fr; }1569.ka-preview-sheet .mv-pop img, .ka-preview-sheet .mv-noimg { height: 100%; min-height: 120px; }15701571/* carte de liste synchronisée avec la carte (survol / sélection) */1572.map-card { border-radius: var(--r-card); }1573.map-card-sel { outline: 2px solid var(--blue); outline-offset: 2px; }15741575/* =============================================================================1576   HARMONISATION « ÉDITORIAL SHARP » (Groupe KA) — couche finale posée après1577   les styles historiques : géométrie 10/6 px, bordures encre 1,5 px, ombres1578   décalées dures, Rent-Ka cobalt accent. La carte Ka Maps (Mapbox) conserve1579   son propre thème marine/orange à l'intérieur du canevas.1580============================================================================= */15811582/* — contrôles : plus de pilules (les chips/badges gardent --r-pill) — */1583.nav a, .login-btn, .cta, .mv-pop-cta, .f-search, .f-more, .pager-btn,1584.onglet, .view-toggle, .fab, .f-ctl, .pass-gestionnaire, .hbar-track,1585.q-bar-track, .pass-progress { border-radius: var(--r-ctl); }1586.seg button:first-child { border-radius: var(--r-ctl) 0 0 var(--r-ctl); }1587.seg button:last-child { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }15881589/* — header : papier translucide + trait d'encre — */1590.header {1591  background: rgba(245, 243, 238, 0.92);1592  border-bottom: 1.5px solid var(--ink);1593}1594.nav a { font-family: var(--font-display); }1595.nav a:hover { color: var(--accent-deep); background: var(--accent-soft); }1596.nav a.active { background: var(--ink); color: var(--accent); }1597.brand .ka {1598  background: var(--accent); color: var(--on-accent);1599  border-radius: 6px; padding: 0 6px 2px; margin-left: 2px; transform: rotate(-2deg);1600}1601.header .gk-badge { margin-left: 4px; flex: none; }1602@media (max-width: 1080px) { .header .gk-badge { display: none; } }1603.mm-badge {1604  display: flex; align-items: center; min-height: var(--touch);1605  padding: 8px 10px 2px;1606}16071608/* — ticker : encre + mono — */1609.ticker { font-family: var(--font-mono); border-bottom: 1.5px solid var(--ink); }16101611/* — états sélectionnés : encre + accent (fini le bleu) — */1612.seg button.on, .onglet.on, .view-toggle button.on, .f-more.on {1613  background: var(--ink); border-color: var(--ink); color: var(--accent);1614}1615.pager-btn.on { background: var(--ink); border-color: var(--ink); color: var(--accent); }16161617/* — CTA / FAB : aplat accent, bordure encre, ombre décalée — */1618.cta, .mv-pop-cta, .fab {1619  background: var(--accent); color: var(--on-accent);1620  border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);1621  font-family: var(--font-display); font-weight: 700;1622}1623.cta:hover, .mv-pop-cta:hover, .fab:hover { background: var(--accent-deep); }1624.cta:active, .fab:active { box-shadow: none; }1625.fab { box-shadow: 4px 4px 0 var(--ink), 0 10px 28px rgba(20, 24, 20, 0.25); }1626.login-btn {1627  background: var(--ink); color: var(--accent);1628  border: 1.5px solid var(--ink); box-shadow: none;1629  font-family: var(--font-display); font-weight: 700;1630}1631.login-btn:hover { background: var(--accent-deep); color: var(--on-accent); }16321633/* — cartes : levée nette diagonale (signature du groupe) — */1634.card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off); }1635.role-card:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: var(--shadow-off); border-color: var(--ink); }1636.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; }1637.badge.type { background: var(--accent); color: var(--on-accent); }1638.source-tag { font-family: var(--font-mono); }16391640/* — barre d'onglets mobile : papier + encre, actif = accent orange — */1641@media (max-width: 760px) {1642  .tabbar { background: rgba(245, 243, 238, 0.95); border-top: 1.5px solid var(--ink); }1643  .tabbar a { font-family: var(--font-display); }1644  .tabbar a.active { color: var(--accent); }1645}1646.mobile-menu { background: var(--paper); border-bottom: 1.5px solid var(--ink); }16471648/* — carte de membre KA : encre plutôt que marine — */1649.pc { background: linear-gradient(135deg, #1d231d 0%, var(--ink) 55%, #0b0e0b 100%); }16501651/* — micro-étiquettes en mono (système) — */1652.f-ctl > span, .f-group > label, .field label, .tile-k, .pg-label,1653.pc-label, .pc-id-label, .crumbs, .viz-sub { font-family: var(--font-mono); }16541655/* — page Contact (design system) — */1656.contact-page { padding: 44px 0 90px; }1657.contact-page h1 { margin: 10px 0 8px; }1658.contact-page .lede { color: var(--ink-2); max-width: 640px; margin: 0 0 26px; }1659.contact-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 26px 0; }1660@media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }1661.contact-card { padding: 18px 20px; }1662.contact-card .klabel { display: block; margin-bottom: 6px; }1663.contact-card a.mail {1664  font-family: var(--font-mono); font-weight: 700; font-size: 13.5px;1665  color: var(--accent-deep); word-break: break-all;1666  text-decoration: underline; text-underline-offset: 3px;1667  display: inline-flex; align-items: center; min-height: 44px;1668}1669.contact-card p { margin: 6px 0 0; color: var(--ink-2); font-size: 13.5px; }1670.contact-note {1671  border-left: 3px solid var(--accent); background: var(--surface);1672  border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink);1673  border-bottom: 1.5px solid var(--ink); border-radius: 0 var(--r-card) var(--r-card) 0;1674  padding: 14px 18px; max-width: 720px; color: var(--ink-2); font-size: 14px;1675}1676.contact-note b { color: var(--ink); }1677.contact-sites { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }1678.contact-sites a {1679  display: inline-flex; align-items: center; min-height: 34px;1680  padding: 4px 12px; border: 1.5px solid var(--ink); border-radius: var(--r-pill);1681  background: var(--surface); font-family: var(--font-mono); font-size: 11px;1682  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;1683  transition: transform 0.12s, box-shadow 0.12s;1684}1685.contact-sites a:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-off-mid); }1686.contact-hub { margin-top: 26px; }16871688/* — rangée de navigation locale au-dessus du footer commun — */1689.prefooter { border-top: 1.5px solid var(--ink); background: var(--surface-2); padding: 18px 0; }1690.prefooter .container {1691  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;1692  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;1693  text-transform: uppercase; letter-spacing: 0.08em;1694}1695.prefooter a, .prefooter .flink {1696  color: var(--ink-2); text-decoration: none; text-transform: uppercase;1697  letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 700; font-size: 11.5px;1698  min-height: var(--touch); display: inline-flex; align-items: center;1699}1700.prefooter a:hover, .prefooter .flink:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 4px; }1701.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; }1702.ka-footer { margin-top: 0; }1703@media (max-width: 760px) { .ka-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } }17041705/* ============ Juste valeur (fair value) — pastilles & analyse de prix ====== */1706.fv-badge {1707  display: inline-flex; align-items: center; gap: 6px;1708  border-radius: var(--r-pill); padding: 6px 12px;1709  font-size: 12.5px; font-weight: 700; border: 1.5px solid var(--ink);1710  white-space: nowrap;1711}1712.fv-badge .fv-ico { font-size: 10px; line-height: 1; }1713.fv-badge .fv-pct { margin-left: 4px; }1714.fv-badge.fv-compact { padding: 2px 8px; font-size: 11px; gap: 4px; margin-left: 8px; vertical-align: 2px; }1715/* états (mêmes jetons que les badges marché existants — daltonien-compatible :1716   l'icône ▼ ≈ ▲ et le libellé portent l'information, pas la couleur seule) */1717.fv-badge.deal-good { background: var(--blue-soft); border-color: rgba(28, 92, 65, 0.35); color: var(--blue); }1718.fv-badge.deal-ok { background: var(--surface); color: var(--ink-2); }1719.fv-badge.deal-high { background: var(--orange-soft); border-color: rgba(36, 86, 230, 0.4); color: var(--orange-deep); }17201721.f-fairvalue .fv-head {1722  display: flex; align-items: flex-start; justify-content: space-between;1723  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;1724}1725.f-fairvalue .fv-value { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--navy); }1726.f-fairvalue .fv-value small { font-size: 12px; font-weight: 500; color: var(--ink-3); }1727.f-fairvalue .fv-range { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }1728.fv-histo { display: block; width: 100%; height: auto; margin: 10px 0 4px; }1729.fv-histo-lbl { font: 700 10px Inter, system-ui, sans-serif; fill: var(--ink); }1730.fv-histo-lbl-fv { fill: var(--accent-deep, #1738a8); }1731.fv-histo-axis { font: 500 9px Inter, system-ui, sans-serif; fill: var(--ink-3); }1732.fv-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); margin: 6px 0 4px; }1733.fv-demo { display: flex; flex-wrap: wrap; gap: 8px; }1734.chip.chip-deal.on { background: var(--blue); border-color: var(--blue); color: var(--white); }17351736/* =============================================================================1737   MapSearch — recherche synchronisée liste ↔ carte (search/MapSearch.tsx)1738   Une seule vérité partagée : compteur, tri, survols et sélections miroirs.1739============================================================================= */17401741.ms { position: relative; }1742.ms-list { position: relative; scroll-behavior: smooth; }17431744.ms-list-head {1745  display: flex; align-items: center; justify-content: space-between;1746  gap: 10px; flex-wrap: wrap; padding: 2px 2px 4px;1747}1748.ms-count { font-size: 13.5px; color: var(--ink-2); }1749.ms-count b { color: var(--ink); font-size: 15px; }1750.ms-nopos {1751  margin-left: 8px; font-size: 11px; color: var(--ink-3);1752  border: 1px dashed var(--line-strong); border-radius: var(--r-pill);1753  padding: 2px 8px; cursor: help;1754}1755.ms-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }1756.ms-sort select {1757  border: 1.5px solid var(--ink); border-radius: var(--r-ctl);1758  background: var(--surface); padding: 6px 8px; font-size: 12.5px;1759  font-weight: 600; color: var(--ink);1760}17611762.ms-pills { margin: 0 0 4px; }17631764.ms-refit {1765  align-self: flex-start; border: 1.5px solid var(--ink);1766  border-radius: var(--r-pill); background: var(--surface);1767  padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--ink-2);1768  cursor: pointer; box-shadow: var(--shadow-off-soft);1769}1770.ms-refit:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }17711772/* barre de progression fine — jamais d'écran qui clignote */1773.ms-progress {1774  position: sticky; top: 0; z-index: 4; height: 3px; border-radius: 2px;1775  background: linear-gradient(90deg, transparent, var(--accent), transparent);1776  background-size: 200% 100%; animation: ms-progress 1s linear infinite;1777}1778@keyframes ms-progress { from { background-position: 200% 0; } to { background-position: -200% 0; } }17791780.ms-empty {1781  border: 1.5px dashed var(--line-strong); border-radius: var(--r-card);1782  padding: 26px 18px; text-align: center; color: var(--ink-2);1783}1784.ms-empty .big { margin-bottom: 6px; color: var(--ink-3); }1785.ms-empty h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink); }1786.ms-empty p { margin: 0 0 14px; font-size: 13px; }1787.ms-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }17881789/* miroirs survol / sélection venus de la carte */1790.map-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }1791.map-card-hover {1792  outline: 2px solid var(--accent); outline-offset: 2px;1793  transform: translateY(-1px);1794}1795.map-card-pulse { animation: ms-pulse 0.9s ease 1; }1796@keyframes ms-pulse {1797  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }1798  70% { box-shadow: 0 0 0 12px transparent; }1799  100% { box-shadow: 0 0 0 0 transparent; }1800}18011802/* indicateur discret : l'annonce survolée sur la carte est hors écran */1803.ms-hover-hint {1804  position: sticky; z-index: 5; align-self: center;1805  background: var(--navy); color: var(--white);1806  border-radius: var(--r-pill); padding: 5px 12px;1807  font-size: 11.5px; font-weight: 600; pointer-events: none;1808  box-shadow: var(--shadow-off-soft);1809}1810.ms-hover-hint.haut { top: 8px; order: -1; }1811.ms-hover-hint.bas { bottom: 8px; }18121813/* ---------------- carrousel mobile synchronisé aux marqueurs ------------- */1814.ms-carousel {1815  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 12;1816  display: flex; gap: 10px; overflow-x: auto; padding: 4px 12px;1817  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;1818  scrollbar-width: none;1819}1820.ms-carousel::-webkit-scrollbar { display: none; }1821.ms-car-item {1822  flex: 0 0 78%; max-width: 340px; scroll-snap-align: center;1823  display: grid; grid-template-columns: 108px 1fr; gap: 0;1824  background: var(--surface); border: 1.5px solid var(--ink);1825  border-radius: var(--r-card); overflow: hidden;1826  box-shadow: var(--shadow-off-soft); text-decoration: none; color: inherit;1827}1828.ms-car-item.sel { outline: 2.5px solid var(--accent); outline-offset: 1px; }1829.ms-car-item img, .ms-car-item .smart-img, .ms-car-item .card-fallback {1830  width: 108px; height: 96px; object-fit: cover; display: block;1831}1832.ms-car-body { padding: 9px 12px; min-width: 0; }1833.ms-car-price { font-size: 14.5px; font-weight: 700; color: var(--ink); display: flex; gap: 6px; align-items: center; }1834.ms-car-title {1835  font-size: 12px; color: var(--ink-2); margin-top: 2px;1836  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;1837}1838.ms-car-meta { font-size: 11px; color: var(--ink-3); margin-top: 3px; }1839.ms-car-more {1840  flex: 0 0 auto; scroll-snap-align: center; align-self: stretch;1841  border: 1.5px solid var(--ink); border-radius: var(--r-card);1842  background: var(--navy); color: var(--white);1843  font-size: 12.5px; font-weight: 600; padding: 0 18px; cursor: pointer;1844}18451846/* mobile : carte plein cadre, liste masquée, carrousel par-dessus la carte */1847@media (max-width: 780px) {1848  .ms { height: calc(100dvh - 190px); }1849  .ms-list { display: none; }1850  .ms .mapview { height: 100%; }1851  .ka-search-area { top: 8px; }1852}1853@media (min-width: 781px) {1854  .ms-carousel { display: none; }1855}18561857/* mobile : réorganisation du chrome carte autour du carrousel */1858@media (max-width: 780px) {1859  .ms .ka-draw-btn { top: 56px; left: 10px; bottom: auto; }1860  .ms .ka-loading { bottom: 132px; }1861  .ms .ka-empty { transform: translate(-50%, -70%); }1862}1863/* l'auto-défilement vers la carte laisse l'entête de résultats visible */1864.ms { scroll-margin-top: 108px; }18651866/* mobile, vue carte : chrome sans chevauchement (case en haut, outils sous1867   elle, FAB Filtres au-dessus du carrousel) */1868@media (max-width: 780px) {1869  .ms .ka-draw-btn { top: 88px; left: 10px; bottom: auto; }1870  .ms .ka-locate { top: 88px; right: 10px; }1871  .fab-carte { bottom: 148px; }1872}18731874/* =============================================================================1875   KA Scores — pastilles, jauges circulaires, page méthodologie1876============================================================================= */1877.ka-badge {1878  display: inline-flex; align-items: center; gap: 4px;1879  border: 1.5px solid var(--ink); border-radius: var(--r-pill);1880  padding: 1px 8px 1px 3px; font-size: 11px; font-weight: 700;1881  color: var(--ink); background: var(--surface); line-height: 1.5;1882  vertical-align: middle;1883}1884.ka-badge-logo {1885  background: var(--ink); color: var(--white); border-radius: 999px;1886  font-size: 8.5px; font-weight: 800; padding: 1.5px 5px; letter-spacing: 0.4px;1887}1888.ka-badge.ka-haut  { border-color: var(--green, #256d43); }1889.ka-badge.ka-haut .ka-badge-logo { background: var(--green, #256d43); }1890.ka-badge.ka-bon   { border-color: var(--accent); }1891.ka-badge.ka-bon .ka-badge-logo { background: var(--accent); }1892.ka-badge.ka-moyen { opacity: 0.9; }1893.ka-badge.ka-bas   { opacity: 0.75; }18941895.ka-circles, .ka-demo-circles {1896  display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0 6px;1897}1898.ka-circle { text-align: center; width: 92px; }1899.ka-circle-fond {1900  fill: none; stroke: var(--line); stroke-width: 6;1901}1902.ka-circle-arc {1903  fill: none; stroke: var(--ink-3); stroke-width: 6; stroke-linecap: round;1904  transition: stroke-dasharray 0.6s ease;1905}1906.ka-circle.ka-haut .ka-circle-arc  { stroke: var(--green, #256d43); }1907.ka-circle.ka-bon .ka-circle-arc   { stroke: var(--accent); }1908.ka-circle.ka-moyen .ka-circle-arc { stroke: var(--orange, #d97a2b); }1909.ka-circle.ka-bas .ka-circle-arc   { stroke: #b3543f; }1910.ka-circle-val { font: 700 17px var(--font-body); fill: var(--ink); }1911.ka-circle-nom { font-size: 12px; font-weight: 700; color: var(--ink); margin-top: 4px; }1912.ka-circle-label { font-size: 10.5px; color: var(--ink-3); }19131914.f-kascores h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }1915.ka-perso {1916  font-size: 12px; font-weight: 600; color: var(--ink-2);1917  border: 1.5px dashed var(--line-strong); border-radius: var(--r-pill);1918  padding: 2px 10px;1919}1920.ka-detail summary {1921  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2);1922  padding: 6px 0;1923}1924.ka-detail-grille {1925  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));1926  gap: 14px; padding: 8px 0 4px;1927}1928.ka-detail-grille h4 { margin: 0 0 4px; font-size: 12px; color: var(--ink); }1929.ka-detail-grille ul { margin: 0 0 10px; padding-left: 16px; font-size: 12.5px; color: var(--ink-2); }1930.ka-detail-grille li { margin: 2px 0; }19311932.ka-poids { display: grid; gap: 10px; margin: 14px 0; max-width: 460px; }1933.ka-poids-row {1934  display: grid; grid-template-columns: 90px 1fr 48px; align-items: center;1935  gap: 12px; font-size: 13px; font-weight: 600; color: var(--ink);1936}1937.ka-poids-row input[type="range"] { accent-color: var(--accent); }1938.ka-poids-row b { text-align: right; font-variant-numeric: tabular-nums; }19391940.ms-car-price .ka-badge { margin-left: 2px; }1941@media (max-width: 780px) {1942  .ms .ka-3d { top: 148px; right: 10px; }1943}194419451946/* ---- Registre des loyers (fiche) — bloc citoyen registre-des-loyers.ca ---- */1947.f-rdl .rdl-resume { margin: 2px 0 6px; }1948.f-rdl .rdl-ecart { margin: 0 0 8px; }1949.rdl-rooms { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 10px; }1950.rdl-room { font-size: 13px; color: var(--ink-2); white-space: nowrap; }1951.rdl-room i { font-style: normal; color: var(--ink-3); }1952.rdl-table { width: 100%; border-collapse: collapse; font-size: 13px; }1953.rdl-table td { padding: 5px 8px 5px 0; border-top: 1px solid var(--line, #e6e4df);1954                vertical-align: top; }1955.rdl-table .rdl-addr { max-width: 46%; }1956.rdl-table .rdl-prix { font-weight: 600; white-space: nowrap; }1957.rdl-table .rdl-date { white-space: nowrap; color: var(--ink-2); }1958.rdl-table .rdl-dist { color: var(--ink-3); white-space: nowrap; text-align: right; }1959.rdl-room-on { background: var(--sand, #f4efe7); border-radius: 6px; padding: 2px 8px; }196019611962/* ---- Risque d'inondation (fiche) — BDZI gouv. du Québec ---- */1963.f-zi .zi-head { display: flex; align-items: center; gap: 10px; }1964.zi-badge { display: inline-block; padding: 3px 10px; border-radius: 999px;1965            font-size: 12.5px; font-weight: 700; }1966.zi-eleve { background: #fde8e8; color: #a12622; }1967.zi-modere { background: #fdf3e0; color: #8a5a00; }1968.zi-present { background: #fdf3e0; color: #8a5a00; }1969.zi-ok { background: #e7f4ea; color: #1e6b34; }1970.zi-nc { background: var(--sand, #f0ede8); color: var(--ink-3); }1971.zi-liste { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; }1972.zi-liste li { padding: 4px 0; border-top: 1px solid var(--line, #e6e4df); }197319741975/* ---- Historique TAL (fiche) — décisions SOQUIJ à l'adresse ---- */1976.f-tal .tal-pending, .f-tal .tal-ok, .f-tal .tal-resume { margin: 2px 0 8px; }1977.tal-liste { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; }1978.tal-liste li { padding: 8px 0; border-top: 1px solid var(--line, #e6e4df); }1979.tal-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }1980.tal-date { font-weight: 600; color: var(--ink-2); }1981.tal-part { font-size: 12px; padding: 1px 8px; border-radius: 999px;1982            background: var(--sand, #f0ede8); color: var(--ink-2); }1983.tal-part-locateur { background: #fdf3e0; color: #8a5a00; }1984.tal-verdict { font-size: 12px; color: var(--ink-3); }1985.tal-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 3px; }1986.tal-tag { font-size: 12px; padding: 1px 8px; border-radius: 999px;1987           background: #fde8e8; color: #a12622; }1988.tal-ref { font-size: 12.5px; color: var(--ink-3); }198919901991/* ---- Registre des loyers v2 : tuiles, bande de position, barres ---- */1992.rdl-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 12px; }1993.rdl-kpi { flex: 1 1 90px; min-width: 90px; background: var(--surface-2, #f7f5f1);1994           border-radius: 10px; padding: 10px 12px; }1995.rdl-kpi-v { display: block; font-size: 20px; font-weight: 700;1996             letter-spacing: -0.02em; color: var(--navy); }1997.rdl-kpi-l { display: block; font-size: 11px; line-height: 1.35;1998             color: var(--ink-3); margin-top: 2px; }1999.rdl-strip { width: 100%; height: auto; display: block; margin: 2px 0 4px; }2000.rdl-strip-track { fill: var(--surface-2, #f0ede8); }2001.rdl-strip-box { fill: var(--accent-soft, #e9efff);2002                 stroke: var(--accent, #2456e6); stroke-width: 1; }2003.rdl-strip-med { stroke: var(--ink-2, #4c4a45); stroke-width: 2; }2004.rdl-strip-me { stroke: var(--accent-deep, #1738a8); stroke-width: 2; }2005.rdl-strip-me-dot { fill: var(--accent-deep, #1738a8);2006                    stroke: var(--surface, #fff); stroke-width: 2; }2007.rdl-strip-lbl, .rdl-strip-axis { font-size: 10.5px; fill: var(--ink-3); }2008.rdl-strip-me-lbl { font-size: 11px; font-weight: 700;2009                    fill: var(--accent-deep, #1738a8); }2010.rdl-bars { width: 100%; height: auto; display: block; margin: 6px 0 2px; }2011.rdl-bar { fill: var(--accent, #2456e6); opacity: 0.55; }2012.rdl-bar-on { fill: var(--accent-deep, #1738a8); opacity: 1; }2013.rdl-bar-val { font-size: 10.5px; fill: var(--ink-2, #4c4a45); }2014.rdl-bar-cat { font-size: 11px; fill: var(--ink-2, #4c4a45); }2015.rdl-bar-cat-on { font-weight: 700; fill: var(--ink, #1c1b18); }2016.rdl-bar-n { font-size: 9.5px; fill: var(--ink-3, #8a877f); }2017.rdl-bars-axe { stroke: var(--line, #e6e4df); stroke-width: 1; }2018.rdl-ecart { margin: 4px 0 8px; }2019.rdl-cap { caption-side: top; text-align: left; font-size: 13px; font-weight: 700; color: var(--navy); padding: 6px 0; }202020212022/* ---- Criminalité détaillée SPVM (bloc quartier) ---- */2023.q-crime { width: 100%; }2024.q-crime-cats { list-style: none; margin: 8px 0 0; padding: 0; }2025.q-crime-cats li { display: flex; align-items: center; gap: 8px;2026                   padding: 3px 0; font-size: 12.5px; }2027.q-crime-nom { flex: 0 0 46%; color: var(--ink-2); overflow: hidden;2028               text-overflow: ellipsis; white-space: nowrap; }2029.q-crime-barre { flex: 1 1 auto; height: 10px; background: var(--surface-2, #f0ede8);2030                 border-radius: 5px; overflow: hidden; }2031.q-crime-barre i { display: block; height: 100%; border-radius: 5px;2032                   background: var(--accent, #2456e6); opacity: 0.6; }2033.q-crime-n { flex: 0 0 52px; text-align: right; font-weight: 600;2034             color: var(--ink); white-space: nowrap; }2035.q-crime-n small { font-weight: 400; color: var(--ink-3); }2036.q-crime-src { margin-top: 8px; }203720382039/* ---- Qualité de l'air (RSQAQ) + Essence à proximité ---- */2040.air-liste { list-style: none; margin: 10px 0 0; padding: 0; }2041.air-liste li { display: flex; align-items: center; gap: 8px;2042                padding: 4px 0; font-size: 12.5px; }2043.air-nom { flex: 0 0 44%; color: var(--ink-2); overflow: hidden;2044           text-overflow: ellipsis; white-space: nowrap; }2045.air-barre { flex: 1 1 auto; height: 10px; background: var(--surface-2, #f0ede8);2046             border-radius: 5px; overflow: hidden; }2047.air-barre i { display: block; height: 100%; border-radius: 5px;2048               background: #4d9e64; }2049.air-barre i.air-sur { background: #c96a1f; }2050.air-val { flex: 0 0 34%; text-align: right; font-weight: 600;2051           color: var(--ink); white-space: nowrap; overflow: hidden;2052           text-overflow: ellipsis; }2053.air-val small { font-weight: 400; color: var(--ink-3); }2054.air-val .air-ref { display: block; font-size: 10px; }2055.gaz-head th { text-align: left; font-size: 11px; color: var(--ink-3);2056               font-weight: 600; padding: 2px 8px 2px 0; }2057.gaz-best { display: inline-block; margin-left: 6px; padding: 1px 7px;2058            border-radius: 999px; background: #e7f4ea; color: #1e6b34;2059            font-size: 10.5px; font-weight: 700; }2060.gaz-adr { display: block; font-size: 11px; color: var(--ink-3); }206120622063/* ---- Commerces et transport (fiche) ---- */2064.cm-grille { list-style: none; margin: 6px 0 0; padding: 0;2065             display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }2066@media (max-width: 560px) { .cm-grille { grid-template-columns: 1fr; } }2067.cm-item { display: flex; align-items: center; gap: 9px; padding: 5px 0;2068           border-bottom: 1px solid var(--line, #eeece7); min-width: 0; }2069.cm-ico { flex: 0 0 28px; }2070.cm-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }2071.cm-nom { font-size: 13px; font-weight: 600; color: var(--ink, #222);2072          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }2073.cm-poi { font-size: 11px; color: var(--ink-3, #8a877f);2074          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }2075.cm-dist { flex: 0 0 auto; font-size: 13px; font-weight: 700;2076           color: var(--ink-2, #4c4a45); white-space: nowrap; }207720782079/* ---- Coût d'électricité (Hydro-Québec) ---- */2080.hydro-intro { margin: 2px 0 12px; color: var(--ink-2, #4c4a45); }2081.hydro-btn { appearance: none; border: 0; border-radius: 10px; cursor: pointer;2082             background: var(--accent, #2b7a3b); color: #fff; font-weight: 700;2083             font-size: 14px; padding: 11px 18px; }2084.hydro-btn:disabled { opacity: 0.6; cursor: progress; }2085.hydro-montant { font-size: 26px; font-weight: 800; letter-spacing: -0.02em;2086                 color: var(--navy, #1c1b18); display: flex; align-items: baseline;2087                 gap: 10px; flex-wrap: wrap; }2088.hydro-montant small { font-size: 14px; font-weight: 500; color: var(--ink-3); }2089.hydro-an { font-size: 14px; font-weight: 600; color: var(--ink-2, #4c4a45); }2090.hydro-vide { color: var(--ink-3, #8a877f); }209120922093/* ============================================================================2094   PASSE DE DESIGN v3 — « éditorial sharp » appliqué à toute la fiche2095   Blocs = cartes encre (bordure 1,5 px + ombre décalée douce), titres à2096   marqueur accent + filet, tuiles KPI blanches à ombre dure, tableaux zébrés,2097   barres en dégradé, pastilles unifiées (mono, point d'état, liseré).2098   Aucune propriété `order` (règle Groupe Ka : ordre DOM = ordre visuel).2099   ========================================================================== */21002101/* --- Blocs de la fiche : cartes posées sur le papier --- */2102.f-bloc:not(.f-galerie):not(.f-hero) {2103  background: var(--surface);2104  border: 1.5px solid var(--ink);2105  border-radius: var(--r-card);2106  padding: 18px 20px 16px;2107  box-shadow: var(--shadow-off-soft);2108}2109@media (max-width: 640px) {2110  .f-bloc:not(.f-galerie):not(.f-hero) { padding: 15px 15px 13px; }2111}21122113/* --- Titres de section : carré accent + filet éditorial --- */2114.f-bloc h2, .quartier h2 {2115  display: flex; align-items: center; gap: 10px;2116  font-size: 19px; letter-spacing: -0.015em; margin-bottom: 14px;2117}2118.f-bloc h2::before, .quartier h2::before {2119  content: ""; flex: 0 0 9px; width: 9px; height: 9px;2120  background: var(--accent); border: 1.5px solid var(--ink);2121  box-shadow: 2px 2px 0 var(--ink);2122}2123.f-bloc h2::after, .quartier h2::after {2124  content: ""; flex: 1 1 auto; height: 1.5px; min-width: 20px;2125  background: var(--line);2126}21272128/* --- Tuiles KPI : blanches, bord encre, ombre dure accent --- */2129.rdl-kpi, .kv .cell {2130  background: var(--surface);2131  border: 1.5px solid var(--ink);2132  border-radius: var(--r-ctl);2133  box-shadow: 3px 3px 0 var(--accent-soft, #e9efff);2134}2135.rdl-kpi-v { font-family: var(--font-display); }2136.q-cell { box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.1); border-radius: var(--r-ctl); }2137.q-val { font-size: 20px; }21382139/* --- Tableaux : en-têtes mono, zébrure, survol accent --- */2140.rdl-table td { padding: 7px 8px 7px 0; }2141.rdl-table tbody tr:nth-child(even) td,2142.rdl-table > tr:nth-child(even) td { background: var(--surface-2, #faf9f5); }2143.rdl-table tr:hover td { background: var(--accent-soft, #e9efff); }2144.gaz-head th {2145  font-family: var(--font-mono); font-size: 10px; font-weight: 700;2146  text-transform: uppercase; letter-spacing: 0.08em;2147  border-bottom: 1.5px solid var(--ink);2148}2149.rdl-cap { font-family: var(--font-display); }21502151/* --- Barres : pistes bordées + remplissage en dégradé --- */2152.q-bar-track, .q-crime-barre, .air-barre {2153  background: var(--surface-2, #faf9f5);2154  border: 1px solid var(--line);2155  height: 12px;2156}2157.q-bar-fill {2158  background: linear-gradient(90deg, var(--accent, #2456e6), var(--accent-deep, #1738a8));2159}2160.q-crime-barre i {2161  background: linear-gradient(90deg, #6e92ff, var(--accent, #2456e6));2162  opacity: 0.9;2163}2164.air-barre i { background: linear-gradient(90deg, #6fbc85, #2e7d4a); }2165.air-barre i.air-sur { background: linear-gradient(90deg, #e08a48, #c96a1f); }21662167/* --- Pastilles d'état unifiées (zi-badge & cie) : mono + point d'état --- */2168.zi-badge {2169  display: inline-flex; align-items: center; gap: 6px;2170  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;2171  text-transform: uppercase; letter-spacing: 0.06em;2172  padding: 4px 10px; border: 1.5px solid currentColor;2173}2174.zi-badge::before {2175  content: ""; width: 6px; height: 6px; border-radius: 50%;2176  background: currentColor;2177}2178.gaz-best { border: 1px solid currentColor; }21792180/* --- Historique TAL : chaque décision devient une mini-carte --- */2181.tal-liste { display: flex; flex-direction: column; gap: 8px; }2182.tal-liste li {2183  border: 1px solid var(--line); border-left: 3px solid var(--accent, #2456e6);2184  border-top: 1px solid var(--line);2185  border-radius: var(--r-ctl); padding: 9px 12px;2186  background: var(--surface-2, #faf9f5);2187}2188.tal-part, .tal-tag {2189  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;2190  text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px;2191}2192.tal-ref { font-family: var(--font-mono); font-size: 11px; }21932194/* --- Notes de bas de bloc : filet pointillé --- */2195.f-bloc .fine, .quartier .fine {2196  margin-top: 12px; padding-top: 9px;2197  border-top: 1px dashed var(--line);2198}21992200/* --- Listes à liseré (inondation) alignées sur le reste --- */2201.zi-liste li { padding: 6px 0; }22022203/* ============================================================================2204   Dossier d'intelligence locative — Listing history, Building,2205   Gestionnaire, Vie quotidienne en hiver2206   ========================================================================== */22072208/* --- Pastilles de statut de donnée (observed / estimated / …) --- */2209.st-pill {2210  display: inline-block;2211  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;2212  text-transform: uppercase; letter-spacing: 0.06em;2213  padding: 2px 7px; border: 1.5px solid currentColor; border-radius: 3px;2214  white-space: nowrap; vertical-align: 1px;2215}2216.cr-poste .st-pill { margin-left: 8px; }2217.st-included { color: #2e7d4a; background: #eef7f0; }2218.st-observed { color: var(--ink); background: var(--surface); }2219.st-estimated { color: var(--accent-deep, #1738a8); background: var(--accent-soft, #e9efff); }2220.st-unknown { color: var(--ink-3); background: var(--surface-2, #faf9f5); border-style: dashed; }22212222/* --- Coût réel mensuel --- */2223.cr-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }2224.cr-table td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }2225.cr-table tbody tr:nth-child(even) td { background: var(--surface-2, #faf9f5); }2226.cr-table tbody tr:hover td { background: var(--accent-soft, #e9efff); }2227.cr-table tfoot tr:first-child td { background: var(--accent-soft, #e9efff); }2228.cr-poste { color: var(--ink-2); }2229.cr-montant {2230  text-align: right; font-family: var(--font-mono); font-weight: 600;2231  white-space: nowrap;2232}2233.cr-table tfoot td {2234  border-bottom: none; border-top: 1.5px solid var(--ink);2235  font-weight: 700; padding-top: 9px;2236}2237.cr-annuel { color: var(--ink-3); font-weight: 500; font-size: 12px; }2238.cr-inconnus {2239  margin: 10px 0 0; padding: 8px 12px; font-size: 12.5px; color: var(--ink-2);2240  background: var(--accent-soft, #e9efff);2241  border-left: 3px solid var(--accent, #2456e6);2242  border-radius: var(--r-ctl);2243}2244.cr-pi2 { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }2245.cr-pi2 b { font-family: var(--font-mono); }22462247/* --- Listing history: timeline --- */2248.hl-timeline {2249  list-style: none; margin: 12px 0 0; padding: 0 0 0 14px;2250  border-left: 2px solid var(--ink);2251  display: flex; flex-direction: column; gap: 8px;2252}2253.hl-item { position: relative; font-size: 13px; color: var(--ink-2); }2254.hl-item::before {2255  content: ""; position: absolute; left: -19.5px; top: 5px;2256  width: 9px; height: 9px; border-radius: 50%;2257  background: var(--surface); border: 2px solid var(--ink-3);2258}2259.hl-item.hl-prix::before { border-color: var(--accent, #2456e6); background: var(--accent-soft, #e9efff); }2260.hl-item.hl-disparition::before { border-color: #b3552e; background: #fdeee7; }2261.hl-item.hl-reapparition::before { border-color: #2e7d4a; background: #eef7f0; }2262.hl-date {2263  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;2264  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3);2265  display: inline-block; min-width: 92px;2266}2267.hl-texte b { font-family: var(--font-mono); }22682269/* --- Vies antérieures (annonces recyclées) --- */2270.hl-recyclees { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); }2271.hl-recyclees h3 {2272  margin: 0 0 8px; font-size: 13px; font-weight: 700;2273  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2);2274}2275.hl-match {2276  border: 1px solid var(--line); border-left: 3px solid var(--accent, #2456e6);2277  border-radius: var(--r-ctl); background: var(--surface-2, #faf9f5);2278  padding: 8px 12px; margin: 0 0 8px; font-size: 13px;2279}2280.hl-signaux {2281  margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px;2282  color: var(--ink-3); letter-spacing: 0.02em;2283}22842285/* --- Passeport de l'immeuble --- */2286.im-parcc { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }2287.im-indicateurs { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }2288.im-indic { font-size: 13px; }2289.im-indic > .k {2290  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;2291  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3);2292  display: inline-block; margin-right: 4px;2293}2294.im-detail { color: var(--ink-2); font-size: 12.5px; }22952296/* --- Qui gère ce logement? --- */2297.gest-head { margin-bottom: 10px; }2298.gest-nom { font-family: var(--font-display); font-weight: 700; font-size: 17px; }2299.gest-meta { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }2300.gest-google { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }2301.gest-note {2302  font-family: var(--font-display); font-weight: 700; font-size: 20px;2303  color: var(--accent-deep, #1738a8);2304  background: var(--surface); border: 1.5px solid var(--ink);2305  border-radius: var(--r-ctl); padding: 5px 10px;2306  box-shadow: 3px 3px 0 var(--accent-soft, #e9efff);2307  white-space: nowrap;2308}2309.gest-navis { font-size: 12.5px; color: var(--ink-2); }2310.gest-bars { margin: 10px 0; display: flex; flex-direction: column; gap: 4px; }2311.gest-bar { display: flex; align-items: center; gap: 8px; }2312.gb-n {2313  font-family: var(--font-mono); font-size: 11px; font-weight: 600;2314  color: var(--ink-2); min-width: 26px; text-align: right;2315}2316.gb-track {2317  flex: 1 1 auto; height: 12px;2318  background: var(--surface-2, #faf9f5); border: 1px solid var(--line);2319  overflow: hidden; display: block;2320}2321.gb-fill { display: block; height: 100%; background: var(--ink-3); min-width: 0; }2322.gb-fill.pos { background: linear-gradient(90deg, #6fbc85, #2e7d4a); }2323.gb-fill.neg { background: linear-gradient(90deg, #e08a48, #c96a1f); }2324.gb-c {2325  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);2326  min-width: 24px;2327}2328.gest-stats {2329  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;2330  font-size: 13px; color: var(--ink-2); margin: 8px 0;2331}2332.gest-themes { font-size: 13px; margin: 8px 0; }2333.gest-themes > .k { color: var(--ink-2); }2334.gest-themes .zi-badge { margin: 2px 4px 2px 0; }2335.gest-avis { margin-top: 10px; }2336.gest-avis summary {2337  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2);2338}2339.gest-citation {2340  margin: 10px 0 0; padding: 8px 12px; font-size: 13px; color: var(--ink-2);2341  border-left: 3px solid var(--line); background: var(--surface-2, #faf9f5);2342  border-radius: var(--r-ctl);2343}2344.gest-citation footer {2345  margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px;2346  color: var(--ink-3);2347}23482349/* --- Vie quotidienne en hiver --- */2350.hiver-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }2351.hiver-score {2352  font-family: var(--font-display); font-weight: 700; font-size: 30px;2353  line-height: 1; color: var(--ink);2354  background: var(--surface); border: 1.5px solid var(--ink);2355  border-radius: var(--r-ctl); padding: 8px 12px;2356  box-shadow: 3px 3px 0 var(--accent-soft, #e9efff);2357}2358.hiver-sur { font-size: 12.5px; color: var(--ink-3); }2359.hiver-detail {2360  list-style: none; margin: 12px 0 0; padding: 0;2361  display: flex; flex-direction: column; gap: 6px;2362}2363.hiver-detail li {2364  display: flex; align-items: baseline; gap: 8px;2365  font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--line);2366}2367.hiver-detail li:last-child { border-bottom: none; }2368.hd-crit {2369  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;2370  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3);2371  min-width: 110px;2372}2373.hd-val { flex: 1 1 auto; color: var(--ink-2); }2374.hd-score {2375  font-family: var(--font-mono); font-weight: 700; font-size: 12px;2376  min-width: 28px; text-align: right;2377}23782379/* --- Adaptatif mobile : dossier d'intelligence locative --- */2380@media (max-width: 640px) {2381  .cr-table { font-size: 12.5px; }2382  .cr-table td { padding: 6px 6px 6px 0; }2383  .cr-poste .st-pill { margin-left: 6px; }2384  .cr-montant { font-size: 12.5px; }2385  .hl-date { display: block; min-width: 0; margin-bottom: 2px; }2386  .hl-item { font-size: 12.5px; }2387  .hl-match { font-size: 12.5px; }2388  .im-indic .im-detail { display: block; margin-top: 3px; }2389  .gest-nom { font-size: 16px; }2390  .gest-stats { font-size: 12.5px; gap: 8px; }2391  .gest-citation { font-size: 12.5px; }2392  .gb-n { min-width: 24px; font-size: 10.5px; }2393  .gb-c { min-width: 20px; font-size: 10.5px; }2394  .hiver-score { font-size: 26px; padding: 6px 10px; }2395  .hiver-sur { flex-basis: 100%; }2396  .hd-crit { min-width: 86px; font-size: 10px; }2397  .hiver-detail li { font-size: 12.5px; }2398}23992400/* =============================================================================2401   REFONTE ÉDITORIALE v2 (2026-08-25) — accueil « produit premium »2402   Direction : moins de boîtes, hiérarchie typographique, hairlines, données2403   vivantes, image dominante. Primitives locales : rayons 0/6/10/18,2404   durées 150/240/350 ms. Couche posée en FIN de fichier : elle a le dernier2405   mot sur la cascade (y compris sur la couche « harmonisation » ci-dessus).2406============================================================================= */2407:root {2408  --r-0: 0px; --r-1: 6px; --r-2: 10px; --r-3: 18px;2409  --dur-1: 150ms; --dur-2: 240ms; --dur-3: 350ms;2410  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);2411  --hairline: rgba(20, 24, 20, 0.14);2412  --hairline-strong: rgba(20, 24, 20, 0.6);2413}24142415/* ---- Héro : composition typographique, zéro boîte ---- */2416.hero h1.hero-display {2417  font-size: clamp(44px, 7.2vw, 88px);2418  line-height: 1.0; letter-spacing: -0.045em; max-width: 1020px; margin-top: 18px;2419}2420.brush { position: relative; display: inline-block; padding: 0 0.06em; }2421.brush::after { /* surlignage orange irrégulier (trait SVG) — pas un rectangle */2422  content: ""; position: absolute; left: -3%; right: -3%; bottom: 0.03em; height: 0.34em;2423  z-index: -1; transform: rotate(-0.6deg);2424  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26' preserveAspectRatio='none'%3E%3Cpath d='M5 17 C 60 8, 118 21, 168 13 S 258 10, 295 15' fill='none' stroke='%232456e6' stroke-width='11' stroke-linecap='round' opacity='0.92'/%3E%3C/svg%3E") no-repeat center / 100% 100%;2425}2426.hero p.lede { font-size: 16.5px; max-width: 580px; }2427.hero::before { opacity: 0.8; }2428.hero::after { opacity: 0.55; }24292430/* ---- Ligne de données vivantes (mono + filets — plus de chips) ---- */2431.live-line {2432  display: flex; flex-wrap: wrap; align-items: baseline;2433  margin-top: 34px; font-family: var(--font-mono); font-size: 12px;2434  color: var(--ink-2); letter-spacing: 0.02em; row-gap: 10px;2435}2436.live-flag {2437  display: inline-flex; align-items: center; gap: 7px;2438  font-weight: 700; font-size: 10.5px; letter-spacing: 0.18em;2439  text-transform: uppercase; color: var(--accent-deep);2440  padding-right: 14px; margin-right: 14px; border-right: 1px solid var(--hairline-strong);2441}2442.live-dot {2443  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);2444  animation: pulse 2.4s ease infinite;2445}2446.live-item { padding-right: 14px; margin-right: 14px; border-right: 1px solid var(--hairline); }2447.live-item:last-child { border-right: 0; padding-right: 0; margin-right: 0; }2448.live-item b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }2449@media (max-width: 640px) {2450  .live-line { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;2451    white-space: nowrap; margin-right: -16px; padding-right: 16px; }2452  .live-line::-webkit-scrollbar { display: none; }2453}24542455/* ---- Recherche au cœur : grand champ souligné + critères en filets ---- */2456.search-zone { margin: 42px 0 0; }2457.q-big {2458  display: flex; align-items: center; gap: 14px;2459  border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;2460  background: transparent; padding: 4px 2px 14px; color: var(--ink-3);2461  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) ease;2462}2463.q-big:focus-within { border-color: var(--accent); color: var(--accent-deep); }2464.q-big svg { flex: none; }2465.q-big input {2466  flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 0;2467  font-family: var(--font-display); font-weight: 600;2468  font-size: clamp(19px, 2.8vw, 28px); letter-spacing: -0.02em; color: var(--ink);2469}2470.q-big input::placeholder { color: var(--ink-3); font-weight: 500; }2471.crit-line { display: flex; align-items: stretch; flex-wrap: wrap; }2472.crit {2473  display: flex; flex-direction: column; justify-content: center; gap: 1px;2474  padding: 12px 26px 12px 0; margin-right: 26px;2475  border-right: 1px solid var(--hairline); min-width: 0; cursor: pointer;2476}2477.crit > span {2478  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;2479  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3);2480}2481.crit select {2482  border: 0; background: transparent; outline: none; cursor: pointer;2483  font-family: var(--font-display); font-weight: 700; font-size: 15.5px;2484  color: var(--ink); appearance: none; -webkit-appearance: none;2485  padding: 2px 18px 2px 0; min-width: 0; max-width: 190px; text-overflow: ellipsis;2486  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%238b928c'/%3E%3C/svg%3E");2487  background-repeat: no-repeat; background-position: right center;2488}2489.crit:hover select { color: var(--accent-deep); }2490.crit .range-pair select { max-width: 88px; }2491.crit-more {2492  display: inline-flex; align-items: center; gap: 9px; align-self: center;2493  border: 0; background: none; padding: 12px 0; cursor: pointer;2494  font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--ink);2495  transition: color var(--dur-1) ease;2496}2497.crit-more:hover, .crit-more.on { color: var(--accent-deep); }2498.crit-badge, .rb-badge {2499  display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;2500  border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent);2501  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;2502}2503/* panneau avancé : filet, pas de boîte (réutilise .f-adv/.f-group/.seg) */2504.search-zone .f-adv { border-top: 1px solid var(--hairline); margin-top: 2px; padding-top: 18px; }2505.search-zone .seg button {2506  border: 1px solid var(--hairline-strong); background: transparent; color: var(--ink-2);2507  min-height: 38px; font-weight: 600; margin-left: -1px;2508}2509.search-zone .seg button:first-child { border-radius: var(--r-1) 0 0 var(--r-1); }2510.search-zone .seg button:last-child { border-radius: 0 var(--r-1) var(--r-1) 0; }2511.search-zone .seg button:hover { background: var(--accent-soft); color: var(--accent-deep); }2512.search-zone .seg button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: none; }2513.search-zone .f-native { border: 1px solid var(--hairline-strong); background: transparent; }25142515/* résumé mobile des critères — remplace le FAB (voir media 640 plus bas) */2516.crit-summary { display: none; }25172518/* ---- Barre de résultats sticky : N logements · Liste|Carte · Filtres ---- */2519.results-bar {2520  position: sticky; top: 64px; z-index: var(--z-sticky, 300);2521  display: flex; align-items: center; gap: 16px;2522  margin: 30px 0 22px; padding: 12px 0 11px;2523  border-bottom: 1px solid var(--hairline-strong);2524  background: color-mix(in srgb, var(--paper) 86%, transparent);2525  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);2526}2527@supports not (background: color-mix(in srgb, red 50%, blue)) {2528  .results-bar { background: rgba(245, 243, 238, 0.92); }2529}2530.rb-count { margin: 0; font-size: clamp(16px, 2vw, 20px); letter-spacing: -0.02em; color: var(--ink); }2531.rb-count b { font-variant-numeric: tabular-nums; }2532.rb-tools { margin-left: auto; display: flex; align-items: center; gap: 20px; }2533.rb-tabs { display: flex; gap: 18px; }2534.rb-tab {2535  position: relative; display: inline-flex; align-items: center; gap: 6px;2536  border: 0; background: none; padding: 8px 0; cursor: pointer;2537  font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink-3);2538  transition: color var(--dur-1) ease;2539}2540.rb-tab:hover, .rb-tab.on { color: var(--ink); }2541.rb-tab::after {2542  content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 2.5px;2543  background: var(--accent); transform: scaleX(0); transform-origin: left;2544  transition: transform var(--dur-2) var(--ease-out);2545}2546.rb-tab.on::after { transform: scaleX(1); }2547.rb-filters {2548  display: inline-flex; align-items: center; gap: 7px;2549  border: 0; background: none; padding: 8px 0; cursor: pointer;2550  font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink);2551}2552.rb-filters:hover { color: var(--accent-deep); }2553@media (min-width: 641px) { .rb-filters { display: none; } }25542555/* ---- Transition douce liste ↔ carte ---- */2556.view-pane { animation: pane-in var(--dur-2) var(--ease-out); }2557@keyframes pane-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }25582559/* ---- Chips rapides : plus légères (hairline, texte d'abord) ---- */2560.chip {2561  border: 1px solid var(--hairline-strong); background: transparent;2562  min-height: 38px; padding: 7px 15px; font-size: 12.5px; box-shadow: none;2563}2564.chip:hover { transform: none; box-shadow: none; background: var(--accent-soft); color: var(--accent-deep); }2565.chip.on, .chip.chip-deal.on { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: none; }2566.chips { margin: 20px 0 0; }25672568/* ---- Pastilles actives : discrètes, survol = retrait ---- */2569.pills { margin: 14px 0 0; }2570.pills .pill { border: 1px solid var(--hairline-strong); background: transparent; box-shadow: none; padding: 5px 12px; font-size: 12px; }2571.pills .pill:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }25722573/* ---- Cartes éditoriales : l'image domine, plus de boîte ---- */2574.card, .card:hover { background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }2575.card-img { border-radius: var(--r-2); aspect-ratio: 4/3; }2576.card-img img { transition: transform var(--dur-3) var(--ease-out); }2577@media (hover: hover) {2578  .card:hover .card-img img { transform: scale(1.025); }2579  .card:hover .card-price { color: var(--accent-deep); }2580}2581.card:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: var(--r-2); }2582.card-body { padding: 13px 2px 0; gap: 3px; }2583.card-price { font-size: 22px; letter-spacing: -0.03em; color: var(--ink); transition: color var(--dur-1) ease; }2584.card-title { font-size: 14px; font-weight: 500; color: var(--ink-2); }2585.card-meta { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }2586.card-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--accent); }2587.card-foot { border-top: 0; padding-top: 8px; }2588.source-tag { background: none; border: 0; border-radius: 0; padding: 0; color: var(--ink-3); font-size: 10px; letter-spacing: 0.08em; max-width: 62%; }2589.avail { font-size: 11px; color: var(--ink-3); }2590.badge { border: 0; border-radius: 4px; background: rgba(20, 24, 20, 0.78); color: var(--paper);2591  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);2592  font-size: 9.5px; padding: 4px 9px; letter-spacing: 0.08em; }2593.badge.type { background: var(--accent); color: var(--on-accent); }2594.badge.right { background: rgba(20, 24, 20, 0.55); }25952596/* ---- Grille à rythme éditorial (accueil) : grand / petits / panoramique ---- */2597.grid.grid-edito { grid-template-columns: repeat(3, 1fr); gap: 36px 26px; }2598@media (max-width: 980px) {2599  .grid.grid-edito { grid-template-columns: 1fr 1fr; gap: 30px 20px; }2600}2601@media (max-width: 640px) {2602  .grid.grid-edito { grid-template-columns: 1fr; gap: 32px; }2603}2604@media (prefers-reduced-motion: no-preference) {2605  .grid-edito > * { animation: rise 0.5s var(--ease-out) backwards; }2606  .grid-edito > *:nth-child(3n+2) { animation-delay: 60ms; }2607  .grid-edito > *:nth-child(3n) { animation-delay: 120ms; }2608}2609@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }26102611/* ---- Squelettes sans boîte ---- */2612.skel { border: 0; border-radius: 0; background: transparent; }2613.skel .sk-img { aspect-ratio: 4/3; border-radius: var(--r-2); }2614.skel .sk-line { margin: 12px 2px; }26152616/* ---- Pagination éditoriale : chiffres nus, page courante soulignée ---- */2617.pager { border-top: 1px solid var(--hairline); padding-top: 16px; }2618.pager-info { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }2619.pager-btn {2620  min-width: 34px; height: 38px; padding: 0 8px; border: 0; border-radius: var(--r-1);2621  background: none; color: var(--ink-2);2622  font-family: var(--font-display); font-size: 13.5px; font-weight: 600; position: relative;2623}2624.pager-btn:hover:not(:disabled):not(.on) { background: var(--accent-soft); color: var(--accent-deep); border: 0; }2625.pager-btn.on { background: none; border: 0; color: var(--ink); font-weight: 700; }2626.pager-btn.on::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 3px; height: 2.5px; background: var(--accent); }2627.pager-arrow { border: 1px solid var(--hairline-strong); }26282629/* ---- Navigation mobile flottante (pilule détachée du bord) ---- */2630@media (max-width: 760px) {2631  .tabbar {2632    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));2633    border: 1px solid var(--hairline-strong); border-radius: var(--r-3);2634    background: rgba(250, 249, 245, 0.88);2635    box-shadow: 0 14px 34px rgba(20, 24, 20, 0.16);2636    padding: 6px;2637  }2638  .tabbar a { border-radius: 12px; font-size: 10px; color: var(--ink-3); gap: 2px; }2639  .tabbar a.active { color: var(--ink); }2640  .tabbar a.active::after { content: ""; width: 16px; height: 2.5px; border-radius: 2px; background: var(--accent); }2641  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }2642  .footer { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }2643}26442645/* ---- Mobile : recherche condensée + feuille de critères premium ---- */2646@media (max-width: 640px) {2647  .results-bar { top: 56px; gap: 10px; }2648  .search-zone { margin: 30px 0 0; }2649  .crit-line, .search-zone .f-adv, .search-zone .sheet-apply { display: none; }2650  .crit-summary {2651    display: flex; align-items: center; gap: 10px; width: 100%;2652    border: 0; border-bottom: 1px solid var(--hairline); background: none;2653    padding: 14px 2px; margin: 0; cursor: pointer; text-align: left;2654    font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);2655  }2656  .crit-summary svg { flex: none; color: var(--ink); }2657  .crit-summary .cs-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }2658  .crit-summary .f-chev { margin: 0 2px 0 0; transform: rotate(45deg); }26592660  .search-zone.open {2661    display: flex; flex-direction: column; gap: 12px;2662    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal, 900);2663    margin: 0; border-radius: var(--r-3) var(--r-3) 0 0; background: var(--surface);2664    max-height: 86dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;2665    padding: 10px 18px calc(16px + env(safe-area-inset-bottom));2666    box-shadow: 0 -18px 50px rgba(20, 24, 20, 0.3);2667    animation: sheet-up 0.26s var(--ease-out);2668  }2669  .search-zone.open .sheet-handle {2670    display: block; flex: none; width: 40px; height: 4.5px;2671    border-radius: 999px; background: var(--line); margin: 0 auto;2672  }2673  .search-zone.open .sheet-head {2674    display: flex; justify-content: space-between; align-items: center;2675    font-family: var(--font-display); font-weight: 700; font-size: 17px;2676    letter-spacing: -0.01em; color: var(--ink);2677    position: sticky; top: -10px; background: var(--surface); padding: 6px 0 8px;2678    border-bottom: 1px solid var(--hairline); z-index: 1;2679  }2680  .search-zone.open .crit-summary { display: none; }2681  .search-zone.open .q-big { padding: 2px 0 10px; }2682  .search-zone.open .q-big input { font-size: 17px; }2683  .search-zone.open .crit-line { display: flex; flex-direction: column; }2684  .search-zone.open .crit { border-right: 0; border-bottom: 1px solid var(--hairline); margin: 0; padding: 10px 0; }2685  .search-zone.open .crit select { max-width: none; width: 100%; font-size: 16px; }2686  .search-zone.open .crit .range-pair select { width: auto; flex: 1; }2687  .search-zone.open .crit-more { display: none; }2688  .search-zone.open .f-adv { display: grid; border-top: 0; padding-top: 4px; margin-top: 0; }2689  .search-zone.open .sheet-apply {2690    display: flex; position: sticky; bottom: 0; z-index: 1; width: 100%; min-height: 50px;2691    box-shadow: 0 -14px 18px -12px rgba(20, 24, 20, 0.35);2692  }2693}26942695/* ---- Widget KA Agent : dégagé de la tabbar flottante au doigt ---- */2696@media (max-width: 760px) {2697  .kaa-btn.kaa-btn { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); right: 14px; }2698  .kaa-panel.kaa-panel:not(.kaa-full) { bottom: calc(152px + env(safe-area-inset-bottom, 0px)); }2699}27002701/* les fiches s'alignent en haut : pas d'étirement vide sous les petites */2702.grid.grid-edito { align-items: start; }27032704/* ---- Header : jamais de débordement à droite ----2705   La nav ne casse pas de ligne ; sous 960px on passe au menu burger2706   (le contenu complet ne tient plus), le badge Groupe KA disparaît déjà2707   sous 1080px (règle plus haut). ---- */2708.nav a { white-space: nowrap; }2709@media (max-width: 960px) {2710  .nav { display: none; }2711  .menu-btn { display: flex; }2712}2713/* le badge Groupe KA lâche prise un peu plus tôt (débordement de ~6px à 1100) */2714@media (max-width: 1140px) { .header .gk-badge { display: none; } }27152716/* ---- Fiche logement : DA v2 — sections en filets, icônes contextuelles ---- */2717.f-bloc > h2 { display: flex; align-items: center; gap: 10px; font-size: 21px; }2718.f-bloc > h2::before { content: ""; width: 20px; height: 3px; border-radius: 2px; background: var(--accent); flex: none; }2719.f-hero .price { font-size: clamp(38px, 8.5vw, 54px); letter-spacing: -0.04em; }2720.f-hero h1 { color: var(--ink); }2721.f-hero .loc { font-size: 14px; }2722/* chips clés : hairline + icône contextuelle (plus d'aplat marine) */2723.chip-key {2724  background: transparent; color: var(--ink); border: 1px solid var(--hairline-strong);2725  gap: 7px; font-weight: 600; padding: 7px 13px;2726}2727.chip-key svg { color: var(--accent-deep); flex: none; }2728/* ancres en onglets textes */2729.ancres { gap: 18px; border-bottom: 1px solid var(--hairline); }2730.ancres a { padding: 10px 2px; border-radius: 0; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink-3); }2731.ancres a:hover { background: none; color: var(--accent-deep); box-shadow: inset 0 -2.5px 0 var(--accent); }2732/* inclusions : grille d'items en filets — chaque commodité a SON icône */2733.amenity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 0 28px; margin-bottom: 8px; }2734.amenity-it {2735  display: flex; align-items: center; gap: 11px; padding: 7px 0;2736  border-bottom: 1px solid var(--hairline); font-size: 13.5px; color: var(--ink); min-height: 46px;2737}2738.am-ico {2739  display: inline-grid; place-items: center; width: 32px; height: 32px;2740  border-radius: 10px; background: var(--accent-soft); color: var(--accent-deep); flex: none;2741}2742.am-txt { min-width: 0; }2743.am-conf { margin-left: auto; color: var(--green); font-weight: 700; font-size: 12px; }2744.amenity-it.unconfirmed { color: var(--ink-2); }2745.amenity-it.unconfirmed .am-ico { background: var(--surface-2); color: var(--ink-3); }2746/* détails pratiques : rangées en filets (plus de boîtes grises) */2747.kv { gap: 0 30px; margin: 14px 0 0; }2748.kv .cell {2749  background: transparent; border-radius: 0; padding: 9px 0;2750  border-bottom: 1px solid var(--hairline);2751  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;2752}2753.kv .cell .k { font-family: var(--font-mono); }2754.kv .cell .v { margin-top: 0; text-align: right; }2755/* galerie : cadre allégé, rayon photo 10 */2756.carousel { border: 1px solid var(--hairline-strong); box-shadow: none; border-radius: var(--r-2); }2757.thumbs button { border-radius: 8px; }2758/* « en bref » : filet accent au lieu d'une boîte pleine */2759.enbref { background: transparent; border: 0; border-left: 3px solid var(--accent); border-radius: 0; padding: 2px 0 2px 14px; }2760/* CTA sticky : sur la fiche, il prend le bas d'écran — la tabbar s'efface */2761body:has(.cta-sticky) .tabbar { display: none; }2762.cta-sticky { border-top: 1px solid var(--hairline-strong); background: rgba(250, 249, 245, 0.92); }2763@media (max-width: 760px) {2764  body:has(.cta-sticky) { padding-bottom: 0; }2765}27662767/* colonne éditoriale (gauche) : les sections respirent sans boîte —2768   les modules de données de la colonne droite restent en cartes */2769.fiche > .f-col:first-child > .f-bloc:not(.f-galerie):not(.f-hero) {2770  background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none;2771}2772@media (max-width: 640px) {2773  .fiche > .f-col:first-child > .f-bloc:not(.f-galerie):not(.f-hero) { padding: 0; }2774}2775/* cellules kv : neutraliser la tuile (bord encre + ombre) de la couche fiche */2776.kv .cell { border: 0; border-bottom: 1px solid var(--hairline); box-shadow: none; }2777/* tiret accent des titres : sans bordure ni ombre héritées de la couche fiche */2778.f-bloc > h2::before, .f-bloc h2::before, .quartier h2::before { border: 0; box-shadow: none; }27792780/* =============================================================================2781   KA MAP SYSTEM v2 — MODE CARTE LOU-KA (shell plein viewport)2782   Jetons du design system appliqués au shell ; la feuille de filtres de la2783   page passe en modale au-dessus du mode carte (body.ka-map-mode).2784============================================================================= */2785/* le sélecteur .ka-map du framework pose ses défauts DIRECTEMENT sur le2786   canevas : re-déclarer les jetons sur .ka-shell .ka-map, sinon l'accent2787   retombe au noir générique à l'intérieur de la carte */2788.ka-shell,2789.ka-shell .ka-map {2790  --ka-accent: var(--accent);2791  --ka-on-accent: var(--on-accent, #fff);2792  --ka-surface: var(--surface);2793  --ka-ink: var(--ink);2794  --ka-line: var(--line-strong);2795  --ka-radius: var(--r-ctl);2796  --ka-shadow: 0 8px 24px rgba(20, 24, 20, 0.14);2797  --ka-font: var(--font-body);2798}2799.ka-shell-fallback {2800  position: fixed; inset: 0; z-index: 640;2801  display: grid; place-items: center;2802  background: var(--surface); color: var(--ink-3); font-size: 13px;2803}2804.ms2-brand { display: inline-flex; align-items: baseline; gap: 7px; font-family: var(--font-display); min-width: 0; }2805.ms2-brand b { font-size: 15px; letter-spacing: 0.01em; }2806.ms2-brand span {2807  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;2808  color: var(--ink-3); font-weight: 600;2809}2810.ka-top-btn {2811  display: inline-flex; align-items: center; gap: 6px;2812  border: 1.5px solid var(--ink); border-radius: var(--r-ctl);2813  background: var(--surface); color: var(--ink);2814  font-weight: 600; font-size: 12.5px; padding: 8px 13px;2815  cursor: pointer; min-height: 38px; white-space: nowrap;2816}2817.ka-top-btn:hover { background: var(--ink); color: var(--white, #fff); }2818.ka-top-badge {2819  min-width: 17px; height: 17px; border-radius: 999px;2820  background: var(--accent); color: var(--on-accent, #fff);2821  font-size: 10.5px; font-weight: 700; line-height: 17px;2822  text-align: center; padding: 0 4px;2823}2824.ms2-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; }2825.ms2-count { font-size: 13px; color: var(--ink-2); min-width: 0; }2826.ms2-count b { color: var(--ink); font-size: 15px; }2827.ms2-sort select {2828  border: 1.5px solid var(--ink); border-radius: var(--r-ctl);2829  background: var(--surface); padding: 6px 8px; font-size: 12.5px;2830  font-weight: 600; color: var(--ink); max-width: 168px;2831}2832.ms2-list { display: flex; flex-direction: column; gap: 14px; position: relative; }2833.ms2-list .map-card { flex: 0 0 auto; }2834.ka-sheet .ms2-list { gap: 12px; padding-bottom: 10px; }2835.ka-sheet .ms2-head { padding-right: 2px; }28362837/* filtres de la page AU-DESSUS du mode carte — desktop : modale centrée */2838@media (min-width: 781px) {2839  body.ka-map-mode .sheet-backdrop {2840    display: block; position: fixed; inset: 0;2841    z-index: var(--z-overlay, 800); background: rgba(20, 24, 20, 0.45);2842  }2843  body.ka-map-mode .search-zone { display: none; }2844  body.ka-map-mode .search-zone.open {2845    display: block; position: fixed; top: 7dvh; left: 50%;2846    transform: translateX(-50%); width: min(760px, 94vw);2847    max-height: 84dvh; overflow-y: auto; z-index: var(--z-modal, 900);2848    background: var(--surface); border: 1.5px solid var(--ink);2849    border-radius: var(--r-card); box-shadow: var(--shadow-off);2850    padding: 16px 22px 20px; margin: 0;2851  }2852  body.ka-map-mode .search-zone.open .sheet-head {2853    display: flex; align-items: center; justify-content: space-between;2854    font-weight: 700; font-size: 14px; margin-bottom: 10px;2855  }2856  body.ka-map-mode .search-zone.open .sheet-close {2857    display: grid; place-items: center; width: 34px; height: 34px;2858    border: 1.5px solid var(--ink); border-radius: 50%;2859    background: var(--surface); cursor: pointer; font-size: 14px;2860  }2861}28622863/* mode carte : le widget Ka Agent s'efface (le sheet occupe son coin) */2864body.ka-map-mode .kaa-btn, body.ka-map-mode .kaa-hello { display: none !important; }2865/* mobile : la puce « sans position » encombre l'en-tête du sheet */2866@media (max-width: 780px) { .ka-shell .ms-nopos { display: none; } }28672868/* --- KA ID v2 : badge « Recommandé pour vous » (parcimonieux, serveur) --- */2869.badge.ka-reco { top: auto; bottom: 12px; background: var(--ink); color: var(--accent); border-color: var(--ink); }28702871/* ---- Browse by province (Rent-Ka signature home section) ------------------ */2872.prov-zone { margin: 26px 0 8px; }2873.prov-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }2874.prov-head h2 {2875  font-family: var(--font-display); font-weight: 700; font-size: 21px;2876  color: var(--navy); margin: 0;2877}2878.prov-sub { color: var(--ink-3); font-size: 13.5px; }2879.prov-grid {2880  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));2881  gap: 12px;2882}2883.prov-card {2884  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;2885  padding: 14px 16px; background: var(--surface);2886  border: 1.5px solid var(--ink); border-radius: var(--r-card);2887  cursor: pointer; text-align: left; transition: transform 0.12s ease, box-shadow 0.12s ease;2888}2889.prov-card:hover {2890  transform: translate(-2px, -2px);2891  box-shadow: 4px 4px 0 var(--accent);2892}2893.prov-code {2894  font-family: var(--font-mono); font-weight: 700; font-size: 12px;2895  letter-spacing: 0.08em; color: var(--on-accent); background: var(--accent);2896  border-radius: 5px; padding: 2px 7px;2897}2898.prov-name {2899  font-family: var(--font-display); font-weight: 700; font-size: 15.5px;2900  color: var(--navy); line-height: 1.15;2901}2902.prov-n { color: var(--ink-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }2903@media (max-width: 640px) {2904  .prov-grid { grid-template-columns: repeat(2, 1fr); }2905}2906