/* ==========================================================================
   Villes & Climats — thème v2
   Reskin + réorganisation du shell autour de l'app carte legacy existante
   (main.js/app.js, SourceRegistry, Card, etc. restent inchangés : ce fichier
   ne fait que repositionner/restyler les mêmes ids/classes).
   ========================================================================== */

:root,
[data-vc2-theme="dark"] {
    --vc2-accent: #1AAEE0;
    --vc2-accent-contrast: #ffffff;
    --vc2-warning: #F5A623;
    --vc2-good: #3fb96b;   /* écart favorable (indicateurs) */
    --vc2-bad:  #e5604d;   /* écart défavorable */
    --vc2-bg-page: #141619;
    --vc2-surface-1: #1b1e22;
    --vc2-surface-2: #1c2024;
    --vc2-surface-3: #22262b;
    --vc2-surface-float: rgba(24, 27, 31, .92);
    --vc2-border-1: #262b30;
    --vc2-border-2: #2c3136;
    --vc2-text-heading: #ffffff;
    --vc2-text-body: #e8ecef;
    --vc2-text-secondary: #aab2ba;
    --vc2-text-tertiary: #8a9099;
    --vc2-text-disabled: #5b6167;
    --vc2-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    --vc2-shadow-sm: 0 4px 14px rgba(0, 0, 0, .35);
}

[data-vc2-theme="light"] {
    --vc2-bg-page: #f4f6f8;
    --vc2-surface-1: #ffffff;
    --vc2-surface-2: #eef1f4;
    --vc2-surface-3: #e4e8ec;
    --vc2-surface-float: rgba(255, 255, 255, .92);
    --vc2-border-1: #dde2e7;
    --vc2-border-2: #cfd5db;
    --vc2-text-heading: #12151a;
    --vc2-text-body: #2a2f36;
    --vc2-text-secondary: #525b66;
    --vc2-text-tertiary: #6b7480;
    --vc2-text-disabled: #a8b0b8;
    --vc2-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    --vc2-shadow-sm: 0 4px 14px rgba(0, 0, 0, .1);
    --vc2-good: #2e9e57;
    --vc2-bad:  #cf4635;
}

/* Police d'icônes Material Symbols (chargée dans index-v2.php). */
.vc2-msym {
    font-family: 'Material Symbols Rounded';
    font-weight: normal; font-style: normal; line-height: 1;
    letter-spacing: normal; text-transform: none; white-space: nowrap;
    direction: ltr; -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
/* Icône Material inline dans un libellé texte (lignes de priorisation, pill
   ville, boutons du menu, etc.) : taille alignée sur le texte + léger décalage. */
.vc2-msym.vc2-ico-inline { font-size: 17px; vertical-align: -3px; margin-right: 4px; }
.vc2-topbar button .vc2-msym { font-size: 22px; }

body.vc2 {
    margin: 0;
    background: var(--vc2-bg-page);
    color: var(--vc2-text-body);
    font-family: 'Barlow', 'Segoe UI', Roboto, Arial, sans-serif;
    overflow: hidden;
}

.vc2-app {
    width: 100%;
    height: 100vh;
    display: flex;
    background: var(--vc2-bg-page);
    position: relative;
    overflow: hidden;
}

.vc2-hidden { display: none !important; }

/* ---------- Réduction sidebar/panneau droit (desktop) ------------------- */
/* Boutons hors des panneaux (enfants de .vc2-app, position:relative) pour
   rester cliquables une fois le panneau réduit à width:0 — positionnés à
   cheval sur le bord du panneau (moitié dedans/dehors), glissent vers 0
   quand il se réduit. Neutralisés en mobile (media query plus bas) où le
   burger existant (vc2OpenSidebar/vc2OpenRightPanel) gère déjà l'ouverture. */
.vc2-panel-toggle {
    position: absolute;
    top: 28px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--vc2-surface-1);
    border: 1px solid var(--vc2-border-2);
    color: var(--vc2-text-secondary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 56;
    box-shadow: var(--vc2-shadow-sm);
    transition: left .2s ease, right .2s ease, background .15s, color .15s;
}
.vc2-panel-toggle:hover { background: var(--vc2-surface-3); color: var(--vc2-text-heading); }
.vc2-panel-toggle svg { transition: transform .2s ease; }

/* Étalé à cheval sur la bordure du panneau ouvert (translateX ±50%) ; une
   fois réduit (left/right ~0), ce même translateX pousserait la moitié du
   bouton hors de l'écran (bord du panneau confondu avec le bord de la
   fenêtre) — annulé dans l'état réduit, avec une petite marge à la place. */
.vc2-sidebar-toggle { left: 220px; transform: translateX(-50%); }
.vc2-app.vc2-sidebar-collapsed .vc2-sidebar-toggle { left: 6px; transform: translateX(0); }
.vc2-app.vc2-sidebar-collapsed .vc2-sidebar-toggle svg { transform: rotate(180deg); }

.vc2-rightpanel-toggle { right: 300px; transform: translateX(50%); }
.vc2-app.vc2-rightpanel-collapsed .vc2-rightpanel-toggle { right: 6px; transform: translateX(0); }
.vc2-app.vc2-rightpanel-collapsed .vc2-rightpanel-toggle svg { transform: rotate(180deg); }
/* Le panneau droit n'existe que sur l'onglet Carte (masqué ailleurs via
   .vc2-hidden sur #vc2RightPanel, cf. theme.js) : son bouton suit. */
.vc2-rightpanel-toggle.vc2-hidden { display: none !important; }
.vc2-soon {
    font-size: 9px;
    background: var(--vc2-surface-3);
    color: var(--vc2-text-tertiary);
    padding: 2px 6px;
    border-radius: 5px;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.vc2-demo-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(245, 166, 35, .12);
    border: 1px solid rgba(245, 166, 35, .4);
    color: var(--vc2-text-body);
    font-size: 12px;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.vc2-demo-banner b { color: var(--vc2-warning); }

/* ---------- Sidebar ---------------------------------------------------- */

.vc2-sidebar {
    width: 220px;
    flex: 0 0 220px;
    background: var(--vc2-surface-1);
    border-right: 1px solid var(--vc2-border-1);
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    box-sizing: border-box;
    transition: transform .25s ease, flex-basis .2s ease, width .2s ease, padding .2s ease, opacity .15s ease;
    overflow: hidden;
    z-index: 50;
}

/* Réduit (desktop) : plus de place pour la carte. Neutralisé en mobile (media
   query plus bas) où .vc2-sidebar est déjà en position:fixed hors-écran par
   défaut — la réduction n'a pas de sens dans ce mode. */
.vc2-sidebar.vc2-collapsed {
    width: 0;
    flex-basis: 0;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    border-right: 0;
}

/* Logo The Climate Company au-dessus du titre Villes & Climats */
.vc2-brand {
    display: block;
    padding: 4px 8px 0;
    margin-bottom: 10px;
}
.vc2-brand img {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
}

.vc2-logo {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    margin-bottom: 24px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--vc2-text-heading);
}
.vc2-logo span { color: var(--vc2-accent); }

.vc2-nav { display: flex; flex-direction: column; gap: 6px; }

.vc2-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--vc2-text-secondary);
    cursor: pointer;
    border: 0;
    background: none;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    text-decoration: none;
    transition: background .15s, color .15s;
    font-family: inherit;
}
.vc2-nav-item:hover { background: var(--vc2-surface-3); color: var(--vc2-text-heading); }
.vc2-nav-item.active { background: var(--vc2-accent); color: #fff; }
.vc2-nav-item svg { flex-shrink: 0; }

.vc2-nav-disabled {
    color: var(--vc2-text-disabled);
    cursor: not-allowed;
}
.vc2-nav-disabled:hover { background: none; color: var(--vc2-text-disabled); }
.vc2-nav-item.vc2-nav-disabled { display: flex; }
.vc2-nav-item.vc2-nav-disabled span:first-of-type { flex: 1; }

.vc2-nav-sep { height: 1px; background: var(--vc2-border-1); margin: 12px 4px; }

.vc2-sidebar-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
}
.vc2-sidebar-bottom .vc2-nav-item { font-size: 13px; padding: 10px 12px; }

.vc2-switch {
    width: 34px;
    height: 18px;
    border-radius: 9px;
    background: var(--vc2-surface-3);
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
    transition: background .15s;
}
[data-vc2-theme="light"] .vc2-switch { background: var(--vc2-accent); }
.vc2-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: left .15s;
}
[data-vc2-theme="light"] .vc2-switch::after { left: 18px; }

/* ---------- Topbar (mobile) -------------------------------------------- */

.vc2-topbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--vc2-surface-1);
    border-bottom: 1px solid var(--vc2-border-1);
    color: var(--vc2-text-body);
    flex: 0 0 auto;
}
.vc2-topbar button {
    background: none; border: 0; color: inherit; font-size: 20px; cursor: pointer;
}

/* ---------- Main / tab panels ------------------------------------------ */

.vc2-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    height: 100vh;
    box-sizing: border-box;
}

.vc2-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.vc2-tab-panel { flex: 1; min-height: 0; display: none; }
.vc2-tab-panel.vc2-active { display: flex; flex-direction: column; }

.vc2-tab-scroll {
    flex: 1;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 24px 32px 32px;
}

.vc2-tab-eyebrow {
    font-size: 13px;
    font-weight: 700;
    color: var(--vc2-accent);
    letter-spacing: .5px;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.vc2-tab-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--vc2-text-heading);
    margin-bottom: 24px;
}

/* ---------- Carte tab ---------------------------------------------------
   Le contenu interne (#map, cards, légendes, nav secondaire...) est la
   même appli legacy: on la scope juste dans un pane position:relative pour
   que les .card-container-* (position:absolute) s'ancrent ici et non au
   viewport, puis on la reskine.
--------------------------------------------------------------------------*/

/* .vc2-map-pane est TOUJOURS montée (jamais display:none) : c'est la même
   carte Mapbox partout. theme.js positionne top/left/width/height en inline
   (position:fixed) pour la faire correspondre soit à la zone de l'onglet
   Carte, soit au petit cadre .vc2-proj-minimap de l'onglet Projections —
   animé via la transition ci-dessous ("la fenêtre doit se rétrécir"). */
.vc2-map-pane {
    position: fixed;
    top: 0; left: 0; width: 0; height: 0;
    z-index: 4;
    overflow: hidden;
    background: #0c0d0f;
    border-radius: 0;
    transform: scale(1);
    transform-origin: top left;
    transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease, transform .25s ease, border-radius .25s ease;
}
.vc2-map-pane.vc2-map-mini {
    border-radius: 14px;
    box-shadow: var(--vc2-shadow);
}
/* Pendant le scroll d'un onglet, on repositionne la carte fixe pour qu'elle
   suive son cadre (sinon elle reste figée et recouvre le contenu qui défile) :
   on coupe alors la transition pour un suivi instantané, sans lag. */
.vc2-map-pane.vc2-map-noanim { transition: none; }
.vc2-map-pane.vc2-map-mini .vc2-map-overlays { display: none; }
/* Aperçu non-interactif : les boutons +/- n'ont pas leur place (l'attribution
   Mapbox, elle, reste visible — obligatoire). */
.vc2-map-pane.vc2-map-mini .mapboxgl-ctrl-bottom-right { display: none; }
/* Mini-carte Projections = pur aperçu : AUCUNE interaction (ni clic sur une
   section, ni déplacement, ni curseur "main"). On coupe les évènements pointeur
   sur toute la carte réduite. (Exclut l'onglet Simulation, lui interactif.) */
.vc2-map-pane.vc2-map-mini:not(.vc2-map-sim) { pointer-events: none; cursor: default; }
/* Onglet Urban Simulation : carte interactive, on RÉ-affiche les contrôles zoom
   (masqués par le mode mini) et on garde le curseur de déplacement. */
