/* ═══════════════════════════════════════════════════════════════════
   Cartographie S&E — SISE-SNGM
   Couches : Projets / Activités / Indicateurs
   Design tokens : hérités du thème Sneat (variables --bs-*), avec
   fallbacks. Le mode sombre (.dark-style) et le RTL sont natifs :
   - les couleurs suivent les variables du thème ;
   - la mise en page utilise des propriétés logiques (inline-start/end).
   ═══════════════════════════════════════════════════════════════════ */

:root,
.light-style,
.dark-style {
    --carto-accent:      var(--bs-primary, #696cff);
    --carto-accent-rgb:  var(--bs-primary-rgb, 105, 108, 255);
    --carto-success:     var(--bs-success, #71dd37);
    --carto-success-rgb: var(--bs-success-rgb, 113, 221, 55);
    --carto-warning:     var(--bs-warning, #ffab00);
    --carto-warning-rgb: var(--bs-warning-rgb, 255, 171, 0);
    --carto-danger:      var(--bs-danger, #ff3e1d);
    --carto-danger-rgb:  var(--bs-danger-rgb, 255, 62, 29);
    --carto-info:        var(--bs-info, #03c3ec);
    --carto-info-rgb:    var(--bs-info-rgb, 3, 195, 236);
    --carto-secondary:   var(--bs-secondary, #8592a3);
    --carto-secondary-rgb: var(--bs-secondary-rgb, 133, 146, 163);

    --carto-bg:      var(--bs-body-bg, #f5f5f9);
    --carto-paper:   var(--bs-paper-bg, #fff);
    --carto-border:  var(--bs-border-color, #e4e6e8);
    --carto-text:    var(--bs-heading-color, #384551);
    --carto-muted:   var(--bs-body-color, #646e78);

    --carto-radius:     var(--bs-border-radius, 0.375rem);
    --carto-radius-lg:  var(--bs-border-radius-lg, 0.5rem);
    --carto-radius-pill: 50rem;
    --carto-shadow:     0 0.25rem 1.125rem rgba(75, 70, 92, 0.1);
}

/* ── Barre KPI ────────────────────────────────────────────────────── */
.carto-kpi-bar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.carto-kpi-item {
    flex: 1;
    min-width: 120px;
    background: var(--carto-paper);
    border-radius: var(--carto-radius-lg);
    border: 1px solid var(--carto-border);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.carto-kpi-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--carto-shadow);
}
.carto-kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--carto-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
/* Teintes d'icônes KPI — pattern Sneat bg-label-* */
.carto-kpi-icon.kpi-primary   { background: rgba(var(--carto-accent-rgb), .16);    color: var(--carto-accent); }
.carto-kpi-icon.kpi-success   { background: rgba(var(--carto-success-rgb), .16);   color: var(--carto-success); }
.carto-kpi-icon.kpi-warning   { background: rgba(var(--carto-warning-rgb), .16);   color: var(--carto-warning); }
.carto-kpi-icon.kpi-danger    { background: rgba(var(--carto-danger-rgb), .16);    color: var(--carto-danger); }
.carto-kpi-icon.kpi-info      { background: rgba(var(--carto-info-rgb), .16);      color: var(--carto-info); }
.carto-kpi-icon.kpi-secondary { background: rgba(var(--carto-secondary-rgb), .16); color: var(--carto-secondary); }

.carto-kpi-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--carto-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.carto-kpi-label {
    font-size: 0.72rem;
    color: var(--carto-muted);
    font-weight: 500;
    margin-top: 2px;
}

/* ── Panneau gauche ───────────────────────────────────────────────── */
.carto-panel-left {
    border-radius: var(--carto-radius-lg);
    overflow: hidden;
}
.carto-panel-body {
    overflow-y: auto;
    max-height: calc(100vh - 250px);
    scrollbar-width: thin;
}

.carto-section-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--carto-muted);
    margin-bottom: 6px;
}

/* ── Sélecteur de couche métier (Projets / Activités / Indicateurs) ── */
.layer-switch {
    display: flex;
    gap: 4px;
    background: var(--carto-bg);
    border: 1px solid var(--carto-border);
    border-radius: var(--carto-radius-lg);
    padding: 4px;
}
.btn-layer {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 4px 6px;
    border: none;
    border-radius: var(--carto-radius);
    background: transparent;
    color: var(--carto-muted);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
}
.btn-layer i { font-size: 1.15rem; }
.btn-layer:hover { color: var(--carto-accent); }
.btn-layer.active {
    background: var(--carto-accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(var(--carto-accent-rgb), .4);
}

/* ── Boutons niveau géographique ─────────────────────────────────── */
.niveau-control {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.btn-niveau {
    padding: 4px 11px;
    border-radius: var(--carto-radius-pill);
    font-size: 0.76rem;
    font-weight: 600;
    border: 1px solid var(--carto-border);
    background: var(--carto-paper);
    cursor: pointer;
    transition: all .15s;
    color: var(--carto-muted);
    white-space: nowrap;
}
.btn-niveau:hover {
    color: var(--carto-accent);
    border-color: rgba(var(--carto-accent-rgb), .4);
    background: rgba(var(--carto-accent-rgb), .08);
}
.btn-niveau.active {
    background: var(--carto-accent);
    color: #fff;
    border-color: var(--carto-accent);
    box-shadow: 0 2px 8px rgba(var(--carto-accent-rgb), .35);
}

/* ── Mode choroplèthe ─────────────────────────────────────────────── */
.choro-mode-control { display: flex; gap: 4px; flex-wrap: wrap; }
.btn-choro-mode {
    padding: 4px 10px;
    border-radius: var(--carto-radius);
    font-size: 0.74rem;
    font-weight: 600;
    border: 1px solid var(--carto-border);
    background: var(--carto-paper);
    cursor: pointer;
    transition: all .15s;
    color: var(--carto-muted);
    white-space: nowrap;
}
.btn-choro-mode:hover {
    color: var(--carto-accent);
    background: rgba(var(--carto-accent-rgb), .08);
}
.btn-choro-mode.active {
    background: rgba(var(--carto-accent-rgb), .14);
    color: var(--carto-accent);
    border-color: var(--carto-accent);
    font-weight: 700;
}

/* ── Chips statut (rendues par JS selon la couche) ────────────────── */
.statut-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip-statut {
    padding: 3px 10px;
    border-radius: var(--carto-radius-pill);
    font-size: 0.74rem;
    font-weight: 600;
    border: 1px solid transparent;
    background: var(--carto-bg);
    color: var(--carto-muted);
    cursor: pointer;
    transition: all .15s;
}
.chip-statut:hover,
.chip-statut.active {
    background: rgba(var(--chip-rgb, var(--carto-accent-rgb)), .16);
    color: rgb(var(--chip-rgb, var(--carto-accent-rgb)));
    border-color: rgb(var(--chip-rgb, var(--carto-accent-rgb)));
}
.chip-statut.active {
    box-shadow: 0 0 0 2px rgba(var(--chip-rgb, var(--carto-accent-rgb)), .2);
}

/* ── Focus clavier visible (a11y) ─────────────────────────────────── */
.btn-layer:focus-visible,
.btn-niveau:focus-visible,
.btn-choro-mode:focus-visible,
.chip-statut:focus-visible,
.btn-recenter:focus-visible,
.btn-close-sidebar:focus-visible,
.zone-projet-item:focus-visible {
    outline: 2px solid var(--carto-accent);
    outline-offset: 2px;
}

/* ── Carte ────────────────────────────────────────────────────────── */
#carto-map {
    height: calc(100vh - 200px);
    min-height: 520px;
    border-radius: 0 0 var(--carto-radius-lg) var(--carto-radius-lg);
    z-index: 1;
    background: var(--carto-bg);
}
.carto-map-container { position: relative; }

/* Fond de carte assombri automatiquement en mode sombre
   (uniquement le fond clair CartoDB, jamais le satellite) */
.dark-style .tile-light {
    filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.6);
}

/* Message central (ex : choisir un indicateur) */
.carto-map-hint {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 850;
    pointer-events: none;
    text-align: center;
    color: var(--carto-muted);
}
.carto-map-hint i { font-size: 2.4rem; color: var(--carto-accent); opacity: .45; }
.carto-map-hint span {
    background: var(--carto-paper);
    border: 1px solid var(--carto-border);
    border-radius: var(--carto-radius-pill);
    box-shadow: var(--carto-shadow);
    padding: 6px 16px;
    font-size: .85rem;
    font-weight: 500;
}

/* ── Spinner ──────────────────────────────────────────────────────── */
#carto-spinner {
    position: absolute;
    inset: 0;
    background: rgba(var(--bs-body-bg-rgb, 245, 245, 249), .7);
    backdrop-filter: blur(3px);
    z-index: 900;
    align-items: center;
    justify-content: center;
    border-radius: var(--carto-radius-lg);
}
.carto-spinner-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: var(--carto-paper);
    padding: 1.25rem 2rem;
    border-radius: var(--carto-radius-lg);
    border: 1px solid var(--carto-border);
    box-shadow: var(--carto-shadow);
}
.carto-spinner-text { font-size: .84rem; color: var(--carto-muted); font-weight: 500; }

/* ── Légende overlay (coin de carte) ──────────────────────────────── */
.carto-legend-overlay {
    background: var(--carto-paper);
    border-radius: var(--carto-radius-lg);
    box-shadow: var(--carto-shadow);
    border: 1px solid var(--carto-border);
    padding: 10px 14px;
    min-width: 140px;
    max-width: 190px;
}
.map-legend-header { margin-bottom: 6px; }
.map-legend-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--carto-muted);
}
.map-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
    font-size: 0.76rem;
    color: var(--carto-text);
}
.map-legend-swatch {
    width: 20px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid var(--carto-border);
    flex-shrink: 0;
}
.map-legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--carto-paper);
    box-shadow: 0 0 0 1.5px var(--carto-border);
}
/* Dégradé continu (couche indicateurs) */
.map-legend-gradient {
    height: 10px;
    border-radius: 3px;
    border: 1px solid var(--carto-border);
    margin-bottom: 3px;
}
.map-legend-minmax {
    display: flex;
    justify-content: space-between;
    font-size: .7rem;
    color: var(--carto-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Contrôles Leaflet ────────────────────────────────────────────── */
.btn-recenter {
    width: 34px !important;
    height: 34px !important;
    background: var(--carto-paper) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--carto-muted);
    transition: color .2s, background .2s;
    border-radius: var(--carto-radius) !important;
}
.btn-recenter:hover {
    background: rgba(var(--carto-accent-rgb), .12) !important;
    color: var(--carto-accent) !important;
}
/* Harmonisation thème des contrôles natifs */
.leaflet-bar a,
.leaflet-control-layers {
    background: var(--carto-paper) !important;
    color: var(--carto-text) !important;
    border-color: var(--carto-border) !important;
}
.leaflet-bar a:hover { background: var(--carto-bg) !important; }
.leaflet-control-layers-expanded {
    color: var(--carto-text) !important;
    border-radius: var(--carto-radius-lg);
}
.leaflet-control-attribution {
    background: rgba(var(--bs-paper-bg-rgb, 255, 255, 255), .8) !important;
    color: var(--carto-muted) !important;
}
.leaflet-control-attribution a { color: var(--carto-accent) !important; }

/* ── Clusters ─────────────────────────────────────────────────────── */
.marker-cluster-custom { background: transparent !important; }
.cluster-icon {
    background: var(--carto-accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.84rem;
    border: 3px solid rgba(255, 255, 255, .85);
    box-shadow: 0 3px 14px rgba(var(--carto-accent-rgb), .45);
    transition: transform .15s;
    font-variant-numeric: tabular-nums;
}
.cluster-icon:hover { transform: scale(1.08); }

/* ── Tooltips Leaflet ─────────────────────────────────────────────── */
.carto-tooltip {
    background: var(--carto-paper) !important;
    color: var(--carto-text) !important;
    border: 1px solid var(--carto-border) !important;
    border-radius: var(--carto-radius-lg) !important;
    box-shadow: var(--carto-shadow) !important;
    padding: 10px 14px !important;
    font-size: 0.82rem;
    max-width: 260px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    pointer-events: none !important;
}
.leaflet-tooltip-left::before,
.leaflet-tooltip-right::before,
.leaflet-tooltip-top::before,
.leaflet-tooltip-bottom::before { display: none; }

.carto-tooltip-titre {
    font-weight: 700;
    font-size: .85rem;
    color: var(--carto-text);
    margin-bottom: 5px;
    line-height: 1.35;
    word-break: break-word;
}
.carto-tooltip-axe {
    font-size: .76rem;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
    font-weight: 500;
}
.carto-tooltip-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.carto-tooltip-budget {
    font-size: .76rem;
    color: var(--carto-warning);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
}
.carto-tooltip-bailleur {
    font-size: .72rem;
    color: var(--carto-muted);
    display: flex;
    align-items: center;
    gap: 3px;
}
.carto-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Tooltip zones (choroplèthe) */
.geo-tt-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 5px; }
.geo-tt-stat {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: .76rem;
    color: var(--carto-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.geo-tooltip-projets { margin-top: 3px; }
.geo-tooltip-projet {
    font-size: .74rem;
    color: var(--carto-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
}
.geo-tooltip-more { font-size: .7rem; color: var(--carto-muted); margin-top: 2px; }
.geo-no-projet {
    font-size: .76rem;
    color: var(--carto-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Tooltip indicateur : valeur / cible / taux */
.geo-ind-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--carto-text);
    font-variant-numeric: tabular-nums;
}
.geo-ind-unit { font-size: .7rem; color: var(--carto-muted); font-weight: 500; }
.geo-ind-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: .74rem;
    color: var(--carto-muted);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* ── Panneau latéral (fiche) — propriétés logiques : RTL natif ────── */
#projet-sidebar {
    position: fixed;
    inset-inline-end: -480px;
    top: 0;
    width: 450px;
    height: 100vh;
    background: var(--carto-paper);
    box-shadow: var(--carto-shadow);
    border-start-start-radius: var(--carto-radius-lg);
    border-end-start-radius: var(--carto-radius-lg);
    overflow-y: auto;
    overflow-x: hidden;
    transition: inset-inline-end .35s cubic-bezier(.4, 0, .2, 1);
    z-index: 1200;
    scrollbar-width: thin;
}
#projet-sidebar.open { inset-inline-end: 0; }

#sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .3);
    z-index: 1199;
    backdrop-filter: blur(2px);
    transition: opacity .3s;
}

.btn-close-sidebar {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--carto-muted);
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    transition: background .15s, color .15s;
}
.btn-close-sidebar:hover {
    background: rgba(var(--carto-danger-rgb), .14);
    color: var(--carto-danger);
}

/* En-tête fiche projet */
.sd-header {
    padding: 1.25rem 1.5rem 1rem;
    position: relative;
    background: var(--carto-bg);
    border-bottom: 1px solid var(--carto-border);
}
.sd-close-btn { position: absolute; top: 12px; inset-inline-end: 14px; }
.sd-meta-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sd-code {
    font-size: 0.72rem;
    color: var(--carto-muted);
    background: rgba(var(--carto-secondary-rgb), .14);
    padding: 2px 7px;
    border-radius: var(--carto-radius);
}
.sd-titre {
    font-size: 1rem;
    font-weight: 700;
    color: var(--carto-text);
    line-height: 1.35;
    margin: 0 0 4px;
    padding-inline-end: 36px;
}
.sd-titre-ar { font-size: 0.85rem; color: var(--carto-muted); margin-bottom: 4px; }
.sd-axe { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; }
.sd-axe-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }

/* KPIs fiche */
.sd-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--carto-border);
}
.sd-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px 8px;
    text-align: center;
    border-inline-end: 1px solid var(--carto-border);
}
.sd-kpi:last-child { border-inline-end: none; }
.sd-kpi-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--carto-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.sd-kpi-val {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--carto-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.sd-kpi-lbl { font-size: 0.65rem; color: var(--carto-muted); font-weight: 500; white-space: nowrap; }

/* Sections fiche */
.sd-section { padding: 14px 18px; border-bottom: 1px solid var(--carto-border); }
.sd-section:last-of-type { border-bottom: none; }
.sd-section-title {
    display: flex;
    align-items: center;
    font-size: 0.69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--carto-muted);
    margin-bottom: 8px;
}
.sd-progress-bar {
    height: 7px;
    background: var(--carto-bg);
    border-radius: var(--carto-radius-pill);
    overflow: hidden;
}
.sd-progress-fill { height: 100%; border-radius: var(--carto-radius-pill); transition: width .6s ease; }
.sd-date-label {
    font-size: 0.72rem;
    color: var(--carto-muted);
    display: flex;
    align-items: center;
    gap: 3px;
}
.sd-info-table { display: flex; flex-direction: column; gap: 5px; }
.sd-info-row { display: flex; align-items: flex-start; gap: 8px; font-size: 0.82rem; }
.sd-info-key {
    display: flex;
    align-items: center;
    color: var(--carto-muted);
    white-space: nowrap;
    min-width: 100px;
    font-size: 0.78rem;
}
.sd-info-val { color: var(--carto-text); flex: 1; word-break: break-word; }

