/*
 * Comment ça marche, chargée sur cette page seulement, après locale.css dont elle reprend les
 * sections, le texte rédigé et la clôture.
 *
 * Une page qui se regarde : cinq dessins sur un même fil d'eau, puis deux schémas, la journée
 * et ses majorations, le délai de report. Les dessins sont au trait, comme la maison en coupe :
 * le trait prend la couleur du texte, l'accent celle de l'eau. Le rouge reste au bouton.
 */

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

.marche-tete {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: clamp(26px, 4vw, 40px) clamp(56px, 7vw, 88px);
}

/* La lueur de surface des pages locales, reprise en bas pour porter le fil des étapes. */
.marche-tete::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(55% 60% at 90% 0%, rgba(88, 152, 214, 0.15), rgba(88, 152, 214, 0) 70%),
		radial-gradient(70% 45% at 30% 100%, rgba(88, 152, 214, 0.08), rgba(88, 152, 214, 0) 70%),
		linear-gradient(180deg, rgba(18, 33, 58, 0.35), rgba(6, 13, 22, 0) 420px);
}

.marche-tete__grille {
	display: grid;
	gap: 22px;
	margin-top: clamp(28px, 4.4vw, 52px);
}

@media (min-width: 960px) {
	.marche-tete__grille {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		column-gap: clamp(40px, 6vw, 72px);
		align-items: end;
	}
}

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

.marche-tete__chapo {
	max-width: 46ch;
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.7;
	color: var(--text-2);
}

.marche-tete__actions {
	align-items: center;
	gap: 14px 28px;
	margin-top: clamp(22px, 3vw, 30px);
}

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

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

/*
 * Sur téléphone, une ligne de temps : les ronds sur un fil vertical, le texte à côté. Sur grand
 * écran, une frise : cinq colonnes, les ronds sur un fil horizontal qu'une goutte parcourt de
 * bout en bout, et chaque rond s'éclaire quand elle y passe.
 */
.etapes {
	--rond: 64px;
	--cycle: 8s;
	position: relative;
	margin-top: clamp(48px, 7vw, 88px);
}

.etapes__liste {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.etape {
	position: relative;
	display: grid;
	grid-template-columns: var(--rond) minmax(0, 1fr);
	column-gap: 20px;
	padding-bottom: 30px;
}

.etape:last-child { padding-bottom: 0; }

.etape__rond {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--rond);
	height: var(--rond);
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, #11243b, var(--ink) 74%);
	color: var(--text-2);
}

.etape__rond .picto { width: 54%; height: 54%; }

/* Le fil vertical : du bas d'un rond au haut du suivant. */
.etape:not(:last-child)::after {
	content: '';
	position: absolute;
	left: calc(var(--rond) / 2 - 0.5px);
	top: var(--rond);
	bottom: 0;
	width: 1px;
	background: linear-gradient(180deg, rgba(111, 168, 220, 0.7), rgba(111, 168, 220, 0.18));
}

.etape__num {
	padding-top: 4px;
	font-family: var(--display);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--water);
}

.etape__titre {
	margin-top: 4px;
	font-size: clamp(18px, 1.7vw, 20px);
	font-weight: 400;
	line-height: 1.3;
}

.etape__phrase {
	max-width: 36ch;
	margin-top: 7px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--text-2);
}

.etapes__fil { display: none; }

@media (min-width: 960px) {
	.etapes { --rond: 104px; --ecart: clamp(20px, 2.4vw, 32px); }

	.etapes__liste {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--ecart);
	}

	.etape { display: block; padding-bottom: 0; }
	.etape:not(:last-child)::after { display: none; }
	.etape__rond .picto { width: 50%; height: 50%; }
	.etape__texte { margin-top: 26px; }
	.etape__num { padding-top: 0; }

	/* Du centre du premier rond au centre du dernier : la dernière colonne, moins un demi-rond. */
	.etapes__fil {
		display: block;
		position: absolute;
		top: calc(var(--rond) / 2);
		left: calc(var(--rond) / 2);
		right: calc((100% - 4 * var(--ecart)) / 5 - var(--rond) / 2);
		height: 1px;
		background: linear-gradient(90deg, rgba(238, 242, 247, 0.2), rgba(111, 168, 220, 0.55));
	}

	/* La goutte : le porteur glisse de sa propre largeur, donc de tout le fil. */
	.etapes__porteur {
		position: absolute;
		inset: 0;
		animation: etapes-course var(--cycle) linear infinite;
	}

	.etapes__goutte {
		position: absolute;
		left: -72px;
		top: -1px;
		width: 72px;
		height: 3px;
		border-radius: 2px;
		background: linear-gradient(90deg, rgba(169, 207, 240, 0), rgba(169, 207, 240, 0.85));
	}

	.etapes__goutte::after {
		content: '';
		position: absolute;
		right: -4px;
		top: -2.5px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 0 12px 3px rgba(150, 200, 255, 0.6);
	}
}

/*
 * La goutte met 80 % du cycle à passer les cinq ronds, soit un rond tous les 20 % : chaque rond
 * s'éclaire à son tour, décalé d'un cinquième de cycle.
 */
