/* 
 * ═══════════════════════════════════════════════════════════════
 * 🎨 ATLAS ENGINE SKIN V2 — Premium Toolbar
 * Photo Sphere Viewer 5.x — Thème sur mesure
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── VARIABLES GLOBALES ─── */
:root {
    /* Navbar — Pill flottante */
    --atlas-navbar-bg: rgba(8, 12, 28, 0.75);
    --atlas-navbar-height: 50px;
    --atlas-navbar-padding: 8px 14px;
    --atlas-navbar-gap: 6px;
    --atlas-navbar-border: rgba(255, 255, 255, 0.07);

    /* Boutons */
    --atlas-btn-size: 34px;
    --atlas-btn-radius: 8px;
    --atlas-icon-size: 18px;
    --atlas-btn-bg: transparent;
    --atlas-btn-hover: rgba(255, 255, 255, 0.1);
    --atlas-btn-active: rgba(99, 102, 241, 0.25);
    --atlas-btn-color: rgba(255, 255, 255, 0.75);
    --atlas-btn-color-hover: #ffffff;

    /* D-PAD */
    --atlas-dpad-bg: rgba(255, 255, 255, 0.06);
    --atlas-dpad-border: rgba(255, 255, 255, 0.1);
    --atlas-dpad-size: 30px;

    /* Accents */
    --atlas-accent: #6366f1;
    --atlas-accent-glow: rgba(99, 102, 241, 0.3);

    /* Caption (PSV override) */
    --psv-caption-background: rgba(0, 0, 0, 0.4);
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000 !important; /* FIX : empêche le fond blanc WebGL clearColor */
}

#viewer-container {
    background: #000 !important; /* FIX : fond noir garanti sous le canvas Three.js */
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR — Conteneur principal
   ═══════════════════════════════════════════════════════════════ */
.psv-navbar {
    height: var(--atlas-navbar-height) !important;
    background: var(--atlas-navbar-bg) !important;
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-top: none !important;
    border: 1px solid var(--atlas-navbar-border) !important;
    padding: var(--atlas-navbar-padding) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--atlas-navbar-gap) !important;
    box-sizing: border-box;

    /* ── Pill flottante centrée ── */
    width: fit-content !important;
    border-radius: 14px !important;
    position: absolute !important;
    bottom: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.07) !important;
    z-index: 60 !important;
}

/* ═══════════════════════════════════════════════════════════════
   BOUTONS — Style de base pour TOUS les boutons PSV
   ═══════════════════════════════════════════════════════════════ */
.psv-button {
    width: var(--atlas-btn-size) !important;
    height: var(--atlas-btn-size) !important;
    min-width: var(--atlas-btn-size) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: var(--atlas-btn-radius) !important;
    background: var(--atlas-btn-bg) !important;
    color: var(--atlas-btn-color) !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease !important;
    flex-shrink: 0 !important;
    position: relative;
    box-shadow: none !important;
    will-change: background, color;
}

.psv-button:hover {
    background: var(--atlas-btn-hover) !important;
    color: var(--atlas-btn-color-hover) !important;
}

.psv-button:active {
    transform: scale(0.95) !important;
}

.psv-button--active {
    background: var(--atlas-btn-active) !important;
    color: #ffffff !important;
}

/* SVG dans les boutons PSV natifs */
.psv-button .psv-button-svg {
    width: var(--atlas-icon-size) !important;
    height: var(--atlas-icon-size) !important;
    fill: currentColor;
}

