/* Socle commun — pages de service (frise de suivi, journal, formulaires).
 *
 * CE FICHIER EST AUTONOME. Il n'attend aucune variable de la boutique : chaque `var()` porte
 * son repli. Sans rien faire, la page est sobre et lisible ; avec la charte de la marque, elle
 * prend ses couleurs. L'ordre de chargement n'a pas d'importance — c'est pour ça qu'on écrit
 * `var(--accent, #0f172a)` plutôt qu'un bloc `:root` dans le socle, qui écraserait la boutique
 * ou serait écrasé par elle selon qui est chargé en dernier.
 *
 * CE QUE LA BOUTIQUE FOURNIT — sept variables, et rien d'autre :
 *
 *     :root{
 *       --accent:      couleur de la marque (points de la frise, liens)
 *       --accent-soft: la même, très claire (halo de l'étape en cours)
 *       --ice:         fond des cartes
 *       --line:        filets
 *       --line-strong: bordures de champs
 *       --muted:       texte secondaire
 *       --navy:        texte principal
 *     }
 *
 * `--frise-avance` n'est pas une couleur : c'est le pourcentage de progression dans le segment
 * en cours, posé en style en ligne par `tracking-colis.php`. Sans lui la barre resterait figée
 * pendant les deux semaines d'acheminement, et le client croirait sa commande bloquée.
 */

/* =========================================================================
   PAGE DE SUIVI — frise du colis, contenu de la commande
   La frise est une liste : la barre de progression est un pseudo-élément
   dont la largeur vient de --frise-pct, posé en PHP. Aucun JavaScript.
   ========================================================================= */

.suivi__retour { margin: -18px 0 26px; font-size: 15px; }

