Immo-Ka — agrégateur des propriétés à vendre au Québec (73 connecteurs, ~40 000 annonces, React+FastAPI)
Python 47.5%
HTML 27.9%
TypeScript 15.5%
CSS 7.2%
JavaScript 2%
1/* -----------------------------------------------------------------------------2 Immo-Ka — Agrégateur de propriétés à vendre (province de Québec)3 Auteur : Simon-Pierre Boucher — contact@spboucher.ai4 fiche/fiche.css : fiche propriété premium (refonte 2026-09-07, même socle5 que la fiche Lou-Ka v3 du 2026-09-04)6 · Tokens `--ik-*` posés sur :root (les panneaux en portail y accèdent),7 styles SCOPÉS sous `.ik-fiche` / `.ik-*` — le reste du site conserve ses8 classes (.fiche/.f-* historiques restent inertes).9 · Fond papier Groupe KA #F5F3EE, cartes blanches à bord 1 px, ombres10 légères, rayons 10/14/18/22, CERISE Immo-Ka réservé aux CTA / prix /11 score / états actifs.12 · Mobile-first ; desktop ≥ 1024 px : colonne principale + aside sticky.13 · Aucune propriété `order` : ordre DOM = ordre visuel (standard Groupe Ka).14----------------------------------------------------------------------------- */15:root {16 --ik-bg: #f5f3ee;17 --ik-surface: #ffffff;18 --ik-surface-2: #faf9f5;19 --ik-border: #e6e3dc;20 --ik-border-2: #d3cfc6;21 --ik-text: #141814;22 --ik-text-2: #4d5551;23 --ik-muted: #7c837e;24 --ik-accent: #e23744;25 --ik-accent-deep: #a8232e;26 --ik-accent-soft: #fbe0e2;27 --ik-success: #1e7b4a;28 --ik-success-soft: #e7f4ec;29 --ik-warning: #a8690a;30 --ik-warning-soft: #fcf3e1;31 --ik-danger: #b3423a;32 --ik-danger-soft: #fbe9e7;33 --ik-info: #3b5bdb;34 --ik-info-soft: #e9edfb;35 --ik-r-sm: 10px;36 --ik-r-md: 14px;37 --ik-r-lg: 18px;38 --ik-r-xl: 22px;39 --ik-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.04);40 --ik-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.07);41 --ik-header-h: 56px;42 --ik-nav-h: 52px;43}4445/* ---- page : fond papier, header compact, chrome global effacé ---- */46body.ik-fiche-page { background: var(--ik-bg); }47body.ik-fiche-page .tabbar { display: none !important; }48body.ik-fiche-page .kaa-btn { display: none !important; } /* remplacé par « Demander à Ka » */49body.ik-fiche-page .kaa-hello { display: none !important; }50body.ik-fiche-page .prefooter { margin-top: 8px; }51body.ik-fiche-page .header--fiche { background: rgba(245, 243, 238, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ik-border); }52.header--fiche .header-inner { height: var(--ik-header-h); gap: 10px; }53.header--fiche .brand { font-size: 22px; }54.header--fiche .brand .ka { padding: 1px 6px 3px; }55.header--fiche .brand-tag { display: none; }56.header--fiche .menu-btn { margin-left: 0; border-color: var(--ik-border); box-shadow: none; }57.header--fiche .nav { margin-left: 0; }58.header--fiche .header-acct { margin-left: 0; }59.hdr-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }60.hdr-btn {61 display: inline-grid; place-items: center; width: 40px; height: 40px;62 border-radius: 999px; border: 1px solid var(--ik-border); background: var(--ik-surface);63 color: var(--ik-text); cursor: pointer; padding: 0; transition: background 0.15s, transform 0.15s;64}65.hdr-btn:active { transform: scale(0.95); }66.hdr-btn.on { color: var(--ik-accent); border-color: var(--ik-accent); background: var(--ik-accent-soft); }67@media (hover: hover) { .hdr-btn:hover { background: var(--ik-surface-2); } }68/* connexion KA : capsule légère ; sur téléphone, le monogramme « KA » seul */69.header--fiche .ka-login { box-shadow: none; }70@media (max-width: 760px) {71 .header--fiche .ka-signup { display: none; }72 .header--fiche .ka-login { padding: 0; width: 40px; height: 40px; justify-content: center; border-radius: 999px; font-size: 0; gap: 0; }73 .header--fiche .ka-login b { font-size: 12px; transform: none; }74 .header--fiche .ka-acct { padding: 0; width: 40px; height: 40px; justify-content: center; border-radius: 999px; font-size: 0; gap: 0; }75 .header--fiche .ka-acct .ka-acct-pic, .header--fiche .ka-acct svg { display: block; }76}7778/* ---- gabarit ---- */79.ik-fiche { padding: 10px 0 110px; color: var(--ik-text); }80.ik-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }81.ik-grid { display: block; }82.ik-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }83.ik-aside { display: none; }84@media (min-width: 768px) {85 .ik-wrap { padding: 0 24px; }86 .ik-fiche { padding-top: 18px; }87 .ik-main { gap: 16px; }88}89@media (min-width: 1024px) {90 .ik-grid { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: 32px; align-items: start; }91 .ik-aside { display: block; position: sticky; top: calc(var(--ik-header-h) + 16px); }92 .ik-fiche { padding-bottom: 80px; }93}94.ik-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--ik-muted); margin: 0 0 10px; }95.ik-crumbs a { color: var(--ik-text-2); }96.ik-crumbs span:last-child { color: var(--ik-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }97.ik-fiche section[id] { scroll-margin-top: calc(var(--ik-header-h) + var(--ik-nav-h) + 10px); }9899/* ---- carte de section ---- */100.ik-card {101 background: var(--ik-surface); border: 1px solid var(--ik-border);102 border-radius: var(--ik-r-lg); box-shadow: var(--ik-shadow-sm);103 padding: 16px; min-width: 0;104}105@media (min-width: 768px) { .ik-card { padding: 20px 22px; } }106.ik-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }107.ik-card-title { display: flex; align-items: center; gap: 9px; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ik-text); }108.ik-card-title svg { color: var(--ik-accent-deep); flex: none; }109.ik-card-sub { font-size: 12.5px; color: var(--ik-muted); margin: 3px 0 0; }110.ik-card-aside { flex: none; display: flex; align-items: center; gap: 8px; }111.ik-link { background: none; border: 0; padding: 0; color: var(--ik-text-2); font: 600 13px var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ik-border-2); }112.ik-link:hover { color: var(--ik-accent-deep); }113.ik-more {114 display: inline-flex; align-items: center; justify-content: center; gap: 8px;115 width: 100%; min-height: 44px; margin-top: 12px; padding: 8px 14px;116 border: 1px solid var(--ik-border); border-radius: var(--ik-r-sm); background: var(--ik-surface);117 color: var(--ik-text); font: 600 13.5px var(--font-body); cursor: pointer;118 transition: background 0.15s, border-color 0.15s;119}120.ik-more:hover { background: var(--ik-surface-2); border-color: var(--ik-border-2); }121.ik-more svg { color: var(--ik-muted); }122123/* ---- boutons ---- */124.ik-btn {125 display: inline-flex; align-items: center; justify-content: center; gap: 8px;126 min-height: 46px; padding: 10px 16px; border-radius: 12px; border: 1px solid transparent;127 font: 600 14.5px var(--font-body); cursor: pointer; text-decoration: none;128 transition: transform 0.12s, background 0.15s, box-shadow 0.15s; white-space: nowrap;129}130.ik-btn:active { transform: translateY(1px); }131.ik-btn-primary { background: var(--ik-accent); color: #fff; box-shadow: 0 6px 18px rgba(226, 55, 68, 0.22); }132.ik-btn-primary:hover { background: var(--ik-accent-deep); }133.ik-btn-ghost { background: var(--ik-surface); border-color: var(--ik-border); color: var(--ik-text); }134.ik-btn-ghost:hover { background: var(--ik-surface-2); border-color: var(--ik-border-2); }135.ik-btn-icon { width: 46px; padding: 0; flex: none; }136.ik-btn-icon.on { color: var(--ik-accent); border-color: var(--ik-accent); background: var(--ik-accent-soft); }137138/* ---- héro ---- */139.ik-hero { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 0; }140.ik-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }141.ik-price { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 8.4vw, 38px); line-height: 1; letter-spacing: -0.035em; color: var(--ik-text); display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }142.ik-price small { font: 500 14px var(--font-body); color: var(--ik-muted); letter-spacing: 0; }143.ik-price-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }144.ik-capsule {145 display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;146 border-radius: 999px; font: 600 12.5px var(--font-body); border: 1px solid transparent; white-space: nowrap;147}148.ik-capsule b { font-weight: 700; }149.ik-capsule.good { background: var(--ik-success-soft); color: var(--ik-success); }150.ik-capsule.ok { background: var(--ik-surface); color: var(--ik-text-2); border-color: var(--ik-border); }151.ik-capsule.high { background: var(--ik-warning-soft); color: var(--ik-warning); }152.ik-capsule.neutral { background: var(--ik-surface-2); color: var(--ik-muted); border-color: var(--ik-border); }153.ik-capsule.brand { background: var(--ik-accent-soft); color: var(--ik-accent-deep); }154.ik-h1 { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.35; letter-spacing: 0; color: var(--ik-text); }155.ik-h1 .ik-city { display: block; font-weight: 500; font-size: 14px; color: var(--ik-text-2); }156.ik-summary { margin: 0; font-size: 14px; color: var(--ik-text-2); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }157.ik-summary .sep { color: var(--ik-border-2); }158.ik-actions { display: flex; gap: 8px; align-items: center; }159.ik-actions .ik-btn-primary { flex: 1; }160.ik-hero .ik-actions { margin-top: 2px; }161@media (min-width: 1024px) {162 .ik-hero .ik-actions { display: none; } /* actions dans l'aside sticky */163}164165/* ---- galerie ---- */166.ik-gallery { position: relative; border-radius: var(--ik-r-lg); overflow: hidden; background: #ecece8; }167.ik-gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; aspect-ratio: 4 / 3; scrollbar-width: none; -webkit-overflow-scrolling: touch; }168.ik-gallery-track::-webkit-scrollbar { display: none; }169.ik-gallery-track img, .ik-gallery > img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; cursor: zoom-in; display: block; }170.ik-gallery > img { aspect-ratio: 4 / 3; }171@media (min-width: 768px) { .ik-gallery-track, .ik-gallery > img { aspect-ratio: 16 / 9; } }172.ik-gallery-count {173 position: absolute; left: 12px; bottom: 12px; z-index: 2;174 background: rgba(20, 24, 20, 0.66); color: #fff; font: 600 12px var(--font-body);175 padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);176 font-variant-numeric: tabular-nums;177}178.ik-gallery-full, .ik-gallery-nav {179 position: absolute; z-index: 2; display: grid; place-items: center;180 width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer;181 background: rgba(255, 255, 255, 0.92); color: var(--ik-text); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);182}183.ik-gallery-full { right: 12px; bottom: 12px; }184.ik-gallery-nav { top: 50%; transform: translateY(-50%); display: none; }185.ik-gallery-nav.prev { left: 12px; } .ik-gallery-nav.next { right: 12px; }186@media (hover: hover) and (min-width: 768px) { .ik-gallery-nav { display: grid; } }187.ik-thumbs { display: none; }188@media (min-width: 768px) {189 .ik-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; margin-top: 8px; }190 .ik-thumbs button { border: 0; padding: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: #ecece8; cursor: pointer; outline-offset: 2px; opacity: 0.75; transition: opacity 0.15s; }191 .ik-thumbs button.on, .ik-thumbs button:hover { opacity: 1; }192 .ik-thumbs button.on { outline: 2px solid var(--ik-accent); }193 .ik-thumbs img { width: 100%; height: 100%; object-fit: cover; }194}195/* lightbox (plein écran) */196.ik-lightbox { position: fixed; inset: 0; z-index: var(--z-modal, 900); background: rgba(12, 14, 12, 0.96); }197.ik-lightbox-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; height: 100%; scrollbar-width: none; touch-action: pan-x pinch-zoom; }198.ik-lightbox-track::-webkit-scrollbar { display: none; }199.ik-lightbox-cell { flex: 0 0 100%; height: 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; padding: max(56px, env(safe-area-inset-top)) 10px max(28px, env(safe-area-inset-bottom)); overflow: hidden; }200.ik-lightbox-cell img { max-width: 100%; max-height: 100%; border-radius: 10px; user-select: none; -webkit-user-drag: none; will-change: transform; }201.ik-lightbox-close { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.5); color: #fff; display: grid; place-items: center; cursor: pointer; }202.ik-lightbox-count { position: fixed; top: max(22px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 3; color: #fff; font: 600 13px var(--font-body); background: rgba(0, 0, 0, 0.45); padding: 4px 12px; border-radius: 999px; }203.ik-lightbox .ik-gallery-nav { display: none; }204@media (hover: hover) { .ik-lightbox .ik-gallery-nav { display: grid; position: fixed; } }205206/* ---- Immo-Ka Score ---- */207.ik-score { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }208.ik-score-ring { position: relative; width: 88px; height: 88px; flex: none; }209.ik-score-ring svg { width: 88px; height: 88px; transform: rotate(-90deg); }210.ik-score-ring .bg { fill: none; stroke: var(--ik-surface-2); stroke-width: 7; }211.ik-score-ring .arc { fill: none; stroke: var(--ik-accent); stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }212.ik-score-ring .arc.partial { stroke: var(--ik-text-2); }213.ik-score-val { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 27px; letter-spacing: -0.03em; line-height: 1; }214.ik-score-val small { display: block; text-align: center; font: 600 10px var(--font-body); color: var(--ik-muted); margin-top: 2px; letter-spacing: 0.04em; }215.ik-score-lbl { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }216.ik-score-sub { font-size: 13px; color: var(--ik-text-2); margin-top: 2px; line-height: 1.4; }217.ik-score-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }218.ik-score-part { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 9px; border-radius: 8px; background: var(--ik-surface-2); border: 1px solid var(--ik-border); color: var(--ik-text-2); }219.ik-score-part b { color: var(--ik-text); font-variant-numeric: tabular-nums; }220.ik-score-part.na { color: var(--ik-muted); border-style: dashed; }221222/* ---- En bref ---- */223.ik-brief { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }224.ik-brief li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }225.ik-brief-ico { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px; }226.ik-brief-ico.good { background: var(--ik-success-soft); color: var(--ik-success); }227.ik-brief-ico.warn { background: var(--ik-warning-soft); color: var(--ik-warning); }228.ik-brief-ico.bad { background: var(--ik-danger-soft); color: var(--ik-danger); }229.ik-brief-ico.neutral { background: var(--ik-surface-2); color: var(--ik-muted); border: 1px solid var(--ik-border); }230.ik-brief-t { font-weight: 600; font-size: 14px; line-height: 1.35; }231.ik-brief-d { font-size: 13px; color: var(--ik-text-2); line-height: 1.4; margin-top: 1px; }232233/* ---- navigation par sections (sticky) ---- */234.ik-nav {235 position: sticky; top: var(--ik-header-h); z-index: var(--z-sticky, 300);236 margin: 0 -16px; padding: 6px 16px;237 background: rgba(245, 243, 238, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);238 border-bottom: 1px solid var(--ik-border);239}240@media (min-width: 768px) { .ik-nav { margin: 0 -24px; padding: 6px 24px; } }241@media (min-width: 1024px) { .ik-nav { margin: 0; padding: 6px 0; border-radius: 0; } }242.ik-nav-track { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }243.ik-nav-track::-webkit-scrollbar { display: none; }244.ik-nav a {245 flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 13px;246 border-radius: 999px; font: 600 13px var(--font-body); color: var(--ik-text-2);247 border: 1px solid transparent; transition: background 0.15s, color 0.15s; scroll-snap-align: start;248}249.ik-nav a:hover { background: var(--ik-surface); border-color: var(--ik-border); }250.ik-nav a.on { background: var(--ik-text); color: #fff; border-color: var(--ik-text); }251252/* ---- caractéristiques ---- */253.ik-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }254@media (min-width: 560px) { .ik-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }255@media (min-width: 900px) { .ik-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }256.ik-fact { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ik-border); border-radius: 12px; background: var(--ik-surface-2); min-width: 0; }257.ik-fact-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--ik-surface); border: 1px solid var(--ik-border); display: grid; place-items: center; color: var(--ik-accent-deep); flex: none; }258.ik-fact-v { font-weight: 700; font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }259.ik-fact-l { font-size: 11.5px; color: var(--ik-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }260.ik-fact-txt { min-width: 0; }261.ik-facts-rows { margin-top: 12px; }262.ik-kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--ik-border); font-size: 13.5px; }263.ik-kv .k { color: var(--ik-muted); } .ik-kv .v { font-weight: 600; text-align: right; }264.ik-note { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.4; }265.ik-note.good { background: var(--ik-success-soft); color: var(--ik-success); }266.ik-note.info { background: var(--ik-info-soft); color: var(--ik-info); }267.ik-note.warn { background: var(--ik-warning-soft); color: var(--ik-warning); }268269/* ---- description ---- */270.ik-desc { position: relative; }271.ik-desc-body p { font-size: 15px; line-height: 1.6; color: var(--ik-text-2); margin: 0 0 10px; white-space: pre-line; }272.ik-desc-body h4 { margin: 12px 0 3px; font: 700 14px var(--font-body); color: var(--ik-text); }273.ik-desc-lead { font-size: 15.5px !important; color: var(--ik-text) !important; font-weight: 500; }274.ik-desc.clamped .ik-desc-body { max-height: 200px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }275.ik-desc-orig { margin-top: 8px; }276.ik-desc-orig p { font-size: 13.5px; color: var(--ik-muted); }277278/* ---- inclusions ---- */279.ik-amen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }280@media (min-width: 640px) { .ik-amen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }281.ik-amen-it { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 5px 0; border-bottom: 1px solid var(--ik-border); font-size: 13.5px; min-width: 0; }282.ik-amen-ico { width: 28px; height: 28px; border-radius: 8px; background: var(--ik-accent-soft); color: var(--ik-accent-deep); display: grid; place-items: center; flex: none; }283.ik-amen-it.unconfirmed { color: var(--ik-text-2); }284.ik-amen-it.unconfirmed .ik-amen-ico { background: var(--ik-surface-2); color: var(--ik-muted); border: 1px dashed var(--ik-border-2); }285.ik-amen-txt { min-width: 0; line-height: 1.25; }286.ik-amen-conf { margin-left: auto; color: var(--ik-success); flex: none; }287288/* ---- KPI / tuiles ---- */289.ik-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }290@media (min-width: 600px) { .ik-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ik-kpi-v { font-size: 20px; } }291.ik-kpis.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }292.ik-kpi { padding: 10px 12px; border: 1px solid var(--ik-border); border-radius: 12px; background: var(--ik-surface); min-width: 0; }293.ik-kpi.accent { background: var(--ik-accent-soft); border-color: #f5c2c6; }294.ik-kpi-v { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 4.8vw, 20px); letter-spacing: -0.025em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ik-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }295.ik-kpi-v.wrap { white-space: normal; font-size: 16px; line-height: 1.2; }296.ik-kpi-v small { font: 600 11px var(--font-body); color: var(--ik-muted); margin-left: 3px; }297.ik-kpi-l { font-size: 11.5px; color: var(--ik-muted); margin-top: 3px; line-height: 1.3; }298.ik-kpi.anim .ik-kpi-v { animation: ik-rise 0.5s ease both; }299@keyframes ik-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }300301/* ---- rangées compactes (accessibilité, mesures) ---- */302.ik-rows { display: flex; flex-direction: column; gap: 4px; }303.ik-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 30px; font-size: 13.5px; }304.ik-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ik-text); }305.ik-row-name small { color: var(--ik-muted); font-size: 12px; margin-left: 4px; }306.ik-row-bar { width: 78px; height: 6px; border-radius: 3px; background: var(--ik-surface-2); border: 1px solid var(--ik-border); overflow: hidden; }307.ik-row-bar i { display: block; height: 100%; background: var(--ik-text); border-radius: 3px; }308.ik-row-bar i.good { background: var(--ik-success); }309.ik-row-bar i.warn { background: var(--ik-warning); }310.ik-row-bar i.bad { background: var(--ik-danger); }311.ik-row-val { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }312.ik-row-lbl { font-size: 12px; color: var(--ik-muted); min-width: 68px; text-align: right; }313.ik-row-lbl.good { color: var(--ik-success); } .ik-row-lbl.warn { color: var(--ik-warning); } .ik-row-lbl.bad { color: var(--ik-danger); }314315/* ---- pastilles d'état ---- */316.ik-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 12px var(--font-body); border: 1px solid transparent; white-space: nowrap; }317.ik-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }318.ik-badge.good { background: var(--ik-success-soft); color: var(--ik-success); }319.ik-badge.warn { background: var(--ik-warning-soft); color: var(--ik-warning); }320.ik-badge.bad { background: var(--ik-danger-soft); color: var(--ik-danger); }321.ik-badge.neutral { background: var(--ik-surface-2); color: var(--ik-text-2); border-color: var(--ik-border); }322.ik-badge.info { background: var(--ik-info-soft); color: var(--ik-info); }323.ik-badge.lg { font-size: 13.5px; padding: 6px 12px; }324.ik-pill { display: inline-block; font: 600 10.5px var(--font-body); text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 6px; margin-left: 6px; vertical-align: 1px; }325.ik-pill.included { background: var(--ik-success-soft); color: var(--ik-success); }326.ik-pill.observed { background: var(--ik-surface-2); color: var(--ik-text-2); border: 1px solid var(--ik-border); }327.ik-pill.estimated { background: var(--ik-accent-soft); color: var(--ik-accent-deep); }328.ik-pill.unknown { background: var(--ik-surface-2); color: var(--ik-muted); border: 1px dashed var(--ik-border-2); }329330/* ---- listes d'items (lieux, comparables, stations) ---- */331.ik-list { list-style: none; margin: 0; padding: 0; }332.ik-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ik-border); min-width: 0; }333.ik-list > .ik-item:first-child { border-top: 0; padding-top: 2px; }334.ik-item-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--ik-surface-2); border: 1px solid var(--ik-border); color: var(--ik-text-2); }335.ik-item-ico svg.cm-ico { width: 26px; height: 26px; }336.ik-item-main { flex: 1; min-width: 0; }337.ik-item-t { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }338.ik-item-s { font-size: 12.5px; color: var(--ik-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }339.ik-item-r { text-align: right; flex: none; }340.ik-item-v { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }341.ik-item-m { font-size: 12px; color: var(--ik-muted); }342.ik-item-best { color: var(--ik-success); font-weight: 700; font-size: 11.5px; margin-left: 6px; }343344/* ---- carrousel horizontal ---- */345.ik-carousel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 2px 16px 6px; }346.ik-carousel::-webkit-scrollbar { display: none; }347@media (min-width: 768px) { .ik-carousel { margin: 0; padding: 2px 0 6px; } }348.ik-ccard { flex: 0 0 44%; min-width: 148px; max-width: 210px; scroll-snap-align: start; border: 1px solid var(--ik-border); border-radius: var(--ik-r-md); padding: 12px; background: var(--ik-surface); display: flex; flex-direction: column; gap: 6px; min-height: 104px; }349@media (min-width: 768px) { .ik-ccard { flex-basis: 176px; } }350.ik-ccard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }351.ik-ccard-c { font: 600 10.5px var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ik-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }352.ik-ccard-d { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }353.ik-ccard-n { font-size: 12.5px; color: var(--ik-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }354.ik-ccard-m { font-size: 11.5px; color: var(--ik-muted); }355356/* ---- filtres (chips) ---- */357.ik-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 10px; }358.ik-chips::-webkit-scrollbar { display: none; }359.ik-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ik-border); background: var(--ik-surface); color: var(--ik-text-2); font: 600 12.5px var(--font-body); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }360.ik-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ik-text)); flex: none; }361.ik-chip small { font-weight: 600; opacity: 0.65; }362.ik-chip.on { background: var(--ik-text); color: #fff; border-color: var(--ik-text); }363.ik-chip:disabled { opacity: 0.45; cursor: default; }364365/* ---- carte ---- */366.ik-map { position: relative; height: 340px; border-radius: var(--ik-r-lg); overflow: hidden; border: 1px solid var(--ik-border); background: #ecece8; }367@media (min-width: 768px) { .ik-map { height: 440px; } }368@media (min-width: 1024px) { .ik-map { height: 520px; } }369.ik-map .ka-map {370 position: absolute; inset: 0;371 --ka-accent: var(--ik-accent); --ka-on-accent: #fff; --ka-surface: var(--ik-surface);372 --ka-ink: var(--ik-text); --ka-line: var(--ik-border-2); --ka-radius: 10px;373 --ka-shadow: 0 8px 24px rgba(20, 24, 20, 0.14); --ka-font: var(--font-body);374}375.ik-map-legend { position: absolute; left: 10px; bottom: 10px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--ik-border); font: 500 11px var(--font-body); color: var(--ik-text-2); pointer-events: none; }376.ik-map-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--ik-accent); }377.ik-map-skel { position: absolute; inset: 0; }378.ik-map-hint { font-size: 12px; color: var(--ik-muted); margin: 8px 0 0; }379380/* ---- accordéon ---- */381.ik-acc { border-top: 1px solid var(--ik-border); }382.ik-acc:first-child { border-top: 0; }383.ik-acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 0; background: none; border: 0; font: 600 14px var(--font-body); color: var(--ik-text); cursor: pointer; text-align: left; }384.ik-acc-btn .ik-acc-meta { font-weight: 500; font-size: 12.5px; color: var(--ik-muted); margin-left: auto; white-space: nowrap; }385.ik-acc-btn .chev { color: var(--ik-muted); flex: none; transition: transform 0.2s ease; }386.ik-acc-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }387.ik-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.22s ease; }388.ik-acc-body.open { grid-template-rows: 1fr; }389.ik-acc-body > div { min-height: 0; overflow: hidden; }390.ik-acc-inner { padding: 0 0 14px; font-size: 13.5px; color: var(--ik-text-2); line-height: 1.5; }391.ik-acc-inner p { margin: 0 0 8px; }392.ik-acc-inner a { color: var(--ik-text-2); text-decoration: underline; text-underline-offset: 2px; }393.ik-acc.sm .ik-acc-btn { min-height: 40px; font-size: 13px; color: var(--ik-text-2); }394395/* ---- bottom sheet (mobile) / modale (desktop) ---- */396.ik-sheet-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay, 800); background: rgba(20, 24, 20, 0.42); animation: ik-fade 0.18s ease; }397.ik-sheet {398 position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal, 900);399 height: var(--ik-sheet-h, 68dvh); max-height: 94dvh;400 background: var(--ik-surface); border-radius: 20px 20px 0 0;401 display: flex; flex-direction: column; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);402 animation: ik-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);403 padding-bottom: env(safe-area-inset-bottom);404 touch-action: pan-y;405}406.ik-sheet.full { height: 94dvh; }407.ik-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--ik-border-2); margin: 8px auto 0; flex: none; }408.ik-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 10px; border-bottom: 1px solid var(--ik-border); flex: none; }409.ik-sheet-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; margin: 0; }410.ik-sheet-sub { font-size: 12.5px; color: var(--ik-muted); margin: 2px 0 0; }411.ik-sheet-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ik-border); background: var(--ik-surface-2); display: grid; place-items: center; cursor: pointer; color: var(--ik-text); flex: none; }412.ik-sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 16px 18px; }413.ik-sheet-foot { flex: none; padding: 10px 16px; border-top: 1px solid var(--ik-border); background: var(--ik-surface); }414@keyframes ik-up { from { transform: translateY(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }415@keyframes ik-fade { from { opacity: 0; } to { opacity: 1; } }416@keyframes ik-pop { from { transform: translate(-50%, -50%) scale(0.97); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }417@media (min-width: 900px) {418 .ik-sheet, .ik-sheet.full {419 left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%);420 width: min(680px, calc(100vw - 48px)); height: auto; max-height: min(82vh, 780px);421 border-radius: var(--ik-r-lg); animation: ik-pop 0.18s ease; padding-bottom: 0;422 }423 .ik-sheet-handle { display: none; }424 .ik-sheet-head { padding: 16px 20px 12px; }425 .ik-sheet-body { padding: 14px 20px 20px; }426}427.ik-sheet-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }428.ik-seg { display: inline-flex; border: 1px solid var(--ik-border); border-radius: 999px; overflow: hidden; background: var(--ik-surface); }429.ik-seg button { border: 0; background: transparent; padding: 7px 12px; min-height: 36px; font: 600 12.5px var(--font-body); color: var(--ik-text-2); cursor: pointer; }430.ik-seg button.on { background: var(--ik-text); color: #fff; }431.ik-seg button + button { border-left: 1px solid var(--ik-border); }432433/* ---- CTA sticky ---- */434.ik-cta-bar {435 position: fixed; left: 0; right: 0; bottom: var(--consent-h, 0px); z-index: var(--z-bottombar, 600);436 display: flex; align-items: center; gap: 12px;437 padding: 10px 16px calc(10px + env(safe-area-inset-bottom));438 background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);439 border-top: 1px solid var(--ik-border);440 transform: translateY(110%); transition: transform 0.25s ease; will-change: transform;441}442.ik-cta-bar.show { transform: none; }443.ik-cta-txt { min-width: 0; flex: 0 1 auto; }444.ik-cta-price { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }445.ik-cta-price small { font: 500 11px var(--font-body); color: var(--ik-muted); letter-spacing: 0; }446.ik-cta-sub { font-size: 12px; color: var(--ik-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }447.ik-cta-sub.good { color: var(--ik-success); font-weight: 600; }448.ik-cta-bar .ik-btn-primary { flex: 1; min-height: 44px; margin-left: auto; max-width: 260px; }449@media (min-width: 1024px) { .ik-cta-bar { display: none; } }450451/* ---- Demander à Ka ---- */452.ik-ka-btn {453 position: fixed; right: 14px; bottom: calc(78px + env(safe-area-inset-bottom) + var(--consent-h, 0px)); z-index: var(--z-dropdown, 700);454 display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 8px 14px 8px 12px;455 border-radius: 999px; border: 0; background: var(--ik-text); color: #fff;456 font: 600 13px var(--font-body); cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);457 transition: transform 0.15s, opacity 0.2s;458}459.ik-ka-btn svg { color: var(--ik-accent); }460.ik-ka-btn:active { transform: scale(0.97); }461.ik-ka-btn.hide { opacity: 0; pointer-events: none; transform: translateY(8px); }462@media (min-width: 1024px) { .ik-ka-btn { display: none; } } /* desktop : bouton dans l'aside */463.ik-ka-intro { display: flex; gap: 12px; align-items: flex-start; padding: 4px 0 12px; }464.ik-ka-avatar { width: 38px; height: 38px; border-radius: 12px; background: var(--ik-text); color: var(--ik-accent); display: grid; place-items: center; flex: none; }465.ik-ka-intro p { margin: 0; font-size: 13.5px; color: var(--ik-text-2); line-height: 1.45; }466.ik-ka-ctx { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ik-surface-2); border: 1px solid var(--ik-border); font-size: 12.5px; color: var(--ik-text-2); margin-bottom: 12px; }467.ik-ka-ctx img { width: 44px; height: 34px; object-fit: cover; border-radius: 6px; flex: none; }468.ik-ka-ctx b { color: var(--ik-text); display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }469.ik-ka-sugs { display: flex; flex-direction: column; gap: 6px; }470.ik-ka-sug { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ik-border); background: var(--ik-surface); font: 500 14px var(--font-body); color: var(--ik-text); cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s; }471.ik-ka-sug:hover { background: var(--ik-accent-soft); border-color: #f5c2c6; }472.ik-ka-sug svg { color: var(--ik-muted); flex: none; }473.ik-ka-in { display: flex; gap: 8px; align-items: center; }474.ik-ka-in input { flex: 1; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ik-border); background: var(--ik-surface); font: 400 16px var(--font-body); color: var(--ik-text); }475.ik-ka-in input:focus { outline: 2px solid var(--ik-accent); outline-offset: 1px; }476.ik-ka-in button { width: 46px; height: 46px; border-radius: 12px; border: 0; background: var(--ik-accent); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }477.ik-ka-in button:disabled { opacity: 0.4; cursor: default; }478479/* ---- aside desktop ---- */480.ik-aside-card { display: flex; flex-direction: column; gap: 12px; }481.ik-aside .ik-btn-primary { white-space: normal; text-align: center; line-height: 1.25; }482.ik-aside .ik-ka-inline { justify-content: flex-start; }483.ik-aside .ik-ka-inline svg { color: var(--ik-accent); }484.ik-aside .ik-price { font-size: 32px; }485.ik-aside-addr { font-size: 14px; color: var(--ik-text-2); line-height: 1.4; }486.ik-aside-sep { border: 0; border-top: 1px solid var(--ik-border); margin: 4px 0; }487.ik-aside-score { display: flex; align-items: center; gap: 12px; }488.ik-aside-score .ik-score-ring { width: 56px; height: 56px; }489.ik-aside-score .ik-score-ring svg { width: 56px; height: 56px; }490.ik-aside-score .ik-score-val { font-size: 18px; }491.ik-aside-score .ik-score-val small { display: none; }492.ik-aside-score-txt { font-size: 13px; color: var(--ik-text-2); line-height: 1.4; }493.ik-aside-score-txt b { display: block; color: var(--ik-text); font-size: 14px; }494.ik-aside .ik-brief { gap: 8px; }495.ik-aside .ik-brief-t { font-size: 13.5px; }496.ik-aside .ik-brief-d { display: none; }497.ik-aside-meta { font-size: 12px; color: var(--ik-muted); text-align: center; }498499/* ---- source & méthodologie (pied de section) ---- */500.ik-source { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ik-border); font-size: 12px; color: var(--ik-muted); }501.ik-source b { font-weight: 600; color: var(--ik-text-2); }502.ik-source a, .ik-source button { color: var(--ik-text-2); background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ik-border-2); cursor: pointer; }503.ik-source a:hover, .ik-source button:hover { color: var(--ik-accent-deep); }504.ik-fine { font-size: 12.5px; color: var(--ik-muted); line-height: 1.5; margin: 8px 0 0; }505.ik-fine a { color: var(--ik-text-2); text-decoration: underline; text-underline-offset: 2px; }506.ik-fine.meth { margin-top: 0; }507508/* ---- états : squelettes, vides, erreurs ---- */509.ik-skel { border-radius: 10px; background: linear-gradient(90deg, #ecece8 25%, #f4f4f1 50%, #ecece8 75%); background-size: 400% 100%; animation: ik-shimmer 1.3s infinite linear; }510@keyframes ik-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }511.ik-skel-lines { display: flex; flex-direction: column; gap: 8px; }512.ik-skel-lines .ik-skel { height: 12px; }513.ik-skel-lines .ik-skel.short { width: 55%; }514.ik-empty { padding: 14px; border-radius: 12px; background: var(--ik-surface-2); border: 1px dashed var(--ik-border-2); color: var(--ik-muted); font-size: 13.5px; text-align: center; line-height: 1.45; }515.ik-error { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--ik-warning-soft); color: var(--ik-warning); font-size: 13.5px; }516.ik-error button { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 999px; padding: 6px 12px; font: 600 12.5px var(--font-body); cursor: pointer; min-height: 36px; }517.ik-page-error { max-width: 520px; margin: 60px auto; text-align: center; padding: 0 16px; }518.ik-page-error h2 { font-family: var(--font-display); letter-spacing: -0.02em; }519.ik-page-error p { color: var(--ik-text-2); }520.ik-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom) + var(--consent-h, 0px)); transform: translateX(-50%); z-index: var(--z-toast, 950); background: var(--ik-text); color: #fff; font: 600 13px var(--font-body); padding: 10px 16px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); animation: ik-up 0.25s ease; max-width: calc(100vw - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }521522/* ---- prix / marché ---- */523.ik-market-head { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }524.ik-market-big { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -0.03em; line-height: 1; }525.ik-market-big small { font: 500 13px var(--font-body); color: var(--ik-muted); margin-left: 4px; letter-spacing: 0; }526.ik-market-sub { font-size: 13px; color: var(--ik-text-2); margin-top: 4px; }527.ik-histo { display: block; width: 100%; max-width: 520px; height: auto; margin: 12px 0 4px; }528.ik-histo-bar { fill: #dedfd9; }529.ik-histo-bar.on { fill: var(--ik-accent); }530.ik-histo-lbl { font: 700 10px var(--font-body); fill: var(--ik-text); }531.ik-histo-lbl.fv { fill: var(--ik-text-2); }532.ik-histo-axis { font: 500 9.5px var(--font-body); fill: var(--ik-muted); }533.ik-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ik-text-2); margin: 6px 0 0; }534.ik-meta b { color: var(--ik-text); }535536/* jauge du registre des loyers */537.ik-gauge { margin: 14px 0 6px; }538.ik-gauge-lbls { display: flex; justify-content: space-between; font: 600 11px var(--font-body); color: var(--ik-muted); margin-bottom: 6px; }539.ik-gauge-lbls .good { color: var(--ik-success); } .ik-gauge-lbls .bad { color: var(--ik-danger); }540.ik-gauge svg { display: block; width: 100%; max-width: 520px; height: auto; overflow: visible; }541.ik-gauge, .ik-gauge-lbls { max-width: 520px; }542.ik-gauge-track { fill: var(--ik-surface-2); stroke: var(--ik-border); }543.ik-gauge-box { fill: #ecece8; }544.ik-gauge-med { stroke: var(--ik-text-2); stroke-width: 1.5; }545.ik-gauge-me { fill: var(--ik-accent); stroke: #fff; stroke-width: 2.5; }546.ik-gauge-txt { font: 600 10.5px var(--font-body); fill: var(--ik-muted); }547.ik-gauge-txt.me { fill: var(--ik-text); font-weight: 700; }548.ik-bars { display: block; width: 100%; max-width: 520px; height: auto; margin: 6px 0 0; }549.ik-bar { fill: #dedfd9; }550.ik-bar.on { fill: var(--ik-accent); }551.ik-bar-val { font: 600 10px var(--font-body); fill: var(--ik-text-2); }552.ik-bar-cat { font: 600 11px var(--font-body); fill: var(--ik-text-2); }553.ik-bar-cat.on { fill: var(--ik-text); font-weight: 700; }554.ik-bar-n { font: 500 9.5px var(--font-body); fill: var(--ik-muted); }555.ik-bars-axe { stroke: var(--ik-border); }556557/* ---- risques / environnement ---- */558.ik-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }559.ik-status-t { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }560.ik-status-d { font-size: 13.5px; color: var(--ik-text-2); margin: 8px 0 0; line-height: 1.5; }561.ik-air { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }562@media (max-width: 400px) { .ik-air { grid-template-columns: repeat(2, minmax(0, 1fr)); } }563.ik-air-c { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ik-border); background: var(--ik-surface-2); min-width: 0; }564.ik-air-p { font: 600 11.5px var(--font-body); color: var(--ik-muted); text-transform: uppercase; letter-spacing: 0.05em; }565.ik-air-v { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }566.ik-air-v small { font: 500 11px var(--font-body); color: var(--ik-muted); margin-left: 3px; }567.ik-air-s { font-size: 11.5px; margin-top: 3px; line-height: 1.3; }568.ik-air-s.good { color: var(--ik-success); } .ik-air-s.warn { color: var(--ik-warning); } .ik-air-s.bad { color: var(--ik-danger); } .ik-air-s.neutral { color: var(--ik-muted); }569570/* ---- coût réel ---- */571.ik-cost { list-style: none; margin: 0; padding: 0; }572.ik-cost li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--ik-border); font-size: 13.5px; }573.ik-cost li:first-child { border-top: 0; }574.ik-cost .n { color: var(--ik-text-2); min-width: 0; }575.ik-cost .v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }576.ik-cost .v.na { color: var(--ik-muted); font-weight: 500; }577.ik-cost li.total { border-top: 1px solid var(--ik-border-2); margin-top: 4px; padding-top: 10px; font-size: 15px; }578.ik-cost li.total .n, .ik-cost li.total .v { color: var(--ik-text); font-weight: 700; }579.ik-cost li.annuel { font-size: 12.5px; color: var(--ik-muted); border-top: 0; padding-top: 0; }580.ik-cost-note { font-size: 12.5px; color: var(--ik-text-2); margin: 8px 0 0; }581582/* ---- dossier de l'immeuble (accordéons) ---- */583.ik-tl { list-style: none; margin: 4px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--ik-border); display: flex; flex-direction: column; gap: 8px; }584.ik-tl li { position: relative; font-size: 13px; color: var(--ik-text-2); }585.ik-tl li::before { content: ""; position: absolute; left: -17.5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--ik-surface); border: 2px solid var(--ik-border-2); }586.ik-tl li.prix::before { border-color: var(--ik-accent); }587.ik-tl li.disparition::before { border-color: var(--ik-danger); }588.ik-tl li.reapparition::before { border-color: var(--ik-success); }589.ik-tl-date { display: inline-block; min-width: 84px; font: 600 11.5px var(--font-body); color: var(--ik-muted); }590.ik-star { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ik-text); display: inline-flex; align-items: center; gap: 5px; }591.ik-star svg { color: #e0a800; }592.ik-quote { margin: 10px 0 0; padding: 8px 12px; font-size: 13px; color: var(--ik-text-2); border-left: 3px solid var(--ik-border-2); background: var(--ik-surface-2); border-radius: 8px; }593.ik-quote footer { margin-top: 4px; font-size: 11.5px; color: var(--ik-muted); }594.ik-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }595.ik-tag { font: 600 11.5px var(--font-body); padding: 2px 8px; border-radius: 999px; background: var(--ik-danger-soft); color: var(--ik-danger); }596.ik-tag.n { background: var(--ik-surface-2); color: var(--ik-text-2); border: 1px solid var(--ik-border); }597598/* ---- KA Scores (cercles compacts) ---- */599.ik-ks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }600@media (max-width: 400px) { .ik-ks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }601.ik-ks-c { text-align: center; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--ik-border); background: var(--ik-surface-2); min-width: 0; }602.ik-ks-c svg { width: 52px; height: 52px; transform: rotate(-90deg); }603.ik-ks-c .bg { fill: none; stroke: #e6e6e1; stroke-width: 5; }604.ik-ks-c .arc { fill: none; stroke: var(--ik-text); stroke-width: 5; stroke-linecap: round; }605.ik-ks-c.haut .arc { stroke: var(--ik-success); } .ik-ks-c.bon .arc { stroke: var(--ik-text); } .ik-ks-c.moyen .arc { stroke: var(--ik-warning); } .ik-ks-c.bas .arc { stroke: var(--ik-danger); }606.ik-ks-wrap { position: relative; width: 52px; height: 52px; margin: 0 auto; }607.ik-ks-v { position: absolute; inset: 0; display: grid; place-items: center; font: 700 15px var(--font-display); letter-spacing: -0.02em; }608.ik-ks-n { font: 600 11.5px var(--font-body); margin-top: 6px; color: var(--ik-text); }609.ik-ks-l { font-size: 10.5px; color: var(--ik-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }610.ik-ks-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 18px; }611.ik-ks-detail h4 { margin: 8px 0 4px; font: 700 12.5px var(--font-body); color: var(--ik-text); }612.ik-ks-detail ul { margin: 0; padding-left: 16px; font-size: 13px; color: var(--ik-text-2); }613.ik-ks-detail li { margin: 2px 0; }614615/* ---- fin de fiche ---- */616.ik-end { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }617@media (min-width: 640px) { .ik-end { grid-template-columns: repeat(4, minmax(0, 1fr)); } }618.ik-end a, .ik-end button { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--ik-border); background: var(--ik-surface); color: var(--ik-text); font: 600 13px var(--font-body); cursor: pointer; text-align: left; min-height: 64px; }619.ik-end a:hover, .ik-end button:hover { background: var(--ik-surface-2); }620.ik-end svg { color: var(--ik-accent-deep); }621.ik-end small { font-weight: 500; color: var(--ik-muted); font-size: 12px; }622.ik-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }623.ik-sources li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--ik-border); font-size: 13px; align-items: center; }624.ik-sources li:first-child { border-top: 0; }625.ik-sources .n { font-weight: 600; grid-column: 1; grid-row: 1; }626.ik-sources .r { font-size: 12.5px; color: var(--ik-text-2); grid-column: 1; grid-row: 2; }627.ik-sources .d { font-size: 12px; color: var(--ik-muted); grid-column: 2; grid-row: 1 / span 2; text-align: right; white-space: nowrap; align-self: start; }628.ik-sources a { color: var(--ik-text-2); text-decoration: underline; text-underline-offset: 2px; }629630631/* ---- ajouts Immo-Ka : héro, galerie, formulaire, tableaux, rôle ---- */632.ik-kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ik-muted); margin-bottom: 4px; }633.ik-gallery-empty { display: grid; place-items: center; aspect-ratio: 4 / 3; }634@media (min-width: 768px) { .ik-gallery-empty { aspect-ratio: 16 / 9; } }635.ik-gallery-empty .type-fallback { position: static; width: 100%; height: 100%; }636.ik-gallery-caption {637 position: absolute; left: 12px; top: 12px; z-index: 2; max-width: calc(100% - 24px);638 background: rgba(20, 24, 20, 0.62); color: #fff; font: 500 12px var(--font-body);639 padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);640 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;641}642.ik-subtitle { margin: 14px 0 8px !important; font-weight: 600 !important; color: var(--ik-text-2) !important; font-size: 13px !important; }643.ik-subtitle small { font-weight: 500; color: var(--ik-muted); }644.ik-more .flip { transform: rotate(180deg); }645.ik-acc-ico { vertical-align: -2px; margin-right: 8px; color: var(--ik-muted); }646.ik-role { margin-top: 14px; }647.ik-tl li.baisse::before { border-color: var(--ik-success); }648.ik-tl li.hausse::before { border-color: var(--ik-warning); }649/* formulaire du calculateur */650.ik-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }651@media (min-width: 640px) { .ik-form { grid-template-columns: repeat(4, minmax(0, 1fr)); } }652.ik-form label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }653.ik-form label span { font-size: 11.5px; color: var(--ik-muted); font-weight: 600; }654.ik-form input, .ik-form select {655 min-height: 42px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--ik-border); background: var(--ik-surface);656 font: 500 15px var(--font-body); color: var(--ik-text); width: 100%; min-width: 0; appearance: none; -webkit-appearance: none;657}658.ik-form select { background-image: linear-gradient(45deg, transparent 50%, var(--ik-muted) 50%), linear-gradient(135deg, var(--ik-muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }659.ik-form input:focus, .ik-form select:focus { outline: 2px solid var(--ik-accent); outline-offset: 1px; }660/* tableaux (pièces, banques, amortissement) */661.ik-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }662.ik-table { width: 100%; border-collapse: collapse; font-size: 13px; }663.ik-table th { text-align: left; font: 600 11.5px var(--font-body); color: var(--ik-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 8px; border-bottom: 1px solid var(--ik-border); white-space: nowrap; }664.ik-table td { padding: 8px 8px; border-bottom: 1px solid var(--ik-border); vertical-align: top; color: var(--ik-text-2); }665.ik-table td:first-child { color: var(--ik-text); font-weight: 500; }666.ik-table tr:last-child td { border-bottom: 0; }667.ik-table a { color: var(--ik-text-2); text-decoration: underline; text-underline-offset: 2px; }668/* aside : courtier */669.ik-aside-broker { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--ik-text-2); }670.ik-aside-broker-k { font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ik-muted); }671.ik-aside-broker b { color: var(--ik-text); }672.ik-aside-broker a { display: inline-flex; align-items: center; gap: 6px; color: var(--ik-text-2); }673/* jauge Vrai-Prix : libellés */674.ik-gauge-lbls { margin-top: 4px; margin-bottom: 0; }675.ik-kv .v a { color: var(--ik-text-2); text-decoration: underline; text-underline-offset: 2px; }676.ik-kv .v { min-width: 0; overflow-wrap: anywhere; }677678/* ---- accessibilité mouvement réduit ---- */679@media (prefers-reduced-motion: reduce) {680 .ik-sheet, .ik-sheet-backdrop, .ik-toast, .ik-kpi.anim .ik-kpi-v { animation: none; }681 .ik-score-ring .arc, .ik-acc-body, .ik-cta-bar { transition: none; }682}683684/* ---- utilitaire a11y ---- */685.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }686