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

/* Flèche à droite avec mask (hérite bien de la couleur) */
body.style3 .form button::after,
body.style3 .button a::after {
  content: "" !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  -webkit-mask: no-repeat center/18px 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/18px 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-4) !important; /* flèche en primaire 4 */
  transition: margin-left 0.3s ease-in-out !important;
}

/* Hover : éclaircissement via filter + flèche qui s’éloigne */
body.style3 .form button:hover,
body.style3 .button a:hover {
  filter: brightness(1.1) !important; /* éclaircit le primaire */
  color: var(--primaire-4) !important;
}

body.style3 .form button:hover::after,
body.style3 .button a:hover::after {
  margin-left: 6px !important;
}