.sd-zones-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.sd-zone-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--carto-radius-pill);
    font-size: 0.78rem;
    font-weight: 500;
    background: var(--carto-bg);
    color: var(--carto-muted);
    border: 1px solid var(--carto-border);
}
.sd-zone-chip.sd-zone-principale {
    background: rgba(var(--carto-warning-rgb), .16);
    color: var(--carto-warning);
    border-color: rgba(var(--carto-warning-rgb), .4);
    font-weight: 700;
}
.sd-zone-gps { font-size: 0.6rem; color: var(--carto-muted); margin-inline-start: 2px; }
.sd-description {
    font-size: 0.82rem;
    color: var(--carto-muted);
    line-height: 1.6;
    margin: 0;
    white-space: pre-line;
}
.sd-count-badge {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--carto-accent);
    color: #fff;
    padding: 1px 8px;
    border-radius: var(--carto-radius-pill);
    flex-shrink: 0;
}
.sd-indicateur { padding: 8px 0; border-bottom: 1px dashed var(--carto-border); }
.sd-indicateur:last-child { border-bottom: none; }
.sd-ind-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 3px; }
.sd-ind-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sd-ind-code {
    font-size: 0.69rem;
    background: var(--carto-bg);
    border-radius: 3px;
    padding: 1px 5px;
    color: var(--carto-muted);
    font-family: var(--bs-font-monospace, monospace);
}
.sd-ind-unit {
    font-size: 0.64rem;
    color: var(--carto-muted);
    background: var(--carto-bg);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--carto-border);
}
.sd-ind-taux { font-size: 0.78rem; font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.sd-ind-label { font-size: 0.8rem; color: var(--carto-text); line-height: 1.35; margin-bottom: 5px; }
.sd-ind-values {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--carto-muted);
    font-variant-numeric: tabular-nums;
}
.sd-media-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--carto-radius);
    border: 1px solid var(--carto-border);
    margin-bottom: 5px;
    text-decoration: none;
    color: var(--carto-text);
    font-size: 0.81rem;
    transition: background .15s, border-color .15s;
    background: var(--carto-paper);
}
.sd-media-item:hover {
    background: rgba(var(--carto-accent-rgb), .08);
    border-color: var(--carto-accent);
    color: var(--carto-text);
}
.sd-media-icon { font-size: 1.1rem; flex-shrink: 0; color: var(--carto-muted); }
.sd-media-titre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-media-size { font-size: 0.68rem; color: var(--carto-muted); white-space: nowrap; }

