/* ============================================================
   Sotis Immobilier - Command-center explorer
   All selectors scoped under .immo-explorer to avoid global bleed
   (style.css uses bare-element selectors that are global).
   ============================================================ */

/* ----- Local tokens -----
   The site is dark-only, so the former light-default / dark-override pair is
   collapsed into one block. --immo-glass-border used to be a hardcoded grey,
   which silently collided with the shared --viz-axis token once the palette
   was rebuilt; it now points at the shared hairline, like its light twin
   always did. (Naming the old hex here would trip the same guard: it scans
   comments.) */
.immo-explorer {
    /* Surface vitree des elements poses SUR la carte. Derivee de --surface-raised
       plutot que d'un litteral : a 34% de transparence, le fond de carte (vert et
       bleu en OSM France) traversait assez pour que les panneaux lisent gris-vert,
       une teinte qui n'existe nulle part dans le systeme. A 92% la surface reste
       reconnaissable et le flou suffit a signaler qu'elle flotte. */
    --immo-glass-bg: color-mix(in srgb, var(--surface-raised) 92%, transparent);
    --immo-glass-border: var(--border-strong);
    --immo-glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    --immo-glow: 0 0 18px rgba(var(--violet-primary-rgb), 0.35);
    --immo-map-bg: #0c0c12;
}

/* ----- Full-bleed shell ----- */
/* The shared <main> is max-width:1200px with overflow-x:hidden (the latter added
   for mlformation responsive). On this page that would clip a negative-margin
   breakout to 1200px and cut the KPI strip + rails on both sides. So instead of
   breaking out of main, we let main itself span the full width here (scoped via
   :has() so no other app/page is affected) and the explorer simply fills it. */
main:has(.immo-explorer) {
    max-width: none;
    padding: 0;
    overflow-x: visible;
}

.immo-explorer {
    /* main is full-width on this page (see rule above), so the explorer just fills
       it. No negative-margin breakout needed (it would over-shoot by the scrollbar
       width and reintroduce a horizontal scroll). */
    position: relative;            /* bloc englobant de l'overlay de chargement (.immo-loading) */
    padding: var(--space-sm) clamp(var(--space-sm), 2.5vw, var(--space-lg)) var(--space-lg);
    box-sizing: border-box;
    overflow-x: hidden;
    /* Refonte "grande carte + panneaux flottants" : hauteur du stage et largeurs des
       deux panneaux flottants (servent aussi a calculer les decalages anti-collision
       de la legende, du metric-switch, des controles Leaflet et de la timeline). */
    --immo-stage-h: clamp(560px, 78vh, 940px);
    --immo-filters-w: 300px;
    --immo-report-w: clamp(340px, 30vw, 420px);
}

/* Carte DANS un panneau deja vitre : opaque et filaire. Empiler un second
   backdrop-filter a l'interieur du premier accumule le flou sans rien separer. */
.immo-explorer .immo-card {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

/* ============================================================
   BANDEAU KPI (pleine largeur, au-dessus de la carte)
   ============================================================ */
/* Une ligne de metriques, pas une barre de tuiles : le perimetre analyse a gauche
   (c'est le titre de la page), les cinq indicateurs a droite, separes par un filet.
   La grammaire est celle de .metric du systeme : chiffre en mono, contexte en
   dessous, aucune surface ni ombre. */
.immo-explorer .immo-kpi-bar {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    gap: var(--space-sm);
    align-items: end;
    padding: 0 0 var(--space-sm);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-sm);
}

.immo-explorer .immo-scope { min-width: 0; }
.immo-explorer .immo-scope .eyebrow { margin: 0 0 0.25rem; }
.immo-explorer .immo-scope-title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

.immo-explorer .kpi-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-width: 0;
}

.immo-explorer .kpi-pill {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0 var(--space-sm);
    border-left: 1px solid var(--border-color);   /* separateur entre cellules de la barre */
}
.immo-explorer .kpi-pill:first-child { border-left: none; padding-left: 0; }

.immo-explorer .kpi-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.immo-explorer .kpi-value {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tighter);
    line-height: 1.05;
    color: var(--text-primary);
    white-space: nowrap;
}
/* Prices rising reads as negative for a buyer, hence the diverging tokens.
   Le mot qui declare ce cadrage est ecrit dans .kpi-detail (voir updateKpis). */
