@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Lora:wght@400;500;600&family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Palette et typographie reprises du style "Sameo Core" fourni par Samuel le 2026-09-13
   (fichiers demo-commande_5.html / sameo-core.css) — filets fins, champs posés sur des
   lignes plutôt que dans des carrés, bleu marine + orange, Lora pour les titres/chiffres.
   Appliqué globalement via ces jetons pour que tout le contenu (formulaires, tableaux,
   boutons, totaux) en hérite automatiquement — la coquille (barre latérale + barre du haut)
   reste volontairement telle quelle, voir les exceptions explicites plus bas. */
:root {
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;
  --surface-hover: #F1F2F5;
  --border: #E4E9F0;
  --border-soft: #EFF2F7;
  --border-strong: #D6D9E0;
  --rule-strong: #16203A;
  /* Rebrand Axiom — barre latérale SEULEMENT (voir axiom-tokens.css fourni le 2026-09-20):
     fond/hover/texte repris de --axiom-ink/--axiom-ink-2/--axiom-on-dark-2. Le reste de
     l'appli (bandeau du haut de chaque page, polices) reste inchangé — demandé explicitement
     ainsi, pas le paquet complet. */
  --sidebar: #16233F;
  --sidebar-hover: #1C2A4A;
  --sidebar-text: #C9D2E8;
  --sidebar-text-active: #FFFFFF;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-brand-grad: #1C2A4A;
  --sidebar-footer-grad: #46597A;
  /* Jeton pour un bandeau/en-tête de PAGE voulu "du même bleu que le menu de gauche" (fiche
     client, écran de réception...) — PAS --sidebar directement: --sidebar blanchit en thème
     "light" (menu latéral blanc, voir plus bas), ce qui rendrait ce genre de bandeau pâle et
     illisible au lieu de rester bleu/noir comme la barre du haut. --chrome-panel suit --sidebar
     en thème par défaut ET en "black", mais reste au bleu par défaut en "light" (même principe
     que --chrome-header-mid pour .topbar). Corrigé le 2026-10-03 ("le menu du haut devrait être
     bleu comme le menu de gauche ou noir si en mode sombre" — en thème clair, l'écran de
     réception devenait presque invisible).
  */
  --chrome-panel: #16233F;
  /* Jeton d'indirection pour le dégradé de la barre du haut (.topbar) seulement — ne JAMAIS
     réutiliser --primary directement dans .topbar, car --primary sert aussi aux boutons,
     badges et anneaux de focus partout dans l'appli (voir le thème ampoule plus bas). */
  --chrome-header-mid: var(--primary);
  --ink: #0E1526;
  --ink-muted: #414A63;
  --ink-faint: #838DA3;
  --primary: #17386F;
  --primary-hover: #122C5C;
  --primary-active: #071228;
  --primary-tint: #EBEFF6;
  --primary-ring: rgba(23, 56, 111, 0.18);
  /* Indirection pour les liens/boutons-texte posés nus sur une carte (.link-btn, "Détails" dans
     les tableaux, etc.) — identique à --primary par défaut (aucun changement visuel dans les 3
     thèmes existants), seulement redéfini sous le 4e thème "full" plus bas, où --primary (marine
     foncé) serait illisible sur une carte sombre. */
  --link: var(--primary);
  --link-hover: var(--primary-hover);
  /* Même dégradé que l'en-tête des PDF (voir drawHeader, backend/src/utils/pdfService.js:
     shade(BRAND_COLOR, 0.4) et shade(BRAND_COLOR, -0.62)), inversé (foncé à gauche) pour
     rester lisible sous le titre aligné à gauche dans la barre du haut. */
  --header-grad-dark: #0E2659;
  --header-grad-light: #7CA1F3;
  --on-dark-muted: #B7C6E0;
  --accent: #F76706;
  --accent-hover: #C2560A;
  --accent-tint: rgba(247, 103, 6, 0.14);
  --amber: #C9760A;
  --amber-tint: #FBF0DF;
  --green: #1E8E5A;
  --green-tint: #E7F5EE;
  --red: #C4392B;
  --red-tint: #FBEAE8;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(20, 22, 30, 0.06), 0 1px 3px rgba(20, 22, 30, 0.08);
  --shadow-md: 0 4px 14px rgba(20, 22, 30, 0.08);
  --shadow-lg: 0 16px 40px rgba(20, 22, 30, 0.14);
  --font-display: 'Lora', Georgia, serif;
  --font-shell: 'Space Grotesk', sans-serif;
  --font-body: 'Poppins', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Thème de coquille ("ampoule" dans la barre du haut) — demandé le 2026-10-03: bascule
   globale affectant UNIQUEMENT la barre latérale et la barre du haut (pas --primary, pas
   les boutons/badges/anneaux de focus ailleurs dans l'appli). Appliqué sur <html> via un
   attribut data-chrome, lu/mémorisé par js/app.js. Deux variantes en plus de la par défaut
   (bleu): "black" (tout en noir) et "light" (menu latéral blanc/texte foncé, barre du haut
   inchangée — reste la partie "sombre" par contraste). */
html[data-chrome="black"] {
  --sidebar: #0B0B0D;
  --sidebar-hover: #1C1C1F;
  --sidebar-text: #B9BBC2;
  --sidebar-text-active: #FFFFFF;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-brand-grad: #232328;
  --sidebar-footer-grad: #35353C;
  --header-grad-dark: #000000;
  --chrome-header-mid: #19191C;
  --header-grad-light: #55555E;
  --chrome-panel: #0B0B0D;
}
html[data-chrome="light"] {
  --sidebar: #F2F3F7;
  --sidebar-hover: #E6E8EF;
  --sidebar-text: #4A5068;
  --sidebar-text-active: #10172B;
  --sidebar-border: rgba(16, 23, 43, 0.1);
  --sidebar-brand-grad: #DDE1EC;
  --sidebar-footer-grad: #C9CEDC;
}
/* 4e état de l'ampoule — demandé le 2026-10-03 avec une capture de référence précise: barre du
   haut noire, menu de gauche noir (y compris le bandeau "Suivi des soumissions", qui reprend
   --sidebar — voir .q-tracking-bar plus bas, aucune redéfinition séparée nécessaire), fond de
   page et cartes/tableaux/formulaires/modales sombres, bouton principal en orange. EN ATTENTE DE
   VALIDATION avant mise en production — voir CHROME_THEME_CYCLE dans app.js. */
html[data-chrome="full"] {
  --bg: #11141C;
  --surface: #1B212E;
  --surface-2: #242B3B;
  --surface-hover: #2A3245;
  --border: #2B3245;
  --border-soft: #232936;
  --border-strong: #3E4760;
  --rule-strong: #4A5473;
  --sidebar: #0B0B0D;
  --sidebar-hover: #1C1C1F;
  --sidebar-text: #B9BBC2;
  --sidebar-text-active: #FFFFFF;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-brand-grad: #232328;
  --sidebar-footer-grad: #35353C;
  --chrome-panel: #0B0B0D;
  --ink: #E8EAF1;
  --ink-muted: #AAB1C4;
  --ink-faint: #6E7690;
  --link: #6FA2F2;
  --link-hover: #8FB8F5;
  --header-grad-dark: #000000;
  --chrome-header-mid: #19191C;
  --header-grad-light: #55555E;
}
html[data-chrome="full"] .btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  box-shadow: 0 1px 2px rgba(247, 103, 6, 0.35);
}
html[data-chrome="full"] .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent-hover));
  box-shadow: 0 4px 12px rgba(247, 103, 6, 0.4);
}
html[data-chrome="full"] .btn-primary:active:not(:disabled) { background: var(--accent-hover); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
input[type="radio"] { accent-color: var(--accent); }
input[type="checkbox"] { accent-color: var(--primary); }
::selection { background: var(--primary-tint); color: var(--primary-active); }

/* Barre de défilement discrète, cohérente sur tout le site */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* === Écran de connexion === */
#login-screen, #forgot-password-screen, #reset-password-screen, #onboarding-screen {
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(560px 360px at 12% 8%, rgba(23, 56, 111, 0.05), transparent 60%),
    radial-gradient(520px 340px at 88% 92%, rgba(247, 103, 6, 0.05), transparent 60%),
    var(--bg);
}
#login-screen { display: flex; }
#forgot-password-screen, #reset-password-screen, #onboarding-screen { display: none; }
#forgot-password-screen.active, #reset-password-screen.active, #onboarding-screen.active { display: flex; }

.onboarding-card { width: 480px; }
.onboarding-modules { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 16px; }
.onboarding-modules-label { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 10px; }
.onboarding-modules-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }
.onboarding-module-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.onboarding-module-row input { margin: 0; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

.login-card {
  width: 400px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border-radius: 18px;
  padding: 44px 40px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .login-card { padding: 32px 22px; }
}

.login-brand {
  margin-bottom: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.brand-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.brand-logo-sm {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--font-shell);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: left;
  line-height: 1.05;
}

.brand-name-sm {
  font-family: var(--font-shell);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sidebar-text-active);
  line-height: 1.05;
}

/* "Sameo" sur une ligne, "Core" juste en dessous, décalé pour commencer sous le "e" de
   "Sameo" — demandé explicitement le 2026-09-12. "S" reste orange, "C" redevient bleu (comme
   le logo), bleu plus pâle en version barre latérale (fond navy) pour rester lisible.
   Utilisé uniquement par l'écran de connexion (login-brand) — la barre latérale porte
   maintenant le logo Axiom (voir .brand-line-axiom), rebrand du 2026-09-20 volontairement
   limité à la barre latérale seule. */
.brand-part-orange { color: #FF7A18; }
.brand-part-blue { color: #145DA0; }
.brand-part-blue-sm { color: #5AC8FA; }
.brand-line-core { margin-left: 2.6em; margin-top: 1px; }

/* Logotype Axiom de la barre latérale — mot unique, pas de découpage de lettres colorées
   comme l'ancien "SameoCore" (voir axiom-logo.html fourni). */
.brand-line-axiom {
  font-family: var(--font-shell);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sidebar-text-active);
}

/* Sous-titre "Système intelligent" sous le nom SameoCore — demandé explicitement le
   2026-09-12 ("en tout petit"). */
.brand-subtitle {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 3px;
}

.brand-subtitle-sm {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sidebar-text);
  margin-top: 3px;
}

.login-sub {
  color: var(--ink-muted);
  font-size: 13px;
  text-align: center;
  margin-bottom: 30px;
  line-height: 1.5;
}

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  margin-bottom: 5px;
}
/* Champs "posés sur une ligne" plutôt qu'encadrés dans un carré — style repris de
   sameo-core.css (demandé explicitement le 2026-09-13: "un style plus écrit sur des lignes
   que dans des carrés"). Un simple filet sous le champ, qui s'accentue en bleu marine au
   focus, au lieu d'une boîte pleine. */
.field input, .field select, .field textarea {
  width: 100%;
  padding: 8px 0 9px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font-size: 14.5px;
  background: transparent;
  color: var(--ink);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.field select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 18px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2357607a' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}
.field input:hover, .field select:hover { border-bottom-color: var(--border-strong); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--primary);
  box-shadow: 0 1px 0 0 var(--primary);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
/* .field input,select,textarea ci-dessus vise les champs texte — sans ce reset, une case à
   cocher/bouton radio nichée dans un .field (ex: les cartes de rôle Administrateur/Employé)
   hérite width:100%/padding/fond de champ texte et s'étire, poussant tout le contenu à côté
   d'elle hors de sa carte. */
.field input[type="radio"], .field input[type="checkbox"] {
  width: auto;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  flex-shrink: 0;
}

/* === Cartes de choix (rôle, etc.) — un clic sur toute la carte, pas juste le petit rond === */
.choice-card {
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.choice-card:hover { border-color: var(--border-strong); }
.choice-card.selected { border-color: var(--primary); background: var(--primary-tint); }
.choice-card .choice-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
}
.choice-card .choice-desc {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: normal;
  margin-top: 4px;
  margin-left: 22px;
}

.btn {
  border: none;
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), box-shadow 150ms var(--ease), transform 80ms var(--ease), color 150ms var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-active)); color: white; box-shadow: 0 1px 2px rgba(23, 56, 111, 0.3); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--primary-hover), var(--primary-active)); box-shadow: 0 4px 12px rgba(23, 56, 111, 0.32); }
.btn-primary:active:not(:disabled) { background: var(--primary-active); }
.btn-block { width: 100%; justify-content: center; }
.btn-ghost { background: none; color: var(--ink-muted); border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding-left: 0; padding-right: 0; }
.btn-ghost:hover:not(:disabled) { color: var(--ink); border-bottom-color: var(--ink); }
.btn-danger { background: none; color: var(--red); border-bottom: 1px solid rgba(196, 57, 43, 0.3); border-radius: 0; padding-left: 0; padding-right: 0; }
.btn-danger:hover:not(:disabled) { border-bottom-color: var(--red); }
/* Bouton "Payer" (Comptabilité > Paiement) — orange et plus gros que les boutons habituels
   pour bien ressortir dès qu'un fournisseur reste à payer. Demandé explicitement le
   2026-09-19 ("le bouton paiement doit être orange et plus gros"). */
.btn-warning { background: linear-gradient(135deg, var(--amber), #A35F08); color: white; box-shadow: 0 1px 2px rgba(201, 118, 10, 0.35); padding: 12px 22px; font-size: 13px; }
.btn-warning:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(201, 118, 10, 0.4); }
.btn-sm { padding: 6px 12px; font-size: 11px; }

.login-error {
  background: var(--red-tint);
  color: var(--red);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

/* === Coquille de l'application === */
/* height (pas min-height) + overflow:hidden: sans ça, la moindre chose qui dépasse ne serait-ce
   que d'un pixel (un sous-pixel d'arrondi, une bordure) rend le BODY lui-même défilable — sur
   Safari/trackpad, ça déclenche l'effet "élastique" (rebond au-delà du haut de la page) qui
   pousse tout, y compris #sidebar (qui est fixe et censé toujours rester visible), hors du cadre
   un instant avant de revenir. #sidebar et #main gèrent déjà chacun leur propre défilement
   interne (overflow-y) — le corps de la page ne doit jamais avoir sa propre marge de manoeuvre
   pour défiler. Demandé explicitement le 2026-09-19 ("le menu de gauche doit rester fixe et le
   slide doit être dans la partie de droite" — répété 4 fois avant qu'on trouve la vraie cause).
   Sans lien avec #login-screen/#onboarding-screen (min-height:100vh, en dehors de #app-shell). */
#app-shell { display: none; height: 100vh; overflow: hidden; }
#app-shell.active { display: flex; }

#sidebar {
  width: 240px;
  height: 100vh;
  background: var(--sidebar);
  color: var(--sidebar-text);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 18px 0;
  overflow: hidden;
}

#nav-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.sidebar-brand {
  padding: 18px 18px 20px;
  margin: -18px 0 10px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--sidebar-border);
  background: linear-gradient(to bottom, var(--sidebar-brand-grad), var(--sidebar));
}

/* Onglets "Compagnie(s) affichée(s)" et "Aperçu d'utilisateur" dans le pied de la barre
   latérale — même style qu'un onglet normal du menu ci-dessus (une seule ligne, icône + texte),
   mais ouvrent un menu déroulant blanc au clic plutôt que de naviguer. Demandé explicitement le
   2026-09-12 ("des onglets normal comme les autres... mais un menu blanc"). */
