/*
 * Suivi de colis — la page publique et l'encart de l'espace client.
 *
 * Les couleurs viennent des jetons --lupeo-* du thème enfant : si la charte
 * change dans le personnalisateur, cette page suit.
 *
 * ⚠️ Le bouton « Suivre mon colis » est turquoise, pas orange. L'orange
 * (--lupeo-cta) reste réservé au bouton d'achat.
 */

.lupeo-suivi{
  font-family:var(--lupeo-sans);
  color:var(--lupeo-ink-2);
}

/* Comme la page de retour : la largeur se pose sur les ENFANTS, jamais sur le
   conteneur. WordPress centre d'autorité tout enfant direct d'un bloc
   `is-layout-constrained`, avec un `margin-left:auto !important` qu'aucune
   spécificité ne bat — la carte partirait alors à droite du titre. */
.lupeo-suivi > *{max-width:640px}

/* ── La carte de suivi ─────────────────────────────────────────────── */
.lupeo-suivi__carte{
  padding:24px;
  background:var(--lupeo-cream);
  border:1px solid var(--lupeo-line);
  border-radius:14px;
}

.lupeo-suivi__commande{
  margin:0 0 10px;
  font-size:.9rem;color:var(--lupeo-mute);
  letter-spacing:.02em;
}

/* L'état, en pastille : « Expédiée » doit se lire d'un coup d'œil, c'est la
   seule information que le client vient chercher. */
.lupeo-suivi__etat{
  display:inline-block;margin:0 0 14px;
  padding:4px 12px;border-radius:999px;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;
}
.lupeo-suivi__etat--parti{
  background:var(--lupeo-teal-soft);
  color:var(--lupeo-teal-deep);
  border:1px solid #C9E0DE;
}
.lupeo-suivi__etat--attente{
  background:var(--lupeo-warn-soft);
  color:#6B4A16;
  border:1px solid var(--lupeo-warn-line);
}

.lupeo-suivi__texte{margin:0 0 16px;font-size:1rem;line-height:1.6}

/* ── Le numéro ─────────────────────────────────────────────────────── */
.lupeo-suivi__numero{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:0 0 16px;padding:14px 16px;
  background:#fff;
  border:1px solid var(--lupeo-line);
  border-radius:10px;
}
.lupeo-suivi__nom{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lupeo-mute);
}
/* Un numéro de suivi se recopie caractère par caractère : une chasse fixe
   sépare le 0 du O et le 1 du I, ce qu'aucune police de texte ne fait. */
.lupeo-suivi__code{
  flex:1 1 auto;
  font-family:Menlo,Consolas,"SF Mono",monospace;
  font-size:1.05rem;font-weight:600;letter-spacing:.06em;
  color:var(--lupeo-ink);
  word-break:break-all;
}
.lupeo-suivi__copier{
  flex:0 0 auto;
  padding:7px 13px;
  background:#fff;color:var(--lupeo-teal-deep);
  border:1px solid var(--lupeo-teal);border-radius:8px;
  font-family:inherit;font-size:.85rem;font-weight:600;
  cursor:pointer;
}
.lupeo-suivi__copier:hover{background:var(--lupeo-teal-soft)}
.lupeo-suivi__copier[data-copie="fait"]{
  color:var(--lupeo-ok);border-color:var(--lupeo-ok);
}

.lupeo-suivi__reception{margin:0 0 18px;font-size:1rem;line-height:1.6}

/* ── Le bouton ─────────────────────────────────────────────────────── */
.lupeo-suivi__lien{margin:0 0 16px}
.lupeo-suivi__lien a{
  display:inline-block;
  padding:12px 22px;
  background:var(--lupeo-teal);color:#fff;
  border-radius:9px;
  font-weight:600;text-decoration:none;
}
.lupeo-suivi__lien a:hover{background:var(--lupeo-teal-deep);color:#fff}

.lupeo-suivi__note{
  margin:0;
  font-size:.85rem;line-height:1.55;color:var(--lupeo-mute);
}

/* ── Le formulaire de recherche ────────────────────────────────────── */
.lupeo-suivi__intro{margin:0 0 20px;font-size:1rem;line-height:1.6}

.lupeo-suivi__champ{margin:0 0 16px}
.lupeo-suivi__champ label{
  display:block;margin-bottom:5px;
  font-size:.92rem;font-weight:600;color:var(--lupeo-ink);
}
.lupeo-suivi__champ input{
  width:100%;
  padding:11px 13px;
  background:#fff;
  border:1px solid #D8D0C4;border-radius:9px;
  font-family:inherit;font-size:1rem;color:var(--lupeo-ink);
}
.lupeo-suivi__champ input:focus{
  outline:2px solid var(--lupeo-teal);outline-offset:1px;
  border-color:var(--lupeo-teal);
}

.lupeo-suivi__envoi{margin:22px 0 0}
.lupeo-suivi__envoi button{
  padding:12px 24px;
  background:var(--lupeo-teal);color:#fff;
  border:0;border-radius:9px;
  font-family:inherit;font-size:1rem;font-weight:600;
  cursor:pointer;
}
.lupeo-suivi__envoi button:hover{background:var(--lupeo-teal-deep)}

.lupeo-suivi__erreur{
  margin:0 0 22px;padding:14px 16px;
  background:#FDF2F2;border:1px solid #E7C3C3;border-radius:10px;
  color:#8C2A2A;
}
.lupeo-suivi__erreur p{margin:0}

/* ── L'encart de l'espace client ───────────────────────────────────── */
.lupeo-suivi--encart{margin:28px 0}
.lupeo-suivi--encart h2{margin:0 0 12px;font-size:1.15rem}
.lupeo-suivi--encart .lupeo-suivi__carte{padding:18px}
.lupeo-suivi--encart .lupeo-suivi__lien{margin:0}
.lupeo-suivi--encart .lupeo-suivi__lien a{
  padding:0;background:none;color:var(--lupeo-teal-deep);
  text-decoration:underline;
}
.lupeo-suivi--encart .lupeo-suivi__lien a:hover{background:none}

@media (max-width:600px){
  .lupeo-suivi__carte{padding:18px}
  .lupeo-suivi__code{font-size:.98rem}
}