/* Galerie */
.mb-gallery {
	--mb-columns: 4;
	display: grid;
	grid-template-columns: repeat(var(--mb-columns), minmax(0, 1fr));
	gap: 10px;
}

.mb-gallery__item {
	margin: 0;
	overflow: hidden;
}

.mb-gallery__item a { display: block; overflow: hidden; border-radius: inherit; }

.mb-gallery__item img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.mb-gallery--zoom .mb-gallery__item a:hover img,
.mb-gallery--zoom .mb-gallery__item a:focus-visible img { transform: scale(1.05); }
.mb-gallery__item a:focus-visible { outline: 3px solid var(--mb-primary); outline-offset: 2px; }

.mb-gallery__item figcaption { margin-top: 6px; font-size: 0.875em; }

/* Mosaïque : colonnes CSS, chaque photo garde son format d'origine. */
.mb-gallery--masonry {
	display: block;
	columns: var(--mb-columns);
	column-gap: var(--mb-gap, 10px);
}
.mb-gallery--masonry .mb-gallery__item {
	break-inside: avoid;
	margin-bottom: var(--mb-gap, 10px);
}
/* Format d'origine, donné par la page (--mb-ratio) pour réserver la place avant le chargement. */
.mb-gallery--masonry .mb-gallery__item img { aspect-ratio: var(--mb-ratio, auto); }
/* Images d'attente (galerie vide) : formats variés pour visualiser la mosaïque. */
.mb-gallery--masonry .mb-gallery__item:nth-child(3n + 1) img[src$=".svg"] { aspect-ratio: 3 / 4; }