/* ==========================================================================
   Éventail de sachets Müesli — Mustli (fond transparent)
   ========================================================================== */

.mustli-fan {
  --mf-h: 520px;
  --mf-w: 900px;
  --mf-speed: 1;
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--mf-w);
  margin: 0 auto;
  background: transparent;
}
.mustli-fan *, .mustli-fan *::before, .mustli-fan *::after { box-sizing: border-box; }

.mustli-fan__stage {
  position: relative;
  width: 100%;
  height: var(--mf-h);
  overflow: visible;
}

/* Chaque couche : position finale = translateX(--mf-x) scale(--mf-s), ancrée en bas au centre */
.mustli-fan__layer {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 100%;
  z-index: var(--mf-z, 1);
  transform-origin: 50% 100%;
  opacity: 0;
  transform: translateX(-50%) translateX(var(--mf-x, 0%)) translateY(60px) scale(calc(var(--mf-s, 1) * 0.65));
  will-change: transform, opacity;
}

.mustli-fan__bag {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  pointer-events: none;
}
.mustli-fan.has-shadow .mustli-fan__bag {
  filter: drop-shadow(0 22px 26px rgba(67, 48, 29, 0.32));
}
/* les couches du fond sont un peu plus sombres pour la profondeur */
.mustli-fan__layer[style*="--mf-depth: 1"] .mustli-fan__bag { filter: brightness(0.94) drop-shadow(0 18px 22px rgba(67, 48, 29, 0.28)); }
.mustli-fan__layer[style*="--mf-depth: 2"] .mustli-fan__bag { filter: brightness(0.88) drop-shadow(0 14px 18px rgba(67, 48, 29, 0.24)); }
.mustli-fan__layer[style*="--mf-depth: 3"] .mustli-fan__bag { filter: brightness(0.82) drop-shadow(0 10px 14px rgba(67, 48, 29, 0.2)); }
.mustli-fan:not(.has-shadow) .mustli-fan__layer .mustli-fan__bag { filter: none; }

/* ---------- Apparition par couches (fond → avant) ---------- */
@keyframes mustliFanIn {
  0%   { opacity: 0; transform: translateX(-50%) translateX(var(--mf-x, 0%)) translateY(70px) scale(calc(var(--mf-s, 1) * 0.6)) rotate(-4deg); }
  65%  { opacity: 1; transform: translateX(-50%) translateX(var(--mf-x, 0%)) translateY(-14px) scale(calc(var(--mf-s, 1) * 1.04)) rotate(1.5deg); }
  100% { opacity: 1; transform: translateX(-50%) translateX(var(--mf-x, 0%)) translateY(0) scale(var(--mf-s, 1)) rotate(0deg); }
}
.mustli-fan.is-visible .mustli-fan__layer {
  animation: mustliFanIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--mf-delay, 0ms);
}

/* ---------- Flottement calme et continu (sur l'image, indépendant de la mise en place) ---------- */
@keyframes mustliFanFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(0.6deg); }
}
.mustli-fan.is-visible .mustli-fan__bag {
  animation: mustliFanFloat calc(var(--mf-float-d, 6s) / var(--mf-speed, 1)) ease-in-out infinite;
  animation-delay: calc(var(--mf-delay, 0ms) + 900ms + var(--mf-float-delay, 0s));
}

/* ---------- Responsive : on réduit la hauteur via la variable ---------- */
@media (max-width: 1024px) {
  .mustli-fan__stage { height: calc(var(--mf-h) * 0.8); }
}
@media (max-width: 767px) {
  .mustli-fan__stage { height: min(var(--mf-h), 70vw); }
}

@media (prefers-reduced-motion: reduce) {
  .mustli-fan__layer {
    opacity: 1;
    transform: translateX(-50%) translateX(var(--mf-x, 0%)) scale(var(--mf-s, 1));
    animation: none !important;
  }
  .mustli-fan__bag { animation: none !important; }
}