/* Bouton Style 2 */
body.style2 .form button,
body.style2 .button a {
  border-radius: 50px !important;
  padding: 15px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative !important;
  width: fit-content !important;
  overflow: hidden !important;
  border: 2px solid var(--primaire-1) !important;
  background: var(--primaire-1) !important;
  color: var(--primaire-4) !important;
  cursor: pointer !important;
  transition: all 0.3s ease-in-out !important;
  text-decoration: none !important;
  font-size: 0.95em;
  font-weight: 500;
  padding-left: 60px !important;
}

/* Fond blanc qui s’étire */
body.style2 .form button::before,
body.style2 .button a::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 46px !important;
  border-radius: 50px !important;
  background: var(--primaire-4) !important;
  transition: all 0.5s ease-in-out !important;
  z-index: 0 !important;
}

body.style2 .form button::after,
body.style2 .button a::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  height: 100% !important;
  width: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-mask: no-repeat center/22px 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/22px 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>");
  background-color: var(--primaire-1) !important;
  transition: transform 0.5s ease-in-out !important;
  z-index: 2 !important;
}



/* Hover : le fond blanc s’allonge */
body.style2 .form button:hover::before,
body.style2 .button a:hover::before {
  width: 100% !important;
  border-radius: 50px !important;
}

/* Hover : flèche glisse légèrement */
body.style2 .form button:hover::after,
body.style2 .button a:hover::after {
  transform: translateX(5px);
}

/* Texte au-dessus */
body.style2 .form button span,
body.style2 .button a span {
  position: relative !important;
  z-index: 1 !important;
}

/* Hover : bouton blanc, texte vert */
body.style2 .form button:hover,
body.style2 .button a:hover {
  background: var(--primaire-4) !important;
  color: var(--primaire-1) !important;
}