.sd-actions { padding: 14px 18px 20px; display: flex; flex-wrap: wrap; gap: 7px; }

/* Niveaux géo (badges fiche) */
.niveau-badge,
.sd-niveau-label {
    display: inline-block;
    font-size: .66rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--carto-radius);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-inline-end: 4px;
}
.niveau-national  { background: rgba(var(--carto-secondary-rgb), .16); color: var(--carto-secondary); }
.niveau-wilaya    { background: rgba(var(--carto-accent-rgb), .16);    color: var(--carto-accent); }
.niveau-moughataa { background: rgba(var(--carto-success-rgb), .16);   color: var(--carto-success); }
.niveau-commune   { background: rgba(var(--carto-warning-rgb), .16);   color: var(--carto-warning); }
.zone-national  { background: rgba(var(--carto-secondary-rgb), .16); color: var(--carto-secondary); }
.zone-wilaya    { background: rgba(var(--carto-accent-rgb), .16);    color: var(--carto-accent); }
.zone-moughataa { background: rgba(var(--carto-success-rgb), .16);   color: var(--carto-success); }
.zone-commune   { background: rgba(var(--carto-warning-rgb), .16);   color: var(--carto-warning); }
.ind-zone-badge, .sd-ind-zone {
    font-size: .62rem;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
    white-space: nowrap;
}
.zone-badge {
    display: inline-block;
    background: var(--carto-bg);
    color: var(--carto-muted);
    border: 1px solid var(--carto-border);
    border-radius: var(--carto-radius-pill);
    padding: 2px 9px;
    font-size: .75rem;
    margin: 2px;
}

