/* Effet compatible avec tous les styles existants du CMS */
.btn{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;

  /* Empêche les problèmes de z-index avec ::after */
  isolation: isolate;


  color: var(--primary-txt);
}

.btn-primary:after {
   
    left: 13px !important;
    }

/* Texte toujours au-dessus de l'after */
.btn{
  z-index: 0;
}

/* Bande lumineuse responsive (aucune valeur fixe en px) */
.btn::after{
  content: "";
  position: absolute;
  inset: -150%;
  z-index: -1;            /* derrière le contenu */
  pointer-events: none;

  /* Le fond du bouton reste visible, l'after est juste un reflet */
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.55) 50%,
    transparent 100%
  );

  transform: translateX(-100%);
  transition: transform .55s ease-in-out;
}

/* Animation hover */
.btn:hover::after{
  transform: translateX(100%);
}

/* Pas de changement de couleur au hover (on laisse le CMS gérer) */
.btn:hover{
  color: inherit;
}

/* Respect réduction des animations */
@media (prefers-reduced-motion: reduce){
  .btn::after{ transition: none; }
}