/* Sofia vivante — scène de conversation (vidéo ou portrait animé), sous-titres, cartes, visite guidée */
.sl{position:fixed;right:20px;bottom:20px;z-index:2147482000;font-family:'Montserrat',system-ui,sans-serif;color:#fff;display:none;-webkit-font-smoothing:antialiased}
.sl.on{display:block}
.sl *{box-sizing:border-box}
.sl button{font-family:inherit;cursor:pointer}
.sl-panel{position:relative;width:384px;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;border-radius:28px;background:#07072B;box-shadow:0 30px 90px rgba(5,5,32,.55),0 0 0 1px rgba(255,255,255,.08);overflow:hidden;transform-origin:100% 100%;animation:slIn .5s cubic-bezier(.2,.8,.2,1)}
.sl-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(135deg,#5600D1,#AC0FCA,#D32B98,#FF585A,#FE9C3F);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.85;z-index:3}
@keyframes slIn{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
/* média : vidéo LiveAvatar ou portrait animé */
.sl-media{position:relative;aspect-ratio:4/4.3;background:radial-gradient(120% 90% at 50% 20%,#2a0d6e 0%,#0C0C43 55%,#050520 100%);overflow:hidden;flex:none}
.sl-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;background:#050520}
.sl[data-mode=video] .sl-video.has{display:block}
.sl-portrait{position:absolute;inset:0;display:grid;place-items:end center;grid-template-rows:100%;grid-template-columns:100%}
.sl[data-mode=video] .sl-video.has~.sl-portrait{display:none}
.sl-portrait img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 22%;transform:scale(1.02);animation:slBreath 6s ease-in-out infinite}
.sl-loop{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 22%;opacity:0;transition:opacity .28s ease;background:transparent}
.sl.loops .sl-loop.idle{opacity:1}
.sl.loops.speaking .sl-loop.talk{opacity:1}
.sl.loops.speaking .sl-loop.idle{opacity:0}
.sl.loops .sl-portrait img{visibility:hidden}
@keyframes slBreath{0%,100%{translate:0 0}50%{translate:0 -4px}}
.sl-aura{position:absolute;inset:-20%;z-index:0;background:radial-gradient(closest-side,rgba(211,43,152,calc(.18 + var(--lv,0)*.55)),rgba(86,0,209,0) 70%);filter:blur(10px);transition:background .1s}
.sl-shade{position:absolute;inset:auto 0 0 0;height:62%;z-index:2;background:linear-gradient(180deg,rgba(7,7,43,0) 0%,rgba(7,7,43,.72) 55%,#07072B 100%);pointer-events:none}
.sl-top{position:absolute;z-index:4;left:14px;right:14px;top:14px;display:flex;align-items:center;gap:8px}
.sl-chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:99px;background:rgba(7,7,43,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:11.5px;font-weight:700;letter-spacing:.03em;border:1px solid rgba(255,255,255,.14)}
.sl-dot{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:slPing 1.8s infinite}
.sl:not([data-state=live]) .sl-dot{background:#FFB27A;animation:none}
@keyframes slPing{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}80%,100%{box-shadow:0 0 0 9px rgba(52,211,153,0)}}
.sl-ia{background:linear-gradient(90deg,#AC0FCA,#FF585A);border:0}
.sl-ib{margin-left:auto;display:flex;gap:6px}
.sl-ib button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(7,7,43,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;transition:background .2s}
.sl-ib button:hover{background:rgba(255,255,255,.16)}
.sl-name{position:absolute;z-index:4;left:18px;bottom:66px;right:18px}
.sl-name b{display:block;font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:34px;line-height:1;letter-spacing:.01em;text-transform:uppercase}
.sl-name span{font-size:12.5px;color:#C7C9E8;font-weight:600}
.sl-name{transition:opacity .35s}.sl.capped .sl-name{opacity:0}
.sl[data-state=intro] .sl-media{aspect-ratio:4/3.3}
.sl-live-t{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* sous-titres */
.sl-caps{position:absolute;z-index:4;left:16px;right:16px;bottom:14px;min-height:44px;display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.4;pointer-events:none}
.sl-cap{margin:0;max-height:3.2em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-shadow:0 1px 8px rgba(0,0,0,.6);transition:opacity .3s}
.sl-cap.you{color:#C7C9E8;font-size:12.5px}
.sl-cap.you:not(:empty)::before{content:"Vous : ";font-weight:700;color:#FFB27A}
.sl-cap.her{font-weight:600}
.sl[data-state=intro] .sl-caps,.sl[data-state=intro] .sl-name{display:none}
/* ondes (qui parle) */
.sl-wave{position:absolute;z-index:4;right:96px;top:20px;display:flex;align-items:center;gap:3px;height:22px}
.sl[data-state=intro] .sl-wave{display:none}
.sl-wave i{width:3px;border-radius:2px;background:#fff;height:calc(4px + var(--lv,0)*18px);opacity:.9;transition:height .08s}
.sl-wave i:nth-child(2){height:calc(4px + var(--lv,0)*12px)}.sl-wave i:nth-child(4){height:calc(4px + var(--lv,0)*14px)}.sl-wave i:nth-child(5){height:calc(4px + var(--lv,0)*8px)}
.sl:not([data-talk=sofia]) .sl-wave{opacity:.25}
/* introduction */
.sl-intro{padding:20px 22px 22px;display:none;flex-direction:column;gap:12px;background:#07072B;min-height:0;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto}
.sl[data-state=intro] .sl-intro{display:flex}
.sl-intro h3{margin:0;font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:28px;line-height:1.02;letter-spacing:.01em}
.sl-intro h3 em{font-style:normal;background:linear-gradient(90deg,#FF9AD5,#FFB27A);-webkit-background-clip:text;background-clip:text;color:transparent}
.sl-intro p{margin:0;font-size:14px;line-height:1.55;color:#C7C9E8}
.sl-feats{display:flex;flex-wrap:wrap;gap:6px}
.sl-feats span{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#E6E7F7}
.sl-modes{display:none;gap:6px;padding:4px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.sl.vid-ok .sl-modes{display:flex}
.sl-modes button{flex:1;height:34px;border-radius:99px;border:0;background:transparent;color:#C7C9E8;font-size:12.5px;font-weight:700}
.sl-modes button[aria-pressed=true]{background:#fff;color:#0C0C43}
.sl-go{height:54px;border-radius:99px;border:0;background:linear-gradient(90deg,#5600D1,#AC0FCA 35%,#D32B98 65%,#FF585A);color:#fff;font-size:15.5px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 14px 34px rgba(172,15,202,.45);transition:transform .2s,box-shadow .2s}
.sl-go:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(172,15,202,.55)}
.sl-alt{display:flex;gap:8px}
.sl-alt button{flex:1;height:44px;border-radius:99px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;font-size:13.5px;font-weight:700}
.sl-legal{font-size:11px !important;color:#8A8CB8 !important;line-height:1.45 !important}
/* cartes */
.sl-cards{display:flex;flex-direction:column;gap:10px;padding:0 14px;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;min-height:0}
.sl-cards:not(:empty){padding-top:12px;padding-bottom:2px}
.sl[data-state=intro] .sl-cards{display:none}
.sl-card{position:relative;flex:none;border-radius:20px;background:#fff;color:#0C0C43;padding:14px;display:flex;gap:12px;align-items:flex-start;animation:slCard .45s cubic-bezier(.2,.8,.2,1);box-shadow:0 10px 30px rgba(0,0,0,.25)}
@keyframes slCard{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.sl-card img{width:64px;height:64px;border-radius:14px;object-fit:cover;flex:none;background:#F1EEF8}
.sl-card .k{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#AC0FCA}
.sl-card h4{margin:2px 0 4px;font-size:16px;font-weight:800;line-height:1.2}
.sl-card p{margin:0;font-size:12.5px;line-height:1.45;color:#4C4C78}
.sl-card .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.sl-card .acts button,.sl-card .acts a{height:32px;padding:0 12px;border-radius:99px;border:1.5px solid #D32B98;background:#fff;color:#0C0C43;font-size:12px;font-weight:700;display:inline-flex;align-items:center;text-decoration:none}
.sl-card .acts .p{background:#0C0C43;border-color:#0C0C43;color:#fff}
.sl-card .cx{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:0;background:transparent;color:#8A8CB8;font-size:16px;line-height:1}
.sl-card.wide{flex-direction:column;gap:8px}
.sl-offers{display:grid;gap:6px;width:100%}
.sl-offers div{display:flex;justify-content:space-between;gap:8px;align-items:baseline;padding:8px 10px;border-radius:12px;background:#F6F4FB;font-size:12.5px}
.sl-offers div.hi{background:#0C0C43;color:#fff}
.sl-offers b{font-size:13.5px}
.sl-offers span{font-weight:800;white-space:nowrap}
.sl-slots{display:flex;flex-wrap:wrap;gap:6px}
.sl-slots button{min-height:38px;padding:6px 12px;border-radius:12px;border:1.5px solid #E4DDF2;background:#fff;color:#0C0C43;font-size:12.5px;font-weight:700;text-align:left;transition:border-color .2s,background .2s}
.sl-slots button:hover{border-color:#AC0FCA}
.sl-slots button[aria-pressed=true]{background:#0C0C43;border-color:#0C0C43;color:#fff}
.sl-card.ok{background:linear-gradient(135deg,#ecfdf5,#fff)}
.sl-card.ok .k{color:#059669}
.sl-ba{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.sl-ba div{padding:8px;border-radius:10px;background:#F6F4FB;font-size:11.5px;line-height:1.4;color:#4C4C78}
.sl-ba div b{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#0C0C43}
.sl-toast{align-self:stretch;padding:10px 14px;border-radius:14px;background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.35);color:#d1fae5;font-size:12.5px;font-weight:700;animation:slCard .4s}
/* barre de commandes */
.sl-bar{flex:none;display:flex;align-items:center;gap:8px;padding:12px 14px 14px;background:#07072B}
.sl[data-state=intro] .sl-bar{display:none}
.sl-st{flex:1;min-width:0;font-size:13px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-st i{font-style:normal;color:#8A8CB8;font-weight:600}
.sl-bar button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;display:grid;place-items:center;flex:none;transition:background .2s,transform .2s}
.sl-bar button:hover{background:rgba(255,255,255,.15)}
.sl-bar .sl-mic[aria-pressed=true]{background:#fff;color:#0C0C43}
.sl-bar .sl-end{width:auto;padding:0 18px;border-radius:99px;border:0;background:#ef4444;font-size:13.5px;font-weight:800;gap:6px;display:flex}
.sl-bar .sl-end:hover{background:#dc2626}
.sl[data-state=ended] .sl-mic,.sl[data-state=ended] .sl-end{display:none}
.sl-again{display:none !important;width:auto !important;padding:0 16px !important;border-radius:99px !important;font-size:13px;font-weight:800;background:#fff !important;color:#0C0C43 !important}
.sl[data-state=ended] .sl-again{display:flex !important;align-items:center}
/* tailles : compacte (pendant la visite) et bulle */
.sl[data-size=dock] .sl-panel{width:320px}
.sl[data-size=dock] .sl-media{aspect-ratio:16/11}
.sl[data-size=dock] .sl-name b{font-size:24px}
.sl[data-size=dock] .sl-cards{max-height:190px}
.sl[data-size=dock] .sl-end{width:46px;padding:0;font-size:0;gap:0;justify-content:center}
.sl[data-size=dock] .sl-st i{display:none}
.sl-bubble{display:none;position:relative;width:96px;height:96px;border-radius:50%;padding:0;border:0;background:#07072B;box-shadow:0 18px 50px rgba(5,5,32,.5)}
.sl-bubble::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from 0deg,#5600D1,#AC0FCA,#D32B98,#FF585A,#FE9C3F,#5600D1);animation:slSpin 4s linear infinite;z-index:-1;opacity:calc(.55 + var(--lv,0)*.45)}
@keyframes slSpin{to{transform:rotate(360deg)}}
.sl-bubble img,.sl-bubble video{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 22%;display:block;border:3px solid #07072B}
.sl-bubble em{position:absolute;right:2px;bottom:4px;width:22px;height:22px;border-radius:50%;background:#34d399;border:3px solid #07072B}
.sl.has-new .sl-bubble em{background:#FF585A;animation:slPing 1.4s infinite}
.sl.has-new .sl-bubble::after{content:"Nouveau";position:absolute;top:-6px;left:50%;transform:translateX(-50%);padding:2px 8px;border-radius:99px;background:#FF585A;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.04em}
.sl-say{display:none;position:absolute;right:106px;bottom:14px;width:max-content;max-width:min(300px,calc(100vw - 150px));padding:10px 14px;border-radius:16px 16px 4px 16px;background:#fff;color:#0C0C43;font-size:13px;font-weight:600;line-height:1.4;box-shadow:0 12px 30px rgba(5,5,32,.3)}
.sl-say:empty{display:none !important}
.sl[data-size=bubble] .sl-panel{display:none}
.sl[data-size=bubble] .sl-bubble{display:block}
.sl[data-size=bubble] .sl-say{display:block}
/* mise en avant d'une section montrée par Sofia */
.sl-hl{position:relative;outline:3px solid transparent;border-radius:24px;animation:slHl 2.6s ease-out 1}
@keyframes slHl{0%{box-shadow:0 0 0 0 rgba(211,43,152,0)}15%{box-shadow:0 0 0 6px rgba(211,43,152,.55),0 0 60px rgba(172,15,202,.35)}100%{box-shadow:0 0 0 0 rgba(211,43,152,0)}}
.sl-pageveil{position:fixed;inset:0;z-index:2147481000;background:linear-gradient(90deg,#5600D1,#AC0FCA,#D32B98,#FF585A,#FE9C3F);height:3px;transform-origin:0 50%;transform:scaleX(0);transition:transform .6s ease;pointer-events:none}
.sl-pageveil.go{transform:scaleX(.7)}.sl-pageveil.done{transform:scaleX(1);opacity:0;transition:transform .2s,opacity .4s .2s}
body.sl-open .ml-btn{display:none !important}
/* tablette et téléphone */
@media (max-width:899px){.sl{right:14px;bottom:14px}.sl-panel{width:360px}}
@media (max-width:640px){
  .sl{left:0;right:0;bottom:0}
  .sl[data-size=bubble]{left:auto;right:14px;bottom:14px}
  .sl-panel,.sl[data-size=dock] .sl-panel{width:100%;max-height:88vh;max-height:88dvh;border-radius:26px 26px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .sl-media,.sl[data-size=dock] .sl-media{aspect-ratio:auto;height:min(46vh,400px);height:min(46dvh,400px)}
  .sl[data-state=intro] .sl-media{height:min(38vh,330px);height:min(38dvh,330px)}
  .sl-cards{max-height:30vh}
  .sl-bubble{width:84px;height:84px}
  .sl-say{right:96px}
  .sl-st i{display:none}
  .sl-intro{padding:16px 18px 18px;gap:10px}
  .sl-intro h3{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.sl-panel,.sl-card,.sl-toast{animation:none}.sl-portrait img{animation:none;transition:none}.sl-loop{transition:none}.sl-bubble::before{animation:none}.sl-dot{animation:none}}

/* sous-titres : masqués à l'écran par défaut (restent annoncés aux lecteurs d'écran) ; .cc-on les réaffiche */
.sl:not(.cc-on) .sl-caps{position:absolute;left:0;bottom:0;width:1px;height:1px;min-height:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sl:not(.cc-on) .sl-say{display:none !important}
.sl:not(.cc-on) .sl-shade{height:42%}
/* agents métier : démo en situation */
.sl-feats .sl-try{flex-basis:100%;font-weight:600;font-style:italic;background:rgba(46,229,157,.1);border-color:rgba(46,229,157,.3);color:#D7FBEA;white-space:normal;line-height:1.45}
.sl-card.sl-act{box-shadow:0 10px 30px rgba(0,0,0,.25),inset 3px 0 0 #2EE59D}
.sl-card.sl-act .k{color:#0E9F6E}
.sl-card.sl-act h4::before{content:"✓ ";color:#0E9F6E}
