/* Page « Mobilier sur mesure » (spec 07) : chargée sur cette page seule, après style.css. */

/* Sections avec décors placés par rapport au contenu (et non au bord de l'écran) ; empilement des débordements :
   la photo du séquoia passe sur la section suivante, la photo des rondins sur la bande « Pourquoi ». */
.nl-mobilier-sequoia.e-con,
.nl-mobilier-rondins.e-con,
.nl-mobilier-pourquoi.e-con,
.nl-mobilier-pro.e-con { position: relative; }
.nl-mobilier-sequoia > .e-con-inner,
.nl-mobilier-rondins > .e-con-inner,
.nl-mobilier-pro > .e-con-inner,
.nl-mobilier-europe > .e-con-inner { position: relative; }
.nl-mobilier-pro .nl-filigrane-geometrie,
.nl-mobilier-rondins .nl-filigrane-creme { pointer-events: none; }

/* ---- Accompagnement : 2 photos en diagonale (proportions de la maquette), encart or foncé qui passe sous la photo 2 */
.nl-mobilier-ph1 img,
.nl-mobilier-ph2 img { width: 100%; height: auto !important; aspect-ratio: 724.5 / 589.5; }
@media (min-width: 1025px) {
	/* Cotes en % de la largeur du contenu (1630 px en 1920) : photo 1 à x 97, photo 2 à x 259, encart de x 600 à 1797. */
	.nl-mobilier-ph1-col.e-con { margin-left: -2.945%; }
	.nl-mobilier-ph2-col.e-con { flex: none; margin-left: 6.97%; }
	.nl-mobilier-encart.e-con { flex: none; margin-left: -23.5%; margin-top: 4.53%; padding-left: 28.97% !important; }
}
@media (max-width: 1024px) {
	.nl-mobilier-ph2-col.e-con { align-self: flex-end; }
	.nl-mobilier-encart.e-con { margin-top: -96px; }
}
@media (max-width: 767px) {
	.nl-mobilier-ph1 img, .nl-mobilier-ph2 img { aspect-ratio: 4 / 3; }
	.nl-mobilier-encart.e-con { margin-top: -48px; }
}

/* ---- Tables monumentales : dessins au trait (PNG à fond blanc) fondus dans l'or ; le 3e à 70 % comme la maquette */
.nl-mobilier-dessin img { width: 100%; height: auto; }
.nl-mobilier-dessin1,
.nl-mobilier-dessin2,
.nl-mobilier-dessin3,
.nl-mobilier-dessin-flux { mix-blend-mode: multiply; }
.nl-mobilier-dessin3 { opacity: .7; }
.nl-mobilier-dessin.pb-deco { pointer-events: none; }

/* ---- Tables d'extérieur : retours de la maquette entre les phrases (desktop), photo jusqu'au bord droit de l'écran */
.nl-mobilier-rondins { --nl-deborde: max(20px, calc((100vw - 1630px) / 2)); }
@media (max-width: 1599px) { .nl-mobilier-rondins { --nl-deborde: max(40px, calc((100vw - 1280px) / 2)); } }
@media (min-width: 1025px) {
	.nl-mobilier-rondins-photo.elementor-widget { width: calc(100% - 5px + var(--nl-deborde)) !important; max-width: none !important; }
}
@media (max-width: 1024px) {
	br.nl-mobilier-br { display: none; }
}

/* ---- Pourquoi choisir : 6 garanties sur une ligne (numéros blancs), colonnes à la largeur de leur libellé.
   1920 : de x 210 à 1820, soit 45 px au-delà du contenu, comme la maquette. */
.nl-mobilier-garanties.nl-etapes li::before { color: #fff; }
@media (min-width: 1025px) {
	.nl-mobilier-garanties.nl-etapes {
		box-sizing: border-box;
		padding-left: 0;
		grid-template-columns: repeat(6, auto);
		justify-content: space-between;
		column-gap: 24px;
	}
}
@media (min-width: 1600px) {
	.nl-mobilier-garanties.nl-etapes {
		width: calc(100% + 45px);
		max-width: none;
		margin-right: -45px;
		padding-left: 65px;
		column-gap: 40px;
	}
}

/* Desktop étroit (1025-1279) : les 6 libellés ne tiennent plus sur une ligne, 3 colonnes comme en tablette. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.nl-mobilier-garanties.nl-etapes { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
	.nl-mobilier-garanties.nl-etapes li br { display: none; }
}

/* ---- Europe sans photo : en tablette et en mobile, l'encart d'adresse passe sous le texte */
@media (max-width: 1024px) {
	.nl-mobilier-europe .nl-col-photo.e-con { order: 2; }
}

/* ---- Bloc CTA de la page : bouton et coordonnées plus bas sous l'accroche (161 px dans la maquette, 68 sur l'accueil) */
@media (min-width: 1600px) {
	.nl-cta-contenu > .e-con:has(.nl-cta-bouton) { --padding-top: 156px !important; }
}
@media (min-width: 1025px) and (max-width: 1599px) {
	.nl-cta-contenu > .e-con:has(.nl-cta-bouton) { --padding-top: 117px !important; }
}
/* Passe 1 : intro de « Pourquoi choisir » en brun sous 1025 px (blanc sur or trop peu contrasté). */
@media (max-width: 1024px) { .nl-mobilier-pourquoi .nl-entete + .e-con .elementor-widget-text-editor, .nl-mobilier-pourquoi > .e-con-inner > .e-con .elementor-widget-text-editor { color: var(--nl-brun) !important; } }