/**
 * Visionneuse — affiche une photo en grand par-dessus la page.
 *
 * Pas de fichier dans template-parts/components/ : le balisage est créé par
 * main.js au premier clic, il n'existe pas dans la page tant que personne ne
 * demande à voir une photo. Le lien qui l'ouvre, lui, est du HTML ordinaire —
 * sans JavaScript il ouvre simplement le fichier.
 *
 * L'élément est un <dialog> : la touche Échap, le piège au clavier et le
 * fond inerte sont fournis par le navigateur.
 *
 * Emplacement : assets/css/components/lightbox.css
 */

.lightbox {
	/* Le reset du thème remet toutes les marges à zéro ; or c'est le margin
	   auto du navigateur qui centre un dialogue modal. Il faut le rétablir,
	   sans quoi la visionneuse s'ouvre dans l'angle de l'écran. */
	inset: 0;
	margin: auto;
	max-width: min(92vw, 1400px);
	max-height: 92vh;
	padding: 0;
	background: none;
	border: 0;
	overflow: visible;
}

.lightbox::backdrop {
	background-color: var(--e4y-overlay-dark);
}

.lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 92vh;
	width: auto;
	height: auto;
	border-radius: var(--radius-lg);
}

/* Posé sur l'angle de la photo plutôt qu'au coin de l'écran : sur un grand
   écran, la photo ne remplit pas la fenêtre et le bouton s'en éloignerait. */
.lightbox__fermer {
	position: absolute;
	inset-block-start: calc(-1 * var(--space-5));
	inset-inline-end: calc(-1 * var(--space-5));
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-7);
	height: var(--space-7);
	padding: 0;
	font-size: var(--fs-h3);
	line-height: 1;
	color: var(--color-text);
	background-color: var(--e4y-white);
	border: 0;
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-md);
	cursor: pointer;
	transition: color var(--duration) var(--ease);
}

.lightbox__fermer:hover,
.lightbox__fermer:focus-visible {
	color: var(--color-accent);
}