/* 1. Animation du dégradé */
@keyframes gradientSlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 50% 50%; }
  100% { background-position: 0% 50%; }
}

/* 2. Style principal - On garde les !important sur le layout, pas sur la couleur */
body.style3 .form button,
body.style3 .button a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 12px 25px !important;
  font-size: 1em;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
  z-index: 1;
  /* COULEUR : Pas d'important ici pour laisser ton Darkmode agir */
  color: var(--secondaire-1); 
  transition: padding 0.3s ease-in-out, color 0.3s ease !important;
}

/* 3. La bordure en dégradé */
body.style3 .form button::before,
body.style3 .button a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px; 
  padding: 2px;
  background: linear-gradient(120deg, var(--primaire-2), var(--tertiaire-3), var(--primaire-1), var(--primaire-3), var(--primaire-2)) border-box;
  background-size: 150% 100% !important;
  animation: gradientSlow 10s ease-in-out infinite !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}

/* 4. La flèche (Apparition fluide 0.5s) */
body.style3 .form button::after,
body.style3 .button a::after {
  content: "" !important;
  display: inline-block !important;
  width: 20px !important;
  height: 10px !important;
  max-width: 0 !important;
  opacity: 0 !important;
  margin-left: 0 !important;
  margin-top: -2px !important;
  /* COULEUR : Pas d'important ici */
  background-color: var(--secondaire-1); 
  -webkit-mask: no-repeat center/16px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='2' y1='12' x2='28' y2='12'/><polyline points='20 4 28 12 20 20'/></svg>");
  mask: no-repeat center/16px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='2' y1='12' x2='28' y2='12'/><polyline points='20 4 28 12 20 20'/></svg>");
  transition: max-width 0.5s ease, opacity 0.5s ease, margin-left 0.5s ease, background-color 0.3s ease !important;
}

/* 5. Hover */
body.style3 .form button:hover::after,
body.style3 .button a:hover::after {
  max-width: 20px !important;
  opacity: 1 !important;
  margin-left: 5px !important;
}

body.style3 .form button:hover,
body.style3 .button a:hover {
  padding-right: 20px !important;
}

/*BUTTON2*/

/* 1. Style principal du .button2 (Texte seul) */
body.style3 .button2 a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--secondaire-1);
  text-decoration: none;
  font-weight: 600;
  padding: 0;           /* On retire tout le padding */
  background: none;     /* On retire le fond */
  border: none;         /* Sécurité : pas de bordure */
  transition: color 0.3s ease;
}

/* 2. La ligne à gauche avec ton dégradé */
body.style3 .button2 a::before {
  content: "";
  display: inline-block;
  width: 20px;          /* Longueur de départ */
  height: 2px;          /* Épaisseur fine */
  
  /* On réutilise ton dégradé animé */
  background: linear-gradient(
      120deg,
      var(--primaire-2),
      var(--tertiaire-3),
      var(--primaire-1),
      var(--primaire-3),
      var(--primaire-2)
  );
  background-size: 200% 100%;
  animation: gradientSlow 6s ease-in-out infinite;
  
  /* Animation de l'allongement */
  transition: width 0.4s ease-in-out; 
}

/* 3. Hover : La ligne s'allonge vers la droite */
body.style3 .button2 a:hover::before {
  width: 30px;          /* S'allonge au survol */
}

/* 4. Hover : Changement de couleur du texte (optionnel) */
body.style3 .button2 a:hover {
  color: var(--primaire-1);
}