:root {
  --green: #1b9d54;
  --green-dark: #0f6b38;
  --green-light: #e2f6ea;
  --red: #ef3e4a;
  --red-dark: #b5232f;
  --red-light: #fde7ea;
  --amber: #c47d06;
  --amber-light: #fdf0d5;
  --bg: #eef3f0;
  --surface: #ffffff;
  --text: #15201a;
  --text-2: #67756d;
  --border: #e1e9e4;
  --radius: 16px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);

  /* Palette vive (KPIs, tags, accents) */
  --blue: #2563eb;
  --violet: #7c3aed;
  --teal: #0d9488;
  --pink: #ec4899;
  --orange: #f97316;

  /* Dégradés bold & glassmorphism */
  --grad-primary: linear-gradient(135deg, #1faa5e 0%, #0c9488 100%);
  --grad-primary-soft: linear-gradient(135deg, rgba(31, 170, 94, .14), rgba(12, 148, 136, .12));
  --grad-red: linear-gradient(135deg, #f0473b 0%, #e11d63 100%);
  --grad-amber: linear-gradient(135deg, #f9b234 0%, #f59e0b 100%);
  --grad-blue: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --grad-violet: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  --grad-sidebar: linear-gradient(185deg, #07150e 0%, #0f5132 52%, #10996f 100%);
  --grad-hero: linear-gradient(120deg, #0f6b38 0%, #119e6b 45%, #0ea5a0 100%);

  --glass: rgba(255, 255, 255, .68);
  --glass-strong: rgba(255, 255, 255, .86);
  --glass-border: rgba(255, 255, 255, .65);

  --glow-green: 0 10px 26px rgba(16, 153, 111, .30);
  --glow-red: 0 10px 26px rgba(225, 29, 99, .28);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  background:
    radial-gradient(820px 520px at 6% -8%, rgba(31, 170, 94, .12), transparent 60%),
    radial-gradient(760px 520px at 102% 2%, rgba(37, 99, 235, .09), transparent 55%),
    radial-gradient(720px 620px at 50% 116%, rgba(124, 58, 237, .08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.62;
  letter-spacing: -.006em;
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Typographie ----------
   Une seule regle gouverne l'ensemble : le resserrement suit le corps. Les
   grands nombres et les titres se serrent (jusqu'a -0,03em), les capitales des
   etiquettes s'ecartent (+0,14em), le texte courant reste neutre. Les chiffres
   sont tabulaires partout ou ils s'empilent : montants, KPI, tableaux. */
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

.num-tab, .kpi .val, table td, table th, .badge, .pill, .money, .stat-val {
  font-variant-numeric: tabular-nums;
}

.eyebrow, .side-sub, .brand .sub, th, .kpi .lbl {
  font-feature-settings: "cv05";
}
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* ---------- Login ---------- */
#login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #f7faf8 0%, #e8eee9 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
/* Filigrane du logo en arrière-plan */
#login::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('assets/logo-red.svg') center / min(540px, 80%) no-repeat; opacity: .12;
}
.login-card { position: relative; z-index: 1; }
.login-card {
  background: var(--surface);
  border-radius: 24px;
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.brand { text-align: center; margin-bottom: 24px; }
.brand .logo {
  width: 100%; max-width: 100%; height: auto;
  display: block; margin: 0 auto 10px;
  border-radius: 14px; box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
}
.brand h1 { font-size: 25px; font-weight: 800; letter-spacing: .04em; color: var(--green-dark); line-height: 1.15; }
.brand .sub { color: var(--red-dark); font-weight: 700; letter-spacing: .32em; font-size: 10.5px; text-transform: uppercase; }
.brand .bar { width: 56px; height: 5px; background: var(--red); border-radius: 4px; margin: 10px auto 0; }
label { display: block; font-weight: 600; margin: 14px 0 6px; font-size: 12.5px; letter-spacing: -.004em; }
input, select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 12px; font-size: 15px; background: var(--surface); color: var(--text);
}
input:focus, select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(27, 143, 77, 0.15); }
.field { position: relative; }
.field .field-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 15px; opacity: .65; }
.field input { padding-left: 40px; }
.field .field-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 16px; opacity: .55; padding: 4px; }
.field .field-toggle:hover { opacity: 1; }
.btn {
  width: 100%; padding: 13px; border: none; border-radius: 12px;
  background: var(--green); color: #fff; font-weight: 700; font-size: 15px; margin-top: 18px;
}
.btn:hover { background: var(--green-dark); }
.btn.red { background: var(--red); }
.btn.red:hover { background: var(--red-dark); }
.btn.ghost { background: transparent; color: var(--green-dark); border: 1px solid var(--border); }
.hint { font-size: 12px; color: var(--text-2); text-align: center; margin-top: 12px; }
.error { color: var(--red); font-size: 13px; margin-top: 10px; min-height: 16px; }

/* ---------- App shell ---------- */
#app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
aside {
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 16px 12px;
  position: relative; z-index: 2;
}
.side-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 8px 18px; }
.side-logo { width: 100%; max-width: 180px; height: auto; border-radius: 9px; box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
.side-sub { font-size: 10px; letter-spacing: .34em; color: var(--red); font-weight: 800; text-transform: uppercase; }
nav.menu { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border-radius: 11px; color: var(--text-2); font-weight: 600; border: none; background: none; text-align: left; width: 100%;
}
.nav-item .ic { font-size: 17px; width: 22px; text-align: center; }
.nav-item:hover { background: var(--bg); color: var(--text); }
.nav-item.active { background: var(--green-light); color: var(--green-dark); }
.nav-item .badge { margin-left: auto; background: var(--red); color: #fff; border-radius: 20px; font-size: 11px; padding: 1px 7px; font-weight: 800; }
.logout { color: var(--red); margin-top: 8px; }

main { padding: 22px 26px; overflow-y: auto; max-height: 100vh; position: relative; }
/* Logo en grand, centré, en arrière-plan de l'espace de travail */
main::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url('assets/logo-red.svg') center center / min(640px, 56vw) auto no-repeat;
  opacity: .07;
}
main > * { position: relative; z-index: 1; }
.topbar { display: flex; align-items: center; margin-bottom: 18px; gap: 12px; }
.topbar h2 { font-size: 23px; font-weight: 800; letter-spacing: -.028em; line-height: 1.18; }
.topbar .spacer { flex: 1; }
.mode-pill { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 20px; }
.mode-pill.mock { background: var(--red-light); color: var(--red-dark); }
.mode-pill.live { background: var(--green-light); color: var(--green-dark); }

/* Pastille du niveau d'accès back-office (Administrateur / Gestionnaire /
   Lecture seule / Magasinier, et les niveaux de métier).
   TOUT niveau declare dans ACCESS (app.js) doit avoir sa classe ici : sans
   regle correspondante, la pastille perd son fond et son icone, et le niveau
   passe pour un defaut d'affichage. */
.access-pill { font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 5px; }
.access-pill::before { content: '🔑'; font-size: 11px; }
.access-pill:empty { display: none; }
.access-pill.red { background: var(--red-light); color: var(--red-dark); }
.access-pill.green { background: var(--green-light); color: var(--green-dark); }
.access-pill.grey { background: var(--bg); color: var(--text-2); }
.access-pill.grey::before { content: '👁'; }
.access-pill.blue { background: rgba(37, 99, 235, .13); color: #1d4ed8; }
.access-pill.blue::before { content: '📦'; }
/* Niveaux de métier : chacun sa couleur et son icône, pour qu'on sache d'un
   coup d'œil sous quelle habilitation on travaille. */
.access-pill.amber { background: rgba(245, 158, 11, .16); color: #92400e; }
.access-pill.amber::before { content: '🧮'; }
.access-pill.violet { background: rgba(124, 58, 237, .13); color: #6d28d9; }
.access-pill.violet::before { content: '🧭'; }
.access-pill.teal { background: rgba(13, 148, 136, .14); color: #0f766e; }
.access-pill.teal::before { content: '💬'; }
.access-pill.pink { background: rgba(236, 72, 153, .13); color: #be185d; }
.access-pill.pink::before { content: '📣'; }
.access-pill.orange { background: rgba(234, 88, 12, .14); color: #c2410c; }
.access-pill.orange::before { content: '🛒'; }
.access-pill.cyan { background: rgba(8, 145, 178, .14); color: #0e7490; }
.access-pill.cyan::before { content: '🚚'; }
/* Niveaux analytiques : lecture seule, d'où l'œil — le même signal que
   « Lecture seule », pour qu'on ne s'attende pas à pouvoir enregistrer. */
.access-pill.slate { background: rgba(71, 85, 105, .12); color: #334155; }
.access-pill.slate::before { content: '👁'; }
.access-pill.indigo { background: rgba(79, 70, 229, .13); color: #4338ca; }
.access-pill.indigo::before { content: '👁'; }
.access-pill.stone { background: rgba(120, 113, 108, .15); color: #57534e; }
.access-pill.stone::before { content: '🏭'; }
.access-pill.zinc { background: rgba(113, 113, 122, .13); color: #3f3f46; }
.access-pill.zinc::before { content: '👁'; }
.access-pill.sky { background: rgba(14, 165, 233, .13); color: #0369a1; }
.access-pill.sky::before { content: '👁'; }

/* Mode « Lecture seule » : on masque les commandes d'écriture dans les pages.
   (Le serveur refuse aussi toute écriture pour ce niveau — double sécurité.) */
body.ro #view .row-actions,
body.ro #view .mini,
body.ro #view #addU,
body.ro #view #addProduct { display: none !important; }
body.ro #view select[data-order],
body.ro #view select[data-workflow] { pointer-events: none; opacity: .55; }

.user-chip { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.user-chip .av { width: 34px; height: 34px; border-radius: 10px; background: var(--green-light); display: grid; place-items: center; }

/* ---------- Cards / KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; position: relative; overflow: hidden; box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s; }
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--green); }
.kpi.red::before { background: var(--red); }
.kpi:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .09); transform: translateY(-2px); }
.kpi .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--green-light); display: grid; place-items: center; font-size: 20px; }
.kpi.red .ic { background: var(--red-light); }
.kpi .val { font-size: 25px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; margin-top: 10px; }
.kpi .lbl { color: var(--text-2); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
.kpi.green .val { color: var(--green-dark); }
.kpi.red .val { color: var(--red); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.card h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -.016em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card h3 .accent { width: 4px; height: 16px; background: var(--red); border-radius: 4px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
th { color: var(--text-2); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; white-space: nowrap; }
tr:last-child td { border-bottom: none; }
/* Désignation article : en haut, gros caractères */
.prod-cell { display: flex; flex-direction: column; gap: 5px; }
.prod-name { font-size: 16px; font-weight: 800; color: var(--text); line-height: 1.2; }
.prod-sub { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 12px; }
.tag { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 800; }
.tag.green { background: var(--green-light); color: var(--green-dark); }
.tag.red { background: var(--red-light); color: var(--red-dark); }
.tag.grey { background: var(--bg); color: var(--text-2); }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mini {
  padding: 6px 10px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); font-weight: 700; font-size: 12.5px; color: var(--text);
}
.mini.green { border-color: var(--green); color: var(--green-dark); }
.mini.red { border-color: var(--red); color: var(--red-dark); }
.mini.amber { border-color: var(--amber); color: var(--amber); }
.mini:hover { background: var(--bg); }
.btn.small { padding: 7px 13px; font-size: 12.5px; border-radius: 9px; }

/* ---------- Documents : onglets Achats / Ventes / Stock alignés en ligne */
.doc-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.doc-tabs .btn { width: auto; margin-top: 0; padding: 9px 16px; font-size: 13.5px; }
.doc-tabs input { max-width: 220px; margin: 0; }
.doc-tabs .spacer { flex: 1; }

.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.bar-row .name { width: 150px; font-size: 13px; font-weight: 600; }
.bar-track { flex: 1; height: 8px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--green); border-radius: 6px; }
.bar-row .qty { width: 34px; text-align: right; font-weight: 800; }

.empty { color: var(--text-2); padding: 14px 0; }

/* ---------- Modal ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 20px; z-index: 50; }
/* Le plafond de hauteur + le défilement s'appliquent à TOUTE fenêtre, pas
   seulement aux larges : sans eux, un formulaire long (la fiche article et son
   éditeur photo) dépasse le bas de l'écran d'un portable et ses boutons
   « Annuler / Enregistrer » deviennent inatteignables — on ne peut plus
   enregistrer, sans le moindre message. */
.modal {
  background: var(--surface); border-radius: 18px; padding: 22px;
  width: 100%; max-width: 440px;
  max-height: 88vh; overflow-y: auto;
}
.modal h3 { margin-bottom: 14px; }
.modal .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal .actions { display: flex; gap: 10px; margin-top: 16px; }
.modal .actions .btn { margin-top: 0; }

/* ---------- Fiche profil client ---------- */
/* La fiche client n'a plus qu'à être plus large : hauteur et défilement sont
   désormais communs à toutes les fenêtres. */
.modal.wide { max-width: 720px; }
.client-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.client-ava { width: 48px; height: 48px; border-radius: 13px; background: var(--green-light);
  display: grid; place-items: center; font-size: 24px; flex: none; }
.client-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 10px; margin: 14px 0; }
.client-kpis .kpi { padding: 12px; }
.client-kpis .kpi .val { font-size: 16px; margin-top: 6px; }
.client-kpis .kpi .ic { width: 32px; height: 32px; font-size: 17px; }
.client-orders { max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; }
.client-orders th { position: sticky; top: 0; background: var(--surface); }
.client-orders th, .client-orders td { padding: 9px 10px; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--green-light) !important; }

#toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--green-dark); color: #fff; padding: 11px 18px; border-radius: 12px;
  font-weight: 600; box-shadow: var(--shadow); opacity: 0; transition: opacity .2s; z-index: 60;
}
#toast.show { opacity: 1; }

/* ---------- Finitions / interactions ---------- */
.btn { transition: background .15s, transform .05s, box-shadow .15s; }
.btn:not(.ghost) { box-shadow: 0 4px 12px rgba(27, 143, 77, .22); }
.btn.red { box-shadow: 0 4px 12px rgba(230, 57, 70, .22); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; box-shadow: none; }
.card { box-shadow: var(--shadow); transition: box-shadow .15s; }
.card:hover { box-shadow: 0 5px 16px rgba(0, 0, 0, .07); }
.nav-item { transition: background .12s, color .12s; }
.nav-item.active { box-shadow: inset 3px 0 0 var(--green); }
.mini { transition: background .12s, border-color .12s, transform .05s; }
.mini:active { transform: translateY(1px); }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--bg); }
.login-card { animation: rise .3s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#view { animation: fade .2s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.bar-fill { transition: width .4s ease; }

/* Conteneurs de carte Google Maps (« Boutiques » et « Livraisons ») */
.map-host {
  height: 340px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #eaf2ec;
  z-index: 0;
  overflow: hidden; /* arrondit aussi les tuiles Google Maps */
}
/* Message affiché si Google Maps ne charge pas (clé / réseau) — page « Livraisons ». */
.map-fallback {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0 24px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
}

@media (max-width: 820px) {
  #app { grid-template-columns: 1fr; }
  aside { flex-direction: row; overflow-x: auto; }
  nav.menu { flex-direction: row; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* ----------------------------------------- Veille Prix concurrents */
.vp-pick { position: relative; margin-top: 14px; }
.vp-pick .field-ic { position: absolute; left: 12px; top: 13px; opacity: .6; }
.vp-pick input { padding-left: 38px; }
.vp-list {
  display: none; position: absolute; z-index: 5; left: 0; right: 0; top: 52px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12); overflow: hidden; max-height: 340px; overflow-y: auto;
}
.vp-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 14px; background: none; border: none; border-bottom: 1px solid var(--border);
  cursor: pointer; font-size: 14px; color: inherit;
}
.vp-item:last-child { border-bottom: none; }
.vp-item:hover { background: var(--green-light); }
.vp-item span { flex: 1; }
.vp-item b { color: var(--green-dark); white-space: nowrap; }

.vp-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.vp-kxname { font-size: 17px; font-weight: 800; color: var(--green-dark); }
.vp-best {
  text-align: right; display: flex; flex-direction: column; line-height: 1.2;
  padding: 8px 16px; background: var(--green-light); border-radius: 12px;
}
.vp-best b { font-size: 22px; color: var(--green-dark); }

.vp-verdict {
  border-radius: 12px; padding: 12px 16px; font-size: 14px; margin-bottom: 14px;
  border: 1px solid var(--border); line-height: 1.5;
}
.vp-verdict.win { background: var(--green-light); border-color: var(--green); color: var(--green-dark); }
.vp-verdict.lose { background: var(--red-light); border-color: var(--red); color: var(--red-dark); }
.vp-verdict.neutral { background: var(--bg); }
.vp-advice { margin-top: 6px; font-size: 13px; }

.vp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vp-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-2); padding: 8px 10px; border-bottom: 2px solid var(--border);
}
.vp-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.vp-table td:first-child { font-weight: 700; }
.vp-match { color: var(--text-2); font-size: 13px; }
.vp-price { font-weight: 800; white-space: nowrap; }
.vp-price.vp-cheaper { color: var(--red-dark); }
.vp-low { background: var(--green-light); }
.vp-low td:first-child::after { content: ' 🏆'; }
.vp-na td { color: var(--text-2); }
.vp-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.vp-tag.down { background: var(--red-light); color: var(--red-dark); }
.vp-tag.up { background: var(--green-light); color: var(--green-dark); }
.vp-table a { color: var(--green-dark); font-size: 13px; text-decoration: none; }
.vp-table a:hover { text-decoration: underline; }

/* ----------------------------------------------------- Support (relation client) */
.sup-wrap { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.sup-listcard, .sup-chatcard { margin-bottom: 0; }
.sup-list { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow-y: auto; }
.sup-item { text-align: left; width: 100%; border: 1px solid var(--border); background: var(--surface);
  border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: border-color .12s, background .12s; }
.sup-item:hover { background: var(--bg); }
.sup-item.active { border-color: var(--green); background: var(--green-light); }
.sup-r1 { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.sup-r1 b { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-cat { font-size: 16px; }
.sup-r2 { color: var(--text-2); font-size: 11.5px; margin-top: 3px; }
.sup-r3 { color: var(--text-2); font-size: 12.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-item .badge { background: var(--red); color: #fff; border-radius: 20px; font-size: 10.5px; padding: 1px 6px; font-weight: 800; }

.sup-chatcard { display: flex; flex-direction: column; min-height: 70vh; }
.sup-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.sup-head > div:first-child { flex: 1; }
.sup-subj { font-size: 15px; font-weight: 800; color: var(--text); }
.sup-msgs { flex: 1; overflow-y: auto; padding: 14px 4px; display: flex; flex-direction: column; gap: 10px; max-height: 52vh; }
.sup-msg { display: flex; }
.sup-msg.me { justify-content: flex-end; }
.sup-msg.them { justify-content: flex-start; }
.sup-bub { max-width: 74%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.35; }
.sup-msg.them .sup-bub { background: var(--bg); border: 1px solid var(--border); border-bottom-left-radius: 3px; color: var(--text); }
.sup-msg.me .sup-bub { background: var(--green); color: #fff; border-bottom-right-radius: 3px; }
.sup-auth { font-size: 11px; font-weight: 700; color: var(--green-dark); margin-bottom: 2px; }
.sup-time { font-size: 10px; opacity: .7; margin-top: 3px; text-align: right; }
.sup-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--border); }
.sup-composer { display: flex; gap: 8px; align-items: flex-end; }
.sup-composer textarea { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  font-family: inherit; font-size: 14px; background: var(--surface); color: var(--text); resize: vertical; }
.sup-composer textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(27,143,77,.15); }
.sup-composer .btn { margin-top: 0; white-space: nowrap; padding: 11px 16px; }
@media (max-width: 900px) { .sup-wrap { grid-template-columns: 1fr; } }

/* ----------------------------------------------------- Statistiques (analytics) */
.funnel { display: flex; flex-direction: column; gap: 12px; }
.fn-stage { display: flex; flex-direction: column; gap: 5px; }
.fn-info { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; }
.fn-info span { color: var(--text); font-weight: 600; }
.fn-info b { font-size: 14px; font-weight: 800; color: var(--text); }
.fn-bar { height: 16px; background: var(--bg); border-radius: 8px; overflow: hidden; }
.fn-fill { height: 100%; border-radius: 8px; transition: width .4s ease; }
.st-mini3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.st-mini { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; }
.st-mini .st-val { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.1; }
.st-mini.green .st-val { color: var(--green-dark); }
.st-mini.red .st-val { color: var(--red-dark); }
.st-mini .st-lbl { font-size: 11.5px; color: var(--text-2); margin-top: 3px; }

/* ----------------------------------------------------- Gestion des stocks */
.tag.amber { background: var(--amber-light); color: var(--amber); }
.kpi.amber::before { background: var(--amber); }
.kpi.amber .ic { background: var(--amber-light); }
.kpi.amber .val { color: var(--amber); }
.stk-toolbar { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.stk-toolbar #stkSearch { flex: 1; min-width: 200px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; }
.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 3px; }
.seg-btn { border: none; background: transparent; padding: 6px 13px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.seg-btn.active { background: var(--surface); color: var(--green-dark); box-shadow: var(--shadow); }
.stk-prod { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-size: 14px; }

/* ----------------------------------------------------- Validation & workflow */
.wf-pipeline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wf-step { flex: 1; min-width: 92px; text-align: center; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 8px; }
.wf-step.muted { opacity: .7; }
.wf-step .wf-ic { font-size: 22px; }
.wf-step .wf-count { font-size: 22px; font-weight: 900; color: var(--green-dark); line-height: 1.1; }
.wf-step.muted .wf-count { color: var(--red-dark); }
.wf-step .wf-lbl { font-size: 12px; font-weight: 700; color: var(--text-2); }
.wf-arrow { font-size: 18px; color: var(--text-2); font-weight: 800; flex: 0 0 auto; }
.wf-arrow-x { color: var(--red); }
.wf-q { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; flex-wrap: wrap; }
.wf-q.urgent { border-color: var(--amber); background: var(--amber-light); }
.wf-q-main { flex: 1; min-width: 200px; }
.wf-q-meta { text-align: right; min-width: 120px; }
.wf-q-act { display: flex; gap: 8px; align-items: center; }

/* ----------------------------------------------------- Relation client (GRC) */
.crm-search { max-width: 280px; padding: 8px 12px; font-size: 13px; }
#crmTabs { display: flex; flex-wrap: wrap; margin: 4px 0 14px; }
.crm-seg { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800;
  padding: 2px 9px; border-radius: 999px; vertical-align: middle; white-space: nowrap; }
.crm-add { display: grid; grid-template-columns: 1fr; gap: 8px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 14px; }
.crm-add textarea { padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px;
  font-family: inherit; font-size: 13.5px; resize: vertical; }
.crm-add textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(27,143,77,.15); }
.crm-add .btn { margin-top: 0; }
.crm-timeline { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.crm-note { display: flex; gap: 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px; }
.crm-note.done { opacity: .58; }
.crm-note.done .crm-note-txt { text-decoration: line-through; }
.crm-note-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--green-light);
  display: grid; place-items: center; font-size: 17px; }
.crm-note-body { flex: 1; min-width: 0; }
.crm-note-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.crm-note-txt { font-size: 13.5px; margin: 3px 0; line-height: 1.4; }
.crm-note .mini { margin-top: 4px; }
.crm-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12.5px; color: var(--text-2); }

/* ----------------------------------------------------- Logistique & livraison */
.log-fleet { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.log-courier { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.log-courier-h { display: flex; align-items: center; gap: 10px; }
.log-ava { width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--green-light);
  display: grid; place-items: center; font-size: 20px; }
.log-load { margin: 10px 0; }
.log-courier-f { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.log-courier-f .hint { flex: 1; min-width: 100%; }
.log-pill { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px; vertical-align: middle; white-space: nowrap; }
.log-sel { padding: 5px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); flex: 1; min-width: 110px; }

/* ----- Force de vente (SFA) */
.sf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; text-align: center; }
.sf-stats > div { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 7px 4px; }
.sf-stats b { display: block; font-size: 15px; }
.sf-tour { background: var(--bg); }
.sf-tour h3 { display: flex; align-items: center; gap: 8px; }
.sf-erp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.sf-erp-stat { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 6px; }
.sf-erp-stat b { display: block; font-size: 20px; color: var(--green); }
.sf-addline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.sf-addline #o_search { flex: 1; min-width: 160px; }
.sf-addline #o_prod { flex: 2; min-width: 220px; }
.sf-lines { margin-top: 10px; max-height: 200px; overflow-y: auto; }
.sf-lines table { width: 100%; }
.sf-pick { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; padding: 6px; margin-top: 6px; }
.sf-pick-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; cursor: pointer; }
.sf-pick-item:hover { background: var(--bg); }

/* =====================================================================
   THÈME AUDACIEUX & COLORÉ — dégradés, glassmorphism, glow, animations.
   (Surcouche : restyle les composants partagés sans toucher au markup/JS.)
   ===================================================================== */

/* ---------- Login : fond vif animé + carte verre dépoli ---------- */
#login { background: var(--grad-hero); }
#login::before {
  content: ''; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(380px 380px at 18% 22%, rgba(255, 255, 255, .35), transparent 60%),
    radial-gradient(420px 420px at 82% 18%, rgba(94, 234, 212, .40), transparent 60%),
    radial-gradient(460px 460px at 72% 88%, rgba(124, 58, 237, .30), transparent 62%),
    radial-gradient(380px 380px at 22% 84%, rgba(239, 62, 74, .26), transparent 60%);
  filter: blur(6px); animation: floatBlobs 14s ease-in-out infinite alternate;
}
@keyframes floatBlobs {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -16px, 0) scale(1.06); }
}
#login::after { opacity: .10; }
.login-card {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 30px 70px rgba(4, 30, 18, .45);
}

/* ---------- Sidebar : dégradé émeraude + nav verre ---------- */
aside {
  background: var(--grad-sidebar);
  border-right: none;
  box-shadow: 14px 0 40px rgba(7, 21, 14, .28);
}
.side-brand {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px; margin: 2px 4px 14px; padding: 12px 8px;
}
.side-sub { color: #ffd9c2; }
.nav-item { color: rgba(255, 255, 255, .80); font-weight: 600; }
.nav-item .ic { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.nav-item:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-item.active {
  background: linear-gradient(90deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05));
  color: #fff;
  box-shadow: inset 3px 0 0 #5eead4, 0 6px 18px rgba(0, 0, 0, .18);
}
.nav-item .badge { box-shadow: 0 4px 12px rgba(239, 62, 74, .5); }
.logout { color: #ff9aa2; }
.logout:hover { background: rgba(239, 62, 74, .16); color: #fff; }

/* ---------- Topbar : barre sticky en verre dépoli ---------- */
.topbar {
  position: sticky; top: 10px; z-index: 6;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 18px; padding: 12px 16px;
  box-shadow: 0 10px 30px rgba(20, 40, 30, .08);
}
.topbar h2 {
  background: var(--grad-hero); -webkit-background-clip: text; background-clip: text;
  color: transparent; font-weight: 800;
}
.user-chip .av { background: var(--grad-primary); color: #fff; box-shadow: var(--glow-green); }

/* ---------- KPIs : carte verre, barre + icône en dégradé, glow ---------- */
.kpi {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(20, 40, 30, .07);
}
.kpi::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 5px; background: var(--grad-primary); }
.kpi.red::before { background: var(--grad-red); }
.kpi.amber::before { background: var(--grad-amber); }
.kpi .ic { background: var(--grad-primary); box-shadow: var(--glow-green); }
.kpi.red .ic { background: var(--grad-red); box-shadow: var(--glow-red); }
.kpi.amber .ic { background: var(--grad-amber); box-shadow: 0 10px 24px rgba(245, 158, 11, .32); }
.kpi .val { font-weight: 900; letter-spacing: -.4px; }
.kpi:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20, 40, 30, .15); }
/* Variété chromatique : rotation de teintes sur les KPIs neutres */
.kpis .kpi:not(.green):not(.red):not(.amber):nth-child(2)::before { background: var(--grad-blue); }
.kpis .kpi:not(.green):not(.red):not(.amber):nth-child(2) .ic { background: var(--grad-blue); box-shadow: 0 10px 24px rgba(37, 99, 235, .30); }
.kpis .kpi:not(.green):not(.red):not(.amber):nth-child(3)::before { background: var(--grad-violet); }
.kpis .kpi:not(.green):not(.red):not(.amber):nth-child(3) .ic { background: var(--grad-violet); box-shadow: 0 10px 24px rgba(124, 58, 237, .30); }
.kpis .kpi:not(.green):not(.red):not(.amber):nth-child(4)::before { background: linear-gradient(135deg, #fb923c, #f97316); }
.kpis .kpi:not(.green):not(.red):not(.amber):nth-child(4) .ic { background: linear-gradient(135deg, #fb923c, #f97316); box-shadow: 0 10px 24px rgba(249, 115, 22, .30); }

/* ---------- Cartes : verre dépoli + accent dégradé ---------- */
.card {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(20, 40, 30, .055);
}
.card:hover { box-shadow: 0 16px 38px rgba(20, 40, 30, .10); }
.card h3 .accent { background: var(--grad-red); }

/* ---------- Boutons : remplissage dégradé + glow ---------- */
.btn:not(.ghost) { background: var(--grad-primary); box-shadow: var(--glow-green); }
.btn:not(.ghost):hover { background: var(--grad-primary); filter: brightness(1.06); }
.btn.red { background: var(--grad-red); box-shadow: var(--glow-red); }
.btn.red:hover { background: var(--grad-red); filter: brightness(1.06); }
.btn.ghost {
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--green-dark); border: 1px solid var(--glass-border); box-shadow: none;
}
.btn.ghost:hover { background: rgba(255, 255, 255, .85); }

/* ---------- Tags : variantes vives supplémentaires ---------- */
.tag.blue { background: rgba(37, 99, 235, .13); color: #1d4ed8; }
.tag.violet { background: rgba(124, 58, 237, .13); color: #6d28d9; }
.tag.teal { background: rgba(13, 148, 136, .15); color: #0f766e; }

/* ---------- Tables : en-tête teinté + survol dégradé ---------- */
th { background: var(--grad-primary-soft); }
tbody tr:hover { background: var(--grad-primary-soft); }
tr.clickable:hover { background: var(--grad-primary-soft) !important; }

/* ---------- Barres de progression : dégradé ---------- */
.bar-fill { background: var(--grad-primary); }

/* ---------- Modales : verre dépoli + voile flou ---------- */
.overlay { background: rgba(8, 22, 14, .48); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.modal {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 34px 90px rgba(4, 20, 12, .34);
}

/* ---------- Toast : dégradé + glow ---------- */
#toast { background: var(--grad-primary); box-shadow: var(--glow-green); }

/* ---------- Touches colorées sur les modules ---------- */
.log-ava, .crm-note-ic, .client-ava { background: var(--grad-primary-soft); }
.sup-msg.me .sup-bub { background: var(--grad-primary); }
.sf-erp-stat b, .wf-step .wf-count {
  background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.seg-btn.active { color: var(--green-dark); }

/* ---------- Animations d'entrée plus marquées ---------- */
.kpi { animation: pop .34s cubic-bezier(.2, .8, .2, 1) both; }
.kpis .kpi:nth-child(2) { animation-delay: .05s; }
.kpis .kpi:nth-child(3) { animation-delay: .1s; }
.kpis .kpi:nth-child(4) { animation-delay: .15s; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.sf-pick-item input { width: auto; }

/* =====================================================================
   PUSH — on intensifie : KPIs en dégradé animé + chiffres clippés,
   reflets de cartes, halos colorés, micro-interactions.
   ===================================================================== */

/* KPIs : barre supérieure en dégradé animé (reflet qui glisse) */
.kpi::before { background-size: 220% 100%; animation: kpiSheen 5s linear infinite; }
@keyframes kpiSheen { to { background-position: 220% 0; } }

/* Valeurs KPI en texte dégradé (clip) — premium & coloré */
.kpi .val,
.kpi.green .val {
  background: var(--grad-hero); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.kpi.red .val { background: var(--grad-red); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi.amber .val { background: var(--grad-amber); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpis .kpi:not(.green):not(.red):not(.amber):nth-child(2) .val { background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpis .kpi:not(.green):not(.red):not(.amber):nth-child(3) .val { background: var(--grad-violet); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpis .kpi:not(.green):not(.red):not(.amber):nth-child(4) .val { background: linear-gradient(135deg, #fb923c, #f97316); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Halo lumineux diffus derrière l'icône KPI */
.kpi .ic { position: relative; }
.kpi .ic::after {
  content: ''; position: absolute; inset: -6px; border-radius: 16px; z-index: -1;
  background: inherit; filter: blur(14px); opacity: .45;
}

/* Cartes : reflet supérieur subtil + léger zoom au survol */
.card { position: relative; overflow: hidden; }
.card::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
}
.card:hover { transform: translateY(-2px); }

/* Titres de carte : pastille d'accent en dégradé + halo */
.card h3 .accent { box-shadow: 0 0 10px rgba(239, 62, 74, .5); }

/* Liens de navigation : icône qui grossit légèrement au survol */
.nav-item .ic { transition: transform .15s ease; }
.nav-item:hover .ic { transform: scale(1.18); }
.nav-item.active .ic { transform: scale(1.12); }

/* Boutons : reflet glissant au survol */
.btn:not(.ghost) { position: relative; overflow: hidden; }
.btn:not(.ghost)::before {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg); transition: left .5s ease;
}
.btn:not(.ghost):hover::before { left: 130%; }

/* Pastilles segment (seg) actives : fond dégradé doux */
.seg-btn.active { background: var(--grad-primary-soft); }

/* Entonnoir & mini-stats : valeurs en dégradé clippé */
.st-mini .st-val, .fn-info b {
  background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.st-mini.red .st-val { background: var(--grad-red); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Étapes workflow : carte avec liseré dégradé en haut */
.wf-step { position: relative; overflow: hidden; }
.wf-step::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-primary); }
.wf-step.muted::before { background: var(--grad-red); }

/* Pulsation douce des badges de notification (sidebar) */
.nav-item .badge { animation: badgePulse 2.4s ease-in-out infinite; }
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(239, 62, 74, .5); }
  50% { box-shadow: 0 4px 18px rgba(239, 62, 74, .85); }
}

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  .kpi::before, .nav-item .badge, #login::before { animation: none; }
  .kpi, .card, .nav-item .ic { transition: none; }
}

/* ----------------------------------------------------- Traçabilité & preuve de livraison */
.trace-search { display: flex; gap: 8px; flex-wrap: wrap; }
.trace-search input { flex: 1; min-width: 200px; padding: 10px 13px; border: 1px solid var(--border);
  border-radius: 11px; font-size: 14px; background: var(--surface); }
.trace-search input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(27, 143, 77, .15); }
.trace-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.trace-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; transition: background .12s; }
.trace-chip:hover { background: var(--grad-primary-soft); }
.trace-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--text-2); font-size: 13px; margin-bottom: 14px; }
.trace-timeline { position: relative; }
.trace-step { display: flex; gap: 12px; position: relative; padding-bottom: 16px; }
.trace-step::before { content: ''; position: absolute; left: 17px; top: 36px; bottom: -2px; width: 2px; background: var(--border); }
.trace-step:last-child::before { display: none; }
.trace-dot { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 17px; background: var(--grad-primary-soft); border: 1px solid var(--glass-border); z-index: 1; }
.trace-step:last-child .trace-dot { background: var(--grad-primary); box-shadow: var(--glow-green); }
.trace-body { padding-top: 5px; min-width: 0; }
.pod-card { border-color: rgba(31, 170, 94, .4) !important; }
.pod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.pod-grid > div { display: flex; flex-direction: column; gap: 2px; }
.pod-grid b { font-size: 14px; }
.pod-note { margin-top: 10px; font-style: italic; color: var(--text-2); }

/* ---------- Dépôts (entrepôts) ---------- */
.depot-gauge { height: 9px; border-radius: 20px; background: var(--bg); overflow: hidden; }
.depot-gauge-fill { height: 100%; border-radius: 20px; transition: width .3s ease; }
.depot-gauge-fill.green { background: var(--grad-primary); }
.depot-gauge-fill.amber { background: var(--grad-amber); }
.depot-gauge-fill.red { background: var(--grad-red); }
.chip-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.chip-opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 600;
  cursor: pointer; user-select: none; transition: border-color .12s, background .12s; }
.chip-opt:hover { border-color: var(--green); }
.chip-opt:has(input:checked) { background: var(--green-light); border-color: var(--green); color: var(--green-dark); }
.chip-opt input { accent-color: var(--green); }
.btn.ghost.danger { color: var(--red-dark); border-color: var(--red); }
.btn.ghost.danger:hover { background: var(--red-light); }

/* ---------- Bannières promo (overlays pop-up / pop-under) ---------- */
.promo-banner { position: fixed; left: 50%; z-index: 9999; display: flex; align-items: center;
  gap: 12px; width: min(680px, calc(100% - 32px)); padding: 12px 14px; border-radius: 16px;
  color: #fff; box-shadow: 0 14px 34px rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .22); }
.promo-banner.popup { top: 16px; animation: pbDown .38s cubic-bezier(.2, .8, .2, 1); }
.promo-banner.popunder { bottom: 16px; animation: pbUp .38s cubic-bezier(.2, .8, .2, 1); }
.promo-banner.tone-primary { background: var(--grad-primary); }
.promo-banner.tone-accent { background: var(--grad-red); }
.promo-banner.tone-amber { background: var(--grad-amber); }
.promo-banner.tone-blue { background: var(--grad-blue); }
.promo-banner.tone-violet { background: var(--grad-violet); }
.pb-emoji { font-size: 26px; flex: none; }
.pb-text { display: flex; flex-direction: column; line-height: 1.22; flex: 1; min-width: 0; }
.pb-text b { font-size: 14.5px; font-weight: 800; }
.pb-text span { font-size: 12.5px; opacity: .92; }
.pb-cta { background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .5);
  color: #fff; font-weight: 800; font-size: 12.5px; padding: 7px 13px; border-radius: 20px;
  cursor: pointer; white-space: nowrap; flex: none; }
.pb-cta:hover { background: rgba(255, 255, 255, .34); }
.pb-close { background: transparent; border: none; color: #fff; font-size: 15px; cursor: pointer;
  opacity: .8; padding: 4px 2px; flex: none; }
.pb-close:hover { opacity: 1; }
.promo-banner { transform: translateX(-50%); }
@keyframes pbDown { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pbUp { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* Aperçu dans l'éditeur (positionnement statique) */
.pb-preview .promo-banner { position: relative; left: auto; transform: none; animation: none; width: 100%; }
/* Bons de sortie */
.modal-lg { max-width: 640px; }
.i-line { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.i-line .i-prod { flex: 1.2; min-width: 0; }
.i-line .i-name { flex: 1.4; min-width: 0; }
.i-line .i-qty { width: 74px; flex: none; }
.i-line .i-del { flex: none; }
.bs-actions { display: flex; gap: 6px; white-space: nowrap; }
tr.bs-cancelled { opacity: .55; }
tr.bs-cancelled td b { text-decoration: line-through; }
/* Paie journaliers */
.due-amount { color: var(--amber); }
tr.lab-paid { opacity: .6; }
/* Inventaire dépôt */
tr.inv-low td b { color: var(--red-dark); }
/* Plan comptable */
tr.je-head td { background: var(--bg); }
.je-line { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.je-line .je-acc { flex: 1.6; min-width: 0; }
.je-line .je-deb, .je-line .je-cre { width: 110px; flex: none; }

/* ============ ICONES VECTORIELLES (Material Symbols) ============
   Remplacent les emojis du chrome (nav + KPI) via msi() dans app.js.
   Repli : si la police ne charge pas, app.js garde l'emoji d'origine. */
.msi {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  vertical-align: -4px;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'opsz' 24;
  -webkit-font-smoothing: antialiased;
}
.nav-item .msi { font-size: 18px; }
.kpi .ic .msi { font-size: 22px; }
/* ===== Photos produit grand format (Catalogue / Stocks / Prix) ===== */
.cat-photo {
  width: 72px; height: 72px; border-radius: 12px; object-fit: cover;
  border: 1px solid var(--border); cursor: zoom-in; background: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cat-photo:hover { transform: scale(1.06); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.cat-photo.sm { width: 46px; height: 46px; border-radius: 9px; }
.cat-photo-emoji {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 12px; font-size: 38px;
  border: 1px solid var(--border); background: var(--bg, #f6f8f6);
}

/* Agrandissement plein écran */
.photo-lightbox {
  position: fixed; inset: 0; z-index: 9999; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(15, 23, 20, .82); backdrop-filter: blur(4px);
  animation: plFade .16s ease;
}
@keyframes plFade { from { opacity: 0; } to { opacity: 1; } }
.photo-lightbox figure {
  position: relative; margin: 0; max-width: min(90vw, 720px);
  background: #fff; border-radius: 18px; padding: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5); animation: plPop .2s ease;
}
@keyframes plPop { from { transform: scale(.94); } to { transform: scale(1); } }
.photo-lightbox img {
  display: block; max-width: 100%; max-height: 74vh; object-fit: contain;
  border-radius: 10px; margin: 0 auto;
}
.photo-lightbox figcaption {
  margin-top: 10px; text-align: center; font-weight: 800;
  color: var(--text, #1a1a1a); font-size: 15px;
}
.photo-lightbox .pl-close {
  position: absolute; top: -14px; right: -14px; width: 36px; height: 36px;
  border-radius: 50%; border: none; cursor: pointer; font-size: 16px;
  background: #fff; color: #333; box-shadow: 0 4px 14px rgba(0,0,0,.35);
}

/* ---------- Catalogue : barre latérale des rayons (haut → bas, à gauche) ---------- */
.cat-layout { display: flex; gap: 14px; align-items: flex-start; }
.cat-main { flex: 1; min-width: 0; }
.cat-rail {
  position: sticky; top: 14px;
  display: flex; flex-direction: column; gap: 5px;
  width: 190px; flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: var(--shadow);
  max-height: calc(100vh - 28px);
  overflow-y: auto;
}
/* Chaque rayon tient sur UNE ligne : icône + nom + badge alignés côte à côte. */
.rail-item {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  padding: 6px 8px;
  border: 1px solid transparent; border-radius: 12px;
  background: none; color: var(--text-2);
  font-size: 12px; font-weight: 600; line-height: 1.15;
  text-align: left;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.rail-item .rail-ic {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 15px; border-radius: 9px;
  background: color-mix(in srgb, var(--cat) 12%, white);
  transition: background .18s ease, box-shadow .18s ease;
}
.rail-item:hover { background: color-mix(in srgb, var(--cat) 7%, white); color: var(--text); }
.rail-item.active {
  background: color-mix(in srgb, var(--cat) 10%, white);
  border-color: color-mix(in srgb, var(--cat) 45%, white);
  color: var(--text); font-weight: 800;
}
.rail-item.active .rail-ic {
  background: linear-gradient(135deg, var(--cat), color-mix(in srgb, var(--cat) 78%, black));
  box-shadow: 0 4px 10px color-mix(in srgb, var(--cat) 35%, transparent);
}
.rail-name {
  flex: 1; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-count {
  flex-shrink: 0;
  font-size: 10px; font-weight: 800; color: var(--cat);
  background: color-mix(in srgb, var(--cat) 12%, white);
  padding: 1px 7px; border-radius: 20px;
}
@media (max-width: 760px) {
  .cat-rail { width: 150px; }
  .rail-name { font-size: 11px; }
}

/* ---- Éditeur de photo d'article (fiche produit) --------------------------
   La photo est stockée en data URL dans la fiche : on force un carré 480 px
   et on affiche le poids obtenu, pour ne pas alourdir le catalogue lu par
   l'app mobile sans s'en apercevoir. */
.photo-editor { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 8px; }
.photo-drop {
  width: 148px; height: 148px; flex: none; position: relative; cursor: pointer;
  border: 2px dashed var(--border); border-radius: 14px; background: var(--bg);
  display: grid; place-items: center; overflow: hidden; text-align: center;
  transition: border-color .15s, background .15s;
}
.photo-drop:hover, .photo-drop:focus-visible { border-color: var(--green); background: var(--green-light); }
.photo-drop.over { border-color: var(--green); background: var(--green-light); border-style: solid; }
.photo-view { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Le canvas se manipule à la souris : on coupe la sélection et le défilement
   tactile pour que le glisser recadre au lieu de faire défiler la page. */
canvas.photo-view { cursor: grab; touch-action: none; user-select: none; }
canvas.photo-view:active { cursor: grabbing; }
.photo-hint { position: absolute; padding: 10px; color: var(--text-2); font-size: 11px; line-height: 1.45; pointer-events: none; }
.photo-hint b { display: block; font-size: 12px; color: var(--text); margin: 6px 0 2px; }
.photo-hint-ic { font-size: 26px; }
.photo-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.photo-side label { margin: 0; }
.photo-zoom input[type=range] { width: 100%; padding: 0; margin: 4px 0 0; }
.photo-tip, .photo-meta { font-size: 11px; color: var(--text-2); }
.photo-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.photo-acts { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
@media (max-width: 560px) {
  .photo-editor { flex-direction: column; }
  .photo-drop { width: 100%; height: 180px; }
}

/* =====================================================================
   MOUVEMENT D'USAGE — le mouvement au service de la lecture.
   Les effets plus haut sont décoratifs (reflets, halos, pulsations) ;
   ceux-ci accompagnent l'action : on voit la page se construire, ce qui
   charge, ce qui vient d'arriver et ce qui vient de changer.
   Durées courtes (150–350 ms) ; tout est coupé par le bloc
   « prefers-reduced-motion » en fin de section.
   ===================================================================== */

/* ---------- Changement de page : les blocs se posent en cascade ----------
   Remplace le fondu global de #view : au lieu d'un flash, la structure de
   la page se dépose de haut en bas. Le décalage est plafonné (8 blocs) pour
   que le bas de page ne se fasse pas attendre. Les KPIs gardent leur propre
   cascade (.kpi / @keyframes pop) — on ne les anime pas une seconde fois. */
#view { animation: none; }
#view > * { animation: blockIn .34s cubic-bezier(.2, .8, .2, 1) both; }
#view > .kpis { animation: none; }
#view > *:nth-child(2) { animation-delay: .05s; }
#view > *:nth-child(3) { animation-delay: .1s; }
#view > *:nth-child(4) { animation-delay: .15s; }
#view > *:nth-child(5) { animation-delay: .2s; }
#view > *:nth-child(6) { animation-delay: .25s; }
#view > *:nth-child(n+7) { animation-delay: .3s; }
@keyframes blockIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Chargement : squelette animé plutôt qu'un texte figé ----------
   Le squelette reprend la silhouette de la page à venir (bandeau de KPIs +
   cartes), donc l'écran ne « saute » pas quand les données arrivent. */
.sk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.sk { background: var(--bg); border-radius: 10px; position: relative; overflow: hidden; }
.sk::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  animation: skSweep 1.15s ease-in-out infinite;
}
@keyframes skSweep { to { transform: translateX(100%); } }
.sk-kpi { height: 104px; border-radius: var(--radius); }
.sk-line { height: 13px; margin-bottom: 10px; }
.sk-line:last-child { margin-bottom: 0; }
.sk-line.w40 { width: 40%; }
.sk-line.w60 { width: 60%; }
.sk-line.w80 { width: 80%; }
.sk-chart { height: 168px; border-radius: 12px; }

/* ---------- Listes : les premières lignes arrivent en cascade ----------
   Au-delà de 12 lignes on n'anime plus : un tableau de 300 articles doit
   s'afficher d'un bloc, sans coût de rendu inutile. */
#view tbody tr:nth-child(-n+12) { animation: rowIn .3s ease-out both; }
#view tbody tr:nth-child(1) { animation-delay: .02s; }
#view tbody tr:nth-child(2) { animation-delay: .05s; }
#view tbody tr:nth-child(3) { animation-delay: .08s; }
#view tbody tr:nth-child(4) { animation-delay: .11s; }
#view tbody tr:nth-child(5) { animation-delay: .14s; }
#view tbody tr:nth-child(6) { animation-delay: .17s; }
#view tbody tr:nth-child(7) { animation-delay: .2s; }
#view tbody tr:nth-child(8) { animation-delay: .23s; }
#view tbody tr:nth-child(9) { animation-delay: .26s; }
#view tbody tr:nth-child(10) { animation-delay: .29s; }
#view tbody tr:nth-child(11) { animation-delay: .32s; }
#view tbody tr:nth-child(12) { animation-delay: .35s; }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Graphiques : les barres poussent depuis l'axe ----------
   Ciblé sur les <svg> posés directement dans une carte (revenueChart /
   colChart) : les SVG de Google Maps sont imbriqués dans .map-host et ne
   sont donc jamais touchés. */
#view .card > svg rect {
  transform-box: fill-box; transform-origin: bottom;
  animation: barRise .5s cubic-bezier(.2, .8, .2, 1) both;
}
#view .card > svg rect:nth-of-type(2) { animation-delay: .03s; }
#view .card > svg rect:nth-of-type(3) { animation-delay: .06s; }
#view .card > svg rect:nth-of-type(4) { animation-delay: .09s; }
#view .card > svg rect:nth-of-type(5) { animation-delay: .12s; }
#view .card > svg rect:nth-of-type(6) { animation-delay: .15s; }
#view .card > svg rect:nth-of-type(7) { animation-delay: .18s; }
#view .card > svg rect:nth-of-type(8) { animation-delay: .21s; }
#view .card > svg rect:nth-of-type(9) { animation-delay: .24s; }
#view .card > svg rect:nth-of-type(10) { animation-delay: .27s; }
#view .card > svg rect:nth-of-type(11) { animation-delay: .3s; }
#view .card > svg rect:nth-of-type(12) { animation-delay: .33s; }
#view .card > svg rect:nth-of-type(13) { animation-delay: .36s; }
#view .card > svg rect:nth-of-type(n+14) { animation-delay: .39s; }
@keyframes barRise { from { transform: scaleY(.02); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Jauges : le remplissage pousse depuis la gauche ---------- */
#view .bar-fill, #view .fn-fill { transform-origin: left; animation: growX .55s cubic-bezier(.2, .8, .2, 1) both; }
/* Exception : le suivi livreur se rafraîchit toutes les 3,5 s. Sa barre doit
   GLISSER vers la nouvelle position (transition de largeur), pas rejouer son
   entrée à chaque battement. */
#livList .bar-fill { animation: none; }
@keyframes growX { from { transform: scaleX(0); } to { transform: none; } }

/* ---------- Modales : voile qui se fond, fenêtre qui monte ---------- */
.overlay { animation: ovIn .16s ease both; }
.overlay .modal { animation: modalIn .26s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ovIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Toast : glisse depuis le bas au lieu d'apparaître ---------- */
#toast {
  transform: translate(-50%, 14px) scale(.96);
  transition: opacity .22s ease, transform .28s cubic-bezier(.2, .8, .2, 1);
}
#toast.show { transform: translate(-50%, 0) scale(1); }

/* ---------- Navigation : la sélection « atterrit » ----------
   Le menu est reconstruit à chaque page : une transition ne jouerait pas
   (élément neuf déjà actif) — c'est donc une animation d'entrée, portée par
   le seul élément actif. */
.nav-item { transition: background .12s, color .12s, transform .1s ease; }
.nav-item:active { transform: scale(.985); }
.nav-item.active { animation: navPick .3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes navPick { from { opacity: .5; transform: translateX(-7px); } to { opacity: 1; transform: none; } }

/* ---------- Valeur qui vient d'être mise à jour ----------
   Posée par le JS (classe retirée à la fin de l'animation) : un chiffre qui
   change tout seul doit se signaler, sinon la mise à jour passe inaperçue. */
.upd { animation: updFlash .9s ease-out; }
@keyframes updFlash {
  0% { color: var(--green); transform: scale(1.12); }
  100% { color: inherit; transform: none; }
}

/* ---------- Accessibilité : on coupe tout le mouvement d'usage ---------- */
@media (prefers-reduced-motion: reduce) {
  #view > *, #view tbody tr, #view .card > svg rect, #view .bar-fill, #view .fn-fill,
  .overlay, .overlay .modal, .nav-item.active, .sk::after, .upd, .login-card {
    animation: none !important;
  }
  #toast, .nav-item { transition: opacity .01s; }
}

/* Case « Garder la photo entière » de l'éditeur photo : la case et son libellé
   sur une ligne, alignés, sans hériter du style des <label> de formulaire (qui
   sont en bloc et en gras). */
.photo-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
}
.photo-check input { width: auto; margin: 0; }

/* ------------------------------------------------ Ressources humaines
   Le menu comptait déjà 43 entrées : les onze écrans RH auraient doublé sa
   hauteur. Ils vivent donc dans un groupe repliable, ouvert seulement quand on
   y travaille. `details/summary` plutôt qu'un état en JavaScript : le
   navigateur sait déjà ouvrir et fermer, et le clavier suit sans rien coder. */
.nav-group { margin-top: 2px; }
.nav-group > summary {
  cursor: pointer; list-style: none; user-select: none;
}
.nav-group > summary::-webkit-details-marker { display: none; }
/* Le chevron dit dans quel sens ça va s'ouvrir, sans image ni police d'icônes. */
.nav-group > summary::after {
  content: '›'; margin-left: auto; font-size: 17px; line-height: 1;
  transform: rotate(90deg); transition: transform .18s ease; color: var(--text-2);
}
.nav-group[open] > summary::after { transform: rotate(-90deg); }
.nav-group[open] > summary { color: var(--text); }
.nav-item.sub { padding-left: 28px; font-size: 13.5px; }

/* Répartition des effectifs : des barres en CSS, sans bibliothèque de
   graphiques. Une dizaine de services ne justifie pas 200 Ko de dépendance. */
.hr-bars { display: grid; gap: 9px; margin-top: 6px; }
.hr-bar { display: grid; grid-template-columns: 1fr 3fr auto; align-items: center; gap: 12px; }
.hr-bar-l { font-weight: 600; font-size: 13.5px; }
.hr-bar-t { background: var(--bg); border-radius: 20px; height: 12px; overflow: hidden; }
.hr-bar-t i { display: block; height: 100%; background: var(--green); border-radius: 20px; }
.hr-bar-n { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }

/* Séparateur de section dans une fiche : la rémunération n'est pas la suite de
   l'état civil, c'est un autre document — l'écran le montre. */
.hr-sep {
  margin: 18px 0 4px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 14px; font-weight: 800;
}