/*
 * Pages locales, chargées sur le gabarit « Page locale » seulement.
 *
 * La langue de l'accueil, ramenée à un lieu : la nuit, des filets plutôt que des cadres, des
 * chiffres fins en Jost, le rouge pour réserver et rien d'autre. Ce qui est propre à ces pages,
 * c'est le trajet : une ligne d'eau qui part de la base et arrive chez le visiteur. C'est
 * l'information que la page apporte (combien de route, combien ça coûte) et elle se lit
 * avant le texte.
 */

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

.lieu-tete {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: clamp(26px, 4vw, 40px) clamp(60px, 9vw, 112px);
}

/* Une lueur de surface au-dessus du trajet, comme le haut du héros de l'accueil. */
.lieu-tete::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(55% 70% at 88% 8%, rgba(88, 152, 214, 0.15), rgba(88, 152, 214, 0) 70%),
		linear-gradient(180deg, rgba(18, 33, 58, 0.35), rgba(6, 13, 22, 0) 420px);
}

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

@media (min-width: 960px) {
	.lieu-tete__grille {
		grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr);
		align-items: end;
	}
}

.lieu-tete__repere { margin-top: clamp(28px, 4.4vw, 52px); }

.lieu-tete__titre {
	max-width: 13em;
	margin-top: 18px;
	font-size: clamp(38px, 6.2vw, 72px);
	line-height: 1.02;
	letter-spacing: -0.015em;
}

.lieu-tete__chapo {
	max-width: 54ch;
	margin-top: clamp(20px, 2.6vw, 28px);
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.7;
	color: var(--text-2);
}

/* Le prix de la prestation de la page : sous un filet, en grand, comme sur une fiche. */
.lieu-offre {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 20px;
	max-width: 60ch;
	margin-top: clamp(26px, 3.4vw, 34px);
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

.lieu-offre__prix {
	font-family: var(--display);
	font-weight: 200;
	font-size: clamp(34px, 4vw, 46px);
	line-height: 1;
	color: var(--text);
}

.lieu-offre__formules { max-width: 60ch; }

.lieu-tete__actions { margin-top: clamp(28px, 3.6vw, 38px); }

@media (max-width: 480px) {
	.lieu-tete__actions .bouton { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- Trajet */

/*
 * La base en haut, le lieu en bas, la route entre les deux. La ligne est une colonne de la
 * grille : elle part du centre du premier repère et finit au centre du dernier sans qu'aucune
 * hauteur ne soit mesurée, quelle que soit la longueur des libellés.
 */
.trajet {
	margin: 0;
	padding: clamp(24px, 3vw, 32px) clamp(22px, 2.6vw, 30px) 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: linear-gradient(180deg, rgba(14, 28, 46, 0.72), rgba(8, 17, 28, 0.5));
}

.trajet__plan {
	display: grid;
	grid-template-columns: 13px minmax(0, 1fr);
	column-gap: 20px;
}

.trajet__plan > p {
	position: relative;
	grid-column: 2;
	margin: 0;
}

.trajet__depart { grid-row: 1; }
.trajet__route { grid-row: 2; padding-block: clamp(22px, 3vw, 30px); }
.trajet__arrivee { grid-row: 3; }

.trajet b {
	display: block;
	font-family: var(--text-font);
	font-weight: 400;
	font-size: 11.5px;
	line-height: 17px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text);
}

.trajet__depart span,
.trajet__arrivee span {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--text-2);
}

.trajet__arrivee .est-compris { color: var(--ok); }
.trajet__arrivee .est-frais { color: var(--warn); }

/* Les deux repères, centrés sur la première ligne de leur libellé (17 px). */
.trajet__depart::before,
.trajet__arrivee::before,
.trajet__arrivee::after {
	content: '';
	position: absolute;
	left: -33px;
	top: 2px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
}

.trajet__depart::before {
	border: 1px solid rgba(238, 242, 247, 0.55);
	background: var(--ink);
}

.trajet__arrivee::before {
	background: var(--water);
	box-shadow: 0 0 0 5px rgba(111, 168, 220, 0.14);
}

/* L'onde qui s'ouvre quand la goutte arrive : la même couronne que l'éclaboussure de l'accueil. */
.trajet__arrivee::after {
	border: 1px solid rgba(169, 207, 240, 0.7);
	opacity: 0;
	animation: trajet-onde 4.2s var(--ease) 1.2s infinite;
}

.trajet__duree {
	display: block;
	font-family: var(--display);
	font-weight: 200;
	font-size: clamp(52px, 5.4vw, 68px);
	line-height: 0.92;
	color: var(--text);
}

.trajet__duree small {
	margin-left: 8px;
	font-size: 0.3em;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--text-2);
}