.immo-explorer .kpi-value.kpi-up { color: var(--viz-negative); }
.immo-explorer .kpi-value.kpi-down { color: var(--viz-positive); }
.immo-explorer .kpi-value.kpi-muted { color: var(--text-secondary); font-size: var(--text-lg); }
.immo-explorer .kpi-detail {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.immo-explorer .kpi-pill.is-updating .kpi-value { opacity: 0.45; }

/* ============================================================
   PANNEAUX FLOTTANTS (sur la carte)
   Echelle z-index : Leaflet panes 0-400 ; coins de controles Leaflet (.leaflet-top /
   .leaflet-bottom, ramenes de 1000 a 500) + legende + metric-switch 500 ;
   panneaux flottants 650 ; timeline 660 ; overlay chargement 800 ;
   detail-overlay 900 ; detail-drawer 950 ; tooltips 1000.
   ============================================================ */
.immo-explorer .immo-panel {
    position: absolute;
    z-index: 650;
    background: var(--immo-glass-bg);
    border: 1px solid var(--immo-glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--immo-glass-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
}

/* ----- Panneau filtres (gauche, repliable) ----- */
.immo-explorer .immo-filters-panel {
    top: var(--space-sm);
    left: var(--space-sm);
    width: var(--immo-filters-w);
    max-height: calc(100% - var(--space-md));
    transition: width var(--transition-base);
}
.immo-explorer .immo-panel-collapse {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--text-primary);
    padding: 0.7rem 0.85rem;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--immo-glass-border);
    transition: var(--transition-fast);
}
.immo-explorer .immo-panel-collapse:hover { color: var(--violet-primary); }
.immo-explorer .immo-panel-collapse svg { width: 16px; height: 16px; flex-shrink: 0; }
.immo-explorer .immo-panel-collapse .collapse-chevron { margin-left: auto; transition: transform var(--transition-fast); }
.immo-explorer .immo-panel-body {
    padding: var(--space-sm);
    overflow-y: auto;
    overflow-x: hidden;   /* sinon overflow-y:auto force overflow-x:auto -> ascenseur horizontal fantome */
    min-height: 0;
}
/* Etat replie : seul l'entete (icone + "Filtres") reste visible */
.immo-explorer .immo-filters-panel.is-collapsed { width: auto; }
.immo-explorer .immo-filters-panel.is-collapsed .immo-panel-body { display: none; }
.immo-explorer .immo-filters-panel.is-collapsed .immo-panel-collapse { border-bottom: none; }
.immo-explorer .immo-filters-panel.is-collapsed .collapse-chevron { transform: rotate(180deg); }

/* ----- Panneau rapport (droite, scrollable) ----- */
.immo-explorer .immo-report-panel {
    top: var(--space-sm);
    right: var(--space-sm);
    bottom: var(--space-sm);
    width: var(--immo-report-w);
}
.immo-explorer .immo-report-scroll {
    flex: 1;                        /* remplit le panneau (flex column) et scrolle a l'interieur */
    overflow-y: auto;
    overflow-x: hidden;             /* meme raison que le panneau filtres : pas d'ascenseur horizontal fantome */
    overscroll-behavior: contain;   /* le scroll du panneau ne part pas sur la carte/la page */
    padding: var(--space-sm);
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.immo-explorer .report-charts {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* ----- Timeline annees (flottante, bas de la carte) -----
   Elle est centree dans la BANDE LIBRE entre les deux panneaux flottants, pas
   dans la carte : left/right bornent la bande, width:fit-content + margin auto
   font le centrage. Un simple translateX(-50%) obligeait a soustraire la largeur
   du panneau rapport des deux cotes alors qu'il n'existe qu'a droite, ce qui
   ecrasait la timeline a quelques dizaines de pixels sur ecran moyen. */
.immo-explorer .immo-timeline {
    position: absolute;
    bottom: var(--space-sm);
    left: calc(var(--immo-filters-w) + var(--space-md));
    right: calc(var(--immo-report-w) + var(--space-md));
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    transform: none;
    z-index: 660;
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 5px;
    background: var(--immo-glass-bg);
    border: 1px solid var(--immo-glass-border);
    border-radius: var(--radius-full);
    box-shadow: var(--immo-glass-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow-x: auto;
    scrollbar-width: thin;
}
.immo-explorer .immo-timeline:empty { display: none; }
.immo-explorer .timeline-year {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
    transition: var(--transition-fast);
}
.immo-explorer .timeline-year:hover { background: var(--violet-wash-strong); color: var(--violet-primary); }
.immo-explorer .timeline-year.active { background: var(--violet-dark); color: var(--white); }

.immo-explorer .filters-grid {
    display: grid;
    grid-template-columns: 1fr;   /* panneau etroit : une colonne */
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.immo-explorer .filter-group { display: flex; flex-direction: column; gap: 0.4rem; position: relative; }
.immo-explorer .filter-group label { font-size: 0.82rem; font-weight: 500; color: var(--text-secondary); }

/* ----- Custom dropdowns (scoped overrides; base in style.css) ----- */
/* Le contour violet permanent des trois champs est une regle globale : le systeme
   reserve cette couleur au focus. Au repos on repasse sur le filet appuye, comme
   les autres champs de formulaire du site. */
.immo-explorer .custom-select-trigger { border-color: var(--border-strong); font-size: var(--text-base); }
.immo-explorer .custom-select-trigger:hover,
.immo-explorer .custom-select.open .custom-select-trigger { border-color: var(--violet-primary); }

.immo-explorer .dropdown-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.immo-explorer .dropdown-search svg { width: 16px; height: 16px; color: var(--text-secondary); flex-shrink: 0; }
.immo-explorer .dropdown-search input { flex: 1; border: none; background: transparent; color: var(--text-primary); font-size: 0.9rem; outline: none; }
.immo-explorer .dropdown-search input::placeholder { color: var(--text-secondary); }

.immo-explorer .dropdown-options { flex: 1; overflow-y: auto; padding: 0 0 0.25rem 0; }
.immo-explorer .dropdown-option {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary);
    transition: background var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.immo-explorer .dropdown-option:hover { background: rgba(var(--violet-primary-rgb), 0.15); }
.immo-explorer .dropdown-option.selected { background: rgba(var(--violet-primary-rgb), 0.25); font-weight: 500; color: var(--violet-dark); }
.immo-explorer .dropdown-option-special { border-bottom: 1px solid var(--border-color); font-weight: 500; color: var(--violet-dark); padding: 0.6rem 0.75rem; }
.immo-explorer .dropdown-option-special svg { width: 16px; height: 16px; }
.immo-explorer .dropdown-group { padding: 0; }
.immo-explorer .dropdown-group-header {
    padding: 0.5rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--violet-dark);
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--border-color);
}
.immo-explorer .dropdown-group .dropdown-option { padding-left: 1.25rem; }
.immo-explorer .search-results { padding: 0.25rem 0; }
.immo-explorer .search-results .dropdown-option { justify-content: space-between; }
.immo-explorer .search-results .result-label { flex: 1; }
.immo-explorer .search-results .result-region {
    font-size: 0.72rem;
    color: var(--text-secondary);
    background: rgba(var(--violet-primary-rgb), 0.15);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
    margin-left: 0.5rem;
    white-space: nowrap;
}
.immo-explorer .no-results { padding: 1rem; text-align: center; color: var(--text-secondary); font-size: 0.9rem; }

/* ----- Outliers checkbox + tooltip ----- */
.immo-explorer .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--text-base);
    color: var(--text-primary);
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: none;
    transition: var(--transition-fast);
}
.immo-explorer .checkbox-label:hover { background: var(--violet-wash); border-color: var(--violet-primary); }
.immo-explorer .checkbox-label input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--violet-primary); }
.immo-explorer .checkbox-label input[type="checkbox"]:checked + span { color: var(--text-primary); }
.immo-explorer .checkbox-label.has-tooltip { position: relative; }
.immo-explorer .info-tooltip { position: relative; display: inline-flex; align-items: center; margin-left: 0.25rem; }
.immo-explorer .info-icon { width: 14px; height: 14px; color: var(--text-secondary); cursor: help; transition: var(--transition-fast); }
.immo-explorer .info-tooltip:hover .info-icon { color: var(--violet-dark); }
.immo-explorer .info-tooltip-text {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--dark-primary);
    color: var(--white);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    line-height: 1.4;
    width: 280px;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
    pointer-events: none;
}
.immo-explorer .info-tooltip:hover .info-tooltip-text { opacity: 1; visibility: visible; }

