/*
 * Le tunnel de réservation, « Mon rendez-vous » et la liste de référence des tarifs.
 *
 * Chargé seulement là où il sert. Le tunnel est le seul endroit du site où presque tout est
 * encadré : ici, chaque cadre est une chose à choisir. Ailleurs, un trait suffit.
 *
 * Le tunnel parle la langue de l'accueil (dessins.css) : le titre sur l'eau, un tube qui se
 * remplit d'étape en étape, et sur grand écran une scène dessinée à gauche de la question.
 *
 * Mouvement : l'eau reste dans le bandeau du haut, les dessins bougent à peine (un flux, une
 * onde), et l'ouverture d'une étape dure 300 ms. Rien ne bouge à côté d'un champ à remplir :
 * sur un tunnel de vente, une animation qui réclame l'œil fait douter.
 */

.tunnel { padding-bottom: clamp(56px, 9vw, 108px); }

/* ---------------------------------------------------------------- Le bandeau d'eau */

/*
 * Le héros de l'accueil en plus court : l'eau, la ligne d'état, le titre fin au centre, et le
 * tube de la progression en pied. L'en-tête du site flotte dessus, voilé, comme sur l'accueil.
 */
body:has(.tunnel-hero) .site-header {
	background: rgba(6, 11, 20, 0.55);
	border-bottom-color: rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
}

