/*
 * Helveor - système visuel.
 *
 * Direction posée avec le client (dossier « Helveor V2 ») : eau profonde en fond, eau claire
 * pour tout ce qui informe, rouge suisse réservé à une seule chose : réserver et payer. Un
 * verdict de zone n'est jamais rouge : ne pas desservir une commune n'est pas une faute du
 * visiteur, et le rouge doit garder un seul sens sur tout le site.
 *
 * Trois règles tenues partout :
 * 1. une seule action principale par écran.
 * 2. un trait et du vide avant une carte : on n'encadre que ce qui se choisit.
 * 3. le prix se lit avant le reste, en Jost, chiffres alignés.
 *
 * Contrastes mesurés, pas supposés : texte 17,5:1 · secondaire 9,4:1 · tertiaire 5,6:1 sur carte et
 * 4,8:1 sur la lueur des héros · blanc sur rouge 4,9:1 · bordure de champ 3,4:1. Tous au-dessus des
 * seuils WCAG AA.
 */

/* ---------------------------------------------------------------- Police */

/* Une seule requête de police pour tout le site, déjà utilisée par la page de construction. */
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 200 500;
	font-display: swap;
	src: url('../fonts/jost-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ---------------------------------------------------------------- Jetons */

:root {
	--ink: #060d16;
	--surface: #0b1624;
	--surface-on: #122438;
	--surface-high: #0e1c2e;

	--text: #eef3f8;
	--text-2: #a3b6c9;
	/* #7387a0 jusqu'au 05.10.2026 : 4,2:1 sur la lueur des héros au téléphone, sous le seuil. */
	--text-3: #7f91a8;

	--water: #6fa8dc;
	--water-2: #a9cff0;
	--water-dim: rgba(111, 168, 220, 0.12);

	/* Rouge du drapeau, celui du logo et de la page de construction. Action de réservation
	   et O de la marque uniquement : jamais une erreur, jamais un refus, jamais une décoration. */
	--red: #da291c;
	--red-deep: #b82317;

	--ok: #8fe0be;
	--warn: #f0c069;

	--line: rgba(255, 255, 255, 0.09);
	--line-strong: rgba(255, 255, 255, 0.16);
	--field: #566c82;

	--display: 'Jost', system-ui, sans-serif;
	--text-font: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

	/* Angles nets, comme la page de construction : un cadre à peine adouci, jamais une pilule.
	   Un rayon large rendait chaque bloc « application ». Le site doit rester une maison. */
	--r-sm: 2px;
	--r-md: 2px;
	--r-lg: 3px;
	--r-pill: 2px;

	--tap: 48px;
	--rail: 1120px;
	/* Hauteur de l'en-tête collant : une rangée partout, le menu de téléphone se dépliant par
	   un bouton. Deux rangées (logo + action, puis le menu) seulement sans JavaScript, voir plus
	   bas. La progression du tunnel s'y adosse : une valeur, un seul endroit. */
	--entete: 106px;
	--gutter: clamp(16px, 4vw, 40px);
	--chapter: clamp(56px, 9vw, 108px);

	--ease: cubic-bezier(0.16, 0.84, 0.44, 1);
	--dur: 0.28s;
	/* Les transitions lentes de la page de construction : un survol qui s'installe, pas qui claque. */
	--dur-lente: 0.6s;
}

@media (max-width: 1023.98px) and (scripting: enabled) {
	:root { --entete: 60px; }
}

@media (min-width: 1024px) {
	:root { --entete: 68px; }
}

/* ---------------------------------------------------------------- Base */

*,
*::before,
*::after { box-sizing: border-box; }

/* Une classe d'auteur qui pose un display bat la règle [hidden] du navigateur : sans ce
   garde-fou, un bloc masqué par le gabarit réapparaît dès qu'on le stylise. */
[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--ink);
	color: var(--text);
	font-family: var(--text-font);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

h1, h2, h3 {
	font-family: var(--display);
	font-weight: 200;
	line-height: 1.1;
	letter-spacing: -0.012em;
	text-wrap: balance;
	margin: 0;
}

h1 { font-size: clamp(32px, 5.4vw, 58px); }
h2 { font-size: clamp(25px, 3.4vw, 38px); }
h3 { font-size: clamp(18px, 2vw, 22px); font-weight: 400; letter-spacing: 0; }

p { margin: 0; text-wrap: pretty; }

a {
	color: var(--water);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--dur) var(--ease);
}

a:hover { color: var(--water-2); }

img, svg { max-width: 100%; }
img { height: auto; }