/* Pas de surcharge de .btn-primary ici : la hierarchie d'actions est definie une
   fois pour tout le site dans style.css, une app ne la redefinit pas. */

/* ----- Overlay de chargement (assombrit la zone exploration) + error ----- */
.immo-explorer .immo-loading {
    position: absolute;
    inset: 0;
    z-index: 800;                 /* au-dessus des panneaux (650) et de la timeline (660) */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}
.immo-explorer .immo-loading.is-active { opacity: 1; visibility: visible; }

.immo-explorer .immo-loading-scrim {
    position: absolute;
    inset: 0;
    background: var(--overlay-dark);          /* rgba(0,0,0,0.6), token global existant */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.immo-explorer .immo-loading-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--immo-glass-bg);
    border: 1px solid var(--immo-glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--immo-glass-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-primary);
    font-weight: 600;
}
.immo-explorer .loading-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid var(--border-color);
    border-top-color: var(--violet-primary);
    border-radius: 50%;
    animation: immo-spin 1s linear infinite;
}
@keyframes immo-spin { to { transform: rotate(360deg); } }
.immo-explorer .error-message {
    background: rgba(var(--danger-rgb), 0.12);
    border: 1px solid rgba(var(--danger-rgb), 0.3);
    color: var(--danger);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
    text-align: center;
}

/* ============================================================
   STAGE (grande carte ; les panneaux flottent par-dessus)
   ============================================================ */
.immo-explorer .immo-stage {
    position: relative;
    height: var(--immo-stage-h);
    /* pas d'overflow:hidden ici : un menu deroulant ouvert dans le panneau filtres
       doit pouvoir deborder le stage. Le coin arrondi + clip est porte par .map-wrapper. */
}

/* ----- Cartes de graphiques (dans le panneau rapport) ----- */
.immo-explorer .band-card { padding: var(--space-sm); }
/* Signalisation technique du systeme : monospace en petites capitales, pas une
   icone violette par bloc. */
.immo-explorer .rail-title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 0.5rem;
}
.immo-explorer .rail-chart { position: relative; height: 180px; }
.immo-explorer .rail-chart canvas { max-width: 100%; }
.immo-explorer .rail-chart-donut { height: 200px; }

/* ----- Edu carousel ----- */
.immo-explorer .edu-carousel { display: flex; flex-direction: column; gap: 0.6rem; }
.immo-explorer .edu-track { position: relative; min-height: 120px; }
.immo-explorer .edu-slide { display: none; animation: immo-fade 0.35s ease; }
.immo-explorer .edu-slide.active { display: block; }
@keyframes immo-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.immo-explorer .edu-slide h4 { margin: 0 0 0.4rem; font-size: var(--text-base); color: var(--violet-primary); }
.immo-explorer .edu-slide p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--text-secondary); }
.immo-explorer .edu-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.immo-explorer .edu-btn {
    background: rgba(var(--violet-primary-rgb), 0.14);
    border: 1px solid var(--immo-glass-border);
    color: var(--text-primary);
    border-radius: var(--radius-full);
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--transition-fast);
}
.immo-explorer .edu-btn:hover { background: var(--violet-dark); color: var(--white); }
.immo-explorer .edu-btn svg { width: 16px; height: 16px; }
.immo-explorer .edu-dots { display: flex; gap: 0.35rem; }
.immo-explorer .edu-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-color); cursor: pointer; transition: var(--transition-fast); }
.immo-explorer .edu-dot.active { background: var(--violet-primary); transform: scale(1.25); }

