/**
 * Fiche commune — LE MASQUE des 23 fiches, structure validée par Gary
 * (19/08, captures) mise à la sauce Rousseau 5 : page CLAIRE (crème),
 * navy + or, cartes fines bordées. Sections : ka hero clair · kd
 * données de marché (design index) · kg réponse directe (GEO) · kq
 * quartiers · kl terrain · kev évolution · kx analyse · kw cadre de
 * vie + score · ky méthode · kz différence · ko comparer · kb bande
 * acquéreur · kf FAQ · kn voisines · kfin final sombre · kfab bouton
 * flottant « Estimer mon bien ».
 */

.k-cf { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 12px; font-family: var(--font-sans); }
.k-cf-d { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 12px; font-family: var(--font-sans); }
.k-cf-d.center, #page-commune-fiche h2.center, #page-commune-fiche .kf-sub.center { text-align: center; }
.ka-rule { width: 44px; height: 1px; background: var(--gold); margin: 18px 0 0; }
.ka-rule.center { margin: 18px auto 0; }

#page-commune-fiche h2 { font-family: var(--font); font-weight: 400; font-size: clamp(24px, 3vw, 36px); color: var(--green); line-height: 1.2; }

/* ═══ 1. HERO clair ═══ */
.ka { background: var(--cream); padding: 40px 80px 64px; border-bottom: 1px solid var(--border); }
.ka-inner { max-width: 1180px; margin: 0 auto; }
.ka-crumb { font-size: 11.5px; color: var(--text-muted); margin-bottom: 22px; padding: 10px 0; border-bottom: 1px solid var(--border); font-family: var(--font-sans); }
.ka-crumb a { color: var(--text-muted); text-decoration: none; }
.ka-crumb a:hover { color: var(--gold); }
.ka-crumb span { margin: 0 8px; color: var(--text-light); }
.ka-crumb strong { color: var(--green); font-weight: 600; }
.ka h1 { font-family: var(--font); font-weight: 400; font-size: clamp(32px, 4.6vw, 58px); color: var(--green); line-height: 1.08; }
.ka-suffix { color: rgba(8,25,56,0.3); font-size: 80%; }
.ka-intro { margin-top: 26px; font-size: 16px; color: var(--text-muted); line-height: 1.75; max-width: 62ch; font-family: var(--font-sans); }
.ka-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 34px; max-width: 1040px; }
.ka-kpi { background: white; border: 1px solid var(--border); border-radius: 4px; padding: 20px 22px; }
.ka-kpi .l { display: block; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-sans); }
.ka-kpi strong { display: block; margin-top: 10px; font-family: var(--font); font-weight: 400; font-size: 26px; color: var(--green); line-height: 1; }
.ka-kpi strong.up { color: var(--green); }
.ka-kpi strong.up::before { content: "↗ "; color: var(--gold); font-size: 70%; }
.ka-kpi .s { display: block; margin-top: 6px; font-size: 11.5px; color: var(--text-muted); font-family: var(--font-sans); }
.ka-ctas { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.ka-cta { display: inline-flex; align-items: center; min-height: 52px; background: var(--green); color: white; padding: 15px 32px;
  border-radius: 50px; font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; font-family: var(--font-sans);
  transition: background .3s; }
.ka-cta:hover { background: var(--gold); }
.ka-ghost { display: inline-flex; align-items: center; min-height: 52px; background: white; color: var(--green);
  border: 1px solid rgba(8,25,56,0.25); padding: 15px 30px; border-radius: 50px; font-size: 11.5px; letter-spacing: 0.13em;
  text-transform: uppercase; cursor: pointer; font-family: var(--font-sans); transition: border-color .3s, color .3s; }
.ka-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ═══ 1bis. LA COMMUNE EN RÉSUMÉ ═══ */
.kp { background: var(--cream); padding: 70px 80px; }
.kp-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; }
.kp p { margin-top: 18px; font-size: 14px; color: var(--text-muted); line-height: 1.9; font-family: var(--font-sans); }
.kp-facts { border: 1px solid var(--border); border-radius: 20px; padding: 24px 28px; background: white;
  box-shadow: 0 14px 30px rgba(8,25,56,0.04); }