.sidebar-menu-section {
  border-top: 1px solid var(--sidebar-border);
  padding: 8px 0;
  margin-bottom: 8px;
}
#company-multiselect, #role-preview-controls { position: relative; }
.sidebar-menu-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: calc(100% - 20px);
  margin: 1px 10px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  color: var(--sidebar-text);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.sidebar-menu-btn:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.sidebar-menu-static { cursor: default; }
.sidebar-menu-static:hover { background: none; color: var(--sidebar-text); }
.sidebar-menu-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-menu-caret { flex-shrink: 0; opacity: 0.6; font-size: 11px; }

.sidebar-white-panel {
  display: none;
  /* position:fixed (coordonnées calculées au clic) plutôt qu'absolute: #sidebar a
     overflow:hidden (nécessaire pour son propre défilement interne), qui couperait un enfant
     positionné en absolute — même piège CSS que le menu "⋮" des lignes du tableau Utilisateurs. */
  position: fixed;
  min-width: 200px;
  max-width: 280px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--shadow-lg);
  z-index: 20;
}
.sidebar-white-panel.open { display: block; }
.sidebar-white-panel-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-transform: none;
  cursor: pointer;
  white-space: nowrap;
}
.sidebar-white-panel-option:hover { background: var(--surface-2); }
/* Rôle du profil dans "Voir comme…" — petit et pâle sous le nom, pour l'avoir sous les yeux
   sans qu'il prenne le dessus sur le nom. Demandé explicitement le 2026-10-03. */
.sidebar-white-panel-option-name { display: block; }
.sidebar-white-panel-option-role { display: block; font-size: 10.5px; font-weight: 400; color: var(--ink-faint); margin-top: 1px; }

/* Trait discret sous "Accès rapide" (pas pleine largeur) — voir buildSidebar, app.js. Demandé
   explicitement le 2026-09-12. */
.nav-divider { height: 1px; background: var(--sidebar-border); margin: 8px 22px; }

.nav-group { margin-bottom: 4px; }
.nav-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sidebar-text);
  padding: 14px 18px 6px;
  font-weight: 600;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 1px 10px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sidebar-text);
  cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.nav-item.active {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
}
.nav-item.active .nav-icon { color: var(--accent); }
.nav-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  display: inline-flex;
  color: var(--sidebar-text);
  transition: color 120ms var(--ease);
}
.nav-item:hover .nav-icon { color: var(--sidebar-text-active); }
.nav-icon svg { width: 100%; height: 100%; }

/* Groupe repliable dans le menu (ex: Comptabilité regroupant Factures/Documents fournisseurs/
   Inventaire) — même style de ligne que .nav-item, juste une petite flèche pour déplier/replier
   sans naviguer. Placée complètement à droite de la rangée (order + margin-left:auto — reste
   AVANT l'icône dans le DOM, seul l'affichage visuel change, donc aucun autre code/gestionnaire
   de clic à toucher) — demandé explicitement le 2026-09-20 ("les flèches... doivent être à
   droite complètement"), remplace l'ancien positionnement à gauche de l'icône (2026-09-07). */
.nav-group-toggle {
  background: none;
  border: none;
  padding: 0;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sidebar-text-active);
  font-size: 10px;
  cursor: pointer;
  transition: transform 150ms var(--ease);
  order: 2;
  margin-left: auto;
}
.nav-group-toggle.expanded { transform: rotate(90deg); }

/* Page "Accès rapide" — remplacée le 2026-10-03 par le module scopé acces-rapide.js et
   acces-rapide.css (classes qa, préfixe qa-), monté dans renderQuickAccess (quick-access.js).
   L'ancienne grille de classes "quick access" et "collapsible" a été retirée d'ici, plus rien
   ne la référence. acces-rapide.css lit les jetons axiom s'ils existent, sinon retombe sur ses
   propres valeurs par défaut (bleu marine + orange, Inter et Lora) — rien de tel n'étant chargé
   ici, on relie directement ses jetons qa aux vrais jetons de l'appli pour rester visuellement
   identique au reste du site (même marine, même orange, même police). Cette règle doit rester
   chargée après acces-rapide.css (voir l'ordre des liens dans index.html) pour gagner sur ses
   valeurs par défaut à spécificité égale. */
.qa-root {
  --qa-ink: var(--sidebar);
  --qa-orange: var(--accent);
  --qa-orange-soft: var(--accent-tint);
  --qa-text: var(--ink);
  --qa-text-2: var(--ink-muted);
  --qa-sans: var(--font-body);
  --qa-serif: var(--font-display);
}
.nav-subgroup { margin-left: 15px; border-left: 1px solid var(--accent); padding-left: 6px; }
.nav-item-child { font-size: 13px; }

.sidebar-footer {
  margin: auto 0 -18px;
  padding: 14px 18px 32px;
  border-top: 1px solid var(--sidebar-border);
  font-size: 12.5px;
  background: linear-gradient(to bottom, var(--sidebar), var(--sidebar-footer-grad));
}
.sidebar-footer .user-name { color: var(--sidebar-text-active); font-weight: 700; font-size: 16px; }
.sidebar-footer .user-role { color: var(--sidebar-text); text-transform: capitalize; }
.sidebar-footer #impersonate-select {
  width: 100%;
  margin-top: 8px;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid var(--sidebar-border);
  border-radius: 6px;
  background: var(--sidebar-hover);
  color: var(--sidebar-text-active);
}
.sidebar-footer button { background: none; border: none; color: var(--sidebar-text); font-size: 12px; padding: 0; margin-top: 8px; transition: color 120ms var(--ease); }
.sidebar-footer button:hover { color: var(--red); }

#main {
  flex: 1;
  overflow-y: auto;
  height: 100vh;
}

#impersonation-banner {
  background: var(--primary);
  color: white;
  padding: 10px 32px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
#impersonation-banner .btn-primary {
  background: white;
  color: var(--primary);
}
#impersonation-banner .btn-primary:hover { background: var(--surface-2); }

#role-preview-banner {
  background: var(--accent);
  color: white;
  padding: 10px 32px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
#role-preview-banner .btn-primary { background: white; color: var(--accent); }
#role-preview-banner .btn-primary:hover { background: var(--surface-2); }

.topbar {
  background: linear-gradient(90deg, var(--header-grad-dark) 0%, var(--chrome-header-mid) 55%, var(--header-grad-light) 100%);
  box-shadow: 0 2px 14px rgba(14, 38, 89, 0.22);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar h1 { font-family: var(--font-shell); font-size: 19px; margin: 0; letter-spacing: -0.01em; color: #FFFFFF; }
.topbar .subtitle { color: var(--on-dark-muted); font-size: 12.5px; margin-top: 2px; }

/* Ampoule de thème de coquille, coin droit de la barre du haut — demandée le 2026-10-03. */
.chrome-theme-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.14);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  transition: background 120ms var(--ease);
}
.chrome-theme-btn:hover { background: rgba(255, 255, 255, 0.24); }

/* Bouton hamburger et fond assombri derrière le menu — cachés sur ordinateur, activés
   seulement sous 860px (voir le bloc @media plus bas). Demandé explicitement le 2026-09-12
   ("assure-toi que... le ERP [est] compatible mobile"). */
#mobile-menu-btn {
  display: none;
  order: -1;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
#mobile-menu-btn:hover { background: rgba(255, 255, 255, 0.24); }
#sidebar-backdrop { display: none; }

/* === Menu latéral en tiroir sur mobile/tablette étroite === */
@media (max-width: 860px) {
  #mobile-menu-btn { display: block; }
  #app-shell.active { position: relative; }
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 200ms var(--ease);
    box-shadow: var(--shadow-lg);
  }
  #sidebar.mobile-open { transform: translateX(0); }
  #sidebar-backdrop.active {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 24, 0.5);
    z-index: 45;
  }
  .topbar { padding: 14px 16px; }
  .content { padding: 16px 16px 40px; }
}

.content { padding: 24px 32px 60px; }

/* === Cartes / tableaux === */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-header h3 { margin: 0; font-size: 16px; font-weight: 500; font-family: var(--font-display); letter-spacing: -0.01em; }
.card-body { padding: 20px; }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar input[type="text"], .toolbar select {
  padding: 8px 4px 9px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font-size: 13.5px;
  background: transparent;
  color: var(--ink);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.toolbar input[type="text"]:focus, .toolbar select:focus {
  outline: none;
  border-bottom-color: var(--primary);
  box-shadow: 0 1px 0 0 var(--primary);
}
.toolbar .spacer { flex: 1; }

.card { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  padding: 0 12px 9px;
  border-bottom: 1px solid var(--rule-strong);
  font-weight: 700;
  background: none;
  white-space: nowrap;
}
tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px;
  white-space: nowrap;
}
tbody tr { transition: background 100ms var(--ease); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 1px solid var(--border); }

/* Colonne "Onglets / Projets accessibles" (Utilisateurs): liste raccourcie plutôt que sur une
   seule ligne qui poussait tout le tableau à déborder (voir "tbody td{white-space:nowrap}"
   ci-dessus, qui s'applique aussi ici) — "ⓘ" affiche la liste complète au survol (title natif,
   même principe que .desc-info dans Achat/Réception). Demandé explicitement le 2026-10-03.
   */
.truncated-cell { max-width: 420px; white-space: normal !important; }
.truncated-info { display: inline-block; margin-left: 4px; color: var(--ink-faint); cursor: help; font-size: 12px; }
.truncated-info:hover { color: var(--link); }

/* Le format compact (tout sur une ligne, actions côte à côte) doit rester la référence même
   sur un écran plus étroit — on réduit le texte des tableaux plutôt que de le laisser
   s'empiler sur plusieurs lignes (demandé explicitement le 2026-09-07). Le overflow-x:auto sur
   .card ci-dessus reste le filet de sécurité si même le texte réduit ne suffit pas. */
@media (max-width: 1200px) {
  thead th { font-size: 10px; padding: 9px 10px; }
  tbody td { font-size: 12.5px; padding: 10px; }
  .link-btn { font-size: 12px; }
}
@media (max-width: 960px) {
  thead th { font-size: 9px; padding: 8px; }
  tbody td { font-size: 11.5px; padding: 8px; }
  .link-btn { font-size: 11px; }
}
@media (max-width: 760px) {
  thead th { font-size: 8px; padding: 6px; }
  tbody td { font-size: 10.5px; padding: 6px; }
  .link-btn { font-size: 10px; }
}
.mono { font-family: var(--font-mono); font-size: 12.5px; }
.num { text-align: right; font-family: var(--font-mono); }

/* Grille dense façon tableur (Excel) — bordures sur chaque cellule, lignes zébrées, texte plus
   petit que les tableaux habituels de l'app. Utilisé pour le grand livre des transactions
   (Historique et maintenance des transactions). Demandé explicitement le 2026-09-12 ("l'onglet
   doit ressembler à un fichier Excel littéralement"). */
.xl-grid { font-size: 12px; }
.xl-grid thead th {
  font-size: 11px;
  text-transform: none;
  letter-spacing: normal;
  padding: 5px 8px;
  border: 1px solid var(--border);
}
.xl-grid tbody td {
  padding: 4px 8px;
  border: 1px solid var(--border);
  font-size: 12px;
  white-space: nowrap;
}
.xl-grid tbody tr:nth-child(even) { background: var(--surface-2); }
.xl-grid tbody tr:hover { background: var(--primary-tint, var(--surface-hover)); }
.xl-grid thead th { position: relative; white-space: nowrap; }
/* Tri au clic sur l'en-tête de colonne — remplace l'ancien filtre façon Excel (case à cocher),
   jugé trop compliqué pour l'usage réel. Demandé explicitement le 2026-09-19. */
.xl-sortable { cursor: pointer; user-select: none; }
.xl-sortable:hover { background: var(--surface-hover); color: var(--ink); }
/* Réception/facture déjà rattachée à un paiement (voir supplier-docs.js) — reléguée en
   grisâtre au bas de la liste, réglée. Demandé explicitement le 2026-09-19. */
.sd-row-matched td { color: var(--ink-faint); }
/* Petit bouton "▾" dans une cellule (pas l'en-tête) listant les transactions liées à la même
   chaîne (soumission -> commande -> ... — voir inventory-history.js). */
.xl-chain-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--link);
  font-weight: 700;
  font-size: 10px;
  padding: 2px 4px;
  margin-left: 3px;
  border-radius: 4px;
  vertical-align: middle;
}
.xl-chain-btn:hover { background: var(--surface-hover); }
/* Onglet Réception (receiving.js): en-têtes des 3 tableaux (Bons de commande ouverts/reçus,
   Produits déjà en commande) centrés plutôt qu'alignés à gauche par défaut — la rangée
   paraissait mal balancée, surtout avec la dernière colonne d'action sans titre qui laissait un
   grand vide à droite. Le chevron replier/afficher, avant un simple caractère ▾ à 12px sans
   aucun traitement, est repris dans un cercle avec fond au survol (même langage visuel que le
   ✕ de fermeture d'un modal, .modal-header .close-btn) pour bien se voir comme un contrôle
   cliquable. Demandé explicitement le 2026-09-20 ("rajouter les petites flèches... centre la
   ligne au complet... rend le tout le plus jolie possible"). */
.rcv-table thead th { text-align: center; }
/* Onglet Expédition (shipping.js): même traitement que .rcv-table ci-dessus (en-têtes centrés) +
   passage à .xl-grid (grille dense, comme Inventaire/Achat/Réception) — pour que Réception et
   Expédition se ressemblent, et ressemblent un peu plus à Soumissions/Commande. Demandé
   explicitement le 2026-09-20 ("uniformisé les onglets réception et expédition... ressemble un
   peu plus à l'onglet soumission"). */
.ship-table thead th { text-align: center; }
/* Onglet Fournisseurs (suppliers.js): même traitement que .rcv-table/.ship-table ci-dessus
   (en-têtes centrés) + passage à .xl-grid (grille dense). Demandé explicitement le 2026-09-20
   ("rend le plus jolie comme les autres... recentre le texte... rend le tout jolie comme les
   autres onglets fait précédemment"). */
.sup-table thead th { text-align: center; }
.rcv-chevron-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  transition: background 120ms var(--ease);
}
.rcv-section-toggle:hover .rcv-chevron-btn { background: var(--surface-hover); }
.rcv-chevron { font-size: 15px; color: var(--ink-muted); display: inline-block; transition: transform 120ms var(--ease); }
/* Onglet Achat (purchase-orders.js): même traitement que .rcv-table ci-dessus (en-têtes centrés)
   plus le passage à .xl-grid (grille dense, même style déjà utilisé dans l'onglet Inventaire) —
   pour voir plus de bons de commande sans défiler, sur le même principe que Inventaire. Demandé
   explicitement le 2026-09-20 ("centre... rend la page plus jolie... rapetisse les rangées...
   comme dans inventaire"). */
.po-table thead th { text-align: center; }
/* Initiales de l'acheteur qui a créé le bon de commande (colonne entre Fournisseur et Date) —
   nom complet au survol (title natif). Demandé explicitement le 2026-10-03. */
.buyer-initials {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary-tint); color: var(--primary);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  cursor: default;
}
.xl-filter-panel { width: 240px; padding: 0; }
.xl-filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  font-size: 12.5px;
  border-radius: 6px;
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
}
.xl-filter-item:hover { background: var(--surface-hover); }
.xl-filter-item input { flex-shrink: 0; }

