/**
 * Effet 3D au survol (tilt).
 * Ajoute la classe "rp-tilt-3d" sur n'importe quel élément (widget, colonne,
 * conteneur...) dans le champ "Classes CSS" d'Elementor.
 *
 * Options (classes additionnelles) :
 *   - rp-tilt-3d--glare : ajoute un reflet lumineux qui suit la souris.
 *
 * Réglage fin (attribut sur l'élément, via "Attributs personnalisés" Elementor) :
 *   - data-tilt-max="20" : intensité max de l'inclinaison en degrés (défaut 14).
 */

.rp-tilt-3d {
  transform-style: preserve-3d;
  transition: transform .12s cubic-bezier(.22, .61, .36, 1),
              box-shadow .35s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.rp-tilt-3d:hover,
.rp-tilt-3d--active {
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45);
}

/* Option : reflet lumineux qui suit la souris */
.rp-tilt-3d--glare {
  position: relative;
  overflow: hidden;
}

.rp-tilt-3d--glare::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--rp-mx, 50%) var(--rp-my, 50%),
    rgba(255, 255, 255, .35), transparent 45%);
  opacity: 0;
  transition: opacity .35s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}

.rp-tilt-3d--glare:hover::after,
.rp-tilt-3d--glare.rp-tilt-3d--active::after {
  opacity: 1;
}

.card-equipe {
  cursor: pointer;
}

/* Accessibilité : désactive l'effet si l'utilisateur limite les animations */
@media (prefers-reduced-motion: reduce) {
  .rp-tilt-3d {
    transition: none;
  }
}