.kp-facts h3 { font-family: var(--font); font-weight: 500; font-size: 18px; color: var(--green); margin-bottom: 14px; }
.kp-facts li { list-style: none; padding: 11px 0; border-bottom: 1px solid var(--border); display: flex;
  justify-content: space-between; align-items: baseline; gap: 16px; font-size: 12.5px; color: var(--text-muted); font-family: var(--font-sans); }
.kp-facts li:last-child { border-bottom: none; }
.kp-facts li strong { color: var(--green); font-weight: 600; text-align: right; }

/* ═══ 2. DONNÉES DE MARCHÉ (design index) ═══ */
.kd { background: white; padding: 76px 80px 70px; }
.kd-inner { max-width: 1080px; margin: 0 auto; }
.kd-copy { margin: 10px 0 30px; font-size: 13px; color: var(--text-muted); line-height: 1.7; max-width: 70ch; font-family: var(--font-sans); }
.kd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 24px; overflow: hidden; margin-bottom: 40px; box-shadow: 0 16px 34px rgba(8,25,56,0.05); }
.kd-kpi { background: white; padding: 26px 22px; text-align: center; }
.kd-kpi .v { font-family: var(--font); font-size: clamp(20px, 2.2vw, 30px); color: var(--green); line-height: 1.1; }
.kd-kpi .l { margin-top: 8px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); line-height: 1.5; font-family: var(--font-sans); }
.kd-kpi .d { margin-top: 5px; font-size: 11.5px; color: var(--gold); font-family: var(--font-sans); }
.kd-kpi.hl-m { background: rgba(8,25,56,0.03); border-top: 2px solid var(--green); }
.kd-kpi.hl-a { background: rgba(139,111,71,0.05); border-top: 2px solid var(--gold); }
.kd-kpi.hl-a .v { color: var(--gold); }
.kd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 30px; }
.kd-donutbox { background: var(--cream); border-radius: 24px; padding: 32px; }
.kd-donutbox h3 { font-family: var(--font); font-weight: 500; font-size: 16px; color: var(--green); margin-bottom: 24px; }
.kd-donut-wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.kd-donut { position: relative; width: 150px; height: 150px; flex: 0 0 auto; }
.kd-donut .ring { width: 150px; height: 150px; border-radius: 50%; }
.kd-donut .hole { position: absolute; inset: 24px; border-radius: 50%; background: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* `nowrap` par précaution : le trou fait 102 px et le plus gros volume
   communal en occupe 68 aujourd'hui. Le jour où une commune passera le
   milliard, « 1,2 mrd » ne se coupera pas en deux par-dessus son
   libellé — c'est exactement ce qui est arrivé aux anneaux de la page
   Transactions le 28/08. */
.kd-donut .hole strong { font-family: var(--font); font-weight: 400; font-size: 20px;
	color: var(--green); line-height: 1; white-space: nowrap; }
.kd-donut .hole span { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--text-muted); margin-top: 3px; font-family: var(--font-sans); white-space: nowrap; }
.kd-legend { flex: 1 1 180px; display: flex; flex-direction: column; gap: 10px; }
.kd-leg { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px;
  background: white; border-left: 4px solid var(--green); border-radius: 0 12px 12px 0; }
.kd-leg.gold { border-left-color: var(--gold); }
.kd-leg .n { font-size: 12.5px; font-weight: 500; color: var(--green); font-family: var(--font-sans); }
.kd-leg.gold .n { color: var(--gold); }
.kd-leg .n em { display: block; font-style: normal; font-weight: 400; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.kd-leg .x { font-size: 14px; font-family: var(--font); color: var(--green); white-space: nowrap; }
.kd-leg .x small { font-size: 11px; color: var(--text-muted); font-family: var(--font-sans); margin-left: 5px; }
.kd-note { font-size: 11px; color: var(--text-light); line-height: 1.7; font-family: var(--font-sans); }

.kd-sales { margin-top: 40px; }
.kd-sales h3 { font-family: var(--font); font-weight: 400; font-size: clamp(20px, 2.2vw, 28px); color: var(--green); line-height: 1.25; }
.kd-sales-copy { margin: 10px 0 22px; font-size: 13px; color: var(--text-muted); line-height: 1.7; max-width: 70ch; font-family: var(--font-sans); }
.kd-sales-wrap { border: 1px solid var(--border); border-radius: 24px; overflow-x: auto; box-shadow: 0 16px 34px rgba(8,25,56,0.05); margin-bottom: 12px; }
.kd-sales-wrap td { white-space: nowrap; }

/* Tables partagées */
#page-commune-fiche table { width: 100%; border-collapse: collapse; font-size: 13px; font-family: var(--font-sans); }
#page-commune-fiche th { text-align: left; padding: 12px 16px; font-size: 10px; font-weight: 600; color: var(--green);
  letter-spacing: 0.08em; text-transform: uppercase; background: rgba(0,0,0,0.03); border-bottom: 2px solid var(--green); white-space: nowrap; }
