/* ============================================================
   contact.css — Contact & accès
   Fiches cliniques éditoriales, cartes Google à consentement,
   formulaire illustré et CTA final. Tokens de styles.css uniquement.
   ============================================================ */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Cliniques, coordonnées et accès ---------- */
.contact-clinics {
	padding: clamp(var(--s-64), 8vw, var(--s-128)) var(--gutter);
	background-color: var(--sage);
}

.contact-clinics__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	align-items: end;
	gap: var(--s-32);
	margin-bottom: clamp(var(--s-40), 6vw, var(--s-64));
}

.contact-clinics__title {
	margin: 0;
}

.contact-clinics__grid {
	display: grid;
	gap: clamp(var(--s-32), 5vw, var(--s-64));
}

.contact-card {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
	grid-template-areas:
		"body map"
		"access access";
	background-color: var(--surface);
	border: 1px solid color-mix(in srgb, var(--forest) 16%, transparent);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--shadow);
}

.contact-card:nth-child(even) {
	grid-template-columns: minmax(340px, 0.92fr) minmax(0, 1.08fr);
	grid-template-areas:
		"map body"
		"access access";
}

.contact-card > * {
	min-width: 0;
}

.contact-card:nth-child(even) .contact-card__map {
	border-right: 1px solid var(--hairline);
	border-left: 0;
}

.contact-card__body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	padding: clamp(var(--s-32), 4vw, var(--s-48));
}

.contact-card__eyebrow {
	display: flex;
	align-items: baseline;
	gap: var(--s-12);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--green-muted);
}

.contact-card__district {
	padding: 3px var(--s-8);
	border-radius: 999px;
	background-color: var(--ivory-deep);
	color: var(--forest);
}

.contact-card__name {
	max-width: 18ch;
	margin-top: var(--s-16);
	white-space: pre-line;
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.contact-card__address {
	margin-top: var(--s-24);
	font-size: 17px;
	line-height: 1.5;
}

.contact-card__address a {
	color: var(--forest);
	text-decoration-color: color-mix(in srgb, var(--miel) 68%, transparent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.contact-card__phone {
	margin-top: var(--s-16);
}

.contact-card__phone a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--font-display);
	font-size: clamp(25px, 2.4vw, 34px);
	font-weight: 500;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.contact-card__links {
	font-size: 15px;
}

.contact-card__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	color: var(--forest);
	text-decoration-color: var(--miel);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

@media (hover: hover) {
	.contact-card__address a:hover,
	.contact-card__phone a:hover,
	.contact-card__links a:hover {
		color: var(--miel-dark);
	}
}

.access-block__list {
	grid-area: access;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 0.875fr));
	margin: 0;
	padding: var(--s-20) clamp(var(--s-32), 4vw, var(--s-48)) var(--s-24);
	border-top: 1px solid var(--hairline);
	background-color: var(--surface);
}

.access-block__list > div {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	align-content: start;
	gap: var(--s-8);
	padding-inline: var(--s-20);
}

.access-block__list > div:first-child {
	padding-left: 0;
}

.access-block__list > div + div {
	border-left: 1px solid var(--hairline);
}

.access-block__list > div:last-child {
	padding-right: 0;
}

.access-block__list dt {
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--green-muted);
}

.access-block__list dd {
	max-width: 52ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--forest);
}

.contact-card__map {
	grid-area: map;
	position: relative;
	min-height: 100%;
	background-color: var(--sage-panel);
	border-left: 1px solid var(--hairline);
}

.mapbox-map,
.map-error {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 360px;
}

.mapbox-map {
	position: relative;
}

.mapbox-map .mapboxgl-canvas:focus-visible {
	outline: 3px solid var(--miel);
	outline-offset: -3px;
}

.mapbox-map .mapboxgl-ctrl-group {
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--forest) 12%, transparent);
	border-radius: 8px;
	background-color: color-mix(in srgb, var(--ivory) 94%, transparent);
	box-shadow: var(--shadow-soft);
}

.mapbox-map .mapboxgl-ctrl-group button {
	width: 36px;
	height: 36px;
}

.mapbox-map .mapboxgl-ctrl-attrib {
	font-family: var(--font-body);
	font-size: 10px;
	color: var(--forest);
}

.mapbox-marker {
	position: relative;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 3px solid var(--ivory);
	border-radius: 50% 50% 50% 0;
	background-color: var(--green-deep);
	box-shadow: 0 10px 24px rgba(31, 58, 45, 0.32);
	transform: rotate(-45deg);
	cursor: pointer;
}

.mapbox-marker::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--ivory);
	transform: translate(-50%, -50%);
}

