/* Fixer la hauteur du conteneur Fancybox et cacher l'overflow */
.fancybox-wrap {
    overflow: visible !important;
}

.fancybox-outer {
    overflow: hidden !important;
}

.fancybox-inner {
    height: fit-content !important;
    max-height: 80vh;
    max-width: calc(100vw - 200px) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    margin: 0 auto;
}

.fancybox-skin {
    max-width: calc(100vw - 200px) !important;
}

/* Fixer la hauteur et largeur des images */
.fancybox-image {
    max-height: 80vh !important;
    max-width: calc(100vw - 200px) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

/* Positionner les flèches de manière fixe par rapport à la fenêtre */
.fancybox-nav {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%);
    height: auto !important;
    width: 60px !important;
    z-index: 8050 !important;
}

.fancybox-prev {
    left: 20px !important;
}

.fancybox-next {
    right: 20px !important;
}

/* Rendre les flèches toujours visibles */
.fancybox-nav span {
    visibility: visible !important;
}

/* Ajustements pour mobile */
@media (max-width: 768px) {
    .fancybox-inner {
        max-height: 70vh !important;
        max-width: calc(100vw - 120px) !important;
        height: auto !important;
    }
    
    .fancybox-skin {
        max-width: calc(100vw - 120px) !important;
    }
    
    .fancybox-image {
        max-height: 70vh !important;
        max-width: calc(100vw - 120px) !important;
    }
    
    .fancybox-prev {
        left: 10px !important;
    }
    
    .fancybox-next {
        right: 10px !important;
    }
}