/* Pétales qui tombent — crées dynamiquement par petals.js
   Activée par la classe body.fx-petals
   ----------------------------------------------------------------- */

.fx-petals .fx-petal-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9998;
}

.fx-petals .fx-petal {
  position: absolute;
  top: -30px;
  width: 14px;
  height: 14px;
  background: radial-gradient(ellipse at 30% 40%, #f8c8c8 0%, #e89ca7 60%, #c06e7e 100%);
  border-radius: 60% 20% 60% 20%;
  opacity: 0.85;
  animation-name: fx-petal-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

@keyframes fx-petal-fall {
  0%   { transform: translate3d(0, -30px, 0) rotate(0deg); }
  50%  { transform: translate3d(30px, 50vh, 0) rotate(180deg); }
  100% { transform: translate3d(-20px, 110vh, 0) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-petals .fx-petal-layer { display: none; }
}