::selection { background: var(--red); color: #fff; }

:focus-visible {
	outline: 2px solid var(--water);
	outline-offset: 3px;
	border-radius: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 13px 20px;
	background: var(--red);
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

.skip-link:focus { left: 14px; top: 14px; color: #fff; }

/* Chiffres alignés : un prix ne doit pas danser d'une ligne à l'autre. */
.prix,
.montant,
time { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Rails */

.rail {
	width: 100%;
	max-width: var(--rail);
	margin: 0 auto;
	padding-inline: var(--gutter);
}

.chapitre {
	padding-block: var(--chapter);
	border-top: 1px solid var(--line);
}

.chapitre--creux { background: #08111c; }
.chapitre--nu { border-top: 0; }

/*
 * 34ch et non 22 : à 22 caractères, « Qu'est-ce qui se passe chez vous ? » cassait en deux
 * lignes au milieu d'un écran large et vide. La mesure reste courte (un titre ne se lit pas
 * comme un paragraphe) mais elle laisse les titres d'une phrase tenir sur une ligne.
 */
.chapitre__titre { max-width: 34ch; }

.chapitre__intro {
	max-width: 56ch;
	margin-top: 18px;
	color: var(--text-2);
	font-size: clamp(15px, 1.4vw, 17px);
}

/* ---------------------------------------------------------------- Boutons */

/*
 * Les boutons de la page de construction : capitales espacées, angle net, filet clair pour le
 * secondaire. Le rouge ne sert qu'à réserver et payer.
 */
.bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	min-height: var(--tap);
	padding: 13px 24px;
	border: 1px solid var(--red);
	border-radius: var(--r-sm);
	background: var(--red);
	color: #fff;
	font-family: var(--text-font);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-lente) var(--ease), border-color var(--dur-lente) var(--ease), color var(--dur-lente) var(--ease);
}

.bouton:hover,
.bouton:focus-visible {
	background: var(--red-deep);
	border-color: var(--red-deep);
	color: #fff;
}

.bouton:active { transform: translateY(1px); }

.bouton small { font-size: 11px; letter-spacing: 0.2em; opacity: 0.85; }

/* Un numéro de téléphone ou un prix dans un bouton garde sa casse et ses chiffres. */
.bouton .prix {
	font-family: var(--display);
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: none;
}

.bouton--grand { min-height: 52px; padding: 15px 28px; }

.bouton[disabled],
.bouton[aria-disabled='true'] {
	background: var(--surface-on);
	border-color: var(--line-strong);
	color: var(--text-3);
	cursor: not-allowed;
	transform: none;
}

.bouton--secondaire {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.22);
	color: var(--text);
}

.bouton--secondaire:hover,
.bouton--secondaire:focus-visible {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.bouton--discret {
	background: transparent;
	border-color: var(--line-strong);
	color: var(--text-2);
}

.bouton--discret:hover,
.bouton--discret:focus-visible {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--text);
}

.lien-souligne {
	display: inline-block;
	padding-block: 7px 4px;
	color: var(--water);
	text-decoration: none;
	border-bottom: 1px solid rgba(111, 168, 220, 0.4);
}

.lien-souligne:hover { border-color: var(--water-2); }

/* ---------------------------------------------------------------- En-tête */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(6, 13, 22, 0.97);
	border-bottom: 1px solid var(--line);
}

/*
 * Sous 900 px, le menu passait en display:none sans rien pour le remplacer : « Prestations et
 * tarifs » et « Mon rendez-vous » devenaient inatteignables depuis l'en-tête. Deux rangées
 * plutôt qu'un menu caché, et rien ne se déplie. Le seuil est à 1024 px : avec cinq liens
 * (À propos et Contact depuis le 13.10.2026), le menu se cassait en deux sous 1000 px.
 */
.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	row-gap: 9px;
	column-gap: 0;
	padding-block: 11px;
	min-height: var(--entete);
}

.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	/* Le lien mesurait 26 px de haut : on élargit la cible au doigt sans bouger la mise en
	   page, car la marge négative reprend exactement ce que la marge intérieure ajoute. */
	padding-block: 9px;
	margin-block: -9px;
	color: var(--text);
	text-decoration: none;
}

.site-logo__image { flex: none; width: 21px; height: 25px; display: block; }

.site-logo__nom {
	font-family: var(--display);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0.34em;
	padding-left: 0.34em;
	/* Le nom ne se casse jamais en deux lignes : sous 430 px, c'est l'en-tête qui se resserre. */
	white-space: nowrap;
}

/*
 * Le O rouge de la marque : un anneau net et, dedans, une ride, la goutte du logo tombée dans
 * l'eau. Toutes les 6 s, la ride s'élargit au-delà de l'anneau et s'efface. La lettre reste dans
 * le texte, transparente. En contraste forcé, elle revient seule. Même dessin sur la page de
 * construction, la connexion et l'administration.
 */
.site-logo__nom span {
	--espace: 0.34em;
	/* Le trait des lettres : Jost 400 à 16 px. */
	--trait: 0.075em;
	position: relative;
	display: inline-block;
	color: transparent;
}

