#gallery-modal,#virtual-modal {
    width: 100%;
    height: 100%;
    /* au-dessus du max Leaflet (~1000) et des contextes Elementor */
    z-index: 100000;
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
    overflow: hidden;
}

#gallery-modal.loaded,#virtual-modal.loaded {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}

#gallery-modal.open,#virtual-modal.open {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: all;
    visibility: visible;
    opacity: 1;
    /* fond assombri facon lightbox (clic dehors = fermeture, gere par le JS) */
    background-color: rgba(18, 18, 18, .88);
    /* centrage de l'iframe */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3vh 3vw;
    box-sizing: border-box;
    /* securite : si le contenu depasse la hauteur, on scrolle au lieu de couper */
    overflow-y: auto;
}

#urban-virtual-trigger:hover,.urban-virtual-trigger:hover {
    cursor: pointer;
}

/* --- Croix de fermeture --- */
.urban-modal-close {
    position: fixed;
    top: 18px;
    right: 24px;
    z-index: 110;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 32px;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.urban-modal-close:hover,
.urban-modal-close:focus-visible {
    background: rgba(0, 0, 0, .75);
    transform: scale(1.08);
    outline: none;
}

/* la croix n'apparait que quand la modale est ouverte */
#gallery-modal:not(.open) .urban-modal-close,
#virtual-modal:not(.open) .urban-modal-close {
    display: none;
}

/* #virtual-modal est un conteneur Elementor (.e-con) en flex COLONNE.
   Son enfant .e-con-inner a flex:1 1 auto et s'etirait sur toute la hauteur,
   ce qui collait la visite en haut de l'ecran. On annule ce flex-grow et on
   recentre le bloc. (NB: l'ancien CSS visait #modal-virtual-visit, un id
   absent du DOM : ces regles ne s'appliquaient jamais.) */
#virtual-modal.open > .e-con-inner {
    flex: 0 0 auto;
    height: auto !important;
    margin: auto;            /* centrage vertical + horizontal dans le flex */
    width: 100%;
    max-width: 1280px;
}

/* neutralise toute hauteur imposee par Elementor sur les wrappers du widget */
#virtual-modal .elementor-widget-urban_virtual_iframe,
#virtual-modal .elementor-widget-container,
#virtual-modal .urban-iframe-container {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
}

#virtual-modal .urban-iframe-container iframe {
    display: block;
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    max-height: 85vh;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
    background: #000;
}