/* Badges statut - style tampon comptable */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-draft { background: #EDEEF2; color: #565B66; }
.badge-sent { background: var(--primary-tint); color: var(--primary); }
.badge-paid { background: var(--green-tint); color: var(--green); }
.badge-partial { background: var(--amber-tint); color: var(--amber); }
.badge-overdue { background: var(--red-tint); color: var(--red); }
.badge-cancelled { background: #EDEEF2; color: #9095A0; text-decoration: line-through; }

/* Tableau Inventaire (onglet Inventaire) — rangées et texte encore plus denses que .xl-grid pour
   voir plus de produits sans défiler, demandé explicitement le 2026-10-02 ("jaimerais les ranges
   plus petite pour les produits pour en voir plus dans une page"). Classe dédiée plutôt que de
   resserrer .xl-grid globalement, pour ne pas affecter Achat/Réception qui partagent ce style. */
.inv-grid-compact { font-size: 11px; }
.inv-grid-compact thead th { padding: 3px 6px; font-size: 10px; }
.inv-grid-compact tbody td { padding: 1px 6px; font-size: 11px; line-height: 1.3; }
.inv-grid-compact .badge { padding: 1px 7px; font-size: 9px; }

.empty-state {
  text-align: center;
  padding: 56px 20px;
  color: var(--ink-muted);
  font-size: 13.5px;
}
.empty-state .icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 18px;
  margin: 0 auto 14px;
}

.modal-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15, 17, 24, 0.5);
  backdrop-filter: blur(2px);
  align-items: center; justify-content: center;
  z-index: 50;
}
.modal-backdrop.active { display: flex; }
.modal {
  background: var(--surface);
  border-radius: 14px;
  width: 520px;
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: var(--shadow-lg);
  animation: modalIn 160ms var(--ease);
}
.modal.modal-lg { width: 980px; }
/* Révision d'import (Inventaire): table large, beaucoup de colonnes éditables — voir
   importReviewModal dans products.js. Demandé explicitement le 2026-09-18. */
.modal.modal-xl { width: 1400px; max-width: 95vw; }
@keyframes modalIn { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { margin: 0; font-family: var(--font-display); font-size: 16px; letter-spacing: -0.01em; }
.modal-header .close-btn { border: none; background: none; font-size: 16px; color: var(--ink-muted); width: 28px; height: 28px; border-radius: 7px; transition: background 120ms var(--ease), color 120ms var(--ease); }
.modal-header .close-btn:hover { background: var(--surface-hover); color: var(--ink); }
.modal-body { padding: 22px; }
.modal-footer { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
/* Force un retour à la ligne à un endroit précis dans le footer d'un modal (groupes de boutons
   qui doivent rester ensemble, peu importe la largeur de l'écran). Demandé explicitement le
   2026-09-12. */
.modal-footer-break { flex-basis: 100%; height: 0; }

/* Détail d'une note de crédit (viewCreditNote) — la colonne Description peut passer à la ligne
   (toutes les autres cellules du tableau restent en nowrap, par défaut, voir tbody td plus haut)
   plutôt que de forcer tout le tableau — et donc le modal au complet — à déborder horizontalement
   sur une description longue. Même symptôme déjà rencontré et corrigé différemment sur
   .cnr-lines (voir le commentaire juste au-dessus): nowrap sur toutes les cellules d'un tableau
   ne laisse d'autre choix que déborder quand une colonne ne peut pas se permettre d'être
   tronquée. Demandé explicitement le 2026-10-02 ("assure-toi qu'on ne scroll pas sur le côté").
*/
.detail-line-table td:first-child { white-space: normal; word-break: break-word; }

/* Réception du matériel (notes de crédit RMA) — cartes empilées plutôt qu'un tableau à colonnes
   fixes (Description/Restant/Reçu/Prix): l'ancien tableau tronquait ou coupait carrément la
   colonne Prix quand la fenêtre du navigateur n'était pas très large (white-space:nowrap sur
   toutes les cellules, voir plus haut). Ici les champs passent à la ligne au besoin (flex-wrap)
   au lieu de déborder hors du modal — on voit toujours tout, peu importe la largeur de la
   fenêtre, sans avoir à défiler horizontalement. Reprend le style "filet sous le champ" de
   .field (voir plus haut, demandé le 2026-09-13) pour rester cohérent avec le reste de l'app.
   Demandé explicitement le 2026-09-20 ("rend ca plus jolie et la page adapté a lecritures pour
   voir tout"). */
.cnr-lines { display: flex; flex-direction: column; gap: 12px; }
.cnr-line-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.cnr-line-desc { font-weight: 600; font-size: 13.5px; margin-bottom: 10px; }
.cnr-line-fields { display: flex; flex-wrap: wrap; gap: 20px; }
.cnr-field-sm { margin-bottom: 0; min-width: 110px; }
.cnr-field-static { padding: 8px 0 9px; font-size: 14.5px; }

.cnr-fees { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.cnr-fee-card { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.cnr-fee-card .field { margin-bottom: 0; }
.cnr-fee-desc-field { flex: 1 1 200px; min-width: 160px; }
.cnr-fee-mode-value { display: flex; align-items: flex-end; gap: 12px; }
.cnr-fee-mode-value select { width: 56px; }
.cnr-fee-mode-value input { width: 70px; }
.cnr-fee-computed { font-family: var(--font-mono); font-weight: 600; font-size: 14.5px; padding: 8px 0 9px; min-width: 70px; text-align: right; }
.cnr-fee-remove { color: var(--red); padding-bottom: 8px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
  transition: box-shadow 150ms var(--ease), transform 150ms var(--ease);
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-card .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); margin-bottom: 8px; font-weight: 600; }
.stat-card .value { font-family: var(--font-display); font-size: 25px; font-weight: 700; letter-spacing: -0.01em; }
.stat-card .value.amber { color: var(--amber); }
.stat-card .value.green { color: var(--green); }
.stat-card .value.red { color: var(--red); }
.stat-card .sub { font-size: 11.5px; color: var(--ink-muted); margin-top: 4px; font-family: var(--font-mono); }


/* Barre de suivi des soumissions — même couleurs que le menu de gauche. Demandé
   explicitement le 2026-09-12. */
.q-tracking-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  background: var(--sidebar);
  border-radius: 10px;
  padding: 10px 18px;
  margin-bottom: 16px;
}
.q-tracking-bar .btn.q-tracking-btn {
  color: var(--sidebar-text-active);
  border-color: var(--sidebar-border);
  background: var(--sidebar-hover);
  flex-shrink: 0;
}
.q-tracking-bar .btn.q-tracking-btn:hover { background: var(--sidebar-border); }
.q-tracking-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sidebar-text);
  font-size: 13px;
}
.q-tracking-select {
  background: var(--sidebar-hover);
  color: var(--sidebar-text-active);
  border: 1px solid var(--sidebar-border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12.5px;
}
.q-tracking-label { white-space: nowrap; }
.q-tracking-value {
  font-weight: 700;
  color: var(--sidebar-text-active);
  font-size: 15px;
}
.q-tracking-value.q-tracking-lost { color: #E8919A; }

/* Petits compteurs (en attente / acceptées / total) juste à côté du bouton "Suivi des
   soumissions" — remplace les cartes de statistiques pleine largeur retirées de la liste.
   L'icône ⓘ affiche le montant en $ au survol. Bulle CSS maison (pas le title natif du
   navigateur — trop lent/discret, ne s'affichait pas de façon fiable). Demandé explicitement
   le 2026-09-12. */
.q-tracking-mini-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--sidebar-text);
  font-size: 12px;
  padding-left: 14px;
  border-left: 1px solid var(--sidebar-border);
}
.q-tracking-mini { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.q-tracking-mini strong { color: var(--sidebar-text-active); font-size: 14px; }
.q-tracking-info {
  position: relative;
  cursor: default;
  opacity: 0.7;
  font-size: 12px;
}
.q-tracking-info:hover { opacity: 1; }
.q-tracking-info::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #111C2B;
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.q-tracking-info:hover::after { opacity: 1; visibility: visible; }

/* Barre de résumé de l'Inventaire (valeur totale, nombre de produits) — mêmes couleurs que la
   barre de suivi des soumissions, mais un cran plus grande (à mi-chemin entre les cartes de
   stat pleine taille et les petits compteurs de Soumissions). Demandé explicitement le
   2026-09-12. */
.inv-stats-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--sidebar);
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 16px;
}
.inv-stat { display: flex; flex-direction: column; gap: 4px; }
.inv-stat-label {
  color: var(--sidebar-text);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.inv-stat-value {
  color: var(--sidebar-text-active);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
}
/* Stat cliquable dans la barre d'inventaire (ex: "Produits inactifs") — même emplacement que les
   autres stats, juste une légère mise en évidence au survol pour indiquer qu'on peut cliquer.
   Demandé explicitement le 2026-10-04. */
.inv-stat-clickable { border-radius: 6px; padding: 4px 8px; margin: -4px -8px; transition: background .12s ease; }
.inv-stat-clickable:hover { background: rgba(255,255,255,0.08); }

/* Troncature + infobulle discrète au survol, réutilisable partout où une colonne de tableau peut
   contenir un texte long (description, SKU d'une commande spéciale du genre "Lot Eaton -
   SO349869 - Projet Édouard Montpetit..."): coupe avec "…" plutôt que de repousser les autres
   colonnes hors de l'écran, bulle complète affichée au survol (remplace l'ancien tooltip natif du
   navigateur — trop lent/discret, voir .q-tracking-info ci-dessus pour la même idée appliquée à
   une icône). Demandé explicitement le 2026-10-04 ("une description apparaît dans un petit
   rectangle discret comme dans bien d'autres menus"). */
.truncate-tip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
  position: relative;
}
.truncate-tip[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #111C2B;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  width: max-content;
  max-width: 320px;
  z-index: 60;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* Description tronquée dans le tableau Inventaire — sans limite de largeur, une description
   longue repoussait Catégorie et les colonnes de quantités hors de l'écran. Demandé explicitement
   le 2026-09-18, infobulle personnalisée ajoutée le 2026-10-04. */
.prod-description {
  max-width: 260px;
}
/* Cellule SKU — un produit "commande spéciale" (voir openSpecialOrderModal) utilise une longue
   phrase descriptive comme SKU (ex: "Lot Eaton - SO349869 - Projet Édouard Montpetit..."), qui à
   elle seule forçait tout le tableau Inventaire à défiler horizontalement. Demandé explicitement
   le 2026-10-04 ("la rangée SKU ne doit pas être aussi grande car on doit voir le menu
   d'inventaire au complet ou presque de droit à gauche"). */
.prod-sku-text {
  display: inline-block;
  max-width: 140px;
  vertical-align: middle;
}

/* === Sections de formulaire (ex: soumissions) === */
.section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 26px 0 12px;
}
.section-heading:first-child { margin-top: 0; }
.section-heading::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Carte de sommaire financier (aperçu de total dans un formulaire, ou détail d'un document) */
.summary-box {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: 360px;
  margin-left: auto;
}
.summary-box .row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 13.5px; color: var(--ink-muted); }
.summary-box .row .amount { font-family: var(--font-mono); color: var(--ink); font-weight: 500; }
/* Bloc du total final: encadré bleu marine avec liseré orange, comme le bloc de totaux des
   PDF (drawTotalsBox, backend/src/utils/pdfService.js) et de la maquette sameo-core.css —
   demandé explicitement le 2026-09-13 ("rend ça un peu plus coloré"). */
.summary-box .row.total {
  position: relative;
  overflow: hidden;
  margin-top: 10px;
  padding: 14px 18px 14px 21px;
  border-top: none;
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--primary-active), var(--primary) 75%, var(--primary-hover));
}
.summary-box .row.total::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
}
.summary-box .row.total span:first-child { font-family: var(--font-display); font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.7); }
.summary-box .row.total .amount { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: #FFFFFF; }
.summary-box .row.internal { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 11.5px; color: var(--ink-faint); }
.summary-box .row.internal .amount { color: var(--ink-faint); font-weight: 400; }

/* En-tête de document (fiche soumission / facture en lecture) */
.doc-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.doc-meta .client-block .kicker { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); font-weight: 700; margin-bottom: 4px; }
.doc-meta .client-block .name { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.doc-meta .status-block { text-align: right; }
.doc-meta .status-block .num-line { font-family: var(--font-mono); color: var(--ink-muted); font-size: 12.5px; margin-bottom: 6px; }

.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--ink); color: white;
  padding: 12px 16px; border-radius: 10px;
  font-size: 13px; box-shadow: var(--shadow-lg);
  animation: slideIn 200ms var(--ease);
  max-width: 340px;
}
.toast.error { background: var(--red); }
.toast.success { background: var(--green); }
@keyframes slideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* === Assistant IA: bulle flottante (voir assistant.js) — remplace l'ancien onglet plein écran,
   demandé explicitement le 2026-09-07. Réservée aux modérateurs (super admin), voir startApp(). */
#assistant-bubble-btn {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 22px;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 150;
  align-items: center;
  justify-content: center;
  transition: transform 150ms var(--ease), background 150ms var(--ease);
}
#assistant-bubble-btn.visible { display: flex; }
#assistant-bubble-btn:hover { background: var(--accent-hover); transform: scale(1.06); }

#assistant-panel {
  display: none;
  flex-direction: column;
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 130px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 150;
}
#assistant-panel.active { display: flex; }
#assistant-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  color: var(--ink);
}
#assistant-panel-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
#assistant-panel-inputrow { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); flex-shrink: 0; align-items: center; }
#assistant-panel-inputrow input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13.5px;
}
#assistant-panel-inputrow input:focus { outline: none; border-color: var(--accent); }
.assistant-bubble-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.assistant-bubble-msg.user { align-self: flex-end; background: var(--accent); color: #fff; }
.assistant-bubble-msg.assistant { align-self: flex-start; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); }

@media (max-width: 860px) {
  #assistant-panel { left: 12px; right: 12px; width: auto; bottom: 82px; height: 70vh; }
  #assistant-bubble-btn { bottom: 16px; right: 16px; }
}

/* Champs DANS le tableau de lignes: le filet n'apparaît qu'au survol/focus de la ligne, pour
   éviter l'effet "grillage de carrés" — demandé explicitement le 2026-09-13 ("un style plus
   écrit sur des lignes que dans des carrés"). */
/* La cellule "Produit" empile un menu déroulant ET un nom éditable — le "white-space: nowrap"
   global des <td> (voir plus haut) empêchait le second de retomber sous le premier, si bien
   qu'il débordait par-dessus les colonnes Qté/Unité/Prix au lieu de s'afficher dessous.
   "display:block" force chaque champ à occuper sa propre ligne peu importe le white-space
   hérité. Demandé explicitement le 2026-09-19 ("dans modifier le texte est un par-dessus
   l'autre"). */
.invoice-lines-table td:first-child { white-space: normal; }
.invoice-lines-table input, .invoice-lines-table select {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 5px 2px 6px;
  font-size: 13.5px;
  background: transparent;
  color: var(--ink);
  transition: border-color 150ms var(--ease);
}
.invoice-lines-table tbody tr:hover input, .invoice-lines-table tbody tr:hover select { border-bottom-color: var(--border); }
.invoice-lines-table input:focus, .invoice-lines-table select:focus { outline: none; border-bottom-color: var(--primary); }
.invoice-lines-table tbody tr:focus-within { background: var(--primary-tint); }
.invoice-lines-table tbody tr.q-dragging { background: var(--surface-hover); }

