/*
 * Contact, chargé sur cette page seulement, après dessins.css (la carte de la zone). La mise en
 * page : la tête en deux colonnes, l'appel et l'e-mail, la base et la zone.
 * Le formulaire a sa feuille (demande.css), reprise par la fenêtre de demande des autres pages.
 */

/* ---------------------------------------------------------------- Tête */

.contact-tete {
	position: relative;
	isolation: isolate;
	/* clip et non hidden : hidden ferait de la tête un conteneur de défilement, et la colonne
	   collante de gauche ne collerait plus. hidden reste pour les navigateurs sans clip. */
	overflow: hidden;
	overflow: clip;
	padding-block: clamp(26px, 4vw, 40px) var(--chapter);
}

/* La lueur se lève derrière le formulaire, là où la page attend qu'on écrive. */
.contact-tete::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(46% 52% at 74% 22%, rgba(88, 152, 214, 0.16), rgba(88, 152, 214, 0) 70%),
		linear-gradient(180deg, rgba(18, 33, 58, 0.35), rgba(6, 13, 22, 0) 460px);
}

.contact-tete__grille {
	display: grid;
	gap: clamp(40px, 6vw, 64px);
}

@media (min-width: 960px) {
	.contact-tete__grille {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
		gap: clamp(48px, 5.5vw, 80px);
	}
}

/* L'appel et l'e-mail restent en vue pendant qu'on remplit : la colonne prend toute la hauteur
   du formulaire, son bas colle sous l'en-tête. */
@media (min-width: 960px) {
	.contact-tete__texte { align-self: stretch; }

	.contact-tete__joindre {
		position: sticky;
		top: var(--entete);
		padding-top: 1px;
	}
}

/* ---------------------------------------------------------------- Titre */

.contact-tete__titre {
	margin-top: clamp(28px, 4.4vw, 52px);
	font-size: clamp(46px, 7vw, 88px);
	line-height: 0.95;
	letter-spacing: -0.025em;
}

.contact-tete__chapo {
	max-width: 46ch;
	margin-top: clamp(20px, 2.6vw, 28px);
	font-size: clamp(16px, 1.45vw, 17.5px);
	line-height: 1.7;
	color: var(--text-2);
}

.contact-tete__chapo p + p { margin-top: 1em; }

/* ---------------------------------------------------------------- Appeler, écrire */

.contact-joindre__titre {
	margin-top: clamp(36px, 5vw, 52px);
	font-family: var(--text-font);
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-3);
}

/* La liste est le conteneur des valeurs : l'adresse e-mail, la plus longue, tient sur une ligne
   quelle que soit la largeur de la colonne. */
.contact-joindre {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
	container-type: inline-size;
}

/*
 * Une ligne par canal : le dessin dans son rond, le libellé en capitales, la valeur en Jost, le
 * voile d'eau qui monte au survol. Toute la ligne se touche.
 */
.canal {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 1.2em;
	align-items: center;
	gap: clamp(14px, 1.8vw, 20px);
	padding: 20px clamp(4px, 0.8vw, 10px);
	border-bottom: 1px solid var(--line);
	color: var(--text);
	text-decoration: none;
	isolation: isolate;
}

.canal::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(111, 168, 220, 0.11), rgba(111, 168, 220, 0.02) 70%, transparent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-lente) var(--ease);
}

.canal:hover,
.canal:focus-visible { color: #fff; }

.canal:hover::before,
.canal:focus-visible::before { transform: scaleX(1); }

.canal:focus-visible { outline-offset: -2px; }

.canal__picto {
	display: block;
	width: 48px;
	height: 48px;
	padding: 11px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	color: var(--text);
	transition: border-color var(--dur-lente) var(--ease), color var(--dur-lente) var(--ease);
}

.canal:hover .canal__picto,
.canal:focus-visible .canal__picto { border-color: rgba(111, 168, 220, 0.6); color: var(--water-2); }

.canal__texte { display: grid; gap: 3px; min-width: 0; }

.canal__libelle {
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-3);
	transition: color var(--dur-lente) var(--ease);
}

.canal:hover .canal__libelle,
.canal:focus-visible .canal__libelle { color: var(--water); }

.canal__valeur {
	font-family: var(--display);
	font-weight: 200;
	font-size: clamp(18px, 6cqi, 28px);
	line-height: 1.2;
	letter-spacing: -0.005em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.canal__note { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }

.canal__fleche {
	color: var(--water);
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity var(--dur-lente) var(--ease), transform var(--dur-lente) var(--ease);
}

.canal:hover .canal__fleche,
.canal:focus-visible .canal__fleche { opacity: 1; transform: none; }

@media (hover: none) {
	.canal__fleche { opacity: 1; transform: none; }
}

@media (max-width: 420px) {
	.canal { grid-template-columns: 40px minmax(0, 1fr) 1em; }
	.canal__picto { width: 40px; height: 40px; padding: 9px; }
	.canal__note { display: none; }
}

.contact-reserver {
	margin-top: 24px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--text-3);
}

/* ---------------------------------------------------------------- Base et zone */

.contact-base__grille {
	display: grid;
	gap: clamp(40px, 6vw, 64px);
}

@media (min-width: 960px) {
	.contact-base__grille {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: center;
		gap: clamp(48px, 5.5vw, 80px);
	}

	/* La carte déborde un peu vers la droite : elle est le paysage de la section. */
	.contact-base__carte { margin-right: calc(-1 * clamp(0px, 2vw, 24px)); }
}

.contact-base__titre {
	max-width: 13ch;
	margin-top: 22px;
	font-size: clamp(30px, 4vw, 46px);
}

.contact-adresse {
	margin-top: clamp(24px, 3vw, 32px);
	font-family: var(--display);
	font-style: normal;
	font-weight: 200;
	font-size: clamp(22px, 2.4vw, 27px);
	line-height: 1.35;
}

.contact-adresse strong {
	display: block;
	margin-bottom: 6px;
	font-family: var(--text-font);
	font-weight: 400;
	font-size: 12.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text);
}

.contact-origine {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	font-size: 11.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-2);
}

.contact-origine .drapeau { width: 18px; height: 18px; }

.contact-note { margin-top: 12px; font-size: 14px; color: var(--text-3); }

.contact-base__repere { margin-top: clamp(34px, 4.4vw, 46px); }

/* Les cantons sur deux colonnes, chacun derrière un point d'eau : une liste qui se lit, pas des cases. */
.contact-cantons {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: 8px clamp(24px, 3vw, 40px);
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.contact-cantons li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(19px, 1.9vw, 22px);
	color: var(--text);
}

.contact-cantons li::before {
	content: '';
	flex: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--water);
}

@media (max-width: 360px) {
	.contact-cantons { grid-template-columns: max-content; }
}