/**
 * NOSK8 Spots — UX (toolbar, filtres, favoris, météo, bottom-sheet mobile, toggle vue)
 * Palette : 60% #fff / 30% #1a2744 / 10% #111 ; hover #2a3a5c ; JAMAIS vert.
 */

/* ── Navbar zone géographie : continents + pays en tête du globe ─────────── */
.n8-spots-col-map { display:flex !important; flex-direction:column !important; }
.n8-spots-col-map > .n8-spots-globe-wrap { flex:1 !important; height:auto !important; min-height:0 !important; }

.n8-globe-continents {
    display:flex; align-items:center; gap:4px;
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
}
.n8-globe-continents::-webkit-scrollbar { display:none; }
.n8-globe-continent {
    padding:4px 10px;
    font-family:"Inter",sans-serif; font-size:10px; font-weight:600;
    letter-spacing:0.8px; text-transform:uppercase;
    color:rgba(255,255,255,0.55);
    background:transparent;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:4px; cursor:pointer; white-space:nowrap;
    transition:background 0.16s, color 0.16s, border-color 0.16s;
}
.n8-globe-continent:hover { color:rgba(255,255,255,0.85); border-color:rgba(255,255,255,0.25); background:rgba(255,255,255,0.06); }
.n8-globe-continent.active { background:#1a2744; color:#fff; border-color:rgba(255,255,255,0.28); }

.n8-globe-countries {
    display:none; align-items:center; gap:4px;
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    padding-top:2px;
}
.n8-globe-countries::-webkit-scrollbar { display:none; }
.n8-globe-countries.is-open { display:flex; }
.n8-globe-country {
    padding:3px 9px;
    font-family:"Inter",sans-serif; font-size:10px; font-weight:500;
    color:rgba(255,255,255,0.5);
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.09);
    border-radius:999px; cursor:pointer; white-space:nowrap;
    transition:background 0.14s, color 0.14s;
}
.n8-globe-country:hover { color:rgba(255,255,255,0.85); background:rgba(255,255,255,0.09); }
.n8-globe-country.active { background:#1a2744; color:#fff; border-color:rgba(255,255,255,0.25); }
.n8-globe-country__cnt { font-size:9px; opacity:0.55; margin-left:3px; }
.n8-globe-continent__cnt { font-size:9px; opacity:0.6; margin-left:4px; font-family:"Space Mono",monospace; }

.n8-tb-badge--total {
    background:#ff6464; color:#fff;
    font-family:"Space Mono",monospace; font-size:9.5px; font-weight:700;
    padding:2px 6px; border-radius:10px;
    min-width:16px; text-align:center; line-height:1;
}

/* Search inline dans la toolbar */
.n8-tb-search {
    flex:1 1 200px; min-width:140px; max-width:280px;
    position:relative;
    display:flex; align-items:center;
    background:rgba(26,39,68,0.88);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:8px;
    padding:0 10px;
    height:34px;
    color-scheme:dark;
    transition:border-color 0.2s, background 0.2s;
}
.n8-tb-search:focus-within {
    background:rgba(26,39,68,0.95);
    border-color:rgba(255,255,255,0.35);
}
.n8-tb-search__ic {
    flex-shrink:0;
    color:rgba(255,255,255,0.5);
}
.n8-tb-search__in {
    flex:1;
    background:transparent; border:none; outline:none;
    color:#fff !important;
    caret-color:#fff;
    font-family:"Inter",sans-serif; font-size:12.5px;
    padding:0 8px;
    min-width:0;
}
.n8-tb-search__in::placeholder { color:rgba(255,255,255,0.5) !important; }
.n8-tb-search__in:-webkit-autofill,
.n8-tb-search__in:-webkit-autofill:focus { -webkit-text-fill-color:#fff !important; }
/* Filtre recherche : carte masquée si ne correspond pas */
.n8-vcard.is-search-filtered { display:none; }
.n8-tb-search .n8-spot-ac {
    top:calc(100% + 4px); left:0; right:0;
    position:absolute;
}

/* ── Autocomplétion dropdown ─────────────────────────────────────────────── */
.n8-spot-ac {
    display:none;
    background:rgba(10,15,26,0.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.13);
    border-radius:10px; padding:4px;
    box-shadow:0 12px 32px rgba(0,0,0,0.6);
    z-index:600;
    max-height:300px; overflow-y:auto;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.12) transparent;
}
.n8-spot-ac.open { display:block; }
.n8-ac-header {
    padding:6px 10px 4px;
    font-family:"Space Mono",monospace; font-size:8.5px; font-weight:700;
    letter-spacing:1.5px; text-transform:uppercase;
    color:rgba(255,255,255,0.35);
}
.n8-ac-item {
    display:flex; flex-direction:column; gap:2px;
    width:100%; padding:8px 10px; text-align:left;
    background:transparent;
    border:1px solid transparent; border-radius:7px;
    cursor:pointer; color:#fff;
    transition:background 0.12s, border-color 0.12s;
}
.n8-ac-item:hover,
.n8-ac-item:focus { background:rgba(26,39,68,0.8); border-color:rgba(255,255,255,0.12); outline:none; }
.n8-ac-name {
    font-family:"Space Mono",monospace; font-size:11.5px; font-weight:700;
    color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    display:flex; align-items:center; gap:4px;
}
.n8-ac-iconic { color:#ffd23a; font-size:9px; flex-shrink:0; }
.n8-ac-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
.n8-ac-type {
    font-family:"Space Mono",monospace; font-size:8px; font-weight:700;
    color:rgba(255,255,255,0.5);
    background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1);
    border-radius:3px; padding:1px 5px;
    text-transform:uppercase; letter-spacing:0.5px; flex-shrink:0;
}
.n8-ac-place {
    font-family:"Inter",sans-serif; font-size:11px;
    color:rgba(255,255,255,0.5);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.n8-ac-dist {
    font-family:"Space Mono",monospace; font-size:10px; font-weight:700;
    color:rgba(255,255,255,0.7); margin-left:auto; white-space:nowrap; flex-shrink:0;
}
.n8-ac-empty {
    padding:12px 10px; font-family:"Inter",sans-serif; font-size:12px;
    color:rgba(255,255,255,0.4); text-align:center;
}

/* ── Section viewport-tight (desktop : tout tient dans 100dvh) ─────────── */
@media (min-width:1025px) {
    .n8-spots-section {
        min-height:100dvh;
        padding:40px 0 0 !important;
        display:flex; flex-direction:column;
    }
    .n8-spots-section > .n8-spots-header {
        flex-shrink:0;
        margin-bottom:14px !important;
    }
    .n8-spots-section > .n8-spots-header h2 {
        font-size:clamp(28px, 3.5vw, 44px) !important;
        margin:4px 0 1cm !important;
    }
    .n8-spots-section > .n8-spots-header .n8-spots-eyebrow {
        margin-bottom:6px !important;
        padding:4px 11px; font-size:10.5px;
    }
    .n8-spots-section > .n8-spots-split {
        flex:1 1 auto !important;
        /* Fix: margin:0 auto sur un flex-item column collapse la largeur au contenu.
           On force une largeur explicite pour que col-map puisse s'étirer. */
        width:calc(100% - 48px) !important;
        align-self:center !important;
        height:auto !important;
        max-height:calc(100dvh - 180px);
        min-height:440px;
        margin-bottom:20px;
        padding-top:22px !important;
        position:relative;
    }
    /* CTA en dehors du viewport (scroll naturel) */
    .n8-spots-section > .n8-spots-cta-wrap {
        flex-shrink:0;
        margin-top:20px !important;
    }
    /* Force révèle desktop (évite écran noir si IntersectionObserver lent) */
    .n8-spots-section [data-reveal] {
        opacity:1 !important;
        transform:none !important;
    }
}
.n8-tb-badge {
    background:#fff; color:#1a2744; font-size:10px; font-weight:700;
    padding:2px 7px; border-radius:10px;
    min-width:18px; text-align:center;
}
@keyframes n8-spin { to { transform:rotate(360deg); } }

/* ── Placeholder panel détail (face_flagged ou pas d'image) ─────────────────── */
.n8-spot-panel__media.is-placeholder {
    background:
        repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,0.035) 14px 15px),
        linear-gradient(135deg, #1a2744 0%, #2a3a5c 60%, #1a2744 100%);
    min-height:260px;
    position:relative;
}
.n8-spot-panel__media.is-placeholder::after {
    content:'SPOT NOSK8';
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-family:"Space Mono",monospace; font-size:12px; font-weight:700;
    letter-spacing:3px; color:rgba(255,255,255,0.35);
}

/* Placeholder tooltip hover (même DA) */
.n8-hover-tt__img--ph {
    background:
        repeating-linear-gradient(45deg, transparent 0 10px, rgba(255,255,255,0.04) 10px 11px),
        linear-gradient(135deg, #1a2744 0%, #2a3a5c 100%);
    height:140px; position:relative;
}
.n8-hover-tt__img--ph::after {
    content:'SPOT'; position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-family:"Space Mono",monospace; font-size:10px; font-weight:700;
    letter-spacing:2.5px; color:rgba(255,255,255,0.3);
}

/* ── Placeholder card (spot face-flagged) : gradient bleu nuit + icône skate ── */
.n8-vcard__img--placeholder {
    background:linear-gradient(135deg, #1a2744 0%, #2a3a5c 60%, #1a2744 100%);
    position:relative; overflow:hidden;
}
.n8-vcard__img--placeholder::before {
    content:''; position:absolute; inset:0;
    background-image:
        repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,0.03) 12px 13px);
    pointer-events:none;
}
.n8-vcard__ph {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover;
}

/* ── Cards : bouton favori ⭐ + badge distance ─────────────────────────────── */
.n8-vcard { position:relative; }
.n8-vcard.is-filtered-out { display:none; }

.n8-vcard__fav {
    position:absolute; top:8px; right:8px; z-index:5;
    width:32px; height:32px;
    background:rgba(0,0,0,0.55); color:rgba(255,255,255,0.85);
    border:none; border-radius:8px;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:background 0.18s, color 0.18s, transform 0.18s;
    backdrop-filter:blur(6px);
}
.n8-vcard__fav:hover { background:rgba(0,0,0,0.75); color:#fff; transform:scale(1.08); }
.n8-vcard__fav:active { transform:scale(0.95); }
.n8-vcard__fav.is-fav { color:var(--n8-fav,#ff5560); background:rgba(0,0,0,0.7); }
.n8-vcard__fav.is-fav svg { fill:var(--n8-fav,#ff5560); stroke:var(--n8-fav-deep,#e6404b); }

.n8-vcard__dist {
    position:absolute; top:8px; left:8px; z-index:5;
    background:rgba(255,255,255,0.96); color:#1a2744;
    padding:4px 9px; border-radius:12px;
    font-family:"Space Mono",monospace; font-size:10px; font-weight:700;
    letter-spacing:0.5px;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
}

.n8-vcard__cta { margin-top:8px; }
.n8-vcard__open {
    background:transparent; border:none;
    color:rgba(255,255,255,0.7); cursor:pointer;
    padding:0; font-family:"Space Mono",monospace;
    font-size:10px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase;
    transition:color 0.18s;
}
.n8-vcard__open:hover { color:#fff; }

/* ── Panel détail : météo + tags pratiques + bouton favori ─────────────────── */
.n8-spot-panel__weather {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
    border-radius:10px; padding:10px 14px; margin-bottom:14px;
}
.n8-spot-panel__weather-icon { font-size:22px; line-height:1; }
.n8-spot-panel__weather-temp {
    font-family:"Bebas Neue",sans-serif; font-size:22px; letter-spacing:1px;
    color:#fff;
}
.n8-spot-panel__weather-desc {
    font-family:"Inter",sans-serif; font-size:13px; color:rgba(255,255,255,0.75);
}
.n8-spot-panel__weather-next {
    margin-left:auto;
    font-family:"Space Mono",monospace; font-size:10px;
    letter-spacing:0.5px; color:#ffd23a;
}

.n8-spot-panel__practical {
    display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;
}
.n8-practical-tag {
    display:inline-flex; align-items:center; gap:5px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:6px; padding:5px 10px;
    font-family:"Inter",sans-serif; font-size:11.5px; font-weight:500;
    color:rgba(255,255,255,0.9);
}
.n8-practical-tag__ic { font-size:13px; line-height:1; }
/* Invite « Active ta position » : pill cliquable, accent bleu nuit (jamais vert) */
.n8-practical-tag--cta {
    cursor:pointer; font-weight:600;
    background:rgba(74,111,165,0.18);
    border-color:rgba(120,160,220,0.45);
    color:#cfe0ff !important;
    transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.n8-practical-tag--cta:hover { background:rgba(74,111,165,0.34); border-color:rgba(150,185,235,0.7); transform:translateY(-1px); }
.n8-practical-tag--cta:active { transform:translateY(0); }

.n8-spot-panel__fav.is-fav {
    color:#ffd23a;
    border-color:rgba(255,210,58,0.3);
}

/* ── Google Maps embed dans le panel ─────────────────────────────────────── */
.n8-spot-panel__map {
    margin:16px 0;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:10px;
    overflow:hidden;
    background:rgba(10,15,26,0.4);
}
.n8-spot-panel__map-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 12px;
    background:rgba(26,39,68,0.5);
    border-bottom:1px solid rgba(255,255,255,0.08);
}
.n8-spot-panel__map-lbl {
    font-family:"Space Mono",monospace; font-size:10px; font-weight:700;
    letter-spacing:1.5px; text-transform:uppercase;
    color:rgba(255,255,255,0.75);
}
.n8-spot-panel__map-sv {
    display:inline-flex; align-items:center; gap:5px;
    font-family:"Space Mono",monospace; font-size:10px; font-weight:700;
    letter-spacing:1px; text-transform:uppercase;
    color:rgba(255,255,255,0.85);
    text-decoration:none;
    padding:4px 8px;
    border:1px solid rgba(255,255,255,0.18);
    border-radius:5px;
    transition:background 0.2s, border-color 0.2s, color 0.2s;
}
.n8-spot-panel__map-sv:hover {
    background:#2a3a5c; color:#fff;
    border-color:rgba(255,255,255,0.35);
}
.n8-spot-panel__map iframe {
    width:100%; height:260px;
    border:0; display:block;
    filter:grayscale(0) contrast(1.05);
}
@media (max-width:768px) {
    .n8-spot-panel__map iframe { height:220px; }
}

/* Sur les éléments cliquables (pins, boutons) : cursor pointer classique */
.n8-pin,
.n8-flatmap-controls,
.n8-globe-zoom,
.n8-spots-flatmap .leaflet-control,
#spotsGlobeContainer .n8-pin--on-globe {
    cursor: pointer !important;
}

/* ── Label "type de spot" affiché en bas de la minimap (ne masque plus la vue) ─ */
.n8-flatmap-feature-label {
    position:absolute;
    bottom:16px; left:50%; transform:translate(-50%, 12px);
    z-index:700;
    display:inline-flex; align-items:center; gap:10px;
    padding:8px 14px;
    background:rgba(10,15,26,0.92); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:999px;
    box-shadow:0 4px 16px rgba(0,0,0,0.45);
    font-family:"Space Mono",monospace;
    opacity:0; visibility:hidden;
    transition:opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.35s;
    pointer-events:none;
    max-width:calc(100% - 24px);
}
.n8-flatmap-feature-label.is-visible {
    opacity:1; visibility:visible;
    transform:translate(-50%, 0);
    transition:opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s;
}
.n8-flatmap-feature-label__icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px;
    background:#ffd23a;
    border-radius:50%;
    color:#1a2744;
    flex-shrink:0;
}
.n8-flatmap-feature-label__icon svg { display:block; }
.n8-flatmap-feature-label__txt {
    font-size:11px; font-weight:700; letter-spacing:2px;
    color:#ffd23a; text-transform:uppercase;
    flex-shrink:0;
}
.n8-flatmap-feature-label__name {
    font-family:"Inter",sans-serif;
    font-size:12px; font-weight:500;
    color:rgba(255,255,255,0.85);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:220px;
    padding-left:10px;
    border-left:1px solid rgba(255,255,255,0.15);
}
@media (max-width:768px) {
    .n8-flatmap-feature-label { padding:6px 10px; gap:7px; bottom:12px; max-width:calc(100% - 16px); }
    .n8-flatmap-feature-label__icon { width:20px; height:20px; }
    .n8-flatmap-feature-label__icon svg { width:13px; height:13px; }
    .n8-flatmap-feature-label__txt { font-size:10px; letter-spacing:1.5px; }
    .n8-flatmap-feature-label__name { font-size:11px; max-width:140px; padding-left:7px; }
}

/* ── Vue perspective / oblique 3D sur la minimap ─────────────────────────── */
/* Applique un tilt CSS sur les tuiles + markers, garde les contrôles à plat.
   Effet Sim-City / Google 45° : on voit "en biais vu de haut". */
.n8-spots-flatmap.is-perspective .leaflet-map-pane {
    transform:perspective(900px) rotateX(45deg);
    transform-origin:50% 75%;
    transition:transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.n8-spots-flatmap:not(.is-perspective) .leaflet-map-pane {
    transform:none;
    transition:transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Fade horizon lointain (haut de la carte en mode 3D) pour un effet de profondeur */
.n8-spots-flatmap.is-perspective::before {
    content:''; position:absolute; top:0; left:0; right:0; height:35%;
    background:linear-gradient(to bottom, rgba(14,21,33,0.5) 0%, transparent 100%);
    z-index:450; /* au-dessus des tuiles, sous les contrôles */
    pointer-events:none;
    transition:opacity 0.5s;
}
/* Les contrôles (boutons, label, markers pin) restent non-tiltés via leur z-index élevé */
.n8-flatmap-controls,
.n8-flatmap-feature-label,
.leaflet-control-container { z-index:700 !important; }

/* ── Marker "Vous êtes ici" (user position) + trait pointillé vers le spot ─── */
.n8-user-marker {
    background:none !important; border:none !important;
    pointer-events:none !important;
}
.n8-user-marker .n8-user-marker__dot {
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
    width:10px; height:10px; border-radius:50%;
    background:#fff;
    border:2px solid #1a2744;
    box-shadow:0 0 0 1.5px rgba(255,255,255,0.6), 0 0 10px rgba(255,255,255,0.5);
    z-index:2;
}
.n8-user-marker .n8-user-marker__ring {
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
    width:30px; height:30px; border-radius:50%;
    border:2px solid rgba(255,255,255,0.45);
    animation:n8-user-pulse 1.8s ease-out infinite;
}
/* Approximatif (IP geoloc) : dot plus petit, ring plus gros pour rendre le flou visible */
.n8-user-marker.is-approx .n8-user-marker__dot {
    width:8px; height:8px;
    opacity:0.85;
    background:#ffd23a;
    border-width:1.5px;
}
.n8-user-marker.is-approx .n8-user-marker__ring {
    width:46px; height:46px;
    border-style:dashed;
    border-color:rgba(255,210,58,0.4);
    animation-duration:2.4s;
}
.n8-user-arc.is-approx { opacity:0.7; }
@keyframes n8-user-pulse {
    0% { transform:translate(-50%, -50%) scale(0.3); opacity:0.9; }
    100% { transform:translate(-50%, -50%) scale(1.3); opacity:0; }
}

/* Polyline pointillée user → spot : drop shadow pour ressortir sur satellite */
.n8-user-arc {
    filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}

/* Pill "distance" au milieu du trait */
.n8-dist-pill {
    background:none !important; border:none !important;
    pointer-events:none !important;
    display:flex !important; align-items:center; justify-content:center;
}
.n8-dist-pill .n8-dist-pill__txt {
    display:inline-block;
    background:#1a2744;
    color:#fff;
    border:1.5px solid rgba(255,255,255,0.5);
    padding:3px 9px;
    border-radius:12px;
    font-family:"Space Mono",monospace;
    font-size:10px; font-weight:700;
    letter-spacing:1px;
    white-space:nowrap;
    box-shadow:0 3px 10px rgba(0,0,0,0.55), 0 0 12px rgba(255,255,255,0.15);
    text-transform:uppercase;
}

/* ── Markers minimap : pins avec icône type (park/street/bowl/diy), pulse hover ─ */
.n8-pin {
    background:none !important; border:none !important;
}
.n8-pin__core {
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
    display:inline-flex; align-items:center; justify-content:center;
    width:100%; height:100%;
}
.n8-pin__badge {
    position:relative; z-index:2;
    width:22px; height:22px;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(10,15,26,0.88);
    border:1.5px solid rgba(255,255,255,0.65);
    border-radius:50%;
    color:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,0.55);
    transition:background 0.25s cubic-bezier(0.16, 1, 0.3, 1),
               border-color 0.25s, color 0.25s,
               box-shadow 0.3s, transform 0.25s;
}
.n8-pin__svg { display:block; pointer-events:none; }
.n8-pin__ring {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%, -50%);
    width:22px; height:22px;
    border-radius:50%;
    background:transparent;
    border:1.5px solid rgba(255,210,58,0);
    opacity:0;
    pointer-events:none;
    z-index:1;
    transition:opacity 0.2s, width 0.35s, height 0.35s, border-color 0.3s;
}

/* Taille badge selon iconic (légère hiérarchie, reste compact à tous les zooms) */
.n8-pin[class*="iconic-1"] .n8-pin__badge { width:18px; height:18px; }
.n8-pin[class*="iconic-1"] .n8-pin__svg { width:11px; height:11px; }
.n8-pin[class*="iconic-2"] .n8-pin__badge { width:20px; height:20px; }
.n8-pin[class*="iconic-2"] .n8-pin__svg { width:12px; height:12px; }
.n8-pin[class*="iconic-3"] .n8-pin__badge { width:22px; height:22px; }
.n8-pin[class*="iconic-3"] .n8-pin__svg { width:13px; height:13px; }
.n8-pin[class*="iconic-4"] .n8-pin__badge {
    width:24px; height:24px;
    border-color:rgba(255,255,255,0.95);
    background:rgba(10,15,26,0.94);
}
.n8-pin[class*="iconic-4"] .n8-pin__svg { width:14px; height:14px; }
.n8-pin[class*="iconic-5"] .n8-pin__badge {
    width:26px; height:26px;
    background:#fff; color:#1a2744;
    border-color:#1a2744;
    box-shadow:0 0 0 2px rgba(26,39,68,0.45), 0 0 10px rgba(255,255,255,0.4), 0 2px 6px rgba(0,0,0,0.5);
}
.n8-pin[class*="iconic-5"] .n8-pin__svg { width:15px; height:15px; }

/* État hover : badge blanc + pulse ring + scale + glow */
.n8-pin.is-hovered { z-index:1000 !important; }
.n8-pin.is-hovered .n8-pin__badge {
    background:#fff !important;
    color:#1a2744 !important;
    border-color:#1a2744 !important;
    transform:scale(1.35);
    box-shadow:0 0 0 3px rgba(255,255,255,0.25),
               0 0 20px rgba(255,255,255,0.55),
               0 3px 12px rgba(0,0,0,0.55);
}
.n8-pin.is-hovered .n8-pin__ring {
    opacity:1;
    width:54px; height:54px;
    border-color:rgba(255,255,255,0.6);
    animation:n8-pin-pulse 1.2s ease-out infinite;
}
@keyframes n8-pin-pulse {
    0% { transform:translate(-50%, -50%) scale(0.45); opacity:0.85; border-width:2px; }
    100% { transform:translate(-50%, -50%) scale(1.4); opacity:0; border-width:1px; }
}

/* Quand un pin est hover, les autres s'éclipsent subtilement */
.n8-spots-flatmap.is-hovering-pin .n8-pin:not(.is-hovered) .n8-pin__badge {
    opacity:0.4;
    filter:saturate(0.4);
    transform:scale(0.85);
}

/* Spécifiques par type (couleur d'accent sur l'icône à l'intérieur du badge) */
.n8-pin--park .n8-pin__svg { color:#fff; }
.n8-pin--bowl .n8-pin__svg { color:#fff; }
.n8-pin--street .n8-pin__svg { color:#fff; }
.n8-pin--diy .n8-pin__svg { color:#ffd23a; } /* DIY = jaune NOSK8 accent */
.n8-pin--dot .n8-pin__svg { color:#fff; }
.n8-pin[class*="iconic-5"] .n8-pin__svg { color:#1a2744; } /* iconic 5 badge blanc inversé */

/* ── Pins sur le globe 3D (htmlElementsData) ─────────────────────────────── */
.n8-pin--on-globe {
    position:absolute;
    transform:translate(-50%, -50%);
    pointer-events:auto;
    /* Taille quasi-constante à tous les niveaux de zoom globe (filtrage par distance fait par globe.gl) */
}
.n8-pin--on-globe .n8-pin__badge {
    width:18px; height:18px;
    border-width:1px;
    background:rgba(10,15,26,0.88);
    border-color:rgba(255,255,255,0.7);
    box-shadow:0 2px 5px rgba(0,0,0,0.6);
}
.n8-pin--on-globe .n8-pin__svg { width:10px; height:10px; }

/* Iconic 5 sur globe : blanc inversé + halo permanent */
.n8-pin--on-globe.n8-pin--iconic-5 .n8-pin__badge {
    width:22px; height:22px;
    background:#fff; color:#1a2744;
    border-color:#1a2744;
    box-shadow:0 0 0 1.5px rgba(26,39,68,0.6), 0 0 8px rgba(255,255,255,0.5);
}
.n8-pin--on-globe.n8-pin--iconic-5 .n8-pin__svg { width:13px; height:13px; color:#1a2744; }
.n8-pin--on-globe.n8-pin--iconic-4 .n8-pin__badge {
    width:20px; height:20px;
    border-color:rgba(255,255,255,0.95);
}
.n8-pin--on-globe.n8-pin--iconic-4 .n8-pin__svg { width:11px; height:11px; }
.n8-pin--on-globe.n8-pin--iconic-1 .n8-pin__badge,
.n8-pin--on-globe.n8-pin--iconic-2 .n8-pin__badge { width:15px; height:15px; }
.n8-pin--on-globe.n8-pin--iconic-1 .n8-pin__svg,
.n8-pin--on-globe.n8-pin--iconic-2 .n8-pin__svg { width:8px; height:8px; }

/* Hover sur pin globe : badge blanc + pulse */
.n8-pin--on-globe.is-hovered { z-index:1500; }
.n8-pin--on-globe.is-hovered .n8-pin__badge {
    background:#fff !important;
    color:#1a2744 !important;
    border-color:#1a2744 !important;
    transform:scale(1.5);
    box-shadow:0 0 0 3px rgba(255,255,255,0.25),
               0 0 22px rgba(255,255,255,0.6),
               0 3px 12px rgba(0,0,0,0.6);
}
.n8-pin--on-globe.is-hovered .n8-pin__ring {
    opacity:1;
    width:42px; height:42px;
    border-color:rgba(255,255,255,0.65);
    animation:n8-pin-pulse 1.2s ease-out infinite;
}


/* Recherche dans la sidebar */
.n8-spots-search-wrap { padding:8px 12px 4px; flex-shrink:0; }
.n8-spots-search-wrap .n8-tb-search { max-width:100%; flex:1; width:100%; min-width:0; }

/* ── Bottom-sheet mobile : transforme le panel latéral en bottom-sheet ───── */
@media (max-width:768px) {
    /* Mobile : globe en haut, cards sous, split vertical */
    .n8-spots-col-map { width:100% !important; }
    .n8-spots-col-cards { width:100% !important; }

    /* Panel → bottom-sheet */
    .n8-spot-panel.is-open .n8-spot-panel__inner {
        position:fixed !important;
        bottom:0 !important; top:auto !important; left:0 !important; right:0 !important;
        width:100% !important; max-width:100% !important;
        height:86vh !important; max-height:86vh !important;
        border-radius:18px 18px 0 0 !important;
        transform:translateY(0) !important;
        overflow-y:auto;
        animation:n8-bs-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .n8-spot-panel.is-open .n8-spot-panel__inner::before {
        content:''; position:absolute; top:8px; left:50%;
        transform:translateX(-50%);
        width:42px; height:4px; border-radius:2px;
        background:rgba(255,255,255,0.25);
    }
    @keyframes n8-bs-in {
        from { transform:translateY(100%); }
        to { transform:translateY(0); }
    }
    .n8-spot-panel__actions {
        position:sticky; bottom:0;
        background:linear-gradient(to top, rgba(14,21,33,0.98) 70%, transparent);
        padding-top:12px; padding-bottom:12px;
        display:flex; flex-direction:column; gap:8px;
    }
    .n8-spot-panel__btn { width:100%; justify-content:center; }

    /* Meta pratique compacte */
    .n8-spot-panel__weather { padding:8px 10px; gap:8px; }
    .n8-spot-panel__weather-temp { font-size:18px; }
    .n8-spot-panel__weather-desc { font-size:11px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REFONTE MOBILE-FIRST COMPLÈTE — la section Spots doit claquer sur tous les
   devices. Globe 3D, split, toolbar : tout optimisé pour le tactile.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablette (769-1024px) : tout tient viewport avec split horizontal ───── */
@media (min-width:769px) and (max-width:1024px) {
    .n8-spots-section { padding:56px 0 0 !important; min-height:100dvh; display:flex; flex-direction:column; }
    .n8-spots-section > .n8-spots-header { margin-bottom:10px !important; }
    .n8-spots-section > .n8-spots-header h2 { font-size:30px !important; margin:4px 0 0.8cm !important; }
    .n8-spots-section > .n8-spots-split {
        flex:1 1 auto; flex-direction:row !important; height:auto !important;
        max-height:calc(100dvh - 200px); min-height:400px;
        margin-bottom:16px;
    }
    .n8-spots-col-cards { flex:0 0 35% !important; max-width:400px !important; min-width:260px !important; max-height:none !important; }
    .n8-spots-col-map { flex:1; height:auto !important; }
    .n8-tb-search { max-width:180px; }
}

/* ── Mobile (≤768px) : Globe en hero + cards en scroll vertical sous la map ── */
@media (max-width:768px) {
    .n8-spots-section {
        padding:28px 0 0 !important;
        min-height:auto;
    }
    /* Header ultra-compact : eyebrow + titre + stats inline */
    .n8-spots-section > .n8-spots-header {
        padding:0 16px !important;
        margin-bottom:12px !important;
    }
    .n8-spots-section > .n8-spots-header h2 {
        font-size:26px !important;
        margin:4px 0 14px !important;
        line-height:1.1;
    }
    .n8-spots-eyebrow { font-size:9.5px; letter-spacing:3px; }
    .n8-spots-eyebrow-rule { max-width:36px; }
    .n8-spots-header h2 { font-size:clamp(30px,8vw,48px) !important; }
    .n8-spots-meta .n8-spots-stat__num { font-size:32px; }
    .n8-spots-meta .n8-spots-stat__label { font-size:8px; letter-spacing:2px; }
    .n8-spots-stat__sep { height:26px; }

    /* ── Split mobile : map plein écran (320px) + cards en scroll sous ─────── */
    .n8-spots-section > .n8-spots-split {
        flex-direction:column !important;
        height:auto !important;
        padding:0 12px !important;
        gap:12px !important;
        margin-bottom:20px;
    }
    /* Globe container mobile : bien défini pour que Three.js render */
    .n8-spots-col-map {
        order:1;
        width:100% !important; max-width:100% !important;
        height:min(55dvh, 380px) !important;
        min-height:320px !important;
        border-radius:12px !important;
    }
    /* Cards mobile : RAIL horizontal swipable (David 2026-07-18) — la grille verticale
       de ~137 cartes rendait la page interminable. Tri par distance = les proches arrivent
       en premier dans le rail ; la carte suivante dépasse du bord = indice de swipe. */
    .n8-spots-col-cards {
        order:2;
        width:100% !important; max-width:100% !important;
        max-height:none !important;
        padding:0 !important;
        background:transparent !important;
        border:none !important;
    }
    /* Sélecteur #spots + classes : doit battre `#spots .n8-spots-vcarousel{flex-direction:column}`
       (nosk8-homepage.css ~1819, règle desktop) quelle que soit l'ordre de chargement des CSS. */
    #spots .n8-spots-col-cards .n8-spots-vcarousel {
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        scroll-snap-type:x mandatory;
        scroll-padding:0 12px;
        gap:12px !important;
        margin:0 -12px;
        padding:4px 12px 12px !important;
        max-height:none !important;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }
    #spots .n8-spots-col-cards .n8-spots-vcarousel::-webkit-scrollbar { display:none; }
    /* Carte compacte verticale pour le rail — les sélecteurs #spots .n8-spots-col-cards
       battent le bloc « FORCE apparence maquette » de nosk8-homepage.css (#spots .n8-vcard
       en ligne 78px+actions), qui reste la référence DESKTOP. */
    #spots .n8-spots-col-cards .n8-vcard {
        /* min-width:0 : une image en échec ne doit pas dilater la carte (leçon du rail articles) */
        display:flex !important;
        flex-direction:column !important;
        flex:0 0 min(46vw,190px) !important;
        min-width:0 !important;
        scroll-snap-align:start;
        width:auto !important; max-width:none !important;
        height:auto !important;
        align-self:stretch;
        margin:0 !important;
        padding:0 0 10px !important;
        border:1px solid rgba(255,255,255,.08) !important;
        border-radius:10px !important;
        background:rgba(255,255,255,.03) !important;
        overflow:hidden;
    }
    #spots .n8-spots-col-cards .n8-vcard__img { width:100% !important; height:100px !important; aspect-ratio:auto !important; border-radius:0 !important; margin:0 !important; }
    #spots .n8-spots-col-cards .n8-vcard__info { padding:8px 10px 0 !important; }
    #spots .n8-spots-col-cards .n8-vcard__name { font-size:13.5px !important; line-height:1.2 !important; }
    #spots .n8-spots-col-cards .n8-vcard__city { font-size:10px !important; margin-top:2px !important; }
    #spots .n8-spots-col-cards .n8-vcard__row { margin:6px 0 0 !important; }
    #spots .n8-spots-col-cards .n8-vcard__type { font-size:8.5px !important; padding:2px 5px !important; }
    /* Full card cliquable sur mobile : « Y aller »/Partager vivent dans la fiche spot */
    #spots .n8-spots-col-cards .n8-vcard__cta { display:none !important; }
    /* Zone de tap ≥ 34px (la maquette desktop la réduit à 26px — trop petit au doigt) */
    #spots .n8-spots-col-cards .n8-vcard__fav { top:8px !important; left:8px !important; right:auto !important; width:34px !important; height:34px !important; }
    /* Pastille distance : petit badge en haut à droite de la photo (le favori occupe la gauche) */
    #spots .n8-spots-col-cards .n8-vcard__dist:not([hidden]) { top:8px !important; right:8px !important; left:auto !important; bottom:auto !important; }
    /* Empty state (recherche/filtres sans résultat) : occupe la largeur visible du rail */
    .n8-spots-empty { flex:0 0 calc(100% - 24px); }
    .n8-spots-empty[hidden] { display:none !important; }

    /* Reveal animation : assure opacity:1 sur .n8-spots-split même sans scroll trigger (fix globe mobile) */
    .n8-spots-section .n8-spots-split[data-reveal] { opacity:1 !important; transform:none !important; }
    .n8-spots-section .n8-spots-col-map[data-reveal] { opacity:1 !important; transform:none !important; }

    /* CTA final compact */
    .n8-spots-cta-wrap { padding:0 16px; margin-top:16px; }
    .n8-spots-cta-box { padding:20px 16px !important; }
    .n8-spots-cta-title { font-size:17px !important; }
    .n8-spots-cta-sub { font-size:12px !important; }
}

/* ── Smartphone étroit (≤380px) : extra-compact ──────────────────────────── */
@media (max-width:380px) {
    .n8-spots-section > .n8-spots-header h2 { font-size:22px !important; }
    /* Le rail horizontal des cards s'applique aussi ici (voir ≤768px) — cartes un peu plus larges */
    .n8-vcard { flex-basis:min(60vw,190px) !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Col-cards TRANSFORMABLE : liste par défaut → minimap au spot sélectionné
   La minimap (flatmap Leaflet) est maintenant ENFANT de .n8-spots-col-cards
   et s'agrandit pour remplacer visuellement la liste.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Panel spot embedded dans col-cards (overlay sur la liste, pas de drawer fixe) ─────── */
.n8-spots-col-cards > .n8-spot-panel {
    position:absolute !important;
    inset:0 !important;
    border-radius:14px;
    overflow:hidden;
    pointer-events:none;
    visibility:hidden;
    z-index:500;
    transition:visibility 0s 0.3s;
}
.n8-spots-col-cards > .n8-spot-panel.is-open {
    pointer-events:auto;
    visibility:visible;
    transition:visibility 0s 0s;
}
.n8-spots-col-cards > .n8-spot-panel .n8-spot-panel__backdrop { display:none !important; }
.n8-spots-col-cards > .n8-spot-panel .n8-spot-panel__inner {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    transform:translateY(10px) !important;
    opacity:0;
    box-shadow:none !important;
    border-radius:14px;
    /* Force fond sombre + tout le texte blanc — évite héritage couleur thème parent */
    background:#0e1521 !important;
    color:#fff !important;
    transition:transform 0.32s cubic-bezier(0.16,1,0.3,1), opacity 0.28s ease;
}
/* Garantit la lisibilité de tous les éléments texte dans le panel sidebar */
.n8-spots-col-cards > .n8-spot-panel .n8-spot-panel__title { color:#fff !important; }
.n8-spots-col-cards > .n8-spot-panel .n8-spot-panel__place { color:rgba(255,255,255,0.55) !important; }
.n8-spots-col-cards > .n8-spot-panel .n8-spot-panel__desc { color:rgba(255,255,255,0.82) !important; }
.n8-spots-col-cards > .n8-spot-panel .n8-spot-panel__status-txt { color:#fff !important; }
.n8-spots-col-cards > .n8-spot-panel .n8-spot-panel__map-lbl { color:rgba(255,255,255,0.75) !important; }
.n8-spots-col-cards > .n8-spot-panel .n8-spot-panel__map-sv { color:rgba(255,255,255,0.85) !important; }
.n8-spots-col-cards > .n8-spot-panel .n8-spot-panel__badge--type { color:#fff !important; }
.n8-spots-col-cards > .n8-spot-panel .n8-spot-panel__badge--diff { color:rgba(255,255,255,0.85) !important; }
.n8-spots-col-cards > .n8-spot-panel .n8-spot-panel__badge--note { color:#0a0f1a !important; }
.n8-spots-col-cards > .n8-spot-panel .n8-practical-tag { color:rgba(255,255,255,0.9) !important; }
.n8-spots-col-cards > .n8-spot-panel .n8-spot-panel__weather-temp { color:#fff !important; }
.n8-spots-col-cards > .n8-spot-panel .n8-spot-panel__weather-desc { color:rgba(255,255,255,0.75) !important; }
.n8-spots-col-cards > .n8-spot-panel .n8-spot-panel__btn--ghost { color:rgba(255,255,255,0.65) !important; }
.n8-spots-col-cards > .n8-spot-panel.is-open .n8-spot-panel__inner {
    transform:translateY(0) !important;
    opacity:1;
}
.n8-spots-col-cards > .n8-spot-panel .n8-spot-panel__body {
    padding:18px 20px 26px !important;
}
.n8-spots-col-cards > .n8-spot-panel .n8-spot-panel__close {
    top:10px !important; right:10px !important;
    width:36px !important; height:36px !important;
}
/* Liste masquée quand panel ouvert */
.n8-spots-col-cards.is-panel-open > .n8-spots-col-title,
.n8-spots-col-cards.is-panel-open > .n8-spots-vcarousel {
    opacity:0; pointer-events:none;
    transition:opacity 0.2s ease;
}
.n8-spots-col-cards > .n8-spots-col-title,
.n8-spots-col-cards > .n8-spots-vcarousel { transition:opacity 0.32s ease; }


/* ── Pill distance dans le tooltip hover (user → spot) ───────────────────── */
.n8-hover-tt__dist {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.22);
    color:#fff;
    padding:5px 10px;
    border-radius:999px;
    font-family:"Space Mono", monospace;
    font-size:10.5px; font-weight:700;
    letter-spacing:1px;
    margin:10px 0 8px;
    text-transform:uppercase;
    box-shadow:0 0 10px rgba(255,255,255,0.08);
    align-self:flex-start;
}
.n8-hover-tt__dist svg { flex-shrink:0; }

/* ── Marqueur "Ici" sur le globe 3D (position utilisateur) ─────────────── */
.n8-user-globe-pin { pointer-events:none; }
.n8-ugp__dot {
    width:9px; height:9px; border-radius:50%;
    background:#fff;
    border:2px solid #1a2744;
    box-shadow:0 0 0 2px rgba(255,255,255,0.35), 0 0 12px rgba(255,255,255,0.45);
    animation:n8-ugp-pulse 2.2s ease-in-out infinite;
}
@keyframes n8-ugp-pulse {
    0%, 100% { box-shadow:0 0 0 2px rgba(255,255,255,0.4), 0 0 12px rgba(255,255,255,0.4); }
    50%       { box-shadow:0 0 0 5px rgba(255,255,255,0.15), 0 0 20px rgba(255,255,255,0.25); }
}
.n8-ugp__label {
    font-family:"Space Mono",monospace; font-size:7px; font-weight:700;
    letter-spacing:1px; text-transform:uppercase;
    color:rgba(255,255,255,0.85);
    background:rgba(10,15,26,0.8);
    border:1px solid rgba(255,255,255,0.18);
    padding:2px 5px; border-radius:3px;
    white-space:nowrap;
    backdrop-filter:blur(4px);
}

/* ── Barre de recherche avec boutons action (loupe + géoloc) ─────────────── */
.n8-tb-search--actions {
    padding:0 72px 0 12px;
    position:relative; overflow:visible;
}
.n8-tb-search--actions .n8-tb-search__in {
    padding:0; width:100%; color:#fff !important;
}
/* Géoloc : état approximatif (IP) distinct de l'état GPS précis */
.n8-search-geo.is-approximate { border-style:dashed; opacity:0.85; }
.n8-search-action {
    position:absolute; top:50%; transform:translateY(-50%);
    width:30px; height:30px;
    display:flex; align-items:center; justify-content:center;
    background:#0a0f1a; border:1.5px solid rgba(255,255,255,0.22);
    cursor:pointer; color:#fff;
    border-radius:8px;
    transition:background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
    flex-shrink:0;
}
.n8-search-submit { right:38px; }
.n8-search-geo { right:4px; }
.n8-search-action:hover {
    background:#1a2744; border-color:rgba(255,255,255,0.5);
    transform:translateY(-50%) scale(1.08);
    box-shadow:0 2px 10px rgba(0,0,0,0.45);
}
.n8-search-action:active { transform:translateY(-50%) scale(0.94); }
.n8-search-geo.is-active { background:#1a2744; border-color:rgba(255,255,255,0.45); color:#fff; }
.n8-search-geo.is-loading { opacity:0.6; pointer-events:none; animation:n8-spin-geo 1s linear infinite; }
.n8-search-geo.is-error { background:#2a0f0f; border-color:rgba(255,100,100,0.4); color:#ff9090; }
@keyframes n8-spin-geo { to { transform:translateY(-50%) rotate(360deg); } }
@keyframes n8-spin { to { transform:translateY(-50%) rotate(360deg); } }

/* ── Filtres sidebar : barre dropdown horizontale ──────────────────────────── */
.n8-sf-bar {
    container-type:inline-size;
    display:flex; flex-direction:row; align-items:center; gap:3px;
    padding:8px 10px 6px;
    border-bottom:1px solid rgba(255,255,255,0.07);
    margin-bottom:8px;
}
.n8-sf-drop-wrap { position:relative; flex:1 1 0; min-width:0; }
.n8-sf-drop-btn {
    width:100%;
    display:inline-flex; align-items:center; justify-content:center; gap:3px;
    padding:5px 5px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:7px; cursor:pointer;
    color:#fff;
    font-family:"Space Mono",monospace; font-size:9.5px; font-weight:700;
    letter-spacing:0.3px; text-transform:uppercase;
    transition:background 0.14s, border-color 0.14s;
    overflow:hidden;
    white-space:nowrap;
}
.n8-sf-drop-btn:hover,
.n8-sf-drop-wrap.is-open .n8-sf-drop-btn {
    background:rgba(255,255,255,0.09); color:#fff; border-color:rgba(255,255,255,0.2);
}
.n8-sf-drop-btn.has-active { background:#1a2744; color:#fff; border-color:rgba(255,255,255,0.28); }
.n8-sf-lbl { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.n8-sf-cnt {
    flex-shrink:0;
    background:#ff6464; color:#fff;
    font-family:"Space Mono",monospace; font-size:8px; font-weight:700;
    padding:1px 4px; border-radius:8px;
    min-width:14px; text-align:center; line-height:1.4;
}
.n8-sf-chev {
    flex-shrink:0; opacity:0.4;
    transition:transform 0.18s, opacity 0.18s;
}
.n8-sf-drop-wrap.is-open .n8-sf-chev { transform:rotate(180deg); opacity:1; }
/* Menu déroulant */
.n8-sf-menu {
    display:none; flex-direction:column; gap:1px;
    position:absolute; top:calc(100% + 5px); left:0;
    min-width:150px;
    background:rgba(10,15,26,0.97); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.13);
    border-radius:10px; padding:5px;
    box-shadow:0 10px 28px rgba(0,0,0,0.55);
    z-index:500;
}
.n8-sf-menu--right { left:auto; right:0; }
.n8-sf-drop-wrap.is-open .n8-sf-menu { display:flex; }
.n8-sf-pill {
    padding:7px 10px; width:100%; text-align:left;
    font-family:"Inter",sans-serif; font-size:12px; font-weight:500;
    color:rgba(255,255,255,0.75);
    background:transparent;
    border:1px solid transparent;
    border-radius:6px; cursor:pointer; white-space:nowrap;
    transition:background 0.12s, color 0.12s, border-color 0.12s;
}
.n8-sf-pill:hover { background:rgba(255,255,255,0.09); color:#fff; }
.n8-sf-pill.is-active { background:#1a2744; color:#fff; border-color:rgba(255,255,255,0.22); }
/* Reset */
.n8-sf-reset {
    flex-shrink:0;
    display:none; align-items:center; gap:4px;
    padding:5px 7px;
    color:#ffb8b8; background:rgba(255,90,90,0.1);
    border:1px solid rgba(255,90,90,0.22);
    border-radius:6px; cursor:pointer;
    transition:background 0.14s;
}
.n8-sf-reset:not([hidden]) { display:inline-flex; }
.n8-sf-reset:hover { background:rgba(255,90,90,0.2); }
/* Icon-only sur sidebar très étroite */
@container (max-width: 210px) {
    .n8-sf-lbl { display:none; }
    .n8-sf-drop-btn { justify-content:center; gap:2px; }
}

/* ── Sélecteur de zone globe (bouton globe intégré au zoomBox, panel à droite) ─ */
/* Filet défensif : si un ancien HTML caché contient encore l'ancien bouton standalone, on le masque */
.n8-gz-btn { display:none !important; }

.n8-globe-zone-wrap {
    position:absolute; left:14px; top:14px; z-index:500;
    display:flex; flex-direction:column; align-items:flex-start;
}
/* Le zoomBox est enfant du wrapper → position static (le wrapper gère déjà la position) */
.n8-globe-zone-wrap > .n8-globe-zoom {
    position:static !important;
    top:auto !important; left:auto !important;
}
/* Bouton planet actif quand le panel est ouvert */
.n8-globe-zone-wrap.is-open .n8-globe-zoom__btn--planet {
    color:#fff; background:rgba(255,255,255,0.15);
}
.n8-gz-panel {
    display:none; flex-direction:column; gap:1px;
    position:absolute; left:calc(100% + 8px); top:0;
    min-width:190px; max-height:65vh; overflow-y:auto;
    background:rgba(10,15,26,0.97); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.13);
    border-radius:10px; padding:5px;
    box-shadow:0 14px 36px rgba(0,0,0,0.6);
    z-index:600;
}
.n8-globe-zone-wrap.is-open .n8-gz-panel { display:flex; }

/* Pont invisible DOM (.n8-gz-bridge) qui couvre l'espace entre le bord droit du
   bouton globe et le bord gauche du panel. Capte le hover pour garder le menu
   ouvert lors de la traversée. Actif uniquement quand le menu est ouvert.
   Note : collé au bord droit du bouton (x=43), chevauche le padding-right du
   zoomBox (43→50) pour éliminer la zone morte, puis couvre le gap (50→58). */
.n8-gz-bridge {
    position:absolute;
    left:43px;           /* = bord droit exact du bouton globe */
    top:7px;              /* = top du bouton globe */
    width:18px;          /* couvre 43→61, dépasse le bord gauche du panel à 58 */
    height:36px;         /* = hauteur du bouton globe */
    background:transparent;
    pointer-events:none; /* inactif tant que le menu est fermé */
    z-index:510;
}
.n8-globe-zone-wrap.is-open .n8-gz-bridge { pointer-events:auto; }

/* Continent/pays/villes dans le panel zone : affichage vertical */
/* Reset position:absolute hérité (usage hors panel, top-right du globe) */
.n8-gz-panel .n8-globe-continents,
.n8-gz-panel .n8-globe-countries,
.n8-gz-panel .n8-globe-cities {
    position:static !important;
    top:auto !important; right:auto !important; left:auto !important; bottom:auto !important;
    width:100% !important; max-width:none !important;
    background:transparent !important; border:0 !important;
    box-shadow:none !important; border-radius:0 !important;
    flex-direction:column !important; overflow-x:hidden !important;
    flex-wrap:nowrap !important; gap:1px; padding:0;
}
.n8-gz-panel .n8-globe-continents { display:flex !important; padding-bottom:4px !important; border-bottom:1px solid rgba(255,255,255,0.08) !important; margin-bottom:3px; }
.n8-gz-panel .n8-globe-countries.is-open,
.n8-gz-panel .n8-globe-cities.is-open {
    display:flex !important;
    max-height:none !important; opacity:1 !important; visibility:visible !important;
    border-top:1px solid rgba(255,255,255,0.08) !important;
    margin-top:3px; padding-top:4px !important; padding-bottom:0 !important;
    box-shadow:none !important;
}
.n8-gz-panel .n8-globe-countries:not(.is-open),
.n8-gz-panel .n8-globe-cities:not(.is-open) { display:none !important; }
.n8-gz-panel .n8-globe-continent,
.n8-gz-panel .n8-globe-country,
.n8-gz-panel .n8-globe-city {
    width:100%; text-align:left; white-space:nowrap;
    padding:6px 10px; border-radius:6px; border:none;
    font-family:"Inter",sans-serif; font-size:13px; line-height:1.35;
}
/* En-têtes de section du panneau zone (Continents / Pays / Villes) */
.n8-gz-head {
    padding:5px 10px 3px;
    font-family:"Space Mono",monospace; font-size:8.5px; font-weight:700;
    letter-spacing:1.8px; text-transform:uppercase;
    color:rgba(255,255,255,0.38);
    pointer-events:none;
}
/* En mode réduit (fil d'ariane), les en-têtes disparaissent avec les items inactifs */
.n8-gz-panel .is-collapsed > .n8-gz-head { display:none; }

/* Le zoomBox (3 boutons : globe + / -) est maintenant dans .n8-globe-zone-wrap — voir plus haut */

/* ── Flatmap Leaflet overlay pays (pleine taille, premier plan absolu) ──── */
.n8-spots-globe-wrap { position:relative; overflow:hidden; }
.n8-spots-flatmap {
    position:absolute; top:0; left:0; width:100%; height:100%;
    z-index:2000;         /* au-dessus du zoomBox (520) et du panel (600) */
    border-radius:14px; overflow:hidden;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity 0.3s ease, visibility 0s 0.3s;
    background:#0a0f1a;
}
.n8-spots-flatmap.is-open {
    opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity 0.3s ease, visibility 0s 0s;
}
/* Blocage des interactions avec les boutons globe/zoom du globe tant que le plan est ouvert */
.n8-spots-globe-wrap.is-flatmap-open .n8-globe-zone-wrap,
.n8-spots-globe-wrap.is-flatmap-open #spotsGlobeContainer,
.n8-spots-globe-wrap.is-flatmap-open .n8-spots-globe-arc {
    pointer-events:none !important;
}
.n8-spots-globe-wrap.is-flatmap-open .n8-globe-zone-wrap {
    opacity:0.4;
    transition:opacity 0.25s;
}
/* Croix de fermeture (haut-DROITE, rouge — règle David : fermeture toujours à droite) */
.n8-flatmap-close {
    position:absolute; top:12px; right:12px; z-index:1001;
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px;
    background:rgba(10,15,26,0.88); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,93,93,0.45);
    border-radius:8px;
    color:#ff5d5d;
    cursor:pointer;
    transition:background 0.15s, border-color 0.15s, color 0.15s;
}
.n8-flatmap-close:hover { background:#e23b3b; border-color:#e23b3b; color:#fff; }
@media (max-width:768px) { .n8-flatmap-close { width:42px; height:42px; } }

/* Toggle Satellite / Carte (haut-GAUCHE — la droite appartient à la croix) */
.n8-flatmap-modes {
    position:absolute; top:12px; left:12px; z-index:1000;
    display:inline-flex; padding:3px;
    background:rgba(10,15,26,0.88); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.2); border-radius:10px;
    box-shadow:0 6px 18px rgba(0,0,0,0.45);
}
.n8-flatmap-mode {
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 11px; border:0; background:transparent;
    color:rgba(255,255,255,0.62);
    font-family:"Inter",sans-serif; font-size:11px; font-weight:600; letter-spacing:0.4px;
    border-radius:7px; cursor:pointer;
    transition:color 0.15s, background 0.15s;
}
.n8-flatmap-mode:hover { color:#fff; }
.n8-flatmap-mode.is-active {
    background:rgba(255,255,255,0.12); color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18);
}
.n8-flatmap-mode svg { flex-shrink:0; }
@media (max-width:600px) {
    .n8-flatmap-mode span { display:none; }
    .n8-flatmap-mode { padding:7px; }
}

/* ── Filet sécu : tous les champs de la section spots = texte blanc (fond sombre) ── */
.n8-spots-section input:not([type="checkbox"]):not([type="radio"]),
.n8-spots-section textarea,
.n8-spots-section select {
    color:#fff !important;
    color-scheme:dark;
}
.n8-spots-section input:not([type="checkbox"]):not([type="radio"])::placeholder,
.n8-spots-section textarea::placeholder { color:rgba(255,255,255,0.5) !important; }
.n8-spots-section input:-webkit-autofill { -webkit-text-fill-color:#fff !important; }
.n8-spots-section select option { background:#0a0f1a; color:#fff; }

/* ── Barre de recherche sidebar gauche : fond blanc, texte noir (override DA sombre).
   Spécificité boostée pour battre le filet sécu .n8-spots-section input:not(...) (0,3,1). ── */
.n8-spots-section .n8-spots-col-cards .n8-tb-search.n8-tb-search {
    background:#fff !important;
    border-color:rgba(26,39,68,0.18) !important;
}
.n8-spots-section .n8-spots-col-cards .n8-tb-search.n8-tb-search:focus-within {
    background:#fff !important;
    border-color:rgba(26,39,68,0.45) !important;
}
.n8-spots-section .n8-spots-col-cards input.n8-tb-search__in,
.n8-spots-section .n8-spots-col-cards .n8-tb-search--actions input.n8-tb-search__in {
    color:#111 !important;
    caret-color:#111 !important;
}
.n8-spots-section .n8-spots-col-cards input.n8-tb-search__in::placeholder {
    color:#888 !important;
    opacity:1;
}
.n8-spots-section .n8-spots-col-cards input.n8-tb-search__in:-webkit-autofill,
.n8-spots-section .n8-spots-col-cards input.n8-tb-search__in:-webkit-autofill:focus {
    -webkit-text-fill-color:#111 !important;
    box-shadow:0 0 0 1000px #fff inset !important;
    caret-color:#111 !important;
}
.n8-spots-section .n8-spots-col-cards .n8-tb-search__ic { color:#888 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SPOTS v3 « GLOBE-FIRST » (David 2026-07-19) — desktop ≥1025px.
   Le globe = LA section, pleine largeur. La colonne liste devient un CALQUE
   de contrôles par-dessus (aucun déplacement DOM → tout le JS reste intact) :
   recherche + filtres en haut à gauche, zoom + continents/pays toujours
   visibles dessous, fiche spot = drawer flottant à droite. La liste verticale
   n'existe plus à l'écran (le globe + compteurs + drill-down la remplacent).
   Mobile/tablette : layout existant conservé (globe + rail horizontal).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1025px){
  /* Section + header compactés : moins de vide, le globe respire */
  #spots.n8-spots-section { padding:64px 0 44px !important; }
  #spots .n8-spots-header { margin-bottom:20px !important; }
  #spots .n8-spots-header h2 { font-size:clamp(28px,3.2vw,44px) !important; margin-bottom:14px !important; }
  #spots .n8-spots-meta { margin-top:2px; }

  /* Split → un seul cadre : le globe pleine largeur */
  #spots .n8-spots-split { display:block !important; position:relative; height:min(76vh,740px) !important; }
  #spots .n8-spots-col-map { position:absolute !important; inset:0 !important; width:auto !important; flex:none !important; }

  /* col-cards = calque de contrôles au-dessus du globe */
  #spots .n8-spots-col-cards {
    position:absolute !important; inset:24px !important; z-index:30;
    pointer-events:none;
    display:block !important;
    background:transparent !important; border:none !important; box-shadow:none !important;
    min-width:0 !important; max-width:none !important; max-height:none !important; flex:none !important;
    overflow:visible !important;
  }
  #spots .n8-spots-col-cards .n8-spots-search-wrap { pointer-events:auto; position:absolute; top:0; left:0; width:340px; padding:0; z-index:40; }
  #spots .n8-spots-col-cards .n8-sf-bar { pointer-events:auto; position:absolute; top:0; left:352px; z-index:39; }
  #spots .n8-spots-col-cards .n8-spots-vcarousel,
  #spots .n8-spots-col-cards .n8-spots-browse,
  #spots .n8-spots-col-cards .n8-spots-empty { display:none !important; }

  /* Fiche spot = drawer flottant à droite au-dessus du globe */
  #spots .n8-spots-col-cards > .n8-spot-panel {
    position:absolute !important; inset:0 0 0 auto !important;
    width:min(430px,44%) !important; border-radius:14px !important;
  }

  /* Zoom + sélecteur de zone : sous la recherche, à gauche */
  #spots .n8-globe-zone-wrap { top:56px !important; left:0 !important; }
  /* Le panel continents/pays est TOUJOURS visible (plus caché derrière un hover) */
  #spots .n8-gz-panel { display:flex !important; max-height:min(52vh,480px); }
  /* Le bouton planète devient inutile à l'état visible — on le laisse (reset visuel) */

  /* Hint : bas centre, au-dessus du globe */
  #spots .n8-spots-map-hint { z-index:25; }
}

/* Compteur continents : lisible aussi dans le menu mobile */
.n8-gz-panel .n8-globe-continent { display:flex; justify-content:space-between; gap:10px; width:100%; }

/* Barre repliée « propose ton spot » (v3) */
.n8-spots-suggest-bar { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:26px 16px 6px; }
.n8-spots-suggest-toggle--go { text-decoration:none; background:#fff; color:#0a0f1a; border-color:#fff; }
.n8-spots-suggest-toggle--go:hover { background:#e3e6ec; color:#0a0f1a; }
.n8-spots-suggest-toggle {
    display:inline-flex; align-items:center; gap:9px;
    background:transparent; color:rgba(255,255,255,0.75);
    border:1px solid rgba(255,255,255,0.22); border-radius:10px;
    padding:12px 22px;
    font-family:"Space Mono",monospace; font-size:11px; font-weight:700;
    letter-spacing:1.5px; text-transform:uppercase; cursor:pointer;
    transition:background .15s, color .15s, border-color .15s;
}
.n8-spots-suggest-toggle:hover { background:rgba(255,255,255,0.08); color:#fff; border-color:rgba(255,255,255,0.4); }
.n8-spots-suggest-toggle[aria-expanded="true"] { background:#1a2744; color:#fff; border-color:rgba(255,255,255,0.3); }

/* Avant init JS, le panneau zones est vide → on ne montre pas un rectangle nu */
#spots .n8-gz-panel:empty { display:none !important; }

/* Flèches de bord — spots hors-champ (v3) */
.n8-edge-nav { position:absolute; inset:0; pointer-events:none; z-index:24; }
.n8-edge-chip {
    position:absolute; transform:translate(-50%,-50%);
    pointer-events:auto;
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(10,15,26,0.92); color:rgba(255,255,255,0.85);
    border:1px solid rgba(255,255,255,0.2); border-radius:8px;
    padding:6px 10px;
    font-family:"Space Mono",monospace; font-size:10px; font-weight:700;
    letter-spacing:0.5px; text-transform:uppercase; white-space:nowrap;
    cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.45);
    transition:background .15s, border-color .15s, color .15s;
}
.n8-edge-chip:hover { background:#1a2744; border-color:rgba(255,255,255,0.4); color:#fff; }
.n8-edge-chip__arr { display:inline-flex; line-height:0; }
@media (max-width:768px){
    .n8-edge-chip { font-size:9px; padding:5px 8px; }
}