/* ============================================================
   MAP
   ============================================================ */
/* La carte remplit le stage ; .map-wrapper porte le coin arrondi + le clip des overlays carte. */
.immo-explorer .map-wrapper {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--immo-glass-shadow);
    border: 1px solid var(--immo-glass-border);
}
.immo-explorer #property-map { height: 100%; width: 100%; background: var(--immo-map-bg); }

.immo-explorer .map-legend {
    position: absolute;
    bottom: 16px;
    left: 16px;
    padding: 0.7rem 0.9rem;
    background: var(--immo-glass-bg);
    border: 1px solid var(--immo-glass-border);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    box-shadow: var(--immo-glass-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 500;
    min-width: 210px;
    max-width: 46%;
}
.immo-explorer .legend-title { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.4rem; }
.immo-explorer .legend-gradient { display: flex; align-items: center; gap: 0.6rem; }
.immo-explorer .legend-bar { flex: 1; height: 12px; border-radius: 6px; }
.immo-explorer .legend-label { font-size: 0.72rem; color: var(--text-secondary); min-width: 48px; }
.immo-explorer .legend-label.min { text-align: left; }
.immo-explorer .legend-label.max { text-align: right; }
/* Says out loud that the map draws a sample, so the point count is never read as the
   transaction total shown by the KPI strip. */
.immo-explorer .legend-note {
    margin-top: 0.45rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.68rem;
    line-height: var(--leading-snug);
    color: var(--text-secondary);
}

/* Contour du departement selectionne : halo (ombre) pour mieux le detourer.
   On empile un lisere clair + une ombre foncee pour rester lisible sur les
   fonds clairs comme sombres (OSM, CartoDB Clair/Sombre...). */
.immo-explorer .dept-boundary {
    filter:
        drop-shadow(0 0 1px rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 3px rgba(0, 0, 0, 0.85))
        drop-shadow(0 0 6px rgba(0, 0, 0, 0.45));
}

/* Au clic, le navigateur dessine un contour de focus rectangulaire autour du
   path SVG du departement (et des autres calques cliquables). On le retire :
   le survol/selection ont deja leur propre rendu (epaisseur + halo). */
.immo-explorer .leaflet-interactive:focus {
    outline: none;
}

.immo-explorer .dept-tooltip.leaflet-tooltip {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--violet-primary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-size: 0.8rem;
    padding: 0.45rem 0.65rem;
}
.immo-explorer .dept-tooltip.leaflet-tooltip strong { color: var(--violet-primary); }

/* ----- Map metric switch (Prix / Evolution) ----- */
.immo-explorer .map-metric-switch {
    position: absolute;
    top: 12px;
    left: calc(var(--immo-filters-w) + var(--space-md));   /* degage du panneau filtres (gauche) */
    z-index: 500;
    display: inline-flex;
    background: var(--immo-glass-bg);
    border: 1px solid var(--immo-glass-border);
    border-radius: var(--radius-full);
    padding: 3px;
    box-shadow: var(--immo-glass-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.immo-explorer .metric-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-fast);
}
.immo-explorer .metric-btn.active { background: var(--violet-dark); color: var(--white); }

/* ============================================================
   INSPECTOR
   ============================================================ */
/* L'inspecteur n'a plus de wrapper propre : son contenu vit directement dans
   le panneau rapport (qui porte le fond glass). */
.immo-explorer .inspector-empty {
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    text-align: center;
    color: var(--text-secondary);
    padding: var(--space-md) var(--space-sm);
}
/* flex-shrink:0 : le bloc vit dans un flex column, sans quoi l'icone est
   ecrasee a zero de haut des que le panneau manque de place. */
.immo-explorer .inspector-empty svg { width: 40px; height: 40px; flex-shrink: 0; color: var(--violet-primary); opacity: 0.8; }
.immo-explorer .inspector-empty p { margin: 0; font-size: var(--text-base); max-width: 240px; }

.immo-explorer .inspector-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: var(--space-sm); }
.immo-explorer .inspector-scope { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--violet-primary); font-weight: 600; }
.immo-explorer .inspector-title { margin: 0.1rem 0 0; font-size: 1.25rem; color: var(--text-primary); }
.immo-explorer .inspector-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 0.25rem;
    display: inline-flex;
    transition: var(--transition-fast);
}
.immo-explorer .inspector-close:hover { background: rgba(var(--violet-primary-rgb), 0.18); color: var(--violet-dark); }
.immo-explorer .inspector-close svg { width: 18px; height: 18px; }

/* Quatre couples label/valeur : des lignes a filet, pas quatre cartes. Le panneau
   ne fait que 420px de large et la sparkline d'evolution doit rester au-dessus de
   la ligne de flottaison. */
.immo-explorer .inspector-tiles { display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: var(--space-sm); }
.immo-explorer .insp-tile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 0.3rem 0;
    border-top: 1px solid var(--border-color);
}
.immo-explorer .insp-tile:first-child { border-top: none; }
.immo-explorer .insp-tile .t-label { font-size: var(--text-sm); color: var(--text-secondary); }
.immo-explorer .insp-tile .t-value {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    text-align: right;
    white-space: nowrap;
}

.immo-explorer .insp-rank {
    background: rgba(var(--violet-primary-rgb), 0.12);
    border: 1px dashed var(--violet-primary);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.7rem;
    font-size: 0.82rem;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}
.immo-explorer .insp-rank strong { color: var(--violet-primary); }