.vc2-map-pane.vc2-map-sim .mapboxgl-ctrl-bottom-right { display: block; }
.vc2-map-pane.vc2-map-sim { cursor: grab; }
.vc2-map-pane.vc2-map-sim:active { cursor: grabbing; }
/* Bouton "agrandir la carte" (contrôle Mapbox custom, visible seulement en sim). */
.vc2-map-pane:not(.vc2-map-sim) .vc2-sim-max-ctrl { display: none; }
.vc2-sim-max-ctrl button { font-size: 18px; line-height: 1; }
/* Carte agrandie (bouton ⛶) : le cadre repère grandit, theme.js repositionne. */
.vc2-sim-view.vc2-sim-map-max { height: 76vh; }

.vc2-mini-badge {
    display: none;
    position: absolute; top: 12px; left: 12px; z-index: 2;
    font-size: 12px; font-weight: 700; color: var(--vc2-text-heading);
    background: var(--vc2-surface-float); backdrop-filter: blur(4px);
    padding: 4px 10px; border-radius: 7px;
}
/* Badge = nom de ville du mini-encart Projections uniquement. L'onglet Urban
   Simulation porte aussi .vc2-map-mini mais son libellé est vidé (theme.js) —
   sans ce :not() il resterait un petit pavé sombre vide en haut à gauche. */
.vc2-map-pane.vc2-map-mini:not(.vc2-map-sim) .vc2-mini-badge { display: block; }
.vc2-mini-badge:empty { display: none; }

.vc2-map-pane #map { width: 100%; height: 100%; }

.vc2-map-toprow {
    /* PAS de z-index ici : un z-index sur ce conteneur créerait un nouveau
       contexte d'empilement qui piégerait le z-index:30 de .vc2-pill-menu
       à l'intérieur — comparé alors non pas globalement, mais seulement à
       z-index:5 face à un frère (.vc2-parcelle-toggle) plus tard dans le
       DOM, qui gagnait la comparaison et passait par-dessus le menu
       déroulant "Choisir un aléa" ouvert. Sans z-index ici, .vc2-pill-menu
       rivalise directement avec les autres calques flottants. */
    position: absolute;
    top: 20px; left: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    max-width: calc(100% - 220px);
}

.vc2-pill {
    position: relative;
}
.vc2-pill-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--vc2-surface-2);
    color: var(--vc2-text-body);
    border: 1px solid var(--vc2-border-2);
    font-size: 13px;
    font-weight: 600;
    padding: 0 16px;
    height: 40px;
    border-radius: 10px;
    box-shadow: var(--vc2-shadow-sm);
    cursor: pointer;
    white-space: nowrap;
}
.vc2-pill-btn.vc2-pill-accent { background: var(--vc2-accent); color: #fff; border-color: var(--vc2-accent); }
.vc2-pill-btn .vc2-caret { transition: transform .15s; }
.vc2-pill.vc2-open .vc2-pill-btn .vc2-caret { transform: rotate(180deg); }

.vc2-pill-menu {
    display: none;
    position: absolute;
    top: 46px; left: 0;
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--vc2-surface-2);
    border: 1px solid var(--vc2-border-2);
    border-radius: 10px;
    box-shadow: var(--vc2-shadow);
    z-index: 30;
    padding: 6px 0;
    list-style: none;
    margin: 0;
}
.vc2-pill.vc2-open .vc2-pill-menu { display: block; }
.vc2-pill-menu li {
    position: relative; /* ancre .layer-on-demand (cards.css), sinon son
        position:absolute remonte au premier ancêtre positionné disponible
        et le tooltip "Service disponible sur demande" s'affiche en texte
        inline au lieu de recouvrir juste la ligne */
    padding: 9px 16px;
    font-size: 13px;
    color: var(--vc2-text-body);
    cursor: pointer;
}
.vc2-pill-menu li:hover { background: var(--vc2-surface-3); }
.vc2-pill-menu li.active { color: var(--vc2-accent); font-weight: 700; }
.vc2-pill-menu li.available-on-demand { color: var(--vc2-text-disabled); }

/* Hint « Service disponible sur demande » : sur le thème v2, c'est une INFOBULLE
   (noir sur fond blanc) flottant au-dessus de l'élément, et non plus le calque
   plein qui recouvrait toute la ligne (comportement cards.css). Injecté par
   utils.js au survol (<div class="layer-on-demand">…</div>). Scopé à body.vc2. */
body.vc2 .available-on-demand { position: relative; }
body.vc2 .layer-on-demand {
    position: absolute; /* explicite : cards.css ne le pose que dans li/.card */
    top: auto; right: auto; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    width: max-content; max-width: 220px;
    padding: 7px 11px;
    display: block;
    background: #fff; color: #000;
    font-size: 12px; font-weight: 600; line-height: 1.3;
    white-space: normal; text-align: center;
    border: 1px solid rgba(0, 0, 0, .10); border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    z-index: 60; pointer-events: none;
}
body.vc2 .layer-on-demand::after {
    content: ''; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #fff;
}

.vc2-segmented {
    display: flex;
    background: var(--vc2-surface-2);
    border: 1px solid var(--vc2-border-2);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--vc2-shadow-sm);
}
/* .vc2-segmented sert aussi tel quel (position statique) dans la barre
   d'outils de l'onglet Projections : le positionnement flottant du toggle
   Quartier/Parcelle de l'onglet Carte va donc dans une classe à part plutôt
   que dans un style inline (un style inline gagne toujours contre les media
   queries sans !important — c'est ce qui bloquait le correctif mobile). */
.vc2-parcelle-toggle { position: absolute; top: 20px; right: 20px; z-index: 5; }
.vc2-segmented [data-type="source"] {
    padding: 0 20px;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--vc2-text-secondary);
    cursor: pointer;
}
.vc2-segmented input.toggle:checked ~ [data-source="ucix_parcels"],
.vc2-segmented [data-source="ucix_sections"] {
    color: var(--vc2-text-secondary);
}
/* .active is toggled by UIButtonSource (target.closest('li')) only for <li> —
   for these plain spans we mirror active state via theme.js instead */
