/* =====================================================================
   Pages « marché » (prix au m², loyers, taxe foncière), 23/10/2026.
   Maquette : docs/mockups/2026-10-23_pages_axes/marche_*.html.
   Teinte de l'axe marché : --cs-mk-1..5 (_tokens.css), avec repli sur des
   jetons existants tant qu'un navigateur garde l'ancienne feuille en cache.
   Jetons --cs-* uniquement ; chiffres alignés (tabular-nums, hérité de .cs-viz).
   ===================================================================== */
.cs-mk {
  --mk-1: var(--cs-mk-1, var(--cs-purple-soft));
  --mk-2: var(--cs-mk-2, var(--cs-risk-proj-soft));
  --mk-3: var(--cs-mk-3, var(--cs-ev-wind));
  --mk-4: var(--cs-mk-4, var(--cs-purple));
  --mk-5: var(--cs-mk-5, var(--cs-purple-deep));
}
.cs-mk .cs-viz-kick { color: var(--mk-4); }
.cs-mk .cs-viz-verdict__n { color: var(--mk-5); }
.cs-mk-unite { font-size: 24px; font-weight: 800; color: var(--cs-mute-soft); letter-spacing: -.02em; }
.cs-mk .cs-viz-sec__ic { background: var(--mk-1); color: var(--mk-4); }
.cs-mk .cs-viz-mini i { background: var(--mk-4); }
.cs-mk .cs-viz-big { font-size: 34px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.cs-mk .cs-viz-big small { font-size: 13px; font-weight: 700; color: var(--cs-mute-soft); margin-left: 4px; letter-spacing: 0; }
.cs-mk-espace { height: 22px; }
.cs-mk-h-bas { margin: 0; font-size: 17px; }
.cs-mk .cs-viz-alerte__hist i.on { background: var(--mk-3); }
.cs-mk-note {font-size: 12.5px; color: var(--cs-mute-soft); margin: 8px 2px 0; line-height: 1.5; }

/* Bande « un point par commune du département » */
.cs-mk-bande-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--cs-mute-soft); font-weight: 600; margin-top: 14px; }
.cs-mk-bande { position: relative; height: 56px; margin: 2px 10px 0; }
.cs-mk-bande i { position: absolute; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--mk-2); opacity: .85; transform: translateX(-50%); border: 1.5px solid var(--cs-bg-elevated); cursor: pointer; }
.cs-mk-bande i.on { width: 16px; height: 16px; top: 19px; background: var(--mk-5); opacity: 1; z-index: 2; box-shadow: 0 0 0 2px var(--cs-bg-elevated); }
.cs-mk-bande__lab { position: absolute; top: 0; transform: translateX(-50%); font-size: 11.5px; font-weight: 800; white-space: nowrap; color: var(--mk-5); }
.cs-mk-bande__lab.is-g { transform: none; margin-left: -8px; }
.cs-mk-bande__lab.is-d { transform: translateX(-100%); margin-left: 8px; }
.cs-mk-bande__ax { position: absolute; top: 40px; font-size: 10.5px; color: var(--cs-mute-soft); transform: translateX(-50%); white-space: nowrap; }

