/* ============================================================================
   NUDUDU — design system partagé par les 4 interfaces
   Chaque rôle a une couleur : client = safran, restaurant = terre cuite,
   livreur = vert, console = safran sur fond sombre.
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --encre:#0E1E17;
  --encre-2:#16302A;
  --safran:#F5B31F;
  --safran-fonce:#CE8705;
  --safran-pale:#FCF2DC;
  --terre:#C4461F;
  --terre-pale:#FBEAE3;
  --vert:#0E7A45;
  --vert-pale:#E2F3E9;
  --papier:#F7F5F0;
  --blanc:#FFFFFF;
  --trait:#E9E5DC;
  --trait-fort:#D8D2C4;
  --texte:#0E1E17;
  --texte-2:#5C6B64;
  --texte-3:#8A968F;
  --warn-bg:#FDF0DA;
  --warn-tx:#8A5C00;
  --err-bg:#FBE9E7;
  --err-tx:#A6371B;
  --r-s:9px; --r-m:13px; --r-l:18px;
  --f-disp:'Bricolage Grotesque',system-ui,'Segoe UI',sans-serif;
  --f-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ombre:0 12px 30px -18px rgba(14,30,23,.55);
  --ombre-fort:0 22px 48px -22px rgba(14,30,23,.6);
}

html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);background:var(--papier);color:var(--texte);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
img{display:block;max-width:100%}
[hidden]{display:none !important}

.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.mut{color:var(--texte-3)}
.sec{color:var(--texte-2)}
.disp{font-family:var(--f-disp);font-weight:700;letter-spacing:-.02em}
.row{display:flex;align-items:center;gap:10px}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.grow{flex:1;min-width:0}
.coupe{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pile{display:flex;flex-direction:column;gap:10px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}

/* ---------- barre supérieure ---------- */
.barre{
  position:sticky;top:0;z-index:40;background:rgba(247,245,240,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--trait);
}
.barre-in{max-width:1180px;margin:0 auto;padding:11px 18px;display:flex;align-items:center;gap:16px}
.marque{display:flex;align-items:center;gap:9px;font-family:var(--f-disp);font-weight:800;font-size:18px;letter-spacing:-.03em}
.marque .logo{width:28px;height:28px;border-radius:8px;background:var(--safran);display:flex;align-items:center;justify-content:center;flex:none}
.marque .logo svg{width:17px;height:17px}
.ruban{display:flex;gap:2px;flex-wrap:wrap}
.ruban a{padding:6px 12px;border-radius:999px;font-size:13px;font-weight:500;color:var(--texte-3);border:1px solid transparent}
.ruban a:hover{color:var(--texte);border-color:var(--trait)}
.ruban a.actif{color:var(--texte);background:var(--blanc);border-color:var(--trait)}
.ruban a[data-r="client"].actif{color:var(--safran-fonce);border-color:#F3DCA8;background:var(--safran-pale)}
.ruban a[data-r="resto"].actif{color:var(--terre);border-color:#F0CFC2;background:var(--terre-pale)}
.ruban a[data-r="livreur"].actif{color:var(--vert);border-color:#BEE3CE;background:var(--vert-pale)}
.vivant{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11px;color:var(--texte-3);flex:none}
.pastille{width:7px;height:7px;border-radius:50%;background:var(--vert);flex:none}
.pastille.hors{background:var(--texte-3)}
.pastille.pulse{animation:pulse 1.6s ease-out}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(14,122,69,.5)}100%{box-shadow:0 0 0 9px rgba(14,122,69,0)}}

/* ---------- mise en page ---------- */
.page{max-width:1180px;margin:0 auto;padding:22px 18px 120px;width:100%;flex:1}
.etroit{max-width:560px}
.titre{font-family:var(--f-disp);font-weight:700;font-size:26px;letter-spacing:-.03em;line-height:1.1}
.sous{font-size:13.5px;color:var(--texte-2);margin-top:6px;max-width:640px}
.eyeb{font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--texte-3)}

/* ---------- cartes ---------- */
.carte{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-l);overflow:hidden}
.carte-p{padding:15px}
.carte+.carte{margin-top:12px}
.entete{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:22px 0 11px}
.entete b{font-family:var(--f-disp);font-size:17px;font-weight:700;letter-spacing:-.02em}
.entete span{font-size:12.5px;color:var(--texte-3)}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--encre);color:#fff;border-radius:var(--r-m);
  padding:12px 16px;font-size:14px;font-weight:600;line-height:1;
  transition:transform .12s ease,opacity .12s ease;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.grand{padding:15px 20px;font-size:15px;border-radius:14px}
