/**
 * Suivi de commande — habillage « de nuit », futuriste (refonte du 01-02/10/2026, demande de David : « épate-moi de
 * fou, moderne, futuriste, éblouis-moi », pour le formulaire ET pour le résultat).
 *
 * ─ Une COUCHE ─────────────────────────────────────────────────────────────────
 * Chargée après `lupeo-suivi.css` sur la seule page qui porte le code court (`Lupeo_Suivi::styles()`), versionnée
 * par date ; portée `body.lupeo-suivi-nuit`. L'encart de l'espace client garde la feuille d'origine seule. Champs,
 * noms de formulaire et vérification (numéro + courriel) : inchangés.
 *
 * ─ Ce qui change ──────────────────────────────────────────────────────────────
 *  · La page entière passe de nuit, jusqu'au pied (lui-même de nuit).
 *  · Le formulaire : une console de verre ; à côté, la scène — une route de la boutique jusqu'à chez vous, un colis
 *    lumineux qui la parcourt, des ondes autour de l'arrivée (décorative, `aria-hidden`).
 *  · Le résultat : une carte de verre, la pastille d'état lumineuse, la frise d'avancement en quatre phases
 *    (`Lupeo_Suivi::avancement()`), le numéro à copier, puis les colis et leur frise du transporteur.
 *
 * Le jaune ne décore jamais : seul l'état « à votre action » (incident) le porte. Tout ce qui bouge est sous
 * `prefers-reduced-motion: no-preference`.
 */

body.lupeo-suivi-nuit {
	--sv-nuit: #0A1D18;
	--sv-eclat: #00D36B;
	--sv-menthe: #9FE8C4;
	--sv-verre: rgba(255, 255, 255, .05);
	--sv-trait: rgba(255, 255, 255, .12);
	--sv-texte: rgba(255, 255, 255, .74);
	--sv-ambre: #F0A81E;
}

/* =========================================================
   0. La page de nuit
   ========================================================= */
