/* Inocab Design System — 2026 */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..900;1,14..32,300..900&display=swap');

:root {
  /* ── Palette inocab ────────────────────────
     #FCFDFD  Brilliance      → fond principal
     #EDEFF3  Springtime Rain → surface secondaire
     #C6D1D7  Wind Weaver     → bordures
     #9FA0B5  Wild Thistle    → texte secondaire
     #2F7EDA  Soothing Sapp.  → accent / CTA
     #555663  Blackwater      → texte principal
  ─────────────────────────────────────────── */

  --bg:        #EDEFF3;   /* Springtime Rain */
  /* Fond réel de la zone de contenu (.main), violet très clair. À utiliser
     partout où un dégradé doit se fondre dans la page — sinon il vire au gris. */
  --canvas:    #F9F9FF;
  --surface:   #FFFFFF;
  --surface-2: #FCFDFD;   /* Brilliance */
  --ink:       #555663;   /* Blackwater */
  --ink-2:     #6B6C7B;
  --mid:       #9FA0B5;   /* Wild Thistle */
  --bd:        #C6D1D7;   /* Wind Weaver */
  --bd-2:      #EDEFF3;   /* Springtime Rain */

  --acc:       #564cd8;
  --acc-hover: #4740c2;
  --acc-light: #f0effe;
  --acc-mid:   #9b96e8;

  --gr:        #1F6B45;
  --gr-light:  #E8F5EE;
  --warn:      #A0560A;
  --warn-light:#FEF4E7;
  --rd:        #C0392B;
  --rd-light:  #FDECEA;

  --sidebar-bg: #FFFFFF;
  --sidebar-bd: #C6D1D7;
  --sidebar-item: rgba(86,76,216,0.14);
  --sidebar-item-hover: rgba(0,0,0,0.05);
  --sidebar-text: #6B6C7E;
  --sidebar-text-active: #555663;

  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-pill: 999px;

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);

  --font: 'Inter', system-ui, sans-serif;
  --transition: 0.14s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body, #root {
  height: 100%;
  font-family: var(--font);
  background: #FFFFFF;
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Shell layout ────────────────────────── */
.shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ─────────────────────────────── */
/* .sidebar-rail réserve la largeur réduite dans le flex layout ; .sidebar
   est positionné par-dessus et s'ouvre en tiroir au survol, sans pousser
   le contenu principal (gain de place permanent). */
.sidebar-rail {
  width: 56px;
  flex-shrink: 0;
  position: relative;
  z-index: 30;
}

.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 56px;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.sidebar:hover {
  width: 232px;
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.04);
}

/* Coins concaves à la jonction tiroir / contenu : c'est le contenu qui a
   un coin arrondi (comme le coin de .main visible quand la sidebar est
   repliée), et le blanc du tiroir remplit autour. Le cercle du dégradé
   est centré sur le coin du carré côté contenu : transparent dedans
   (le contenu apparaît), blanc dehors (prolonge le tiroir). */
.sidebar-corner {
  position: absolute;
  left: 56px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 31;
  opacity: 0;
  transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar:hover ~ .sidebar-corner {
  left: 232px;
  opacity: 1;
}

.sidebar-corner-top {
  top: 0;
  background: radial-gradient(circle at 100% 100%, transparent 15.5px, var(--sidebar-bg) 16px);
}

.sidebar-corner-bottom {
  bottom: 0;
  background: radial-gradient(circle at 100% 0, transparent 15.5px, var(--sidebar-bg) 16px);
}

/* En mode réduit (par défaut), centrer les icônes. Le padding vertical
   reste identique replié/déployé (seul l'horizontal change) pour que la
   position de chaque icône ne bouge jamais au survol : la souris reste
   sur le même onglet pendant l'ouverture du tiroir. */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: none;
  justify-content: center;
  padding: 28px 0 20px;
}

.sidebar:hover .sidebar-logo {
  justify-content: flex-start;
  padding: 28px 18px 20px;
}

.sidebar-logo-icon-wrap {
  width: 22px;
  flex-shrink: 0;
  overflow: hidden;
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar:hover .sidebar-logo-icon-wrap {
  width: 0;
}

.sidebar-logo-icon {
  display: block;
  transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar:hover .sidebar-logo-icon {
  opacity: 0;
  transform: translateX(12px) skewX(-20deg) scaleX(0.5);
}

.sidebar-logo-full {
  display: none;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.sidebar:hover .sidebar-logo-full {
  display: flex;
}

.nav-item {
  justify-content: center;
  padding: 8px 0;
}

.sidebar:hover .nav-item {
  justify-content: flex-start;
  padding: 8px 10px;
}

.nav-item-soon {
  justify-content: center;
  padding: 8px 0;
}

.sidebar:hover .nav-item-soon {
  justify-content: flex-start;
  padding: 8px 10px;
}

.sidebar-footer {
  padding: 12px 0;
}

.sidebar:hover .sidebar-footer {
  padding: 12px 10px;
}

.user-chip {
  justify-content: center;
  padding: 8px 0;
}

.sidebar:hover .user-chip {
  justify-content: flex-start;
  padding: 8px 10px;
}

/* ── Bottom nav & top bar (mobile only) ──── */
.bottom-nav {
  display: none;
}

.mobile-topbar {
  display: none;
}

.sidebar-logo-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acc);
  background: var(--acc-light);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto;
  white-space: nowrap;
}

.sidebar-nav {
  flex: 1;
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
}

.nav-group {
  margin-bottom: 4px;
}

.nav-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mid);
  opacity: 0;
  padding: 16px 10px 4px;
  white-space: nowrap;
}

.sidebar:hover .nav-section {
  opacity: 0.55;
}

.nav-item-label {
  display: none;
  flex: 1;
  min-width: 0;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar:hover .nav-item-label {
  display: block;
}

.nav-item-soon {
  opacity: 0.45;
  cursor: default !important;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 450;
  color: var(--sidebar-text);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  letter-spacing: -0.1px;
}

.nav-item:hover {
  background: var(--sidebar-item-hover);
  color: var(--sidebar-text-active);
}

.nav-item.active {
  background: var(--sidebar-item);
  color: var(--sidebar-text-active);
  font-weight: 550;
}

.nav-item.active .nav-dot {
  background: var(--acc-mid);
}

.nav-dot {
  display: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  margin-left: auto;
  transition: background var(--transition);
}

.sidebar:hover .nav-dot {
  display: block;
}

.nav-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--mid);
  transition: color var(--transition);
}

.nav-item.active svg { color: var(--acc); }
.nav-item:hover svg { color: var(--acc); }

.nav-soon {
  display: none;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mid);
  margin-left: auto;
  background: var(--bd-2);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.sidebar:hover .nav-soon {
  display: inline-block;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--transition);
}

.user-chip:hover { background: var(--sidebar-item-hover); }

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--acc) 0%, #C0392B 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.user-chip-info { display: none; flex: 1; min-width: 0; }
.sidebar:hover .user-chip-info { display: block; }

.user-chip-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-chip-role {
  font-size: 11px;
  color: var(--mid);
  margin-top: 1px;
}

.user-chip-logout { display: none; }
.sidebar:hover .user-chip-logout { display: block; }

/* ── Main content ────────────────────────── */
.main {
  flex: 1;
  overflow-y: auto;
  background-color: var(--canvas);
  background-image: radial-gradient(circle, #D8DFE8 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: 16px 0 0 16px;
  position: relative;
  min-width: 0;
}

.page {
  padding: 32px 40px;
  max-width: 100%;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
}

.page-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.page-subtitle {
  font-size: 13.5px;
  color: var(--mid);
  margin-top: 3px;
  font-weight: 400;
}

/* ── Cards ───────────────────────────────── */
.card {
  background: var(--surface);
  border: 0.25px solid var(--bd);
  border-radius: var(--r-md);
  box-shadow: none;
}

.card-body { padding: 22px; }

/* ── Buttons ─────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  border: none;
  transition: background var(--transition), opacity var(--transition), transform 0.08s;
  text-decoration: none;
  letter-spacing: -0.1px;
  white-space: nowrap;
}

.btn:active { transform: scale(0.975); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: var(--acc);
  color: #fff;
  box-shadow: none;
}

.btn-primary:hover:not(:disabled) { background: var(--acc-hover); }

.btn-secondary {
  background: var(--surface);
  color: var(--ink-2);
  border: 0.25px solid var(--bd);
  box-shadow: none;
}

.btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: #d6d2ce; }

.btn-ghost {
  background: transparent;
  color: var(--mid);
}
.btn-ghost:hover:not(:disabled) { background: var(--bd-2); color: var(--ink); }

.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-lg { padding: 10px 22px; font-size: 14px; font-weight: 600; }

/* ── Tabs ────────────────────────────────── */
.tabs {
  display: inline-flex;
  background: rgba(0,0,0,0.05);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 4px;
}

.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--mid);
  transition: all var(--transition);
}

.tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 1px 1px rgba(0,0,0,0.06);
  font-weight: 600;
}

.tab.active svg { color: var(--acc); }

/* ── Badges ──────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 550;
}

.badge-green   { background: var(--gr-light); color: var(--gr); }
.badge-red     { background: var(--rd-light);  color: var(--rd); }
.badge-warn    { background: var(--warn-light); color: var(--warn); }
.badge-neutral { background: var(--bd-2); color: var(--mid); border: 1px solid var(--bd); }
.badge-acc     { background: var(--acc-light); color: var(--acc); }

/* ── Forms ───────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-size: 13px; font-weight: 550; color: var(--ink-2); }

.form-input {
  padding: 9px 12px;
  border: 0.25px solid var(--bd);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-family: var(--font);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-shadow: none;
}

.form-input:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(86,76,216,0.12);
}

.form-input::placeholder { color: #C4BFC2; }

/* ── Select pill ──────────────────────────── */
select.form-input {
  border-radius: 999px;
  padding: 7px 36px 7px 14px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  cursor: pointer;
  font-weight: 500;
}

select.form-input:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(86,76,216,0.12);
}

