/* ============================================================
   GARAGE STOCK MANAGER — Système de design v2
   Thème : CLAIR haute lisibilité (atelier).
   Accent : VERT atelier. Densité compacte. Rendu pro.
   Typo : Space Grotesk (UI) + JetBrains Mono (codes & montants).
   Feuille autonome : chargée uniquement par les pages migrées en v2.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Neutres — papier légèrement teinté vert (douceur, moins clinique) */
  --bg:            oklch(0.966 0.008 165);
  --surface:       oklch(0.992 0.004 165);
  --surface-2:     oklch(0.976 0.007 165);
  --surface-ink:   oklch(0.270 0.020 175);   /* carte foncée (KPI héros) */
  --border:        oklch(0.912 0.006 230);
  --border-strong: oklch(0.858 0.010 230);

  --text:          oklch(0.275 0.018 220);
  --text-muted:    oklch(0.515 0.016 220);
  --text-faint:    oklch(0.640 0.012 220);
  --on-ink:        oklch(0.985 0.003 230);
  --on-ink-muted:  oklch(0.760 0.012 175);

  /* Palette catégorielle (donut & chips) */
  --cat-1: oklch(0.575 0.110 158);  /* vert (= accent)  */
  --cat-2: oklch(0.610 0.105 232);  /* acier            */
  --cat-3: oklch(0.700 0.130 72);   /* ambre            */
  --cat-4: oklch(0.580 0.130 300);  /* violet           */

  /* Accent — vert atelier */
  --accent:         oklch(0.560 0.110 158);
  --accent-strong:  oklch(0.480 0.108 156);
  --accent-soft:    oklch(0.955 0.034 160);
  --accent-line:    oklch(0.860 0.058 160);
  --on-accent:      oklch(0.995 0 0);

  /* Statuts */
  --ok:        oklch(0.540 0.110 158);  --ok-soft:      oklch(0.955 0.040 160);  --ok-line:      oklch(0.870 0.055 160);
  --warn:      oklch(0.680 0.125 72);   --warn-soft:    oklch(0.962 0.058 80);   --warn-line:    oklch(0.875 0.075 78);
  --neutral:   oklch(0.525 0.012 230);  --neutral-soft: oklch(0.942 0.004 230);  --neutral-line: oklch(0.882 0.008 230);
  --danger:    oklch(0.575 0.185 27);   --danger-soft:  oklch(0.958 0.040 25);   --danger-line:  oklch(0.880 0.060 27);

  /* Rayons */
  --r-xs: 5px; --r-sm: 8px; --r-md: 11px; --r-lg: 15px; --r-pill: 999px;

  /* Ombres */
  --sh-sm: 0 1px 2px oklch(0.4 0.02 230 / .06), 0 1px 1px oklch(0.4 0.02 230 / .04);
  --sh-md: 0 4px 10px oklch(0.4 0.02 230 / .07), 0 1px 3px oklch(0.4 0.02 230 / .06);
  --sh-lg: 0 12px 26px oklch(0.4 0.02 230 / .10), 0 2px 6px oklch(0.4 0.02 230 / .06);

  /* Espacement (compact) */
  --gap: clamp(11px, 1.2vw, 16px);
}

