/* Suivi client : trois étapes */
.suivi{list-style:none;display:flex;justify-content:space-between;gap:6px;margin:18px 0 6px;padding:0;position:relative}
.suivi li{flex:1;text-align:center;font-size:.8rem;font-weight:600;color:var(--slate);position:relative}
.suivi li span{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 6px;border-radius:50%;background:var(--mist);color:var(--slate);font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;position:relative;z-index:1}
.suivi li+li:before{content:"";position:absolute;top:16px;right:50%;width:100%;height:3px;background:var(--mist)}
.suivi li.fait{color:var(--ink)}
.suivi li.fait span{background:var(--ink);color:#fff}
.suivi li.fait+li.fait:before{background:var(--ink)}
.suivi li.courant span{background:var(--signal);color:var(--ink);box-shadow:0 0 0 4px rgba(255,91,31,.25)}
.suivi li.courant+li:before{background:var(--mist)}

/* Livreur sur place : bandeau d'alerte côté client, 4 étapes */
.livreur-arrive{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin:-6px -6px 18px;padding:16px;border-radius:18px;background:var(--signal);color:var(--ink);animation:arrive 1.1s ease-in-out infinite}
.livreur-arrive strong{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.3rem;line-height:1.15}
.livreur-arrive span{font-weight:500}
.livreur-arrive button{margin-top:6px;font:inherit;font-weight:700;background:var(--ink);color:#fff;border:0;border-radius:12px;padding:12px 22px;min-height:48px;cursor:pointer}
.livreur-arrive.vu{animation:none;background:#DDF4EA;color:#0B7A50}
@keyframes arrive{50%{transform:scale(1.02)}}
.suivi li{font-size:.72rem}

/* Proposition d'activer l'alerte sonore (client) */
.proposition-son{display:flex;flex-direction:column;gap:12px;margin:16px 0 4px;padding:16px;border-radius:18px;background:#FFF0E9;border:1.5px solid #FFC9B0}
.proposition-son .ps-texte strong{display:block;font-family:'Space Grotesk','Inter',sans-serif;font-size:1.05rem;margin-bottom:2px}
.proposition-son .ps-texte span{display:block;font-size:.9rem;color:#4A3A33;line-height:1.45}
.proposition-son .ps-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ps-bouton{flex:1 1 100%;font:inherit;font-weight:700;font-size:1.02rem;color:var(--ink);background:var(--signal);border:0;border-radius:14px;min-height:54px;padding:12px 18px;cursor:pointer;box-shadow:0 8px 20px -10px rgba(255,91,31,.8)}
.ps-lien{font:inherit;font-weight:600;font-size:.88rem;color:var(--ink);background:transparent;border:0;text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:4px;min-height:40px;padding:0 6px;cursor:pointer}
.ps-bouton[hidden],.ps-lien[hidden]{display:none}
.proposition-son.active{background:#DDF4EA;border-color:#A9E0C8}
.proposition-son.active .ps-texte span{color:#0B5E3E}
.proposition-son.a-reveiller{background:#FDF0CC;border-color:#F0D58A}

/* Fenêtre « alerte sonore » proposée dès la validation */
.feuille-son{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;transition:opacity .2s}
.feuille-son.ferme{opacity:0}
.fs-fond{position:absolute;inset:0;background:rgba(16,20,28,.62)}
.fs-carte{position:relative;width:100%;max-width:520px;background:#fff;border-radius:26px 26px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px));text-align:center;box-shadow:0 -20px 50px -20px rgba(16,20,28,.5);animation:monte .3s ease-out}
@keyframes monte{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.fs-coche{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 10px;border-radius:50%;background:#DDF4EA;color:#12A26B}
.fs-carte h2{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.5rem;margin:0 0 6px}
.fs-texte{color:#2B323E;line-height:1.5;margin:0 auto 16px;max-width:30ch}
.fs-carte .ps-bouton{width:100%;flex:none}
.fs-carte .ps-lien{display:block;margin:8px auto 2px}
.fs-carte small{display:block;color:#5B6472;margin-top:6px}
@media (min-width:700px){.feuille-son{align-items:center}.fs-carte{border-radius:26px}}