/* Restock Monitor — CSS de la maquette (stock-monitor-backoffice.jsx), adapté
   au rendu serveur + htmx. Polices système (pas de Google Fonts : zéro CDN). */

:root{
  --bg:#0C0F14; --panel:#141922; --panel2:#191F29; --line:#232B36; --line2:#2C3340;
  --ink:#EAEEF4; --muted:#808A99; --faint:#565F6D;
  --accent:#7C6FF0; --accent-dim:rgba(124,111,240,.14);
  --ok:#35C46B; --down:#FF5C57; --wait:#E3B341;
  --ok-dim:rgba(53,196,107,.13); --down-dim:rgba(255,92,87,.13); --wait-dim:rgba(227,179,65,.13);
  --mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI','Inter',sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;letter-spacing:-0.01em;}
button{font-family:inherit;cursor:pointer;}
a{color:var(--accent);}
svg{flex:none;}

.sm-root{min-height:100vh;display:grid;grid-template-columns:224px 1fr;}

/* ── sidebar ─────────────────────────────────────────────────────────── */
.sm-side{background:#0A0D12;border-right:1px solid var(--line);display:flex;
  flex-direction:column;padding:18px 14px;gap:22px;position:sticky;top:0;height:100vh;}
.sm-brand{display:flex;align-items:center;gap:11px;padding:2px 6px;}
.sm-logo{position:relative;width:33px;height:33px;border-radius:10px;flex:none;color:#fff;
  background:linear-gradient(145deg,#9184F5,#5A4BD4 52%,#453BB8);display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(124,111,240,.5),0 8px 22px -8px rgba(124,111,240,.75),
    inset 0 1px 0 rgba(255,255,255,.35),inset 0 -6px 12px -6px rgba(0,0,0,.4);}
.sm-logo svg{position:relative;z-index:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));}
.sm-logo::after{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.4),transparent 58%);}
.sm-logo .ping{position:absolute;inset:-3px;border-radius:13px;border:1px solid var(--accent);
  opacity:0;animation:brandping 3.4s ease-out infinite;}
@keyframes brandping{0%{opacity:.55;transform:scale(.82);}70%{opacity:0;transform:scale(1.18);}100%{opacity:0;}}
.sm-brandtext b{font-size:15px;font-weight:700;letter-spacing:-0.03em;display:block;line-height:1;
  background:linear-gradient(92deg,#fff,#cbc4f7);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;}
.sm-brandtext small{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:8.5px;
  color:var(--faint);letter-spacing:.26em;text-transform:uppercase;margin-top:5px;}
.sm-brandtext small::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 6px var(--ok);animation:pulse 2.4s infinite;}
.sm-nav{display:flex;flex-direction:column;gap:3px;}
.sm-navlabel{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase;padding:0 8px 6px;}
.sm-nav a{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;
  background:transparent;color:var(--muted);font-size:13px;font-weight:500;text-align:left;transition:.14s;text-decoration:none;}
.sm-nav a:hover{background:var(--panel);color:var(--ink);}
.sm-nav a.on{background:var(--accent-dim);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(124,111,240,.28);}
.sm-nav a.on svg{color:var(--accent);}
.sm-side-foot{margin-top:auto;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--panel);}
.sm-live{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--ink);}
.sm-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:pulse 2.4s infinite;}
.sm-side-foot small{display:block;color:var(--faint);font-family:var(--mono);font-size:10px;margin-top:6px;letter-spacing:.02em;}
.sm-logout{margin-top:10px;width:100%;}

/* ── main / header ───────────────────────────────────────────────────── */
.sm-main{overflow-y:auto;min-height:100vh;}
.sm-top{position:sticky;top:0;z-index:5;background:rgba(12,15,20,.86);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:16px 26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.sm-top h1{font-size:17px;font-weight:700;letter-spacing:-0.03em;margin:0;}
.sm-top .sub{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px;}
.sm-title{display:flex;align-items:center;gap:13px;min-width:0;}
.sm-titletext{min-width:0;}
.sm-titletext h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sm-hicon{width:37px;height:37px;border-radius:11px;flex:none;display:grid;place-items:center;
  color:var(--accent);background:linear-gradient(150deg,var(--accent-dim),rgba(124,111,240,.05));
  border:1px solid rgba(124,111,240,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 14px -8px var(--accent);}
.sm-hicon svg{width:18px;height:18px;}
.sm-hicon.in{color:var(--ok);background:linear-gradient(150deg,var(--ok-dim),transparent);border-color:rgba(53,196,107,.28);}
.sm-hicon.out{color:var(--down);background:linear-gradient(150deg,var(--down-dim),transparent);border-color:rgba(255,92,87,.28);}
.sm-hicon.unknown,.sm-hicon.checking{color:var(--wait);background:linear-gradient(150deg,var(--wait-dim),transparent);border-color:rgba(227,179,65,.28);}
.sm-search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:7px 11px;min-width:190px;}
.sm-search input{background:0;border:0;outline:0;color:var(--ink);font-size:12.5px;font-family:var(--sans);width:100%;}
.sm-search input::placeholder{color:var(--faint);}
.sm-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:8px;font-size:12.5px;font-weight:600;
  border:1px solid var(--line2);background:var(--panel2);color:var(--ink);transition:.14s;white-space:nowrap;text-decoration:none;}