#page-commune-fiche th.r, #page-commune-fiche td.r { text-align: right; }
#page-commune-fiche td { padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--text-muted); }
#page-commune-fiche tr:last-child td { border-bottom: none; }
#page-commune-fiche td.c { color: var(--green); font-weight: 600; white-space: nowrap; }
#page-commune-fiche td.c a { color: var(--green); text-decoration: none; border-bottom: 1px solid rgba(139,111,71,0.35); }
#page-commune-fiche td.c a:hover { color: var(--gold); }
#page-commune-fiche td strong { color: var(--green); font-weight: 600; }
#page-commune-fiche td.p { font-size: 12px; }
#page-commune-fiche td.e { color: #2d5a8a; font-weight: 600; text-align: right; white-space: nowrap; }

/* ═══ 3. RÉPONSE DIRECTE (GEO) ═══ */
.kg { background: var(--cream); padding: 56px 80px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.kg-inner { max-width: 880px; margin: 0 auto; background: rgba(8,25,56,0.03); border-left: 3px solid var(--gold); padding: 28px 34px; }
.kg-inner p { font-size: 14.5px; color: var(--text); line-height: 1.85; font-family: var(--font-sans); }
.kg-inner strong { color: var(--green); }
.kg-inner a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
/* Le contact est un bouton (formulaire → Apimo), habillé comme le lien qu'il remplace. */
.kg-inner .cf-ecrire { background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
	color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

/* ═══ 4. QUARTIERS ═══ */
.kq { background: var(--cream); padding: 76px 80px; }
.kq-inner { max-width: 980px; margin: 0 auto; }
.kq-copy { margin: 22px auto 26px; font-size: 13.5px; color: var(--text-muted); line-height: 1.7; max-width: 60ch; text-align: center; font-family: var(--font-sans); }
.kq-wrap { background: white; border: 1px solid var(--border); border-radius: 4px; overflow-x: auto; }
.kq tbody tr:nth-child(even) { background: rgba(248,245,240,0.7); }

/* ═══ 5. TERRAIN ═══ */
.kl { background: white; padding: 76px 80px; border-top: 1px solid var(--border); }
.kl-inner { max-width: 1080px; margin: 0 auto; }
.kl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 26px; flex-wrap: wrap; }
.kl-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(8,25,56,0.04); border: 1px solid rgba(8,25,56,0.1);
  padding: 8px 16px; font-size: 11px; color: var(--green); font-weight: 600; font-family: var(--font-sans); }
.kl-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }
/* Un élément de grille ne rétrécit pas sous son contenu tant qu'il garde
   min-width:auto — le tableau des secteurs (601 px) étirait donc sa
   colonne à 603 px sur mobile, débordant la grille et emportant le
   graphique d'évolution avec lui. min-width:0 rend la main à la grille,
   et le tableau retrouve le défilement de .kl-wrap. */