.site-logo__nom span::before,
.site-logo__nom span::after {
	content: '';
	position: absolute;
	top: 50%;
	/* Le milieu du glyphe, sans l'espacement qui le suit. */
	left: calc((100% - var(--espace)) / 2);
	box-sizing: border-box;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.site-logo__nom span::before {
	width: 0.74em;
	height: 0.74em;
	border: max(1px, var(--trait)) solid var(--red);
}

.site-logo__nom span::after {
	width: 0.36em;
	height: 0.36em;
	border: 1px solid rgba(218, 41, 28, 0.6);
	opacity: 0.55;
}

@keyframes marque-ride {
	0%, 12% { width: 0.36em; height: 0.36em; opacity: 0.55; }
	22% { width: 0.66em; height: 0.66em; opacity: 1; }
	55% { width: 1.4em; height: 1.4em; opacity: 0; }
	56% { width: 0.05em; height: 0.05em; opacity: 0; }
	80%, 100% { width: 0.36em; height: 0.36em; opacity: 0.55; }
}

@media (prefers-reduced-motion: no-preference) {
	.site-logo__nom span::after { animation: marque-ride 6s var(--ease) infinite; }
}

@media (forced-colors: active) {
	.site-logo__nom span { color: inherit; }
	.site-logo__nom span::before,
	.site-logo__nom span::after { display: none; }
}

.site-logo { grid-column: 1; grid-row: 1; }

.site-nav {
	grid-column: 1 / -1;
	grid-row: 2;
	display: flex;
	align-items: center;
}

/* Seule la liste des pages : le panneau du menu de téléphone porte d'autres liens et des boutons. */
.site-nav > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px clamp(14px, 1.8vw, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav > ul a {
	display: inline-block;
	padding-block: 4px;
	border-bottom: 1px solid transparent;
	color: var(--text-2);
	font-size: 14px;
	text-decoration: none;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.site-nav > ul a:hover { color: var(--text); }

/* La page en cours ne se signale pas par la seule couleur : un trait la souligne. */
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav .current-menu-ancestor > a {
	color: var(--text);
	border-bottom-color: var(--water);
}

.site-header__action {
	grid-column: 3;
	grid-row: 1;
	margin-left: 16px;
	min-height: 40px;
	padding: 8px 18px;
	font-size: 12px;
}

/* ---------------------------------------------------------------- Langue */

/*
 * Le choix de la langue, à côté de « Réserver » : un globe et le code de la langue, qui déplient
 * la liste des langues. Discret au repos (il ne dispute pas l'attention au rouge), net au survol
 * puisqu'il se clique. Chaque langue s'écrit dans sa propre langue, précédée de son drapeau.
 */
.langue {
	position: relative;
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
}

.langue__bouton {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	color: var(--text-2);
	font-family: var(--display);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color var(--dur-lente) var(--ease), border-color var(--dur-lente) var(--ease), background-color var(--dur-lente) var(--ease);
}

.langue__bouton::-webkit-details-marker { display: none; }
.langue__bouton::marker { content: ''; }

.langue__bouton:hover,
.langue__bouton:focus-visible,
.langue[open] .langue__bouton {
	border-color: var(--line-strong);
	background: rgba(255, 255, 255, 0.03);
	color: var(--text);
}

.langue__code { padding-left: 0.2em; }

.langue__globe {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
}

.langue__fleche {
	width: 9px;
	height: 9px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--dur) var(--ease);
}

.langue[open] .langue__fleche { transform: rotate(180deg); }

.langue__liste {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 80;
	min-width: 196px;
	margin: 0;
	padding: 6px;
	list-style: none;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	background: var(--surface);
	box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.85);
}

.langue__liste a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var(--tap);
	padding: 0 12px;
	border-radius: var(--r-sm);
	color: var(--text);
	font-size: 15px;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.langue__liste a:hover,
.langue__liste a:focus-visible { background: var(--water-dim); color: #fff; }

/* Un filet clair autour : le blanc du drapeau ne se perd pas, le bleu ne se noie pas dans la nuit. */
.langue__drapeau {
	flex: none;
	width: 21px;
	height: 14px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* La langue affichée : l'eau claire et un point, comme la page en cours dans le menu. */
.langue__liste [aria-current] { color: var(--water-2); }

.langue__liste [aria-current] .langue__nom::after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 10px;
	border-radius: 50%;
	background: var(--water-2);
	vertical-align: middle;
}

@media (prefers-reduced-motion: no-preference) {
	.langue[open] .langue__liste { animation: langue-liste 0.28s var(--ease) both; }
}

@keyframes langue-liste {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
	.langue__bouton { border-color: ButtonText; }
	.langue__liste [aria-current] .langue__nom::after { background: CanvasText; }
}

/*
 * Sur téléphone, les liens ne tiennent pas sur 358 px : repliés sur deux lignes, ils
 * rehaussaient l'en-tête collant au-delà de --entete, et la progression du tunnel passait
 * dessous. Une seule rangée qui défile au doigt, jusqu'aux bords de l'écran. Le fondu dans la
 * marge dit qu'il y a une suite, sans jamais recouvrir un lien au repos ni en fin de course.
 */
@media (max-width: 1023.98px) {
	.site-nav { margin-inline: calc(-1 * var(--gutter)); }

	.site-nav > ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		padding-inline: var(--gutter);
		mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
	}

	.site-nav > ul::-webkit-scrollbar { display: none; }
	.site-nav > ul > li { flex: none; }
	.site-nav > ul a { white-space: nowrap; }
}

@media (min-width: 1024px) {
	.site-header__inner {
		grid-template-columns: auto 1fr auto auto;
		padding-block: 0;
	}

	.site-nav { grid-column: 2; grid-row: 1; justify-content: flex-end; }
	.langue { grid-column: 3; margin-left: clamp(12px, 1.6vw, 22px); }
	.site-header__action { grid-column: 4; grid-row: 1; }
}

/* ---------------------------------------------------------------- Menu de téléphone */

/*
 * Une rangée : le logo, « Réserver », le bouton du menu. Le menu s'ouvre en plein écran sous
 * l'en-tête : les pages en grand, dans la police des titres, puis les liens utiles, et en bas,
 * sous le pouce, les deux gestes qui vendent : réserver, appeler. Le bouton rouge de l'en-tête
 * s'efface pendant ce temps : un seul rouge à l'écran.
 *
 * (scripting: enabled) : sans JavaScript, ou sur un navigateur qui ne connaît pas cette
 * requête, rien de tout ceci ne s'applique et l'en-tête à deux rangées ci-dessus reste en place.
 */
.menu-bouton,
.site-nav__plus { display: none; }

@media (max-width: 1023.98px) and (scripting: enabled) {
	.site-header__inner {
		grid-template-columns: 1fr auto auto auto;
		row-gap: 0;
		padding-block: 0;
	}

	.site-header__action {
		margin-left: 8px;
		transition: opacity var(--dur) var(--ease), visibility var(--dur);
	}

	.menu-bouton {
		grid-column: 4;
		grid-row: 1;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		width: var(--tap);
		height: var(--tap);
		/* La cible fait 48 px, le trait 22 : on recale le trait sur la gouttière. */
		margin: 0 -13px 0 4px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--text);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.menu-bouton i {
		display: block;
		width: 22px;
		height: 1.5px;
		background: currentColor;
		transition: transform 0.4s var(--ease);
	}

	/* Deux traits qui se croisent : fermer. 3,75 px = la moitié de l'écart entre leurs axes. */
	[data-menu='ouvert'] .menu-bouton i:first-of-type { transform: translateY(3.75px) rotate(45deg); }
	[data-menu='ouvert'] .menu-bouton i:last-of-type { transform: translateY(-3.75px) rotate(-45deg); }

	/* :root pour passer devant l'en-tête voilé de l'accueil (accueil.css, chargé après). Le
	   flou doit partir : un backdrop-filter piégerait le panneau fixe dans l'en-tête. */
	:root .site-header[data-menu='ouvert'] {
		background: var(--ink);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	[data-menu='ouvert'] .site-header__action { opacity: 0; visibility: hidden; }

	/* Le panneau, fixe, du bas de l'en-tête au bas de l'écran, quoi que fasse la barre
	   d'adresse du téléphone. Son haut (--menu-haut) est posé par menu.js à l'ouverture :
	   l'en-tête n'est pas toujours collé en haut (barre d'administration). */
	.site-nav {
		display: none;
		position: fixed;
		top: var(--menu-haut, var(--entete));
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		padding: 6px var(--gutter) calc(20px + env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
		border-top: 1px solid var(--line);
		/* La lueur de la clôture de l'accueil, qui monte du bas : l'eau sous la nuit. */
		background: radial-gradient(130% 55% at 50% 100%, #12213a 0%, #0a1220 50%, var(--ink) 100%);
	}

	[data-menu='ouvert'] .site-nav {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.site-nav > ul {
		display: block;
		overflow: visible;
		padding: 0;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.site-nav > ul > li { border-bottom: 1px solid var(--line); }

	.site-nav > ul a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 17px 0;
		border: 0;
		font-family: var(--display);
		font-size: 27px;
		font-weight: 200;
		line-height: 1.2;
		white-space: normal;
		color: var(--text);
	}

	.site-nav > ul a::after {
		content: '\2192';
		font-family: var(--text-font);
		font-size: 17px;
		color: var(--text-3);
		transition: transform var(--dur-lente) var(--ease), color var(--dur-lente) var(--ease);
	}

	.site-nav > ul a:hover::after,
	.site-nav > ul a:focus-visible::after { transform: translateX(4px); color: var(--water-2); }

	/* La page en cours : l'eau claire, et un point à la place de la flèche, puisqu'on y est déjà. */
	.site-nav > ul .current-menu-item > a,
	.site-nav > ul .current_page_item > a { color: var(--water-2); }

	.site-nav > ul .current-menu-item > a::after,
	.site-nav > ul .current_page_item > a::after {
		content: '';
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: var(--water-2);
		transform: none;
	}

	.site-nav__plus {
		display: flex;
		flex: 1 0 auto;
		flex-direction: column;
	}

	.site-nav__utiles {
		display: flex;
		flex-wrap: wrap;
		gap: 0 26px;
		margin: 14px 0 0;
		padding: 0;
		list-style: none;
	}

	.site-nav__utiles a {
		display: inline-block;
		padding-block: 12px;
		font-size: 11.5px;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--text-2);
	}

	.site-nav__utiles a:hover { color: var(--text); }

	/* Poussé en bas du panneau, là où tombe le pouce. */
	.site-nav__vente {
		display: grid;
		gap: 12px;
		margin-top: auto;
		padding-top: 32px;
	}

	.site-nav__vente .bouton { width: 100%; }

	.site-nav__reperes {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		margin-bottom: 6px;
		font-size: 11px;
		line-height: 1.4;
		letter-spacing: 0.24em;
		text-transform: uppercase;
		text-align: center;
		color: var(--text-2);
	}

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

	@media (max-height: 700px) {
		.site-nav > ul a { padding-block: 12px; font-size: 24px; }
		.site-nav__vente { padding-top: 22px; }
	}

	/* La page derrière ne défile plus tant que le menu est ouvert. Sur html seul : un body en
	   overflow hidden devient le conteneur de défilement de l'en-tête collant, qui remonte alors
	   hors de l'écran avec le haut du panneau dès que la page a défilé. */
	html.menu-ouvert { overflow: hidden; }
}

@keyframes menu-panneau {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes menu-ligne {
	from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
	to   { opacity: 1; transform: none; filter: none; }
}

@media (max-width: 1023.98px) and (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	[data-menu='ouvert'] .site-nav { animation: menu-panneau 0.3s var(--ease) both; }

	[data-menu='ouvert'] .site-nav > ul > li,
	[data-menu='ouvert'] .site-nav__utiles,
	[data-menu='ouvert'] .site-nav__vente { animation: menu-ligne 0.7s var(--ease) both; }

	[data-menu='ouvert'] .site-nav > ul > li:nth-child(2) { animation-delay: 45ms; }
	[data-menu='ouvert'] .site-nav > ul > li:nth-child(3) { animation-delay: 90ms; }
	[data-menu='ouvert'] .site-nav > ul > li:nth-child(4) { animation-delay: 135ms; }
	[data-menu='ouvert'] .site-nav > ul > li:nth-child(n+5) { animation-delay: 180ms; }
	[data-menu='ouvert'] .site-nav__utiles { animation-delay: 200ms; }
	[data-menu='ouvert'] .site-nav__vente { animation-delay: 260ms; }
}

/* ---------------------------------------------------------------- Pied */

.site-footer {
	border-top: 1px solid var(--line);
	background: #08111c;
	padding-block: clamp(40px, 6vw, 64px) clamp(28px, 4vw, 40px);
	font-size: 14px;
	color: var(--text-2);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: clamp(26px, 4vw, 48px);
}

.site-footer h2 {
	margin-bottom: 16px;
	font-family: var(--text-font);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-3);
}

.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.site-footer a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-lente) var(--ease), border-color var(--dur-lente) var(--ease); }
.site-footer a:hover { color: #fff; border-color: currentColor; }
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer__ligne { white-space: nowrap; }

/* Au doigt : chaque lien du pied fait 44 px de haut (20 px avant). Le téléphone y est un geste
   qui vend, il ne doit pas falloir viser. */
@media (pointer: coarse), (max-width: 599.98px) {
	.site-footer ul { gap: 0; }

	.site-footer ul a,
	.site-footer address a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

.site-bas {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 24px;
	margin-top: clamp(30px, 5vw, 48px);
	padding-top: 22px;
	border-top: 1px solid var(--line);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	color: var(--text-3);
}

.site-copyright { margin: 0; }

/* Le drapeau : la seule exception au rouge réservé à l'action, parce que c'est le drapeau
   lui-même. Petit, à la hauteur des capitales, sans cadre. */
.drapeau {
	display: inline-block;
	flex: none;
	width: 1.15em;
	height: 1.15em;
	vertical-align: -0.2em;
}

.site-origine { display: flex; align-items: flex-start; gap: 9px; }
.site-origine .drapeau { margin-top: 0.15em; }

/* La signature du site : le texte au gris du copyright (plus pâle, il passerait sous 4,5:1),
   la marque éteinte, qui ne reprend ses couleurs qu'au survol. */
.site-credit { margin: 0; }
.site-footer .site-credit a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	color: var(--text-3);
}
.site-credit img {
	display: block;
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter var(--dur-lente) var(--ease), opacity var(--dur-lente) var(--ease);
}
.site-footer .site-credit a:hover,
.site-footer .site-credit a:focus-visible { color: var(--text-2); }
.site-credit a:hover img,
.site-credit a:focus-visible img { filter: none; opacity: 1; }

/* ---------------------------------------------------------------- Contenu rédigé */

.site-main { display: block; }

/*
 * Même rail que partout ailleurs. Le conteneur faisait 72ch centrés dans la fenêtre : en
 * passant de l'accueil à « Comment ça marche », tout le contenu sautait de 250 px vers la
 * droite. Le rail fixe le bord gauche, et la mesure de lecture passe aux enfants.
 */
.entry {
	max-width: var(--rail);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: clamp(40px, 6vw, 72px) var(--chapter);
}

.entry > * { max-width: 72ch; }

/* La suite du texte d'accueil vit déjà dans un chapitre : il porte l'espace, pas elle. */
.entry--suite { padding-block: 0; }

/* Ce qu'on affiche quand le catalogue ne répond pas. */
.vide { color: var(--text-2); }

.entry > * + * { margin-top: 1.1em; }
.entry h2 { margin-top: 1.9em; }
.entry h3 { margin-top: 1.6em; }
.entry p,
.entry li { color: var(--text-2); font-size: 16.5px; line-height: 1.75; }
.entry strong { color: var(--text); font-weight: 600; }
.entry ul, .entry ol { padding-left: 1.2em; }
.entry li + li { margin-top: 0.5em; }
.entry a { color: var(--water); }

.entry__chapo {
	max-width: 60ch;
	font-size: clamp(17px, 1.7vw, 19px);
	line-height: 1.6;
	color: var(--text);
}

.entry table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.entry th,
.entry td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.entry th { color: var(--text); font-weight: 600; }
.entry td { color: var(--text-2); }

/* Tableau lisible sur mobile : chaque ligne devient un bloc étiqueté. */
@media (max-width: 640px) {
	.entry table, .entry thead, .entry tbody, .entry tr, .entry th, .entry td { display: block; }
	.entry thead { display: none; }
	.entry tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
	.entry td { border: 0; padding: 4px 0; }
	.entry td::before {
		content: attr(data-libelle);
		display: block;
		font-size: 12.5px;
		color: var(--text-3);
	}
}

/* Un rang d'actions, et le blanc qui le précède. Les gabarits n'ont plus à écrire de style="". */
.pile {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.apres { margin-top: clamp(22px, 3vw, 28px); }

/* ---------------------------------------------------------------- Cartes et grilles */

.grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
	gap: 12px;
}

.carte {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	color: inherit;
	text-decoration: none;
}

a.carte { transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }

a.carte:hover,
a.carte:focus-visible {
	background: var(--surface-high);
	border-color: rgba(111, 168, 220, 0.55);
	color: inherit;
}

/* ---------------------------------------------------------------- Formulaires */

label {
	display: block;
	font-size: 14px;
	color: var(--text-2);
}

input[type='text'],
input[type='tel'],
input[type='email'],
input[type='search'],
input[type='number'],
textarea,
select {
	width: 100%;
	min-height: var(--tap);
	padding: 12px 15px;
	background: var(--ink);
	border: 1px solid var(--field);
	border-radius: var(--r-md);
	color: var(--text);
	/* 16 px : en dessous, iOS zoome tout seul au premier appui. */
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	transition: border-color var(--dur) var(--ease);
}

input::placeholder,
textarea::placeholder { color: var(--text-3); opacity: 1; }

input:focus,
textarea:focus,
select:focus { border-color: var(--water); }

input[type='file'] {
	width: 100%;
	padding: 12px 0;
	color: var(--text-2);
	font-size: 15px;
}

textarea { min-height: 110px; resize: vertical; }

fieldset { margin: 0; padding: 0; border: 0; }
legend { padding: 0; }

/* align-content : deux champs côte à côte gardent leur case alignée, même si l'un a un message dessous. */
.champ { display: grid; gap: 7px; align-content: start; }

.ligne-champs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	gap: 14px;
}

.aide {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--text-3);
}

/*
 * Saisie soulignée : un seul champ, grand, en Jost, posé sur un filet comme une ligne de papier,
 * et son bouton au bout de la ligne. Pour les formulaires d'un seul champ (adresse de la
 * vérification de zone, e-mail de « Mon rendez-vous »). Les formulaires à plusieurs champs
 * gardent le cadre.
 */
.libelle-ligne {
	font-size: 11.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-3);
}