/* Liste projets d'une zone (sidebar) */
.sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--carto-border);
}
.zone-stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--carto-bg);
    border-radius: var(--carto-radius-lg);
    padding: 10px 12px;
    margin-bottom: 4px;
    border: 1px solid var(--carto-border);
}
.zone-stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--carto-text);
    font-variant-numeric: tabular-nums;
}
.zone-projet-item {
    padding: 9px 11px;
    border-radius: var(--carto-radius-lg);
    border: 1px solid var(--carto-border);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.84rem;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
    background: var(--carto-paper);
}
.zone-projet-item:hover {
    background: rgba(var(--carto-accent-rgb), .08);
    border-color: var(--carto-accent);
    transform: translateX(3px);
}
[dir="rtl"] .zone-projet-item:hover { transform: translateX(-3px); }
[dir="rtl"] .zone-projet-item .bx-chevron-right { transform: scaleX(-1); }
.zone-projet-info { flex: 1; min-width: 0; }
.zone-projet-titre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--carto-text);
    font-weight: 500;
}
.zone-projet-meta { display: flex; align-items: center; gap: 5px; margin-top: 2px; flex-wrap: wrap; }
.zone-projet-budget { font-size: 0.72rem; color: var(--carto-warning); font-weight: 600; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 992px) {
    #projet-sidebar { width: 100vw; inset-inline-end: -100vw; border-radius: 0; }
    #carto-map { height: 55vh; min-height: 300px; }
    .carto-panel-body { max-height: none; }
}
@media (max-width: 768px) {
    .carto-stat-band .carto-kpi-item { padding: .7rem .95rem .65rem; }
    .carto-stat-band .carto-kpi-value { font-size: 1.15rem; }
}
@media (max-width: 576px) {
    .btn-niveau { padding: 3px 8px; font-size: .72rem; }
    .btn-layer span { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Extensions expertes S&E / SIG
   ═══════════════════════════════════════════════════════════════════ */

/* ── Bandeau titre + métadonnées (overlay haut de carte) ──────────── */
.carto-title-bar {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    inset-inline-end: 56px;
    z-index: 860;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    pointer-events: none;
}
.carto-title-main {
    background: var(--carto-paper);
    border: 1px solid var(--carto-border);
    border-radius: var(--carto-radius-lg);
    box-shadow: var(--carto-shadow);
    padding: 8px 14px;
    max-width: 70%;
    pointer-events: auto;
}
#map-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--carto-text);
    line-height: 1.3;
}
.carto-title-meta {
    font-size: .68rem;
    color: var(--carto-muted);
    margin-top: 1px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
}
.carto-title-meta .delta-up   { color: var(--carto-success); font-weight: 700; }
.carto-title-meta .delta-down { color: var(--carto-danger);  font-weight: 700; }
.carto-title-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--carto-paper);
    border: 1px solid var(--carto-border);
    border-radius: var(--carto-radius-lg);
    box-shadow: var(--carto-shadow);
    color: var(--carto-muted);
    font-size: .76rem;
    font-weight: 600;
    padding: 7px 12px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
