/* ============================================================
   Carpyx cartographic controls rail (POINT 3)
   ============================================================ */
.carto-controls {
    position: fixed;
    top: 12px;
    /* même “top” que ton header */
    right: 12px;

    display: flex;
    flex-direction: column;
    gap: 8px;

    z-index: 2200;
}


/* Shared button style (same as baselayers-toggle) */
.carto-control-btn {
    width: 44px;
    height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);

    background: rgba(40, 40, 40, 0.72);
    color: #f5f7fa;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    font-size: 20px;
    cursor: pointer;
}

/* Hover */
.carto-control-btn:hover {
    background: rgba(55, 55, 55, 0.8);
}

/* Mobile */
@media (max-width: 768px) {
    .carto-control-btn {
        width: 52px;
        height: 52px;
        font-size: 24px;
    }
}

/* Décale le rail sous le bouton des styles */





/* ============================================================
   Tooltip — same system as baselayers button
   ============================================================ */
.carto-control-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: 50%;
    right: 110%;
    transform: translateY(-50%);

    background: rgba(20, 20, 20, 0.85);
    color: #fff;
    font-size: 12px;
    line-height: 1.35;

    padding: 8px 10px;
    border-radius: 10px;
    white-space: nowrap;

    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, .45);

    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 3000;
}

.carto-control-btn:hover::after {
    opacity: 1;
}

/* ============================================================
   Normalize right rail buttons (POINT 3 fix)
   ============================================================ */

/* Same box model for ALL right-side buttons */
.baselayers-toggle,
.carto-control-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    /* ⬅️ clé */
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Mobile normalization */
@media (max-width: 768px) {

    .baselayers-toggle,
    .carto-control-btn {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
}

/* ============================================================
   RIGHT RAIL — definitive button unification
   ============================================================ */

.baselayers-toggle,
.carto-control-btn {
    width: 48px;
    height: 48px;

    padding: 0;
    margin: 0;

    border-radius: 14px;
    /* ⬅️ même rayon */
    border: 1px solid rgba(255, 255, 255, 0.18);

    background: rgba(40, 40, 40, 0.72);
    color: #f5f7fa;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Icon & text normalization */
.baselayers-toggle i,
.carto-control-btn {
    font-size: 20px;
    line-height: 1;
}

.carto-controls>.baselayers-panel {
    margin: 0;
}

/* Rail: make baselayers wrapper behave like a button in the flex flow */
.carto-controls>.baselayers-panel {
    margin: 0;
}

.carto-controls>.baselayers-panel {
    display: contents;
}

/* ============================================================
   Relief button — active state (POINT 4)
   ============================================================ */

.carto-control-btn.is-active {
    background: rgba(255, 255, 255, 0.22);
}

.carto-control-btn.is-active {
    border-color: rgba(95, 209, 255, 0.55);
}

.carto-control-btn.is-active i {
    color: #5fd1ff;
}

/* Ensure icons don't shift baseline */
.carto-control-btn i {
    line-height: 1;
}

/* ============================================================
   Map scale — Carpyx UI (POINT 5)
   ============================================================ */

.leaflet-control-scale {
    margin: 0 12px 12px 0;
}

.leaflet-control-scale-line {
    background: rgba(40, 40, 40, 0.72);
    color: #f5f7fa;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;

    padding: 6px 10px;

    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Mobile — slightly larger & readable */
@media (max-width: 768px) {
    .leaflet-control-scale-line {
        font-size: 13px;
        padding: 8px 12px;
    }
}

/* ============================================================
   Map scale — mobile visibility fix (POINT 5)
   ============================================================ */

@media (max-width: 768px) {

    .leaflet-control-scale {
        bottom: 64px;
        /* ⬅️ au-dessus du footer attribution */
        right: 12px;
        margin: 0;
        z-index: 2100;
    }
}

/* ============================================================
   Map scale — visual ruler (POINT 5)
   ============================================================ */

.leaflet-control-scale-line {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 64px;

    border-top: 2px solid #f5f7fa;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;

    border-radius: 0;

    text-align: center;
}

.leaflet-control-scale-line::before,
.leaflet-control-scale-line::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 2px;
    height: 8px;
    background: #f5f7fa;
}

.leaflet-control-scale-line::before {
    left: 0;
}

.leaflet-control-scale-line::after {
    right: 0;
}

/* ============================================================
   Map scale — text clarity fix (POINT 5)
   ============================================================ */

.leaflet-control-scale-line {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    background: rgba(30, 30, 30, 0.85);
    /* ⬅️ plus opaque */
    color: #ffffff;

    text-shadow: none;
    font-weight: 600;
}

.leaflet-control-scale-line {
    font-size: 13px;
    letter-spacing: 0.2px;
}

/* ============================================================
   Align baselayers button with header
   ============================================================ */

.baselayers-toggle {
    margin-top: 0px;
    /* ajuste si besoin : -8px / -12px */
}

/* Rail de contrôles : colonne propre */
#carto-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* ESPACEMENT OFFICIEL ENTRE BOUTONS */
}

/* ============================================================
   GPS Indicator (F02) — above Leaflet scale (bottom-right)
   ============================================================ */

.carpyx-gps-indicator.leaflet-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);

    background: rgba(40, 40, 40, 0.72);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    margin: 0 12px 8px 0;
    /* align with scale, sit just above it */
    color: #ff4d4d;
    /* default = NOK (red) */
}