/* SVG dans les boutons custom (inline via content) */
.psv-button svg {
    width: var(--atlas-icon-size) !important;
    height: var(--atlas-icon-size) !important;
    flex-shrink: 0;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════
   ZOOM RANGE — Slider natif PSV
   ═══════════════════════════════════════════════════════════════ */
.psv-zoom-range {
    width: 60px !important;
    max-width: 80px;
    margin: 0 4px !important;
    opacity: 0.55;
    transition: opacity 0.2s;
}

.psv-zoom-range:hover {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   D-PAD — Boutons directionnels (chevrons)
   ═══════════════════════════════════════════════════════════════ */
.atlas-dpad {
    width: var(--atlas-dpad-size) !important;
    height: var(--atlas-dpad-size) !important;
    min-width: var(--atlas-dpad-size) !important;
    background: var(--atlas-dpad-bg) !important;
    border: 1px solid var(--atlas-dpad-border) !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    padding: 0 !important;
}

.atlas-dpad svg {
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor;
    fill: none;
}

.atlas-dpad:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.atlas-dpad:active {
    transform: scale(0.9) !important;
}

/* Espacement : petit gap avant le premier et après le dernier D-PAD */
.atlas-dpad--left {
    margin-left: 6px !important;
}

.atlas-dpad--right {
    margin-right: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════
   CAPTION — Masqué (causait le 'E...' tronqué dans la toolbar)
   ═══════════════════════════════════════════════════════════════ */
.psv-caption {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   BOUTON NEARBY — Clignotant quand panoramas à proximité (T1)
   ═══════════════════════════════════════════════════════════════ */
.atlas-btn-nearby {
    position: relative;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.3s ease, transform 0.3s ease !important;
}

.atlas-btn-nearby svg {
    width: var(--atlas-icon-size) !important;
    height: var(--atlas-icon-size) !important;
    stroke: currentColor;
    fill: none;
}

/* Masqué par défaut (aucun panorama à proximité) */
.atlas-btn-nearby--hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Clignotement actif — attire l'œil de l'utilisateur */
.atlas-btn-nearby--pulse {
    animation: atlas-nearby-pulse 2s ease-in-out infinite !important;
    color: #22d3ee !important;
}

.atlas-btn-nearby--pulse::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: var(--atlas-btn-radius);
    border: 2px solid #22d3ee;
    animation: atlas-nearby-ring 2s ease-in-out infinite;
    pointer-events: none;
}

/* État actif (panneau ouvert) */
.atlas-btn-nearby--active {
    background: rgba(34, 211, 238, 0.2) !important;
    color: #22d3ee !important;
    animation: none !important;
}

.atlas-btn-nearby--active::after {
    display: none;
}

/* ─── Atlas Compass Rose — Bande de cap pleine largeur style KRPANO ─────── */
.atlas-compass-rose {
    position: absolute;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    z-index: 20;
    pointer-events: none;
    user-select: none;
}

.atlas-compass-rose__canvas {
    display: block;
    width: 100%;
    height: 44px;
}

.atlas-btn-compass-rose--active {
    background: rgba(255, 50, 50, 0.18) !important;
    color: #ff6666 !important;
}
/* ─────────────────────────────────────────────────────────────────────────── */

@keyframes atlas-nearby-pulse {
    0%, 100% {
        color: #22d3ee;
        transform: scale(1);
    }
    50% {
        color: #ffffff;
        transform: scale(1.12);
    }
}

@keyframes atlas-nearby-ring {
    0%, 100% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

/* ═══════════════════════════════════════════════════════════════
   BOUTON RETOUR CARTE — Accent indigo
   ═══════════════════════════════════════════════════════════════ */
.atlas-btn-back {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px var(--atlas-accent-glow) !important;
    margin-left: 6px !important;
}

.atlas-btn-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 1px;
}

.atlas-btn-back svg {
    stroke: #ffffff;
    fill: none;
    width: 16px !important;
    height: 16px !important;
}

.atlas-btn-back:hover {
    background: linear-gradient(135deg, #4f46e5, #6d28d9) !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.5) !important;
    transform: none !important;
}

.atlas-btn-back:active {
    transform: scale(0.95) !important;
}

/* ─── Pulse bouton Accueil ─── */
.atlas-btn-back {
    animation: atlas-home-pulse 2.2s ease-in-out infinite !important;
}
.atlas-btn-back:hover { animation: none !important; }
@keyframes atlas-home-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(99,102,241,0.4); transform: scale(1); }
    50%       { box-shadow: 0 0 0 7px rgba(99, 102, 241, 0.22), 0 4px 18px rgba(99,102,241,0.65); transform: scale(1.12); }
}

/* ─── Pulse bouton Galerie ─── */
.psv-gallery-button {
    position: relative !important;
    animation: atlas-gallery-pulse 2.8s ease-in-out 1.2s infinite !important;
    color: #22d3ee !important;
    background: rgba(34, 211, 238, 0.08) !important;
}
.psv-gallery-button:hover { animation: none !important; color: #ffffff !important; background: var(--atlas-btn-hover) !important; }
.psv-gallery-button::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 10px;
    border: 2px solid rgba(34, 211, 238, 0.6);
    pointer-events: none;
    animation: atlas-gallery-ring 2.8s ease-in-out 1.2s infinite;
}
.psv-gallery-button:hover::before { display: none; }
@keyframes atlas-gallery-pulse {
    0%, 100% { color: #22d3ee; transform: scale(1); }
    50%       { color: #ffffff; transform: scale(1.14); }
}
@keyframes atlas-gallery-ring {
    0%, 100% { opacity: 0; transform: scale(0.82); }
    50%       { opacity: 0.7; transform: scale(1.1); }
}

/* ═══════════════════════════════════════════════════════════════
   SÉPARATEURS VISUELS — lignes fines entre groupes
   ═══════════════════════════════════════════════════════════════ */

/* Séparateur après zoom-in (avant D-PAD) */
.psv-button--zoom-in::after {
    content: '';
    position: absolute;
    right: calc(var(--atlas-navbar-gap) / -2 - 0.5px);
    top: 22%;
    height: 56%;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

/* Séparateur après D-PAD right (avant outils) */
.atlas-dpad--right::after {
    content: '';
    position: absolute;
    right: calc(var(--atlas-navbar-gap) / -2 - 0.5px);
    top: 18%;
    height: 64%;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

/* Séparateur après gallery (avant boutons mode) */
.psv-gallery-button::after {
    content: '';
    position: absolute;
    right: calc(var(--atlas-navbar-gap) / -2 - 0.5px);
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

/* Séparateur avant fullscreen */
.psv-fullscreen-button::before {
    content: '';
    position: absolute;
    left: calc(var(--atlas-navbar-gap) / -2 - 0.5px);
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   TOOLTIPS — Info-bulles premium
   ═══════════════════════════════════════════════════════════════ */
.psv-tooltip {
    background: rgba(10, 15, 30, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500;
    border-radius: 8px !important;
    overflow: hidden !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    pointer-events: none !important;
    --psv-tooltip-offset: 20px;
    margin-bottom: 12px;
}

.psv-tooltip-arrow {
    border-top-color: rgba(10, 15, 30, 0.95) !important;
}

/* ── VirtualTour Tooltip — Rendu identique démo PSV officielle ── */
.psv-virtual-tour-tooltip .psv-tooltip-content {
    padding: 0 !important;
    max-width: 220px !important;
}
.psv-virtual-tour-tooltip .psv-tooltip-content h3 {
    padding: 8px 12px 6px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}
.psv-virtual-tour-tooltip .psv-tooltip-content img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.psv-virtual-tour-tooltip .psv-tooltip-content p {
    padding: 6px 12px 8px !important;
    margin: 0 !important;
    font-size: 12px !important;
    opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════
   GALLERY — Panneau de vignettes
   ═══════════════════════════════════════════════════════════════ */
.psv-gallery {
    /* ⬆️ Remontée au-dessus de la navbar pill */
    bottom: 82px !important;
    transform: translateY(calc(100% + 82px)) !important;
    /* ❌ SUPPRIMÉ : fond opaque moche → transparent total */
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    /* Hauteur correcte — vignettes thumbnailSize.height=115px + title ~30px + padding */
    max-height: 190px !important;
    /* Scroll horizontal silencieux — ZÉRO ascenseur visible */
    /* ⚠️ PAS d'override overflow — .psv-gallery-container est le vrai scroll container PSV */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    z-index: 50 !important;
    will-change: transform;
}

/* Webkit : masquer tout scrollbar dans la galerie */
.psv-gallery::-webkit-scrollbar,
.psv-gallery *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Galerie ouverte */
.psv-gallery--open {
    transform: translateY(0) !important;
}

.psv-gallery-container {
    /* ✅ Scroll PSV natif restauré — seul padding-right retiré (ignoré dans flex+scroll) */
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    scrollbar-width: none !important;
    overflow: auto hidden !important;
}

/* ✅ FIX GALERIE GAUCHE — ::before remplace padding-left PSV pouvant être ignoré dans scroll */
.psv-gallery-container::before {
    content: '' !important;
    display: block !important;
    flex-shrink: 0 !important;
    min-width: 15px !important;
    order: -1 !important;
}

/* ✅ FIX GALERIE DROITE — ::after remplace padding-right PSV (15px) ignoré dans scroll */
.psv-gallery-container::after {
    content: '' !important;
    display: block !important;
    flex-shrink: 0 !important;
    min-width: 15px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   🔀 Flèches galerie PSV natives (.psv-gallery-arrow) — améliorations visuelles
   Les anciennes flèches custom .atlas-gallery-arrow ont été supprimées (T3)
   PSV v5.14 génère ses propres flèches de navigation de galerie
   ══════════════════════════════════════════════════════════════════════ */
.psv-gallery-arrow svg {
    color: rgba(255, 255, 255, 0.9) !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8)) !important;
    transition: color 0.2s ease, filter 0.2s ease !important;
}
.psv-gallery-arrow:hover svg {
    color: #ffffff !important;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.6)) drop-shadow(0 2px 6px rgba(0,0,0,0.9)) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   🏷️ LABEL CONTEXTUEL DE LA GALERIE (mode de filtrage actif)
   Positionnement fluide via clamp() — Protocole Flexbox-Responsive V3.0
   ══════════════════════════════════════════════════════════════════════ */

/* Variables d'ancrage : navbar PSV (~82px) + galerie (~190px) + gap
   clamp(min, préféré, max) — s'adapte au DPI / zoom / résolution */
#psv-direct-viewer {
    --atlas-navbar-h:  clamp(62px, calc(3.8vmin + 48px), 84px);
    --atlas-gallery-h: clamp(160px, calc(10vh + 90px), 200px);
    --atlas-label-gap: clamp(6px, 1vmin, 14px);
}

.atlas-gallery-context-label {
    position: absolute !important;
    /* Flotte juste AU-DESSUS de la galerie, quelle que soit la résolution */
    bottom: calc(var(--atlas-navbar-h, 82px) + var(--atlas-gallery-h, 190px) + var(--atlas-label-gap, 8px)) !important;
    left: clamp(10px, 2vw, 24px) !important;
    right: clamp(50px, 6vw, 80px) !important;
    z-index: 55 !important;
    display: block !important;
    padding: clamp(3px, 0.4vmin, 6px) clamp(8px, 1.5vw, 14px) !important;
    font-size: clamp(9px, 0.7vmin + 8px, 11px) !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.65) !important;
    background: transparent !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    /* Transition douce pour le fade-out JS (30 s) */
    transition: opacity 1.2s ease !important;
}

.psv-gallery-item {
    border-radius: 10px !important;
    overflow: hidden !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    position: relative !important;
    /* ✨ Ombres profondes — seule source de l'effet 3D (pas de fond) */
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.65),
        0 12px 28px rgba(0, 0, 0, 0.45),
        0 1px 4px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.psv-gallery-item:hover {
    /* Glow lumineux subtil + lift — ZÉRO mauve */
    border: none !important;
    filter: brightness(1.15) !important;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.6),
        0 16px 40px rgba(0, 0, 0, 0.35),
        0 0 16px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-5px) scale(1.02) !important;
}

.psv-gallery-item--active {
    /* Active : bordure blanche subtile, ZÉRO mauve */
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.6),
        0 0 12px rgba(255, 255, 255, 0.08) !important;
    filter: brightness(1.1) !important;
}

/* 🏷️ Badge catégorie semi-transparent sur vignettes galerie */
.atlas-gallery-cat-badge {
    position: absolute !important;
    bottom: 6px !important;
    right: 6px !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    pointer-events: none !important;
    z-index: 2 !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.psv-gallery-item:hover .atlas-gallery-cat-badge {
    opacity: 1 !important;
}

/* 🃏 Hover card — overlay informatif (catégorie + département) au survol */
.atlas-gallery-hover-card {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 28px 10px 8px !important;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.72) 45%,
        rgba(0, 0, 0, 0) 100%
    ) !important;
    transform: translateY(6px) !important;
    opacity: 0 !important;
    transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.22s ease !important;
    pointer-events: none !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.psv-gallery-item:hover .atlas-gallery-hover-card {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

.atlas-gallery-hover-type {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.98) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
    letter-spacing: 0.3px !important;
    line-height: 1.2 !important;
}

.atlas-gallery-hover-type i {
    font-size: 10px !important;
    flex-shrink: 0 !important;
}

.atlas-gallery-hover-dept {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
    letter-spacing: 0.2px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Note libre saisie dans Atlas Studio > Info Galerie */
.atlas-gallery-hover-note {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    color: rgba(255, 230, 100, 0.92) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important;
    letter-spacing: 0.2px !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    margin-top: 1px !important;
}

/* Date de dernière mise à jour */
.atlas-gallery-hover-date {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 8.5px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.38) !important;
    letter-spacing: 0.2px !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
}

/* Cacher le titre PSV natif quand le hover card est visible (évite doublon) */
.psv-gallery-item:hover .psv-gallery-item-title {
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
}

/* Style du titre PSV natif de la galerie */
.psv-gallery-item-title {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* ───────────────────────────── Overlay distance vignette ───────────────── */
.atlas-gallery-dist-overlay {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7) !important;
    letter-spacing: 0.5px !important;
    pointer-events: none !important;
    z-index: 3 !important;
    user-select: none !important;
    white-space: nowrap !important;
    transition: opacity 0.2s ease !important;
}
.psv-gallery-item:hover .atlas-gallery-dist-overlay {
    opacity: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   PLAN PLUGIN — Carte GPS intégrée
   ═══════════════════════════════════════════════════════════════ */
/* Cacher le bouton natif du PlanPlugin (navbar et tout toggle interne) */
.psv-plan-button {
    display: none !important;
}

/* Carte GPS — conteneur principal */
.psv-plan {
    resize: none !important;
    overflow: hidden !important;
    min-width: 200px !important;
    min-height: 150px !important;
    max-width: 90vw !important;
    max-height: 80vh !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Masquer complètement le PlanPlugin quand fermé (pas de résidu semi-transparent) */
.psv-plan.atlas-plan-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Tuer tous les enfants du conteneur caché (empêche tout logo/div résiduel) */
.psv-plan.atlas-plan-hidden * {
    display: none !important;
    visibility: hidden !important;
}

/* Supprimer l'attribution et le logo Leaflet dans la carte GPS */
.psv-plan .leaflet-control-attribution,
.psv-plan .leaflet-control-attribution a {
    display: none !important;
}

/* Masquer le bouton natif du PlanPlugin (toutes variantes BEM possibles) */
.psv-plan-button,
.psv-plan__button {
    display: none !important;
}

/* ── Poignée de redimensionnement (coin bas-droit) ── */
.atlas-plan-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px;
    height: 28px;
    cursor: se-resize;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 0 0 10px 0;
    transition: background 0.2s ease;
}

.atlas-plan-resize-handle:hover {
    background: rgba(99, 102, 241, 0.55);
}

.atlas-plan-resize-handle svg {
    pointer-events: none;
}

/* Feedback visuel pendant le redimensionnement */
.psv-plan.atlas-plan-resizing {
    transition: none !important;
    outline: 2px dashed rgba(99, 102, 241, 0.5) !important;
    outline-offset: -2px;
}

/* Limiter la taille de la carte maximisée */
.psv-plan--maximized {
    max-width: calc(100vw - 580px) !important;
    max-height: calc(100vh - 90px) !important;
}

@media (max-width: 1200px) {
    .psv-plan--maximized {
        max-width: calc(100vw - 400px) !important;
    }
}

@media (max-width: 768px) {
    .psv-plan--maximized {
        max-width: calc(100vw - 40px) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LOADER — Écran de chargement
   ═══════════════════════════════════════════════════════════════ */
.psv-loader {
    background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 1)) !important;
}

.psv-loader-text {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.65);
}

/* ═══════════════════════════════════════════════════════════════
   COMPASS — Boussole (Plugin)
   ═══════════════════════════════════════════════════════════════ */
.psv-compass {
    width: 55px !important;
    height: 55px !important;
    margin: 12px 0 0 12px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.psv-compass:hover {
    transform: scale(1.08);
}

/* ═══════════════════════════════════════════════════════════════
   SETTINGS PANEL — Menu réglages
   ═══════════════════════════════════════════════════════════════ */
.psv-settings {
    background: rgba(10, 15, 30, 0.95) !important;
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    min-width: 200px;
    overflow: hidden;
}

.psv-settings-item {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 13px;
    padding: 10px 16px !important;
    transition: background 0.15s ease;
}

.psv-settings-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.psv-settings-item-label {
    font-weight: 500;
}

.psv-settings-item-value {
    color: var(--atlas-accent) !important;
    font-weight: 600;
}

/* Toggle switch dans Settings */
.psv-settings-item--header {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   MARKERS LIST — Panneau liste des marqueurs
   ═══════════════════════════════════════════════════════════════ */
.psv-markers-list {
    background: rgba(10, 15, 30, 0.95) !important;
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

.psv-markers-list-item {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 13px;
    padding: 8px 14px !important;
    transition: background 0.15s ease;
}

.psv-markers-list-item:hover {
    background: rgba(99, 102, 241, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PSV PANEL LATÉRAL — Points d'intérêt, etc.
   ═══════════════════════════════════════════════════════════════ */
.psv-panel {
    background: rgba(10, 15, 30, 0.96) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 310px !important;
    max-width: 90vw !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4) !important;
}

.psv-panel-content {
    padding: 0 !important;
    overflow-y: auto !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.psv-panel-menu-title {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    padding: 14px 16px 10px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: block !important;
}

.psv-panel-close-button {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 20px !important;
    cursor: pointer !important;
    padding: 10px !important;
    transition: color 0.15s ease !important;
    line-height: 1 !important;
}

.psv-panel-close-button:hover {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MINI CARTE (OVERLAY)
   ═══════════════════════════════════════════════════════════════ */
#atlas-minimap-container {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 280px;
    height: 320px;
    background: var(--glass-bg, rgba(10, 15, 30, 0.9));
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: none;
    resize: both;
    direction: rtl;
    min-width: 180px;
    min-height: 200px;
    max-width: 600px;
    max-height: 600px;
}

#atlas-minimap-container > * {
    direction: ltr;
}

#atlas-minimap-container.hidden {
    display: none !important;
}

#atlas-minimap-container.collapsed {
    transform: translateX(300px);
    opacity: 0;
}

.minimap-header {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--atlas-accent);
}

.minimap-header button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 14px;
    transition: color 0.2s;
}

.minimap-header button:hover {
    color: #ff4757;
}

#minimap {
    flex: 1;
    width: 100%;
    background: #0f172a;
}

/* Contrôles Leaflet dans la minimap */
#minimap .leaflet-control-zoom {
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    border-radius: 8px !important;
    overflow: hidden;
}

#minimap .leaflet-control-zoom a {
    background: rgba(15, 23, 42, 0.85) !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 14px !important;
}

#minimap .leaflet-control-zoom a:hover {
    background: rgba(99, 102, 241, 0.6) !important;
    color: #fff !important;
}

/* Radar sur la mini-carte */
.custom-minimap-icon {
    background: none !important;
    border: none !important;
}

.minimap-marker-hub {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.minimap-radar {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 45px solid rgba(59, 130, 246, 0.7);
    top: 50%;
    left: 50%;
    margin-top: -45px;
    margin-left: -20px;
    transform-origin: 50% 100%;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.8));
    transition: transform 0.08s linear;
}

