/* ============================================================
   DAL'ALU — Page "Toiture"
   Reprend les règles de la page "Gouttière & avancée de toit" :
   conteneurs 1460 px, hero à ruban débordant, 32 px entre les
   sous-parties, 92 px entre sections, 215 px avant le formulaire.
   ============================================================ */

.dal-toit {
	/* Gouttières latérales : gardent hero et contenus alignés sous 1460 px */
	padding: 0 20px 90px;
	overflow: hidden;
}

/* Conteneurs : 100 % fluide, plafonnés à 1460 px */
.dal-toit .dal-container {
	width: 100%;
	max-width: 1460px;
	margin: 0 auto;
}

/* ── Fil d'ariane ── */
.dal-toit__fil {
	padding: 18px 0 8px;
	font-size: 13px;
	color: #888;
}

.dal-toit__fil a {
	color: #888;
	text-decoration: none;
}

.dal-toit__fil a:hover {
	color: var(--dal-red, #DC0D15);
}

.dal-toit__fil span {
	margin: 0 6px;
}

/* ── Hero : ruban rouge calé sur le cadre du contenu, image en retrait ── */
.dal-toit__hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	max-width: 1460px;
	min-height: 260px;
	margin: 8px auto 0;
}

/* Fond de repli si l'image ne charge pas, même retrait qu'elle */
.dal-toit__hero::before {
	content: "";
	position: absolute;
	inset: 0 0 0 50px;
	background: #cfcfcf;
	border-radius: 24px;
}

.dal-toit__hero-img {
	position: absolute;
	inset: 0 0 0 50px;
	width: calc(100% - 50px);
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	border-radius: 24px;
	display: block;
}

/* Ruban : cadre radius 20 px, aligné à gauche sur le conteneur */
.dal-toit__hero-panel {
	position: relative;
	color: #fff;
	padding: 26px 70px 26px 90px;
	border-radius: 20px;
	max-width: 75%;
}

.dal-toit__hero-panel-bg {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--dal-red, #DC0D15);
	mix-blend-mode: hard-light;
}

.dal-toit__hero-titre {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: clamp(1.85rem, 2.6vw, 48px);
	font-weight: 800;
}

/* ── Sections produit ──
   32 px entre chaque sous-partie (titre, marchés, texte, carte, CTA),
   92 px entre les sections. */
.dal-container.dal-toit__produit-intro {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	/* 115 px entre l'image et le contenu de droite */
	gap: 115px;
	align-items: center;
	margin-top: 92px;
}

.dal-container.dal-toit__produit-intro:first-of-type {
	margin-top: 64px;
}

.dal-toit__visuel {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 24px;
	display: block;
}

.dal-toit__titre {
	font-size: clamp(1.85rem, 2.4vw, 39px);
	font-weight: 650;
	line-height: normal;
	color: var(--dal-red, #DC0D15);
	margin: 0 0 32px;
}


/* Pictos marchés (habitat / tertiaire) */
.dal-toit__marches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin-bottom: 32px;
}

.dal-toit__marche {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
	color: #7D7D7D;
}

.dal-toit__marche img {
	height: 24px;
	width: auto;
	flex: 0 0 auto;
}

.dal-toit__col-texte p {
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	color: #000;
	margin: 0 0 14px;
}


/* ── Lien "Fiche produit" ── */
.dal-toit__fiche {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 500;
	color: #000;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dal-toit__fiche:hover {
	color: var(--dal-red, #DC0D15);
}

.dal-toit__fiche svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* ── Boutons de section ── */
.dal-toit__btn {
	padding: 10px 40px;
	color: #DC0D15;
	font-family: Qanelas, "Futura Std", Futura, "Century Gothic", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 800;
	line-height: normal;
}

.dal-toit__actions {
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
	margin-top: 32px;
}

/* Ancre "Demander un devis" : porte les 215 px d'écart avant le
   formulaire ; scroll-margin calé sur la valeur validée côté gouttières. */
.dal-toit__ancre-devis {
	margin-top: 215px;
	scroll-margin-top: -35px !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
	.dal-container.dal-toit__produit-intro {
		grid-template-columns: 1fr;
		gap: 32px;
		margin-top: 64px;
	}
}

@media (max-width: 700px) {

	/* Retrait de l'image réduit : le ruban ne déborde plus que de 16 px */
	.dal-toit__hero::before,
	.dal-toit__hero-img {
		inset: 0 0 0 16px;
	}

	.dal-toit__hero-img {
		width: calc(100% - 16px);
	}

	.dal-toit__hero-panel {
		padding: 20px 32px 20px 48px;
		max-width: 90%;
	}

	.dal-toit__btn {
		display: inline-block;
		text-align: center;
	}

	.dal-toit__actions {
		gap: 16px;
	}


	/* Valeur validée côté gouttières sur mobile */
	.dal-toit__ancre-devis {
		scroll-margin-top: -120px !important;
	}
}

/* ── Boîte à eau : zoom sur le quart haut-gauche du diptyque ──
   Le visuel source est très large ; le conteneur clippe et l'image
   est agrandie ×2 depuis le coin haut-gauche. */
.dal-toit__produit-intro--boite .dal-toit__col-visuel {
	overflow: hidden;
	border-radius: 24px;
}

.dal-toit__produit-intro--boite .dal-toit__visuel {
	/* cadrage ancré au bord gauche de la photo source : le produit
	   se retrouve vers le centre du cadre */
	object-position: left top;
	transform: scale(2);
	transform-origin: top left;
	border-radius: 0;
}