/* ── Tables ──────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }

.table th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--mid);
  padding: 10px 16px;
  border-bottom: 1px solid var(--bd);
  background: var(--surface-2);
}

.table th:first-child { border-radius: var(--r-sm) 0 0 0; }
.table th:last-child  { border-radius: 0 var(--r-sm) 0 0; }

.table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--bd-2);
  font-size: 13.5px;
  color: var(--ink-2);
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--bg); cursor: pointer; }
.table tbody tr:hover td { color: var(--ink); }

/* ── Stats grid ──────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--surface);
  border: 0.25px solid var(--bd);
  border-radius: var(--r-md);
  box-shadow: none;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.stat-icon svg { width: 16px; height: 16px; }

.stat-label {
  font-size: 12px;
  font-weight: 550;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.055em;
}

.stat-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -1px;
  line-height: 1.1;
  margin-top: 4px;
}

.stat-sub {
  font-size: 12px;
  color: var(--mid);
  margin-top: 2px;
}

/* ── Login ───────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  background-image: radial-gradient(ellipse at 60% 20%, rgba(139,31,48,0.05) 0%, transparent 60%);
}

.login-card {
  background: var(--surface);
  border: 0.25px solid var(--bd);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 32px rgba(86,76,216,0.10), 0 2px 8px rgba(0,0,0,0.04);
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
}

.login-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.login-logo-mark {
  width: 32px;
  height: 32px;
  background: var(--acc);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.login-logo-mark svg { width: 16px; height: 16px; color: #fff; }

.login-logo {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.4px;
}

.login-tagline {
  font-size: 13.5px;
  color: var(--mid);
  margin-bottom: 28px;
  font-weight: 400;
}

.form-error {
  font-size: 13px;
  color: var(--rd);
  padding: 10px 12px;
  background: var(--rd-light);
  border-radius: var(--r-sm);
  border: 1px solid rgba(192,57,43,0.15);
}

/* ── Empty state ─────────────────────────── */
.empty-state {
  padding: 60px 24px;
  text-align: center;
  color: var(--mid);
}

.empty-state-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bd-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.empty-state-icon svg { width: 20px; height: 20px; color: var(--mid); }
.empty-state-title { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.empty-state-sub   { font-size: 13px; }

/* ── Modal ───────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
  z-index: 100;
  animation: fadeIn 0.12s ease;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border: 0.25px solid var(--bd);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 32px rgba(86,76,216,0.10), 0 2px 8px rgba(0,0,0,0.06);
  z-index: 101;
  animation: slideUp 0.15s ease;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
  margin-bottom: 20px;
}

.modal-title { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.3px; }
.modal-body  { padding: 0 24px 24px; }

/* ── Drawer ──────────────────────────────── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(1px);
  z-index: 100;
  animation: fadeIn 0.12s ease;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 460px;
  max-width: 92vw;
  background: #FFFFFF;
  border-radius: 16px 0 0 16px;
  box-shadow: -2px 0 24px rgba(86,76,216,0.08), -1px 0 0 rgba(0,0,0,0.06);
  z-index: 101;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideLeft 0.2s cubic-bezier(0.32, 0, 0.15, 1);
}

.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 24px 20px;
}

.drawer-title { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.3px; }
.drawer-sub   { font-size: 13px; color: var(--mid); margin-top: 2px; }

.drawer-body { flex: 1; overflow-y: auto; padding: 24px; }

.drawer-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mid);
  margin-bottom: 4px;
}

.drawer-rows { margin-top: 4px; }

@keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) } to { opacity: 1; transform: translate(-50%, -50%) } }
@keyframes slideLeft { from { opacity: 0; transform: translateX(20px) } to { opacity: 1; transform: translateX(0) } }

/* ── Settings nav ────────────────────────── */
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  width: 100%;
  border: none;
  background: none;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mid);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), color var(--transition);
}
.settings-nav-item:hover  { background: var(--bg); color: var(--ink); }
.settings-nav-item.active { background: var(--acc-light); color: var(--acc); font-weight: 600; }
.settings-nav-item svg    { width: 15px; height: 15px; flex-shrink: 0; }

.settings-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ── Divider ─────────────────────────────── */
.divider { height: 1px; background: var(--bd); margin: 20px 0; }

/* ── Scan PWA ────────────────────────────── */
.scan-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: #0F0D10;
  color: #fff;
  overflow: hidden;
}

.scan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  background: rgba(15,13,16,0.95);
  flex-shrink: 0;
  z-index: 10;
}

.scan-header-title {
  font-size: 16px;
  font-weight: 650;
  color: #fff;
  letter-spacing: -0.2px;
}

.scan-back {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Cache les éléments injectés par html5-qrcode */
#qr-reader__header_message,
#qr-reader__status_span,
#qr-reader__dashboard,
#qr-reader img[alt="Info icon"],
#qr-reader__filescan_input { display: none !important; }

#qr-reader video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#qr-reader {
  border: none !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Camera */
.scan-camera-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.scan-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scan-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.5) 0%,
    transparent 30%,
    transparent 70%,
    rgba(0,0,0,0.5) 100%
  );
}

.scan-frame {
  width: 220px;
  height: 220px;
  border-radius: 16px;
  border: 2.5px solid var(--acc);
  box-shadow: 0 0 0 2000px rgba(0,0,0,0.45);
  position: relative;
}

.scan-frame::before, .scan-frame::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: #fff;
  border-style: solid;
}

.scan-frame::before {
  top: -2px; left: -2px;
  border-width: 3px 0 0 3px;
  border-radius: 4px 0 0 0;
}

.scan-frame::after {
  bottom: -2px; right: -2px;
  border-width: 0 3px 3px 0;
  border-radius: 0 0 4px 0;
}

.scan-hint {
  margin-top: 24px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  text-align: center;
}

/* Cards */
.scan-card-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 16px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  overflow-y: auto;
  background: #F6F4F1;
  color: var(--ink);
}

.scan-product-card {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.scan-product-icon { font-size: 36px; margin-bottom: 10px; }
.scan-product-name { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.3px; }
.scan-product-ref  { font-size: 13px; color: var(--mid); margin-top: 4px; }

.scan-stock-badge {
  margin-top: 12px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--gr-light);
  color: var(--gr);
}
.scan-stock-badge[data-low="true"] { background: var(--rd-light); color: var(--rd); }

/* Action buttons */
.scan-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.scan-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px 12px;
  border-radius: 14px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.12s;
}

.scan-action-btn.receive {
  background: var(--gr-light);
  border-color: rgba(31,107,69,0.2);
}
.scan-action-btn.consume {
  background: var(--acc-light);
  border-color: rgba(139,31,48,0.2);
}

.scan-action-icon {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}
.scan-action-btn.receive .scan-action-icon { color: var(--gr); }
.scan-action-btn.consume .scan-action-icon { color: var(--acc); }

.scan-action-label { font-size: 16px; font-weight: 700; color: var(--ink); }
.scan-action-sub   { font-size: 11px; color: var(--mid); text-align: center; }

/* Confirm form */
.scan-confirm-product {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.scan-confirm-action-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.scan-confirm-action-badge[data-action="receive"] { background: var(--gr-light); color: var(--gr); }
.scan-confirm-action-badge[data-action="consume"] { background: var(--acc-light); color: var(--acc); }

.scan-confirm-name { font-size: 15px; font-weight: 650; color: var(--ink); }

.scan-form { display: flex; flex-direction: column; gap: 12px; }
.scan-form-group { display: flex; flex-direction: column; gap: 5px; }
.scan-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }

.scan-input {
  padding: 12px 14px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  font-size: 16px;
  font-family: var(--font);
  background: #fff;
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
}
.scan-input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(139,31,48,0.1); }

.scan-qty-row { display: flex; align-items: center; gap: 8px; }
.scan-qty-btn {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--bd);
  background: #fff;
  font-size: 20px;
  font-weight: 300;
  cursor: pointer;
  color: var(--ink);
  flex-shrink: 0;
}
.scan-qty-input {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  background: #fff;
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
}

/* Buttons */
.scan-primary-btn {
  width: 100%;
  padding: 15px;
  border-radius: 999px;
  border: none;
  background: var(--acc);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(139,31,48,0.3);
  transition: opacity 0.12s;
  margin-top: auto;
}
.scan-primary-btn { box-shadow: none; }
.scan-primary-btn:disabled { opacity: 0.5; }

.scan-secondary-btn {
  width: 100%;
  padding: 13px;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: #fff;
  color: var(--mid);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.scan-error {
  padding: 12px 14px;
  background: var(--rd-light);
  border: 1px solid rgba(192,57,43,0.2);
  border-radius: 10px;
  color: var(--rd);
  font-size: 14px;
}

.scan-hint-text {
  font-size: 14px;
  color: var(--mid);
  text-align: center;
  padding: 0 12px;
}

/* Success */
.scan-success-wrap {
  align-items: center;
  justify-content: center;
  background: var(--gr-light);
}
.scan-success-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--gr);
  color: #fff;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.scan-success-title { font-size: 20px; font-weight: 700; color: var(--gr); }
.scan-success-sub   { font-size: 14px; color: var(--mid); }

/* ── Dashboard ───────────────────────────── */