.tunnel-hero {
	position: relative;
	margin-top: calc(-1 * var(--entete));
	padding-top: calc(var(--entete) + clamp(36px, 6vh, 64px));
	overflow: hidden;
	isolation: isolate;
	text-align: center;
	border-bottom: 1px solid var(--line);
	/* Le fond que l'eau recouvre, et qui reste seul sans JavaScript. */
	background: radial-gradient(120% 90% at 50% 0%, #12213a 0%, #0a1220 50%, var(--ink) 100%);
}

/* Voiles plus courts que sur l'accueil : le bandeau est bas, l'eau doit rester visible. */
.tunnel-hero .eau::after {
	background:
		linear-gradient(180deg, rgba(6, 11, 20, 0.7) 0, rgba(6, 11, 20, 0) 150px),
		linear-gradient(0deg, var(--ink) 0, rgba(6, 13, 22, 0) 110px),
		radial-gradient(56% 64% at 50% 42%, rgba(4, 9, 16, 0.78) 0%, rgba(4, 9, 16, 0.36) 60%, rgba(4, 9, 16, 0.1) 100%);
}

.tunnel-hero__contenu { display: flex; flex-direction: column; align-items: center; }
.tunnel-hero .statut { margin-top: 0; }

.tunnel-hero h1 {
	max-width: 18em;
	margin-top: clamp(18px, 2.8vh, 26px);
	font-size: clamp(34px, 5vw, 58px);
	font-weight: 200;
	line-height: 1.06;
	letter-spacing: -0.01em;
	transition: font-size var(--dur-lente) var(--ease);
}

.tunnel__lead {
	max-width: 50ch;
	margin-top: 18px;
	font-size: clamp(15.5px, 1.4vw, 17px);
	line-height: 1.7;
	color: var(--text-2);
}

/* L'urgence a sa place, mais elle ne concurrence pas le parcours : une ligne, en ambre. */
.tunnel__urgence {
	margin-top: 14px;
	font-size: 14.5px;
	color: var(--text-2);
}

.tunnel__urgence a {
	display: inline-block;
	padding-block: 10px 2px;
	color: var(--warn);
	border-bottom: 1px solid rgba(240, 192, 105, 0.4);
	text-decoration: none;
	transition: border-color var(--dur-lente) var(--ease);
}

.tunnel__urgence a:hover { color: var(--warn); border-color: var(--warn); }
.tunnel__urgence .prix { font-family: var(--display); font-size: 16px; letter-spacing: 0.02em; }

/*
 * Passé l'étape 1, le bandeau se resserre : le titre et l'urgence. Le visiteur a déjà lu
 * l'explication, et chaque ligne gagnée rapproche la question du haut de l'écran.
 */
.tunnel:not([data-etape-active='1']) .tunnel-hero { padding-top: calc(var(--entete) + clamp(22px, 3.4vh, 36px)); }
.tunnel:not([data-etape-active='1']) .tunnel-hero h1 { margin-top: 14px; font-size: clamp(26px, 3.4vw, 38px); }
.tunnel:not([data-etape-active='1']) .tunnel__lead,
.tunnel:not([data-etape-active='1']) .tunnel__urgence-texte { display: none; }
.tunnel:not([data-etape-active='1']) .tunnel__urgence { margin-top: 4px; }

@media (max-width: 600px) {
	.tunnel-hero { text-align: left; }
	.tunnel-hero__contenu { align-items: flex-start; }
	.tunnel-hero .statut { max-width: none; }
	.tunnel-hero .statut::before { display: none; }
	.tunnel:not([data-etape-active='1']) .tunnel-hero .statut { display: none; }
	.tunnel:not([data-etape-active='1']) .tunnel-hero h1 { margin-top: 0; }
}

/* ---------------------------------------------------------------- Le tube */

/*
 * Cinq nœuds sur un tube, comme le déroulé de l'accueil couché à l'horizontale : l'eau avance
 * jusqu'à l'étape en cours (--niveau, de 0 à 1, posé par reservation.js). Le nœud porte
 * l'information, pas la couleur seule : franchi, il est plein, et en cours, il est cerclé de
 * blanc. Jamais de rouge ici, il reste à l'action.
 */
.progression { margin-top: clamp(30px, 5vh, 48px); }

.progression__liste {
	--centre: calc((100% - 2 * var(--gutter)) / 10);
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	/* La liste porte aussi .rail : on ne remet à zéro que le vertical, sinon elle se décentre. */
	margin-block: 0;
	padding-block: 0 22px;
	list-style: none;
}

.progression__liste::before,
.progression__liste::after {
	content: '';
	position: absolute;
	top: 14px;
	left: calc(var(--gutter) + var(--centre));
	right: calc(var(--gutter) + var(--centre));
	height: 1px;
}

.progression__liste::before { background: var(--line-strong); }

.progression__liste::after {
	background: linear-gradient(90deg, rgba(169, 207, 240, 0.2), var(--water-2) 30%, var(--water));
	box-shadow: 0 0 10px rgba(111, 168, 220, 0.55);
	transform: scaleX(var(--niveau, 0));
	transform-origin: left;
	transition: transform 0.9s var(--ease);
}

.progression__liste li {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
	color: var(--text-3);
	transition: color var(--dur) var(--ease);
}

.progression__noeud {
	position: relative;
	display: grid;
	place-items: center;
	width: 29px;
	height: 29px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: var(--ink);
	font-family: var(--display);
	font-size: 13px;
	letter-spacing: 0;
	color: var(--text-3);
	transition: background-color 0.6s var(--ease), border-color 0.6s var(--ease), color 0.6s var(--ease);
}

.progression__liste [data-fait] { color: var(--text-2); }

.progression__liste [data-fait] .progression__noeud {
	border-color: var(--water-2);
	background: var(--water);
	color: var(--ink);
}

.progression__liste [aria-current='step'] { color: var(--text); }

.progression__liste [aria-current='step'] .progression__noeud {
	border-color: #fff;
	background: #10243a;
	color: #fff;
	box-shadow: 0 0 0 4px rgba(111, 168, 220, 0.16), 0 0 18px rgba(169, 207, 240, 0.45);
}

/* L'eau arrive au nœud en cours : une onde en part, comme de la goutte du héros. */
@keyframes pouls {
	from { transform: scale(1); opacity: 0.6; }
	to   { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
	.progression__liste [aria-current='step'] .progression__noeud::after {
		content: '';
		position: absolute;
		inset: -1px;
		border: 1px solid var(--water-2);
		border-radius: 50%;
		animation: pouls 2.4s var(--ease) infinite;
	}
}

/* Sous 640 px, cinq libellés ne tiennent pas : les nœuds restent, le libellé actif seul parle,
   posé sous le tube, aligné sur le titre. */
@media (max-width: 640px) {
	.progression__liste { padding-bottom: 42px; }
	.progression__liste li { position: static; }
	.progression__nom { display: none; }

	.progression__liste [aria-current='step'] .progression__nom {
		position: absolute;
		left: var(--gutter);
		bottom: 14px;
		display: block;
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------- Deux colonnes */

/*
 * Sur grand écran, la scène à gauche reste en vue, la question à droite : la même composition
 * que les chapitres de l'accueil. Sous 960 px, une colonne : le résumé, puis la question.
 */
.tunnel__corps { padding-top: clamp(28px, 5vw, 56px); }

@media (min-width: 960px) {
	.tunnel__corps {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(44px, 5.5vw, 88px);
		align-items: start;
	}

	.scene {
		position: sticky;
		top: calc(var(--entete) + 28px);
	}
}

/* ---------------------------------------------------------------- La scène */

/* Un dessin par moment du parcours : la maison, la carte, la journée. */
.scene__dessins { display: none; }

@media (min-width: 960px) {
	.scene__dessins { display: block; }
	.scene__vue { display: none; }

	.tunnel[data-etape-active='1'] .scene__vue--maison,
	.tunnel[data-etape-active='3'] .scene__vue--maison,
	.tunnel[data-etape-active='2'] .scene__vue--carte,
	.tunnel[data-etape-active='4'] .scene__vue--journee,
	.tunnel[data-etape-active='5'] .scene__vue--journee { display: block; }
}

@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
	.scene__vue { animation: apparition 0.9s var(--ease) both; }
}

/* La maison : le résumé tient dessous, le dessin prend le reste de l'écran. Sur un écran bas,
   elle rapetisse au lieu de disparaître : la colonne resterait vide. */
.scene .coupe { display: block; margin-top: 6px; }
.scene .coupe__dessin { max-height: max(180px, calc(100svh - var(--entete) - 330px)); }

/* ---------------------------------------------------------------- Étapes */

/* Sous le résumé au téléphone, en tête de colonne sur grand écran. */
.etape {
	margin-top: clamp(30px, 5vw, 44px);
	/* L'en-tête du site reste collé en haut : une étape visée par ancre ne se cache pas dessous. */
	scroll-margin-top: calc(var(--entete) + 24px);
}

@media (min-width: 960px) {
	.etape { margin-top: 0; }
}

/*
 * Le repère et « Retour » sur la même ligne : revenir se trouve là où l'on regarde en arrivant,
 * et la barre du bas ne garde que le prix et la suite. La cible fait 44 px sans épaissir la ligne.
 */
.etape__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.etape__retour {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	margin-block: -12px;
	padding: 12px 0 12px 12px;
	background: none;
	border: 0;
	font: inherit;
	font-size: 14px;
	color: var(--text-2);
	cursor: pointer;
	transition: color var(--dur) var(--ease);
}

.etape__retour:hover,
.etape__retour:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.etape__retour:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }
.etape__retour[disabled] { opacity: 0.4; cursor: not-allowed; }

.etape__titre { margin-top: 18px; font-size: clamp(26px, 3.4vw, 38px); }
.etape__titre:focus-visible { outline-offset: 6px; }

.etape__aide {
	max-width: 60ch;
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-2);
}

.etape__statut { margin-top: 20px; font-size: 15px; color: var(--text-2); }

.etape > .index,
.etape > .adresse,
.etape > .ligne-champs,
.etape > .champ,
.etape > fieldset,
.etape > .recap,
.etape > .verdict { margin-top: 24px; }

/* Enfants directs seulement : deux champs côte à côte dans une .ligne-champs sont aussi
   frères, et la marge décalait le second d'une demi-ligne vers le bas. */
.etape .ligne-champs + .ligne-champs,
.etape > .ligne-champs + .champ,
.etape > .champ + .champ,
.etape fieldset + .recap { margin-top: 20px; }

@keyframes ouverture {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* Navigateurs sans View Transitions seulement : les autres passent par le fondu de page (main.css). */
.vient-d-ouvrir { animation: ouverture 0.45s var(--ease) both; }

/* -------------------------------------------------- Ce qui a été choisi */

/*
 * Les réponses déjà données, une par ligne, chacune avec son « Modifier ». Au téléphone, un
 * cadre au-dessus de la question. Sur grand écran, sous le dessin, des filets suffisent.
 */
.choisi {
	padding: 16px 20px 6px;
	background: var(--surface);
	border: 1px solid rgba(111, 168, 220, 0.3);
	border-radius: var(--r-lg);
}

@media (min-width: 960px) {
	.choisi {
		margin-top: clamp(22px, 3.4vh, 34px);
		padding: 16px 0 0;
		background: none;
		border: 0;
		border-top: 1px solid var(--line-strong);
		border-radius: 0;
	}
}

.choisi__titre {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-3);
}

.choisi__liste { margin: 6px 0 0; }

.choisi__ligne {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	align-items: baseline;
	gap: 4px 16px;
	padding: 10px 0;
	border-top: 1px solid var(--line);
}

.choisi__ligne:first-child { border-top: 0; }
.choisi__ligne[hidden] { display: none; }

.choisi__ligne dt { font-size: 13.5px; color: var(--text-3); }
/* « Modifier » vit dans la valeur qu'il change : un <dl> n'accepte que des <dt> et des <dd>. */
.choisi__ligne dd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	font-size: 15.5px;
	line-height: 1.45;
	color: var(--text);
}