/* ---------- 2. RESET / BASE ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:"Space Grotesk", system-ui, sans-serif;
  background:
    radial-gradient(110% 55% at 100% -10%, oklch(0.955 0.020 160 / .50), transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.42;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.mono{ font-family:"JetBrains Mono", ui-monospace, monospace; font-feature-settings:"tnum" 1; letter-spacing:-.02em; }
a{ color:inherit; text-decoration:none; }
svg{ display:block; }

/* ---------- 3. BARRE DE NAVIGATION ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:oklch(0.99 0.003 230 / .86);
  backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:1320px; margin:0 auto;
  display:flex; align-items:center; gap:14px;
  padding:9px clamp(12px, 2.4vw, 28px);
}
.brand{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:16px; letter-spacing:-.01em; flex:0 0 auto; }
.brand .logo{
  width:31px; height:31px; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(160deg, var(--accent), var(--accent-strong));
  box-shadow:var(--sh-sm), inset 0 1px 0 oklch(1 0 0 / .30);
  color:var(--on-accent);
}
.brand .logo svg{ width:18px; height:18px; }
.brand .name{ white-space:nowrap; }
.brand .name b{ color:var(--text); }
.brand .name span{ color:var(--text-faint); font-weight:500; }

.navwrap{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:4px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:2px; justify-content:flex-end;
}
.navwrap::-webkit-scrollbar{ display:none; }

.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 11px; border-radius:var(--r-sm);
  color:var(--text-muted); font-weight:500; font-size:14px; white-space:nowrap;
  transition:background .16s, color .16s;
}
.nav-link:hover{ background:var(--surface-2); color:var(--text); }
.nav-link.active{ color:var(--accent-strong); background:var(--accent-soft); font-weight:600; }
.nav-link .ico{ width:16px; height:16px; }
.nav-sep{ width:1px; align-self:stretch; background:var(--border); margin:6px 3px; flex:0 0 auto; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap;
  padding:8px 14px; border-radius:var(--r-sm); border:1px solid transparent;
  font-weight:600; font-size:14px; cursor:pointer; font-family:inherit; text-decoration:none;
  /* défaut = action primaire (vert atelier) */
  background:linear-gradient(160deg, var(--accent), var(--accent-strong)); color:var(--on-accent);
  box-shadow:var(--sh-sm), inset 0 1px 0 oklch(1 0 0 / .22);
  transition:transform .12s, box-shadow .16s, background .16s, border-color .16s, opacity .16s;
}
.btn:hover{ box-shadow:var(--sh-md), inset 0 1px 0 oklch(1 0 0 / .22); text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }
.btn .ico{ width:16px; height:16px; }
.btn-primary{ background:linear-gradient(160deg, var(--accent), var(--accent-strong)); color:var(--on-accent); }
.btn-ghost,
.btn-secondary{ background:var(--surface); color:var(--text); border-color:var(--border-strong); box-shadow:var(--sh-sm); }
.btn-ghost:hover,
.btn-secondary:hover{ border-color:var(--text-faint); box-shadow:var(--sh-md); }
.btn-success{ background:linear-gradient(160deg, oklch(0.62 0.13 158), oklch(0.52 0.13 156)); color:#fff; }
.btn-danger{ background:linear-gradient(160deg, oklch(0.60 0.18 27), oklch(0.52 0.18 27)); color:#fff; }
.btn-sm{ padding:6px 10px; font-size:12.5px; }

/* ---------- 4. MISE EN PAGE ---------- */
.page{ max-width:1320px; margin:0 auto; padding:clamp(14px,1.8vw,22px) clamp(12px,2.4vw,28px) 44px; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.page-head h1{ font-size:clamp(21px,2.8vw,27px); font-weight:700; letter-spacing:-.02em; }
.page-head .sub{ color:var(--text-faint); font-size:13.5px; margin-top:2px; }
.page-head .sub b{ color:var(--text-muted); font-weight:600; }

.section{ margin-top:22px; }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.section-head h2{ font-size:16px; font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; gap:8px; }
.section-head h2 .tick{ width:4px; height:16px; border-radius:3px; background:var(--accent); }
.section-head .link{ color:var(--text-muted); font-size:13.5px; font-weight:500; display:inline-flex; align-items:center; gap:5px; }
.section-head .link:hover{ color:var(--accent-strong); }
.section-head .link svg{ width:14px; height:14px; }

/* ---------- 5. CARTE KPI ---------- */
.kpi-grid{ display:grid; grid-template-columns:1fr; gap:var(--gap); }
.kpi{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:14px 15px 13px; box-shadow:var(--sh-sm);
  transition:transform .14s, box-shadow .16s, border-color .16s; overflow:hidden;
  display:block; color:inherit;
}
.kpi:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); border-color:var(--border-strong); }
.kpi-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }
.kpi-label{ font-size:13px; color:var(--text-muted); font-weight:500; }
.kpi-ico{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; background:var(--accent-soft); color:var(--accent-strong); }
.kpi-ico svg{ width:18px; height:18px; }
.kpi-value{ font-size:clamp(26px,3.4vw,32px); font-weight:700; letter-spacing:-.02em; line-height:1; }
.kpi-value .unit{ font-size:.55em; font-weight:600; color:var(--text-faint); margin-left:2px; }
.kpi-note{ margin-top:8px; font-size:12.5px; color:var(--text-faint); display:inline-flex; align-items:center; gap:7px; }
.kpi-note .pill{ background:var(--ok-soft); color:var(--ok); border:1px solid var(--ok-line); padding:1px 8px; border-radius:var(--r-pill); font-weight:600; font-size:11.5px; }