.carto-title-btn:hover,
.carto-title-btn[aria-pressed="true"] {
    color: var(--carto-accent);
    border-color: var(--carto-accent);
}

/* ── Panneau classement (lié à la carte) ─────────────────────────── */
.carto-ranking {
    position: absolute;
    top: 58px;
    inset-inline-end: 10px;
    bottom: 10px;
    width: 250px;
    z-index: 870;
    background: var(--carto-paper);
    border: 1px solid var(--carto-border);
    border-radius: var(--carto-radius-lg);
    box-shadow: var(--carto-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.carto-ranking-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 8px 14px;
    border-bottom: 1px solid var(--carto-border);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--carto-muted);
}
.carto-ranking-body { overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.rank-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 6px;
    align-items: center;
    padding: 5px 8px;
    border-radius: var(--carto-radius);
    cursor: pointer;
    transition: background .12s;
}
.rank-row:hover, .rank-row.active { background: rgba(var(--carto-accent-rgb), .1); }
.rank-num {
    font-size: .68rem;
    font-weight: 700;
    color: var(--carto-muted);
    font-variant-numeric: tabular-nums;
    text-align: end;
}
.rank-zone { min-width: 0; }
.rank-name {
    font-size: .76rem;
    color: var(--carto-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rank-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--carto-bg);
    margin-top: 2px;
    overflow: hidden;
}
.rank-bar > span { display: block; height: 100%; border-radius: 2px; }
.rank-val {
    font-size: .72rem;
    font-weight: 700;
    color: var(--carto-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Légende à classes (cliquable) ───────────────────────────────── */
.map-legend-item.clickable { cursor: pointer; border-radius: 4px; padding: 1px 3px; margin: 0 -3px 3px; }
.map-legend-item.clickable:hover { background: rgba(var(--carto-accent-rgb), .1); }
.map-legend-item.dimmed { opacity: .38; }
.map-legend-count { margin-inline-start: auto; font-size: .66rem; color: var(--carto-muted); font-variant-numeric: tabular-nums; }
.legend-tools { display: flex; gap: 4px; }
.legend-tool-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--carto-muted);
    font-size: .92rem;
    padding: 0 2px;
    border-radius: 3px;
}
.legend-tool-btn:hover, .legend-tool-btn.active { color: var(--carto-accent); }
.map-legend-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ── Étiquettes de zones sur la carte ────────────────────────────── */
.zone-label { background: transparent; border: none; box-shadow: none; }
.zone-label span {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--carto-text);
    text-shadow: 0 0 3px var(--carto-paper), 0 0 5px var(--carto-paper), 0 0 7px var(--carto-paper);
    white-space: nowrap;
    letter-spacing: .02em;
    pointer-events: none;
}

/* ── KPI héros (jauge donut) ─────────────────────────────────────── */
.kpi-donut {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(var(--donut-c, var(--carto-accent)) calc(var(--donut-p, 0) * 1%), var(--carto-bg) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.kpi-donut::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--carto-paper);
}
.kpi-donut i {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    color: var(--donut-c, var(--carto-accent));
}

/* ── Marqueurs postes frontaliers ────────────────────────────────── */
.poste-marker { background: transparent; border: none; }
.poste-marker span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: var(--poste-c, var(--carto-secondary));
    color: #fff;
    font-size: .8rem;
    border: 2px solid var(--carto-paper);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}

