/*
 * Accueil, chargé sur l'accueil seulement.
 *
 * La page de construction a fixé la langue : la nuit, l'eau vivante, un titre fin au centre,
 * des filets et des capitales espacées, un rouge qui ne sert qu'à réserver. L'accueil la
 * reprend telle quelle et y ajoute ce qu'une page de vente doit dire : les besoins et leurs
 * prix, le déroulé, la zone.
 */

/* ---------------------------------------------------------------- En-tête sur l'eau */

/*
 * Sur l'accueil, l'en-tête flotte sur le héros au lieu de le pousser : l'eau passe dessous,
 * voilée. Aucun script : le héros remonte de la hauteur de l'en-tête et la rend en marge.
 */
.home .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);
}

/* ---------------------------------------------------------------- Héros */

.accueil-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: max(620px, min(100svh, 1000px));
	margin-top: calc(-1 * var(--entete));
	padding-block: calc(var(--entete) + clamp(40px, 8vh, 96px)) clamp(28px, 5vh, 48px);
	overflow: hidden;
	isolation: isolate;
	text-align: center;
	/* Le fond que l'eau recouvre, et qui reste seul sans JavaScript. */
	background: radial-gradient(120% 70% at 50% 0%, #12213a 0%, #0a1220 45%, var(--ink) 100%);
}

.accueil-hero__contenu {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/*
 * La marque en grand (cahier du 11.10.2026, § 2.1) : le logo, le nom aux lettres espacées et son
 * O rouge qui ride, puis la devise. Un décor : le h1 qui suit dit ce que fait Helveor.
 */
.accueil-hero__marque {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #fff;
}

.accueil-hero__marque svg { display: block; width: clamp(44px, 6vh, 62px); height: auto; }

.accueil-hero__nom {
	margin-top: clamp(14px, 2.4vh, 24px);
	padding-left: 0.4em;
	font-family: var(--display);
	font-size: clamp(30px, min(5.6vw, 6.6vh), 60px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0.4em;
	white-space: nowrap;
}

/* Le O rouge de l'en-tête, à la taille du nom : un anneau, et la ride qui s'ouvre toutes les 6 s. */
.accueil-hero__nom span {
	--espace: 0.4em;
	position: relative;
	display: inline-block;
	color: transparent;
}

.accueil-hero__nom span::before,
.accueil-hero__nom span::after {
	content: '';
	position: absolute;
	top: 50%;
	left: calc((100% - var(--espace)) / 2);
	box-sizing: border-box;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.accueil-hero__nom span::before {
	width: 0.74em;
	height: 0.74em;
	border: max(1.5px, 0.05em) solid var(--red);
}

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

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

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

.accueil-hero__devise {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: clamp(14px, 2.2vh, 22px);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--text-2);
}

.accueil-hero__devise span { display: inline-flex; align-items: center; }

.accueil-hero__devise span + span::before {
	content: '';
	width: 4px;
	height: 4px;
	margin: 0 14px;
	border-radius: 50%;
	background: var(--water);
	box-shadow: 0 0 8px rgba(111, 168, 220, 0.7);
}

.accueil-hero__titre {
	/* En em et non en ch : le titre réel tient sur deux lignes en grand écran, équilibrées. */
	max-width: 17em;
	margin-top: clamp(26px, 4.4vh, 44px);
	font-size: clamp(30px, min(5vw, 6vh), 54px);
	font-weight: 200;
	line-height: 1.06;
	letter-spacing: -0.01em;
}

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

.accueil-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: clamp(28px, 4.5vh, 42px);
}

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

.accueil-hero__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);
}

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

/* Vers les besoins, sous les portes : un fil d'eau où une goutte descend. */
.accueil-hero__suite {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: clamp(30px, 6vh, 64px) auto 0;
	padding: 6px 10px;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text-2);
	transition: color var(--dur-lente) var(--ease);
}

.accueil-hero__suite:hover { color: var(--text); }

.accueil-hero__goutte {
	position: relative;
	width: 1px;
	height: 36px;
	background: linear-gradient(180deg, rgba(111, 168, 220, 0), rgba(111, 168, 220, 0.6));
}

.accueil-hero__goutte::after {
	content: '';
	position: absolute;
	left: -2.5px;
	top: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--water-2);
	box-shadow: 0 0 10px rgba(150, 200, 255, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
	.accueil-hero__goutte::after { animation: suite-goutte 2.4s cubic-bezier(0.55, 0, 0.8, 0.45) infinite; }
}