/* Hero */
.db-hero {
  background: linear-gradient(135deg, #3730a3 0%, #564cd8 50%, #7c74e8 100%);
  border-radius: var(--r-lg);
  padding: 22px 28px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.db-hero-date {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.db-hero-greeting {
  font-size: 22px;
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  letter-spacing: -0.4px;
}

.db-hero-greeting strong {
  color: #fff;
  font-weight: 700;
}

.db-hero-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.db-hero-action {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.08s;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.db-hero-action:hover  { opacity: 0.88; }
.db-hero-action:active { transform: scale(0.97); }

/* ── Floating Assistant ──────────────────── */

.fa-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #564cd8 0%, #7c74e8 100%);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(86,76,216,0.4);
  /* Sous les tiroirs et modales (overlay à 100) : le bouton ne doit pas
     flotter par-dessus le contenu d'un tiroir ouvert. Sa propre fenêtre
     (.fa-overlay / .fa-panel) reste à 299/300 et couvre donc bien tout. */
  z-index: 99;
  transition: transform 0.2s, box-shadow 0.2s;
  position: fixed;
}

.fa-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(86,76,216,0.5);
}

.fa-fab-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid #fff;
  animation: ping 1.6s ease-out infinite;
}

.fa-overlay {
  position: fixed;
  inset: 0;
  z-index: 299;
  background: rgba(24, 20, 46, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: faOverlayIn 0.2s ease;
}

.fa-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(960px, 92vw);
  max-height: 84vh;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(20, 10, 60, 0.28), 0 8px 24px rgba(86,76,216,0.16);
  border: none;
  z-index: 300;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: faPanelIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

@keyframes faOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fa-header {
  background: linear-gradient(135deg, #564cd8 0%, #7c74e8 100%);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.fa-avatar {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.fa-icon-btn {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.15);
  border: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}

.fa-icon-btn:hover { background: rgba(255,255,255,0.25); }

.fa-messages {
  flex: 1;
  min-height: 320px;
  overflow-y: auto;
  padding: 26px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fafafa;
}

.fa-bubble {
  font-size: 14px;
  line-height: 1.65;
  padding: 13px 18px;
  border-radius: 16px;
  max-width: 75%;
  white-space: pre-line;
}

.fa-bot {
  background: #fff;
  color: #1a1040;
  border-radius: 4px 16px 16px 16px;
  align-self: flex-start;
  border: 0.25px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.fa-user {
  background: linear-gradient(135deg, #564cd8, #7c74e8);
  color: #fff;
  border-radius: 16px 4px 16px 16px;
  align-self: flex-end;
  font-weight: 500;
}

.fa-typing {
  display: flex; align-items: center; gap: 4px;
  padding: 12px 16px;
}

.fa-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mid);
  animation: chatBounce 1.2s ease-in-out infinite;
}
.fa-typing span:nth-child(2) { animation-delay: 0.2s; }
.fa-typing span:nth-child(3) { animation-delay: 0.4s; }

.fa-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 24px 14px;
  background: #fafafa;
}

.fa-suggestion {
  font-size: 11px;
  font-weight: 600;
  color: #3730a3;
  background: #eef2ff;
  border: 0.25px solid #c7d2fe;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.fa-suggestion:hover { background: var(--acc); color: #fff; border-color: var(--acc); }

.fa-input-row {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  border-top: 0.25px solid #e5e7eb;
  background: #fff;
  flex-shrink: 0;
}

.fa-input {
  flex: 1;
  padding: 9px 14px;
  border: 0.25px solid #d1d5db;
  border-radius: 999px;
  font-size: 13.5px;
  font-family: var(--font);
  background: #f9fafb;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}

.fa-input:focus { border-color: var(--acc); background: #fff; }
.fa-input::placeholder { color: #9ca3af; }

.fa-send {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--acc);
  border: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: opacity 0.15s;
}

.fa-send:disabled { opacity: 0.3; cursor: default; }
.fa-send:not(:disabled):hover { opacity: 0.85; }

/* ── Chat assistant (legacy in hero) ─────── */
.chat-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
}

.chat-bubble {
  font-size: 13.5px;
  line-height: 1.6;
  padding: 10px 14px;
  border-radius: 14px;
  max-width: 85%;
  white-space: pre-line;
}

.chat-bot {
  background: #f1f0fe;
  color: #1a1040;
  border-radius: 4px 14px 14px 14px;
  align-self: flex-start;
  border: 0.25px solid rgba(86,76,216,0.15);
}

.chat-user {
  background: var(--acc);
  color: #fff;
  border-radius: 14px 4px 14px 14px;
  align-self: flex-end;
  font-weight: 500;
}

/* Typing indicator */
.chat-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
}

.chat-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mid);
  animation: chatBounce 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes faPanelIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes chatBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Suggestions */
.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-suggestion {
  font-size: 12px;
  font-weight: 600;
  color: #3730a3;
  background: #eef2ff;
  border: 0.25px solid #c7d2fe;
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.chat-suggestion:hover {
  background: var(--acc);
  color: #fff;
  border-color: var(--acc);
}

/* Input */
.chat-input-row {
  display: flex;
  gap: 8px;
}

.chat-input {
  flex: 1;
  padding: 9px 14px;
  border: 0.25px solid rgba(86,76,216,0.25);
  border-radius: 999px;
  font-size: 13.5px;
  font-family: var(--font);
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color var(--transition);
  box-shadow: 0 1px 3px rgba(86,76,216,0.06);
}

.chat-input:focus { border-color: var(--acc); }
.chat-input::placeholder { color: var(--mid); }

.chat-send {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--acc);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity var(--transition);
}

.chat-send:disabled { opacity: 0.3; cursor: default; }
.chat-send:not(:disabled):hover { opacity: 0.85; }

/* Sections */
.db-section { margin-bottom: 20px; }

.db-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.db-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.1px;
}

.db-section-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 550;
  color: var(--mid);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition);
  padding: 0;
}

.db-section-link:hover { color: var(--acc); }

/* Cards */
.db-card {
  background: #fff;
  border: 0.25px solid var(--bd);
  border-radius: var(--r-md);
  padding: 8px 16px;
}

.db-card-alerts { padding: 4px 16px; }

/* Centre : bonjour + IA */
.db-center {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 46px 20px 38px;
}

.db-center-greeting {
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.5px;
  margin: 0 0 6px;
}

.db-center-greeting strong { font-weight: 750; }

.db-center-sub {
  font-size: 14px;
  color: var(--mid);
  margin-bottom: 24px;
}

/* Barre IA (style "Demandez quelque chose…") */
.db-ai-bar-wrap {
  max-width: 660px;
  margin: 0 auto;
  text-align: left;
}

.db-ai-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 0.25px solid var(--bd);
  border-radius: var(--r-pill);
  padding: 6px 6px 6px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.db-ai-bar:focus-within {
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(86,76,216,0.16);
}

/* Léger contour dégradé statique, révélé uniquement quand la barre est
   active — juste assez pour suggérer la "magie" IA, sans animation qui
   tourne (trop chargé). */
.db-ai-bar::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  z-index: -1;
  background: linear-gradient(120deg, #564cd8, #8b7ff0 45%, #d884fe 80%, #6ea8fe);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.db-ai-bar:focus-within::before {
  opacity: 1;
}

.db-ai-bar-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg,#564cd8,#8b7ff0);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-ai-bar-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-size: 13.5px;
  color: var(--ink);
  font-family: inherit;
}

.db-ai-bar-input::placeholder { color: var(--mid); }

.db-ai-bar-send {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  border: none;
  background: var(--acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity var(--transition), transform 0.08s;
}

.db-ai-bar-send:disabled { opacity: 0.35; cursor: default; }
.db-ai-bar-send:not(:disabled):hover  { opacity: 0.88; }
.db-ai-bar-send:not(:disabled):active { transform: scale(0.94); }

.db-ai-bar-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.db-ai-bar-suggestion {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 0.25px solid var(--bd);
  background: #fff;
  color: var(--mid);
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.db-ai-bar-suggestion:hover {
  border-color: var(--acc);
  color: var(--acc);
  background: var(--acc-light);
}

.db-wrap {
  position: relative;
  padding: 40px 40px 60px;
  max-width: 100%;
  overflow: hidden;
}

/* Halo lumineux flouté en fond de page, derrière l'îlot et le bloc
   "Bonjour" — purement décoratif, ne doit jamais capter le clic/survol. */
.db-ambient-glow {
  position: absolute;
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1600px, 180%);
  height: 820px;
  background:
    radial-gradient(ellipse 46% 80% at 36% 10%, rgba(86, 76, 216, 0.36) 0%, rgba(86, 76, 216, 0.13) 42%, transparent 74%),
    radial-gradient(ellipse 46% 80% at 66% 6%, rgba(216, 132, 254, 0.27) 0%, rgba(216, 132, 254, 0.09) 44%, transparent 76%),
    radial-gradient(ellipse 68% 100% at 50% 0%, rgba(124, 116, 232, 0.22) 0%, rgba(124, 116, 232, 0.07) 50%, transparent 82%);
  filter: blur(64px);
  /* Floute aussi le pointillé du fond qui passe derrière ce calque
     (backdrop-filter agit sur ce qu'il y a en dessous, pas sur le halo
     lui-même) pour que les points ne créent pas de bruit visuel. */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

.db-greeting {
  margin-bottom: 28px;
}

.db-date {
  font-size: 13px;
  color: var(--mid);
  font-weight: 500;
  margin-bottom: 6px;
}

.db-hello {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.6px;
  line-height: 1.15;
}

.db-hello span {
  color: var(--acc);
}

.db-sub {
  font-size: 14px;
  color: var(--mid);
  margin-top: 4px;
}

/* Quick actions */
.db-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.db-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  color: #fff;
  box-shadow: none;
  transition: opacity var(--transition), transform 0.08s;
  letter-spacing: -0.1px;
}

.db-action-btn:hover { opacity: 0.88; }
.db-action-btn:active { transform: scale(0.975); }

.db-action-btn svg { flex-shrink: 0; }

.db-action-scan    { background: linear-gradient(135deg, #564cd8 0%, #7c74e8 100%); }
.db-action-add     { background: linear-gradient(135deg, #2F7EDA 0%, #38BDF8 100%); }
.db-action-stock   { background: linear-gradient(135deg, #1F6B45 0%, #34D399 100%); }
.db-action-conso   { background: linear-gradient(135deg, #EA580C 0%, #FBBF24 100%); }

/* Layout 3 colonnes */
.db-3col {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}

.db-3col > .wr-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.db-3col > .wr-wrap > .wr-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.db-3col > .wr-wrap .wr-footer {
  margin-top: auto;
}

/* Layout 2 colonnes (legacy) */
.db-layout {
  display: grid;
  grid-template-columns: 1fr clamp(300px, 28%, 420px);
  gap: 24px;
  align-items: start;
}

.db-col-main { display: flex; flex-direction: column; gap: 0; }
.db-col-side { display: flex; flex-direction: column; gap: 0; position: sticky; top: 0; }

/* Widget grid (legacy, utilisé pour les KPIs) */
.db-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.db-task-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(20, 20, 43, 0.04), 0 10px 28px rgba(20, 20, 43, 0.06);
}

.db-task-card:hover {
  box-shadow: 0 2px 4px rgba(20, 20, 43, 0.05), 0 16px 36px rgba(20, 20, 43, 0.09);
}

/* KPI grid */
.db-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.db-kpi {
  background: var(--surface-2);
  border: 1px solid var(--bd-2);
  border-radius: var(--r-md);
  padding: 14px 16px;
}

.db-kpi-value {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
}

.db-kpi-label {
  font-size: 11.5px;
  color: var(--mid);
  margin-top: 4px;
  font-weight: 500;
}

/* Alerts */
.db-empty-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 4px;
  flex: 1;
}

.db-alert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.db-alert-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.db-alert-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

/* Movements */
.db-movement-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.db-movement-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.db-movement-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Conso bars */
.db-conso-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.db-conso-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.db-conso-rank {
  width: 18px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mid);
  text-align: center;
  flex-shrink: 0;
}

.db-bar-track {
  height: 4px;
  background: var(--bd-2);
  border-radius: 99px;
  overflow: hidden;
}

.db-bar-fill {
  height: 100%;
  background: var(--acc);
  border-radius: 99px;
  transition: width 0.6s ease;
}

@keyframes pulse {
  0%, 100% { opacity: 1 }
  50% { opacity: 0.4 }
}

@keyframes ping {
  0%   { transform: scale(1);   opacity: 1; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

.dot-ping {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7px;
  height: 7px;
  margin-left: 4px;
  flex-shrink: 0;
}

.dot-ping::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--rd);
  animation: ping 1.6s ease-out infinite;
}

.dot-ping::after {
  content: '';
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rd);
  flex-shrink: 0;
}

/* ── Sortie rapide ───────────────────────── */
.sr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 0.25px solid var(--bd);
  transition: background var(--transition);
}

.sr-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 0.25px solid var(--bd);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: all var(--transition);
  flex-shrink: 0;
}

.sr-btn:disabled { opacity: 0.3; cursor: default; }

.sr-btn-plus {
  background: var(--acc-light);
  border-color: rgba(86,76,216,0.2);
  color: var(--acc);
}
.sr-btn-plus:hover:not(:disabled) { background: var(--acc); color: #fff; }

.sr-btn-minus:hover:not(:disabled) { background: var(--bd-2); }

/* ── Weekly Report ───────────────────────── */
.wr-wrap {
  border: none;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 28px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 20, 43, 0.04), 0 10px 28px rgba(20, 20, 43, 0.06);
}

.wr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
  cursor: pointer;
  user-select: none;
}

.wr-header-indigo { background: linear-gradient(135deg, #3730a3 0%, #564cd8 55%, #8b7ff0 100%); }
.wr-header-blue    { background: linear-gradient(135deg, #1d4ed8 0%, #2F7EDA 55%, #60a5fa 100%); }

.wr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 3px;
}

.wr-eyebrow-icon { flex-shrink: 0; }

.wr-week {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.2px;
}

.wr-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.wr-pill-green { background: rgba(255,255,255,0.2); color: #fff; }
.wr-pill-red   { background: rgba(255,255,255,0.2); color: #ffe0de; }
.wr-pill-blue  { background: rgba(255,255,255,0.2); color: #fff; }

.wr-toggle {
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
}

.wr-body {
  padding: 20px 22px;
}

/* KPIs */
.wr-kpis {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 20px;
}

.wr-kpi {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  padding: 4px 0;
}

.wr-kpi-divider {
  width: 0.25px;
  background: var(--bd);
  margin: 0 16px;
  align-self: stretch;
}

.wr-kpi-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.wr-kpi-val {
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -1px;
  line-height: 1;
}

.wr-kpi-label {
  font-size: 11.5px;
  color: var(--mid);
  font-weight: 500;
}

.wr-kpi-trend {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  margin-top: 2px;
}

/* Section */
.wr-section { margin-bottom: 16px; }

.wr-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 12px;
}

/* Produits en rupture (action immédiate) */
.wr-rupture-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 0.25px solid var(--rd-light);
}

.wr-rupture-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--rd-light);
}

.wr-rupture-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-rupture-qty {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--rd);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Bars */
.wr-bars { display: flex; flex-direction: column; gap: 10px; }

.wr-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wr-bar-rank {
  width: 18px;
  font-size: 11px;
  font-weight: 700;
  color: var(--mid);
  text-align: center;
  flex-shrink: 0;
}

.wr-bar-track {
  height: 6px;
  background: var(--bd-2);
  border-radius: 99px;
  overflow: hidden;
}

.wr-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Footer */
.wr-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 0.25px solid var(--bd);
  margin-top: 4px;
}

/* Responsive */
@media (max-width: 768px) {
  .wr-kpis { gap: 0; }
  .wr-kpi-divider { margin: 0 10px; }
  .wr-kpi-val { font-size: 22px; }
  .wr-kpi-trend { display: none; }
}

/* ── Responsive ──────────────────────────── */
@media (max-width: 768px) {

  /* Floating assistant */
  .fa-fab {
    bottom: calc(64px + env(safe-area-inset-bottom) + 16px);
    right: 16px;
  }

  /* Shell */
  .shell {
    flex-direction: column;
  }

  .sidebar-rail {
    display: none;
  }

  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 48px;
    background: #fff;
    border-bottom: 0.5px solid var(--bd);
    z-index: 200;
  }

  .main {
    border-radius: 0;
    padding-top: 48px;
    padding-bottom: 72px; /* espace pour la bottom nav */
  }

  /* Bottom nav */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    background: #fff;
    border-top: 0.25px solid var(--bd);
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom);
    align-items: stretch;
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--mid);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: color var(--transition);
    padding: 0;
  }

  .bottom-nav-item svg { transition: color var(--transition); }

  .bottom-nav-item.active {
    color: var(--acc);
  }

  .bottom-nav-scan {
    flex: 0 0 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
  }

  .bottom-nav-scan-btn {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #564cd8 0%, #7c74e8 100%);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: -18px;
    box-shadow: 0 4px 16px rgba(86,76,216,0.35);
  }

  /* Page */
  .page {
    padding: 20px 16px 28px;
  }

  .page-header {
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
  }

  .page-header > div:last-child {
    width: 100%;
    flex-wrap: wrap;
  }

  .page-header .btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }

  /* Dashboard */
  .db-wrap { padding: 16px 16px 28px; }
  .db-center { padding: 26px 4px 22px; }
  .db-center-greeting { font-size: 21px; }
  .db-layout { grid-template-columns: 1fr; }
  .db-col-side { position: static; }
  .db-3col { grid-template-columns: 1fr; }

  /* Tabs */
  .tabs { width: 100%; }
  .tab { flex: 1; justify-content: center; font-size: 12px; padding: 6px 8px; }

  /* Cards mobiles pour les tableaux */
  .mobile-card-list { display: flex !important; flex-direction: column; gap: 10px; }
  .mobile-hide { display: none !important; }

  .product-card-mobile {
    background: #fff;
    border: 0.25px solid var(--bd);
    border-radius: var(--r-md);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background var(--transition);
  }

  .product-card-mobile:active { background: var(--bg); }

  .product-card-mobile-info { flex: 1; min-width: 0; }
  .product-card-mobile-name { font-weight: 600; font-size: 14px; color: var(--ink); }
  .product-card-mobile-meta { font-size: 12px; color: var(--mid); margin-top: 2px; }

  .product-card-mobile-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
  }

  .product-card-mobile-qty {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1;
  }

  /* Drawer plein écran */
  .drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 20px 20px 0 0;
    top: auto;
    bottom: 0;
    height: 92dvh;
  }

  @keyframes slideLeft {
    from { opacity: 0; transform: translateY(30px) }
    to   { opacity: 1; transform: translateY(0) }
  }

  /* Modal plein écran */
  .modal {
    width: 100vw;
    max-width: 100vw;
    border-radius: 20px 20px 0 0;
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    max-height: 92dvh;
  }

  /* Stats grid */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Sortie rapide full width */
  .drawer[style*="520"] { width: 100vw !important; }

  /* Settings */
  .settings-grid-2 { grid-template-columns: 1fr; }

  /* Scan */
  .scan-card-wrap { padding: 16px; }

  /* Form inputs plus grands sur mobile */
  .form-input { font-size: 16px; } /* évite le zoom iOS */
}

