/* La Bulle (voir mascot.js). Animations en transform et opacity uniquement. */
.bulle{position:relative;display:inline-block;width:56px;height:56px;flex:none;vertical-align:middle;-webkit-tap-highlight-color:transparent;user-select:none}
.bulle-svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 90%;transition:transform .5s cubic-bezier(.32,.72,0,1)}
.bulle-tap{cursor:pointer}
.bulle-tap:active .bulle-svg{transform:scale(1.08,.92)}
.bulle .m-look{transition:transform .35s cubic-bezier(.32,.72,0,1)}
.bulle .m-eyes{transform-box:fill-box;transform-origin:center;animation:m-blink 4.6s infinite}
@keyframes m-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.bulle .m-happy,.bulle .m-brow,.bulle .m-x{opacity:0;transition:opacity .15s}

/* Contente : yeux en arcs, petit saut */
.bulle.is-happy .m-eyes{opacity:0}
.bulle.is-happy .m-happy{opacity:1}
.bulle.is-happy .bulle-svg{animation:m-jump .7s cubic-bezier(.3,.7,.3,1)}
@keyframes m-jump{0%{transform:none}25%{transform:translateY(4%) scale(1.06,.92)}55%{transform:translateY(-22%) scale(.96,1.05)}80%{transform:translateY(2%) scale(1.04,.96)}100%{transform:none}}

/* Triste : sourcils inquiets, léger tremblement */
.bulle.is-sad .m-brow{opacity:1}
.bulle.is-sad .bulle-svg{animation:m-shake .5s ease-in-out 2}
@keyframes m-shake{0%,100%{transform:none}25%{transform:translateX(-5%) rotate(-3deg)}75%{transform:translateX(5%) rotate(3deg)}}

/* Salut : se balance */
.bulle.is-wave .m-eyes{opacity:0}
.bulle.is-wave .m-happy{opacity:1}
.bulle.is-wave .bulle-svg{animation:m-wave 1.4s cubic-bezier(.3,.7,.3,1)}
@keyframes m-wave{0%,100%{transform:none}15%{transform:rotate(-14deg)}35%{transform:rotate(12deg)}55%{transform:rotate(-9deg)}75%{transform:rotate(5deg)}}

/* Hoche la tête */
.bulle.is-nod .bulle-svg{animation:m-nod .8s ease-in-out}
@keyframes m-nod{0%,100%{transform:none}25%,75%{transform:translateY(8%) scale(1.02,.96)}50%{transform:translateY(-3%)}}

/* Râle (easter egg, 6 clics) */
.bulle.is-grumpy .m-eyes{animation:none;transform:scaleY(.3)}

/* Tournis (easter egg, 10 clics) */
.bulle.is-dizzy .m-eyes{opacity:0}
.bulle.is-dizzy .m-x{opacity:1}
.bulle.is-dizzy .bulle-svg{animation:m-dizzy 1.6s cubic-bezier(.3,.7,.2,1)}
@keyframes m-dizzy{0%{transform:rotate(0) scale(1)}20%{transform:rotate(-30deg) scale(1.15,.85)}70%{transform:rotate(740deg) scale(.9)}100%{transform:rotate(720deg) scale(1)}}

/* Réfléchit : trois points pendant un chargement */
.m-think{position:absolute;right:-6%;top:-8%;display:flex;gap:9%;width:60%;opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s cubic-bezier(.32,.72,0,1);pointer-events:none}
.m-think i{flex:1;aspect-ratio:1;border-radius:50%;background:#4A47FF;box-shadow:0 0 0 2px #fff}
.bulle.is-think .m-think{opacity:1;transform:none}
.bulle.is-think .m-think i{animation:m-dot 1s ease-in-out infinite}
.bulle.is-think .m-think i:nth-child(2){animation-delay:.15s}
.bulle.is-think .m-think i:nth-child(3){animation-delay:.3s}
@keyframes m-dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-60%);opacity:1}}
.bulle.is-think .m-look{transform:translate(4px,-8px)!important}

/* Bulle de texte (courte, ne capte aucun clic) */
.m-say{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(6px) scale(.7);opacity:0;background:#fff;color:#0B0B86;font:650 13px/1.3 -apple-system,BlinkMacSystemFont,"Geist",system-ui,sans-serif;padding:8px 12px;border-radius:14px;white-space:nowrap;pointer-events:none;z-index:5;box-shadow:0 10px 24px -10px rgba(5,5,60,.5);transition:opacity .25s,transform .4s cubic-bezier(.32,.72,0,1)}
.m-say.on{opacity:1;transform:translateX(-50%)}

/* Mini-bulles de l'explosion */
.mini-bulle{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:4;background:radial-gradient(circle at 40% 38%,#6E6BFF 0 34%,#4A47FF 35% 64%,#2A27D9 65%)}
.mini-bulle::before,.mini-bulle::after{content:"";position:absolute;top:42%;width:18%;height:30%;border-radius:50%;background:#fff}
.mini-bulle::before{left:30%}.mini-bulle::after{right:30%}

/* Mascotte fixe : mouvement réduit demandé par le système ou « Mascotte animée » désactivée */
.bulle-calme .bulle *,.bulle-calme .bulle-svg{animation:none!important;transition:none!important}
.bulle-calme .bulle .m-look{transform:none!important}
@media (prefers-reduced-motion:reduce){.bulle *,.bulle-svg{animation:none!important;transition:none!important}}
/* Bulle placée contre un bord droit : la bulle de texte s'ouvre à gauche */
.bulle.say-left .m-say{left:auto;right:calc(100% + 8px);bottom:auto;top:50%;transform:translateY(-50%) translateX(6px) scale(.7)}
.bulle.say-left .m-say.on{transform:translateY(-50%)}