.sm-btn:hover{border-color:var(--faint);background:#1E2530;}
.sm-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 16px -8px var(--accent);}
.sm-btn.primary:hover{background:#8B7FF3;border-color:#8B7FF3;}
.sm-btn.ghost{background:transparent;border-color:transparent;color:var(--muted);padding:7px 9px;}
.sm-btn.ghost:hover{background:var(--panel);color:var(--ink);}
.sm-btn.danger:hover{border-color:var(--down);color:var(--down);}
.sm-btn:disabled{opacity:.5;cursor:default;}
.sm-body{padding:22px 26px 60px;}

/* ── stats ───────────────────────────────────────────────────────────── */
.sm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.sm-stat{border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:13px 15px;}
.sm-stat .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);}
.sm-stat .v{font-family:var(--mono);font-size:24px;font-weight:600;margin-top:7px;line-height:1;}
.sm-stat .v.ok{color:var(--ok);} .sm-stat .v.down{color:var(--down);} .sm-stat .v.wait{color:var(--wait);}
.sm-stat .v small{font-size:12px;color:var(--faint);font-weight:400;}

/* ── table produits ──────────────────────────────────────────────────── */
.sm-tablewrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);}
.sm-thead{display:grid;grid-template-columns:16px 1.9fr 130px 90px 108px 74px 156px;gap:14px;padding:11px 16px;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);}
.sm-row{display:grid;grid-template-columns:16px 1.9fr 130px 90px 108px 74px 156px;gap:14px;padding:13px 16px;align-items:center;
  border-bottom:1px solid var(--line);transition:.12s;position:relative;cursor:pointer;}
