/* =====================================================================
   Pages « axes » : qualité de vie (.cs-viz--qv) et bâtiment (.cs-viz--bt).
   Maquette du 23/10/2026 (docs/mockups/2026-10-23_pages_axes).
   La bibliothèque cs-viz (_components.css) dessine en teinte « eau » ;
   ici, la teinte de l'axe la remplace. Jetons --cs-* seulement.
   ===================================================================== */
.cs-viz--qv { --qv-1: var(--cs-qv-1); --qv-2: var(--cs-qv-2); --qv-3: var(--cs-qv-3); --qv-4: var(--cs-qv-4); --qv-5: var(--cs-qv-5); }
.cs-viz--bt { --qv-1: var(--cs-bt-1); --qv-2: var(--cs-bt-2); --qv-3: var(--cs-bt-3); --qv-4: var(--cs-bt-4); --qv-5: var(--cs-bt-5); }

/* Teinte de l'axe sur les composants partagés */
.cs-viz--qv .cs-viz-kick, .cs-viz--bt .cs-viz-kick { color: var(--qv-4); }
.cs-viz--qv .cs-viz-verdict__n, .cs-viz--bt .cs-viz-verdict__n { color: var(--qv-5); }
.cs-viz--qv .cs-viz-sec__ic, .cs-viz--bt .cs-viz-sec__ic { background: var(--qv-1); color: var(--qv-4); }
.cs-viz--qv .cs-viz-mini i, .cs-viz--bt .cs-viz-mini i { background: var(--qv-4); }
.cs-viz--qv .cs-viz-hb__t i, .cs-viz--bt .cs-viz-hb__t i { background: var(--qv-2); }
.cs-viz--qv .cs-viz-hb--on .cs-viz-hb__t i, .cs-viz--bt .cs-viz-hb--on .cs-viz-hb__t i { background: var(--qv-4); }
.cs-viz--qv .cs-viz-rep__liste li > i, .cs-viz--bt .cs-viz-rep__liste li > i { background: var(--qv-1); color: var(--qv-4); }
.cs-viz--qv .cs-viz-pg__bx b, .cs-viz--bt .cs-viz-pg__bx b { color: var(--qv-5); }
.qv-u { font-size: 24px; font-weight: 800; color: var(--cs-mute-soft); letter-spacing: -.02em; }

/* Réglette du héros : essentiels à 5 et à 10 minutes */
.qv-duo { margin-top: 16px; }
.qv-duo__t { position: relative; height: 12px; border-radius: 6px; background: var(--cs-paper-3); overflow: hidden; }
.qv-duo__t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.qv-duo__10 { background: var(--qv-2); } .qv-duo__5 { background: var(--qv-4); }
.qv-duo__l { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 7px; font-size: 11.5px; color: var(--cs-mute-soft); }
.qv-sq { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.qv-sq--5 { background: var(--qv-4); } .qv-sq--10 { background: var(--qv-2); }
.qv-leg .qv-sq { border: 0; width: 10px; height: 10px; vertical-align: -1px; }

/* Barres « à moins de 5 et 10 minutes » */
.qv-wks { display: flex; flex-direction: column; gap: 9px; }
.qv-wk { display: grid; grid-template-columns: 1fr 58px; gap: 4px 8px; font-size: 12.5px; align-items: center; cursor: default; }
.qv-wk .n { grid-column: 1 / 3; color: var(--cs-mute); }
.qv-wk__t { height: 12px; background: var(--cs-paper-3); border-radius: 6px; position: relative; overflow: hidden; }
.qv-wk__t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; transform-origin: left; transition: transform .7s var(--cs-ease-default); }
.qv-wk__10 { background: var(--qv-2); } .qv-wk__5 { background: var(--qv-4); }
.qv-wk .x { font-weight: 800; text-align: right; white-space: nowrap; }
.cs-viz-js [data-cs-anim] .qv-wk__t i { transform: scaleX(0); }
.cs-viz-js [data-cs-anim].is-vu .qv-wk__t i { transform: scaleX(1); }