.saisie-ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
}

/* Le filet est porté par le champ, pas par la rangée : quand le bouton passe à la ligne sur un
   téléphone, il se range sous le filet au lieu de le couper. */
.saisie-ligne input {
	flex: 1;
	min-width: min(100%, 220px);
	padding: 10px 0 12px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--field);
	border-radius: 0;
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(22px, 2.6vw, 28px);
	transition: border-color var(--dur-lente) var(--ease), box-shadow var(--dur-lente) var(--ease);
}

.saisie-ligne input:focus { outline: none; border-color: var(--water); }

/* Le focus visible épaissit le filet d'un trait. */
.saisie-ligne input:focus-visible { box-shadow: 0 1px 0 0 var(--water); }

.saisie-ligne .bouton { flex: none; }

/*
 * Un champ à suggestions (vérification de zone) : la liste d'adresse.css s'ouvre sous le filet,
 * par-dessus le verdict. Une adresse entière est longue (« Route de la Poya 6, 1726
 * Farvagny-le-Grand ») : le champ prend toute la ligne, un peu moins grand, et le bouton passe
 * dessous, au bout de l'aide.
 */
.saisie-ligne__combo {
	position: relative;
	flex: 1 1 100%;
}

.saisie-ligne__combo input { font-size: clamp(19px, 2vw, 24px); }