.choisi__valeur { display: block; min-width: 0; }
.choisi__ligne dd .aide { display: block; margin-top: 2px; }
.choisi__nom { color: var(--text); }

.choisi__modifier {
	min-height: 40px;
	padding: 0 2px;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(111, 168, 220, 0.4);
	font: inherit;
	font-size: 14.5px;
	color: var(--water);
	text-decoration: none;
	cursor: pointer;
	align-self: center;
	display: inline-flex;
	align-items: center;
}

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

@media (max-width: 480px) {
	.choisi { padding-inline: 16px; }
	.choisi__ligne { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- Choix */

.choix-groupe { margin-top: 24px; }
.materiel + .recap { margin-top: 24px; }

.choix-groupe legend,
.formules legend {
	margin-bottom: 14px;
	padding: 0;
	font-size: 15px;
	color: var(--text-2);
}

.choix-groupe legend { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--text); }

/* « 1 » puis « 2 » : l'ordre se lit avant le texte. */
.choix-groupe__num {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 24px;
	height: 24px;
	border: 1px solid var(--water);
	border-radius: 50%;
	font-family: var(--display);
	font-size: 13px;
	color: var(--water-2);
}

.choix { display: flex; flex-wrap: wrap; gap: 10px; }
.formules .choix { flex-direction: column; }

/* La question de la prestation : deux réponses de même largeur, faciles à toucher. */
.question .option label { min-width: 7rem; }

/* Au téléphone, les heures en grille régulière plutôt qu'en escalier. */
@media (max-width: 560px) {
	[data-liste-heures] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	[data-liste-heures] .option label { flex-wrap: wrap; gap: 2px 8px; padding-inline: 8px; }

	/* La majoration du soir passe sous l'heure : « +CHF 149.00 » ne tient pas à côté. */
	[data-liste-heures] .option__majoration { flex-basis: 100%; text-align: center; line-height: 1.2; }
}

/*
 * Les jours en feuillets de calendrier, cinq par rangée. Une semaine ouvrée se lit d'un coup
 * d'œil : le jour en capitales, la date en grand, le mois dessous.
 */
[data-liste-jours] {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
}

.jour-tuile label {
	position: relative;
	flex-direction: column;
	gap: 3px;
	min-height: 88px;
	padding: 12px 4px 11px;
	font-family: var(--text-font);
}

.jour-tuile__nom {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-3);
}

