/* ============================================================
   DAL'ALU — Page "Garantie 40 ans"
   Même DA que les autres pages : conteneur 1460 px, hero à
   panneau rouge centré, bloc texte/visuel. Le formulaire
   d'activation provient du shortcode [dal_formulaire_garantie]
   (styles .dal-fp du plugin) ; quelques réglages ci-dessous.
   ============================================================ */

.dal-gar {
	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-gar__fil {
	padding: 18px 0 8px;
	font-size: 13px;
	color: #888;
}

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

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

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

/* ── Hero : bandeau étoilé + panneau rouge centré ── */
.dal-gar__hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80%;
	min-height: 260px;
	margin: 8px auto 0;
	background: #0e1636;
	border-radius: 24px;
}

.dal-gar__hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	display: block;
}

.dal-gar__hero-panel {
	position: relative;
	color: #fff;
	text-align: center;
	padding: 24px 100px;
	border-radius: 100px;
	max-width: 90%;
}

/* Panneau rouge plein (sur fond étoilé sombre) */
.dal-gar__hero-panel-bg {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--dal-red, #DC0D15);
	opacity: .92;
}

.dal-gar__hero-panel-texte {
	position: relative;
	z-index: 1;
}

.dal-gar__hero-titre {
	margin: 0;
	color: #FFF;
	text-align: center;
	font-size: 40px;
	font-weight: 600;
	line-height: normal;
}

.dal-gar__hero-sous {
	margin: 6px 0 0;
	color: #FFF;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
}

/* ── Bloc intro : texte à gauche, visuel à droite ── */
.dal-container.dal-gar__bloc {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 6vw, 90px);
	align-items: center;
	margin-top: 72px;
	/* écart supplémentaire avant le formulaire (qui a déjà 60 px de padding haut) */
	margin-bottom: 110px;
}

.dal-gar__titre {
	color: #000;
	font-size: 39px;
	font-weight: 600;
	line-height: normal;
	margin: 0 0 24px;
}

.dal-gar__titre::after {
	content: "";
	display: block;
	width: 90px;
	height: 5px;
	margin-top: 20px;
	background: var(--dal-red, #DC0D15);
	border-radius: 20px;
}

.dal-gar__texte p {
	color: #000;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0 0 16px;
}

.dal-gar__texte p:last-child {
	margin-bottom: 0;
}

.dal-gar__texte a {
	color: #000;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.dal-gar__col-visuel {
	position: relative;
}

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

/* Desktop : l'image épouse la hauteur du texte de la section.
   Le texte pilote la hauteur de la ligne, l'image (en absolu) la remplit. */
@media (min-width: 901px) {
	.dal-container.dal-gar__bloc {
		align-items: stretch;
		margin-top: 130px;
	}

	.dal-gar__visuel {
		position: absolute;
		/* 30 px plus haute que le texte, en haut comme en bas */
		inset: -50px 0;
		width: 100%;
		aspect-ratio: auto;
	}
}

/* ── Réglages du formulaire "garantie" (.dal-fp--garantie) ── */
/* Le visuel (pastille 40 ans) est déjà sur fond étoilé : pas de pastille rouge */
.dal-fp--garantie .dal-fp__visuel::before {
	display: none;
}

/* Case ronde "Le chantier est mon domicile" sur sa propre ligne */
.dal-fp--garantie .dal-fp__radio--bloc {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.4;
	cursor: pointer;
}

/* Notes / mentions légales sous le formulaire */
.dal-fp--garantie .dal-fp__note {
	margin: 12px 0 0;
	color: #000;
	font-family: "Poppins", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.dal-fp--garantie .dal-fp__note--oblig {
	color: #000;
	font-weight: 500;
}

.dal-fp--garantie .dal-fp__note a {
	color: inherit;
	text-decoration: underline;
}

/* Police des textes du formulaire */
.dal-fp--garantie .dal-fp__form {
	font-family: "Poppins", Helvetica, Arial, sans-serif;
}

.dal-fp--garantie .dal-fp__input,
.dal-fp--garantie .dal-fp__radio--bloc,
.dal-fp--garantie .dal-fp__consent-texte {
	color: #000;
	font-family: "Poppins", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.dal-fp--garantie .dal-fp__input::placeholder {
	font-family: "Poppins", Helvetica, Arial, sans-serif;
	font-size: 14px;
}

/* Inputs moins hauts */
.dal-fp--garantie .dal-fp__input {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* Bouton d'envoi centré par rapport au formulaire */
.dal-fp--garantie .dal-fp__submit {
	display: block;
	margin-left: auto;
	margin-right: auto;
	font-weight: 500;
}

/* La pastille occupe toute la hauteur du formulaire (desktop ;
   en mobile elle passe sous le formulaire, largeur limitée). */
@media (min-width: 901px) {
	.dal-fp--garantie .dal-fp__inner {
		align-items: stretch;
	}

	.dal-fp--garantie .dal-fp__visuel {
		height: 100%;
	}

	.dal-fp--garantie .dal-fp__visuel img {
		height: 100%;
		max-height: none;
		aspect-ratio: auto;
	}
}

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

	.dal-gar__col-visuel {
		order: -1;
	}

	.dal-gar__visuel {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 700px) {
	/* Hauteur de référence mobile : celle du hero de la page histoire */
	.dal-gar__hero {
		min-height: 220px;
	}

	.dal-gar__hero-panel {
		max-width: calc(100% - 40px);
		box-sizing: border-box;
	}

	.dal-gar__hero-panel {
		padding: 20px 32px;
	}

	.dal-gar__hero-titre {
		font-size: clamp(1.35rem, 6vw, 34px);
	}

	.dal-gar__titre {
		font-size: clamp(1.6rem, 7vw, 39px);
	}
}

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

/* Mobile : le titre quitte la bulle centrée pour une languette collée au
   bord gauche de l'écran (comme le blob du slider de l'accueil). Le hero
   garde sa marge latérale ; la languette la remonte et compense dans son
   padding gauche. */
@media (max-width: 600px) {
	.dal-gar__hero {
		justify-content: flex-start;
	}

	.dal-gar__hero-panel {
		margin-left: calc(-1 * max(16px, 4vw));
		width: fit-content;
		max-width: calc(100% + max(16px, 4vw) - 24px);
		box-sizing: border-box;
		padding: 18px 40px 18px calc(max(16px, 4vw) + 28px);
		border-radius: 0 100px 100px 0;
		text-align: left;
	}

	/* Le fond rouge reprend l'arrondi de la languette */
	.dal-gar__hero-panel-bg {
		border-radius: inherit;
	}

	.dal-gar__hero-titre,
	.dal-gar__hero-sous {
		text-align: left;
	}
}