.kl-grid > * { min-width: 0; }
.kl-wrap { border: 1px solid var(--border); overflow-x: auto; }
.kl-wrap th { background: var(--green); color: white; border-bottom: none; }
.kl-note { margin-top: 10px; font-size: 10px; color: var(--text-muted); line-height: 1.6; font-family: var(--font-sans); }
.kl-evo { background: var(--cream); padding: 26px 24px; }
.kl-evo-k { display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; font-family: var(--font-sans); }
.kl-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-family: var(--font-sans); }
.kl-bar .y { font-size: 11px; color: var(--text-muted); width: 36px; }
.kl-bar .track { flex: 1; background: var(--border); height: 6px; }
.kl-bar .fill { height: 100%; background: var(--green); }
.kl-bar .v { font-size: 11px; color: var(--text-muted); width: 46px; text-align: right; }
.kl-bar.last .y, .kl-bar.last .v { color: var(--gold); font-weight: 600; }
.kl-bar.last .fill { background: var(--gold); }
.kl-gain { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.kl-gain strong { display: block; font-size: 13px; color: var(--green); font-family: var(--font); font-weight: 500; }
.kl-gain span { display: block; font-size: 11px; color: var(--text-muted); margin-top: 3px; font-family: var(--font-sans); }

/* ═══ 6. ÉVOLUTION ═══ */
.kev { background: var(--cream); padding: 76px 80px; }
.kev-inner { max-width: 880px; margin: 0 auto; }
.kev-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.kev-card { background: white; border: 1px solid var(--border); padding: 24px 20px; text-align: center; }
.kev-card .y { display: block; font-size: 10.5px; letter-spacing: 0.16em; color: var(--text-muted); font-family: var(--font-sans); }
.kev-card strong { display: block; margin-top: 10px; font-family: var(--font); font-weight: 400; font-size: 26px; color: var(--green); }
.kev-card .s { display: block; margin-top: 8px; font-size: 11px; color: var(--text-light); font-family: var(--font-sans); }
.kev-card.now { background: var(--green); border-color: var(--green); }
.kev-card.now .y { color: rgba(255,255,255,0.5); }
.kev-card.now strong { color: white; }
.kev-card.now .s { color: var(--gold-light); }
.kev-total { margin-top: 14px; background: white; border: 1px solid var(--border); padding: 22px; text-align: center; font-family: var(--font-sans); }
.kev-total span { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; }
.kev-total strong { font-family: var(--font); font-weight: 500; font-size: 22px; color: var(--green); }
.kev-total em { font-style: italic; font-size: 13px; color: var(--gold); font-family: var(--font); margin-left: 6px; }

/* ═══ 7. ANALYSE ═══ */
.kx { background: white; padding: 76px 80px; border-top: 1px solid var(--border); }
.kx-inner { max-width: 880px; margin: 0 auto; }
.kx p { margin-top: 26px; font-size: 15px; color: var(--text-muted); line-height: 1.95; font-family: var(--font-sans); }

/* ═══ 8. CADRE DE VIE + SCORE ═══ */
.kw { background: var(--cream); padding: 76px 80px; }
.kw-inner { max-width: 1120px; margin: 0 auto; }
.kw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.kw-card { background: white; border: 1px solid var(--border); padding: 24px 22px; }
.kw-card h3 { font-family: var(--font); font-weight: 500; font-size: 17px; color: var(--green); margin-bottom: 14px; }
.kw-card li { list-style: none; position: relative; padding: 5px 0 5px 16px; font-size: 12.5px; color: var(--text-muted); line-height: 1.55; font-family: var(--font-sans); }
.kw-card li::before { content: "•"; position: absolute; left: 0; color: var(--gold); }
.kw-fisc strong { display: block; font-family: var(--font); font-weight: 400; font-size: 30px; color: var(--green); }
.kw-fisc span { display: block; margin-top: 4px; font-size: 11px; color: var(--text-muted); font-family: var(--font-sans); }
.kw-fisc p { margin-top: 12px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; font-family: var(--font-sans); }
.kw-score { margin-top: 24px; background: var(--green); padding: 30px 36px; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.kw-score-note .l { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); font-family: var(--font-sans); }
.kw-score-note strong { display: block; margin-top: 6px; font-family: var(--font); font-weight: 400; font-size: 44px; color: var(--gold-light); line-height: 1; }
.kw-score-note strong small { font-size: 18px; color: rgba(255,255,255,0.4); }
.kw-score-copy { flex: 1 1 380px; }
.kw-score-copy p { font-size: 13.5px; color: rgba(255,255,255,0.85); line-height: 1.7; font-family: var(--font-sans); }
.kw-score-copy span { display: block; margin-top: 10px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); font-family: var(--font-sans); }
.kw-score-copy span strong { color: var(--gold-light); }

