/* Visage animé du robot (assistants boutique et backoffice) */
.rb{display:block;width:100%;height:100%;overflow:visible;animation:rbBob 2.8s ease-in-out infinite}
.rb .f,.rb .x{display:none}
.rb[data-mood="happy"] .f-happy,.rb[data-mood="talk"] .f-talk,.rb[data-mood="think"] .f-think,.rb[data-mood="surprise"] .f-surprise,.rb[data-mood="sad"] .f-sad,
.rb[data-mood="love"] .f-love,.rb[data-mood="wink"] .f-wink,.rb[data-mood="celebrate"] .f-celebrate,.rb[data-mood="confused"] .f-confused{display:inline}
.rb[data-mood="think"] .x-think,.rb[data-mood="confused"] .x-confused{display:inline}
.rb-eye,.rb-orange,.rb-look{fill:#ff7900}.rb-white{fill:#fff}.rb-heart{fill:#ff3b6b;transform-box:fill-box;transform-origin:center}
.rb-line,.rb-brow,.rb-arc{fill:none;stroke-linecap:round;stroke-linejoin:round}.rb-line{stroke:#fff;stroke-width:2.6}.rb-brow{stroke:#ff7900;stroke-width:3}.rb-arc{stroke:#ff7900;stroke-width:4}
.rb-mouth{fill:#fff;transform-box:fill-box;transform-origin:center}
.rb-tear{fill:#4bb4e6}.rb-dot{fill:#ff7900}.rb-q{fill:#ff7900;font:700 20px "Rubik",sans-serif}
.rb-eye{transform-box:fill-box;transform-origin:center;animation:rbBlink 4.2s infinite}
.rb-ball{transform-box:fill-box;transform-origin:center;animation:rbPing 1.6s ease-in-out infinite}
.rb[data-mood="talk"] .rb-mouth{animation:rbTalk .26s ease-in-out infinite alternate}
.rb[data-mood="think"] .rb-ball{animation:rbPing .6s ease-in-out infinite}
.rb[data-mood="think"] .rb-look{animation:rbLook 1.8s ease-in-out infinite}
.rb-dot{animation:rbDot 1.3s infinite both}.rb-dot:nth-child(2){animation-delay:.2s}.rb-dot:nth-child(3){animation-delay:.4s}
.rb[data-mood="surprise"]{animation:rbJump .5s cubic-bezier(.2,.9,.3,1.3) 1}
.rb[data-mood="celebrate"]{animation:rbDance .5s ease-in-out infinite alternate}
.rb[data-mood="love"] .rb-heart{animation:rbPulse .7s ease-in-out infinite}
.rb[data-mood="sad"]{animation:rbSad 3s ease-in-out infinite}.rb[data-mood="sad"] .rb-tear{animation:rbTear 1.5s ease-in infinite}
.rb[data-mood="confused"]{animation:rbTilt 1.6s ease-in-out infinite}
@keyframes rbBob{50%{transform:translateY(-2px)}}
@keyframes rbBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes rbPing{50%{transform:scale(1.4);opacity:.65}}
@keyframes rbTalk{from{transform:scaleY(.25)}to{transform:scaleY(1.15)}}
@keyframes rbLook{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-2px)}}
@keyframes rbDot{0%,20%{opacity:0;transform:translateY(3px)}50%,80%{opacity:1;transform:none}100%{opacity:0}}
@keyframes rbJump{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-6px) scale(1.12)}100%{transform:translateY(0) scale(1)}}
@keyframes rbDance{from{transform:rotate(-7deg) translateY(0)}to{transform:rotate(7deg) translateY(-3px)}}
@keyframes rbPulse{50%{transform:scale(1.25)}}
@keyframes rbSad{50%{transform:translateY(2px) scale(.98)}}
@keyframes rbTear{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(12px);opacity:0}}
@keyframes rbTilt{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.rb,.rb *{animation:none!important}}
/* effets HTML */
.fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5}
.fx .cf{position:absolute}
.fx .heart{position:absolute;width:16px;height:14px;background:#ff3b6b;clip-path:polygon(50% 100%,0 35%,0 12%,18% 0,50% 18%,82% 0,100% 12%,100% 35%)}