/* Intake LevainLab — mobile-first, une main, plein soleil de magasin. */
:root {
  --accent: #8a6d5b;
  --accent-fonce: #6f5546;
  --fond: #faf7f4;
  --carte: #ffffff;
  --texte: #2c2420;
  --texte-doux: #8c8078;
  --bord: #e6ddd6;
  --ok: #3e7d4f;
  --erreur: #b03a2e;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: var(--texte);
  padding-bottom: 4rem;
}

header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: calc(.6rem + env(safe-area-inset-top)) 1rem .6rem;
  background: var(--carte);
  border-bottom: 1px solid var(--bord);
}
h1 { margin: 0; font-size: 1.1rem; }
#sous-titre { margin: 0; font-size: .75rem; color: var(--texte-doux); }

main { padding: 1rem; max-width: 34rem; margin: 0 auto; }

section {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: .9rem;
  padding: .9rem;
  margin-bottom: .9rem;
}
h2 { margin: 0 0 .6rem; font-size: .95rem; }
.optionnel { font-weight: normal; font-size: .8rem; color: var(--texte-doux); }
.aide { margin: .5rem 0 0; font-size: .78rem; color: var(--texte-doux); }

input[type="text"], input[type="number"], input[type="password"] {
  width: 100%;
  font-size: 1.05rem;
  padding: .65rem .7rem;
  border: 1px solid var(--bord);
  border-radius: .6rem;
  background: var(--fond);
}
input:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* Boutons */
button { font: inherit; cursor: pointer; }
.primaire {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: .7rem;
  padding: .7rem 1rem;
  font-size: 1rem;
  font-weight: 600;
}
.primaire:disabled { opacity: .45; }
.primaire:active { background: var(--accent-fonce); }
.valider { width: 100%; padding: .9rem; font-size: 1.1rem; margin-top: .2rem; }

.btn-photo {
  display: block;
  text-align: center;
  padding: .8rem;
  border: 2px dashed var(--bord);
  border-radius: .7rem;
  color: var(--accent-fonce);
  font-weight: 600;
  background: var(--fond);
}

/* Galeries de photos */
.galerie { display: flex; flex-wrap: wrap; gap: .5rem; }
.galerie:not(:empty) { margin-bottom: .6rem; }
.vignette { position: relative; width: 5.2rem; }
.vignette img {
  width: 5.2rem; height: 5.2rem;
  object-fit: cover;
  border-radius: .6rem;
  border: 1px solid var(--bord);
  display: block;
}
.vignette .suppr {
  position: absolute; top: -.4rem; right: -.4rem;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  border: none;
  background: var(--erreur);
  color: #fff;
  font-size: .9rem; line-height: 1;
}
.vignette select {
  width: 100%;
  margin-top: .25rem;
  font-size: .72rem;
  border: 1px solid var(--bord);
  border-radius: .4rem;
  padding: .15rem;
  background: var(--fond);
}

/* Chips (tailles, couleurs, catégories) */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  border: 1.5px solid var(--bord);
  background: var(--fond);
  color: var(--texte);
  border-radius: 2rem;
  padding: .5rem .85rem;
  font-size: .95rem;
}
.chip.actif {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.ajout-libre { display: flex; gap: .45rem; margin-top: .55rem; }
.ajout-libre input { flex: 1; }
.ajout-libre button {
  width: 2.9rem;
  border: 1.5px solid var(--bord);
  border-radius: .6rem;
  background: var(--fond);
  font-size: 1.3rem;
  color: var(--accent-fonce);
}

/* Prix */
.ligne-prix { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.ligne-prix label { font-size: .72rem; color: var(--texte-doux); display: block; }
.ligne-prix input { margin-top: .25rem; }
#input-vente { font-weight: 700; color: var(--accent-fonce); }

/* Stepper stock */
.stepper { display: flex; gap: .5rem; align-items: center; }
.stepper input { width: 5rem; text-align: center; }
.stepper button {
  width: 3rem; height: 2.8rem;
  border: 1.5px solid var(--bord);
  border-radius: .6rem;
  background: var(--fond);
  font-size: 1.4rem;
}

/* Liste des produits saisis + historique des envois */
#liste-produits, .liste-historique { list-style: none; margin: 0; padding: 0; }
#liste-produits li, .liste-historique li {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--bord);
}
#liste-produits li:last-child, .liste-historique li:last-child { border-bottom: none; }
#liste-produits img, .liste-historique img {
  width: 3.2rem; height: 3.2rem;
  object-fit: cover; border-radius: .5rem;
  background: var(--fond);
}
#liste-produits .infos, .liste-historique .infos { flex: 1; min-width: 0; }
#liste-produits .nom, .liste-historique .nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#liste-produits .detail, .liste-historique .detail { font-size: .78rem; color: var(--texte-doux); }
.liste-historique { margin-bottom: .6rem; }
#liste-produits .suppr-produit {
  border: none; background: none;
  color: var(--erreur);
  font-size: 1.2rem;
  padding: .4rem;
}

/* Dialog config */
dialog {
  border: none; border-radius: 1rem;
  padding: 1.2rem;
  width: min(92vw, 22rem);
}
dialog::backdrop { background: rgba(44, 36, 32, .5); }
dialog label { display: block; margin-bottom: .8rem; font-size: .85rem; color: var(--texte-doux); }
dialog input { margin-top: .3rem; }
dialog .primaire { width: 100%; }

/* Toast */
#toast {
  position: fixed; left: 50%; bottom: 1.2rem;
  transform: translateX(-50%);
  background: var(--texte);
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: .7rem;
  font-size: .92rem;
  max-width: 90vw;
  text-align: center;
  z-index: 50;
}
#toast.ok { background: var(--ok); }
#toast.erreur { background: var(--erreur); }

/* Profils : formats (thé), champs spécifiques */
select, textarea {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  padding: .65rem .7rem;
  border: 1px solid var(--bord);
  border-radius: .6rem;
  background: var(--fond);
}
.vignette select { font-size: .72rem; padding: .15rem; border-radius: .4rem; }
.champ { display: block; font-size: .85rem; color: var(--texte-doux); margin-bottom: .75rem; }
.champ select, .champ textarea, .champ input { margin-top: .25rem; color: var(--texte); }
.champ .aide { display: block; }
.format-ligne { border: 1px solid var(--bord); border-radius: .7rem; padding: .6rem .7rem; margin-bottom: .5rem; }
.format-tete { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; font-weight: 600; }
.format-tete input { width: 1.4rem; height: 1.4rem; accent-color: var(--accent); }
.format-detail { margin-top: .6rem; }
.format-detail > label { display: block; margin-top: .5rem; font-size: .72rem; color: var(--texte-doux); }
.format-detail > label input { width: 6rem; margin-top: .25rem; display: block; }
.format-detail .prix-vente { font-weight: 700; color: var(--accent-fonce); }

/* Habillage par profil (variables posées par app.js ; absentes = rendu d'origine) */
h1, h2 { font-family: var(--police-titre, inherit); }
.valider { background: var(--accent-valider, var(--accent)); }