@media (max-width: 400px) {
  .db-action-btn { padding: 7px 10px; font-size: 11px; }
  .page-title { font-size: 18px; }
}

/* ── Utility ─────────────────────────────── */
.flex        { display: flex; }
.items-center { align-items: center; }
.gap-2       { gap: 8px; }
.gap-3       { gap: 12px; }
.mt-1        { margin-top: 4px; }
.mt-2        { margin-top: 8px; }
.mt-4        { margin-top: 16px; }
.text-mid    { color: var(--mid); }
.text-sm     { font-size: 13px; }
.text-xs     { font-size: 11.5px; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.w-full      { width: 100%; }
.truncate    { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Odontogramme ─────────────────────────── */
.tooth-chart-card {
  position: relative;
  padding: 24px 16px 22px;
  overflow: visible;
}

.tooth-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 0 1px;
  transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.tooth-cell:hover {
  transform: translateY(-3px) scale(1.06) !important;
  z-index: 2;
}

.tooth-cell-selected {
  transform: translateY(-5px) scale(1.1) !important;
  z-index: 3;
}

.tooth-fdi {
  font-size: 9.5px;
  color: var(--mid);
  font-weight: 700;
  line-height: 14px;
}

.tooth-cell-selected .tooth-fdi,
.tooth-cell:hover .tooth-fdi { color: var(--acc); }

.tooth-shape-wrap {
  border-radius: 8px;
  line-height: 0;
  transition: box-shadow 0.18s ease;
}

/* Popover flottant ancré sur la dent — remplace la colonne fixe à droite */
.tooth-pop {
  position: absolute;
  transform: translateX(-50%);
  width: 232px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(20, 20, 43, 0.16), 0 2px 8px rgba(20, 20, 43, 0.06);
  padding: 14px 14px 12px;
  z-index: 20;
  animation: toothPopIn 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

@keyframes toothPopIn {
  from { opacity: 0; transform: translateX(-50%) scale(0.94) translateY(-4px); }
  to   { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}

.tooth-pop-arrow {
  position: absolute;
  left: 50%;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
}

.tooth-pop-arrow[data-arch="upper"] { top: -5px; box-shadow: -2px -2px 3px rgba(20,20,43,0.03); }
.tooth-pop-arrow[data-arch="lower"] { bottom: -5px; box-shadow: 2px 2px 3px rgba(20,20,43,0.03); }

.tooth-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 2px;
}

.tooth-pop-close {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--mid);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}

.tooth-pop-close:hover { background: var(--bd-2); color: var(--ink); }

.tooth-pop-caption {
  font-size: 11.5px;
  color: var(--mid);
  font-weight: 550;
  margin-bottom: 8px;
  min-height: 15px;
}

.tooth-pop-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.tooth-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.06);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.tooth-swatch:hover { transform: scale(1.12); }

.tooth-swatch.active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--acc);
}

.tooth-swatch-clear {
  background: #fff;
  color: var(--mid);
  box-shadow: inset 0 0 0 1.5px var(--bd);
}

.tooth-swatch-clear.active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--acc);
  color: var(--acc);
}

.tooth-surf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}

.tooth-surf-btn {
  height: 26px;
  border-radius: 6px;
  border: 1.5px solid var(--bd);
  background: var(--bg);
  color: var(--mid);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}

.tooth-surf-btn.active {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}

.tooth-pop-note {
  width: 100%;
  font-size: 12.5px;
  resize: vertical;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.tooth-pop-save {
  width: 100%;
  justify-content: center;
  padding: 7px 0;
  font-size: 13px;
}

/* ── Factures fournisseurs : écran de validation ──────────────────────────── */
/* Document original à gauche, données extraites à droite : l'assistante compare
   sans quitter des yeux la facture. */
.review-split {
  display: grid;
  grid-template-columns: minmax(360px, 5fr) minmax(420px, 6fr);
  gap: 18px;
  align-items: start;
}

.review-doc {
  position: sticky;
  top: 16px;
  height: calc(100vh - 130px);
  padding: 0;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.review-doc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 0.25px solid var(--bd);
  font-size: 12.5px;
  color: var(--mid);
  background: var(--surface);
  flex-shrink: 0;
}

/* Le visualiseur PDF gère lui-même le défilement entre les pages : il doit
   donc occuper toute la hauteur restante, pas être coupé par le conteneur. */
.review-doc-canvas { flex: 1; min-height: 0; overflow: auto; }

.review-form { min-width: 0; }

/* Sous 1100 px, la comparaison côte à côte n'a plus de place : le document
   passe au-dessus du formulaire, en hauteur réduite. */
@media (max-width: 1100px) {
  .review-split { grid-template-columns: 1fr; }
  .review-doc { position: static; height: 60vh; }
}

.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }

/* ── Tableau des paiements (kanban échéances) ─────────────────────────────── */
/* Chaque colonne porte sa teinte via --col / --col-bg / --col-bd, posées en
   ligne par le composant. Le contour en pointillés donne au tableau son côté
   « zone vivante » plutôt que grille figée. */
