/* Page « Dômes géodésiques et zomes » (spec 06) : chargée sur cette page seule, après style.css. */

/* Retours à la ligne de la maquette : en 1920 seulement. */
@media (max-width: 1599px) {
	br.nl-domes-br { display: none; }
}

/* ---- Accompagnement : 2 dessins au trait et leurs étiquettes verticales (lecture de bas en haut).
   Desktop et laptop : composition de la maquette (729 × 935 en 1920), en % du bloc, débordant de 64 px à gauche du contenu
   quand l'écran le permet. */
.nl-domes-etiquette { writing-mode: vertical-rl; transform: rotate(180deg); }
.nl-domes-etiquette .elementor-heading-title { white-space: nowrap; }
.nl-domes-dessin img { width: 100% !important; height: auto; display: block; }
@media (min-width: 1025px) {
	.nl-domes-dessins.e-con {
		--nl-deb: min(64px, max(0px, (100vw - 1630px) / 2 - 16px));
		container-type: inline-size;
		position: relative;
		display: block;
		--width: calc(100% + var(--nl-deb));
		width: calc(100% + var(--nl-deb)) !important;
		max-width: 729px;
		margin-left: calc(-1 * var(--nl-deb));
		aspect-ratio: 729 / 935;
		height: auto;
	}
	.nl-domes-dessins > .elementor-element { position: absolute !important; margin: 0 !important; }
	.nl-domes-dessins > .nl-domes-dessin--dome { left: 0; top: 0; width: 71.6% !important; }
	.nl-domes-dessins > .nl-domes-dessin--zome { left: 33.47%; top: 48.98%; width: 66.53% !important; }
	.nl-domes-dessins > .nl-domes-etiquette { z-index: 1; }
	.nl-domes-dessins > .nl-domes-etiquette--dome { left: 70.64%; bottom: 57.75%; }
	.nl-domes-dessins > .nl-domes-etiquette--zome { left: 27.39%; bottom: 19.9%; }
	.nl-domes-dessins .nl-domes-etiquette .elementor-heading-title { font-size: clamp(1.25rem, 5.02cqw, 2.2875rem) !important; line-height: 1.2 !important; }
}
/* Tablette et mobile : les deux dessins côte à côte, étiquettes contre chacun (Dôme | étiquette, étiquette | Zome). */
@media (max-width: 1024px) {
	.nl-domes-dessins.e-con { flex-direction: row; align-items: flex-end; justify-content: center; gap: 12px; }
	.nl-domes-dessins > .nl-domes-dessin { flex: 1 1 0; min-width: 0; max-width: 300px; width: auto !important; }
	.nl-domes-dessins > .nl-domes-etiquette { flex: none; }
	.nl-domes-dessins > .nl-domes-etiquette--dome { align-self: center; }
	.nl-domes-dessins > .nl-domes-etiquette--zome { align-self: center; }
}
@media (max-width: 767px) {
	.nl-domes-dessins.e-con { gap: 6px; }
}

/* ---- Habiter : la bande passe sur le bas du filigrane crème de l'accompagnement. */
.nl-domes-habiter.e-con,
.nl-domes-accomp.e-con { position: relative; }

/* Vignettes et options : 2 par ligne sur une tablette étroite (768-900 px) pour les options. */
@media (min-width: 768px) and (max-width: 1024px) {
	.nl-domes-options.e-con > .nl-domes-option.e-con { --width: calc(50% - 12px); width: calc(50% - 12px) !important; }
}

/* ---- Atouts : 5 colonnes égales, numéros blancs sur l'or, sans retrait à gauche. */
.nl-domes-atouts-liste.nl-etapes { padding-left: 0; }
.nl-domes-atouts-liste.nl-etapes li::before { color: #fff; }

/* ---- Bloc CTA de la page : titre sur une seule ligne (« Un projet de dôme ou de zome ? »). */
@media (min-width: 768px) {
	.nl-cta-contenu .elementor-widget-heading.elementor-widget__width-initial:has(h2) {
		--container-widget-width: 1200px;
		max-width: 100%;
	}
}

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

/* ---- Europe : carte d'Europe décalée de 100 px vers la droite (pas de photo), placée dans le repère du contenu. */
@media (min-width: 1600px) {
	.nl-domes-europe > .e-con-inner > .nl-carte-europe,
	.nl-domes-europe > .nl-carte-europe { left: calc(max(20px, 50% - 815px) + 86px) !important; }
}
@media (min-width: 1025px) and (max-width: 1599px) {
	.nl-domes-europe > .e-con-inner > .nl-carte-europe,
	.nl-domes-europe > .nl-carte-europe { left: calc(max(40px, 50% - 640px) + 65px) !important; }
}

/* ---- Bloc CTA de la page : filet doré au-dessus du titre (pseudo-élément du titre : le ::before des conteneurs sert au voile
   d'Elementor), bouton plus bas sous l'accroche (maquette : 155 px), paragraphe sur la largeur de la maquette. */
.nl-cta-contenu h2.elementor-heading-title::before {
	content: "";
	display: block;
	width: 215px;
	height: 2px;
	margin: 0 auto 65px;
	background: var(--nl-or);
}
.nl-cta.e-con { --padding-top: 174px !important; }
.nl-cta-contenu.e-con > .e-con:nth-child(3) { --padding-top: 154px !important; }
@media (min-width: 1025px) {
	.nl-cta-contenu .elementor-widget-text-editor { --container-widget-width: 1000px !important; }
}
@media (max-width: 1599px) {
	.nl-cta-contenu h2.elementor-heading-title::before { width: 170px; margin-bottom: 48px; }
	.nl-cta.e-con { --padding-top: 130px !important; }
	.nl-cta-contenu.e-con > .e-con:nth-child(3) { --padding-top: 116px !important; }
}
@media (max-width: 1024px) {
	.nl-cta-contenu h2.elementor-heading-title::before { width: 150px; margin-bottom: 38px; }
	.nl-cta.e-con { --padding-top: 104px !important; }
	.nl-cta-contenu.e-con > .e-con:nth-child(3) { --padding-top: 80px !important; }
}
@media (max-width: 767px) {
	.nl-cta-contenu h2.elementor-heading-title::before { width: 120px; margin-bottom: 28px; }
	.nl-cta.e-con { --padding-top: 72px !important; }
	.nl-cta-contenu.e-con > .e-con:nth-child(3) { --padding-top: 56px !important; }
}
/* Filet du CTA désormais dans le modèle partagé (agent principal) : le pseudo-élément de la page est neutralisé. */
.nl-cta-contenu h2.elementor-heading-title::before { content: none !important; display: none !important; }
/* Passe 2 : CTA en tablette et mobile, voile plus dense sous le titre et l’accroche (croquis clair). */
@media (max-width: 1024px) { .nl-cta.e-con::before { background-color: rgba(53,45,17,.82) !important; } .nl-cta h2, .nl-cta .nl-accroche .elementor-heading-title { text-shadow: 0 1px 8px rgba(0,0,0,.45); } }