/* ===========================================================
   ✨ LUNANOVA DOTS — Composant générique
   Réutilisable pour lightbox, carrousels, steppers, etc.
   Optimisé pour mobiles et CPU limités.
=========================================================== */

.ln-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  padding: 28px 0 20px;
  z-index: 40;
  pointer-events: auto;
  user-select: none;
}

/* Point individuel */
.ln-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  cursor: pointer;

  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(230, 214, 158, 0.45);

  transition: background 0.25s ease, transform 0.25s ease;
  flex-shrink: 0;
}

.ln-dot.is-active {
  background: var(--ln-gold, #e6d69e);
  transform: scale(1.35);
}

/* ===========================================================
   🔧 Interactions et états
=========================================================== */

.ln-dot:hover {
  background: rgba(230, 214, 158, 0.45);
}

.ln-dot:active {
  transform: scale(1.1);
}

/* ===========================================================
   📱 Responsive
=========================================================== */

@media (max-width: 640px) {
  .ln-dots {
    gap: 8px;
    padding: 20px 0 14px;
  }

  .ln-dot {
    width: 9px;
    height: 9px;
  }
}

@media (max-width: 420px) {
  .ln-dot {
    width: 8px;
    height: 8px;
  }
}