@keyframes suite-goutte {
	0% { transform: translateY(-4px); opacity: 0; }
	25% { opacity: 1; }
	75% { opacity: 1; }
	100% { transform: translateY(32px); opacity: 0; }
}

/* Les domaines, en pied de héros : la liste de services de la page de construction. */
.accueil-hero__familles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px 0;
	max-width: var(--rail);
	margin: clamp(22px, 4vh, 40px) auto 0;
	padding: 0 var(--gutter);
	list-style: none;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-3);
}

.accueil-hero__familles li { display: flex; align-items: center; }

.accueil-hero__familles li + li::before {
	content: '';
	width: 3px;
	height: 3px;
	margin: 0 14px;
	border-radius: 50%;
	background: #e8503f;
}

@media (max-width: 600px) {
	.accueil-hero { text-align: left; }
	.accueil-hero__contenu { align-items: flex-start; }
	.accueil-hero__marque { align-items: flex-start; }
	.accueil-hero__nom { padding-left: 0; }
	.accueil-hero__devise { justify-content: flex-start; }
	.accueil-hero__suite { margin-left: var(--gutter); align-items: flex-start; padding-inline: 0; }
	.accueil-hero__actions { justify-content: flex-start; flex-direction: column; align-items: stretch; width: 100%; }
	.statut { max-width: none; }
	.statut::before { display: none; }
	.accueil-hero__familles { justify-content: flex-start; gap: 8px 18px; }
	.accueil-hero__familles li::before,
	.accueil-hero__familles li + li::before { content: ''; width: 3px; height: 3px; margin: 0 9px 0 0; border-radius: 50%; background: #e8503f; }
}

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

.accueil-section {
	padding-block: clamp(72px, 11vw, 140px);
	border-top: 1px solid var(--line);
	scroll-margin-top: var(--entete);
}

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

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

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

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

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

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

/* La maison sous le titre des besoins : titre, chapeau et lien prennent environ 420 px
   au-dessus, le dessin prend le reste de l'écran. */
.accueil-deux__tete .coupe { margin-top: clamp(32px, 5vh, 52px); }
.accueil-deux__tete .coupe__dessin { max-height: calc(100svh - var(--entete) - 470px); }

/* ---------------------------------------------------------------- Déroulé */

/*
 * Cinq temps, cinq grands chiffres fins. Une séquence se lit de haut en bas : le filet sépare,
 * le chiffre rythme. La colonne du titre est bornée pour que le texte garde une vraie largeur.
 */
.deroule {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: temps;
	border-top: 1px solid var(--line);
}

.deroule li {
	display: grid;
	grid-template-columns: 2.2em minmax(0, 1fr);
	gap: 6px clamp(18px, 2.4vw, 32px);
	padding-block: clamp(22px, 2.6vw, 30px);
	border-bottom: 1px solid var(--line);
	counter-increment: temps;
}

.deroule li::before {
	content: counter(temps);
	grid-row: span 2;
	font-family: var(--display);
	font-weight: 200;
	font-size: clamp(40px, 4.4vw, 56px);
	line-height: 0.9;
	color: var(--water);
}

.deroule b {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(18px, 1.8vw, 21px);
	color: var(--text);
}

.deroule span { max-width: 56ch; font-size: 15px; line-height: 1.65; color: var(--text-2); }

/*
 * Avec accueil.js (et du mouvement permis), le déroulé se remplit à la lecture : chaque chiffre
 * s'allume quand on l'atteint, et sur grand écran un tube, dans la gouttière, se remplit d'eau
 * jusqu'à l'étape en cours (--niveau, de 0 à 1). Sans script, tout est allumé d'emblée.
 */
.deroule--vivant li::before { color: var(--text-3); transition: color 0.9s var(--ease); }
.deroule--vivant li.est-atteint::before { color: var(--water); }

@media (min-width: 960px) {
	.deroule--vivant { --tube: calc(-1 * clamp(15px, 2.5vw, 28px)); position: relative; }

	.deroule--vivant::before,
	.deroule--vivant::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: var(--tube);
		width: 1px;
	}

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

	.deroule--vivant::after {
		background: linear-gradient(180deg, rgba(169, 207, 240, 0), var(--water-2) 22%, var(--water));
		box-shadow: 0 0 10px rgba(111, 168, 220, 0.55);
		transform: scaleY(var(--niveau, 0));
		transform-origin: top;
	}

	.deroule--vivant li { position: relative; }

	/* Un nœud par étape sur le tube, à la hauteur du titre de l'étape. */
	.deroule--vivant li::after {
		content: '';
		position: absolute;
		left: calc(var(--tube) - 3px);
		top: calc(clamp(22px, 2.6vw, 30px) + 9px);
		width: 7px;
		height: 7px;
		border: 1px solid var(--line-strong);
		border-radius: 50%;
		background: var(--ink);
		transition: background 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
	}

	.deroule--vivant li.est-atteint::after {
		border-color: var(--water-2);
		background: var(--water-2);
		box-shadow: 0 0 0 4px rgba(111, 168, 220, 0.14);
	}
}