/* ═══════════════════════════════════════════════════════════════
   🧭 FLÈCHES DE NAVIGATION VIRTUAL TOUR — Cercle + Chevron (style PSV natif)
   Éléments HTML positionnés par PSV en 3D space.
   Design : cercle semi-transparent, chevron directionnel, anneau hover.
   🔒 Cachées pendant l'animation d'ouverture via .atlas-vt-arrows-hidden
   ═══════════════════════════════════════════════════════════════ */

/* ── État caché pendant animation d'ouverture ── */
.atlas-vt-arrows-hidden .psv-virtual-tour-arrow,
.atlas-vt-arrows-hidden .psv-virtual-tour-link {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Flèches masquées (opacity) quand le regard est vers le ciel (pitch > 0.2 rad)
   IMPORTANT : pointer-events restes actifs — PSV doit recevoir les clics pour
   déclencher node-changed même si les flèches sont visuellement transparentes ── */
.atlas-vt-look-up .psv-virtual-tour-arrow,
.atlas-vt-look-up .psv-virtual-tour-link {
    opacity: 0 !important;
    /* pointer-events intentionnellement absent : les flèches restent cliquables */
}

/* Flèches VT — PSV natif non surchargé.
   Seule la transition opacity est ajoutée pour le fondu hide/show. */
.psv-virtual-tour-arrow {
    transition: opacity 0.5s ease !important;
}

/* ── Reveal progressif 3s avant la fin de l'animation d'intro
   Classe ajoutée par JS (pre-reveal) AVANT la fin de l'orbit.
   fade-in de 3s : les chevrons surgissent progressivement pendant la fin d'animation. */
.atlas-vt-arrows-revealing .psv-virtual-tour-arrow,
.atlas-vt-arrows-revealing .psv-virtual-tour-link {
    animation: atlas-vt-arrow-reveal 3s ease-in forwards !important;
    pointer-events: none !important;
}

/* ── Tooltip persistant VT-GPS (positionné par JS) ── */
.atlas-vt-tooltip-pin {
    animation: atlas-vt-bubble-in 0.18s ease-out forwards !important;
}

@keyframes atlas-vt-bubble-in {
    from { opacity: 0; transform: translate(-50%, -100%) translateY(8px); }
    to   { opacity: 1; transform: translate(-50%, -100%) translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   🫧 BULLE TOOLTIP VT-GPS — Format 16/9, ombre noire subtile, hoverable
   Layout : Nom → Vignette 16:9 → Distance → Bouton Visiter
   ═══════════════════════════════════════════════════════════════ */

.atlas-vt-bubble {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px !important;
    width: 240px !important;
    background: rgba(12, 14, 28, 0.93) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.70) !important;
}

/* Vignette thumbnail — 16:9, arrondie */
.atlas-vt-bubble-thumb {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 7px !important;
    object-fit: cover !important;
    display: block !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.50) !important;
    flex-shrink: 0 !important;
    background: rgba(30, 30, 60, 0.5) !important;
}

/* Placeholder quand pas de thumbnail */
.atlas-vt-bubble-thumb--placeholder {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 7px !important;
    background: linear-gradient(135deg, rgba(99,102,241,0.35) 0%, rgba(139,92,246,0.25) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.40) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.atlas-vt-bubble-thumb--placeholder::after {
    content: '\1F304' !important;
    font-size: 26px !important;
    opacity: 0.5 !important;
}

/* Nom du panorama */
.atlas-vt-bubble-name {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-align: center !important;
    line-height: 1.3 !important;
    max-width: 216px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* Distance */
.atlas-vt-bubble-dist {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: rgba(34, 211, 238, 0.85) !important;
    letter-spacing: 0.3px !important;
}

/* Bouton "Visiter" */
.atlas-vt-bubble-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 7px 22px !important;
    margin-top: 2px !important;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: #fff !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    letter-spacing: 0.3px !important;
    border: none !important;
    border-radius: 22px !important;
    cursor: pointer !important;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.15s ease !important;
    box-shadow: 0 3px 12px rgba(99, 102, 241, 0.40) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
.atlas-vt-bubble-btn:hover {
    transform: scale(1.08) !important;
    box-shadow:
        0 4px 18px rgba(99, 102, 241, 0.55),
        0 0 0 3px rgba(99, 102, 241, 0.12) !important;
}
.atlas-vt-bubble-btn:active {
    transform: scale(0.97) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ◀▶ CHEVRONS DE NAVIGATION IMMERSIFS (Prev/Next Panorama)
   ⛔ DÉSACTIVÉS — Remplacés par les flèches 3D natives PSV VirtualTourPlugin
   On garde le CSS au cas où mais on force display:none
   ═══════════════════════════════════════════════════════════════ */

/* Masquage total des boutons HTML latéraux nav */
#atlas-nav-prev,
#atlas-nav-next,
.atlas-nav-chevron {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Règles legacy conservées (inactives grâce au display:none ci-dessus) */
.atlas-nav-chevron {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline: none;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.atlas-nav-prev { left: 0; }
.atlas-nav-next { right: 0; }

/* ── Inner container (le bouton visible) ── */
.atlas-nav-chevron-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 12px;
    background: linear-gradient(
        135deg,
        rgba(15, 23, 42, 0.55),
        rgba(30, 41, 59, 0.35)
    );
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.atlas-nav-prev .atlas-nav-chevron-inner {
    border-radius: 0 14px 14px 0;
    padding-left: 10px;
    padding-right: 16px;
}

.atlas-nav-next .atlas-nav-chevron-inner {
    border-radius: 14px 0 0 14px;
    padding-left: 16px;
    padding-right: 10px;
}

/* ── SVG Arrow ── */
.atlas-nav-svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.3s ease,
                stroke-width 0.2s ease;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

/* ── Label (nom du panorama) — caché par défaut, révélé au hover ── */
.atlas-nav-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease 0.05s;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* ── Glow backdrop (effet lumineux derrière le bouton) ── */
.atlas-nav-glow {
    position: absolute;
    top: 50%;
    width: 60px;
    height: 100px;
    transform: translateY(-50%);
    background: radial-gradient(
        ellipse at center,
        rgba(99, 102, 241, 0.15) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: -1;
}

.atlas-nav-prev .atlas-nav-glow { left: -10px; }
.atlas-nav-next .atlas-nav-glow { right: -10px; }

/* ═══════════════════════════════════
   IDLE — Animation de respiration subtile
   ═══════════════════════════════════ */
.atlas-nav-chevron:not(:hover) .atlas-nav-svg {
    animation: atlas-nav-breathe 3.5s ease-in-out infinite;
}

@keyframes atlas-nav-breathe {
    0%, 100% { opacity: 0.5; transform: translateX(0); }
    50% { opacity: 0.85; }
}

/* Micro-mouvement directionnel au repos */
.atlas-nav-prev:not(:hover) .atlas-nav-svg {
    animation: atlas-nav-breathe-left 3.5s ease-in-out infinite;
}
.atlas-nav-next:not(:hover) .atlas-nav-svg {
    animation: atlas-nav-breathe-right 3.5s ease-in-out infinite;
}

@keyframes atlas-nav-breathe-left {
    0%, 100% { opacity: 0.5; transform: translateX(0); }
    50% { opacity: 0.85; transform: translateX(-2px); }
}

@keyframes atlas-nav-breathe-right {
    0%, 100% { opacity: 0.5; transform: translateX(0); }
    50% { opacity: 0.85; transform: translateX(2px); }
}

/* ═══════════════════════════════════
   HOVER — Expansion + Glow Effect
   ═══════════════════════════════════ */
.atlas-nav-chevron:hover .atlas-nav-chevron-inner {
    background: linear-gradient(
        135deg,
        rgba(99, 102, 241, 0.3),
        rgba(139, 92, 246, 0.18)
    );
    border-color: rgba(99, 102, 241, 0.45);
    color: #ffffff;
    box-shadow:
        0 0 24px rgba(99, 102, 241, 0.25),
        0 0 48px rgba(99, 102, 241, 0.08),
        inset 0 0 16px rgba(99, 102, 241, 0.08);
}

.atlas-nav-chevron:hover .atlas-nav-glow {
    opacity: 1;
}

.atlas-nav-chevron:hover .atlas-nav-label {
    max-width: 160px;
    opacity: 1;
}

.atlas-nav-prev:hover .atlas-nav-svg {
    transform: translateX(-5px) scale(1.1);
    filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.7))
            drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
    stroke-width: 3;
}

.atlas-nav-next:hover .atlas-nav-svg {
    transform: translateX(5px) scale(1.1);
    filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.7))
            drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
    stroke-width: 3;
}

/* ═══════════════════════════════════
   ACTIVE (Clic) — Pression + Flash
   ═══════════════════════════════════ */
.atlas-nav-chevron:active .atlas-nav-chevron-inner {
    transform: scale(0.9);
    background: linear-gradient(
        135deg,
        rgba(99, 102, 241, 0.5),
        rgba(139, 92, 246, 0.35)
    );
    box-shadow:
        0 0 36px rgba(99, 102, 241, 0.45),
        inset 0 0 24px rgba(99, 102, 241, 0.12);
}

/* ═══════════════════════════════════
   PULSE (déclenché par JS au clic)
   ═══════════════════════════════════ */
.atlas-nav-pulse .atlas-nav-chevron-inner {
    animation: atlas-nav-pulse-ring 0.5s ease-out !important;
}

@keyframes atlas-nav-pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.6); }
    60% { box-shadow: 0 0 0 16px rgba(99, 102, 241, 0); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

/* ═══════════════════════════════════
   HIDDEN — Transition de masquage
   ═══════════════════════════════════ */
.atlas-nav-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

.atlas-nav-prev.atlas-nav-hidden {
    transform: translateY(-50%) translateX(-20px) !important;
}

.atlas-nav-next.atlas-nav-hidden {
    transform: translateY(-50%) translateX(20px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ⬛ TRANSITION OVERLAY — Écran noir intro/ouverture PSV Direct
   ═══════════════════════════════════════════════════════════════ */
.atlas-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: radial-gradient(ellipse at center,
        #0a1628 0%,
        #060d1a 60%,
        #020609 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.atlas-transition-overlay.active {
    opacity: 1;
    pointer-events: auto;
    transition: none; /* Apparition instantanée — seul le fade-out est animé */
}

/* ═══════════════════════════════════════════════════════════════
   🌐 ATL-LOADER — Loader panorama professionnel
   ═══════════════════════════════════════════════════════════════ */
.atl-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease 0.15s, transform 0.35s ease 0.15s;
    user-select: none;
    pointer-events: none;
}

.atlas-transition-overlay.active .atl-loader {
    opacity: 1;
    transform: translateY(0);
}

/* ── Sphère orbitale ── */
.atl-loader-sphere {
    position: relative;
    width: 90px;
    height: 90px;
    transform-style: preserve-3d;
    perspective: 600px;
}

.atl-loader-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
}

.atl-ring-1 {
    border-top-color: #38bdf8;
    border-bottom-color: rgba(56, 189, 248, 0.15);
    animation: atl-spin-1 1.8s linear infinite;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.atl-ring-2 {
    inset: 10px;
    border-left-color: #818cf8;
    border-right-color: rgba(129, 140, 248, 0.15);
    animation: atl-spin-2 2.4s linear infinite reverse;
    box-shadow: inset 0 0 10px rgba(129, 140, 248, 0.3);
}

.atl-ring-3 {
    inset: 22px;
    border-top-color: #34d399;
    border-bottom-color: rgba(52, 211, 153, 0.1);
    animation: atl-spin-3 1.2s linear infinite;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.35);
}

.atl-loader-core {
    position: absolute;
    inset: 32px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.9) 0%, rgba(99, 102, 241, 0.6) 50%, transparent 100%);
    animation: atl-pulse 2s ease-in-out infinite;
}