.jour-tuile__num {
	font-family: var(--display);
	font-weight: 200;
	font-size: clamp(26px, 2.6vw, 32px);
	line-height: 1;
	color: var(--text);
}

.jour-tuile__mois { font-size: 12.5px; color: var(--text-2); }

.jour-tuile input:checked + label .jour-tuile__nom { color: var(--water-2); }

/* La coche se range dans le coin bas : au centre, elle poussait la date, et en haut, elle
   touchait le nom du jour sur un feuillet étroit. */
.jour-tuile input:checked + label::before {
	position: absolute;
	right: 7px;
	bottom: 5px;
	font-size: 12px;
}

@media (max-width: 400px) {
	[data-liste-jours] { gap: 6px; }
	.jour-tuile label { min-height: 78px; }
	.jour-tuile__nom { letter-spacing: 0.1em; }
}

/* Le champ recouvre l'étiquette, qui porte l'apparence : la cible fait la taille du choix. */
.option { position: relative; display: inline-flex; }

.option input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.option label {
	display: inline-flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--tap);
	padding: 12px 20px;
	background: var(--ink);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	color: var(--text);
	font-family: var(--display);
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.option label:hover { border-color: rgba(111, 168, 220, 0.6); }
.option label:active { transform: translateY(1px); }

/* Le choix retenu se voit d'un coup d'œil, sans compter sur la seule teinte : filet doublé et
   coche. Jamais de rouge ici, il reste à l'action. */
.option input:checked + label {
	background: var(--water-dim);
	border-color: var(--water);
	box-shadow: inset 0 0 0 1px var(--water);
	color: #fff;
}

.option input:checked + label::before {
	content: '✓';
	font-family: var(--display);
	font-size: 14px;
	color: var(--water-2);
}

/* Sur une formule, la coche prend place avant le nom, qui reste aligné sur le prix. */
.option--large input:checked + label::before { order: -1; margin-right: -2px; }
.option--large label { gap: 12px; }
.option--large .option__nom { flex: 1; }

.option input:focus-visible + label {
	outline: 2px solid var(--water);
	outline-offset: 3px;
}

.option--large { display: flex; }

.option--large label {
	justify-content: space-between;
	padding: 16px 20px;
	font-family: var(--text-font);
	font-size: 16px;
}

.option__nom { text-align: left; }

.option__prix {
	font-family: var(--display);
	font-size: 18px;
	white-space: nowrap;
}

.option__majoration {
	font-family: var(--text-font);
	font-size: 13px;
	color: var(--warn);
}

/* ---------------------------------------------------------------- Récapitulatif */

.recap {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px 0;
	margin: 0;
	padding: 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	font-size: 15px;
}

.recap dt { color: var(--text-2); }

