.tableaux a[href$=".jpg"],
.tableaux a[href$=".jpeg"],
.tableaux a[href$=".png"],
.tableaux a[href$=".gif"],
.tableaux a[href$=".webp"],
.tableaux a[href$=".avif"] {
cursor: zoom-in;
}

.tableaux-lightbox {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
padding: clamp(1rem, 4vw, 3rem);
background: rgba(0, 0, 0, 0.86);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.22s ease, visibility 0.22s ease;
}

.tableaux-lightbox.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.tableaux-lightbox__figure {
max-width: min(100%, 1100px);
max-height: 100%;
margin: 0;
display: grid;
gap: 0.85rem;
justify-items: center;
}

.tableaux-lightbox__image {
display: block;
max-width: 100%;
max-height: calc(100vh - 9rem);
width: auto;
height: auto;
box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.45);
}

.tableaux-lightbox__caption {
max-width: 70ch;
color: #f6f6f6;
font-size: 0.95rem;
line-height: 1.45;
text-align: center;
}

.tableaux-lightbox__close {
position: absolute;
top: 1rem;
right: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 50%;
color: #fff;
background: rgba(0, 0, 0, 0.28);
font-size: 1.25rem;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}

.tableaux-lightbox__close:hover,
.tableaux-lightbox__close:focus-visible {
background: rgba(255, 255, 255, 0.16);
border-color: #fff;
}

body.tableaux-lightbox-open {
overflow: hidden;
}

@media (max-width: 640px) {
.tableaux-lightbox {
padding: 1rem;
}

.tableaux-lightbox__image {
max-height: calc(100vh - 7rem);
}

.tableaux-lightbox__caption {
font-size: 0.86rem;
}
}