/* Entrée rapide de soumission façon terminal AS/400 — dense, pensée pour le clavier (Tab pour
   avancer, Entrée pour valider une ligne), mais dans le style visuel de l'application plutôt
   qu'un écran vert-sur-noir. Voir renderQuickEntryPanel() dans quotes.js. Demandé
   explicitement le 2026-09-07: "comme IBM AS400 [...] rend ça à notre image". */
.qe-hint { font-size: 11.5px; color: var(--ink-muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.qe-toprow { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.qe-field-company { flex: 0 0 170px; }
.qe-field-client { flex: 1 1 220px; }
.qe-field-name { flex: 1 1 220px; }
.qe-field-date, .qe-field-expiry { flex: 0 0 150px; }
.qe-new-client-toggle { margin-top: 27px; white-space: nowrap; }
.qe-new-client-inline { margin: -6px 0 16px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); }

.qe-lines-table { font-variant-numeric: tabular-nums; }
.qe-lines-table thead th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.qe-lines-table .qe-line-code { font-family: var(--font-mono); text-transform: uppercase; }
.qe-actions-row { display: flex; gap: 16px; margin-top: 10px; }

.qe-bottom-row { display: flex; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.qe-notes-field { flex: 1 1 320px; }
.qe-notes-field textarea { width: 100%; padding: 8px 0 9px; border: none; border-bottom: 1px solid var(--border); border-radius: 0; font-family: inherit; font-size: 14px; color: var(--ink); background: transparent; resize: vertical; }
.qe-notes-field textarea:focus { outline: none; border-bottom-color: var(--primary); box-shadow: 0 1px 0 0 var(--primary); }
.qe-summary { flex: 0 0 300px; }

.qe-footer-bar { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.qe-footer-bar span { font-size: 11.5px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 5px; }
.qe-footer-bar kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--ink-muted);
}

/* Étape 1 de l'entrée rapide de soumission: recherche/création du client avant d'ouvrir
   l'écran de saisie des lignes — voir renderClientSearchStep() dans quotes.js. Demandé
   explicitement le 2026-09-07. */
.qe-search-wrap { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.qe-search-wrap input {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  background: var(--surface-2);
}
.qe-search-wrap input:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-ring); }
.qe-search-results { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.qe-search-result {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 120ms var(--ease), background 120ms var(--ease);
}
.qe-search-result:hover { border-color: var(--accent); background: var(--accent-tint); }
.qe-search-result-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.qe-search-result-meta { font-size: 12px; color: var(--ink-muted); font-family: var(--font-mono); margin-top: 2px; }
.qe-back-btn { display: inline-block; margin-bottom: 14px; }

/* En-tête façon "entrée de commande" du panneau d'entrée rapide (client, adresses,
   vendeur, personne-ressource, bon de commande, instructions) — voir renderQuickEntryPanel
   dans quotes.js. Demandé explicitement le 2026-09-07: compact, coloré, sélecteur de
   compagnie déplacé dans le titre de la carte. */
.qe-header-title-row { display: flex; align-items: center; gap: 12px; }
#qe-card .card-header h3 { font-size: 25px; font-weight: 500; }
#qe-card .card-header { padding: 22px 26px 16px; border-bottom: 1px solid var(--rule-strong); }
#qe-card .card-body { padding: 24px 26px 26px; }
/* Bandeau "Nouvelle commande" plus mince (#oe-card, Commande — porte la classe .qe-card mais
   pas l'id #qe-card ci-dessus, qui vise seulement Soumissions) et rapproché du bandeau Dossier/
   Client juste en dessous, pour que toute la page tienne mieux à l'écran. Demandé explicitement
   le 2026-10-03 ("compacte le menu du haut vers le haut"). */
#oe-card.qe-card .card-header { padding: 10px 20px; }
.qe-company-header-select {
  padding: 0 0 2px;
  border: none;
  border-bottom: 1px solid rgba(194, 86, 10, 0.35);
  border-radius: 0;
  background: none;
  color: var(--accent-hover);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.qe-header-panel { margin-bottom: 8px; }
.qe-header-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px 16px; }
.field label .req { color: var(--accent); font-weight: 400; margin-left: 2px; }
.field input:disabled, .field select:disabled { background: transparent; color: var(--ink-faint); cursor: not-allowed; opacity: 1; border-bottom-style: dashed; }
/* En-tête de section (CLIENT / LIVRAISON / TRANSPORT…): titre à gauche, note ou lien à
   droite, un filet en dessous — repris tel quel de la maquette sameo-core (demandé
   explicitement le 2026-09-13, "rend ça un peu plus comme la photo"). Remplace les anciennes
   étiquettes bleu/orange dans un encadré. */
.qe-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.qe-header-panel > .qe-section-head:first-child { margin-top: 0; }
.qe-section-head h2 { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.qe-section-head .qe-section-note { font-size: 11.5px; color: var(--ink-faint); font-weight: 400; }
.qe-section-head .link-btn { font-size: 11px; }
/* Vendeur — informatif seulement (non modifiable), déplacé hors de la grille de champs vers le
   coin droit de l'en-tête "Client" (au-dessus du lien "Changer de client"/"Retour à la liste"),
   en plus petit et plus discret que les champs qu'on remplit réellement. Demandé explicitement
   le 2026-09-14 ("le vendeur peut etre dans son coin a droit mais plus petit"). */
.qe-section-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.qe-vendor-note { font-size: 10.5px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--ink-faint); white-space: nowrap; }
.qe-vendor-note strong { color: var(--ink-muted); font-weight: 600; }
/* Grille de champs de l'en-tête (Client/Livraison/Transport) resserrée verticalement — demandé
   explicitement le 2026-09-14 ("je veux plus de place en bas pour entrée des articles"). */
.qe-header-grid .field { margin-bottom: 6px; }
/* Adresse du client (facturation) — lecture seule, en plus petit pour ne pas rivaliser visuellement
   avec les champs qu'on remplit (Client, Personne ressource…). */
.qe-client-address-compact { font-size: 12px; color: var(--ink-faint); }
/* Nom du projet — mis en valeur (plus grand) car c'est le champ le plus important à repérer
   d'un coup d'œil dans la liste des soumissions/commandes ensuite. */
.qe-project-name-field input { font-size: 18px; font-weight: 600; color: var(--ink); }
.qe-project-name-field label { font-size: 11.5px; color: var(--ink-muted); }
/* Livraison/Transport — la boîte (menu déroulant + champs d'adresse) ne prend plus toute la
   largeur de la page: un bloc plus compact, aligné à gauche. */
.qe-shipping-box { margin-top: 0; padding: 0; background: none; border: none; max-width: 620px; }
.qe-shipping-box select { width: 100%; margin-bottom: 6px; }
.qe-shipping-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 6px; }
.qe-shipping-fields input { width: 100%; padding: 6px 0 7px; border: none; border-bottom: 1px solid var(--border); border-radius: 0; font-size: 13px; background: transparent; color: var(--ink); }
.qe-shipping-fields input:focus { outline: none; border-bottom-color: var(--primary); box-shadow: 0 1px 0 0 var(--primary); }
.qe-shipping-box textarea { width: 100%; padding: 6px 0 7px; border: none; border-bottom: 1px solid var(--border); border-radius: 0; font-family: inherit; font-size: 13px; resize: vertical; background: transparent; color: var(--ink); }
.qe-shipping-box textarea:focus { outline: none; border-bottom-color: var(--primary); box-shadow: 0 1px 0 0 var(--primary); }

/* Documents joints (bon de commande du client glissé sur la fiche soumission/commande) — carré
   de dépôt glisser-déposer, conservé jusqu'à suppression manuelle. Demandé explicitement le
   2026-09-12. */
.attachments-box { margin-top: 16px; }
.attachments-box > label { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.attachment-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.attachment-row:last-child { border-bottom: none; }
.attachment-download-link { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 6px; min-width: 0; }
.attachment-download-link:hover { text-decoration: underline; }
.attachment-download-link .attachment-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachments-dropzone {
  margin-top: 8px;
  padding: 18px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-muted);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.attachments-dropzone.attachments-drop-active { border-color: var(--primary); background: var(--primary-tint); color: var(--primary); }

/* Panneau de suggestions d'achat (bons de commande) — fond foncé cohérent avec la barre latérale
   plutôt que du texte nu, pour un rendu plus soigné et sérieux. Demandé explicitement le
   2026-09-12. */
.po-suggestions-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  background: var(--sidebar);
  border-radius: var(--radius-lg);
  padding: 16px 20px 18px;
  margin-bottom: 18px;
}
.po-suggestions-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sidebar-text-active);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.po-suggestions-col label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sidebar-text);
  margin-bottom: 10px;
}
.po-suggestions-chips { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.po-suggestion-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  transition: background 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease);
}
.po-suggestion-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); color: #FDBA74; }
.po-suggestion-btn-nosupplier { border-style: dashed; }
.po-suggestion-count { opacity: 0.75; font-weight: 500; }
@media (max-width: 720px) {
  .po-suggestions-panel { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .qe-header-grid { grid-template-columns: repeat(2, 1fr); }
  .qe-shipping-fields { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .qe-header-grid { grid-template-columns: 1fr; }
  .qe-shipping-fields { grid-template-columns: 1fr; }
}
.link-btn { background: none; border: none; color: var(--link); font-size: 13px; font-weight: 600; padding: 0; transition: color 120ms var(--ease); }
.link-btn:hover { color: var(--link-hover); text-decoration: underline; }

/* Menu d'actions "⋮" par ligne (tableau Utilisateurs, etc.) — voir wireRowMenus() dans users.js
   pour le calcul de position en position:fixed. */
.row-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-faint);
  padding: 4px 10px;
  border-radius: 6px;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.row-menu-btn:hover { background: var(--surface-hover); color: var(--ink); }
.row-menu {
  display: none;
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  min-width: 230px;
  z-index: 50;
  padding: 6px;
  /* Filet de sécurité: sur une ligne proche du bas de l'écran, un menu ouvert vers le bas peut
     dépasser le viewport sans aucun moyen d'atteindre le reste de son contenu (voir
     showInspectPopover/showWaitingPopover dans achat-ui.js, qui bornent déjà leur position —
     ceci couvre aussi tout futur .row-menu qui ne le ferait pas). Demandé explicitement le
     2026-09-19 ("je ne peux pas voir tout le menu"). */
  max-height: 70vh;
  overflow-y: auto;
}
.row-menu.open { display: block; }
.row-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms var(--ease);
}
.row-menu-item:hover { background: var(--surface-hover); }
.row-menu-item.danger { color: var(--red); }
.row-menu-item.danger:hover { background: var(--red-tint); }
.row-menu-divider { height: 1px; background: var(--border); margin: 5px 4px; }

/* Bouton discret "voir l'inventaire" à côté du champ Code (soumissions/commandes) et son
   mini-menu de stock en direct — voir openInventoryPopover() dans app.js. Demandé
   explicitement le 2026-09-08. */
.qe-code-cell { display: flex; align-items: center; gap: 3px; }
.qe-code-cell .qe-line-code { flex: 1; min-width: 0; }
/* Stock disponible affiché discrètement à côté de la description dès qu'un produit connu est
   sélectionné sur la ligne — pas besoin d'ouvrir le mini-menu inventaire pour le voir. Demandé
   explicitement le 2026-09-19 ("voir l'inventaire du produit facilement mais subtilement"). */
.qe-desc-cell { display: flex; align-items: center; gap: 6px; }
.qe-desc-cell .qe-line-desc { flex: 1; min-width: 0; }
.qe-line-stock { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--ink-faint); white-space: nowrap; }
.qe-line-stock.zero { color: var(--red); }
.qe-inventory-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 4px 5px;
  font-size: 11px;
  line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
  border-radius: 5px;
  opacity: 0.7;
  transition: background 120ms var(--ease), color 120ms var(--ease), opacity 120ms var(--ease);
}
.qe-inventory-btn:hover { background: var(--surface-hover); color: var(--ink); opacity: 1; }
.qe-inventory-popover {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  width: 440px;
  max-height: 330px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.qe-inventory-search {
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  font-size: 13px;
  outline: none;
  flex-shrink: 0;
  border-radius: 10px 10px 0 0;
}
/* Ligne fixe en haut du popover — toujours visible peu importe le filtre — pour créer un article
   hors inventaire (voir openSpecialOrderModal dans app.js). Demandé explicitement le 2026-09-19. */
.qe-inventory-special-row {
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--link);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.qe-inventory-special-row:hover { background: var(--surface-hover); }
.qe-inventory-list { overflow-y: auto; }
.qe-inventory-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.qe-inventory-row:last-child { border-bottom: none; }
.qe-inventory-row:hover { background: var(--surface-hover); }
.qe-inventory-row.active { background: var(--primary-tint); }
.qe-inventory-sku { font-family: var(--font-mono); font-weight: 600; color: var(--ink); flex-shrink: 0; width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe-inventory-name { flex: 1; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe-inventory-stock { flex-shrink: 0; font-weight: 700; color: var(--green); min-width: 26px; text-align: right; }
.qe-inventory-stock.zero { color: var(--red); }
.qe-inventory-cost { flex-shrink: 0; color: var(--ink-muted); font-family: var(--font-mono); font-size: 11.5px; min-width: 52px; text-align: right; }

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ============================================================================
   REFONTE ÉCRAN SOUMISSION/COMMANDE — maquette "sameo-core" navy/orange
   (SPEC-ecran-soumission.md + soumission-maquette-reference.html, fournis le
   2026-09-14). S'applique à renderQuickEntryPanel (quotes.js) et
   renderOrderEntryPanel (orders.js) UNIQUEMENT — purchase-orders.js garde
   l'ancien style (.qe-header-panel/.qe-header-grid/.qe-shipping-box encore
   utilisées là, non touchées). Titre en Lora et chiffres en JetBrains Mono
   (polices déjà chargées sur tout le site via --font-display/--font-mono)
   plutôt que Playfair Display/IBM Plex Mono demandés dans la maquette — pour
   rester cohérent avec le reste de l'application plutôt que d'introduire deux
   polices qui n'existeraient que sur cet écran.
   ============================================================================ */
.qd-panel {
  --qd-navy: #16294A;
  --qd-navy-2: #27406E;
  --qd-orange: #F47B20;
  --qd-orange-light: #F5A968;
  --qd-link: #2A5DB0;
  --qd-ink: #16202F;
  --qd-ink-2: #465268;
  --qd-label: #7C879A;
  --qd-faint: #A3AEC0;
  --qd-rule: #DDE3EC;
  --qd-border: #D7DEE9;
  --qd-page: #EEF1F7;
  --qd-panel-bg: #F7F9FD;
  --qd-green: #1E7A4C;
}

.qd-title-row { display: flex; align-items: flex-end; justify-content: space-between; padding: 4px 0 12px; }
.qd-title { font-family: var(--font-display); font-size: 26px; font-weight: 500; color: var(--qd-navy); }
.qd-title-hints { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--qd-label); }
.qd-title-hints .qd-sep { width: 1px; height: 13px; background: var(--qd-rule); }
.qd-title-hints .qd-key { font-family: var(--font-mono); color: var(--qd-link); }

.qd-lbl { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--qd-label); font-weight: 500; }
.qd-lbl-i { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #9FB4D8; font-weight: 500; }
.qd-val { font-size: 13px; color: var(--qd-ink); font-weight: 400; }
.qd-mono { font-family: var(--font-mono); }
.qd-rule-field, .qd-ghost-field {
  display: block; width: 100%; font-size: 13px; color: var(--qd-ink);
  border: none; border-bottom: 1px solid var(--qd-rule); border-radius: 0;
  padding: 0 0 4px; background: none; font-family: inherit;
}
.qd-ghost-field { border-bottom-style: dashed; border-bottom-color: #C3CCDC; }
.qd-ghost-field::placeholder { color: var(--qd-faint); }
.qd-rule-field:focus, .qd-ghost-field:focus { outline: none; border-bottom-color: var(--qd-link); }

/* ---- Bande dossier (navy) ---- */
.qd-strip { background: var(--qd-navy); border-radius: 3px 3px 0 0; padding: 8px 18px 40px; display: grid; grid-template-columns: repeat(6, auto); justify-content: start; gap: 44px; align-items: start; position: relative; }
/* Bouton icône dans le coin supérieur droit de la bande (ex: historique d'achat) — positionné en
   absolu pour ne pas participer à la grille des 5 champs ci-dessus. Demandé explicitement le
   2026-10-03. */
.qd-strip-icon-btn {
  position: absolute; top: 8px; right: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06);
  color: var(--qd-orange-light); cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.qd-strip-icon-btn:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.3); }