.saisie-ligne__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px 28px;
}

.saisie-ligne__pied .aide { flex: 1 1 15rem; margin: 0; }
.saisie-ligne__pied .bouton { flex: none; }

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

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

/* ---------------------------------------------------------------- Verdict de zone */

/*
 * Six états, un seul composant, sur toutes les pages. Jamais de rouge : un lieu non desservi
 * n'est pas une erreur. La pastille double l'information portée par la couleur, pour qui ne
 * distingue pas les teintes.
 */
/*
 * Grille et non flex : la pastille et les phrases sont des enfants de même niveau (le script
 * remplace le contenu par une suite de <p>). En flex, chaque phrase devenait une colonne et
 * le verdict se lisait de travers. La pastille tient la colonne 1, tout le texte la colonne 2.
 */
.verdict,
.reservation__verdict {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 0 13px;
	padding: 16px 18px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, 0.03);
	font-size: 15px;
}

.verdict > *,
.reservation__verdict > * { grid-column: 2; }

.verdict::before,
.reservation__verdict::before {
	content: '';
	grid-column: 1;
	grid-row: 1;
	width: 9px;
	height: 9px;
	margin-top: 8px;
	border-radius: 50%;
	background: var(--text-3);
}

.verdict p,
.reservation__verdict p { margin: 0; }
.verdict p + p,
.reservation__verdict p + p { margin-top: 5px; font-size: 13.5px; color: var(--text-2); }
.verdict strong,
.reservation__verdict strong { font-weight: 400; color: var(--text); }