/*
 * Sous 960 px, le déroulé devient une ligne de temps. La liste à filets prenait un écran et demi
 * et, sans le tube du grand écran, ses cinq blocs se lisaient comme cinq sujets séparés. Ici les
 * chiffres deviennent des nœuds sur un même fil : la suite se voit comme une suite, et la liste
 * raccourcit d'un tiers. Le fil se remplit d'eau d'une étape à la suivante pendant la lecture
 * (est-atteint, posé par accueil.js). Sans script ou en mouvement réduit, tout est allumé.
 */
@media (max-width: 959.98px) {
	.deroule { border-top: 0; }

	.deroule li {
		position: relative;
		grid-template-columns: 34px minmax(0, 1fr);
		gap: 3px 18px;
		padding-block: 0 26px;
		border-bottom: 0;
	}

	.deroule li:last-child { padding-bottom: 0; }

	/* Le chiffre dans un cercle fin, posé sur le fil : le fond masque le fil qui passe dessous. */
	.deroule li::before {
		position: relative;
		z-index: 1;
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		border: 1px solid var(--water);
		border-radius: 50%;
		background: var(--ink);
		font-size: 16px;
		font-weight: 300;
		line-height: 1;
		color: var(--water-2);
	}

	/* Le titre sur l'axe du cercle, le texte dessous. */
	.deroule b { padding-top: 5px; font-size: 17.5px; line-height: 1.35; }
	.deroule span { font-size: 14.5px; line-height: 1.6; }

	/* Le fil : du bas d'un cercle au haut du suivant. */
	.deroule li:not(:last-child)::after {
		content: '';
		position: absolute;
		left: 16.5px;
		top: 34px;
		bottom: 0;
		width: 1px;
		background: linear-gradient(180deg, var(--water), rgba(111, 168, 220, 0.4));
	}

	.deroule--vivant li::before {
		border-color: var(--line-strong);
		color: var(--text-3);
		transition: color 0.9s var(--ease), border-color 0.9s var(--ease), box-shadow 0.9s var(--ease);
	}

	.deroule--vivant li.est-atteint::before {
		border-color: var(--water);
		color: var(--water-2);
		box-shadow: 0 0 0 4px rgba(111, 168, 220, 0.12);
	}

	/* Un tronçon se remplit quand l'étape suivante est atteinte : l'eau coule de nœud en nœud. */
	.deroule--vivant li:not(:last-child)::after {
		background: linear-gradient(180deg, var(--water-2), var(--water)) top / 100% 0% no-repeat, var(--line-strong);
		transition: background-size 0.9s var(--ease);
	}

	.deroule--vivant li:has(+ li.est-atteint)::after { background-size: 100% 100%; }
}

/* ---------------------------------------------------------------- Zone */

.accueil-zone {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	text-align: center;
	background: #08111c;
}

/* Une lueur de surface, comme le haut du héros : la section se lit comme une nappe d'eau. */
.accueil-zone::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(60% 55% at 50% 0%, rgba(88, 152, 214, 0.16), rgba(88, 152, 214, 0) 70%);
}

/* Le titre et la vérification à gauche, la carte à droite. Les chiffres, centrés, en dessous. */
.accueil-zone__grille {
	display: grid;
	gap: clamp(40px, 6vw, 72px);
	align-items: center;
	text-align: left;
}