/* Carte des lieux (fragment) */
.qv-carte { min-height: 220px; display: flex; flex-direction: column; gap: 9px; }
.qv-carte__vide { margin: auto; font-size: 12.5px; color: var(--cs-mute-soft); text-align: center; padding: 30px 10px; }
.qv-map { background: var(--cs-land); }
.qv-map__fond { fill: var(--cs-land-me); stroke: none; }
.qv-map__bord { fill: none; stroke: var(--cs-ink-deep); stroke-width: 2; vector-effect: non-scaling-stroke; }
.qv-map circle, .qv-map rect { stroke: var(--cs-bg-elevated); stroke-width: 1.2; vector-effect: non-scaling-stroke; cursor: pointer; }
.qv-map .out { opacity: .35; }
.qv-lg { transition: opacity .15s; }
.qv-lg.is-off { opacity: .07; }
.qv-lg--courses, .qv-c--courses { fill: var(--cs-qv-shop); background: var(--cs-qv-shop); }
.qv-lg--sante, .qv-c--sante { fill: var(--cs-qv-health); background: var(--cs-qv-health); }
.qv-lg--enfants, .qv-c--enfants { fill: var(--cs-qv-school); background: var(--cs-qv-school); }
.qv-lg--transports, .qv-c--transports { fill: var(--cs-qv-train); background: var(--cs-qv-train); }
.qv-lg--bus, .qv-c--bus { fill: var(--cs-qv-bus); background: var(--cs-qv-bus); }
.qv-lg--nature, .qv-c--nature { fill: var(--cs-qv-park); background: var(--cs-qv-park); }
.qv-lg--sorties, .qv-c--sorties { fill: var(--cs-qv-out); background: var(--cs-qv-out); }
.qv-lg--bus circle { stroke-width: .6; }
.qv-map .ech { stroke: var(--cs-ink-deep); stroke-width: 2.5; }
.qv-map .ech-t { font-size: 14px; font-weight: 700; fill: var(--cs-ink-deep); font-family: var(--cs-font-body); }

/* Bande « un point par école / par quartier » */
.qv-strip { position: relative; height: 70px; margin: 8px 10px 0; }
.qv-strip::before { content: ""; position: absolute; left: 0; right: 0; top: 26px; border-top: 1px solid var(--cs-chart-axe); }
.qv-strip i { position: absolute; top: 18px; width: 16px; height: 16px; border-radius: 50%; transform: translateX(-50%); border: 1.5px solid var(--cs-bg-elevated); background: var(--qv-3); opacity: .85; cursor: pointer; }
.qv-strip--ecoles i { background: var(--cs-qv-school); }
.qv-strip--ecoles i.is-prive { background: var(--cs-ink-deep); }
.qv-strip i:hover { opacity: 1; box-shadow: 0 0 0 2px var(--cs-ink-deep); z-index: 2; }
.qv-strip__ref { position: absolute; top: 10px; height: 32px; border-left: 2px dashed var(--cs-mute); }
.qv-strip__lab { position: absolute; top: -8px; transform: translateX(-50%); font-size: 11.5px; font-weight: 700; color: var(--cs-mute); white-space: nowrap; }
.qv-strip__ax { position: absolute; top: 46px; transform: translateX(-50%); font-size: 11px; color: var(--cs-mute-soft); white-space: nowrap; }
.qv-dot { display: inline-block; width: 10px !important; height: 10px !important; border-radius: 50%; border: 0 !important; margin-right: 5px; vertical-align: -1px !important; }
.qv-dot--public { background: var(--cs-qv-school); } .qv-dot--prive { background: var(--cs-ink-deep); }

/* Médecins : la commune, la France, le seuil */
.qv-apl { position: relative; height: 54px; margin: 18px 10px 0; }
.qv-apl__ln { position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: var(--cs-paper-3); }
.qv-apl__seg { position: absolute; top: 10px; height: 10px; border-radius: 5px; background: var(--qv-3); opacity: .45; }
.qv-apl__seg.is-bas { background: var(--cs-score-4); }
.qv-apl__seuil { position: absolute; top: 2px; height: 26px; border-left: 1.5px solid var(--cs-score-4); opacity: .55; }
.qv-apl__fr { position: absolute; top: 4px; height: 22px; border-left: 2px dashed var(--cs-mute); }
.qv-apl__me { position: absolute; top: 7px; width: 16px; height: 16px; border-radius: 50%; transform: translateX(-50%); background: var(--qv-4); box-shadow: 0 0 0 2.5px var(--cs-bg-elevated); }
.qv-apl__me.is-bas { background: var(--cs-score-4); }
.qv-apl__lab { position: absolute; top: -14px; transform: translateX(-50%); font-weight: 800; font-size: 13px; white-space: nowrap; }
.qv-apl__labf { position: absolute; top: 32px; transform: translateX(-50%); font-size: 11.5px; color: var(--cs-mute-soft); white-space: nowrap; }
.qv-leg-seuil { color: var(--cs-score-4); }

