/* ============================================
   ROXWOOD MAP 3D — styles du composant (landing page)
   v4 (28/10/2026) : relief REEL de Roxwood (plus l'ile procedurale "golden
   hour" v3) -> fond de scene sombre anthracite (DA Stories), plus de ciel
   peint. Variables reutilisees depuis base.css (--bg-*, --text-*, --glass-*,
   --radius-*, --space-*, --font-*). Accent marqueur #e6053e fixe (identite
   carte), demande explicite distincte de --red-bright du theme general.
   ============================================ */

.roxwood-map3d-section {
    padding: var(--space-4xl) 0;
    position: relative;
}

.roxwood-map3d-stage {
    position: relative;
    width: 100%;
    height: 560px;
    max-height: 72vh;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg);
    background: radial-gradient(120% 100% at 50% 20%, #1c1c24 0%, #121217 55%, #0a0a0d 100%);
    /* Degage la navbar fixe quand la section est ciblee/scrollee (ancre, focus clavier). */
    scroll-margin-top: calc(var(--navbar-height, 80px) + var(--space-lg));
}

@media (max-width: 768px) {
    .roxwood-map3d-stage { height: 460px; max-height: 78vh; border-radius: var(--radius-lg); }
}

.rm3d-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: grab;
    display: block;
}
.rm3d-canvas:active { cursor: grabbing; }