.qd-strip-icon-btn svg { width: 15px; height: 15px; }
.qd-strip-icon-btn::after {
  content: attr(data-tooltip); position: absolute; top: calc(100% + 8px); right: 0;
  background: #111C2B; color: #fff; padding: 5px 10px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease;
  z-index: 50; box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.qd-strip-icon-btn:hover::after { opacity: 1; visibility: visible; }
.qd-strip .qd-client-code { color: #fff; font-size: 15px; letter-spacing: .03em; }
.qd-strip a.qd-change-link { color: var(--qd-orange-light); font-size: 11px; }
.qd-strip .qd-strip-value { color: #DCE7F8; font-size: 13px; margin-top: 6px; display: block; }
.qd-strip select.qd-strip-select {
  color: #DCE7F8; font-size: 13px; margin-top: 6px; background: none; border: none; padding: 0;
  -webkit-appearance: none; appearance: none; font-family: inherit; cursor: pointer; width: 100%;
}
.qd-strip select.qd-strip-select option { color: #16202F; }

/* ---- Fiches en superposition ---- */
.qd-cards { display: grid; grid-template-columns: 1.18fr 1fr; gap: 14px; margin-top: -28px; position: relative; z-index: 2; align-items: stretch; }
/* Petite flèche sur le bord gauche des cartes "Client & facturation"/"Livraison" — réduit les
   deux cartes à leur seul titre pour libérer de l'espace vertical et voir plus de lignes
   d'articles d'un coup sur une commande qui en a beaucoup. Demandé explicitement le 2026-10-03. */
.qd-cards-toggle {
  position: absolute; left: -14px; top: 18px; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; padding: 0;
  background: #fff; border: 1px solid var(--qd-border); box-shadow: 0 2px 6px rgba(16,32,62,.16);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--qd-label); z-index: 6;
  transition: transform 150ms ease, color 120ms ease, border-color 120ms ease;
}
.qd-cards-toggle:hover { color: var(--qd-link); border-color: var(--qd-link); }
.qd-cards-toggle svg { width: 13px; height: 13px; }
.qd-cards.collapsed .qd-cards-toggle { transform: translateY(-50%) rotate(180deg); }
.qd-cards.collapsed .qd-card-body,
.qd-cards.collapsed .qd-card-2col,
.qd-cards.collapsed .qd-card-foot { display: none !important; }
.qd-card { background: #fff; border: 1px solid var(--qd-border); box-shadow: 0 10px 26px rgba(16,32,62,.16); display: flex; flex-direction: column; position: relative; }
.qd-card-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; background: #F3F6FB; border-bottom: 1px solid #E2E8F1; gap: 10px; }
.qd-card-head-left { display: flex; align-items: center; gap: 9px; }
.qd-card-head .qd-lbl { color: var(--qd-link); }
.qd-card-head-note { font-size: 10px; color: #8B95A6; white-space: nowrap; }
.qd-card-head-key { font-family: var(--font-mono); font-size: 10.5px; color: #8B95A6; }
.qd-card-body { padding: 14px 16px 0; }
.qd-client-name { font-size: 19px; font-weight: 600; color: var(--qd-navy); line-height: 1.15; }
.qd-client-sub { display: flex; gap: 14px; margin-top: 4px; font-size: 11.5px; color: var(--qd-label); flex-wrap: wrap; }
.qd-card-2col { padding: 12px 16px 0; display: grid; grid-template-columns: auto 1fr; gap: 56px; }
.qd-card-2col .qd-lbl { display: block; margin-bottom: 6px; }
.qd-addr-text { font-size: 13px; line-height: 1.55; color: var(--qd-ink); }
.qd-card-foot { margin-top: auto; padding: 14px 16px 12px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; border-top: 1px dashed #E2E8F1; }
.qd-card-foot .qd-lbl { display: block; margin-bottom: 5px; }
.qd-addr-select-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--qd-panel-bg); border: 1px solid #E2E8F1; padding: 6px 10px; }
.qd-addr-select-box select { width: 100%; border: none; background: none; font-size: 12px; color: var(--qd-ink-2); appearance: none; cursor: pointer; font-family: inherit; }

/* ---- Barre transport ---- */
.qd-transport { margin-top: 12px; background: #fff; border: 1px solid var(--qd-border); display: flex; align-items: center; gap: 18px; padding: 9px 16px; flex-wrap: wrap; }
.qd-transport-group { display: flex; align-items: center; gap: 8px; flex: none; }
.qd-transport-sep { width: 1px; height: 26px; background: #E2E8F1; flex: none; }
.qd-transport select.qd-carrier-select {
  font-size: 12.5px; border: 1px solid var(--qd-border); background: var(--qd-panel-bg);
  padding: 4px 10px; min-width: 150px; appearance: none; cursor: pointer; font-family: inherit; color: var(--qd-ink);
}
.qd-seg { display: flex; border: 1px solid var(--qd-border); overflow: hidden; flex: none; position: relative; }
.qd-seg label { font-size: 11.5px; padding: 5px 12px; border-left: 1px solid #E2E8F1; color: var(--qd-ink-2); cursor: pointer; }
.qd-seg label:first-of-type { border-left: none; }
.qd-seg input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.qd-seg label.active { background: var(--qd-orange); color: #fff; font-weight: 500; }
.qd-transport-note { margin-left: auto; font-size: 10.5px; color: #8B95A6; }

/* ---- Tableau des lignes ----
   Reprend la vraie balise <table> déjà en place (qe-lines-table côté quotes.js/orders.js, avec
   toute la logique de saisie/glisser-déposer/navigation clavier existante attachée aux classes
   .qe-line-*) plutôt que de la remplacer par des <div> en CSS grid comme la maquette statique —
   restyler l'existant est beaucoup moins risqué que de réécrire cette logique. Les largeurs de
   colonnes viennent d'un <colgroup> (voir quotes.js/orders.js) plutôt que d'un grid-template-
   columns, pour un résultat équivalent avec <table>. */
.qd-table-wrap { margin-top: 12px; background: #fff; border: 1px solid var(--qd-border); overflow-x: auto; }
.qd-table-wrap table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.qd-table-wrap thead th {
  background: var(--qd-navy); color: #C8D7EE; font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500; text-align: left; padding: 6px 8px; border: none;
}
.qd-table-wrap thead th.qd-r, .qd-table-wrap thead th:nth-child(5), .qd-table-wrap thead th:nth-child(7),
.qd-table-wrap thead th:nth-child(8), .qd-table-wrap thead th:nth-child(9), .qd-table-wrap thead th:nth-child(10) { text-align: right; }
.qd-table-wrap tbody td {
  padding: 7px 8px; font-size: 12.5px; border-bottom: 1px solid #EDF1F7; vertical-align: middle; color: var(--qd-ink);
  overflow: hidden; overflow-wrap: break-word;
}
.qd-table-wrap tbody tr:nth-child(even) { background: #FAFBFE; }
.qd-table-wrap tbody tr.qd-row-active { background: #FFF6EE !important; box-shadow: inset 3px 0 0 var(--qd-orange); }
.qd-table-wrap .qe-drag-handle { color: var(--qd-faint) !important; font-size: 11px; background: none !important; }
.qd-table-wrap .qe-line-num { font-family: var(--font-mono); color: var(--qd-faint); }
.qd-table-wrap input, .qd-table-wrap select, .qd-table-wrap textarea {
  border: none; background: none; font-family: inherit; font-size: 12.5px; width: 100%; max-width: 100%; color: var(--qd-ink); padding: 0; box-sizing: border-box;
}
/* autoSizeInput (voir quotes.js/orders.js) élargit un champ en fixant sa largeur en `ch` sur
   l'attribut style — utile dans un tableau à largeurs libres, mais ça débordait de la cellule
   ici puisque le tableau est maintenant à colonnes fixes (table-layout:fixed). max-width:100%
   plafonne cette largeur inline à celle de la cellule, quel que soit le nombre tapé — corrigé
   le 2026-09-14 (chiffres qui se chevauchaient sur une commande à gros montants: "602 450,00 $"
   débordait sur la colonne Marge, faute d'espace insécable où couper la ligne). */
.qd-table-wrap input::placeholder { color: var(--qd-faint); }
.qd-table-wrap input:focus, .qd-table-wrap select:focus { outline: none; }
.qd-table-wrap .qe-line-code { font-family: var(--font-mono); color: var(--qd-navy); }
.qd-table-wrap .qe-line-qty, .qd-table-wrap .qe-line-cost, .qd-table-wrap .qe-line-price,
.qd-table-wrap .qe-line-total, .qd-table-wrap .qe-line-margin-input { text-align: right; font-family: var(--font-mono); }
.qd-table-wrap .qe-line-cost { color: #8B95A6; }
.qd-table-wrap .qe-line-total { font-weight: 500; }
.qd-table-wrap .qe-line-margin-input { color: var(--qd-green); }
.qd-table-wrap .qe-line-margin-input.qd-neg { color: var(--red); }
.qd-table-wrap .qe-remove-line { color: #C9D1DE !important; }
.qd-table-wrap .qe-remove-line:hover { color: var(--red) !important; }
.qd-margin-box.qd-neg-box { background: #FBEEED; }
.qd-margin-box.qd-neg-box span { color: var(--red) !important; }
.qd-tfoot { display: flex; align-items: center; gap: 18px; padding: 8px 12px; border-top: 1px solid #EDF1F7; background: var(--qd-panel-bg); flex-wrap: wrap; }
.qd-tfoot .link-btn { font-size: 12px; font-weight: 500; }
.qd-tfoot .link-btn .qd-mono { color: var(--qd-faint); font-weight: 400; }
.qd-tfoot-note { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #8B95A6; }

/* ---- Notes + totaux ---- */
.qd-bottom { margin-top: 12px; display: grid; grid-template-columns: 1.18fr 1fr; gap: 14px; align-items: stretch; }
.qd-notes-box { background: #fff; border: 1px solid var(--qd-border); padding: 11px 16px 14px; }
.qd-totals-box { background: #fff; border: 1px solid var(--qd-border); padding: 11px 16px 12px; }
.qd-totals-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; }
.qd-totals-row span:first-child { color: var(--qd-ink-2); }
.qd-totals-row .qd-mono { color: var(--qd-ink); }
.qd-totals-row.qd-last { border-bottom: 1px solid #E2E8F1; padding-bottom: 8px; }
.qd-grand-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 9px; }
.qd-grand-label { font-size: 13px; font-weight: 600; color: var(--qd-navy); }
.qd-grand-value { font-family: var(--font-mono); font-size: 19px; font-weight: 500; color: var(--qd-navy); }
.qd-margin-box { display: flex; justify-content: space-between; margin-top: 9px; background: #F1F6F2; padding: 5px 9px; font-size: 11px; }
.qd-margin-box span:first-child { color: var(--qd-green); }
.qd-margin-box .qd-mono { color: var(--qd-green); }

/* ---- Barre de fonctions ---- */
.qd-funcbar { margin-top: 12px; height: 40px; background: var(--qd-navy); display: flex; align-items: center; gap: 20px; padding: 0 16px; }
.qd-funcbar .qd-key { font-family: var(--font-mono); font-size: 11px; color: #9FB4D8; white-space: nowrap; }
.qd-funcbar .qd-key b { color: var(--qd-orange-light); font-weight: 500; }
.qd-funcbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.qd-funcbar-actions .btn-cancel { font-size: 11.5px; color: #C3D0E6; border: 1px solid #3A5A92; background: none; padding: 4px 12px; border-radius: 3px; cursor: pointer; font-family: inherit; }
.qd-funcbar-actions .btn-save { font-size: 11.5px; color: #fff; background: var(--qd-orange); padding: 5px 16px; font-weight: 500; border: none; border-radius: 3px; cursor: pointer; font-family: inherit; }
.qd-funcbar-actions .qd-mono { opacity: .75; }

@media (max-width: 1100px) {
  .qd-cards { grid-template-columns: 1fr; }
  .qd-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ==================================================================
   Module Achat — feuille de style (Sameo Core)
   À coller à la fin de la feuille de styles existante.
   TOUT est porté par #achat et les variables sont préfixées --ach-* :
   aucune collision possible avec les styles actuels de l'application.
   Pour recaler la charte, seules les variables du premier bloc changent.
   ================================================================== */


#achat{
  --ach-bg:#EDF1F7; --ach-panel:#FFFFFF; --ach-panel-2:#F6F8FC; --ach-panel-3:#EFF3F9;
  --ach-text:#0E1B2E; --ach-text-2:#3D4C64; --ach-text-3:#6E7D94;
  --ach-line:#DCE3ED; --ach-line-2:#C4CEDD;
  --ach-brand-ink:#183463;
  --ach-hdr-a:#12224A; --ach-hdr-b:#1E3E7C;
  --ach-accent:#E9631A; --ach-accent-2:#C64F0E; --ach-accent-ink:#FFFFFF; --ach-accent-soft:#FDEBDF;
  --ach-info:#0F7FA3; --ach-info-soft:#E2F2F8;
  --ach-good:#127A52; --ach-good-soft:#E2F2EB;
  --ach-warn:#A86200; --ach-warn-soft:#FAEFDB;
  --ach-bad:#B82F27; --ach-bad-soft:#FAE7E5;
  --ach-shadow:0 1px 2px rgba(15,32,60,.06), 0 8px 24px -12px rgba(15,32,60,.18);
  --ach-radius:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #achat{
    --ach-bg:#070E1B; --ach-panel:#0F1A2C; --ach-panel-2:#142238; --ach-panel-3:#18293F;
    --ach-text:#E9EFF8; --ach-text-2:#B4C2D6; --ach-text-3:#8496AE;
    --ach-line:#22344F; --ach-line-2:#2D4260;
    --ach-brand-ink:#A8C6F2;
    --ach-hdr-a:#0C1730; --ach-hdr-b:#17315F;
    --ach-accent:#FF7A34; --ach-accent-2:#E9631A; --ach-accent-ink:#1A0D03; --ach-accent-soft:#3A2113;
    --ach-info:#4FBEDE; --ach-info-soft:#123243;
    --ach-good:#4FCB98; --ach-good-soft:#0E3226;
    --ach-warn:#E3A33F; --ach-warn-soft:#38270C;
    --ach-bad:#F07A70; --ach-bad-soft:#3A1614;
    --ach-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] #achat{
  --ach-bg:#070E1B; --ach-panel:#0F1A2C; --ach-panel-2:#142238; --ach-panel-3:#18293F;
  --ach-text:#E9EFF8; --ach-text-2:#B4C2D6; --ach-text-3:#8496AE;
  --ach-line:#22344F; --ach-line-2:#2D4260;
  --ach-brand-ink:#A8C6F2;
  --ach-hdr-a:#0C1730; --ach-hdr-b:#17315F;
  --ach-accent:#FF7A34; --ach-accent-2:#E9631A; --ach-accent-ink:#1A0D03; --ach-accent-soft:#3A2113;
  --ach-info:#4FBEDE; --ach-info-soft:#123243;
  --ach-good:#4FCB98; --ach-good-soft:#0E3226;
  --ach-warn:#E3A33F; --ach-warn-soft:#38270C;
  --ach-bad:#F07A70; --ach-bad-soft:#3A1614;
  --ach-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.7);
}
#achat *{box-sizing:border-box}
#achat{
  margin:0; background:var(--ach-bg); color:var(--ach-text);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:13.5px; line-height:1.4;
}
#achat .mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
#achat .num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;text-align:right}
#achat button{font:inherit;color:inherit}
#achat input, #achat select{font:inherit;color:inherit}
#achat :focus-visible{outline:2px solid var(--ach-info);outline-offset:1px;border-radius:3px}

/* ---------- generic blocks ---------- */
#achat .card{background:var(--ach-panel);border:1px solid var(--ach-line);border-radius:var(--ach-radius);box-shadow:var(--ach-shadow)}
#achat .block-head{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--ach-line);
  background:var(--ach-panel-2);border-radius:var(--ach-radius) var(--ach-radius) 0 0}
#achat .block-head h2{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ach-text-3);font-weight:600}
#achat .block-head .hint{margin-left:auto;font-size:11.5px;color:var(--ach-text-3)}

/* Bouton "flèche" pour replier une carte (voir #ach-livraison-toggle) — même principe que le
   bandeau Suggestions (.sug-head .car), adapté au fond clair d'une carte normale. */
#achat .block-head .collapse-toggle{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:6px;border:0;background:var(--ach-panel-3);color:var(--ach-text-2);font-size:11px;cursor:pointer;
  flex-shrink:0;transition:transform .18s ease, background .12s ease}
#achat .block-head .collapse-toggle:hover{background:var(--ach-line-2);color:var(--ach-text)}
#achat .card[data-open="false"] .block-head .collapse-toggle{transform:rotate(-90deg)}
#achat .card[data-open="false"] .block-body{display:none}

#achat .lbl{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ach-text-3);font-weight:600;margin-bottom:3px}
#achat .fld{width:100%;padding:6px 8px;border:1px solid var(--ach-line-2);border-radius:6px;background:var(--ach-panel);color:var(--ach-text)}
#achat .fld:hover{border-color:var(--ach-info)}
#achat .req{color:var(--ach-accent)}

#achat .pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
#achat .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
#achat .p-draft{background:var(--ach-panel-3);color:var(--ach-text-2)}
#achat .p-sent{background:var(--ach-info-soft);color:var(--ach-info)}
#achat .p-part{background:var(--ach-warn-soft);color:var(--ach-warn)}
#achat .p-recv{background:var(--ach-good-soft);color:var(--ach-good)}
#achat .p-late{background:var(--ach-bad-soft);color:var(--ach-bad)}

/* ---------- two-column composer ---------- */
#achat .compose{display:flex;flex-direction:column;gap:12px}
#achat .stack{display:flex;flex-direction:column;gap:12px;min-width:0}

#achat .grid-head{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 14px}
#achat .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#achat .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#achat .ship{display:grid;grid-template-columns:2fr 1.2fr .8fr .9fr;gap:10px;padding:12px 14px}
#achat .seg{display:flex;gap:0;border:1px solid var(--ach-line-2);border-radius:6px;overflow:hidden}
#achat .seg button{flex:1;border:0;background:var(--ach-panel);padding:6px 4px;cursor:pointer;font-size:12px;color:var(--ach-text-2)}
#achat .seg button+button{border-left:1px solid var(--ach-line-2)}
#achat .seg button[aria-pressed="true"]{background:var(--ach-info-soft);color:var(--ach-info);font-weight:600}

/* lines grid */
#achat .lines{width:100%;border-collapse:collapse;min-width:900px}
#achat .lines th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ach-text-3);font-weight:600;
  text-align:left;padding:7px 8px;border-bottom:1px solid var(--ach-line);background:var(--ach-panel-2)}
#achat .lines th.r{text-align:right}
#achat .lines td{padding:5px 8px;border-bottom:1px solid var(--ach-line);vertical-align:top}
#achat .lines td.num, #achat .lines td.stk{white-space:nowrap}
#achat .lines tr.row:hover td{background:var(--ach-panel-2)}
#achat .lines tr.row.flash td{animation:flash .9s ease-out}
@keyframes flash{from{background:var(--ach-accent-soft)}to{background:transparent}}
.sku{font-size:11.5px;color:var(--ach-info);font-weight:500}
/* white-space:normal explicite: la règle globale "tbody td{white-space:nowrap}" (voir plus
   haut) s'applique aussi à ce tableau (même structure table>tbody>td) et forçait la description
   sur une seule ligne qui débordait par-dessus la colonne Stock au lieu d'être contenue dans
   max-width ci-dessous — c'est ce qui causait le scroll horizontal de toute la page. Demandé
   explicitement le 2026-10-03 ("raptisse la description... doit slider... pas efficace"). */
#achat .desc-wrap{max-width:290px;white-space:normal}
#achat .desc{font-weight:500;white-space:normal}
#achat .desc-info{display:inline-block;margin-left:5px;color:var(--ach-text-3);cursor:help;font-size:12px}
#achat .desc-info:hover{color:var(--ach-info)}
#achat .cellin{width:100%;padding:4px 6px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--ach-text);
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;text-align:right}
#achat .cellin:hover{border-color:var(--ach-line-2)}
#achat .cellin:focus{border-color:var(--ach-info);background:var(--ach-panel)}
#achat .unit{border:1px solid transparent;border-radius:5px;background:transparent;padding:4px 2px;color:var(--ach-text-2);font-size:12px}
#achat .unit:hover{border-color:var(--ach-line-2)}
#achat .flag{display:inline-block;margin-top:2px;font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:4px}
#achat .f-up{background:var(--ach-bad-soft);color:var(--ach-bad)}
#achat .f-dn{background:var(--ach-good-soft);color:var(--ach-good)}
#achat .f-new{background:var(--ach-warn-soft);color:var(--ach-warn)}
#achat .f-info{background:var(--ach-info-soft);color:var(--ach-info)}
#achat .xbtn{border:0;background:transparent;color:var(--ach-text-3);cursor:pointer;padding:3px 5px;border-radius:5px;line-height:1}
#achat .xbtn:hover{background:var(--ach-bad-soft);color:var(--ach-bad)}

/* Loupe "inventaire en direct" sur une ligne (voir showInspectPopover dans achat-ui.js) — cible
   nettement agrandie (l'ancienne, 16px sans aucun retour visuel au survol, était une cible
   minuscule à viser à l'aveugle) et un fond au survol pour confirmer qu'on est bien dessus avant
   de cliquer. Demandé explicitement le 2026-09-19 ("la loupe ne fonctionne toujours pas"). */
#achat .ach-inspect-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border:0;background:transparent;cursor:pointer;padding:0;margin-right:4px;font-size:13px;line-height:1;
  vertical-align:top;opacity:.65;border-radius:6px;transition:background .12s ease,opacity .12s ease}
#achat .ach-inspect-btn:hover{background:var(--ach-panel-3);opacity:1}
#achat .addrow{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--ach-line);align-items:center}
#achat .ghost{border:1px dashed var(--ach-line-2);background:transparent;color:var(--ach-text-2);padding:5px 11px;border-radius:7px;cursor:pointer;font-size:12.5px}
#achat .ghost:hover{border-color:var(--ach-info);color:var(--ach-info)}
#achat .kbd{font-family:"IBM Plex Mono",monospace;font-size:10.5px;border:1px solid var(--ach-line-2);border-bottom-width:2px;
  border-radius:4px;padding:0 4px;color:var(--ach-text-3);background:var(--ach-panel-2)}

#achat .finder{position:relative;flex:1;min-width:200px}
#achat .finder input{width:100%;padding:6px 10px;border:1px solid var(--ach-line-2);border-radius:7px;background:var(--ach-panel);color:var(--ach-text)}
#achat .results{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);background:var(--ach-panel);
  border:1px solid var(--ach-line-2);border-radius:8px;box-shadow:var(--ach-shadow);max-height:250px;overflow:auto}
#achat .results button{display:flex;width:100%;gap:10px;align-items:baseline;border:0;background:transparent;padding:7px 10px;
  cursor:pointer;text-align:left;border-bottom:1px solid var(--ach-line)}
#achat .results button:hover, #achat .results button.on{background:var(--ach-info-soft)}
#achat .results .s{flex:1;min-width:0}
#achat .results .s b{display:block;font-weight:500}

/* suggestions — bandeau repliable en haut */
#achat .sug{background:var(--ach-panel);border:1px solid var(--ach-line);border-radius:var(--ach-radius);box-shadow:var(--ach-shadow);overflow:hidden}
#achat .sug-head{display:flex;align-items:center;gap:10px;width:100%;border:0;text-align:left;cursor:pointer;
  background:linear-gradient(100deg,var(--ach-hdr-a),var(--ach-hdr-b));color:#EAF1FF;padding:10px 14px}
#achat .sug-head:hover{filter:brightness(1.12)}
#achat .sug-head .car{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;
  background:rgba(255,255,255,.14);font-size:11px;transition:transform .18s ease}
#achat .sug[data-open="false"] .sug-head .car{transform:rotate(-90deg)}
#achat .sug-head .sh-t{font-size:13.5px;font-weight:600}
#achat .sug-head .cnt{font-size:11px;font-weight:700;background:var(--ach-accent);color:var(--ach-accent-ink);border-radius:999px;padding:1px 8px}
#achat .sug-head .sh-s{font-size:11.5px;color:#A9C0E6}
#achat .sug-head .sh-x{margin-left:auto;font-size:11.5px;color:#CFE0F8;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#achat .sug-head .tagr{background:rgba(255,255,255,.12);border-radius:999px;padding:1px 9px}

/* deux sections distinctes dans le bandeau Suggestions (Min/Max inventaire vs Ventes) */
#achat .sug-cat+.sug-cat{border-top:4px solid var(--ach-panel-3)}
#achat .sug-cat-t{padding:9px 14px 5px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ach-brand-ink)}
#achat .sug-cat-t .sug-cat-s{margin-left:8px;font-size:11px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ach-text-3)}

#achat .sup-sec{border-top:1px solid var(--ach-line)}
#achat .sup-bar{display:flex;align-items:center;gap:9px;padding:7px 14px;background:var(--ach-panel-2);flex-wrap:wrap}
#achat .sup-bar b{font-size:12.5px;font-weight:600}
#achat .sup-bar .cnt{font-size:10.5px;font-weight:700;background:var(--ach-brand-ink);color:var(--ach-panel);border-radius:999px;padding:1px 7px}
#achat .sup-bar .cur{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ach-accent-soft);color:var(--ach-accent-2);border-radius:999px;padding:2px 8px}
#achat .sup-bar .linkbtn{margin-left:auto}
#achat .sug-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:0}
#achat .sitem{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 14px;border-top:1px dashed var(--ach-line);
  border-right:1px dashed var(--ach-line)}
#achat .sitem .n{font-size:12.5px;font-weight:500;line-height:1.25}
#achat .sitem .m{font-size:11px;color:var(--ach-text-3);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
#achat .cover{height:4px;border-radius:2px;background:var(--ach-panel-3);margin-top:5px;overflow:hidden;position:relative}
#achat .cover i{display:block;height:100%}
#achat .cover b{position:absolute;top:-1px;width:2px;height:6px;background:var(--ach-text-3);border-radius:1px}
#achat .sitem .act{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
#achat .qty-s{width:66px;padding:3px 6px;border:1px solid var(--ach-line-2);border-radius:5px;text-align:right;background:var(--ach-panel);color:var(--ach-text);
  font-family:"IBM Plex Mono",monospace}
#achat .add{border:0;background:var(--ach-accent);color:var(--ach-accent-ink);font-weight:600;font-size:11.5px;padding:4px 10px;border-radius:6px;cursor:pointer}
#achat .add:hover{background:var(--ach-accent-2)}
#achat .add[disabled]{background:var(--ach-good-soft);color:var(--ach-good);cursor:default}
#achat .sug-foot{padding:10px 14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--ach-line)}
#achat .linkbtn{border:0;background:transparent;color:var(--ach-info);font-weight:600;font-size:12px;cursor:pointer;padding:4px 2px}
#achat .linkbtn:hover{text-decoration:underline}

/* bandeau contexte fournisseur */
#achat .supstats{display:flex;gap:18px;flex-wrap:wrap;padding:8px 14px;border-top:1px solid var(--ach-line);background:var(--ach-panel-2);
  border-radius:0 0 var(--ach-radius) var(--ach-radius)}
#achat .supstats div{display:flex;gap:6px;align-items:baseline;font-size:12px}
#achat .supstats span{color:var(--ach-text-3)}
#achat .supstats b{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-weight:500}

/* totals dock — plus jamais position:fixed (voir la note d'INTÉGRATION plus bas: un bandeau
   flottant par-dessus le contenu chevauchait irrémédiablement les premières lignes d'un bon
   court, quel que soit le padding-bottom essayé, puisque le chevauchement se produit AU REPOS
   (sans défilement) et qu'aucun padding après le contenu ne peut déplacer vers le haut une ligne
   déjà rendue). Rendu en flux normal, à la suite de la carte Articles, comme la zone de
   soumission de n'importe quel formulaire — on défile pour l'atteindre sur un long bon, sans
   jamais risquer de recouvrir une ligne cliquable. */
#achat .dock{background:var(--ach-panel);border:1px solid var(--ach-line);border-radius:var(--ach-radius);
  box-shadow:var(--ach-shadow);padding:10px 16px;margin-top:12px}
#achat .dock-in{max-width:1440px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#achat .tot{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
#achat .tot div{display:flex;flex-direction:column}
#achat .tot .t-l{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ach-text-3);font-weight:600}
#achat .tot .t-v{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:14px;font-weight:500}
#achat .tot .grand .t-v{font-size:21px;font-weight:600;color:var(--ach-brand-ink)}
#achat .dock .spacer{flex:1}
#achat .btn{border:1px solid var(--ach-line-2);background:var(--ach-panel);padding:8px 14px;border-radius:8px;cursor:pointer;font-size:13px}
#achat .btn:hover{border-color:var(--ach-info);color:var(--ach-info)}
#achat .btn-primary{border:0;background:var(--ach-accent);color:var(--ach-accent-ink);font-weight:600;padding:9px 18px}
#achat .btn-primary:hover{background:var(--ach-accent-2);color:var(--ach-accent-ink)}
#achat .btn-navy{border:0;background:var(--ach-brand-ink);color:var(--ach-panel);font-weight:600}
#achat .btn-navy:hover{color:var(--ach-panel);opacity:.9}

#achat .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:40;background:var(--ach-brand-ink);color:#fff;
  padding:8px 16px;border-radius:999px;font-size:12.5px;box-shadow:var(--ach-shadow);opacity:0;pointer-events:none;transition:opacity .2s, transform .2s}
#achat .toast.on{opacity:1;transform:translateX(-50%) translateY(-4px)}

#achat .shortcuts{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--ach-text-3);padding:8px 14px}

@media (max-width:640px){
  #achat .grid-head, #achat .ship{grid-template-columns:1fr}
  #achat .grid-4, #achat .grid-2{grid-template-columns:1fr 1fr}
  #achat .tot{gap:12px}
  #achat .tot .t-v{font-size:13px}
}
@media (prefers-reduced-motion:reduce){#achat *{animation:none!important;transition:none!important}}

/* ---------- Intégration module Achat (Sameo Core) ----------
   Historique du bug "la loupe ne fonctionne pas" (signalé à répétition le 2026-09-19): le .dock
   original était position:fixed en bas de l'écran, avec un padding-bottom sur #achat pour
   compenser sa hauteur. Ça a semblé corriger le cas testé (long bon, défilé jusqu'en bas), mais
   le vrai bug survivait pour un bon COURT: la position d'une ligne au repos (sans défilement)
   dépend uniquement du contenu AU-DESSUS d'elle — aucun padding placé APRÈS elle dans le flux ne
   peut jamais la faire remonter. Sur un bon d'une seule ligne, cette ligne tombait directement
   dans la bande occupée par le dock fixe dès le chargement de l'écran (confirmé via un banc
   d'essai local reproduisant le vrai DOM de l'app — #main/#sidebar/.topbar inclus — et
   document.elementFromPoint, qui retournait un élément du dock au lieu du bouton loupe). Le
   dock est donc redevenu un élément normal du flux (voir .dock plus haut, à la suite de la carte
   Articles) — jamais de risque de chevauchement, à n'importe quelle longueur de bon; on défile
   pour l'atteindre sur un long bon, comme la zone de soumission de n'importe quel formulaire. */

/* Ligne-note dans le tableau Articles (voir addNoteLine dans achat-ui.js) — même principe que
   .qe-note-row dans Soumission (quotes.js): fond distinct pour la repérer au fil des articles.
   Demandé explicitement le 2026-09-19. */
#achat .lines tr.ach-note-row td { background: var(--ach-warn-soft); padding-top: 6px; padding-bottom: 6px; }
#achat .ach-note-row textarea.fld { width: 100%; }

/* ==================================================================
   Note de crédit — feuille de style (Sameo Core)
   Fournie par l'utilisateur (voir INTEGRATION-credit.md) — collée telle quelle. Tout est porté
   par #credit et les variables sont préfixées --cr-* : aucune collision avec le reste de l'app.
   Demandé explicitement le 2026-09-20 ("retravaille... le menu nouvelle note de crédit").
   ================================================================== */

#credit{
  --cr-bg:#EDF1F7; --cr-panel:#FFFFFF; --cr-panel-2:#F6F8FC; --cr-panel-3:#EFF3F9;
  --cr-text:#0E1B2E; --cr-text-2:#3D4C64; --cr-text-3:#6E7D94;
  --cr-line:#DCE3ED; --cr-line-2:#C4CEDD;
  --cr-brand-ink:#183463; --cr-hdr-a:#12224A; --cr-hdr-b:#1E3E7C;
  --cr-accent:#E9631A; --cr-accent-2:#C64F0E; --cr-accent-ink:#FFFFFF; --cr-accent-soft:#FDEBDF;
  --cr-info:#0F7FA3; --cr-info-soft:#E2F2F8;
  --cr-good:#127A52; --cr-good-soft:#E2F2EB;
  --cr-warn:#A86200; --cr-warn-soft:#FAEFDB;
  --cr-bad:#B82F27; --cr-bad-soft:#FAE7E5;
  --cr-shadow:0 1px 2px rgba(15,32,60,.06), 0 8px 24px -12px rgba(15,32,60,.18);
  --cr-lift:0 24px 64px -24px rgba(9,20,42,.45), 0 2px 8px rgba(9,20,42,.12);
  --cr-radius:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --cr-bg:#070E1B; --cr-panel:#0F1A2C; --cr-panel-2:#142238; --cr-panel-3:#18293F;
  --cr-text:#E9EFF8; --cr-text-2:#B4C2D6; --cr-text-3:#8496AE;
  --cr-line:#22344F; --cr-line-2:#2D4260;
  --cr-brand-ink:#A8C6F2; --cr-hdr-a:#0C1730; --cr-hdr-b:#17315F;
  --cr-accent:#FF7A34; --cr-accent-2:#E9631A; --cr-accent-ink:#1A0D03; --cr-accent-soft:#3A2113;
  --cr-info:#4FBEDE; --cr-info-soft:#123243;
  --cr-good:#4FCB98; --cr-good-soft:#0E3226;
  --cr-warn:#E3A33F; --cr-warn-soft:#38270C;
  --cr-bad:#F07A70; --cr-bad-soft:#3A1614;
  --cr-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.7);
  --cr-lift:0 28px 70px -28px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.5);
}}
:root[data-theme="dark"] #credit{
  --cr-bg:#070E1B; --cr-panel:#0F1A2C; --cr-panel-2:#142238; --cr-panel-3:#18293F;
  --cr-text:#E9EFF8; --cr-text-2:#B4C2D6; --cr-text-3:#8496AE;
  --cr-line:#22344F; --cr-line-2:#2D4260;
  --cr-brand-ink:#A8C6F2; --cr-hdr-a:#0C1730; --cr-hdr-b:#17315F;
  --cr-accent:#FF7A34; --cr-accent-2:#E9631A; --cr-accent-ink:#1A0D03; --cr-accent-soft:#3A2113;
  --cr-info:#4FBEDE; --cr-info-soft:#123243;
  --cr-good:#4FCB98; --cr-good-soft:#0E3226;
  --cr-warn:#E3A33F; --cr-warn-soft:#38270C;
  --cr-bad:#F07A70; --cr-bad-soft:#3A1614;
  --cr-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.7);
  --cr-lift:0 28px 70px -28px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.5);
}
#credit *{box-sizing:border-box}
#credit .mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
#credit button{font:inherit;color:inherit}
#credit input, #credit select, #credit textarea{font:inherit;color:inherit}
#credit :focus-visible{outline:2px solid var(--cr-info);outline-offset:1px;border-radius:3px}


#credit .num{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
#credit .sub{font-size:11.5px;color:var(--cr-text-3)}
#credit .empty{padding:22px 14px;text-align:center;color:var(--cr-text-3)}

#credit .pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
#credit .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
#credit .p-draft{background:var(--cr-panel-3);color:var(--cr-text-2)}
#credit .p-sent{background:var(--cr-info-soft);color:var(--cr-info)}
#credit .p-inv{background:var(--cr-good-soft);color:var(--cr-good)}
#credit .p-wait{background:var(--cr-warn-soft);color:var(--cr-warn)}

#credit .btn{border:1px solid var(--cr-line-2);background:var(--cr-panel);padding:8px 14px;border-radius:8px;cursor:pointer;font-size:13px}
#credit .btn:hover{border-color:var(--cr-info);color:var(--cr-info)}
#credit .btn-primary{border:0;background:var(--cr-accent);color:var(--cr-accent-ink);font-weight:600;padding:9px 17px}
#credit .btn-primary:hover{background:var(--cr-accent-2);color:var(--cr-accent-ink)}
#credit .btn-primary[disabled]{background:var(--cr-panel-3);color:var(--cr-text-3);cursor:not-allowed}
#credit .btn-navy{border:0;background:var(--cr-brand-ink);color:var(--cr-panel);font-weight:600}

/* ================= page (anciennement une fenêtre modale flottante) =================
   Demandé explicitement le 2026-10-03 ("il faut que ce soit la page complete et non une
   petite page qui ouvre"): plus de scrim fixe par-dessus la liste (position:fixed/inset:0,
   fond assombri, centrage) — le formulaire remplace désormais la liste en pleine largeur dans
   #content, exactement comme "Nouvelle commande"/"Nouvelle soumission" (voir cn-list-view,
   masqué/réaffiché par CreditUI.open()/close() dans credit-ui.js). */
#credit .scrim{display:block}
/* BUG RÉEL TROUVÉ ET CONFIRMÉ le 2026-09-20: le fichier fourni met display:flex sur .scrim sans
   jamais tenir compte de l'attribut hidden. Un display normal posé par la feuille de style de
   l'application gagne TOUJOURS sur la feuille de style par défaut du navigateur ([hidden]
   {display:none}) — peu importe la spécificité du sélecteur — puisque ce sont deux "origines"
   différentes dans la cascade CSS, pas juste deux règles à comparer. Résultat: la fenêtre
   s'affichait dès l'ouverture de l'onglet Crédits (avant même le clic sur "Nouvelle note de
   crédit"), et cliquer "Annuler" (qui ne fait que remettre l'attribut hidden) ne la refermait
   jamais. #credit .scrim[hidden] est plus spécifique que #credit .scrim (une classe d'attribut
   de plus) et gagne donc au sein de la même origine — restaure le comportement attendu de
   hidden. Demandé explicitement le 2026-09-20 ("s'ouvre automatiquement... annuler ne fait
   rien"). */
#credit .scrim[hidden]{display:none}
#credit .modal{background:var(--cr-panel);border-radius:14px;box-shadow:var(--cr-lift);width:100%;
  display:flex;flex-direction:column;overflow:hidden}
#credit .m-head{background:linear-gradient(100deg,var(--cr-hdr-a),var(--cr-hdr-b));color:#EAF1FF;padding:14px 18px;
  display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
#credit .m-head h1{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}
#credit .m-head .meta{display:flex;gap:9px;align-items:center;margin-top:5px;flex-wrap:wrap;font-size:12px;color:#A9C0E6}
#credit .m-head .rma{font-family:"IBM Plex Mono",monospace;background:rgba(255,255,255,.12);border-radius:5px;padding:1px 7px;color:#fff}
#credit .m-head .sp{flex:1}
#credit .x{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#EAF1FF;width:30px;height:30px;
  border-radius:8px;cursor:pointer;font-size:15px;line-height:1}
