/* Galerie : en-tête, grille (repli CSS puis justifiée par JS) et visionneuse. */
.efp-gallery__head {
	margin-bottom: var(--efp-space-2);
}

/*
 * Repli sans JS : rangées flexibles dont la hauteur cible est --efp-row.
 * Chaque élément croît selon son rapport (--efp-r) ; le pseudo-élément final
 * absorbe l'espace libre pour que la dernière rangée ne soit pas étirée.
 */
.efp-grid {
	--efp-row: 180px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--efp-gallery-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {
	.efp-grid {
		--efp-row: 280px;
	}
}

.efp-grid::after {
	content: "";
	flex-grow: 1000000;
}

.efp-grid__item {
	flex: calc(var(--efp-r) * 100) 1 calc(var(--efp-r) * var(--efp-row));
	min-width: 0;
	background: var(--efp-border);
}

.efp-grid__item a {
	display: block;
	line-height: 0;
}

.efp-grid__item picture,
.efp-grid__item img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--efp-r);
	object-fit: cover;
}

/* Justification par JS : gallery.js fixe --efp-w et --efp-h (px) sur chaque élément. */
/* JS actif : grille masquée jusqu'à sa justification, pour qu'elle apparaisse
   directement à sa place (aucun décalage de mise en page, CLS). Le HTML arrive par
   morceaux : sans cela, le navigateur peut peindre le repli CSS avant d'exécuter
   gallery.js. Filet : affichée après 3 s si le script ne s'exécute pas. */
.js .efp-grid:not(.is-justified) {
	visibility: hidden;
	animation: efp-grid-reveal 0s 3s forwards;
}

@keyframes efp-grid-reveal {
	to {
		visibility: visible;
	}
}

.efp-grid.is-justified::after {
	display: none;
}

.efp-grid.is-justified .efp-grid__item {
	flex: none;
	width: var(--efp-w);
	height: var(--efp-h);
}

.efp-grid.is-justified .efp-grid__item a,
.efp-grid.is-justified .efp-grid__item picture,
.efp-grid.is-justified .efp-grid__item img {
	width: 100%;
	height: 100%;
}

.efp-grid__item a:hover img {
	opacity: 0.88;
}

.efp-gallery__protected {
	max-width: 32rem;
}

.efp-gallery__protected input[type="password"] {
	min-height: 2.75rem;
	padding: 0 0.75rem;
	border: 1px solid var(--efp-border);
	background: var(--efp-bg);
	color: var(--efp-fg);
	font: inherit;
}

.efp-gallery__protected input[type="submit"] {
	min-height: 2.75rem;
	padding: 0 1.25rem;
	border: 1px solid var(--efp-fg);
	background: var(--efp-fg);
	color: var(--efp-bg);
	font: inherit;
	cursor: pointer;
}

/* ---------- Visionneuse (créée par lightbox.js) ---------- */
html.efp-lb-open {
	overflow: hidden;
}

.efp-lb {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #0a0a0a;
	color: #f2f2f2;
}

.efp-lb[open] {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
}

.efp-lb::backdrop {
	background: #000;
}

.efp-lb__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0.75rem;
}

.efp-lb__count {
	font-size: var(--efp-text-sm);
	letter-spacing: var(--efp-tracking);
	font-variant-numeric: tabular-nums;
}

.efp-lb__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding-inline: 0.5rem;
	touch-action: pan-y pinch-zoom;
}

.efp-lb__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: opacity 0.2s;
}

.efp-lb__img.is-loading {
	opacity: 0.35;
}

.efp-lb__caption {
	min-height: 2.5rem;
	margin: 0;
	padding: 0.75rem 1rem 0.25rem;
	text-align: center;
	font-size: var(--efp-text-sm);
	color: #d4d4d4;
}

.efp-lb__exif {
	margin: 0;
	padding: 0 1rem 1rem;
	text-align: center;
	font-size: var(--efp-text-sm);
	letter-spacing: 0.02em;
	color: #bdbdbd;
}

.efp-lb__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.efp-lb__btn:hover {
	background: rgb(255 255 255 / 0.18);
}

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

.efp-lb__btn svg {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.efp-lb__top-actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.efp-lb__play .efp-icon-play,
.efp-lb__play[data-state="paused"] .efp-icon-pause {
	display: none;
}

.efp-lb__play[data-state="paused"] .efp-icon-play {
	display: block;
}

.efp-lb__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	background: rgb(0 0 0 / 0.5);
}

.efp-lb__nav--prev {
	inset-inline-start: 0.5rem;
}

.efp-lb__nav--next {
	inset-inline-end: 0.5rem;
}