.recap dd {
	margin: 0;
	padding-left: 20px;
	text-align: right;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.recap .recap__total {
	padding-top: 14px;
	border-top: 1px solid var(--line-strong);
	color: var(--text);
}

/* Le total, en grand et fin : c'est le chiffre que le visiteur vient chercher à cette étape. */
.recap dt.recap__total { display: flex; align-items: flex-end; padding-bottom: 4px; }
.recap dd.recap__total { font-family: var(--display); font-weight: 200; font-size: clamp(30px, 3.4vw, 40px); line-height: 1; }

/* ---------------------------------------------------------------- La journée */

/*
 * Le cadran de 24 heures de la scène (template-parts/journee.php) : midi en haut, minuit en
 * bas. Les tranches majorées en ambre, les créneaux libres en points, l'intervention retenue
 * en arc d'eau claire, l'heure d'arrivée en grand au centre.
 */
.journee { margin: 0; }

.journee__cadran {
	display: block;
	width: 100%;
	max-width: min(360px, max(220px, calc(100svh - var(--entete) - 330px)));
	height: auto;
	overflow: visible;
}

.journee__piste { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.journee__tranche { fill: none; stroke: rgba(240, 192, 105, 0.3); stroke-width: 7; }
.journee__tranche--nuit { stroke: rgba(240, 192, 105, 0.5); }

.journee__taux {
	font-family: var(--display);
	font-size: 12px;
	text-anchor: middle;
	fill: var(--warn);
}

.journee__graduations line { stroke: rgba(238, 242, 247, 0.2); stroke-width: 1; }
.journee__graduations .est-grande { stroke: rgba(238, 242, 247, 0.5); }

.journee__heure-repere {
	font-size: 10px;
	letter-spacing: 0.1em;
	text-anchor: middle;
	fill: var(--text-3);
}

.journee__creneau { fill: var(--water-2); opacity: 0.75; }

.journee__choix {
	fill: none;
	stroke: var(--water-2);
	stroke-width: 4;
	stroke-linecap: round;
	filter: drop-shadow(0 0 6px rgba(169, 207, 240, 0.7));
}

.journee__arrivee { display: none; }
.journee.est-choisi .journee__arrivee { display: inline; }
.journee__coeur { fill: #fff; }

.journee__onde {
	fill: none;
	stroke: var(--water-2);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
	.journee.est-choisi .journee__onde { animation: onde-point 1.8s var(--ease) infinite; }
}

.journee__jour {
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-anchor: middle;
	fill: var(--text-3);
}

.journee__grande {
	font-family: var(--display);
	font-weight: 200;
	font-size: 46px;
	font-variant-numeric: tabular-nums;
	text-anchor: middle;
	fill: var(--text);
}

.journee__detail { font-size: 12px; text-anchor: middle; fill: var(--text-2); }

.journee__legende {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 14px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-3);
}

.journee__legende span { display: inline-flex; align-items: center; gap: 9px; }

.journee__puce {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--water-2);
}

.journee__puce--majoree { width: 14px; height: 4px; border-radius: 0; background: rgba(240, 192, 105, 0.55); }

/* ---------------------------------------------------------------- Garanties */

/* Deux chiffres avant de payer, lus dans les réglages : la langue des chiffres de l'accueil. */
.garanties {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 28px 0 0;
	border-block: 1px solid var(--line);
}

.garanties > div { padding: 18px 18px 18px 0; }
.garanties > div + div { padding: 18px 0 18px 18px; border-left: 1px solid var(--line); }

.garanties dt {
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-3);
}

.garanties dd { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }

.garanties__valeur {
	display: block;
	margin-bottom: 8px;
	font-family: var(--display);
	font-weight: 200;
	font-size: clamp(30px, 3.4vw, 38px);
	line-height: 1;
	color: var(--text);
}

.garanties__valeur small { font-size: 0.42em; letter-spacing: 0.04em; color: var(--text-2); }

/* ---------------------------------------------------------------- Barre d'action */

/*
 * Le prix, avancer. Au téléphone, collée au bas de l'écran : le visiteur n'a jamais à
 * chercher la suite. Sur grand écran, immobile à la fin de l'étape (voir plus bas) : une barre
 * qui glisse sur le formulaire cachait les champs et les messages d'erreur. Quand il manque une
 * réponse, le bouton se grise mais reste actif : il répète la consigne écrite juste en dessous
 * et amène à ce qu'il faut toucher.
 */
.barre {
	position: sticky;
	bottom: 0;
	z-index: 40;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		'total suite'
		'consigne consigne';
	align-items: center;
	gap: 10px 20px;
	margin-top: clamp(28px, 4vw, 40px);
	padding: 14px 18px max(14px, env(safe-area-inset-bottom));
	background: rgba(11, 22, 36, 0.97);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-lg);
	box-shadow: 0 -10px 30px rgba(2, 6, 12, 0.5);
}

.barre[hidden] { display: none; }

.barre__total { grid-area: total; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.barre__total span { font-size: 12.5px; color: var(--text-2); }

.barre__total strong {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(21px, 2.6vw, 27px);
	line-height: 1.05;
	color: var(--text);
	white-space: nowrap;
}

.barre__suite { grid-area: suite; }

.barre__consigne {
	grid-area: consigne;
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--water-2);
}

.barre__consigne[hidden] { display: none; }

/* Des coordonnées à corriger : la consigne prend la couleur des champs signalés. */
.barre__consigne.est-erreur { color: var(--warn); }