.pay-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding: 14px 20px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 0.25px solid var(--bd);
  border-radius: var(--r-lg);
}

.pay-summary-item { display: flex; flex-direction: column; gap: 1px; }

.pay-summary-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mid);
}
.pay-summary-value { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.4px; }
.pay-summary-sub   { font-size: 11.5px; color: var(--mid); }

/* Enveloppe : sert de repère au dégradé de défilement. */
.pay-board-wrap { position: relative; }

/* Le voile n'apparaît que quand la classe has-more est posée, c'est-à-dire
   quand il reste des vignettes hors écran à droite. */
.pay-board-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 72px;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  /* Se fond dans --canvas, le fond de la zone de contenu. Le point de départ
     est le même violet en alpha 0 : partir d'un blanc transparent laisserait
     un voile grisâtre au milieu du dégradé. */
  background: linear-gradient(to right, rgba(249,249,255,0), var(--canvas) 78%);
  /* Pas d'arrondi : le voile recouvre une colonne à angles arrondis, un coin
     arrondi par-dessus dessinait une marche visible. */
}
.pay-board-wrap.has-more::after { opacity: 1; }

.pay-board {
  display: flex;
  gap: 14px;
  /* stretch : toutes les colonnes s'alignent sur la plus haute, sinon une
     colonne vide paraîtrait « ratatinée » à côté d'une colonne pleine. */
  align-items: stretch;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-behavior: smooth;

  /* Hauteur d'une carte et de la gouttière : servent à poser la hauteur de
     départ d'une colonne, exprimée en nombre de factures. */
  --pay-card-h: 118px;
  --pay-card-gap: 9px;
}

/* Les colonnes s'étirent pour occuper la largeur disponible, mais ne se
   compriment jamais sous 300 px : au-delà de cette limite le tableau défile.
   Évite le cas pénible où il déborde de quelques pixels et affiche un dégradé
   de défilement pour presque rien. */
.pay-col {
  flex: 1 0 300px;
  background: var(--col-bg);
  border: 1.5px dashed var(--col-bd);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pay-col-head { padding: 13px 16px 11px; }

.pay-col-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--col);
}

.pay-col-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--col);
  background: rgba(255,255,255,0.7);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  flex-shrink: 0;
}

.pay-col-total { font-size: 18px; font-weight: 700; color: var(--col); letter-spacing: -0.4px; margin-top: 4px; }
.pay-col-hint  { font-size: 11px; color: var(--col); opacity: 0.72; margin-top: 1px; }

.pay-col-body {
  padding: 4px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: var(--pay-card-gap);
  /* Hauteur de départ : cinq factures. Au-delà la colonne s'allonge
     naturellement et la page défile — un kanban qui défile en interne cache
     ce qu'on cherchait à rendre visible. */
  min-height: calc(5 * var(--pay-card-h) + 4 * var(--pay-card-gap) + 16px);
  flex: 1;
}

/* Les cartes restent blanches : elles se détachent du pastel de la colonne. */
.pay-card {
  background: var(--surface);
  border: 0.25px solid var(--bd);
  border-radius: var(--r-md);
  padding: 11px 13px;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition);
}
.pay-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.pay-card-late { border-left: 3px solid var(--rd); }

.pay-card-supplier {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pay-card-amount { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.3px; margin-top: 4px; }
.pay-card-due    { font-size: 11.5px; color: var(--mid); margin-top: 3px; }

.pay-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.pay-card-cat {
  font-size: 10.5px;
  color: var(--mid);
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  padding: 1px 6px;
}

/* Colonne vide : le pointillé occupe toute la hauteur disponible, sinon un
   petit bloc flotterait en haut d'une colonne étirée. */
.pay-empty {
  color: var(--col);
  opacity: 0.55;
  font-size: 12.5px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--col-bd);
  border-radius: var(--r-md);
}

/* Bouton d'action d'une carte : il doit se lire comme un geste, pas comme un
   badge de statut voisin de la catégorie. */
.pay-card-action { white-space: nowrap; }
/* Le bouton ouvre le paiement (QR / IBAN) : couleur d'action, pas le vert
   « c'est réglé », qui appartient à la confirmation dans la modale. */
.pay-card-action:hover {
  border-color: var(--acc);
  color: var(--acc);
}

/* Un champ dans une grille ne doit jamais imposer sa largeur minimale à la
   piste qui le contient : sans ça, une rangée de champs numériques déborde de
   sa carte au lieu de se resserrer. */
.form-group { min-width: 0; }
.form-group > .form-input,
.form-group > select.form-input,
.form-group > textarea.form-input { width: 100%; min-width: 0; }

/* ── Catalogue : 2ᵉ volet pleine hauteur ─────────────────────────────────────
   Repris du 2ᵉ volet de SwissLMS : une colonne blanche collée au rail de
   navigation, de la hauteur de l'écran, remplie par portail depuis la page
   (voir `#shell-panel` dans Shell.jsx). En dessous de 900px elle bascule en
   feuille du bas, ouverte par le bouton « Filtres ». */
.shell-panel {
  display: none;
  width: 268px;
  flex-shrink: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  position: relative;
  z-index: 4;
  /* Même arrondi que `.main` : le volet prend la place que la zone
     principale occupait contre le rail, il doit donc s'y raccorder de la
     même façon (coins haut-gauche et bas-gauche). */
  border-radius: 16px 0 0 16px;
}
.shell-panel.active { display: flex; }
/* Dégradé d'ombre à gauche, sous le rail — même effet que `.sb2::after`.
   Il suit l'arrondi, sinon l'ombre déborde en angle droit dans les coins. */
.shell-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.05), transparent);
  border-radius: 16px 0 0 16px;
  pointer-events: none;
  z-index: 10;
}

.volet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 22px 18px 12px;
  flex-shrink: 0;
}
.volet-head-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.volet-clear {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--acc);
  padding: 0;
}

/* Recherche produits, en tête du volet */
.volet-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 14px 8px;
  padding: 0 10px;
  height: 34px;
  flex-shrink: 0;
  border: 0.25px solid var(--bd);
  border-radius: var(--r-sm);
  background: var(--bg);
}
.volet-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
}
.volet-search button {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--mid);
  display: flex;
  padding: 0;
}

.volet-body { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 4px 0 24px; }
.volet-body::-webkit-scrollbar { width: 3px; }
.volet-body::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 2px; }

/* ── Sections repliables : Distributeurs / Marques / Catégories ─────────── */
.volet-section + .volet-section { margin-top: 2px; }

/* La dernière section (Catégories) s'étire jusqu'au bas du volet et fait
   défiler son arbre en interne plutôt que de plafonner à 340px et laisser
   du vide sous la liste. */
.volet-section--grow { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 200px; }
.volet-section--grow .volet-section-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.volet-section--grow .volet-list { flex: 1; min-height: 0; max-height: none; }
.volet-section-head {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 11px 18px 7px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
}
.volet-section-head:hover { color: var(--ink); }
.volet-section.open .volet-section-head { color: var(--acc); }
.volet-caret { flex-shrink: 0; color: var(--mid); transition: transform 0.15s; }
.volet-caret.open { transform: rotate(90deg); }
.volet-section-title { flex: 1; }
.volet-section-badge.on {
  flex-shrink: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--acc);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.volet-section-body { padding-bottom: 6px; }
.volet-list { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; }
.volet-list::-webkit-scrollbar { width: 3px; }
.volet-list::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 2px; }

.volet-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 18px 6px;
  padding: 5px 8px;
  border: 0.25px solid var(--bd);
  border-radius: var(--r-sm);
  background: var(--bg);
}
.volet-filter input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink);
}
.volet-empty { font-size: 12px; color: var(--mid); padding: 6px 18px; }

/* Ligne simple : un distributeur, une marque */
.volet-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 18px;
  border: none;
  background: none;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.volet-row:hover { background: var(--bd-2); color: var(--ink); }
.volet-row.on { background: var(--acc-light); color: var(--acc); font-weight: 600; }
.volet-row-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.volet-row-count { flex-shrink: 0; font-size: 10.5px; color: var(--mid); }

/* ── Arbre famille → sous-catégorie ────────────────────────────────────── */
.cat-tree { display: flex; flex-direction: column; }
.cat-group { display: flex; flex-direction: column; }

.cat-node {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 18px;
  border: none;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
}
.cat-node:hover { background: var(--bd-2); }
.cat-node.has-active { color: var(--acc); }
.cat-caret { flex-shrink: 0; color: var(--mid); transition: transform 0.15s; }
.cat-caret.open { transform: rotate(90deg); }
.cat-node-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-node-count {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--mid);
  background: var(--bd-2);
  padding: 2px 7px;
  border-radius: 9px;
}

.cat-child {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 18px 7px 37px;
  border: none;
  background: none;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.cat-child:hover { background: var(--bd-2); color: var(--ink); }
.cat-child.on { background: var(--acc-light); color: var(--acc); font-weight: 600; }
.cat-child-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-child-count { flex-shrink: 0; font-size: 10.5px; color: var(--mid); }

.catalog-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* Le bouton n'a de sens que quand les filtres sont repliés hors de la page */
.catalog-filter-btn { display: none; }

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.catalog-card {
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.catalog-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Trois lignes maximum : les titres de catalogue vont jusqu'à 250 caractères
   et défonceraient la grille. */
.catalog-card-name {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  /* Pas de place pour une colonne : le volet bascule en feuille du bas,
     ouverte par le bouton « Filtres » de la barre d'outils. */
  .shell-panel.active { display: none; }
  .shell-panel.active.open {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-height: 78vh;
    z-index: 101;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
  }
  .shell-panel::after { display: none; }
  .catalog-filter-btn { display: inline-flex; }
  .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Résultats de recherche catalogue dans le tiroir « Nouveau produit » :
   une liste, pas une grille — on compare des références ligne à ligne. */
.stock-search-row { transition: border-color var(--transition), background var(--transition); }
.stock-search-row:not(:disabled):hover {
  border-color: var(--acc);
  background: var(--surface-2);
}

/* ── Matériel & Équipement : liste du parc ── */
.eq-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--bd-2); background: var(--surface);
  font-size: 12.5px; font-weight: 550; color: var(--ink-2);
  cursor: pointer; transition: all var(--transition);
}
.eq-chip:hover { border-color: var(--bd); color: var(--ink); }
.eq-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.eq-chip-count { font-size: 11.5px; font-weight: 650; color: var(--mid); }
.eq-chip.active .eq-chip-count { color: rgba(255,255,255,0.7); }
.eq-chip-alert:not(.active) .eq-chip-count { color: var(--rd); }

.eq-tab-count {
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: #fff;
}
.eq-tab-count-red  { background: var(--rd); }
.eq-tab-count-warn { background: var(--warn); }

.eq-row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 2fr) 96px 16px;
  align-items: center; gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--bd-2);
  cursor: pointer; transition: background var(--transition);
}
.eq-row:last-child { border-bottom: none; }
.eq-row:hover { background: var(--canvas); }
.eq-row:hover .eq-row-chevron { color: var(--acc); }
.eq-row-main { min-width: 0; }
.eq-row-sub { font-size: 12px; color: var(--mid); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-row-place-inline { display: none; }
.eq-row-place { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); min-width: 0; white-space: nowrap; }
.eq-row-place svg { color: var(--mid); flex-shrink: 0; }
.eq-row-due { min-width: 0; }
.eq-row-badge { text-align: right; white-space: nowrap; }
.eq-row-chevron { color: var(--bd); transition: color var(--transition); }

