/* ============================================================================
   STOCKERIA — design system propre, orienté "poste de travail" de gestion.
   Principes : densité, lisibilité des chiffres, tableaux triables, maître-détail,
   couleur réservée au sens (statut, action), jamais décorative.
   ========================================================================= */

:root {
  /* --- Neutres (base graphite) --- */
  --n-0:  #ffffff;
  --n-25: #fbfbfc;
  --n-50: #f6f7f9;
  --n-100:#eef0f3;
  --n-150:#e4e7ec;
  --n-200:#d7dbe2;
  --n-300:#b9c0cb;
  --n-400:#8d96a5;
  --n-500:#6b7484;
  --n-600:#4d5665;
  --n-700:#39414e;
  --n-800:#252c37;
  --n-900:#171c24;
  --n-950:#0f131a;

  /* --- Accent (actions) --- */
  --a-50:  #eef4ff;
  --a-100: #dbe6ff;
  --a-300: #93b4fd;
  --a-500: #3b6df4;
  --a-600: #2657d8;
  --a-700: #1d44ad;

  /* --- Sémantique --- */
  --ok-50:#e9f7ef;  --ok-500:#12854a;  --ok-700:#0b5c33;
  --wa-50:#fff5e6;  --wa-500:#b3660a;  --wa-700:#8a4e07;
  --da-50:#fdecec;  --da-500:#c62f2f;  --da-700:#961f1f;
  --in-50:#eef2f7;  --in-500:#4a6280;

  --text:      var(--n-900);
  --text-2:    var(--n-600);
  --text-3:    var(--n-400);
  --line:      var(--n-150);
  --line-2:    var(--n-200);
  --surface:   var(--n-0);
  --canvas:    var(--n-50);

  --r-sm: 4px;
  --r:    6px;
  --r-lg: 10px;

  --sh-1: 0 1px 2px rgba(15,19,26,.06);
  --sh-2: 0 4px 14px rgba(15,19,26,.10);
  --sh-3: 0 16px 48px rgba(15,19,26,.20);

  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --sidebar-w: 214px;
  --topbar-h: 48px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--canvas); color: var(--text); font-family: var(--font); font-size: 13.5px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--a-600); text-decoration: none; }
h1,h2,h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }

/* ======================================================== SHELL =========== */
#app { min-height: 100%; }
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100dvh; }

.side { background: var(--n-900); color: var(--n-300); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100dvh; }
.side__brand { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: var(--topbar-h);
  color: #fff; font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; border-bottom: 1px solid var(--n-800); }
.side__brand .dot { width: 22px; height: 22px; border-radius: 5px; background: var(--a-500); display: grid; place-items: center; color: #fff; flex: 0 0 auto; }

.side__parc { margin: 10px 10px 6px; }
.side__parc button { width: 100%; display: flex; align-items: center; gap: 8px; background: var(--n-800); border: 1px solid var(--n-700);
  color: var(--n-100); border-radius: var(--r); padding: 7px 9px; text-align: left; }
.side__parc button:hover { background: var(--n-700); }
.side__parc .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 12.5px; }
.side__parc .cap { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--n-400); display: block; }
.side__parc .menu { display: none; margin-top: 4px; background: var(--n-800); border: 1px solid var(--n-700); border-radius: var(--r); overflow: hidden; }
.side__parc.open .menu { display: block; }
.side__parc .menu button { border: 0; border-radius: 0; background: transparent; }
.side__parc .menu button.on { color: #fff; background: var(--a-700); }

.side__nav { flex: 1; overflow-y: auto; padding: 6px 8px; }
.side__nav a { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--r); color: var(--n-300);
  font-weight: 550; font-size: 13px; margin-bottom: 1px; }
