/* =======================================================
   Mini-Serge – placement individuel (panneaux pairs)
   ======================================================= */

/* Ligne “sol” commune (ajuste globalement la hauteur) */
:root {
  --line-y: 83vh;
}

/* Sprite générique */
.panel .sprite {
  position: absolute;
  z-index: 2; /* au-dessus du masque ::before */
  pointer-events: none;
  left: var(
    --x,
    80vw
  ); /* valeurs par défaut (écrasées par classes ci-dessous) */
  top: var(--y, var(--line-y));
  width: var(--w, clamp(80px, 12vw, 160px));
  transform: translate(-50%, -50%) scaleX(var(--flip, 1));
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
  animation: ms-float 3.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
    ms-step 0.6s steps(2) infinite;
}

/* Oscillation douce + micro “pas”
@keyframes ms-float {
  0% {
    transform: translate(-50%, -50%) translateY(0) scaleX(var(--flip, 1));
  }
  50% {
    transform: translate(-50%, -50%) translateY(-8px) scaleX(var(--flip, 1));
  }
  100% {
    transform: translate(-50%, -50%) translateY(0) scaleX(var(--flip, 1));
  }
}
@keyframes ms-step {
  0% {
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
  }
  50% {
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.3));
  }
  100% {
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
  }
} */

/* ===========================
   Réglages INDIVIDUELS
   (modifie uniquement ces lignes)
   --x   : position horizontale (vw)
   --y   : hauteur (vh) – laisse var(--line-y) si OK
   --w   : taille responsive (clamp)
   --flip: 1 (droite) / -1 (gauche)
   =========================== */

/* P2 */
#p2 .s-p2-1 {
  --x: 13vw;
  --y: 26vh;
  --w: clamp(80px, 10vw, 140px);
  --flip: 1;
}

/* P4 */
#p4 .s-p4-1 {
  --x: 59vw;
  --y: 82.5vh;
  --w: clamp(80px, 10vw, 140px);
  --flip: 1;
}

/* P6 */
#p6 .s-p6-1 {
  --x: 20vw;
  --y: 64vh;
  --w: clamp(80px, 10vw, 140px);
  --flip: 1;
}

/* P8 */
#p8 .s-p8-1 {
  --x: 60vw;
  --y: 85vh;
  --w: clamp(80px, 10vw, 140px);
  --flip: 1;
}

/* Mobile */
@media (max-width: 900px) {
  :root {
    --line-y: 80vh;
  }
  .panel .sprite {
    width: clamp(72px, 20vw, 120px);
  }
}