@media (max-width: 768px) {
  .eq-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; }
  .eq-row-place, .eq-row-chevron { display: none; }
  .eq-row-place-inline { display: inline; }
  .eq-row-main { grid-column: 1 / -1; }
}

/* ── Menu du compte (réglages + déconnexion) ── */
.account-menu {
  margin-bottom: 6px;
  padding: 6px;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  animation: account-menu-in 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes account-menu-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.account-menu .nav-section { padding: 6px 10px 4px; }
.account-menu-sep { height: 1px; background: var(--bd-2); margin: 6px 4px; }
.account-menu-logout:hover, .account-menu-logout:hover svg { color: var(--rd); }
.user-chip.active { background: var(--sidebar-item); }
.user-chip-caret { display: none; color: var(--mid); flex-shrink: 0; transition: transform var(--transition); }
.sidebar:hover .user-chip-caret { display: block; }
.user-chip.open .user-chip-caret { transform: rotate(180deg); }

/* ── Sélecteur de cabinet (menu du compte) ─────────────────────────────── */
.cabinet-switch .nav-item { color: var(--ink); font-weight: 500; }
.cabinet-switch .nav-item svg { color: var(--ink-2); }
.cabinet-switch .nav-item.active { color: var(--acc); font-weight: 650; }
.cabinet-switch .nav-item.active svg { color: var(--acc); }

/* ── Bandeau « cabinet courant » en tête de chaque page ─────────────────── */
.cabinet-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  height: 46px; padding: 0 28px 0 32px;
  background: var(--acc);
  color: #fff;
  border-radius: 16px 0 0 0;
}
.cabinet-bar-label { color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .09em; font-size: 11px; font-weight: 700; }
.cabinet-bar select {
  height: 30px;
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px; padding: 0 34px 0 14px; font-size: 13px; font-weight: 650;
  font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
  transition: background var(--transition), border-color var(--transition);
}
.cabinet-bar select:hover { background-color: rgba(255,255,255,.22); border-color: rgba(255,255,255,.7); }
.cabinet-bar select option { color: var(--ink); background: #fff; }
@media (max-width: 900px) { .cabinet-bar { border-radius: 0; padding: 0 16px; height: 42px; } }

/* Avec bandeau, le bandeau sort de la zone défilante : la page garde son
   propre coin arrondi en dessous, le blanc du rail visible dans l'encoche. */
.main.has-bar { display: flex; flex-direction: column; background: var(--acc); border-radius: 16px 0 0 16px; overflow: hidden; }
.main.has-bar > .cabinet-bar { position: static; flex-shrink: 0; }
.main.has-bar > .main-page {
  flex: 1; min-height: 0; overflow-y: auto; position: relative; min-width: 0;
  background-color: var(--canvas);
  background-image: radial-gradient(circle, #D8DFE8 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: 16px 0 0 0;
}
@media (max-width: 900px) { .main.has-bar { border-radius: 0; } .main.has-bar > .main-page { border-radius: 0; } }

/* ── DatePicker ───────────────────────────────────────────────────────── */
.dp { position: relative; display: inline-block; }
.dp-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  border: 0.25px solid var(--bd); background: var(--surface); color: var(--ink);
  font-family: var(--font); font-size: 13px; font-weight: 550; cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.dp-trigger svg { color: var(--acc); }
.dp-trigger:hover { border-color: var(--acc-mid); background: var(--acc-light); }
.dp.open .dp-trigger { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(86,76,216,0.12); }
.dp-sm .dp-trigger { padding: 5px 11px; font-size: 12.5px; }

.dp-pop {
  position: absolute; top: calc(100% + 8px); z-index: 60;
  width: 284px; padding: 12px;
  background: var(--surface); border: 0.25px solid var(--bd); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: dp-in 0.14s cubic-bezier(0.4,0,0.2,1);
}
.dp-pop-right { right: 0; }
.dp-pop-left { left: 0; }
@keyframes dp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.dp-title span { color: var(--mid); font-weight: 500; }
.dp-nav {
  width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent;
  color: var(--ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dp-nav:hover { background: var(--acc-light); color: var(--acc); }

.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--mid); padding: 4px 0 6px; letter-spacing: .04em; }
.dp-dow.we { color: var(--bd); }
.dp-day {
  height: 34px; border-radius: 9px; border: none; background: transparent;
  font-family: var(--font); font-size: 13px; color: var(--ink); cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.dp-day.we { color: var(--ink-2); }
.dp-day:hover:not(:disabled) { background: var(--acc-light); color: var(--acc); }
.dp-day.today { font-weight: 700; color: var(--acc); box-shadow: inset 0 0 0 1.5px var(--acc-mid); }
.dp-day.sel, .dp-day.sel:hover { background: var(--acc); color: #fff; font-weight: 700; box-shadow: none; }
.dp-day:disabled { color: var(--bd); cursor: default; }

.dp-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bd-2); }
.dp-link { border: none; background: none; font-family: var(--font); font-size: 12.5px; font-weight: 650; color: var(--acc); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.dp-link:hover { background: var(--acc-light); }
.dp-link.muted { color: var(--mid); font-weight: 500; }
.dp-link:disabled { color: var(--mid); cursor: default; background: none; }

/* ── PeriodPicker ─────────────────────────────────────────────────────── */
.pp-pop { width: 520px; padding: 0; display: flex; overflow: visible; }
.pp-presets { width: 190px; padding: 8px; border-right: 1px solid var(--bd-2); display: flex; flex-direction: column; gap: 2px; }
.pp-preset {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: 8px; border: none; background: transparent;
  font-family: var(--font); font-size: 13px; color: var(--ink); cursor: pointer; text-align: left;
}
.pp-preset:hover { background: var(--acc-light); color: var(--acc); }
.pp-preset.on { background: var(--acc); color: #fff; font-weight: 600; }
.pp-custom { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.pp-custom-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mid); }
.pp-row { display: flex; gap: 12px; }
.pp-lbl { font-size: 12px; color: var(--mid); margin-bottom: 4px; }
.pp-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--bd-2); }
@media (max-width: 640px) { .pp-pop { width: 92vw; flex-direction: column; } .pp-presets { width: auto; border-right: none; border-bottom: 1px solid var(--bd-2); flex-direction: row; flex-wrap: wrap; } }

/* ── Stock : poste de pilotage ───────────── */
/* Teintes par vue : rouge (à commander), orange (péremptions), indigo
   (commandé), vert (produits), violet (IA). Chaque teinte définit ses trois
   variables ; les composants ne connaissent que --t, --t-light, --t-deep. */
.tone-red    { --t: #C0392B; --t-light: #FDECEA; --t-deep: #9c2b1f; --t-grad: linear-gradient(135deg, #b91c1c 0%, #dc2626 55%, #f87171 100%); }
.tone-orange { --t: #D9730D; --t-light: #FEF4E7; --t-deep: #A0560A; --t-grad: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%); }
.tone-indigo { --t: #564cd8; --t-light: #f0effe; --t-deep: #3730a3; --t-grad: linear-gradient(135deg, #3730a3 0%, #564cd8 55%, #8b7ff0 100%); }
.tone-green  { --t: #1F6B45; --t-light: #E8F5EE; --t-deep: #14532d; --t-grad: linear-gradient(135deg, #14532d 0%, #1F6B45 55%, #34D399 100%); }
.tone-mid    { --t: #6B6C7B; --t-light: #EDEFF3; --t-deep: #555663; --t-grad: linear-gradient(135deg, #555663, #9FA0B5); }

.sk-page { padding-bottom: 20px; }
.sk-page .page-header { margin-bottom: 20px; }

.sk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.sk-main { min-width: 0; }
.sk-side {
  display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 62px; max-height: calc(100vh - 76px); overflow-y: auto;
  padding: 2px 2px 8px; margin: -2px -2px 0; scrollbar-width: thin;
}

/* Tuiles-onglets : toujours en couleur ; l'active est soulignée d'un anneau
   blanc, d'une ombre et d'une flèche vers le panneau. */
.sk-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.sk-tab {
  position: relative; text-align: left; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 18px 14px; border-radius: var(--r-lg);
  background: var(--t-grad); border: none; color: #fff;
  transition: transform 0.08s, box-shadow var(--transition);
}
.sk-tab { opacity: .72; }
.sk-tab:hover { opacity: 1; transform: translateY(-2px); }
.sk-tab:active { transform: scale(0.985); }
.sk-tab.active { opacity: 1; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--t); }
/* Flèche « ouvrir » : dit que la tuile se clique ; sur l'active elle pointe vers le bas */
.sk-tab-go {
  position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), transform var(--transition);
}
.sk-tab:hover .sk-tab-go { background: rgba(255,255,255,.35); }
.sk-tab.active .sk-tab-go { transform: rotate(90deg); background: #fff; color: var(--t); }
.sk-tab-eyebrow {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.85);
}
.sk-tab-value { font-size: 30px; font-weight: 750; letter-spacing: -1.2px; line-height: 1.1; color: #fff; margin-top: 4px; }
.sk-tab-sub { font-size: 12.5px; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Vignettes produits (à commander) */
.sk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; }
.sk-pcard {
  --u: var(--rd); --u-light: var(--rd-light);
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 18px 14px 14px; border-radius: var(--r-lg); cursor: pointer;
  background: var(--surface); border: 0.25px solid var(--bd);
  transition: border-color var(--transition), box-shadow var(--transition), transform 0.08s, background var(--transition);
}
.sk-pcard.is-soon { --u: #D9730D; --u-light: var(--warn-light); }
.sk-pcard:hover { box-shadow: 0 10px 24px -14px rgba(20,20,43,.35); transform: translateY(-1px); }
.sk-pcard.is-checked { border-color: var(--acc); background: #fbfbff; box-shadow: 0 0 0 3px var(--acc-light); }
.sk-pcard.is-ordered { cursor: default; background: var(--gr-light); border-color: transparent; }
.sk-pcard-check {
  position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid var(--u); background: var(--surface); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.sk-pcard.is-checked .sk-pcard-check { background: var(--acc); border-color: var(--acc); }
.sk-pcard.is-ordered .sk-pcard-check { background: var(--gr); border-color: var(--gr); }
.sk-pcard-name { font-weight: 650; font-size: 14px; color: var(--ink); line-height: 1.25; margin-top: 4px; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sk-pcard-cat { min-height: 20px; }
.sk-pcard-gauge { width: 100%; height: 6px; border-radius: 999px; background: var(--bd-2); overflow: hidden; margin-top: 4px; }
.sk-pcard-gauge span { display: block; height: 100%; border-radius: 999px; background: var(--u); min-width: 3px; }
.sk-pcard-stock { font-size: 12px; color: var(--mid); }
.sk-pcard-stock strong { color: var(--u); font-size: 13px; }
.sk-pcard-days { color: var(--rd); font-weight: 600; }
.sk-pcard-foot { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 0.25px solid var(--bd-2); }
.sk-pcard-suggest { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; color: var(--u); }
.sk-pcard-suggest span { font-size: 11px; font-weight: 500; color: var(--mid); margin-left: 2px; }
.sk-pcard-ordered { width: 100%; margin-top: 6px; padding-top: 10px; border-top: 0.25px solid rgba(31,107,69,.2); display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 700; color: var(--gr); }
.sk-pcard-ordered span { font-size: 11px; font-weight: 500; color: var(--mid); }
.sk-pcard-ordered svg { vertical-align: -2px; margin-right: 4px; }
.sk-layout-solo { grid-template-columns: minmax(0, 1fr); }

/* Panneau */
.sk-panel {
  background: var(--surface); border: 0.25px solid var(--bd);
  border-radius: var(--r-lg); padding: 18px 20px 16px;
  box-shadow: 0 1px 2px rgba(20,20,43,.04), 0 10px 28px rgba(20,20,43,.05);
}
.sk-panel-inner { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sk-panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sk-panel-title { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.3px; display: flex; align-items: center; gap: 8px; }
.sk-panel-sub { font-size: 12.5px; color: var(--mid); margin-top: 2px; }
.sk-chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* La liste défile dans le panneau : la page, elle, reste à sa place. */
.sk-scroll { max-height: calc(100vh - 320px); min-height: 220px; overflow-y: auto; padding-right: 4px; display: flex; flex-direction: column; gap: 12px; }
.sk-scroll > * { flex-shrink: 0; }
.sk-scroll .table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.sk-table { margin: 0; }
.sk-table td { white-space: nowrap; padding-top: 16px; padding-bottom: 16px; font-size: 14px; }
.sk-table .badge { font-size: 12px; padding: 3px 10px; }
.sk-table td:first-child { white-space: normal; min-width: 200px; }
.sk-icon-btn {
  width: 36px; height: 36px; border-radius: 10px; border: 0.25px solid var(--bd); background: var(--surface);
  color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.sk-icon-btn:hover { background: var(--acc-light); color: var(--acc); border-color: var(--acc-mid); }

/* Groupes (péremptions) */
.sk-group { border: 0.25px solid var(--bd-2); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.sk-group-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  background: var(--t-light); font-size: 12.5px; width: 100%; text-align: left;
}
.sk-group-head.as-button { border: none; cursor: pointer; font-family: inherit; }
.sk-group-title { font-weight: 700; color: var(--t-deep); }
.sk-group-count { font-size: 11px; font-weight: 700; background: var(--t); color: #fff; border-radius: 999px; padding: 0 7px; line-height: 17px; }
.sk-group-sub { color: var(--t-deep); opacity: .8; }
.sk-lot { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 0.25px solid var(--bd-2); cursor: pointer; }
.sk-lot:hover { background: var(--surface-2); }
.sk-lot-main { flex: 1; min-width: 0; }
.sk-lot-name { font-weight: 600; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-lot-meta { font-size: 12px; color: var(--mid); margin-top: 1px; }
.sk-lot-date { text-align: right; flex-shrink: 0; }
.sk-lot-day { font-size: 13px; font-weight: 600; color: var(--ink); }
.sk-lot-days { font-size: 11px; font-weight: 600; }
.sk-lot-days.is-red { color: var(--rd); }
.sk-lot-days.is-orange { color: var(--warn); }
.sk-lot-days.is-mid { color: var(--mid); font-weight: 500; }

/* Cartes latérales */
.sk-card { background: var(--surface); border: 0.25px solid var(--bd); border-radius: var(--r-lg); padding: 14px 16px; }
.sk-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sk-card-title { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.sk-card-link { display: inline-flex; align-items: center; gap: 2px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--acc); font-weight: 600; padding: 2px 0; }

/* IA */
.sk-ai {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); border: 1.5px solid #e4e1fb;
  box-shadow: 0 1px 2px rgba(20,20,43,.04), 0 14px 34px -12px rgba(86,76,216,.35);
}
.sk-ai-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  background: linear-gradient(120deg, #3730a3 0%, #564cd8 45%, #8b7ff0 100%); color: #fff;
}
.sk-ai-avatar { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sk-ai-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.sk-ai-title { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
.sk-ai-pill { font-size: 11px; font-weight: 700; background: rgba(255,255,255,.2); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.sk-ai-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.sk-ai-brief { font-size: 13.5px; line-height: 1.5; color: var(--ink); background: var(--acc-light); border-radius: var(--r-md); padding: 12px 14px; }
.sk-skeleton { display: flex; flex-direction: column; gap: 7px; }
.sk-skeleton span { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #e4e1fb 25%, #f0effe 50%, #e4e1fb 75%); background-size: 200% 100%; animation: sk-shimmer 1.2s infinite; }
@keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sk-ai-list { display: flex; flex-direction: column; gap: 8px; }
.sk-ai-item { --s: var(--mid); --s-light: var(--bd-2); border: 1px solid var(--s-light); border-radius: var(--r-md); padding: 10px 12px; }
.sk-ai-item.sev-high   { --s: #C0392B; --s-light: #f6d3cf; background: #fff8f7; }
.sk-ai-item.sev-medium { --s: #D9730D; --s-light: #f8dfc2; background: #fffaf3; }
.sk-ai-item.sev-low    { --s: #564cd8; --s-light: #e4e1fb; background: #fbfbff; }
.sk-ai-item-head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.sk-ai-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--s); }
.sk-ai-sev { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--s); }
.sk-ai-item-title { font-size: 13px; font-weight: 650; color: var(--ink); line-height: 1.3; }
.sk-ai-item-detail { font-size: 12px; color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
.sk-ai-action {
  margin-top: 7px; display: inline-flex; align-items: center; gap: 3px; border: none; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 650; color: var(--s); background: var(--s-light); border-radius: 999px; padding: 4px 10px;
}
.sk-ai-action:hover { filter: brightness(.97); }
.sk-ai-more { border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--acc); font-weight: 600; text-align: left; padding: 2px 0; }
.sk-ai-ask { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--bd); border-radius: 999px; padding: 4px 4px 4px 14px; transition: border-color var(--transition); }
.sk-ai-ask:focus-within { border-color: var(--acc-mid); }
.sk-ai-ask input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--ink); }
.sk-ai-ask input::placeholder { color: var(--mid); }
.sk-ai-ask button { width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer; background: var(--acc); color: #fff; display: flex; align-items: center; justify-content: center; }
.sk-ai-ask button:disabled { opacity: .35; cursor: default; }
.sk-ai-suggest { display: flex; gap: 6px; flex-wrap: wrap; }
.sk-ai-suggest button { border: 0.25px solid var(--bd); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 4px 10px; font-size: 11.5px; cursor: pointer; font-family: inherit; }
.sk-ai-suggest button:hover { background: var(--acc-light); color: var(--acc); border-color: var(--acc-mid); }
.sk-ai-answer { position: relative; font-size: 13px; line-height: 1.5; color: var(--ink); background: var(--surface-2); border: 0.25px solid var(--bd); border-radius: var(--r-md); padding: 10px 30px 10px 12px; white-space: pre-wrap; }
.sk-ai-answer-close { position: absolute; top: 6px; right: 6px; border: none; background: none; cursor: pointer; color: var(--mid); padding: 4px; display: flex; }
.spin { animation: sk-spin 1s linear infinite; }
@keyframes sk-spin { to { transform: rotate(360deg); } }

/* Reliquats partagés avec les tiroirs (Inventaire) */
.stock-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sk-menu { position: relative; }
.sk-menu > .btn { padding: 8px 12px; }
.sk-menu > .btn.is-open { background: var(--surface-2); }
.sk-menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 240px;
  background: var(--surface); border: 0.25px solid var(--bd); border-radius: var(--r-md); padding: 6px;
  box-shadow: 0 10px 30px -10px rgba(20,20,43,.25);
}
.sk-menu-item {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  border: none; background: none; cursor: pointer; font-family: inherit;
  padding: 9px 10px; border-radius: 8px; font-size: 13.5px; color: var(--ink);
}
.sk-menu-item:hover { background: var(--acc-light); color: var(--acc); }
.sk-menu-item small { display: block; font-size: 11.5px; color: var(--mid); margin-top: 1px; }
.sk-menu-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--bd-2); display: flex; align-items: center; justify-content: center; color: var(--ink-2); flex-shrink: 0; }
.sk-menu-item:hover .sk-menu-icon { background: #fff; color: var(--acc); }
.stock-count { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 1px 8px; letter-spacing: 0; background: var(--bd-2); color: var(--mid); }
.stock-count.is-danger { background: var(--rd-light); color: var(--rd); }
.stock-count.is-warn   { background: var(--warn-light); color: var(--warn); }
.stock-count.is-acc    { background: var(--acc-light); color: var(--acc); }

.stock-quiet {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--r-md);
  background: var(--surface); border: 0.25px dashed var(--bd);
  font-size: 13px; color: var(--mid);
}
.stock-quiet svg { flex-shrink: 0; color: var(--mid); }
.stock-quiet strong { color: var(--ink); font-weight: 600; }
.stock-quiet.is-ok { background: var(--gr-light); border-color: transparent; }
.stock-quiet.is-ok svg, .stock-quiet.is-ok strong { color: var(--gr); }

.stock-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stock-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 0.25px solid var(--bd); border-radius: var(--r-pill);
  padding: 0 12px; height: 36px; width: 260px; max-width: 100%;
  transition: border-color var(--transition);
}
.stock-search:focus-within { border-color: var(--acc-mid); }
.stock-search svg { color: var(--mid); flex-shrink: 0; }
.stock-search input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); font-family: inherit; }
.stock-search input::placeholder { color: #C4BFC2; }
.stock-search button { border: none; background: none; cursor: pointer; padding: 2px; color: var(--mid); display: flex; }
.stock-cat { height: 36px; width: auto; padding: 0 32px 0 12px; border-radius: var(--r-pill); font-size: 13px; }

.chip {
  border: 0.25px solid var(--bd); background: var(--surface); color: var(--mid);
  border-radius: var(--r-pill); padding: 4px 11px; font-size: 12px; font-weight: 550;
  cursor: pointer; font-family: inherit; transition: all var(--transition);
}
.chip:hover { background: var(--surface-2); color: var(--ink); }
.chip.active { background: var(--acc-light); border-color: var(--acc-mid); color: var(--acc); }

@media (max-width: 1180px) {
  .sk-layout { grid-template-columns: 1fr; }
  .sk-side { position: static; max-height: none; overflow: visible; margin: 0; padding: 0; }
  .sk-scroll { max-height: none; }
}
@media (max-width: 900px) {
  .page-header > .stock-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .page-header > .stock-actions { grid-template-columns: auto 1fr 1fr; }
  .stock-actions .btn { flex: none; }
  .sk-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sk-tab { padding: 11px 12px 10px; }
  .sk-tab-value { font-size: 21px; }
  .sk-panel { padding: 14px 12px 12px; }
  .stock-search { width: 100%; }
  .stock-filters { width: 100%; }
  .stock-cat { flex: 1; }
  .sk-lot { flex-wrap: wrap; }
}

/* ── Bon de livraison ─────────────────────── */
.dn-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dn-choice {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 22px 14px; border-radius: var(--r-lg); cursor: pointer; font-family: inherit;
  background: var(--surface); border: 1.5px dashed var(--bd); color: var(--mid); font-size: 12px;
  transition: border-color var(--transition), background var(--transition);
}
.dn-choice:hover { border-color: var(--acc-mid); background: var(--acc-light); }
.dn-choice strong { color: var(--ink); font-size: 14px; margin-top: 6px; }
.dn-choice-icon { width: 46px; height: 46px; border-radius: 14px; background: var(--acc-light); color: var(--acc); display: flex; align-items: center; justify-content: center; }
.dn-files { display: flex; gap: 10px; flex-wrap: wrap; }
.dn-file { position: relative; width: 96px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.dn-file img, .dn-file-pdf { width: 96px; height: 120px; object-fit: cover; border-radius: 10px; border: 0.25px solid var(--bd); background: var(--bd-2); }
.dn-file-pdf { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--rd); letter-spacing: .05em; }
.dn-file-name { font-size: 11px; color: var(--mid); max-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-file button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--ink); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dn-spinner { width: 56px; height: 56px; border-radius: 50%; background: var(--acc-light); color: var(--acc); display: flex; align-items: center; justify-content: center; animation: dn-pulse 1.2s ease-in-out infinite; }
@keyframes dn-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .7; } }
.dn-line { display: flex; gap: 10px; padding: 12px 14px; border: 0.25px solid var(--bd); border-radius: var(--r-md); background: var(--surface); }
.dn-line.is-off { opacity: .55; }
.dn-line-check { padding-top: 2px; }
.dn-line-check input { width: 18px; height: 18px; accent-color: var(--acc); }
.dn-line-src { font-size: 13px; color: var(--ink); font-weight: 600; margin-bottom: 8px; }
.dn-line-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 150px; gap: 8px; }
.dn-line-row .form-input { height: 36px; padding: 0 10px; font-size: 13px; }
.dn-qty { text-align: center; font-weight: 700; }
.dn-line-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; }
@media (max-width: 640px) {
  .dn-choices { grid-template-columns: 1fr; }
  .dn-line-row { grid-template-columns: 1fr 1fr; }
  .dn-line-row select { grid-column: 1 / -1; }
}

/* ── Inventaire de départ (stock vide) ───────────────────────────────────── */
.inv-page .page-subtitle { max-width: 720px; }
.inv-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.inv-why-card { background: var(--surface); border: 0.5px solid var(--bd); border-radius: var(--r-lg); padding: 16px 18px; }
.inv-why-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--acc-light); color: var(--acc); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.inv-why-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.inv-why-text { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.inv-how { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.inv-how-step { flex: 1 1 220px; display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border: 0.5px solid var(--bd-2); border-radius: var(--r-md); padding: 9px 12px; }
.inv-how-step svg { color: var(--acc); flex-shrink: 0; }
.inv-how-num { width: 20px; height: 20px; border-radius: 50%; background: var(--acc); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inv-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.inv-zones { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; }
.inv-zones-title { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mid); padding: 4px 8px 6px; display: flex; justify-content: space-between; }
.inv-zone { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-md); border: 0.5px solid transparent; background: transparent; text-align: left; cursor: pointer; font-family: inherit; color: var(--ink); }
.inv-zone:hover { background: var(--surface); }
.inv-zone.is-current { background: var(--surface); border-color: var(--acc-mid); }
.inv-zone-idx { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--bd); font-size: 11.5px; font-weight: 700; color: var(--mid); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inv-zone.is-current .inv-zone-idx { border-color: var(--acc); color: var(--acc); }
.inv-zone.is-done .inv-zone-idx { border-color: var(--gr); background: var(--gr); color: #fff; }
.inv-zone-body { display: flex; flex-direction: column; min-width: 0; }
.inv-zone-name { font-size: 13px; font-weight: 600; }
.inv-zone-name small { font-weight: 500; color: var(--mid); margin-left: 4px; }
.inv-zone-meta { font-size: 11.5px; color: var(--mid); }
.inv-zone.is-done .inv-zone-meta { color: var(--gr); }
.inv-import { margin-top: 8px; justify-content: flex-start; color: var(--mid); }
.inv-work { padding: 20px 22px; }
.inv-work-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.inv-work-eyebrow { font-size: 11.5px; font-weight: 600; color: var(--acc); text-transform: uppercase; letter-spacing: .04em; }
.inv-work-title { font-size: 18px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.inv-work-hint { font-size: 12.5px; color: var(--mid); margin-top: 2px; }
.inv-search { position: relative; }
.inv-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--mid); pointer-events: none; }
.inv-search .form-input { width: 100%; padding: 11px 12px 11px 38px; font-size: 14px; border-radius: var(--r-pill); }
.inv-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.inv-chips-label { font-size: 12px; color: var(--mid); margin-right: 2px; }
.inv-added { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 9px 12px; border-radius: var(--r-md); background: var(--gr-light); color: var(--gr); font-size: 13px; }
.inv-results { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.inv-result { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0.5px solid var(--bd-2); border-radius: var(--r-md); background: var(--surface-2); }
.inv-result.is-pending { border-color: var(--acc-mid); background: var(--acc-light); }
.inv-result-img { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: #fff; border: 0.5px solid var(--bd-2); flex-shrink: 0; }
.inv-result-img.is-empty { display: flex; align-items: center; justify-content: center; color: var(--mid); }
.inv-result-body { flex: 1; min-width: 0; }
.inv-result-name { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-result-meta { font-size: 12px; color: var(--mid); }
.inv-qty { display: flex; align-items: center; gap: 8px; }
.inv-qty label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.inv-qty .form-input { width: 70px; padding: 6px 8px; text-align: center; }
.inv-empty { font-size: 13px; color: var(--mid); padding: 10px 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inv-empty-quiet { font-size: 12.5px; padding-top: 4px; }
.inv-manual { margin-top: 12px; padding: 14px 16px; border: 0.5px dashed var(--bd); border-radius: var(--r-md); }
.inv-manual-title { font-size: 13px; font-weight: 650; color: var(--ink); margin-bottom: 10px; }
.inv-manual-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.inv-manual-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.inv-progress { display: flex; flex-direction: row; gap: 12px; align-items: stretch; margin-bottom: 14px; }
.inv-stats { flex: 1; padding: 14px 18px; display: flex; flex-direction: row; gap: 28px; }
.inv-progress .inv-callout { flex: 1.2; }
.inv-stat-label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mid); }
.inv-stat-value { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -.5px; margin-top: 2px; }
.inv-stat-sub { font-size: 11.5px; color: var(--mid); }
.inv-recent { list-style: none; margin: 0; padding: 10px 0 0; border-top: 0.5px solid var(--bd-2); display: flex; flex-direction: column; gap: 5px; }
.inv-recent li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); min-width: 0; }
.inv-recent li svg { color: var(--gr); flex-shrink: 0; }
.inv-recent li span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-recent li small { color: var(--mid); white-space: nowrap; }
.inv-recent-more { color: var(--mid) !important; font-size: 12px !important; }
.inv-callout { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); background: var(--acc-light); border-radius: var(--r-md); padding: 12px 14px; }
.inv-callout svg { color: var(--acc); flex-shrink: 0; margin-top: 2px; }
.inv-link { background: none; border: none; padding: 0; color: var(--acc); font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; }
@media (max-width: 760px) { .inv-progress { flex-direction: column; } .inv-stats { flex-direction: column; gap: 10px; } }
@media (max-width: 760px) { .inv-why { grid-template-columns: 1fr; } .inv-grid { grid-template-columns: 1fr; } .inv-zones { position: static; flex-direction: row; overflow-x: auto; } .inv-zones-title, .inv-import { display: none; } .inv-manual-row { grid-template-columns: 1fr; } }

/* Import patients : trois écrans, listes qui défilent dans leur cadre */
.imp-phases { display: flex; gap: 6px; margin-bottom: 14px; }
.imp-phase { border: 0.5px solid var(--bd); background: var(--surface); color: var(--mid); border-radius: var(--r-pill); padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.imp-phase.is-current { background: var(--acc-light); border-color: var(--acc-mid); color: var(--acc); }
.imp-scroll { max-height: 40vh; overflow: auto; }
.imp-scroll .table thead th { position: sticky; top: 0; z-index: 1; }

/* Réponse de l'assistant qui a posé des éléments sur le tableau blanc */
.fa-board-link {
  display: block; margin-top: 8px; padding: 0; border: none; background: none;
  font: inherit; font-size: 12.5px; font-weight: 650; color: var(--acc); cursor: pointer;
}
.fa-board-link:hover { text-decoration: underline; }

/* ── Mode de facturation (mise en route + Paramètres) ──────────────────── */
.billing-modes { display: flex; flex-direction: column; gap: 10px; }
.billing-mode {
  display: flex; align-items: flex-start; gap: 14px; width: 100%;
  padding: 14px 16px; text-align: left; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--bd); border-radius: var(--r-md);
  cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.billing-mode:hover:not(:disabled) { border-color: var(--acc-mid); }
.billing-mode:disabled { cursor: default; opacity: .6; }
.billing-mode.is-on { border-color: var(--acc); background: var(--acc-light); }
.billing-mode-icon {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bd-2); color: var(--ink-2);
}
.billing-mode.is-on .billing-mode-icon { background: var(--acc); color: #fff; }
.billing-mode-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.billing-mode-title { font-size: 14px; font-weight: 600; }
.billing-mode-text { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.billing-mode-check {
  flex: none; width: 20px; height: 20px; border-radius: 50%; margin-top: 2px;
  border: 1.5px solid var(--bd); display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.billing-mode.is-on .billing-mode-check { border-color: var(--acc); background: var(--acc); }

/* Pastille de compteur sur un élément du menu (visible rail replié) */
.nav-item { position: relative; }
.nav-badge {
  position: absolute; left: 22px; top: 3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--rd); color: #fff; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; pointer-events: none;
}