.vc2-segmented [data-type="source"].vc2-active { background: var(--vc2-accent); color: #fff; }
.vc2-segmented input[type="checkbox"] { display: none; }

/* Toggle Echelle absolue/relative (repris de l'ancienne version, cf. plus
   bas dans le panneau Priorisation — un essai de pastille flottante sur la
   carte est entré en collision avec la recherche déjà tassée sur cette
   colonne, cf. historique). OptionScale.js pilote .js-option-scale
   directement en ".active" (pas ".vc2-active" comme pour les <li> — deux
   mécanismes différents dans ce code legacy), d'où une règle séparée plutôt
   que de réutiliser [data-type="source"].vc2-active. */
.vc2-rightpanel .vc2-scale-toggle {
    display: flex;
    background: var(--vc2-surface-2);
    border: 1px solid var(--vc2-border-2);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 8px;
}
.vc2-rightpanel .vc2-scale-toggle .js-option-scale {
    flex: 1;
    padding: 7px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--vc2-text-secondary);
    cursor: pointer;
}
.vc2-rightpanel .vc2-scale-toggle .js-option-scale.active { background: var(--vc2-accent); color: #fff; }

.vc2-urban-panel {
    position: absolute;
    top: 76px; left: 20px;
    width: 260px;
    max-width: calc(100% - 40px);
    max-height: 55vh;
    overflow-y: auto;
    background: var(--vc2-surface-float);
    backdrop-filter: blur(6px);
    border: 1px solid var(--vc2-border-2);
    border-radius: 12px;
    padding: 16px;
    z-index: 4;
    box-shadow: var(--vc2-shadow);
}
.vc2-urban-panel h3 {
    font-size: 14px; font-weight: 700; color: var(--vc2-text-heading);
    margin: 0 0 10px;
}
.vc2-urban-panel label {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; color: var(--vc2-text-body);
    padding: 5px 0; cursor: pointer;
}
.vc2-urban-panel input[type="checkbox"] { accent-color: var(--vc2-accent); width: 14px; height: 14px; }
.vc2-urban-panel label.available-on-demand { color: var(--vc2-text-disabled); position: relative; cursor: not-allowed; }

.vc2-search-float {
    /* top:70 = sous le toggle Quartier/Parcelle (top:20, 40px de haut) — les
       deux étaient superposés au même top:20/right:20 avant ce correctif.
       z-index:25 : la liste de résultats (.vc2-search-results, en flux
       normal dans ce conteneur) chevauche géométriquement le panneau
       "Données urbaines" et la carte de score en dessous quand elle
       s'ouvre — .card-container hérite de cards.css un z-index:10 jamais
       surchargé, donc la carte de score passait PAR-DESSUS la recherche
       ouverte (le "halo blanc" visible derrière le dropdown). */
    position: absolute;
    top: 70px; right: 20px;
    z-index: 25;
    width: 260px;
    max-width: calc(100% - 40px);
}
.vc2-search-box {
    display: flex;
    align-items: center;
    background: var(--vc2-surface-2);
    border: 1px solid var(--vc2-border-2);
    border-radius: 10px;
    height: 40px;
    box-shadow: var(--vc2-shadow-sm);
    overflow: hidden;
}
.vc2-search-box input {
    flex: 1; border: 0; background: none; color: var(--vc2-text-body);
    padding: 0 12px; font-size: 13px; height: 100%; outline: none;
}
.vc2-search-box input::placeholder { color: var(--vc2-text-tertiary); opacity: 1; }
.vc2-search-box { background: var(--vc2-surface-2); }
.vc2-search-box button {
    border: 0; background: none; color: var(--vc2-text-tertiary); padding: 0 12px;
    height: 100%; cursor: pointer; display: flex; align-items: center;
}
.vc2-search-box button img { height: 15px; }
.vc2-search-results {
    margin-top: 6px;
    background: var(--vc2-surface-2);
    border: 1px solid var(--vc2-border-2);
    border-radius: 10px;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: var(--vc2-shadow);
}
.vc2-search-results.hidden, .vc2-search-results .hidden { display: none; }
.vc2-search-results .project-sidebar-link {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    padding: 10px 14px; cursor: pointer; color: var(--vc2-text-body);
}
.vc2-search-results .project-sidebar-link:hover { background: var(--vc2-surface-3); }
.vc2-search-results .project-sidebar-name { margin: 0; font-size: 13px; font-weight: 700; color: var(--vc2-text-heading); }
.vc2-search-results .project-sidebar-location { margin: 0; font-size: 11px; color: var(--vc2-text-tertiary); }
.vc2-search-results .no-results, .vc2-search-results .pending { padding: 12px 14px; font-size: 12px; color: var(--vc2-text-tertiary); text-align: center; }
/* app-city.css a "#search-results, .default-city{ background-color:
   rgba(0,0,0,0.7); height: calc(100vh - 4.81rem - 110px); margin-inline:
   1.25rem; ...}" — un sélecteur par ID (spécificité imbattable par des
   classes) pour #search-results, pensé pour l'ancienne sidebar plein écran.
   Ce fond noir semi-transparent restait peint par-dessus le fond clair de
   .vc2-search-results en thème clair. #search-results est le résultat de
   recherche normal ; .default-city est affiché à la place pour un compte à
   accès restreint (villes limitées, cf. $can_access_all_cites) — les deux
   partagent la même règle légataire donc les deux doivent être neutralisés
   ici (un seul l'était avant, d'où le bug qui persistait avec un autre
   compte). */
.vc2-search-results #search-results,
.vc2-search-results .default-city {
    background: none;
    height: auto;
    max-height: none;
    margin-inline: 0;
    border-radius: 0;
}
/* Affichage piloté par la classe .hover-search/.forceHover ajoutée par
   Search.js (app-city.css: .hover-search:hover/.forceHover .layer-suggestions)
   — on ne touche pas à cette logique, juste au style visuel ci-dessus. */

/* zoom / home controls (mapbox NavigationControl renders its own, this only
   covers legacy #slider + priority legend) */
.vc2-priority-legend {
    position: absolute;
    bottom: 20px; left: 20px;
    z-index: 4;
    background: var(--vc2-surface-float);
    backdrop-filter: blur(6px);
    border: 1px solid var(--vc2-border-2);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: var(--vc2-shadow);
    max-width: calc(100% - 40px);
}
.vc2-priority-legend h3 { font-size: 13px; font-weight: 700; color: var(--vc2-text-heading); margin: 0 0 2px; }
.vc2-priority-legend .vc2-sub { font-size: 11px; color: var(--vc2-text-tertiary); margin-bottom: 8px; }
/* Les chiffres (0/3/5/7/10) sont posés sur le dégradé coloré (vert->rouge)
   de .range, pas sur le fond du panneau : ils n'avaient pas de couleur
   explicite, donc héritaient de --vc2-text-body — sombre en thème clair,
   illisible sur ce fond saturé. Toujours blanc, quel que soit le thème, avec
   une légère ombre pour rester lisible sur les segments clairs (jaune/vert). */
.vc2-priority-legend .range ul li {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

.vc2-export-btn {
    /* right:66 (pas 20) pour ne pas chevaucher les contrôles natifs mapbox
       (zoom + attribution), qui vivent dans .mapboxgl-ctrl-bottom-right et ne
       savent rien de nos propres éléments flottants. */
    position: absolute;
    bottom: 20px; right: 66px;
    z-index: 4;
    display: flex; align-items: center; gap: 8px;
    background: var(--vc2-warning);
    color: #1c1200;
    font-weight: 700; font-size: 13px;
    padding: 0 18px; height: 40px;
    border-radius: 10px;
    box-shadow: var(--vc2-shadow-sm);
    cursor: pointer;
    border: 0;
}

.vc2-basemap-slider {
    position: absolute;
    bottom: 76px; right: 66px;
    z-index: 4;
    background: var(--vc2-surface-float);
    border: 1px solid var(--vc2-border-2);
    border-radius: 10px;
    padding: 8px 12px;
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--vc2-text-tertiary);
    box-shadow: var(--vc2-shadow-sm);
}

/* ---- reskin des cards/legends legacy réutilisées dans l'onglet Carte --- */

/* cards.css (legacy) donne à .card-container un z-index:10, jamais pensé
   pour coexister avec nos propres calques (recherche z-index:25, menus
   déroulants z-index:30) : sans ce recalage, la carte de score passait
   par-dessus une recherche ouverte alors qu'elle est géométriquement
   dessous. z-index:4 l'aligne sur le même palier que .vc2-urban-panel
   (le "calque de base" persistant, sous tout ce qui est temporaire/ouvert). */
.vc2-map-pane .card-container { font-family: inherit; z-index: 4; }
/* card_ucix/card_risks n'ont plus .card-absolute (qui les positionnait en
   bottom:0/left:0 sur un parent à hauteur collapsée par cards.css) : ils sont
   maintenant en flux normal, empilés dans ce conteneur repositionné. */
.vc2-map-pane .card-container-bl {
    /* top ET bottom fixés (pas de max-height calculé à la main, source du bug
       précédent : avec seulement bottom+max-height, un contenu long remontait
       la boîte jusqu'à ~40px du haut et recouvrait recherche/Quartier/Parcelle).
       Ici la hauteur est toujours exactement "entre les deux", jamais plus.
       top:130 = sous le toggle Quartier/Parcelle (40px) + la barre de
       recherche (top:70, 40px de haut) + marge. */
    top: 130px; left: auto; right: 20px; bottom: 130px; width: 280px; margin: 0;
    overflow-y: auto; overflow-x: hidden;
}
.vc2-map-pane .card-container-tr { display: none; } /* remplacé par les pills UCIX/aléa */
.vc2-map-pane .card-container-br { display: none; } /* Options + Cartographie thermique déplacés dans le panneau droit */
.vc2-map-pane .container-bc { display: none; } /* légende absolue/relative déplacée dans .vc2-priority-legend */

.vc2-map-pane .card {
    background: var(--vc2-surface-float);
    backdrop-filter: blur(6px);
    border: 1px solid var(--vc2-border-2);
    border-radius: 12px;
    box-shadow: var(--vc2-shadow);
}
.vc2-map-pane .card h2 { color: var(--vc2-text-heading); font-size: 13px; font-weight: 700; }
.vc2-map-pane .card .param_name { color: var(--vc2-text-secondary); font-size: 12px; }
.vc2-map-pane .card .bar { background: var(--vc2-surface-3); }

/* #card_ucix/#card_risks se basculent via UIButtonFeature.js -> utils.js
   forceHideCard()/forceShowCard(), qui ajoutent/retirent .outsideTo*Force —
   un pur transform (translateX), qui NE retire PAS l'élément du flux. Résultat
   : la carte cachée occupait quand même toute sa hauteur dans
   .card-container-bl, gonflant son scrollHeight bien au-delà de son contenu
   réellement visible — d'où un ascenseur qui apparaissait même quand la carte
   visible tenait largement dans son cadre. On ne touche pas au mécanisme JS
   (qui gère bien d'autres cas ailleurs), juste à cet état visuellement caché :
   hauteur 0 tant que la classe est présente, elle revient au flux normal dès
   que forceShowCard() la retire. */
.vc2-map-pane .card.outsideToLeftForce,
.vc2-map-pane .card.outsideToRightForce,
.vc2-map-pane .card.outsideToTopForce,
.vc2-map-pane .card.outsideToBottomForce {
    height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    overflow: hidden;
    border-width: 0;
}

/* ---------- Right panel (Priorisation) ---------------------------------- */

.vc2-rightpanel {
    width: 300px;
    flex: 0 0 300px;
    background: var(--vc2-surface-1);
    border-left: 1px solid var(--vc2-border-1);
    padding: 24px 20px;
    box-sizing: border-box;
    overflow-y: auto;
    transition: transform .25s ease, flex-basis .2s ease, width .2s ease, padding .2s ease, opacity .15s ease;
}
.vc2-rightpanel.vc2-collapsed {
    width: 0;
    flex-basis: 0;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    border-left: 0;
    overflow: hidden;
}
.vc2-rightpanel h4 {
    font-size: 12px; font-weight: 700; color: var(--vc2-text-tertiary);
    letter-spacing: .4px; margin: 0 0 10px; text-transform: uppercase;
}
.vc2-rightpanel-head {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 700; color: var(--vc2-text-heading);
    letter-spacing: .3px; margin-bottom: 18px;
}
.vc2-priority-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 8px;
    font-size: 13px; color: var(--vc2-text-body); cursor: pointer;
    list-style: none;
}
.vc2-priority-row:hover { background: var(--vc2-surface-3); }
.vc2-priority-row.active { color: var(--vc2-accent); }
.vc2-priority-row .vc2-radio {
    margin-left: auto; width: 15px; height: 15px; border-radius: 4px;
    border: 1px solid var(--vc2-border-2); flex-shrink: 0;
}
.vc2-priority-row.active .vc2-radio { background: var(--vc2-accent); border-color: var(--vc2-accent); }
.vc2-priority-row.vc2-disabled { color: var(--vc2-text-disabled); cursor: not-allowed; }
.vc2-priority-group { margin-bottom: 18px; }

/* Lignes « Données climatiques » : cases à cocher SUPERPOSABLES (plusieurs
   couches à la fois). La case et le libellé prennent la teinte de la couche
   (--vc2-layer posé inline sur le <li>, = VC2_CLIMATE_OVERLAYS dans app.js)
   pour faire le lien avec la carte et la légende. */
.vc2-priority-row.vc2-climate-row.active { color: var(--vc2-layer, var(--vc2-accent)); }
.vc2-priority-row .vc2-check { position: relative; border-radius: 4px; }
.vc2-priority-row.active .vc2-check {
    background: var(--vc2-layer, var(--vc2-accent));
    border-color: var(--vc2-layer, var(--vc2-accent));
}
.vc2-priority-row.active .vc2-check::after {
    content: ''; position: absolute; left: 4px; top: 1px;
    width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Légende des couches climatiques superposées : une rampe transparent→teinte
   par risque coché (les lignes non cochées sont masquées par theme.js). */
.vc2-climate-legend .vc2-sub { font-size: 11px; color: var(--vc2-text-tertiary); margin: -2px 0 8px; }
.vc2-climate-legend-row { display: none; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 6px; }
.vc2-climate-legend-row.on { display: flex; }
.vc2-climate-legend-ramp {
    flex: 0 0 90px; height: 12px; border-radius: 6px;
    border: 1px solid var(--vc2-border-2);
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--vc2-layer) 45%, transparent) 50%, var(--vc2-layer) 100%);
}
.vc2-climate-legend-scale {
    display: flex; justify-content: space-between; width: 92px;
    font-size: 10px; color: var(--vc2-text-tertiary); margin-top: 2px;
}
.vc2-climate-legend-na { font-size: 11px; color: var(--vc2-text-tertiary); margin-top: 6px; }
/* Infobulle socio : plusieurs métriques empilées (une par couche cochée). */
.filo-popup strong { margin-top: 4px; }
.filo-popup strong:first-child { margin-top: 0; }

/* Popup socio-éco FILOSOFI (clic sur une section quand une couche socio est
   active) : valeur brute + libellé, ou « Non disponible pour cette section ». */
