.cta,
.prestas-cta,
.prestations-cta,
.cta-footer-button,
.form-submit,
.apropos-hero-buttons a{
  position: relative;
  overflow: hidden;
  isolation: isolate; /* le pseudo-élément ne dépasse jamais du bouton */
  z-index: 0;
  transition:
    transform 0.28s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow 0.32s ease,
    color 0.35s ease,
    border-color 0.35s ease;
  will-change: transform;
}

.cta::before,
.prestas-cta::before,
.prestations-cta::before,
.cta-footer-button::before,
.form-submit::before,
.apropos-hero-buttons a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gradient-primary);
  transform: translateX(-101%);
  transition: transform 0.45s cubic-bezier(.65, 0, .35, 1);
}

.cta:hover::before,
.prestas-cta:hover::before,
.prestations-cta:hover::before,
.cta-footer-button:hover::before,
.form-submit:hover::before,
.apropos-hero-buttons a:hover::before{
  transform: translateX(0);
}

/* Au survol : léger lift + ombre colorée qui suit le dégradé */
.cta:hover,
.prestas-cta:hover,
.prestations-cta:hover,
.cta-footer-button:hover,
.form-submit:hover,
.apropos-hero-buttons a:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(183, 28, 255, 0.25);
  color: #ffffff;
}

/* Cas particuliers : boutons à fond transparent / bordure
   (ils changent de couleur de texte au hover car le fond devient le gradient) */
.apropos-hero-buttons a:last-child:hover,
.cta-footer-button:first-child:hover {
  border-color: transparent;
  color: #ffffff;
}

.cta-footer-button:last-child:hover {
  border-color: transparent;
  color: #ffffff;
  backdrop-filter: none;
}

/* ---------------------------------------------------------
   3) MICRO-ANIMATION AU CLIC : scale-down + ombre resserrée
   --------------------------------------------------------- */
.cta:active,
.prestas-cta:active,
.prestations-cta:active,
.cta-footer-button:active,
.form-submit:active,
.apropos-hero-buttons a:active {
  transform: translateY(-1px) scale(0.96);
  box-shadow: 0 4px 12px rgba(183, 28, 255, 0.3);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.cta.is-rippling::after,
.prestas-cta.is-rippling::after,
.prestations-cta.is-rippling::after,
.cta-footer-button.is-rippling::after,
.apropos-hero-buttons a.is-rippling::after {
  content: '';
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: rippleEffect 0.6s ease-out;
  z-index: 2;
}

@keyframes rippleEffect {
  to {
    transform: translate(-50%, -50%) scale(22);
    opacity: 0;
  }
}

/* ---------------------------------------------------------
   5) DESACTIVATION DOUCE (form-submit:disabled)
   --------------------------------------------------------- */
.form-submit:disabled {
  transform: none !important;
  box-shadow: none !important;
}

.form-submit:disabled::before {
  display: none;
}

/* ---------------------------------------------------------
   6) RESPECT DES PRÉFÉRENCES UTILISATEUR (accessibilité)
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cta, .prestas-cta, .realisation-cta,
  .prestations-cta, .cta-footer-button, .form-submit,
  .apropos-hero-buttons a, .footer-devis a,
  .cta::before, .hero-buttons a::before, .prestas-cta::before,
  .prestations-cta::before,
  .form-submit::before,
  .about-right a::before, .apropos-hero-buttons a::before {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}