/*!
 * ER Chauffage - Page Nos services
 * Dépend de homepage.css (tokens, typographie, boutons, hero, cartes service, CTA communs).
 * Tous les blocs spécifiques sont préfixés « erh-services- » et scopés sous .erh-services-page.
 */

/* 1. HERO : composant commun en version compacte (.erh-hero--compact, défini dans homepage.css). */

/* =====================================================================
 * 2. APERÇU — réutilise .erh-services__grid / .erh-service de l'accueil
 * =================================================================== */
.erh-services-page .erh-services-overview { padding-bottom: 72px; }

/* Défilement fluide vers les sections (ancres des cartes), uniquement sur cette page */
html:has(.erh-services-page) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.erh-services-page) { scroll-behavior: auto; } }
/* Laisse de la place sous un header fixe (Astra sticky, barre admin…) */
.erh-services-page .erh-services-detail { scroll-margin-top: 96px; }

/* =====================================================================
 * 3–6. SECTIONS DÉTAILLÉES (alternées)
 * =================================================================== */
.erh-services-page .erh-services-details { position: relative; }
.erh-services-page .erh-services-detail { padding: 44px 0; background: #fff; }
.erh-services-page .erh-services-detail:first-child { padding-top: 80px; }
.erh-services-page .erh-services-detail:last-child { padding-bottom: 80px; }
.erh-services-page .erh-services-detail--reverse { background: linear-gradient(180deg, #fff 0%, var(--erh-bg-soft) 50%, #fff 100%); }

.erh-services-page .erh-services-detail__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 56px;
	align-items: center;
}
.erh-services-page .erh-services-detail--reverse .erh-services-detail__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.erh-services-page .erh-services-detail--reverse .erh-services-detail__media { order: 2; }

.erh-services-page .erh-services-detail__media {
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: var(--erh-radius);
	background: #E9F1F0;
	box-shadow: var(--erh-shadow);
}
.erh-services-page .erh-services-detail__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.erh-services-page .erh-services-detail__media:hover .erh-services-detail__img { transform: scale(1.03); }

.erh-services-page .erh-services-detail__title {
	margin: 0 0 12px;
	font-size: clamp(24px, 2.3vw, 30px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--erh-text);
}
.erh-services-page .erh-services-detail__text { max-width: 600px; margin: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--erh-muted); }

.erh-services-page .erh-services-checks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 32px;
	margin: 0 0 28px;
}
.erh-services-page .erh-services-checks li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--erh-text);
}
/* Coche turquoise dessinée en CSS (pas d'image) */
.erh-services-page .erh-services-check {
	position: relative;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--erh-primary-ink);
}
.erh-services-page .erh-services-check::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 7px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* =====================================================================
 * 7. POURQUOI NOUS CHOISIR
 * =================================================================== */
.erh-services-page .erh-services-why { background: linear-gradient(180deg, #EAF6F4 0%, var(--erh-bg-soft) 100%); }
.erh-services-page .erh-services-why .erh-head { margin-bottom: 32px; }
.erh-services-page .erh-services-why__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
}
.erh-services-page .erh-services-why__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 26px 14px 22px;
	border-radius: var(--erh-radius);
	background: #fff;
	text-align: center;
	box-shadow: var(--erh-shadow);
	transition: transform .25s ease, box-shadow .25s ease;
}
.erh-services-page .erh-services-why__item:hover { transform: translateY(-3px); box-shadow: var(--erh-shadow-hover); }
.erh-services-page .erh-services-why__icon { width: 38px; height: 38px; }
.erh-services-page .erh-services-why__title { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--erh-text); }
.erh-services-page .erh-services-why__title span { font-weight: 500; color: var(--erh-text); }

/* =====================================================================
 * 8. CTA (composant commun) — ajustements
 * =================================================================== */
.erh-services-page .erh-services-cta { padding-top: 72px; }
.erh-services-page .erh-services-cta .erh-cta__content { max-width: 720px; }
.erh-services-page .erh-services-cta .erh-cta__img { object-position: 75% 35%; }

/* =====================================================================
 * RESPONSIVE
 * =================================================================== */
@media (max-width: 1024px) {
	.erh-services-page .erh-hero__trust { grid-template-columns: repeat(2, auto); }

	.erh-services-page .erh-services-detail__inner,
	.erh-services-page .erh-services-detail--reverse .erh-services-detail__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
	.erh-services-page .erh-services-checks { grid-template-columns: 1fr; gap: 8px; }

	.erh-services-page .erh-services-why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	/* Hero empilé : texte puis image (logique commune) */
	.erh-services-page .erh-hero__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.erh-services-page .erh-services-overview { padding-bottom: 56px; }

	/* Sections détaillées empilées, image pleine largeur au-dessus du texte */
	.erh-services-page .erh-services-detail,
	.erh-services-page .erh-services-detail:first-child,
	.erh-services-page .erh-services-detail:last-child { padding: 28px 0; }
	.erh-services-page .erh-services-detail:first-child { padding-top: 56px; }
	.erh-services-page .erh-services-detail:last-child { padding-bottom: 56px; }
	.erh-services-page .erh-services-detail__inner,
	.erh-services-page .erh-services-detail--reverse .erh-services-detail__inner { grid-template-columns: 1fr; gap: 24px; }
	.erh-services-page .erh-services-detail--reverse .erh-services-detail__media { order: 0; }
	.erh-services-page .erh-services-detail__btn { width: 100%; }

	.erh-services-page .erh-services-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.erh-services-page .erh-services-why__item { padding: 20px 10px 18px; }
	.erh-services-page .erh-services-why__title { font-size: 13.5px; }

	.erh-services-page .erh-services-cta { padding-top: 56px; }
}