/* Explicit dead end: the clicked commune has no row in the loaded dataset. Warning
   tones, not brand tones, because this states a limit of the data rather than a
   result. It replaces the tiles, so nothing department-scoped stays on screen under
   a commune heading. */
.immo-explorer .insp-note {
    background: var(--warning-bg);
    border: 1px solid var(--warning);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.7rem;
    font-size: 0.8rem;
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}
.immo-explorer .insp-note strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--warning-text);
    font-weight: var(--font-weight-bold);
}
.immo-explorer .insp-note-action {
    display: inline-block;
    margin-top: 0.55rem;
    padding: 0.35rem 0.7rem;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.immo-explorer .insp-note-action:hover {
    background: var(--violet-wash);
    border-color: var(--violet-primary);
}

.immo-explorer .inspector-section { margin-bottom: var(--space-sm); }
.immo-explorer .inspector-section-title { font-size: 0.85rem; color: var(--text-primary); margin: 0 0 0.5rem; }
.immo-explorer .inspector-section.is-hidden { display: none; }
.immo-explorer .inspector-spark { position: relative; height: 140px; }

.immo-explorer .btn-detail {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(var(--violet-primary-rgb), 0.14);
    border: 1px solid var(--violet-primary);
    color: var(--violet-primary);
    border-radius: var(--radius-sm);
    padding: 0.6rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}
.immo-explorer .btn-detail:hover { background: var(--violet-dark); color: var(--white); }
.immo-explorer .btn-detail svg { width: 16px; height: 16px; }

/* ----- Evolution badge ----- */
.immo-explorer .evolution-summary { margin-bottom: 0.5rem; }
.immo-explorer .evolution-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 600; }
.immo-explorer .evolution-badge.evolution-up { background: rgba(var(--danger-rgb), 0.16); color: var(--viz-negative); }
.immo-explorer .evolution-badge.evolution-down { background: rgba(var(--success-rgb), 0.16); color: var(--viz-positive); }

/* ----- Top communes (compact, inside inspector) ----- */
.immo-explorer .top-communes-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
/* Deux listes, pas deux cartes : le seul accent conserve est le filet sous le titre. */
.immo-explorer .top-commune-card { min-width: 0; }
.immo-explorer .top-commune-card h4 { font-size: var(--text-sm); color: var(--text-primary); margin: 0 0 0.5rem; padding-bottom: 0.35rem; border-bottom: 2px solid var(--violet-primary); }
.immo-explorer .top-cheapest h4 { border-bottom-color: var(--viz-positive); }
.immo-explorer .top-expensive h4 { border-bottom-color: var(--viz-negative); }
.immo-explorer .top-commune-list { display: flex; flex-direction: column; gap: 0.2rem; }
.immo-explorer .top-commune-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.25rem; border-radius: var(--radius-sm); transition: var(--transition-fast); }
.immo-explorer .top-commune-item:hover { background: rgba(var(--violet-primary-rgb), 0.1); }
/* Le rang n'a pas besoin d'une pastille de marque : l'ordre de la liste le dit deja. */
.immo-explorer .top-commune-item .rank { width: 1.1rem; flex-shrink: 0; margin-right: 0.4rem; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
.immo-explorer .top-commune-item .commune-info { flex: 1; min-width: 0; }
.immo-explorer .top-commune-item .commune-name { display: block; font-size: 0.78rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.immo-explorer .top-commune-item .commune-postal { display: block; font-size: 0.68rem; color: var(--text-secondary); }
.immo-explorer .top-commune-item .commune-price { text-align: right; flex-shrink: 0; }
.immo-explorer .top-commune-item .price-value { display: block; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--violet-primary); }
.immo-explorer .top-commune-item .transaction-count { display: block; font-size: 0.64rem; color: var(--text-secondary); }
.immo-explorer .loading-text, .immo-explorer .no-data { color: var(--text-secondary); font-size: 0.82rem; text-align: center; padding: 0.5rem; }

/* ============================================================
   DETAIL DRAWER
   ============================================================ */
.immo-explorer .immo-detail-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0; visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    z-index: 900;
}
.immo-explorer .immo-detail-overlay.open { opacity: 1; visibility: visible; }
.immo-explorer .immo-detail-drawer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-height: 88vh;
    background: var(--card-bg);
    border-top: 1px solid var(--immo-glass-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: transform var(--transition-base);
    z-index: 950;
    display: flex;
    flex-direction: column;       /* en-tete fige + corps qui remplit */
    overflow: hidden;             /* le scroll vit dans la table, pas dans le tiroir entier */
    padding: var(--space-md);
}
.immo-explorer .immo-detail-drawer.open { transform: translateY(0); }
.immo-explorer .detail-drawer-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.immo-explorer .detail-drawer-head .eyebrow { margin: 0 0 0.15rem; }
.immo-explorer .detail-drawer-head h3 { margin: 0; font-size: var(--text-xl); color: var(--text-primary); }
/* La table prend toute la largeur du tiroir : le simulateur n'a qu'un champ, il
   n'a pas besoin d'une colonne, il tient sur une ligne sous le tableau. */
.immo-explorer .detail-drawer-body { display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; min-height: 0; }

