/* ======================= Caisse de vente (POS) plein écran =======================
   Chargé après densite.css. Disposition de MonPOS (« /terminal ») : barre anthracite en haut, à gauche recherche + catégories
   en pastilles + grille des produits (photo, nom, réf., prix, reste), à droite le panier (≈ 30 %) avec client / moto / réf. en haut
   et paiement + « Encaisser » toujours visibles en bas. Doit tenir dans 1280 × 529 px (portable du garage à 150 %). */

/* une seule colonne qui ne dépasse jamais l'écran (sinon la barre du haut élargit tout au téléphone) */
.pos{grid-template-columns:minmax(0,1fr)}
/* ---------- barre du haut ---------- */
.pos .pos-top{flex-wrap:nowrap;gap:6px;min-height:46px;padding-top:calc(6px + env(safe-area-inset-top,0px));padding-bottom:6px}
.pos .pos-top img{height:30px;width:30px}
.pos-titre{font-size:var(--t-carte);font-weight:var(--g-fort);color:#f5ecd9;letter-spacing:.01em;white-space:nowrap}
.pos .tb{padding:0 11px;min-height:32px;font-size:var(--t-petit);line-height:1}
.pos .tb[disabled]{opacity:.45;cursor:not-allowed}
.pos .tb.brun{background:#5a3a1c;border-color:#5a3a1c;color:#f5ecd9}
.pos .tb.brun:hover:not([disabled]){background:#6e4722}
.pos .tb.bleu{background:#1f4a63;border-color:#1f4a63;color:#eef6fb}
.pos .tb.bleu:hover{background:#265a78}
.pos .tb.cu:hover{background:var(--copper-hi)}
.pos-date input{all:unset;cursor:pointer;width:104px;font-family:var(--f-num);color-scheme:dark}
/* client (comme MonPOS : liste « Sur place ▾ » en haut à gauche) ; cuivre quand un client est choisi */
.pos .pos-client{display:inline-flex;align-items:center;gap:7px;height:32px;box-sizing:border-box;max-width:none;width:270px;flex:0 1 270px;min-width:150px;padding:0 10px;border:1px solid #ffffff26;background:#ffffff0f;color:#f5ecd9;border-radius:var(--r-btn);font-size:var(--t-texte);font-weight:var(--g-fort);cursor:pointer;margin-left:6px}
.pos .pos-client:hover{background:#ffffff1f}
.pos .pos-client:focus-within{border-color:var(--copper)}
.pos .pos-client.choisi{background:var(--copper);border-color:var(--copper);color:#fff}
.pos .pos-client svg{width:16px;height:16px;flex:none}
.pos .pos-client select{all:unset;flex:1 1 0;width:0;min-width:0;max-width:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f5ecd9' stroke-width='1.6'/%3E%3C/svg%3E") right center no-repeat}
.pos .pos-client select option{color:var(--ink);background:var(--panel);font-weight:var(--g-normal)}
/* menu « ⋯ » (clôturer le poste) aux couleurs de la barre */
.pos .pos-top .menu-act>summary{min-height:32px;width:34px;border:1px solid #ffffff26;background:#ffffff0f;color:#f5ecd9;border-radius:var(--r-btn)}
.pos .pos-top .menu-act>summary:hover,.pos .pos-top .menu-act[open]>summary{background:#ffffff1f;border-color:#ffffff40}

/* ---------- corps : produits à gauche, panier à droite ---------- */
.pos .pos-body{grid-template-columns:minmax(0,1fr) 400px}
.pos .pos-grid{display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:10px 10px 0 max(10px,env(safe-area-inset-left,0px))}
.pos-outils{display:flex;gap:6px;align-items:center;flex:none}
.pos .pos-q{flex:1 1 auto;min-width:0;height:36px;box-sizing:border-box;border:1.5px solid var(--copper);border-radius:var(--r-btn);padding:0 12px;font-size:var(--t-texte);background:var(--panel);color:var(--ink);text-overflow:ellipsis}
.pos .pos-q:focus{outline:none;border-width:2px;box-shadow:0 0 0 3px var(--copper-soft)}
.pos-libres{display:flex;gap:6px;flex:none}
.pos-libres .btn{min-height:36px;padding:0 10px;font-size:var(--t-petit);white-space:nowrap}
.pos-libres .btn svg{color:var(--copper)}
/* catégories en pastilles (une ligne, défile de côté si elles sont nombreuses) */
.pos-cats{display:flex;flex-wrap:wrap;gap:5px;padding:8px 0;flex:none;max-height:72px;overflow-y:auto;scrollbar-width:thin}
.pil{flex:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:0 10px;height:26px;font-size:12px;font-weight:var(--g-fort);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.02em}
.pil span{font-family:var(--f-num);font-weight:var(--g-normal);color:var(--muted);text-transform:none}
.pil:hover{border-color:var(--copper)}
.pil.on{background:var(--barre);border-color:var(--barre);color:#f5ecd9}
.pil.on span{color:#c9b89a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pil.on{background:var(--ink);border-color:var(--ink);color:var(--panel)}:root:not([data-theme="light"]) .pil.on span{color:var(--panel2)}}
:root[data-theme="dark"] .pil.on{background:var(--ink);border-color:var(--ink);color:var(--panel)}
:root[data-theme="dark"] .pil.on span{color:var(--muted)}
.pos-prods{flex:1 1 auto;min-height:0;overflow:auto;padding-bottom:10px}
.pos-prods>.vide{padding:28px 10px}

/* ---------- tuiles produits (comme MonPOS : photo, nom, réf. mono, prix gras à gauche, « reste n » à droite) ---------- */
.pos .prods{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pos .prod{border-radius:6px;transition:border-color .12s ease,box-shadow .12s ease}
.pos .prod:hover{transform:none;border-color:var(--copper);box-shadow:0 0 0 1px var(--copper)}
.pos .prod .ph{aspect-ratio:auto;height:96px;background:#fff;border-bottom:1px solid var(--line)}
.pos .prod .ph svg{width:34px;height:34px;opacity:.35}
.pos .prod .ph .photo-produit{padding:4px}
.pos .prod .ph .lp-chip{top:6px;right:6px}
.pos .prod .in{padding:6px 8px 7px;gap:1px}
.pos .prod .nm{font-size:var(--t-petit);font-weight:500;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.pos .prod .rf{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos .prod .pr{padding-top:4px;align-items:baseline;flex-wrap:wrap;column-gap:6px;row-gap:0}
.pos .prod .pr .num{font-size:var(--t-texte);font-weight:700}
.pos .prod .pr .lp-barre{font-size:var(--t-etiq);font-weight:var(--g-normal);color:var(--muted)}
.pos .stk{font-size:11px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pos .prod .ph{background:#f4f4f2}}
:root[data-theme="dark"] .pos .prod .ph{background:#f4f4f2}

/* ---------- panier ---------- */
.pos .cart-h{padding:8px 12px;gap:6px}
.pos .cart-titre h2{font-size:var(--t-carte);font-weight:var(--g-fort)}
.cart-ligne{display:flex;gap:6px;min-width:0}
.cart-champ{display:flex;align-items:center;gap:6px;flex:1 1 0;min-width:0;height:32px;border:1px solid var(--line);border-radius:var(--r-btn);padding:0 0 0 8px;background:var(--panel);color:var(--muted);box-sizing:border-box}
.cart-champ:focus-within{border-color:var(--copper);box-shadow:0 0 0 2px var(--copper-soft)}
.cart-champ.choisi{border-color:var(--copper);background:var(--copper-soft);color:var(--copper)}
.cart-champ svg{width:15px;height:15px;flex:none}
.cart-champ>span{font-size:var(--t-etiq);font-weight:var(--g-fort);text-transform:uppercase;letter-spacing:.04em;flex:none}
.pos .cart-champ .inp{border:0!important;background:transparent!important;box-shadow:none!important;min-height:0;height:30px;padding:0 8px 0 0;flex:1 1 0;width:0;min-width:0;font-size:var(--t-texte);color:var(--ink);text-overflow:ellipsis;outline:none}
.cart-champ.choisi .inp{font-weight:var(--g-fort)}
.pos .cart-titre{align-items:center;min-height:22px}
.pos .cart-titre>.xs{flex:none}
.cart-km{flex:0 0 112px}
.pos .cart-titre .cart-info{margin-left:auto;justify-content:flex-end}
.cart-info .dette{flex:none}
.cart-info .lp{min-width:0}
.pos .line .ed .tags{margin-left:auto;min-width:0;text-align:right;overflow:hidden}
.pos .line .ed .tags>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;font-size:11px}
/* « marché · achat … » : touchable pour corriger le prix d'achat sans retirer la ligne */
.pos .line .ed .tags>.marche.modif{display:block;max-width:100%;margin-left:auto;padding:1px 5px;border:1px dashed currentColor;border-radius:6px;background:none;font:inherit;font-size:11px;line-height:1.2;color:var(--warn);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.pos .line .ed .tags>.marche.modif:hover{background:color-mix(in srgb,var(--warn) 12%,transparent)}
.pos .line .ed{gap:5px}
.pos .prod .pr .lp-barre{display:none} /* prix normal : visible au survol (title) et dans le panier (« prix client · −16 % ») */
.cart-ref.plein{flex:1 1 0}
.cart-km{flex:0 0 116px}
.cart-info{display:flex;justify-content:space-between;gap:8px;font-size:var(--t-petit);color:var(--muted);min-width:0}
.cart-info>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;gap:4px}
.cart-info .lp{color:var(--copper);font-weight:var(--g-fort)}
.cart-info .lp svg{width:13px;height:13px}
.cart-info .dette b{color:var(--bad)}
.pos .lines{padding:0 12px}
.cart-vide{color:var(--muted);text-align:center;padding:28px 10px;font-size:var(--t-texte)}
.pos .line{padding:6px 0;border-bottom:1px solid var(--line);gap:3px 8px}
.pos .line .nm{font-size:var(--t-texte);font-weight:500}
.pos .line>b.num{font-size:var(--t-texte);font-weight:700}
.pos .line .qty button{width:24px;height:24px}
.pos .line input{width:84px;height:24px;text-align:right;font-size:var(--t-petit)}
.pos .line input::placeholder{color:var(--bad);opacity:.8}

/* ---------- pied : paiement, sous-total, Encaisser (toujours visible) ---------- */
.pos .cart-f{padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));gap:6px}
.pos .pays{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr) minmax(0,1.4fr) minmax(0,.9fr);gap:5px}
.pos .pay{flex-direction:row;justify-content:center;gap:5px;height:34px;padding:0 3px;font-size:var(--t-petit);border-radius:6px;box-sizing:border-box}
.pos .pay img{width:18px;height:18px;border-radius:4px;flex:none}
.pos .pay span{overflow:hidden;text-overflow:ellipsis}
.pos .pay.on{border:2px solid var(--copper);background:var(--copper-soft);color:var(--ink);padding:0 3px}
.pos .pay.credit{grid-column:1/-1;height:30px;border-style:dashed;color:var(--muted)}
.pos .pay.credit svg{width:15px;height:15px}
.pos .pay.credit.on{border-style:solid;color:var(--ink)}
.pos .pay.credit[disabled] span{font-weight:var(--g-normal)}
.pos .recu .inp{min-height:30px;height:30px;padding:0 8px;text-align:right}
.pos .recu .reste-cr{flex:none;font-size:var(--t-petit);color:var(--warn);white-space:nowrap}
.pos .recu .reste-cr b{color:var(--warn)}
.pos .cart-f .due{padding:4px 9px}
.pos .tot{font-size:var(--t-texte);min-height:26px}
.pos .tot b.num{font-weight:700}
.pos .remise .inp{min-height:26px;height:26px}
.pos .cart-btns{grid-template-columns:auto auto minmax(0,1fr);gap:6px;align-items:stretch}
.pos .cart-btns .btn{min-height:48px;width:88px;padding:2px 4px;font-size:11.5px;flex-direction:column;justify-content:center;gap:3px;line-height:1.15;text-align:center;white-space:nowrap}
.pos .cart-btns .btn.pf{color:var(--copper);border-color:color-mix(in srgb,var(--copper) 40%,var(--line))}
.pos .cart-btns .btn.pf:hover:not([disabled]){background:var(--copper-soft)}
/* Encaisser : couleur principale (cuivre), total en grand comme le « Total » de MonPOS */
.pos .pay-go{background:var(--copper);color:var(--copper-ink);min-height:48px;padding:3px 10px;flex-direction:column;justify-content:center;flex-wrap:nowrap;gap:0;border-radius:var(--r-btn);line-height:1.15}
.pos .pay-go:hover:not([disabled]){background:var(--copper-hi)}
.pos .pay-go .lib{font-size:11px;font-weight:var(--g-fort);text-transform:uppercase;letter-spacing:.08em;opacity:.92}
.pos .pay-go .num{font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
.pos .pay-go[disabled]{background:var(--panel2);color:var(--muted);border:1px solid var(--line)}

/* petites fenêtres de la caisse : le pied suit la marge du corps (16 px) — sinon 2 px de trop et une barre de défilement de côté */
form:is([data-form=piece],[data-form=service],[data-form=ouvrirPoste],[data-form=fermerPoste],[data-form=mettreAttente])>.sheet-f{margin:0 -16px -16px!important}

/* la page derrière la caisse ne défile pas (pas de seconde barre de défilement à droite) */
html:has(#pos:not([hidden])){overflow:hidden;scrollbar-gutter:auto}

/* ---------- écrans moyens (tablette en paysage, ~1024 px) ---------- */
@media (max-width:1100px){
  .pos .pos-body{grid-template-columns:minmax(0,1fr) 360px}
  .pos-libres .btn span{display:none}
  .pos-libres .btn{width:38px;padding:0;justify-content:center}
  .pos .prods{grid-template-columns:repeat(auto-fill,minmax(136px,1fr))}
  /* moyens de paiement : logo au-dessus du nom pour que « Orange Money » tienne en entier */
  .pos .pays{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pos .pay{flex-direction:column;height:44px;gap:2px;font-size:11px}
  .pos .pay.credit{flex-direction:row;height:30px;font-size:var(--t-petit)}
  .pos .cart-btns .btn{width:78px}
  .pos .pay-go .num{font-size:1.1rem}
}
/* ---------- tablette en portrait / téléphone : produits puis panier, le pied reste collé en bas ---------- */
@media (max-width:860px){
  .pos .pos-top{flex-wrap:nowrap}
  .pos .pos-top .sp{display:none}
  .pos .pos-client{flex:1 1 auto;width:auto;min-width:0;margin-left:0}
  .pos .pos-body{grid-template-columns:minmax(0,1fr);grid-template-rows:max-content max-content}
  .pos .pos-grid,.pos .cart{min-height:auto}
  .pos .pos-grid{display:block;overflow:visible;padding:8px}
  .pos-outils{margin-bottom:0}
  .pos .pos-q{order:0}
  .pos-prods{overflow:visible;max-height:none;height:auto}
  .pos-cats{max-height:none;overflow:visible}
  .pos-libres .btn span{display:inline}
  .pos-libres .btn{width:auto;padding:0 10px}
  .pos-outils{flex-wrap:wrap}
  .pos .pos-q{flex:1 1 100%}
  .pos-libres{flex:1 1 100%}
  .pos-libres .btn{flex:1;justify-content:center}
  .pos .pay-go .num{font-size:1.15rem}
}
@media (max-width:480px){
  .pos .prods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pos .pos-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .pos-libres .btn{font-size:var(--t-etiq);padding:0 6px}
  .pos .pays{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pos .cart-btns{grid-template-columns:1fr 1fr}
  .pos .cart-btns .pay-go{grid-column:1/-1;order:-1}
  .pos .cart-btns .btn{width:auto;min-height:38px;flex-direction:row}
  .cart-ligne{flex-wrap:wrap}
  .cart-champ{flex:1 1 100%}
  .cart-km{flex:1 1 100%}
}
/* Cadenas « Prix d'achat » : ouvert = cuivre ; prix d'achat discret sous le nom dans les tuiles */
.pos-top .pos-cout.on{background:var(--copper);border-color:var(--copper);color:var(--copper-ink)}
.prod .pa{display:block;font-size:var(--t-petit);color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ======================= Téléphones et Galaxy Z Fold =======================
   Le PC (> 860 px) n'est pas touché. Tout est pensé pour le pouce : boutons ≥ 38 px, pied du panier compact. */
/* Z Fold ouvert / petite tablette (601–860 px) : produits à gauche, panier à droite comme sur le PC */
@media (min-width:601px) and (max-width:860px){
  .pos .pos-body{grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:minmax(0,1fr);overflow:hidden;align-content:stretch}
  .pos .pos-grid{display:flex;flex-direction:column;overflow:hidden;min-height:0;padding:8px 8px 0 max(8px,env(safe-area-inset-left,0px))}
  .pos .pos-prods{overflow:auto;min-height:0;flex:1 1 auto}
  .pos .pos-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .pos .cart{min-height:0;border-top:0;border-left:1px solid var(--line)}
  .pos .lines{overflow:auto;flex:1}
  .pos .cart-f{position:static;box-shadow:none}
  .pos .prods{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
  .pos-libres .btn span{display:none}
  .pos-libres{flex:none}
  .pos-libres .btn{width:42px;padding:0;flex:none}
  .pos .pos-q{flex:1 1 0}
  .pos-outils{flex-wrap:nowrap}
}
/* Toutes les tailles de téléphone (et le Fold) : cibles tactiles */
@media (max-width:860px){
  .pos .pos-top{min-height:52px}
  .pos .tb,.pos .pos-client,.pos .pos-top .menu-act>summary{min-height:40px;height:40px}
  .pos .tb{padding:0 10px}
  .pos .pos-top .menu-act>summary{width:40px}
  .pos .pos-q{height:42px;font-size:16px} /* 16 px : iPhone ne zoome pas la page en touchant la recherche */
  .pos-libres .btn{min-height:40px}
  .pil{height:34px;padding:0 13px}
  .pos .line{padding:8px 0;grid-template-columns:minmax(0,1fr) auto 36px}
  .pos .line .qty button{width:36px;height:36px;font-size:17px}
  .pos .line .qty span{min-width:30px;font-size:var(--t-texte)}
  .pos .line input{height:36px;width:96px;font-size:16px}
  .pos .line .rm{width:36px;height:36px;font-size:20px}
  .pos .cart-champ{height:40px}
  .pos .cart-champ .inp{height:38px;font-size:16px}
  .pos .recu .inp,.pos .remise .inp{height:38px;min-height:38px;font-size:16px}
}
/* Téléphone et Fold : pied du panier compact pour voir les articles au-dessus */
@media (max-width:860px){
  /* moyens de paiement : les 4 sur une ligne, logo au-dessus du nom (le nom passe sur 2 lignes si besoin) */
  .pos .pays{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .pos .pay{flex-direction:column;height:auto;min-height:46px;gap:2px;padding:3px 2px;font-size:11px;line-height:1.1}
  .pos .pay span{white-space:normal;text-align:center}
  .pos .pay.on{padding:2px 1px}
  .pos .pay.credit{flex-direction:row;min-height:34px;height:34px;font-size:var(--t-petit)}
  .pos .pay.credit span{white-space:nowrap}
  /* De côté et Proforma à gauche, Encaisser à droite : une seule rangée */
  .pos .cart-btns{grid-template-columns:62px 62px minmax(0,1fr)}
  .pos .cart-btns .pay-go{grid-column:auto;order:0}
  .pos .cart-btns .btn{width:auto;min-height:50px;flex-direction:column;white-space:normal;font-size:11px;line-height:1.1;padding:2px 3px;gap:2px}
  .pos .pay-go{min-height:50px}
  .pos .pay-go .num{font-size:1.15rem}
  .pos .cart-f{gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}
  .pos .lines{padding:0 10px}
  .pos .cart-h{padding:8px 10px}
  .pos .tot{flex-wrap:wrap;row-gap:4px}
  .pos .tot>span{white-space:nowrap}
  .pos .remise .inp{width:96px}
}
/* Téléphone en portrait (≤ 600 px) : barre du haut en icônes pour laisser la place au client */
@media (max-width:600px){
  .pos .pos-top{gap:5px;padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
  .pos .tb{padding:0;width:40px;justify-content:center;flex:none}
  .pos .tb.bleu{width:auto;padding:0 9px}
  .pos .pos-client{min-width:0;padding:0 8px}
  .pos .prod .ph{height:78px}
  .pos .prod .ph svg{width:28px;height:28px}
  .pos .pos-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:8px 0}
}
/* Z Fold fermé, petits téléphones : le nom du client avant tout */
@media (max-width:400px){
  .pos .pos-top{gap:4px}
  .pos .pos-client>svg{display:none}
  .pos .tb.bleu{padding:0 7px;gap:3px}
  .pos .tb.bleu svg{display:none}
}
/* Téléphone couché (peu de hauteur) : tout le panier défile d'un bloc, la barre du haut n'affiche que les icônes */
@media (max-height:480px) and (hover:none){
  .pos .pos-top .hide-m{display:none}
  .pos .pos-top{flex-wrap:nowrap;min-height:46px}
  .pos .pos-client{flex:1 1 auto;width:auto;min-width:0}
  .pos .tb,.pos .pos-client,.pos .pos-top .menu-act>summary{min-height:38px;height:38px}
  .pos .cart{overflow:auto}
  .pos .lines{flex:none;overflow:visible}
  .pos .cart-f{position:static}
  .pos .prod .ph{height:70px}
}

/* ======================= Ventes (liste) sur téléphone et Z Fold : une carte par vente =======================
   N° · date · total en haut, client · moto dessous, statut / reste / remise en bas ; le détail déplié passe en pleine largeur. */
@media (max-width:860px){
  #vue .vt-table,#vue .vt-table>tbody{display:block;width:100%}
  #vue .vt-table>thead{display:none}
  #vue .vt-table>tbody>tr.click{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"no da to" "cl cl cl" "st re env";align-items:center;gap:4px 10px;padding:10px 12px;border-bottom:1px solid var(--line)}
  #vue .vt-table>tbody>tr.click>td{display:block;padding:0;border:0;white-space:normal;min-width:0;background:none}
  #vue .vt-table>tbody>tr.click>td:nth-child(1){grid-area:no}
  #vue .vt-table>tbody>tr.click>td:nth-child(2){grid-area:da;color:var(--muted);font-size:var(--t-petit)}
  #vue .vt-table>tbody>tr.click>td:nth-child(3){grid-area:cl}
  #vue .vt-table>tbody>tr.click>td:nth-child(4){display:none}
  #vue .vt-table>tbody>tr.click>td:nth-child(5){grid-area:st}
  #vue .vt-table>tbody>tr.click>td:nth-child(6){grid-area:re;text-align:left;font-size:var(--t-petit)}
  #vue .vt-table>tbody>tr.click>td:nth-child(6):has(.num)::before{content:"Reste ";color:var(--muted)}
  #vue .vt-table>tbody>tr.click>td:nth-child(6)>.muted{display:none}
  #vue .vt-table>tbody>tr.click>td:nth-child(7){grid-area:to;text-align:right}
  #vue .vt-table>tbody>tr.click>td:nth-child(8){grid-area:env;text-align:right}
  #vue .vt-table>tbody>tr.click .une-ligne{white-space:normal;overflow:visible}
  #vue .vt-table>tbody>tr.detail{display:block}
  #vue .vt-table>tbody>tr.detail>td{display:block;padding:0;white-space:normal}
  #vue .vt-detail{padding:10px 12px}
  #vue .vt-detail table.mini th:nth-child(4),#vue .vt-detail table.mini td:nth-child(4){display:none} /* la remise de ligne est déjà dans le total */
  #vue .vt-detail table.mini td:first-child{width:auto}
  #vue .vt-detail table.mini td:first-child .une-ligne{white-space:normal}
  #vue .vt-bas{gap:10px}
  #vue .vt-regl{flex-basis:100%}
  #vue .vt-tot-bloc{min-width:0;flex:1 1 100%}
  #vue .vt-actions{justify-content:flex-start;gap:6px}
  #vue .vt-act{min-height:40px;padding:0 12px;border:1px solid var(--line);background:var(--panel)}
  #vue .vt-actions .btn.sm{min-height:40px;margin-left:0}
}
/* articles de la vente dépliée : désignation sur toute la largeur, puis « qté × prix » et le total */
@media (max-width:860px){
  #vue .vt-detail table.mini,#vue .vt-detail table.mini>tbody{display:block;width:100%}
  #vue .vt-detail table.mini>thead{display:none}
  #vue .vt-detail table.mini>tbody>tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"d d d" "q p t";gap:2px 6px;padding:7px 0;border-bottom:1px solid var(--line)}
  #vue .vt-detail table.mini>tbody>tr>td{display:block;padding:0;border:0;max-width:none;width:auto;white-space:normal;background:transparent!important}
  #vue .vt-detail table.mini>tbody>tr>td:nth-child(1){grid-area:d}
  #vue .vt-detail table.mini>tbody>tr>td:nth-child(2){grid-area:q;text-align:left;color:var(--muted)}
  #vue .vt-detail table.mini>tbody>tr>td:nth-child(2)::after{content:" ×"}
  #vue .vt-detail table.mini>tbody>tr>td:nth-child(3){grid-area:p;text-align:left;color:var(--muted)}
  #vue .vt-detail table.mini>tbody>tr>td:nth-child(5){grid-area:t}
  /* ligne « Remise sur le total » */
  #vue .vt-detail table.mini>tbody>tr:has(td[colspan]){grid-template-areas:"d t"}
  #vue .vt-detail table.mini>tbody>tr>td[colspan]{grid-area:d;text-align:left}
  #vue .vt-detail table.mini>tbody>tr:has(td[colspan])>td:nth-child(2){grid-area:t;color:inherit}
  #vue .vt-detail table.mini>tbody>tr:has(td[colspan])>td:nth-child(2)::after{content:none}
}
@media (min-width:601px) and (max-width:860px){.pos .remise .inp{width:80px}.pos .tot>span{font-size:var(--t-petit)}}
/* Petit écran (iPhone SE…) : le bouton « Crédit » grisé (aucun client choisi) laisse sa place aux articles */
@media (max-width:600px) and (max-height:700px){.pos .pay.credit[disabled]{display:none}}
/* Bouton « Clôturer » toujours visible en haut à gauche ; rouge s'il reste ouvert d'un jour passé */
.pos .tb.cloture{background:var(--copper);border-color:var(--copper);color:var(--copper-ink)}
.pos .tb.cloture:hover{background:var(--copper-hi)}
.pos .tb.cloture.oubli{background:#b3261e;border-color:#b3261e;color:#fff}
@media (max-width:600px){.pos .tb.cloture{width:auto;padding:0 9px;gap:5px}}
@media (max-width:400px){.pos .tb.cloture{padding:0 7px}.pos .tb.cloture svg{display:none}}
/* Client de passage (pas de fiche) : nom, moto, téléphone WhatsApp, imprimés sur la facture */
.cart-passage{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:6px}
.cart-passage .inp{min-height:30px;height:30px;padding:0 8px;font-size:var(--t-petit)}
.cart-passage [data-pos=pnom]{grid-column:1/-1}
.pos-simple .cart-passage .inp{min-height:40px;height:40px;font-size:15px}