.sm-row:last-child{border-bottom:0;}
.sm-row:hover{background:var(--panel2);}
.sm-row.dim{opacity:.55;}
/* toute la ligne est cliquable via un lien étiré ; les boutons passent au-dessus */
.sm-rowlink::after{content:"";position:absolute;inset:0;z-index:1;}
.sm-led{width:9px;height:9px;border-radius:50%;position:relative;flex:none;}
.sm-led.in{background:var(--ok);box-shadow:0 0 8px var(--ok);}
.sm-led.out{background:var(--down);box-shadow:0 0 7px rgba(255,92,87,.6);}
.sm-led.unknown{background:var(--wait);box-shadow:0 0 7px rgba(227,179,65,.5);}
.sm-led.checking{background:var(--wait);animation:blink .8s infinite;}
.sm-prod{min-width:0;}
.sm-prod .nm{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sm-prod .nm a{color:var(--ink);text-decoration:none;}
.sm-prod .nm a:hover{color:var(--accent);}
.sm-prod .meta{display:flex;align-items:center;gap:8px;margin-top:4px;font-family:var(--mono);font-size:10.5px;color:var(--muted);flex-wrap:wrap;}
.sm-tag{font-family:var(--mono);font-size:9px;letter-spacing:.06em;padding:2px 6px;border-radius:5px;text-transform:uppercase;font-weight:600;}
.sm-tag.site{background:var(--accent-dim);color:#B3A9FF;}
.sm-tag.gen{background:#20262F;color:var(--faint);}
.sm-tag.cart{background:var(--ok-dim);color:var(--ok);}
.sm-heart{display:flex;align-items:flex-end;gap:2px;height:22px;}
.sm-heart span{width:4px;border-radius:1px;opacity:.9;}
.sm-heart .in{background:var(--ok);height:100%;}
.sm-heart .out{background:var(--down);height:42%;}
.sm-heart .unknown{background:var(--wait);height:68%;}
.sm-heart .empty{background:var(--line2);height:20%;}
.sm-price{font-family:var(--mono);font-size:13px;font-weight:500;}
.sm-price.na{color:var(--faint);}
.sm-when{font-family:var(--mono);font-size:11px;color:var(--muted);}
.sm-int{font-family:var(--mono);font-size:11px;color:var(--muted);}
.sm-rowact{display:flex;align-items:center;gap:6px;justify-content:flex-end;position:relative;z-index:2;}
.sm-icobtn{width:30px;height:30px;border-radius:7px;border:1px solid var(--line2);background:var(--panel2);
  display:grid;place-items:center;color:var(--muted);transition:.14s;text-decoration:none;flex:none;}
.sm-icobtn:hover{color:var(--ink);border-color:var(--faint);background:#212833;}
.sm-icobtn.danger:hover{color:var(--down);border-color:rgba(255,92,87,.5);background:var(--down-dim);}
.sm-icobtn.spin svg{animation:spin .8s linear infinite;color:var(--wait);}
.sm-toggle{width:34px;height:20px;border-radius:20px;border:1px solid var(--line2);background:#1C222C;position:relative;transition:.16s;flex:none;z-index:2;}
.sm-toggle.on{background:var(--accent-dim);border-color:rgba(124,111,240,.5);}
.sm-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--faint);transition:.16s;}
.sm-toggle.on i{left:16px;background:var(--accent);}

/* ── fiche produit ───────────────────────────────────────────────────── */
.sm-back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px;font-weight:500;background:0;border:0;margin-bottom:16px;text-decoration:none;}
.sm-back:hover{color:var(--ink);}
.sm-detail{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;}
.sm-col{display:flex;flex-direction:column;gap:16px;}
.sm-card{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:18px;}
.sm-card h3{margin:0 0 14px;font-size:11px;font-family:var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:600;display:flex;align-items:center;gap:6px;}
.sm-statusbig{display:flex;align-items:center;gap:14px;padding:16px;border-radius:10px;margin-bottom:16px;}
.sm-statusbig.in{background:var(--ok-dim);box-shadow:inset 0 0 0 1px rgba(53,196,107,.3);}
.sm-statusbig.out{background:var(--down-dim);box-shadow:inset 0 0 0 1px rgba(255,92,87,.3);}
.sm-statusbig.unknown,.sm-statusbig.checking{background:var(--wait-dim);box-shadow:inset 0 0 0 1px rgba(227,179,65,.3);}
.sm-statusbig .lbl{font-size:20px;font-weight:700;letter-spacing:-0.02em;}
.sm-statusbig .lbl.in{color:var(--ok);} .sm-statusbig .lbl.out{color:var(--down);}
.sm-statusbig .lbl.unknown,.sm-statusbig .lbl.checking{color:var(--wait);}
.sm-statusbig > div:nth-of-type(2){flex:1;min-width:0;}
.sm-statusbig .subl{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;}
.sm-statusbig .pr{margin-left:auto;text-align:right;font-family:var(--mono);font-size:22px;font-weight:600;
  flex:none;white-space:nowrap;}
.sm-kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;}
.sm-kv:last-child{border-bottom:0;}
.sm-kv .k{color:var(--muted);flex:none;}
.sm-kv .v{font-family:var(--mono);color:var(--ink);display:flex;align-items:center;gap:6px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sm-kv .v form{display:flex;align-items:center;gap:6px;}
.sm-kv a{color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:5px;}
.sm-kv a:hover{text-decoration:underline;}
.sm-int-input{width:58px;background:#0E1218;border:1px solid var(--line2);border-radius:6px;
  padding:4px 7px;color:var(--ink);font-family:var(--mono);font-size:11.5px;outline:0;}
.sm-int-input:focus{border-color:var(--accent);}

/* timeline tailles */
.sm-sizes{display:flex;flex-direction:column;gap:8px;}
.sm-sizerow{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;}
.sm-sizerow .lb{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-align:right;}
.sm-strip{display:flex;gap:2px;height:14px;}
.sm-strip i{flex:1;border-radius:2px;background:var(--line2);}
.sm-strip i.on{background:var(--ok);} .sm-strip i.off{background:rgba(255,92,87,.55);}
.sm-sizechips{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;}
.sm-chip{font-family:var(--mono);font-size:11px;font-weight:600;padding:4px 9px;border-radius:6px;border:1px solid var(--line2);color:var(--faint);}
.sm-chip.on{background:var(--ok-dim);border-color:rgba(53,196,107,.4);color:var(--ok);}

/* timeline checks / activité */
.sm-tl{display:flex;flex-direction:column;}
.sm-tlrow{display:grid;grid-template-columns:64px 18px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);}
.sm-tlrow:last-child{border-bottom:0;}
.sm-tlrow .t{font-family:var(--mono);font-size:11px;color:var(--faint);}
.sm-tlrow .nm{font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sm-badge{font-family:var(--mono);font-size:10px;font-weight:600;padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.05em;}
.sm-badge.in{background:var(--ok-dim);color:var(--ok);} .sm-badge.out{background:var(--down-dim);color:var(--down);}
.sm-badge.unknown{background:var(--wait-dim);color:var(--wait);}
.sm-tlrow .m{font-family:var(--mono);font-size:10.5px;color:var(--muted);}
.sm-tlrow .sm-badge{justify-self:start;}
.sm-shot{border:1px dashed var(--line2);border-radius:10px;display:grid;place-items:center;color:var(--faint);
  font-family:var(--mono);font-size:11px;gap:8px;text-align:center;min-height:120px;
  background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(255,255,255,.012) 8px,rgba(255,255,255,.012) 16px);padding:14px;}
.sm-shot img{max-width:100%;border-radius:8px;border:1px solid var(--line2);}
.sm-notif{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px;}
.sm-notif:last-child{border-bottom:0;}
.sm-notif .sub{font-family:var(--mono);font-size:10.5px;color:var(--faint);}
.sm-chan{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700;flex:none;}
.sm-chan.restock{background:var(--ok-dim);color:var(--ok);}
.sm-chan.info{background:var(--accent-dim);color:#8b95f5;}
.sm-chan.erreur{background:var(--down-dim);color:var(--down);}

/* ── graphiques SVG ──────────────────────────────────────────────────── */
.sm-chart{width:100%;}
.sm-chart .bar{fill:var(--accent);opacity:.85;}
.sm-chart .bar.warn{fill:var(--down);}
.sm-chart .lb{fill:var(--faint);font-family:var(--mono);font-size:9px;}
.sm-chart .vl{fill:var(--muted);font-family:var(--mono);font-size:9px;}
.sm-gauge{height:10px;border-radius:6px;background:#0E1218;border:1px solid var(--line2);overflow:hidden;margin-top:8px;}
.sm-gauge i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),var(--wait) 75%,var(--down));}