.kpi.hero{ background:linear-gradient(165deg, var(--surface-ink), oklch(0.230 0.022 180)); border-color:oklch(0.34 0.02 180); color:var(--on-ink); }
.kpi.hero .kpi-label{ color:var(--on-ink-muted); }
.kpi.hero .kpi-value{ color:#fff; }
.kpi.hero .kpi-value .unit{ color:var(--on-ink-muted); }
.kpi.hero .kpi-ico{ background:oklch(0.56 0.11 158 / .20); color:oklch(0.78 0.11 160); }
.kpi.hero .kpi-note{ color:var(--on-ink-muted); }
.kpi.hero::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(80% 60% at 100% 0%, oklch(0.56 0.12 160 / .18), transparent 60%); }

.kpi.warnv .kpi-ico{ background:var(--warn-soft); color:oklch(0.54 0.12 70); }
.kpi.neutv .kpi-ico{ background:var(--neutral-soft); color:var(--neutral); }

/* ---------- 6. PANNEAU + GRAPHIQUES ---------- */
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:16px; box-shadow:var(--sh-sm); }
.charts{ display:grid; grid-template-columns:1fr; gap:var(--gap); }

.bars{ display:flex; flex-direction:column; gap:12px; margin-top:4px; }
.bar-row{ display:flex; flex-direction:column; gap:6px; }
.bar-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.bar-name{ font-size:14px; font-weight:500; color:var(--text); }
.bar-val{ font-size:13px; font-weight:600; color:var(--text-muted); }
.bar-val b{ color:var(--text); font-size:14.5px; }
.bar-track{ height:10px; border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--border); overflow:hidden; }
.bar-fill{ height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg, var(--accent-strong), var(--accent)); box-shadow:inset 0 1px 0 oklch(1 0 0 / .22); }
.bars.steel .bar-fill{ background:linear-gradient(90deg, oklch(0.44 0.020 230), oklch(0.6 0.018 230)); }

