:root{--bleu:#0B2C6B;--bleu2:#16408f;--fond:#f3f5fa;--carte:#fff;--texte:#14213d;--gris:#667085;--vert:#16a34a;--rouge:#dc2626;--orange:#d97706;--bord:#d5dbe8;}
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;background:var(--fond);color:var(--texte);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:18px;line-height:1.35;}
  body{min-height:100vh;padding-bottom:40px;}
  button{font:inherit;cursor:pointer;border:0;border-radius:16px;padding:16px 18px;font-weight:700;color:#fff;background:var(--bleu);min-height:56px;}
  button:disabled{opacity:.45;cursor:not-allowed;}
  button.sec{background:#fff;color:var(--bleu);border:2px solid var(--bleu);}
  button.petit{min-height:40px;padding:8px 12px;font-size:15px;border-radius:12px;}
  button.vert{background:var(--vert);} button.rouge{background:var(--rouge);}
  input{font:inherit;width:100%;padding:16px;border:2px solid var(--bord);border-radius:14px;background:#fff;color:var(--texte);}
  input:focus{outline:3px solid #9db6ee;border-color:var(--bleu);}
  label{display:block;font-weight:700;margin:14px 0 6px;}
  .barre{position:sticky;top:0;z-index:5;background:var(--bleu);color:#fff;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;display:flex;align-items:center;gap:10px;}
  .barre .titre{flex:1;font-weight:800;font-size:19px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .barre button{background:rgba(255,255,255,.18);min-height:40px;padding:8px 12px;font-size:15px;border-radius:12px;}
  main{padding:14px;max-width:560px;margin:0 auto;}
  .carte{background:var(--carte);border-radius:18px;padding:16px;margin:0 0 14px;box-shadow:0 1px 4px rgba(20,33,61,.12);}
  .carte.cliquable{cursor:pointer;}
  .gris{color:var(--gris);font-size:15px;}
  .erreur{background:#fee2e2;color:#991b1b;border-radius:12px;padding:12px 14px;margin:12px 0;font-weight:600;}
  .info{background:#fef3c7;color:#92400e;border-radius:12px;padding:12px 14px;margin:12px 0;font-weight:600;}
  .ok{background:#dcfce7;color:#166534;border-radius:12px;padding:12px 14px;margin:12px 0;font-weight:600;}
  .connexion{padding-top:30px;} .connexion h1{margin:0 0 4px;font-size:30px;color:var(--bleu);}
  .interrupteur{width:100%;min-height:96px;font-size:26px;border-radius:24px;display:flex;align-items:center;justify-content:center;gap:12px;}
  .interrupteur.dispo{background:var(--vert);} .interrupteur.pause{background:#6b7280;}
  .ligne{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .etiquette{display:inline-block;border-radius:999px;padding:3px 10px;font-size:14px;font-weight:700;background:#e5e9f4;color:var(--bleu);}
  .etiquette.express{background:#fde68a;color:#78350f;} .etiquette.etat-proposee{background:#fed7aa;color:#7c2d12;} .etiquette.etat-en_cours{background:#bfdbfe;color:#1e3a8a;} .etiquette.etat-terminee{background:#dcfce7;color:#166534;}
  .etiquette.etat-annulee{background:#fee2e2;color:#991b1b;}
  .bandeau-annule{background:#dc2626;color:#fff;border-radius:12px;padding:12px 14px;margin:10px 0 0;font-weight:800;}
  .carte.annulee{opacity:.85;border:2px solid #fca5a5;}
  .onglets{display:flex;gap:8px;margin:0 0 12px;}
  .onglet{flex:1;min-height:52px;padding:10px 12px;border-radius:14px;background:#fff;color:var(--bleu);border:2px solid var(--bleu);font-size:17px;display:flex;align-items:center;justify-content:center;gap:8px;}
  .onglet.actif{background:var(--bleu);color:#fff;}
  .pastille{display:inline-block;min-width:26px;padding:1px 8px;border-radius:999px;background:var(--rouge);color:#fff;font-size:15px;font-weight:800;text-align:center;}
  .pastille.zero{background:#9aa3b5;}
  .numero{font-weight:800;font-size:20px;}
  .compte{font-weight:800;font-size:20px;} .compte.retard{color:var(--rouge);}
  .boutons{display:flex;gap:10px;margin-top:12px;} .boutons button{flex:1;}
  .ronds{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:6px 0 12px;}
  .rond{width:38px;height:38px;min-height:0;padding:0;border-radius:50%;border:3px solid #9aa3b5;background:#fff;}
  .rond.vert{background:var(--vert);border-color:var(--vert);} .rond.rouge{background:var(--rouge);border-color:var(--rouge);}
  .rond.courant{box-shadow:0 0 0 4px #9db6ee;border-color:var(--bleu);}
  .produit{text-align:center;}
  .produit .photo{width:100%;max-height:38vh;height:38vh;object-fit:contain;background:#fff;border-radius:16px;}
  .produit .sans-photo{height:26vh;display:flex;align-items:center;justify-content:center;font-size:72px;background:#eef1f8;border-radius:16px;}
  .produit .nom{font-size:32px;font-weight:800;line-height:1.15;margin:12px 0 4px;word-break:break-word;}
  .produit .quantite{font-size:84px;font-weight:900;line-height:1;color:var(--bleu);margin:6px 0;}
  .produit .catalogue{font-size:15px;color:var(--gris);}
  .gros-boutons{display:flex;gap:10px;margin-top:14px;} .gros-boutons button{flex:1;min-height:84px;font-size:24px;border-radius:20px;}
  .resume{width:100%;border-collapse:collapse;font-size:17px;} .resume td{padding:8px 4px;border-bottom:1px solid var(--bord);vertical-align:top;} .resume td.droite{text-align:right;white-space:nowrap;font-weight:700;}
  .total{font-size:52px;font-weight:900;color:var(--bleu);text-align:center;margin:10px 0 2px;line-height:1.05;}
  .pas-trouves{text-align:center;font-weight:700;color:var(--rouge);}
  .voile{position:fixed;inset:0;background:rgba(10,20,45,.6);z-index:20;display:flex;align-items:flex-end;justify-content:center;}
  .feuille{background:#fff;width:100%;max-width:560px;border-radius:24px 24px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));}
  .feuille h2{margin:0 0 4px;font-size:24px;}
  .feuille input{font-size:36px;font-weight:800;text-align:center;}
  .vide{text-align:center;padding:30px 10px;color:var(--gris);}
  .retour{margin-bottom:10px;}

  .esp16{height:16px;} .esp10{height:10px;} .pleine{width:100%;} .mt8{margin-top:8px;} .mt12{margin-top:12px;} .mb10{margin-bottom:10px;}
  .centre{text-align:center;} .txt-rouge{color:#dc2626;} .cache{display:none;}
  .entete-courses{justify-content:space-between;margin:18px 0 10px;} .h2-courses{margin:0;font-size:22px;} .h2-fin{margin:0 0 8px;text-align:center;}
  #zone-install{padding:8px 16px 24px;text-align:center;}
  .hors-ligne{background:#991b1b;color:#fff;text-align:center;padding:8px;font-weight:700;}
  .hors-ligne.cache{display:none;}