:root{
  /* --- Charte Agrotech Gabon (vert en accent) --- */
  --green:#0E9F57; --green-d:#0B8149; --green-dd:#0A5F37; --green-vivid:#00C060;
  --green-l:#E7F6EE; --green-l2:#F1FAF5;
  --amber:#E8B020; --amber-d:#B8860B; --amber-l:#FBF2D6;
  --red:#C0492F; --red-l:#FBEAE6;
  /* --- Coque neutre premium (couches) --- */
  --ink:#141C18; --ink-2:#2C352F; --muted:#5B6862; --faint:#8A948E;
  --line:#E5EAE7; --line-2:#EEF2F0;
  --bg:#EEF3F0;          /* fond de contenu, neutre légèrement teinté vert */
  --surface:#FFFFFF;      /* cartes, topbar */
  --surface-2:#F7FAF8;    /* barre latérale (2e couche neutre) */
  --radius:14px; --radius-s:10px; --radius-xs:8px;
  --shadow-xs:0 1px 2px rgba(16,50,32,.05);
  --shadow:0 1px 2px rgba(16,50,32,.04), 0 6px 20px rgba(16,50,32,.06);
  --shadow-lg:0 16px 44px rgba(10,60,36,.14);
  --shadow-pop:0 12px 34px rgba(12,44,28,.16);
  /* échelle z sémantique */
  --z-sticky:40; --z-sidebar:50; --z-modal-bg:60; --z-palette:70; --z-toast:90;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
h1,h2,h3,h4,.brand-soba,.kpi-val,.page-title{font-family:inherit;}
button{font-family:inherit;cursor:pointer;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px;}
img{max-width:100%;}

/* ---------- LOGIN ---------- */
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 80% -10%, #16b76e 0%, var(--green) 42%, var(--green-dd) 100%);padding:24px;}
.login-card{width:100%;max-width:940px;display:grid;grid-template-columns:1.05fr .95fr;background:var(--surface);border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(6,50,30,.42);}
.login-aside{background:linear-gradient(160deg,var(--green) 0%,var(--green-dd) 100%);color:#fff;padding:46px 40px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;}
.login-aside::after{content:"";position:absolute;right:-70px;bottom:-70px;width:240px;height:240px;border-radius:50%;background:rgba(232,176,32,.22);}
.login-aside::before{content:"";position:absolute;left:-50px;top:-50px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.08);}
.login-brand{font-size:44px;font-weight:800;letter-spacing:1px;line-height:1;position:relative;}
.login-brand small{display:block;font-size:12px;font-weight:600;letter-spacing:2px;color:#c9ebd7;margin-top:8px;font-family:inherit;}
.login-aside h2{font-size:24px;margin:26px 0 10px;font-weight:800;letter-spacing:-.3px;position:relative;}
.login-aside p{color:#d5efe0;margin:0;font-size:14px;max-width:34ch;position:relative;}
.login-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;position:relative;}
.login-tags span{font-size:11.5px;font-weight:600;background:rgba(255,255,255,.14);padding:6px 12px;border-radius:20px;}
.login-form{padding:44px 44px;display:flex;flex-direction:column;justify-content:center;}
.login-logo{width:190px;height:auto;margin-bottom:6px;}
.field{margin-top:16px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px;}
.field input,.field select{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:var(--radius-s);font-size:14px;color:var(--ink);background:#fafdfb;transition:.15s;}
.field input:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 3px var(--green-l);}
.btn{border:none;border-radius:var(--radius-s);padding:12px 18px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:8px;justify-content:center;transition:.15s;}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 4px 12px rgba(14,159,87,.25);}
.btn-primary:hover{background:var(--green-d);}
.btn-amber{background:var(--amber);color:#3a2c05;box-shadow:0 4px 12px rgba(232,176,32,.28);}
.btn-amber:hover{background:var(--amber-d);color:#fff;}
.btn-ghost{background:transparent;color:var(--green-d);border:1px solid var(--line);}
.btn-ghost:hover{background:var(--green-l);border-color:var(--green-l);}
.btn-sm{padding:8px 12px;font-size:12.5px;border-radius:8px;}
.btn-block{width:100%;margin-top:22px;}
.login-hint{margin-top:16px;font-size:12px;color:var(--muted);text-align:center;}

/* ---------- APP SHELL ---------- */
#app{display:none;min-height:100vh;}
.topbar{height:62px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 18px;position:sticky;top:0;z-index:var(--z-sticky);}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer;flex:none;padding-right:4px;}
.app-logo{height:28px;width:auto;display:block;}
.brand-soba{font-weight:800;font-size:18px;letter-spacing:.4px;color:var(--green-dd);}

/* recherche → palette de commandes */
.omni{flex:1;max-width:460px;display:flex;align-items:center;gap:9px;height:38px;padding:0 10px 0 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);color:var(--muted);font-size:13px;font-weight:500;transition:border-color .15s,background .15s,box-shadow .15s;}
.omni:hover{border-color:#d3ddd8;background:#fff;}
.omni .omni-txt{flex:1;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.omni .omni-kbd,.palette-in kbd{font-family:inherit;font-size:10.5px;font-weight:700;color:var(--faint);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 6px;letter-spacing:.3px;}
.spacer{flex:1;}

/* menu utilisateur */
.avatar{width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none;}
.avatar.lg{width:42px;height:42px;font-size:15px;}
.usermenu{position:relative;flex:none;}
.usermenu-btn{display:flex;align-items:center;gap:9px;padding:5px 9px 5px 6px;border:1px solid transparent;border-radius:11px;background:transparent;transition:background .15s,border-color .15s;}
.usermenu-btn:hover,.usermenu-btn[aria-expanded="true"]{background:var(--surface-2);border-color:var(--line);}
.um-id{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;}
.um-id .nm{font-size:12.5px;font-weight:700;color:var(--ink);}
.um-id .rl{font-size:11px;color:var(--muted);font-weight:500;}
.um-chev{color:var(--faint);transition:transform .2s var(--ease);}
.usermenu-btn[aria-expanded="true"] .um-chev{transform:rotate(180deg);}
.usermenu-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:256px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-pop);padding:8px;z-index:var(--z-palette);animation:pop .16s var(--ease);}
.ump-head{display:flex;align-items:center;gap:11px;padding:8px 10px 12px;border-bottom:1px solid var(--line-2);margin-bottom:6px;}
.ump-head .nm{font-size:14px;font-weight:700;}
.ump-head .rl{font-size:12px;color:var(--muted);}
.ump-role{padding:6px 10px 10px;border-bottom:1px solid var(--line-2);margin-bottom:6px;}
.ump-role label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);margin-bottom:6px;}
.ump-role select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;}
.ump-item{width:100%;display:flex;align-items:center;gap:10px;padding:10px 10px;border:none;background:transparent;border-radius:9px;font-size:13px;font-weight:600;color:var(--ink-2);text-align:left;transition:background .13s,color .13s;}
.ump-item svg{width:17px;height:17px;color:var(--muted);}
.ump-item:hover{background:var(--surface-2);}
.ump-item.danger{color:var(--red);}
.ump-item.danger svg{color:var(--red);}
.ump-item.danger:hover{background:var(--red-l);}