.carpyx-gps-indicator svg {
    display: block;
}

.carpyx-gps-indicator.is-ok {
    color: #2ecc71;
    /* green */
}

.carpyx-gps-indicator.is-pending {
    color: #f39c12;
    /* orange */
}

.carpyx-gps-indicator.is-nok {
    color: #ff4d4d;
    /* red */
}

.ui-disabled {
    display: none !important;
}

/* =========================================================
   CARTO CONTROLS — SCROLLABLE RIGHT RAIL (MOBILE SAFE)
   Target: #carto-controls
   ========================================================= */

#carto-controls {
    /* Contrainte de hauteur OBLIGATOIRE pour activer le scroll */
    max-height: calc(100dvh - 120px);

    /* Scroll interne */
    overflow-y: auto;
    overflow-x: hidden;

    /* Mobile smooth scroll */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* Sécurité : évite l’écrasement visuel */
    box-sizing: border-box;
}

/* Ajustement mobile (footer + barres système) */
@media (max-width: 768px) {
    #carto-controls {
        max-height: calc(100dvh - 140px);
        padding-bottom: 12px;
    }
}

/* =========================================================
   CARTO CONTROLS — RIGHT RAIL FIXED + SCROLL (CORRECT)
   ========================================================= */

#carto-controls {
    position: fixed;

    /* Bornes verticales STRICTES */
    top: 12px;
    bottom: 96px;
    /* laisse la place au footer */

    right: 12px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    /* SCROLL INTERNE RÉEL */
    overflow-y: auto;
    overflow-x: hidden;

    /* Mobile smooth */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    box-sizing: border-box;
}

/* Ajustement mobile (footer + safe area) */
@media (max-width: 768px) {
    #carto-controls {
        bottom: 120px;
    }
}

/* =========================================================
   CARTO CONTROLS — FIX BUTTON SIZE + SCROLL
   ========================================================= */

/* Rail droit */
#carto-controls {
    position: fixed;
    top: 12px;
    bottom: 96px;
    right: 12px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    box-sizing: border-box;
}

/* ⛔️ EMPÊCHE LA COMPRESSION DES BOUTONS */
#carto-controls>* {
    flex: 0 0 auto;
    /* clé absolue */
}

/* Taille fixe explicite des boutons (sécurité) */
#carto-controls button,
#carto-controls .control-btn,
#carto-controls .carto-btn {
    min-height: 44px;
    /* taille tactile safe */
    height: 44px;
    flex-shrink: 0;
    /* double sécurité */
}

/* Ajustement mobile */
@media (max-width: 768px) {
    #carto-controls {
        bottom: 120px;
    }
}

:root {
    --carpyx-carto-controls-top: 12px;
    --carpyx-carto-controls-bottom: 145px;
    /* à ajuster */
}

/* =========================================================
   CARTO CONTROLS — SCROLL INDICATORS
   ========================================================= */

#carto-controls {
    position: relative;
    /* nécessaire pour placer les indicateurs */
}

/* conteneurs des flèches */
#carto-controls .carto-scroll-indicator {
    position: sticky;
    left: 0;
    right: 0;
    height: 18px;
    display: none;
    /* affiché par JS si utile */
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
    opacity: .9;
}

/* haut */
#carto-controls .carto-scroll-indicator.top {
    top: 0;
}