/* Graphiques SVG */
.cs-mk-chart { display: block; width: 100%; height: auto; overflow: visible; }
.cs-mk-chart text { font-family: var(--cs-font-body); }
.cs-mk-chart .ax { font-size: 11px; fill: var(--cs-mute-soft); }
.cs-mk-chart .axb { fill: var(--cs-ink-deep); font-weight: 700; }
.cs-mk-chart .ans { font-size: 10.5px; fill: var(--cs-mute-soft); }
.cs-mk-chart .tag { font-size: 11.5px; font-weight: 700; fill: var(--cs-bg-elevated); }
.cs-mk-chart .v { font-size: 11.5px; font-weight: 800; }
.cs-mk-chart .vA { fill: var(--mk-5); } .cs-mk-chart .vM { fill: var(--mk-4); }
.cs-mk-chart .hA { fill: var(--mk-4); } .cs-mk-chart .hM { fill: var(--mk-2); }
.cs-mk-chart rect { transition: opacity .15s; }
.cs-mk-chart .vol { fill: var(--cs-paper-3); cursor: pointer; }
.cs-mk-chart .ln-moi { stroke-width: 2.8; } .cs-mk-chart .ln-dep { stroke-width: 1.6; stroke-dasharray: 5 4; opacity: .75; }
.cs-mk-chart .lnA { stroke: var(--mk-4); } .cs-mk-chart .lnM { stroke: var(--mk-3); }
.cs-mk-chart .ptA, .cs-mk-chart .ptM { fill: var(--cs-bg-elevated); stroke-width: 2.2; cursor: pointer; }
.cs-mk-chart .ptA { stroke: var(--mk-4); } .cs-mk-chart .ptM { stroke: var(--mk-3); }
.cs-mk-moi { stroke: var(--cs-ink-deep); stroke-width: 1.6; }
.cs-mk-tagfond { fill: var(--cs-ink-deep); }
.cs-mk-ref { stroke: var(--cs-mute-soft); stroke-dasharray: 3 3; }
.cs-mk-axe { stroke: var(--cs-line); }
.cs-mk-grille { stroke: var(--cs-line); }
#mk-hist.f-A .hM, #mk-hist.f-M .hA { opacity: .08; }
.cs-mk-iA, .cs-mk-iM { display: inline-block; }
.cs-mk-iA { background: var(--mk-4); } .cs-mk-iM { background: var(--mk-2); }
.cs-mk-chips .cs-viz-chip[aria-pressed="true"] { background: var(--cs-ink-deep); color: var(--cs-bg-elevated); border-color: var(--cs-ink-deep); }
.cs-mk-chips .cs-viz-chip[aria-pressed="true"] .c { color: var(--cs-dark-text); }
.cs-mk-seul-m { display: none; }
.cs-mk-leg .cs-mk-pastille { display: inline-block; width: 10px; height: 10px; border: 0; border-radius: 50%; vertical-align: -1px; margin-right: 5px; }
.cs-mk-pastille--a, .cs-mk-pastille--credit { background: var(--mk-4); }
.cs-mk-pastille--m { background: var(--mk-3); }
.cs-mk-pastille--loyer { background: var(--mk-2); }

/* Barres avec médiane (taille, loyers, rues) */
.cs-mk-dbt { position: relative; height: 30px; }
.cs-mk-dbt .ln { position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: var(--cs-paper-3); }
.cs-mk-dbt .seg { position: absolute; top: 10px; height: 10px; border-radius: 5px; background: var(--mk-2); }
.cs-mk-dbt .me { position: absolute; top: 7px; width: 16px; height: 16px; border-radius: 50%; transform: translateX(-50%); background: var(--mk-5); border: 2.5px solid var(--cs-bg-elevated); box-shadow: 0 0 0 1px var(--cs-line); }
.cs-mk-dbt .lab { position: absolute; top: -6px; transform: translateX(-50%); font-size: 11px; font-weight: 800; white-space: nowrap; color: var(--cs-ink-deep); }
.cs-mk-dbt .labf { position: absolute; top: 25px; transform: translateX(-50%); font-size: 10.5px; color: var(--cs-mute-soft); white-space: nowrap; }
.cs-mk-tailles { display: flex; flex-direction: column; gap: 4px; }
.cs-mk-sz-h { font-size: 11.5px; font-weight: 800; color: var(--cs-mute-soft); text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }
.cs-mk-sz { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 12.5px; }
.cs-mk-sz__n b { display: block; font-size: 13px; }
.cs-mk-sz__n span { color: var(--cs-mute-soft); font-size: 11.5px; }
.cs-mk-sz__na { font-size: 11.5px; color: var(--cs-mute-soft); }
.cs-mk-sz--M .cs-mk-dbt .seg { background: var(--mk-1); }
.cs-mk-sz--M .cs-mk-dbt .me { background: var(--mk-3); }
.cs-mk-db { display: flex; flex-direction: column; gap: 12px; }
.cs-mk-dbr { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 12.5px; }
.cs-mk-dbt--loyer { margin: 0 8px; }

/* Rues */
.cs-mk-rues { display: flex; flex-direction: column; gap: 2px; }
.cs-mk-rue { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 62px; gap: 10px; align-items: center; font-size: 12.5px; }
.cs-mk-rue__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-mk-rue__x { text-align: right; font-weight: 800; }
.cs-mk-dbt--fin { height: 22px; }
.cs-mk-dbt--fin .ln { top: 10px; }
.cs-mk-dbt--fin .seg { top: 7px; height: 8px; border-radius: 4px; }
.cs-mk-dbt--fin .me { top: 4px; width: 14px; height: 14px; border-width: 2px; }
.cs-mk-dbt .ref { position: absolute; top: 0; bottom: 0; border-left: 1.5px dashed var(--cs-mute-soft); }
.cs-mk-rue-ecart { font-size: 11px; color: var(--cs-mute-soft); text-align: center; padding: 3px 0; border-top: 1px dashed var(--cs-line); border-bottom: 1px dashed var(--cs-line); margin: 3px 0; }