.filo-popup { font-size: 13px; line-height: 1.45; color: #1a1a1a; min-width: 150px; }
.filo-popup strong { display: block; font-size: 12px; color: #555; font-weight: 600; margin-bottom: 2px; }

/* Échelle socio-éco FILOSOFI : rampe bleue séquentielle (faible→élevé), même
   gabarit que .legend-default/.legend-strength. Libellés Faible/Élevé en blanc
   cerné de noir pour rester lisibles sur toute la rampe (clair→foncé). */
.legend-filosofi .range {
    height: 25px;
    background: linear-gradient(90deg, #eff6ff 0%, #c6dbef 20%, #94c4df 40%, #5fa4d0 60%, #3182bd 80%, #08519c 100%);
    display: flex; align-items: center; align-content: center;
    border-radius: 15px; padding: 0 10px;
}
.vc2-priority-legend .legend-filosofi .range ul li {
    color: #fff;
    text-shadow: 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
}
.vc2-filo-na { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--vc2-text-tertiary); margin-top: 8px; }
.vc2-filo-na-sw { width: 14px; height: 14px; border-radius: 3px; background: #d4d4d4; border: 1px solid var(--vc2-border-2); flex-shrink: 0; }

/* Ligne « Données climatiques » grisée quand la grille 100 m n'existe pas pour
   la ville courante (cf. theme.js applyClimateAvailability). Infobulle noir-sur-
   blanc au survol, même style que le hint « Service disponible sur demande ». */
.vc2-priority-row.vc2-unavailable {
    color: var(--vc2-text-disabled); cursor: not-allowed;
    position: relative;
}
.vc2-priority-row.vc2-unavailable:hover { background: transparent; }
.vc2-priority-row.vc2-unavailable .vc2-msym,
.vc2-priority-row.vc2-unavailable .vc2-radio { opacity: .4; }
.vc2-priority-row.vc2-unavailable::after {
    content: attr(data-vc2-tip);
    position: absolute; bottom: calc(100% + 7px); left: 50%;
    transform: translateX(-50%);
    width: max-content; max-width: 220px;
    padding: 7px 11px;
    background: #fff; color: #000;
    font-size: 12px; font-weight: 600; line-height: 1.3;
    white-space: normal; text-align: center;
    border: 1px solid rgba(0, 0, 0, .10); border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    z-index: 60; pointer-events: none;
    opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.vc2-priority-row.vc2-unavailable::before {
    content: ''; position: absolute; bottom: calc(100% + 1px); left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #fff;
    z-index: 61; pointer-events: none;
    opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.vc2-priority-row.vc2-unavailable:hover::after,
.vc2-priority-row.vc2-unavailable:hover::before { opacity: 1; visibility: visible; }

.vc2-analysis-card {
    background: var(--vc2-surface-3);
    border: 1px solid var(--vc2-border-2);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}
.vc2-analysis-card.vc2-disabled { opacity: .7; cursor: not-allowed; }
.vc2-analysis-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.vc2-analysis-card-head span:first-child { font-size: 16px; }
.vc2-analysis-card-head span.vc2-title { font-size: 13px; font-weight: 700; color: var(--vc2-text-heading); flex: 1; }
.vc2-analysis-card p { font-size: 12px; color: var(--vc2-text-secondary); line-height: 1.5; margin: 0; }

/* Groupes de radios "Cartographie des enjeux thermiques" / "Planter des
   arbres" (repris de l'ancienne version, cf. index-v2.php) — même pattern
   visuel que .vc2-urban-panel label pour rester cohérent avec le reste du
   thème. */
.vc2-ub-radio-group { margin-top: 12px; }
.vc2-ub-radio-group h4 {
    font-size: 12px; font-weight: 700; color: var(--vc2-text-tertiary);
    letter-spacing: .4px; margin: 0 0 6px; text-transform: uppercase;
}
.vc2-ub-radio-group label {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; color: var(--vc2-text-body);
    padding: 4px 0; cursor: pointer;
}
.vc2-ub-radio-group input[type="radio"] { accent-color: var(--vc2-accent); width: 14px; height: 14px; flex-shrink: 0; }

/* Urban Botanix (relocalisé tel quel) : reskin léger */
.vc2-rightpanel #card_ub_trees {
    background: none; border: 0; box-shadow: none; padding: 0; min-height: 0;
}
.vc2-rightpanel .ub_details details summary {
    background: var(--vc2-surface-2); border: 1px solid var(--vc2-border-2); color: var(--vc2-text-body);
}
/* cards.css ne fait le width:100% que via ".card .select__fullwidth" — le
   markup v2 utilise .vc2-analysis-card, pas .card, donc cette règle ne
   s'applique jamais : le <select> retombait sur sa largeur intrinsèque
   (calée sur le plus long <option>), d'où le débordement hors de la colonne
   étroite de droite. */
.vc2-rightpanel .select__fullwidth {
    background: var(--vc2-surface-2); border: 1px solid var(--vc2-border-2); color: var(--vc2-text-body);
    width: 100%; max-width: 100%; box-sizing: border-box;
}
/* cards.css met .tree_rating_container > * en flex:1 1 30% (pensé pour la
   carte legacy de 400px de large) : dans notre colonne de droite à 300px
   (~260px utiles), ça donne ~78px par item — trop étroit pour le svg 40px +
   le libellé, d'où le texte tronqué/chevauché. On repasse en une seule
   colonne, ligne icône+libellé, qui exploite mieux une colonne étroite. */
.vc2-rightpanel .tree_rating_container,
.vc2-rightpanel .tree_criteria_container,
.vc2-rightpanel .ub_optimal_trees_container {
    display: flex; flex-direction: column; gap: 4px;
}
.vc2-rightpanel .tree_rating_container > *,
.vc2-rightpanel .tree_criteria_container > *,
.vc2-rightpanel .ub_optimal_trees_container > * {
    flex: 1 1 100%;
    display: flex; align-items: center; gap: 10px;
    text-align: left;
    padding: 4px 0;
}
.vc2-rightpanel .donuts_with_label .label,
.vc2-rightpanel .score_with_label .name {
    font-size: 12px; color: var(--vc2-text-body); line-height: 1.3;
}
.vc2-rightpanel .donuts_with_label svg { flex-shrink: 0; }

/* Donuts.js code le texte du score en dur ("fill=#FFFFFF") et l'anneau de
   fond en gris clair ("stroke=#e8e8e8") — invisible/peu lisible en thème
   clair (texte blanc sur fond clair). Ces attributs de présentation SVG ont
   une priorité CSS plus basse qu'une règle de feuille de style externe, donc
   ces overrides gagnent sans toucher à Donuts.js (composant partagé). On
   cible large (pas juste .vc2-rightpanel) : les cards de score sur la carte
   (.vc2-map-pane .card) utilisent le même composant et le même souci s'y
   pose en thème clair. */
.donuts_with_label svg text { fill: var(--vc2-text-heading); }
.donuts_with_label svg circle:not(.gauge) { stroke: var(--vc2-border-2); }

/* ---------- Projections graphiques -------------------------------------- */

.vc2-proj-toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.vc2-proj-layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.vc2-proj-col-left { flex: 0 0 260px; display: flex; flex-direction: column; gap: 14px; }
.vc2-proj-col-main { flex: 2; min-width: 460px; }
.vc2-proj-col-right { flex: 0 0 260px; display: flex; flex-direction: column; gap: 14px; }

.vc2-card {
    background: var(--vc2-surface-1);
    border: 1px solid var(--vc2-border-1);
    border-radius: 12px;
    padding: 16px;
}
.vc2-card h3 { font-size: 13px; font-weight: 700; color: var(--vc2-text-heading); margin: 0 0 10px; }
.vc2-card-sub { font-size: 11px; color: var(--vc2-text-tertiary); margin-bottom: 8px; }

.vc2-chip-list { display: flex; gap: 6px; flex-wrap: wrap; }
.vc2-chip {
    padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
    cursor: pointer; background: var(--vc2-surface-1); color: var(--vc2-text-secondary);
    border: 1px solid var(--vc2-border-1);
}
.vc2-chip.active { background: var(--vc2-accent); color: #fff; border-color: var(--vc2-accent); }
.vc2-chip.vc2-disabled { color: var(--vc2-text-disabled); cursor: not-allowed; }

.vc2-echart { width: 100%; height: 260px; }
.vc2-echart-sm { width: 100%; height: 150px; }

/* Cadre vide : sert uniquement de repère de position/taille pour la vraie
   carte partagée (.vc2-map-pane), positionnée par-dessus par theme.js. */
.vc2-proj-minimap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: var(--vc2-surface-1);
    height: 200px;
}

.vc2-grandeur-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.vc2-grandeur-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.vc2-grandeur-card { background: var(--vc2-surface-1); border: 1px solid var(--vc2-border-1); border-radius: 12px; padding: 14px; }
.vc2-grandeur-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.vc2-grandeur-head .vc2-g-icon { font-size: 20px; flex-shrink: 0; }
.vc2-grandeur-head .vc2-g-label { font-size: 12px; font-weight: 700; color: var(--vc2-text-heading); flex: 1; line-height: 1.25; }
.vc2-grandeur-sub { font-size: 10px; color: var(--vc2-text-tertiary); margin: 2px 0 8px 23px; }
.vc2-grandeur-bar { width: 100%; height: 46px; }
/* Graphique echarts (RiskCharts) dans une carte de grandeur : remplace la jauge
   quand la ville a une série climatique 40 ans (historical_cities). */
.vc2-grandeur-chart { width: 100%; height: 150px; }
.vc2-grandeur-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.vc2-grandeur-featured { border-color: var(--vc2-accent); }

.vc2-proj-loading { opacity: .45; pointer-events: none; transition: opacity .15s; }
/* Indicateur « Chargement… » (map-loading-donut, partagé) : centré à l'écran,
   comme le prévoit loading-indicator.css. Il avait été déplacé en bas de page,
   où il tombe désormais sur la barre échelle / maille / fond de carte. */
body.vc2 .map-loading-donut { top: 50%; bottom: auto; transform: translate(-50%, -50%) scale(0.92); }
body.vc2 .map-loading-donut.is-visible { transform: translate(-50%, -50%) scale(1); }
.vc2-btn-ghost {
    display: flex; align-items: center; gap: 8px; background: var(--vc2-surface-2); border: 1px solid var(--vc2-border-2);
    color: var(--vc2-text-body); font-size: 12px; font-weight: 600; padding: 0 14px; height: 34px; border-radius: 8px; cursor: pointer;
}

.vc2-key-indicator {
    display: flex; align-items: center; gap: 10px; padding: 8px 0;
    border-bottom: 1px solid var(--vc2-border-1);
}
.vc2-key-indicator:last-child { border-bottom: 0; }
.vc2-key-indicator .vc2-ki-icon { font-size: 20px; flex-shrink: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; }
.vc2-key-indicator .vc2-ki-label { flex: 1; font-size: 12px; color: var(--vc2-text-body); }
.vc2-key-indicator .vc2-ki-value { font-size: 13px; font-weight: 700; }

.vc2-quartier-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.vc2-quartier-list label { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--vc2-text-body); padding: 6px 4px; cursor: not-allowed; opacity: .6; }
.vc2-quartier-list label.vc2-enabled { cursor: pointer; opacity: 1; }
.vc2-quartier-list input { accent-color: var(--vc2-accent); }

.vc2-info-link { cursor: pointer; margin-bottom: 10px; }
.vc2-info-link:last-child { margin-bottom: 0; }
.vc2-info-link-title { font-size: 12px; font-weight: 600; color: var(--vc2-text-body); }
.vc2-info-link-desc { font-size: 11px; color: var(--vc2-text-tertiary); }
.vc2-about-list { margin: 0; padding-left: 16px; font-size: 11px; color: var(--vc2-text-tertiary); line-height: 1.7; }

/* ---------- Urban Simulation --------------------------------------------- */

.vc2-sim-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 0 16px; flex-wrap: wrap; gap: 12px; }
.vc2-sim-layout { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; padding-bottom: 20px; }
/* Aucune étude disponible : inutile d'afficher la carte + les panneaux, on ne
   garde que le bandeau explicatif (et le sélecteur d'étude s'il y en a pour
   d'autres villes). La classe est posée par urban-simulation.js (setSimEmpty). */
.vc2-tab-panel[data-vc2-panel="simulation"].vc2-sim-empty .vc2-sim-layout,
.vc2-tab-panel[data-vc2-panel="simulation"].vc2-sim-empty .vc2-sim-toolbar { display: none; }
/* Colonne gauche (carte + graphiques dessous) et colonne droite (menus). */
.vc2-sim-main { flex: 2.6 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.vc2-sim-charts-title { color: var(--vc2-text-heading); font-size: 14px; margin: 4px 0 0; }
.vc2-sim-view { width: 100%; height: 380px; position: relative; border-radius: 14px; overflow: hidden; background: var(--vc2-surface-1); }
.vc2-sim-view .mapboxgl-map { width: 100%; height: 100%; }
.vc2-sim-view img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc2-sim-view-overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(59,111,214,.25) 0%, rgba(245,197,66,.18) 45%, rgba(240,132,47,.22) 70%, rgba(212,59,59,.3) 100%); mix-blend-mode: multiply; }
.vc2-sim-legend { position: absolute; bottom: 16px; left: 16px; background: var(--vc2-surface-float); backdrop-filter: blur(6px); border: 1px solid var(--vc2-border-2); border-radius: 12px; padding: 12px 16px; max-width: 220px; }
.vc2-sim-legend h4 { font-size: 12px; font-weight: 700; color: var(--vc2-text-heading); margin: 0 0 2px; }
.vc2-sim-side { flex: 1 1 0; min-width: 250px; max-width: 340px; display: flex; flex-direction: column; gap: 12px; }
/* Bascule de mode (Quartiers UCIX / Scénarios) de l'onglet Urban Simulation. */
.vc2-sim-mode-toggle { display: flex; background: var(--vc2-surface-2); border: 1px solid var(--vc2-border-2); border-radius: 10px; padding: 3px; gap: 3px; }
.vc2-sim-mode { flex: 1; border: 0; background: none; color: var(--vc2-text-secondary); font-size: 12px; font-weight: 600; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.vc2-sim-mode.active { background: var(--vc2-accent); color: #fff; }
/* Score du quartier sélectionné. */
.vc2-quarter-score-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--vc2-text-body); padding: 4px 0; }
.vc2-quarter-score-val { font-weight: 700; padding: 2px 8px; border-radius: 6px; color: #101110; min-width: 34px; text-align: center; }
.vc2-quarter-meta { font-size: 11px; color: var(--vc2-text-tertiary); margin-top: 8px; line-height: 1.5; }
.vc2-quarter-sep { height: 1px; background: var(--vc2-border-2); margin: 10px 0; }
.vc2-sim-side #vc2SimColorParams .vc2-sim-check-row { padding: 3px 0; }
.vc2-sim-side #vc2SimColorParams input[type="radio"] { accent-color: var(--vc2-accent); }
/* Légende du dégradé UCIX sous la carte (mode Quartiers). */
.vc2-sim-ucix-legend { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--vc2-text-tertiary); padding: 4px 2px 0; }
.vc2-sim-ucix-legend .vc2-ucix-bar { height: 8px; width: 180px; border-radius: 4px; background: linear-gradient(90deg, #A7CF17, #F4CB09, #F39400, #D12E37); }
/* Menus compacts (colonne droite de l'onglet Urban Simulation). */
.vc2-sim-side .vc2-card { padding: 12px 14px; }
.vc2-sim-side .vc2-card h3 { margin: 0 0 6px; }
.vc2-sim-side .vc2-sim-check-row { padding: 3px 0; font-size: 12px; }
.vc2-sim-side .vc2-sim-indicator-row { padding: 3px 0; }
.vc2-scenario-row { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--vc2-text-body); padding: 4px 0; }
.vc2-scenario-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.vc2-scenario-row .vc2-ref-tag { margin-left: auto; font-size: 9px; color: var(--vc2-text-tertiary); }
/* Ligne à cocher (Scénarios simulés / Paramètres d'affichage de l'onglet Urban
   Simulation) : case + pastille de couleur + libellé. */
.vc2-sim-check-row { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--vc2-text-body); padding: 5px 0; cursor: pointer; }
.vc2-sim-check-row input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--vc2-accent); cursor: pointer; margin: 0; }
.vc2-sim-check-row .vc2-ref-tag { margin-left: auto; font-size: 9px; color: var(--vc2-text-tertiary); }
.vc2-sim-params { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vc2-sim-params label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--vc2-text-body); }
.vc2-sim-indicator-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--vc2-text-body); padding: 7px 0; border-bottom: 1px solid var(--vc2-border-1); }
.vc2-sim-indicator-row:last-child { border-bottom: none; }
/* Icône Material + libellé, à gauche de chaque ligne d'indicateur. */
.vc2-ind-label { display: flex; align-items: center; gap: 9px; min-width: 0; }
.vc2-ind-label .vc2-msym { font-size: 19px; flex-shrink: 0; }
.vc2-ind-label span { overflow: hidden; text-overflow: ellipsis; }
.vc2-ind-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.vc2-ind-val.vc2-good { color: var(--vc2-good); }
.vc2-ind-val.vc2-bad  { color: var(--vc2-bad); }
/* Sélecteur de scénario de référence (panneau Indicateurs). */
.vc2-sim-ref-select { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.vc2-sim-ref-select label { font-size: 11px; }
.vc2-sim-ref-select select {
    width: 100%; padding: 7px 9px; font-size: 12px; cursor: pointer;
    color: var(--vc2-text-body); background: var(--vc2-surface-2);
    border: 1px solid var(--vc2-border-2); border-radius: 8px;
}
.vc2-sim-ref-select select:focus { outline: none; border-color: var(--vc2-accent); }
.vc2-sim-ind-head { margin: 6px 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--vc2-border-2); }
/* 4 graphiques en ligne sous la carte (comme la maquette) ; retombe à 2 puis 1
   colonne quand la colonne gauche devient trop étroite. */
