/* ============================================================
   TULIPE PALETTES - SUIVI DE COMMANDE (suivi-commande.html) - écran DÉRIVÉ, à faire valider
   Aucun nouveau langage visuel : formulaire = .form-field, boutons = .btn, cartes = celles du tunnel,
   virement / dépôt / récapitulatif = blocs de confirmation.html (components/order-blocks.css),
   statuts = .status-badge. Seule création : la liste d'historique (.tracking-timeline).
   Variables scopées à .tracking-page.
   ============================================================ */
.tracking-page {
  --ck-width: 1104px;
}

/* ---------- Recherche : carte étroite centrée ---------- */
.tracking__search {
  max-width: 560px; margin-inline: auto; padding: var(--ck-card-pad);
  background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.tracking__form { display: flex; flex-direction: column; gap: 20px; }
.tracking__submit { align-self: flex-start; }

/* ---------- En-tête du résultat ---------- */
.tracking__result-header { display: flex; flex-direction: column; align-items: center; max-width: 560px; margin: 0 auto 32px; text-align: center; }
.tracking__result-title { font-family: var(--font-serif); font-size: clamp(24px, 1vw + 20px, 32px); font-weight: 600; line-height: 1.2; color: var(--color-forest); }
.tracking__result-title:focus, .tracking__result-title:focus-visible { outline: none; } /* focus par script, élément non interactif */
.tracking__result-date { margin-top: 8px; color: var(--color-text-muted); font-size: var(--fs-base); }
.tracking__status { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-sm); }
.tracking__status-text { margin-top: 12px; color: var(--color-ink); font-size: var(--fs-base); line-height: 1.6; }

/* ---------- Historique ---------- */
.tracking__history {
  display: flex; flex-direction: column; gap: 16px; width: 100%; padding: var(--ck-card-pad);
  background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.tracking__history-title { font-family: var(--font-serif); font-size: clamp(20px, 0.5vw + 17px, 24px); font-weight: 600; line-height: 1.25; color: var(--color-forest); }
.tracking-timeline { display: flex; flex-direction: column; gap: 16px; margin-left: 6px; border-left: 2px solid var(--color-border); }
.tracking-timeline__item { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-left: 20px; }
.tracking-timeline__item::before { content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--color-paper); border: 2px solid var(--color-border-field); }
.tracking-timeline__item--current::before { background: var(--color-ember); border-color: var(--color-ember); }
.tracking-timeline__date { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ---------- Actions de fin de page ---------- */
.tracking__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .tracking__result-header { text-align: left; align-items: flex-start; margin-bottom: 24px; max-width: none; }
  .tracking__status { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .tracking__submit { align-self: stretch; }
  .tracking__actions { flex-direction: column; align-items: stretch; }
}

/* ---------- Invitation à donner son avis (commande livrée) : même carte que l'historique ---------- */
.review-invite {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; padding: var(--ck-card-pad);
  background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.review-invite[hidden] { display: none; }
.review-invite__title { font-family: var(--font-serif); font-size: clamp(20px, 0.5vw + 17px, 24px); font-weight: 600; line-height: 1.25; color: var(--color-forest); }
.review-invite__text { color: var(--color-ink); font-size: var(--fs-base); line-height: 1.6; }
.review-invite__button[aria-disabled="true"] { opacity: .7; cursor: progress; }
.review-invite__message { min-height: 0; color: var(--color-text-muted); font-size: var(--fs-sm); }
.review-invite__message:empty { display: none; }
@media (max-width: 640px) { .review-invite__button { align-self: stretch; } }