/* ── réglages ────────────────────────────────────────────────────────── */
.sm-set{max-width:760px;display:flex;flex-direction:column;gap:16px;}
.sm-field{margin-bottom:14px;}
.sm-field:last-child{margin-bottom:0;}
.sm-field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;}
.sm-field .hint{font-size:11.5px;color:var(--muted);margin-bottom:8px;}
.sm-input{width:100%;background:#0E1218;border:1px solid var(--line2);border-radius:8px;padding:9px 11px;color:var(--ink);
  font-family:var(--mono);font-size:12px;outline:0;transition:.14s;}
.sm-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
.sm-inline{display:flex;gap:8px;align-items:center;}
.sm-proxy{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);margin-bottom:8px;}
.sm-proxy .u{font-family:var(--mono);font-size:12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.sm-proxy .g{font-family:var(--mono);font-size:10px;color:var(--muted);padding:2px 7px;background:#0E1218;border-radius:5px;white-space:nowrap;}
.ok-txt{color:var(--ok);font-family:var(--mono);font-size:11.5px;}
.down-txt{color:var(--down);font-family:var(--mono);font-size:11.5px;}
.hint-detect{color:var(--muted);font-size:11.5px;font-family:var(--mono);}

/* ── modale ──────────────────────────────────────────────────────────── */
.sm-overlay{position:fixed;inset:0;background:rgba(6,8,11,.66);backdrop-filter:blur(3px);display:none;place-items:center;z-index:40;padding:20px;}
.sm-overlay.open{display:grid;animation:fade .16s;}
.sm-modal{width:100%;max-width:460px;background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:22px;box-shadow:0 24px 60px -20px #000;animation:pop .18s;}
.sm-modal h2{margin:0 0 4px;font-size:16px;font-weight:700;letter-spacing:-0.02em;}
.sm-modal p.d{margin:0 0 18px;font-size:12.5px;color:var(--muted);}
.sm-modal-foot{display:flex;gap:9px;justify-content:flex-end;margin-top:20px;}
.sm-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sm-check{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-top:4px;}
.sm-check input{accent-color:var(--accent);width:15px;height:15px;}

/* ── toasts ──────────────────────────────────────────────────────────── */
.sm-toaster{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:10px;z-index:50;max-width:340px;}
.sm-toast{display:flex;gap:11px;padding:13px 14px;border-radius:11px;background:var(--panel2);border:1px solid var(--line2);
  box-shadow:0 16px 40px -16px #000;animation:slide .22s cubic-bezier(.2,.8,.2,1);}
.sm-toast .ic{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;background:var(--ok-dim);color:var(--ok);}
.sm-toast.info .ic{background:var(--accent-dim);color:var(--accent);}
.sm-toast .tt{font-size:12.5px;font-weight:600;}
.sm-toast .ts{font-size:11.5px;color:var(--muted);margin-top:3px;font-family:var(--mono);}

.sm-empty{padding:60px 20px;text-align:center;color:var(--muted);}
.sm-empty svg{color:var(--faint);margin-bottom:12px;display:block;margin-left:auto;margin-right:auto;}

/* ── login (console radar) ───────────────────────────────────────────── */
.lg-body{overflow:hidden;}
.lg-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;isolation:isolate;
  background:
    radial-gradient(1100px 640px at 72% -12%,rgba(124,111,240,.18),transparent 60%),
    radial-gradient(760px 520px at 10% 114%,rgba(53,196,107,.07),transparent 55%),
    var(--bg);}
/* trame fine, estompée vers les bords */
.lg-wrap::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.6;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 70%);
          mask-image:radial-gradient(circle at 50% 40%,#000,transparent 70%);}

/* anneaux + balayage radar derrière la carte */
.lg-radar{position:absolute;top:50%;left:50%;width:640px;height:640px;transform:translate(-50%,-50%);
  z-index:-1;pointer-events:none;opacity:.6;}
.lg-radar .ring{position:absolute;inset:0;margin:auto;border-radius:50%;border:1px solid rgba(124,111,240,.15);}
.lg-radar .ring.r2{width:68%;height:68%;}
.lg-radar .ring.r3{width:40%;height:40%;border-color:rgba(124,111,240,.24);}
.lg-radar .sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(124,111,240,.22) 46deg,transparent 74deg);
  -webkit-mask:radial-gradient(circle,#000 44%,transparent 71%);mask:radial-gradient(circle,#000 44%,transparent 71%);
  animation:radar 7s linear infinite;}
.lg-radar .blip{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);}
.lg-radar .blip.b1{top:32%;left:61%;animation:blip 7s ease-out infinite;}
.lg-radar .blip.b2{top:60%;left:41%;animation:blip 7s ease-out infinite 2.6s;}
.lg-radar .blip.b3{top:47%;left:70%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:blip 7s ease-out infinite 4.5s;}

.lg-card{position:relative;width:100%;max-width:374px;
  background:linear-gradient(180deg,rgba(25,31,41,.90),rgba(19,24,33,.94));
  border:1px solid var(--line2);border-radius:18px;padding:30px 30px 22px;
  box-shadow:0 44px 110px -44px #000,inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(10px);animation:lgcard .6s cubic-bezier(.2,.8,.2,1) both;}
.lg-card::before{content:"";position:absolute;top:-1px;left:26px;right:26px;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.7;}

.lg-brand{display:flex;align-items:center;gap:11px;margin-bottom:24px;animation:lgin .5s ease both .08s;}
.lg-logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(150deg,var(--accent),#4A3FC0);
  display:grid;place-items:center;color:#fff;
  box-shadow:0 0 0 1px rgba(124,111,240,.4),0 8px 22px -8px rgba(124,111,240,.7);}
.lg-brand b{font-size:15px;font-weight:700;letter-spacing:-.02em;display:block;line-height:1;}
.lg-brand small{display:block;font-family:var(--mono);font-size:9px;color:var(--faint);
  letter-spacing:.24em;text-transform:uppercase;margin-top:3px;}
.lg-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding:4px 9px;border:1px solid var(--line);border-radius:20px;background:rgba(53,196,107,.05);}
.lg-live .d{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:pulse 2.4s infinite;}

.lg-title{font-size:21px;font-weight:700;letter-spacing:-.03em;margin:0 0 24px;animation:lgin .5s ease both .14s;}
.lg-sub{font-family:var(--mono);font-size:11px;color:var(--muted);margin:5px 0 24px;letter-spacing:.02em;
  animation:lgin .5s ease both .18s;}

.lg-field{animation:lgin .5s ease both .24s;}
.lg-field label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px;}
.lg-inp{display:flex;align-items:center;gap:9px;background:#0B0F15;border:1px solid var(--line2);
  border-radius:10px;padding:0 12px;transition:.16s;}