.vc2-sim-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin-bottom: 6px; }
.vc2-sim-charts-grid .vc2-card { padding: 12px; }
.vc2-sim-charts-grid .vc2-echart-sm { height: 130px; }
.vc2-sim-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.vc2-sim-chart-max { background: none; border: none; color: var(--vc2-text-tertiary); cursor: pointer; font-size: 18px; line-height: 1; padding: 3px 6px; border-radius: 6px; }
.vc2-sim-chart-max:hover { background: var(--vc2-surface-3); color: var(--vc2-text-heading); }
/* Un graphique agrandi occupe toute la largeur sous la carte ; les autres sont
   masqués (re-clic pour revenir à la grille). */
.vc2-sim-charts-grid.vc2-chart-maximized { grid-template-columns: 1fr; }
.vc2-sim-charts-grid.vc2-chart-maximized .vc2-sim-chart-card:not(.vc2-chart-active) { display: none; }
.vc2-sim-charts-grid.vc2-chart-maximized .vc2-chart-active .vc2-echart-sm { height: 440px; }
.vc2-sim-legend-row { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; }
.vc2-sim-legend-item { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--vc2-text-secondary); }
.vc2-sim-legend-item span { width: 16px; height: 2px; display: inline-block; }

/* ---------- Documentation / My Nature ------------------------------------ */

.vc2-doc-row {
    background: var(--vc2-surface-1); border: 1px solid var(--vc2-border-1); border-radius: 10px;
    padding: 14px 18px; display: flex; align-items: center; gap: 14px;
}
.vc2-doc-row .vc2-doc-icon { font-size: 18px; color: var(--vc2-accent); }
.vc2-doc-row .vc2-doc-title { font-size: 13px; font-weight: 700; color: var(--vc2-text-heading); }
.vc2-doc-row .vc2-doc-meta { font-size: 11px; color: var(--vc2-text-tertiary); }
.vc2-doc-row a.vc2-doc-dl { font-size: 12px; color: var(--vc2-accent); font-weight: 600; text-decoration: none; margin-left: auto; }
.vc2-empty-state { color: var(--vc2-text-tertiary); font-size: 13px; padding: 24px; text-align: center; background: var(--vc2-surface-1); border: 1px dashed var(--vc2-border-2); border-radius: 12px; }

.vc2-nature-card { background: var(--vc2-surface-1); border: 1px solid var(--vc2-border-1); border-radius: 14px; padding: 28px; max-width: 640px; }
.vc2-nature-card h3 { font-size: 14px; font-weight: 700; color: var(--vc2-text-heading); margin: 0 0 10px; }
.vc2-nature-card p { font-size: 13px; color: var(--vc2-text-tertiary); line-height: 1.6; margin: 0 0 20px; }
.vc2-btn-disabled {
    display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; height: 42px;
    border-radius: 10px; font-size: 13px; font-weight: 700;
    background: var(--vc2-surface-3); color: var(--vc2-text-disabled); cursor: not-allowed;
}

/* ---------- Responsive --------------------------------------------------- */

@media (max-width: 1180px) {
    /* Le hamburger de .vc2-topbar (#vc2OpenSidebar) n'a de sens que si la
       sidebar est elle-même repliable : les deux basculaient avant à des
       seuils différents (1180px vs 820px), laissant une zone intermédiaire
       où topbar ET sidebar pleine largeur s'affichaient en même temps,
       coincées l'une sur l'autre. Même seuil pour les deux maintenant. */
    .vc2-rightpanel { position: fixed; top: 0; right: 0; height: 100vh; transform: translateX(100%); z-index: 60; box-shadow: -8px 0 24px rgba(0,0,0,.5); }
    .vc2-rightpanel.vc2-open { transform: translateX(0); }
    .vc2-sidebar { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); z-index: 60; box-shadow: 8px 0 24px rgba(0,0,0,.5); }
    .vc2-sidebar.vc2-open { transform: translateX(0); }
    .vc2-topbar { display: flex; }
    /* .vc2-topbar est un enfant flex de .vc2-app (row) au même titre que
       .vc2-sidebar/.vc2-main : sans ça, il se retrouve empilé en COLONNE à
       côté d'eux (une bande verticale étroite à gauche) au lieu d'une barre
       horizontale en haut. La sidebar étant position:fixed à ce seuil (sortie
       du flux), les seuls enfants en flux restent topbar + main : en colonne,
       ça donne bien "barre en haut, contenu en dessous". */
    .vc2-app { flex-direction: column; }
    .vc2-main { height: calc(100vh - 49px); }
    .vc2-content, .vc2-map-pane { height: 100%; }
    /* Sous ce seuil, sidebar/panneau droit sont déjà repliés par défaut
       (position:fixed hors-écran, ouverts via le burger) : le concept de
       réduction desktop ne s'applique plus, on garde juste le burger. */
    .vc2-panel-toggle { display: none; }
}
@media (max-width: 700px) {
    /* En dessous de 700px, les contrôles flottants de l'onglet Carte (pills
       UCIX/aléa, recherche, toggle Quartier/Parcelle, Données urbaines)
       étaient chacun positionnés avec des offsets pensés pour du desktop
       (ex: .vc2-map-toprow réservait 220px à droite pour la recherche via
       max-width:calc(100% - 220px)) : sur un écran de 375px ça ne laissait
       quasiment plus de place, les pills se compressaient/débordaient et
       venaient chevaucher la recherche. On repasse tout en pleine largeur,
       empilé verticalement dans l'ordre, avec des offsets qui se suivent. */
    /* flex-direction:column (pas flex-wrap) : avec 2 pills de largeur de
       contenu variable, le wrap ne garantit pas une hauteur prévisible (une
       tentative précédente avec flex-wrap a fait chevaucher les lignes
       suivantes, calées sur un "top" fixe qui supposait une seule ligne). En
       colonne, chaque pill fait toujours 44px + 10px de gap : la hauteur
       totale de cette rangée est donc connue, et tout ce qui suit peut
       s'empiler dessus sans deviner. */
    .vc2-map-toprow { top: 12px; left: 12px; right: 12px; max-width: none; flex-direction: column; }
    .vc2-map-toprow .vc2-pill-btn { width: 100%; justify-content: space-between; height: 40px; }
    /* 2 pills × 40px + 1 gap 10px = 90px -> rangée finit à 12+90=102px */

    .vc2-parcelle-toggle { top: 114px; left: 12px; right: 12px; width: auto; height: 40px; }
    .vc2-segmented [data-type="source"] { flex: 1; justify-content: center; height: 40px; }
    /* finit à 114+40=154px */

    .vc2-search-float { top: 166px; left: 12px; right: 12px; width: auto; max-width: none; }
    /* boîte de recherche ~42px -> finit à 166+42=208px */

    .vc2-urban-panel { top: 220px; left: 12px; right: 12px; width: auto; max-width: none; max-height: 22vh; }

    /* Empilait avant sous .vc2-urban-panel via un top calculé à partir de son
       max-height (22vh) — sans compter que max-height s'applique à la boîte
       de contenu, padding NON compris (16px haut+bas) : la hauteur réelle du
       panneau dépassait toujours ce calcul de ~30px, donc la carte de score
       chevauchait quand même le bas du panneau urbain, tout en étant poussée
       très bas sur l'écran ("fenêtre en bas pour rien" — le calcul réservait
       de la place pour un panneau déjà présent au-dessus, sans bénéfice net).
       Plus simple et plus robuste : la carte de score démarre au même point
       que le panneau urbain (juste sous les contrôles fixes) et passe
       par-dessus lui (z-index supérieur) plutôt que de tenter un empilement
       sans chevauchement dont le calcul était de toute façon faux. Voir une
       section = l'action volontaire de l'utilisateur, sa carte de score est
       ce qu'il vient de demander à voir. */
    .vc2-map-pane .card-container-bl {
        top: 220px; right: 12px; left: 12px; width: auto; bottom: 100px;
        z-index: 6;
    }

    .vc2-priority-legend { left: 12px; max-width: calc(100% - 24px); }
    .vc2-export-btn, .vc2-basemap-slider { right: 12px; }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--vc2-border-2); border-radius: 4px; }

/* ---- Modales legacy (Mode d'emploi, Premium) aux couleurs du thème v2 ------
   app-city.css fixe un fond clair (#efeeee) tandis que le texte hérite de
   --vc2-text-body (blanc en thème sombre) → contenu invisible. On aligne fond,
   texte, liens et croix de fermeture sur les tokens du thème. */
.vc2 .modal--overlay { background-color: rgba(0, 0, 0, .55); border: 0; }
.vc2 .modal--content {
    background: var(--vc2-surface-1);
    color: var(--vc2-text-body);
    border: 1px solid var(--vc2-border-2);
    border-radius: 14px;
    box-shadow: var(--vc2-shadow);
}
.vc2 .modal--content h2 { color: var(--vc2-text-heading); }
.vc2 .modal--content strong { color: var(--vc2-text-heading); }
.vc2 .modal--content a { color: var(--vc2-accent); }
/* close.svg est un pictogramme noir : on l'inverse en thème sombre */
[data-vc2-theme="dark"] .vc2 .modal--close,
html:not([data-vc2-theme="light"]) .vc2 .modal--close { filter: invert(1); }
[data-vc2-theme="light"] .vc2 .modal--close { filter: none; }

