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

.erh-contact-page { --erh-input-border: #DDE5E7; --erh-error: #B42318; }

/* =====================================================================
 * 1. HERO (variante du hero commun)
 * =================================================================== */
.erh-contact-page .erh-contact-hero__content { max-width: 640px; }
.erh-contact-page .erh-contact-hero__trust { grid-template-columns: repeat(3, auto); gap: 18px 36px; }
.erh-contact-page .erh-contact-hero__trust strong { font-weight: 700; color: #fff; }

/* =====================================================================
 * 2. FORMULAIRE + COORDONNÉES
 * =================================================================== */
.erh-contact-page .erh-contact-main__grid {
	display: grid;
	grid-template-columns: minmax(0, 13fr) minmax(0, 7fr);
	gap: 32px;
	align-items: start;
}
.erh-contact-page .erh-contact-title { font-size: clamp(24px, 2.4vw, 32px); }

.erh-contact-page .erh-contact-form-card,
.erh-contact-page .erh-contact-info {
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--erh-shadow);
}
.erh-contact-page .erh-contact-form-card { padding: 40px; scroll-margin-top: 100px; }
.erh-contact-page .erh-contact-form-card:focus { outline: none; }
.erh-contact-page .erh-contact-form-card__lead { margin-bottom: 28px; font-size: 15px; }
.erh-contact-page .erh-contact-info { padding: 32px 28px; }
.erh-contact-page .erh-contact-info__text { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--erh-muted); }

/* Alertes (succès / erreur) */
.erh-contact-page .erh-contact-alert {
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 1px solid;
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.55;
}
.erh-contact-page .erh-contact-alert:focus { outline: 3px solid currentColor; outline-offset: 2px; }
.erh-contact-page .erh-contact-alert p { margin: 0; }
.erh-contact-page .erh-contact-alert ul { margin: 8px 0 0; padding-left: 18px; list-style: disc; }
.erh-contact-page .erh-contact-alert a { color: inherit; font-weight: 600; text-decoration: underline; }
.erh-contact-page .erh-contact-alert--success { border-color: #ABEFC6; background: #ECFDF3; color: #067647; }
.erh-contact-page .erh-contact-alert--error { border-color: #FECDCA; background: #FEF3F2; color: var(--erh-error); }

/* Champs */
.erh-contact-page .erh-contact-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}
.erh-contact-page .erh-contact-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.erh-contact-page .erh-contact-field--wide { grid-column: 1 / -1; }
.erh-contact-page .erh-contact-field__label { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--erh-text); }
.erh-contact-page .erh-contact-field__req { color: var(--erh-primary-ink); }

.erh-contact-page .erh-contact-field__control {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 12px 14px;
	border: 1.5px solid var(--erh-input-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	color: var(--erh-text);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.erh-contact-page .erh-contact-field__control::placeholder { color: #98A2B3; opacity: 1; }
.erh-contact-page .erh-contact-field__control:hover { border-color: #C3D1D4; }
.erh-contact-page .erh-contact-field__control:focus,
.erh-contact-page .erh-contact-field__control:focus-visible {
	outline: none;
	border-color: var(--erh-primary-dark);
	box-shadow: 0 0 0 4px rgba(69, 184, 174, .22);
}
.erh-contact-page textarea.erh-contact-field__control { min-height: 150px; resize: vertical; }
.erh-contact-page select.erh-contact-field__control {
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%231E7770' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
	cursor: pointer;
}
.erh-contact-page .has-error .erh-contact-field__control { border-color: var(--erh-error); }
.erh-contact-page .has-error .erh-contact-field__control:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, .15); }
.erh-contact-page .erh-contact-field__error { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--erh-error); }
.erh-contact-page .erh-contact-field__error[hidden] { display: none; }

/* Honeypot : hors écran (pas display:none, que certains robots détectent) */
.erh-contact-page .erh-contact-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.erh-contact-page .erh-contact-form__required { margin: 14px 0 22px; font-size: 13px; color: var(--erh-muted); }
.erh-contact-page button.erh-contact-form__submit {
	min-width: 240px;
	min-height: 52px !important;
	padding: 14px 28px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--erh-primary) !important;
	color: var(--erh-dark) !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
}
.erh-contact-page button.erh-contact-form__submit:hover { background: var(--erh-primary-light) !important; }
.erh-contact-page button.erh-contact-form__submit[disabled] { opacity: .7; cursor: progress; }
.erh-contact-page .erh-contact-form__privacy {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--erh-muted);
}
.erh-contact-page .erh-contact-form__privacy svg { color: var(--erh-primary-ink); }

