/* Bouton "Visite virtuelle" sur la photo d'accueil d'un bien (ALP-116 / ALP-118) */

/* Le bloc titre forme son propre empilement : sans ça, la ligne des chiffres (.chronology) passe par-dessus le bouton */
.single-residence__header__content{ z-index: 2; }

.vv-hero{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 14px 22px;
    background: var(--primary-color);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    color: var(--white-color);
    font-family: 'Montserrat Medium', Montserrat, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-decoration: none !important;
    transition: background-color .25s ease;
}
.vv-hero:hover{ color: var(--white-color); background: var(--secondary-color); }
.vv-hero__icon, .vv-hero__arrow{ display: flex; }

/* Le cube fait un tour sur lui-même toutes les 4 s, avec un halo autour du bouton */
.vv-hero__icon{ perspective: 200px; }
.vv-hero__icon svg{ animation: vv-spin 4s ease-in-out infinite; }
.vv-hero::after{
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--primary-color);
    pointer-events: none;
    animation: vv-halo 4s ease-out infinite;
}
.vv-hero:hover .vv-hero__icon svg, .vv-hero:hover::after{ animation-play-state: paused; }
@keyframes vv-spin{
    0%, 55%{ transform: rotateY(0) scale(1); }
    70%{ transform: rotateY(180deg) scale(1.2); }
    85%, 100%{ transform: rotateY(360deg) scale(1); }
}
@keyframes vv-halo{
    0%, 55%{ transform: scale(1); opacity: 0; }
    60%{ opacity: .9; }
    100%{ transform: scale(1.12, 1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
    .vv-hero__icon svg, .vv-hero::after{ animation: none; }
}
.vv-hero__arrow{ transition: transform .25s ease; }
.vv-hero:hover .vv-hero__arrow{ transform: translateX(4px); }

/* Le contenu de la photo est centré verticalement : bouton plus compact pour ne pas remonter le titre sous le menu */
@media (max-width: 1199px){
    .vv-hero{ gap: 10px; margin-top: 12px; padding: 9px 16px; font-size: 12px; }
    .vv-hero svg{ width: 20px; height: 20px; }
}

/* Visite ouverte sur mobile : iframe bord à bord, croix lisible par-dessus, invite à pivoter en portrait */
@media (max-width: 1199px){
    .lightbox--fullscreen .lightbox__container{ margin: 0; height: 100vh; height: 100dvh; }
    .lightbox--fullscreen .lightbox__container iframe{ width: 100% !important; height: 100% !important; border: 0; }
    .lightbox--fullscreen .lightbox__close{
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        opacity: .9;
        background-color: rgba(0,0,0,.55);
        background-size: 14px 20px;
        border-radius: 50%;
    }
}
.lightbox__rotate{ display: none; }
@media (max-width: 1199px) and (orientation: portrait){
    .lightbox__rotate{
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        padding: 0 40px;
        background: rgba(0,0,0,.6);
        color: var(--white-color);
        font-family: 'Montserrat Medium', Montserrat, sans-serif;
        font-size: 15px;
        line-height: 1.5;
        text-align: center;
        animation: vv-rotate-out .4s ease 4s forwards;
    }
    .lightbox__rotate svg{ animation: vv-rotate 2s ease-in-out infinite; }
}
@keyframes vv-rotate{
    0%, 20%{ transform: rotate(0); }
    50%, 80%{ transform: rotate(-90deg); }
    100%{ transform: rotate(0); }
}
/* Disparaît seule au bout de 4 s pour qu'on puisse aussi visiter en portrait */
@keyframes vv-rotate-out{ to{ opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce){
    .lightbox__rotate svg{ animation: none; }
}