/* ═══ 9. MÉTHODE / 10. DIFFÉRENCE ═══ */
.ky { background: white; padding: 76px 80px; border-top: 1px solid var(--border); }
.ky-inner, .kz-inner { max-width: 1000px; margin: 0 auto; }
.ky-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; }
.ky-card { border: 1px solid var(--border); padding: 30px 32px; background: white; transition: border-color .3s; }
.ky-card:hover { border-color: rgba(139,111,71,0.5); }
.ky-card .num { font-family: var(--font); font-size: 24px; color: rgba(139,111,71,0.45); }
.ky-card h3 { margin: 10px 0 10px; font-family: var(--font); font-weight: 500; font-size: 18px; color: var(--green); }
.ky-card p { font-size: 13px; color: var(--text-muted); line-height: 1.75; font-family: var(--font-sans); }
.kz { background: var(--cream); padding: 76px 80px; }
.kz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.kz-card { background: white; border: 1px solid var(--border); padding: 26px 24px; transition: border-color .3s; }
.kz-card:hover { border-color: rgba(139,111,71,0.5); }
.kz-card h3 { font-family: var(--font); font-weight: 500; font-size: 16.5px; color: var(--green); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.kz-card h3::before { content: ""; width: 16px; height: 1px; background: var(--gold); flex: 0 0 auto; }
.kz-card p { font-size: 12.5px; color: var(--text-muted); line-height: 1.7; font-family: var(--font-sans); }

/* ═══ 11. COMPARER ═══ */
.ko { background: white; padding: 76px 80px; border-top: 1px solid var(--border); }
.ko-inner { max-width: 980px; margin: 0 auto; }
.ko-wrap { margin-top: 34px; border: 1px solid var(--border); overflow-x: auto; }
.ko tr.here { background: rgba(8,25,56,0.05); }
.ko tr.here td { border-top: 2px solid var(--green); border-bottom: 2px solid var(--green); }

/* ═══ 12. BANDE ACQUÉREUR ═══ */
.kb { background: var(--cream); padding: 44px 80px; border-top: 1px solid var(--border); }
.kb-inner { max-width: 980px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  border: 1px dashed rgba(139,111,71,0.4); padding: 24px 30px; background: rgba(255,255,255,0.6); }
.kb-inner p { font-size: 13px; color: var(--text-muted); line-height: 1.7; max-width: 58ch; font-family: var(--font-sans); }
.kb-inner p strong { color: var(--green); }
.kb-inner a { display: inline-flex; align-items: center; min-height: 46px; background: var(--green); color: white; padding: 13px 26px;
  border-radius: 50px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  font-family: var(--font-sans); transition: background .3s; }
.kb-inner a:hover { background: var(--gold); }

/* ═══ 13. FAQ ═══ */
.kf { background: white; padding: 76px 80px; border-top: 1px solid var(--border); }
.kf-inner { max-width: 880px; margin: 0 auto; }
.kf-sub { margin-top: 12px; font-size: 14px; color: var(--text-muted); font-family: var(--font-sans); }
.kf .ka-rule.center { margin-bottom: 34px; }
.kf-item { border-bottom: 1px solid var(--border); }
.kf-item summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; color: var(--green); font-family: var(--font); font-size: 18px; line-height: 1.4; }
.kf-item summary::-webkit-details-marker { display: none; }
.kf-item summary::after { content: "⌄"; flex: 0 0 auto; color: var(--gold); font-size: 16px; transition: transform .3s; }
.kf-item[open] summary::after { transform: rotate(180deg); }
.kf-item p { margin: 0; padding: 0 0 22px; font-size: 13.5px; color: var(--text-muted); line-height: 1.85; max-width: 70ch; font-family: var(--font-sans); }

/* ═══ 14. VOISINES ═══ */
.kn { background: var(--cream); padding: 64px 80px; }
.kn-inner { max-width: 880px; margin: 0 auto; text-align: center; }
.kn-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.kn-links a { padding: 13px 24px; border: 1px solid rgba(8,25,56,0.25); border-radius: 50px; background: white; font-size: 12.5px; color: var(--green);
  text-decoration: none; font-family: var(--font-sans); transition: border-color .25s, color .25s; }