.verdict.est-ok,
.reservation__verdict.est-ok {
	border-color: rgba(71, 180, 137, 0.35);
	background: rgba(71, 180, 137, 0.1);
}

.verdict.est-ok::before,
.reservation__verdict.est-ok::before { background: var(--ok); }
.verdict.est-ok strong,
.reservation__verdict.est-ok strong { color: var(--ok); }

.verdict.est-frais,
.reservation__verdict.est-frais {
	border-color: rgba(217, 154, 43, 0.35);
	background: rgba(217, 154, 43, 0.1);
}

.verdict.est-frais::before,
.reservation__verdict.est-frais::before { background: var(--warn); }
.verdict.est-frais strong,
.reservation__verdict.est-frais strong { color: var(--warn); }

.verdict.est-refus,
.reservation__verdict.est-refus {
	border-color: rgba(111, 168, 220, 0.35);
	background: var(--water-dim);
}

.verdict.est-refus::before,
.reservation__verdict.est-refus::before { background: var(--water); }
.verdict.est-refus strong,
.reservation__verdict.est-refus strong { color: var(--water-2); }

/* ---------------------------------------------------------------- Mouvement */

/*
 * D'une page à l'autre, un fondu plutôt qu'une coupure : l'ancienne page s'efface vite, la
 * nouvelle arrive en remontant à peine. L'en-tête, le même partout, ne bouge pas. Les étapes du
 * tunnel de réservation passent par le même fondu (reservation.js), qui couvre aussi le retour
 * en haut de page. Sans View Transitions (Firefox), la coupure habituelle : rien ne casse.
 */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }

	.site-header { view-transition-name: entete; }

	::view-transition-old(root) { animation: page-sort 0.24s cubic-bezier(0.4, 0, 1, 1) both; }
	::view-transition-new(root) { animation: page-entre 0.46s var(--ease) 0.1s both; }
}

