/* ════════════════════════════════════════════════════════════════════════════
   Mimi vivante (2,5D), StockFinity v7.9.2. Chargé seulement par les pages qui
   l'utilisent : <link rel="stylesheet" href="{{ '/site/mimi-live.css' | asset_v }}">
   Poses recadrées 400×680 (+ -200.webp) dans /site/mimi/. JS : /site/mimi-live.js.
   Sans JS : la pose de base s'affiche, fixe (amélioration progressive).
   Seuls transform et opacity sont animés. Mouvement réduit : tout est coupé.
   Réglages (variables CSS, sur .mimi-live ou un parent) :
     --ml-w      largeur du personnage (défaut 240px) ; la hauteur suit (ratio 400/680)
     --ml-w-sm   largeur en mobile (≤ 640 px) d'une Mimi avec bulle (défaut clamp(200px,58vw,240px))
     --ml-say-h  bande réservée au-dessus de Mimi pour la bulle data-say (défaut 48px)
     --ml-halo   couleur du halo (défaut émeraude)
   ════════════════════════════════════════════════════════════════════════════ */
.mimi-live{
  --ml-w:240px;
  --ml-halo:rgba(16,185,129,.34);
  --ml-ease:cubic-bezier(.16,1,.3,1);
  position:relative;display:block;flex:none;
  width:var(--ml-w);max-width:100%;aspect-ratio:400/680;height:auto;
  margin:0;isolation:isolate;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
  touch-action:manipulation;
}
/* Poses empilées : UNE seule visible à la fois, sans transition (coupe nette faite
   par le JS dans une seule frame, masquée par le rebond de .ml-body). Aucun scale,
   aucune ombre par couche. Spécificité (0,2,0) : l'emporte sur les « .mimi-fig img ». */
.mimi-live .ml-pose{
  position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;
  margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;filter:none;
  object-fit:contain;object-position:50% 100%;
  opacity:0;transform:none;transition:none;
  pointer-events:none;-webkit-user-drag:none;
}
.mimi-live .ml-pose.is-on{opacity:1}
/* Variante de test (data-swap="fade") : fondu croisé 80 ms. Écartée : à mi-course
   les deux silhouettes (bras) se voient. Gardée pour pouvoir re-mesurer. */
.mimi-live[data-swap="fade"] .ml-pose{transition:opacity 80ms linear}
/* Sans JS (pas de .ml-ready) : la première pose est simplement affichée. */
.mimi-live:not(.ml-ready) .ml-pose:first-of-type{opacity:1}

/* Calques construits par le JS : tilt (pointeur) > float > sway > breathe > body > poses */
.mimi-live .ml-stage{position:absolute;inset:0;perspective:900px;perspective-origin:50% 40%}
.mimi-live .ml-tilt{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;transform-origin:50% 80%}
.mimi-live .ml-float,.mimi-live .ml-sway,.mimi-live .ml-breathe,.mimi-live .ml-body{position:absolute;inset:0}
.mimi-live .ml-float{animation:ml-float 6.4s ease-in-out infinite}
.mimi-live .ml-sway{transform-origin:50% 86%;animation:ml-sway 7.2s ease-in-out infinite}
.mimi-live .ml-breathe{transform-origin:50% 86%;animation:ml-breathe 5.6s ease-in-out infinite}
/* Corps : cible du rebond (WAAPI) et porteur de l'UNIQUE ombre portée. Pas de will-change :
   l'ombre est alors peinte une fois dans le calque animé (mesuré : ~60 i/s au lieu de ~52). */
.mimi-live .ml-body{transform-origin:50% 90%;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}

/* Disque émeraude UNI et ombre au sol UNIE (derrière le personnage). Aucun
   dégradé : ellipses pleines semi-transparentes, opacité réglée ici. */
.mimi-live .ml-halo{position:absolute;left:14%;right:14%;top:16%;height:50%;z-index:-1;border-radius:50%;
  background:var(--ml-halo);opacity:.4;
  animation:ml-halo 5.6s ease-in-out infinite;pointer-events:none}
.mimi-live .ml-shadow{position:absolute;left:29%;width:42%;top:82.5%;height:5.5%;z-index:-1;border-radius:50%;
  background:rgba(0,0,0,.4);
  animation:ml-shadow 6.4s ease-in-out infinite;pointer-events:none}

@keyframes ml-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-1.4%,0)}}
@keyframes ml-sway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
@keyframes ml-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
@keyframes ml-halo{0%,100%{opacity:.3;transform:scale(.96)}50%{opacity:.45;transform:scale(1.04)}}
@keyframes ml-shadow{0%,100%{opacity:1;transform:scaleX(1)}50%{opacity:.72;transform:scaleX(.9)}}

/* Hors écran ou onglet caché : boucles en pause (économie batterie) */
.mimi-live.ml-off .ml-float,.mimi-live.ml-off .ml-sway,.mimi-live.ml-off .ml-breathe,
.mimi-live.ml-off .ml-halo,.mimi-live.ml-off .ml-shadow{animation-play-state:paused}

/* Avec une bulle : une bande est RÉSERVÉE au-dessus du personnage (padding-top),
   le personnage garde toute sa taille et la bulle ne couvre jamais le visage. */
.mimi-live[data-say]{box-sizing:content-box;padding-top:var(--ml-say-h,48px)}
.mimi-live[data-say] .ml-stage{top:var(--ml-say-h,48px)}
@media (max-width:640px){
  .mimi-live[data-say]{width:var(--ml-w-sm,clamp(200px,58vw,240px))}
}

/* Bulle de parole (data-say), décorative, au survol / au tap. Posée dans la bande
   du haut, au-dessus de la tête (jamais rognée par un parent overflow:hidden). */
.mimi-live .ml-say{position:absolute;z-index:2;bottom:calc(100% - var(--ml-say-h,48px) - 6px);right:0;
  width:max-content;max-width:100%;
  padding:8px 12px;border-radius:14px 14px 4px 14px;
  background:#171717;border:1px solid rgba(16,185,129,.45);color:#E5E7EB;
  font:600 14px/1.35 "Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  letter-spacing:-.01em;text-align:left;white-space:normal;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.7);
  opacity:0;transform:translate3d(0,6px,0) scale(.96);transform-origin:80% 100%;
  transition:opacity 200ms ease-out,transform 200ms var(--ml-ease);pointer-events:none}
.mimi-live .ml-say.is-left{right:auto;left:0;border-radius:14px 14px 14px 4px;transform-origin:20% 100%}
.mimi-live.ml-talk .ml-say{opacity:1;transform:none}

/* Mouvement réduit : pose fixe, aucune boucle, aucun rebond */
@media (prefers-reduced-motion:reduce){
  .mimi-live .ml-float,.mimi-live .ml-sway,.mimi-live .ml-breathe,
  .mimi-live .ml-halo,.mimi-live .ml-shadow{animation:none}
  .mimi-live .ml-pose,.mimi-live .ml-say{transition:none}
  .mimi-live .ml-tilt,.mimi-live .ml-body{transform:none!important;will-change:auto}
}
.mimi-live.ml-still .ml-float,.mimi-live.ml-still .ml-sway,.mimi-live.ml-still .ml-breathe,
.mimi-live.ml-still .ml-halo,.mimi-live.ml-still .ml-shadow{animation:none}
.mimi-live.ml-still .ml-tilt{transform:none!important}