.lg-inp svg{color:var(--faint);transition:.16s;}
.lg-inp input{flex:1;min-width:0;background:0;border:0;outline:0;color:var(--ink);font-family:var(--mono);
  font-size:13px;letter-spacing:.08em;padding:12px 0;}
.lg-inp input::placeholder{color:var(--faint);letter-spacing:.14em;}
.lg-inp:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-dim);background:#0E131A;}
.lg-inp:focus-within svg{color:var(--accent);}

.lg-btn{width:100%;margin-top:18px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px;border-radius:10px;border:1px solid var(--accent);color:#fff;font-size:13px;font-weight:600;
  background:linear-gradient(180deg,#8B7FF3,var(--accent));box-shadow:0 12px 26px -12px var(--accent);
  transition:.16s;animation:lgin .5s ease both .3s;}
.lg-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 16px 34px -12px var(--accent);background:linear-gradient(180deg,#968BF5,#8B7FF3);}
.lg-btn:active:not(:disabled){transform:translateY(0);}
.lg-btn:disabled{opacity:.45;cursor:default;}
.lg-btn .arw{font-family:var(--mono);transition:.18s;}
.lg-btn:hover:not(:disabled) .arw{transform:translateX(4px);}

.lg-err{background:var(--down-dim);border:1px solid rgba(255,92,87,.3);color:var(--down);
  font-size:11.5px;border-radius:9px;padding:10px 12px;margin-bottom:16px;font-family:var(--mono);
  line-height:1.55;display:flex;gap:9px;animation:lgin .4s ease both;}
.lg-err svg{flex:none;margin-top:1px;}
.lg-err code{background:rgba(255,92,87,.14);padding:1px 5px;border-radius:4px;}

.lg-foot{margin-top:22px;padding-top:15px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.09em;color:var(--faint);text-transform:uppercase;
  animation:lgin .5s ease both .36s;}
.lg-foot .sec{display:inline-flex;align-items:center;gap:5px;}
.lg-foot .sec svg{color:var(--ok);opacity:.8;}

@keyframes radar{to{transform:rotate(360deg);}}
@keyframes blip{0%,100%{opacity:0;transform:scale(.5);}6%{opacity:1;transform:scale(1);}38%{opacity:0;}}
@keyframes lgcard{from{opacity:0;transform:translateY(16px) scale(.985);}to{opacity:1;transform:none;}}
@keyframes lgin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* htmx : indicateur de chargement */
.htmx-indicator{display:none;}
.htmx-request .htmx-indicator{display:inline-block;animation:spin .8s linear infinite;}
.htmx-request.sm-btn svg:first-child{display:none;}

@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(53,196,107,.5);}70%{box-shadow:0 0 0 7px rgba(53,196,107,0);}100%{box-shadow:0 0 0 0 rgba(53,196,107,0);}}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes slide{from{transform:translateX(20px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
@keyframes pop{from{transform:scale(.96);opacity:0;}to{transform:none;opacity:1;}}

/* ── Activité : tableau de bord télémétrie ───────────────────────────── */
.ac-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
.ac-kpi{position:relative;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(158deg,var(--panel),#10141c);padding:14px 16px;overflow:hidden;
  transition:border-color .15s;}
.ac-kpi:hover{border-color:var(--line2);}
.ac-kpi::after{content:"";position:absolute;left:0;top:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.45;}
.ac-kpi .k{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint);}
.ac-kpi .k svg{color:var(--muted);}
.ac-kpi .v{font-family:var(--mono);font-size:27px;font-weight:600;line-height:1;margin-top:12px;}
.ac-kpi .v small{font-size:12px;color:var(--faint);font-weight:400;margin-left:2px;}
.ac-kpi .v.ok{color:var(--ok);} .ac-kpi .v.down{color:var(--down);} .ac-kpi .v.wait{color:var(--wait);}
.ac-kpi .s{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.ac-row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;align-items:stretch;}
.ac-row2 > .sm-card{display:flex;flex-direction:column;}
.ac-feed{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start;}

/* mini-graphes : axe + grille + barres (le graphe remplit la carte) */
.ac-chart{width:100%;display:block;flex:1 1 auto;min-height:120px;}
.ac-chart .axis{stroke:var(--line2);stroke-width:1;}
.ac-chart .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4;}
.ac-chart .bar{fill:var(--accent);opacity:.9;}
.ac-chart .bar.warn{fill:var(--down);opacity:.9;}
.ac-chart .bar.zero{fill:var(--line2);opacity:.5;}
.ac-chart .vl{fill:var(--muted);font-family:var(--mono);font-size:8.5px;}
.ac-chart .lb{fill:var(--faint);font-family:var(--mono);font-size:8px;}
.ac-budget{margin-top:13px;}
.ac-budget span{display:block;font-family:var(--mono);font-size:10px;color:var(--faint);
  margin-top:8px;letter-spacing:.02em;}
.ac-blank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  height:104px;color:var(--faint);font-family:var(--mono);font-size:11px;}
.ac-blank svg{color:var(--line2);}

/* journal : bord coloré par statut, colonnes claires, survol */
.ac-log .sm-tlrow{grid-template-columns:52px 14px minmax(0,1fr) auto auto auto;gap:11px;align-items:center;
  padding:10px 6px 10px 12px;border-bottom:1px solid var(--line);border-left:2px solid transparent;
  border-radius:0 7px 7px 0;transition:background .12s;}
.ac-log .sm-tlrow:last-child{border-bottom:0;}
.ac-log .sm-tlrow:hover{background:var(--panel2);}
.ac-log .sm-tlrow.in{border-left-color:rgba(53,196,107,.55);}
.ac-log .sm-tlrow.out{border-left-color:rgba(255,92,87,.55);}
.ac-log .sm-tlrow.unknown{border-left-color:rgba(227,179,65,.55);}
.ac-log .t{font-family:var(--mono);font-size:11px;color:var(--faint);}
.ac-log .nm{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ac-log .nm a{font-size:12.5px;color:var(--ink);text-decoration:none;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.ac-log .nm a:hover{color:var(--accent);}
.ac-log .er{font-family:var(--mono);font-size:10px;color:var(--down);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.ac-log .mc{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);background:var(--panel2);border:1px solid var(--line);padding:2px 6px;
  border-radius:5px;flex:none;white-space:nowrap;}
.ac-log .dur{font-family:var(--mono);font-size:10.5px;color:var(--faint);white-space:nowrap;}
.ac-log .sm-badge{justify-self:end;}

/* fiche produit : carte d'édition (hors zone auto-rafraîchie) */
.pd-edit{margin-top:16px;max-width:820px;}
.pd-edit .pd-editgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px 18px;}
.pd-edit .sm-field{margin-bottom:0;}
.pd-edit select.sm-input{cursor:pointer;}
.pd-opt{color:var(--faint);font-weight:400;}
.pd-edit .sm-check.pd-checkbox{margin-top:10px;background:#0E1218;border:1px solid var(--line2);
  border-radius:8px;padding:9px 11px;}
.pd-editfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:18px;padding-top:15px;border-top:1px solid var(--line);}
.pd-dirtyhint{font-family:var(--mono);font-size:11px;color:var(--faint);transition:color .15s;}
.pd-edit.dirty .pd-dirtyhint{color:var(--wait);}
.pd-edit.dirty [data-save]{box-shadow:0 0 0 3px var(--accent-dim),0 8px 20px -8px var(--accent);}

/* ── Logs : console technique (namespace jl- ; lg- = page login) ──────── */
.jl-card{padding:0;overflow:hidden;}
.jl-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel2);}
.jl-tabs{display:flex;gap:6px;}
.jl-tab{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-decoration:none;
  padding:6px 11px;border-radius:7px;border:1px solid transparent;transition:.14s;}
