/**
 * Page « Galerie ».
 *
 * Pas de maquette pour cette page. La mosaïque reprend le pas des autres
 * grilles du site — une, deux puis trois colonnes — et lui ajoute un rythme :
 * une photographie sur six occupe deux colonnes. C'est ce qui distingue une
 * galerie d'un tableau de vignettes, et cela se fait sans script, sur un rang
 * calculé par le sélecteur.
 *
 * Toutes les tuiles partagent le même rapport et un recadrage « cover » : les
 * photographies confiées à l'équipe n'ont pas le même format, et une grille
 * aux hauteurs inégales se lit comme un défaut d'affichage.
 *
 * Emplacement : assets/css/components/galerie.css
 */

.galerie {
	padding-block: var(--space-8) var(--section-gap);
}

.galerie__intro {
	max-width: 68ch;
	margin-inline: auto;
	font-size: var(--fs-lead);
	line-height: var(--lh-body);
	color: var(--color-text-body);
	text-align: center;
}

.galerie__album + .galerie__album {
	margin-block-start: var(--space-9);
}

.galerie__intro + .galerie__album {
	margin-block-start: var(--space-8);
}

/* ── Mosaïque ──────────────────────────────────────────────── */

.galerie__grille {
	display: grid;
	/* minmax(0, 1fr) et non 1fr : le minimum automatique d'une piste vaut la
	   taille intrinsèque de son contenu, et une photographie de 1024 px la
	   ferait déborder du conteneur dès qu'une tuile s'étale sur deux colonnes. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	margin: var(--space-6) 0 0;
	padding: 0;
	list-style: none;
}

.galerie__item {
	display: flex;
}

.galerie__vignette {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--radius-lg);
	/* Le fond ne se voit que le temps du chargement, et derrière une
	   photographie transparente. */
	background-color: var(--color-bg);
}

.galerie__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Le zoom au survol dit que la tuile s'ouvre : on n'anime que ce qui est
	   actionnable, et celle-ci l'est. */
	transition: transform var(--duration-lente) var(--ease-sortie);
}

.galerie__vignette:hover .galerie__img,
.galerie__vignette:focus-visible .galerie__img {
	transform: scale(1.04);
}

.galerie__vide {
	font-size: var(--fs-body);
	color: var(--color-text-muted);
	text-align: center;
}

/* Le fil d'Ariane ne remonte qu'à l'accueil : ce bouton refait le chemin
   inverse du « Découvrir la galerie » qui amène ici. */
.galerie__retour {
	display: flex;
	justify-content: center;
	margin-block-start: var(--space-9);
}


@media (min-width: 768px) {

	.galerie__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Une tuile sur six tient la largeur : le rythme naît là, pas dans le
	   contenu. Sur deux colonnes, elle occupe la rangée entière et son rapport
	   s'allonge, sinon elle ferait un carré démesuré.

	   La règle ne s'applique qu'à partir de six photographies : en dessous,
	   elle ne produit pas un rythme mais un déséquilibre — une grande tuile,
	   une normale, puis une orpheline. Un album court garde donc une grille
	   régulière. */
	.galerie__grille:has(> :nth-child(6)) .galerie__item:nth-child(6n + 1) {
		grid-column: span 2;
	}

	.galerie__grille:has(> :nth-child(6)) .galerie__item:nth-child(6n + 1) .galerie__vignette {
		aspect-ratio: 21 / 9;
	}

}


@media (min-width: 1200px) {

	.galerie__grille {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.galerie__grille:has(> :nth-child(6)) .galerie__item:nth-child(6n + 1) .galerie__vignette {
		aspect-ratio: 2 / 1;
	}

}


/* La préférence système coupe le zoom : ce mouvement est décoratif. */
@media (prefers-reduced-motion: reduce) {

	.galerie__img {
		transition: none !important;
	}

	.galerie__vignette:hover .galerie__img,
	.galerie__vignette:focus-visible .galerie__img {
		transform: none !important;
	}

}