/* 2. Style principal */
.form button,
body.style3 .button a,
body.style3 .elementor-button--view-cart,
body.style3 .woocommerce-Button,
body.style3 .wc-proceed-to-checkout .checkout-button,
body.style3 .elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment #place_order,
body.style3 .button.wc-backward,
body.style3 .single_add_to_cart_button,
body.style3 .woocommerce .login .button,
body.style3 .woocommerce .register .button,
body.style3 .woocommerce .woocommerce-ResetPassword .button,
body.style3 .woocommerce-form-login__submit,
body.style3 .button.wc-forward {
  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;
  color: var(--secondaire-1); 
  transition: padding 0.3s ease-in-out, color 0.3s ease !important;
}

body.style3 .woocommerce-form-login__submit {
    color: var(--secondaire-1)!important; 
}
/* 3. La bordure en degrade */
.form button::before,
body.style3 .button a::before,
body.style3 .elementor-button--view-cart::before,
body.style3 .woocommerce-Button::before,
body.style3 .wc-proceed-to-checkout .checkout-button::before,
body.style3 .elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment #place_order::before,
body.style3 .button.wc-backward::before,
body.style3 .single_add_to_cart_button::before,
body.style3 .woocommerce .login .button::before,
body.style3 .woocommerce .register .button::before,
body.style3 .woocommerce .woocommerce-ResetPassword .button::before,
body.style3 .woocommerce-form-login__submit::before,
body.style3 .button.wc-forward::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 fleche */
.form button::after,
body.style3 .button a::after,
body.style3 .elementor-button--view-cart::after,
body.style3 .woocommerce-Button::after,
body.style3 .wc-proceed-to-checkout .checkout-button::after,
body.style3 .elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment #place_order::after,
body.style3 .button.wc-backward::after,
body.style3 .single_add_to_cart_button::after,
body.style3 .woocommerce .login .button::after,
body.style3 .woocommerce .register .button::after,
body.style3 .woocommerce .woocommerce-ResetPassword .button::after,
body.style3 .woocommerce-form-login__submit::after,
body.style3 .button.wc-forward::after {
  content: "" !important;
  display: inline-block !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  width: 20px !important;
  height: 10px !important;
  max-width: 0 !important;
  opacity: 0 !important;
  margin-left: 0 !important;
  margin-top: -2px !important;
  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 */
.form button:hover::after,
body.style3 .button a:hover::after,
body.style3 .elementor-button--view-cart:hover::after,
body.style3 .woocommerce-Button:hover::after,
body.style3 .wc-proceed-to-checkout .checkout-button:hover::after,
body.style3 .elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment #place_order:hover::after,
body.style3 .button.wc-backward:hover::after,
body.style3 .single_add_to_cart_button:hover::after,
body.style3 .woocommerce .login .button:hover::after,
body.style3 .woocommerce .register .button:hover::after,
body.style3 .woocommerce .woocommerce-ResetPassword .button:hover::after,
body.style3 .woocommerce-form-login__submit:hover::after,
body.style3 .button.wc-forward:hover::after {
  max-width: 20px !important;
  opacity: 1 !important;
  margin-left: 5px !important;
}
body.style3 .form button:hover,
body.style3 .button a:hover,
body.style3 .elementor-button--view-cart:hover,
body.style3 .woocommerce-Button:hover,
body.style3 .wc-proceed-to-checkout .checkout-button:hover,
body.style3 .elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment #place_order:hover,
body.style3 .button.wc-backward:hover,
body.style3 .single_add_to_cart_button:hover,
body.style3 .woocommerce .login .button:hover,
body.style3 .woocommerce .register .button:hover,
body.style3 .woocommerce .woocommerce-ResetPassword .button:hover,
body.style3 .woocommerce-form-login__submit:hover,
body.style3 .button.wc-forward:hover {
  padding-right: 20px !important;
  color: var(--secondaire-2);
}

/*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);
}