/* ═════════════════════════════════════════════════════════════════════
   /contact/ — formulaire à objets, autres demandes, sites, carte.
   Chargée automatiquement sur /contact/ ; inc/new-customer.php la met aussi
   en file sur /new-customer/ (même moteur de formulaire, même carte blanche).
   Les champs eux-mêmes sont stylés par le socle (.fsa-form*, style.css §12).
   Aucune valeur en dur : variables --fsa-* uniquement.

   16/10/2026 — revue design n°1 : ouverture éditoriale (cristal fantôme, dans
   le pattern) ; moment fort = la carte en bande pleine largeur du conteneur,
   avec les sites et l'accès dans un panneau posé dessus (§ Sites, accès, carte).

   13/11/2026 — refonte 0.9.0, direction C (lot P4, docs/85-refonte-design/lots/
   p4-lieux-editorial.md) : ouverture « à marge » (le sur-titre mono dans la marge,
   titre et chapô sur la colonne 4 ; habit « link » en fantôme) ; formulaire sur un
   aplat papier à filet d'accent, sans ombre ni rayon ; autres demandes en filets ;
   carte cadrée d'un filet, panneau des sites posé dessus (seul élément qui flotte).
   ═════════════════════════════════════════════════════════════════════ */

/* ── Ouverture à marge (Contact, New customer) ───────────────────────── */
/* Pied de l'ouverture éditoriale resserré : la bande du formulaire suit (même réserve
   que les ouvertures de Media et d'Events). */
.fsa-contact__hero .fsa-hero-inner__grid { padding-block: clamp(1.25rem, 2.6vw, 2.25rem) clamp(2.25rem, 4vw, 3.25rem); }
/* ≥ 1024 px : le sur-titre (mono, une fois par page) tient la marge (colonnes 1–3),
   calé sur le haut du titre ; titre et chapô sur la colonne 4, comme les têtes de
   section du socle. Le treillis fantôme garde le tiers droit. */
@media (min-width: 1024px) {
	.fsa-contact__hero .fsa-hero-inner__grid {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
		gap: 0 var(--fsa-col-gap);
		align-items: start;
	}
	.fsa-contact__hero .fsa-hero-inner__grid > * { grid-column: 2; }
	.fsa-contact__hero .fsa-hero-inner__grid > * + * { margin-top: clamp(1.1rem, 2vw, 1.6rem); }
	.fsa-contact__hero .fsa-hero-inner__grid > .fsa-eyebrow { grid-column: 1; grid-row: 1; margin: 0; padding-top: 1.1rem; }
	.fsa-contact__hero .fsa-hero-inner__grid > .fsa-eyebrow + * { margin-top: 0; }
}

/* ── Formulaire en carte + colonne « Other enquiries » ───────────────── */
.fsa-contact__layout {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
:where(.fsa-contact__layout) > * { margin: 0; }
.fsa-contact__layout > * { min-width: 0; }

/* Le formulaire : un aplat papier sur la bande, filet d'accent en tête (C : ni ombre,
   ni rayon). Au téléphone, les champs se posent sur la bande (plus d'aplat). */
.fsa-contact__card {
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.4vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
	background: var(--fsa-paper);
	border-top: 2px solid var(--fsa-brand);
}
:where(.fsa-contact__card) > * { margin: 0; }
.fsa-contact__title { margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem); }
.fsa-contact__card .fsa-form { max-width: none; }