@media (min-width: 960px) {
	.accueil-zone__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.accueil-zone__tete { display: flex; flex-direction: column; align-items: flex-start; }
.accueil-zone__tete h2 { max-width: 13em; margin-top: 22px; font-size: clamp(30px, 4vw, 46px); }

.accueil-zone__form {
	display: grid;
	gap: 16px;
	max-width: 600px;
	margin: clamp(30px, 4vw, 44px) 0 0;
}

.accueil-zone .verdict:empty { display: none; }

/*
 * Le verdict et sa suite se lisent comme un seul bloc : la suite se colle sous le cadre du
 * verdict, et le prolonge. Réserver à gauche, l'alternative en lien discret à droite.
 */
.accueil-zone .verdict:has(+ .zone-suite:not([hidden])) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.zone-suite {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 22px;
	margin-top: -16px; /* annule l'écart de la grille du formulaire : le bloc est d'un seul tenant */
	padding: 18px;
	border: 1px solid var(--line-strong);
	border-top: 0;
	border-radius: 0 0 var(--r-md) var(--r-md);
	background: rgba(255, 255, 255, 0.02);
}

/* Le prolongement prend la couleur du verdict qu'il continue. */
.verdict.est-ok + .zone-suite { border-color: rgba(71, 180, 137, 0.35); background: rgba(71, 180, 137, 0.05); }
.verdict.est-frais + .zone-suite { border-color: rgba(217, 154, 43, 0.35); background: rgba(217, 154, 43, 0.05); }
.verdict.est-refus + .zone-suite { border-color: rgba(111, 168, 220, 0.35); background: rgba(111, 168, 220, 0.05); }

.zone-suite .bouton { flex: 1 1 auto; max-width: 100%; }
.zone-suite .fleche { transition: transform var(--dur-lente) var(--ease); }
.zone-suite .bouton:hover .fleche,
.zone-suite .bouton:focus-visible .fleche { transform: translateX(4px); }
.zone-suite .lien-souligne { font-size: 14.5px; }

@media (min-width: 560px) {
	.zone-suite .bouton { flex: 0 1 auto; }
}

.chiffres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	max-width: 900px;
	margin: clamp(52px, 7vw, 84px) auto 0;
	border-top: 1px solid var(--line);
}

.chiffres > div {
	padding: 28px clamp(12px, 2vw, 28px) 0;
}

.chiffres > div + div { border-left: 1px solid var(--line); }

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

.chiffres dd { margin: 12px 0 0; }

.chiffres__valeur {
	display: block;
	font-family: var(--display);
	font-weight: 200;
	font-size: clamp(40px, 4.6vw, 56px);
	line-height: 1;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.chiffres__valeur small {
	font-size: 0.34em;
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--text-2);
}

.chiffres__note {
	display: block;
	max-width: 26ch;
	margin: 10px auto 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--text-2);
}

@media (max-width: 700px) {
	.chiffres > div + div { border-left: 0; border-top: 1px solid var(--line); }
	.chiffres > div { padding-bottom: 24px; }
}

.points {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 0;
	margin: clamp(40px, 5vw, 56px) 0 0;
	padding: 0;
	list-style: none;
	font-size: 11.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-3);
}

.points li { display: flex; align-items: center; }

.points li + li::before {
	content: '';
	width: 3px;
	height: 3px;
	margin: 0 14px;
	border-radius: 50%;
	background: #e8503f;
}

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

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

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

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

/* La goutte du logo touche l'eau : des ronds s'élargissent sous elle, vus en perspective. */
.accueil-fin__ronds {
	position: absolute;
	left: 50%;
	top: calc(100% + 6px);
	z-index: -1;
}

.accueil-fin__ronds i {
	position: absolute;
	left: -120px;
	top: -18px;
	width: 240px;
	height: 36px;
	border: 1px solid rgba(169, 207, 240, 0.5);
	border-radius: 50%;
	opacity: 0;
}