.jl-tab:hover{color:var(--ink);background:var(--panel);}
.jl-tab.on{color:var(--ink);background:var(--accent-dim);border-color:rgba(124,111,240,.3);}
.jl-tab.err.on{background:var(--down-dim);border-color:rgba(255,92,87,.35);color:#ff9a96;}
.jl-tab svg{opacity:.75;}
.jl-count{font-family:var(--mono);font-size:10.5px;color:var(--faint);white-space:nowrap;}
.jl-console{max-height:70vh;overflow-y:auto;}
.jl-row{padding:9px 14px;border-bottom:1px solid var(--line);border-left:2px solid transparent;transition:background .12s;}
.jl-row:last-child{border-bottom:0;}
.jl-row:hover{background:var(--panel2);}
.jl-row.in{border-left-color:rgba(53,196,107,.5);}
.jl-row.out{border-left-color:rgba(255,92,87,.5);}
.jl-row.unknown{border-left-color:rgba(227,179,65,.5);}
.jl-row.err{border-left-color:var(--down);background:rgba(255,92,87,.045);}
.jl-main{display:grid;grid-template-columns:128px 8px minmax(0,1fr) auto auto 76px 70px 96px;
  gap:13px;align-items:center;}
.jl-main .ts{font-family:var(--mono);font-size:11px;color:var(--faint);white-space:nowrap;}
.jl-main .nm{font-size:12.5px;color:var(--ink);text-decoration:none;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.jl-main .nm:hover{color:var(--accent);}
.jl-main .mc{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);background:var(--panel2);border:1px solid var(--line);padding:2px 6px;border-radius:5px;white-space:nowrap;}
.jl-main .mth{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.06em;color:var(--faint);
  border:1px solid var(--line2);border-radius:4px;padding:2px 5px;white-space:nowrap;}
.jl-main .mth.cart{color:var(--accent);border-color:rgba(124,111,240,.4);}
.jl-main .num{font-family:var(--mono);font-size:10.5px;color:var(--muted);text-align:right;white-space:nowrap;}
.jl-main .sm-badge{justify-self:end;}
.sm-led.err{background:var(--down);box-shadow:0 0 7px rgba(255,92,87,.65);}
.sm-badge.err{background:rgba(255,92,87,.18);color:#ff8681;}
.jl-err{font-family:var(--mono);font-size:11px;color:#ff8681;margin-top:5px;line-height:1.45;
  padding-left:149px;position:relative;white-space:normal;word-break:break-word;}
.jl-err::before{content:"↳";position:absolute;left:138px;color:var(--faint);}

/* ── Réglages : grille 2 colonnes + carte data ───────────────────────── */
.st-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.st-datahead{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;margin-bottom:3px;}
.st-datahead .lbl{color:var(--muted);}
.st-datahead .val{font-family:var(--mono);color:var(--ink);}
.st-chart{margin-top:12px;min-height:100px;}

/* ── polish (états, pas d'animations sur le contenu rafraîchi en htmx) ─── */
.sm-stat{transition:border-color .15s;}
.sm-stat:hover{border-color:var(--line2);}
.sm-tablewrap{transition:border-color .15s;}

/* ── responsive : ordinateur · tablette · mobile ─────────────────────── */

/* Tablette (≤1024) : rail d'icônes, 2 colonnes, tableau allégé */
@media (max-width:1024px){
  .sm-root{grid-template-columns:64px 1fr;}
  .sm-side{padding:16px 8px;gap:16px;align-items:center;}
  .sm-brand{justify-content:center;padding:2px;}
  .sm-brand > div:last-child,.sm-navlabel,.sm-nav a span{display:none;}
  .sm-nav{width:100%;}
  .sm-nav a{justify-content:center;padding:11px;}
  .sm-side-foot{padding:0;border:0;background:transparent;}
  .sm-live,.sm-side-foot small{display:none;}
  .sm-logout .sm-btn span{display:none;}
  .sm-logout .sm-btn{padding:9px;}
  .sm-stats{grid-template-columns:repeat(2,1fr);}
  .sm-detail{grid-template-columns:1fr;}
  .ac-kpis{grid-template-columns:repeat(2,1fr);}
  .ac-feed{grid-template-columns:1fr;}
  .st-cols{grid-template-columns:1fr;}
  .sm-thead,.sm-row{grid-template-columns:16px 1.7fr 104px 92px 152px;gap:12px;}
  .sm-thead .h-hb,.sm-thead .h-int,.sm-row .c-hb,.sm-row .c-int{display:none;}
  /* logs : on masque marchand + data */
  .jl-main{grid-template-columns:124px 8px minmax(0,1fr) auto 74px 96px;}
  .jl-main .mc,.jl-main .data{display:none;}
}

/* Mobile (≤640) : navigation en bas, produits en cartes, en-tête compact */
@media (max-width:640px){
  .sm-root{grid-template-columns:1fr;}
  .sm-side{flex-direction:row;align-items:center;position:fixed;left:0;right:0;bottom:0;top:auto;
    height:auto;width:100%;z-index:30;gap:4px;padding:7px 8px calc(7px + env(safe-area-inset-bottom));
    border-right:0;border-top:1px solid var(--line);background:rgba(10,13,18,.94);
    backdrop-filter:blur(14px);box-shadow:0 -12px 34px -20px #000;}
  .sm-brand{display:none;}
  .sm-nav{flex:1;flex-direction:row;justify-content:space-around;gap:2px;}
  .sm-nav a{flex-direction:column;gap:3px;font-size:9.5px;font-weight:600;padding:6px 4px;flex:1;
    justify-content:center;letter-spacing:.02em;}
  .sm-nav a span{display:block;}
  .sm-nav a svg{width:20px;height:20px;}
  .sm-side-foot{margin:0;padding:0 4px 0 6px;border:0;background:transparent;}
  .sm-logout{margin:0;}
  .sm-logout .sm-btn{flex-direction:column;gap:3px;padding:6px 9px;font-size:9.5px;font-weight:600;}
  .sm-logout .sm-btn span{display:block;}
  .sm-main{padding-bottom:70px;}

  /* en-tête : titre pleine largeur, puis recherche + actions */
  .sm-top{padding:14px 15px;gap:10px;}
  .sm-top h1{font-size:16px;}
  .sm-top > div:first-child{flex-basis:100%;}
  .sm-search{order:2;flex:1;min-width:0;margin-left:0;}
  .sm-top .sm-btn .lbl{display:none;}
  .sm-top .sm-btn{padding:9px 11px;}
  .sm-body{padding:16px 15px 40px;}

  /* stats compactes (2 colonnes) */
  .sm-stats{gap:9px;margin-bottom:16px;}
  .sm-stat{padding:11px 13px;}
  .sm-stat .v{font-size:21px;}

  /* produits : chaque ligne devient une carte */
  .sm-tablewrap{border:0;background:transparent;border-radius:0;overflow:visible;}
  .sm-thead{display:none;}
  .sm-row{grid-template-columns:auto 1fr auto;
    grid-template-areas:"led prod price" "led when act";
    gap:5px 12px;align-items:center;padding:13px 15px;margin-bottom:10px;
    border:1px solid var(--line);border-radius:13px;background:var(--panel);}
  .sm-row:hover{background:var(--panel);}
  .sm-row .sm-led{grid-area:led;align-self:center;}
  .sm-row .sm-prod{grid-area:prod;}
  .sm-row .sm-price{grid-area:price;text-align:right;align-self:center;}
  .sm-row .sm-when{grid-area:when;}
  .sm-row .sm-rowact{grid-area:act;}
  .sm-row .sm-heart,.sm-row .sm-int{display:none;}

  /* fiche produit / activité : une colonne */
  .sm-statusbig{padding:14px;}
  .sm-statusbig .pr{font-size:18px;}
  /* clés/valeurs : la valeur passe à la ligne au lieu d'être tronquée */
  .sm-kv{flex-wrap:wrap;}
  .sm-kv .v{white-space:normal;overflow:visible;text-overflow:clip;
    justify-content:flex-end;flex-wrap:wrap;text-align:right;}

  /* réglages : les lignes proxy passent le badge à la ligne au lieu de déborder */
  .sm-proxy{flex-wrap:wrap;}
  .sm-proxy .u{flex:1 1 100%;}
  .sm-proxy .g{white-space:normal;}
  .sm-card{padding:15px;}

  /* modale = feuille du bas */
  .sm-overlay{place-items:end;padding:0;}
  .sm-modal{max-width:none;width:100%;border-radius:16px 16px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom));}
  .sm-row2{grid-template-columns:1fr;}

  /* activité : graphes empilés, KPI compacts, journal resserré */
  .ac-row2{grid-template-columns:1fr;margin-bottom:12px;}
  .ac-kpis{gap:9px;margin-bottom:12px;}
  .ac-kpi{padding:12px 13px;}
  .ac-kpi .v{font-size:23px;}
  .ac-log .sm-tlrow{grid-template-columns:44px 12px minmax(0,1fr) auto;gap:9px;padding:10px 4px 10px 11px;}
  .ac-log .dur,.ac-log .mc{display:none;}

  /* logs : horodatage · statut · nom · verdict ; erreur peu indentée */
  .jl-main{grid-template-columns:auto 8px minmax(0,1fr) auto;gap:9px;}
  .jl-main .ts{font-size:10px;}
  .jl-main .mc,.jl-main .mth,.jl-main .dur,.jl-main .data{display:none;}
  .jl-err{padding-left:2px;}
  .jl-err::before{position:static;margin-right:5px;}
  .jl-bar{flex-wrap:wrap;}

  /* fiche produit : édition en 1 colonne, bouton pleine largeur */
  .pd-edit .pd-editgrid{grid-template-columns:1fr;}
  .pd-editfoot{flex-direction:column;align-items:stretch;gap:11px;}
  .pd-editfoot .sm-btn{justify-content:center;}
  .pd-dirtyhint{text-align:center;}

  /* toasts au-dessus de la nav du bas */
  .sm-toaster{left:12px;right:12px;bottom:80px;max-width:none;}
}

@media (prefers-reduced-motion:reduce){ *{animation:none !important;} }