.side__nav a svg { width: 16px; height: 16px; opacity: .85; flex: 0 0 auto; }
.side__nav a:hover { background: var(--n-800); color: #fff; }
.side__nav a.on { background: var(--a-600); color: #fff; }
.side__nav a.on svg { opacity: 1; }
.side__nav .grp { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--n-500); padding: 12px 9px 5px; font-weight: 700; }

.side__foot { border-top: 1px solid var(--n-800); padding: 8px; }
.side__user { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r); }
.side__user:hover { background: var(--n-800); }
.side__user .av { width: 26px; height: 26px; border-radius: 50%; background: var(--a-600); color: #fff; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; flex: 0 0 auto; }
.side__user .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--n-100); font-weight: 600; font-size: 12.5px; }
.side__user .out { color: var(--n-400); display: grid; place-items: center; padding: 3px; border-radius: 4px; cursor: pointer; }
.side__user .out:hover { color: #fff; background: var(--n-700); }

/* ---- zone principale ---- */
.wrap { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; padding: 0 16px; position: sticky; top: 0; z-index: 20; }
.topbar h1 { font-size: 15px; font-weight: 650; }
.topbar .sp { flex: 1; }
.topbar .crumb { color: var(--text-3); font-size: 12.5px; }
.main { padding: 14px 16px 40px; min-width: 0; }

@media (max-width: 880px) {
  .app { grid-template-columns: 1fr; }
  .side { position: sticky; height: auto; flex-direction: row; align-items: center; gap: 6px; padding-right: 8px; overflow-x: auto; }
  .side__brand { border: 0; padding-right: 6px; }
  .side__parc, .side__foot { display: none; }
  .side__nav { display: flex; padding: 6px; gap: 4px; }
  .side__nav .grp { display: none; }
  .side__nav a { white-space: nowrap; }
  .main { padding: 12px; }
}

/* ======================================================== TOOLBAR ========= */
.tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tools .sp { flex: 1; }
.search { position: relative; min-width: 220px; }
.search input { padding-left: 34px; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); width: 14px; height: 14px; }

/* ======================================================== CONTROLS ========
   Deux pièges évités ici :
   1) On ne cible PAS `input[type=text]` : un <input> SANS attribut `type` se
      comporte comme du texte mais ne correspond pas à ce sélecteur — il
      garderait la bordure « inset 2px » du navigateur.
   2) On garde une spécificité d'élément (0,0,1) : un `input:not(…):not(…)`
      pèserait (0,9,1) et écraserait les règles de composant (.search input…).
   D'où : on style TOUS les champs, puis on remet à zéro les types non textuels.
   ======================================================================== */