#credit .x:hover{background:rgba(255,255,255,.18)}

#credit .m-body{padding:0;overflow:auto}
#credit .sect{padding:14px 18px;border-bottom:1px solid var(--cr-line)}
#credit .sect-t{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cr-text-3);font-weight:600;margin-bottom:9px;
  display:flex;align-items:center;gap:9px}
#credit .sect-t .sp{flex:1}
#credit .g{display:grid;gap:10px}
#credit .g4{grid-template-columns:repeat(4,1fr)}
#credit .g3{grid-template-columns:repeat(3,1fr)}
#credit .lbl{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cr-text-3);font-weight:600;margin-bottom:3px}
#credit .req{color:var(--cr-accent)}
#credit .fld{width:100%;padding:7px 9px;border:1px solid var(--cr-line-2);border-radius:7px;background:var(--cr-panel);color:var(--cr-text)}
#credit .fld:hover{border-color:var(--cr-info)}
#credit textarea.fld{resize:vertical;min-height:38px}
#credit .hintline{font-size:11.5px;color:var(--cr-text-3);margin-top:4px}

/* fiche client */
#credit .client-card{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;background:var(--cr-panel-2);
  border:1px solid var(--cr-line);border-radius:9px;padding:11px 13px;margin-top:10px}
#credit .client-card .b{min-width:170px}
#credit .client-card .k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cr-text-3);font-weight:600}
#credit .client-card .v{font-size:13px;margin-top:2px}
#credit .client-card .v.mono{font-size:12.5px}