/* ----- Data table ----- */
.immo-explorer .stats-table-container { flex: 1; width: 100%; max-width: 100%; min-height: 0; display: flex; flex-direction: column; }
.immo-explorer .stats-table-container h3 { margin-bottom: var(--space-sm); color: var(--text-primary); font-size: 1.05rem; }
.immo-explorer .table-wrapper { flex: 1; min-height: 0; width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); border: 1px solid var(--border-color); }
.immo-explorer .data-table { min-width: 720px; width: max-content; border-collapse: collapse; font-size: var(--text-sm); }
.immo-explorer .data-table th, .immo-explorer .data-table td { padding: 0.35rem 0.7rem; text-align: left; border-bottom: 1px solid var(--border-color); }
/* Colonnes chiffrees : alignees a droite, chasse fixe, unites empilees. */
.immo-explorer .data-table th.num,
.immo-explorer .data-table td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* L'en-tete triable reserve 1.5rem a droite pour sa fleche : sans le meme retrait
   sur les cellules, l'intitule et la colonne de chiffres ne finissent pas au meme
   pixel, ce qui se voit sur sept colonnes d'affilee. */
.immo-explorer .data-table td.num { padding-right: 1.5rem; }
.immo-explorer .data-table th { background: var(--bg-secondary); font-weight: 600; color: var(--text-primary); position: sticky; top: 0; white-space: nowrap; z-index: 2; }
.immo-explorer .data-table th.sortable { cursor: pointer; user-select: none; padding-right: 1.5rem; }
.immo-explorer .data-table th.sortable:hover { background: var(--violet-wash); color: var(--violet-primary); }
.immo-explorer .data-table th.sortable::after { content: '\21C5'; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); opacity: 0.35; font-size: 0.75rem; }
.immo-explorer .data-table th.sortable.sort-asc::after { content: '\25B2'; opacity: 1; color: var(--violet-dark); }
.immo-explorer .data-table th.sortable.sort-desc::after { content: '\25BC'; opacity: 1; color: var(--violet-dark); }
.immo-explorer .data-table tbody tr:hover { background: rgba(var(--violet-primary-rgb), 0.06); }
.immo-explorer .data-table td { color: var(--text-primary); }
.immo-explorer .data-table .price-cell { font-weight: 500; }
.immo-explorer .loading-cell { text-align: center; color: var(--text-secondary); padding: var(--space-lg) !important; }

/* Price gradient buckets, aligned with the --viz-ramp-* scale the map uses.
   Alphas volontairement bas : trois colonnes teintees cote a cote formaient un
   pave sature au milieu du tableau et masquaient la lecture des montants. */
.immo-explorer .price-low { background: rgba(var(--violet-primary-rgb), 0.10); }
.immo-explorer .price-medium { background: rgba(var(--violet-dark-rgb), 0.14); }
.immo-explorer .price-high { background: rgba(var(--viz-ramp-4-rgb), 0.18); }
.immo-explorer .price-very-high { background: rgba(var(--yellow-primary-rgb), 0.20); }

/* ----- Budget panel (barre d'outils sous la table, pas colonne) ----- */
.immo-explorer .budget-panel {
    flex: none;
    display: grid;
    grid-template-columns: auto minmax(140px, 180px) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem var(--space-sm);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
}
.immo-explorer .budget-title { margin: 0; font-size: var(--text-base); color: var(--text-primary); white-space: nowrap; }
.immo-explorer .budget-description { grid-column: 1 / -1; margin: 0; font-size: var(--text-xs); color: var(--text-tertiary); }
.immo-explorer .input-with-unit { display: flex; align-items: center; gap: 0.5rem; }
.immo-explorer .budget-field {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-base);
}
.immo-explorer .budget-field:focus { outline: none; border-color: var(--violet-primary); box-shadow: 0 0 0 3px rgba(var(--violet-primary-rgb), 0.18); }
.immo-explorer .input-with-unit .unit { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-xs); }
.immo-explorer .btn-calculate { white-space: nowrap; }
.immo-explorer .budget-result { grid-column: 1 / -1; margin: 0; padding-top: var(--space-sm); border-top: 1px solid var(--border-color); }
.immo-explorer .budget-result-main { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.5rem; }
.immo-explorer .budget-result-main .result-label { color: var(--text-secondary); font-size: var(--text-sm); }
.immo-explorer .budget-result-main .result-value { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: var(--font-weight-medium); color: var(--violet-primary); }
.immo-explorer .budget-result-details .eyebrow { margin: 0 0 0.4rem; }
.immo-explorer .budget-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.immo-explorer .budget-chips li {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.immo-explorer .budget-chips .chip-surface { font-family: var(--font-mono); color: var(--text-primary); }
.immo-explorer .budget-chips .chip-sqm { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }

/* ============================================================
   LEAFLET CONTROLS (re-themed with vars)
   ============================================================ */
/* Ce sont les conteneurs de coin de Leaflet, pas les boutons, qui portent le
   z-index par defaut (1000). Non corriges, ils passent au-dessus du tiroir
   detail (950) ET de son voile modal (900) : les boutons de carte flottaient
   au milieu du tableau et restaient cliquables a travers le voile. On les
   ramene au niveau des autres overlays carte plutot que de remonter le tiroir,
   pour rester loin du plafond du header partage. */
.immo-explorer .leaflet-top,
.immo-explorer .leaflet-bottom { z-index: 500; }

/* Les controles haut-droite (zoom, calques, reset, plein ecran) sont decales
   vers la gauche pour rester cliquables a cote du panneau rapport (droite). */
.immo-explorer .leaflet-top.leaflet-right { right: calc(var(--immo-report-w) + var(--space-md)); }

.immo-explorer .price-cluster { background: transparent !important; }
.immo-explorer .cluster-icon {
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), var(--immo-glow);
    font-weight: 600; font-size: 12px; color: var(--white);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    opacity: 0.9;
}
.immo-explorer .cluster-icon span { line-height: 1; }
.immo-explorer .cluster-default { background: var(--violet-primary); }