/* Bruit des routes */
.qv-bruit--hors { background: var(--cs-paper-3); }
.qv-bruit--b1 { background: var(--cs-qv-noise-1); } .qv-bruit--b2 { background: var(--cs-qv-noise-2); } .qv-bruit--b3 { background: var(--cs-qv-noise-3); }
.qv-pas-mesure { color: var(--cs-mute-soft); }

/* Bâtiment : barres A-G, lettres, calendrier, âge des immeubles */
.bt-l--a { background: var(--cs-etiq-a); color: var(--cs-etiq-a-ink); } .bt-l--b { background: var(--cs-etiq-b); color: var(--cs-etiq-b-ink); }
.bt-l--c { background: var(--cs-etiq-c); color: var(--cs-etiq-c-ink); } .bt-l--d { background: var(--cs-etiq-d); color: var(--cs-etiq-d-ink); }
.bt-l--e { background: var(--cs-etiq-e); color: var(--cs-etiq-e-ink); } .bt-l--f { background: var(--cs-etiq-f); color: var(--cs-etiq-f-ink); }
.bt-l--g { background: var(--cs-etiq-g); color: var(--cs-etiq-g-ink); }
.bt-lettres { display: flex; gap: 5px; margin-top: 16px; }
.bt-lettres span { flex: 1; height: 34px; border-radius: 7px; display: grid; place-items: center; font-weight: 900; font-size: 15px; opacity: .4; cursor: default; }
.bt-lettres span.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--cs-bg-elevated), 0 0 0 4px var(--cs-ink-deep); }
.bt-row { display: grid; grid-template-columns: 170px 1fr 70px; gap: 12px; align-items: center; font-size: 12.5px; padding: 6px 0; }
.bt-row .n b { display: block; font-size: 13px; } .bt-row .n span { font-size: 11.5px; color: var(--cs-mute-soft); }
.bt-row.is-moi .n b { font-size: 14px; }
.bt-bar { display: flex; height: 30px; border-radius: 7px; overflow: hidden; }
.bt-row:not(.is-moi) .bt-bar { height: 20px; opacity: .85; }
.bt-bar i { display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 11.5px; min-width: 0; cursor: pointer; }
.bt-row .x { text-align: right; } .bt-row .x b { display: block; font-size: 15px; } .bt-row .x span { font-size: 11px; color: var(--cs-mute-soft); }
.bt-cal { display: flex; flex-direction: column; position: relative; }
.bt-cal::before { content: ""; position: absolute; left: 21px; top: 18px; bottom: 18px; border-left: 2px solid var(--cs-line); }
.bt-cal__i { display: grid; grid-template-columns: 44px 34px 1fr; gap: 10px; align-items: center; padding: 8px 0; position: relative; }
.bt-cal__a { font-weight: 900; font-size: 13px; background: var(--cs-bg-elevated); text-align: center; z-index: 1; padding: 3px 0; }
.bt-cal__i.is-passe .bt-cal__a { color: var(--cs-score-4); }
.bt-cal__l { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-weight: 900; }
.bt-cal__n { font-size: 13px; } .bt-cal__n b { font-size: 18px; font-weight: 900; } .bt-cal__n span { display: block; font-size: 11.5px; color: var(--cs-mute-soft); }
.bt-ages { display: flex; flex-direction: column; gap: 7px; }
.bt-age { display: grid; grid-template-columns: 96px 1fr 40px; gap: 8px; align-items: center; font-size: 12.5px; }
.bt-age__t { height: 12px; background: var(--cs-paper-3); border-radius: 6px; position: relative; cursor: pointer; }
.bt-age__t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--qv-3); transform-origin: left; transition: transform .7s var(--cs-ease-default); }
.bt-age__t em { position: absolute; top: -4px; bottom: -4px; border-left: 1.5px dashed var(--cs-mute-soft); }
.bt-age .x { text-align: right; font-weight: 800; }
.cs-viz-js [data-cs-anim] .bt-age__t i { transform: scaleX(0); }
.cs-viz-js [data-cs-anim].is-vu .bt-age__t i { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    .cs-viz-js [data-cs-anim] .qv-wk__t i, .cs-viz-js [data-cs-anim] .bt-age__t i { transform: none; transition: none; }
}

@media (max-width: 600px) {
    .qv-u { font-size: 20px; }
    .qv-map circle { r: 10px; } .qv-map .qv-lg--bus circle { r: 5px; }
    .qv-map .ech-t { font-size: 24px; }
    .qv-strip { margin: 8px 8px 0; }
    .qv-strip i { width: 13px; height: 13px; }
    .bt-row { grid-template-columns: 1fr 62px; gap: 4px 8px; }
    .bt-row .n { grid-column: 1 / 3; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
    .bt-lettres span { height: 30px; }
}