/* ============================================================
   Boutons Gutenberg — Picto SVG à gauche · Texte centré · 100%
   À coller dans : Apparence > Personnaliser > CSS additionnel
   ou dans style.css de votre thème enfant
   ============================================================ */

/* ── Bloc bouton pleine largeur ── */
.wp-block-button {
  width: 100%;
}

/* ── Base commune ── */
.wp-block-button__link {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 48px !important;
  padding: 0 20px !important;
  border-radius: 6px !important;
  /*font-family: 'DM Sans', sans-serif !important;*/
  /*font-size: 16px !important;*/
  /*font-weight: 500 !important;*/
  overflow: hidden !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition:
    transform 0.18s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease !important;
}

/* Picto SVG inline : positionné à gauche */
.wp-block-button__link svg {
  position: absolute;
  left: 18px;
  flex-shrink: 0;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1);
}

/* ── Style : Remplissage (classe CSS : is-style-fill, défaut) ── */
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button:not([class*="is-style"]) .wp-block-button__link {
  background-color:var(--wp--preset--color--custom-primary) !important;
  color: #FFF !important;
  border: none !important;
}
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button:not([class*="is-style"]) .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--custom-secondary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(83, 74, 183, 0.35) !important;
}
.wp-block-button.is-style-fill .wp-block-button__link:hover svg,
.wp-block-button:not([class*="is-style"]) .wp-block-button__link:hover svg {
  transform: translateX(4px);
}
.wp-block-button.is-style-fill .wp-block-button__link:active,
.wp-block-button:not([class*="is-style"]) .wp-block-button__link:active {
  transform: scale(0.97) !important;
  box-shadow: none !important;
}

/* ── Style : Contour (classe CSS : is-style-outline) ── */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: #1a1a1a !important;
  border: 1.5px solid #c8c7bf !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: #fff !important;
  border-color: var(--wp--preset--color--custom-primary) !important;
  color: var(--wp--preset--color--custom-primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: none !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover svg {
  transform: rotate(-12deg) scale(1.15);
}
.wp-block-button.is-style-outline .wp-block-button__link:active {
  transform: scale(0.97) !important;
}

/* ── Style personnalisé : Succès / Teal (classe CSS : is-style-success) ──
   Ajouter ce style via : functions.php → register_block_style()           */
.wp-block-button.is-style-success .wp-block-button__link {
  background-color: #E1F5EE !important;
  color: #0F6E56 !important;
  border: 1px solid #9FE1CB !important;
}
.wp-block-button.is-style-success .wp-block-button__link:hover {
  background-color: #0F6E56 !important;
  color: #E1F5EE !important;
  border-color: #0F6E56 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(15, 110, 86, 0.3) !important;
}
.wp-block-button.is-style-success .wp-block-button__link:hover svg {
  transform: scale(1.2) rotate(8deg);
}
.wp-block-button.is-style-success .wp-block-button__link:active {
  transform: scale(0.97) !important;
  box-shadow: none !important;
}

/* ── Style personnalisé : Danger (classe CSS : is-style-danger) ── */
.wp-block-button.is-style-danger .wp-block-button__link {
  background-color: #FCEBEB !important;
  color: #A32D2D !important;
  border: 1px solid #F7C1C1 !important;
}
.wp-block-button.is-style-danger .wp-block-button__link:hover {
  background-color: #A32D2D !important;
  color: #FCEBEB !important;
  border-color: #A32D2D !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(163, 45, 45, 0.3) !important;
}
.wp-block-button.is-style-danger .wp-block-button__link:hover svg {
  transform: scale(1.15);
}
.wp-block-button.is-style-danger .wp-block-button__link:active {
  transform: scale(0.97) !important;
  box-shadow: none !important;
}

/* ── Style personnalisé : Shimmer (classe CSS : is-style-shimmer) ── */
.wp-block-button.is-style-shimmer .wp-block-button__link {
  background: linear-gradient(135deg, #185FA5 0%, #534AB7 100%) !important;
  color: #E6F1FB !important;
  border: none !important;
  isolation: isolate;
}
.wp-block-button.is-style-shimmer .wp-block-button__link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.55s ease;
  pointer-events: none;
}
.wp-block-button.is-style-shimmer .wp-block-button__link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(24, 95, 165, 0.38) !important;
}
.wp-block-button.is-style-shimmer .wp-block-button__link:hover::before {
  transform: translateX(100%);
}
.wp-block-button.is-style-shimmer .wp-block-button__link:hover svg {
  transform: translateX(4px);
}
.wp-block-button.is-style-shimmer .wp-block-button__link:active {
  transform: scale(0.97) !important;
  box-shadow: none !important;
}