.rm3d-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    background: radial-gradient(120% 100% at 50% 20%, #1c1c24 0%, #121217 55%, #0a0a0d 100%);
    z-index: 5;
    transition: opacity var(--transition-base);
}
.rm3d-loading.rm3d-hidden { opacity: 0; pointer-events: none; }
.rm3d-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--glass-border-hover);
    border-top-color: #e6053e;
    animation: rm3d-spin 0.8s linear infinite;
}
@keyframes rm3d-spin { to { transform: rotate(360deg); } }
.rm3d-loading span {
    font-size: 0.78rem;
    color: rgba(242, 242, 245, 0.85); /* sur degrade ciel fixe : tertiary = 3.3:1 */
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rm3d-hint {
    position: absolute;
    bottom: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    font-size: 0.72rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: rgba(5, 5, 10, 0.55);
    border: 1px solid var(--glass-border);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    opacity: 0.92;
    transition: opacity var(--transition-base);
    pointer-events: none;
    backdrop-filter: blur(6px);
}
.rm3d-hint.rm3d-hidden { opacity: 0; }

.rm3d-zoom {
    position: absolute;
    bottom: var(--space-lg);
    right: var(--space-lg);
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.rm3d-zoom-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(5, 5, 10, 0.6);
    border: 1px solid var(--glass-border-hover);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: background var(--transition-fast);
}
.rm3d-zoom-btn:hover { background: rgba(230, 5, 62, 0.35); }

/* --- Marqueurs POI --- */
.rm3d-poi-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}
.rm3d-poi {
    position: absolute;
    transform: translate(-50%, -100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s;
}
.rm3d-poi-pin {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(10, 8, 14, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.56rem;
    box-shadow: 0 0 0 2px rgba(230, 5, 62, 0.45), 0 3px 10px rgba(0, 0, 0, 0.55);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    transition: transform 0.15s, background 0.15s;
}
.rm3d-poi:hover .rm3d-poi-pin,
.rm3d-poi:focus-visible .rm3d-poi-pin,
.rm3d-poi.rm3d-poi-active .rm3d-poi-pin { transform: scale(1.3); background: linear-gradient(135deg, #e6053e, #ff2a5c); }

/* Etiquette masquee par defaut (survole les pastilles au centre sinon) — ne s'affiche
   qu'au survol/focus clavier, ou de facon persistante sur le POI actif (clic -> tooltip).
   Couleur de texte FIXE claire (pas var(--text-primary), qui passe en texte sombre en
   theme clair) : le fond de l'etiquette reste toujours un verre sombre, donc le texte
   doit toujours rester clair pour un contraste AA correct dans les deux themes. */
.rm3d-poi-label {
    margin-top: 5px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: #f5f3f7;
    background: rgba(10, 8, 14, 0.88);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.14);
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
}
.rm3d-poi:hover .rm3d-poi-label,
.rm3d-poi:focus-visible .rm3d-poi-label,
.rm3d-poi.rm3d-poi-active .rm3d-poi-label {
    opacity: 1;
    transform: translateY(0);
}

/* v5 (28/10) : DA stricte rouge/blanc/noir sur les pins — plus de couleur par
   categorie (retour Val : "plus aucun bleu"), seul le PICTOGRAMME distingue
   la categorie. Pastille neutre (noir/anthracite) au repos, rouge Stories au
   survol/actif — cf regles plus bas qui remplacent les anciennes variantes
   bleues/orange/violettes par categorie. */

/* --- Tooltip --- */
.rm3d-tooltip {
    position: absolute;
    z-index: 8;
    background: var(--bg-tertiary, #111118);
    border: 1px solid var(--glass-border-hover);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    max-width: 250px;
    display: none;
    box-shadow: var(--glass-shadow-lg);
}
.rm3d-tooltip.rm3d-show { display: block; }
.rm3d-tooltip-cat {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ff2a5c;
    margin-bottom: 4px;
    display: block;
}
.rm3d-tooltip h4 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
    color: var(--text-primary);
}
.rm3d-tooltip p {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 10px;
}
.rm3d-tooltip-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #ff2a5c;
    text-decoration: none;
}
.rm3d-tooltip-link:hover { color: var(--text-primary); }

/* --- Fallback statique (WebGL absent / prefers-reduced-motion) --- */
.roxwood-map3d-stage.rm3d-static {
    height: auto;
    max-height: none;
    background: var(--bg-tertiary, #111118);
}
.rm3d-fallback { position: relative; padding: var(--space-xl); }
.rm3d-fallback-sky {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(10,10,13,0.35) 0%, rgba(10,10,13,0.85) 100%), url('/images/map/roxwood3d-fallback.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.7;
}
.rm3d-fallback-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}
.rm3d-fallback-head i { color: #e6053e; margin-top: 3px; }
.rm3d-fallback-head p {
    font-size: 0.86rem;
    color: var(--text-secondary);
    margin: 0;
}
.rm3d-fallback-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
}
.rm3d-fallback-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.rm3d-fallback-cat {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.rm3d-fallback-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    text-decoration: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.rm3d-fallback-link i { color: #e6053e; width: 16px; text-align: center; }
.rm3d-fallback-link:hover { border-color: var(--glass-border-hover); background: var(--bg-glass-hover); color: var(--text-primary); }

/* ============================================
   v3 (15/10/2026) — île, filtres, activation mobile, tooltip mobile
   ============================================ */
.rm3d-filters {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    right: var(--space-md);
    z-index: 7;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.rm3d-filters::-webkit-scrollbar { display: none; }
.rm3d-filter {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #f5f3f7;
    background: rgba(10, 8, 14, 0.8); /* 0.62 : 2.4:1 sur le ciel clair de la carte */
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-full);
    padding: 6px 12px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.rm3d-filter:hover { border-color: rgba(255, 255, 255, 0.35); }
.rm3d-filter.is-active { background: #e6053e; border-color: #e6053e; }
.rm3d-filter:focus-visible,
.rm3d-zoom-btn:focus-visible,
.rm3d-mobile-activate:focus-visible,
.rm3d-exit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Bouton "Terminer" l'exploration (petit, coin haut-droit, ne recouvre pas l'île) */
.rm3d-exit {
    position: absolute;
    top: 56px;
    right: var(--space-md);
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: rgba(10, 8, 14, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    padding: 7px 12px;
    cursor: pointer;
}
.rm3d-exit.rm3d-hidden { display: none; }
.roxwood-map3d-stage.rm3d-exploring { box-shadow: 0 0 0 2px #e6053e, var(--glass-shadow-lg); }

/* Survol d'un bâtiment 3D : met en avant son marqueur */
.rm3d-poi.rm3d-poi-hover .rm3d-poi-pin { transform: scale(1.3); background: linear-gradient(135deg, #e6053e, #ff2a5c); }
.rm3d-poi.rm3d-poi-hover .rm3d-poi-label { opacity: 1; transform: translateY(0); }
.rm3d-poi-pin { width: 22px; height: 22px; font-size: 0.62rem; }

/* Pastille de regroupement (pins qui se chevauchent a l'ecran) */
.rm3d-poi-cluster .rm3d-poi-pin {
    width: 26px; height: 26px; font-size: 0.68rem;
    background: rgba(10, 8, 14, 0.95);
    border-color: rgba(230, 5, 62, 0.65);
}
.rm3d-poi-cluster .rm3d-poi-pin .rm3d-cluster-count {
    font-family: var(--font-display, inherit);
    font-weight: 700;
}
.rm3d-poi-cluster-panel {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 210px;
    background: var(--bg-tertiary, #111118);
    border: 1px solid var(--glass-border-hover);
    border-radius: var(--radius-md);
    padding: 8px;
    display: none;
    flex-direction: column;
    gap: 2px;
    box-shadow: var(--glass-shadow-lg);
    pointer-events: auto;
}
.rm3d-poi-cluster:hover .rm3d-poi-cluster-panel,
.rm3d-poi-cluster:focus-within .rm3d-poi-cluster-panel,
.rm3d-poi-cluster.rm3d-cluster-open .rm3d-poi-cluster-panel { display: flex; }
.rm3d-poi-cluster-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.74rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast);
}
.rm3d-poi-cluster-item i { color: #ff2a5c; width: 14px; text-align: center; }
.rm3d-poi-cluster-item:hover { background: var(--bg-glass-hover); }

/* Tooltip : bouton fermer + mode « feuille » en bas sur petit écran */
.rm3d-tooltip { max-width: 270px; padding-right: 34px; }
.rm3d-tooltip-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
}
.rm3d-tooltip-close:hover { color: var(--text-primary); border-color: var(--glass-border-hover); }
.rm3d-tooltip.rm3d-tooltip-sheet {
    left: var(--space-sm) !important;
    right: var(--space-sm);
    top: auto !important;
    bottom: var(--space-sm);
    max-width: none;
}
.rm3d-tooltip.rm3d-show.rm3d-tooltip-sheet ~ .rm3d-zoom,
.rm3d-tooltip.rm3d-show.rm3d-tooltip-sheet ~ .rm3d-hint { display: none; }

@media (max-width: 560px) {
    .rm3d-hint { bottom: var(--space-md); font-size: 0.66rem; max-width: calc(100% - 80px); white-space: normal; text-align: center; }
}

/* v3 : l'étiquette ne décale plus la pastille (ancrage = pied de la pastille) */
.rm3d-poi { transform: translate(-50%, -100%); }
.rm3d-poi-label { position: absolute; top: 100%; left: 50%; transform: translate(-50%, -2px); }
.rm3d-poi:hover .rm3d-poi-label,
.rm3d-poi:focus-visible .rm3d-poi-label,
.rm3d-poi.rm3d-poi-active .rm3d-poi-label,
.rm3d-poi.rm3d-poi-hover .rm3d-poi-label { transform: translate(-50%, 0); }
/* Ancrage au sol : petite ligne verticale (pas un triangle) sous le pin, qui
   descend vers le point du terrain qu'il designe (retour Val 28/10). */
.rm3d-poi-pin::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 1.5px;
    height: 9px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(230, 5, 62, 0.9), rgba(230, 5, 62, 0));
}
.rm3d-poi-pin { position: relative; margin-bottom: 9px; }
/* Les puces sont toujours sur fond sombre : texte clair fixe dans les deux thèmes */
.rm3d-hint { color: #e9e6ee; }
.rm3d-zoom-btn { color: #fff; }

/* v5 (28/10) : bouton "Explorer" + aide fusionnes, injectes SOUS la carte
   (jamais en overlay sur l'île) — remplace l'ancien .rm3d-activate centré. */
.rm3d-mobile-activate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: var(--space-sm);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    background: rgba(230, 5, 62, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-md);
    padding: 11px 16px;
    cursor: pointer;
    text-align: center;
}
.rm3d-mobile-activate i { flex: 0 0 auto; }
.rm3d-mobile-activate.rm3d-hidden { display: none; }

@media (max-width: 768px) {
    /* Carte plus grande en hauteur, boutons zoom masques (pinch suffit en
       exploration), filtres avec fondu en bord, rien ne recouvre l'île. */
    /* Hauteur réduite et proche du ratio réel de l'île (large/bas) : avec un
       cadrage qui privilégie le remplissage en LARGEUR (~90%, demandé), une
       scène trop haute laissait un grand vide sous l'île (retour Val 28/10). */
    .roxwood-map3d-stage { height: clamp(260px, 64vw, 380px); max-height: 60vh; }
    .rm3d-zoom { display: none; }
    .rm3d-filters {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
        padding-left: 18px;
        padding-right: 18px;
    }
    /* Marge a droite reservee pour la bulle de chat flottante (widget global
       du site, hors scope) qui chevauchait le texte (retour Val 28/10). */
    .rm3d-mobile-activate { width: auto; margin-right: 76px; }
}