/* ============================================================================
   APHRIKE JULA — suivi de commande (static/suivi.css)

   Feuille AUTONOME de static/suivi.html, sur le modèle de static/produit.css.
   La page ne charge qu'elle, plus l'habillage commun injecté par
   aj-habillage.js (bandeau, en-tête, barre de rayons, pied).

   CHARTE — aucune couleur en dehors de cette liste :
     --ink #1d211d · --ink-soft #4f554d · --ink-mute #7b8178
     --paper #f6f4ef · --paper-deep #ebe8df · --white #fffdf9
     --terra #bc6348 · --terra-dark #954b38 · --terra-light #d5886d
     --sage #788275
   --line et --line-strong sont l'encre de la charte en transparence (rgba du
   #1d211d) : même teinte, pas une couleur de plus.

   CONTRASTE — mesuré sur --paper (#f6f4ef) :
     ink 14.8:1 · ink-soft 6.98:1 · terra-dark 5.72:1  → autorisés pour le texte
     ink-mute 3.64:1 · terra 3.81:1 · sage 3.59:1      → décor uniquement
   Sur --white (#fffdf9) : ink 16.0:1 · ink-soft 7.55:1 · terra-dark 6.19:1.
   Sur --ink : paper 14.8:1 · white 16.0:1 · terra-light 5.94:1.
   Sur --terra-dark : white 6.19:1 (d'où les boutons pleins en terra-dark et
   non en terra, qui ne monterait qu'à 4.12:1).

   ANGLES — la charte n'arrondit aucun rectangle. Les seules formes rondes
   tolérées sont les pastilles décoratives de 5 à 8 px (points d'état), à
   l'identique de produit.css.
   ========================================================================== */

:root{
  --ink:#1d211d;
  --ink-soft:#4f554d;
  --ink-mute:#7b8178;
  --paper:#f6f4ef;
  --paper-deep:#ebe8df;
  --white:#fffdf9;
  --terra:#bc6348;
  --terra-dark:#954b38;
  --terra-light:#d5886d;
  --sage:#788275;
  --line:rgba(29,33,29,.14);
  --line-strong:rgba(29,33,29,.32);
  --serif:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --sans:"DM Sans","Segoe UI",Roboto,Arial,sans-serif;
  /* colonne unique : une page utilitaire se lit mieux sur une mesure
     courte que sur les 1280 px des pages de catalogue. */
  --max:960px;
  --gut:34px;
}

*{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin:0}
::selection{background:var(--terra-dark);color:var(--white)}
:focus-visible{outline:2px solid var(--terra-dark);outline-offset:3px}

.sv-wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sv-hors-ecran{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* --- en-tête et pied de secours : masqués dès que aj-habillage.js répond --- */
.sv-secours{border-bottom:1px solid var(--line);background:var(--paper)}
.sv-secours .sv-wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:14px}
.sv-secours .sv-marque{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--terra-dark)}
.sv-secours .sv-marque span{color:var(--ink);font-weight:400}
.sv-secours nav{display:flex;align-items:center;gap:20px;font-size:13px;color:var(--ink-soft)}

.sv-pied-secours{padding:40px 0;background:var(--ink);color:var(--paper);font-size:12.5px}
.sv-pied-secours .sv-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.sv-pied-secours a{color:var(--terra-light);border-bottom:1px solid currentColor;padding-bottom:1px}

/* -------------------------------------------------------------- boutons */
.sv-btn{display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:11px;padding:0 22px;border:1px solid transparent;background:transparent;color:var(--ink);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-align:center;transition:background .22s,color .22s,border-color .22s}
.sv-btn-plein{background:var(--terra-dark);color:var(--white)}
.sv-btn-plein:hover{background:var(--ink)}
.sv-btn-contour{border-color:var(--line-strong);color:var(--ink)}
.sv-btn-contour:hover{border-color:var(--ink);background:var(--paper-deep)}
.sv-btn[disabled]{cursor:not-allowed;background:var(--paper-deep);border-color:var(--line);color:var(--ink-soft)}
.sv-btn[disabled]:hover{background:var(--paper-deep);color:var(--ink-soft)}

