/*
 * Urgence de nuit (page-urgence-nuit.php), chargée sur cette page seulement, après locale.css.
 *
 * Une page qui calme : la nuit, la lune, et une seule question. Les urgences en ambre (la couleur
 * de ce qui demande d'agir), ce qui peut attendre en eau claire. La réponse arrive sous le choix,
 * sans script. Le rouge reste au bouton : appeler, ou réserver.
 */

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

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

.urgence-tete::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(40% 60% at 84% 40%, rgba(169, 207, 240, 0.12), rgba(169, 207, 240, 0) 70%),
		linear-gradient(180deg, rgba(10, 20, 36, 0.6), rgba(6, 13, 22, 0) 460px);
}

.urgence-tete__grille {
	display: grid;
	gap: 28px;
	margin-top: clamp(28px, 4.4vw, 52px);
	align-items: center;
}

@media (min-width: 900px) {
	.urgence-tete__grille { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); }
}

.urgence-tete__titre {
	margin-top: 18px;
	font-size: clamp(38px, 6vw, 68px);
	line-height: 1.04;
}

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

/* La lune, voilée d'un halo qui respire très lentement. */
.urgence-lune {
	display: none;
	justify-self: center;
	width: 150px;
	height: 150px;
	padding: 34px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #13263d, var(--ink) 72%);
	color: var(--water-2);
	box-shadow: 0 0 60px rgba(169, 207, 240, 0.12);
}

.urgence-lune .picto { width: 100%; height: 100%; }

@media (min-width: 900px) {
	.urgence-lune { display: block; }
}

@media (prefers-reduced-motion: no-preference) {
	.urgence-lune { animation: urgence-halo 7s ease-in-out infinite alternate; }
}

@keyframes urgence-halo {
	from { box-shadow: 0 0 40px rgba(169, 207, 240, 0.08); }
	to { box-shadow: 0 0 80px rgba(169, 207, 240, 0.2); }
}

/* ---------------------------------------------------------------- Situations */

.urgence-situations { margin: 0; padding: 0; border: 0; min-width: 0; }

.urgence-situations__titre {
	padding: 0;
	font-family: var(--display);
	font-size: clamp(28px, 3.6vw, 42px);
	font-weight: 200;
	line-height: 1.15;
}

.urgence-situations__aide { margin-top: 12px; color: var(--text-2); }

.urgence-colonnes {
	display: grid;
	gap: clamp(28px, 4vw, 48px);
	margin-top: clamp(26px, 3.4vw, 40px);
}

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

.urgence-colonne { display: grid; gap: 10px; align-content: start; }

.urgence-colonne__titre {
	margin-bottom: 6px;
	font-family: var(--text-font);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--warn);
}

.urgence-colonne--non .urgence-colonne__titre { color: var(--water-2); }

/* Une situation : toute la case se touche. Le choix se voit au filet doublé et à la coche. */
.situation {
	position: relative;
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) 20px;
	gap: 14px;
	align-items: center;
	min-height: 64px;
	padding: 14px 16px;
	border: 1px solid var(--line-strong);
	border-left: 2px solid rgba(111, 168, 220, 0.6);
	border-radius: var(--r-md);
	background: var(--ink);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.situation--urgente { border-left-color: var(--warn); }
.situation:hover { border-color: rgba(111, 168, 220, 0.6); }
.situation--urgente:hover { border-color: rgba(240, 192, 105, 0.7); }

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

.situation::after {
	content: '';
	grid-column: 3;
	width: 18px;
	height: 18px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
}

.situation:has(input:checked) {
	border-color: var(--water);
	background: var(--water-dim);
	box-shadow: inset 0 0 0 1px var(--water);
}

.situation--urgente:has(input:checked) {
	border-color: var(--warn);
	background: rgba(240, 192, 105, 0.08);
	box-shadow: inset 0 0 0 1px var(--warn);
}

.situation:has(input:checked)::after { border: 5px solid var(--water-2); }
.situation--urgente:has(input:checked)::after { border-color: var(--warn); }
.situation:has(input:focus-visible) { outline: 2px solid var(--water); outline-offset: 3px; }

.situation__picto { width: 34px; height: 34px; color: var(--text-2); }
.situation__picto .picto { width: 100%; height: 100%; }
.situation__texte { font-size: 15.5px; line-height: 1.5; color: var(--text); }

/* ---------------------------------------------------------------- Réponses */

.urgence-reponse {
	display: none;
	max-width: 760px;
	margin-top: clamp(28px, 4vw, 44px);
	padding: clamp(24px, 3.4vw, 36px);
	border: 1px solid var(--line-strong);
	border-left: 3px solid var(--water);
	border-radius: var(--r-lg);
	background: linear-gradient(180deg, rgba(14, 28, 46, 0.85), rgba(8, 17, 28, 0.6));
}

.urgence-reponse--oui { border-left-color: var(--warn); }

.urgence:has(.urgence-colonne--oui input:checked) .urgence-reponse--oui,
.urgence:has(.urgence-colonne--non input:checked) .urgence-reponse--non { display: block; }

@media (prefers-reduced-motion: no-preference) {
	.urgence-reponse { animation: urgence-reponse 0.5s var(--ease) both; }
}

@keyframes urgence-reponse {
	from { opacity: 0; transform: translateY(8px); }
}

/* Sans :has(), les deux réponses restent lisibles, chacune avec son titre. */
@supports not selector(:has(*)) {
	.urgence-reponse { display: block; }
}

.urgence-reponse__etat {
	font-size: 11.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--warn);
}

.urgence-reponse--non .urgence-reponse__etat { color: var(--water-2); }

.urgence-reponse__titre {
	margin-top: 12px;
	font-size: clamp(26px, 3.2vw, 36px);
}

.urgence-reponse__texte {
	max-width: 56ch;
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-2);
}

.urgence-reponse .pile { margin-top: 22px; }

.urgence-reponse__tarif {
	max-width: 60ch;
	margin-top: 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-2);
}

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

/* ---------------------------------------------------------------- En attendant */

.urgence-gestes h2 { font-size: clamp(28px, 3.6vw, 40px); }

.urgence-gestes__liste {
	display: grid;
	gap: 0;
	max-width: 760px;
	margin: clamp(24px, 3vw, 36px) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.urgence-gestes__liste li {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 16px;
	padding-block: 18px;
	border-bottom: 1px solid var(--line);
	font-size: 16px;
	line-height: 1.6;
	color: var(--text);
}

.urgence-gestes__num {
	font-family: var(--display);
	font-size: 22px;
	font-weight: 200;
	color: var(--water);
}