/* ==========================================================================
   Bouton Müesli — Mustli (pilule, majuscules, ombre, reflet)
   ========================================================================== */

.mustli-btn-wrap { display: flex; width: 100%; }
.mustli-btn-wrap--left    { justify-content: flex-start; }
.mustli-btn-wrap--center  { justify-content: center; }
.mustli-btn-wrap--right   { justify-content: flex-end; }
.mustli-btn-wrap--stretch .mustli-btn { width: 100%; text-align: center; }

.mustli-btn {
  --mb-bg: #4B3C31;
  --mb-color: #fff;

  position: relative;
  display: inline-block;
  box-sizing: border-box;
  padding: 16px 34px;
  background: var(--mb-bg);
  color: var(--mb-color) !important;
  font-family: 'Nunito', 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none !important;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18), 0 12px 24px rgba(67, 48, 29, 0.2);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, filter 0.35s ease;
  cursor: pointer;
}
.mustli-btn.is-upper { text-transform: uppercase; }
.mustli-btn span { position: relative; z-index: 1; }

/* tailles */
.mustli-btn--sm { padding: 12px 26px; font-size: 13px; }
.mustli-btn--lg { padding: 20px 44px; font-size: 18px; }

/* reflet qui balaie le bouton */
.mustli-btn.has-shine::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -30%;
  width: 25%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-100%) skewX(-20deg);
  animation: mustliBtnShine 4s ease-in-out infinite;
  animation-delay: 1.5s;
  pointer-events: none;
}
@keyframes mustliBtnShine {
  0%, 65% { transform: translateX(-100%) skewX(-20deg); }
  100%    { transform: translateX(620%) skewX(-20deg); }
}

/* survol / clic */
.mustli-btn:hover,
.mustli-btn:focus-visible {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 9px 0 rgba(0, 0, 0, 0.18), 0 18px 34px rgba(67, 48, 29, 0.28);
  filter: brightness(1.08);
  outline: none;
}
.mustli-btn:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18), 0 6px 14px rgba(67, 48, 29, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .mustli-btn.has-shine::after { animation: none; }
  .mustli-btn { transition: none; }
}