/* ---- Ordre d'affichage des couches (panneau Priorisation) ------------------
   Liste réordonnable au glisser-déposer : le haut = la couche du dessus sur la
   carte (cf. theme.js applyLayerOrder). Visible dès 2 couches cochées. */
.vc2-layer-order h4 { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.vc2-layer-order .vc2-sub-inline { font-size: 11px; font-weight: 400; color: var(--vc2-text-tertiary); }
.vc2-order-row {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; margin-bottom: 4px;
    border: 1px solid var(--vc2-border-2); border-radius: 8px;
    background: var(--vc2-surface-2);
    font-size: 12.5px; color: var(--vc2-text-body);
    cursor: grab; user-select: none;
}
.vc2-order-row:active { cursor: grabbing; }
.vc2-order-row.vc2-dragging { opacity: .45; border-style: dashed; }
.vc2-order-grip { color: var(--vc2-text-tertiary); font-size: 13px; line-height: 1; letter-spacing: -1px; }
.vc2-order-dot {
    width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
    background: var(--vc2-layer, var(--vc2-accent));
}
.vc2-order-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Données urbaines V2 : menus dépliables + sous-couches ----------------
   Une entrée = un thème (Eau, Végétation…) ; son contenu = les sous-couches
   cochables (une couche carto chacune), cf. urban-v2-catalog.inc.php. */
.vc2-urban-v2 .vc2-urban-menu { border-radius: 8px; }
.vc2-urban-v2 .vc2-urban-menu + .vc2-urban-menu { margin-top: 2px; }
.vc2-urban-v2 .vc2-urban-menu-head {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 8px; border: 0; background: none;
    font-size: 13px; color: var(--vc2-text-body); text-align: left;
    cursor: pointer; border-radius: 8px;
}
.vc2-urban-v2 .vc2-urban-menu-head:hover { background: var(--vc2-surface-3); }
.vc2-urban-v2 .vc2-urban-menu-label { flex: 1; }
.vc2-urban-v2 .vc2-urban-caret { flex-shrink: 0; transition: transform .18s ease; color: var(--vc2-text-tertiary); }
.vc2-urban-v2 .vc2-urban-menu.vc2-open .vc2-urban-caret { transform: rotate(180deg); }
.vc2-urban-v2 .vc2-urban-count {
    flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--vc2-accent); color: var(--vc2-accent-contrast);
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.vc2-urban-v2 .vc2-urban-menu.vc2-has-active .vc2-urban-menu-label { color: var(--vc2-text-heading); font-weight: 600; }
.vc2-urban-v2 .vc2-urban-subs { padding: 2px 0 8px 12px; margin-left: 13px; border-left: 1px solid var(--vc2-border-2); }
.vc2-urban-v2 .vc2-urban-sub {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 6px; border-radius: 6px;
    font-size: 12.5px; color: var(--vc2-text-secondary); cursor: pointer;
}
.vc2-urban-v2 .vc2-urban-sub:hover { background: var(--vc2-surface-3); }
.vc2-urban-v2 .vc2-urban-sub-dot {
    width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0;
    background: var(--vc2-layer, var(--vc2-accent));
}
.vc2-urban-v2 .vc2-urban-opt { margin-top: 4px; border-top: 1px dashed var(--vc2-border-2); padding-top: 8px; color: var(--vc2-text-body); }
/* Thème en cours de développement : même gabarit, inerte et grisé. */
.vc2-urban-v2 .vc2-urban-soon .vc2-urban-menu-head { color: var(--vc2-text-disabled); cursor: not-allowed; }
.vc2-urban-v2 .vc2-urban-soon .vc2-msym { opacity: .5; }
.vc2-urban-v2 .vc2-urban-soon-tag {
    font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
    color: var(--vc2-text-disabled); border: 1px solid var(--vc2-border-2);
    border-radius: 4px; padding: 1px 5px;
}

/* Case « tout » d'un menu Données urbaines : posée à gauche de l'en-tête, elle
   coche/décoche toutes ses sous-couches (indéterminée si une partie l'est). */
.vc2-urban-v2 .vc2-urban-menu-row { display: flex; align-items: center; gap: 6px; padding-left: 6px; }
.vc2-urban-v2 .vc2-urban-menu-row .vc2-urban-menu-head { flex: 1; padding-left: 2px; }
.vc2-urban-v2 .vc2-urban-all {
    width: 14px; height: 14px; flex-shrink: 0; cursor: pointer;
    accent-color: var(--vc2-accent);
}
/* Le menu « en cours de dev » n'a pas de case : on conserve l'alignement. */
.vc2-urban-v2 .vc2-urban-soon .vc2-urban-menu-head { padding-left: 26px; }

/* Switch « Échelle absolue / relative », posé à gauche du toggle
   Quartier/Parcelle (même gabarit .vc2-segmented). */
.vc2-scale-switch { position: absolute; top: 20px; right: 208px; z-index: 5; }
.vc2-scale-switch span {
    padding: 0 16px; height: 40px;
    display: flex; align-items: center;
    font-size: 13px; font-weight: 600;
    color: var(--vc2-text-secondary); cursor: pointer;
}
.vc2-scale-switch span.vc2-active { background: var(--vc2-accent); color: #fff; }
@media (max-width: 1100px) {
    .vc2-scale-switch { top: 68px; right: 20px; }
}
/* Échelle relative impossible (territoire sans indicateurs UCIX) : bouton
   estompé, l'affichage reste en absolu (cf. theme.js markScaleUnavailable). */
.vc2-scale-switch span.vc2-scale-na { opacity: .55; }
.vc2-scale-switch span.vc2-scale-na.vc2-active { background: var(--vc2-border-2); color: var(--vc2-text-secondary); }

/* ---- Repli des panneaux flottants de la carte -----------------------------
   Sur petit écran, « Données urbaines » et les cartes de score mangeaient toute
   la hauteur. En-tête cliquable (urbain) / bouton dédié (cartes), état mémorisé
   par theme.js (initFloatingCollapse). */
.vc2-urban-title {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: 0; padding: 0 2px 10px;
    font-size: 14px; font-weight: 700; color: var(--vc2-text-heading);
    cursor: pointer; text-align: left;
}
.vc2-urban-title span { flex: 1; }
.vc2-urban-title .vc2-urban-caret { transition: transform .18s ease; color: var(--vc2-text-tertiary); }
.vc2-urban-panel.vc2-collapsed .vc2-urban-body { display: none; }
.vc2-urban-panel.vc2-collapsed { max-height: none; padding-bottom: 8px; }
.vc2-urban-panel.vc2-collapsed .vc2-urban-title { padding-bottom: 0; }
.vc2-urban-panel.vc2-collapsed .vc2-urban-title .vc2-urban-caret { transform: rotate(-90deg); }

/* Bouton de repli des cartes de score. Placé À GAUCHE de leur colonne et à leur
   hauteur : au-dessus (right:20/top:96) il tombait sous la barre de recherche
   (70→112 px), qui interceptait le clic. Une fois replié, il revient au bord. */
.vc2-cards-collapse {
    position: absolute; top: 130px; right: 308px; z-index: 6;
    width: 28px; height: 28px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--vc2-surface-float); color: var(--vc2-text-secondary);
    border: 1px solid var(--vc2-border-2); border-radius: 8px;
    box-shadow: var(--vc2-shadow-sm); cursor: pointer;
}
.vc2-cards-collapse:hover { color: var(--vc2-text-heading); }
.vc2-cards-collapse svg { transition: transform .18s ease; }
.vc2-cards-collapse.vc2-collapsed { right: 20px; }
.vc2-cards-collapse.vc2-collapsed svg { transform: rotate(-90deg); }
.vc2-map-pane .card-container-bl.vc2-collapsed { display: none; }

/* Entrée « Relief du terrain (MNT) » : même gabarit qu'un menu, sans sous-liste. */
.vc2-urban-v2 .vc2-urban-terrain { display: block; cursor: pointer; }
.vc2-urban-v2 .vc2-urban-terrain .vc2-urban-menu-head { width: 100%; }
.vc2-urban-v2 .vc2-urban-terrain:hover .vc2-urban-menu-head { background: var(--vc2-surface-3); }
.vc2-urban-v2 .vc2-urban-terrain input { width: 14px; height: 14px; accent-color: var(--vc2-accent); flex-shrink: 0; }

/* Urban Botanix déplacé dans la colonne des cartes de score : il reprend le
   gabarit d'une carte flottante plutôt que celui du panneau droit. */
.vc2-map-pane .vc2-botanix-card {
    background: var(--vc2-surface-float);
    border: 1px solid var(--vc2-border-2);
    border-radius: 12px;
    box-shadow: var(--vc2-shadow);
    padding: 14px 16px;
    margin-top: 10px;
    font-size: 12.5px;
}
.vc2-map-pane .vc2-botanix-card select { max-width: 100%; }

/* ---- Urban Botanix sur la carte : reskin complet -------------------------
   Les styles v2 de ce composant étaient tous scopés à .vc2-rightpanel ; la
   carte ayant déménagé dans la colonne des scores (.vc2-map-pane), ils ne
   s'appliquaient plus et le rendu legacy (encarts noirs, select brut)
   ressortait. On re-scope ici, et on transforme les <details> en véritables
   onglets. */
.vc2-map-pane .vc2-botanix-card { position: relative; }
.vc2-map-pane .vc2-botanix-card p { font-size: 11.5px; color: var(--vc2-text-tertiary); margin: 2px 0 0; }
.vc2-map-pane .vc2-botanix-card .vc2-ub-radio-group { margin-top: 12px; }
.vc2-map-pane .vc2-botanix-card .vc2-ub-radio-group h4 {
    font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--vc2-text-tertiary); margin: 0 0 6px;
}
.vc2-map-pane .vc2-botanix-card .vc2-ub-radio-group label {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 6px; border-radius: 6px;
    font-size: 12.5px; color: var(--vc2-text-body); cursor: pointer;
}
.vc2-map-pane .vc2-botanix-card .vc2-ub-radio-group label:hover { background: var(--vc2-surface-3); }
.vc2-map-pane .vc2-botanix-card input[type="radio"] { accent-color: var(--vc2-accent); width: 14px; height: 14px; flex-shrink: 0; }

/* Onglets : la barre est CONSTRUITE EN JS (theme.js initBotanixTabs) et les
   <summary> d'origine sont masqués. Une mise en page CSS pure (grid +
   display:contents sur <details>) ne tient plus : Chrome rend désormais le
   contenu d'un <details> dans un ::details-content, si bien que l'article
   n'est plus un enfant de la grille et restait large d'une colonne. */