/* Coordonnées */
.erh-contact-page .erh-contact-info__list { display: flex; flex-direction: column; }
.erh-contact-page .erh-contact-info__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 0;
	border-top: 1px solid var(--erh-border);
}
.erh-contact-page .erh-contact-info__item:first-child { border-top: 0; padding-top: 4px; }
.erh-contact-page .erh-contact-info__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #E8F5F3;
}
.erh-contact-page .erh-contact-info__icon .erh-icon { width: 22px; height: 22px; background-color: var(--erh-primary-ink); }
.erh-contact-page .erh-contact-info__label { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--erh-muted); }
.erh-contact-page .erh-contact-info__value { display: inline-block; margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--erh-text); word-break: break-word; }
.erh-contact-page a.erh-contact-info__value:hover { color: var(--erh-primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.erh-contact-page .erh-contact-info__sub { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--erh-muted); }

.erh-contact-page .erh-contact-social { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--erh-border); }
.erh-contact-page .erh-contact-social__label { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--erh-primary-ink); }
.erh-contact-page .erh-contact-social__list { display: flex; gap: 10px; }
.erh-contact-page .erh-contact-social__link {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--erh-primary);
	border-radius: 50%;
	color: var(--erh-primary-ink);
}
.erh-contact-page .erh-contact-social__link:hover { background: var(--erh-primary-ink); border-color: var(--erh-primary-ink); color: #fff; }

/* =====================================================================
 * 3. ZONE D'INTERVENTION
 * =================================================================== */
.erh-contact-page .erh-contact-zone__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}
.erh-contact-page .erh-contact-checks { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.erh-contact-page .erh-contact-checks li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; font-weight: 500; color: var(--erh-text); }
.erh-contact-page .erh-contact-checks__icon { width: 22px; height: 22px; background-color: var(--erh-primary-ink); }
.erh-contact-page .erh-contact-zone__map {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	background: #EDF5F4;
	box-shadow: var(--erh-shadow);
}
/* Google Maps (JS API) ou repli intégré (iframe) : même cadre, même taille → pas de CLS */
.erh-contact-page .erh-contact-map,
.erh-contact-page .erh-contact-map__frame { display: block; width: 100%; height: 100%; border: 0; }
.erh-contact-page .erh-contact-map { display: grid; place-items: center; }
.erh-contact-page .erh-contact-map.is-loaded { display: block; }
.erh-contact-page .erh-contact-map__loading { margin: 0; font-size: 14px; color: var(--erh-muted); }
.erh-contact-page .erh-contact-map__info { padding: 2px 4px; font-family: inherit; font-size: 14px; line-height: 1.45; color: var(--erh-text); }
.erh-contact-page .erh-contact-map__info strong { color: var(--erh-primary-ink); }

/* =====================================================================
 * 4. CTA (composant commun)
 * =================================================================== */
.erh-contact-page .erh-contact-cta { padding-top: 24px; }
.erh-contact-page .erh-contact-cta .erh-cta__img { object-position: 75% 35%; }

/* =====================================================================
 * RESPONSIVE
 * =================================================================== */
@media (max-width: 1024px) {
	.erh-contact-page .erh-contact-form-card { padding: 32px; }
	.erh-contact-page .erh-contact-zone__grid { gap: 36px; }
}

@media (max-width: 900px) {
	.erh-contact-page .erh-contact-main__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	.erh-contact-page .erh-contact-hero__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }

	.erh-contact-page .erh-contact-form-card { padding: 24px 18px; }
	.erh-contact-page .erh-contact-info { padding: 24px 20px; }
	.erh-contact-page .erh-contact-form__grid { grid-template-columns: 1fr; gap: 16px; }
	.erh-contact-page button.erh-contact-form__submit { width: 100%; min-width: 0; }
	.erh-contact-page .erh-contact-form__privacy { align-items: flex-start; }

	.erh-contact-page .erh-contact-zone__grid { grid-template-columns: 1fr; gap: 28px; }
	.erh-contact-page .erh-title br { display: none; }

	.erh-contact-page .erh-contact-cta { padding-top: 8px; }
}
