/*
 * Les dessins partagés : l'eau du héros, la ligne d'état, la maison en coupe et la carte de la
 * zone. Chargé sur l'accueil et la réservation, les deux pages qui les montrent. Chacune garde
 * sa mise en page dans sa propre feuille.
 *
 * Tout mouvement ici est décoratif : il s'arrête hors écran (dessins.js pose est-en-vue) et
 * disparaît quand le visiteur demande moins de mouvement.
 */

/* ---------------------------------------------------------------- L'eau */

.eau {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.eau__surface {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.4s var(--ease);
}

.eau.est-pret .eau__surface { opacity: 1; }

/* Voiles de lisibilité : haut et bas fondus dans la nuit, centre assombri sous le texte. */
.eau::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(6, 11, 20, 0.7) 0, rgba(6, 11, 20, 0) 200px),
		linear-gradient(0deg, var(--ink) 0, rgba(6, 13, 22, 0) 240px),
		radial-gradient(70% 58% at 50% 50%, rgba(4, 9, 16, 0.8) 0%, rgba(4, 9, 16, 0.5) 48%, rgba(4, 9, 16, 0.16) 100%);
}

.eau__goutte {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 9px;
	height: 13px;
	margin: -6.5px 0 0 -4.5px;
	opacity: 0;
	border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(158, 206, 255, 0.72));
	box-shadow: 0 0 12px rgba(150, 200, 255, 0.5);
	will-change: transform, opacity;
}

.eau__gerbes { position: absolute; inset: 0; z-index: 1; }

.eau__couronne {
	position: absolute;
	border: 1px solid;
	border-radius: 50%;
	animation: couronne 620ms cubic-bezier(0.16, 0.72, 0.3, 1) both;
}

.eau__gouttelette {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(158, 206, 255, 0.7));
	box-shadow: 0 0 7px rgba(150, 200, 255, 0.45);
	will-change: transform;
}

@keyframes couronne {
	from { transform: translate(-50%, -50%) scale(0.2); opacity: 0.75; }
	to   { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ---------------------------------------------------------------- Ligne d'état */

/* La ligne d'état de la page de construction : deux filets, un point rouge qui respire. */
.statut {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	max-width: 460px;
	margin-top: clamp(22px, 3.4vh, 34px);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--text-2);
	white-space: nowrap;
}

.statut::before,
.statut::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(238, 242, 247, 0.28);
}

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

/* 320 px : « Book 1 hour ahead · day and night » dépassait de 4 px et se faisait rogner. Les
   lettres se resserrent, et si le texte reste trop long, il passe à la ligne plutôt que d'être coupé. */
@media (max-width: 379.98px) {
	.statut { letter-spacing: 0.16em; }
	.statut span { white-space: normal; line-height: 1.5; }
}

.statut__point {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--red);
	animation: respire 2.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes respire {
	0%, 100% { opacity: 0.25; transform: scale(1); }
	50%      { opacity: 1; transform: scale(1.35); }
}

/* Entrée échelonnée, floue puis nette : celle de la page de construction. */
@keyframes apparition {
	from { opacity: 0; transform: translateY(12px); filter: blur(9px); }
	to   { opacity: 1; transform: none; filter: none; }
}

/* Un élément qui change sous les yeux (légende, suite d'un verdict) : la même entrée, plus courte. */
.vient-d-apparaitre { animation: apparition 0.9s var(--ease) both; }

@media (prefers-reduced-motion: no-preference) {
	.apparait { animation: apparition 1.6s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms); }
}

/* ---------------------------------------------------------------- La maison en coupe */

/*
 * À côté de la liste des besoins, dans une colonne qui reste en vue : la maison au trait, l'eau
 * qui circule, et le point du besoin survolé ou choisi. Rien sous 960 px (la liste d'abord), ni
 * sur un écran trop bas pour la garder en vue. Chaque page règle sa marge et sa hauteur.
 */
.coupe { display: none; margin: 0; }

@media (min-width: 960px) and (min-height: 720px) {
	.coupe { display: block; }
}

