/* ==========================================================
   Widget Elementor : Bouton — Maison Blondin
   ========================================================== */

/* ── Wrapper ── */
.mb-btn-wrap {
  display: block;
}

/* ── Base commune ── */
.mb-btn-wrap__btn {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5em;
  font-family:     var(--mb-font-body, 'Open Sans', system-ui, sans-serif);
  font-weight:     600;
  letter-spacing:  .14em;
  text-transform:  uppercase;
  text-decoration: none;
  cursor:          pointer;
  transition:
    background var(--mb-transition, .3s ease),
    color      var(--mb-transition, .3s ease),
    box-shadow var(--mb-transition, .3s ease),
    border-color var(--mb-transition, .3s ease);
}

/* ── Variante fill ── */
.mb-btn--fill {
  background: var(--mb-brown, #572400);
  color:      var(--mb-white, #ffffff);
  border:     none;
  padding:    13px 28px;
}
.mb-btn--fill:hover {
  background: var(--mb-pink, #ff66c4);
  color:      var(--mb-white, #ffffff);
  box-shadow: 0 8px 24px rgba(255, 102, 196, .28);
}

/* ── Variante outline ── */
.mb-btn--outline {
  background:   transparent;
  color:        var(--mb-brown, #572400);
  border:       1.5px solid var(--mb-brown, #572400);
  padding:      12px 28px;
}
.mb-btn--outline:hover {
  background:   var(--mb-brown, #572400);
  color:        var(--mb-white, #ffffff);
  border-color: var(--mb-brown, #572400);
}

/* ── Tailles ── */
.mb-btn--sm { font-size: 10px; padding: 9px 20px; }
.mb-btn--md { font-size: 11px; }
.mb-btn--lg { font-size: 13px; padding: 16px 36px; }

/* ── Icône fléchée ── */
.mb-btn__arrow {
  font-family: var(--mb-font-body, 'Open Sans', system-ui, sans-serif);
  font-style:  normal;
  transition:  transform var(--mb-transition, .3s ease);
}
.mb-btn-wrap__btn:hover .mb-btn__arrow {
  transform: translateX(4px);
}