/* CTA FHV : les variables héritées suivent le groupe de section le plus proche. */
.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--item-xs);
  box-sizing: border-box;
  padding: var(--wp--preset--spacing--item-s) var(--wp--preset--spacing--item-m);
  border: 1px solid transparent;
  border-radius: var(--wp--custom--radius--full);
  background-color: var(--fhv-button, var(--wp--preset--color--secondary));
  color: var(--fhv-button-text, var(--wp--preset--color--primary-dark));
  font-family: var(--wp--preset--font-family--bilo);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.wp-block-button .wp-block-button__link:is(:hover, :focus-visible) {
  background-color: var(--fhv-button-hover, var(--wp--preset--color--primary));
  color: var(--fhv-button-text-hover, var(--wp--preset--color--secondary-light));
}

/* Les classes de couleur WordPress appliquent leur fond en !important.
   Le hover doit pouvoir le remplacer pour conserver un contraste lisible. */
.wp-block-button .wp-block-button__link.has-background:is(:hover, :focus-visible) {
  background-color: var(--fhv-button-hover, var(--wp--preset--color--primary)) !important;
}

.wp-block-button:is(.is-style-outline, .is-style-outline-with-arrow) .wp-block-button__link {
  background-color: transparent;
  border-color: var(--fhv-border, var(--wp--preset--color--primary));
  color: var(--fhv-border, var(--wp--preset--color--primary));
}

.wp-block-button:is(.is-style-outline, .is-style-outline-with-arrow) .wp-block-button__link:is(:hover, :focus-visible) {
  background-color: var(--fhv-button-hover, var(--wp--preset--color--primary));
  border-color: var(--fhv-button-hover, var(--wp--preset--color--primary));
  color: var(--fhv-button-text-hover, var(--wp--preset--color--secondary-light));
}

/* Sur une section foncée, le texte et la flèche du bouton contour
   doivent rester lisibles sur le fond bleu clair du hover. */
.is-style-section-style3
  .wp-block-button:is(.is-style-outline, .is-style-outline-with-arrow)
  .wp-block-button__link:is(:hover, :focus-visible) {
  background-color: var(--wp--preset--color--secondary) !important;
  border-color: var(--wp--preset--color--secondary) !important;
  color: var(--wp--preset--color--primary-dark) !important;
}

/* Cas particulier du bouton Recrutement dans le pied de page. */
footer.wp-block-template-part
  .wp-block-button.is-style-outline.recrut
  .wp-block-button__link:is(:hover, :focus-visible) {
  background-color: var(--wp--preset--color--secondary-light) !important;
  border-color: var(--wp--preset--color--secondary-light) !important;
  color: var(--wp--preset--color--primary-dark) !important;
}

.wp-block-button:is(.is-style-link, .is-style-link-with-arrow) .wp-block-button__link {
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--fhv-link, var(--wp--preset--color--secondary));
}

.wp-block-button:is(.is-style-link, .is-style-link-with-arrow) .wp-block-button__link:is(:hover, :focus-visible) {
  background-color: transparent;
  color: var(--fhv-hover, var(--wp--preset--color--accent));
}

.wp-block-button:is(.is-style-with-arrow, .is-style-outline-with-arrow, .is-style-link-with-arrow) .wp-block-button__link::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-color: currentColor;
  -webkit-mask: url("../images/icons/fleche.svg") center / contain no-repeat;
  mask: url("../images/icons/fleche.svg") center / contain no-repeat;
}

/* Lien pilule vers une page régionale. */
.wp-block-button.is-style-region-link .wp-block-button__link {
  gap: 11.765px;
  padding: 11.765px 17.647px;
  border-color: var(--wp--preset--color--secondary);
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--primary-dark);
  font-size: 13.235px;
  font-weight: 700;
  line-height: 1.5;
}

.wp-block-button.is-style-region-link .wp-block-button__link::before {
  width: 17.647px;
  height: 17.647px;
  flex: 0 0 17.647px;
  background: url("../images/icons/region.svg") center / contain no-repeat;
  content: "";
}

.wp-block-button.is-style-region-link .wp-block-button__link:is(:hover, :focus-visible) {
  border-color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--secondary-light);
  color: var(--wp--preset--color--primary-dark);
}

.wp-block-button .wp-block-button__link:focus-visible {
  outline: 2px solid var(--fhv-border, var(--wp--preset--color--primary));
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-button .wp-block-button__link { transition: none; }
}