.fsa-contact__aside {
	position: sticky;
	top: calc(var(--fsa-hdr-h) + 2rem);
	display: grid;
	gap: 1.1rem;
	/* design-2 B9 : « Other enquiries » sur la ligne de « Send us a message »
	   (même réserve haute que la carte du formulaire). */
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
:where(.fsa-contact__aside) > * { margin: 0; }
.fsa-contact__h { font-size: var(--fsa-fs-h3); line-height: 1.25; }
/* « Other enquiries » : des filets, plus de cartes (portes du socle) ; la demande de
   compte garde l'aplat d'appel du socle (.fsa-card--tint, papier sur la bande). */

.fsa-contact__h .fsa-pending { font-family: var(--fsa-font-mono); }

.fsa-contact__routes { gap: 1rem; }
.fsa-contact__route h3 { font-size: var(--fsa-fs-h4); }
.fsa-contact__links { margin-top: 1.1rem; gap: .5rem 1.5rem; padding: 0; list-style: none; }
.fsa-contact__links li { margin: 0; }
.fsa-contact__links .fsa-link { padding-top: 0; }
.fsa-contact__route .fsa-card__ico .fsa-wave { height: 30px; }

/* Consentement : le message d'erreur passe sous la case ET le libellé */
.fsa-contact__consent-error { grid-column: 1 / -1; }

/* Choix « Yes / No » (compte client) : la légende prend le ton des libellés */
.fsa-form__group legend { font: 500 var(--fsa-fs-m)/1.35 var(--fsa-font-title); margin-bottom: .6rem; }
.fsa-form__group .fsa-form__error { margin-top: .6rem; }

/* Confirmation d'envoi (remplace le formulaire) */
.fsa-contact__done { display: grid; justify-items: start; gap: 1.1rem; }
.fsa-contact__done:focus { outline: none; }
.fsa-contact__done:focus-visible .fsa-form__notice { outline: 2px solid var(--fsa-brand); outline-offset: 3px; }
.fsa-form__notice[tabindex="-1"]:focus { outline: none; }

/* Marqueur « à valider » posé seul dans un paragraphe */
.fsa-contact__pending { margin-top: 1rem; }
.fsa-contact__pending .fsa-pending { margin-left: 0; }

@media (max-width: 960px) {
	.fsa-contact__layout { grid-template-columns: minmax(0, 1fr); }
	.fsa-contact__aside { position: static; padding-top: 0; }
	.fsa-contact__routes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
}
@media (max-width: 600px) {
	.fsa-contact__card { padding: 1.25rem 0 0; background: none; }
}

/* Rythme du formulaire (Contact, New customer) : rangées un peu plus serrées que le
   socle, zone de message à cinq lignes visibles (elle s'agrandit à la main) — la page
   garde sa hauteur 0.8.0 malgré le rythme de bande C. */
.fsa-contact__form { gap: 1.05rem; }
.fsa-contact__form .fsa-form__pair { gap: 1.05rem 1.25rem; }
.fsa-contact__form[data-fsa-form="contact"] textarea { height: 9.5rem; min-height: 6rem; }

/* Deux champs côte à côte : une aide sous l'un n'étire pas le champ voisin
   (la grille du socle étirait l'<input> à la hauteur de la ligne). */
.fsa-contact__form .fsa-form__pair { align-items: start; }
.fsa-contact__form .fsa-form__row { align-content: start; }

/* Bouton radio en pastille : l'<input> transparent couvre toute la pastille
   (le socle le ramène à 20 px, la cible tactile se réduisait au libellé). */
.fsa-contact__form .fsa-form__choice input[type="radio"] { top: 0; left: 0; width: 100%; height: 100%; margin: 0; }

/* ── Sites, accès, carte : la bande « plan » ─────────────────────────── */
/* ≥ 1200 px : une bande arrondie de la largeur du conteneur. La carte occupe la
   droite à ses proportions (canevas de la géométrie OSM, 1000 × 702) et se fond
   dans le fond de la bande ; le panneau des sites est posé à gauche, comme le
   volet d'un plan (il ne mord que la marge de la carte : la règle des 2 km reste
   visible). « Getting here » suit la bande, en légende.
   961–1199 px : panneau et carte côte à côte. < 961 px : panneau, carte, légende.
   Sans site affichable (production, B-3) : le panneau vide se retire et la carte
   se centre dans la bande. */
:where(.fsa-contact__band) > * { margin: 0; }
.fsa-contact__band > * { min-width: 0; }
.fsa-contact__panel:not(:has(> *)) { display: none; }

.fsa-contact__panel {
	padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.25rem, 2.4vw, 1.85rem) clamp(.75rem, 1.6vw, 1.1rem);
	background: var(--fsa-paper);
	border-top: 2px solid var(--fsa-brand);
}
:where(.fsa-contact__panel) > * { margin: 0; }
:where(.fsa-contact__block) > * { margin: 0; }
.fsa-contact__block > * + * { margin-top: .5rem; }
/* Registre du panneau : la clé au-dessus de la valeur (une ligne d'adresse). */
.fsa-contact__panel .fsa-register--kv .fsa-register__row { grid-template-columns: minmax(0, 1fr); gap: .15rem; padding: .5rem 0; }
.fsa-contact__panel .fsa-register__row::before { display: none; }
.fsa-contact__panel .fsa-register--kv dd { font-size: var(--fsa-fs-m); line-height: 1.5; }
.fsa-contact__place .fsa-register--kv dd a { color: var(--fsa-brand-ink); text-underline-offset: 2px; }
@media (max-width: 600px) {
	.fsa-contact__place .fsa-register--kv dd a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; }
}
.fsa-contact__place .fsa-register--kv dd .fsa-pending { display: inline-flex; margin-left: 0; font-size: var(--fsa-fs-2xs); color: var(--fsa-muted); }