/* Carte des ventes */
.cs-mk-map { border-radius: 12px; overflow: hidden; background: var(--cs-bg-subtle); min-height: 120px; }
.cs-mk-map svg { display: block; width: 100%; height: auto; }
.cs-mk-map__vide { margin: 0; padding: 48px 12px; text-align: center; font-size: 13px; color: var(--cs-mute-soft); }
.cs-mk-com { fill: var(--cs-bg-elevated); stroke: none; }
.cs-mk-com-out { fill: none; stroke: var(--cs-ink-deep); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cs-mk-map .sv { stroke: var(--cs-bg-elevated); stroke-width: 1.2; vector-effect: non-scaling-stroke; cursor: pointer; }
.cs-mk-map .sv:hover { stroke: var(--cs-ink-deep); stroke-width: 2; }
.cs-mk-map .sv.q0 { stroke: var(--mk-3); }
.cs-mk-scl { stroke: var(--cs-ink-deep); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cs-mk-scl-t { font-size: 22px; font-weight: 700; fill: var(--cs-ink-deep); font-family: var(--cs-font-body); }
.cs-mk .q0 { fill: var(--mk-1); background: var(--mk-1); } .cs-mk .q1 { fill: var(--mk-2); background: var(--mk-2); }
.cs-mk .q2 { fill: var(--mk-3); background: var(--mk-3); } .cs-mk .q3 { fill: var(--mk-4); background: var(--mk-4); }
.cs-mk .q4 { fill: var(--mk-5); background: var(--mk-5); }
.cs-mk-mapleg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--cs-mute); font-weight: 600; }
.cs-mk-mapleg span { display: inline-flex; align-items: center; gap: 6px; }
.cs-mk-mapleg i { display: inline-block; width: 16px; height: 11px; border-radius: 3px; border: 1px solid var(--cs-line); }

/* Tableau des ventes */
.cs-mk-tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cs-mk-tbl table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cs-mk-tbl th { text-align: left; font-size: 11px; color: var(--cs-mute-soft); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--cs-line); white-space: nowrap; }
.cs-mk-tbl td { padding: 8px; border-bottom: 1px solid var(--cs-line); white-space: nowrap; }
.cs-mk-tbl .num { text-align: right; }
.cs-mk-tbl tr:last-child td { border-bottom: 0; }