.donut-wrap{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:4px; }
.donut{ --d:150px; position:relative; width:var(--d); height:var(--d); flex:0 0 auto; border-radius:50%; box-shadow:var(--sh-sm); background:var(--surface-2); }
.donut-hole{ position:absolute; inset:27px; border-radius:50%; background:var(--surface); box-shadow:inset 0 0 0 1px var(--border), 0 1px 2px oklch(0.4 0.02 230 / .06); display:grid; place-content:center; text-align:center; }
.donut-hole .big{ font-size:27px; font-weight:700; letter-spacing:-.03em; line-height:1; }
.donut-hole .cap{ font-size:11px; color:var(--text-faint); font-weight:500; text-transform:uppercase; letter-spacing:.08em; margin-top:3px; }
.donut-legend{ flex:1 1 170px; display:flex; flex-direction:column; gap:2px; min-width:160px; }
.lg-row{ display:flex; align-items:center; gap:10px; padding:7px 6px; border-radius:var(--r-sm); transition:background .14s; }
.lg-row:hover{ background:var(--surface-2); }
.lg-dot{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.lg-name{ font-size:14px; font-weight:500; flex:1 1 auto; }
.lg-count{ font-size:14px; font-weight:700; }
.lg-pct{ font-size:12px; color:var(--text-faint); font-weight:500; width:40px; text-align:right; }

/* ---------- 7. CARTE PIÈCE + BADGE ---------- */
.parts{ display:grid; grid-template-columns:1fr; gap:var(--gap); }
.part{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:13px 14px 12px; box-shadow:var(--sh-sm);
  display:flex; flex-direction:column; gap:9px;
  transition:transform .14s, box-shadow .16s, border-color .16s; color:inherit;
}
.part:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); border-color:var(--border-strong); }
.part-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.part-code{ font-size:11.5px; letter-spacing:.03em; color:var(--text-faint); font-weight:500; }
.part-body{ display:flex; flex-direction:column; gap:3px; }
.part-name{ font-size:16px; font-weight:600; letter-spacing:-.01em; }
.part-veh{ font-size:13.5px; color:var(--text-muted); }
.part-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:1px; padding-top:10px; border-top:1px solid var(--border); }
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border); padding:3px 9px; border-radius:var(--r-pill); }
.chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--text-faint); }
.part-price{ font-size:17px; font-weight:700; letter-spacing:-.01em; }
.part-price .unit{ font-size:.7em; color:var(--text-faint); font-weight:600; }

.badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; letter-spacing:.01em; padding:4px 10px 4px 8px; border-radius:var(--r-pill); border:1px solid; }
.badge .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.badge.ok      { color:var(--ok);      background:var(--ok-soft);      border-color:var(--ok-line); }      .badge.ok .dot{ background:var(--ok); }
.badge.warn    { color:oklch(0.5 0.12 70); background:var(--warn-soft); border-color:var(--warn-line); }   .badge.warn .dot{ background:var(--warn); }
.badge.neutral { color:var(--neutral); background:var(--neutral-soft); border-color:var(--neutral-line); } .badge.neutral .dot{ background:var(--neutral); }
.badge.danger  { color:var(--danger);  background:var(--danger-soft);  border-color:var(--danger-line); }  .badge.danger .dot{ background:var(--danger); }

.legend{ display:flex; flex-wrap:wrap; gap:9px 16px; margin-top:22px; padding-top:16px; border-top:1px solid var(--border); color:var(--text-faint); font-size:12.5px; }
.legend .item{ display:inline-flex; align-items:center; gap:7px; }
.legend .dot{ width:9px; height:9px; border-radius:50%; }

/* ---------- 8. ÉTATS (chargement / erreur) ---------- */
.empty-state{ text-align:center; padding:2.5rem 1rem; color:var(--text-muted); }
.alert{ padding:0.75rem 1rem; border-radius:var(--r-md); margin-bottom:1rem; font-size:14px; }
.alert.alert-danger{ background:var(--danger-soft); border:1px solid var(--danger-line); color:var(--danger); }
.loader{ display:inline-block; width:1rem; height:1rem; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .6s linear infinite; vertical-align:middle; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- 9. RESPONSIVE ---------- */
@media (min-width:640px){
  .kpi-grid{ grid-template-columns:repeat(2, 1fr); }
  .parts{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:980px){
  .kpi-grid{ grid-template-columns:repeat(4, 1fr); }
  .charts{ grid-template-columns:1fr 1fr; }
  .parts{ grid-template-columns:repeat(3, 1fr); }
}

/* ============================================================
   10. COMPOSANTS DES AUTRES PAGES (migrées en v2)
   stock · nouvelle pièce · fiche · paramètres · scan · login
   ============================================================ */

/* conteneur générique = même gabarit que .page */
.container{ max-width:1320px; margin:0 auto; padding:clamp(14px,1.8vw,22px) clamp(12px,2.4vw,28px) 44px; }

h1,h2,h3{ line-height:1.2; letter-spacing:-.01em; }
main h2{ font-size:clamp(20px,2.6vw,25px); font-weight:700; margin-bottom:14px; }
main h3{ font-size:15.5px; font-weight:600; margin-bottom:11px; }

/* carte / panneau générique */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:18px; box-shadow:var(--sh-sm); margin-bottom:var(--gap); }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; }
.card-head h3{ margin-bottom:0; }
.btn-group{ display:flex; gap:8px; flex-wrap:wrap; }
.danger-zone{ border-color:var(--danger-line); background:linear-gradient(180deg, var(--danger-soft), var(--surface)); }

