/* ===========================
   Design system (variables)
   =========================== */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --primary:#111827;
  --accent:#0ea5e9;
  --accent-2:#06b6d4;

  /* fournisseurs */
  --sup-poularde:#fca5a5;         /* La Poularde */
  --sup-foodflow:#fde68a;         /* FoodFlow/Daumesnil */
  --sup-milliet:#a5b4fc;          /* J. Milliet */
  --sup-vinentete:#86efac;        /* Le Vin en Tête */
  --sup-champagne:#fbcfe8;        /* Maison Champagne */
  --sup-autres:#d4d4d8;           /* Autres */

  /* catégories (sur-badges) */
  --cat-food:#e9f5ee;
  --cat-drink:#e9f2ff;
  --cat-clean:#fff0f6;
  --cat-other:#f3f4f6;
}

/* ===========================
   Reset/structure
   =========================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
#root{min-height:100%}

/* ===========================
   Header
   =========================== */
header{
  background:var(--primary);
  color:#fff;
  padding:16px 18px;
  border-bottom:1px solid #0b1220;
}
header h1{margin:0 0 4px 0; font-size:20px}
header p{margin:0; opacity:.85}

/* ===========================
   Layout
   =========================== */
main{
  display:grid;
  grid-template-columns:1fr 380px; /* liste | panier */
  gap:16px;
  padding:16px;
  max-width:1240px;
  margin:0 auto;
}
@media (max-width:980px){
  main{ grid-template-columns:1fr; }
}

/* ===========================
   Navigation (familles / sous-cats)
   =========================== */
nav#categories{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  padding:12px 16px;
  background:#f1f5f9;
  border-bottom:1px solid var(--border);
}
.nav-group{
  display:flex; flex-direction:column; gap:8px;
  padding:8px 10px; background:#fff;
  border:1px solid var(--border); border-radius:10px;
}
.nav-group .nav-title{
  font-weight:700; font-size:14px; color:#0f172a;
  display:flex; align-items:center; gap:6px;
}
.nav-row{ display:flex; flex-wrap:wrap; gap:8px; }

.pill{
  padding:6px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  color:#0f172a;
  cursor:pointer;
  font-size:14px;
}
.pill:hover{ border-color:#cfd8e3; }
.pill.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* ===========================
   Cards / conteneurs
   =========================== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 2px 8px rgba(15,23,42,.03);
}
.card.pad{ padding:14px; }
.section-title{ font-weight:600; margin-bottom:6px; }
.kicker{ font-size:13px; color:var(--muted); }

/* ===========================
   Liste des items
   =========================== */
