/* =====================================================================
   TERRAIN — feuille de style v2
   Plus de couleur, moins de bordures, des cibles tactiles confortables.
   Les noms de classes sont inchangés : les pages existantes en profitent
   sans être modifiées.
   ===================================================================== */

:root{
  --fond:#F3F5F2;
  --surface:#FFFFFF;
  --encre:#10201A;
  --doux:#66766C;
  --trait:#E3E8E3;
  --nuit:#0E1F17;

  --vert:#12864F;
  --vert-clair:#E7F3EC;
  --vert-fonce:#0C5B36;
  --orange:#FF6B18;
  --orange-clair:#FFEDE2;
  --orange-fonce:#9C3B06;
  --bleu:#0E9BC4;
  --bleu-clair:#E2F4F9;
  --bleu-fonce:#0A5A72;
  --violet:#6C4FD8;
  --violet-clair:#ECE8FB;
  --violet-fonce:#3E2C87;
  --rouge:#DC3A2E;
  --rouge-clair:#FCE9E7;
  --rouge-fonce:#8E2019;
  --jaune:#F5A300;
  --jaune-clair:#FEF3DC;
  --jaune-fonce:#8A5B00;

  --r:14px;
  --r-petit:10px;
  --ombre:0 1px 2px rgba(16,32,26,.05), 0 6px 18px rgba(16,32,26,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fond);
  color:var(--encre);
  font:16px/1.55 "Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-text-size-adjust:100%;
}
.ico{display:inline-block;vertical-align:-.18em;flex:0 0 auto}
.rail nav a .ico,.bouton .ico{opacity:.9}

h1,h2,h3,h4,.chiffre,.bouton,.onglet,.tuile b{
  font-family:"Barlow Semi Condensed","Barlow Condensed","Karla",sans-serif;
  font-weight:600;
}
h1{font-size:1.85rem;margin:0 0 .15rem;letter-spacing:-.01em}
h2{font-size:1.28rem;margin:0 0 .75rem}
h3{font-size:1.06rem;margin:0 0 .4rem}
a{color:var(--vert)}
code,.code,.mono{font-family:"Space Mono","Courier New",monospace}
:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}