/* formulaires */
.form-group{ margin-bottom:14px; }
.form-group label{ display:block; margin-bottom:5px; font-size:13px; color:var(--text-muted); font-weight:600; }
.form-group small{ display:block; margin-top:5px; font-size:12px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }
input[type="text"], input[type="email"], input[type="number"], input[type="search"],
input[type="file"], select, textarea{
  width:100%; padding:9px 11px; background:var(--surface); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--r-sm);
  font-size:14.5px; font-family:inherit; transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
textarea{ min-height:84px; resize:vertical; }
select{ cursor:pointer; }

/* alertes (toutes variantes) */
.alert{ padding:11px 14px; border-radius:var(--r-sm); margin-bottom:14px; font-size:14px; border:1px solid; }
.alert.alert-info{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-strong); }
.alert.alert-success{ background:var(--ok-soft); border-color:var(--ok-line); color:var(--ok); }
.alert.alert-warning{ background:var(--warn-soft); border-color:var(--warn-line); color:oklch(0.5 0.12 70); }
.alert.alert-danger{ background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger); }

/* résultat IA */
.ai-result{ margin-top:12px; }
.ai-result .ai-result{ background:var(--accent-soft); border:1px solid var(--accent-line); padding:12px 14px; border-radius:var(--r-sm); font-size:14px; }
.ai-result strong{ display:block; margin-bottom:7px; color:var(--accent-strong); }

/* barre de filtres (stock) */
.filters{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:10px; margin-bottom:16px; align-items:center; }

/* compteur */
#count.alert{ background:var(--surface); border-color:var(--border); color:var(--text-muted); font-weight:500; }

/* grille de pièces (stock) + carte legacy .part-card */
.parts-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:var(--gap); }
.part-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  overflow:hidden; box-shadow:var(--sh-sm); color:inherit;
  transition:transform .14s, box-shadow .16s, border-color .16s;
}
.part-card:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); border-color:var(--border-strong); }
.part-card .thumb{ width:100%; height:150px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:13px; border-bottom:1px solid var(--border); }
.part-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.part-card .info{ padding:13px 14px; }
.part-card .info .code{ font-family:"JetBrains Mono", monospace; font-size:11.5px; color:var(--text-faint); }
.part-card .info .nom{ font-weight:600; font-size:15.5px; margin:3px 0; }
.part-card .info .meta{ font-size:13px; color:var(--text-muted); }
.part-card .info .footer{ display:flex; justify-content:space-between; align-items:center; margin-top:9px; padding-top:9px; border-top:1px solid var(--border); }
.part-card .info .footer span:last-child{ font-weight:700; font-family:"JetBrains Mono", monospace; }

/* badges legacy (statuts par classe dédiée) */
.badge.badge-stock   { color:var(--ok);      background:var(--ok-soft);      border:1px solid var(--ok-line); }
.badge.badge-reserve { color:oklch(0.5 0.12 70); background:var(--warn-soft); border:1px solid var(--warn-line); }
.badge.badge-vendu   { color:var(--neutral); background:var(--neutral-soft); border:1px solid var(--neutral-line); }
.badge.badge-sorti   { color:var(--danger);  background:var(--danger-soft);  border:1px solid var(--danger-line); }