/* Légende « Getting here » : titre, puis les deux accès côte à côte. */
.fsa-contact__getting { margin-top: clamp(1.25rem, 2.2vw, 1.75rem); }
.fsa-contact__getting .fsa-register--kv .fsa-register__row { grid-template-columns: minmax(0, 1fr); gap: .25rem; padding: .65rem 0; }
.fsa-contact__getting .fsa-register__row::before { display: none; }
@media (min-width: 761px) {
	.fsa-contact__getting {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
		gap: 1rem clamp(1.5rem, 3vw, 2.5rem);
		align-items: start;
	}
	.fsa-contact__getting > * + * { margin-top: 0; }
	.fsa-contact__getting .fsa-contact__h { padding-top: .55rem; }
	.fsa-contact__ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem); }
	.fsa-contact__ways .fsa-register__row { align-content: start; border-bottom: 0; border-top: 1px solid var(--fsa-line-strong); }
}

/* Symbole des portes d'entrée : le même carré que sur la carte */
.fsa-contact__sym {
	display: inline-block;
	width: .6rem;
	height: .6rem;
	margin-right: .55rem;
	border: 2px solid var(--fsa-brand-ink);
	background: var(--fsa-paper);
	vertical-align: -.05em;
}

/* Bande « plan » (≥ 1200 px) */
@media (min-width: 1200px) {
	.fsa-contact__band {
		--fsa-map-inset: 1.5rem;
		--fsa-map-panel: 29rem;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}
	.fsa-contact__band > * { grid-area: 1 / 1; }
	.fsa-contact__band > .fsa-contact__panel {
		position: relative;
		z-index: 2;
		align-self: start;
		width: var(--fsa-map-panel);
		box-shadow: var(--fsa-sh-float); /* posé sur la carte : le seul élément qui flotte */
		/* La légende de la carte court sous le panneau, au pied de la bande. */
		margin: var(--fsa-map-inset) 0 calc(var(--fsa-map-inset) + 2.75rem) var(--fsa-map-inset);
	}
	.fsa-contact__band .fsa-contact__map {
		display: grid;
		grid-template-rows: minmax(0, 1fr) auto;
		min-height: 25rem;
		padding: 0;
		overflow: hidden;
		background: var(--fsa-paper);
		box-shadow: inset 0 0 0 1px var(--fsa-rule);
	}
	/* Passe G (13/11, audit design P2-6) : fond papier simple — plus de trame de points
	   autour de la carte (la « boîte pointillée » 0.8.0) ; le filet de 1 px du cadre suffit. */
	.fsa-contact__band .fsa-contact__map-frame {
		aspect-ratio: auto;
		border-radius: 0;
		background: var(--fsa-paper);
		box-shadow: none;
	}
	/* Le canevas garde le format de la géométrie, calé à droite, centré en
	   hauteur ; il ne glisse sous le panneau que de 20 px (marge blanche de la
	   carte) ; ses bords se fondent dans la bande. */
	.fsa-contact__band .fsa-contact__map-canvas {
		inset: 50% 0 auto auto;
		width: calc(100% - var(--fsa-map-panel) - var(--fsa-map-inset) + 20px);
		aspect-ratio: 1000 / 702.2;
		translate: 0 -50%;
		background: var(--fsa-paper);
		-webkit-mask-image: linear-gradient(90deg, transparent, var(--fsa-ink) 2.5%), linear-gradient(180deg, transparent, var(--fsa-ink) 3%, var(--fsa-ink) 97%, transparent);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(90deg, transparent, var(--fsa-ink) 2.5%), linear-gradient(180deg, transparent, var(--fsa-ink) 3%, var(--fsa-ink) 97%, transparent);
		mask-composite: intersect;
	}
	/* Sans panneau : la carte au centre, à la hauteur de la bande. */
	.fsa-contact__band:not(:has(.fsa-contact__panel > *)) .fsa-contact__map-canvas {
		inset: 50% auto auto 50%;
		width: min(100%, 25rem * 1000 / 702.2);
		translate: -50% -50%;
		-webkit-mask-image: linear-gradient(90deg, transparent, var(--fsa-ink) 6%, var(--fsa-ink) 94%, transparent), linear-gradient(180deg, transparent, var(--fsa-ink) 3%, var(--fsa-ink) 97%, transparent);
		mask-image: linear-gradient(90deg, transparent, var(--fsa-ink) 6%, var(--fsa-ink) 94%, transparent), linear-gradient(180deg, transparent, var(--fsa-ink) 3%, var(--fsa-ink) 97%, transparent);
	}
	.fsa-contact__band .fsa-contact__map > figcaption {
		margin: 0;
		padding: .8rem var(--fsa-map-inset) .85rem;
		border-top: 1px solid var(--fsa-rule);
	}
}
/* Côte à côte (961–1199 px) */
@media (min-width: 961px) and (max-width: 1199px) {
	.fsa-contact__band {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(1.5rem, 3vw, 2.5rem);
		align-items: start;
	}
	.fsa-contact__band:not(:has(.fsa-contact__panel > *)) { grid-template-columns: minmax(0, 1fr); }
	/* La carte accompagne la liste (design-2 B9 : la colonne ne s'arrête plus tôt). */
	.fsa-contact__band > .fsa-contact__map { position: sticky; top: calc(var(--fsa-hdr-h) + 2rem); }
}
@media (max-width: 960px) {
	.fsa-contact__band { display: grid; gap: .75rem; }
}