/* Un appui sur le bouton grisé : la consigne se signale une fois, sans alarme. */
@keyframes rappel {
	0%, 100% { transform: none; }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

.barre__consigne.est-rappel { animation: rappel 0.3s var(--ease); }

@media (prefers-reduced-motion: reduce) {
	.barre__consigne.est-rappel { animation: none; }
}

/*
 * Dans une colonne étroite (la colonne de droite sur grand écran, ou le téléphone), le prix et
 * l'action ne tiennent pas sur une ligne : le prix en haut, l'action sur toute la largeur dessous.
 * La règle suit la largeur de la colonne, pas celle de l'écran.
 */
.tunnel__etapes { container: etapes / inline-size; min-width: 0; }

@container etapes (max-width: 680px) {
	.barre {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			'total'
			'suite'
			'consigne';
		gap: 10px 12px;
	}

	.barre .bouton { width: 100%; }
}

/* Grand écran : la barre reste où elle est, à la fin de l'étape. Elle ne suit plus le défilement. */
@media (min-width: 960px) {
	.barre {
		position: static;
		box-shadow: none;
	}
}

/* Au téléphone, la barre touche les bords de l'écran. */
@media (max-width: 560px) {
	.barre {
		padding-inline: 14px;
		border-radius: var(--r-lg) var(--r-lg) 0 0;
		margin-inline: calc(var(--gutter) * -1);
	}
}

/* ---------------------------------------------------------------- Champs divers */

.facultatif { color: var(--text-3); }

.piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * Jamais de rouge : ici il ne veut dire qu'une chose, réserver. Une erreur se signale en ambre,
 * toujours avec une icône et des mots qui disent quoi corriger, jamais par la couleur seule.
 * L'eau claire d'avant se confondait avec le reste de la page : on ne la voyait pas.
 */
.erreur,
.reservation__erreur {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-top: 18px;
	padding: 14px 16px;
	background: rgba(240, 192, 105, 0.08);
	border: 1px solid rgba(240, 192, 105, 0.5);
	border-left-width: 4px;
	border-radius: var(--r-md);
	color: var(--text);
	font-size: 15px;
	line-height: 1.5;
}

.erreur[hidden],
.reservation__erreur[hidden] { display: none; }

/* Le point d'exclamation, dessiné en CSS : il suit la taille du texte. */
.erreur::before,
.reservation__erreur::before,
.champ__erreur::before {
	content: '!';
	flex: none;
	display: grid;
	place-items: center;
	width: 1.2em;
	height: 1.2em;
	margin-top: 0.15em;
	border-radius: 50%;
	background: var(--warn);
	color: var(--ink);
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1;
}

/* Sous le champ fautif : le cadre s'épaissit en ambre, le message dit quoi écrire. */
.champ.est-invalide input,
.champ.est-invalide textarea {
	border-color: var(--warn);
	box-shadow: inset 0 0 0 1px var(--warn);
	background-color: rgba(240, 192, 105, 0.05);
}

.champ.est-invalide input[type='file'] { box-shadow: none; background: none; }

/* Le champ où l'on écrit reste reconnaissable parmi les champs signalés. */
.champ.est-invalide input:focus,
.champ.est-invalide textarea:focus { box-shadow: inset 0 0 0 1px var(--warn), 0 0 0 3px rgba(240, 192, 105, 0.28); }

.champ__erreur {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	color: var(--warn);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.45;
}

.champ__erreur[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
	.champ__erreur:not([hidden]),
	.erreur:not([hidden]) { animation: ouverture 0.25s var(--ease) both; }
}

/* ---------------------------------------------------------------- Tarifs de référence */

/* Replié sous la liste des besoins : une ligne, qui s'ouvre sur toute la grille. */
.tarifs-ref {
	margin-top: clamp(32px, 4.4vw, 44px);
	border-block: 1px solid var(--line);
}

.tarifs-ref summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 18px;
	min-height: var(--tap);
	padding: 18px 2px;
	cursor: pointer;
	list-style: none;
}

.tarifs-ref summary::-webkit-details-marker { display: none; }
.tarifs-ref summary:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }

.tarifs-ref__question { font-size: 15px; color: var(--text-2); }

.tarifs-ref__ouvrir {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	font-size: 14.5px;
	color: var(--water);
	border-bottom: 1px solid rgba(111, 168, 220, 0.4);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.tarifs-ref__ouvrir::after { content: '+'; font-family: var(--display); font-size: 18px; line-height: 1; }
.tarifs-ref[open] .tarifs-ref__ouvrir::after { content: '−'; }
.tarifs-ref summary:hover .tarifs-ref__ouvrir { color: var(--water-2); border-color: var(--water-2); }
.tarifs-ref[open] { padding-bottom: clamp(24px, 3vw, 32px); }

.tarifs-ref__grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: clamp(24px, 3vw, 40px);
	margin-top: 8px;
}

.tarifs-ref__famille h3 {
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
	font-size: 15px;
	font-family: var(--text-font);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--text);
}

