/* ============================================================
   DAL'ALU — Page "Habillage extérieur"
   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-hab {
	/* Gouttières latérales : gardent hero et contenus alignés sous 1460 px */
	padding: 0 0 90px;
	overflow: hidden;
}

/* Largeur des blocs : .dal-container de global.css (80 %, comme
   l'accueil) — aucun plafond ni override ici. */

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

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

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

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

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

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

.dal-hab__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-hab__hero-panel {
	position: relative;
	color: #fff;
	padding: 48px 105px;
	border-radius: 30px 200px 200px 30px;
	max-width: 75%;
}

.dal-hab__hero-panel-bg {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--dal-red, #DC0D15);
	mix-blend-mode: hard-light;
	/* Dépliage de la vignette à l'arrivée sur la page, depuis le bord gauche */
	transform-origin: left center;
	animation: dal-vignette-deplie .6s cubic-bezier(.22, .61, .36, 1) both;
}

.dal-hab__hero-titre {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: clamp(1.85rem, 2.6vw, 40px);
	font-weight: 600;
	/* Le titre apparaît après le dépliage du fond */
	animation: dal-vignette-titre .45s ease .5s both;
}

/* ── Sections produit ──
   32 px entre chaque sous-partie (titre, marchés, texte, carte, CTA),
   92 px entre les sections. */
.dal-container.dal-hab__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-hab__produit-intro:first-of-type {
	margin-top: 64px;
}

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

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

.dal-hab__titre sup {
	font-size: 0.4em;
	top: -1em;
	position: relative;
	vertical-align: baseline;
}

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

/* Légendes des marchés : même style que sur la page gouttières depuis le
   passage aux nouveaux pictos (texte noir, picto sur 18px de haut). */
.dal-hab__marche {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
	color: #000;
}

.dal-hab__marche img {
	height: 18px;
	width: auto;
	flex: 0 0 auto;
}

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

/* ── Carte produit (Alysée) : tuile + texte, comme le catalogue gouttières ── */
.dal-hab__carte {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	max-width: 363px;
	margin-top: 32px;
}

.dal-hab__tuile-img {
	flex: 0 0 133px;
	width: 133px;
	height: 133px;
	display: block;
}

.dal-hab__carte-nom {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 600;
	color: var(--dal-red, #DC0D15);
}

.dal-hab__carte-desc {
	margin: 0 0 10px !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	color: #000;
}

/* ── Pictogrammes volets ── */
.dal-hab__pictos {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 48px;
	align-items: flex-end;
	margin-top: 32px;
}

.dal-hab__picto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.dal-hab__picto img {
	height: 64px;
	width: auto;
	display: block;
}

.dal-hab__picto p {
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 500;
	color: var(--dal-red, #DC0D15) !important;
	text-align: center;
}

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

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

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

/* ── Boutons de section ── */
/* Même principe que .dal-histoire__btn de l'accueil : géométrie et typo ici,
   couleur laissée à la variante .dal-btn--solid / --outline. */
.dal-hab__btn {
	padding: 10px 40px;
	font-size: 18px;
	font-weight: 500;
	line-height: normal;
}

.dal-hab__actions {
	display: flex;
	align-items: baseline;
	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-hab__ancre-devis {
	margin-top: 100px;
	scroll-margin-top: -35px !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
	.dal-container.dal-hab__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-hab__hero::before,
	.dal-hab__hero-img {
		inset: 0 0 0 16px;
	}

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

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

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

	.dal-hab__actions {
		gap: 16px;
	}

	.dal-hab__pictos {
		gap: 24px 32px;
	}

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

/* Mobile : le hero suit la marge latérale du container (global.css) */
@media (max-width: 600px) {
	.dal-hab__hero {
		width: auto;
		margin-left: max(16px, 4vw);
		margin-right: max(16px, 4vw);
	}
}

/* Mobile : la languette du titre vient toucher le bord gauche de l'écran
   (comme le blob du slider de l'accueil). Le hero garde sa marge latérale ;
   seule la languette la remonte, et son padding gauche la compense pour
   que le texte ne bouge pas. */
@media (max-width: 600px) {
	.dal-hab__hero-panel {
		margin-left: calc(-1 * max(16px, 4vw));
		max-width: calc(100% + max(16px, 4vw) - 24px);
		box-sizing: border-box;
		padding: 20px 32px 20px calc(max(16px, 4vw) + 32px);
		border-radius: 0 200px 200px 0;
	}
}

/* Mobile : hauteur d'image identique sur tous les hero du site
   (référence : le hero de la page histoire). */
@media (max-width: 700px) {
	.dal-hab__hero {
		min-height: 220px;
	}
}