/* ══════════════════════════════════════════════════════════════
   DATAVIZ — ce qui reste des pages « données ouvertes ».

   La vue d'ensemble (/donnees) et le bilan national (/donnees/bilan) ont
   quitté cette feuille pour `zones/donnees.css`, qui porte le marqueur de
   grammaire v2 et est donc tenue par `tools/css-grammar.mjs`.
   Ce fichier ne sert plus que /donnees/carte et /donnees/definitions.

   Ce qui est parti, et pourquoi ça ne revient pas ici : `.dataviz-kpi` était
   DÉCLARÉ DEUX FOIS dans ce fichier, à cent lignes d'écart et avec d'autres
   valeurs — une fois pour chaque page. La dernière déclaration gagnait, donc
   la vue d'ensemble rendait le dessin du bilan, et rien ne pouvait le
   signaler. Les deux pages emploient désormais la même brique (`_stat_band`),
   déclarée une seule fois.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   Dataviz Map — Carte interactive France
   ══════════════════════════════════════════════════════════════ */

.dataviz-map {
    padding: var(--spacing-xl) 0 var(--spacing-3xl);
}

.dataviz-map__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.dataviz-map__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

@media (min-width: 48em) {
    .dataviz-map__layout {
        grid-template-columns: 1fr 18rem;
    }
}

/* SVG wrapper */
.dataviz-map__svg-wrapper {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: var(--spacing-md);
    overflow: hidden;
}

.dataviz-map__svg-inner {
    width: 100%;
}

.dataviz-map__svg-inner svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Interactions choropleth : hover (mise en valeur transitoire) et selected
   (état persistent après click). Le SVG renderer pose déjà `transition:
   fill 0.2s, opacity 0.2s` sur `.geo-area` ; ces overrides ajoutent
   l'épaisseur de stroke pour bien distinguer la zone. */
.dataviz-map__svg-inner .dataviz-map__zone--hover path {
    stroke: var(--color-primary);
    stroke-width: 1.5;
    filter: brightness(1.05);
}

.dataviz-map__svg-inner .dataviz-map__zone--selected path {
    stroke: var(--color-primary-dark);
    stroke-width: 2;
    filter: brightness(1.1);
}

/* Légende choropleth — 5 paliers alignés sur `densityColor()` côté
   controller, positionnée bas-droite du wrapper SVG. */
.dataviz-map__legend {
    position: absolute;
    bottom: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    list-style: none;
    padding: 0.5rem 0.625rem;
    margin: 0;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--color-navy) 8%, transparent);
    font-size: 0.7rem;
}

.dataviz-map__legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dataviz-map__legend-swatch {
    display: inline-block;
    width: 16px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid color-mix(in srgb, var(--color-navy) 12%, transparent);
}

.dataviz-map__legend-label {
    color: var(--color-text-light);
    line-height: 1.2;
}

.dataviz-map__france {
    width: 100%;
    height: auto;
    max-height: 32rem;
}

/* Layer switcher — onglets couches géographiques */
.dataviz-map__layer-switch {
    display: inline-flex;
    gap: var(--spacing-xs, 0.25rem);
    flex-wrap: wrap;
}

/* Insets DROM/COM — rangée de mini-cartes sous la carte principale */
.dataviz-map__insets {
    margin-top: var(--spacing-md);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: var(--spacing-sm);
}