#items{
  display:grid;
  gap:10px;
}
.item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}
.item .emoji{ font-size:22px }
.item .grow{ flex:1; min-width:0 }
.item .name{
  font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.badges{ display:flex; align-items:center; gap:6px; }
.badge{
  font-size:12px;
  background:#f1f5f9;
  border:1px solid var(--border);
  padding:3px 8px;
  border-radius:999px;
  color:#111;
  white-space:nowrap;
}

/* Cat-badges de survol rapide (optionnel) */
.badge--food{ background:var(--cat-food); }
.badge--drink{ background:var(--cat-drink); }
.badge--clean{ background:var(--cat-clean); }
.badge--other{ background:var(--cat-other); }

/* ===========================
   Fournisseur badges (2 façons : classe OU data-attribute)
   =========================== */
.sup-La\ Poularde,
[data-supplier="La Poularde"]{ background:var(--sup-poularde) !important; }

.sup-FoodFlow\/Daumesnil,
[data-supplier="FoodFlow/Daumesnil"]{ background:var(--sup-foodflow) !important; }

.sup-J\.\ Milliet,
[data-supplier="J. Milliet"]{ background:var(--sup-milliet) !important; }

.sup-Le\ Vin\ en\ Tête,
[data-supplier="Le Vin en Tête"]{ background:var(--sup-vinentete) !important; }

.sup-Maison\ Champagne,
[data-supplier="Maison Champagne"]{ background:var(--sup-champagne) !important; }

.sup-Autres,
[data-supplier="Autres"]{ background:var(--sup-autres) !important; }

/* ===========================
   Inputs / Selects / Buttons
   =========================== */
.input,.select,.btn{
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  height:38px;
  padding:0 12px;
  font-size:14px;
}
.input{ min-width:260px; }
.select{ min-width:150px; }
.btn{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:center;
}
.btn:hover{ box-shadow:0 1px 0 rgba(0,0,0,.03) inset; }
.btn.primary{
  background:var(--primary); color:#fff; border-color:var(--primary);
}
.btn.accent{
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.btn.ghost{
  background:#fff; color:#0f172a;
}

/* Stepper quantité */
.qtybox{
  display:flex; align-items:center;
  border:1px solid var(--border); border-radius:10px;
  overflow:hidden;
}
.qtybox button{
  height:36px; width:36px; border:0; background:#f8fafc; cursor:pointer;
}
.qtybox input{
  width:70px; border:0; text-align:center; height:36px; font-size:14px;
}

/* ===========================
   Sidebar (panier collant)
   =========================== */
aside#basket{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  position:sticky;
  top:16px;
  height:fit-content;
  max-height:calc(100vh - 32px);
  display:flex; flex-direction:column; gap:10px;
}
.sidebar-card{ overflow:auto; }

/* textarea aperçu */
textarea{
  width:100%;
  min-height:240px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:13px;
  background:#fbfcfe;
}

/* ===========================
   Table (panier détaillé / admin)
   =========================== */
.table{
  width:100%;
  border-collapse:collapse;
}
.table th,.table td{
  border-bottom:1px solid var(--border);
  padding:8px;
  text-align:left;
  vertical-align:middle;
  background:#fff;
}
.table th{
  background:#f8fafc;
  position:sticky; top:0; z-index:1;
}
.t-right{text-align:right}

/* ===========================
   Modales (panier / ajout ref)
   =========================== */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  z-index:1000;
}
.modal{
  width:min(980px,95vw);
  max-height:min(85vh,100%);
  overflow:auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.modal .row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.modal .actions{ margin-left:auto; display:flex; gap:8px; }
.modal .form-grid{
  display:grid; gap:10px;
  grid-template-columns:1fr 1fr;
}
@media (max-width:720px){
  .modal .form-grid{ grid-template-columns:1fr; }
}

/* ===========================
   Utilitaires
   =========================== */
.row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.grow{ flex:1; min-width:0 }
.hidden{ display:none !important; }
.muted{ color:var(--muted) }
.pad-8{ padding:8px }
.mb-8{ margin-bottom:8px }
.mt-8{ margin-top:8px }

/* ===========================
   États / feedbacks
   =========================== */
.toast{
  position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
  background:#0f172a; color:#fff; padding:10px 14px; border-radius:999px;
  font-size:14px; box-shadow:0 10px 20px rgba(0,0,0,.15); z-index:1100;
}
.loading{ opacity:.6; pointer-events:none; }

/* ===========================
   Boutons de copie
   =========================== */
footer{
  padding:12px 16px;
  background:#f1f5f9;
  border-top:1px solid var(--border);
  text-align:center;
}
#copied{ margin-left:8px; color:#059669; font-weight:600; }

/* ===========================
   Cartes de “famille” (option si tu veux un look en grille)
   =========================== */
.family-card{
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:12px;
}
.family-title{
  display:flex; align-items:center; gap:8px;
  font-weight:700; margin-bottom:8px;
}
.family-subnav{
  display:flex; flex-wrap:wrap; gap:8px;
}

/* ===========================
   Erreur overlay (debug)
   =========================== */
#err{
  position:fixed; inset:0; background:#111a; color:#fff;
  padding:16px; white-space:pre-wrap;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  display:none; z-index:9999;
}

/* ===========================
   Accent focus/accessibilité
   =========================== */
:focus{
  outline:2px solid var(--accent-2);
  outline-offset:2px;
}