/* ==================== PEINTURES & CADRES ==================== */

.painting {
	width: auto;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 1em auto;
}

.painting img {
	display: block;
	max-width: 100%;
	height: auto;
}

.featured-painting {
	width: inherit;
	margin: var(--spacing-medium) auto -128px;
}

/* Styles de cadres 3D (blanc, argent, or) */
.frame-white,
.frame-silver,
.frame-gold {
	border: 12px solid;
	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 16px var(--color-shadow);
	transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.frame-white {
	--frame-light: var(--frame-white-light);
	--frame-top: var(--frame-white-top);
	--frame-mid: var(--frame-white-mid);
	--frame-bottom: var(--frame-white-bottom);
	--frame-dark: var(--frame-white-dark);
	border-color: var(--frame-white-top) var(--frame-white-mid) var(--frame-white-bottom);
}

.frame-silver {
	--frame-light: var(--frame-silver-light);
	--frame-top: var(--frame-silver-top);
	--frame-mid: var(--frame-silver-mid);
	--frame-bottom: var(--frame-silver-bottom);
	--frame-dark: var(--frame-silver-dark);
	border-color: var(--frame-silver-top) var(--frame-silver-mid) var(--frame-silver-bottom);
}

.frame-gold {
	--frame-light: var(--frame-gold-light);
	--frame-top: var(--frame-gold-top);
	--frame-mid: var(--frame-gold-mid);
	--frame-bottom: var(--frame-gold-bottom);
	--frame-dark: var(--frame-gold-dark);
	border-color: var(--frame-gold-top) var(--frame-gold-mid) var(--frame-gold-bottom);
}

/* Ombres intérieures pour les images dans les cadres */
.frame-white img,
.frame-silver img,
.frame-gold img {
	box-shadow: 0 -2px 2px var(--frame-mid),
				-2px 0 2px var(--frame-bottom),
				2px 0 2px var(--frame-top),
				0 2px 2px var(--frame-mid);
}

.frame-white img {
	--frame-mid: var(--frame-white-mid);
}

.frame-silver img {
	--frame-mid: var(--frame-silver-mid);
}

.frame-gold img {
	--frame-mid: var(--frame-gold-mid);
}

/* Métadonnées des peintures */
.painting-nom {
	text-align: center;
	margin: var(--spacing-small) 2px 0;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	position: relative;

	/* Effet de fondu progressif vers le fond */
	-webkit-mask-image: linear-gradient(to right,
		rgba(0, 0, 0, 1) 0%,
		rgba(0, 0, 0, 1) 70%,
		rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(to right,
		rgba(0, 0, 0, 1) 0%,
		rgba(0, 0, 0, 1) 70%,
		rgba(0, 0, 0, 0) 100%);
}

.painting-date {
	text-align: center;
	font-size: 1.2em;
	color: var(--color-text-muted);
	margin: 2px;
}