.vc2-map-pane #card_ub_trees { background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; margin-top: 14px; }
.vc2-map-pane .ub_details { display: block; }
.vc2-map-pane .ub_details > details { display: block; }
.vc2-map-pane .ub_details > details > summary { display: none; }
.vc2-map-pane .ub_details article { width: 100%; padding: 10px 0 0; }
.vc2-ub-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 4px; }
.vc2-ub-tab {
    padding: 7px 4px; border-radius: 8px; cursor: pointer;
    background: var(--vc2-surface-2); border: 1px solid var(--vc2-border-2);
    color: var(--vc2-text-secondary); font-size: 11.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vc2-ub-tab:hover { color: var(--vc2-text-heading); }
.vc2-ub-tab.vc2-active { background: var(--vc2-accent); border-color: var(--vc2-accent); color: #fff; }

/* Sélecteurs */
.vc2-map-pane .vc2-botanix-card .select__fullwidth {
    width: 100%; max-width: 100%; box-sizing: border-box;
    background: var(--vc2-surface-2); border: 1px solid var(--vc2-border-2);
    color: var(--vc2-text-body); border-radius: 8px; padding: 7px 9px;
    font-size: 12.5px; margin-bottom: 10px;
}

/* Notes d'essences : une ligne par item (colonne étroite), pas la grille
   legacy pensée pour une carte de 400 px. */
.vc2-map-pane .tree_rating_container,
.vc2-map-pane .tree_criteria_container,
.vc2-map-pane .ub_optimal_trees_container {
    display: flex; flex-direction: column; gap: 2px;
}
.vc2-map-pane .tree_rating_container > *,
.vc2-map-pane .tree_criteria_container > *,
.vc2-map-pane .ub_optimal_trees_container > * {
    flex: 1 1 100%;
    display: flex; align-items: center; gap: 10px;
    text-align: left; padding: 3px 0;
}
.vc2-map-pane .donuts_with_label .label,
.vc2-map-pane .score_with_label .name {
    font-size: 12px; color: var(--vc2-text-body); line-height: 1.3;
}
.vc2-map-pane .donuts_with_label svg { flex-shrink: 0; }
.vc2-map-pane .vc2-botanix-card h3 {
    font-size: 11.5px; font-weight: 700; color: var(--vc2-text-heading);
    margin: 0 0 6px; text-align: left;
}
.vc2-map-pane .vc2-botanix-card .tree_rating_container p { text-align: left; }

/* ---- Repli indépendant de chaque fenêtre flottante ---------------------- */
.vc2-map-pane .card-container-bl .card,
.vc2-map-pane .vc2-botanix-card { position: relative; }
.vc2-card-collapse {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 22px; height: 22px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 6px;
    color: var(--vc2-text-tertiary); cursor: pointer;
}
.vc2-card-collapse:hover { background: var(--vc2-surface-3); color: var(--vc2-text-heading); }
.vc2-card-collapse svg { transition: transform .18s ease; }
.vc2-card-collapse.vc2-collapsed svg { transform: rotate(-90deg); }
/* Replié : on ne garde que le titre (et le bouton). */
.vc2-map-pane .card.vc2-collapsed > *:not(h2):not(.vc2-card-collapse),
.vc2-map-pane .vc2-botanix-card.vc2-collapsed > *:not(.vc2-analysis-card-head):not(.vc2-card-collapse) { display: none; }
.vc2-map-pane .card.vc2-collapsed,
.vc2-map-pane .vc2-botanix-card.vc2-collapsed { padding-bottom: 12px; }

/* ==========================================================================
   Panneaux « Mon compte » / « Mes villes »
   L'enveloppe legacy (.modal--content) empile la croix en bloc au-dessus du
   titre, d'où un titre qui « tombe » très bas : on reprend la mise en page
   avec un en-tête propre (titre à gauche, croix à droite).
   ========================================================================== */
.vc2-nav-logout { text-decoration: none; }
.vc2-nav-logout:hover { color: var(--vc2-bad); }

.vc2-modal .vc2-modal-box {
    width: 520px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: var(--vc2-surface-1);
    border: 1px solid var(--vc2-border-2);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .55);
}
.vc2-modal .vc2-modal-box--tall { width: 620px; max-height: min(78vh, 720px); }

.vc2-modal-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--vc2-border-1);
}
.vc2-modal-head h2 {
    margin: 0; text-align: left;
    font-size: 17px; font-weight: 700; letter-spacing: .01em;
    color: var(--vc2-text-heading); text-transform: none;
}
.vc2-modal-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--vc2-text-tertiary); }

/* la croix legacy est un <img> : on neutralise ses règles pour notre bouton */
.vc2-modal .vc2-modal-close {
    max-width: none; aspect-ratio: auto; margin: 0; flex: none;
    width: 30px; height: 30px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--vc2-border-2); border-radius: 9px;
    background: var(--vc2-surface-3); color: var(--vc2-text-secondary);
    cursor: pointer; filter: none;
}
.vc2-modal .vc2-modal-close:hover { color: var(--vc2-text-heading); border-color: var(--vc2-text-tertiary); }

.vc2-modal-body { padding: 16px 20px 20px; overflow: auto; }

.vc2-account-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; }
.vc2-account-list dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--vc2-text-tertiary); }
.vc2-account-list dd { margin: 0; font-size: 14px; color: var(--vc2-text-body); word-break: break-word; }

/* Recherche + liste des villes */
.vc2-cities-search { position: relative; display: flex; align-items: center; margin-bottom: 12px; }
.vc2-cities-search svg { position: absolute; left: 12px; color: var(--vc2-text-tertiary); pointer-events: none; }
.vc2-cities-search input {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px 10px 36px;
    border: 1px solid var(--vc2-border-2); border-radius: 10px;
    background: var(--vc2-surface-3); color: var(--vc2-text-body);
    font: inherit; font-size: 13.5px;
}
.vc2-cities-search input:focus { outline: none; border-color: var(--vc2-accent); }

.vc2-cities-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 6px;
}
.vc2-city-link {
    width: 100%; text-align: left; cursor: pointer;
    display: flex; flex-direction: column; gap: 1px;
    padding: 8px 12px;
    border: 1px solid var(--vc2-border-1); border-radius: 9px;
    background: var(--vc2-surface-3); color: var(--vc2-text-body); font: inherit;
    transition: border-color .12s, background .12s;
}
.vc2-city-link:hover { border-color: var(--vc2-accent); background: var(--vc2-surface-2); color: var(--vc2-text-heading); }
.vc2-city-name { font-size: 13px; font-weight: 600; }
.vc2-city-dep { font-size: 11px; color: var(--vc2-text-tertiary); }
.vc2-cities-note { margin: 12px 0 0; font-size: 12px; color: var(--vc2-text-tertiary); }

/* ==========================================================================
   Résultat de recherche : ville non calculée + bouton « Ajouter »
   L'overlay est un vrai élément (et non le ::after de app-city.css, qui n'est
   pas cliquable) ; on neutralise donc ce dernier sur ces lignes.
   ========================================================================== */
.project-sidebar-link.has-uncomputed:hover::after { content: none !important; }
.project-sidebar-link.has-uncomputed:hover { color: inherit; }

.city-uncomputed {
    position: absolute; inset: 0;
    display: none; align-items: center; justify-content: center; gap: 14px;
    background: rgba(0, 0, 0, .9);
    color: #fff; font-weight: 700;
}
.project-sidebar-link.has-uncomputed:hover .city-uncomputed,
.project-sidebar-link.has-uncomputed:focus-within .city-uncomputed { display: flex; }
.city-uncomputed-label { font-size: 15px; }
.city-uncomputed-add {
    padding: 5px 14px; border-radius: 999px;
    background: var(--vc2-accent); color: var(--vc2-accent-contrast);
    font-size: 13px; font-weight: 700; cursor: pointer;
}
.city-uncomputed-add:hover { filter: brightness(1.1); }
.city-uncomputed-add:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ==========================================================================
   Toast
   ========================================================================== */
.vc2-toast-host {
    position: fixed; z-index: 2000; left: 50%; bottom: 28px; transform: translateX(-50%);
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.vc2-toast {
    max-width: 520px; padding: 12px 18px; border-radius: 10px;
    background: var(--vc2-surface-float); border: 1px solid var(--vc2-border-2);
    color: var(--vc2-text-body); font-size: 13.5px; line-height: 1.45;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    opacity: 0; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease;
}
.vc2-toast.vc2-toast-in { opacity: 1; transform: translateY(0); }

/* ---- Panneaux repliés : titre à gauche, centré verticalement -------------
   Replié, il ne reste que le titre : ses marges haut/bas étaient héritées de
   l'état déplié (padding-bottom du panneau + margin-bottom du titre, qui
   servent à espacer le contenu), d'où un texte collé en haut ou en bas de la
   pastille. On rend donc les paddings symétriques et on annule la marge basse
   du titre. L'alignement horizontal, lui, reste à gauche dans les deux états. */
.vc2-urban-panel.vc2-collapsed { padding: 12px 16px; }
.vc2-urban-panel.vc2-collapsed .vc2-urban-title { padding: 0 2px; }

.vc2-map-pane .card.vc2-collapsed { padding: 12px 10px; }
.vc2-map-pane .card.vc2-collapsed > h2 { margin-bottom: 0; }

.vc2-map-pane .vc2-botanix-card.vc2-collapsed { padding: 12px 16px; }
.vc2-map-pane .vc2-botanix-card.vc2-collapsed .vc2-analysis-card-head { margin-bottom: 0; }

/* Titre des cartes de score à gauche lui aussi (cards.css legacy le centrait) :
   toutes les fenêtres flottantes ont ainsi le même en-tête, replié ou déplié.
   Le sous-titre suit le titre ; les lignes de score gardent leur mise en page. */
.vc2-map-pane .card > h2,
.vc2-map-pane .card > .subtitle,
.vc2-map-pane .card > .subtitle h2 {
    text-align: left;
    justify-content: flex-start;
}

/* ---- Seuil d'affichage des ICU 100 m (Urban Botanix) --------------------- */
.vc2-ub-threshold {
    margin: 6px 0 12px 26px;   /* aligné sous le libellé du radio */
    padding: 10px 12px;
    border: 1px solid var(--vc2-border-1);
    border-radius: 10px;
    background: var(--vc2-surface-3);
}
.vc2-ub-threshold.vc2-disabled { opacity: .45; }
.vc2-ub-threshold-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    margin-bottom: 6px;
}
.vc2-ub-threshold-head label { font-size: 12px; color: var(--vc2-text-secondary); }
.vc2-ub-threshold-head output {
    font-size: 15px; font-weight: 700; color: var(--vc2-accent);
    font-variant-numeric: tabular-nums;
}
.vc2-ub-threshold input[type="range"] {
    width: 100%; margin: 0; accent-color: var(--vc2-accent); cursor: pointer;
}
.vc2-ub-threshold.vc2-disabled input[type="range"] { cursor: default; }
.vc2-ub-threshold-scale {
    display: flex; justify-content: space-between;
    font-size: 10px; color: var(--vc2-text-tertiary); margin-top: 2px;
}
.vc2-ub-threshold-hint {
    margin: 6px 0 0; font-size: 11px; color: var(--vc2-text-tertiary); line-height: 1.35;
}
/* app-city.css (legacy) applique `margin-block: 1rem` à tout li d'une modale :
   ça aérait la grille des villes d'un cran de trop. */
.vc2-modal .vc2-cities-list li { margin: 0; }

/* ==========================================================================
   Disposition des contrôles de la carte (v3)
   Recherche centrée en haut (l'espace y était libre entre les pastilles et le
   panneau de droite), échelle + maille centrées en bas, slider fond de carte
   descendu d'un cran.
   ========================================================================== */
.vc2-search-float {
    top: 20px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 320px;
}

.vc2-bottom-controls {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
}
/* les deux blocs étaient positionnés chacun de leur côté : ils suivent
   maintenant le flux de leur conteneur. */
.vc2-bottom-controls .vc2-parcelle-toggle,
.vc2-bottom-controls .vc2-scale-switch {
    position: static;
    top: auto; right: auto; left: auto;
    transform: none;
}

.vc2-basemap-slider { bottom: 42px; }

@media (max-width: 1100px) {
    /* pas de place pour tout aligner : les deux groupes passent l'un sous l'autre */
    .vc2-bottom-controls { flex-direction: column; gap: 8px; bottom: 16px; }
}

@media (max-width: 900px) {
    .vc2-search-float {
        top: 114px; left: 12px; right: 12px;
        transform: none; width: auto; max-width: none;
    }
    .vc2-bottom-controls { left: 12px; right: 12px; transform: none; bottom: 12px; align-items: stretch; }
    .vc2-bottom-controls .vc2-parcelle-toggle,
    .vc2-bottom-controls .vc2-scale-switch { width: 100%; height: 40px; }
    .vc2-basemap-slider { bottom: 96px; }
}
/* Le slider fond de carte rejoint la barre du bas : ancré à droite il chevauchait
   les contrôles centrés dès ~1300 px de large. Il descend donc du même coup. */
.vc2-bottom-controls .vc2-basemap-slider {
    position: static;
    bottom: auto; right: auto;
}
@media (max-width: 1100px) {
    .vc2-bottom-controls { flex-wrap: wrap; justify-content: center; flex-direction: row; }
}

