/* Boulpi : animations validées le 31/10/2026 ; le chargement et le rond de la carte d'état remplacés le 01/11/2026 par les SVG
   animés (1.0.3).
   Ne pas changer les durées ni les mouvements. Tout s'arrête avec prefers-reduced-motion.
   Les SVG s'affichent en <img> ; la taille se règle avec --mbb-taille. */

/* 1. Chargement (1.0.3) : élan, saut, tour complet en l'air, atterrissage, rebond — boucle de 2,6 s, animation SMIL dans le SVG
   lui-même, une seule image dans un <picture> dont la source « moins d'animations » donne l'image fixe au même cadrage. L'image
   occupe un carré de côté --mbb-taille × 1,16 (la hauteur de la boîte du chargement 1.0.2). */
.mbb-chargement{--mbb-taille:190px;position:relative;width:calc(var(--mbb-taille)*1.16);height:calc(var(--mbb-taille)*1.16)}
.mbb-chargement picture,.mbb-chargement img{display:block;width:100%;height:100%;max-width:none;margin:0;padding:0;border:0}

/* 2. Transformation d'humeur (MASI Fear & Greed) : jouée une fois, quand la zone a changé depuis la séance précédente. 0,7 s. */
.mbb-transformation{transform-origin:50% 100%;animation:mbb-transformation .7s cubic-bezier(.3,.7,.4,1) both}
@keyframes mbb-transformation{0%{transform:translateY(0) scaleX(.04);opacity:.3}30%{transform:translateY(-12%) scaleX(1);opacity:1}62%{transform:translateY(0) scale(1.06,.92)}82%{transform:translateY(-2%) scale(.98,1.02)}100%{transform:translateY(0) scale(1,1)}}

/* 3. Carte d'état à côté du MASI et du MASI 20 : le rond (1.0.3 : il dort quand le marché est fermé — il respire, des « z »
   montent, 6 s ; éveillé en séance — clignements, regards, petit saut, étincelles, 8 s ; animation CSS dans le SVG, image fixe
   par <picture>) garde la taille et la place de la 1.0.2 : une boîte de 43 px, sans disque de fond ; le cadre de l'image animée
   est plus grand (saut, « z », étincelles) et déborde du rond : −6,5854 % à gauche, −25 % en haut, 141,4634 % × 126,8293 %.
   Au changement d'état page ouverte, la boîte du rond fait un petit saut. 0,5 s. */
.mbb-carte{box-sizing:border-box;width:300px;height:61px;border:1px solid #253045;border-radius:8px;background:#0D1422;display:flex;align-items:center;gap:12px;padding:0 16px 0 9px;font-family:inherit}
.mbb-carte .mbb-pastille{position:relative;display:block;width:43px;height:43px;flex:0 0 auto}
.mbb-carte .mbb-pastille picture{display:block;width:100%;height:100%}
.mbb-carte .mbb-pastille img{position:absolute;left:-6.5854%;top:-25%;width:141.4634%;height:126.8293%;max-width:none;display:block;margin:0;padding:0;border:0;background:none}
.mbb-carte .mbb-l1{display:block;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#6A84A8}
.mbb-carte .mbb-l2{display:block;margin-top:3px;font-size:16px;font-weight:700;color:#E8EEF8}
.mbb-pastille-change{animation:mbb-pastille .5s ease-out both}
@keyframes mbb-pastille{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

/* 4. Page 404 : de dos, il se retourne vers le visiteur. Une fois, 2,2 s après 0,6 s. */
.mbb-retourne{position:relative;transform-origin:50% 100%;animation:mbb-retourne 2.2s ease-in-out .6s both}
.mbb-retourne .mbb-retourne-dos,.mbb-retourne .mbb-retourne-face{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.mbb-retourne .mbb-retourne-dos{animation:mbb-retourne-dos 2.2s step-end .6s both}
.mbb-retourne .mbb-retourne-face{animation:mbb-retourne-face 2.2s step-end .6s both}
@keyframes mbb-retourne{0%,35%{transform:translateY(0) scaleX(1)}50%{transform:translateY(0) scaleX(.03)}65%{transform:translateY(0) scaleX(1)}78%{transform:translateY(-10%) scale(1,1)}90%{transform:translateY(0) scale(1.05,.94)}100%{transform:translateY(0) scale(1,1)}}
@keyframes mbb-retourne-dos{0%{opacity:1}50%{opacity:0}100%{opacity:0}}
@keyframes mbb-retourne-face{0%{opacity:0}50%{opacity:1}100%{opacity:1}}

/* 5. Merci (sondages) : petit saut après un vote, le même quel que soit le vote. Une fois, 0,8 s. */
.mbb-merci{transform-origin:50% 100%;animation:mbb-merci .8s cubic-bezier(.3,.7,.4,1) both}
@keyframes mbb-merci{0%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-14%) scale(1,1)}60%{transform:translateY(0) scale(1.06,.92)}80%{transform:translateY(-3%) scale(.98,1.02)}100%{transform:translateY(0) scale(1,1)}}

/* Moins d'animations demandé par le visiteur : tout est fixe, face visible. Le chargement et le rond de la carte passent
   d'eux-mêmes à leur image fixe (source « prefers-reduced-motion: reduce » du <picture>). */
@media (prefers-reduced-motion:reduce){
  .mbb-transformation,.mbb-pastille-change,
  .mbb-retourne,.mbb-retourne .mbb-retourne-dos,.mbb-retourne .mbb-retourne-face,.mbb-merci{animation:none}
  .mbb-retourne .mbb-retourne-dos{opacity:0}
  .mbb-retourne .mbb-retourne-face{opacity:1}
}