@keyframes etapes-course {
	0%        { transform: translateX(0); opacity: 0; }
	5%        { opacity: 1; }
	80%       { transform: translateX(100%); opacity: 1; }
	81%, 100% { transform: translateX(100%); opacity: 0; }
}

@keyframes etape-allume {
	0% {
		border-color: var(--line-strong);
		box-shadow: 0 0 0 0 rgba(111, 168, 220, 0), 0 0 0 0 rgba(111, 168, 220, 0);
		color: var(--text-2);
	}
	5% {
		border-color: rgba(169, 207, 240, 0.85);
		box-shadow: 0 0 0 6px rgba(111, 168, 220, 0.09), 0 0 30px 0 rgba(111, 168, 220, 0.3);
		color: var(--text);
	}
	24%, 100% {
		border-color: var(--line-strong);
		box-shadow: 0 0 0 0 rgba(111, 168, 220, 0), 0 0 0 0 rgba(111, 168, 220, 0);
		color: var(--text-2);
	}
}

@keyframes etape-entree {
	from { opacity: 0; transform: translateY(14px); }
}

/* La goutte du robinet tombe, se forme à nouveau. */
@keyframes picto-goutte {
	0%       { transform: translateY(-5px) scale(0.2); opacity: 0; }
	30%      { transform: translateY(-4px) scale(1); opacity: 1; }
	62%      { transform: translateY(4px) scale(1); opacity: 1; }
	70%, 100% { transform: translateY(6px) scale(0.9); opacity: 0; }
}

@keyframes picto-onde {
	0%, 62% { transform: scaleX(0.4); opacity: 0; }
	70%     { opacity: 1; }
	100%    { transform: scaleX(1.15); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
	.etape {
		animation: etape-entree 1s var(--ease) both;
		animation-delay: calc(0.12s + var(--i) * 0.09s);
	}

	.etape__rond {
		animation: etape-allume var(--cycle) var(--ease) infinite;
		animation-delay: calc(var(--i) * var(--cycle) / 5 - var(--cycle) * 0.04);
	}

	.picto--besoin .goutte {
		transform-box: fill-box;
		transform-origin: 50% 0;
		animation: picto-goutte 2.6s cubic-bezier(0.55, 0, 0.8, 0.45) infinite;
	}

	.picto--besoin .onde {
		transform-box: fill-box;
		transform-origin: 50% 50%;
		animation: picto-onde 2.6s var(--ease) infinite;
	}
}

@media (prefers-reduced-motion: reduce) {
	.etapes__porteur { display: none; }
}

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

/* Le titre à gauche, l'introduction à droite, puis le schéma sur toute la largeur du rail. */
.marche-section__tete {
	display: grid;
	gap: 20px;
	margin-bottom: clamp(36px, 5vw, 60px);
}

@media (min-width: 960px) {
	.marche-section__tete {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		column-gap: clamp(40px, 6vw, 72px);
		align-items: end;
	}
}

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

.marche-section__intro {
	max-width: 46ch;
	font-size: clamp(15px, 1.35vw, 16.5px);
	line-height: 1.7;
	color: var(--text-2);
}

/* ---------------------------------------------------------------- Trois points */

/* Des filets, pas de cartes : on n'encadre que ce qui se choisit, et rien ne se choisit ici. */
.trio {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.trio__item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: 20px;
	padding-block: 26px;
	border-bottom: 1px solid var(--line);
}

.trio__picto {
	display: block;
	width: 40px;
	height: 40px;
	color: var(--text-2);
}

.trio__item h3 {
	font-size: clamp(18px, 1.7vw, 20px);
	line-height: 1.3;
}

.trio__item p {
	max-width: 40ch;
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--text-2);
}

.trio__lien { margin-top: 12px; font-size: 14.5px; }

@media (min-width: 800px) {
	/* Autant de colonnes égales que de points : trois, ou deux sans report. */
	.trio {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}

	.trio__item {
		display: block;
		padding: 36px clamp(20px, 2.8vw, 40px) 40px;
	}

	.trio__item:first-child { padding-left: 0; }
	.trio__item:last-child { padding-right: 0; }
	.trio__item + .trio__item { border-left: 1px solid var(--line); }

	.trio__picto { width: 48px; height: 48px; margin-bottom: 26px; }
}

/* ---------------------------------------------------------------- Schémas */

/* Un schéma se pose dans le cadre du trajet des pages locales : même fond, même filet. */
.jour,
.delais {
	margin: 0;
	padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px);
	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));
}

/* La journée : une barre de 24 heures, partie de la fin de la nuit. */
.jour {
	display: grid;
	gap: 26px;
	margin-top: clamp(32px, 4.4vw, 52px);
}

@media (min-width: 960px) {
	.jour {
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
		column-gap: clamp(36px, 5vw, 64px);
		align-items: center;
	}
}

.jour__legende h3 { font-size: clamp(18px, 1.7vw, 20px); line-height: 1.3; }

.jour__legende p {
	max-width: 40ch;
	margin-top: 8px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--text-2);
}