/* Barre du bas : centrée dans l'espace RESTANT, pas sur la carte entière — la
   légende (bas gauche, 289 px) et les boutons de zoom (bas droite) occupent déjà
   les coins, un centrage strict passait sous la légende. */
.vc2-bottom-controls {
    left: 330px;
    right: 60px;
    transform: none;
    bottom: 22px;
    justify-content: center;
    flex-wrap: wrap;
}
.vc2-bottom-controls .vc2-segmented span { white-space: nowrap; }
@media (max-width: 900px) {
    .vc2-bottom-controls { left: 12px; right: 12px; }
}

/* Bornes de sécurité : sur un écran moyen, le centrage strict faisait passer la
   recherche par-dessus les pastilles « Choisir un UCIX / un aléa » (qui mesurent
   ~360 px) et la barre du bas se cassait en trois lignes faute de place entre la
   légende et les boutons de zoom. */
.vc2-search-float {
    left: max(380px, calc(50% - 160px));
    transform: none;
}
@container vc2map (max-width: 999px) {
    /* Pas assez de large pour tout aligner en bas : le slider fond de carte
       retrouve son coin, les deux bascules gardent la bande centrale. */
    .vc2-bottom-controls .vc2-basemap-slider {
        position: absolute;
        right: 6px;
        /* relatif à la barre (bottom 22, 42 px de haut) : 48 px le pose juste
           au-dessus d'elle (70 → 108 px du bas de la carte), sous le bas de la
           colonne des cartes (120 px). */
        bottom: 48px;
    }
    .vc2-bottom-controls { padding-right: 0; }
}
@media (max-width: 900px) {
    .vc2-search-float { left: 12px; }
    .vc2-bottom-controls .vc2-basemap-slider { position: static; right: auto; bottom: auto; }
}
/* La bande du bas passe à deux lignes sous 1340 px : le slider doit repasser
   au-dessus d'elles (22 px de marge + ~96 px de hauteur). */
/* Plutôt que d'empiler les deux bascules (et de faire remonter le slider sur le
   panneau Urban Botanix), on les compacte : 40 px gagnés suffisent à les garder
   sur une seule ligne entre la légende et les boutons de zoom. */
@container vc2map (max-width: 999px) {
    .vc2-bottom-controls { left: 318px; gap: 8px; }
    .vc2-bottom-controls .vc2-segmented span { padding: 0 12px; font-size: 12px; }
    .vc2-bottom-controls .vc2-basemap-slider { bottom: 48px; }
}

/* Les deux fenêtres de droite (score + Urban Botanix) étaient descendues à
   top:130 pour passer sous la recherche et la bascule Quartier/Parcelle, qui
   occupaient alors le coin haut-droit. Les deux sont parties ailleurs : on
   récupère la hauteur, en haut comme en bas (la barre du bas ne monte qu'à
   64 px). */
.vc2-map-pane .card-container-bl { top: 20px; bottom: 78px; }
.vc2-cards-collapse { top: 20px; }

@container vc2map (max-width: 1030px) {
    /* La recherche, bornée à droite des pastilles, repasse devant la colonne
       des cartes : on les laisse sous elle. Idem en bas pour le slider. */
    .vc2-map-pane .card-container-bl { top: 74px; bottom: 120px; }
    .vc2-cards-collapse { top: 74px; }
}

/* app-city.css affiche la liste de résultats au simple survol
   (.hover-search:hover .layer-suggestions { display:block }), y compris quand
   elle est vide : restait une barre noire sous le champ. On la masque tant que
   ses deux contenus possibles sont eux-mêmes masqués — #search-results (la
   recherche en cours) et .default-city (la liste des villes d'un compte à accès
   restreint, qui elle DOIT apparaître au survol). */
.vc2-search-results:has(> #search-results.hidden):has(> .default-city.hidden) {
    display: none !important;
}

/* Le bouton de repli du panneau de droite est centré sur le bord du panneau
   (right:300, translateX(50%)) et revient à right:6 une fois replié : dans les
   deux cas il mordait sur la colonne des cartes, calée à right:20. On lui
   réserve sa gouttière (26 px + marges), et le bouton de repli des cartes suit. */
.vc2-map-pane .card-container-bl { right: 46px; }
.vc2-cards-collapse { right: 334px; }
.vc2-cards-collapse.vc2-collapsed { right: 46px; }

/* Les seuils ci-dessus dépendent de la largeur de la CARTE, pas de l'écran : elle
   varie avec les panneaux gauche/droite repliés. D'où des container queries sur
   .vc2-map-pane (déjà bloc conteneur via son transform : aucun effet de bord).
   Seuils calculés : la recherche (max(380px, 50% - 160px), 320 px de large)
   chevauche la colonne des cartes (right 46, 280 px) sous ~1026 px de carte ;
   la barre du bas complète (598 px) tient entre légende et zoom au-delà de
   ~990 px. */
.vc2-map-pane { container-type: inline-size; container-name: vc2map; }

/* ---- Infobulles Mapbox aux couleurs du thème -----------------------------
   Mapbox leur donne un fond blanc fixe, alors que le texte hérite de la couleur
   du thème : en sombre, texte clair sur fond blanc = illisible. */
.vc2 .mapboxgl-popup-content {
    background: var(--vc2-surface-float);
    color: var(--vc2-text-body);
    border: 1px solid var(--vc2-border-2);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    padding: 12px 38px 12px 14px;
    font-size: 13px;
    line-height: 1.5;
}
.vc2 .mapboxgl-popup-content b,
.vc2 .mapboxgl-popup-content strong { color: var(--vc2-text-heading); }
.vc2 .mapboxgl-popup-close-button { color: var(--vc2-text-secondary); font-size: 18px; padding: 2px 8px; }
.vc2 .mapboxgl-popup-close-button:hover { background: none; color: var(--vc2-text-heading); }
.vc2 .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.vc2 .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.vc2 .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip { border-top-color: var(--vc2-surface-float); }
.vc2 .mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.vc2 .mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.vc2 .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip { border-bottom-color: var(--vc2-surface-float); }
.vc2 .mapboxgl-popup-anchor-left .mapboxgl-popup-tip { border-right-color: var(--vc2-surface-float); }
.vc2 .mapboxgl-popup-anchor-right .mapboxgl-popup-tip { border-left-color: var(--vc2-surface-float); }
.vc2 .filo-popup { color: var(--vc2-text-body); }
.vc2 .filo-popup strong { color: var(--vc2-text-secondary); }
.vc2-popup-title { display: block; font-weight: 700; color: var(--vc2-text-heading); margin-bottom: 6px; }
.vc2-popup-row { display: flex; justify-content: space-between; gap: 16px; }
.vc2-popup-row span:first-child { color: var(--vc2-text-secondary); }
.vc2-popup-row span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Seuils d'affichage (Priorisation ⚙) ───────────────────────────── */
.vc2-h4-with-btn { display: flex; align-items: center; justify-content: space-between; }
.vc2-thr-open {
    border: 0; background: transparent; color: var(--vc2-text-secondary);
    cursor: pointer; padding: 2px; border-radius: 6px; line-height: 0;
}
.vc2-thr-open .vc2-msym { font-size: 17px; }
.vc2-thr-open:hover { color: var(--vc2-accent); background: rgba(127,127,127,.12); }
.vc2-modal .vc2-thr-box { width: 460px; }
.vc2-thr-h2ico { vertical-align: -4px; margin-right: 8px; color: var(--vc2-text-secondary); }
.vc2-thr-title { font-size: 14px; font-weight: 700; margin: 0 0 10px; color: var(--vc2-text); }
.vc2-thr-row {
    display: grid; grid-template-columns: 30px 1fr 150px 40px; align-items: center;
    gap: 12px; padding: 10px 0;
}
.vc2-thr-ico { font-size: 24px; }
.vc2-thr-label { font-size: 14px; font-weight: 600; color: var(--vc2-text); }
.vc2-thr-slider input[type="range"] { width: 100%; margin: 0; cursor: pointer; accent-color: var(--vc2-accent); }
.vc2-thr-off .vc2-thr-slider input[type="range"] { accent-color: #b8bec6; }
.vc2-thr-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--vc2-text-secondary); }
.vc2-thr-val {
    display: inline-flex; align-items: center; justify-content: center; height: 28px;
    border: 1px solid rgba(127,127,127,.35); border-radius: 6px;
    font-weight: 700; font-size: 13px; color: var(--vc2-text);
}
.vc2-thr-off .vc2-thr-val { color: var(--vc2-text-secondary); font-weight: 400; }
.vc2-thr-note {
    display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px;
    border-radius: 10px; background: rgba(41,171,226,.09); font-size: 12.5px; line-height: 1.45;
    color: var(--vc2-text-secondary);
}
.vc2-thr-note .vc2-msym { font-size: 20px; color: var(--vc2-accent); }
.vc2-thr-foot {
    display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 14px;
    border-top: 1px solid rgba(127,127,127,.2);
}
.vc2-thr-close {
    border: 0; border-radius: 8px; padding: 9px 26px; font-weight: 600; font-size: 14px;
    background: var(--vc2-accent); color: #fff; cursor: pointer;
}
.vc2-thr-close:hover { filter: brightness(1.08); }

/* ── Commander une ville ─────────────────────────────────────────────── */
.vc2-order-open {
    margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 6px;
    border: 0; border-radius: 8px; padding: 7px 12px; cursor: pointer;
    background: var(--vc2-accent); color: #fff; font: inherit; font-size: 13px; font-weight: 600;
}
.vc2-order-open:hover { filter: brightness(1.08); }
.vc2-modal .vc2-order-box { width: 460px; overflow: visible; }
.vc2-order-box .vc2-modal-body { overflow: visible; }
.vc2-order-label { display: block; font-size: 12px; font-weight: 600; color: var(--vc2-text-secondary); margin-bottom: 6px; }
.vc2-order-combo { position: relative; }
.vc2-order-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px; border: 1px solid var(--vc2-border-2); border-radius: 10px; cursor: pointer;
    background: var(--vc2-surface-3); color: var(--vc2-text-body); font: inherit; font-size: 14px; text-align: left;
}
.vc2-order-toggle[aria-expanded="true"], .vc2-order-toggle:focus-visible { outline: none; border-color: var(--vc2-accent); }
.vc2-order-placeholder { color: var(--vc2-text-tertiary); }
.vc2-order-drop {
    position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px);
    padding: 10px; border: 1px solid var(--vc2-border-2); border-radius: 12px;
    background: var(--vc2-surface-1, #fff); box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.vc2-order-drop[hidden] { display: none; }
.vc2-order-search { margin-bottom: 8px; }
.vc2-order-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
.vc2-order-list button {
    width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
    color: var(--vc2-text-body); font: inherit; font-size: 13.5px; text-align: left;
}
.vc2-order-list button:hover { background: var(--vc2-surface-3); }
.vc2-order-list small { color: var(--vc2-text-tertiary); font-size: 11.5px; white-space: nowrap; }
.vc2-order-hint { padding: 10px; font-size: 12.5px; color: var(--vc2-text-tertiary); }
.vc2-order-box .vc2-thr-foot { margin-top: 20px; }
.vc2-order-submit:disabled { opacity: .45; cursor: default; filter: none; }

/* ── Couches verrouillées selon l'état de la ville (theme.js initCityDataLocks) ── */
.vc2-locked { position: relative; cursor: not-allowed !important; }
.vc2-locked > * { opacity: .42; }
.vc2-locked:hover { background: transparent !important; }
.vc2-locked::after {
    content: attr(data-vc2-lock-tip);
    position: absolute; bottom: calc(100% + 7px); left: 50%;
    transform: translateX(-50%);
    width: max-content; max-width: 220px;
    padding: 7px 11px;
    background: #fff; color: #000;
    font-size: 12px; font-weight: 600; line-height: 1.3;
    white-space: normal; text-align: center;
    border: 1px solid rgba(0, 0, 0, .10); border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    z-index: 60; pointer-events: none;
    opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.vc2-locked:hover::after { opacity: 1; visibility: visible; }