.dataviz-map__inset {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.5rem 0.5rem 0.4rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.dataviz-map__inset:hover {
    border-color: #9ca3af;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.dataviz-map__inset-canvas {
    width: 100%;
    height: 90px;
}

.dataviz-map__inset-label {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    color: var(--color-text, #1f2937);
}

.dataviz-map__inset-count {
    font-size: 0.7rem;
    color: var(--color-text-light);
}

.dataviz-map__error {
    color: var(--color-danger, #dc2626);
    text-align: center;
    padding: 2rem;
}

/* Department paths */
.dept-path {
    fill: var(--color-primary-light);
    stroke: #fff;
    stroke-width: 1;
    cursor: pointer;
    transition: fill 0.15s ease, opacity 0.15s ease;
}

.dept-path:hover {
    fill: var(--color-primary);
    opacity: 0.8;
}

.france-outline {
    pointer-events: none;
}

/* Tooltip */
.dataviz-map__tooltip {
    position: absolute;
    padding: 0.375rem 0.75rem;
    background: var(--color-navy);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
}

.dataviz-map__tooltip-name {
    font-weight: 600;
}

.dataviz-map__tooltip-code {
    opacity: 0.7;
    margin-left: var(--spacing-xs);
}

/* Panel */
.dataviz-map__panel {
    padding: var(--spacing-lg);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-self: start;
}

.dataviz-map__panel-default {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    text-align: center;
    color: var(--color-text-light);
    padding: var(--spacing-xl) 0;
}

.dataviz-map__panel-default svg { opacity: 0.4; }

.dataviz-map__panel-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.dataviz-map__panel-code {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

.dataviz-map__panel-stats {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.dataviz-map__panel-stat {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-bg-light);
}

.dataviz-map__panel-stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.dataviz-map__panel-stat-value {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* Legend */
.dataviz-map__legend {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
}

.dataviz-map__legend-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-light);
    white-space: nowrap;
}

.dataviz-map__legend-scale {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
}

.dataviz-map__legend-bar {
    flex: 1;
    height: 0.5rem;
    border-radius: 100px;
    background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary), var(--color-primary-dark));
}

.dataviz-map__legend-min,
.dataviz-map__legend-max {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    white-space: nowrap;
}

.dataviz-map__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-3xl);
    color: var(--color-text-light);
}

.dataviz-map__svg-inner {
    min-height: 20rem;
}


/* La page « Définitions » est partie dans `zones/donnees.css` avec le reste du
   pôle données : elle rend désormais le squelette de fiche (`article.css`), le
   sommaire latéral de la grammaire et le motif de tableau. Ce fichier ne sert
   plus que /donnees/carte. */


/* ─────────────────────────────────────────────────────────────────────────
   Carte plein écran (/donnees/carte) : carte ECharts + contrôles surimpression
   + mini-courbe nationale. Dataviz immersive (le hero/breadcrumb socle sont
   neutralisés sur cette page).
   ───────────────────────────────────────────────────────────────────────── */
