/* urneanimal.fr — « SUIVRE MON COLIS » (page /suivi/, 05/10/2026). Le cadre de page (titre, fil d'Ariane, bouton) vient de
   css/pages.css ; ici : le formulaire, la carte de la commande, la frise des 6 étapes, le livreur, les étapes du transporteur.
   Le comportement : js/suivi.js ; les données : api/suivi.php. */

/* ───────────── Le formulaire : n° de commande + code postal ───────────── */
.suivi-form{max-width:680px;margin:clamp(26px, 4vw, 44px) auto 0;display:grid;grid-template-columns:1.35fr 1fr auto;gap:12px;
  align-items:end;padding:22px;border-radius:22px;background:#FFFCF7;border:1px solid rgba(58,42,32,.1);
  box-shadow:0 20px 40px -32px rgba(46,33,25,.5)}
.suivi-form label{display:grid;gap:7px;font:600 11.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gris-texte)}
.suivi-form input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid rgba(58,42,32,.22);background:#fff;
  font:500 16px/1.2 var(--sans);letter-spacing:.02em;color:var(--espresso);text-transform:none}
.suivi-form input::placeholder{color:#A8998B}
.suivi-form input:focus{outline:2px solid var(--bois);outline-offset:0;border-color:transparent}
.suivi-form .bouton{margin-top:0;justify-content:center;min-height:46px}
.suivi-form .bouton[disabled]{opacity:.65;cursor:progress}
.suivi-erreur{grid-column:1 / -1;font-size:14.5px;line-height:1.5;color:#9B2C1F}
.suivi-erreur a{color:inherit;font-weight:600}
@media (max-width:639px){ .suivi-form{grid-template-columns:1fr} }

/* ───────────── La carte de la commande ───────────── */
.suivi-res{max-width:780px;margin:clamp(26px, 4vw, 44px) auto 0}
@keyframes suivi-monte{from{opacity:0;transform:translateY(14px)}}
.suivi-carte{padding:clamp(22px, 3.6vw, 38px);border-radius:24px;background:#FFFCF7;border:1px solid rgba(58,42,32,.1);
  box-shadow:0 30px 60px -40px rgba(46,33,25,.6);animation:suivi-monte .8s cubic-bezier(.2,.7,.2,1) both}
.suivi-sur{font:600 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bois)}
.suivi-articles{margin-top:10px;list-style:none;font:600 clamp(24px, 2.6vw, 32px)/1.12 var(--serif);text-wrap:balance}
.suivi-articles li + li{margin-top:4px}
.suivi-articles small{font:500 15px/1 var(--sans);color:var(--gris-texte)}
.suivi-etat{margin-top:12px;font-size:16.5px;line-height:1.55;color:#4A382C}
.suivi-etat b{color:var(--espresso)}
.suivi-prevue{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 14px;border-radius:999px;
  background:#F1E6D6;font:600 14px/1.2 var(--sans);color:var(--bois-fonce)}
.suivi-prevue svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ───────────── La frise : 6 étapes, la ligne se remplit jusqu'à l'étape du colis ───────────── */
.suivi-etapes{--p:0;list-style:none;position:relative;display:grid;grid-template-columns:repeat(6, 1fr);margin-top:30px}
.suivi-etapes::before,.suivi-etapes::after{content:"";position:absolute;left:calc(100% / 12);top:13px;height:3px;border-radius:3px}
.suivi-etapes::before{right:calc(100% / 12);background:rgba(58,42,32,.12)}
.suivi-etapes::after{width:calc(100% * 10 / 12 * var(--p));background:var(--bois);transition:width 1.5s cubic-bezier(.2,.7,.2,1) .2s}
.suivi-etapes li{position:relative;z-index:1;display:grid;justify-items:center;align-content:start;gap:9px;padding:0 2px;
  text-align:center;font:600 12.5px/1.2 var(--sans);color:#9A8A7C;transition:color .4s}
.suivi-etapes li::before{content:"";width:29px;height:29px;border-radius:50%;background:#FFFCF7 center / 14px no-repeat;
  border:3px solid #DDD2C4;transition:background-color .4s, border-color .4s}
.suivi-etapes li.fait{color:var(--espresso)}
.suivi-etapes li.fait::before{border-color:var(--bois);background-color:var(--bois);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF7EC' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
@keyframes suivi-pouls{0%,100%{box-shadow:0 0 0 0 rgba(122,74,38,.28)}50%{box-shadow:0 0 0 8px rgba(122,74,38,0)}}
.suivi-etapes li.actuel::before{animation:suivi-pouls 2.4s ease-in-out 1.6s infinite}
@media (max-width:599px){
  .suivi-etapes li{font-size:10.5px;gap:7px}
  .suivi-etapes li::before{width:23px;height:23px;border-width:2.5px;background-size:11px}
  .suivi-etapes::before,.suivi-etapes::after{top:10px;height:2.5px}
}

/* ───────────── Le livreur, le numéro de suivi ───────────── */
.suivi-infos{display:grid;gap:10px;margin-top:28px}
.suivi-infos:empty{display:none}
.suivi-livreur,.suivi-numero{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:16px;background:#F7F1E7;
  border:1px solid rgba(58,42,32,.08);font-size:15px;line-height:1.45}
.suivi-livreur img{width:40px;height:40px;flex:none;border-radius:9px}
.suivi-livreur .pictos{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:11px;background:#EADCC8;color:var(--bois)}
.suivi-livreur .pictos svg,.suivi-numero svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.suivi-livreur a{color:var(--bois-fonce);font-weight:600;white-space:nowrap}
.suivi-numero{justify-content:space-between;flex-wrap:wrap}
.suivi-numero code{font:600 15px/1.3 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.04em;word-break:break-all}
.suivi-copier{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid rgba(94,55,25,.3);
  font:600 13px/1 var(--sans);color:var(--bois-fonce)}
@media (hover:hover){ .suivi-copier:hover{background:#FFFCF7} }

/* ───────────── Les étapes du transporteur ───────────── */
.suivi-fil-titre{margin-top:30px;font:600 22px/1.2 var(--serif)}
.suivi-fil{list-style:none;margin-top:10px}
.suivi-fil li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:12px 0;border-top:1px solid rgba(58,42,32,.09);
  font-size:15px;line-height:1.5;color:#4A382C}
.suivi-fil li:first-child{color:var(--espresso);font-weight:600}
.suivi-fil time{font:600 13px/1.6 var(--sans);color:var(--gris-texte);font-variant-numeric:tabular-nums}
.suivi-fil li.cache{display:none}
.suivi-fil.tout li.cache{display:grid}
.suivi-plus{margin-top:6px;font:600 14px/1 var(--sans);color:var(--bois-fonce);text-decoration:underline;text-underline-offset:3px;padding:8px 0}
@media (max-width:599px){ .suivi-fil li{grid-template-columns:1fr;gap:2px} }

.suivi-pied{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 20px;margin-top:28px;padding-top:18px;
  border-top:1px solid rgba(58,42,32,.1);font-size:14.5px;color:var(--gris-texte)}
.suivi-pied a,.suivi-pied button{color:var(--bois-fonce);font-weight:600;text-decoration:underline;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .suivi-carte,.suivi-etapes li.actuel::before{animation:none}
  .suivi-etapes::after{transition:none}
}