/* Robots assistants : couleurs et animations communes aux six dessins.
 * Pour passer aux couleurs d'une charte, redéfinir les variables --rb-* sur
 * :root ou sur n'importe quel parent du robot. */
:root{--rb-main:#7540ef;--rb-corps:#fff;--rb-doux:#efe9fe;--rb-visage:#16141c;--rb-oeil:#7ee0ff;--rb-etincelle:#f2a33c}
.rb{overflow:visible;display:block}
.rb .c-main{fill:var(--rb-main)}
.rb .c-trait{stroke:var(--rb-main)}
.rb .c-corps{fill:var(--rb-corps)}
.rb .c-doux{fill:var(--rb-doux)}
.rb .c-visage{fill:var(--rb-visage)}
.rb .c-oeil{fill:var(--rb-oeil)}
.rb .c-trait-oeil{stroke:var(--rb-oeil)}
.rb .c-trait-doux{stroke:var(--rb-main);opacity:.45}
.rb .c-etincelle{fill:var(--rb-etincelle)}
.rb .c-trait-etincelle{stroke:var(--rb-etincelle)}
.rb .c-reflet{fill:#fff;opacity:.85}
.rb .rb-ombre{fill:#000;opacity:.12;transform-box:fill-box;transform-origin:center;animation:rbOmbre 3.2s ease-in-out infinite}
.rb .rb-joue{opacity:.45}

/* Les mouvements de repos : il flotte, cligne, son antenne brille. */
.rb .rb-corps{animation:rbFlotte 3.2s ease-in-out infinite}
.rb .rb-oeil{animation:rbCligne 4.6s infinite;transform-box:fill-box;transform-origin:center}
.rb .rb-ant{animation:rbAnt 2.2s ease-in-out infinite}
.rb .rb-ant-2{animation-delay:-1.1s}
.rb .rb-regard{transform:translateX(var(--rb-regard,0px));transition:transform .35s}
.rb .rb-yeux{transition:transform .35s}
.rb .rb-bras-salut{transform:rotate(var(--pose,0deg))}
.rb .rb-oreille-g{animation:rbOreille 5s ease-in-out infinite}
.rb .rb-oreille-d{animation:rbOreille 5s ease-in-out infinite reverse}
.rb .rb-helice{transform-box:fill-box;transform-origin:center;animation:rbHelice .32s linear infinite}
.rb .rb-flamme{transform-box:fill-box;transform-origin:50% 0;animation:rbFlamme .28s ease-in-out infinite alternate}
.rb .rb-balayage{opacity:.16;animation:rbBalaye 2.6s linear infinite}
@keyframes rbFlotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes rbOmbre{0%,100%{transform:scaleX(1);opacity:.12}50%{transform:scaleX(.82);opacity:.07}}
@keyframes rbCligne{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes rbAnt{50%{opacity:.45}}
@keyframes rbOreille{0%,80%,100%{transform:rotate(0)}86%{transform:rotate(-9deg)}92%{transform:rotate(6deg)}}
@keyframes rbHelice{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.12)}}
@keyframes rbFlamme{from{transform:scaleY(1);opacity:1}to{transform:scaleY(.6);opacity:.7}}
@keyframes rbBalaye{from{transform:translateY(0)}to{transform:translateY(23px)}}

/* Les humeurs : data-humeur sur le svg. */
.rb .rb-b-plate,.rb .rb-b-o{display:none}
.rb[data-humeur="pense"] .rb-b-sourire,.rb[data-humeur="surpris"] .rb-b-sourire{display:none}
.rb[data-humeur="pense"] .rb-b-plate,.rb[data-humeur="surpris"] .rb-b-o{display:inline}
.rb[data-humeur="pense"] .rb-yeux{transform:translate(1.5px,-2.5px)}
.rb[data-humeur="pense"] .rb-ant{animation-duration:.7s}
.rb[data-humeur="surpris"] .rb-oeil{animation:none;transform:scale(1.22)}
.rb[data-humeur="salue"] .rb-bras-salut{animation:rbSalut .5s ease-in-out 4 alternate}
.rb[data-humeur="salue"] .rb-corps{animation:rbSautille .5s ease-in-out 2}
@keyframes rbSalut{from{transform:rotate(var(--pose,0deg))}to{transform:rotate(calc(var(--pose,0deg) - 130deg))}}
@keyframes rbSautille{0%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}

/* Moins d'animations demandé par la personne : tout s'arrête, le dessin reste. */
@media (prefers-reduced-motion:reduce){.rb,.rb *{animation:none!important;transition:none!important}}