.carte-full {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: calc(100dvh - 4.5rem);
    padding: 1rem clamp(0.75rem, 3vw, 2rem) 1.25rem;
}
.carte-full__bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.carte-full__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    color: #94a3b8;
}
.carte-full__title {
    margin: 0.1rem 0 0;
    font-size: clamp(1.25rem, 2.5vw, 1.9rem);
    color: var(--color-primary);
}
.carte-full__back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}
.carte-full__back:hover { background: #eef2f7; }
.carte-full__stage {
    position: relative;
    flex: 1;
    min-height: 60vh;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.carte-full__map {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1rem 4rem;
}
.carte-full__map svg {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
.carte-full__map .geo-area { cursor: default; }

/* Légende d'échelle (quantiles), bas gauche. Layout stable : titre, rangée de
   pastilles, bornes faible/élevé. */
.carte-legend {
    position: absolute;
    left: 0.85rem;
    bottom: 0.85rem;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 9.5rem;
    padding: 0.45rem 0.6rem;
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.carte-legend__title { font-size: 0.7rem; color: #94a3b8; }
.carte-legend__swatches { display: flex; }
.carte-legend__swatches i { display: block; flex: 1; height: 0.6rem; }
.carte-legend__swatches i:first-child { border-radius: 3px 0 0 3px; }
.carte-legend__swatches i:last-child { border-radius: 0 3px 3px 0; }
.carte-legend__minmax { display: flex; justify-content: space-between; font-size: 0.66rem; color: #475569; }
.carte-legend__empty { font-size: 0.78rem; color: #94a3b8; }

/* Slider année + lecture, bas centre. */
.carte-year {
    position: absolute;
    left: 50%;
    bottom: 0.85rem;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.8rem;
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.carte-year__play {
    border: 0;
    background: var(--color-primary);
    color: #fff;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
}
.carte-year__track { position: relative; width: clamp(10rem, 26vw, 20rem); padding-bottom: 0.9rem; }
.carte-year__range {
    display: block;
    width: 100%;
    margin: 0;
    accent-color: var(--color-primary);
}
.carte-year__ticks { position: relative; height: 0.8rem; margin-top: 0.15rem; }
.carte-year__tick {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.72rem;
    color: #94a3b8;
    cursor: pointer;
    white-space: nowrap;
}
.carte-year__tick:hover { color: var(--color-primary); }
.carte-year__tick.is-active { color: var(--color-primary); font-weight: 700; }

/* Tooltip flottant au survol. */
.carte-tip {
    position: absolute;
    z-index: 8;
    pointer-events: none;
    padding: 0.35rem 0.55rem;
    background: #1f2937;
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.25;
    border-radius: 0.4rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    max-width: 16rem;
}
.carte-full__source {
    margin: 0;
    text-align: center;
    color: #94a3b8;
    font-size: 0.82rem;
}
.carte-full__source a { color: var(--color-primary); }
.carte-full__empty { padding: 4rem 1rem; text-align: center; color: #475569; }

.carte-ctrl {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(86vw, 23rem);
    padding: 0.7rem 0.8rem;
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.carte-ctrl__row { display: flex; align-items: center; gap: 0.5rem; }
.carte-ctrl__label {
    min-width: 4.2rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}
.carte-ctrl__seg {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: #eef2f7;
    border-radius: 0.45rem;
}
.carte-ctrl__seg--wrap { flex-wrap: wrap; }
.carte-ctrl__seg button {
    border: 0;
    background: transparent;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.55rem;
    border-radius: 0.35rem;
    cursor: pointer;
    white-space: nowrap;
}
.carte-ctrl__seg button:hover { color: var(--color-primary); }
.carte-ctrl__seg button.is-active { background: var(--color-primary); color: #fff; }
.carte-ctrl__select { position: relative; }
.carte-ctrl__select-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    min-width: 12rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 0.45rem;
    background: #fff;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
}
.carte-ctrl__select-trigger::after { content: '▾'; color: #94a3b8; }
.carte-ctrl__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 10;
    margin: 0;
    padding: 0.3rem;
    min-width: 15rem;
    max-height: 16rem;
    overflow: auto;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.carte-ctrl__list li {
    padding: 0.4rem 0.55rem;
    border-radius: 0.35rem;
    font-size: 0.84rem;
    color: #475569;
    cursor: pointer;
}
.carte-ctrl__list li:hover { background: #eef2f7; }
.carte-ctrl__list li.is-active { background: var(--color-primary); color: #fff; }

.carte-full__trend {
    position: absolute;
    right: 0.85rem;
    bottom: 0.85rem;
    z-index: 5;
    width: min(34vw, 19rem);
    padding: 0.55rem 0.7rem 0.3rem;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.carte-full__trend-title { margin: 0 0 0.2rem; font-size: 0.74rem; font-weight: 600; color: #475569; }
.carte-full__trend-chart { width: 100%; height: 8.5rem; }

@media (max-width: 44.9375em) {
    .carte-full__trend { display: none; }
    .carte-ctrl { right: 0.85rem; max-width: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Carte plein écran « mode app » (/donnees/carte) : pas de méga-header,
   barre fine + carte plein cadre + aside droit (niveau, indicateurs empilés,
   évolution nationale). Étend base.html.twig (zéro navbar/footer).
   ───────────────────────────────────────────────────────────────────────── */
.carte-app {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.carte-app__bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 3rem;
    padding: 0 1rem;
    background: var(--color-primary);
    color: #fff;
}
.carte-app__back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.92;
}
.carte-app__back:hover { opacity: 1; }
.carte-app__title { margin: 0; font-size: 1rem; font-weight: 600; text-align: center; }
.carte-app__eyebrow { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; }
.carte-app__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: #475569; }

.carte-app__main { flex: 1; display: flex; min-height: 0; }
.carte-app__map {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #fff;
}
.carte-svg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1.25rem 3.75rem;
}
.carte-svg[hidden] { display: none; }
.carte-svg svg { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.carte-app__map .geo-area { cursor: default; }
.carte-label {
    font-size: 5.5px;
    font-weight: 700;
    fill: #1f2937;
    pointer-events: none;
}
.carte-app__logo {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 4;
    opacity: 0.92;
}
.carte-app__logo img { display: block; width: 6.5rem; height: auto; }

.carte-app__aside {
    flex: 0 0 340px;
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-left: 1px solid var(--color-border);
    background: #fff;
    overflow-y: auto;
}
.carte-side { flex: 0 0 auto; }
.carte-side--grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.carte-side__label {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}
.carte-side__layers { display: flex; flex-direction: column; gap: 0.3rem; }
.carte-side__layers button {
    text-align: left;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 0.45rem;
    background: #fff;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.carte-side__layers button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.carte-side__layers button.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.carte-side__search {
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 0.45rem;
    font-size: 0.82rem;
    color: #1f2937;
}
.carte-side__search:focus { outline: 2px solid #c7d2eb; outline-offset: 0; border-color: var(--color-primary); }
.carte-side__indicators { flex: 1; min-height: 4rem; overflow-y: auto; padding-right: 0.2rem; }
.carte-ind__group { margin-bottom: 0.15rem; }
.carte-ind__heading {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    margin: 0;
    padding: 0.4rem 0.2rem;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary);
    cursor: pointer;
}
.carte-ind__heading::before {
    content: '▸';
    font-size: 0.7rem;
    color: #94a3b8;
    transition: transform 0.12s ease;
}
.carte-ind__group.is-open > .carte-ind__heading::before { transform: rotate(90deg); }
.carte-ind__heading:hover { color: var(--color-primary-dark); }
.carte-ind__list { display: none; }
.carte-ind__group.is-open > .carte-ind__list { display: block; }
.carte-ind__row {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.35rem 0.55rem;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    color: #475569;
    font-size: 0.82rem;
    cursor: pointer;
}
.carte-ind__row:hover { background: #eef2f7; }
.carte-ind__row.is-active { background: var(--color-primary); color: #fff; }

.carte-side__trend { width: 100%; height: 9rem; }
.carte-side__source { margin: 0; font-size: 0.72rem; color: #94a3b8; }
.carte-side__source a { color: var(--color-primary); }

@media (max-width: 53.75em) {
    .carte-app { height: auto; min-height: 100dvh; overflow: visible; }
    .carte-app__main { flex-direction: column; }
    .carte-app__map { min-height: 60vh; }
    .carte-app__aside { flex: 1 1 auto; width: auto; border-left: 0; border-top: 1px solid var(--color-border); }
}

/* ── Barre du haut sur telephone ──
   Trois blocs (retour, titre, etiquette) se partageaient 390 px : « Retour aux
   donnees » se cassait sur trois lignes et passait SOUS le titre, qui lui-meme
   en prenait deux. La barre, haute de 3 rem, ne les contenait plus.

   Le libelle du retour et l'etiquette « Donnees ouvertes » cedent la place :
   la fleche seule dit le retour (le lien garde son intitule pour les lecteurs
   d'ecran), et l'etiquette est decorative — la page entiere annonce deja des
   donnees ouvertes. Le titre, lui, est ce qu'on vient lire : il garde toute
   la largeur. */
@media (max-width: 39.9375em) {
    .carte-app__bar {
        gap: 0.5rem;
        padding: 0 0.75rem;
    }

    .carte-app__back span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .carte-app__eyebrow { display: none; }

    .carte-app__title {
        font-size: 0.9rem;
        line-height: 1.2;
    }

    /* La legende chevauchait le lecteur d'annees, tous deux poses en absolu
       dans le coin bas. Elle remonte au-dessus de lui, a la meme marge. */
    .carte-legend {
        bottom: 4.25rem;
        width: auto;
        max-width: 60vw;
    }
}

/* Sélecteur de palette (aside) : pastilles rondes. */
.carte-side__ramps { display: flex; gap: 0.45rem; }
.carte-side__ramps button {
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--swatch);
    cursor: pointer;
}
.carte-side__ramps button:hover { transform: scale(1.08); }
.carte-side__ramps button.is-active { border-color: #1f2937; }

/* Sélecteur du nombre de classes de l'échelle (quintiles / déciles…). */
.carte-side__classes { display: flex; gap: 0.3rem; }
.carte-side__classes button {
    flex: 1;
    padding: 0.35rem 0;
    border: 1px solid var(--color-border);
    border-radius: 0.4rem;
    background: #fff;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.carte-side__classes button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.carte-side__classes button.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.carte-side__hint { text-transform: none; letter-spacing: 0; font-weight: 600; color: #475569; }

/* Filtre taille de CESU : slider à deux poignées (deux inputs superposés). */
.carte-size { position: relative; height: 1.5rem; }
.carte-size::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: #eef2f7;
    border-radius: 2px;
}
.carte-size__fill {
    position: absolute;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: var(--color-primary);
    border-radius: 2px;
    z-index: 1;
}
.carte-size__range {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1.5rem;
    margin: 0;
    background: none;
    pointer-events: none;
    z-index: 2;
    -webkit-appearance: none;
    appearance: none;
}
.carte-size__range::-webkit-slider-runnable-track { background: transparent; border: 0; }
.carte-size__range::-moz-range-track { background: transparent; border: 0; }
.carte-size__range::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    margin-top: -0.32rem;
}
.carte-size__range::-moz-range-thumb {
    pointer-events: auto;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}