/* Lot BEN5 (24/10, benchmark SpiderVO lot 5) : modifier un dossier ou un bon de commande signé.
   Le panneau « Modifier le bon de commande » glisse sur le côté, la fiche reste visible derrière
   (voile léger, comme « Gestion de document » de SpiderVO) ; versions datées ; facture → avoir +
   nouvelle facture « · dans la V1 » ; conditions de la vente (« Manque » quand la V1 ne range pas).
   Jetons du recadrage (--ap-…) seulement. Au téléphone : le panneau prend tout l'écran. */

/* ── Le panneau latéral ─────────────────────────────────────────────────────────────── */
/* Monté sous <body> (Portal) dans un `.or` vide : seulement les jetons et règles de l'écran des offres. */
.or.ds-portail{padding:0;margin:0}
.or-voile2.ds-voile{background:hsl(216 50% 10%/.18);backdrop-filter:none}
.or-boite.ds-panneau{left:auto;right:0;top:0;bottom:0;width:min(460px,100vw);max-height:none;height:100%;
  padding:var(--ap-e4) var(--ap-e4) 0;border-radius:var(--ap-r-l) 0 0 var(--ap-r-l);transform:none;
  display:flex;flex-direction:column;gap:var(--ap-e2);overflow:auto;animation:ds-glisse .22s ease-out both}
@keyframes ds-glisse{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.ds-panneau .or-bh{position:sticky;top:calc(-1 * var(--ap-e4));z-index:1;margin:calc(-1 * var(--ap-e4)) calc(-1 * var(--ap-e4)) 0;
  padding:var(--ap-e4) var(--ap-e4) var(--ap-e2);background:hsl(var(--carte));border-bottom:1px solid hsl(var(--trait))}
.ds-panneau .or-bh h2{font-size:var(--ap-t-xl)}
.ds-garde{margin:0;font-size:var(--ap-t-s);line-height:var(--ap-li);color:hsl(var(--doux))}
.ds-s{display:flex;flex-direction:column}
.ds-s h3{margin:var(--ap-e2) 0 0;font-size:var(--ap-t-xs);font-weight:var(--ap-g-titre);letter-spacing:.04em;text-transform:uppercase;color:hsl(var(--doux))}
.ds-panneau .or-memo{margin-top:var(--ap-e2)}
.ds-voiture{margin-top:var(--ap-e2);justify-content:center}
.ds-aide{margin:var(--ap-e1) 0 0;font-size:var(--ap-t-xs);line-height:var(--ap-li);color:hsl(var(--doux))}

/* Conditions de la vente : un « interrupteur » lu, jamais un faux geste. */
.ds-c{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--ap-e2);align-items:center;padding:var(--ap-e2) 0;border-top:1px solid hsl(var(--trait));font-size:var(--ap-t-m)}
.ds-c>span{font-weight:var(--ap-g-titre)}
.ds-c>small{grid-column:1/-1;font-size:var(--ap-t-xs);line-height:var(--ap-li);color:hsl(var(--doux))}
.ds-inter{padding:2px var(--ap-e2);border-radius:999px;font-size:var(--ap-t-xs);font-weight:var(--ap-g-titre)}
.ds-inter.on{background:hsl(var(--vert-doux));color:hsl(var(--vert))}
.ds-inter.manque{background:hsl(var(--gris-doux));color:hsl(var(--doux));box-shadow:0 0 0 1px hsl(var(--trait)) inset}

/* Le pied du panneau reste sous le pouce : net à payer avant → après, puis le geste. */
.ds-pied{position:sticky;bottom:0;margin:var(--ap-e2) calc(-1 * var(--ap-e4)) 0;padding:var(--ap-e2) var(--ap-e4) var(--ap-e4);
  background:hsl(var(--carte));border-top:1px solid hsl(var(--trait));box-shadow:0 -1px 0 hsl(var(--trait))}
.ds-pied .or-bl.gros{border-top:0}
.ds-pied .or-bb{margin-top:var(--ap-e2)}

/* ── Facture : avoir + nouvelle facture, proposés d'office (dans la V1) ─────────────── */
.ds-facture{margin:0 0 var(--ap-e2)}
.ds-facture .or-alerte{margin:0 0 var(--ap-e2);font-size:var(--ap-t-s)}
.ds-etapes{display:flex;flex-direction:column;gap:var(--ap-e1);margin:0;padding:0;list-style:none;counter-reset:ds}
.ds-etapes li{display:flex;align-items:center;gap:var(--ap-e2);font-size:var(--ap-t-s);counter-increment:ds}
.ds-etapes li::before{content:counter(ds);flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:var(--ap-t-xs);font-weight:var(--ap-g-titre);background:hsl(var(--gris-doux));color:hsl(var(--doux))}
.ds-etapes li.ici::before{background:hsl(var(--orange-doux));color:hsl(var(--orange))}
.ds-etapes li.fait::before{background:hsl(var(--vert-doux));color:hsl(var(--vert))}
.ds-etapes .or-btn{flex:1;justify-content:flex-start}
.ds-fait{display:inline-flex;align-items:center;gap:var(--ap-e1);color:hsl(var(--vert));font-weight:var(--ap-g-titre)}

/* Signature bloquée (réglage du garage) : dit sous les gestes du bon de commande. */
.ds-bloque{margin:var(--ap-e2) 0 0;font-size:var(--ap-t-s)}

@media (max-width:600px){
  .or-boite.ds-panneau{left:0;right:0;width:auto;border-radius:0;padding-bottom:0}
  .ds-pied{padding-bottom:calc(var(--ap-e4) + env(safe-area-inset-bottom))}
}