.tarifs-ref__famille ul { margin: 0; padding: 0; list-style: none; }

.tarifs-ref__famille a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
	color: var(--text-2);
	text-decoration: none;
	font-size: 15px;
	transition: color var(--dur) var(--ease);
}

.tarifs-ref__famille a:hover { color: var(--text); }

.tarifs-ref__famille .prix {
	font-family: var(--display);
	font-size: 16px;
	color: var(--text);
	white-space: nowrap;
}

.tarifs-ref__note { max-width: 78ch; margin-top: clamp(24px, 3vw, 32px); }

/* ---------------------------------------------------------------- Mon rendez-vous */

.rendez-vous { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 9vw, 108px); }

.rendez-vous__tete h1 { font-size: clamp(32px, 4.6vw, 52px); }

.rendez-vous__lead {
	max-width: 56ch;
	margin-top: 18px;
	font-size: clamp(16px, 1.6vw, 18px);
	line-height: 1.6;
	color: var(--text-2);
}

.rendez-vous__message,
.rendez-vous .erreur { max-width: 760px; margin-top: clamp(24px, 3.4vw, 32px); }

.rendez-vous__bloc {
	margin-top: clamp(40px, 6vw, 64px);
	padding-top: clamp(32px, 4.4vw, 48px);
	border-top: 1px solid var(--line);
	scroll-margin-top: calc(var(--entete) + 16px);
}

.rendez-vous__bloc h2 { margin-top: 18px; font-size: clamp(26px, 3.4vw, 36px); }

.rendez-vous__texte {
	max-width: 60ch;
	margin-top: 14px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--text-2);
}

.rendez-vous__texte strong { color: var(--text); font-weight: 400; }

/* Ce qui n'est plus possible en ligne : dit calmement, en eau claire, jamais en rouge. */
.rendez-vous__impasse {
	max-width: 68ch;
	margin-top: 18px;
	padding: 14px 18px;
	border-left: 2px solid var(--water);
	background: var(--water-dim);
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-2);
}

.rendez-vous__contact { margin-top: 18px; font-size: 14.5px; color: var(--text-2); }

.rendez-vous__contact a {
	white-space: nowrap;
	color: var(--text);
	text-decoration: none;
	border-bottom: 1px solid rgba(111, 168, 220, 0.45);
	transition: border-color var(--dur-lente) var(--ease);
}

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

.rendez-vous__formulaire { display: grid; gap: 14px; margin-top: 22px; }
.rendez-vous__formulaire .aide { max-width: 56ch; }

/* Sans lien : l'explication à gauche, le champ à droite, comme les chapitres de l'accueil. */
@media (min-width: 900px) {
	.rendez-vous__deux {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: clamp(32px, 5vw, 72px);
		align-items: start;
	}

	.rendez-vous__deux .rendez-vous__formulaire { margin-top: 0; }
}

/* -------------------------------------------------- Le billet */

/*
 * Le résumé du rendez-vous, comme un billet : le statut, la date en grand (c'est ce que le
 * client vient vérifier), puis le reste en petit. Le seul cadre de la page.
 */
.billet {
	position: relative;
	max-width: 760px;
	margin-top: clamp(32px, 4.4vw, 48px);
	padding: clamp(24px, 3.4vw, 40px);
	overflow: hidden;
	isolation: isolate;
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-lg);
}

/* Une lueur de surface dans le coin, celle du héros de l'accueil. */
.billet::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(70% 90% at 100% 0%, rgba(88, 152, 214, 0.16), rgba(88, 152, 214, 0) 70%);
}

.billet__statut {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ok);
}

.billet__statut i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.billet.est-annule .billet__statut,
.billet.est-passe .billet__statut { color: var(--text-3); }

.billet__jour {
	margin-top: 18px;
	font-family: var(--display);
	font-weight: 200;
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1.02;
	letter-spacing: -0.01em;
}

.billet.est-annule .billet__jour { color: var(--text-3); text-decoration: line-through; text-decoration-thickness: 1px; }

.billet__heure { margin-top: 10px; font-size: 16px; color: var(--text-2); }

.billet__heure time {
	font-family: var(--display);
	font-size: 22px;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.billet__details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	gap: 18px 28px;
	margin: clamp(24px, 3.4vw, 32px) 0 0;
	padding-top: clamp(20px, 3vw, 26px);
	border-top: 1px solid var(--line);
}

.billet__details dt {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-3);
}

.billet__details dd { margin: 8px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--text); }
.billet__details .prix { font-family: var(--display); font-size: 19px; }

/* -------------------------------------------------- Créneaux de report */

/* Un jour par ligne, déplié au choix : sans JavaScript, la page reste courte. */
.jours { border-top: 1px solid var(--line); }

.jour { border-bottom: 1px solid var(--line); }

