/* ============================================================
   coulisses.html — galerie éditoriale asymétrique
   Tokens de styles.css uniquement. Ombre unique = var(--shadow).
   Masonry en multi-colonnes : rythme irrégulier, quinconce naturel,
   mélange d'arches et de rectangles, 2–3 formats. Hover = zoom léger.
   ============================================================ */

.gallery-section {
	padding: var(--s-64) var(--gutter) var(--s-128);
}
.gallery {
	column-count: 3;
	column-gap: var(--s-24);
}
.gallery__fig {
	break-inside: avoid;
	margin: 0 0 var(--s-24);
	overflow: hidden;
	background-color: var(--surface-muted);
	border: 1px solid var(--hairline);
	box-shadow: var(--shadow-soft);
	transition:
		border-color 320ms var(--ease-out),
		box-shadow 420ms var(--ease-out);
}
.gallery__fig img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Formats (crop maîtrisé via object-fit cover) */
.ar-wide {
	aspect-ratio: 3 / 2;
}
.ar-tall {
	aspect-ratio: 3 / 4;
}
.ar-sq {
	aspect-ratio: 1 / 1;
}
.ar-portrait {
	aspect-ratio: 4 / 5;
}

/* L'arche — signature de la maison, sur certaines vignettes */
.gallery__fig.is-arch {
	border-radius: 999px 999px 0 0;
}

/* Micro-interaction : zoom + légère élévation au survol */
.gallery__fig img {
	transition: transform 640ms var(--ease-out);
}
@media (hover: hover) {
	.gallery__fig:hover {
		border-color: color-mix(in srgb, var(--green-soft) 36%, var(--hairline));
		box-shadow: var(--shadow);
	}
	.gallery__fig:hover img {
		transform: scale(1.06);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gallery__fig img {
		transition: none;
	}
	.gallery__fig:hover img {
		transform: none;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.gallery {
		column-count: 2;
	}
}
@media (max-width: 560px) {
	.gallery-section {
		padding-block: var(--s-48) var(--s-96);
	}
	.gallery {
		column-count: 1;
	}
	.gallery__fig {
		margin-bottom: var(--s-16);
		box-shadow: none;
	}
}