/* ============================================================
   DAL'ALU — Page "Gouttière & avancée de toit"
   ============================================================ */

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

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

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

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

/* ── Hero : ruban rouge calé sur le cadre du contenu, image en retrait ──
   Le ruban part du bord gauche du conteneur (aligné sur les textes de la
   page) ; l'image, décalée de 50 px, est donc dépassée par la gauche.
   Même mécanique de blend que le hero "concept" : le fond rouge est
   un élément séparé en hard-light (y compris sur la partie qui déborde,
   qui reste donc translucide, pas pleine). */
.dal-gout__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-gout__hero::before {
	content: "";
	position: absolute;
	inset: 0 0 0 50px;
	background: #cfcfcf;
	border-radius: 24px;
}

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

.dal-gout__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-gout__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 (Gouttières / Avancée de toit) ──
   32 px entre chaque sous-partie (titre, marchés, texte, couleurs, CTA). */
.dal-container.dal-gout__produit-intro {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
	margin-top: 64px;
}

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

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

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

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

.dal-gout__marche svg,
.dal-gout__marche img {
	height: 18px;
	width: auto;
	flex: 0 0 auto;
}

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

/* ── Nuancier ── */
.dal-gout__couleurs-label {
	color: var(--dal-red, #DC0D15) !important;
	font-weight: 500;
	font-size: 16px;
	margin: 32px 0 12px !important;
}

.dal-gout__pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 600px;
}

.dal-gout__pastille {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
	flex: 0 0 auto;
	cursor: pointer;
}

/* Pas de contour de focus au clic (souris) ; conservé au clavier */
.dal-gout__pastille:focus:not(:focus-visible) {
	outline: none;
}

/* Infobulle : nom de la couleur au survol (ou au focus clavier) */
.dal-gout__pastille::after {
	content: attr(data-nom);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(2px);
	padding: 4px 10px;
	border-radius: 6px;
	background: #29353A;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
	z-index: 5;
}

/* Petite flèche sous la bulle */
.dal-gout__pastille::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 3px);
	left: 50%;
	transform: translateX(-50%) translateY(2px);
	border: 5px solid transparent;
	border-top-color: #29353A;
	border-bottom: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
	z-index: 5;
}