.trajet__km {
	display: block;
	margin-top: 10px;
	font-size: 13.5px;
	color: var(--text-3);
}

/* La ligne : du centre du premier repère (8,5 px) au centre du dernier. */
.trajet__fil {
	position: relative;
	grid-column: 1;
	grid-row: 1 / 3;
	justify-self: center;
	width: 1px;
	margin-top: 8.5px;
	margin-bottom: -8.5px;
	background: linear-gradient(180deg, rgba(238, 242, 247, 0.4), var(--water));
}

/* La goutte descend la ligne : le porteur glisse de sa propre hauteur, donc de toute la route. */
.trajet__porteur {
	position: absolute;
	inset: 0;
	animation: trajet-course 4.2s cubic-bezier(0.55, 0, 0.8, 0.45) 1.2s infinite both;
}

.trajet__goutte {
	position: absolute;
	left: -4px;
	top: -7px;
	width: 9px;
	height: 13px;
	border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(158, 206, 255, 0.72));
	box-shadow: 0 0 12px rgba(150, 200, 255, 0.5);
}

@keyframes trajet-course {
	0%   { transform: translateY(0); opacity: 0; }
	10%  { opacity: 1; }
	76%  { transform: translateY(100%); opacity: 1; }
	80%, 100% { transform: translateY(100%); opacity: 0; }
}

@keyframes trajet-onde {
	0%, 74% { transform: scale(0.6); opacity: 0; }
	78%     { opacity: 0.8; }
	100%    { transform: scale(3.2); opacity: 0; }
}

.trajet figcaption {
	margin-top: 22px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--text-3);
}

/* Mouvement réduit : la goutte et l'onde n'ont pas lieu, la ligne reste. */
@media (prefers-reduced-motion: reduce) {
	.trajet__porteur,
	.trajet__arrivee::after { animation: none; opacity: 0; }
}

/* ---------------------------------------------------------------- Sections */

.lieu-section {
	padding-block: clamp(64px, 10vw, 128px);
	border-top: 1px solid var(--line);
	scroll-margin-top: var(--entete);
}

.lieu-section--creux { background: #08111c; }

/* Titre à gauche, qui reste en vue pendant qu'on lit, et la liste ou le tableau à droite. */
.lieu-deux {
	display: grid;
	gap: clamp(30px, 5vw, 56px);
}

.lieu-deux__tete h2 {
	max-width: 15ch;
	margin-top: 22px;
	font-size: clamp(30px, 4vw, 46px);
}

.lieu-deux__intro {
	max-width: 44ch;
	margin-top: 20px;
	font-size: clamp(15px, 1.35vw, 16.5px);
	line-height: 1.7;
	color: var(--text-2);
}

.lieu-deux__tete .lien-souligne { margin-top: 22px; font-size: 15px; }

@media (min-width: 960px) {
	.lieu-deux {
		grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
		align-items: start;
	}

	.lieu-deux__tete {
		position: sticky;
		top: calc(var(--entete) + 40px);
	}
}

/* ---------------------------------------------------------------- Localités */

/*
 * Un vrai tableau : localité, trajet, déplacement. Des filets, pas de grille. Les chiffres en
 * Jost, alignés à droite, pour que l'œil descende la colonne des montants.
 */
.lieux {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid var(--line);
	font-variant-numeric: tabular-nums;
}

.lieux th,
.lieux td {
	padding: 15px clamp(4px, 1vw, 12px);
	border-bottom: 1px solid var(--line);
	text-align: left;
	font-weight: 400;
	vertical-align: baseline;
}

.lieux thead th {
	padding-block: 13px;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-3);
}

.lieux thead th + th,
.lieux td { text-align: right; }

.lieux tbody th {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(17px, 1.7vw, 19px);
	line-height: 1.3;
	color: var(--text);
}

.lieux__npa {
	display: inline-block;
	min-width: 3.3em;
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--text-3);
}

.lieux__zone {
	display: block;
	margin-top: 3px;
	font-family: var(--text-font);
	font-size: 12.5px;
	color: var(--text-3);
}

.lieux td {
	font-family: var(--display);
	font-size: 16px;
	color: var(--text-2);
	white-space: nowrap;
}

.lieux .est-compris { color: var(--ok); }
.lieux .est-frais { color: var(--warn); }

/* Le lieu de la page : un trait d'eau sur le bord, pour le retrouver dans la liste. */
.lieux tr.est-lieu th { box-shadow: inset 2px 0 0 var(--water); }