.mapbox-marker:focus-visible {
	outline: 3px solid var(--forest);
	outline-offset: 3px;
}

.mapbox-map .mapboxgl-popup-content {
	max-width: 240px;
	padding: var(--s-12) var(--s-16);
	border: 1px solid var(--hairline);
	border-radius: 8px;
	background-color: var(--surface);
	box-shadow: var(--shadow);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--forest);
}

.mapbox-map .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
	border-top-color: var(--surface);
}

.map-error {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s-16);
	padding: var(--s-32);
	color: var(--forest);
	text-align: center;
}

.map-error a {
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.map-facade {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s-12);
	width: 100%;
	height: 100%;
	min-height: 360px;
	padding: var(--s-32);
	overflow: hidden;
	border: 0;
	background:
		linear-gradient(135deg, transparent 0 47%, color-mix(in srgb, var(--ivory) 25%, transparent) 47% 48%, transparent 48% 100%),
		linear-gradient(35deg, transparent 0 58%, color-mix(in srgb, var(--forest) 12%, transparent) 58% 59%, transparent 59% 100%),
		var(--sage-panel);
	color: var(--forest);
	text-align: center;
	cursor: pointer;
	transition: background-color 220ms var(--ease-out);
}

.map-facade[aria-busy="true"] {
	cursor: progress;
}

.map-facade::after {
	content: "";
	position: absolute;
	inset: var(--s-24);
	border: 1px solid color-mix(in srgb, var(--ivory) 38%, transparent);
	border-radius: 50% 50% 8px 8px;
	pointer-events: none;
}

.map-facade__pin {
	position: relative;
	z-index: 1;
	width: 56px;
	height: 56px;
	margin-bottom: var(--s-8);
	border: 2px solid var(--forest);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background-color: var(--miel);
	box-shadow: 0 12px 30px color-mix(in srgb, var(--forest) 20%, transparent);
}

.map-facade__pin::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: var(--forest);
	transform: translate(-50%, -50%);
}

.map-facade__label,
.map-facade__note {
	position: relative;
	z-index: 1;
}

.map-facade__label {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.map-facade__note {
	max-width: 28ch;
	font-size: 11px;
	line-height: 1.45;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--forest);
}

@media (hover: hover) {
	.map-facade:hover {
		background-color: color-mix(in srgb, var(--sage-panel) 85%, var(--ivory));
	}

	.map-facade:hover .map-facade__pin {
		background-color: var(--miel-light);
	}
}

/* ---------- Formulaire illustré ---------- */
.contact-form-section {
	display: grid;
	grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
	align-items: stretch;
	gap: clamp(var(--s-40), 7vw, var(--s-96));
	padding: clamp(var(--s-96), 11vw, var(--s-128)) var(--gutter);
	background-color: var(--ivory);
}

.contact-form-section__media {
	width: 100%;
	min-height: 720px;
	box-shadow: var(--shadow);
}

.contact-form-section__media img {
	object-position: 58% center;
}

.contact-form {
	align-self: center;
	max-width: 680px;
}

.contact-form__title {
	margin-top: var(--s-16);
}

.contact-form__lead {
	max-width: 56ch;
	margin-top: var(--s-16);
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.55;
	color: var(--green-muted);
}

.contact-form__lead:first-of-type {
	margin-top: var(--s-24);
}

.contact-form__form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-24);
	margin-top: var(--s-40);
	padding: clamp(var(--s-24), 4vw, var(--s-40));
	background-color: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: 8px;
	box-shadow: var(--shadow);
}

.contact-form__error,
.contact-form__status,
.contact-field:has(.contact-field__textarea),
.contact-form__submit {
	grid-column: 1 / -1;
}

.contact-form__error,
.contact-form__status {
	padding: var(--s-16) var(--s-24);
	border-left: 3px solid var(--miel-dark);
	border-radius: 0 4px 4px 0;
	background-color: var(--surface-muted);
	color: var(--green-muted);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.contact-form__status {
	border-left-color: var(--green-muted);
}

.contact-field {
	display: flex;
	flex-direction: column;
	gap: var(--s-8);
}

.contact-field__label {
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--green-muted);
}

.contact-field__input,
.contact-field__select,
.contact-field__textarea {
	width: 100%;
	min-height: 52px;
	padding: var(--s-12) var(--s-16);
	border: 1px solid color-mix(in srgb, var(--forest) 28%, transparent);
	border-radius: 4px;
	background-color: var(--ivory);
	color: var(--text-body);
	font-family: var(--font-body);
	font-size: 17px;
	transition:
		background-color 200ms var(--ease-out),
		border-color 200ms var(--ease-out),
		box-shadow 200ms var(--ease-out);
}