/* tableau des articles */
#credit .items{width:100%;border-collapse:collapse}
#credit .items{width:100%;border-collapse:collapse}
#credit .items th{padding:7px 10px;background:var(--cr-panel-2);position:sticky;top:0;z-index:2;
  border-bottom:1px solid var(--cr-line-2);text-align:left;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cr-text-3);font-weight:600;white-space:nowrap}
#credit .items th.r{text-align:right}
#credit .items td{padding:8px 10px;vertical-align:top;border-bottom:1px solid var(--cr-line)}
#credit .items tr.on td{background:var(--cr-accent-soft)}
:root[data-theme="dark"] #credit .items tr.on td{background:rgba(255,122,52,.10)}
#credit .items tr:hover td{background:var(--cr-panel-2)}
#credit .items tr.on:hover td{background:var(--cr-accent-soft)}
#credit .it-name{font-weight:600}
#credit .it-sku{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--cr-info);font-weight:500}
#credit .refs{margin-top:3px;display:flex;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--cr-text-3);align-items:center}
#credit .ref{background:var(--cr-panel-3);border-radius:5px;padding:1px 7px;font-family:"IBM Plex Mono",monospace;color:var(--cr-text-2)}
#credit .ref b{font-family:"IBM Plex Sans",sans-serif;font-weight:600;color:var(--cr-text-3)}
#credit .po{background:var(--cr-info-soft);color:var(--cr-info);font-weight:600}
#credit .cellin{width:74px;padding:5px 7px;border:1px solid var(--cr-line-2);border-radius:6px;background:var(--cr-panel);color:var(--cr-text);
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;text-align:right}
#credit .cellin:focus{border-color:var(--cr-info)}
#credit .cellin.wide{width:104px}
#credit .selin{padding:4px 6px;border:1px solid var(--cr-line-2);border-radius:6px;background:var(--cr-panel);color:var(--cr-text);font-size:12px;max-width:170px}
#credit .chk{width:16px;height:16px;accent-color:var(--cr-accent)}
#credit .flag{display:inline-block;font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:4px}
#credit .f-warn{background:var(--cr-warn-soft);color:var(--cr-warn)}
#credit .f-done{background:var(--cr-good-soft);color:var(--cr-good)}
#credit .stockback{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--cr-text-2);margin-top:5px;white-space:nowrap}

#credit .search{position:relative;min-width:210px}
#credit .search input{width:100%;padding:6px 10px 6px 28px;border:1px solid var(--cr-line-2);border-radius:7px;background:var(--cr-panel);color:var(--cr-text)}
#credit .search svg{position:absolute;left:8px;top:50%;transform:translateY(-50%);opacity:.5}
#credit .linkbtn{border:0;background:transparent;color:var(--cr-info);font-weight:600;font-size:12px;cursor:pointer;padding:3px 2px}
#credit .linkbtn:hover{text-decoration:underline}

/* pied de la modale */
#credit .m-foot{border-top:1px solid var(--cr-line-2);background:var(--cr-panel-2);padding:11px 18px;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#credit .acts{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
#credit .tot{display:flex;gap:15px;align-items:baseline;flex-wrap:wrap}
#credit .tot div{display:flex;flex-direction:column}
#credit .tot .t-l{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cr-text-3);font-weight:600}
#credit .tot .t-v{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:13px;font-weight:500}
#credit .tot .grand .t-v{font-size:19px;font-weight:600;color:var(--cr-accent)}
#credit .tot .neg .t-v{color:var(--cr-bad)}
#credit .m-foot .sp{flex:1}
#credit .count{font-size:12px;color:var(--cr-text-3)}
#credit .count b{color:var(--cr-text-2)}

#credit .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:60;background:var(--cr-brand-ink);color:#fff;
  padding:9px 17px;border-radius:999px;font-size:12.5px;box-shadow:var(--cr-lift);opacity:0;pointer-events:none;transition:opacity .2s}
#credit .toast.on{opacity:1}