input, select, textarea {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 36px; background-color: var(--surface, #fff); color: var(--text, #171c24);
  font-family: inherit; font-size: 13.5px; line-height: 1.4;
  /* bordure en propriétés séparées + repli : un `border: 1px solid var(--x)`
     invalide devient « pas de bordure du tout ». */
  border-width: 1px; border-style: solid; border-color: var(--n-200, #d7dbe2);
  border-radius: 8px; padding: 0 11px; margin: 0;
  box-shadow: 0 1px 1px rgba(15,19,26,.03) inset;
  transition: border-color .12s, box-shadow .12s, background-color .12s; }
textarea { height: auto; min-height: 76px; padding: 9px 11px; resize: vertical; line-height: 1.5; }

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--n-300, #b9c0cb); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--a-500, #3b6df4);
  box-shadow: 0 0 0 3px rgba(59,109,244,.16); background-color: #fff; }
input:disabled, select:disabled, textarea:disabled { background-color: var(--n-50, #f6f7f9); color: var(--n-500, #6b7484);
  border-color: var(--n-150, #e4e7ec); box-shadow: none; }
input[readonly] { background-color: var(--n-25, #fbfbfc); }
input::placeholder, textarea::placeholder { color: var(--n-400, #8d96a5); opacity: 1; }

/* --- exceptions : types qui ne sont pas des champs de saisie textuelle --- */
input[type=checkbox], input[type=radio] {
  width: 16px; height: 16px; flex: 0 0 auto; -webkit-appearance: auto; appearance: auto;
  accent-color: var(--a-600); border: 0; padding: 0; background: none; box-shadow: none; cursor: pointer; }
input[type=file], input[type=range], input[type=color], input[type=image] {
  height: auto; border: 0; padding: 0; background: none; box-shadow: none; }
input[type=submit], input[type=button], input[type=reset] { width: auto; cursor: pointer; }

/* --- affinages par type --- */
input[type=number] { font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=date], input[type=datetime-local], input[type=time] { padding-right: 8px; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
input[type=date]:hover::-webkit-calendar-picker-indicator, input[type=datetime-local]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }

select { cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238d96a5' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; }
/* champ en erreur */
input.bad, select.bad { border-color: var(--da-500); box-shadow: 0 0 0 3px rgba(198,47,47,.14); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 13px;
  background: var(--surface); border: 1px solid var(--n-200); border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--n-700); white-space: nowrap; box-shadow: 0 1px 1px rgba(15,19,26,.03);
  transition: background .12s, border-color .12s, color .12s; }
.btn:hover { background: var(--n-50); border-color: var(--n-300); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }
.btn--primary { background: var(--a-600); border-color: var(--a-600); color: #fff; box-shadow: 0 1px 2px rgba(38,87,216,.3); }
.btn--primary:hover { background: var(--a-700); border-color: var(--a-700); }
.btn--danger { background: var(--surface); border-color: #f0c2c2; color: var(--da-500); }
.btn--danger:hover { background: var(--da-50); border-color: var(--da-500); }
.btn--ok { background: var(--ok-500); border-color: var(--ok-500); color: #fff; }
.btn--ok:hover { background: var(--ok-700); }
.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.btn--ghost:hover { background: var(--n-100); }
.btn--sm { height: 27px; padding: 0 9px; font-size: 12px; border-radius: 6px; }
.btn--sm svg { width: 13px; height: 13px; }
.btn--icon { width: 34px; padding: 0; }
.btn:disabled { opacity: .5; pointer-events: none; }

/* segmented (sous-onglets) */
.seg { display: inline-flex; background: var(--n-100); border-radius: var(--r); padding: 2px; gap: 2px; }
.seg button { border: 0; background: transparent; border-radius: 4px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }

/* ======================================================== TABLE =========== */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.panel__head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--n-25); }
.panel__head h2 { font-size: 12.5px; font-weight: 650; }
.panel__head .sp { flex: 1; }

.tbl-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th { position: sticky; top: 0; background: var(--n-50); z-index: 1;
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2);
  font-weight: 700; padding: 7px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--text); }
table.data th .ar { opacity: .35; margin-left: 3px; }
table.data th.sorted .ar { opacity: 1; color: var(--a-600); }
table.data td { padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
table.data tbody tr:hover { background: var(--n-25); }
table.data tbody tr.sel { background: var(--a-50); }
table.data tbody tr.clickable { cursor: pointer; }
table.data td.r, table.data th.r { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.mono { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
table.data .t-main { font-weight: 600; }
table.data .t-sub { color: var(--text-3); font-size: 11.5px; }
table.data tbody tr:last-child td { border-bottom: 0; }
.tbl-empty { padding: 40px 16px; text-align: center; color: var(--text-3); }

/* ======================================================== TAGS =========== */
.tag { display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.tag--ok { background: var(--ok-50); color: var(--ok-700); }
.tag--wa { background: var(--wa-50); color: var(--wa-700); }
.tag--da { background: var(--da-50); color: var(--da-700); }
.tag--in { background: var(--in-50); color: var(--in-500); }
.tag--neutral { background: var(--n-100); color: var(--text-2); }
.tag--solid { background: var(--da-500); color: #fff; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dot--ok { background: var(--ok-500); } .dot--wa { background: var(--wa-500); } .dot--da { background: var(--da-500); } .dot--n { background: var(--n-300); }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--r-sm);
  background: var(--n-100); color: var(--text-2); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.chip b { color: var(--text); font-weight: 650; }
.muted { color: var(--text-2); } .dim { color: var(--text-3); }

/* ======================================================== KPI ============ */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 11px 13px; }
.kpi .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 700; }
.kpi .v { font-size: 26px; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.kpi .s { font-size: 11.5px; color: var(--text-3); }
.kpi.ok .v { color: var(--ok-500); } .kpi.wa .v { color: var(--wa-500); } .kpi.da .v { color: var(--da-500); } .kpi.ac .v { color: var(--a-600); }
.kpi.clickable { cursor: pointer; } .kpi.clickable:hover { border-color: var(--a-300); box-shadow: var(--sh-1); }

/* ======================================================== DRAWER ========= */
.drawer-bg { position: fixed; inset: 0; background: rgba(15,19,26,.34); z-index: 60; display: flex; justify-content: flex-end; }
.drawer { background: var(--surface); width: min(1040px, 100%); height: 100%; display: flex; flex-direction: column; box-shadow: var(--sh-3); }
.drawer__head { padding: 15px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 10px; }
.drawer__head h2 { font-size: 15.5px; font-weight: 680; }
.drawer__head .sub { color: var(--text-3); font-size: 12px; margin-top: 1px; }
.drawer__head .sp { flex: 1; }
.drawer__x { border: 0; background: transparent; color: var(--text-3); font-size: 17px; line-height: 1; padding: 4px 6px; border-radius: 4px; }
.drawer__x:hover { background: var(--n-100); color: var(--text); }
.drawer__tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--n-25); }
.drawer__tabs button { border: 0; background: transparent; padding: 8px 11px; font-size: 12.5px; font-weight: 600; color: var(--text-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.drawer__tabs button:hover { color: var(--text); }
.drawer__tabs button.on { color: var(--a-600); border-bottom-color: var(--a-600); }
.drawer__body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.drawer__foot { border-top: 1px solid var(--line); padding: 12px 20px; display: flex; gap: 8px; justify-content: flex-end; background: var(--n-25); }
@media (max-width: 1080px) { .drawer { width: 100%; } }
.drawer__body { overflow-x: hidden; }   /* jamais de barre horizontale */

/* modale centrée (formulaires courts) */
.modal-bg { position: fixed; inset: 0; background: rgba(15,19,26,.34); z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--surface); border-radius: 12px; width: min(580px, 100%); max-height: 90vh; overflow-y: auto; box-shadow: var(--sh-3); }
.modal__head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.modal__head h2 { font-size: 15px; font-weight: 680; } .modal__head .sp { flex: 1; }
.modal__body { padding: 20px; }
.modal__foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; background: var(--n-25); }

/* ======================================================== FORMS ========== */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px; }
.fields.c3 { grid-template-columns: 1fr 1fr 1fr; }
.f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.f.full { grid-column: 1 / -1; }
.f > label { font-size: 11.5px; font-weight: 650; color: var(--n-600); letter-spacing: .01em; }
.f > label .req { color: var(--da-500); margin-left: 2px; }
.f .hint { font-size: 11.5px; color: var(--text-3); line-height: 1.35; }
.f--check { flex-direction: row; align-items: center; gap: 9px; background: var(--n-25); border: 1px solid var(--n-150);
  border-radius: 8px; padding: 0 11px; height: 36px; }
.f--check label { font-size: 13px; color: var(--text); font-weight: 550; cursor: pointer; }
.f--check input { width: 16px; height: 16px; accent-color: var(--a-600); margin: 0; cursor: pointer; }
.fset { margin-bottom: 22px; }
.fset:last-child { margin-bottom: 0; }
.fset__t { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--n-500); font-weight: 750;
  padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
@media (max-width: 620px) { .fields, .fields.c3 { grid-template-columns: 1fr; } }

/* ligne éditable (association fournisseur/prix) */
.erow { display: grid; grid-template-columns: 1fr 110px 110px 120px auto; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.erow:last-of-type { border-bottom: 0; }
.erow__h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); font-weight: 700; padding-bottom: 4px; }
@media (max-width: 720px) { .erow { grid-template-columns: 1fr 1fr; } }

/* infos clé/valeur */
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 5px 12px; font-size: 13px; }
.kv dt { color: var(--text-3); font-size: 12px; }
.kv dd { margin: 0; font-weight: 550; }

/* barre de niveau */
.bar { height: 5px; border-radius: 3px; background: var(--n-150); overflow: hidden; min-width: 54px; }
.bar i { display: block; height: 100%; border-radius: 3px; background: var(--ok-500); }
.bar i.wa { background: var(--wa-500); } .bar i.da { background: var(--da-500); }

/* ======================================================== LOGIN ========== */
.login { min-height: 100dvh; display: grid; place-items: center; background: var(--canvas); padding: 20px; }
.login__box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2);
  padding: 26px; width: min(460px, 100%); }
.login__brand { display: flex; align-items: center; gap: 8px; justify-content: center; font-weight: 700; font-size: 17px; margin-bottom: 3px; }
.login__brand .dot { width: 26px; height: 26px; border-radius: 6px; background: var(--a-500); display: grid; place-items: center; color: #fff; }
.login__hint { text-align: center; color: var(--text-3); font-size: 12.5px; margin-bottom: 18px; }
.ppl { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ppl button { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ppl button:hover { border-color: var(--a-300); background: var(--a-50); }
.ppl .av { width: 38px; height: 38px; border-radius: 50%; background: var(--n-100); color: var(--n-600); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.ppl .nm { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.25; }
.pin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; max-width: 250px; margin: 0 auto; }
.pin button { height: 46px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); font-size: 17px; font-weight: 600; }
.pin button:hover { background: var(--n-50); }
.dots { display: flex; gap: 9px; justify-content: center; margin: 6px 0 16px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--n-200); }
.dots i.on { background: var(--a-600); }

/* ======================================================== SCAN =========== */
.scan-overlay { position: fixed; inset: 0; z-index: 90; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.scan-overlay video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: relative; width: min(78vw, 420px); height: 150px; border: 2px solid var(--a-500); border-radius: 8px; box-shadow: 0 0 0 3000px rgba(0,0,0,.5); }
.scan-msg { position: relative; color: #fff; font-weight: 600; text-align: center; padding: 0 20px; }
.scan-manual { position: relative; width: min(78vw, 420px); text-align: center; background: #fff; border-radius: var(--r); padding: 9px; }
.scan-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; background: #fff; border: 0; border-radius: var(--r); padding: 8px 12px; font-weight: 600; }

/* ======================================================== MISC =========== */
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--n-900); color: #fff;
  border-radius: var(--r); padding: 9px 14px; font-size: 12.5px; font-weight: 550; z-index: 100; box-shadow: var(--sh-2); max-width: 90vw; }
.toast.err { background: var(--da-500); }
.toast.hidden { display: none; }
.loader { display: flex; justify-content: center; padding: 36px; }
.spin { width: 20px; height: 20px; border: 2px solid var(--n-200); border-top-color: var(--a-600); border-radius: 50%; animation: sp .8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.sect { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); font-weight: 750; margin: 18px 0 8px; }
.sect:first-child { margin-top: 0; }
.empty { padding: 36px 16px; text-align: center; color: var(--text-3); }
.grid2 { display: grid; gap: 12px; }
@media (min-width: 900px) { .grid2 { grid-template-columns: 1fr 1fr; } }

/* ============================================================================
   Surcharges de composant sur les champs.
   Déclarées EN FIN DE FICHIER pour l'emporter à la fois par la spécificité et
   par l'ordre : la base `input {}` ci-dessus ne doit jamais les écraser.
   ========================================================================= */
.search input { padding-left: 34px; }                    /* place pour l'icône loupe */
.tools select, .tools input[type=search] { width: auto; min-width: 180px; }
.scan-manual { width: min(78vw, 420px); text-align: center; height: auto; padding: 10px; }
.f--check input[type=checkbox] { width: 16px; height: 16px; }
.erow input, .erow select { height: 32px; }              /* lignes éditables compactes */
table.data input, table.data select { height: 30px; font-size: 12.5px; }

/* ============================================================ SOUS-BLOCS ===
   Regroupe des champs qui vont ensemble (ex. un conditionnement) pour éviter
   qu'ils se noient dans une grille uniforme.
   ========================================================================= */
.subcard { border: 1px solid var(--line); border-radius: 9px; padding: 13px; background: var(--n-25); }
.subcard__t { font-size: 11.5px; font-weight: 700; color: var(--n-600); margin-bottom: 11px;
  display: flex; align-items: center; gap: 7px; }
.subcard__t .tag { font-weight: 700; }
.subcard .fields { gap: 10px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .cols2 { grid-template-columns: 1fr; } }
/* colis : autant de colonnes que la largeur le permet, sans débordement */
.cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.subcard .fields { grid-template-columns: 1fr 1fr; }
.subcard .fields .f.full { grid-column: 1 / -1; }
/* lignes d'états de conservation */
.state-row { display: grid; grid-template-columns: 1.4fr 90px 1.2fr 110px 34px; gap: 8px; align-items: end; margin-bottom: 8px; }
@media (max-width: 860px) { .state-row { grid-template-columns: 1fr 1fr; } }
.help { display: inline-flex; width: 15px; height: 15px; border-radius: 50%; background: var(--n-200); color: var(--n-700);
  font-size: 10px; font-weight: 800; align-items: center; justify-content: center; cursor: help; margin-left: 4px; }
.note { background: var(--a-50); border: 1px solid var(--a-100); border-radius: 8px; padding: 10px 12px; font-size: 12px; color: var(--n-700); line-height: 1.5; }
.note b { color: var(--n-900); }

/* ---- sélecteur d'image produit ---- */
.imgpick { display: flex; gap: 14px; align-items: flex-start; }
.imgpick__box { width: 104px; height: 104px; border-radius: 9px; border: 1px dashed var(--n-300); background: var(--n-25);
  display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; position: relative; }
.imgpick__box img { width: 100%; height: 100%; object-fit: cover; }
.imgpick__box .ph { color: var(--n-400); font-size: 11px; text-align: center; padding: 0 6px; line-height: 1.3; }
.imgpick__side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.imgpick__side .row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- résultats OpenFoodFacts ---- */
.off-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.off-item { display: flex; gap: 11px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); cursor: pointer; }
.off-item:hover { border-color: var(--a-300); background: var(--a-50); }
.off-item img { width: 46px; height: 46px; object-fit: contain; border-radius: 6px; background: var(--n-50); flex: 0 0 auto; }
.off-item .no { width: 46px; height: 46px; border-radius: 6px; background: var(--n-100); flex: 0 0 auto; }
.off-item .t { flex: 1; min-width: 0; }
.off-item .t b { display: block; font-size: 13px; font-weight: 650; }
.off-item .t span { font-size: 11.5px; color: var(--text-3); }
.nutri { width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 11px; text-transform: uppercase; }
.nutri.a { background: #038141; } .nutri.b { background: #85bb2f; } .nutri.c { background: #fecb02; color: #333; }
.nutri.d { background: #ee8100; } .nutri.e { background: #e63e11; }

/* ---- sélection multiple (import Qweekle) ---- */
.pick { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.pick__grp { display: flex; align-items: center; gap: 9px; padding: 7px 11px; background: var(--n-50);
  border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--n-700); }
.pick__grp:first-child { border-top: 0; }
.pick__grp .sp { flex: 1; }
.pick__grp .cnt { font-weight: 500; color: var(--text-3); font-size: 11.5px; }
.pick__row { display: flex; align-items: center; gap: 9px; padding: 6px 11px 6px 26px; border-bottom: 1px solid var(--n-100); font-size: 13px; }
.pick__row:hover { background: var(--n-25); }
.pick__row .sp { flex: 1; }
.pick__scroll { max-height: 44vh; overflow-y: auto; }