@keyframes rond {
	0%   { transform: scale(0.04); opacity: 0; }
	12%  { opacity: 0.85; }
	100% { transform: scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
	.accueil-fin__ronds i { animation: rond 6s cubic-bezier(0.2, 0.6, 0.35, 1) infinite; }
	.accueil-fin__ronds i:nth-child(2) { animation-delay: 2s; }
	.accueil-fin__ronds i:nth-child(3) { animation-delay: 4s; }
}

@media (prefers-reduced-motion: reduce) {
	.accueil-fin__ronds i:first-child { opacity: 0.35; transform: scale(0.5); }
}

.accueil-fin h2 {
	max-width: 15em;
	margin-top: 26px;
	font-size: clamp(32px, 4.8vw, 56px);
}

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

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

/* ---------------------------------------------------------------- Ouverture sous la goutte */

/*
 * La première arrivée sur l'accueil : la nuit, une goutte qui se forme puis tombe, et la page qui
 * se découvre depuis son point d'impact, portée par un halo de lumière plutôt que par un trait.
 * Le voile (functions.php, wp_body_open) recouvre une page déjà complète et ne prend aucun clic :
 * le titre s'affiche et se lit dessous comme sans lui. Le script du <head> pose .avec-ouverture
 * à chaque arrivée sur l'accueil (pas en y revenant depuis une autre page du site), et eau.js fait
 * onduler la surface du héros au moment de l'impact.
 *
 * Chronologie : la goutte gonfle sous le bord de l'écran jusqu'à 0,74 s, son filet casse, elle
 * tombe en oscillant et touche l'eau à 1,05 s. La page est découverte vers 1,6 s, le voile
 * s'efface tout à fait à 2,4 s.
 */
@property --ouverture {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

.ouverture { display: none; }

html.avec-ouverture .ouverture {
	--impact: 40vh;
	--g: 1.1; /* taille de la goutte : 28 px de diamètre à 1, tout le dessin suit */
	position: fixed;
	inset: 0;
	z-index: 200;
	display: block;
	pointer-events: none;
	animation:
		ouverture-onde 1.3s cubic-bezier(0.25, 0.55, 0.2, 1) 1.05s both,
		ouverture-fin 1ms linear 2.4s forwards;
}

.ouverture__nuit,
.ouverture__halo {
	position: absolute;
	inset: 0;
}

.ouverture__nuit {
	background: radial-gradient(120% 70% at 50% 0%, #0c1829 0%, #070e1a 45%, #04080f 100%);
	-webkit-mask-image: radial-gradient(circle at 50% var(--impact), transparent calc(var(--ouverture) * 0.72), #000 var(--ouverture));
	mask-image: radial-gradient(circle at 50% var(--impact), transparent calc(var(--ouverture) * 0.72), #000 var(--ouverture));
}

/* La lumière qui court au bord de l'ouverture, large et douce, éteinte avant la fin. */
.ouverture__halo {
	background: radial-gradient(circle at 50% var(--impact), transparent calc(var(--ouverture) * 0.5), rgba(130, 190, 255, 0.08) calc(var(--ouverture) * 0.74), rgba(205, 232, 255, 0.17) calc(var(--ouverture) * 0.9), transparent var(--ouverture));
	mix-blend-mode: screen;
	animation: ouverture-halo 1.3s cubic-bezier(0.5, 0, 0.75, 0) 1.05s both;
}

/* L'éclat de l'impact : une lumière qui s'épanouit et s'éteint. */
.ouverture__eclat {
	position: absolute;
	left: 50%;
	top: var(--impact);
	width: 70vmin;
	height: 70vmin;
	margin: -35vmin 0 0 -35vmin;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(220, 238, 255, 0.55), rgba(150, 200, 255, 0.14) 42%, rgba(150, 200, 255, 0) 100%);
	mix-blend-mode: screen;
	animation: ouverture-eclat 1s cubic-bezier(0.2, 0.7, 0.3, 1) 1.05s both;
}

/*
 * La formation, sous le bord de l'écran : le ménisque s'avance, la perle gonfle et s'affaisse,
 * le filet qui la retient s'étire et s'amincit jusqu'à casser. Le ménisque rebondit, une
 * gouttelette satellite tombe à la traîne, puis tout s'efface avant que l'ouverture n'arrive.
 */
.ouverture__source {
	position: absolute;
	left: 50%;
	top: 0;
	width: calc(120px * var(--g));
	height: calc(200px * var(--g));
	margin-left: calc(-60px * var(--g));
	/* Rien de filtré dans la première image : le premier affichage de la page n'attend pas la goutte. */
	animation:
		ouverture-montre 1ms linear 0.08s both,
		ouverture-efface 0.3s ease 0.95s forwards;
}

.ouverture__menisque,
.ouverture__fil,
.ouverture__perle,
.ouverture__satellite {
	transform-box: view-box;
	transform-origin: 60px 0;
}

.ouverture__menisque { animation: ouverture-menisque 1.2s ease-in-out both; }
.ouverture__fil { animation: ouverture-fil 0.74s linear both; }
.ouverture__perle { animation: ouverture-perle 0.74s linear both; }

.ouverture__satellite {
	opacity: 0;
	animation: ouverture-satellite 0.5s cubic-bezier(0.5, 0, 1, 0.5) 0.74s forwards;
}

/*
 * La goutte détachée : elle accélère, oscille d'allongée à aplatie comme une vraie goutte qui
 * vient de lâcher, et s'étire sur la fin, quand elle va vite. Une traînée de lumière la suit.
 */
.ouverture__goutte {
	position: absolute;
	left: 50%;
	top: 0;
	width: calc(28px * var(--g));
	height: calc(28px * var(--g));
	margin-left: calc(-14px * var(--g));
	/* Presque invisible plutôt qu'à zéro : elle est déjà dessinée quand elle prend le relais de la
	   perle, une image avant que celle-ci ne s'efface, sans trou entre les deux. */
	opacity: 0.001;
	filter: drop-shadow(0 0 12px rgba(130, 190, 245, 0.45));
	animation:
		ouverture-chute 0.325s cubic-bezier(0.45, 0, 0.9, 0.55) 0.725s forwards,
		ouverture-plouf 1ms linear 1.05s forwards;
}

.ouverture__goutte svg {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	animation: ouverture-oscille 0.325s linear 0.725s both;
}

.ouverture__goutte::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 50%;
	width: calc(10px * var(--g));
	height: calc(72px * var(--g));
	margin-left: calc(-5px * var(--g));
	border-radius: 5px;
	background: linear-gradient(180deg, rgba(150, 205, 255, 0), rgba(150, 205, 255, 0.24));
	transform-origin: 50% 100%;
	animation: ouverture-trainee 0.325s cubic-bezier(0.5, 0, 1, 0.5) 0.725s both;
}

@keyframes ouverture-menisque {
	0%    { transform: scale(0.6, 0); }
	10%   { transform: scale(1, 1); }
	61.6% { transform: scale(0.94, 1.45); }
	68%   { transform: scale(1.06, 0.7); }
	76%   { transform: scale(0.98, 1.15); }
	86%   { transform: scale(1.01, 0.94); }
	100%  { transform: scale(1, 1); }
}
@keyframes ouverture-fil {
	0%    { transform: scale(1, 0); }
	50%   { transform: scale(1.2, 8); }
	82%   { transform: scale(1, 16); }
	99.9% { transform: scale(0.5, 25); opacity: 1; }
	100%  { transform: scale(0.5, 25); opacity: 0; }
}
@keyframes ouverture-perle {
	0%    { transform: translateY(1px) scale(0.1); animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1); }
	62%   { transform: translateY(23px) scale(0.84); animation-timing-function: ease-in-out; }
	82%   { transform: translateY(29px) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
	99.9% { transform: translateY(38px) scale(0.95, 1.06); opacity: 1; }
	100%  { transform: translateY(38px) scale(0.95, 1.06); opacity: 0; }
}
@keyframes ouverture-satellite {
	from { opacity: 1; transform: translateY(17px) scale(1, 1.3); }
	to   { opacity: 0; transform: translateY(150px) scale(0.8, 1.6); }
}
@keyframes ouverture-chute {
	from { opacity: 1; transform: translateY(calc(24px * var(--g))); }
	to   { opacity: 1; transform: translateY(calc(var(--impact) - 28px * var(--g))); }
}
@keyframes ouverture-oscille {
	0%   { transform: scale(0.9, 1.14); }
	22%  { transform: scale(1.08, 0.92); }
	45%  { transform: scale(0.96, 1.05); }
	68%  { transform: scale(1.03, 0.98); }
	100% { transform: scale(0.93, 1.12); }
}
@keyframes ouverture-trainee {
	from { opacity: 0; transform: scaleY(0.1); }
	to   { opacity: 0.85; transform: scaleY(1); }
}
@keyframes ouverture-montre { from { visibility: hidden; } to { visibility: visible; } }
@keyframes ouverture-efface { to { opacity: 0; } }
@keyframes ouverture-plouf { to { opacity: 0; } }
@keyframes ouverture-onde { from { --ouverture: 0px; } to { --ouverture: 120vmax; } }
@keyframes ouverture-halo { from { opacity: 1; } to { opacity: 0; } }
@keyframes ouverture-eclat {
	0%   { opacity: 0; transform: scale(0.06); }
	16%  { opacity: 1; }
	100% { opacity: 0; transform: scale(1.5); }
}
@keyframes ouverture-fin { to { visibility: hidden; } }

@media (min-width: 900px) {
	html.avec-ouverture .ouverture { --g: 1.5; }
}

@media (prefers-reduced-motion: reduce), print {
	html.avec-ouverture .ouverture { display: none; }
}

/* ---------------------------------------------------------------- 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. */
.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);
}

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

@media (prefers-reduced-motion: reduce) {
	.statut__point { animation: none; opacity: 1; }
}