/* ── Aura extérieure ── */
.atl-loader-aura {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.08) 0%, transparent 70%);
    animation: atl-pulse-slow 3s ease-in-out infinite;
}

/* ── Texte ── */
.atl-loader-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.atl-loader-title {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background: linear-gradient(90deg, #38bdf8, #818cf8, #34d399, #38bdf8);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: atl-shimmer 3s linear infinite;
}

.atl-loader-subtitle {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(148, 163, 184, 0.75);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.atl-loader-dots::after {
    content: '';
    animation: atl-dots 1.5s steps(4, end) infinite;
}

/* ── Barre de progression simulée ── */
.atl-loader-bar-wrap {
    width: 160px;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.atl-loader-bar {
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, #38bdf8, #818cf8);
    border-radius: 2px;
    animation: atl-bar 2s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

/* ── Keyframes ── */
@keyframes atl-spin-1 {
    from { transform: rotate(0deg) rotateX(65deg); }
    to   { transform: rotate(360deg) rotateX(65deg); }
}

@keyframes atl-spin-2 {
    from { transform: rotate(0deg) rotateY(65deg); }
    to   { transform: rotate(360deg) rotateY(65deg); }
}

@keyframes atl-spin-3 {
    from { transform: rotate(0deg) rotateX(30deg) rotateZ(45deg); }
    to   { transform: rotate(360deg) rotateX(30deg) rotateZ(45deg); }
}

@keyframes atl-pulse {
    0%, 100% { opacity: 0.6; transform: scale(0.9); }
    50%       { opacity: 1;   transform: scale(1.15); box-shadow: 0 0 20px rgba(56, 189, 248, 0.5); }
}

@keyframes atl-pulse-slow {
    0%, 100% { opacity: 0.4; transform: scale(0.95); }
    50%       { opacity: 0.9; transform: scale(1.05); }
}

@keyframes atl-shimmer {
    from { background-position: 0% 50%; }
    to   { background-position: 300% 50%; }
}

@keyframes atl-dots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}

@keyframes atl-bar {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(200%); }
    100% { transform: translateX(200%); }
}

/* ═══════════════════════════════════════════════════════════════
   🌍 TRANSITION OVERLAY — Loader Cinématique Mini-Planète
   ═══════════════════════════════════════════════════════════════ */
.atlas-nav-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.85) 0%, rgba(2, 6, 23, 0.95) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    backdrop-filter: blur(8px);
}