/* ── Recherche de zone (contrôle carte) ──────────────────────────── */
.carto-geocoder { display: flex; }
.carto-geocoder input {
    width: 168px;
    height: 32px;
    border: none;
    background: var(--carto-paper);
    color: var(--carto-text);
    font-size: .78rem;
    padding: 0 10px;
    border-radius: var(--carto-radius);
    outline: none;
}
.carto-geocoder input::placeholder { color: var(--carto-muted); }
.carto-geocoder input:focus { box-shadow: inset 0 0 0 2px rgba(var(--carto-accent-rgb), .5); }

/* ── Visite guidée (première utilisation) ────────────────────────── */
.carto-onboarding {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 880;
    background: var(--carto-paper);
    border: 1px solid var(--carto-border);
    border-radius: var(--carto-radius-lg);
    box-shadow: var(--carto-shadow);
    padding: 12px 16px;
    max-width: 420px;
    width: calc(100% - 32px);
}
.carto-onboarding ol {
    margin: 0 0 8px;
    padding-inline-start: 18px;
    font-size: .8rem;
    color: var(--carto-text);
}
.carto-onboarding li { margin-bottom: 3px; }
.carto-onboarding li::marker { color: var(--carto-accent); font-weight: 700; }

/* ── Plein écran = mode présentation ─────────────────────────────── */
#carto-map-container:fullscreen { background: var(--carto-bg); }
#carto-map-container:fullscreen #carto-map { height: 100vh; border-radius: 0; }
#carto-map-container:fullscreen #map-title { font-size: 1.05rem; }
#carto-map-container:fullscreen .carto-title-meta { font-size: .78rem; }
#carto-map-container:fullscreen .carto-legend-overlay { transform: scale(1.15); transform-origin: bottom left; }

/* ── Impression cartographique A4 ────────────────────────────────── */
.carto-print-sheet { display: none; }
@media print {
    @page { size: A4 landscape; margin: 10mm; }
    body.carto-printing { visibility: hidden !important; }
    body.carto-printing .carto-print-sheet {
        visibility: visible !important;
        display: block !important;
        position: absolute;
        inset: 0;
        background: #fff;
        color: #222;
        font-family: 'Segoe UI', Arial, sans-serif;
    }
    .cps-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #333; padding-bottom: 3mm; margin-bottom: 4mm; }
    .cps-title { font-size: 15pt; font-weight: 700; }
    .cps-sub   { font-size: 8.5pt; color: #555; }
    .cps-map { width: 100%; border: 1px solid #999; }
    .cps-map img { width: 100%; display: block; }
    .cps-foot { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 3mm; font-size: 8pt; color: #444; }
    .cps-legend { display: flex; gap: 4mm; flex-wrap: wrap; align-items: center; }
    .cps-legend .map-legend-item { color: #333; font-size: 8pt; margin: 0; }
    .cps-north { font-size: 12pt; font-weight: 700; text-align: center; line-height: 1; }
    .cps-north small { font-size: 7pt; font-weight: 400; display: block; }
}

/* ═══════════════════════════════════════════════════════════════════
   Polish v2.2 — moderne, simple, élégant
   (surcharges volontairement placées en fin de feuille)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Effet verre dépoli des surfaces posées sur la carte ─────────── */
.carto-title-main,
.carto-title-btn,
.carto-legend-overlay,
.carto-ranking,
.carto-onboarding,
.carto-map-hint span,
.carto-geocoder input {
    background: color-mix(in srgb, var(--carto-paper) 84%, transparent);
    backdrop-filter: blur(10px) saturate(1.15);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
    border: 1px solid color-mix(in srgb, var(--carto-border) 70%, transparent);
}

/* ── Barre KPI raffinée ───────────────────────────────────────────── */
.carto-kpi-item {
    border: none;
    box-shadow: 0 1px 3px rgba(30, 30, 60, .05), 0 3px 14px rgba(30, 30, 60, .05);
    padding: 0.8rem 1.05rem;
    gap: 0.8rem;
}
.carto-kpi-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(30, 30, 60, .07), 0 10px 28px rgba(30, 30, 60, .08);
}
.carto-kpi-icon { width: 36px; height: 36px; font-size: 1.15rem; border-radius: var(--carto-radius-lg); }
.carto-kpi-value { font-size: 1.32rem; letter-spacing: -0.01em; }
.carto-kpi-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 600;
    margin-top: 3px;
}

/* ── Sélecteur de couche : présence affirmée ─────────────────────── */
.layer-switch { padding: 5px; border: none; box-shadow: inset 0 0 0 1px var(--carto-border); }
.btn-layer { padding: 8px 4px 7px; gap: 3px; font-size: 0.73rem; }
.btn-layer i { font-size: 1.28rem; }
.btn-layer.active {
    box-shadow: 0 3px 10px rgba(var(--carto-accent-rgb), .38);
}

/* ── Titre de carte : hiérarchie éditoriale ──────────────────────── */
#map-title { font-size: .92rem; letter-spacing: -0.005em; }
.carto-title-meta { margin-top: 2px; gap: 0; }
#map-meta span { display: inline-flex; align-items: center; }
#map-meta span + span::before {
    content: "·";
    margin: 0 7px;
    color: var(--carto-muted);
    opacity: .6;
}

/* ── Accordéon « Plus de filtres » ───────────────────────────────── */
.carto-more-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--carto-bg);
    border: 1px dashed var(--carto-border);
    border-radius: var(--carto-radius-lg);
    color: var(--carto-muted);
    font-size: .76rem;
    font-weight: 600;
    padding: 7px 11px;
    cursor: pointer;
    margin-bottom: .75rem;
    transition: color .15s, border-color .15s, background .15s;
}
.carto-more-toggle:hover { color: var(--carto-accent); border-color: rgba(var(--carto-accent-rgb), .5); }
.carto-more-toggle:focus-visible { outline: 2px solid var(--carto-accent); outline-offset: 2px; }
.carto-more-chevron { transition: transform .25s ease; font-size: 1rem; }
.carto-more-toggle[aria-expanded="true"] .carto-more-chevron { transform: rotate(180deg); }
.carto-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.carto-collapse.open { max-height: 760px; }

