/* =========================================================
   AFO – core/button style: "Contour flèche" 
   Appliqué quand: .wp-block-button.is-style-contour-fleche
   ========================================================= */

.wp-block-button.is-style-contour-fleche{
  /* variables (fallbacks) */
  --afo-purple: var(--global-palette2, #33224d);
  --afo-pink:   var(--global-palette1, #e6007e);
  --afo-font:   'BBB Poppins TN Display', Helvetica, Arial, sans-serif;
}

/* Le lien du bouton */
  .wp-block-button.is-style-contour-fleche > .wp-block-button__link{
  background-color: #fff!important;
  border: 2px solid var(--global-palette1);
  border-radius: 80px;
  padding: 15px 50px 15px 50px;
  margin: 0;
  color: var(--global-palette1)!important;
  font-family: var(--afo-font);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease;
}

/* Flèche à droite (SVG = celui que tu as donné, recoloré via mask) */
  .wp-block-button.is-style-contour-fleche > .wp-block-button__link::after{
  content: "";
  width: 26px;
  height: 26px;
  flex: 0 0 26px;

  /* couleur flèche en normal */
  background-color: var(--global-palette2);

  /*  SVG (viewBox 0 0 26 15) */
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNicgaGVpZ2h0PScxNScgdmlld0JveD0nMCAwIDI2IDE1JyBmaWxsPSdub25lJz48cGF0aCBkPSdNMjUuNzA3MSA4LjA3MTEyQzI2LjA5NzYgNy42ODA2IDI2LjA5NzYgNy4wNDc0MyAyNS43MDcxIDYuNjU2OTFMMTkuMzQzMSAwLjI5Mjk0NkMxOC45NTI2IC0wLjA5NzU3ODUgMTguMzE5NSAtMC4wOTc1Nzg1IDE3LjkyODkgMC4yOTI5NDZDMTcuNTM4NCAwLjY4MzQ3IDE3LjUzODQgMS4zMTY2NCAxNy45Mjg5IDEuNzA3MTZMMjMuNTg1OCA3LjM2NDAxTDE3LjkyODkgMTMuMDIwOUMxNy41Mzg0IDEzLjQxMTQgMTcuNTM4NCAxNC4wNDQ2IDE3LjkyODkgMTQuNDM1MUMxOC4zMTk1IDE0LjgyNTYgMTguOTUyNiAxNC44MjU2IDE5LjM0MzEgMTQuNDM1MUwyNS43MDcxIDguMDcxMTJaTTAgNy4zNjQwMVY4LjM2NDAxSDI1VjcuMzY0MDFWNi4zNjQwMUgwVjcuMzY0MDFaJyBmaWxsPScjREEyMzdGJy8+PC9zdmc+");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNicgaGVpZ2h0PScxNScgdmlld0JveD0nMCAwIDI2IDE1JyBmaWxsPSdub25lJz48cGF0aCBkPSdNMjUuNzA3MSA4LjA3MTEyQzI2LjA5NzYgNy42ODA2IDI2LjA5NzYgNy4wNDc0MyAyNS43MDcxIDYuNjU2OTFMMTkuMzQzMSAwLjI5Mjk0NkMxOC45NTI2IC0wLjA5NzU3ODUgMTguMzE5NSAtMC4wOTc1Nzg1IDE3LjkyODkgMC4yOTI5NDZDMTcuNTM4NCAwLjY4MzQ3IDE3LjUzODQgMS4zMTY2NCAxNy45Mjg5IDEuNzA3MTZMMjMuNTg1OCA3LjM2NDAxTDE3LjkyODkgMTMuMDIwOUMxNy41Mzg0IDEzLjQxMTQgMTcuNTM4NCAxNC4wNDQ2IDE3LjkyODkgMTQuNDM1MUMxOC4zMTk1IDE0LjgyNTYgMTguOTUyNiAxNC44MjU2IDE5LjM0MzEgMTQuNDM1MUwyNS43MDcxIDguMDcxMTJaTTAgNy4zNjQwMVY4LjM2NDAxSDI1VjcuMzY0MDFWNi4zNjQwMUgwVjcuMzY0MDFaJyBmaWxsPScjREEyMzdGJy8+PC9zdmc+");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: background-color .18s ease, transform .18s ease;
}

/* Hover + focus visible: plein violet + texte blanc */
  .wp-block-button.is-style-contour-fleche > .wp-block-button__link:hover,
  .wp-block-button.is-style-contour-fleche > .wp-block-button__link:focus-visible{
  background-color:  var(--global-palette1)!important;
  border-color:  var(--global-palette1)!important;
  color: #fff;
}

/* Flèche en hover: blanche (même couleur que texte) + petit nudge */
  .wp-block-button.is-style-contour-fleche > .wp-block-button__link:hover::after,
  .wp-block-button.is-style-contour-fleche > .wp-block-button__link:focus-visible::after{
  background-color: var(--global-palette9);
  transform: translateX(2px);
}

/* Focus clavier (WCAG) */
  .wp-block-button.is-style-contour-fleche > .wp-block-button__link:focus-visible{
  outline: 3px solid var(--afo-pink);
  outline-offset: 3px;
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  .wp-block-button.is-style-contour-fleche > .wp-block-button__link,
  .wp-block-button.is-style-contour-fleche > .wp-block-button__link::after{
    transition: none;
  }
}

/* =========================================================
   AFO – core/button style: "Contour flèche" ADMIN
   Appliqué quand: .wp-block-button.is-style-contour-fleche
   ========================================================= */

.wp-admin .wp-block-button.is-style-contour-fleche{
  /* variables (fallbacks) */
  --afo-purple: var(--global-palette2, #33224d);
  --afo-pink:   var(--global-palette1, #e6007e);
  --afo-font:   'BBB Poppins TN Display', Helvetica, Arial, sans-serif;
}

/* Le lien du bouton */
.wp-admin .wp-block-button.is-style-contour-fleche > .wp-block-button__link{
  background-color: #fff!important;
  border: 2px solid var(--global-palette1);
  border-radius: 80px;
  padding: 15px 50px 15px 50px;
  margin: 0;
  color: var(--global-palette1)!important;
  font-family: var(--afo-font);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease;
}

/* Flèche à droite (SVG = celui que tu as donné, recoloré via mask) */
.wp-admin .wp-block-button.is-style-contour-fleche > .wp-block-button__link::after{
  content: "";
  width: 26px;
  height: 26px;
  flex: 0 0 26px;

  /* couleur flèche en normal */
  background-color: var(--global-palette2);

  /*  SVG (viewBox 0 0 26 15) */
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNicgaGVpZ2h0PScxNScgdmlld0JveD0nMCAwIDI2IDE1JyBmaWxsPSdub25lJz48cGF0aCBkPSdNMjUuNzA3MSA4LjA3MTEyQzI2LjA5NzYgNy42ODA2IDI2LjA5NzYgNy4wNDc0MyAyNS43MDcxIDYuNjU2OTFMMTkuMzQzMSAwLjI5Mjk0NkMxOC45NTI2IC0wLjA5NzU3ODUgMTguMzE5NSAtMC4wOTc1Nzg1IDE3LjkyODkgMC4yOTI5NDZDMTcuNTM4NCAwLjY4MzQ3IDE3LjUzODQgMS4zMTY2NCAxNy45Mjg5IDEuNzA3MTZMMjMuNTg1OCA3LjM2NDAxTDE3LjkyODkgMTMuMDIwOUMxNy41Mzg0IDEzLjQxMTQgMTcuNTM4NCAxNC4wNDQ2IDE3LjkyODkgMTQuNDM1MUMxOC4zMTk1IDE0LjgyNTYgMTguOTUyNiAxNC44MjU2IDE5LjM0MzEgMTQuNDM1MUwyNS43MDcxIDguMDcxMTJaTTAgNy4zNjQwMVY4LjM2NDAxSDI1VjcuMzY0MDFWNi4zNjQwMUgwVjcuMzY0MDFaJyBmaWxsPScjREEyMzdGJy8+PC9zdmc+");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNicgaGVpZ2h0PScxNScgdmlld0JveD0nMCAwIDI2IDE1JyBmaWxsPSdub25lJz48cGF0aCBkPSdNMjUuNzA3MSA4LjA3MTEyQzI2LjA5NzYgNy42ODA2IDI2LjA5NzYgNy4wNDc0MyAyNS43MDcxIDYuNjU2OTFMMTkuMzQzMSAwLjI5Mjk0NkMxOC45NTI2IC0wLjA5NzU3ODUgMTguMzE5NSAtMC4wOTc1Nzg1IDE3LjkyODkgMC4yOTI5NDZDMTcuNTM4NCAwLjY4MzQ3IDE3LjUzODQgMS4zMTY2NCAxNy45Mjg5IDEuNzA3MTZMMjMuNTg1OCA3LjM2NDAxTDE3LjkyODkgMTMuMDIwOUMxNy41Mzg0IDEzLjQxMTQgMTcuNTM4NCAxNC4wNDQ2IDE3LjkyODkgMTQuNDM1MUMxOC4zMTk1IDE0LjgyNTYgMTguOTUyNiAxNC44MjU2IDE5LjM0MzEgMTQuNDM1MUwyNS43MDcxIDguMDcxMTJaTTAgNy4zNjQwMVY4LjM2NDAxSDI1VjcuMzY0MDFWNi4zNjQwMUgwVjcuMzY0MDFaJyBmaWxsPScjREEyMzdGJy8+PC9zdmc+");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: background-color .18s ease, transform .18s ease;
}

/* Hover + focus visible: plein violet + texte blanc */
 .wp-admin .wp-block-button.is-style-contour-fleche > .wp-block-button__link:hover,
 .wp-admin .wp-block-button.is-style-contour-fleche > .wp-block-button__link:focus-visible{
  background-color:  var(--global-palette1)!important;
  border-color:  var(--global-palette1)!important;
  color: #fff;
}

/* Flèche en hover: blanche (même couleur que texte) + petit nudge */
 .wp-admin .wp-block-button.is-style-contour-fleche > .wp-block-button__link:hover::after,
 .wp-admin .wp-block-button.is-style-contour-fleche > .wp-block-button__link:focus-visible::after{
  background-color: var(--global-palette9);
  transform: translateX(2px);
}

/* Focus clavier (WCAG) */
 .wp-admin .wp-block-button.is-style-contour-fleche > .wp-block-button__link:focus-visible{
  outline: 3px solid var(--afo-pink);
  outline-offset: 3px;
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce){
 .wp-admin .wp-block-button.is-style-contour-fleche > .wp-block-button__link,
  .wp-admin .wp-block-button.is-style-contour-fleche > .wp-block-button__link::after{
    transition: none;
  }
}