.jour summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 4px;
	font-family: var(--display);
	font-size: 18px;
	color: var(--text);
	cursor: pointer;
	list-style: none;
}

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

.jour summary::after {
	content: '+';
	font-family: var(--display);
	font-size: 20px;
	line-height: 1;
	color: var(--water);
}

.jour[open] summary::after { content: '−'; }

.jour__nombre {
	margin-left: auto;
	font-family: var(--text-font);
	font-size: 13px;
	color: var(--text-3);
}

.jour fieldset { padding: 2px 0 20px; }

@media (max-width: 560px) {
	.jour .choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.jour .option label { padding-inline: 8px; }
}

/* -------------------------------------------------- Case de confirmation */

.case {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var(--tap);
}

.case input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--water);
}

.case label { font-size: 15.5px; color: var(--text); cursor: pointer; }

.rendez-vous__pied {
	margin-top: clamp(40px, 6vw, 64px);
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------------- Matériel */

/*
 * Qui fournit le matériel (cahier du 11.10.2026, § 3.2) : deux grandes cases, un dessin et ce
 * que le choix implique, le prix de la pièce ou le délai. L'avis qui suit dit la conséquence :
 * en ambre ce qui demande l'attention du client (sa pièce doit convenir), en eau ce qui l'informe.
 */
.materiel__choix { display: grid; gap: 10px; }

@media (min-width: 640px) {
	.materiel__choix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.materiel__option { display: flex; }

.option--large.materiel__option label {
	position: relative;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 40px 18px 18px;
	text-align: left;
}

.materiel__picto {
	flex: none;
	width: 40px;
	height: 40px;
	color: var(--text-2);
	transition: color var(--dur) var(--ease);
}

.materiel__picto .picto { width: 100%; height: 100%; }
.option input:checked + label .materiel__picto { color: var(--water-2); }

.materiel__texte { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.materiel__texte .option__nom { font-family: var(--display); font-size: 17px; line-height: 1.3; }

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

.option--large.materiel__option input:checked + label::before {
	position: absolute;
	top: 14px;
	right: 16px;
	order: 0;
	margin: 0;
}

.materiel__avis {
	position: relative;
	margin: 14px 0 0;
	padding: 12px 14px 12px 44px;
	border: 1px solid rgba(240, 192, 105, 0.38);
	border-radius: var(--r-md);
	background: rgba(240, 192, 105, 0.06);
	font-size: 14px;
	line-height: 1.6;
	color: var(--text);
}

.materiel__avis::before {
	content: '!';
	position: absolute;
	left: 14px;
	top: 13px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border: 1px solid var(--warn);
	border-radius: 50%;
	font-family: var(--display);
	font-size: 12px;
	line-height: 1;
	color: var(--warn);
}

.materiel__avis--eau {
	border-color: rgba(111, 168, 220, 0.35);
	background: var(--water-dim);
}

.materiel__avis--eau::before {
	content: 'i';
	border-color: var(--water);
	color: var(--water-2);
}

/* ---------------------------------------------------------------- Demande envoyée */

.demande-envoyee .repere span { font-size: 14px; }
.demande-envoyee:focus { outline: none; }

/* -------------------------------------------------- Demande sur proposition de prix */

/* Une demande qui attend : l'ambre, la couleur de ce qui demande une réponse, jamais le rouge. */
.billet.est-attente .billet__statut { color: var(--warn); }

.proposition__recap { max-width: 560px; margin-top: 24px; }
.proposition .rendez-vous__impasse strong { color: var(--text); font-weight: 400; }

/* ---------------------------------------------------------------- Le soir */

/*
 * Les heures du soir (cahier du 11.10.2026, § 6.1) : sur leur propre ligne, après celles de la
 * journée, derrière un bouton discret. Une fois l'une choisie, ses conditions se confirment.
 */
.heures-soir {
	grid-column: 1 / -1;
	flex-basis: 100%;
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px dashed var(--line-strong);
}

.heures-soir__ouvrir {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: var(--tap);
	padding: 0;
	border: 0;
	background: none;
	color: var(--water);
	font: inherit;
	font-size: 14.5px;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	cursor: pointer;
}

.heures-soir__ouvrir:hover { color: var(--water-2); }
.heures-soir__note { margin: 4px 0 12px; }
.heures-soir__liste { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 560px) {
	.heures-soir__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.heures-soir__liste .option label { flex-wrap: wrap; gap: 2px 8px; padding-inline: 8px; }
	.heures-soir__liste .option__majoration { flex-basis: 100%; text-align: center; line-height: 1.2; }
}

.soir {
	margin-top: 20px;
	padding: 16px 18px;
	border: 1px solid rgba(240, 192, 105, 0.38);
	border-radius: var(--r-md);
	background: rgba(240, 192, 105, 0.06);
}

.soir__texte { font-size: 14.5px; line-height: 1.6; color: var(--text); }
.soir .case { margin-top: 10px; }