/* Page publique « Suivre votre expédition ». Reprend les variables du site (main.css)
   et les couleurs officielles bleu / vert de Transport Flexible. */

.suivi {
  --suivi-blue: #004aad;
  --suivi-blue-dark: #00357d;
  --suivi-green: #7ed957;
  --suivi-green-dark: #2f8a1d;
  --suivi-ink: #0e1d34;
  --suivi-muted: #5b6577;
  --suivi-line: #dfe5ee;
  --suivi-soft: #f3f6fc;
  padding: 48px 0 72px;
  color: var(--suivi-ink);
}

.suivi .container { max-width: 920px; }

.breadcrumbs .page-header .suivi-title {
  font-size: clamp(30px, 6vw, 52px);
  font-weight: 500;
  color: #fff;
  font-family: var(--font-secondary);
  margin-bottom: 8px;
}

/* ---- Formulaire ---------------------------------------------------------- */

.suivi-form {
  background: #fff;
  border: 1px solid var(--suivi-line);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(14, 29, 52, 0.06);
  padding: 24px;
}
.suivi-form label { display: block; font-weight: 600; margin-bottom: 8px; }
.suivi-form__row { display: flex; gap: 10px; }
.suivi-form input {
  flex: 1 1 auto; min-width: 0;
  padding: 12px 14px; font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase;
  border: 1px solid #b9c3d3; border-radius: 8px; color: var(--suivi-ink);
}
.suivi-form input::placeholder { text-transform: none; letter-spacing: 0; color: #8892a3; }
.suivi-form input[aria-invalid="true"] { border-color: #c0362c; }
/* Bouton : styles partagés de public/css/tf-buttons.css (.btn .btn-primary). */
.suivi-form input:focus-visible,
.suivi a:focus-visible { outline: 3px solid rgba(0, 74, 173, 0.35); outline-offset: 2px; }
.suivi-form__help { margin: 12px 0 0; font-size: 14px; color: var(--suivi-muted); }
.suivi-form__help strong { font-weight: 600; white-space: nowrap; }
.suivi-form__error {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 8px;
  background: #fdeceb; color: #8f241c; font-weight: 600;
}

/* ---- Résultat ------------------------------------------------------------ */

.suivi-result {
  margin-top: 28px; padding: 24px;
  background: #fff; border: 1px solid var(--suivi-line); border-radius: 12px;
  box-shadow: 0 6px 24px rgba(14, 29, 52, 0.06);
}
.suivi-result__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.suivi-result__eyebrow { margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--suivi-muted); }
.suivi-result h2 { margin: 0; font-size: clamp(20px, 4.6vw, 28px); font-weight: 600; overflow-wrap: anywhere; font-family: var(--font-secondary); }
.suivi-result h3 { margin: 28px 0 14px; font-size: 18px; font-weight: 600; }
.suivi-result__notice { margin: 20px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--suivi-soft); color: var(--suivi-muted); }

.suivi-status {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 600; background: #edf0f5; color: #3a4658;
}
.suivi-status--primary { background: #e6eef9; color: var(--suivi-blue); }
.suivi-status--info { background: #e3f2fb; color: #0b6aa6; }
.suivi-status--success { background: #ecf9e6; color: #22660f; }
.suivi-status--warning { background: #fff3dc; color: #8a5200; }
.suivi-status--danger { background: #fdeceb; color: #8f241c; }

/* Barre de progression : rail gris, remplissage vert jusqu'à l'étape courante */
.suivi-progress {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  list-style: none; margin: 28px 0 8px; padding: 0;
}
.suivi-progress::before,
.suivi-progress::after {
  content: ""; position: absolute; top: 9px; left: 12.5%; height: 4px; border-radius: 2px;
}
.suivi-progress::before { width: 75%; background: var(--suivi-line); }
.suivi-progress::after { width: calc(75% * var(--suivi-progress, 0) / 100); background: var(--suivi-green); }
.suivi-progress li { position: relative; z-index: 1; text-align: center; font-size: 14px; color: var(--suivi-muted); }
.suivi-progress__dot {
  display: block; width: 22px; height: 22px; margin: 0 auto 8px; border-radius: 50%;
  background: #fff; border: 3px solid var(--suivi-line);
}
.suivi-progress .is-done .suivi-progress__dot { background: var(--suivi-green); border-color: var(--suivi-green); }
.suivi-progress .is-current .suivi-progress__dot { background: var(--suivi-blue); border-color: var(--suivi-blue); box-shadow: 0 0 0 4px rgba(0, 74, 173, 0.18); }
.suivi-progress .is-done, .suivi-progress .is-current { color: var(--suivi-ink); }
.suivi-progress .is-current .suivi-progress__label { font-weight: 700; }

.suivi-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 20px;
  margin: 24px 0 0; padding: 18px; background: var(--suivi-soft); border-radius: 10px;
}
.suivi-facts dt { font-size: 13px; font-weight: 600; color: var(--suivi-muted); }
.suivi-facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }

.suivi-timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--suivi-line); }
.suivi-timeline li { position: relative; padding: 0 0 20px 6px; }
.suivi-timeline li:last-child { padding-bottom: 0; }
.suivi-timeline li::before {
  content: ""; position: absolute; left: -30px; top: 4px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--suivi-line);
}
.suivi-timeline li:first-child::before { background: var(--suivi-blue); border-color: var(--suivi-blue); }
.suivi-timeline p { margin: 0; }
.suivi-timeline__time { font-size: 13px; color: var(--suivi-muted); }
.suivi-timeline__text { font-weight: 600; overflow-wrap: anywhere; }
.suivi-timeline__meta { font-size: 14px; color: var(--suivi-muted); }

/* ---- Contact ------------------------------------------------------------- */

.suivi-contact { margin-top: 28px; padding: 24px; border-radius: 12px; background: var(--suivi-ink); color: #fff; }
.suivi-contact h2 { margin: 0 0 6px; font-size: 20px; font-weight: 600; color: #fff; font-family: var(--font-secondary); }
.suivi-contact p { margin: 0 0 14px; color: rgba(255, 255, 255, 0.8); }
.suivi-contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.suivi-contact a { color: #fff; text-decoration: underline; }
.suivi-contact i { color: var(--suivi-green); margin-right: 6px; }

@media (max-width: 575.98px) {
  .suivi { padding: 28px 0 48px; }
  .suivi-form, .suivi-result, .suivi-contact { padding: 18px; }
  .suivi-form__row { flex-direction: column; }
  .suivi-form .btn { width: 100%; }
  .suivi-progress li { font-size: 12px; }
  .suivi-facts { grid-template-columns: 1fr 1fr; padding: 14px; }
}