/* bas */
#carto-controls .carto-scroll-indicator.bottom {
    bottom: 0;
}

/* le petit “badge” */
#carto-controls .carto-scroll-indicator span {
    font-size: 12px;
    line-height: 1;
    padding: 2px 8px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, .35);
}

/* états pilotés par JS */
#carto-controls[data-scroll="none"] .carto-scroll-indicator {
    display: none;
}

#carto-controls[data-scroll="both"] .carto-scroll-indicator {
    display: flex;
}

#carto-controls[data-scroll="top"] .carto-scroll-indicator.top {
    display: none;
}

#carto-controls[data-scroll="top"] .carto-scroll-indicator.bottom {
    display: flex;
}

#carto-controls[data-scroll="bottom"] .carto-scroll-indicator.bottom {
    display: none;
}

#carto-controls[data-scroll="bottom"] .carto-scroll-indicator.top {
    display: flex;
}

/* =========================================================
   CARTO CONTROLS — HARD VISIBILITY FIX
   ========================================================= */

#carto-controls {
    position: fixed !important;
    right: 12px !important;
    top: 12px !important;
    bottom: 145px !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 10px;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;

    z-index: 10050 !important;
}

/* sécurité mobile */
body.pref-hide-right-rail #carto-controls {
    display: none !important;
}

/* =========================================================
   CARTO CONTROLS — SCROLL INDICATORS (FIX LAYERING + VISIBILITY)
   ========================================================= */

#carto-controls {
    position: fixed !important;
    /* IMPORTANT: pour que sticky fonctionne bien dans le rail */
    display: flex !important;
    flex-direction: column !important;
}

/* Indicateurs : toujours au-dessus des boutons */
#carto-controls .carto-scroll-indicator {
    position: sticky;
    left: 0;
    right: 0;

    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;

    z-index: 10060;
    /* au-dessus des boutons */
}

/* Haut et bas */
#carto-controls .carto-scroll-indicator.top {
    top: 0;
}

#carto-controls .carto-scroll-indicator.bottom {
    bottom: 0;
}

/* Badge : plus clair */
#carto-controls .carto-scroll-indicator span {
    font-size: 12px;
    line-height: 1;

    padding: 4px 10px;
    border-radius: 999px;

    /* plus lumineux, lisible */
    background: rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .20);

    backdrop-filter: blur(8px);
}

/* Un peu plus visible sur mobile */
@media (max-width: 768px) {
    #carto-controls .carto-scroll-indicator span {
        background: rgba(255, 255, 255, .28);
        border-color: rgba(255, 255, 255, .26);
    }
}

#carto-controls>*:not(.carto-scroll-indicator) {
    z-index: 10055;
    position: relative;
}

/* =========================================================
   CARTO CONTROLS — SCROLL FIX (NO COMPRESSION, OVERLAY ARROWS)
   ========================================================= */

#carto-controls {
    position: fixed !important;
    right: 12px;
    top: 12px;
    bottom: 12px;

    display: flex;
    flex-direction: column;

    /* IMPORTANT */
    overflow: hidden;
    /* empêche l’écrasement */
    z-index: 10050;
}

/* Zone scrollable réelle */
#carto-controls>* {
    flex-shrink: 0;
    /* 🔑 empêche la compression */
}

/* Boutons : taille FIXE */
#carto-controls button,
#carto-controls .carto-btn,
#carto-controls .carto-control {
    min-height: 48px;
    height: 48px;
    flex-shrink: 0;
}

/* Scroll vertical interne */
#carto-controls {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    /* Firefox */
}

#carto-controls::-webkit-scrollbar {
    display: none;
}

/* ===============================
   SCROLL INDICATORS (OVERLAY)
   =============================== */

#carto-controls .carto-scroll-indicator {
    position: absolute;
    left: 0;
    right: 0;

    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
    z-index: 10100;
    /* AU-DESSUS des boutons */
}

#carto-controls .carto-scroll-indicator.top {
    top: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, .55),
            rgba(0, 0, 0, 0));
}

#carto-controls .carto-scroll-indicator.bottom {
    bottom: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, .55),
            rgba(0, 0, 0, 0));
}

/* Icône flèche */
#carto-controls .carto-scroll-indicator span {
    font-size: 14px;
    color: #fff;
    opacity: .9;
}

/* =========================================================
   FIX — TOP SCROLL INDICATOR HIDDEN BY HEADER
   ========================================================= */