.suivi__retour a { color: var(--muted, var(--muted, #6b7280)); text-decoration: none; }

.suivi__retour a:hover { color: var(--navy, var(--accent, #0f172a)); }

/* ---- La frise ---- */
.frise {
	list-style: none;
	margin: 0 0 46px;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	position: relative;
}

.frise__pas {
	position: relative;
	display: grid;
	justify-items: start;
	gap: 0;
	color: var(--line-strong, var(--line-strong, #cfd3d8));
	min-width: 0;
}

.frise__ico { display: block; height: 30px; margin-bottom: 18px; }

/* La ligne : tracée par chaque pas, sauf le dernier. Grise par défaut,
   ambre quand le pas suivant est franchi. */
.frise__pas::after {
	content: "";
	position: absolute;
	left: 7px; right: -100%;
	top: 55px;
	height: 3px;
	background: var(--line, #e5e7eb);
	border-radius: 2px;
}

.frise__pas:last-child::after { display: none; }

.frise__pas.is-faite:not(.is-courante)::after { background: var(--accent, var(--accent, #0f172a)); }

/*
 * Le segment qui part de l'étape en cours se remplit à --frise-avance, la part de
 * temps écoulée jusqu'à l'étape suivante : la barre bouge de jour en jour au lieu de
 * rester figée pendant les deux semaines d'acheminement.
 */
.frise__pas.is-courante.is-faite::after {
	background: linear-gradient(to right,
		var(--accent, var(--accent, #0f172a)) var(--frise-avance, 0%),
		var(--line, #e5e7eb) var(--frise-avance, 0%));
}

.frise__point {
	width: 15px; height: 15px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--line, #e5e7eb);
	position: relative;
	z-index: 1;
	margin-bottom: 12px;
}

.frise__pas.is-faite { color: var(--navy, var(--accent, #0f172a)); }

.frise__pas.is-faite .frise__point { background: var(--accent, var(--accent, #0f172a)); border-color: var(--accent, var(--accent, #0f172a)); }

.frise__pas.is-courante .frise__point {
	box-shadow: 0 0 0 5px rgba(255, 164, 27, .25);
}

.frise__titre { font-size: 15px; font-weight: 700; line-height: 1.3; }

.frise__date  { font-size: 14px; color: var(--muted, var(--muted, #6b7280)); margin-top: 2px; }

.frise__pas:not(.is-faite) .frise__date { color: var(--line-strong, var(--line-strong, #cfd3d8)); }

/* ---- Les deux colonnes ---- */
.suivi__grid { display: grid; gap: 40px; align-items: start; }

/* Deux colonnes en desktop : le parcours du colis à gauche, le contenu de la commande à
 * droite. La déclaration vivait dans une `@media` du CSS de vitrine et a été perdue à
 * l'extraction du socle — le récapitulatif se retrouvait empilé sous le journal, tout en bas
 * d'une page déjà longue, là où personne ne va le chercher.
 * `minmax(0, 1fr)` et non `1fr` : une piste de grille ne descend jamais sous la largeur de son
 * contenu, et une vignette ou un mot long suffit à faire déborder toute la page en mobile. */
@media (min-width: 900px) {
	.suivi__grid { grid-template-columns: minmax(0, 1fr) 340px; }
}

.suivi__grid > * { min-width: 0; }

.suivi__statut { font-size: clamp(30px, 4vw, 46px); margin: 0 0 10px; line-height: 1.1; }

.suivi__eta { font-size: 17px; color: var(--muted, var(--muted, #6b7280)); margin: 0 0 26px; }

.suivi__eta strong { color: var(--navy, var(--accent, #0f172a)); }

.suivi__carte {
	background: var(--ice, #f5f7fa);
	border-radius: 14px;
	padding: 22px 24px;
	margin-bottom: 34px;
}

.suivi__carte-t { font-size: 14px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em; color: var(--muted, var(--muted, #6b7280)); margin: 0 0 10px; }

.suivi__adresse { font-style: normal; font-size: 16px; line-height: 1.55; }

/* ---- Le journal ---- */
.journal { list-style: none; margin: 0 0 30px; padding: 0; }

.journal__l {
	position: relative;
	padding: 0 0 26px 32px;
	color: var(--muted, var(--muted, #6b7280));
	font-size: 15px;
}

.journal__l:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 6px; top: 18px; bottom: 0;
	width: 2px;
	background: var(--line, #e5e7eb);
}

.journal__pt {
	position: absolute; left: 0; top: 4px;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--line, #e5e7eb);
}

.journal__l.is-fait { color: var(--navy, var(--accent, #0f172a)); }

.journal__l.is-fait .journal__pt { background: var(--accent, var(--accent, #0f172a)); border-color: var(--accent, var(--accent, #0f172a)); }

/* Échéance estimée déjà dépassée : la pastille est ambre pâle — l'étape est probable,
   pas constatée. C'est ce qui distingue une prévision d'un fait. */
.journal__l.is-passe .journal__pt { background: var(--accent-soft, #e8eef6); border-color: var(--accent-soft, #e8eef6); opacity: .55; }

.journal__l.is-prevu .journal__pt { background: #fff; border-color: var(--line, #e5e7eb); }

.journal__legende {
	margin: -6px 0 30px;
	font-size: 13px;
	color: var(--line-strong, var(--line-strong, #cfd3d8));
	line-height: 1.5;
}

.journal__d { display: block; font-weight: 700; font-size: 14px; }

.journal__t { display: block; }

.suivi__aide { font-size: 15px; color: var(--muted, var(--muted, #6b7280)); }

/* ---- Colonne de droite ---- */
.suivi__aside { border: 1px solid var(--line, #e5e7eb); border-radius: 14px; padding: 24px; }

.suivi__aside-t { font-size: 13px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em; color: var(--muted, var(--muted, #6b7280)); margin: 0 0 8px; }

.suivi__aside-t + .suivi__items,
.suivi__aside-v + .suivi__aside-t { margin-top: 26px; }

.suivi__aside-v { margin: 0; font-size: 18px; font-weight: 700; }

.suivi__aside-v span { font-size: 15px; font-weight: 400; color: var(--muted, var(--muted, #6b7280)); }

.suivi__items { list-style: none; margin: 0; padding: 0; }

.suivi__item { display: flex; gap: 14px; align-items: center; padding: 12px 0;
	border-bottom: 1px solid var(--line, #e5e7eb); }

.suivi__item:last-child { border-bottom: 0; }

.suivi__vign { position: relative; flex: 0 0 56px; }

.suivi__vign img {
	width: 56px; height: 56px;
	object-fit: cover;
	border: 1px solid var(--line, #e5e7eb);
	border-radius: 8px;
	display: block;
}

.suivi__qte {
	position: absolute; top: -7px; right: -7px;
	min-width: 21px; height: 21px;
	padding: 0 5px;
	border-radius: 11px;
	background: var(--navy, var(--accent, #0f172a));
	color: #fff;
	font-size: 12px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}

.suivi__nom { font-size: 15px; font-weight: 600; line-height: 1.35; min-width: 0; }

.suivi__nom small { display: block; font-weight: 400; font-size: 13px; color: var(--muted, var(--muted, #6b7280)); }

.suivi__total {
	display: flex; justify-content: space-between; align-items: baseline;
	margin: 20px 0 0; padding-top: 16px;
	border-top: 2px solid var(--navy, var(--accent, #0f172a));
	font-size: 16px;
}

.suivi__total strong { font-size: 20px; }

/* ------------------------------------------------------------------------
 * Mise en page des pages de service (suivi, contact, pages légales).
 *
 * Ces classes étaient posées par les gabarits du socle SANS jamais avoir été écrites : elles
 * vivaient dans le CSS de vitrine de la boutique d'origine, qui se réécrit à chaque clone.
 * Résultat en production sur Inolyo : les deux formulaires s'affichaient en champs bruts
 * alignés sur une ligne, et surtout le champ piège anti-robot était VISIBLE, sous l'intitulé
 * « Ne pas remplir ». Un client qui le remplissait voyait son message rejeté en silence.
 *
 * Tout est scopé sous `.lm-page` : `.wrap`, `.form`, `.notice`, `.btn` sont des noms trop
 * courants pour être lâchés dans la nature — la vitrine de la boutique en a souvent d'autres.
 * ------------------------------------------------------------------------ */

.lm-page{padding:40px 0 72px}
.lm-page .wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.lm-page .wrap > *{min-width:0}          /* sinon une grille déborde en mobile */
.lm-page .wrap--narrow{max-width:560px}
.lm-page__title{font-size:28px;font-weight:700;margin:0 0 6px}
.lm-page__lead{color:var(--muted, #6b7280);margin:0 0 22px}

.lm-page .form{display:flex;flex-direction:column;gap:14px}
.lm-page .form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.lm-page .form input,.lm-page .form textarea,.lm-page .form select{
	width:100%;border:1px solid var(--line-strong, #cfd3d8);border-radius:8px;padding:13px 12px;
	font:inherit;font-weight:400;background:#fff;outline:none}
.lm-page .form input:focus,.lm-page .form textarea:focus{border-color:var(--accent, #0f172a)}
.lm-page .form textarea{min-height:140px;resize:vertical}

/* Le piège anti-robot. `position:absolute` et NON `display:none`, que certains robots
   détectent — et qu'un lecteur d'écran annonce. */
.lm-page .form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.lm-page .btn{display:inline-block;border:0;border-radius:8px;background:var(--accent, #0f172a);color:#fff;
	padding:14px 22px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none}
.lm-page .btn:hover{opacity:.88}

.lm-page .notice{border-radius:8px;padding:12px 14px;margin:0 0 16px;font-size:14px}
.lm-page .notice--ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.lm-page .notice--ko{background:#fff5f5;border:1px solid #f0c2c2;color:#8a1f1f}
.lm-page .contact-mail{font-weight:600}
.lm-page .suivi__main{min-width:0}

@media(max-width:760px){ .lm-page{padding:26px 0 48px} .lm-page__title{font-size:23px} }