body.lupeo-suivi-nuit #main {
	position: relative;
	isolation: isolate;
	min-height: 74vh;
	overflow: hidden;
	color: var(--sv-texte);
	background:
		radial-gradient(42% 60% at 6% 0%, rgba(0, 211, 107, .20) 0%, rgba(0, 211, 107, 0) 60%),
		radial-gradient(40% 55% at 92% 30%, rgba(0, 168, 150, .22) 0%, rgba(0, 168, 150, 0) 65%),
		linear-gradient(170deg, #06110E 0%, #0B1F1A 55%, #08231D 100%);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Le plan technique : un quadrillage qui s'efface vers les bords. */
body.lupeo-suivi-nuit #main::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image:
		linear-gradient(rgba(159, 232, 196, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(159, 232, 196, .06) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(70% 70% at 70% 30%, #000 10%, transparent 75%);
	mask-image: radial-gradient(70% 70% at 70% 30%, #000 10%, transparent 75%);
	pointer-events: none;
}

body.lupeo-suivi-nuit #main .ct-container-full,
body.lupeo-suivi-nuit #main article,
body.lupeo-suivi-nuit #main .hero-section {
	background: transparent;
}

body.lupeo-suivi-nuit .hero-section .page-title {
	padding-bottom: .05em;
	font-size: clamp(42px, 5.4vw, 80px);
	line-height: .98;
	letter-spacing: -.045em;
	background: linear-gradient(100deg, #fff 0%, #fff 50%, var(--sv-menthe) 85%, var(--sv-eclat) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

body.lupeo-suivi-nuit .ct-breadcrumbs,
body.lupeo-suivi-nuit .ct-breadcrumbs a {
	color: rgba(255, 255, 255, .55);
}

/* =========================================================
   1. Le formulaire : la console et la scène
   ========================================================= */
body.lupeo-suivi-nuit .lupeo-suivi--recherche {
	display: grid;
	grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 4vw, 72px);
	padding-bottom: clamp(48px, 6vw, 96px);
}

body.lupeo-suivi-nuit .lupeo-suivi--recherche > * {
	max-width: none;
}

body.lupeo-suivi-nuit .lupeo-suivi__console {
	padding: clamp(24px, 2.6vw, 36px);
	border: 1px solid var(--sv-trait);
	border-radius: 28px;
	background: linear-gradient(160deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .03) 100%);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08);
}

body.lupeo-suivi-nuit .lupeo-suivi__intro {
	margin-bottom: 26px;
	font-size: 16.5px;
	color: var(--sv-texte);
}

body.lupeo-suivi-nuit .lupeo-suivi__champ label {
	margin-bottom: 8px;
	font-family: var(--lp-mono, ui-monospace, monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #7CF0B5;
}

body.lupeo-suivi-nuit .lupeo-suivi__champ input {
	height: 56px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 14px;
	background: rgba(0, 0, 0, .25);
	font-size: 17px;
	color: #fff;
	caret-color: var(--sv-eclat);
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

body.lupeo-suivi-nuit .lupeo-suivi__champ input:focus {
	border-color: var(--sv-eclat);
	background: rgba(0, 0, 0, .35);
	box-shadow: 0 0 0 5px rgba(0, 211, 107, .16), 0 0 40px -10px rgba(0, 211, 107, .6);
}

/* Numéro de commande : chasse fixe, comme sur le courriel. */
body.lupeo-suivi-nuit #lupeo-suivi-commande {
	font-family: var(--lp-mono, ui-monospace, monospace);
	letter-spacing: .08em;
}

body.lupeo-suivi-nuit .lupeo-suivi__envoi {
	margin-top: 26px;
}

body.lupeo-suivi-nuit .lupeo-suivi__envoi button {
	width: 100%;
	min-height: 58px;
	border-radius: 999px;
	background: linear-gradient(145deg, #3BF09A 0%, #00B85D 100%);
	box-shadow: 0 0 0 4px rgba(0, 211, 107, .14), 0 16px 34px -12px rgba(0, 211, 107, .65);
	font-size: 17px;
	font-weight: 700;
	color: var(--lp-green-400-ink, #06231A);
	transition: transform .2s ease, box-shadow .2s ease;
}

body.lupeo-suivi-nuit .lupeo-suivi__envoi button:hover,
body.lupeo-suivi-nuit .lupeo-suivi__envoi button:focus-visible {
	background: linear-gradient(145deg, #3BF09A 0%, #00B85D 100%);
	transform: translateY(-2px);
	box-shadow: 0 0 0 6px rgba(0, 211, 107, .2), 0 20px 40px -12px rgba(0, 211, 107, .75);
}

body.lupeo-suivi-nuit .lupeo-suivi__envoi button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

/* L'erreur : sur la nuit, un cadre cuivré lisible — pas une alarme rouge. */
body.lupeo-suivi-nuit .lupeo-suivi__erreur {
	border: 1px solid rgba(240, 168, 30, .45);
	border-radius: 16px;
	background: rgba(240, 168, 30, .10);
	color: #FFE3B0;
}

/* ---- La scène ---- */
body.lupeo-suivi-nuit .lupeo-suivi__scene {
	position: relative;
	min-width: 0;
}

body.lupeo-suivi-nuit .lupeo-suivi__scene svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

body.lupeo-suivi-nuit .lupeo-suivi__route-fond {
	fill: none;
	stroke: rgba(255, 255, 255, .08);
	stroke-width: 14;
	stroke-linecap: round;
}

body.lupeo-suivi-nuit .lupeo-suivi__route {
	fill: none;
	stroke: url(#lupeo-suivi-trace);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 2 12;
	filter: drop-shadow(0 0 6px rgba(0, 211, 107, .6));
}

body.lupeo-suivi-nuit .lupeo-suivi__depart rect {
	fill: rgba(255, 255, 255, .06);
	stroke: rgba(255, 255, 255, .2);
}

body.lupeo-suivi-nuit .lupeo-suivi__depart path {
	fill: none;
	stroke: var(--sv-menthe);
	stroke-width: 2;
	stroke-linejoin: round;
}

body.lupeo-suivi-nuit .lupeo-suivi__epingle {
	fill: url(#lupeo-suivi-trace);
	filter: drop-shadow(0 8px 18px rgba(0, 211, 107, .55));
}

body.lupeo-suivi-nuit .lupeo-suivi__epingle-coeur {
	fill: #06231A;
}

body.lupeo-suivi-nuit .lupeo-suivi__onde {
	fill: none;
	stroke: rgba(0, 211, 107, .5);
	stroke-width: 1.5;
	transform-box: fill-box;
	transform-origin: center;
	opacity: 0;
}

body.lupeo-suivi-nuit .lupeo-suivi__colis-point {
	fill: #fff;
	stroke: var(--sv-eclat);
	stroke-width: 3;
}

body.lupeo-suivi-nuit .lupeo-suivi__legende {
	font-family: var(--lp-mono, ui-monospace, monospace);
	font-size: 13px;
	letter-spacing: .14em;
	text-anchor: middle;
	text-transform: uppercase;
	fill: rgba(255, 255, 255, .5);
}

/* =========================================================
   2. Le résultat : la carte
   ========================================================= */
/* La carte à gauche, la scène à droite — le colis y est posé là où en est la commande. La scène reste en haut,
   à côté de l'état, quand la carte s'allonge (frise du transporteur). */
body.lupeo-suivi-nuit .lupeo-suivi--resultat {
	display: grid;
	grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
	align-items: start;
	gap: clamp(28px, 4vw, 72px);
	padding-bottom: clamp(48px, 6vw, 96px);
}

body.lupeo-suivi-nuit .lupeo-suivi--resultat > * {
	max-width: none;
}

body.lupeo-suivi-nuit .lupeo-suivi--resultat .lupeo-suivi__scene {
	position: sticky;
	top: calc(var(--lupeo-collant, 110px) + 24px);
	margin-top: clamp(20px, 4vw, 60px);
}

/* La part de route déjà faite : trait plein et lumineux, de 0 à la phase. */
body.lupeo-suivi-nuit .lupeo-suivi__route-faite {
	fill: none;
	stroke: var(--sv-eclat);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: var(--faite, 0) 1;
	filter: drop-shadow(0 0 8px rgba(0, 211, 107, .7));
}

body.lupeo-suivi-nuit .lupeo-suivi__scene[data-phase="incident"] .lupeo-suivi__route-faite {
	stroke: var(--sv-ambre);
	filter: drop-shadow(0 0 8px rgba(240, 168, 30, .6));
}

body.lupeo-suivi-nuit .lupeo-suivi__scene[data-phase="incident"] .lupeo-suivi__colis-point {
	stroke: var(--sv-ambre);
}

body.lupeo-suivi-nuit .lupeo-suivi__scene[data-phase="incident"] .lupeo-suivi__onde {
	stroke: rgba(240, 168, 30, .5);
}

/* Livré : le colis est arrivé, le repère s'allume en entier et les ondes se taisent. */
body.lupeo-suivi-nuit .lupeo-suivi__scene[data-phase="livre"] .lupeo-suivi__onde {
	display: none;
}

body.lupeo-suivi-nuit .lupeo-suivi__scene[data-phase="livre"] .lupeo-suivi__epingle {
	filter: drop-shadow(0 0 22px rgba(0, 211, 107, .9));
}

/* En préparation : le colis attend encore à la boutique — pas d'ondes à l'arrivée. */
body.lupeo-suivi-nuit .lupeo-suivi__scene[data-phase="preparation"] .lupeo-suivi__onde {
	display: none;
}

body.lupeo-suivi-nuit .lupeo-suivi__carte {
	position: relative;
	overflow: hidden;
	padding: clamp(24px, 3vw, 44px);
	border: 1px solid var(--sv-trait);
	border-radius: 30px;
	background: linear-gradient(160deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .025) 100%);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 60px 100px -60px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Une lueur qui prend la couleur de l'état, dans le coin de la carte. */
body.lupeo-suivi-nuit .lupeo-suivi__carte::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -30%;
	right: -15%;
	width: 60%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 211, 107, .28), rgba(0, 211, 107, 0));
	pointer-events: none;
}

body.lupeo-suivi-nuit .lupeo-suivi__carte[data-etat="incident"]::before {
	background: radial-gradient(closest-side, rgba(240, 168, 30, .26), rgba(240, 168, 30, 0));
}

body.lupeo-suivi-nuit .lupeo-suivi__carte[data-etat="preparation"]::before {
	background: radial-gradient(closest-side, rgba(159, 232, 196, .16), rgba(159, 232, 196, 0));
}

body.lupeo-suivi-nuit .lupeo-suivi__commande {
	margin-bottom: 14px;
	font-family: var(--lp-mono, ui-monospace, monospace);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #7CF0B5;
}

/* La pastille d'état : grande, lumineuse — c'est ce que le client vient lire. */
body.lupeo-suivi-nuit .lupeo-suivi__etat {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 30px;
	padding: 0;
	border: 0;
	background: none;
	font-size: clamp(30px, 3.6vw, 48px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.035em;
	color: #fff;
}

body.lupeo-suivi-nuit .lupeo-suivi__etat::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--sv-eclat);
	box-shadow: 0 0 0 6px rgba(0, 211, 107, .18), 0 0 24px rgba(0, 211, 107, .8);
}

body.lupeo-suivi-nuit .lupeo-suivi__etat--attente::before {
	background: var(--sv-menthe);
	box-shadow: 0 0 0 6px rgba(159, 232, 196, .14), 0 0 20px rgba(159, 232, 196, .5);
}

body.lupeo-suivi-nuit .lupeo-suivi__etat--livre {
	background: linear-gradient(100deg, #fff 0%, var(--sv-menthe) 60%, var(--sv-eclat) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

body.lupeo-suivi-nuit .lupeo-suivi__etat--incident::before {
	background: var(--sv-ambre);
	box-shadow: 0 0 0 6px rgba(240, 168, 30, .18), 0 0 24px rgba(240, 168, 30, .7);
}

/* ---- La frise d'avancement ---- */
body.lupeo-suivi-nuit .lupeo-suivi__phases {
	--avance: 0;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

/* La piste, puis sa part parcourue (de la première phase à la phase en cours). */
body.lupeo-suivi-nuit .lupeo-suivi__phases::before,
body.lupeo-suivi-nuit .lupeo-suivi__phases::after {
	content: "";
	position: absolute;
	top: 13px;
	left: 12.5%;
	height: 4px;
	border-radius: 4px;
}

body.lupeo-suivi-nuit .lupeo-suivi__phases::before {
	right: 12.5%;
	background: rgba(255, 255, 255, .1);
}

body.lupeo-suivi-nuit .lupeo-suivi__phases::after {
	width: calc(75% * var(--avance));
	background: linear-gradient(90deg, #00A896 0%, var(--sv-eclat) 100%);
	box-shadow: 0 0 16px rgba(0, 211, 107, .6);
}

body.lupeo-suivi-nuit .lupeo-suivi__phases[data-phase="incident"]::after {
	background: linear-gradient(90deg, #00A896 0%, var(--sv-eclat) 60%, var(--sv-ambre) 100%);
}

body.lupeo-suivi-nuit .lupeo-suivi__phase {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0;
	text-align: center;
}

body.lupeo-suivi-nuit .lupeo-suivi__phase-point {
	position: relative;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 2px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
	background: #0B1F1A;
}

/* Phase passée : pastille pleine, coche. */
body.lupeo-suivi-nuit .lupeo-suivi__phase.est-faite .lupeo-suivi__phase-point {
	border-color: transparent;
	background: linear-gradient(145deg, #3BF09A 0%, #00B85D 100%);
}

body.lupeo-suivi-nuit .lupeo-suivi__phase.est-faite .lupeo-suivi__phase-point::after {
	content: "";
	width: 10px;
	height: 6px;
	margin-top: -3px;
	border-left: 2.5px solid #06231A;
	border-bottom: 2.5px solid #06231A;
	transform: rotate(-45deg);
}

/* Phase en cours (pas encore faite) : anneau lumineux et cœur vert. */
body.lupeo-suivi-nuit .lupeo-suivi__phase.est-actuelle:not(.est-faite) .lupeo-suivi__phase-point {
	border-color: var(--sv-eclat);
	box-shadow: 0 0 0 6px rgba(0, 211, 107, .16), 0 0 30px rgba(0, 211, 107, .6);
}

body.lupeo-suivi-nuit .lupeo-suivi__phase.est-actuelle:not(.est-faite) .lupeo-suivi__phase-point::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--sv-eclat);
}

body.lupeo-suivi-nuit .lupeo-suivi__phases[data-phase="incident"] .lupeo-suivi__phase.est-actuelle .lupeo-suivi__phase-point {
	border-color: var(--sv-ambre);
	box-shadow: 0 0 0 6px rgba(240, 168, 30, .18), 0 0 30px rgba(240, 168, 30, .6);
}

body.lupeo-suivi-nuit .lupeo-suivi__phases[data-phase="incident"] .lupeo-suivi__phase.est-actuelle .lupeo-suivi__phase-point::after {
	background: var(--sv-ambre);
}

body.lupeo-suivi-nuit .lupeo-suivi__phase-nom {
	font-family: var(--lp-mono, ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}

body.lupeo-suivi-nuit .lupeo-suivi__phase.est-faite .lupeo-suivi__phase-nom {
	color: rgba(255, 255, 255, .7);
}

body.lupeo-suivi-nuit .lupeo-suivi__phase.est-actuelle .lupeo-suivi__phase-nom {
	font-weight: 600;
	color: #fff;
}

/* ---- Textes, numéro, lien ---- */
body.lupeo-suivi-nuit .lupeo-suivi__texte,
body.lupeo-suivi-nuit .lupeo-suivi__reception {
	font-size: 16.5px;
	color: var(--sv-texte);
}

body.lupeo-suivi-nuit .lupeo-suivi__numero {
	padding: 16px 18px;
	border: 1px solid var(--sv-trait);
	border-radius: 16px;
	background: rgba(0, 0, 0, .25);
}

body.lupeo-suivi-nuit .lupeo-suivi__nom {
	color: #7CF0B5;
}

body.lupeo-suivi-nuit .lupeo-suivi__code {
	font-family: var(--lp-mono, ui-monospace, monospace);
	color: #fff;
}

body.lupeo-suivi-nuit .lupeo-suivi__copier {
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	transition: border-color .2s ease, background-color .2s ease;
}

body.lupeo-suivi-nuit .lupeo-suivi__copier:hover {
	border-color: var(--sv-eclat);
	background: rgba(0, 211, 107, .14);
	color: #fff;
}

body.lupeo-suivi-nuit .lupeo-suivi__copier[data-copie="fait"] {
	border-color: var(--sv-eclat);
	color: var(--sv-menthe);
}

body.lupeo-suivi-nuit .lupeo-suivi__lien a {
	padding: 14px 26px;
	border-radius: 999px;
	background: linear-gradient(145deg, #3BF09A 0%, #00B85D 100%);
	box-shadow: 0 0 0 4px rgba(0, 211, 107, .14), 0 14px 30px -12px rgba(0, 211, 107, .6);
	font-weight: 700;
	color: var(--lp-green-400-ink, #06231A);
}

body.lupeo-suivi-nuit .lupeo-suivi__lien a:hover {
	background: linear-gradient(145deg, #3BF09A 0%, #00B85D 100%);
	color: var(--lp-green-400-ink, #06231A);
}

/* Le lien vers le transporteur, quand la page raconte déjà le colis : un recours, en lien discret. */
body.lupeo-suivi-nuit .lupeo-suivi__lien--secondaire a {
	padding: 0 0 3px;
	border-bottom: 2px solid var(--sv-eclat);
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #fff;
}

body.lupeo-suivi-nuit .lupeo-suivi__lien--secondaire a:hover {
	background: none;
	color: var(--sv-menthe);
}

body.lupeo-suivi-nuit .lupeo-suivi__note {
	color: rgba(255, 255, 255, .5);
}

/* =========================================================
   3. Les colis et la frise du transporteur
   ========================================================= */
body.lupeo-suivi-nuit .lupeo-colis__carte {
	padding: 22px;
	border: 1px solid var(--sv-trait);
	border-radius: 22px;
	background: rgba(0, 0, 0, .22);
	box-shadow: none;
}

body.lupeo-suivi-nuit .lupeo-colis__rang {
	color: #7CF0B5;
	font-family: var(--lp-mono, ui-monospace, monospace);
	letter-spacing: .14em;
}

body.lupeo-suivi-nuit .lupeo-colis__entete {
	border-bottom-color: rgba(255, 255, 255, .08);
}

body.lupeo-suivi-nuit .lupeo-colis__transporteur {
	color: #fff;
}

body.lupeo-suivi-nuit .lupeo-colis__numero {
	font-family: var(--lp-mono, ui-monospace, monospace);
	color: rgba(255, 255, 255, .7);
}

body.lupeo-suivi-nuit .lupeo-colis__etat,
body.lupeo-suivi-nuit .lupeo-colis__etat[data-famille] {
	color: #fff;
}

body.lupeo-suivi-nuit .lupeo-colis__etat[data-famille="arrive"] {
	color: var(--sv-menthe);
}

body.lupeo-suivi-nuit .lupeo-colis__etat[data-famille="incident"] {
	color: #FFD68A;
}

body.lupeo-suivi-nuit .lupeo-colis__eta {
	border: 1px solid rgba(0, 211, 107, .4);
	border-radius: 14px;
	background: rgba(0, 211, 107, .10);
}

body.lupeo-suivi-nuit .lupeo-colis__eta-libelle {
	color: var(--sv-texte);
}

body.lupeo-suivi-nuit .lupeo-colis__eta strong {
	color: #fff;
}

body.lupeo-suivi-nuit .lupeo-colis__vide {
	color: rgba(255, 255, 255, .6);
}

/* La frise : trait lumineux, pastilles sur la nuit, l'étape actuelle qui rayonne. */
body.lupeo-suivi-nuit .lupeo-colis__etape::before {
	border-color: rgba(255, 255, 255, .25);
	background: #0B1F1A;
}

body.lupeo-suivi-nuit .lupeo-colis__etape::after {
	background: linear-gradient(180deg, rgba(0, 211, 107, .5) 0%, rgba(255, 255, 255, .1) 100%);
}

body.lupeo-suivi-nuit .lupeo-colis__etape--actuelle::before {
	border-color: var(--sv-eclat);
	background: var(--sv-eclat);
	box-shadow: 0 0 0 5px rgba(0, 211, 107, .18), 0 0 18px rgba(0, 211, 107, .8);
}

body.lupeo-suivi-nuit .lupeo-colis__etape--actuelle[data-famille="arrive"]::before {
	border-color: var(--sv-menthe);
	background: var(--sv-menthe);
}

body.lupeo-suivi-nuit .lupeo-colis__etape--actuelle[data-famille="incident"]::before {
	border-color: var(--sv-ambre);
	background: var(--sv-ambre);
	box-shadow: 0 0 0 5px rgba(240, 168, 30, .2), 0 0 18px rgba(240, 168, 30, .7);
}

body.lupeo-suivi-nuit .lupeo-colis__quand {
	font-family: var(--lp-mono, ui-monospace, monospace);
	color: #7CF0B5;
}

body.lupeo-suivi-nuit .lupeo-colis__titre {
	color: rgba(255, 255, 255, .78);
}

body.lupeo-suivi-nuit .lupeo-colis__etape--actuelle .lupeo-colis__titre {
	color: #fff;
}

body.lupeo-suivi-nuit .lupeo-colis__message,
body.lupeo-suivi-nuit .lupeo-colis__lieu {
	color: rgba(255, 255, 255, .5);
}

body.lupeo-suivi-nuit .lupeo-colis__plus {
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	color: #fff;
}

body.lupeo-suivi-nuit .lupeo-colis__plus:hover {
	border-color: var(--sv-eclat);
	color: #fff;
}

/* =========================================================
   Mouvement
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
	body.lupeo-suivi-nuit .lupeo-suivi__route {
		animation: lupeo-sv-route 1.4s linear infinite;
	}

	body.lupeo-suivi-nuit .lupeo-suivi__onde {
		animation: lupeo-sv-onde 3s ease-out infinite;
	}

	body.lupeo-suivi-nuit .lupeo-suivi__onde--2 {
		animation-delay: 1s;
	}

	body.lupeo-suivi-nuit .lupeo-suivi__onde--3 {
		animation-delay: 2s;
	}

	body.lupeo-suivi-nuit .lupeo-suivi__phase.est-actuelle:not(.est-faite) .lupeo-suivi__phase-point,
	body.lupeo-suivi-nuit .lupeo-colis__etape--actuelle:not([data-famille="arrive"])::before {
		animation: lupeo-sv-pouls 2.2s ease-in-out infinite;
	}

	/* La frise d'avancement se remplit à l'arrivée sur la page ; la route de la scène se trace en même temps. */
	body.lupeo-suivi-nuit .lupeo-suivi__phases::after {
		animation: lupeo-sv-remplit 1.2s cubic-bezier(.2, .7, .2, 1) .3s backwards;
	}

	body.lupeo-suivi-nuit .lupeo-suivi__route-faite {
		animation: lupeo-sv-trace 1.4s cubic-bezier(.2, .7, .2, 1) .3s backwards;
	}

	body.lupeo-suivi-nuit .lupeo-suivi__colis-pose {
		animation: lupeo-sv-apparait .6s ease 1.2s backwards;
	}
}

@keyframes lupeo-sv-trace {
	from { stroke-dasharray: 0 1; }
}

@keyframes lupeo-sv-apparait {
	from { opacity: 0; }
}

/* Moins de mouvement : le colis ne parcourt plus la route (animation SVG, qu'on masque). */
@media (prefers-reduced-motion: reduce) {
	body.lupeo-suivi-nuit .lupeo-suivi__colis-mobile {
		display: none;
	}
}

@keyframes lupeo-sv-route {
	to { stroke-dashoffset: -28; }
}

@keyframes lupeo-sv-onde {
	0% { opacity: .9; transform: scale(1); }
	100% { opacity: 0; transform: scale(4.2); }
}

@keyframes lupeo-sv-pouls {
	0%, 100% { filter: brightness(1); }
	50% { filter: brightness(1.35); }
}

@keyframes lupeo-sv-remplit {
	from { width: 0; }
}

/* =========================================================
   Tablette et téléphone
   ========================================================= */
@media (max-width: 960px) {
	body.lupeo-suivi-nuit .lupeo-suivi--recherche,
	body.lupeo-suivi-nuit .lupeo-suivi--resultat {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Sur le résultat, la scène passe AU-DESSUS de la carte : on voit d'abord où est le colis. */
	body.lupeo-suivi-nuit .lupeo-suivi--resultat .lupeo-suivi__scene {
		position: static;
		order: -1;
		margin-top: 0;
	}

	/* La scène passe sous la console, en plus petit. */
	body.lupeo-suivi-nuit .lupeo-suivi__scene {
		max-width: 520px;
		margin-inline: auto;
		width: 100%;
	}
}

@media (max-width: 560px) {
	body.lupeo-suivi-nuit .lupeo-suivi__console,
	body.lupeo-suivi-nuit .lupeo-suivi__carte {
		border-radius: 22px;
	}

	body.lupeo-suivi-nuit .lupeo-suivi__phase-nom {
		font-size: 9.5px;
		letter-spacing: .04em;
	}

	body.lupeo-suivi-nuit .lupeo-suivi__phase-point {
		width: 26px;
		height: 26px;
	}

	body.lupeo-suivi-nuit .lupeo-suivi__phases::before,
	body.lupeo-suivi-nuit .lupeo-suivi__phases::after {
		top: 11px;
	}
}