/* ===== Mascotte « Savi » ===== */
.mascotte{position:fixed;right:18px;bottom:18px;width:118px;height:126px;z-index:9998;
  cursor:pointer;transform:translateY(140px) scale(.6);opacity:0;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s;filter:drop-shadow(0 10px 18px rgba(4,36,28,.28))}
.mascotte.on{transform:translateY(0) scale(1);opacity:1}
.msc-svg{width:100%;height:100%;overflow:visible;transform-origin:50% 90%;animation:mscIdle 4.5s ease-in-out infinite}
@keyframes mscIdle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-1.5deg)}}

.msc-shadow{fill:rgba(4,36,28,.16)}
.msc-body{fill:#0f6e56}
.msc-belly{fill:#e7f6ef}
.msc-tuft{fill:#0c5744}
.msc-wing path{fill:#0c5744}
.msc-foot{fill:none;stroke:#f5b300;stroke-width:3.4;stroke-linecap:round}
.msc-beak{fill:#f5b300}
.msc-eye-w{fill:#fff}
.msc-pupil{fill:#12251f}
.msc-glint{fill:#fff}
.msc-brow{fill:none;stroke:#0c5744;stroke-width:4;stroke-linecap:round;opacity:0}
.msc-heart{fill:#e0466a;font-size:20px;font-family:Arial,sans-serif;opacity:0;text-anchor:middle}

/* clignement périodique */
.msc-eye{transform-box:fill-box;transform-origin:center;animation:mscBlink 5s infinite}
.msc-eye-r{animation-delay:.08s}
@keyframes mscBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}

/* pupilles qui bougent doucement */
.msc-pupil{animation:mscLook 6s ease-in-out infinite}
@keyframes mscLook{0%,100%{transform:translate(0,0)}25%{transform:translate(-2.5px,1px)}60%{transform:translate(2.5px,0)}}

/* aile gauche repos */
.msc-wing-l{transform-box:fill-box;transform-origin:80% 10%}
/* aile droite : salut */
.msc-wing-r{transform-box:fill-box;transform-origin:20% 10%}

/* ---- État BONJOUR : l'aile droite fait coucou + petit rebond ---- */
#mascotte.state-bonjour .msc-svg{animation:mscHop .6s ease}
#mascotte.state-bonjour .msc-wing-r{animation:mscWave 1.6s ease}
@keyframes mscWave{0%,100%{transform:rotate(0)}15%{transform:rotate(-32deg)}35%{transform:rotate(-8deg)}55%{transform:rotate(-32deg)}75%{transform:rotate(-8deg)}}
@keyframes mscHop{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px)}70%{transform:translateY(0)}}

/* ---- État PAIEMENT : saut de joie + coeurs + sourcils contents ---- */
#mascotte.state-paiement .msc-svg{animation:mscJump .8s ease}
#mascotte.state-paiement .msc-heart-1{animation:mscHeart 1.3s ease}
#mascotte.state-paiement .msc-heart-2{animation:mscHeart 1.3s ease .2s}
#mascotte.state-paiement .msc-wing-r{animation:mscCheer 1s ease}
#mascotte.state-paiement .msc-wing-l{animation:mscCheerL 1s ease}
@keyframes mscJump{0%,100%{transform:translateY(0)}30%{transform:translateY(-22px)}45%{transform:translateY(-22px)}75%{transform:translateY(0)}}
@keyframes mscHeart{0%{opacity:0;transform:translateY(0) scale(.5)}30%{opacity:1}100%{opacity:0;transform:translateY(-30px) scale(1.1)}}
@keyframes mscCheer{0%,100%{transform:rotate(0)}40%{transform:rotate(-46deg)}}
@keyframes mscCheerL{0%,100%{transform:rotate(0)}40%{transform:rotate(46deg)}}

/* ---- État STOP : aile levée + sourcils + tête qui se balance ---- */
#mascotte.state-stop .msc-svg{animation:mscTilt 1.2s ease}
#mascotte.state-stop .msc-wing-r{transform:rotate(-58deg)}
#mascotte.state-stop .msc-brow{opacity:1;animation:mscBrow 1.2s ease}
@keyframes mscTilt{0%,100%{transform:rotate(0)}25%{transform:rotate(5deg)}60%{transform:rotate(-5deg)}}
@keyframes mscBrow{0%{transform:translateY(-4px)}100%{transform:translateY(0)}}

/* ---- État LIKE : coeurs + petit rebond ---- */
#mascotte.state-like .msc-svg{animation:mscHop .6s ease}
#mascotte.state-like .msc-heart-1{animation:mscHeart 1.2s ease}
#mascotte.state-like .msc-heart-2{animation:mscHeart 1.2s ease .25s}

/* ---- Bulle de dialogue ---- */
.msc-bubble{position:absolute;right:104px;bottom:64px;min-width:150px;max-width:230px;
  background:#fff;color:#12251f;border-radius:14px;padding:11px 14px;font-size:13.5px;font-weight:600;line-height:1.3;
  box-shadow:0 12px 30px rgba(4,36,28,.22);opacity:0;transform:translateY(8px) scale(.9);transform-origin:100% 100%;
  transition:opacity .25s,transform .25s;pointer-events:none}
.msc-bubble.on{opacity:1;transform:translateY(0) scale(1)}
.msc-bubble:after{content:"";position:absolute;right:-8px;bottom:16px;border:8px solid transparent;border-left-color:#fff;border-right:0}
@media(max-width:560px){ .mascotte{width:92px;height:100px;right:12px;bottom:12px}
  .msc-bubble{right:82px;bottom:52px;min-width:120px;max-width:180px;font-size:12.5px} }

/* Mode nuit (espace gestion) */
body.nuit .msc-bubble{background:#1b2723;color:#e6ece9}
body.nuit .msc-bubble:after{border-left-color:#1b2723}