/* Le rail DOIT passer au-dessus du header */
#carto-controls {
    z-index: 11000 !important;
}

/* La flèche haute encore au-dessus */
#carto-controls .carto-scroll-indicator {
    z-index: 11010 !important;
}

/* =========================================================
   RIGHT RAIL — SCROLLABLE WITH FIXED BUTTON SIZE
   ========================================================= */

#carto-controls {
    position: fixed;
    right: 12px;
    top: 12px;
    bottom: 12px;
    width: 56px;

    display: flex;
    flex-direction: column;
    align-items: center;

    z-index: 11000;
}

/* ZONE SCROLLABLE UNIQUEMENT */
.carto-controls-scroll {
    flex: 1 1 auto;
    width: 100%;

    overflow-y: auto;
    overflow-x: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    scrollbar-width: none;
}

.carto-controls-scroll::-webkit-scrollbar {
    display: none;
}

/* BOUTONS — TAILLE FIXE, JAMAIS COMPRESSÉS */
.carto-controls-scroll>* {
    flex: 0 0 auto;
}

/* =========================================================
   SCROLL INDICATORS — TOUJOURS VISIBLES
   ========================================================= */

.carto-scroll-indicator {
    position: sticky;
    width: 44px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.65);
    border-radius: 14px;
    color: #fff;

    z-index: 11010;
}

.carto-scroll-indicator.top {
    top: 0;
    margin-bottom: 6px;
}

.carto-scroll-indicator.bottom {
    bottom: 0;
    margin-top: 6px;
}

/* =========================================================
   CARPYX — RIGHT RAIL SCROLL (FIXED BUTTON SIZE)
   FILE: public/assets/css/ui-controls.css
   ========================================================= */

/* CONTENEUR GLOBAL DU RAIL */
#carto-controls {
    position: fixed;
    right: 12px;
    top: 12px;
    bottom: 12px;
    width: 56px;

    display: flex;
    flex-direction: column;
    align-items: center;

    z-index: 11000;
}

/* ZONE SCROLLABLE INTERNE */
#carto-controls .carto-controls-scroll {
    flex: 1 1 auto;
    width: 100%;

    overflow-y: auto;
    overflow-x: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    scrollbar-width: none;
}

#carto-controls .carto-controls-scroll::-webkit-scrollbar {
    display: none;
}

/* EMPÊCHE LA COMPRESSION DES BOUTONS */
#carto-controls .carto-controls-scroll>* {
    flex: 0 0 auto;
}

/* =========================================================
   SCROLL INDICATORS
   ========================================================= */

#carto-controls .carto-scroll-indicator {
    width: 42px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.65);
    border-radius: 14px;
    color: #fff;

    flex: 0 0 auto;
    z-index: 11010;
}

/* FLÈCHE HAUTE */
#carto-controls .carto-scroll-indicator.top {
    margin-bottom: 6px;
}

/* FLÈCHE BASSE */
#carto-controls .carto-scroll-indicator.bottom {
    margin-top: 6px;
}

/* =========================================================
   UI TOGGLE — QUAND L’UI EST CACHÉE
   (CORRECTION DE TON BUG)
   ========================================================= */

body.pref-hide-right-rail #carto-controls {
    display: none !important;
}

/* =========================================================
   SCROLL INDICATORS — FINAL BEHAVIOR (DATA-SCROLL DRIVEN)
   ========================================================= */

/* Par défaut : cachées */
#carto-controls .carto-scroll-indicator {
    display: none !important;
}

/* Afficher les deux */
#carto-controls[data-scroll="both"] .carto-scroll-indicator {
    display: flex !important;
}

/* Seulement flèche haute (quand on peut remonter) */
#carto-controls[data-scroll="top"] .carto-scroll-indicator.top {
    display: flex !important;
}

#carto-controls[data-scroll="top"] .carto-scroll-indicator.bottom {
    display: none !important;
}

/* Seulement flèche basse (quand on peut descendre) */
#carto-controls[data-scroll="bottom"] .carto-scroll-indicator.bottom {
    display: flex !important;
}

#carto-controls[data-scroll="bottom"] .carto-scroll-indicator.top {
    display: none !important;
}

/* Aucune flèche */
#carto-controls[data-scroll="none"] .carto-scroll-indicator {
    display: none !important;
}

/* UI OFF => rien ne doit rester */
body.pref-hide-right-rail #carto-controls {
    display: none !important;
}

