:root{
  --bg:#F3F5F7; --paper:#FFFFFF; --ink:#16202A; --muted:#5B6773; --line:#D6DCE2;
  --accent:#1B5FC1; --accent-ink:#FFFFFF; --warn:#B3261E; --hl:#E4F3E6; --hover:#EAF1FB;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#12181E; --paper:#1A222A; --ink:#E8EDF1; --muted:#9AA6B2; --line:#2C3742;
        --accent:#5B9BFF; --accent-ink:#0B1A2E; --warn:#FF8A80; --hl:#1F3A26; --hover:#22303F;}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums}
h1{font-size:1.5rem;letter-spacing:-.01em;margin:0 0 16px}
h2{font-size:1.15rem;margin:24px 0 10px}
h3{font-size:1rem;margin:0}
a{color:var(--accent)}
.barre{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 20px;background:var(--paper);border-bottom:1px solid var(--line)}
.marque{font-size:1.05rem}
.menu{display:flex;align-items:center;gap:16px;flex:1;flex-wrap:wrap}
.menu-btn{display:none;min-height:40px;padding:6px 14px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-weight:600;cursor:pointer}
.barre nav{display:flex;gap:2px;flex:1;flex-wrap:wrap}
.barre nav a{color:var(--muted);text-decoration:none;padding:6px 12px;border-radius:6px;font-weight:500}
.barre nav a:hover{background:var(--hover);color:var(--ink)}
.barre nav a[aria-current="page"]{color:var(--accent-ink);background:var(--accent);font-weight:600}
.quitter{display:flex;gap:10px;align-items:center;margin:0}
.contenu{max-width:1040px;margin:0 auto;padding:24px 16px 64px}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:8px 10px;min-height:40px;width:100%}
input[type=checkbox]{width:auto;min-height:0;margin-right:6px}
textarea{resize:vertical}
:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.btn{display:inline-block;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:8px 14px;min-height:40px;cursor:pointer;font-weight:500;text-decoration:none;color:var(--ink);text-align:center}
.btn:hover{border-color:var(--muted)}
.btn.primaire{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.danger{color:var(--warn)}
.btn.petit{min-height:32px;padding:4px 10px;font-size:.9rem}
.btn.pleine{width:100%;margin-top:8px}
.rangee{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.rangee>.champ{flex:1 1 200px}
.rangee>.champ.court{flex:0 1 170px}
.rangee>.champ.grand{flex:2 1 300px}
.champ{display:block;margin-bottom:12px}
.champ>span{display:block;font-size:.85rem;color:var(--muted);margin-bottom:4px}
.case{display:flex;align-items:center;min-height:40px;margin-bottom:12px}
.lecture{padding:8px 0;min-height:40px}
.filtres{margin-bottom:16px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:16px}
.defile{overflow-x:auto}
.vide{text-align:center;color:var(--muted);padding:28px 8px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.85rem;color:var(--muted);font-weight:600}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right}
td.detail{vertical-align:top;min-width:220px}
tr.inactif td{opacity:.6}
tr.total td{font-weight:700}
.actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.actions form{margin:0}
.muted{color:var(--muted)}
.petit-texte{font-size:.85rem}
.msg{margin:0 0 16px;padding:10px 12px;border-radius:6px;background:var(--hl)}
.msg.err{color:var(--warn);background:transparent;border:1px solid var(--warn)}
.lignes .ligne,.entete-lignes{display:grid;grid-template-columns:1fr 90px 120px 40px;gap:8px;align-items:center}
.lignes .ligne{margin-bottom:8px}
.entete-lignes{margin-bottom:4px}
.lignes .qte,.lignes .prix,.droite{text-align:right}

.pick{position:relative}
.resultats{position:absolute;z-index:20;left:0;right:0;top:100%;margin:2px 0 0;padding:4px;list-style:none;background:var(--paper);border:1px solid var(--muted);border-radius:6px;max-height:260px;overflow:auto;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.resultats[hidden]{display:none}
.resultats li{padding:8px 10px;border-radius:4px;cursor:pointer}
.resultats li.actif,.resultats li:hover{background:var(--accent);color:var(--accent-ink)}
.resultats li.creer{margin-top:4px;border-top:1px solid var(--line);font-weight:600;color:var(--accent)}
.resultats li.creer.actif,.resultats li.creer:hover{color:var(--accent-ink)}
dialog.dlg{border:1px solid var(--line);border-radius:10px;padding:20px;background:var(--paper);color:var(--ink);width:min(480px,calc(100% - 32px));box-shadow:0 12px 40px rgba(0,0,0,.35)}
dialog.dlg::backdrop{background:rgba(0,0,0,.45)}
details.facultatif-dlg{margin:0 0 12px}
details.facultatif-dlg summary{cursor:pointer;color:var(--muted);margin-bottom:8px}
.resultats li.vide{cursor:default;padding:8px 10px;text-align:left}
.resultats li.vide:hover{background:none;color:var(--muted)}
.jour header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:4px;margin-bottom:4px}
.jour h2{margin:0}
.qui{margin:8px 0 0;font-size:.9rem}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{background:var(--paper);border:0;padding:8px 14px;min-height:40px;cursor:pointer;font-weight:500}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
.page-login{display:grid;place-items:start center;padding:6vh 16px}
.boite-login{width:100%;max-width:420px}
.boite-login.large{max-width:640px}
.only-print{display:none}
th.sel,td.sel{width:34px;text-align:center}
td.sel input,th.sel input{width:20px;height:20px;min-height:0;margin:0}
.commentaire-liste{max-width:38ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bon .heure-bon{font-size:1.25rem}
.bon .commentaire-bon{margin-top:14px;padding:8px 10px;border:1px solid #999;border-radius:4px}
.lot-bons .bon{margin-bottom:24px}
.code-otp{font-size:1.4rem;letter-spacing:.25em;text-align:center;font-variant-numeric:tabular-nums}
.qr{width:220px;max-width:100%;background:#fff;padding:8px;border:1px solid var(--line);border-radius:8px;margin:8px 0}
.qr svg{display:block;width:100%;height:auto}
.codes-secours ul{list-style:none;padding:0;margin:8px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.codes-secours code,#secret{font-size:1.05rem;font-weight:600}
.barre .quitter a{text-decoration:none}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.85rem;font-weight:600;white-space:nowrap}
.badge.livree{background:var(--hl);color:var(--ink)}
.badge.non-livree{background:transparent;border:1px solid var(--warn);color:var(--warn)}
fieldset.facultatif{border:1px dashed var(--line);border-radius:8px;margin:0 0 12px;padding:12px 12px 0}
fieldset.facultatif legend{color:var(--muted);font-size:.9rem;padding:0 6px}
.apercu-logo{margin:6px 0 10px}
.apercu-logo img{max-height:90px;max-width:260px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:6px;padding:6px}

/* Bon de commande */
.bandeau{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--paper)}
.bon{max-width:820px;margin:24px auto;padding:32px;background:#fff;color:#000;border:1px solid var(--line)}
.bon .entete-bon{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:20px}
.bon .societe{display:flex;gap:14px;align-items:flex-start;line-height:1.35}
.bon .logo{max-height:90px;max-width:200px;object-fit:contain}
.bon .titre-bon{text-align:right}
.bon h1{font-size:1.6rem;margin:0}
.bon .numero{font-size:1.15rem;font-weight:700}
.bon .meta{display:flex;justify-content:space-between;gap:16px;margin:16px 0;padding:12px 0;border-top:1px solid #999;border-bottom:1px solid #999}
.bon .etiquette{display:block;font-size:.8rem;color:#555}
.bon .total-bon td{font-weight:700;font-size:1.05rem;border-bottom:0;padding-top:12px}
.bon th{color:#333}
.bon th,.bon td{border-bottom:1px solid #999}
.bon .signatures{display:flex;gap:24px;margin-top:40px}
.bon .signatures div{flex:1;border:1px solid #000;height:90px;padding:6px;font-size:.85rem}
.bon .pied-bon{margin-top:24px;font-size:.85rem;color:#333}

@media print{
  .lot-bons .bon{margin:0;break-after:page;page-break-after:always}
  .lot-bons .bon:last-child{break-after:auto;page-break-after:auto}
  body{background:#fff;color:#000}
  .no-print{display:none!important}
  .only-print{display:block}
  .contenu{max-width:none;padding:0}
  .panel,.bon{border:0;padding:0;margin:0 0 12px}
  .jour{break-inside:avoid}
  a{color:inherit;text-decoration:none}
}

/* ---------- Adaptation aux écrans étroits (téléphone, tablette) ---------- */
@media screen and (max-width:900px){
  .barre{justify-content:space-between;padding:8px 12px;gap:8px}
  .menu-btn{display:inline-block}
  .menu{display:none;width:100%;flex-direction:column;align-items:stretch;gap:8px;padding-top:8px;border-top:1px solid var(--line)}
  .barre.ouvert .menu{display:flex}
  .barre nav{flex-direction:column;gap:2px}
  .barre nav a{padding:12px;border-radius:8px}
  .quitter{justify-content:space-between;flex-wrap:wrap}
}
@media screen and (max-width:720px){
  .contenu{padding:16px 12px 48px}
  h1{font-size:1.3rem}
  .panel{padding:12px}
  /* champs : pleine largeur, dates/petits champs par deux */
  .rangee>.champ,.rangee>.champ.grand{flex:1 1 100%}
  .rangee>.champ.court{flex:1 1 calc(50% - 6px)}
  .rangee>.btn,.rangee>form{flex:1 1 auto}
  .rangee>form .btn{width:100%}
  .btn{min-height:44px}
  .btn.petit{min-height:40px;padding:6px 12px}
  input,select,textarea{min-height:44px}
  .actions{justify-content:flex-start}
  .seg button{min-height:44px}
  .page-login{padding:3vh 12px}
  dialog.dlg{padding:16px}

  /* tableaux → fiches empilées (les libellés viennent de app.js : data-label) */
  .panel.defile{padding:0;background:none;border:0;overflow:visible}
  .contenu table.cartes,.contenu table.cartes tbody,.contenu table.cartes tfoot,.contenu table.cartes tr{display:block;width:100%}
  .contenu table.cartes thead{display:none}
  .contenu table.cartes tr{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:6px 12px;margin-bottom:10px}
  .contenu table.cartes td{display:grid;grid-template-columns:minmax(80px,36%) 1fr;gap:4px 10px;align-items:start;border:0;border-bottom:1px solid var(--line);padding:8px 0;text-align:left}
  .contenu table.cartes td:last-child{border-bottom:0}
  .contenu table.cartes td.num,.contenu table.cartes td.detail{text-align:left}
  .contenu table.cartes td[data-label]::before{content:attr(data-label);color:var(--muted);font-size:.85rem;font-weight:600;padding-top:2px}
  .contenu table.cartes td:not([data-label]){display:block}
  .contenu table.cartes td.vide{padding:20px 0;text-align:center}
  .contenu table.cartes td .actions{grid-column:1/-1}
  .contenu table.cartes td[data-label=""]::before{display:none}
  .contenu table.cartes tfoot tr{background:none;border:0;padding:0}
  .contenu table.cartes input,.contenu table.cartes select{width:100%}

  /* commande : article sur toute la largeur, quantité + prix dessous */
  .entete-lignes{display:none}
  .lignes .ligne{grid-template-columns:1fr 1fr 44px;align-items:end}
  .lignes .ligne .pick{grid-column:1/-1}

  /* bon de commande */
  .bon{padding:16px;margin:0;border:0}
  .bon .entete-bon,.bon .meta,.bon .signatures{flex-direction:column;gap:12px}
  .bon .titre-bon{text-align:left}
  .bon .societe{flex-direction:column}
  .bon table{font-size:.9rem}
  .bandeau .btn{flex:1 1 auto}
}
@media screen and (max-width:420px){
  .rangee>.champ.court{flex:1 1 100%}
}