/* ---------- Ossature ---------- */
.app{display:flex;min-height:100vh}
.rail{
  width:228px;flex:0 0 228px;background:var(--nuit);color:#D5DED7;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.rail .marque{padding:20px 18px 15px}
.rail .marque b{display:block;font-family:"Barlow Semi Condensed",sans-serif;font-size:1.4rem;color:#fff;line-height:1}
.rail .marque span{font-size:.8rem;color:#89998D}
.rail nav{padding:6px 10px 14px;overflow-y:auto;flex:1}
.rail nav a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;color:#C3CEC6;
  text-decoration:none;font-size:.95rem;border-radius:10px;margin-bottom:1px;
}
.rail nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.rail nav a.actif{background:var(--vert);color:#fff}
.rail nav a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail nav .groupe{padding:16px 12px 6px;font-size:.75rem;color:#7C8C80}
.rail .pied{padding:14px 18px;border-top:1px solid rgba(255,255,255,.1);font-size:.83rem;color:#89998D}
.rail .pied a{color:#FFA766;text-decoration:none}

.contenu{flex:1;min-width:0;padding:26px 30px 96px;max-width:1240px}
.entete{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.entete p{margin:.2rem 0 0;color:var(--doux);font-size:.95rem}
.barre-basse{display:none}

/* ---------- Blocs ---------- */
.bloc{background:var(--surface);border-radius:var(--r);padding:20px 22px;margin-bottom:18px;box-shadow:var(--ombre)}
.bloc>h2:first-child,.bloc>h3:first-child{margin-top:0}
.grille{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-auto{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* ---------- Chiffres clés ---------- */
.kpi{background:var(--surface);border-radius:var(--r);padding:16px 18px;box-shadow:var(--ombre);border-top:4px solid var(--trait)}
.kpi .etiq{font-size:.85rem;color:var(--doux);margin-bottom:3px}
.kpi .chiffre{font-size:2rem;line-height:1.05;font-variant-numeric:tabular-nums}
.kpi .sous{font-size:.82rem;color:var(--doux);margin-top:4px}
.kpi.vert{border-top-color:var(--vert)}       .kpi.vert .chiffre{color:var(--vert)}
.kpi.rouge{border-top-color:var(--rouge)}     .kpi.rouge .chiffre{color:var(--rouge)}
.kpi.orange{border-top-color:var(--orange)}   .kpi.orange .chiffre{color:var(--orange)}
.kpi.bleu{border-top-color:var(--bleu)}       .kpi.bleu .chiffre{color:var(--bleu)}

/* ---------- Tuiles de l'application terrain ---------- */
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.tuile{
  display:flex;flex-direction:column;justify-content:space-between;gap:14px;
  min-height:124px;padding:18px;border-radius:var(--r);text-decoration:none;color:#fff;
  box-shadow:var(--ombre);
}
.tuile b{font-size:1.22rem;line-height:1.15;display:block}
.tuile span{font-size:.84rem;opacity:.9;display:block;margin-top:2px}
.tuile .ico{opacity:.95}
.tuile.vert{background:var(--vert)}
.tuile.orange{background:var(--orange)}
.tuile.bleu{background:var(--bleu)}
.tuile.violet{background:var(--violet)}
.tuile.jaune{background:var(--jaune)}
.tuile.rouge{background:var(--rouge)}
.tuile.sombre{background:var(--nuit)}
.tuile:hover{filter:brightness(1.06)}
.tuile:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
.tuile:active{transform:scale(.985)}

/* ---------- Bande de stock ---------- */
.bande{display:flex;height:40px;border-radius:10px;overflow:hidden;background:var(--trait)}
.bande div{display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:"Barlow Semi Condensed",sans-serif;font-size:.95rem;min-width:0;overflow:hidden}
.legende{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.legende span{
  display:flex;align-items:center;gap:7px;background:var(--fond);
  padding:6px 11px;border-radius:20px;font-size:.87rem;
}
.pastille{width:11px;height:11px;border-radius:50%;flex:0 0 auto;display:inline-block}

/* ---------- Ligne d'ardoise / liste tactile ---------- */
.rangee{
  display:flex;align-items:center;gap:12px;padding:13px;border-radius:12px;
  background:var(--fond);margin-bottom:9px;text-decoration:none;color:inherit;
}
.rangee:active{transform:scale(.99)}
.rangee .titre{font-weight:700;font-size:1.02rem}
.rangee .droite{margin-left:auto;text-align:right;flex:0 0 auto}

/* ---------- Tableaux ---------- */
.tab-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -6px}
table{width:100%;border-collapse:collapse;font-size:.93rem}
th{text-align:left;padding:10px 12px;background:var(--fond);color:var(--doux);
   font-size:.85rem;font-weight:700;white-space:nowrap}
th:first-child{border-radius:8px 0 0 8px} th:last-child{border-radius:0 8px 8px 0}
td{padding:11px 12px;border-bottom:1px solid var(--trait);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#FAFBF9}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.vide{padding:34px 12px;text-align:center;color:var(--doux)}
.vide b{display:block;color:var(--encre);font-size:1.06rem;margin-bottom:4px}

/* ---------- Formulaires ---------- */
label{display:block;font-size:.88rem;color:var(--doux);margin:0 0 4px}
input,select,textarea{
  width:100%;padding:11px 13px;font:inherit;color:var(--encre);
  background:var(--surface);border:1.5px solid #CFD8D1;border-radius:var(--r-petit);
}
input:focus,select:focus,textarea:focus{border-color:var(--vert);outline:none;box-shadow:0 0 0 3px var(--vert-clair)}
input[type=color]{padding:3px;height:42px}
.champ{margin-bottom:14px}
.aide{font-size:.83rem;color:var(--doux);margin-top:4px}
.ligne{display:flex;flex-wrap:wrap;gap:14px}
.ligne>.champ{flex:1 1 170px;margin-bottom:0}
.scan{font-family:"Space Mono",monospace;font-size:1.4rem;letter-spacing:.08em;
  padding:16px;text-transform:uppercase;text-align:center;border-width:2px}

.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:11px 20px;border:0;border-radius:var(--r-petit);
  background:var(--vert);color:#fff;cursor:pointer;font-size:1rem;text-decoration:none;
}
.bouton:hover{filter:brightness(1.07)}
.bouton:active{transform:translateY(1px)}
.bouton.principal{background:var(--orange)}
.bouton.sobre{background:var(--fond);color:var(--encre)}
.bouton.danger{background:var(--rouge)}
.bouton.large{width:100%;font-size:1.1rem;min-height:56px}
.bouton.petit{min-height:34px;padding:5px 12px;font-size:.87rem}
.bouton[disabled]{opacity:.4;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ---------- Étiquettes d'état ---------- */
.etat{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.8rem;
  font-weight:700;white-space:nowrap}
.etat.stock{background:var(--vert-clair);color:var(--vert-fonce)}
.etat.vendu{background:var(--bleu-clair);color:var(--bleu-fonce)}
.etat.perdu,.etat.casse{background:var(--rouge-clair);color:var(--rouge-fonce)}
.etat.offert{background:var(--jaune-clair);color:var(--jaune-fonce)}
.etat.neutre{background:var(--fond);color:var(--doux)}

/* ---------- Messages ---------- */
.flash{padding:14px 16px;border-radius:var(--r-petit);margin-bottom:16px;font-size:.96rem}
.flash.ok{background:var(--vert-clair);color:var(--vert-fonce)}
.flash.err{background:var(--rouge-clair);color:var(--rouge-fonce)}
.flash.info{background:var(--bleu-clair);color:var(--bleu-fonce)}
.flash a{color:inherit;font-weight:700}

/* ---------- Alertes ---------- */
.alerte{display:flex;gap:13px;padding:14px;border-radius:var(--r-petit);
  background:var(--fond);margin-bottom:10px;align-items:flex-start}
.alerte .jauge{width:5px;border-radius:4px;flex:0 0 5px;align-self:stretch}
.alerte.critique{background:var(--rouge-clair)}   .alerte.critique .jauge{background:var(--rouge)}
.alerte.haute{background:var(--orange-clair)}     .alerte.haute .jauge{background:var(--orange)}
.alerte.moyenne{background:var(--jaune-clair)}    .alerte.moyenne .jauge{background:var(--jaune)}
.alerte.info{background:var(--bleu-clair)}        .alerte.info .jauge{background:var(--bleu)}
.alerte .quand{font-size:.81rem;color:var(--doux);margin-top:3px}

/* ---------- Étiquettes QR à imprimer ---------- */
/* Un bandeau de couleur en haut : le format se reconnaît de loin,
   sans avoir à lire, même les mains pleines. */
.planche{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm}
.vignette{
  border:1px dashed #9AA79E;border-radius:2.5mm;overflow:hidden;background:#fff;
  break-inside:avoid;page-break-inside:avoid;text-align:center;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.vignette .bandeau{
  color:#fff;padding:1.4mm 1mm;line-height:1.2;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.vignette .bandeau b{font-family:"Barlow Semi Condensed",sans-serif;font-size:10.5pt;display:block}
.vignette .bandeau span{font-size:8.5pt;opacity:.92}
.vignette .corps{padding:2mm 2mm 1.6mm}
.vignette .qr{width:100%;aspect-ratio:1;max-width:26mm;margin:0 auto;color:#101A15}
.vignette .qr svg{width:100%;height:100%;display:block}
.vignette .txt{font-family:"Space Mono",monospace;font-size:9pt;letter-spacing:.05em;
  font-weight:700;margin-top:1.2mm;color:#101A15}
.vignette .pied-v{font-size:6.5pt;color:#6B736C;line-height:1.1;margin-top:.4mm}

/* Le QR affiché dans l'application (fiche sachet, aperçu) */
.qr-fiche{width:170px;height:170px;color:var(--encre);background:#fff;
  padding:10px;border-radius:12px;box-shadow:var(--ombre)}
.qr-fiche svg{width:100%;height:100%;display:block}

/* ---------- Ticket ---------- */
.ticket{max-width:320px;margin:0 auto;font-family:"Space Mono",monospace;font-size:12px;line-height:1.5}
.ticket hr{border:0;border-top:1px dashed #9AA79E;margin:8px 0}
.ticket .l{display:flex;justify-content:space-between;gap:10px}

/* ---------- Compteur (application terrain) ---------- */
.compteur{display:flex;align-items:center;gap:10px}
.compteur button{
  width:44px;height:44px;border:0;border-radius:50%;background:var(--fond);
  font-size:1.4rem;line-height:1;cursor:pointer;color:var(--encre);
}
.compteur input{width:74px;text-align:center;font-size:1.2rem}

/* ---------- Total mis en avant ---------- */
.total{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--vert);color:#fff;border-radius:var(--r);padding:16px 20px;
}
.total .chiffre{font-size:2rem;line-height:1}
.total span{opacity:.9}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:780px){
  .app{display:block}
  .rail{position:sticky;top:0;z-index:30;width:auto;height:auto;flex-direction:row;
    align-items:center;justify-content:space-between;padding:0 16px}
  .rail .marque{padding:13px 0}
  .rail .marque b{font-size:1.2rem}
  .rail nav{display:none}
  .rail .pied{border:0;padding:0}
  .contenu{padding:18px 16px 92px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .entete{align-items:flex-start}
  h1{font-size:1.55rem}
  .bloc{padding:17px 16px;border-radius:12px}
  .tuiles{grid-template-columns:repeat(2,1fr)}
  .planche{grid-template-columns:repeat(2,1fr)}

  .barre-basse{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--nuit);padding-bottom:env(safe-area-inset-bottom);
  }
  .barre-basse a{flex:1;text-align:center;padding:10px 2px;color:#A9B8AD;
    text-decoration:none;font-size:.72rem;line-height:1.25}
  .barre-basse a .ico{display:block;margin:0 auto 1px}
  .barre-basse a.actif{color:#fff}
  .barre-basse a.actif .ico{color:var(--orange)}
}

@media print{
  .rail,.barre-basse,.actions,.flash,.no-print{display:none!important}
  .contenu{padding:0;max-width:none}
  body{background:#fff}
  .bloc{box-shadow:none;padding:0;margin:0}
  .planche{grid-template-columns:repeat(4,1fr)}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}