@keyframes page-sort { to { opacity: 0; } }
@keyframes page-entre { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------- Composants communs */

/*
 * Pictogrammes au trait (helveor_picto()) : le trait prend la couleur du texte, l'accent celle de
 * l'eau. Comment ça marche et Prestations les posent dans des ronds de tailles différentes.
 */
.picto {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Même épaisseur de trait à toutes les tailles : 1,5 px dans un rond de 104 comme de 48. */
.picto * { vector-effect: non-scaling-stroke; }
.picto .accent { stroke: var(--water-2); }
.picto .pale { opacity: 0.45; }
.picto .epais { stroke-width: 2.5; }
.picto .plein { fill: currentColor; stroke: none; }
.picto .accent.plein { fill: var(--water-2); }

/*
 * Le repère : où l'on est, en petites capitales espacées, comme la ligne d'état de la page de
 * construction. Il ne double jamais le titre qu'il précède : il dit l'étape ou le chapitre.
 */
.oeil,
.repere {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 11.5px;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-3);
}

.repere span {
	font-family: var(--display);
	letter-spacing: 0.08em;
	color: var(--water);
}

/* Un filet court entre le numéro et le nom, comme les filets de la ligne d'état. */
.repere span::after {
	content: '';
	display: inline-block;
	width: 28px;
	height: 1px;
	margin-left: 12px;
	vertical-align: middle;
	background: rgba(238, 242, 247, 0.28);
}

/* ---------------------------------------------------------------- Index des besoins */

/*
 * Ce que le visiteur constate, la prestation qui y répond, son prix : une ligne par cas, séparée
 * par un filet. Une lecture de haut en bas, comme une carte de restaurant, plutôt qu'une grille
 * de cartes qu'il faut balayer. Même liste sur l'accueil et à l'étape 1 du tunnel
 * (template-parts/besoins.php).
 */
.index {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.index__ligne {
	position: relative;
	display: grid;
	grid-template-columns: 2.4em minmax(0, 1fr) auto 1.2em;
	align-items: baseline;
	gap: 4px clamp(14px, 2vw, 26px);
	padding: clamp(18px, 2.2vw, 24px) clamp(4px, 1vw, 12px);
	border-bottom: 1px solid var(--line);
	color: var(--text);
	text-decoration: none;
	isolation: isolate;
}

/* Le survol monte comme un niveau d'eau : un voile qui se remplit de gauche à droite. */
.index__ligne::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(111, 168, 220, 0.1), rgba(111, 168, 220, 0.02) 70%, transparent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-lente) var(--ease);
}

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

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

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

.index__num {
	font-family: var(--display);
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--text-3);
	transition: color var(--dur-lente) var(--ease);
}

.index__ligne:hover .index__num { color: var(--water); }

.index__texte { display: grid; gap: 5px; }

.index__phrase {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(18px, 1.9vw, 21px);
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.index__presta { font-size: 13.5px; line-height: 1.4; color: var(--text-3); }

.index__prix {
	font-family: var(--display);
	font-size: clamp(17px, 1.7vw, 19px);
	color: var(--water-2);
	white-space: nowrap;
}

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

.index__ligne:hover .index__fleche,
.index__ligne:focus-visible .index__fleche { opacity: 1; transform: none; }

/* La sortie de secours : même ligne, en retrait, pour ne pas passer pour une prestation. */
.index__ligne--autre .index__phrase { color: var(--text-2); }
.index__ligne--autre .index__prix { font-family: var(--text-font); font-size: 13.5px; color: var(--text-3); }

/* Au doigt, pas de survol : la flèche reste visible, c'est elle qui dit « ça s'ouvre ». */
@media (hover: none) {
	.index__fleche { opacity: 1; transform: none; }
}

/*
 * Sur téléphone, douze lignes de trois étages faisaient deux écrans, le prix relégué en bas de
 * chaque ligne. Le numéro, décoratif, s'efface. Le symptôme garde la première ligne entière, la
 * prestation et son prix partagent la seconde, le prix calé à droite où l'œil le cherche. La
 * flèche reste visible (pas de survol au doigt) et dit que la ligne s'ouvre. Un tiers plus court.
 */
@media (max-width: 560px) {
	.index__ligne {
		grid-template-columns: minmax(0, 1fr) auto 14px;
		grid-template-areas:
			'phrase phrase fleche'
			'presta prix   fleche';
		gap: 6px 14px;
		padding: 17px 2px 16px;
	}

	.index__num { display: none; }
	.index__texte { display: contents; }

	.index__phrase { grid-area: phrase; font-size: 17.5px; }
	.index__presta { grid-area: presta; font-size: 13px; }

	.index__prix {
		grid-area: prix;
		justify-self: end;
		font-size: 16px;
	}

	.index__fleche {
		grid-area: fleche;
		align-self: center;
		opacity: 1;
		transform: none;
	}
}

/* La page des prix a sa propre feuille : assets/css/prestations.css. */

/* ---------------------------------------------------------------- Fiche prestation */

.fiche { padding-block: clamp(26px, 4vw, 40px) clamp(20px, 3vw, 32px); }

.fil {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--text-3);
}