.immo-explorer .leaflet-popup-content-wrapper { border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text-primary); }
.immo-explorer .leaflet-popup-tip { background: var(--card-bg); }
.immo-explorer .leaflet-popup-content { margin: 0.75rem; font-size: 0.88rem; line-height: 1.5; }
.immo-explorer .leaflet-popup-content strong { color: var(--violet-primary); }

.immo-explorer .leaflet-control-layers,
.immo-explorer .leaflet-control-reset-button,
.immo-explorer .leaflet-control-fullscreen-button,
.immo-explorer .leaflet-control-clustering-button,
.immo-explorer .leaflet-control-heat-button,
.immo-explorer .leaflet-control-layers-toggle {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--immo-glass-border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-primary) !important;
    z-index: 500 !important;
}
/* The shared rule above used to wipe Leaflet's layers.png via the `background`
   shorthand. We now draw a theme-adaptive "layers" glyph ourselves so the
   toggle is never empty. */
.immo-explorer .leaflet-control-layers-toggle {
    width: 38px !important; height: 38px !important;
    position: relative;
    background-image: none !important;
}
.immo-explorer .leaflet-control-layers-toggle::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--text-secondary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolygon%20points='12%202%202%207%2012%2012%2022%207%2012%202'/%3E%3Cpolyline%20points='2%2017%2012%2022%2022%2017'/%3E%3Cpolyline%20points='2%2012%2012%2017%2022%2012'/%3E%3C/svg%3E") center / 20px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolygon%20points='12%202%202%207%2012%2012%2022%207%2012%202'/%3E%3Cpolyline%20points='2%2017%2012%2022%2022%2017'/%3E%3Cpolyline%20points='2%2012%2012%2017%2022%2012'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.immo-explorer .leaflet-control-layers-expanded { padding: 0.5rem 0.75rem !important; min-width: 160px; }
.immo-explorer .leaflet-control-layers-base label { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; margin: 0; cursor: pointer; font-size: 0.84rem; color: var(--text-primary); }
.immo-explorer .leaflet-control-layers-base label:hover { color: var(--violet-dark); }
.immo-explorer .leaflet-control-layers-base input { accent-color: var(--violet-primary); width: 1rem; height: 1rem; }

.immo-explorer .leaflet-control-reset,
.immo-explorer .leaflet-control-fullscreen,
.immo-explorer .leaflet-control-clustering,
.immo-explorer .leaflet-control-heat { z-index: 500 !important; }
.immo-explorer .leaflet-control-reset.leaflet-bar,
.immo-explorer .leaflet-control-fullscreen.leaflet-bar,
.immo-explorer .leaflet-control-clustering.leaflet-bar,
.immo-explorer .leaflet-control-heat.leaflet-bar { border: none !important; box-shadow: none !important; }

.immo-explorer .leaflet-control-reset-button,
.immo-explorer .leaflet-control-fullscreen-button,
.immo-explorer .leaflet-control-clustering-button,
.immo-explorer .leaflet-control-heat-button {
    display: flex !important; align-items: center; justify-content: center;
    width: 38px !important; height: 38px !important;
    cursor: pointer; transition: var(--transition-fast); position: relative;
}
.immo-explorer .leaflet-control-reset-button:hover,
.immo-explorer .leaflet-control-fullscreen-button:hover,
.immo-explorer .leaflet-control-clustering-button:hover,
.immo-explorer .leaflet-control-heat-button:hover { background: var(--violet-dark) !important; border-color: var(--violet-dark) !important; }
.immo-explorer .leaflet-control-reset-button svg,
.immo-explorer .leaflet-control-fullscreen-button svg,
.immo-explorer .leaflet-control-clustering-button svg,
.immo-explorer .leaflet-control-heat-button svg { width: 20px; height: 20px; stroke: var(--text-secondary); transition: var(--transition-fast); }
.immo-explorer .leaflet-control-reset-button:hover svg,
.immo-explorer .leaflet-control-fullscreen-button:hover svg,
.immo-explorer .leaflet-control-clustering-button:hover svg,
.immo-explorer .leaflet-control-heat-button:hover svg { stroke: var(--white); }
.immo-explorer .leaflet-control-clustering-button.active,
.immo-explorer .leaflet-control-heat-button.active { background: var(--violet-dark) !important; border-color: var(--violet-dark) !important; }
.immo-explorer .leaflet-control-clustering-button.active svg,
.immo-explorer .leaflet-control-heat-button.active svg { stroke: var(--white); }

/* "Toute la France" : bouton libelle, mis en avant (pastille accent violet) */
.immo-explorer .leaflet-control-reset-button {
    width: auto !important;
    gap: 0.5rem;
    padding: 0 0.7rem !important;
    background: var(--violet-dark) !important;
    border-color: var(--violet-dark) !important;
}
.immo-explorer .leaflet-control-reset-button svg { stroke: var(--white); }
.immo-explorer .leaflet-control-reset-button:hover { filter: brightness(0.95); }
.immo-explorer .leaflet-control-reset-label {
    font-size: 0.8rem; font-weight: 600; color: var(--white);
    white-space: nowrap; line-height: 1;
}

