.luciole-orbite {
    position: absolute;
    top: 20%;
    right: 12%;
    width: 0;
    height: 0;
    pointer-events: none;
  
    animation: orbit 4s linear infinite;
  }

  .luciole {
    width: 7px;
    height: 7px;
    border-radius: 50%;
  
    background: radial-gradient(circle,
      #f6ff9d 0%,
      #b6ff5f 45%,
      transparent 70%
    );
  
    box-shadow:
      0 0 10px rgba(199,255,94,.9),
      0 0 20px rgba(199,255,94,.5);
  
    transform: translateX(22px);
    filter: blur(.3px);
  }
  
  /* traînée douce */
  .luciole::after {
    content: '';
    position: absolute;
    inset: -4px;
    background: inherit;
    border-radius: 50%;
    filter: blur(8px);
    opacity: .35;
  }

  @keyframes orbit {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  
  .luciole-orbite0 {
    animation: orbitX 2s linear infinite;
  }
  .luciole-orbite2 {
    animation: orbitX 3s linear infinite;
  }
  .luciole-orbite3 {
    animation: orbitX 2.5 linear infinite;
  }
  
  .luciole {
    animation: orbitY 2.5s linear infinite;
  }
  .luciole2 {
    animation: orbitY 2s linear infinite;
  }
  .luciole3 {
    animation: orbitY 3s linear infinite;
  }

  @keyframes orbitX {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  
  @keyframes orbitY {
    from { transform: rotate(0deg) translateX(16px); }
    to   { transform: rotate(-360deg) translateX(16px); }
  }