/* ── Chorophlèthes : transitions fluides des polygones ───────────── */
#carto-map path.leaflet-interactive {
    transition: fill .3s ease, fill-opacity .25s ease, stroke .2s ease, stroke-width .15s ease;
}

/* Pas de rectangle de focus navigateur au clic souris sur un polygone
   (boîte englobante SVG) — le contour clavier reste pour l'accessibilité */
#carto-map path.leaflet-interactive:focus:not(:focus-visible) { outline: none; }
#carto-map path.leaflet-interactive:focus-visible {
    outline: 2px solid var(--carto-accent);
}

/* ── Boutons d'action compacts de l'en-tête ──────────────────────── */
.carto-actions .btn-icon {
    width: 32px;
    height: 31px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* ── Légende : respiration ────────────────────────────────────────── */
.carto-legend-overlay { padding: 11px 14px 9px; border-radius: var(--carto-radius-lg); }
.map-legend-item { margin-bottom: 5px; }
.map-legend-swatch { border-radius: 4px; }

/* ── Fiche latérale : ombre plus douce ───────────────────────────── */
#projet-sidebar { box-shadow: -8px 0 44px rgba(30, 30, 60, .16); }

/* ── Apparition douce des overlays ───────────────────────────────── */
@keyframes cartoFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.carto-title-main, .carto-legend-overlay, .carto-ranking, .carto-onboarding {
    animation: cartoFadeIn .35s ease both;
}

/* ── Popup Leaflet aux couleurs du thème ─────────────────────────── */
.carto-popup .leaflet-popup-content-wrapper {
    background: var(--carto-paper);
    color: var(--carto-text);
    border: 1px solid var(--carto-border);
    border-radius: var(--carto-radius-lg);
    box-shadow: var(--carto-shadow);
}
.carto-popup .leaflet-popup-content { margin: 12px 14px; font-size: .82rem; }
.carto-popup .leaflet-popup-tip {
    background: var(--carto-paper);
    border: 1px solid var(--carto-border);
}
.carto-popup a.leaflet-popup-close-button { color: var(--carto-muted); }

/* ── Bandeau titre sur mobile : pleine largeur, méta compacte ────── */
@media (max-width: 768px) {
    .carto-title-bar { inset-inline-end: 10px; }
    .carto-title-main { max-width: 100%; }
    .carto-title-meta {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ── Sparkline du profil de zone (graphique interactif léger) ─────── */
.carto-sparkline {
    background: var(--carto-bg);
    border: 1px solid var(--carto-border);
    border-radius: var(--carto-radius-lg);
    padding: 8px 10px 5px;
    margin-bottom: 10px;
}
.carto-sparkline circle { cursor: pointer; transition: r .12s ease; }
.carto-sparkline circle:hover { r: 5; }
.carto-sparkline-range {
    display: flex;
    justify-content: space-between;
    font-size: .64rem;
    color: var(--carto-muted);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* KPI cliquables : focus clavier visible */
.carto-kpi-item[role="button"]:focus-visible {
    outline: 2px solid var(--carto-accent);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   Bande de statistiques v2.6 — une surface, typographie d'abord
   (fusionnée au bloc carte ; remplace les cartes KPI individuelles)
   ═══════════════════════════════════════════════════════════════════ */
.carto-stat-band {
    display: flex;
    align-items: stretch;
    background: var(--carto-paper);
    border-bottom: 1px solid var(--carto-border);
    border-radius: var(--carto-radius-lg) var(--carto-radius-lg) 0 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.carto-stat-band::-webkit-scrollbar { display: none; }

.carto-stat-band .carto-kpi-item {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: .95rem 1.3rem .85rem;
    gap: .75rem;
    flex: 1 1 0;
    min-width: 152px;
    position: relative;
    transition: background .15s;
}
.carto-stat-band .carto-kpi-item + .carto-kpi-item::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 24%;
    bottom: 24%;
    width: 1px;
    background: var(--carto-border);
}
.carto-stat-band .carto-kpi-item:hover {
    transform: none;
    box-shadow: none;
}
.carto-stat-band .carto-kpi-item[role="button"]:hover {
    background: rgba(var(--carto-accent-rgb), .06);
}
.carto-stat-band .carto-kpi-item:focus-visible {
    outline: 2px solid var(--carto-accent);
    outline-offset: -2px;
}

/* icône discrète : le glyphe seul porte la couleur sémantique */
.carto-stat-band .carto-kpi-icon {
    width: auto;
    height: auto;
    background: transparent !important;
    border-radius: 0;
    font-size: 1.05rem;
    opacity: .95;
}
.carto-stat-band .carto-kpi-value {
    font-size: 1.42rem;
    letter-spacing: -0.015em;
    line-height: 1.05;
}
.carto-stat-band .carto-kpi-label {
    font-size: .64rem;
    letter-spacing: .06em;
    margin-top: 3px;
}
.carto-stat-band .kpi-donut { width: 36px; height: 36px; }
.carto-stat-band .kpi-donut::after { inset: 5px; }

/* ═══════════════════════════════════════════════════════════════════
   Layout v2.4 — rail rétractable, poignée classement, mobile intelligent
   ═══════════════════════════════════════════════════════════════════ */

/* ── Entête du panneau filtres ────────────────────────────────────── */
.carto-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 10px 16px;
    border-bottom: 1px solid var(--carto-border);
}
.carto-panel-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--carto-muted);
}
.carto-rail-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--carto-radius);
    background: transparent;
    color: var(--carto-muted);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.carto-rail-btn:hover { background: rgba(var(--carto-accent-rgb), .12); color: var(--carto-accent); }
.carto-rail-btn:focus-visible { outline: 2px solid var(--carto-accent); outline-offset: 2px; }
[dir="rtl"] .carto-rail-btn i { transform: scaleX(-1); }

/* ── Rail replié (desktop) ────────────────────────────────────────── */
.carto-rail {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
}
.carto-rail-sep { width: 22px; height: 1px; background: var(--carto-border); margin: 2px 0 4px; }
.carto-rail .rail-couche.active {
    background: var(--carto-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--carto-accent-rgb), .35);
}