.contact-field__textarea {
	min-height: 9em;
	resize: vertical;
	line-height: 1.5;
}

.contact-field__input:hover,
.contact-field__select:hover,
.contact-field__textarea:hover {
	background-color: var(--surface);
	border-color: var(--green-soft);
}

.contact-field__input:focus-visible,
.contact-field__select:focus-visible,
.contact-field__textarea:focus-visible {
	border-color: var(--green-muted);
}

.contact-field__input[aria-invalid="true"],
.contact-field__textarea[aria-invalid="true"] {
	border-color: var(--miel-dark);
	box-shadow: 0 0 0 1px var(--miel-dark);
}

.contact-field__input::placeholder,
.contact-field__textarea::placeholder {
	color: var(--green-soft);
	opacity: 0.72;
}

.contact-form__submit {
	justify-self: start;
	margin-top: var(--s-8);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.contact-card {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
	}

	.contact-card:nth-child(even) {
		grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1fr);
	}

	.contact-form-section {
		grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
		gap: var(--s-40);
	}

	.contact-form-section__media {
		min-height: 680px;
	}
}

/* Les écrans larges mais peu hauts (portable, navigateur en demi-écran)
   doivent laisser voir toute une fiche sans donner un effet de zoom. */
@media (min-width: 801px) and (max-height: 720px) {
	.contact-clinics {
		padding-block: var(--s-64);
	}

	.contact-clinics__head {
		margin-bottom: var(--s-32);
	}

	.contact-card {
		grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
	}

	.contact-card:nth-child(even) {
		grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
	}

	.contact-card__body {
		padding: var(--s-24) var(--s-32);
	}

	.contact-card__name {
		margin-top: var(--s-12);
		font-size: clamp(26px, 2.7vw, 30px);
	}

	.contact-card__address {
		margin-top: var(--s-16);
	}

	.access-block__list {
		padding-block: var(--s-16);
	}

	.mapbox-map,
	.map-error,
	.map-facade {
		min-height: 300px;
	}
}

@media (max-width: 800px) {
	.contact-clinics__head {
		grid-template-columns: 1fr;
		gap: var(--s-16);
	}

	.contact-card {
		grid-template-columns: 1fr;
		grid-template-areas:
			"body"
			"access"
			"map";
		min-height: 0;
	}

	.contact-card:nth-child(even) {
		grid-template-columns: 1fr;
		grid-template-areas:
			"body"
			"access"
			"map";
	}

	.contact-card__map,
	.contact-card:nth-child(even) .contact-card__map {
		min-height: 320px;
		border: 0;
		border-top: 1px solid var(--hairline);
	}

	.mapbox-map,
	.map-error,
	.map-facade {
		min-height: 320px;
	}

	.access-block__list {
		grid-template-columns: 1fr;
		gap: var(--s-12);
		padding: var(--s-12) var(--s-24) var(--s-24);
	}

	.access-block__list > div,
	.access-block__list > div:first-child,
	.access-block__list > div:last-child {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: var(--s-16);
		padding: var(--s-12) 0 0;
		border-left: 0;
		border-top: 1px solid var(--hairline);
	}

	.contact-form-section {
		grid-template-columns: 1fr;
		gap: var(--s-48);
	}

	.contact-form-section__media {
		width: min(100%, 560px);
		min-height: 0;
		aspect-ratio: 4 / 5;
		margin-inline: auto;
	}

	.contact-form {
		max-width: none;
	}
}

@media (max-width: 540px) {
	.contact-clinics,
	.contact-form-section {
		padding-block: var(--s-64);
	}

	.contact-card__body {
		padding: var(--s-24);
	}

	.contact-card__name {
		font-size: clamp(28px, 9vw, 36px);
	}

	.access-block__list > div,
	.access-block__list > div:first-child,
	.access-block__list > div:last-child {
		grid-template-columns: 1fr;
		gap: var(--s-8);
	}

	.contact-card__map,
	.contact-card:nth-child(even) .contact-card__map,
	.mapbox-map,
	.map-error,
	.map-facade {
		min-height: 280px;
	}

	.map-facade::after {
		inset: var(--s-16);
	}

	.contact-form__form {
		grid-template-columns: 1fr;
		padding: var(--s-24);
	}

	.contact-form__error,
	.contact-form__status,
	.contact-field:has(.contact-field__textarea),
	.contact-form__submit {
		grid-column: auto;
	}

	.contact-form__submit {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.map-facade,
	.contact-field__input,
	.contact-field__select,
	.contact-field__textarea {
		transition: none;
	}
}