/* Bloque le scroll de la page quand la lightbox est affichée */
body.lightbox-open {
    overflow: hidden;
}
.lightbox-overlay {
display: none;
position: fixed;
z-index: 9;
top: 0;
left: 0;
width: 100%;
height: 100dvh;
background: rgba(255, 255, 255, 0.99);
backdrop-filter: blur(20px);
align-items: center;
justify-content: center;
cursor: zoom-out;
padding-top: 0px;
}
.lightbox-content {
    max-width: 90%;
    max-height: 80vh;
    object-fit: contain;
    animation: zoomIn 0.3s ease;
}
#lightbox-caption {
position: absolute;
color: #fff;
text-align: center;
width: 100%;
bottom: 0px;
mix-blend-mode: difference;
}
    /* Force l'invisibilité totale dès le chargement du HTML */
    #lightbox {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    #lightbox.active {
        display: flex !important; /* Ou block, selon ton CSS */
        opacity: 1 !important;
        visibility: visible !important;
    }

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}