@media (min-width: 992px) {
    #carto-shell { display: flex; flex-wrap: nowrap; }
    .carto-panel-col { transition: max-width .28s ease, flex-basis .28s ease; }
    #carto-shell.rail .carto-panel-col {
        flex: 0 0 58px;
        max-width: 58px;
    }
    #carto-shell.rail .carto-panel-head,
    #carto-shell.rail .carto-panel-body { display: none; }
    #carto-shell.rail .carto-rail { display: flex; }
    #carto-shell .col-lg-9 { flex: 1 1 auto; max-width: none; width: auto; }
}

/* ── Poignée latérale du classement (onglet vertical, bord droit) ── */
.carto-ranking-handle {
    position: absolute;
    top: 50%;
    inset-inline-end: 0;
    transform: translateY(-50%);
    z-index: 865;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 5px 12px;
    border: 1px solid var(--carto-border);
    border-inline-end: none;
    border-start-start-radius: var(--carto-radius-lg);
    border-end-start-radius: var(--carto-radius-lg);
    background: color-mix(in srgb, var(--carto-paper) 88%, transparent);
    backdrop-filter: blur(8px);
    color: var(--carto-muted);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.carto-ranking-handle span { writing-mode: vertical-rl; text-orientation: mixed; text-transform: uppercase; }
.carto-ranking-handle i { font-size: 1rem; }
.carto-ranking-handle:hover,
.carto-ranking-handle[aria-pressed="true"] { color: var(--carto-accent); }
.carto-ranking-handle:focus-visible { outline: 2px solid var(--carto-accent); outline-offset: -2px; }

/* Le panneau classement laisse respirer zoom et échelle */
.carto-ranking { top: 56px; bottom: 56px; }

/* ── FAB filtres + pastille légende (mobile) ──────────────────────── */
.carto-filters-fab {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 890;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: none;
    border-radius: var(--carto-radius-pill);
    background: var(--carto-accent);
    color: #fff;
    font-size: .86rem;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(var(--carto-accent-rgb), .45);
    cursor: pointer;
}
.carto-filters-fab .badge { font-size: .62rem; }
.carto-legend-chip {
    position: absolute;
    bottom: 14px;
    inset-inline-start: 10px;
    z-index: 890;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid var(--carto-border);
    border-radius: var(--carto-radius-pill);
    background: color-mix(in srgb, var(--carto-paper) 88%, transparent);
    backdrop-filter: blur(8px);
    color: var(--carto-muted);
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
}
.carto-legend-chip[aria-pressed="true"] { color: var(--carto-accent); border-color: var(--carto-accent); }

/* ── Mobile : la carte d'abord ────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Panneau filtres = tiroir plein écran, fermé par défaut */
    .carto-panel-col {
        position: fixed;
        inset: 0;
        z-index: 1300;
        padding: 12px;
        background: rgba(0, 0, 0, .35);
        display: none;
    }
    .carto-panel-col.open { display: block; }
    .carto-panel-col .carto-panel-left { max-height: 100%; overflow: hidden; display: flex; flex-direction: column; }
    .carto-panel-col .carto-panel-body { max-height: none; flex: 1; overflow-y: auto; }
    .carto-rail { display: none !important; }

    /* Statistiques : bande défilante avec accroche, la carte reste au premier écran */
    .carto-stat-band {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .carto-stat-band .carto-kpi-item { flex: 0 0 150px; scroll-snap-align: start; }

    #carto-map { height: 68vh; min-height: 380px; }

    /* Légende repliée par défaut (pastille pour l'ouvrir) */
    .carto-legend-overlay { display: none; }
    .carto-legend-overlay.open { display: block; }

    /* La colonne carte occupe toute la largeur (le panneau est un tiroir) */
    #carto-shell .col-lg-9 { width: 100%; max-width: 100%; flex: 0 0 100%; }

    /* La visite guidée ne recouvre pas le bouton flottant Filtres */
    .carto-onboarding { bottom: 70px; }

    /* Désengorger la petite carte */
    .leaflet-control-scale { display: none; }
    .carto-geocoder input { width: 128px; }
    .carto-ranking { inset-inline-start: 10px; width: auto; }
    .carto-title-main { max-width: calc(100% - 52px); }
    #map-meta {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ── Réduction de mouvement ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .carto-kpi-item, #projet-sidebar, .sd-progress-fill,
    .zone-projet-item, .cluster-icon, .carto-collapse,
    .carto-more-chevron, #carto-map path.leaflet-interactive,
    .carto-panel-col { transition: none; }
    .carto-title-main, .carto-legend-overlay, .carto-ranking, .carto-onboarding { animation: none; }
}