.atlas-nav-transition-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.atlas-nav-transition-overlay.fade-out {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.atlas-nav-transition-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 1.5rem);
}

/* Spinner animé */
.atlas-nav-transition-spinner {
    position: relative;
    width: clamp(60px, 10vw, 90px);
    height: clamp(60px, 10vw, 90px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.atlas-nav-spinner-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #6366f1;
    border-right-color: #818cf8;
    animation: atlas-spinner-rotate 1.2s linear infinite;
}

.atlas-nav-spinner-ring--inner {
    inset: 8px;
    border-top-color: #22d3ee;
    border-right-color: #67e8f9;
    animation-duration: 0.8s;
    animation-direction: reverse;
}

.atlas-nav-spinner-globe {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    animation: atlas-spinner-pulse 1.5s ease-in-out infinite;
}

@keyframes atlas-spinner-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes atlas-spinner-pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 1; }
}

/* Texte de destination */
.atlas-nav-transition-text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(0.9rem, 1.8vw, 1.15rem);
    font-weight: 500;
    color: #e2e8f0;
    letter-spacing: 0.02em;
    text-align: center;
    animation: atlas-text-fade 1.8s ease-in-out infinite;
}

@keyframes atlas-text-fade {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ═══════════════════════════════════
   RESPONSIVE — Mobile < 768px
   ═══════════════════════════════════ */
@media (max-width: 768px) {
    .atlas-nav-chevron-inner {
        padding: 12px 8px;
    }
    .atlas-nav-svg {
        width: 24px;
        height: 24px;
    }
    .atlas-nav-label {
        display: none; /* Pas d'espace pour le label sur mobile */
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile < 768px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    :root {
        --atlas-navbar-height: 44px;
        --atlas-btn-size: 30px;
        --atlas-icon-size: 15px;
        --atlas-dpad-size: 26px;
    }

    .psv-navbar {
        padding: 4px 6px !important;
        gap: 1px !important;
    }

    /* Masquer D-PAD sur mobile (navigation tactile) */
    .atlas-dpad {
        display: none !important;
    }

    /* Masquer le slider zoom sur mobile (pinch to zoom) */
    .psv-zoom-range {
        display: none !important;
    }

    /* Masquer caption sur petit écran */
    .psv-caption {
        display: none !important;
    }

    .psv-compass {
        width: 40px !important;
        height: 40px !important;
        margin: 8px 0 0 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablette 769-1024px
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --atlas-navbar-height: 46px;
        --atlas-btn-size: 32px;
        --atlas-icon-size: 16px;
        --atlas-dpad-size: 28px;
    }

    .psv-zoom-range {
        width: 50px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   POPOVER INFOS PANORAMA — bouton atlas-info (navbar PSV)
   Remplace le bandeau #viewer-top-bar (supprimé pour immersion totale)
   ═══════════════════════════════════════════════════════════════ */
.atlas-pano-info-popover {
    position: absolute;
    bottom: calc(var(--atlas-navbar-h, 82px) + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 150;
    max-width: min(400px, 90vw);
    pointer-events: auto;
    animation: atlas-pano-info-in 0.3s ease;
}
.atlas-pano-info-popover.atlas-pano-info--hide {
    animation: atlas-pano-info-out 0.35s ease forwards;
}
.atlas-pano-info-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(8, 12, 28, 0.90);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 12px 18px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}
.atlas-pano-info-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.atlas-pano-info-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}
.atlas-pano-info-loc {
    display: block;
    font-size: 11px;
    color: rgba(148, 163, 184, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}
@keyframes atlas-pano-info-in {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes atlas-pano-info-out {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to   { opacity: 0; transform: translateX(-50%) translateY(12px); }
}
        --atlas-icon-size: 16px;
        --atlas-dpad-size: 28px;
    }

    .psv-zoom-range {
        width: 50px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   GALERIE — Animation élastique (slide-in depuis le bas)
   Anim class injectée par JS au moment du show-gallery event
   ═══════════════════════════════════════════════════════════════ */
@keyframes atlas-gallery-slide-in {
    0%   { transform: translateY(calc(100% + 20px)); opacity: 0;   }
    60%  { opacity: 1; }
    100% { transform: translateY(0);                opacity: 1;   }
}

.atlas-gallery-animate-in {
    animation: atlas-gallery-slide-in 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

/* ═══════════════════════════════════════════════════════════════
   ATLAS STUDIO — Bouton toggle (coin haut-droit du viewer)
   Injecté dynamiquement par JS dans #psv-direct-viewer quand IS_ADMIN === true
   ═══════════════════════════════════════════════════════════════ */
.atlas-studio-toggle-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(99, 102, 241, 0.85);   /* indigo semi-transparent */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(147, 150, 255, 0.5);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4), 0 0 0 1px rgba(255,255,255,0.08);
}

.atlas-studio-toggle-btn:hover {
    background: rgba(99, 102, 241, 1);
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.6), 0 0 0 1px rgba(255,255,255,0.15);
}

.atlas-studio-toggle-btn:active {
    transform: scale(0.96);
}

.atlas-studio-toggle-btn svg {
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   🎬 CINEMA LETTERBOX — Barres 21:9 (Intro / Outro)
   Créées dynamiquement par atlas-cinema-transition.js
   ═══════════════════════════════════════════════════════════════ */
.atlas-letterbox-bar {
    position: fixed;
    left: 0;
    right: 0;
    background: #000;
    z-index: 10000;
    pointer-events: none;
    will-change: height;
    /* height est géré par JS (transition inline) */
}

.atlas-letterbox-bar--top {
    top: 0;
}

.atlas-letterbox-bar--bottom {
    bottom: 0;
}

/* Paysage mobile : bandes encore plus minces */
@media (max-height: 500px) and (orientation: landscape) {
    .atlas-letterbox-bar {
        /* Sur paysage mobile, limiter pour garder l'essentiel visible */
        max-height: 12vh;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🎬 CINEMA UI REVEAL — Fade-in doux (toolbar, boussole, top bar)
   Classes gérées par atlas-viewer-effects.js (BLOC C — T7/T8)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Navbar (pill flottante) — fade-in doux ─── */
.psv-navbar.atlas-cinema-hidden {
    transform: translateX(-50%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.55s ease !important;
    will-change: opacity;
}
.psv-navbar.atlas-cinema-revealed {
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 0.55s ease !important;
}

/* ─── Boussole — fade-in doux ─── */
.atlas-compass-rose.atlas-cinema-hidden {
    opacity: 0 !important;
    transition: opacity 0.55s ease !important;
    will-change: opacity;
}
.atlas-compass-rose.atlas-cinema-revealed {
    opacity: 1 !important;
    transition: opacity 0.55s ease !important;
}

/* ─── Flèches VT (virtual-tour arrows) — fade-in différé ─── */
.psv-virtual-tour-arrow.atlas-cinema-hidden {
    opacity: 0 !important;
    transition: opacity 0.8s ease !important;
}
.psv-virtual-tour-arrow.atlas-cinema-revealed {
    opacity: 1 !important;
}

/* ─── Responsive mobile — (T10) ─── */
@media (max-width: 768px) {
    .psv-navbar.atlas-cinema-hidden,
    .atlas-compass-rose.atlas-cinema-hidden {
        transition: opacity 0.35s ease !important;
        transform: none !important;
    }
    .psv-virtual-tour-arrow.atlas-cinema-hidden {
        transition: opacity 0.4s ease !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🎬 CINEMA @KEYFRAMES — Animations nommées pour réutilisation (T21)
   Utilisées en alternative aux transitions CSS quand on veut rejouer
   l'animation indépendamment du changement de classe.
   ═══════════════════════════════════════════════════════════════ */

/* Toolbar slide-up (reveal) */
@keyframes atlas-toolbar-reveal {
    from {
        transform: translateX(-50%) translateY(calc(100% + 36px));
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* Toolbar slide-down (hide outro) */
@keyframes atlas-toolbar-hide {
    from {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    to {
        transform: translateX(-50%) translateY(calc(100% + 36px));
        opacity: 0;
    }
}

/* Boussole slide-down (reveal) */
@keyframes atlas-compass-reveal {
    from {
        transform: translateX(-50%) translateY(-110%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* Boussole slide-up (hide outro) */
@keyframes atlas-compass-hide {
    from {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    to {
        transform: translateX(-50%) translateY(-110%);
        opacity: 0;
    }
}

/* Top bar viewer slide-down (reveal) */
@keyframes atlas-topbar-reveal {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Flèches VT fade-in */
@keyframes atlas-vt-arrow-reveal {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Flèches VT fade-out */
@keyframes atlas-vt-arrow-hide {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Barre de progression cinéma (effet optionnel) */
@keyframes atlas-cinema-progress {
    from { width: 0%; }
    to   { width: 100%; }
}