.jour__astres {
	position: relative;
	height: 18px;
	margin-bottom: 10px;
}

.jour__astre {
	position: absolute;
	left: calc(var(--t) * 100%);
	width: 18px;
	height: 18px;
	transform: translateX(-50%);
	color: var(--text-3);
}

.jour__barre {
	display: flex;
	height: 46px;
	overflow: hidden;
	border-radius: var(--r-sm);
}

.jour__part {
	position: relative;
	display: grid;
	place-items: center;
	width: calc((var(--a) - var(--de)) * 100%);
	min-width: 0;
	font-family: var(--display);
	white-space: nowrap;
}

.jour__part + .jour__part { box-shadow: inset 1px 0 0 var(--ink); }

.jour__part--base {
	background: rgba(111, 168, 220, 0.07);
	color: var(--text-3);
	font-size: 13px;
	letter-spacing: 0.04em;
}

.jour__part--soir {
	background: rgba(111, 168, 220, 0.3);
	color: var(--text);
	font-size: 15px;
}

.jour__part--nuit {
	background: linear-gradient(180deg, rgba(120, 176, 228, 0.62), rgba(88, 145, 204, 0.5));
	color: #fff;
	font-size: 17px;
}

.jour__taux { font-variant-numeric: tabular-nums; }

/* Sur téléphone, la soirée ne fait que 40 px de large : son taux se resserre pour y tenir. */
@media (max-width: 480px) {
	.jour__part--soir { font-size: 12px; letter-spacing: -0.02em; }
	.jour__part--nuit { font-size: 15px; }
}

.jour__heures {
	position: relative;
	height: 18px;
	margin-top: 10px;
	font-size: 12.5px;
	line-height: 18px;
	color: var(--text-3);
	font-variant-numeric: tabular-nums;
}

.jour__heures span {
	position: absolute;
	left: calc(var(--t) * 100%);
	transform: translateX(-50%);
	white-space: nowrap;
}

.jour__heures span:first-child { transform: none; }
.jour__heures span:last-child { transform: translateX(-100%); }

/* Le délai : du paiement au rendez-vous, un trait d'eau tant que tout se fait en ligne. */
.delais {
	--seuil: 60%;
	margin-bottom: clamp(28px, 4vw, 44px);
	padding-bottom: 22px;
}

@media (min-width: 700px) {
	.delais { --seuil: 70%; }
}

.delais__piste {
	position: relative;
	display: grid;
	grid-template-columns: var(--seuil) minmax(0, 1fr);
}

.delais__zone {
	position: relative;
	margin: 0;
	padding: 0 12px 20px 0;
}

.delais__zone--appel { padding-left: 16px; }

.delais__zone b {
	display: block;
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(16px, 1.6vw, 19px);
	line-height: 1.3;
	color: var(--text);
}

.delais__zone span {
	display: block;
	margin-top: 3px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--text-2);
}

.delais__zone--appel b { color: var(--text-2); }

.delais__zone::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--water-2), var(--water));
}

.delais__zone--appel::after {
	height: 0;
	border-top: 1px dashed rgba(238, 242, 247, 0.32);
	background: none;
}

/* Trois jalons sur le trait : le paiement, le seuil, le rendez-vous. */
.delais__piste::before,
.delais__zone--appel::before,
.delais__piste::after {
	content: '';
	position: absolute;
	z-index: 1;
}

.delais__piste::before {
	left: -5px;
	bottom: -4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--water-2);
}

.delais__zone--appel::before {
	left: -1px;
	bottom: -9px;
	width: 2px;
	height: 20px;
	background: var(--text);
}

.delais__piste::after {
	right: -6px;
	bottom: -5.5px;
	width: 12px;
	height: 12px;
	border: 1px solid var(--water-2);
	border-radius: 50%;
	background: var(--ink);
}

.delais__jalons {
	position: relative;
	height: 20px;
	margin: 16px 0 0;
	font-size: 12.5px;
	line-height: 20px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-3);
	white-space: nowrap;
}

.delais__jalon { position: absolute; top: 0; }
.delais__jalon--debut { left: 0; }
.delais__jalon--seuil { left: var(--seuil); transform: translateX(-50%); color: var(--text); }
.delais__jalon--fin { right: 0; }

@media (max-width: 480px) {
	.delais { --seuil: 55%; }
	.delais__jalons { font-size: 11px; letter-spacing: 0.08em; }
}

.marche-appel { margin-top: 22px; }
.marche-appel a { color: var(--water); }

/* ---------------------------------------------------------------- Révélation au défilement */

/* accueil.js ne pose .a-reveler que sur ce qui est hors écran, et jamais en mouvement réduit. */
.marche .a-reveler {
	opacity: 0;
	transform: translateY(18px);
	filter: blur(6px);
	transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
}

.marche .a-reveler.est-revele { opacity: 1; transform: none; filter: none; }

/* Le soir et la nuit : la règle sous le taux, et le lien vers la page des urgences. */
.jour__legende p + p { margin-top: 10px; }
.jour__legende a { color: var(--water); }