/* Studio Lintz : boutons et appels a l'action. */

/**
 * Bouton plein facon pinceau.
 * Applique deux couches peintes aux boutons WordPress non contour.
 */

/* Parent du bouton plein : sert de support aux couches peintes. */
.wp-block-button:not(.is-style-outline) {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 72px;
  padding: 1.35rem 2.8rem;

  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: #f4eee7 !important;
  font-family: var(--ar-font-title) !important;
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(31, 37, 40, 0.45);

  transition:
    transform 180ms ease,
    color 180ms ease;
}

/* Couche doree basse : cree le decalage lumineux sous le bouton. */
.wp-block-button:not(.is-style-outline)::before {
  content: "";
  position: absolute;
  z-index: 0;

  inset: 13px -22px -13px 16px;

  background:
    radial-gradient(
      circle at 18% 45%,
      rgba(244, 238, 231, 0.35) 0 8%,
      transparent 20%
    ),
    linear-gradient(135deg, #d8b66d 0%, #b99252 52%, #8d672d 100%);

  pointer-events: none;
  transition: transform 180ms ease;

  -webkit-mask-image: url("/wp-content/themes/anne-robin/assets/img/brushstroke-bottom.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;

  mask-image: url("/wp-content/themes/anne-robin/assets/img/brushstroke-bottom.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
}

/* Couche bleue haute : porte la texture principale du bouton. */
.wp-block-button:not(.is-style-outline)::after {
  content: "";
  position: absolute;
  z-index: 1;

  inset: -10px -18px -10px -18px;

  background:
    radial-gradient(
      circle at 22% 30%,
      rgba(157, 212, 224, 0.55) 0 9%,
      transparent 23%
    ),
    radial-gradient(
      circle at 78% 62%,
      rgba(111, 175, 208, 0.38) 0 10%,
      transparent 28%
    ),
    linear-gradient(
      90deg,
      rgba(185, 146, 82, 0.25) 0%,
      transparent 22%,
      transparent 78%,
      rgba(185, 146, 82, 0.18) 100%
    ),
    linear-gradient(135deg, #1f2528 0%, #233942 32%, #315d6e 58%, #1f2528 100%);

  pointer-events: none;
  transition:
    filter 180ms ease,
    transform 180ms ease;

  -webkit-mask-image: url("/wp-content/themes/anne-robin/assets/img/brushstroke-top.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;

  mask-image: url("/wp-content/themes/anne-robin/assets/img/brushstroke-top.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
}

/* Survol du bouton plein : agrandit les couches et le libelle. */
.wp-block-button:not(.is-style-outline):hover::before {
  transform: translate(2px, 2px) rotate(-1deg) scale(1.2);
}

.wp-block-button:not(.is-style-outline):hover::after {
  transform: scale(1.2) rotate(1deg);
}

.wp-block-button:not(.is-style-outline):hover .wp-block-button__link {
  transform: scale(1.2);
}

/* Focus clavier du bouton plein : garde un contour accessible. */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
  outline: 2px solid #b99252;
  outline-offset: 6px;
}

/* Bouton contour natif : conserve un rendu simple hors effet brush. */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
}

/* Mobile du bouton plein : reduit hauteur, marges et debords. */
@media (max-width: 768px) {
  .wp-block-button:not(.is-style-outline) .wp-block-button__link {
    min-height: 62px;
    padding: 1.05rem 2.1rem;
    font-size: 0.95rem;
  }

  .wp-block-button:not(.is-style-outline)::before {
    inset: 10px -16px -10px 12px;
  }

  .wp-block-button:not(.is-style-outline)::after {
    inset: -8px -12px -8px -12px;
  }
}

/**
 * Bouton contour facon pinceau.
 * Applique le contour SVG aux boutons WordPress en style outline.
 */

.wp-block-button.is-style-outline {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

/* Lien contour : neutralise le style natif du builder. */
.wp-block-button.is-style-outline .wp-block-button__link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 64px;
  padding: 1.15rem 2.4rem;

  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: #1f2528 !important;
  font-family: var(--ar-font-title) !important;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;

  transition:
    transform 180ms ease,
    color 180ms ease;
}

/* Contour SVG : dessine le cadre degrade autour du libelle. */
.wp-block-button.is-style-outline::before {
  content: "";
  position: absolute;
  z-index: 1;

  inset: -7px -14px -7px -14px;

  background: linear-gradient(
    135deg,
    #1f2528 0%,
    #477f9a 34%,
    #6fafd0 58%,
    #b99252 100%
  );

  pointer-events: none;
  transition:
    filter 180ms ease,
    transform 180ms ease;

  -webkit-mask-image: url("/wp-content/themes/anne-robin/assets/img/contour.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;

  mask-image: url("/wp-content/themes/anne-robin/assets/img/contour.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
}

/* Survol du bouton contour : anime legerement le cadre. */
.wp-block-button.is-style-outline:hover::before {
  filter: brightness(1.12);
  transform: rotate(-1deg);
}

.wp-block-button.is-style-outline:hover .wp-block-button__link {
  transform: translateY(-1px);
}

/* Fond fonce : inverse la couleur du libelle contour. */
.has-background[style*="#1f2528"]
  .wp-block-button.is-style-outline
  .wp-block-button__link,
.ar-dark-section .wp-block-button.is-style-outline .wp-block-button__link {
  color: #f4eee7 !important;
}

/* Focus clavier du bouton contour : garde un contour accessible. */
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  outline: 2px solid #b99252;
  outline-offset: 6px;
}

/* Mobile du bouton contour : reduit hauteur et debords. */
@media (max-width: 768px) {
  .wp-block-button.is-style-outline .wp-block-button__link {
    min-height: 56px;
    padding: 1rem 2rem;
    font-size: 0.95rem;
  }

  .wp-block-button.is-style-outline::before {
    inset: -6px -10px -6px -10px;
  }
}

/**
 * Bouton Fluent Forms.
 * Reprend le style contour brush pour les formulaires.
 */

.ff_submit_btn_wrapper {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  overflow: visible !important;
}

/* Bouton de formulaire : reprend la base typographique du theme. */
.ff_submit_btn_wrapper .ff-btn-submit {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  min-height: 64px;
  padding: 1.15rem 2.4rem !important;

  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;

  color: #1f2528 !important;
  font-family: var(--ar-font-title) !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;

  cursor: pointer;
  isolation: isolate;
  transition:
    transform 180ms ease,
    color 180ms ease;
}

/* Contour SVG du formulaire : ajoute le cadre peint derriere le bouton. */
.ff_submit_btn_wrapper .ff-btn-submit::before {
  content: "";
  position: absolute;
  z-index: -1;

  top: -10px;
  right: -18px;
  bottom: -10px;
  left: -18px;

  background: linear-gradient(
    135deg,
    #1f2528 0%,
    #477f9a 34%,
    #6fafd0 58%,
    #b99252 100%
  );

  pointer-events: none;
  transition:
    filter 180ms ease,
    transform 180ms ease;

  -webkit-mask-image: url("/wp-content/themes/anne-robin/assets/img/contour.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;

  mask-image: url("/wp-content/themes/anne-robin/assets/img/contour.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
}

/* Survol du formulaire : souleve le bouton et illumine le contour. */
.ff_submit_btn_wrapper .ff-btn-submit:hover {
  transform: translateY(-1px);
}

.ff_submit_btn_wrapper .ff-btn-submit:hover::before {
  filter: brightness(1.12);
  transform: rotate(-1deg);
}

/* Focus clavier du formulaire : garde un contour accessible. */
.ff_submit_btn_wrapper .ff-btn-submit:focus-visible {
  outline: 2px solid #b99252;
  outline-offset: 8px;
}

/* Fond fonce du formulaire : inverse la couleur du libelle. */
.ar-dark-section .ff_submit_btn_wrapper .ff-btn-submit {
  color: #f4eee7 !important;
}

/* Mobile du formulaire : reduit hauteur, texte et debords. */
@media (max-width: 768px) {
  .ff_submit_btn_wrapper .ff-btn-submit {
    min-height: 56px;
    padding: 1rem 2rem !important;
    font-size: 0.95rem !important;
  }

  .ff_submit_btn_wrapper .ff-btn-submit::before {
    top: -8px;
    right: -14px;
    bottom: -8px;
    left: -14px;
  }
}