.kn-links a:hover { border-color: var(--gold); color: var(--gold); }
.kn-all { display: inline-block; margin-top: 26px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green); text-decoration: none; border-bottom: 1px solid rgba(139,111,71,0.4); padding-bottom: 3px; font-family: var(--font-sans); }
.kn-all:hover { color: var(--gold); }

/* ═══ 15. FINAL ═══ */
.kfin { background: var(--green-700); padding: 90px 80px; text-align: center; }
.kfin-inner { max-width: 640px; margin: 0 auto; }
.kfin p { font-size: 15px; color: rgba(255,255,255,0.8); line-height: 1.75; font-family: var(--font-sans); }
.kfin-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.kfin-ctas .solid { display: inline-flex; align-items: center; min-height: 52px; background: var(--cream); color: var(--green);
  padding: 15px 32px; border-radius: 50px; font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none;
  font-family: var(--font-sans); transition: background .3s; }
.kfin-ctas .solid:hover { background: white; }
.kfin-ctas .ghost { display: inline-flex; align-items: center; min-height: 52px; background: none; color: white;
  border: 1px solid rgba(255,255,255,0.4); padding: 15px 30px; border-radius: 50px; font-size: 11.5px; letter-spacing: 0.13em;
  text-transform: uppercase; cursor: pointer; font-family: var(--font-sans); transition: border-color .3s; }
.kfin-ctas .ghost:hover { border-color: var(--gold-light); }

/* ═══ Bouton flottant « Estimer mon bien » ═══ */
.kfab { position: fixed; right: 24px; bottom: 28px; z-index: 90; display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: white; padding: 15px 26px; border-radius: 50px; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; font-family: var(--font-sans);
  box-shadow: 0 16px 36px rgba(4,10,24,0.35); opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s, transform .3s, visibility 0s .3s, background .3s; }