/* fiche : étiquetage, photos, QR */
.etiquetage-row{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.etiquetage-info{ flex:1; min-width:220px; }
.photo-strip{ display:flex; gap:9px; flex-wrap:wrap; margin:11px 0; }
.photo-strip img{ width:108px; height:108px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--border); }
.qr-display{ background:#fff; padding:13px; border-radius:var(--r-sm); display:inline-block; border:1px solid var(--border); }

/* modale annonce */
.listing-modal{ position:fixed; inset:0; background:oklch(0.2 0.02 230 / .55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:1rem; z-index:1000; }
.listing-modal-content{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; max-width:720px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:var(--sh-lg); }
.listing-modal-content h3{ margin-bottom:14px; }
.listing-tabs{ display:flex; gap:6px; margin-bottom:12px; border-bottom:1px solid var(--border); }
.listing-tab{ padding:8px 13px; cursor:pointer; border:none; background:transparent; color:var(--text-muted); font-size:14px; font-family:inherit; border-bottom:2px solid transparent; }
.listing-tab.active{ color:var(--accent-strong); border-bottom-color:var(--accent); font-weight:600; }
.listing-textarea{ width:100%; min-height:260px; font-family:"JetBrains Mono", monospace; font-size:13px; white-space:pre-wrap; }
.listing-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.provider-badge{ display:inline-block; font-size:11.5px; padding:2px 8px; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-strong); margin-left:8px; font-weight:600; }

/* scan */
.scan-viewport{ position:relative; max-width:460px; margin:0 auto 14px; border-radius:var(--r-md); overflow:hidden; background:#000; }
.scan-viewport video{ width:100%; display:block; }
.scan-frame{ position:absolute; inset:15%; border:3px solid var(--accent); border-radius:var(--r-sm); box-shadow:0 0 0 9999px oklch(0 0 0 / .35); pointer-events:none; }
.scan-actions{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
code{ background:var(--surface-2); border:1px solid var(--border); padding:2px 6px; border-radius:5px; font-family:"JetBrains Mono", monospace; font-size:13px; }

/* listes de référence (paramètres / scan) */
.ref-list{ list-style:none; padding:0; margin:0 0 14px 0; display:grid; gap:6px; }
.ref-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); font-size:14px; }
.ref-add-form{ display:flex; gap:8px; align-items:stretch; }
.ref-add-form input{ flex:1; }

/* login / accès refusé */
.login-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; }
.login-card{ max-width:420px; width:100%; text-align:center; padding:32px; }
.login-card h1{ font-size:1.6rem; margin-bottom:.4rem; }
.login-card p{ color:var(--text-muted); margin-bottom:1.3rem; }
.login-card .btn{ width:100%; }

/* ---------- ÉTIQUETTE (impression noir sur blanc) ---------- */
.etiquette-page{ background:#fff; color:#000; padding:1rem; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; min-height:100vh; }
.etiquette-actions{ text-align:center; margin-bottom:1rem; }
.etiquette-card{ border:2px solid #000; padding:1rem; width:90mm; margin:0 auto; text-align:center; page-break-inside:avoid; background:#fff; }
.etiquette-card img{ width:60mm; height:60mm; display:block; margin:0 auto .5rem; }
.etiquette-card .code{ font-family:"JetBrains Mono", ui-monospace, monospace; font-size:1.25rem; font-weight:bold; margin-bottom:.25rem; }
.etiquette-card .nom{ font-size:1rem; margin-bottom:.25rem; }
.etiquette-card .meta{ font-size:.875rem; }
@media print{
  body *{ visibility:hidden; }
  .etiquette-card, .etiquette-card *{ visibility:visible; }
  .etiquette-card{ position:absolute; left:0; top:0; border:1px solid #000; }
  .etiquette-actions, .topbar, header.app-header{ display:none !important; }
}