/* --------------------------------------------------------------- l'entrée
   Pas d'aplat pleine largeur : la page s'ouvre comme les sections de
   produit.css — un surtitre en petites capitales espacées, un titre
   Cormorant dont la fin bascule en italique terracotta, un filet. */
.sv-intro{padding:46px 0 0}
.sv-surh{margin-bottom:14px;color:var(--terra-dark);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.sv-intro h1{font-family:var(--serif);font-size:clamp(36px,5.2vw,62px);font-weight:500;line-height:.98;letter-spacing:-.035em;color:var(--ink)}
.sv-intro h1 em{font-style:italic;font-weight:400;color:var(--terra-dark)}
.sv-lead{max-width:46ch;margin-top:16px;color:var(--ink-soft);font-size:14.5px;line-height:1.7}

/* champ de recherche : même dessin que la recherche de l'en-tête commun */
.sv-recherche{display:flex;max-width:560px;margin-top:24px;border:1.5px solid var(--ink);background:var(--white)}
.sv-recherche input{flex:1;min-width:0;padding:14px 16px;border:0;border-radius:0;background:transparent;color:var(--ink);font-size:15px}
.sv-recherche input::placeholder{color:var(--ink-soft)}
.sv-recherche input:focus{outline:0}
.sv-recherche:focus-within{outline:2px solid var(--terra-dark);outline-offset:2px}
.sv-recherche button{display:inline-flex;align-items:center;gap:10px;padding:0 24px;border:0;border-radius:0;background:var(--terra-dark);color:var(--white);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:background .22s}
.sv-recherche button:hover{background:var(--ink)}
.sv-recherche button .ic{font-size:16px}

/* formats acceptés : information utile, rendue lisible */
.sv-formats{display:flex;flex-wrap:wrap;gap:4px 14px;max-width:640px;margin-top:13px;color:var(--ink-soft);font-size:12.5px;line-height:1.6}
/* chaque format reste un bloc de texte normal : en faire un conteneur flex
   couperait « Mali » de « : 8 chiffres » avec l'espacement du gap. */
.sv-formats span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--terra);margin-right:7px;vertical-align:middle}
.sv-formats b{color:var(--ink);font-weight:600}
.sv-formats code{font-family:var(--sans);letter-spacing:.03em;color:var(--ink)}

/* ------------------------------------------------------------- résultats */
.sv-resultats{padding:40px 0 96px;border-top:1px solid var(--line);margin-top:38px}
.sv-compte{margin-bottom:22px;color:var(--ink-soft);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}

/* état vide / erreur, repris de .pr-etat */
.sv-etat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:52px 0 64px;text-align:center}
.sv-etat .sv-picto{width:64px;height:64px;display:grid;place-items:center;background:var(--paper-deep);color:var(--terra-dark);font-size:26px}
.sv-etat h3{font-family:var(--serif);font-size:clamp(28px,4vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.sv-etat p{max-width:44ch;color:var(--ink-soft);font-size:14px;line-height:1.7}
.sv-etat strong{color:var(--ink);font-weight:600}

/* attente */
.sv-attente{display:flex;align-items:center;justify-content:center;gap:12px;padding:64px 0;color:var(--ink-soft);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.sv-rouet{width:20px;height:20px;border:2px solid var(--line-strong);border-top-color:var(--terra-dark);border-radius:50%;animation:sv-tourne .8s linear infinite;flex:0 0 auto}
@keyframes sv-tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sv-rouet{animation:none}}

/* --------------------------------------------------------- carte commande */
.sv-carte{margin-bottom:18px;border:1px solid var(--line);background:var(--white);transition:border-color .2s}
.sv-carte:hover{border-color:var(--line-strong)}

.sv-tete{display:flex;align-items:flex-start;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line)}
.sv-vignette{width:62px;height:62px;flex:0 0 auto;object-fit:cover;background:var(--paper-deep)}
.sv-qui{flex:1;min-width:0}
.sv-qui h3{font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.14;letter-spacing:-.015em;overflow-wrap:anywhere}
.sv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:7px;color:var(--ink-soft);font-size:12.5px}
.sv-ref{display:inline-flex;align-items:center;padding:2px 9px;border:1px solid var(--line-strong);color:var(--ink);font-size:11.5px;font-weight:600;letter-spacing:.06em}
.sv-montant{flex:0 0 auto;font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;text-align:right}

