/* ==================== GALERIE D'IMAGES ==================== */

.galerie {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 24px;
	margin-bottom: -64px;
}


/* Conteneur individuel de chaque peinture dans la galerie */
.galerie-painting {
	display: grid;
	justify-items: center;
	width: min-content;
	margin: 0 0 var(--spacing-medium);
	padding: 0 0.2rem;
	cursor: pointer;
}

/* Empêcher les titres/dates longs d'élargir la vignette au-delà de l'image */
.painting-nom,
.painting-date {
	min-width: 0;
	width: 100%;
}

.galerie-painting img {
	display: block;
	width: auto;
	height: 260px;
	opacity: 0;
	transition: filter 0.8s ease-in, opacity 0.6s ease;
	filter: saturate(1) brightness(1);
}

.galerie-painting img.loaded {
	opacity: 1;
}

.galerie-painting img:hover {
	filter: saturate(0) brightness(1.2);
}

/* Cadre pour les images de galerie — utilise les variables génériques
   définies par .frame-white / .frame-silver / .frame-gold */
.frame-galerie {
	border-style: solid;
	border-width: 8px 10px var(--border-width-thick);
	border-color: var(--frame-top) var(--frame-mid) var(--frame-bottom);
	box-shadow: 0 -2px 2px var(--frame-light),
				-2px 0 2px var(--frame-top),
				2px 0 2px var(--frame-bottom),
				0 2px 2px var(--frame-dark),
				2px 4px 10px var(--color-shadow);
}

/* Cadre plus large pour la peinture principale de index.php */
.featured-painting .frame-white,
.featured-painting .frame-silver,
.featured-painting .frame-gold {
	border-width: 32px;
	box-shadow: 0 -3px 3px var(--frame-light),
				-3px 0 3px var(--frame-top),
				3px 0 3px var(--frame-bottom),
				0 3px 3px var(--frame-dark),
				3px 6px 20px var(--color-shadow);
}

.featured-painting .frame-white img,
.featured-painting .frame-silver img,
.featured-painting .frame-gold img {
	box-shadow: 0 -3px 3px var(--frame-mid),
				-3px 0 3px var(--frame-bottom),
				3px 0 3px var(--frame-top),
				0 3px 3px var(--frame-mid);
}

/* L'image vedette ne doit jamais dépasser la hauteur visible :
   100vh - header (~130px) - cadre (64px) - footer (48px) - marges (~60px) */
.featured-painting img {
	display: block;
	max-height: calc(100vh - 320px);
	max-width: 100%;
	width: auto;
	object-fit: contain;
}