.dal-gout__pastille:hover::after,
.dal-gout__pastille:hover::before,
.dal-gout__pastille:focus-visible::after,
.dal-gout__pastille:focus-visible::before {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Même principe que .dal-histoire__btn de l'accueil ("Découvrir l'entreprise")
   : uniquement la géométrie et la typo ici, la couleur vient de la variante
   .dal-btn--solid / --outline. L'ancien color: #DC0D15 forçait le texte en
   rouge, y compris sur fond rouge. */
.dal-gout__btn {
	padding: 10px 40px;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	margin-top: 32px;
}

/* ── Catalogue produits ──
   4 cartes fluides par rangée (tuile + texte) sur toute la largeur.
   Les groupes s'alignent sur les colonnes de la rangée grâce à subgrid. */
.dal-container.dal-gout__catalogue {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 100px;
}

/* ── En-tête du catalogue : titre rouge + marchés desservis sur une ligne ── */
.dal-gout__gamme-entete {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 64px;
}

.dal-gout__gamme-titre {
	margin: 0;
	color: var(--dal-red, #DC0D15);
	font-size: 16px;
	font-weight: 800;
	line-height: normal;
}

.dal-gout__gamme-marches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
}

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

/* Pictos alignés sur une même hauteur, largeur libre (ratios différents) */
.dal-gout__gamme-marche img {
	height: 18px;
	width: auto;
	flex: 0 0 auto;
}

.dal-gout__rangee {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 28px;
}

.dal-gout__groupe {
	grid-column: span var(--dal-gout-span, 4);
	display: grid;
	grid-template-columns: subgrid;
	row-gap: 16px;
	align-content: start;
}

.dal-gout__groupe-titre {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #9B9B9B;
}

/* Les cartes se placent directement dans les colonnes du groupe */
.dal-gout__cartes {
	display: contents;
}

.dal-gout__carte {
	width: 100%;
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

/* Tuile image (cadre et pictos inclus dans le PNG) */
.dal-gout__tuile-img {
	flex: 0 0 180px;
	width: 180px;
	height: 180px;
	display: block;
}

/* Tuile vide (icône produit pas encore livrée) : même cadre, pictos seuls */
.dal-gout__tuile {
	position: relative;
	flex: 0 0 133px;
	width: 133px;
	height: 133px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #111;
	border-radius: 16px;
}

.dal-gout__tuile-marches {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	gap: 4px;
}

.dal-gout__tuile-marches svg,
.dal-gout__tuile-marches img {
	height: 16px;
	width: auto;
}

/* Nom du produit + pictos des marchés desservis sur la même ligne
   (les pictos passent à la ligne si le nom est trop long) */
.dal-gout__carte-nom {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	color: var(--dal-red, #DC0D15);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
}

.dal-gout__carte-marches {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Hauteur commune, largeur libre : les deux pictos n'ont pas le même ratio */
.dal-gout__carte-marches img {
	height: 16px;
	width: auto;
	flex: 0 0 auto;
	display: block;
}

/* ── Infobulle des pictos sans légende (tuiles produit) ──
   Ces pictos portent seuls l'information : au survol (ou au focus clavier),
   le marché desservi s'affiche. Fond très légèrement teinté et texte noir,
   contrairement aux pastilles de couleur dont la bulle est sombre. */
.dal-gout__carte-marche {
	position: relative;
	display: inline-flex;
}

.dal-gout__carte-marche:focus:not(:focus-visible) {
	outline: none;
}

.dal-gout__carte-marche::after {
	content: attr(data-nom);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(2px);
	padding: 6px 10px;
	border-radius: 6px;
	background: #2F2F2F0A;
	/* Fond quasi transparent : un voile opaque évite que le texte se
	   superpose au contenu de la carte. */
	backdrop-filter: blur(2px);
	color: #000;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
	z-index: 5;
}

.dal-gout__carte-marche:hover::after,
.dal-gout__carte-marche:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

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

/* Lien "Fiche produit" */
.dal-gout__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-gout__fiche:hover {
	color: var(--dal-red, #DC0D15);
}

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

/* ── Section "Avancée de toit" ── */
.dal-container.dal-gout__produit-intro.dal-gout__avancee {
	margin-top: 100px;
}

/* Ancre "Demander un devis" : porte les 215 px d'écart sous l'avancée de
   toit, si bien que sa position coïncide avec le haut du formulaire.
   scroll-margin compense le header sticky (~130 px) pour que le haut du
   formulaire arrive en haut de l'écran visible. */
.dal-gout__ancre-devis {
	margin-top: 100px;
	scroll-margin-top: -35px !important;
}

.dal-gout__couleurs-cols {
	display: flex;
	gap: 56px;
	flex-wrap: wrap;
	margin-top: 32px;
}

.dal-gout__couleurs-cols .dal-gout__couleurs-label {
	margin-top: 0 !important;
}

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

.dal-gout__actions .dal-gout__btn {
	margin-top: 0;
}

/* ── Responsive ── */
/* 4 × 308 px ne tiennent plus : 3 colonnes, groupes en pleine largeur */
@media (max-width: 1370px) {
	.dal-gout__rangee {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 36px;
	}

	.dal-gout__groupe {
		grid-column: 1 / -1;
	}
}

@media (max-width: 1030px) {
	.dal-gout__rangee {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.dal-container.dal-gout__produit-intro {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.dal-gout__visuel {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 700px) {

	.dal-gout__rangee,
	.dal-gout__groupe {
		display: block;
	}

	.dal-gout__groupe + .dal-gout__groupe {
		margin-top: 32px;
	}

	/* Aligné sur le bord gauche de la card de gauche (cards centrées :
	   décalage = (largeur de colonne − vignette 133px) / 2) */
	.dal-gout__groupe-titre {
		margin-left: calc((100% - 282px) / 4);
		margin-bottom: 14px;
	}

	/* Cards 2 par 2, texte sous la vignette. Chaque famille garde sa
	   propre grille : pas de mélange de familles sur une même ligne. */
	.dal-gout__cartes {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 16px;
		/* vignettes centrées dans leur colonne */
		justify-items: center;
	}

	.dal-gout__carte {
		width: auto;
		flex-direction: column;
		gap: 12px;
	}

	/* Le bloc texte ne dépasse pas la largeur de la vignette */
	.dal-gout__carte-texte {
		max-width: 133px;
	}

	.dal-container.dal-gout__catalogue {
		gap: 32px;
	}

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

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

	.dal-gout__hero-panel {
		padding: 20px 32px 20px 48px;
		/* padding compris dans la largeur → le ruban ne déborde plus à droite */
		box-sizing: border-box;
		max-width: 85%;
	}

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

	.dal-gout__actions {
		gap: 16px;
	}

	.dal-gout__actions .dal-gout__btn {
		display: inline-block;
	}

	/* Header sticky plus bas sur mobile */
	.dal-gout__ancre-devis {
		scroll-margin-top: -120px !important;
	}
}

/* Mobile : le hero suit la marge latérale du container (global.css) */
@media (max-width: 600px) {
	.dal-gout__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-gout__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-gout__hero {
		min-height: 220px;
	}
}

/* ==========================================================================
   Mobile : un slider par famille de produits
   ==========================================================================
   Défilement horizontal avec accroche : la carte visée se centre, ses voisines
   dépassent de chaque côté. Pas de boucle — chaque piste a un début et une
   fin, on ne va pas au-delà de la première ni de la dernière carte. Les cinq
   familles ont chacune leur piste, dans leur .dal-gout__groupe respectif
   (passé en display: block par le bloc 700px ci-dessus).

   Deux réglages solidaires : la piste s'étend jusqu'aux bords de l'écran
   (marge négative, comme la piste projet de l'accueil), et son padding latéral
   vaut exactement la moitié de l'espace restant autour d'une carte. Sans ce
   padding, la première et la dernière carte ne pourraient jamais venir au
   centre, le défilement s'arrêtant avant.

   Largeur en vw pure, sans plafond en px : un plafond bas laissait voir près
   d'une demi-carte de chaque côté sur les grands mobiles. Ici la part visible
   des voisines reste proportionnelle — environ 50px à 360px de large, 100px à
   600px.

   Au-dessus de 600px, la grille à deux colonnes du bloc précédent reprend la
   main : ce motif de slider est fait pour le pouce, pas pour une tablette. */
@media (max-width: 600px) {

	/* Titre aligné sur le bord du conteneur : l'indentation calée sur la
	   grille à deux colonnes n'a plus de sens ici. */
	.dal-gout__groupe-titre {
		margin-left: 0;
	}

	.dal-gout__cartes {
		--dal-gout-slide: 62vw;

		display: flex;
		grid-template-columns: none;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* Le geste ne se propage pas à la page une fois la fin atteinte */
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-inline: calc(50% - 50vw);
		padding-inline: calc((100vw - var(--dal-gout-slide)) / 2);
		padding-block: 4px;
	}

	.dal-gout__cartes::-webkit-scrollbar {
		display: none;
	}

	.dal-gout__carte {
		flex: 0 0 var(--dal-gout-slide);
		scroll-snap-align: center;
		flex-direction: column;
		/* Vignette et texte centrés dans une carte désormais plus large */
		align-items: center;
		gap: 12px;
	}

	/* Le texte suit la largeur de la carte et non celle de la vignette
	   (133px), qui rendait les descriptions très étroites. */
	.dal-gout__carte-texte {
		max-width: 100%;
	}
}