.fil a { color: var(--text-2); text-decoration: none; }
.fil a:hover { color: var(--text); }
.fil [aria-current] { color: var(--text-3); }

.fiche__titre { max-width: 28ch; margin-top: clamp(18px, 2.6vw, 26px); }

.fiche__chapo {
	max-width: 66ch;
	margin-top: 20px;
	font-size: clamp(16.5px, 1.6vw, 19px);
	line-height: 1.6;
	color: var(--text-2);
}

/* Le prix et l'action, ensemble, avant tout le reste : c'est ce que le visiteur cherche. */
.fiche__offre {
	max-width: 68ch;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
	margin-top: clamp(26px, 3.6vw, 36px);
	padding: 22px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
}

.fiche__prix {
	font-family: var(--display);
	font-size: clamp(28px, 3.6vw, 38px);
	line-height: 1.05;
	color: var(--text);
}

.fiche__offre .aide { margin-top: 6px; max-width: 46ch; }

.fiche__corps {
	max-width: 68ch;
	margin-inline: 0;
	padding-inline: 0;
	padding-block: clamp(30px, 5vw, 48px) 0;
}

/* Ce qui est compris, ce qui ne l'est pas : la marque porte le sens, jamais la couleur seule. */
.liste-oui,
.liste-non { list-style: none; padding-left: 0; }

.liste-oui li,
.liste-non li {
	position: relative;
	padding-left: 30px;
}

.liste-oui li::before,
.liste-non li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--display);
	font-size: 17px;
	line-height: inherit;
}

.liste-oui li::before { content: '✓'; color: var(--ok); }
.liste-non li::before { content: '-'; color: var(--text-3); }

/* Le déroulé d'une intervention est une vraie séquence : elle se numérote. */
.fiche__corps ol {
	list-style: none;
	padding-left: 0;
	counter-reset: geste;
}

.fiche__corps ol li {
	position: relative;
	padding-left: 34px;
	counter-increment: geste;
}

.fiche__corps ol li::before {
	content: counter(geste, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--display);
	font-size: 13px;
	color: var(--water);
	line-height: inherit;
}

/* Variantes d'une même prestation : un choix, donc une liste de prix cliquables. */
.fiche__variantes {
	max-width: 68ch;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
}

.fiche__variantes li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	font-size: 15.5px;
	color: var(--text-2);
}

.fiche__variantes li + li { border-top: 1px solid var(--line); }

.fiche__variantes a {
	font-family: var(--display);
	font-size: 17px;
	color: var(--text);
	text-decoration: none;
	border-bottom: 1px solid rgba(111, 168, 220, 0.35);
	white-space: nowrap;
}

.fiche__variantes a:hover { color: var(--water-2); border-color: var(--water); }

/*
 * Téléphones : logo, langue, « Réserver » et menu sur une rangée de 358 px à 390 px de large. Le
 * globe cède sa place (le code de la langue reste), le nom et le bouton se resserrent un peu.
 */
@media (max-width: 429.98px) {
	.langue__globe { display: none; }
	.langue__bouton { gap: 5px; padding-inline: 7px; }
	.site-logo { gap: 8px; }
	.site-logo__nom { letter-spacing: 0.24em; padding-left: 0.24em; }
	.site-logo__nom span { --espace: 0.24em; }
	.site-header__action { padding-inline: 14px; }
}

/* Les plus petits (320 px) : la flèche de la langue et l'espacement des lettres cèdent aussi. */
@media (max-width: 359.98px) {
	.langue__fleche { display: none; }
	.site-logo__nom { letter-spacing: 0.16em; padding-left: 0.16em; }
	.site-logo__nom span { --espace: 0.16em; }
	.site-header__action { margin-left: 6px; padding-inline: 11px; }
}

/* « La nuit : urgences seulement », à la suite de « Ça coule maintenant ? » (accueil, tunnel) :
   discret, sur sa propre ligne au téléphone. */
.lien-nuit { display: inline-block; margin-left: 12px; }
.lien-nuit::before { content: '·'; margin-right: 12px; color: var(--text-3); }

/* span.lien-nuit : passe devant le lien ambré de la ligne (accueil.css, reservation.css). */
span.lien-nuit a {
	display: inline;
	padding: 0;
	border: 0;
	color: var(--text-2);
	text-decoration: underline;
	text-decoration-color: rgba(163, 182, 201, 0.4);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

span.lien-nuit a:hover { color: var(--text); text-decoration-color: currentColor; }

@media (max-width: 600px) {
	.lien-nuit { display: block; margin: 10px 0 0; }
	.lien-nuit::before { display: none; }
}