/* ============ Page « Agencement sur mesure » (agencement-interieur-sur-mesure.php) ============
   Dimensions en pixels et non en rem : knacss.css pose html{font-size:62.5%}
   (voir la note dans styles.css sur le widget d'avis).
   Couleurs toujours explicites : styles.css impose *{color:#000}. */

/* La liste « Votre projet comprend » : puces alignées à gauche dans un bloc centré,
   le reste de la page étant centré. */
.prestations .agencement-liste {
	display: inline-block;
	margin: 0 auto 16px;
	padding-left: 24px;
	text-align: left;
}
/* La puce se pose sur le li : styles.css la retire sur tous les li du site. */
.prestations .agencement-liste li {
	list-style: disc;
	font-size: 1.75rem;
	line-height: 1.6;
}
.prestations .description.agencement-comprend {
	text-align: center;
}

/* Du plan au meuble : le plan d'Amandine à gauche, la photo du meuble réalisé à droite.
   Chaque vue grandit en proportion de son rapport largeur/hauteur (flex-grow posé en
   ligne par la page) : les deux images ont ainsi la même hauteur, quels que soient
   leurs formats, sans rien recadrer. */
.agencement-exemples {
	max-width: 1200px;
	margin: 40px auto;
	padding: 0 16px;
}
.agencement-exemple {
	margin: 0 0 56px;
}
.agencement-paire {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.agencement-vue {
	position: relative;
	display: block;
	flex: 1 1 0;
	min-width: 0;
	background: #fff;
}
.agencement-vue img {
	display: block;
	width: 100%;
	height: auto;
}
/* Un plan est sur fond blanc : sans filet, il se confond avec la page. */
.agencement-vue-plan {
	outline: 1px solid #E4E4DA;
	outline-offset: -1px;
}
.agencement-etiquette {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.85);
	color: #0D5B5E;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	pointer-events: none;
}
.agencement-exemple figcaption {
	margin-top: 10px;
	text-align: center;
	font-size: 17px;
	color: #0D5B5E;
}

/* Sur téléphone, le plan puis la photo, l'un sous l'autre en pleine largeur. */
@media (max-width: 767px) {
	.agencement-paire {
		flex-direction: column;
	}
	.agencement-vue {
		flex: none;
		width: 100%;
	}
}