/* ========================================================
   KALENGIA · DÉMONSTRATION PRODUIT (kx-demo.js)
   Règle : GSAP anime transform / opacity / visibility.
   Le CSS ne transitionne que les couleurs, bordures et ombres
   (survols, états), jamais les mêmes propriétés que GSAP.
   ======================================================== */

.persona-icon svg { width: 20px; height: 20px; fill: none; stroke: #00d4ff; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: block; }
.persona-btn.active .persona-icon svg { stroke: #fff; }

.kx {
  --bg: #080e1a;
  --ln: rgba(150, 192, 232, 0.11);
  --ln2: rgba(150, 192, 232, 0.2);
  --tx: #eef6ff;
  --tx2: #a7bbd0;
  --tx3: #6f86a0;
  --cy: #00d4ff;
  --vi: #8b5cf6;
  --gr: #34d399;
  --am: #fbbf24;
  --ro: #fb7185;
  position: relative;
  border: 1px solid rgba(0, 212, 255, 0.24);
  border-radius: 18px;
  background: var(--bg);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 80px rgba(0, 212, 255, 0.07);
  font-family: var(--body, "Funnel Sans", system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.45;
  color: var(--tx);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.kx *, .kx *::before, .kx *::after { box-sizing: border-box; }
.kx button { font-family: inherit; }
.kx p, .kx h3, .kx h4, .kx dl, .kx dd, .kx ol, .kx ul { margin: 0; }
.kx-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.kx-screen { position: relative; height: 600px; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.kx-fallback { margin: auto; color: var(--tx2); }

/* ---------- Barre supérieure ---------- */
.kx-topbar { height: 48px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 14px; border-bottom: 1px solid var(--ln); background: linear-gradient(#0d1a2e, #0a1424); }
.kx-dots { display: flex; gap: 6px; }
.kx-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.kx-dots i:nth-child(2) { background: #febc2e; }
.kx-dots i:nth-child(3) { background: #28c840; }
.kx-brand { display: flex; align-items: center; gap: 8px; font: 600 14px var(--display, inherit); white-space: nowrap; }
.kx-brand b { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: linear-gradient(135deg, var(--cy), var(--vi)); color: #071120; font-size: 13px; }
.kx-brand em { font-style: normal; color: var(--cy); }
.kx-search { flex: 1; max-width: 400px; margin: 0 auto; height: 30px; border-radius: 8px; border: 1px solid var(--ln); background: rgba(255, 255, 255, 0.025); display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--tx3); font-size: 12px; white-space: nowrap; overflow: hidden; }
.kx-search .kx-i { width: 14px; height: 14px; }
.kx-search kbd { margin-left: auto; font: 11px inherit; border: 1px solid var(--ln2); border-radius: 5px; padding: 0 5px; }
.kx-top-r { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.kx-live-pill { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--tx2); border: 1px solid var(--ln); padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.kx-live-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--am); box-shadow: 0 0 8px var(--am); }
.kx-bell { position: relative; width: 30px; height: 30px; display: grid; place-items: center; color: var(--tx2); }
.kx-bell b { position: absolute; top: 1px; right: -1px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--ro); color: #fff; font-size: 9.5px; display: grid; place-items: center; }

.kx-av { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 10.5px; font-weight: 700; color: #d6ebff; background: linear-gradient(135deg, #1f3b60, #2c2453); border: 1px solid var(--ln2); }
.kx-av-lg { width: 40px; height: 40px; font-size: 13px; }

/* ---------- Corps ---------- */
.kx-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 204px minmax(0, 1fr); }
.kx-sidebar { display: flex; flex-direction: column; gap: 10px; padding: 14px 10px; border-right: 1px solid var(--ln); background: #0a1424; min-height: 0; }
.kx-nav { position: relative; display: flex; flex-direction: column; gap: 2px; }
.kx-nav-group { margin: 12px 8px 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx3); }
.kx-nav-group:first-of-type { margin-top: 0; }
.kx-nav-btn { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--tx2); font-size: 12.5px; font-weight: 500; text-align: left; cursor: pointer; transition: color 0.16s, background-color 0.16s; }
.kx-nav-btn:hover, .kx-nav-btn[data-hover] { color: var(--tx); background-color: rgba(255, 255, 255, 0.035); }
.kx-nav-btn.is-active { color: #fff; background-color: transparent; }
.kx-nav-btn.is-active .kx-i { color: var(--cy); }
.kx-nav-l { flex: 1; white-space: nowrap; }
.kx-nav-badge { font-size: 10px; font-weight: 600; color: var(--tx2); background: rgba(255, 255, 255, 0.06); border-radius: 99px; padding: 1px 7px; }
.kx-nav-badge[hidden] { display: none; }
.kx-nav-ind { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 8px; background: linear-gradient(90deg, rgba(0, 212, 255, 0.16), rgba(139, 92, 246, 0.08)); box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.26); }
.kx-nav-ind::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--cy); }
.kx-side-card { margin-top: auto; padding: 10px; border: 1px solid var(--ln); border-radius: 10px; background: rgba(0, 212, 255, 0.04); font-size: 11px; color: var(--tx3); }
.kx-side-card p { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--tx); font-size: 11.5px; }
.kx-side-card .kx-i { width: 14px; height: 14px; color: var(--cy); }

.kx-main { position: relative; min-width: 0; overflow: hidden; background: radial-gradient(120% 80% at 75% -10%, rgba(0, 212, 255, 0.05), transparent 60%), var(--bg); }
.kx-view { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; overflow: hidden; }
.kx-vh { flex: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.kx-crumb { font-size: 11px; color: var(--tx3); }
.kx-crumb span { opacity: 0.6; margin: 0 2px; }
.kx-vh h3 { margin-top: 2px; font: 600 19px/1.2 var(--display, inherit); letter-spacing: -0.01em; color: #fff; }
.kx-sub { margin-top: 3px; font-size: 12px; color: var(--tx2); }
.kx-sub b { color: var(--tx); font-variant-numeric: tabular-nums; }
.kx-vh-r { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ---------- Boutons, statuts ---------- */
.kx-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ln2); background-color: rgba(255, 255, 255, 0.035); color: var(--tx); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color 0.16s, border-color 0.16s, color 0.16s, box-shadow 0.2s; }
.kx-btn:hover, .kx-btn[data-hover] { background-color: rgba(255, 255, 255, 0.07); border-color: rgba(150, 192, 232, 0.34); }
.kx-btn .kx-i { width: 14px; height: 14px; }
.kx-btn-sm { height: 26px; padding: 0 10px; font-size: 11.5px; }
.kx-btn-ai { border-color: rgba(139, 92, 246, 0.42); background-color: rgba(139, 92, 246, 0.12); color: #e7defe; }
.kx-btn-ai:hover, .kx-btn-ai[data-hover] { border-color: rgba(139, 92, 246, 0.75); background-color: rgba(139, 92, 246, 0.2); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.14); }
.kx-btn-primary { border-color: transparent; background-color: #00bfe6; color: #04121f; }
.kx-btn-primary:hover, .kx-btn-primary[data-hover] { background-color: #7de8f7; box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2), 0 6px 18px rgba(0, 212, 255, 0.25); border-color: transparent; }
.kx-btn-ghost { border-color: transparent; background-color: transparent; color: var(--tx2); }
.kx-btn-spin { display: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: kx-spin 0.7s linear infinite; }
.kx-btn[data-state="loading"] .kx-btn-spin { display: inline-block; }
.kx-btn[data-state="loading"] .kx-i { display: none; }
.kx-btn[data-state="done"] { background-color: rgba(52, 211, 153, 0.14); border-color: rgba(52, 211, 153, 0.45); color: #a7f3d0; box-shadow: none; }
.kx-btn[data-state="done"] .kx-i { display: none; }
.kx-btn[data-state="done"] .kx-btn-l::before { content: "✓ "; }

.kx-st { --c: 150, 170, 195; display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; color: rgb(var(--c)); background: rgba(var(--c), 0.12); border: 1px solid rgba(var(--c), 0.3); transition: color 0.25s, background-color 0.25s, border-color 0.25s; }
.kx-st::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.kx-t-green { --c: 52, 211, 153; }
.kx-t-amber { --c: 251, 191, 36; }
.kx-t-violet { --c: 183, 160, 255; }
.kx-t-cyan { --c: 0, 212, 255; }
.kx-t-muted { --c: 150, 170, 195; }
.kx-st[data-tone="green"] { --c: 52, 211, 153; }
.kx-st[data-tone="violet"] { --c: 183, 160, 255; }
.kx-st[data-tone="amber"] { --c: 251, 191, 36; }

/* ---------- Vue d'ensemble ---------- */
.kx-kpis { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kx-kpi { position: relative; min-width: 0; padding: 11px 12px 10px; border: 1px solid var(--ln); border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); overflow: hidden; }
.kx-kpi-l { display: block; font-size: 11px; color: var(--tx2); }
.kx-kpi-v { display: block; margin: 5px 0 2px; font: 600 21px/1.15 var(--display, inherit); color: #fff; font-variant-numeric: tabular-nums; }
.kx-kpi-d { display: block; font-size: 11px; padding-right: 66px; }
.kx-t-up { color: #6ee7b7; }
.kx-t-warn { color: #fcd34d; }
.kx-t-flat { color: var(--tx2); }
.kx-spark { position: absolute; right: 10px; bottom: 11px; width: 60px; height: 20px; overflow: visible; }
.kx-spark polyline { fill: none; stroke: var(--cy); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; opacity: 0.85; }
.kx-spark.kx-t-up polyline { stroke: #34d399; }
.kx-spark.kx-t-warn polyline { stroke: #fbbf24; }

.kx-card { position: relative; min-width: 0; padding: 12px; border: 1px solid var(--ln); border-radius: 12px; background: rgba(255, 255, 255, 0.02); overflow: hidden; }
.kx-card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12.5px; }
.kx-card-h strong { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.kx-card-h .kx-i { width: 14px; height: 14px; color: var(--cy); }
.kx-live { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--cy); white-space: nowrap; }
.kx-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: kx-blink-soft 1.8s ease-in-out infinite; }
.kx-count { font-size: 11px; color: var(--tx2); background: rgba(255, 255, 255, 0.06); padding: 1px 8px; border-radius: 99px; font-variant-numeric: tabular-nums; }

.kx-ov-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.kx-ov-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.kx-feed { list-style: none; padding: 0; }
.kx-feed-i { position: relative; overflow: hidden; }
.kx-feed-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--ln); font-size: 12.5px; }
.kx-feed-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(0, 212, 255, 0.08); color: var(--cy); }
.kx-feed-ico .kx-i { width: 14px; height: 14px; }
.kx-feed-t { color: var(--tx); }
.kx-feed-i time { font-size: 10.5px; color: var(--tx3); white-space: nowrap; }
.kx-feed-i.is-new .kx-feed-row { background: linear-gradient(90deg, rgba(0, 212, 255, 0.1), transparent); border-radius: 8px; cursor: pointer; transition: background-color 0.16s; }
.kx-feed-i.is-new .kx-feed-t { font-weight: 600; }
.kx-feed-i.is-new[data-hover] .kx-feed-row { background-color: rgba(0, 212, 255, 0.08); }
.kx-appr { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ln); }
.kx-appr strong { display: block; font-size: 12.5px; font-weight: 600; }
.kx-appr small { display: block; font-size: 11px; color: var(--tx3); }
.kx-agent-av { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(139, 92, 246, 0.12); color: var(--vi); border: 1px solid rgba(139, 92, 246, 0.26); }
.kx-agent-av .kx-i { width: 15px; height: 15px; }
.kx-note { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11px; color: var(--tx3); }
.kx-note .kx-i { width: 13px; height: 13px; color: var(--gr); }
.kx-widget { border-color: rgba(0, 212, 255, 0.38); background: linear-gradient(135deg, rgba(0, 212, 255, 0.09), rgba(139, 92, 246, 0.05)); }
.kx-widget-v { display: flex; align-items: baseline; gap: 10px; }
.kx-widget-v b { font: 600 28px/1 var(--display, inherit); color: #fff; font-variant-numeric: tabular-nums; }
.kx-widget-v span { font-size: 11.5px; color: var(--tx2); }

.kx-sweep { position: absolute; inset: 0; pointer-events: none; visibility: hidden; background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.2), transparent); }

/* ---------- Toasts ---------- */
.kx-toasts { position: absolute; top: 12px; right: 14px; z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.kx-toast { pointer-events: auto; visibility: hidden; opacity: 0; display: flex; align-items: flex-start; gap: 10px; width: 300px; max-width: 100%; padding: 11px 13px; border-radius: 12px; background: rgba(16, 31, 52, 0.94); border: 1px solid rgba(0, 212, 255, 0.32); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); cursor: pointer; transition: border-color 0.16s, background-color 0.16s; }
.kx-toast[data-hover] { border-color: rgba(0, 212, 255, 0.75); background-color: rgba(22, 42, 70, 0.97); }
.kx-toast .kx-i { margin-top: 2px; color: var(--cy); }
.kx-toast strong { display: block; font-size: 12.5px; }
.kx-toast small { display: block; font-size: 11.5px; color: var(--tx2); }

/* ---------- Tableaux ---------- */
.kx-table { min-width: 0; border: 1px solid var(--ln); border-radius: 12px; background: rgba(255, 255, 255, 0.015); overflow: hidden; align-self: start; }
.kx-tr { position: relative; overflow: hidden; }
.kx-tr-in { display: grid; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--ln); font-size: 12.5px; transition: background-color 0.16s, box-shadow 0.2s; }
.kx-tr:last-child .kx-tr-in { border-bottom: 0; }
.kx-th .kx-tr-in { padding: 8px 14px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx3); background: rgba(255, 255, 255, 0.02); }
.kx-crm-grid .kx-tr-in { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto 70px; }
.kx-orders .kx-tr-in { grid-template-columns: 82px minmax(0, 1.1fr) minmax(0, 1.4fr) 84px 122px; }
.kx-tr[data-contact], .kx-tr[data-order] { cursor: pointer; }
.kx-tr[data-contact]:hover .kx-tr-in, .kx-tr[data-order]:hover .kx-tr-in, .kx-tr[data-hover] .kx-tr-in { background-color: rgba(255, 255, 255, 0.035); }
.kx-tr[data-focus="1"] .kx-tr-in { background-color: rgba(0, 212, 255, 0.08); box-shadow: inset 3px 0 0 var(--cy); }
.kx-td { min-width: 0; }
.kx-td-main { display: flex; align-items: center; gap: 10px; }
.kx-td-main strong { display: block; font-weight: 600; color: #fff; }
.kx-td-main small { display: block; font-size: 11px; color: var(--tx3); }
.kx-td-ref { font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cy); }
.kx-src { display: inline-block; font-size: 11px; color: var(--tx2); border: 1px solid var(--ln); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.kx-num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kx-filters { display: inline-flex; gap: 4px; padding: 3px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ln); font-size: 11.5px; }
.kx-filters > * { padding: 3px 10px; border-radius: 6px; color: var(--tx2); font-weight: 500; }
.kx-filters b { background: rgba(255, 255, 255, 0.08); color: #fff; font-weight: 600; }

/* ---------- CRM ---------- */
.kx-panes { position: relative; flex: 1; min-height: 0; }
.kx-pane { position: absolute; inset: 0; }
.kx-crm-grid { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; }
.kx-drawer { min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--ln); border-radius: 12px; background: linear-gradient(180deg, #0e1b2e, #0d1a2e); overflow: hidden; }
.kx-dr-head { display: flex; align-items: center; gap: 10px; }
.kx-dr-head strong { display: block; font: 600 14px var(--display, inherit); }
.kx-dr-head small { display: block; font-size: 11.5px; color: var(--tx3); }
.kx-dr-head .kx-st { margin-left: auto; }
.kx-fields { display: flex; flex-direction: column; border-top: 1px solid var(--ln); }
.kx-field { display: grid; grid-template-columns: 92px minmax(0, 1fr) 14px; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ln); font-size: 12px; }
.kx-field dt { color: var(--tx3); }
.kx-field dd { color: var(--tx); }
.kx-fld-ok { color: var(--gr); opacity: 0; transform: scale(0.5); transition: opacity 0.25s, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.kx-fld-ok .kx-i { width: 13px; height: 13px; }
.kx-field[data-ok="1"] .kx-fld-ok { opacity: 1; transform: none; }
.kx-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.kx-fact { font-size: 11px; padding: 3px 8px; border-radius: 6px; background: rgba(139, 92, 246, 0.12); color: #ddd2ff; border: 1px solid rgba(139, 92, 246, 0.3); }
.kx-lbl { margin-bottom: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx3); }
.kx-hist-i { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; padding: 3px 0; font-size: 11.5px; }
.kx-hist-i time { color: var(--tx3); }
.kx-hist-i span { color: var(--tx2); }
.kx-dr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

.kx-tabs { position: relative; display: inline-flex; padding: 3px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ln); }
.kx-tab { position: relative; z-index: 1; height: 24px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--tx2); font-size: 12px; font-weight: 600; cursor: pointer; transition: color 0.16s; }
.kx-tab.is-active { color: #04121f; }
.kx-tab-ind { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 6px; background: var(--cy); }

.kx-pipe { display: flex; flex-direction: column; gap: 12px; }
.kx-kanban { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kx-col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--ln); border-radius: 12px; background: rgba(255, 255, 255, 0.02); min-width: 0; }
.kx-col-h { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; }
.kx-col-h span { color: var(--tx2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kx-deal { padding: 9px 10px; border: 1px solid var(--ln2); border-radius: 9px; background: #0f1d31; font-size: 12px; }
.kx-deal strong { display: block; font-weight: 600; }
.kx-deal span { color: var(--cy); font-weight: 600; font-variant-numeric: tabular-nums; }
.kx-deal small { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 10.5px; color: #ddd2ff; }
.kx-deal small .kx-i { width: 12px; height: 12px; }
.kx-deal.is-new { border-color: rgba(0, 212, 255, 0.6); box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1), 0 10px 24px rgba(0, 0, 0, 0.35); }
.kx-next { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid rgba(52, 211, 153, 0.36); border-radius: 12px; background: rgba(52, 211, 153, 0.07); font-size: 12px; }
.kx-next strong { display: block; }
.kx-next span { color: var(--tx2); }
.kx-next .kx-i { color: var(--gr); margin-top: 1px; }

/* ---------- Panneaux latéraux ---------- */
.kx-orders-wrap, .kx-cal-wrap, .kx-int-wrap { position: relative; flex: 1; min-height: 0; }
.kx-sidepanel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; width: 340px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--ln2); border-radius: 14px; background: linear-gradient(180deg, #112239, #0c1a2c); box-shadow: -24px 0 50px rgba(3, 8, 16, 0.55); overflow: hidden; }
.kx:not(.has-gsap) .kx-sidepanel, .kx:not(.has-gsap) .kx-assistant, .kx:not(.has-gsap) .kx-cursor { display: none; }
.kx-sp-head { display: flex; align-items: center; gap: 10px; }
.kx-sp-head h4 { font: 600 16px var(--display, inherit); }
.kx-sp-head .kx-st { margin-left: auto; }
.kx-sp-head .kx-st + .kx-x { margin-left: 0; }
.kx-x { margin-left: auto; width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--ln); background: transparent; color: var(--tx2); cursor: pointer; transition: background-color 0.16s, color 0.16s; }
.kx-x:hover { background-color: rgba(255, 255, 255, 0.06); color: #fff; }
.kx-x .kx-i { width: 14px; height: 14px; }
.kx-mini-contact { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--ln); background-color: rgba(255, 255, 255, 0.025); color: var(--tx); text-align: left; cursor: pointer; transition: border-color 0.16s, background-color 0.16s; }
.kx-mini-contact:hover, .kx-mini-contact[data-hover] { border-color: rgba(139, 92, 246, 0.55); background-color: rgba(139, 92, 246, 0.09); }
.kx-mini-contact strong { display: block; font-size: 12.5px; }
.kx-mini-contact small { display: block; font-size: 11px; color: var(--tx3); }
.kx-mini-contact em { margin-left: auto; display: flex; align-items: center; gap: 4px; font-style: normal; font-size: 11px; color: var(--vi); white-space: nowrap; }
.kx-mini-contact em .kx-i { width: 12px; height: 12px; }
.kx-lines { padding: 2px 10px; border: 1px solid var(--ln); border-radius: 10px; }
.kx-line { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 7px 0; font-size: 12px; border-bottom: 1px solid var(--ln); }
.kx-line em { font-style: normal; color: var(--tx3); }
.kx-line b { font-variant-numeric: tabular-nums; }
.kx-line-tot { grid-template-columns: 1fr auto; border-bottom: 0; color: var(--tx2); }
.kx-line-tot b { color: #fff; }
.kx-sw { width: 18px; height: 18px; border-radius: 5px; }
.sw-sage { background: linear-gradient(135deg, #a7dcbd, #4e9c7a); }
.sw-peach { background: linear-gradient(135deg, #ffd3b4, #e48c5f); }
.sw-amber { background: linear-gradient(135deg, #ffe5a0, #d99a2b); }
.sw-rose { background: linear-gradient(135deg, #ffc6d4, #d9607f); }
.sw-violet { background: linear-gradient(135deg, #d0bdff, #6d44dc); }
.kx-stock { padding: 10px; border: 1px solid var(--ln); border-radius: 10px; transition: border-color 0.3s, background-color 0.3s; }
.kx-stock[data-state="warn"] { border-color: rgba(251, 191, 36, 0.45); background-color: rgba(251, 191, 36, 0.06); }
.kx-stock-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.kx-stock-h > span { display: flex; align-items: center; gap: 6px; color: var(--tx2); }
.kx-stock-h b { font-weight: 500; color: var(--tx2); white-space: nowrap; }
.kx-stock-h [data-k="stock-num"] { font: 600 16px var(--display, inherit); color: #fff; font-variant-numeric: tabular-nums; }
.kx-stock-bar { position: relative; height: 6px; margin: 9px 0 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); }
.kx-stock-bar i { position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(90deg, var(--gr), var(--cy)); transform-origin: left center; }
.kx-stock[data-state="warn"] .kx-stock-bar i { background: linear-gradient(90deg, #f59e0b, var(--am)); }
.kx-stock-bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: #fff; opacity: 0.55; }
.kx-stock-n { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #fcd34d; }
.kx-stock-n .kx-i { width: 13px; height: 13px; }
.kx-stock:not([data-state="warn"]) .kx-stock-n { visibility: hidden; }
.kx-steps-h { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.kx-steps-h li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 10.5px; text-align: center; color: var(--tx3); }
.kx-steps-h li:not(:last-child)::after { content: ""; position: absolute; top: 11px; left: calc(50% + 15px); right: calc(-50% + 15px); height: 1.5px; background: var(--ln2); transition: background-color 0.3s; }
.kx-steps-h li[data-state="done"]::after { background: rgba(52, 211, 153, 0.6); }
.kx-steps-h i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--ln2); background-color: #0d1a2e; transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; }
.kx-steps-h i .kx-i { width: 12px; height: 12px; opacity: 0; transition: opacity 0.2s; }
.kx-steps-h li[data-state="done"] i { background-color: var(--gr); border-color: var(--gr); color: #04121f; }
.kx-steps-h li[data-state="done"] i .kx-i { opacity: 1; }
.kx-steps-h li[data-state="done"] span { color: var(--tx2); }
.kx-steps-h li[data-state="active"] i { border-color: var(--cy); box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.15); }
.kx-steps-h li[data-state="active"] span { color: var(--tx); }

/* ---------- Calendrier ---------- */
.kx-cal { height: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(5, minmax(0, 1fr)); gap: 4px; }
.kx-cal-h { padding: 0 6px 2px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx3); }
.kx-cell { position: relative; min-height: 0; display: flex; flex-direction: column; gap: 3px; padding: 4px 5px; border: 1px solid var(--ln); border-radius: 8px; background: rgba(255, 255, 255, 0.015); overflow: hidden; }
.kx-cell.is-out { opacity: 0.35; }
.kx-cell.is-today { border-color: rgba(0, 212, 255, 0.55); box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.18); }
.kx-dn { font-size: 11px; color: var(--tx2); font-variant-numeric: tabular-nums; }
.kx-cell.is-today .kx-dn { color: var(--cy); font-weight: 700; }
.kx-free { position: absolute; inset: 20px 4px 4px; display: grid; place-items: center; text-align: center; border: 1px dashed rgba(251, 191, 36, 0.55); border-radius: 6px; background: rgba(251, 191, 36, 0.05); font-size: 9.5px; color: #fcd34d; }
.kx-chip { --pc: 0, 212, 255; position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 4px; width: 100%; padding: 3px 5px; border: 0; border-radius: 5px; background-color: rgba(var(--pc), 0.17); box-shadow: inset 2px 0 0 rgb(var(--pc)); color: #fff; font-size: 10.5px; font-weight: 500; line-height: 1.25; text-align: left; cursor: pointer; transition: background-color 0.16s; }
.kx-chip:hover, .kx-chip[data-hover] { background-color: rgba(var(--pc), 0.32); }
.kx-chip i, .kx-flyer i, .kx-dcard i { flex: none; margin-top: 1px; padding: 1px 3px; border-radius: 3px; background: rgb(var(--pc)); color: #061120; font-size: 8.5px; font-style: normal; font-weight: 700; }
.kx-chip span { display: none; }
.kx-chip b { font-weight: 500; }
.kx-chip.is-draft { box-shadow: inset 2px 0 0 rgb(var(--pc)), 0 0 0 1px rgba(var(--pc), 0.55); }
.kx-p-ig { --pc: 236, 72, 153; }
.kx-p-fb { --pc: 96, 134, 255; }
.kx-p-li { --pc: 56, 160, 232; }
.kx-p-tk { --pc: 45, 212, 191; }

.kx-fly { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.kx-flyer { --pc: 0, 212, 255; position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 7px; overflow: hidden; white-space: nowrap; color: #fff; font-size: 11px; font-weight: 600; background: #13233a; box-shadow: inset 2px 0 0 rgb(var(--pc)), 0 0 0 1px rgba(var(--pc), 0.45), 0 16px 34px rgba(0, 0, 0, 0.5); }

.kx-post { padding: 10px; border: 1px solid var(--ln); border-radius: 12px; background: #0a1525; }
.kx-post-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.kx-post-top strong { display: block; font-size: 12px; }
.kx-post-top small { display: block; font-size: 10.5px; color: var(--tx3); }
.kx-post-img { --pc: 0, 212, 255; height: 112px; display: grid; place-items: center; padding: 10px; border-radius: 9px; text-align: center; font: 600 15px/1.25 var(--display, inherit); color: #fff; background: radial-gradient(circle at 28% 25%, rgba(var(--pc), 0.6), transparent 62%), linear-gradient(135deg, #1b2b49, #2c1f4b); }
.kx-post-cap { margin-top: 8px; font-size: 12px; line-height: 1.5; }
.kx-post-tags { margin-top: 4px; font-size: 11px; color: var(--cy); }
.kx-post-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; color: var(--tx2); }
.kx-post-meta > span:first-child { display: flex; align-items: center; gap: 6px; }
.kx-post-meta .kx-i { width: 13px; height: 13px; }

/* ---------- Assistant & conversation ---------- */
.kx-assistant { position: absolute; top: 0; right: 0; bottom: 0; z-index: 20; width: 390px; max-width: 100%; display: flex; flex-direction: column; background: linear-gradient(180deg, #10203a, #0a1627); border-left: 1px solid rgba(139, 92, 246, 0.35); box-shadow: -30px 0 60px rgba(3, 8, 16, 0.6); }
.kx-as-h { flex: none; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--ln); }
.kx-as-h strong { font-size: 13px; }
.kx-as-h small { font-size: 11px; color: var(--tx3); }
.kx-orb { width: 18px; height: 18px; flex: none; border-radius: 50%; background: conic-gradient(from 0deg, var(--cy), var(--vi), var(--cy)); box-shadow: 0 0 12px rgba(139, 92, 246, 0.55); animation: kx-spin 4s linear infinite; }
.kx-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px 14px 2px; overflow: hidden; }
.kx-ti { flex: none; }
.kx-ti > * { margin-bottom: 10px; }
.kx-msg { padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.5; }
.kx-msg-user { width: fit-content; max-width: 86%; margin-left: auto; color: #fff; background: linear-gradient(135deg, #2b6edb, #5b3fd0); border-bottom-right-radius: 4px; }
.kx-msg-ai { background: rgba(255, 255, 255, 0.035); border: 1px solid var(--ln); }
.kx-ai-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 600; }
.kx-ai-h em { margin-left: auto; font-style: normal; font-weight: 500; font-size: 11px; color: var(--tx3); }
.kx-steps { list-style: none; padding: 0; }
.kx-step { overflow: visible; }
.kx-step-in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-bottom: 7px; font-size: 12px; }
.kx-step-ico { position: relative; width: 16px; height: 16px; flex: none; display: grid; place-items: center; }
.kx-spin { display: block; }
.kx-step .kx-spin { position: absolute; inset: 1px; border-radius: 50%; border: 1.5px solid rgba(0, 212, 255, 0.25); border-top-color: var(--cy); opacity: 0; animation: kx-spin 0.8s linear infinite; }
.kx-step .kx-step-ico .kx-i { width: 14px; height: 14px; color: var(--gr); opacity: 0; transform: scale(0.5); transition: opacity 0.2s, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.kx-step[data-state="run"] .kx-spin { opacity: 1; }
.kx-step[data-state="done"] .kx-step-ico .kx-i { opacity: 1; transform: none; }
.kx-step-l { color: var(--tx2); }
.kx-step[data-state="run"] .kx-step-l { color: #fff; }
.kx-agent-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 99px; font-size: 10.5px; color: #ddd2ff; background: rgba(139, 92, 246, 0.14); border: 1px solid rgba(139, 92, 246, 0.3); }
.kx-agent-tag .kx-i { width: 12px; height: 12px; }
.kx-ctx { width: 100%; display: flex; flex-wrap: wrap; gap: 5px; padding-left: 24px; }
.kx-ctx-c { padding: 2px 8px; border-radius: 6px; font-size: 11px; color: rgb(var(--hc)); background: rgba(var(--hc), 0.12); border: 1px solid rgba(var(--hc), 0.4); }
.kx-hl-cyan { --hc: 0, 212, 255; }
.kx-hl-violet { --hc: 190, 170, 255; }
.kx-hl-amber { --hc: 251, 191, 36; }
.kx-hl-green { --hc: 52, 211, 153; }
.kx-hl { --hl: 1; color: inherit; padding: 0 2px; border-radius: 3px; background: rgba(var(--hc), calc(0.2 * var(--hl))); box-shadow: inset 0 -1.5px 0 rgba(var(--hc), calc(0.85 * var(--hl))); }
.kx-w { display: inline-block; }

.kx-draft { padding: 10px 12px; border: 1px solid rgba(139, 92, 246, 0.36); border-radius: 12px; background: #0b1728; }
.kx-draft-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--ln); }
.kx-draft-h > .kx-i { color: var(--vi); }
.kx-draft-h strong { display: block; font-size: 12px; }
.kx-draft-h small { display: block; font-size: 11px; color: var(--tx3); }
.kx-draft-h .kx-st { margin-left: auto; }
.kx-skel { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.kx-skel i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05)); background-size: 200% 100%; animation: kx-shimmer 1.2s linear infinite; }
.kx-skel i:nth-child(2) { width: 86%; }
.kx-skel i:nth-child(3) { width: 58%; }
.kx-stream { font-size: 12.5px; line-height: 1.55; }
.kx-draft-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.kx-tool { border: 1px solid rgba(0, 212, 255, 0.36); border-radius: 12px; background: #08131f; overflow: hidden; }
.kx-tool-h { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--ln); font-size: 11.5px; }
.kx-tool-h code { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: #c6f6ff; }
.kx-tool-b { padding: 2px 6px; border-radius: 4px; background: var(--cy); color: #04121f; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; }
.kx-tool-st { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--tx2); white-space: nowrap; }
.kx-tool-st em { font-style: normal; }
.kx-tool-st .kx-spin { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(0, 212, 255, 0.25); border-top-color: var(--cy); animation: kx-spin 0.8s linear infinite; }
.kx-tool-st .kx-i { display: none; width: 13px; height: 13px; color: var(--gr); }
.kx-tool-st[data-state="ok"] { color: #a7f3d0; }
.kx-tool-st[data-state="ok"] .kx-spin { display: none; }
.kx-tool-st[data-state="ok"] .kx-i { display: block; }
.kx-tool-args { padding: 7px 10px; font: 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #9fb6cc; white-space: pre-wrap; background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid var(--ln); }
.kx-tool-row { display: grid; grid-template-columns: 50px minmax(0, 1fr) 66px 62px; gap: 8px; padding: 6px 10px; font-size: 11.5px; border-bottom: 1px solid var(--ln); }
.kx-tool-row:last-child { border-bottom: 0; }
.kx-tool-row span:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cy); }
.kx-tool-row span:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.kx-warn { color: #fcd34d; }

.kx-opp { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(52, 211, 153, 0.42); border-radius: 12px; background: rgba(52, 211, 153, 0.07); }
.kx-opp small { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #a7f3d0; }
.kx-opp strong { display: block; font-size: 12.5px; }
.kx-opp span:not(.kx-opp-ico):not(.kx-btn-l):not(.kx-btn-spin) { display: block; font-size: 11px; color: var(--tx2); }
.kx-opp .kx-btn { margin-left: auto; }
.kx-opp-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(52, 211, 153, 0.15); color: var(--gr); }

.kx-dlist { display: flex; flex-direction: column; gap: 6px; }
.kx-dcard { --pc: 0, 212, 255; display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 9px; background: rgba(var(--pc), 0.1); border: 1px solid rgba(var(--pc), 0.36); }
.kx-dcard strong { display: block; font-size: 12px; }
.kx-dcard small { display: block; font-size: 10.5px; color: var(--tx2); }
.kx-dlist .kx-btn { align-self: flex-start; margin-top: 4px; }

.kx-suggest { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.kx-sugg { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(139, 92, 246, 0.3); background-color: rgba(139, 92, 246, 0.07); color: #e7defe; font-size: 12px; font-weight: 500; text-align: left; cursor: pointer; transition: background-color 0.16s, border-color 0.16s; }
.kx-sugg:hover { background-color: rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, 0.55); }
.kx-sugg .kx-i { width: 14px; height: 14px; color: var(--vi); }

.kx-composer { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 14px 14px; }
.kx-input { position: relative; flex: 1; min-width: 0; height: 38px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ln2); background: rgba(255, 255, 255, 0.03); font-size: 12.5px; white-space: nowrap; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.kx-input.is-typing { justify-content: flex-end; border-color: rgba(139, 92, 246, 0.6); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12); }
.kx-ph { color: var(--tx3); overflow: hidden; text-overflow: ellipsis; }
.kx-input.is-typing .kx-ph { display: none; }
.kx-caret { display: none; width: 1.5px; height: 15px; margin-left: 1px; flex: none; background: var(--cy); animation: kx-blink 1s steps(1) infinite; }
.kx-input.is-typing .kx-caret { display: block; }
.kx-send { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 0; border-radius: 10px; background-color: #7a52ee; color: #fff; cursor: pointer; transition: background-color 0.16s, box-shadow 0.2s; }
.kx-send:hover, .kx-send[data-hover] { background-color: #7c5cf0; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22); }

/* ---------- Équipe IA ---------- */
.kx-perm { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 99px; font-size: 11px; color: #a7f3d0; border: 1px solid rgba(52, 211, 153, 0.36); }
.kx-perm .kx-i { width: 13px; height: 13px; }
.kx-ai-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 12px; }
.kx-console { display: flex; flex-direction: column; padding: 0; }
.kx-console .kx-thread { padding: 12px 12px 2px; }
.kx-console .kx-composer { padding: 6px 12px 12px; }
.kx-plan { list-style: none; width: 100%; display: flex; flex-direction: column; gap: 4px; margin: 2px 0; padding: 0 0 0 24px; }
.kx-plan li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--tx2); }
.kx-plan b { width: 16px; height: 16px; display: grid; place-items: center; flex: none; border-radius: 5px; font-size: 10px; background: rgba(0, 212, 255, 0.14); color: var(--cy); }
.kx-activity { display: flex; flex-direction: column; gap: 6px; }
.kx-tasks { display: flex; flex-direction: column; gap: 6px; }
.kx-task { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--ln); border-radius: 10px; background-color: rgba(255, 255, 255, 0.02); transition: border-color 0.3s, background-color 0.3s; }
.kx-task-m strong { display: block; font-size: 12px; }
.kx-task-m small { display: block; font-size: 11px; color: var(--tx3); }
.kx-task-bar { display: block; height: 3px; margin-top: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.kx-task-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cy), var(--vi)); transform-origin: left center; transform: scaleX(0); }
.kx-task-st { padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 600; white-space: nowrap; color: var(--tx2); background-color: rgba(255, 255, 255, 0.06); transition: background-color 0.3s, color 0.3s; }
.kx-task[data-state="working"] { border-color: rgba(0, 212, 255, 0.36); }
.kx-task[data-state="working"] .kx-task-st { background-color: rgba(0, 212, 255, 0.14); color: var(--cy); }
.kx-task[data-state="ready"] .kx-task-st { background-color: rgba(139, 92, 246, 0.16); color: #ddd2ff; }
.kx-task[data-state="review"] { border-color: rgba(251, 191, 36, 0.36); }
.kx-task[data-state="review"] .kx-task-st { background-color: rgba(251, 191, 36, 0.14); color: #fcd34d; }
.kx-task[data-state="done"] { border-color: rgba(52, 211, 153, 0.4); }
.kx-task[data-state="done"] .kx-task-st { background-color: rgba(52, 211, 153, 0.14); color: #a7f3d0; }
.kx-deliv { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--ln); }
.kx-deliv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.kx-dv { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 7px; border: 1px solid var(--ln); border-radius: 9px; background: #0d1a2e; font-size: 11px; }
.kx-dv b { display: block; font-size: 11.5px; font-weight: 600; }
.kx-dv small { display: block; font-size: 10.5px; color: var(--tx3); }
.kx-dv > .kx-i { color: var(--cy); }
.kx-dv-post .kx-post-img { width: 34px; height: 34px; flex: none; padding: 0; border-radius: 7px; font-size: 9px; }
.kx-dv-post .kx-post-img i { font-style: normal; }
.kx-dv-cal { flex-direction: column; align-items: stretch; gap: 5px; }
.kx-dv-cal span { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.kx-dv-cal span i { height: 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); }
.kx-dv-cal span i.on { background: linear-gradient(135deg, var(--cy), var(--vi)); }
.kx-deliv-f { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.kx-deliv-f small { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--tx3); }
.kx-deliv-f small .kx-i { width: 12px; height: 12px; }

/* ---------- Intégrations ---------- */
.kx-int-wrap { display: flex; flex-direction: column; gap: 10px; }
.kx-int-grid { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kx-conn { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 10px; border: 1px solid var(--ln); border-radius: 12px; background-color: rgba(255, 255, 255, 0.02); color: var(--tx); text-align: left; cursor: pointer; transition: border-color 0.16s, background-color 0.16s, box-shadow 0.2s; }
.kx-conn:hover, .kx-conn[data-hover] { border-color: rgba(0, 212, 255, 0.5); background-color: rgba(0, 212, 255, 0.05); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); }
.kx-conn-i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--cy); background: linear-gradient(135deg, rgba(0, 212, 255, 0.16), rgba(139, 92, 246, 0.14)); border: 1px solid var(--ln2); }
.kx-conn-m strong { display: block; font-size: 12.5px; }
.kx-conn-m small { display: block; font-size: 10.5px; color: var(--tx3); }
.kx-conn .kx-st { grid-column: 1 / -1; justify-self: start; }
.kx-conn-d { grid-column: 1 / -1; font-size: 11px; color: var(--tx2); }
.kx-log { flex: 1; min-height: 0; }
.kx-log ul { list-style: none; padding: 0; }
.kx-log li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 0; font-size: 11.5px; color: var(--tx2); border-bottom: 1px solid var(--ln); }
.kx-log li .kx-i { width: 13px; height: 13px; color: var(--cy); }
.kx-log time { font-size: 10.5px; color: var(--tx3); white-space: nowrap; }
.kx-perms { display: flex; flex-direction: column; }
.kx-perm-r { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 0; font-size: 12px; border-bottom: 1px solid var(--ln); }
.kx-perm-r small { font-size: 10.5px; color: var(--tx3); }
.kx-tog { position: relative; width: 28px; height: 16px; border-radius: 10px; background-color: rgba(255, 255, 255, 0.13); transition: background-color 0.25s; }
.kx-tog i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background-color: #cfe0f1; transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1), background-color 0.25s; }
.kx-perm-r[data-on="1"] .kx-tog { background-color: var(--gr); }
.kx-perm-r[data-on="1"] .kx-tog i { transform: translateX(12px); background-color: #fff; }
.kx-sync { padding: 10px; border: 1px solid var(--ln); border-radius: 10px; }
.kx-sync-bar { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.kx-sync-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cy), var(--gr)); transform-origin: left center; }
.kx-sync-n { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 11px; color: var(--tx2); }
.kx-sync-n b { font: 600 14px var(--display, inherit); color: #fff; font-variant-numeric: tabular-nums; }
.kx-disclaimer { flex: none; font-size: 10.5px; color: var(--tx3); }

/* ---------- Curseur simulé ---------- */
.kx-cursor { position: absolute; left: 0; top: 0; z-index: 60; width: 20px; height: 22px; pointer-events: none; visibility: hidden; opacity: 0; transform-origin: 2px 1.5px; }
.kx-cursor svg { display: block; width: 20px; height: 22px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)); }
.kx-cursor path { fill: #fff; stroke: #0a1526; stroke-width: 1.2; stroke-linejoin: round; }
.kx-ripple { position: absolute; left: -13px; top: -13px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--cy); background: rgba(0, 212, 255, 0.15); visibility: hidden; opacity: 0; }

/* ---------- Barre de récit & contrôles ---------- */
.kx-story { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 14px 18px; border-top: 1px solid var(--ln); background: #0a1424; }
.kx-story-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 4px; }
#kx-story-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--cy); }
#kx-story-mod { padding: 2px 8px; border-radius: 99px; font-size: 10.5px; color: #ddd2ff; background: rgba(139, 92, 246, 0.14); border: 1px solid rgba(139, 92, 246, 0.3); }
#kx-story-title { font: 600 15.5px/1.3 var(--display, inherit); color: #fff; }
#kx-story-desc { min-height: 2.9em; margin-top: 3px; max-width: 760px; font-size: 12.5px; color: var(--tx2); }
.kx-story-ctrl { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.kx-segs { display: flex; gap: 4px; width: 280px; }
.kx-seg { flex: 1; height: 16px; padding: 0; border: 0; cursor: pointer; background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) center / 100% 4px no-repeat; border-radius: 4px; }
.kx-seg i { display: block; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--cy), var(--vi)); transform: scaleX(0); transform-origin: left center; }
.kx-seg:hover { background-size: 100% 6px; }
.kx-ctrl-btns { display: flex; gap: 6px; }
.kx-cbtn { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 9px; border-radius: 9px; border: 1px solid var(--ln2); background-color: rgba(255, 255, 255, 0.03); color: var(--tx); cursor: pointer; transition: background-color 0.16s, border-color 0.16s; }
.kx-cbtn:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.08); border-color: rgba(150, 192, 232, 0.36); }
.kx-cbtn:disabled { opacity: 0.35; cursor: default; }
.kx-cbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kx-cbtn-play { min-width: 112px; padding: 0 14px; border: 0; background-color: #00bfe6; color: #04121f; font-size: 12.5px; font-weight: 700; }
.kx-cbtn-play:hover:not(:disabled) { background-color: #7de8f7; }
.kx-cbtn-play svg { fill: currentColor; stroke: none; width: 14px; height: 14px; }
.kx-cbtn-play[data-state="playing"] .kx-ico-play, .kx-cbtn-play[data-state="paused"] .kx-ico-pause { display: none; }
.kx-story.is-static .kx-story-ctrl { display: none; }
.kx-resume { position: absolute; left: 50%; top: 58px; z-index: 70; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid rgba(139, 92, 246, 0.5); border-radius: 99px; background: rgba(28, 22, 58, 0.94); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; transform: translateX(-50%); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45); transition: background-color 0.16s, border-color 0.16s; }
.kx-resume:hover { background-color: rgba(48, 36, 96, 0.96); border-color: rgba(139, 92, 246, 0.85); }
.kx-resume[hidden] { display: none; }

@keyframes kx-spin { to { transform: rotate(360deg); } }
@keyframes kx-blink { 50% { opacity: 0; } }
@keyframes kx-blink-soft { 50% { opacity: 0.35; } }
@keyframes kx-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- Tailles intermédiaires (largeur de l'application) ---------- */
.kx[data-size="m"] .kx-body { grid-template-columns: 172px minmax(0, 1fr); }
.kx[data-size="m"] .kx-search, .kx[data-size="m"] .kx-side-card { display: none; }
.kx[data-size="m"] .kx-spark { display: none; }
.kx[data-size="m"] .kx-kpi-d { padding-right: 0; }
.kx[data-size="m"] .kx-crm-grid { grid-template-columns: minmax(0, 1fr) 270px; }
.kx[data-size="m"] .kx-hide-s { display: none; }
.kx[data-size="m"] .kx-crm-grid .kx-tr-in { grid-template-columns: minmax(0, 1.6fr) auto 70px; }
.kx[data-size="m"] .kx-orders .kx-tr-in { grid-template-columns: 82px minmax(0, 1fr) 84px 122px; }
.kx[data-size="m"] .kx-assistant { width: 360px; }
.kx[data-size="m"] .kx-int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kx[data-size="m"] .kx-conn-d { display: none; }

/* ---------- Mobile (application étroite) ---------- */
.kx[data-size="s"] { border-radius: 14px; }
.kx[data-size="s"] .kx-screen { height: 600px; }
.kx[data-size="s"] .kx-topbar { gap: 8px; padding: 0 10px; }
.kx[data-size="s"] .kx-dots, .kx[data-size="s"] .kx-search, .kx[data-size="s"] .kx-live-pill, .kx[data-size="s"] .kx-top-ai .kx-btn-l { display: none; }
.kx[data-size="s"] .kx-top-ai { padding: 0 8px; }
.kx[data-size="s"] .kx-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.kx[data-size="s"] .kx-sidebar { order: 2; flex-direction: row; padding: 4px 6px; border-right: 0; border-top: 1px solid var(--ln); }
.kx[data-size="s"] .kx-nav { flex: 1; flex-direction: row; justify-content: space-between; }
.kx[data-size="s"] .kx-nav-group, .kx[data-size="s"] .kx-side-card, .kx[data-size="s"] .kx-nav-l, .kx[data-size="s"] .kx-nav-badge { display: none; }
.kx[data-size="s"] .kx-nav-btn { flex: 1; justify-content: center; height: 42px; padding: 0; }
.kx[data-size="s"] .kx-nav-btn .kx-i { width: 18px; height: 18px; }
.kx[data-size="s"] .kx-nav-ind::before { left: 30%; right: 30%; top: auto; bottom: -4px; width: auto; height: 3px; }
.kx[data-size="s"] .kx-view { gap: 10px; padding: 12px; }
.kx[data-size="s"] .kx-vh h3 { font-size: 16px; }
.kx[data-size="s"] .kx-sub, .kx[data-size="s"] .kx-filters, .kx[data-size="s"] .kx-vh-r > .kx-btn:not(.kx-btn-ai):not(.kx-btn-primary), .kx[data-size="s"] .kx-perm { display: none; }
.kx[data-size="s"] .kx-vh-r .kx-btn-l { display: none; }
.kx[data-size="s"] .kx-vh-r .kx-btn { padding: 0 9px; }
.kx[data-size="s"] .kx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kx[data-size="s"] .kx-kpi:nth-child(n + 3), .kx[data-size="s"] .kx-spark { display: none; }
.kx[data-size="s"] .kx-kpi-d { padding-right: 0; }
.kx[data-size="s"] .kx-kpi-v { font-size: 18px; }
.kx[data-size="s"] .kx-ov-grid { grid-template-columns: minmax(0, 1fr); }
.kx[data-size="s"] .kx-ov-side { order: -1; }
.kx[data-size="s"] .kx-ov-side > .kx-card:not(.kx-widget) { display: none; }
.kx[data-size="s"] .kx-feed-i time { display: none; }
.kx[data-size="s"] .kx-hide-s { display: none; }
.kx[data-size="s"] .kx-tr-in { padding: 8px 10px; gap: 8px; }
.kx[data-size="s"] .kx-crm-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
.kx[data-size="s"] .kx-crm-grid .kx-tr-in { grid-template-columns: minmax(0, 1fr) auto 62px; }
.kx[data-size="s"] .kx-crm-grid .kx-tr:nth-child(n + 4), .kx[data-size="s"] .kx-th { display: none; }
.kx[data-size="s"] .kx-drawer { padding: 10px; gap: 8px; }
.kx[data-size="s"] .kx-hist, .kx[data-size="s"] [data-k="fld-1"], .kx[data-size="s"] [data-k="fld-4"] { display: none; }
.kx[data-size="s"] .kx-orders .kx-tr-in { grid-template-columns: 64px minmax(0, 1fr) auto; }
.kx[data-size="s"] .kx-orders .kx-num { display: none; }
.kx[data-size="s"] .kx-td-main .kx-av { display: none; }
.kx[data-size="s"] .kx-sidepanel { width: 100%; padding: 12px; gap: 10px; }
.kx[data-size="s"] .kx-assistant { width: 100%; border-left: 0; }
.kx[data-size="s"] .kx-cal-h { padding: 0 2px; font-size: 9px; letter-spacing: 0; }
.kx[data-size="s"] .kx-cell { padding: 3px; border-radius: 6px; }
.kx[data-size="s"] .kx-chip { padding: 2px; justify-content: center; box-shadow: none; background-color: rgba(var(--pc), 0.28); }
.kx[data-size="s"] .kx-chip b, .kx[data-size="s"] .kx-free { font-size: 0; }
.kx[data-size="s"] .kx-free { inset: 18px 3px 3px; }
.kx[data-size="s"] .kx-chip i { margin: 0; }
.kx[data-size="s"] .kx-post-img { height: 90px; }
.kx[data-size="s"] .kx-ai-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 8px; }
.kx[data-size="s"] .kx-task-m small, .kx[data-size="s"] .kx-deliv-f small, .kx[data-size="s"] .kx-dv-mail, .kx[data-size="s"] .kx-dv-seg, .kx[data-size="s"] .kx-deliv .kx-lbl { display: none; }
.kx[data-size="s"] .kx-task { padding: 6px; }
.kx[data-size="s"] .kx-activity { padding: 8px; gap: 4px; }
.kx[data-size="s"] .kx-activity .kx-card-h { margin-bottom: 2px; }
.kx[data-size="s"] .kx-deliv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kx[data-size="s"] .kx-dv-post b { font-size: 10.5px; }
.kx[data-size="s"] .kx-dv-post .kx-post-img { display: none; }
.kx[data-size="s"] .kx-deliv-f { margin-top: 6px; }
.kx[data-size="s"] .kx-int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kx[data-size="s"] .kx-conn { padding: 8px; gap: 4px 8px; grid-template-columns: 28px minmax(0, 1fr); }
.kx[data-size="s"] .kx-conn-i { width: 28px; height: 28px; }
.kx[data-size="s"] .kx-conn-d, .kx[data-size="s"] .kx-conn-m small, .kx[data-size="s"] .kx-log { display: none; }
.kx[data-size="s"] .kx-toasts { left: 10px; right: 10px; top: 10px; }
.kx[data-size="s"] .kx-toast { width: 100%; }
.kx[data-size="s"] .kx-cursor svg { display: none; }
.kx[data-size="s"] .kx-cursor::before { content: ""; position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.26); border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.kx[data-size="s"] .kx-story { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
.kx[data-size="s"] .kx-story-ctrl { align-items: stretch; }
.kx[data-size="s"] .kx-segs { width: 100%; }
.kx[data-size="s"] .kx-ctrl-btns { justify-content: space-between; }
.kx[data-size="s"] .kx-cbtn-play { flex: 1; }
.kx[data-size="s"] #kx-story-desc { min-height: 4.4em; }
.kx[data-size="s"] .kx-resume { top: 54px; font-size: 12px; white-space: nowrap; }

@media (max-width: 640px) {
  .demo-interactive-section.wrap { width: calc(100% - 16px); padding: 30px 10px; border-radius: 22px; }
  .demo-interactive-section .demo-heading h2 { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kx-cursor { display: none; }
  .kx-orb, .kx-live i, .kx-skel i { animation: none; }
}

/* Capture vidéo : ?capture=1 n'affiche que l'application */
html.kx-capture body > *:not(main), html.kx-capture main > section:not(#presentation), html.kx-capture .demo-heading, html.kx-capture .saas-header-controls, html.kx-capture .saas-interop-banner { display: none !important; }
html.kx-capture .demo-interactive-section { margin: 0 auto; padding: 24px; border: 0; box-shadow: none; }

/* Éléments qui reçoivent une impulsion (GSAP ne transforme pas les éléments inline) */
.kx-sub b, [data-k="stock-num"], .kx-col-h span, .kx-nav-badge, .kx-widget-v b, .kx-count { display: inline-block; transform-origin: left center; }
.kx-kpi-v { width: fit-content; transform-origin: left center; }