/* =========================================================
   FIX TOOLTIP — RIGHT RAIL + SCROLL
   (chirurgical, sans casser le scroll)
   ========================================================= */

/* 1. Le bouton devient la référence de position */
.carto-control-btn {
    position: relative;
    overflow: visible;
    /* autorise la sortie du tooltip */
}

/* 2. Tooltip au-dessus du rail scrollé */
.carto-control-btn[data-tip]::after {
    z-index: 12000;
    /* au-dessus de #carto-controls */
}

/* 3. Sécurité : hover réel même dans un conteneur scroll */
#carto-controls .carto-control-btn:hover::after {
    opacity: 1;
}

/* =========================================================
   TOOLTIP — UNIFICATION RIGHT RAIL
   Tous les boutons avec data-tip doivent afficher une infobulle
   ========================================================= */

/* Tous les boutons du rail droit deviennent des ancres tooltip */
#carto-controls [data-tip] {
    position: relative;
    overflow: visible;
}

/* Tooltip commun */
#carto-controls [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: 50%;
    right: 110%;
    transform: translateY(-50%);

    background: rgba(20, 20, 20, 0.85);
    color: #fff;
    font-size: 12px;
    line-height: 1.35;

    padding: 8px 10px;
    border-radius: 10px;
    white-space: nowrap;

    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, .45);

    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;

    z-index: 12000;
}

/* Affichage au survol */
#carto-controls [data-tip]:hover::after {
    opacity: 1;
}

/* =========================================================
   TOOLTIP — GLOBAL UNIFICATION (data-tip + title)
   Fix: works even when baselayers menu is portaled into <body>
   ========================================================= */

/* 1) Tous éléments tooltippables deviennent ancres */
#carto-controls [data-tip],
#carto-controls [title],
.baselayers-content [data-tip],
.baselayers-content [title],
.leaflet-control-zoom a[title] {
    position: relative;
    overflow: visible;
}

/* 2) Tooltip depuis data-tip */
#carto-controls [data-tip]::after,
.baselayers-content [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: 50%;
    right: 110%;
    transform: translateY(-50%);

    background: rgba(20, 20, 20, 0.85);
    color: #fff;
    font-size: 12px;
    line-height: 1.35;

    padding: 8px 10px;
    border-radius: 10px;
    white-space: nowrap;

    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, .45);

    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 12000;
}

#carto-controls [data-tip]:hover::after,
.baselayers-content [data-tip]:hover::after {
    opacity: 1;
}

/* 3) Tooltip depuis title (Leaflet +/-, certains boutons/items) */
#carto-controls [title]::after,
.baselayers-content [title]::after,
.leaflet-control-zoom a[title]::after {
    content: attr(title);
    position: absolute;
    top: 50%;
    right: 110%;
    transform: translateY(-50%);

    background: rgba(20, 20, 20, 0.85);
    color: #fff;
    font-size: 12px;
    line-height: 1.35;

    padding: 8px 10px;
    border-radius: 10px;
    white-space: nowrap;

    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, .45);

    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 12000;
}

/* Important: on évite les doubles tooltips natifs du navigateur */
#carto-controls [title],
.baselayers-content [title],
.leaflet-control-zoom a[title] {
    /* si tu veux garder les tooltips natifs, supprime ces 2 lignes */
    -webkit-tap-highlight-color: transparent;
}

#carto-controls [title]:hover::after,
.baselayers-content [title]:hover::after,
.leaflet-control-zoom a[title]:hover::after {
    opacity: 1;
}

/* 4) Leaflet zoom: placer tooltip à gauche (le contrôle est souvent à droite) */
.leaflet-control-zoom a[title]::after {
    right: 110%;
}

/* =========================================================
   TOOLTIP FIX — CHILD ELEMENTS BLOCK HOVER
   Cause: icons/spans capture pointer instead of parent
   ========================================================= */

/* Tous les enfants ne doivent PAS capter le hover */
#carto-controls [data-tip]>*,
.baselayers-content [data-tip]>* {
    pointer-events: none;
}

/* Sécurité Leaflet (+ / -) */
.leaflet-control-zoom a>* {
    pointer-events: none;
}

/* DEBUG TOOLTIP — TEMPORAIRE (à retirer après test) */
#carto-controls [data-tip]::after,
.baselayers-content [data-tip]::after {
    opacity: 1 !important;
    visibility: visible !important;
}