.layout{display:grid;grid-template-columns:244px 1fr;}
.sidebar{background:var(--green-dd);border-right:1px solid rgba(0,0,0,.14);min-height:calc(100vh - 62px);padding:16px 12px;position:sticky;top:62px;height:calc(100vh - 62px);overflow-y:auto;display:flex;flex-direction:column;}
.nav-group{margin-bottom:14px;}
.nav-group .gl{font-size:10px;font-weight:700;letter-spacing:1px;color:rgba(255,255,255,.55);padding:6px 12px 6px;text-transform:uppercase;}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:rgba(255,255,255,.88);font-weight:500;font-size:13.5px;margin-bottom:2px;transition:background .13s,color .13s;}
.nav-item:hover{background:rgba(255,255,255,.13);color:#fff;}
.nav-item.active{background:#fff;color:var(--green-dd);font-weight:700;}
.nav-item svg{width:18px;height:18px;flex:none;color:rgba(255,255,255,.72);}
.nav-item:hover svg{color:#fff;}
.nav-item.active svg{color:var(--green-dd);}
.nav-item .count{margin-left:auto;font-size:11px;font-weight:700;background:rgba(255,255,255,.2);color:#fff;padding:1px 8px;border-radius:20px;font-variant-numeric:tabular-nums;}
.nav-item.active .count{background:var(--green-dd);color:#fff;}
.sidebar-foot{margin-top:auto;padding:14px 12px 4px;font-size:11px;color:rgba(255,255,255,.5);text-align:center;}

.main{padding:26px 30px 64px;min-height:calc(100vh - 64px);}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.crumb{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:4px;}
.page-title{font-size:24px;font-weight:800;letter-spacing:-.4px;margin:0;}
.page-sub{color:var(--muted);font-size:13px;margin:4px 0 0;}
.head-actions{display:flex;gap:10px;}

/* cards / kpi */
.grid{display:grid;gap:18px;}
.kpis{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.kpi{padding:20px 20px 18px;position:relative;overflow:hidden;}
.kpi .kl{font-size:12.5px;color:var(--muted);font-weight:600;}
.kpi .kpi-val{font-size:23px;font-weight:800;margin:8px 0 2px;letter-spacing:-.5px;line-height:1.1;white-space:nowrap;}
.kpi .kt{font-size:12px;font-weight:600;}
.kpi .kt.up{color:var(--green);} .kpi .kt.down{color:var(--red);}
.kpi .ic{position:absolute;right:16px;top:16px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;}
.ic.p{background:var(--green-l);color:var(--green-d);} .ic.a{background:var(--amber-l);color:var(--amber-d);}
.ic.s{background:#e9f5ee;color:#2f8f57;} .ic.r{background:var(--red-l);color:var(--red);}
.kpi:has(.ic.p){background:linear-gradient(180deg,#f3fbf6,#fff);}
.kpi:has(.ic.a){background:linear-gradient(180deg,#fdf8ea,#fff);}
.kpi:has(.ic.s){background:linear-gradient(180deg,#f1faf4,#fff);}
.kpi:has(.ic.r){background:linear-gradient(180deg,#fdf2ef,#fff);}

.section-title{font-size:15px;font-weight:700;margin:26px 0 12px;display:flex;align-items:center;gap:9px;}
.two-col{grid-template-columns:1.4fr 1fr;align-items:start;}

/* tables */
.tablewrap{overflow:auto;}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;}
table.tbl thead th{text-align:left;font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);font-weight:700;padding:13px 16px;border-bottom:1px solid var(--line);background:#f8fbf9;position:sticky;top:0;}
table.tbl tbody td{padding:13px 16px;border-bottom:1px solid #eef4f0;}
table.tbl tbody tr:last-child td{border-bottom:none;}
table.tbl tbody tr.click{cursor:pointer;}
table.tbl tbody tr.click:hover{background:var(--green-l2);}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;}
.mono{font-variant-numeric:tabular-nums;font-weight:600;}
.t-strong{font-weight:700;}
.t-ref{font-weight:700;color:var(--green-d);}

/* badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px;line-height:1.6;}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.b-ok{background:var(--green-l);color:var(--green-d);}
.b-warn{background:var(--amber-l);color:var(--amber-d);}
.b-bad{background:var(--red-l);color:var(--red);}
.b-info{background:#eef1f3;color:#4a5560;}
.b-muted{background:#eef1f3;color:var(--muted);}
.badge.flat::before{display:none;}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.chip{font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:20px;border:1px solid var(--line);background:#fff;color:var(--muted);}
.chip.on{background:var(--green);color:#fff;border-color:var(--green);}

/* En-tête du bloc d'alertes + compteur */
.alert-hdr{display:flex;align-items:center;gap:10px;padding:16px 18px 12px;}
.alert-list{padding:0 18px 16px;}
.hdr-count{font-size:11.5px;font-weight:800;letter-spacing:.2px;padding:3px 10px;border-radius:20px;}
.hdr-count.crit{background:var(--red);color:#fff;box-shadow:0 3px 10px rgba(192,73,47,.3);}
.hdr-count.warn{background:var(--amber-l);color:var(--amber-d);}
.alert-empty{color:var(--muted);font-size:13px;padding:8px 2px;}

.alert-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;margin-bottom:9px;font-size:13px;border:1px solid transparent;}
.alert-row:last-child{margin-bottom:0;}
.alert-row .alert-ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;}
.alert-row .alert-ic svg{width:17px;height:17px;}
.alert-row strong{font-weight:700;}
.alert-row .meta{margin-left:auto;flex:none;font-size:11px;font-weight:800;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px;}

/* critique — rouge accentué */
.al-r{background:#FBE3DD;border-color:rgba(192,73,47,.32);color:#7C2A18;}
.al-r strong{color:var(--red);}
.al-r .alert-ic{background:var(--red);color:#fff;box-shadow:0 3px 9px rgba(192,73,47,.32);animation:pulseRed 1.9s ease-in-out infinite;}
.al-r .meta{background:var(--red);color:#fff;}
@keyframes pulseRed{0%,100%{box-shadow:0 0 0 0 rgba(192,73,47,.34);}55%{box-shadow:0 0 0 7px rgba(192,73,47,0);}}

/* à surveiller — ambre */
.al-a{background:var(--amber-l);border-color:rgba(184,134,11,.30);color:#6E5307;}
.al-a strong{color:var(--amber-d);}
.al-a .alert-ic{background:var(--amber-d);color:#fff;}
.al-a .meta{background:#efdca4;color:#6E5307;}

/* bar chart */
.chart{display:flex;align-items:flex-end;gap:14px;height:170px;padding:16px 8px 0;}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;}
.bar .b{width:60%;max-width:34px;background:linear-gradient(var(--green),#2bc47c);border-radius:7px 7px 0 0;transition:.4s;}
.bar .b.hl{background:linear-gradient(var(--amber-d),var(--amber));}
.bar .lbl{font-size:11px;color:var(--muted);font-weight:600;}

/* product grid */
.prodgrid{grid-template-columns:repeat(4,1fr);}
.prodcard{padding:18px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:.15s;}
.prodcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:var(--green-l);}
.prodcard .ref{font-size:11px;font-weight:700;color:var(--muted);}
.prodcard .nm{font-weight:700;font-size:14px;line-height:1.3;min-height:36px;}
.prodcard .px{font-size:19px;font-weight:800;color:var(--green-d);font-family:inherit;}
.prodcard .st{font-size:12px;color:var(--muted);}

/* commande editor */
.editor{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start;}
.panel{padding:20px;}
.panel h3{margin:0 0 14px;font-size:15px;}
.addline{display:grid;grid-template-columns:1fr 1fr 90px auto;gap:10px;align-items:end;margin-bottom:8px;}
.lbl{font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:5px;display:block;}
select.in,input.in{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:9px;font-size:13px;background:#fafdfb;transition:.15s;}
select.in:focus,input.in:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 3px var(--green-l);outline:none;}
.totbox{display:flex;justify-content:space-between;padding:8px 0;font-size:13.5px;}
.totbox.grand{border-top:2px solid var(--line);margin-top:6px;padding-top:12px;font-size:18px;font-weight:800;color:var(--green-d);font-family:inherit;}
.empty{padding:26px;text-align:center;color:var(--muted);font-size:13px;border:1px dashed var(--line);border-radius:10px;}

/* facture detail */
.fdoc{max-width:760px;}
.fdoc-head{display:flex;justify-content:space-between;align-items:flex-start;padding:24px;border-bottom:1px solid var(--line);}
.fdoc-head .co{font-weight:800;font-size:18px;color:var(--green-d);font-family:inherit;}
.fdoc-head .co small{display:block;font-weight:500;color:var(--muted);font-size:11.5px;font-family:inherit;}
.fdoc-meta{text-align:right;font-size:12.5px;}
.fdoc-meta .fn{font-weight:800;font-size:15px;}
.kv{display:flex;gap:8px;justify-content:flex-end;margin-top:3px;color:var(--muted);}
.kv b{color:var(--ink);font-weight:700;}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(8,40,24,.5);display:none;align-items:center;justify-content:center;z-index:60;padding:20px;backdrop-filter:blur(2px);}
.modal-bg.show{display:flex;}
.modal{background:#fff;border-radius:18px;width:100%;max-width:460px;box-shadow:var(--shadow-lg);overflow:hidden;animation:pop .18s ease;}
@keyframes pop{from{transform:translateY(12px) scale(.98);opacity:0;}to{transform:none;opacity:1;}}
.modal-h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.modal-h h3{margin:0;font-size:16px;}
.modal-h button{background:none;border:none;font-size:20px;color:var(--muted);line-height:1;}
.modal-b{padding:22px;}
.modal-f{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}

/* toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:13px 20px;border-radius:12px;font-size:13.5px;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.25);opacity:0;transition:.25s;z-index:90;display:flex;align-items:center;gap:9px;pointer-events:none;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.ok{background:var(--green);} #toast.bad{background:var(--red);} #toast.info{background:var(--green-dd);}

.page{display:none;}
.page.active{display:block;animation:fade .2s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.hidden{display:none!important;}

/* ---------- PWA : bandeau hors-ligne + bouton d'installation ---------- */
#offline-banner{display:none;background:var(--amber);color:#3a2c05;text-align:center;font-size:12.5px;font-weight:700;padding:7px 12px;}
#offline-banner.show{display:block;}
#install-btn{display:none;}

@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr);}.prodgrid{grid-template-columns:repeat(3,1fr);}.two-col{grid-template-columns:1fr;}.editor{grid-template-columns:1fr;}}
@media(max-width:820px){
  .layout{grid-template-columns:1fr;}
  .sidebar{position:fixed;left:0;top:62px;width:250px;z-index:var(--z-sidebar);transform:translateX(-100%);transition:transform .25s var(--ease);box-shadow:6px 0 30px rgba(0,0,0,.14);}
  .sidebar.open{transform:none;}
  .burger{display:grid!important;}
  .login-card{grid-template-columns:1fr;}.login-aside{display:none;}
  .prodgrid{grid-template-columns:repeat(2,1fr);}.addline{grid-template-columns:1fr 1fr;}
  .omni{max-width:none;}
  .omni .omni-txt,.omni .omni-kbd{display:none;}
  .um-id{display:none;}
  .usermenu-pop{position:fixed;right:12px;left:auto;top:66px;min-width:0;width:min(280px,calc(100vw - 24px));}
}
.burger{display:grid;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--surface);place-items:center;color:var(--green-d);flex:none;cursor:pointer;}
.burger:hover{background:var(--surface-2);}
/* Repli du menu latéral sur desktop (bouton hamburger) */
body.nav-collapsed .layout{grid-template-columns:1fr;}
body.nav-collapsed .sidebar{display:none;}

/* Photo employé (RH) */
.ef-photo{width:76px;height:76px;border-radius:14px;border:1px solid var(--line);background-color:var(--surface-2);background-size:cover;background-position:center;flex:none;display:grid;place-items:center;}
.ef-photo svg{width:32px;height:32px;color:var(--faint);}
.ef-photo.has svg{display:none;}
.emp-mini{display:inline-block;width:26px;height:26px;border-radius:50%;background:var(--surface-2) center/cover no-repeat;border:1px solid var(--line);vertical-align:middle;margin-right:9px;}

/* ---------- Motion (intentionnelle : état, pas décoration) ---------- */
@keyframes pagein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
#main{animation:pagein .24s var(--ease);}

/* entrée décalée des KPI (stagger d'une liste — légitime) */
.kpis .card{animation:pagein .4s var(--ease) backwards;}
.kpis .card:nth-child(1){animation-delay:.02s;}
.kpis .card:nth-child(2){animation-delay:.07s;}
.kpis .card:nth-child(3){animation-delay:.12s;}
.kpis .card:nth-child(4){animation-delay:.17s;}

/* boutons : retour d'appui discret */
.btn{transition:background .15s,box-shadow .15s,color .15s;}
.btn:active{transform:translateY(.5px);}

/* cartes cliquables : élévation au survol (affordance) */
.card.kpi,.prodcard{transition:box-shadow .18s var(--ease),border-color .18s;}
.card.kpi:hover{box-shadow:var(--shadow);}

/* respecte les préférences d'accessibilité (mouvement réduit) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* ---------- Attribut hidden (palette, menu) ---------- */
[hidden]{display:none!important;}

/* ---------- Palette de commandes (recherche) ---------- */
.palette-bg{position:fixed;inset:0;z-index:var(--z-palette);display:flex;align-items:flex-start;justify-content:center;
  padding:12vh 16px 16px;background:rgba(12,32,22,.42);backdrop-filter:blur(3px);animation:fade .14s ease;}
.palette{width:min(600px,94vw);background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-lg);overflow:hidden;animation:pop .16s var(--ease);}
.palette-in{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line);color:var(--muted);}
.palette-in input{flex:1;border:none;outline:none;background:transparent;font-size:15px;font-family:inherit;color:var(--ink);}
.palette-in input::placeholder{color:var(--faint);}
.palette-results{max-height:min(56vh,440px);overflow-y:auto;padding:8px;}
.pal-group{font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--faint);padding:10px 12px 5px;}
.pal-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;cursor:pointer;color:var(--ink-2);}
.pal-item .pal-ic{width:30px;height:30px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);flex:none;}
.pal-item .pal-ic svg{width:16px;height:16px;}
.pal-item .pal-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.pal-item .pal-t{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pal-item .pal-sub{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pal-item.sel .pal-sub,.pal-item:hover .pal-sub{color:var(--green-d);}
.pal-item .pal-meta{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;flex:none;}
.pal-item.sel,.pal-item:hover{background:var(--green-l);color:var(--green-d);}
.pal-item.sel .pal-ic,.pal-item:hover .pal-ic{border-color:var(--green-l);color:var(--green-d);}
.pal-empty{padding:28px 16px;text-align:center;color:var(--muted);font-size:13px;}

/* ---------- Squelettes de chargement ---------- */
@keyframes shimmer{100%{background-position:-160% 0;}}
.skel{background:linear-gradient(90deg,var(--line-2) 25%,#e6ece9 40%,var(--line-2) 55%);
  background-size:280% 100%;animation:shimmer 1.15s linear infinite;border-radius:7px;}
.skel-row{height:44px;margin:0 0 8px;border-radius:9px;}
.skel-card{height:104px;border-radius:var(--radius);}
@media (prefers-reduced-motion: reduce){ .skel{animation:none;} }