#lightbox {
position: fixed;
top: 0;
left: 0;

width: 100vw;
height: 100vh;

background-color: rgba(0, 0, 0, 0.65);

backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);

display: flex;
justify-content: center;
align-items: center;

z-index: 9999;

/* Animation */
opacity: 1;
visibility: visible;

transition:
  opacity 0.5s ease,
  visibility 0.5s ease;
}

/* Image */
#lightbox img {
max-width: 90vw;
max-height: 90vh;

border-radius: 14px;

box-shadow: 0 0 25px rgba(255,255,255,0.8);

transform: scale(1);

transition:
  transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* État fermé */
#lightbox.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}

/* Animation fermeture image */
#lightbox.hidden img {
transform: scale(0.85);
}

#close-btn {
position: absolute;
top: 0.8rem;
right: 0.8rem;
font-size: 40px;
font-weight: bold;
color: #FBFAF0;
cursor: pointer;
}

#close-btn:active {
opacity:0.6;
}