/* Info-bulle stylee au survol des boutons icone de la carte (plein ecran,
   regrouper, carte de chaleur). Creee par addMapButton() dans immo.js. */
.immo-explorer .leaflet-control-layers,
.immo-explorer .leaflet-control-fullscreen,
.immo-explorer .leaflet-control-clustering,
.immo-explorer .leaflet-control-heat { position: relative; }
/* Menu de fond de carte ouvert : on masque l'info-bulle pour ne pas chevaucher le panneau. */
.immo-explorer .leaflet-control-layers-expanded .immo-map-tip { display: none; }
.immo-explorer .immo-map-tip {
    position: absolute; right: 46px; top: 50%; transform: translateY(-50%);
    background: var(--dark-primary); color: var(--white);
    padding: 0.45rem 0.7rem; border-radius: var(--radius-sm);
    font-size: 0.78rem; font-weight: 600; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none; z-index: 1000;
}
/* Hint affiche au 1er chargement (classe .visible posee en JS) : toujours actif. */
.immo-explorer .immo-map-tip.visible { opacity: 1; visibility: visible; }
/* Reveal au survol uniquement sur appareils a vrai survol : evite l'info-bulle
   "epinglee" apres un tap sur mobile/tactile. */
@media (hover: hover) {
    .immo-explorer .leaflet-control:hover .immo-map-tip { opacity: 1; visibility: visible; }
}

/* Fullscreen fallback */
.immo-explorer .map-fullscreen-fallback { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 9999 !important; background: var(--bg-primary); border-radius: 0 !important; }
body.fullscreen-active { overflow: hidden !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Desktop etroit : on retrecit le stage et les deux panneaux (les decalages
   legende / metric-switch / controles Leaflet / timeline suivent via les vars). */
@media (max-width: 1340px) {
    .immo-explorer {
        --immo-stage-h: clamp(520px, 74vh, 800px);
        --immo-filters-w: 260px;
        --immo-report-w: clamp(300px, 28vw, 360px);
    }
    /* Cinq colonnes de metrique dans moins de 1150px : la valeur descend d'un cran
       sinon "3,5k€/m²" deborde sur la colonne suivante (pas d'ellipsis possible,
       un nombre tronque ment). */
    .immo-explorer .kpi-value { font-size: var(--text-xl); }
}

/* Sous 1100px la mise en page "carte plein ecran + panneaux flottants" cesse de
   tenir : les deux panneaux recouvrent l'essentiel de la carte. Les panneaux
   repassent donc en flux sous la carte. Le seuil etait a 768px, ce qui laissait
   une bande de 330px ou la carte etait quasi entierement masquee. */
@media (max-width: 1100px) {
    /* le perimetre passe au-dessus : la ligne de metriques recupere toute la largeur */
    .immo-explorer .immo-kpi-bar { grid-template-columns: 1fr; gap: var(--space-xs); }
    .immo-explorer .immo-stage { height: auto; margin-bottom: var(--space-md); }
    .immo-explorer .map-wrapper.immo-stage-map { position: relative; inset: auto; height: 58vh; min-height: 400px; }
    .immo-explorer .immo-panel { position: static; width: auto; max-height: none; margin-top: var(--space-sm); }
    .immo-explorer .immo-report-scroll { overflow: visible; }   /* c'est la page qui defile */
    /* empile : les graphes reprennent de la largeur, donc on les met cote a cote
       plutot que d'etirer quatre blocs de 180px de haut sur toute la page */
    .immo-explorer .report-charts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--space-sm);
    }
    /* overlays carte remis a leur place (plus de panneau qui chevauche la carte) */
    .immo-explorer .map-metric-switch { left: 12px; }
    .immo-explorer .map-legend { left: 16px; min-width: 150px; max-width: 60%; }
    .immo-explorer .leaflet-top.leaflet-right { right: 0; }
    /* la legende est ancree en bas a gauche : la timeline se cale a droite */
    .immo-explorer .immo-timeline {
        left: var(--space-sm);
        right: var(--space-sm);
        margin: 0 0 0 auto;
        max-width: calc(100% - 2 * var(--space-sm) - 170px);
    }
}

/* Tablette / mobile */
@media (max-width: 768px) {
    .immo-explorer { padding: var(--space-xs) var(--space-sm) var(--space-md); }
    .immo-explorer .map-wrapper.immo-stage-map { height: 52vh; min-height: 360px; }
    .immo-explorer .filters-grid { grid-template-columns: 1fr; }
    /* bandeau KPI : indicateurs 2 par ligne, separes par des filets horizontaux */
    .immo-explorer .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-sm); }
    .immo-explorer .kpi-pill {
        border-left: none;
        border-top: 1px solid var(--border-color);
        padding: 0.5rem 0 0.25rem;
    }
    .immo-explorer .kpi-pill:first-child { padding-left: 0; }
    /* tiroir detail : bloc plein ecran scrollable */
    .immo-explorer .immo-detail-drawer { display: block; overflow-y: auto; }
    .immo-explorer .table-wrapper { max-height: 50vh; }   /* empile : cap raisonnable */
    .immo-explorer .budget-panel { grid-template-columns: 1fr; align-items: stretch; }
}

@media (max-width: 480px) {
    .immo-explorer .kpi-row { grid-template-columns: 1fr; }
    .immo-explorer .top-communes-grid { grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .immo-explorer .edu-slide,
    .immo-explorer .immo-detail-drawer,
    .immo-explorer .kpi-pill { transition: none; animation: none; }
}