/* Gabarit Contact — valeurs dérivées des nodes Figma (référence 1728).
   Sections : en-tête 157→347, formulaire 458→1017, plan 1170→1634,
   documents 1756→2092. */

.contact > section {
	position: relative;
}

/* ──────────────────── En-tête — y 157 → 347 ──────────────────────────────── */

.ct-head {
	display: grid;
	/* 467 | 129 | 374 | 110 | 549 sur les 1629 utiles (49 → 1678) */
	grid-template-columns: 28.66789% 7.91897% 22.95887% 6.75261% 33.70166%;
	padding-top: clamp(2.25rem, 3.99306vw, 4.3125rem); /* 69 : 157 − 88 */
	padding-left: 2.83565%;  /* 49 */
	padding-right: 2.89352%; /* 50 */
}

.ct-head__intro {
	grid-column: 1;
}

.ct-head__title {
	font-family: var(--ff-display);
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	color: var(--c-ink);
}

.ct-head__text {
	margin-top: clamp(0.5rem, 0.92593vw, 1rem); /* 16 */
}

/* Les deux colonnes de droite démarrent 17 px sous le titre (node y=174). */
.ct-head__coords,
.ct-head__access {
	padding-top: 17px;
}

.ct-head__coords { grid-column: 3; }
.ct-head__access { grid-column: 5; }

/* Pastille à hauteur fixe 33 dans la maquette, contre 31 pour une pastille
   qui épouse son texte. */
.ct-head__badge {
	padding-block: 11px;
}

.ct-head__coords address,
.ct-head__grid {
	margin-top: clamp(0.75rem, 1.09954vw, 1.1875rem); /* 19 */
}

.ct-head__grid {
	display: grid;
	/* 53 | 28 | reste sur les 549 de la colonne */
	grid-template-columns: 9.65392% 85.2459%;
	column-gap: 5.10018%;
}

.ct-head__grid dt {
	font-weight: 500; /* DIN Pro Medium (node 518:1572) */
}

.ct-head__grid dd {
	margin: 0;
}

/* ─────────────────── Formulaire — y 458 → 1017 ───────────────────────────── */

.ct-form {
	margin-top: clamp(3rem, 6.53935vw, 7.0625rem); /* 113 : 459 − 346 */
}

.ct-form__inner {
	width: 47.80093%; /* 826, centré */
	margin-inline: auto;
}

/* ────────────────────── Plan — y 1170 → 1634 ─────────────────────────────── */

.ct-map {
	margin-top: clamp(4rem, 8.85417vw, 9.5625rem); /* 153 : 1170 − 1017 */
	padding-left: 2.83565%;  /* 49 */
	padding-right: 2.83565%; /* 1679 — le node fait 1630 */
}

.ct-map__media {
	position: relative;
	aspect-ratio: 1630 / 464;
	overflow: hidden;
}

.ct-map__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ─────────────────── Documents — y 1756 → 2092 ───────────────────────────── */

.ct-docs {
	margin-top: clamp(3.25rem, 7.06019vw, 7.625rem);    /* 122 : 1756 − 1634 */
	margin-bottom: clamp(3rem, 6.71296vw, 7.25rem);     /* 116 avant le pied */
	padding-inline: 2.89352%;                           /* 50 → 1628 */
}

.ct-docs__badge {
	padding-block: 11px;
}

.ct-docs__grid {
	margin-top: clamp(1rem, 1.67824vw, 1.8125rem); /* 29 : 1818 − 1789 */
	display: grid;
	grid-template-columns: repeat(2, 48.46437%); /* 789 sur 1628 */
	column-gap: 3.07125%;                        /* 50 */
	row-gap: clamp(1.25rem, 1.96759vw, 2.125rem); /* 34 : 1972 − 1938 */
}

/* ─────────────────────────── Reflow ──────────────────────────────────────── */