/* les cinq étapes */
.sv-etapes{display:flex;align-items:flex-start;gap:0;padding:22px 22px 8px}
.sv-etape{flex:0 0 auto;width:clamp(58px,13%,110px);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.sv-etape i{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--line-strong);background:var(--white);color:var(--ink-mute);font-size:17px;font-style:normal}
.sv-etape span{font-size:10.5px;font-weight:600;letter-spacing:.04em;line-height:1.25;color:var(--ink-soft);overflow-wrap:anywhere}
.sv-etape.sv-faite i{border-color:var(--terra-dark);background:var(--terra-dark);color:var(--white)}
.sv-etape.sv-faite span{color:var(--ink)}
.sv-etape.sv-ici i{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.sv-etape.sv-ici span{color:var(--ink)}
.sv-trait{flex:1 1 auto;min-width:6px;height:1px;margin-top:19px;background:var(--line-strong)}
.sv-trait.sv-faite{background:var(--terra-dark);height:2px;margin-top:18.5px}

.sv-annulee{display:flex;align-items:center;gap:10px;padding:20px 22px 6px;color:var(--terra-dark);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.sv-annulee .ic{font-size:17px}

.sv-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;padding:16px 22px 20px}
.sv-livraison{display:inline-flex;align-items:center;gap:9px;min-width:0;color:var(--ink-soft);font-size:12.5px;overflow-wrap:anywhere}
.sv-livraison .ic{font-size:16px;color:var(--terra-dark)}
.sv-livre{display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.sv-livre i{width:7px;height:7px;border-radius:50%;background:var(--sage);flex:0 0 auto}
.sv-confirmer{min-height:42px;padding:0 18px;font-size:11.5px}

/* ------------------------------------------------------------------ écrans */
@media (max-width:1080px){
  :root{--gut:26px}
}
@media (max-width:760px){
  .sv-intro{padding-top:34px}
  .sv-recherche{flex-direction:column;max-width:none}
  .sv-recherche button{justify-content:center;min-height:50px;border-top:1px solid var(--line)}
  .sv-resultats{margin-top:30px;padding:30px 0 70px}
}
@media (max-width:520px){
  :root{--gut:18px}
  body{font-size:14.5px}
  .sv-intro h1{font-size:clamp(30px,9vw,40px)}
  .sv-tete{flex-wrap:wrap;gap:13px;padding:16px 15px}
  .sv-vignette{width:52px;height:52px}
  .sv-qui{flex:1 1 150px}
  .sv-qui h3{font-size:20px}
  .sv-montant{flex:1 0 100%;text-align:left;font-size:16px}
  .sv-etapes{padding:18px 10px 6px}
  .sv-etape{gap:6px}
  .sv-etape{width:clamp(52px,18%,72px)}
  .sv-etape i{width:30px;height:30px;font-size:14px}
  .sv-etape span{font-size:9px;letter-spacing:0}
  .sv-trait{margin-top:15px;min-width:4px}
  .sv-trait.sv-faite{margin-top:14.5px}
  .sv-annulee{padding:16px 15px 4px}
  .sv-pied{padding:14px 15px 17px}
  .sv-confirmer{width:100%}
  .sv-etat{padding:40px 0 48px}
  .sv-secours nav{display:none}
}

/* ============================================================
   CONFORMITÉ TÉLÉPHONE
   ------------------------------------------------------------
   Sous 900 px seulement : au-delà, pas une règle ne s'applique
   et le rendu sur grand écran est celui d'avant, au pixel près.
   Cibles tactiles ≥ 44 × 44 px, texte ≥ 12 px, saisie à 16 px
   (en dessous, iOS zoome de lui-même à la mise au point).
   ============================================================ */
@media (max-width:900px){
  .sv-surh{font-size:12px}
  .sv-recherche input{font-size:16px;min-height:46px}
  .sv-recherche button{min-height:46px}
  .sv-secours nav a{display:inline-flex;align-items:center;min-height:44px}
}