.btn.bloc{width:100%}
.btn.safran{background:var(--safran);color:#0A1A12}
.btn.terre{background:var(--terre)}
.btn.vert{background:var(--vert)}
.btn.clair{background:var(--blanc);color:var(--texte);border:1px solid var(--trait-fort)}
.btn.ghost{background:transparent;color:var(--texte-2);border:1px solid var(--trait-fort)}
.btn.danger{background:var(--err-bg);color:var(--err-tx)}
.btn.mini{padding:8px 12px;font-size:12.5px;border-radius:10px}
.btn svg{width:16px;height:16px;flex:none}
.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic.s{width:14px;height:14px}
.ic.xs{width:11px;height:11px}

/* ---------- étiquettes ---------- */
.etq{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--papier);color:var(--texte-2);border:1px solid var(--trait);white-space:nowrap}
.etq.safran{background:var(--safran-pale);color:var(--safran-fonce);border-color:#F3DCA8}
.etq.terre{background:var(--terre-pale);color:var(--terre);border-color:#F0CFC2}
.etq.vert{background:var(--vert-pale);color:var(--vert);border-color:#BEE3CE}
.etq.warn{background:var(--warn-bg);color:var(--warn-tx);border-color:#F0DCB4}
.etq.err{background:var(--err-bg);color:var(--err-tx);border-color:#F0C8BF}
.etq.plein{background:var(--encre);color:#fff;border-color:var(--encre)}

/* ---------- listes ---------- */
.liste{display:flex;flex-direction:column}
.ligne{display:flex;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid var(--trait)}
.ligne:last-child{border-bottom:0}
.ligne.haut{align-items:flex-start}
.vignette{width:56px;height:56px;border-radius:11px;flex:none;background-size:cover;background-position:center;background-color:#EDEAE2}
.vignette.gd{width:72px;height:72px;border-radius:14px}

/* ---------- fiches restaurant ---------- */
.banniere{height:150px;background-size:cover;background-position:center;position:relative}
.banniere .retour{position:absolute;left:14px;top:14px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;box-shadow:var(--ombre)}

/* ---------- formulaires ---------- */
.champ{display:flex;flex-direction:column;gap:6px}
.champ label{font-size:12.5px;font-weight:600;color:var(--texte-2)}
.champ input,.champ textarea,.champ select{
  background:var(--blanc);border:1px solid var(--trait-fort);border-radius:var(--r-m);
  padding:12px 13px;font-size:14px;width:100%;
}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:2px solid var(--safran);outline-offset:-1px;border-color:var(--safran)}
.champ textarea{min-height:74px;resize:vertical}
.champ .aide{font-size:11.5px;color:var(--texte-3);line-height:1.4}
.zone-libre{position:relative}
.zone-libre svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--texte-3)}

/* ---------- radio / choix ---------- */
.choix{display:flex;align-items:center;gap:11px;padding:13px;border:1px solid var(--trait-fort);border-radius:var(--r-m);background:var(--blanc);cursor:pointer}
.choix+.choix{margin-top:8px}
.choix.on{border-color:var(--safran);background:var(--safran-pale)}
.choix[data-role="resto"].on{border-color:var(--terre);background:var(--terre-pale)}
.choix[data-role="livreur"].on{border-color:var(--vert);background:var(--vert-pale)}
.choix .past{width:18px;height:18px;border-radius:50%;border:1.8px solid var(--trait-fort);flex:none;display:flex;align-items:center;justify-content:center}
.choix.on .past{border-color:var(--safran);background:var(--safran)}
.choix[data-role="resto"].on .past{border-color:var(--terre);background:var(--terre)}
.choix[data-role="livreur"].on .past{border-color:var(--vert);background:var(--vert)}
.choix.on .past::after{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.op{width:40px;height:40px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:11px;font-weight:700;color:#fff}

/* ---------- barre d'action basse ---------- */
.rail-bas{
  position:fixed;left:0;right:0;bottom:0;z-index:35;
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--trait);padding:12px 18px calc(12px + env(safe-area-inset-bottom));
}
.rail-bas-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px}

/* ---------- alertes ---------- */
.alerte{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-m);padding:12px 13px;font-size:13px;line-height:1.45;border:1px solid transparent}
.alerte b{font-weight:700}
.alerte.warn{background:var(--warn-bg);color:var(--warn-tx);border-color:#F0DCB4}
.alerte.ok{background:var(--vert-pale);color:#0A5C34;border-color:#BEE3CE}
.alerte.info{background:var(--safran-pale);color:var(--safran-fonce);border-color:#F3DCA8}
.alerte.err{background:var(--err-bg);color:var(--err-tx);border-color:#F0C8BF}
.alerte .ic{margin-top:1px}

/* ---------- montants ---------- */
.montant{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;padding:6px 0}
.montant .k{color:var(--texte-2)}
.montant .v{font-family:var(--f-mono);font-weight:600}
.total{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 0 2px;border-top:1px dashed var(--trait-fort);margin-top:8px}
.total .k{font-family:var(--f-disp);font-weight:700;font-size:16px}
.total .v{font-family:var(--f-mono);font-weight:700;font-size:21px;letter-spacing:-.02em}

/* ---------- KPI ---------- */
.kpi{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-m);padding:13px}
.kpi .k{font-size:11.5px;color:var(--texte-3);letter-spacing:.01em}
.kpi .v{font-family:var(--f-mono);font-size:20px;font-weight:700;letter-spacing:-.02em;margin-top:6px}
.kpi .v small{font-size:11px;font-weight:500;color:var(--texte-3);margin-left:3px}
.kpi.accent{background:var(--safran-pale);border-color:#F3DCA8}
.kpi.terre{background:var(--terre-pale);border-color:#F0CFC2}
.kpi.vert{background:var(--vert-pale);border-color:#BEE3CE}

/* ---------- frise d'étapes ---------- */
.frise{display:flex;flex-direction:column}
.etape{display:flex;gap:11px}
.etape .col{width:15px;flex:none;display:flex;flex-direction:column;align-items:center}
.etape .pt{width:11px;height:11px;border-radius:50%;border:2px solid var(--trait-fort);background:var(--blanc);margin-top:3px;flex:none}
.etape .fi{width:2px;flex:1;background:var(--trait);margin:3px 0;min-height:14px}
.etape .tx{padding-bottom:13px;font-size:13px;color:var(--texte-3)}
.etape .tx b{display:block;font-weight:600;color:var(--texte-3)}
.etape .tx span{font-size:11.5px;display:block;margin-top:2px}
.etape.fait .pt{border-color:var(--vert);background:var(--vert)}
.etape.fait .fi{background:var(--vert);opacity:.45}
.etape.fait .tx b{color:var(--texte)}
.etape.actif .pt{border-color:var(--safran);background:var(--safran);box-shadow:0 0 0 4px var(--safran-pale)}
.etape.actif .tx b{color:var(--texte)}
.etape.ecarte .pt{border-color:var(--terre);background:var(--terre)}
.etape.ecarte .tx b{color:var(--terre)}

/* ---------- code de remise ---------- */
.code{display:flex;gap:7px}
.code i{flex:1;height:46px;border-radius:var(--r-s);background:var(--safran-pale);color:var(--safran-fonce);display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:22px;font-weight:700;font-style:normal}
.code.saisie i{background:var(--blanc);border:1.5px solid var(--trait-fort);color:var(--texte-2);font-size:19px;height:44px}
.code.saisie i.rempli{background:var(--encre);border-color:var(--encre);color:#fff}
.clavier{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.clavier button{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-s);padding:13px 0;font-family:var(--f-mono);font-size:17px;font-weight:600}
.clavier button:active{background:var(--papier)}

/* ---------- course livreur ---------- */
.offre{border-radius:var(--r-l);padding:23px;background:linear-gradient(158deg,#123A28,#0A2116);color:#fff;position:relative;overflow:hidden}
.offre .ol{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#93AF9E}
.offre .gain{font-family:var(--f-disp);font-size:52px;font-weight:800;letter-spacing:-.045em;line-height:1;margin:10px 0 0;color:var(--safran)}
.offre .gain small{font-size:17px;font-weight:600;color:#EADFC4;letter-spacing:0;margin-left:4px}
.offre .det{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:20px}
.offre .det div{background:rgba(255,255,255,.07);border-radius:11px;padding:10px 11px}
.offre .det span{display:block;font-size:11px;color:#93AF9E}
.offre .det b{display:block;font-family:var(--f-mono);font-size:13px;margin-top:4px}
.anneau{position:absolute;top:22px;right:22px;width:58px;height:58px}
.carte-course{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-m);padding:13px;display:flex;align-items:flex-start;gap:11px}
.carte-course+.carte-course{margin-top:9px}
.carte-course .pt{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center}

/* ---------- carte / tracé ---------- */
.plan{position:relative;background:#E7EBE4;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--trait);aspect-ratio:16/10;min-height:230px}
.plan svg{position:absolute;inset:0;width:100%;height:100%}
.plan .bloc{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.96);border-radius:var(--r-m);padding:11px 13px;box-shadow:var(--ombre);max-width:75%}

/* ---------- barre de progression / créneau ---------- */
.jauge{height:6px;border-radius:99px;background:var(--trait);overflow:hidden}
.jauge i{display:block;height:100%;background:var(--safran);border-radius:99px;transition:width .4s ease}
.jauge.vert i{background:var(--vert)}
.jauge.terre i{background:var(--terre)}
.jauge.urgent i{background:var(--terre)}

/* ---------- histogramme ---------- */
.histo{display:flex;align-items:flex-end;gap:5px;height:88px;margin-top:12px}
.histo i{flex:1;border-radius:4px 4px 0 0;background:var(--safran);min-height:3px}
.histo i.vide{background:var(--trait)}

/* ---------- tableau ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--texte-3);padding:9px 10px;border-bottom:1px solid var(--trait)}
td{padding:11px 10px;border-bottom:1px solid var(--trait)}
tr:last-child td{border-bottom:0}
th.d,td.d{text-align:right;font-family:var(--f-mono)}

/* ---------- modèle / modale ---------- */
.voile{position:fixed;inset:0;z-index:60;background:rgba(14,30,23,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px}
.boite{background:var(--blanc);border-radius:var(--r-l);max-width:440px;width:100%;padding:22px;box-shadow:var(--ombre-fort);max-height:88vh;overflow:auto}

/* ---------- console sombre ---------- */
body.console{background:#07150F;color:#F1EDE4}
body.console .barre{background:rgba(7,21,15,.86);border-bottom-color:rgba(241,237,228,.12)}
body.console .marque{color:#F1EDE4}
body.console .ruban a{color:#8CA396}
body.console .ruban a:hover{color:#F1EDE4;border-color:rgba(241,237,228,.18)}
body.console .ruban a.actif{background:rgba(245,179,31,.14);color:var(--safran);border-color:rgba(245,179,31,.4)}
body.console .vivant{color:#8CA396}
body.console .carte{background:#10261C;border-color:rgba(241,237,228,.12)}
body.console .kpi{background:#10261C;border-color:rgba(241,237,228,.12)}
body.console .kpi .k{color:#8CA396}
body.console .kpi .v{color:#F1EDE4}
body.console .kpi .v small{color:#8CA396}
body.console .kpi.accent{background:rgba(245,179,31,.13);border-color:rgba(245,179,31,.35)}
body.console .kpi.vert{background:rgba(43,182,115,.13);border-color:rgba(43,182,115,.35)}
body.console .kpi.terre{background:rgba(232,104,60,.13);border-color:rgba(232,104,60,.35)}
body.console .ligne{border-bottom-color:rgba(241,237,228,.09)}
body.console .entete b{color:#F1EDE4}
body.console .entete span,body.console .sec{color:#8CA396}
body.console .mut{color:#7A8F83}
body.console .titre{color:#F1EDE4}
body.console .sous{color:#B9C6BF}
body.console .eyeb{color:var(--safran)}
body.console th{color:#8CA396;border-bottom-color:rgba(241,237,228,.12)}
body.console td{border-bottom-color:rgba(241,237,228,.08)}
body.console .btn.clair{background:rgba(241,237,228,.1);color:#F1EDE4;border-color:rgba(241,237,228,.18)}
body.console .btn.ghost{color:#B9C6BF;border-color:rgba(241,237,228,.2)}
body.console .etq{background:rgba(241,237,228,.08);color:#B9C6BF;border-color:rgba(241,237,228,.14)}
body.console .jauge{background:rgba(241,237,228,.15)}
body.console .histo i.vide{background:rgba(241,237,228,.14)}
body.console .total{border-top-color:rgba(241,237,228,.2)}

/* ---------- divers ---------- */
.separe{display:flex;align-items:center;gap:12px;margin:22px 0 12px}
.separe::before,.separe::after{content:"";flex:1;height:1px;background:var(--trait)}
.separe span{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-3)}
.pouls{animation:pouls 1.4s ease-in-out infinite}
@keyframes pouls{0%,100%{opacity:1}50%{opacity:.45}}
.charge{display:flex;align-items:center;justify-content:center;gap:9px;padding:30px;color:var(--texte-3);font-size:13.5px}
.pied{margin-top:34px;padding-top:20px;border-top:1px solid var(--trait);font-size:12.5px;color:var(--texte-3);line-height:1.6}
body.console .pied{border-top-color:rgba(241,237,228,.12)}
@media (max-width:620px){
  .barre-in{padding:9px 14px;gap:10px}
  .ruban a{padding:6px 9px;font-size:12px}
  .page{padding:16px 14px 130px}
  .titre{font-size:22px}
  .offre .gain{font-size:44px}
  .g3{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* nom de l'application dans la barre (chaque espace est indépendant) */
.espace-nom{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid var(--trait-fort);color:var(--texte-2)}
.espace-nom[data-r="client"]{background:var(--safran-pale);border-color:#F3DCA8;color:var(--safran-fonce)}
.espace-nom[data-r="resto"]{background:var(--terre-pale);border-color:#F0CFC2;color:var(--terre)}
.espace-nom[data-r="livreur"]{background:var(--vert-pale);border-color:#BEE3CE;color:var(--vert)}
body.console .espace-nom{color:var(--safran);border-color:rgba(245,179,31,.4);background:transparent}
.barre .sortie{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--texte-2);padding:7px 12px;border-radius:999px;border:1px solid var(--trait-fort);background:var(--blanc)}
body.console .barre .sortie{background:transparent;color:inherit;border-color:rgba(241,237,228,.25)}
.barre .sortie + .vivant{margin-left:10px}

/* ===================== suivi en direct (client) ===================== */
.sv{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;align-items:start}
.sv-g,.sv-d{display:flex;flex-direction:column;gap:14px;min-width:0}
.sv-tete{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-l);padding:20px 20px 18px;box-shadow:var(--ombre)}
.sv-tete.fini{background:var(--vert-pale);border-color:#BEE3CE}
.sv-tete.echec{background:var(--err-bg);border-color:#F0C8BF}
.sv-direct{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--vert)}
.sv-direct i{width:7px;height:7px;border-radius:50%;background:var(--vert);animation:svp 1.6s ease-in-out infinite}
.sv-tete.fini .sv-direct,.sv-tete.echec .sv-direct{display:none}
@keyframes svp{50%{opacity:.25}}
.sv-eta{margin-top:12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.sv-k{width:100%;font-size:12.5px;color:var(--texte-3)}
.sv-eta b{font-family:var(--f-disp);font-size:clamp(34px,6vw,46px);font-weight:800;letter-spacing:-.045em;line-height:1}
.sv-min{font-family:var(--f-mono);font-size:13px;font-weight:600;color:var(--vert);background:var(--vert-pale);border-radius:999px;padding:4px 10px}
.sv-titre{font-family:var(--f-disp);font-size:clamp(20px,3vw,24px);font-weight:800;letter-spacing:-.03em;margin:14px 0 4px;line-height:1.15}
.sv-sous{margin:0;color:var(--texte-2);font-size:14px;line-height:1.45}
.sv-barre{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:18px}
.sv-seg i{display:block;height:6px;border-radius:9px;background:var(--trait);overflow:hidden;position:relative}
.sv-seg.ok i{background:var(--vert)}
.sv-seg.encours i::after{content:"";position:absolute;inset:0;width:45%;border-radius:9px;background:var(--vert);animation:svb 1.8s ease-in-out infinite}
@keyframes svb{0%{transform:translateX(-100%)}100%{transform:translateX(230%)}}
.sv-seg span{display:block;font-size:11.5px;color:var(--texte-3);margin-top:7px;line-height:1.2}
.sv-seg.ok span,.sv-seg.encours span{color:var(--texte);font-weight:600}
.sv-plan{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--trait);background:var(--blanc)}
.sv-plan>svg{display:block;width:100%;aspect-ratio:16/10;min-height:190px;background:#ECE6D8}
.sv-legende{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;font-size:12.5px;font-weight:600;border-top:1px solid var(--trait)}
.sv-legende span{display:inline-flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-legende i{width:9px;height:9px;border-radius:50%;flex:none}
.sv-frais{display:flex;justify-content:space-between;gap:10px;padding:9px 0 0;font-size:13px;color:var(--texte-2)}
.sv-plan svg g{transition:transform 1s linear}
.sv-lieu{position:absolute;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.95);border-radius:999px;padding:6px 11px;font-size:12px;font-weight:600;box-shadow:0 6px 16px -10px rgba(14,30,23,.5);max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-lieu i{width:9px;height:9px;border-radius:50%;flex:none}
.sv-liv{display:flex;align-items:center;gap:12px;background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-l);padding:13px 14px}
.sv-liv b{display:block;font-size:15px}
.sv-liv .grow span{display:block;font-size:12.5px;color:var(--texte-3);margin-top:2px}
.sv-av{width:44px;height:44px;border-radius:50%;background:var(--vert);color:#fff;display:grid;place-items:center;font-family:var(--f-disp);font-weight:800;font-size:18px;flex:none}
.sv-liv.attente .sv-av{background:var(--papier);color:var(--texte-2)}
.sv-appel{width:42px;height:42px;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;flex:none}
.sv-note{font-size:11.5px;color:var(--texte-3);text-align:right;line-height:1.3}
.sv-pts{display:flex;gap:4px}
.sv-pts i{width:6px;height:6px;border-radius:50%;background:var(--texte-3);animation:svp 1.2s infinite}
.sv-pts i:nth-child(2){animation-delay:.2s}.sv-pts i:nth-child(3){animation-delay:.4s}
.sv-code{display:flex;align-items:center;gap:14px;justify-content:space-between;background:var(--safran-pale);border:1.5px solid var(--safran);border-radius:var(--r-l);padding:14px 16px}
.sv-code b{display:block;font-size:14.5px}
.sv-code span{display:block;font-size:12.5px;color:var(--texte-2);margin-top:3px;line-height:1.4;max-width:30ch}
.sv-chiffres{display:flex;gap:5px;flex:none}
.sv-chiffres i{width:34px;height:42px;border-radius:9px;background:var(--blanc);display:grid;place-items:center;font-family:var(--f-mono);font-style:normal;font-weight:700;font-size:20px;color:var(--encre)}
.sv-carte{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-l);padding:4px 16px 8px}
.sv-ct{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 0 8px;border-bottom:1px solid var(--trait)}
.sv-ct b{font-family:var(--f-disp);font-size:16px;letter-spacing:-.02em}
.sv-ct span{font-size:12px;color:var(--texte-3)}
.sv-art{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px dashed var(--trait);font-size:13.5px}
.sv-art .grow b{display:block;font-size:13.5px}
.sv-art .grow span{display:block;font-size:12px}
.sv-tot{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-top:10px;border-top:1px solid var(--trait);padding:12px 0 6px;font-size:13px;color:var(--texte-2)}
.sv-tot b{font-size:17px;color:var(--texte)}
.sv-info{display:flex;gap:10px;align-items:flex-start;padding:10px 0;font-size:13.5px;color:var(--texte-2);border-bottom:1px dashed var(--trait)}
.sv-info:last-child{border:0}
.sv-info .ic{color:var(--safran-fonce);flex:none;margin-top:1px}
.sv-fil{list-style:none;margin:0;padding:8px 0 4px;display:flex;flex-direction:column}
.sv-fil li{display:grid;grid-template-columns:46px 1fr;gap:8px;padding:7px 0;font-size:13px;color:var(--texte-3);position:relative}
.sv-fil li.dernier{color:var(--texte);font-weight:600}
.sv-fil .h{font-size:12px}
.sv-vide{max-width:520px;margin:30px auto;text-align:center}
.sv-vide>.ic{width:40px;height:40px;color:var(--safran-fonce)}
@media (max-width:860px){.sv{grid-template-columns:1fr}}
@media (max-width:420px){.sv-code{flex-direction:column;align-items:flex-start}.sv-chiffres i{width:40px}}
@media (prefers-reduced-motion:reduce){.sv-seg.encours i::after,.sv-direct i,.sv-pts i{animation:none}}

/* paiement d'avance */
.ops{display:flex;flex-direction:column;gap:8px}
.paie-montant{font-size:34px;font-weight:700;letter-spacing:-.02em;margin:16px 0 8px}
.paie-temps{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--texte-2)}
.paie-temps b{font-family:var(--f-mono)}
.paie-etat{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;font-weight:600;color:var(--texte-2)}