/* ===== Hero animé : outils dispersés > reliés > agents au travail ===== */
.hx{position:relative;width:100%;max-width:620px;margin-left:auto;min-width:0}
.hx-stage{position:absolute;left:0;top:0;width:620px;height:540px;transform-origin:0 0}
.hx{height:calc(var(--hxh,540px) + 64px)}
.hx-svg{position:absolute;inset:0;width:620px;height:540px;overflow:visible}
.hx-w{fill:none;stroke:url(#hxg);stroke-width:2;stroke-dasharray:420;stroke-dashoffset:420;opacity:.85;transition:stroke-dashoffset .8s cubic-bezier(.65,0,.35,1)}
.hx-w.on{stroke-dashoffset:0}
.hx-pk{fill:#6D5EF8;opacity:0;filter:drop-shadow(0 0 6px rgba(109,94,248,.8))}

.hx-chip{position:absolute;left:0;top:0;width:118px;height:38px;display:flex;align-items:center;gap:8px;padding:0 11px;background:#fff;border:1px solid #E6E7EE;border-radius:11px;box-shadow:0 10px 24px -14px rgba(17,19,40,.35);font:600 12.5px/1 'Geist',system-ui,sans-serif;color:#2A2C38;transition:transform .9s cubic-bezier(.65,0,.35,1),box-shadow .3s,border-color .3s;z-index:3;white-space:nowrap}
.hx-chip img{width:18px;height:18px;object-fit:contain;border-radius:4px;flex:0 0 18px}
.hx-chip span{overflow:hidden;text-overflow:ellipsis}
.hx-bd{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:#E5484D;color:#fff;font-size:10.5px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;transition:opacity .3s,transform .3s}
.hx-chip.chaos{animation:hxwob 2.4s ease-in-out infinite}
.hx-chip.chaos:nth-child(even){animation-duration:2.9s;animation-direction:reverse}
.hx-chip:not(.chaos) .hx-bd{opacity:0;transform:scale(.4)}
.hx-chip.lit{border-color:#6D5EF8;box-shadow:0 0 0 4px rgba(109,94,248,.16),0 10px 24px -14px rgba(17,19,40,.35)}
@keyframes hxwob{0%,100%{translate:0 0}25%{translate:3px -4px}50%{translate:-2px 3px}75%{translate:4px 2px}}

.hx-pain{position:absolute;padding:6px 10px;border-radius:9px;background:#FFF4F2;border:1px solid #FAD2CC;color:#B3261E;font:600 11.5px/1.2 'Geist',system-ui,sans-serif;white-space:nowrap;opacity:0;transform:translateY(6px) scale(.9);transition:opacity .3s,transform .3s;z-index:4;pointer-events:none}
.hx-pain.in{opacity:1;transform:none}

.hx-card{position:absolute;left:170px;top:92px;width:280px;height:356px;background:#fff;border:1px solid #E3E4EC;border-radius:16px;box-shadow:0 40px 80px -30px rgba(25,28,70,.45),0 0 0 6px rgba(109,94,248,.06);overflow:hidden;opacity:0;transform:scale(.9);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1);z-index:2;font-family:'Geist',system-ui,sans-serif;display:flex;flex-direction:column}
.hx.linked .hx-card{opacity:1;transform:none}
.hx-top{display:flex;align-items:center;gap:5px;padding:10px 12px;border-bottom:1px solid #EFF0F4;background:#FAFAFC}
.hx-top i{width:7px;height:7px;border-radius:50%;background:#E1E2E9}
.hx-top b{margin-left:6px;font-size:12.5px;color:#15161D}
.hx-live{margin-left:auto;font-size:10.5px;font-weight:600;color:#0D7F52;display:inline-flex;align-items:center;gap:5px}
.hx-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#12A36B}
.hx.live .hx-live::before{animation:hxping 1.4s infinite}
@keyframes hxping{0%{box-shadow:0 0 0 0 rgba(18,163,107,.5)}80%{box-shadow:0 0 0 7px rgba(18,163,107,0)}100%{box-shadow:none}}
.hx-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 12px 6px}
.hx-kpis div{background:#F6F7FA;border-radius:9px;padding:7px 8px}
.hx-kpis span{display:block;font-size:9.5px;color:#8A8C99;font-weight:600}
.hx-kpis b{display:block;font-size:16px;color:#15161D;margin-top:1px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.hx-k1{color:#0D7F52!important}
.hx-agents{display:flex;align-items:center;gap:0;padding:6px 12px 8px}
.hx-ag{position:relative;width:26px;height:26px;border-radius:50%;border:2px solid #fff;margin-right:-6px;transition:transform .3s}
.hx-ag img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.hx-ag i{position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;background:#D5D7E0;border:1.5px solid #fff}
.hx-ag.on{transform:translateY(-3px) scale(1.12);z-index:2}.hx-ag.on i{background:#12A36B}
.hx-agents em{margin-left:14px;font-style:normal;font-size:10.5px;color:#8A8C99;font-weight:600}
.hx-feed{flex:1;display:flex;flex-direction:column;gap:6px;padding:4px 12px 12px;overflow:hidden}
.hx-it{position:relative;display:flex;align-items:center;gap:8px;padding:8px 9px;border:1px solid #ECEDF2;border-radius:10px;background:#fff;animation:hxin .5s cubic-bezier(.2,.8,.2,1);flex:0 0 auto}
@keyframes hxin{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
.hx-it .hx-lg{width:20px;height:20px;object-fit:contain;flex:0 0 20px;border-radius:4px}
.hx-it>div{flex:1;min-width:0}
.hx-it b{display:block;font-size:11.5px;color:#15161D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-it span{display:flex;align-items:center;gap:4px;font-size:10px;color:#6B6D7A;margin-top:2px;font-weight:600}
.hx-it span img{width:14px;height:14px;border-radius:50%;object-fit:cover}
.hx-p{font-style:normal;font-size:9.5px;font-weight:650;padding:2px 7px;border-radius:99px;white-space:nowrap}
.hx-p.g{background:#E3F5EC;color:#0D7F52}.hx-p.b{background:#ECEFFE;color:#2440C8}.hx-p.o{background:#FFF1DE;color:#AD5D06}
.hx-ok{position:absolute;right:8px;bottom:-11px;background:#3366F4;color:#fff;border:0;border-radius:7px;padding:4px 10px;font:650 10.5px/1.3 'Geist',system-ui,sans-serif;box-shadow:0 6px 14px -6px rgba(51,102,244,.8);animation:hxin .3s;transition:transform .15s}
.hx-ok.press{transform:scale(.9)}
.hx-it:has(.hx-ok){margin-bottom:10px;border-color:#F5C77E}
.hx-cur{position:absolute;left:0;top:0;z-index:9;opacity:0;pointer-events:none;transition:opacity .3s}
.hx-toast{position:absolute;left:50%;bottom:28px;transform:translate(-50%,12px);opacity:0;transition:opacity .4s,transform .4s;background:#15161D;color:#fff;border-radius:11px;padding:9px 13px;font:600 12px/1.3 'Geist',system-ui,sans-serif;white-space:nowrap;display:flex;align-items:center;gap:8px;z-index:8;box-shadow:0 16px 30px -14px rgba(0,0,0,.5)}
.hx-toast i{font-style:normal;width:18px;height:18px;border-radius:50%;background:#12A36B;display:inline-flex;align-items:center;justify-content:center;font-size:10px}
.hx-toast.in{opacity:1;transform:translate(-50%,0)}

.hx-steps{position:absolute;left:0;right:0;top:calc(var(--hxh,540px) + 12px);display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.hx-steps span{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:99px;border:1px solid #E6E7EE;background:rgba(255,255,255,.85);font:600 12px/1.2 'Geist',system-ui,sans-serif;color:#9A9CA8;transition:color .3s,border-color .3s,background .3s}
.hx-steps b{width:18px;height:18px;border-radius:50%;background:#EEF0F4;color:#7A7C89;font-size:10.5px;display:inline-flex;align-items:center;justify-content:center;transition:background .3s,color .3s}
.hx-steps span.on{color:#15161D;border-color:#C9D0F7;background:#fff;box-shadow:0 6px 16px -10px rgba(51,102,244,.6)}
.hx-steps span.on b{background:#3366F4;color:#fff}
.hx-steps span.done b{background:#E3F5EC;color:#0D7F52}
@media(max-width:940px){.hx{margin:10px auto 0}}
@media(max-width:560px){.hx-steps span{font-size:11px;padding:6px 9px}.hx{height:calc(var(--hxh,540px) + 110px)}}
.hgrid>*{min-width:0}
.hx-chip svg{width:18px;height:18px;flex:0 0 18px}
span.hx-lg{width:20px;height:20px;flex:0 0 20px;display:inline-flex}
span.hx-lg img,span.hx-lg svg{width:100%;height:100%;object-fit:contain;border-radius:4px}