/* ================================================================
   lion_marketing.css — Widget Lion LionTech v2
   Auto-apparition · Messages marketing · Animé
   ================================================================ */

#lt-lion{
  position:fixed;bottom:calc(80px + env(safe-area-inset-bottom,0px));right:20px;
  z-index:8500;display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  pointer-events:none;
}
@media(max-width:768px){#lt-lion{bottom:calc(78px + env(safe-area-inset-bottom,0px));right:12px}}

/* ── BUBBLE ── */
#lt-lion-bubble{
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:20px 20px 4px 20px;
  padding:14px 16px;max-width:255px;min-width:190px;
  box-shadow:0 12px 40px rgba(11,31,58,.16),0 4px 12px rgba(11,31,58,.08),0 0 0 1px rgba(11,31,58,.06);
  position:relative;pointer-events:all;transform-origin:bottom right;
  opacity:0;transform:scale(.6) translateY(16px);
  transition:opacity .35s cubic-bezier(.34,1.56,.64,1),transform .35s cubic-bezier(.34,1.56,.64,1);
}
#lt-lion-bubble.on{opacity:1;transform:scale(1) translateY(0)}
#lt-lion-bubble.off{opacity:0;transform:scale(.85) translateY(8px);transition:opacity .2s ease,transform .2s ease}
#lt-lion-bubble::before{
  content:'';position:absolute;top:0;left:14px;right:14px;height:3px;
  background:linear-gradient(90deg,#D4A017,#1A9E7A,#D4A017);
  background-size:200% 100%;border-radius:0 0 3px 3px;
  animation:gradShift 3s linear infinite;
}
@keyframes gradShift{from{background-position:0 0}to{background-position:200% 0}}

.lt-lb-brand{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#D4A017;margin-bottom:7px;display:flex;align-items:center;gap:5px}
.lt-lb-brand::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#D4A017;animation:dotBlink 1.5s ease-in-out infinite}
@keyframes dotBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}

.lt-lb-text{font-size:13px;font-weight:500;color:#0F172A;line-height:1.55}
.lt-lb-text strong{color:#0B1F3A;font-weight:700}

.lt-lb-tag{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:4px 11px;background:rgba(11,31,58,.06);border-radius:20px;font-size:10.5px;font-weight:600;color:#0B1F3A}

.lt-lb-prog{height:2px;background:#E2E8F0;border-radius:2px;margin-top:10px;overflow:hidden}
.lt-lb-bar{height:100%;background:linear-gradient(90deg,#D4A017,#1A9E7A);border-radius:2px;width:100%;transform-origin:left;animation:progShrink 8s linear forwards}
@keyframes progShrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}

.lt-lb-close{
  position:absolute;top:8px;right:8px;width:20px;height:20px;
  border-radius:50%;background:#F1F5F9;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:.5;transition:opacity .15s,background .15s;
  font-size:11px;color:#374151;line-height:1;pointer-events:all;
}
.lt-lb-close:hover{opacity:1;background:#E2E8F0}

/* ── AVATAR ── */
#lt-lion-av{
  width:60px;height:60px;cursor:pointer;pointer-events:all;
  position:relative;flex-shrink:0;
  filter:drop-shadow(0 6px 16px rgba(212,160,23,.35));
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
#lt-lion-av:hover{transform:scale(1.1) translateY(-3px)}
#lt-lion-av:active{transform:scale(.93)}

#lt-lion-av svg{width:100%;height:100%}

/* Animations SVG */
#lb-body{animation:breathe 3.5s ease-in-out infinite;transform-origin:center bottom}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.04) scaleX(.98)}}

#lb-eye-l,#lb-eye-r{animation:blink 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
#lb-eye-r{animation-delay:.1s}
@keyframes blink{0%,88%,100%{transform:scaleY(1)}93%{transform:scaleY(.05)}}

#lb-tail{animation:wag 2s ease-in-out infinite;transform-origin:top left}
@keyframes wag{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}

#lb-ear-l,#lb-ear-r{animation:eartwitch 5s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}
#lb-ear-r{animation-delay:.35s}
@keyframes eartwitch{0%,80%,100%{transform:rotate(0)}88%{transform:rotate(-7deg)}}

/* Ring */
#lt-lion-ring{position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(212,160,23,.45);pointer-events:none;animation:ring 2.2s ease-out infinite}
@keyframes ring{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.35);opacity:0}}

/* CTA label */
#lt-lion-cta{
  position:absolute;top:-8px;right:-4px;
  background:linear-gradient(135deg,#D4A017,#F0C040);
  color:#0B1F3A;font-size:8.5px;font-weight:800;
  padding:2px 7px;border-radius:10px;white-space:nowrap;
  animation:ctaPop 1s cubic-bezier(.34,1.56,.64,1) 2s both;
  box-shadow:0 2px 8px rgba(212,160,23,.4);
  pointer-events:none;letter-spacing:.3px;
}
@keyframes ctaPop{from{opacity:0;transform:scale(0) translateY(4px)}to{opacity:1;transform:scale(1)}}