@media (max-width: 1199px) {
	.ct-head {
		grid-template-columns: 1fr;
		row-gap: clamp(1.75rem, 4vw, 3rem);
		padding-inline: var(--gutter-text);
	}

	.ct-head__intro,
	.ct-head__coords,
	.ct-head__access {
		grid-column: 1;
	}

	.ct-head__coords,
	.ct-head__access {
		padding-top: 0;
	}

	.ct-head__title { max-width: 26ch; }
	.ct-head__text { max-width: 46ch; }

	.ct-head__grid {
		grid-template-columns: 5rem 1fr;
		column-gap: 1.75rem;
	}

	.ct-form__inner {
		width: auto;
		margin-inline: var(--gutter-text);
	}

	.ct-map,
	.ct-docs {
		padding-inline: var(--gutter-text);
	}

	.ct-docs__grid {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
}

@media (max-width: 767px) {
	.ct-map__media {
		aspect-ratio: 4 / 3;
	}
}


/* ───────────────────── Plan d'accès (Mapbox à la demande) ─────────────────── */

.ct-map__media {
	position: relative;
}

.ct-map__note {
	padding-top: clamp(0.5rem, 1vw, 0.75rem);
	font-size: var(--fs-micro);
	line-height: 1.6;
	color: var(--c-ink);
	opacity: var(--o-text);
}

/* Le plan dessiné est masqué tant que tout va bien : il ne sert que de filet si
   la carte ne peut pas charger. En « display:none » avec loading="lazy", il n'est
   même pas téléchargé. */
.ct-map__media--attente picture,
.ct-map__media--attente img {
	display: none;
}

.ct-map__media.has-fallback picture,
.ct-map__media.has-fallback img {
	display: block;
}

/* Fond neutre pendant le chargement, pour éviter un trou blanc. */
.ct-map__media--attente {
	background: color-mix(in srgb, var(--c-line) 45%, var(--c-light));
}

@supports not (background: color-mix(in srgb, red, blue)) {
	.ct-map__media--attente { background: #dfe4ea; }
}

/* Le plan apparaît en fondu : la bascule sèche se voyait.

   Sélecteur à deux classes, et ce n'est pas du zèle : Mapbox ajoute la classe
   « mapboxgl-map » à ce même élément, et sa feuille — injectée à l'exécution,
   donc après la nôtre — déclare « .mapboxgl-map { position: relative;
   overflow: hidden } ». À spécificité égale elle gagnait : le conteneur
   repassait en flux, sa hauteur tombait à zéro et son overflow découpait le
   canvas à néant. La carte était chargée, rendue, et invisible. */
.ct-map__media .ct-map__canvas {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s var(--ease-reveal);
}

.ct-map__media.has-map .ct-map__canvas {
	opacity: 1;
}



/* Marqueur : le nom de l'étude au-dessus de la punaise. */
.ct-map__pin {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.ct-map__pin-name {
	padding: 6px 10px;
	background: var(--c-light);
	color: var(--c-deep);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(20, 56, 98, 0.22);
}

.ct-map__pin svg {
	display: block;
	filter: drop-shadow(0 3px 5px rgba(20, 56, 98, 0.3));
}

/* Contrôles alignés sur le thème : angles nets, pas de rayon. */
.ct-map__media .mapboxgl-ctrl-group {
	border-radius: 0;
	box-shadow: 0 1px 4px rgba(20, 56, 98, 0.2);
}

.ct-map__media .mapboxgl-ctrl-group button {
	width: 34px;
	height: 34px;
}

/* Ni logotype ni attribution sur le plan : retirés à la demande de l'agence. */
.ct-map__media .mapboxgl-ctrl-logo,
.ct-map__media .mapboxgl-ctrl-attrib {
	display: none;
}

.ct-map__popup .mapboxgl-popup-content {
	padding: 14px 18px;
	border-radius: 0;
	font-size: var(--fs-nav);
	line-height: 1.55;
	color: var(--c-ink);
}

.ct-map__popup .mapboxgl-popup-content strong {
	color: var(--c-deep);
}