/* Simulateur */
.cs-mk-simu { background: linear-gradient(180deg, var(--mk-1), var(--cs-bg-elevated) 140px); }
.cs-mk-sim { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 22px; align-items: start; }
.cs-mk-sim__in { display: flex; flex-direction: column; gap: 14px; background: var(--cs-bg-elevated); border: 1px solid var(--cs-line); border-radius: 14px; padding: 14px; }
.cs-mk-seg { display: flex; background: var(--cs-paper-3); border-radius: 11px; padding: 3px; gap: 3px; }
.cs-mk-seg button { flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 9px 8px; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--cs-mute); cursor: pointer; }
.cs-mk-seg button[aria-pressed="true"] { background: var(--cs-bg-elevated); color: var(--cs-ink-deep); box-shadow: var(--cs-shadow-low); }
.cs-mk-seg button:focus-visible { outline: 2px solid var(--cs-teal); outline-offset: 1px; }
.cs-mk-rng { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--cs-mute); }
.cs-mk-rng > span { display: flex; justify-content: space-between; }
.cs-mk-rng b { color: var(--cs-ink-deep); font-size: 15px; }
.cs-mk-rng input { width: 100%; accent-color: var(--mk-4); height: 22px; margin: 0; }
.cs-mk-sim__out { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cs-mk-so-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cs-mk-so-l { font-size: 12.5px; color: var(--cs-mute-soft); font-weight: 600; }
.cs-mk-so-prix .cs-mk-so-l { width: 100%; }
.cs-mk-so-v { font-size: 40px; font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--mk-5); }
.cs-mk-so-s { font-size: 12.5px; color: var(--cs-mute); }
.cs-mk-sobars { display: flex; flex-direction: column; gap: 10px; }
.cs-mk-sob { display: grid; grid-template-columns: 150px minmax(0, 1fr) 86px; gap: 10px; align-items: center; }
.cs-mk-sob b { text-align: right; font-size: 17px; font-weight: 900; }
.cs-mk-sob__t { height: 22px; background: var(--cs-paper-3); border-radius: 6px; display: flex; overflow: hidden; }
.cs-mk-sob__t i { display: block; height: 100%; transition: width .25s ease; }
.cs-mk-sob__t .credit { background: var(--mk-4); } .cs-mk-sob__t .loyer { background: var(--mk-2); }
.cs-mk-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cs-mk-kpi { background: var(--cs-bg-subtle); border-radius: 10px; padding: 9px 10px; min-width: 0; }
.cs-mk-kpi__v { font-size: 19px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.cs-mk-kpi__v small { font-size: 11.5px; font-weight: 600; color: var(--cs-mute-soft); margin-left: 2px; }
.cs-mk-kpi__s { font-size: 11px; color: var(--cs-mute-soft); line-height: 1.35; margin-top: 2px; }
.cs-mk-kpi__s .cs-viz-info { display: inline-block; vertical-align: middle; }
.cs-mk-kpi__s .cs-viz-info > button { width: 18px; height: 18px; font-size: 10px; }
.cs-mk-tfapart { margin: 0; font-size: 12.5px; color: var(--cs-mute); line-height: 1.5; padding: 9px 10px; border-radius: 10px; border: 1px dashed var(--cs-line-strong); }
.cs-mk-tfapart .cs-viz-info { display: inline-block; vertical-align: middle; }
.cs-mk-tfapart .cs-viz-info > button { width: 18px; height: 18px; font-size: 10px; }

/* Taxe foncière */
.cs-mk-tf-top { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.cs-mk-tf-cmp { font-size: 12.5px; color: var(--cs-mute); padding-bottom: 3px; }
.cs-mk-sous { margin-top: 6px; }
.cs-mk-tfbars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; height: 120px; align-items: end; }
.cs-mk-tfb { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; font-size: 11px; color: var(--cs-mute-soft); cursor: pointer; min-width: 0; }
.cs-mk-tfb i { display: block; width: 100%; max-width: 46px; background: var(--mk-3); border-radius: 6px 6px 0 0; order: 2; }
.cs-mk-tfb.is-fin i { background: var(--mk-5); }
.cs-mk-tfb b { font-size: 11.5px; color: var(--cs-ink-deep); order: 1; white-space: nowrap; }
.cs-mk-tfb span { order: 3; }

/* Climat dans le prix */
.cs-mk-mes { flex-direction: row; gap: 14px; align-items: flex-start; }
.cs-mk-mes__c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-mk-mes__v { font-size: 30px; font-weight: 900; letter-spacing: -.03em; color: var(--cs-accent-deep); white-space: nowrap; line-height: 1.1; }

/* Pages loyer et taxe foncière : bloc d'éléments marché dans l'ancienne mise en page */
.cs-mk-bloc { margin: 0 0 18px; }
.cs-mk-bloc .cs-viz-sec { margin-top: 24px; }

@media (max-width: 900px) {
  .cs-mk-sim { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .cs-mk-unite { font-size: 20px; }
  .cs-mk-seul-m { display: block; }
  .cs-mk-seul-d { display: none; }
  .cs-mk-seul-m .tag { font-size: 14px; }
  .cs-mk-sz, .cs-mk-dbr { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cs-mk-sz .cs-mk-sz__n, .cs-mk-dbr .cs-mk-sz__n { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
  .cs-mk-dbr .cs-mk-sz__n span { text-align: right; }
  .cs-mk-dbr { margin-bottom: 6px; }
  .cs-mk-rue { grid-template-columns: minmax(0, 1fr) 64px; gap: 2px 8px; }
  .cs-mk-rue__n { grid-column: 1 / 3; }
  .cs-mk-sob { grid-template-columns: minmax(0, 1fr) 80px; gap: 4px 8px; }
  .cs-mk-sob .cs-mk-so-l { grid-column: 1 / 3; }
  .cs-mk-so-v { font-size: 34px; }
  .cs-mk-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cs-mk-mes { flex-direction: column; gap: 4px; }
  .cs-mk-map .sv { r: 11px; }
  .cs-mk-tbl thead { display: none; }
  .cs-mk-tbl tr { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--cs-line); }
  .cs-mk-tbl tr:last-child { border-bottom: 0; }
  .cs-mk-tbl td { padding: 0; border: 0; font-size: 12px; color: var(--cs-mute-soft); white-space: nowrap; }
  .cs-mk-tbl td:nth-child(2) { grid-column: 1 / 4; grid-row: 1; font-size: 13.5px; font-weight: 700; color: var(--cs-ink-deep); overflow: hidden; text-overflow: ellipsis; }
  .cs-mk-tbl td:nth-child(5) { grid-column: 4; grid-row: 1; font-size: 13.5px; color: var(--cs-ink-deep); text-align: right; }
  .cs-mk-tbl td:nth-child(1) { grid-column: 1; grid-row: 2; }
  .cs-mk-tbl td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .cs-mk-tbl td:nth-child(4) { grid-column: 3; grid-row: 2; text-align: left; }
  .cs-mk-tbl td:nth-child(6) { grid-column: 4; grid-row: 2; text-align: right; }
}