.kfab::before { content: "▦"; color: var(--gold-light); font-size: 13px; }
.kfab.on { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.kfab:hover { background: var(--gold); }

/* ═══ Responsive ═══ */
@media (max-width: 980px) {
  .ka, .kp, .kd, .kg, .kq, .kl, .kev, .kx, .kw, .ky, .kz, .ko, .kb, .kf, .kn, .kfin { padding-left: 24px; padding-right: 24px; }
  .ka-kpis, .kw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kd-split, .ky-grid, .kp-inner { grid-template-columns: 1fr; }
  .kz-grid { grid-template-columns: 1fr 1fr; }
  .kl-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .ka-kpis, .kw-grid, .kz-grid { grid-template-columns: 1fr; }
  .kev-cards { grid-template-columns: 1fr; }
  .kfab { right: 14px; bottom: 16px; padding: 13px 20px; }
}

/* ═══ 11bis. Nos réalisations dans la commune (20/08) ═══════════════
   Bloc de preuve : n'apparaît que si R5 a commercialisé des programmes
   sur la commune. Même grammaire visuelle que les cartes du masque. */
.kr { padding: 96px 0; background: var(--r5-cream, #F6F4EF); }
.kr-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.kr-copy { max-width: 680px; margin: 18px auto 44px; color: #5A5A56; line-height: 1.7; }
.kr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.kr-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(20,38,70,.10);
	border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit;
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.kr-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(20,38,70,.12); border-color: rgba(139,111,71,.35); }
/* 16/9 au lieu de 16/10 : bande image un peu moins haute (retour Gary
   27/08), et servie en 1136 px — nette à la largeur de la carte. */
.kr-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #ECE8E0; }
.kr-img img { width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.kr-card:hover .kr-img img { transform: scale(1.045); }
/* La bande d'une carte sans photo : même format que les autres, donc
   même hauteur, donc plus de blanc au milieu de la rangée. L'initiale
   au bleu de la marque, très en retrait — elle occupe, elle ne crie
   pas. */
.kr-img-vide {
  position: relative;
  background: linear-gradient(135deg, #081938 0%, #103060 100%);
  display: flex; align-items: center; justify-content: center;
}
.kr-img-vide > span {
  font-family: var(--r5-serif, Georgia, serif);
  font-size: clamp(46px, 7vw, 64px); line-height: 1;
  color: rgba(255,255,255,.13); letter-spacing: .04em;
  transition: color .6s cubic-bezier(.22,.61,.36,1);
}
.kr-card:hover .kr-img-vide > span { color: rgba(196,168,130,.28); }

/* Le corps prend la place restante et pousse le pied vers le bas :
   deux cartes de contenus inégaux se terminent alors à la même ligne. */
.kr-body { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 26px; flex: 1 1 auto; }
.kr-body .kr-link { margin-top: auto; padding-top: 12px; }
.kr-status { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #1E4D3E; font-weight: 600; }
.kr-card.is-sold .kr-status { color: #8B6F47; }
.kr-body strong { font-family: var(--r5-serif, Georgia, serif); font-size: 22px; font-weight: 500; color: #14213F; }
.kr-sub { font-size: 14px; color: #5A5A56; }
.kr-meta { font-size: 13px; color: var(--text-quiet); margin-top: 2px; }
.kr-link { margin-top: 12px; font-size: 13px; letter-spacing: .06em; color: #8B6F47; }
@media (max-width: 640px) { .kr { padding: 64px 0; } .kr-grid { grid-template-columns: 1fr; } }
.kr-card.is-avenir .kr-status { color: #8B6F47; }
.kr-card.is-flat { cursor: default; }
.kr-card.is-flat:hover { transform: none; box-shadow: none; border-color: rgba(20,38,70,.10); }

/* Commune sans vente depuis le 1er janvier : on l'explique plutôt que
   de faire disparaître tout le bloc (20/08). */
.kd-empty { max-width: 760px; margin: 8px 0 34px; color: rgba(255,255,255,.72);
	line-height: 1.7; font-size: 15px; }

/* ═══ RUE PAR RUE ════════════════════════════════════════════════════
 *
 * La liste des rues où il s'est vendu. Elle prolonge le tableau des
 * ventes et en reprend la typographie — même titre, même note de bas de
 * bloc : c'est la même information, vue par la rue plutôt que par la
 * transaction.
 *
 * Une grille plutôt qu'un tableau : il n'y a pas de colonnes à
 * comparer, seulement des entrées à parcourir. À 83 rues (Genève), un
 * tableau imposerait un défilement interminable ; la grille remplit la
 * largeur disponible et s'adapte seule.
 */
.kd-rues { margin-top: 44px; }
.kd-rues h3 { font-family: var(--font); font-weight: 400; font-size: clamp(20px, 2.2vw, 28px); color: var(--green); line-height: 1.25; }
.kd-rues-copy { margin: 10px 0 22px; font-size: 13px; color: var(--text-muted); line-height: 1.7; max-width: 70ch; font-family: var(--font-sans); }

.kd-rues-liste {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: grid;
	/* auto-fill, pas auto-fit : une commune à une seule rue (Choulex)
	   ne doit pas voir son unique ligne s'étirer sur toute la largeur. */
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	border-radius: 24px;
	overflow: hidden;
}

.kd-rue {
	background: #FFFFFF;
	padding: 14px 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	font-family: var(--font-sans);
}

.kd-rue-nom { font-size: 14px; color: var(--text); flex: 1 1 100%; line-height: 1.4; }
.kd-rue-n { font-size: 12px; color: var(--text-muted); }
/* Les chiffres s'alignent quand l'œil descend la colonne. */
.kd-rue-med { font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
	.kd-rues-liste { grid-template-columns: 1fr; border-radius: 16px; }
	.kd-rue { padding: 12px 16px; }
}

/* Le dépliant des rues restantes. Il ne cache rien à un moteur — le
   contenu est dans le HTML — il épargne seulement 2 900 pixels au
   lecteur qui n'a pas demandé la liste complète. */
.kd-rues-plus { margin: 0 0 12px; }
.kd-rues-plus > summary {
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--gold);
	padding: 12px 2px;
	list-style: none;
}
.kd-rues-plus > summary::-webkit-details-marker { display: none; }
.kd-rues-plus > summary::after { content: " ↓"; }
.kd-rues-plus[open] > summary::after { content: " ↑"; }
.kd-rues-plus > summary:hover, .kd-rues-plus > summary:focus-visible { text-decoration: underline; }
.kd-rues-plus .kd-rues-liste { margin-top: 4px; }