/* ------------------------------------------------------------------
 * Visionneuse d'images
 * Comportement : assets/lightbox.js — chargement : inc/lightbox.php.
 *
 * Feuille séparée, comme le script : l'ensemble ne dépend d'aucune
 * extension et ne touche pas style.css, que plusieurs chantiers
 * modifient en parallèle.
 * ---------------------------------------------------------------- */

.be-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(0.5rem, 2vw, 1.5rem);
	padding: clamp(1rem, 4vw, 3rem);
	/* Le charbon de la palette plutôt qu'un noir pur : la photo de béton
	 * y garde ses gris, là où un fond neutre les écrase. */
	background-color: rgba(31, 39, 27, 0.94);
	overscroll-behavior: contain;
}

.be-lb[hidden] {
	display: none;
}

/* Le fond ne défile pas derrière la visionneuse. */
body.be-lb-ouvert {
	overflow: hidden;
}

/* La scène est placée explicitement dans la colonne du milieu.
 *
 * Sans cela, elle s'y trouvait par hasard : les deux flèches occupaient
 * les colonnes 1 et 3, et le placement automatique la poussait entre
 * elles. Sur une image seule — un nuancier, une photo hors galerie —
 * les flèches sont masquées, donc retirées de la grille, et la scène
 * retombait dans la première colonne, dimensionnée sur son contenu :
 * l'image se collait au bord gauche de l'écran. D'où la différence de
 * comportement entre une vignette de galerie et une image isolée. */
.be-lb__scene {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--be-space-md);
	margin: 0;
	min-width: 0;
	max-height: 100%;
}

.be-lb__img {
	display: block;
	max-width: 100%;
	/* La légende et le compteur doivent rester visibles sous l'image,
	 * y compris sur un écran bas. */
	max-height: calc(100vh - 9rem);
	width: auto;
	height: auto;
	border-radius: var(--be-radius);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
	background-color: rgba(255, 255, 255, 0.04);
}

.be-lb__bas {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: var(--be-space-sm) var(--be-space-md);
	max-width: 60ch;
	text-align: center;
}

.be-lb__legende {
	font-family: var(--be-font-display, sans-serif);
	font-size: var(--be-fs-base, 1rem);
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
}

.be-lb__compteur {
	font-size: var(--be-fs-sm, 0.9rem);
	color: rgba(247, 244, 241, 0.65);
	font-variant-numeric: tabular-nums;
}

/* --- Commandes --- */
.be-lb__fermer,
.be-lb__nav {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(247, 244, 241, 0.28);
	border-radius: 50%;
	background-color: rgba(31, 39, 27, 0.55);
	color: #fff;
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease;
}

.be-lb__fermer:hover,
.be-lb__nav:hover {
	background-color: rgba(247, 244, 241, 0.16);
	border-color: rgba(247, 244, 241, 0.6);
}

.be-lb__fermer {
	position: absolute;
	top: clamp(0.75rem, 3vw, 1.75rem);
	right: clamp(0.75rem, 3vw, 1.75rem);
	font-size: 1.75rem;
	line-height: 1;
}

/* Chevrons dessinés en bordure : aucune police d'icônes à charger. */
.be-lb__nav::before {
	content: "";
	width: 12px;
	height: 12px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.be-lb__nav--prec::before {
	transform: rotate(-135deg);
	margin-left: 4px;
}

.be-lb__nav--suiv::before {
	transform: rotate(45deg);
	margin-right: 4px;
}

.be-lb__nav[hidden] {
	display: none;
}

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

@media (max-width: 600px) {
	.be-lb {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		grid-template-areas:
			"scene"
			"nav";
		/* Sans cela, les deux rangées se répartissent la hauteur de
		 * l'écran et les flèches se retrouvent loin sous la légende. */
		align-content: center;
		row-gap: var(--be-space-lg, 2rem);
	}

	.be-lb__scene {
		grid-area: scene;
	}

	/* Les deux flèches passent sous l'image, côte à côte : sur une
	 * largeur de téléphone, elles mangeaient l'image en restant sur
	 * les côtés. */
	.be-lb__nav {
		grid-area: nav;
		justify-self: center;
	}

	.be-lb__nav--prec {
		margin-right: 4.5rem;
	}

	.be-lb__nav--suiv {
		margin-left: 4.5rem;
	}

	.be-lb__img {
		max-height: calc(100vh - 14rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.be-lb__fermer,
	.be-lb__nav {
		transition: none;
	}
}