/* Suivi de Commande — côté client. Couleur principale modifiable via --wcsc-accent. */
.wcsc {
	--wcsc-accent: #2e7d32;
	--wcsc-alert: #c62828;
	--wcsc-muted: #9e9e9e;
	--wcsc-line: #e0e0e0;
	margin: 0 0 2em;
	padding: 1.5em;
	border: 1px solid var(--wcsc-line);
	border-radius: 8px;
	background: #fff;
}
.wcsc__title { margin: 0 0 .8em; font-size: 1.3em; }
.wcsc__subtitle { margin: 1.5em 0 .6em; font-size: 1.05em; }
.wcsc__empty { margin: 0; color: #555; }

.wcsc__status {
	display: flex; flex-wrap: wrap; gap: .3em 1em; align-items: baseline;
	padding: .8em 1em; margin-bottom: 1.4em;
	border-left: 4px solid var(--wcsc-accent);
	background: rgba(46, 125, 50, .07);
	border-radius: 4px;
}
.wcsc__status--incident { border-color: var(--wcsc-alert); background: rgba(198, 40, 40, .07); }
.wcsc__status-label { font-weight: 700; font-size: 1.1em; }
.wcsc__status-date { color: #666; font-size: .9em; }

/* Barre de progression */
.wcsc__steps {
	list-style: none; margin: 0 0 1.4em; padding: 0;
	display: grid; grid-template-columns: repeat(var(--wcsc-count), 1fr);
}
.wcsc__step { position: relative; text-align: center; padding-top: 28px; font-size: .85em; color: var(--wcsc-muted); margin: 0; }
.wcsc__step::before {
	content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 3px;
	background: var(--wcsc-line); z-index: 0;
}
.wcsc__step:first-child::before { display: none; }
.wcsc__dot {
	position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 20px; height: 20px; border-radius: 50%;
	background: #fff; border: 3px solid var(--wcsc-line); box-sizing: border-box; z-index: 1;
}
.wcsc__step--done, .wcsc__step--current { color: #222; }
.wcsc__step--done::before, .wcsc__step--current::before { background: var(--wcsc-accent); }
.wcsc__step--done .wcsc__dot { background: var(--wcsc-accent); border-color: var(--wcsc-accent); }
.wcsc__step--current .wcsc__dot { border-color: var(--wcsc-accent); box-shadow: 0 0 0 4px rgba(46, 125, 50, .2); }
.wcsc__step--current .wcsc__step-label { font-weight: 700; }

/* Informations d'expédition */
.wcsc__info { display: flex; flex-wrap: wrap; gap: 1em 2.5em; margin: 0 0 .5em; }
.wcsc__info dt { font-size: .8em; text-transform: uppercase; letter-spacing: .04em; color: #777; margin: 0; }
.wcsc__info dd { margin: .15em 0 0; font-weight: 600; }

/* Historique */
.wcsc__timeline { list-style: none; margin: 0; padding: 0 0 0 1.2em; border-left: 2px solid var(--wcsc-line); }
.wcsc__event { position: relative; margin: 0 0 1.1em; padding-left: .6em; }
.wcsc__event::before {
	content: ""; position: absolute; left: calc(-1.2em - 6px); top: .35em;
	width: 10px; height: 10px; border-radius: 50%; background: var(--wcsc-accent);
}
.wcsc__event:not(:first-child)::before { background: var(--wcsc-muted); }
.wcsc__event--incident::before { background: var(--wcsc-alert) !important; }
.wcsc__event time { display: block; font-size: .8em; color: #777; }
.wcsc__loc { display: block; font-size: .9em; color: #555; }
.wcsc__event p { margin: .3em 0 0; }

/* Page publique de suivi : tout centré */
.wcsc-lookup { max-width: 820px; margin: 0 auto; text-align: center; }
.wcsc-lookup .wcsc { text-align: left; }                 /* le suivi lui-même reste lisible (aligné à gauche dans son cadre centré) */
.wcsc-lookup__form { max-width: 720px; margin: 0 auto; }
.wcsc-lookup__form p { margin: 0 0 1em; }
.wcsc-lookup__fields { display: flex; gap: 1.2em; text-align: left; }
.wcsc-lookup__field { flex: 1 1 0; min-width: 0; }
.wcsc-lookup__form label { display: block; font-weight: 600; margin-bottom: .35em; }
.wcsc-lookup__form input[type=text],
.wcsc-lookup__form input[type=email] { width: 100%; box-sizing: border-box; }
.wcsc-lookup__actions { text-align: center; }
.wcsc-lookup__submit { min-width: 220px; }
.wcsc-lookup__error { color: #c62828; padding: .6em .8em; background: rgba(198, 40, 40, .07); border-radius: 4px; }

/* Tablette et mobile : champs l'un sous l'autre, bouton pleine largeur */
@media (max-width: 768px) {
	.wcsc-lookup { padding: 0 4px; }
	.wcsc-lookup__fields { flex-direction: column; gap: 0; }
	.wcsc-lookup__submit { width: 100%; min-width: 0; }
}

/* Mobile : barre verticale */
@media (max-width: 600px) {
	.wcsc { padding: 1em; }
	.wcsc__steps { display: block; padding-left: 4px; }
	.wcsc__step { text-align: left; padding: 0 0 1em 32px; }
	.wcsc__step::before { top: -1em; left: 8px; width: 3px; height: calc(1em + 2px); }
	.wcsc__dot { left: 0; transform: none; }
}

/* Commandes du client connecté (page de suivi) */
.wcsc-mine { max-width: 640px; margin: 0 auto 1.5em; text-align: left; }
.wcsc-mine .wcsc__subtitle, .wcsc-mine__or { text-align: center; }
.wcsc-mine__list { list-style: none; margin: 0 0 1em; padding: 0; border: 1px solid #e0e0e0; border-radius: 8px; }
.wcsc-mine__list li { display: flex; align-items: center; gap: .6em 1em; flex-wrap: wrap; padding: .7em 1em; border-bottom: 1px solid #eee; margin: 0; }
.wcsc-mine__list li:last-child { border-bottom: 0; }
.wcsc-mine__list li > span:first-child { flex: 1; min-width: 8em; }
.wcsc-mine__list small { display: block; color: #777; }
.wcsc-mine__stage { font-weight: 600; color: #2e7d32; }
.wcsc-mine__or { font-weight: 600; margin: 0; }
@media (max-width: 480px) { .wcsc-mine__list li .button { width: 100%; text-align: center; } }
.wcsc-lookup__login { font-size: .95em; }