/* ==========================================================================
   noOpr — Lightbox (classe .sapro-lightbox, partout sur le site)
   ========================================================================== */

.sapro-lightbox {
	cursor: zoom-in;
}

a.sapro-lightbox {
	display: block;
}

.sapro-lightbox img {
	transition: opacity 300ms ease;
}

.sapro-lightbox:hover img {
	opacity: .85;
}

.sapro-lightbox:focus-visible,
.sapro-lightbox a:focus-visible {
	outline: 3px solid #4a488d;
	outline-offset: 4px;
}

html.sapro-lightbox-ouverte {
	overflow: hidden;
}

.sapro-lightbox__dialog {
	box-sizing: border-box;
	max-width: min(94vw, 1640px);   /* l'image ne dépasse jamais sa taille réelle */
	max-height: 92vh;
	padding: 20px;
	border: 0;
	background: #fff;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
	overflow: visible;
}

.sapro-lightbox__dialog[open] {
	animation: sapro-lightbox-in 300ms ease both;
}

.sapro-lightbox__dialog::backdrop {
	background: rgba(37, 36, 70, .85);
}

.sapro-lightbox__figure {
	margin: 0;
}

.sapro-lightbox__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(92vh - 40px);
	margin: 0 auto;
}

.sapro-lightbox__legende {
	max-width: 70ch;
	margin: 12px auto 0;
	text-align: center;
}

.sapro-lightbox__legende[hidden] {
	display: none;
}

/* légende présente : on garde de la place pour elle */
.sapro-lightbox__figure:has(.sapro-lightbox__legende:not([hidden])) .sapro-lightbox__image {
	max-height: calc(92vh - 110px);
}

.sapro-lightbox__fermer {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #4a488d;
	color: #fff;
	font: 400 28px/40px Arial, sans-serif;
	text-align: center;
	cursor: pointer;
}

.sapro-lightbox__fermer:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

@keyframes sapro-lightbox-in {
	from { opacity: 0; transform: scale(.96); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 479px) {
	.sapro-lightbox__dialog { padding: 10px; }
	.sapro-lightbox__fermer { top: -14px; right: -6px; }
}

@media (prefers-reduced-motion: reduce) {
	.sapro-lightbox__dialog[open] { animation: none; }
}