/* ============================================================
   STOCK — TECHNOSOUD
   Feuille autonome. Mêmes briques que l'app Chantiers (DEMSEY),
   charte TECHNOSOUD : jaune #fbb816 + anthracite #515557,
   relevés directement sur le logo.

   Le jaune de la marque est trop clair pour porter du texte blanc
   (contraste ~1,8:1). On l'utilise donc en APLAT avec du texte
   anthracite — exactement comme le logo — et une déclinaison
   foncée (--y-tx) pour le texte accentué sur fond blanc.
   ============================================================ */
:root{
  --y:#fbb816; --y-dk:#e0a00a; --y-sf:#fff6e1; --y-tx:#8a6205;
  --ink:#2f3234; --anthra:#515557; --soft:#7d8082;
  --line:#e3e3e0; --line2:#d1d1cd;
  --bg:#f4f4f2; --card:#ffffff; --grey:#f0f0ee;
  --ok:#2f7d46; --ok-sf:#e6f2e9;
  --no:#c0392b; --no-sf:#fbeae8;
  --wa:#b7791f; --wa-sf:#fdf3e0;
  --shadow:0 1px 2px rgba(47,50,52,.06),0 6px 18px rgba(47,50,52,.05);
  --font:Arial,"Liberation Sans",Helvetica,system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{font-family:var(--font);background:var(--bg);color:var(--ink);min-height:100vh;
  -webkit-text-size-adjust:100%;}
.hidden{display:none !important;}

/* ---------- structure ---------- */
.topbar{background:var(--anthra);color:#fff;padding:env(safe-area-inset-top) 0 0;position:sticky;top:0;z-index:40;}
.topbar .row{display:flex;align-items:center;gap:11px;padding:10px 15px;max-width:1100px;margin:0 auto;}
.topbar .logo img{display:block;height:34px;width:auto;background:#fff;border-radius:8px;padding:5px 9px;}
.topbar .ttl{font-size:12px;color:#d3d3d0;line-height:1.25;min-width:0;flex:1;}
.topbar .ttl b{color:#fff;display:block;font-size:14.5px;}
/* 44 px minimum : cible tactile iOS, et en atelier on tape avec des gants. */
.homebtn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:10px;background:rgba(255,255,255,.13);color:#fff;text-decoration:none;
  font-size:21px;line-height:1;flex:0 0 auto;}
.homebtn:active{background:rgba(255,255,255,.28);}
.iconbtn{background:rgba(255,255,255,.13);border:none;color:#fff;font-size:13px;font-weight:bold;
  border-radius:10px;padding:0 13px;min-height:44px;min-width:44px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;flex:0 0 auto;}
.iconbtn:active{background:rgba(255,255,255,.28);}
.wrap{max-width:900px;margin:0 auto;padding:14px 15px 96px;}
.wrap.wide{max-width:1180px;}
.boot{text-align:center;color:var(--soft);font-size:13.5px;padding:60px 20px;}

/* ---------- bandeau d'état ---------- */
.ovr{font-size:11.5px;text-align:center;padding:5px 12px;background:#2b2d2f;color:#d3d3d0;}
.ovr.off{background:#7a5a12;color:#ffefd2;}
.ovr.err{background:#7d2820;color:#ffd9d4;}
.ovr.clos{background:#3f4b52;color:#dbe6ec;}

/* ---------- cartes ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:16px;
  box-shadow:var(--shadow);margin-bottom:13px;}
.card h2{margin:0 0 3px;font-size:15.5px;color:var(--anthra);}
.card .sub{font-size:12.5px;color:var(--soft);margin:0;line-height:1.45;}
.sec-h{font-size:12px;font-weight:bold;letter-spacing:.06em;text-transform:uppercase;
  color:var(--soft);margin:22px 3px 9px;}

/* ---------- connexion ---------- */
.gate{max-width:400px;margin:0 auto;padding:26px 15px;}

/* ---------- portail à tuiles ---------- */
.hello{margin:4px 2px 18px;}
.hello h1{font-size:22px;margin:0 0 4px;color:var(--anthra);}
.hello p{font-size:13.5px;color:var(--soft);margin:0;line-height:1.45;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.tile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:19px;
  box-shadow:var(--shadow);text-decoration:none;color:inherit;display:flex;flex-direction:column;
  gap:12px;min-height:165px;transition:transform .1s,border-color .15s;position:relative;}
.tile:hover{transform:translateY(-2px);border-color:var(--y);}
.tile:active{transform:scale(.99);}
.tile .ico{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;background:var(--y-sf);color:var(--y-tx);}
.tile .ico svg{width:27px;height:27px;}
.tile .t{font-size:17px;font-weight:bold;line-height:1.2;}
.tile .d{font-size:13px;color:var(--soft);line-height:1.45;flex:1;}
.tile .go{font-size:13px;font-weight:bold;color:var(--y-tx);}
.tile .badge{position:absolute;top:15px;right:15px;font-size:10.5px;font-weight:bold;
  color:var(--ink);background:var(--y);padding:2px 9px;border-radius:999px;}
.tile.admin .ico{background:#e9eef1;color:#42606f;}
.tile.admin .badge{background:#5a7d8f;color:#fff;}
.foot{margin-top:32px;text-align:center;font-size:11px;color:var(--soft);}

/* bandeau de l'inventaire en cours, sur le portail */
.encours{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--y);border-radius:13px;padding:13px 15px;margin-bottom:16px;
  box-shadow:var(--shadow);}
.encours.clos{border-left-color:#5a7d8f;}
.encours.aucun{border-left-color:var(--no);}
.encours .i{min-width:0;flex:1;}
.encours .i b{display:block;font-size:15px;line-height:1.25;}
.encours .i span{display:block;font-size:12.5px;color:var(--soft);margin-top:2px;}
.encours .n{flex:0 0 auto;text-align:center;}
.encours .n b{display:block;font-size:22px;line-height:1;font-variant-numeric:tabular-nums;}
.encours .n span{display:block;font-size:10.5px;color:var(--soft);text-transform:uppercase;margin-top:3px;}

/* ---------- champs ---------- */
.fld{margin-bottom:13px;}
.fld:last-child{margin-bottom:0;}
label{display:block;font-size:12.5px;font-weight:bold;color:var(--ink);margin:0 0 5px;}
label .opt{font-weight:normal;color:var(--soft);}
/* 16 px : en dessous, iOS zoome tout seul à la mise au point du champ. */
input[type=text],input[type=number],input[type=tel],input[type=email],input[type=password],
input[type=search],textarea,select{
  width:100%;font:inherit;font-size:16px;border:1.5px solid var(--line2);border-radius:10px;
  padding:11px 12px;background:#fff;color:var(--ink);}
textarea{min-height:70px;resize:vertical;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--y-dk);box-shadow:0 0 0 3px var(--y-sf);}
.two{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.hint{font-size:11.5px;color:var(--soft);margin-top:4px;line-height:1.45;}

/* ---------- boutons ---------- */
.btn{border:none;border-radius:12px;padding:13px 16px;font-size:14.5px;font-weight:bold;
  cursor:pointer;font-family:inherit;}
.btn.primary{background:var(--y);color:var(--ink);}
.btn.primary:active{background:var(--y-dk);}
.btn.sec{background:#fff;color:var(--ink);border:1.5px solid var(--line2);}
.btn.ghost{background:transparent;color:var(--y-tx);padding:9px 4px;}
.btn.danger{background:var(--no-sf);color:var(--no);border:1.5px solid #eec4bd;}
.btn.full{width:100%;display:block;}
.btn[disabled]{opacity:.5;cursor:default;}
.btnrow{display:flex;gap:9px;flex-wrap:wrap;}
.btnrow .btn{flex:1;min-width:130px;}

/* ---------- écran de saisie ---------- */
.photo{position:relative;width:100%;aspect-ratio:4/3;border-radius:15px;overflow:hidden;
  background:var(--grey);border:1.5px dashed var(--line2);display:flex;align-items:center;
  justify-content:center;cursor:pointer;}
.photo.pleine{border-style:solid;border-color:var(--line);}
.photo img{width:100%;height:100%;object-fit:cover;display:block;}
.photo .ph-vide{text-align:center;color:var(--soft);font-size:13.5px;line-height:1.5;padding:16px;}
.photo .ph-vide .ic{font-size:34px;display:block;margin-bottom:6px;}
.photo .ph-chg{position:absolute;right:9px;bottom:9px;background:rgba(47,50,52,.82);color:#fff;
  font-size:12px;font-weight:bold;padding:8px 12px;border-radius:9px;}

/* compteur de quantité */
.qbox{text-align:center;}
.qbox .qv{font-size:52px;font-weight:bold;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--anthra);}
.qbox .ql{font-size:12px;color:var(--soft);margin-top:5px;}
.qrow{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px;}
.qrow button{min-height:58px;border-radius:13px;border:1.5px solid var(--line2);background:#fff;
  font-size:19px;font-weight:bold;color:var(--anthra);cursor:pointer;font-family:inherit;
  font-variant-numeric:tabular-nums;}
.qrow button:active{background:var(--grey);}
.qrow button.plus{background:var(--y-sf);border-color:#f0dcae;color:var(--y-tx);}
.qrow button.plus:active{background:#fdecc4;}
.qrow button[disabled]{opacity:.4;}

/* barre d'enregistrement, toujours atteignable */
.savebar{position:fixed;left:0;right:0;bottom:0;z-index:38;background:var(--card);
  border-top:1px solid var(--line);padding:11px 15px calc(11px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 18px rgba(47,50,52,.08);}
.savebar .in{max-width:900px;margin:0 auto;display:flex;gap:10px;align-items:center;}
.savebar .btn{flex:1;min-height:54px;font-size:16px;}
.savebar .cnt{flex:0 0 auto;text-align:center;min-width:56px;}
.savebar .cnt b{display:block;font-size:19px;line-height:1;font-variant-numeric:tabular-nums;}
.savebar .cnt span{display:block;font-size:10px;color:var(--soft);text-transform:uppercase;margin-top:2px;}

/* mémo d'emplacement : ce qui est repris d'une saisie à l'autre */
.repris{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--y-tx);
  background:var(--y-sf);border:1px solid #f2e0b8;border-radius:9px;padding:8px 11px;margin-top:8px;
  line-height:1.4;}

/* ---------- dernières saisies (rappel sous le formulaire) ---------- */
.mini{display:flex;gap:9px;overflow-x:auto;padding:2px 0 4px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;}
.mini::-webkit-scrollbar{display:none;}
.mini .m{flex:0 0 auto;width:88px;background:var(--card);border:1px solid var(--line);
  border-radius:11px;overflow:hidden;cursor:pointer;text-align:left;padding:0;font-family:inherit;}
.mini .m img{width:88px;height:66px;object-fit:cover;display:block;background:var(--grey);}
.mini .m .no{width:88px;height:66px;display:flex;align-items:center;justify-content:center;
  background:var(--grey);color:var(--line2);font-size:20px;}
.mini .m .l{padding:5px 6px 6px;font-size:11px;line-height:1.3;}
.mini .m .l b{display:block;font-size:13px;font-variant-numeric:tabular-nums;}
.mini .m .l span{color:var(--soft);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- tableau récap ---------- */
.tbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
.tbar select{width:auto;flex:1;min-width:190px;}
.filters{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;}
.filters::-webkit-scrollbar{display:none;}
.chip{border:1.5px solid var(--line2);background:#fff;border-radius:999px;padding:0 14px;
  min-height:38px;display:inline-flex;align-items:center;white-space:nowrap;
  font-size:13px;cursor:pointer;font-family:inherit;color:var(--ink);flex:0 0 auto;}
.chip.on{background:var(--y);border-color:var(--y);color:var(--ink);font-weight:bold;}
.count{font-size:12px;color:var(--soft);margin:2px 3px 10px;}

/* Le tableau défile DANS son cadre : la page, elle, ne part jamais
   en travers sur un téléphone. */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);}
table.recap{border-collapse:collapse;width:100%;min-width:620px;font-size:13px;}
table.recap th{position:sticky;top:0;z-index:2;background:var(--grey);color:var(--soft);
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;text-align:left;
  padding:9px 11px;border-bottom:1px solid var(--line);white-space:nowrap;}
table.recap td{padding:8px 11px;border-bottom:1px solid var(--line);vertical-align:middle;}
table.recap tr:last-child td{border-bottom:none;}
table.recap tbody tr{cursor:pointer;}
table.recap tbody tr:active{background:var(--y-sf);}
table.recap .vign{width:46px;height:46px;border-radius:8px;object-fit:cover;display:block;
  background:var(--grey);border:1px solid var(--line);}
table.recap .vign.no{display:flex;align-items:center;justify-content:center;color:var(--line2);font-size:17px;}
table.recap .q{font-size:16px;font-weight:bold;font-variant-numeric:tabular-nums;text-align:right;}
table.recap .h{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--soft);font-size:12px;}
table.recap .d{font-weight:bold;}
table.recap .n{color:var(--soft);font-size:12px;display:block;margin-top:2px;
  max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
table.recap .qui{color:var(--soft);font-size:12px;white-space:nowrap;}
.loc{display:inline-block;font-size:11.5px;font-weight:bold;padding:2px 8px;border-radius:6px;
  background:var(--y-sf);color:var(--y-tx);border:1px solid #f2e0b8;white-space:nowrap;}
.loc.vide{background:var(--grey);color:var(--soft);border-color:var(--line);font-weight:normal;}
table.recap .mob{display:none;}

/* Sur un téléphone, un tableau à six colonnes rejette la QUANTITÉ hors
   de l'écran — or c'est la colonne qu'on vient lire. En dessous de
   560 px on masque donc Emplacement et Saisi par, repris sous le nom
   de l'article, et le tableau tient sans défilement latéral. */
@media (max-width:560px){
  /* `table-layout:fixed` est indispensable : sans lui, un texte en
     `nowrap` dans la colonne Article élargit la colonne à sa guise et
     repousse la quantité hors de l'écran — le tableau défile alors
     dans son cadre, et la page ne déborde pas, donc le défaut passe
     inaperçu à la mesure. Ici les largeurs sont imposées. */
  table.recap{min-width:0;width:100%;table-layout:fixed;}
  table.recap th:nth-child(5),table.recap td:nth-child(5),
  table.recap th:nth-child(6),table.recap td:nth-child(6){display:none;}
  table.recap th:nth-child(1),table.recap td:nth-child(1){width:60px;}
  table.recap th:nth-child(2),table.recap td:nth-child(2){width:52px;}
  table.recap th:nth-child(4),table.recap td:nth-child(4){width:46px;}
  table.recap th,table.recap td{padding:8px 7px;}
  table.recap .h{font-size:11.5px;white-space:normal;line-height:1.3;}
  table.recap .d,table.recap .n,table.recap .mob{
    display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  table.recap .mob{font-size:11.5px;color:var(--soft);margin-top:3px;}
  table.recap .q{font-size:15px;}
}

.tot{display:flex;gap:11px;flex-wrap:wrap;margin:13px 0 0;}
.tot .b{flex:1;min-width:130px;background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:13px 15px;box-shadow:var(--shadow);}
.tot .b b{display:block;font-size:24px;line-height:1;font-variant-numeric:tabular-nums;color:var(--anthra);}
.tot .b span{display:block;font-size:11.5px;color:var(--soft);text-transform:uppercase;margin-top:5px;}

.empty{text-align:center;color:var(--soft);font-size:13.5px;padding:40px 20px;line-height:1.6;}

/* ---------- feuille modale ---------- */
.ov{position:fixed;inset:0;background:rgba(30,32,34,.45);z-index:100;display:flex;
  align-items:flex-end;justify-content:center;}
.sheet{background:var(--bg);width:100%;max-width:640px;max-height:92vh;border-radius:18px 18px 0 0;
  display:flex;flex-direction:column;overflow:hidden;}
@media (min-width:700px){
  .ov{align-items:center;}
  .sheet{border-radius:18px;max-height:88vh;}
}
.sheet .sh{display:flex;align-items:center;gap:10px;padding:14px 17px 12px;background:var(--card);
  border-bottom:1px solid var(--line);flex:0 0 auto;}
.sheet .sh h3{margin:0;font-size:16px;flex:1;min-width:0;color:var(--anthra);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sheet .xbtn{background:var(--grey);border:none;border-radius:10px;width:38px;height:38px;
  font-size:22px;line-height:1;color:var(--soft);cursor:pointer;flex:0 0 auto;font-family:inherit;}
.sheet .sb{padding:15px 17px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;}
.sheet .sf{padding:12px 17px calc(14px + env(safe-area-inset-bottom));background:var(--card);
  border-top:1px solid var(--line);display:flex;gap:9px;flex:0 0 auto;}
.sheet .sf .btn{flex:1;}

/* ---------- listes d'inventaires ---------- */
.ilist{display:flex;flex-direction:column;gap:9px;}
.iit{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line2);
  border-radius:13px;padding:12px 14px;display:flex;gap:11px;align-items:center;
  width:100%;text-align:left;font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;
  box-shadow:var(--shadow);}
.iit.ouvert{border-left-color:var(--y);}
.iit.cloture{border-left-color:#5a7d8f;background:#f8f9fa;}
.iit .c{min-width:0;flex:1;}
.iit .c b{display:block;font-size:14.5px;line-height:1.25;}
.iit .c span{display:block;font-size:12px;color:var(--soft);margin-top:3px;}
.tag{display:inline-block;font-size:10.5px;font-weight:bold;padding:2px 9px;border-radius:999px;
  background:var(--grey);color:var(--soft);flex:0 0 auto;}
.tag.ouvert{background:var(--y);color:var(--ink);}
.tag.cloture{background:#e6ecf0;color:#42606f;}

details.guide{border:1px solid var(--line);border-radius:12px;background:var(--card);
  padding:11px 13px;font-size:12.5px;line-height:1.55;}
details.guide summary{cursor:pointer;font-weight:bold;color:var(--anthra);}
details.guide p{margin:9px 0 0;color:var(--soft);}
details.guide a{color:var(--y-tx);}