/* Carte (inc/contact.php → [fsa_contact_map]). Traits en unités du viewBox :
   réduits avec le dessin, ils restent des filets. */
.fsa-contact__map { padding: clamp(.6rem, 1.5vw, 1rem); }
.fsa-contact__map-frame {
	container: fsa-map / inline-size;
	position: relative;
	aspect-ratio: 1000 / 702.2;
	overflow: hidden;
	background: var(--fsa-paper);
	box-shadow: inset 0 0 0 1px var(--fsa-rule);
}
.fsa-contact__map-canvas { position: absolute; inset: 0; container: fsa-canvas / inline-size; }
.fsa-contact__map-svg { display: block; width: 100%; height: 100%; }
.fsa-contact__map-ground { fill: var(--fsa-paper); }
.fsa-contact__map-urban { fill: var(--fsa-surface-alt); }
.fsa-contact__map-water {
	fill: color-mix(in srgb, var(--fsa-brand-light) 34%, var(--fsa-paper));
	stroke: color-mix(in srgb, var(--fsa-brand-light) 70%, var(--fsa-paper));
	stroke-width: 1.2;
}
.fsa-contact__map-stream {
	fill: none;
	stroke: color-mix(in srgb, var(--fsa-brand-light) 72%, var(--fsa-paper));
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.fsa-contact__map-rail { fill: none; stroke: var(--fsa-line-strong); stroke-width: 1.3; stroke-dasharray: 7 5; }
.fsa-contact__map-road { fill: none; stroke: var(--fsa-line-strong); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fsa-contact__map-runway { fill: none; stroke: var(--fsa-line-strong); stroke-width: 6; }
.fsa-contact__map-border { fill: none; stroke: var(--fsa-muted); stroke-width: 1.8; stroke-dasharray: 9 6; stroke-linecap: round; opacity: .75; }
.fsa-contact__map-gate { fill: var(--fsa-paper); stroke: var(--fsa-brand-ink); stroke-width: 3; rx: 0; }
.fsa-contact__map-halo { fill: color-mix(in srgb, var(--fsa-brand) 16%, transparent); }
.fsa-contact__map-cross { fill: none; stroke: var(--fsa-brand); stroke-width: 3; stroke-linecap: round; }
.fsa-contact__map-pip { fill: var(--fsa-brand); stroke: var(--fsa-paper); stroke-width: 3; }
.fsa-contact__map-plate { fill: color-mix(in srgb, var(--fsa-paper) 90%, transparent); rx: 0; }
.fsa-contact__map-rule { fill: none; stroke: var(--fsa-muted); stroke-width: 2; }
.fsa-contact__map-north { fill: var(--fsa-muted); stroke: var(--fsa-muted); stroke-width: 2; }

/* Étiquettes en HTML : un <text> rétrécirait avec la carte (illisible à 390). */
.fsa-contact__map-labels { position: absolute; inset: 0; pointer-events: none; }
.fsa-contact__map-labels > span {
	position: absolute;
	left: var(--x);
	top: var(--y);
	white-space: nowrap;
	font: 500 var(--fsa-fs-xs)/1 var(--fsa-font-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fsa-text);
	text-shadow: 0 0 2px var(--fsa-paper), 0 0 4px var(--fsa-paper), 0 0 6px var(--fsa-paper);
}
.fsa-contact__map-pin--t { translate: -50% calc(-100% - .85rem); }
.fsa-contact__map-pin--b { translate: -50% .85rem; }
.fsa-contact__map-pin--r { translate: .9rem -50%; }
.fsa-contact__map-labels > .fsa-contact__map-zone { translate: -50% -50%; letter-spacing: .26em; color: var(--fsa-muted); }
.fsa-contact__map-labels > .fsa-contact__map-pin--here { display: grid; gap: .3rem; translate: 1.6rem -50%; }
.fsa-contact__map-pin--here b { font: 600 var(--fsa-fs-h4)/1 var(--fsa-font-title); letter-spacing: -.01em; text-transform: none; color: var(--fsa-ink); }
.fsa-contact__map-pin--here i { font-style: normal; color: var(--fsa-brand-ink); }
.fsa-contact__map-labels > .fsa-contact__map-rule-t { translate: -50% -50%; color: var(--fsa-muted); letter-spacing: .06em; text-transform: none; }
.fsa-contact__map-labels > .fsa-contact__map-north-t { translate: -50% -50%; color: var(--fsa-muted); }

/* Canevas étroit (téléphone) : le nom des pays et les repères cèdent la place */
@container fsa-canvas (max-width: 30rem) {
	.fsa-contact__map-labels > span { font-size: var(--fsa-fs-2xs); letter-spacing: .06em; }
	.fsa-contact__map-labels > .fsa-contact__map-zone { letter-spacing: .16em; }
	.fsa-contact__map-pin--here b { font-size: var(--fsa-fs-base); }
	.fsa-contact__map-labels > .fsa-contact__map-pin--here { translate: 1.1rem -50%; }
	.fsa-contact__map-pin--t { translate: -50% calc(-100% - .55rem); }
	.fsa-contact__map-pin--b { translate: -50% .55rem; }
	.fsa-contact__map-pin--r { translate: .6rem -50%; }
}

/* Marqueur « à valider » posé sous le chapô d'une ouverture (New customer ; vide en
   production) : il suit le chapô de près. */
.fsa-contact__hero .fsa-hero-inner__grid > .fsa-contact__pending { margin-top: .75rem; }

/* Case à cocher (consentement) : cible de 44 px, dans le socle (style.css § 13) depuis la passe F. */

/* Bande carte SANS panneau (13/11/2026, après la mise en ligne) : en production, tant que les
   adresses des sites (fsa-contact.json → sites.*) sont vides, [fsa_contact_sites] ne rend rien
   et le panneau reste vide. Avant : la carte, à 570 px au centre d'un cadre de 1 240 × 354,
   débordait en hauteur (« France », « Switzerland » rognés) entre deux grands vides. Ici : la
   carte à son format (8 colonnes), « Getting here » à côté (4 colonnes). Dès qu'une adresse est
   remplie, le panneau revient et la composition d'origine aussi (règles ci-dessus). */
@media (min-width: 961px) {
	/* Trame de la section (un :has() ne peut pas en contenir un autre : la condition « sans
	   panneau » est portée par la bande, puis par son voisin « Getting here »). Avec panneau,
	   la bande et la légende restent deux rangées pleine largeur, comme avant. */
	.fsa-contact__place .fsa-wrap {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--fsa-col-gap);
		align-items: center;
	}
	.fsa-contact__place .fsa-wrap > * { grid-column: 1 / -1; min-width: 0; }
	.fsa-contact__place .fsa-wrap > .fsa-contact__band:not(:has(.fsa-contact__panel > *)) {
		grid-column: 1 / span 8;
		grid-row: 1;
		display: block;
	}
	.fsa-contact__band:not(:has(.fsa-contact__panel > *)) > .fsa-contact__panel { display: none; }
	.fsa-contact__band:not(:has(.fsa-contact__panel > *)) .fsa-contact__map {
		display: block;
		position: static;
		min-height: 0;
		padding: 0;
		box-shadow: inset 0 0 0 1px var(--fsa-rule);
	}
	.fsa-contact__band:not(:has(.fsa-contact__panel > *)) .fsa-contact__map-frame { aspect-ratio: 1000 / 702.2; box-shadow: none; }
	.fsa-contact__band:not(:has(.fsa-contact__panel > *)) .fsa-contact__map-canvas {
		inset: 0;
		width: 100%;
		aspect-ratio: auto;
		translate: none;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.fsa-contact__band:not(:has(.fsa-contact__panel > *)) .fsa-contact__map > figcaption {
		margin: 0;
		padding: .8rem 1.25rem .85rem;
		border-top: 1px solid var(--fsa-rule);
	}
	.fsa-contact__band:not(:has(.fsa-contact__panel > *)) + .fsa-contact__getting {
		grid-column: 9 / -1;
		grid-row: 1;
		display: block;
		margin-top: 0;
	}
	.fsa-contact__band:not(:has(.fsa-contact__panel > *)) + .fsa-contact__getting .fsa-contact__ways {
		display: block;
		margin-top: 1rem;
	}
	.fsa-contact__band:not(:has(.fsa-contact__panel > *)) + .fsa-contact__getting .fsa-register__row {
		border-top: 1px solid var(--fsa-line-strong);
		border-bottom: 0;
	}
}