/* ============================================================
 EFFET « PHOTOS QUI S'ÉCARTENT AU SCROLL » — Mimosa
 Classes : conteneur = mimo-eclate | images = mimo-photo | titre + bouton = mimo-texte
 Tout le style (tailles, arrondis, ombres, hauteur, typo) se règle dans Elementor.
 Ici, il ne reste que le mouvement.

 Compatible WP Rocket (RUCSS + minification) :
 - les positions de chaque photo (--x, --y, --r) sont posées par le script
   en style inline (voir POSITIONS dans mimo-eclate.js) : plus de sélecteur
   « :nth-child(n of …) » que l'optimisation pourrait casser ;
 - plus de règle dépendant d'une classe ajoutée en JS (is-actif) ;
 - valeurs de repli dans chaque var() : si le script n'a pas encore tourné,
   les photos restent proprement empilées au centre.
============================================================ */
/* La largeur d'écran minimale est réglée dans l'admin (attribut media du fichier). */

.mimo-eclate {
  --tas: .25;        /* resserrement du tas de départ (0 = tout au centre) — réglable dans l'admin */
  --zoom-tas: 1.18;  /* taille des photos quand elles sont en tas — réglable dans l'admin */
  --p: 0;
  position: relative;
  container-type: inline-size;
}

.mimo-eclate .mimo-photo {
  --k: calc(var(--tas, .25) + (1 - var(--tas, .25)) * var(--p, 0));
  position: absolute !important;
  left: var(--cx, 50%); /* centre calculé par le script (sur le titre + bouton) */
  top: var(--cy, 50%);
  margin: 0 !important;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    translate(calc(var(--x, 0) * var(--k) * 1cqw), calc(var(--y, 0) * var(--k) * 1cqw))
    rotate(calc(var(--r, 0) * 1deg))
    scale(calc(var(--zoom-tas, 1.18) + (1 - var(--zoom-tas, 1.18)) * var(--p, 0)));
}

/* Le titre et le bouton apparaissent quand les photos se sont écartées */
.mimo-eclate .mimo-texte {
  opacity: clamp(0, calc((var(--p, 0) - .55) * 3), 1);
}

/* Dans l'éditeur Elementor : on affiche l'état final pour pouvoir travailler */
.elementor-editor-active .mimo-eclate { --p: 1 !important; }