.coupe__dessin {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.coupe path,
.coupe rect,
.coupe circle {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.coupe__trait { stroke: rgba(238, 242, 247, 0.3); stroke-width: 1; }
.coupe__mobilier { stroke: rgba(238, 242, 247, 0.17); }
.coupe__sol { stroke: rgba(238, 242, 247, 0.42); }
.coupe__hachure { stroke: rgba(238, 242, 247, 0.1); }
.coupe .coupe__eau { fill: rgba(111, 168, 220, 0.1); stroke: none; }
.coupe__surface { stroke: rgba(169, 207, 240, 0.5); }
/* La tache d'humidité : l'ambre du « ça coule maintenant », en pointillé. */
.coupe__tache { stroke: rgba(240, 192, 105, 0.38); stroke-dasharray: 2 3; }
.coupe__tuyau { stroke: rgba(111, 168, 220, 0.36); stroke-width: 1.5; }
.coupe__flux { stroke: var(--water-2); stroke-width: 1.5; stroke-dasharray: 1.5 11; }

@keyframes flux { to { stroke-dashoffset: -12.5; } }

@media (prefers-reduced-motion: no-preference) {
	/* L'eau ne coule que dessin à l'écran (accueil.js pose est-en-vue). */
	.coupe.est-en-vue .coupe__flux { animation: flux 1.4s linear infinite; }
	.coupe.est-en-vue .coupe__flux--lent { animation-duration: 2.6s; }
}

/* Le point : discret au repos, blanc et entouré quand son besoin est survolé. Jamais rouge :
   le rouge ne sert qu'à réserver, et un point qui s'allume seul n'est pas une action. */
.coupe .coupe__coeur {
	fill: var(--water-2);
	stroke: none;
	opacity: 0.55;
	transform-box: fill-box;
	transform-origin: center;
	transition: fill var(--dur-lente) var(--ease), opacity var(--dur-lente) var(--ease), transform var(--dur-lente) var(--ease);
}

.coupe__halo,
.coupe__onde {
	stroke: var(--water-2);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	transition: opacity var(--dur-lente) var(--ease);
}

.coupe__point.est-actif .coupe__coeur { fill: #fff; opacity: 1; transform: scale(1.35); }
.coupe__point.est-actif .coupe__halo { opacity: 0.75; }

@keyframes onde-point {
	from { transform: scale(0.7); opacity: 0.7; }
	to   { transform: scale(2.4); opacity: 0; }
}

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

.coupe__legende {
	margin-top: 16px;
	min-height: 1.5em;
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-3);
}

.coupe__legende span { display: inline-block; }
.coupe:has(.est-actif) .coupe__legende { color: var(--water-2); }

/* ---------------------------------------------------------------- La carte de la zone */

/*
 * La carte : le fond en image, le calque SVG par-dessus, au même viewBox. La base d'où part le
 * technicien lance des ondes, comme la goutte du héros.
 */
.zone-carte { margin: 0; }

.zone-carte__cadre {
	position: relative;
	aspect-ratio: 560 / 418;
}

.zone-carte__fond,
.zone-carte__calque {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.zone-carte__calque { overflow: visible; }

.zone-carte__canton {
	font-family: var(--display);
	font-size: 10.5px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	text-anchor: middle;
	fill: var(--text-2);
}

.zone-carte__nom {
	font-size: 10.5px;
	letter-spacing: 0.04em;
	text-anchor: end;
	fill: var(--text);
}

.zone-carte__point { fill: #fff; filter: drop-shadow(0 0 4px rgba(169, 207, 240, 0.9)); }

.zone-carte__onde {
	fill: none;
	stroke: var(--water-2);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

@keyframes onde-base {
	from { transform: scale(0.06); opacity: 0.9; }
	to   { transform: scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
	.zone-carte.est-en-vue .zone-carte__onde { animation: onde-base 4.8s cubic-bezier(0.2, 0.6, 0.35, 1) infinite; }
	.zone-carte.est-en-vue .zone-carte__onde:nth-child(2) { animation-delay: 1.6s; }
	.zone-carte.est-en-vue .zone-carte__onde:nth-child(3) { animation-delay: 3.2s; }
}

@media (prefers-reduced-motion: reduce) {
	.zone-carte__onde:first-child { opacity: 0.3; transform: scale(0.6); }
}

/* La ligne sous la carte, quand la page en pose une : le tunnel y écrit l'adresse vérifiée. */
.zone-carte__note {
	margin-top: 14px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--text-2);
}

.zone-carte__note.est-servi { color: var(--ok); }

.zone-carte__credit {
	margin-top: 12px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--text-3);
	text-align: right;
}

/* Sur mobile, la carte rétrécit de moitié : les noms reprennent une taille lisible. */
@media (max-width: 600px) {
	.zone-carte__canton { font-size: 16px; letter-spacing: 0.2em; }
	.zone-carte__nom { font-size: 15px; }
	.zone-carte__credit { text-align: left; }
}