:root{
  --papier:#F6F1E4; --papier-2:#EFE8D6; --encre:#1F1810; --encre-2:#5A4B36;
  --laiton:#A8874C; --laiton-fonce:#8A6D34; --laiton-clair:#D8BE86;
  --oxblood:#7C2A20; --vert:#3B6B45; --ligne:rgba(31,24,16,.16);
  --f-titre:'Fraunces', Georgia, serif; --f-corps:'Jost', system-ui, sans-serif;
}
*{ box-sizing:border-box; }
body{
  margin:0; font-family:var(--f-corps); font-weight:300; color:var(--encre);
  background:var(--papier); font-size:16px; -webkit-text-size-adjust:100%;
}
h1,h2{ font-family:var(--f-titre); font-weight:600; margin:0; }

/* ── écran de clé ── */
.ecran{ min-height:100dvh; display:grid; place-items:center; padding:1.5rem; }
.carte-cle{
  width:min(24rem,100%); background:var(--papier-2); border:1px solid var(--laiton);
  padding:2rem 1.6rem; text-align:center; display:grid; gap:.9rem; justify-items:center;
}
.carte-cle h1{ font-size:1.5rem; }
.aide{ font-size:.86rem; color:var(--encre-2); line-height:1.55; margin:0; }
input, .btn{ font-family:var(--f-corps); font-size:1rem; }
input{
  width:100%; padding:.8rem .9rem; border:1px solid var(--ligne);
  background:#FCF8ED; color:var(--encre); border-radius:0;
}
input:focus-visible{ outline:2px solid var(--laiton-fonce); outline-offset:1px; }
.btn{
  padding:.8rem 1.4rem; border:0; cursor:pointer; background:var(--encre); color:var(--papier);
  letter-spacing:.12em; text-transform:uppercase; font-size:.78rem; font-weight:600;
  min-height:44px;
}
.btn:hover{ background:var(--oxblood); }
.btn-clair{ background:transparent; color:var(--encre); border:1px solid var(--laiton); }
.btn-clair:hover{ background:rgba(168,135,76,.14); color:var(--encre); }
.erreur{ color:var(--oxblood); font-size:.86rem; margin:0; }

/* ── ossature ── */
.tete{
  position:sticky; top:0; z-index:10; background:var(--encre); color:var(--papier);
  padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom,0)); display:grid; gap:.7rem;
}
.marque{ display:flex; align-items:center; gap:.55rem; font-size:.95rem; }
.marque img{ border-radius:50%; }
.marque b{ font-family:var(--f-titre); font-weight:600; }
.marque span{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; opacity:.65; }
.onglets{ display:flex; gap:.4rem; overflow:auto; }
.onglet{
  flex:1 1 auto; background:transparent; border:1px solid rgba(216,190,134,.35);
  color:var(--papier); padding:.6rem .7rem; font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer; min-height:40px;
  display:flex; align-items:center; justify-content:center; gap:.4rem; white-space:nowrap;
}
.onglet.actif{ background:var(--laiton); border-color:var(--laiton); color:#1F1810; }
.pastille{
  background:var(--oxblood); color:#fff; border-radius:999px;
  padding:.05rem .4rem; font-size:.7rem;
}
.onglet.actif .pastille{ background:var(--encre); }
main{ padding:1rem; max-width:64rem; margin-inline:auto; }
.barre{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:.9rem; }
.barre input{ flex:1 1 12rem; }
.lien{
  background:none; border:0; color:var(--laiton-fonce); cursor:pointer;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; min-height:40px;
}
.compte{ font-size:.8rem; color:var(--encre-2); }
.vide{ text-align:center; color:var(--encre-2); padding:3rem 1rem; }

/* ── commandes ── */
.filtres{ display:flex; gap:.35rem; flex-wrap:wrap; }
.filtre{
  background:transparent; border:1px solid var(--ligne); padding:.45rem .8rem;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  font-weight:600; color:var(--encre-2); min-height:38px;
}
.filtre.actif{ border-color:var(--laiton); background:rgba(168,135,76,.16); color:var(--encre); }
.liste{ display:grid; gap:.8rem; }
.cmd{ background:var(--papier-2); border:1px solid var(--ligne); padding:1rem; }
.cmd.neuve{ border-color:var(--oxblood); box-shadow:inset 3px 0 0 var(--oxblood); }
.cmd-tete{ display:flex; justify-content:space-between; gap:.7rem; align-items:baseline; flex-wrap:wrap; }
.cmd-num{ font-family:var(--f-titre); font-weight:600; font-size:1.05rem; }
.cmd-date{ font-size:.76rem; color:var(--encre-2); }
.cmd-client{ margin:.5rem 0 .2rem; font-size:.95rem; }
.cmd-client a{ color:var(--oxblood); text-decoration:none; font-weight:500; }
.cmd-mode{ font-size:.8rem; color:var(--encre-2); }
.cmd-lignes{ list-style:none; margin:.7rem 0; padding:.7rem 0; border-block:1px dashed var(--ligne); display:grid; gap:.3rem; }
.cmd-lignes li{ display:flex; justify-content:space-between; gap:.6rem; font-size:.88rem; }
.cmd-lignes small{ color:var(--encre-2); }
.cmd-total{ text-align:right; font-family:var(--f-titre); font-weight:600; font-size:1.15rem; color:var(--laiton-fonce); }
.cmd-note{ font-size:.85rem; font-style:italic; color:var(--encre-2); margin:.4rem 0 0; }
.cmd-actions{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.8rem; }
.statut{
  padding:.2rem .5rem; font-size:.66rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; border:1px solid currentColor;
}
.statut-nouvelle{ color:var(--oxblood); }
.statut-preparee{ color:var(--laiton-fonce); }
.statut-remise{ color:var(--vert); }
.statut-annulee{ color:#777; }

/* ── stock ── */
.liste-stock{ display:grid; gap:.3rem; }
.produit-ligne{
  display:flex; align-items:center; gap:.8rem; padding:.6rem .8rem;
  background:var(--papier-2); border:1px solid var(--ligne);
}
.produit-ligne.epuise{ background:rgba(124,42,32,.07); border-color:rgba(124,42,32,.35); }
.pl-nom{ flex:1; min-width:0; font-size:.92rem; }
.pl-nom small{ display:block; color:var(--encre-2); font-size:.74rem; }
.bascule{
  position:relative; flex:0 0 auto; width:3.2rem; height:1.8rem; border-radius:999px;
  background:var(--ligne); border:0; cursor:pointer; transition:background .2s ease;
}
.bascule::after{
  content:''; position:absolute; top:.2rem; left:.2rem; width:1.4rem; height:1.4rem;
  border-radius:50%; background:#fff; transition:transform .2s ease;
}
.bascule[aria-pressed="true"]{ background:var(--oxblood); }
.bascule[aria-pressed="true"]::after{ transform:translateX(1.4rem); }
.bloc{ background:var(--papier-2); border:1px solid var(--ligne); padding:1.2rem; margin-bottom:1rem; }
.bloc h2{ font-size:1.1rem; margin-bottom:.5rem; }
.actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.9rem; }

@media (max-width:560px){
  .cmd-lignes li{ flex-direction:column; gap:.1rem; }
  .cmd-total{ text-align:left; }
}

/* .ecran et .vue sont en display:grid/flex, ce qui l'emporte sur l'attribut
   hidden : sans cette règle, l'écran de clé reste visible une fois connecté. */
[hidden]{ display:none !important; }