@media (max-width:900px){
  #credit .g4, #credit .g3{grid-template-columns:1fr 1fr}
  #credit .items thead{display:none}
  #credit .items td{display:block;border-bottom:0;padding:4px 12px}
  #credit .items tr{display:block;border-bottom:1px solid var(--cr-line);padding:8px 0}
  #credit .items td.num{text-align:left}
}
@media (max-width:640px){ .g4,.g3{grid-template-columns:1fr} }

/* ==========================================================================
   Ajustement d'inventaire — styles scopés (fournis par Samuel: ajustement.css)
   Tout est sous .aj-root pour ne jamais toucher le reste de l'appli.
   Variables préfixées --aj-* pour ne collisionner avec aucun autre module
   (achat/credit/reception utilisent déjà --ach-* / --cr-* / --rc-*).
   ========================================================================== */

.aj-root{
  --aj-bg:#EDF1F7; --aj-panel:#FFFFFF; --aj-panel-2:#F6F8FC; --aj-panel-3:#EFF3F9;
  --aj-text:#0E1B2E; --aj-text-2:#3D4C64; --aj-text-3:#6E7D94;
  --aj-line:#DCE3ED; --aj-line-2:#C4CEDD;
  --aj-brand-ink:#183463; --aj-hdr-a:#12224A; --aj-hdr-b:#5570C8;
  --aj-accent:#E9631A; --aj-accent-2:#C64F0E; --aj-accent-ink:#FFFFFF;
  --aj-info:#0F7FA3; --aj-info-soft:#E2F2F8;
  --aj-good:#127A52; --aj-good-soft:#E2F2EB;
  --aj-warn:#A86200; --aj-warn-soft:#FAEFDB;
  --aj-bad:#B82F27; --aj-bad-soft:#FAE7E5;
  --aj-shadow:0 1px 2px rgba(15,32,60,.06), 0 8px 24px -12px rgba(15,32,60,.18);
  --aj-radius:12px;

  display:block;background:var(--aj-bg);color:var(--aj-text);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:13.5px;line-height:1.4;
}
@media (prefers-color-scheme: dark){.aj-root:not([data-theme="light"]){
  --aj-bg:#070E1B; --aj-panel:#0F1A2C; --aj-panel-2:#142238; --aj-panel-3:#18293F;
  --aj-text:#E9EFF8; --aj-text-2:#B4C2D6; --aj-text-3:#8496AE;
  --aj-line:#22344F; --aj-line-2:#2D4260;
  --aj-brand-ink:#A8C6F2; --aj-hdr-a:#0C1730; --aj-hdr-b:#2B4A8F;
  --aj-accent:#FF7A34; --aj-accent-2:#E9631A; --aj-accent-ink:#1A0D03;
  --aj-info:#4FBEDE; --aj-info-soft:#123243;
  --aj-good:#4FCB98; --aj-good-soft:#0E3226;
  --aj-warn:#E3A33F; --aj-warn-soft:#38270C;
  --aj-bad:#F07A70; --aj-bad-soft:#3A1614;
  --aj-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.7);
}}
.aj-root[data-theme="dark"]{
  --aj-bg:#070E1B; --aj-panel:#0F1A2C; --aj-panel-2:#142238; --aj-panel-3:#18293F;
  --aj-text:#E9EFF8; --aj-text-2:#B4C2D6; --aj-text-3:#8496AE;
  --aj-line:#22344F; --aj-line-2:#2D4260;
  --aj-brand-ink:#A8C6F2; --aj-hdr-a:#0C1730; --aj-hdr-b:#2B4A8F;
  --aj-accent:#FF7A34; --aj-accent-2:#E9631A; --aj-accent-ink:#1A0D03;
  --aj-info:#4FBEDE; --aj-info-soft:#123243;
  --aj-good:#4FCB98; --aj-good-soft:#0E3226;
  --aj-warn:#E3A33F; --aj-warn-soft:#38270C;
  --aj-bad:#F07A70; --aj-bad-soft:#3A1614;
  --aj-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.7);
}

.aj-root, .aj-root *{box-sizing:border-box}
.aj-root button{font:inherit;color:inherit}
.aj-root input, .aj-root select, .aj-root textarea{font:inherit;color:inherit}
.aj-root :focus-visible{outline:2px solid var(--aj-info);outline-offset:1px;border-radius:3px}
.aj-root .mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}

/* bandeau de page */
.aj-root .aj-pagebar{background:linear-gradient(100deg,var(--aj-hdr-a),var(--aj-hdr-b));color:#fff;
  padding:14px 26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-radius:var(--aj-radius) var(--aj-radius) 0 0}
.aj-root .aj-pagebar h1{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em}
.aj-root .aj-pagebar .aj-sp{flex:1}
.aj-root .aj-pagebar .aj-no{font-family:"IBM Plex Mono",monospace;background:rgba(255,255,255,.14);border-radius:6px;padding:3px 9px;font-size:12.5px}
.aj-root .aj-pagebar .aj-who{font-size:12.5px;color:#C8D7F5}
.aj-root .aj-icon-btn{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;
  padding:6px 11px;border-radius:8px;cursor:pointer;font-size:12px}
.aj-root .aj-icon-btn:hover{background:rgba(255,255,255,.18)}

.aj-root .aj-wrap{padding:20px 0;max-width:1500px;margin:0 auto}

.aj-root .aj-card{background:var(--aj-panel);border:1px solid var(--aj-line);border-radius:var(--aj-radius);box-shadow:var(--aj-shadow);margin-bottom:16px}
.aj-root .aj-card-h{display:flex;align-items:center;gap:12px;padding:14px 22px;border-bottom:1px solid var(--aj-line);flex-wrap:wrap}
.aj-root .aj-card-h h2{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--aj-text-3);font-weight:600}
.aj-root .aj-card-h .aj-sp{flex:1}
.aj-root .aj-card-b{padding:22px}

.aj-root .aj-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.aj-root .aj-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.aj-root .aj-p-draft{background:var(--aj-panel-3);color:var(--aj-text-2)}
.aj-root .aj-p-ok{background:var(--aj-good-soft);color:var(--aj-good)}
.aj-root .aj-tag{display:inline-block;font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--aj-panel-3);color:var(--aj-text-2);white-space:nowrap}
.aj-root .aj-t-count{background:var(--aj-info-soft);color:var(--aj-info)}
.aj-root .aj-t-loss{background:var(--aj-bad-soft);color:var(--aj-bad)}
.aj-root .aj-t-cost{background:var(--aj-warn-soft);color:var(--aj-warn)}

.aj-root .aj-g{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.aj-root .aj-lbl{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--aj-text-3);font-weight:600;margin-bottom:5px}
.aj-root .aj-req{color:var(--aj-accent)}
.aj-root .aj-fld{width:100%;padding:10px 12px;border:1px solid var(--aj-line-2);border-radius:9px;background:var(--aj-panel);color:var(--aj-text)}
.aj-root .aj-fld:hover{border-color:var(--aj-info)}

/* champs verrouillés (date du jour, entrepôt unique) */
.aj-root .aj-ro{display:flex;align-items:center;gap:9px;width:100%;padding:10px 12px;border-radius:9px;
  background:var(--aj-panel-2);border:1px solid transparent;color:var(--aj-text);font-weight:500}
.aj-root .aj-ro .aj-ic{width:22px;height:22px;border-radius:7px;background:var(--aj-panel-3);color:var(--aj-text-3);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.aj-root .aj-ro .aj-ic svg{opacity:.75}
.aj-root .aj-ro em{font-style:normal;color:var(--aj-text-3);font-size:11.5px;margin-left:auto}
.aj-root .aj-acc{font-size:11.5px;color:var(--aj-text-3);margin-top:7px}
.aj-root .aj-acc b{color:var(--aj-text-2);font-weight:600;font-family:"IBM Plex Mono",monospace}

.aj-root .aj-finder{position:relative;min-width:280px;flex:1;max-width:460px}
.aj-root .aj-finder input{width:100%;padding:9px 12px 9px 32px;border:1px solid var(--aj-line-2);border-radius:9px;background:var(--aj-panel);color:var(--aj-text)}
.aj-root .aj-finder svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.5}
.aj-root .aj-results{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 5px);background:var(--aj-panel);border:1px solid var(--aj-line-2);
  border-radius:10px;box-shadow:var(--aj-shadow);max-height:260px;overflow:auto}
.aj-root .aj-results button{display:flex;gap:10px;width:100%;align-items:baseline;border:0;background:transparent;padding:9px 12px;cursor:pointer;text-align:left;border-bottom:1px solid var(--aj-line)}
.aj-root .aj-results button:hover, .aj-root .aj-results button.on{background:var(--aj-info-soft)}
.aj-root .aj-results .aj-s{flex:1;min-width:0}
.aj-root .aj-results .aj-s b{display:block;font-weight:500}

.aj-root .aj-tw{overflow-x:auto}
.aj-root table{width:100%;border-collapse:collapse;min-width:880px}
.aj-root th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--aj-text-3);font-weight:600;text-align:left;
  padding:11px 22px;border-bottom:1px solid var(--aj-line);white-space:nowrap}
.aj-root th.r{text-align:right}
.aj-root td{padding:15px 22px;border-bottom:1px solid var(--aj-line);vertical-align:middle}
.aj-root tbody tr:last-child td{border-bottom:0}
.aj-root tbody tr:hover td{background:var(--aj-panel-2)}
.aj-root .aj-num{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.aj-root .aj-id{font-family:"IBM Plex Mono",monospace;font-weight:500;color:var(--aj-brand-ink)}
.aj-root .aj-sub{font-size:11.5px;color:var(--aj-text-3)}
.aj-root .aj-link{color:var(--aj-info);font-weight:600;text-decoration:none;font-size:12.5px}
.aj-root .aj-neg{color:var(--aj-bad)} .aj-root .aj-pos{color:var(--aj-good)}
.aj-root .aj-it-name{font-weight:600;font-size:14px}
.aj-root .aj-it-sku{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--aj-info);font-weight:500;margin-top:2px}
.aj-root .aj-cellin{width:100px;padding:9px 11px;border:1px solid var(--aj-line-2);border-radius:9px;background:var(--aj-panel);color:var(--aj-text);
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;text-align:right;font-size:14px}
.aj-root .aj-cellin:focus{border-color:var(--aj-info)}
.aj-root .aj-cellin.aj-neg{color:var(--aj-bad)} .aj-root .aj-cellin.aj-pos{color:var(--aj-good)}
.aj-root .aj-after{display:inline-flex;align-items:baseline;gap:8px;justify-content:flex-end}
.aj-root .aj-after .aj-q{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-weight:600;font-size:16px}
.aj-root .aj-after .aj-u{font-size:11.5px;color:var(--aj-text-3)}
.aj-root .aj-impact{font-size:14px;font-weight:600}
.aj-root .aj-xbtn{border:0;background:transparent;color:var(--aj-text-3);cursor:pointer;padding:6px 8px;border-radius:8px;font-size:14px}
.aj-root .aj-xbtn:hover{background:var(--aj-bad-soft);color:var(--aj-bad)}
.aj-root .aj-empty{padding:34px 20px;text-align:center;color:var(--aj-text-3)}

/* section repliable — historique */
.aj-root .aj-sec-h{display:flex;align-items:center;gap:10px;width:100%;border:0;cursor:pointer;text-align:left;
  background:transparent;padding:12px 20px}
.aj-root .aj-car{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;
  background:var(--aj-panel-3);color:var(--aj-text-2);font-size:11px;transition:transform .18s ease}
.aj-root .aj-card[data-open="false"] .aj-car{transform:rotate(-90deg)}
.aj-root .aj-sec-h h2{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--aj-text-3);font-weight:600}
.aj-root .aj-cnt{font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 8px;background:var(--aj-panel-3);color:var(--aj-text-2)}

/* barre de totaux — sticky (pas fixed) sur #main, qui est le vrai conteneur défilant: un
   position:fixed sur toute la largeur du viewport aurait chevauché la barre latérale gauche
   (elle aussi fixe). Sticky reste collée au bas de LA ZONE DE CONTENU, jamais sous le menu.
   Modifié par rapport au fichier fourni — nécessaire pour s'intégrer dans la coquille de l'app
   plutôt que de s'afficher en page plein écran indépendante. Le 2026-09-20. */
.aj-root .aj-dock{position:sticky;bottom:0;z-index:25;background:var(--aj-panel);border-top:1px solid var(--aj-line-2);
  box-shadow:0 -10px 28px -18px rgba(15,32,60,.55);padding:12px 26px;margin:0 -32px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.aj-root .aj-dock-in{max-width:1500px;margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:0 26px}
.aj-root .aj-tot{display:flex;gap:26px;align-items:baseline;flex-wrap:wrap}
.aj-root .aj-tot div{display:flex;flex-direction:column}
.aj-root .aj-tot .aj-t-l{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--aj-text-3);font-weight:600}
.aj-root .aj-tot .aj-t-v{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:15px;font-weight:500}
.aj-root .aj-tot .aj-grand .aj-t-v{font-size:26px;font-weight:600;letter-spacing:-.02em}
.aj-root .aj-dock .aj-sp{flex:1}
.aj-root .aj-gl{font-size:11.5px;color:var(--aj-text-3);width:100%;order:9}
.aj-root .aj-gl b{color:var(--aj-text-2);font-weight:600;font-family:"IBM Plex Mono",monospace}
.aj-root .aj-btn{border:1px solid var(--aj-line-2);background:var(--aj-panel);padding:10px 16px;border-radius:9px;cursor:pointer;font-size:13.5px}
.aj-root .aj-btn:hover{border-color:var(--aj-info);color:var(--aj-info)}
.aj-root .aj-btn-primary{border:0;background:var(--aj-accent);color:var(--aj-accent-ink);font-weight:600;padding:11px 20px}
.aj-root .aj-btn-primary:hover{background:var(--aj-accent-2);color:var(--aj-accent-ink)}
.aj-root .aj-btn-primary[disabled]{background:var(--aj-panel-3);color:var(--aj-text-3);cursor:not-allowed}
.aj-root .aj-btn-navy{border:0;background:var(--aj-brand-ink);color:var(--aj-panel);font-weight:600}

.aj-root .aj-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:60;background:var(--aj-brand-ink);color:#fff;
  padding:10px 18px;border-radius:999px;font-size:12.5px;box-shadow:var(--aj-shadow);opacity:0;pointer-events:none;transition:opacity .2s}
.aj-root .aj-toast.on{opacity:1}
@media (max-width:900px){ .aj-root .aj-g{grid-template-columns:1fr 1fr} }
@media (max-width:860px){ .aj-root .aj-dock{margin:0 -16px} }
@media (max-width:560px){ .aj-root .aj-g{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){.aj-root *{transition:none!important}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* === Historique des transactions: aperçu au clic sur une ligne (voir inventory-history.js) === */
.th-tx-row:hover td { background: var(--surface-2); }
.th-detail-row td { background: var(--surface-2); padding: 10px 14px 14px; border-top: 0; }
.th-detail-content { font-size: 12.5px; }
.th-detail-content > div { margin-bottom: 5px; }
.th-detail-lines { width: auto; margin: 0; }
.th-detail-lines th, .th-detail-lines td { padding: 5px 10px; font-size: 12px; }


/* Écran de connexion — marque "ERP / Système intelligent" avec le logo à barres
   (remplace l'ancien logotype SameoCore, demandé le 2026-10-04). */
.login-brand-erp {
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.brand-logo-erp {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: block;
}
.brand-name-erp { text-align: center; line-height: 1.1; }
.brand-line-erp {
  font-family: var(--font-shell);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink);
}