.lieux tbody tr { transition: background-color var(--dur-lente) var(--ease); }
.lieux tbody tr:hover { background: rgba(111, 168, 220, 0.05); }

.lieux__note { margin-top: 18px; max-width: 64ch; }

@media (max-width: 480px) {
	.lieux__npa { display: block; min-width: 0; font-size: 12px; }
	.lieux td { font-size: 15px; }
}

/* ---------------------------------------------------------------- Texte */

/*
 * Ce qu'Helveor écrit sur le lieu : l'intertitre à gauche (voir .lieu-deux), le texte à droite,
 * en colonne de lecture. Deux blocs rédigés qui se suivent ne portent qu'un filet entre eux.
 */
.lieu-section--texte + .lieu-section--texte { padding-top: 0; border-top: 0; }

/* Le filet tient dans la grille, donc dans le rail : il s'aligne sur le texte, pas sur l'écran. */
.lieu-section--texte + .lieu-section--texte .lieu-deux::before {
	content: '';
	grid-column: 1 / -1;
	height: 1px;
	margin-bottom: clamp(20px, 3vw, 36px);
	background: var(--line);
}

.lieu-texte { max-width: 64ch; }

.lieu-texte > * + * { margin-top: 1.1em; }
.lieu-texte > :first-child { margin-top: 0; }

.lieu-texte h2 {
	margin-top: 1.8em;
	font-size: clamp(26px, 3.2vw, 36px);
}

.lieu-texte h3 { margin-top: 1.6em; }

.lieu-texte p,
.lieu-texte li {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--text-2);
}

.lieu-texte strong { font-weight: 600; color: var(--text); }
.lieu-texte ul { padding-left: 1.2em; }
.lieu-texte li + li { margin-top: 0.5em; }

/* Un chiffre sourcé mis en avant : la dureté de l'eau, un délai, une distance. */
.lieu-texte .lieu-chiffre {
	margin-block: 1.6em;
	padding: 4px 0 4px 22px;
	border-left: 1px solid var(--water);
	font-family: var(--display);
	font-weight: 200;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.3;
	color: var(--text);
}

.lieu-texte .lieu-chiffre + p { margin-top: 0; }

.lieu-texte .source {
	font-size: 13px;
	line-height: 1.55;
	color: var(--text-3);
}

.lieu-texte .source a { color: var(--text-2); }

/* Questions : une par ligne, séparée d'un filet, qui s'ouvre sur place. */
.lieu-texte details {
	margin-top: 0;
	border-bottom: 1px solid var(--line);
}

.lieu-texte > details:first-child,
.lieu-texte h2 + details { border-top: 1px solid var(--line); }
.lieu-texte h2 + details { margin-top: 1.4em; }

.lieu-texte summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 4px;
	cursor: pointer;
	list-style: none;
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(17px, 1.7vw, 20px);
	line-height: 1.35;
	color: var(--text);
	transition: color var(--dur) var(--ease);
}

.lieu-texte summary::-webkit-details-marker { display: none; }

.lieu-texte summary::after {
	content: '+';
	flex: none;
	font-weight: 200;
	font-size: 26px;
	line-height: 0.8;
	color: var(--water);
	transition: transform var(--dur-lente) var(--ease);
}

.lieu-texte summary:hover { color: #fff; }
.lieu-texte details[open] > summary::after { transform: rotate(45deg); }
.lieu-texte summary:focus-visible { outline-offset: -2px; }

.lieu-texte details > :not(summary) {
	margin: 0;
	padding: 0 4px 22px;
}

/* ---------------------------------------------------------------- Clôture */

.lieu-fin {
	position: relative;
	padding-block: clamp(88px, 13vw, 160px);
	overflow: hidden;
	border-top: 1px solid var(--line);
	text-align: center;
	background: radial-gradient(90% 80% at 50% 100%, #12213a 0%, #0a1220 45%, var(--ink) 100%);
}

.lieu-fin__contenu { display: flex; flex-direction: column; align-items: center; }

.lieu-fin__marque { color: rgba(255, 255, 255, 0.9); }
.lieu-fin__marque svg { display: block; width: 34px; height: 41px; }

.lieu-fin h2 {
	max-width: 15em;
	margin-top: 26px;
	font-size: clamp(30px, 4.6vw, 52px);
}

.lieu-fin p {
	max-width: 48ch;
	margin-top: 20px;
	font-size: clamp(15px, 1.35vw, 16.5px);
	color: var(--text-2);
}

.lieu-fin__actions { justify-content: center; margin-top: clamp(28px, 3.6vw, 36px); }

@media (max-width: 600px) {
	.lieu-fin__actions { flex-direction: column; align-items: stretch; width: 100%; }
}