/* =========================================================
   LYS-MOI — COMPOSANT BOUTONS
   ---------------------------------------------------------
   Nouveau système de boutons.
   Ne modifie PAS les anciens boutons tant qu’on ne les migre
   pas manuellement vers les classes .lm-btn.
   ========================================================= */

/* =========================================================
   BASE
   ========================================================= */

.lm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: fit-content;
  min-height: 42px;

  padding: 12px 18px;

  border: 1px solid transparent;
  border-radius: var(--lm-radius-md);

  font-family: var(--font-main);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;

  cursor: pointer;
  user-select: none;

  transition:
    transform var(--lm-transition-fast),
    opacity var(--lm-transition-fast),
    background var(--lm-transition-fast),
    border-color var(--lm-transition-fast),
    box-shadow var(--lm-transition-fast),
    color var(--lm-transition-fast);
}

.lm-btn:hover {
  transform: translateY(-2px);
  opacity: 0.96;
}

.lm-btn:active {
  transform: translateY(0);
}

.lm-btn:disabled,
.lm-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}

/* =========================================================
   VARIANTES
   ========================================================= */

.lm-btn--primary {
  color: var(--lm-accent-dark);
  background: var(--lm-accent);
  border-color: var(--lm-accent);
  box-shadow: var(--lm-shadow-accent);
}

.lm-btn--primary:hover {
  box-shadow: 0 15px 35px rgba(240, 198, 116, 0.35);
}

.lm-btn--secondary {
  color: var(--lm-text-main);
  background: transparent;
  border-color: var(--lm-border-strong);
}

.lm-btn--secondary:hover {
  background: var(--lm-surface-medium);
  border-color: var(--lm-border-gold);
}

.lm-btn--ghost {
  color: var(--lm-accent);
  background: var(--lm-accent-soft);
  border-color: var(--lm-border-gold);
}

.lm-btn--ghost:hover {
  background: var(--lm-accent-medium);
  border-color: var(--lm-accent-strong);
}

.lm-btn--danger {
  color: var(--lm-danger);
  background: var(--lm-danger-soft);
  border-color: var(--lm-danger-border);
}

.lm-btn--danger:hover {
  background: rgba(140, 30, 30, 0.22);
  border-color: rgba(255, 120, 120, 0.42);
}

.lm-btn--success {
  color: var(--lm-success);
  background: var(--lm-success-soft);
  border-color: var(--lm-success-border);
}

.lm-btn--success:hover {
  background: rgba(159, 211, 167, 0.14);
}

/* =========================================================
   TAILLES
   ========================================================= */

.lm-btn--xs {
  min-height: 32px;
  padding: 7px 10px;
  border-radius: var(--lm-radius-sm);
  font-size: 0.78rem;
}

.lm-btn--sm {
  min-height: 36px;
  padding: 9px 13px;
  border-radius: var(--lm-radius-sm);
  font-size: 0.88rem;
}

.lm-btn--lg {
  min-height: 52px;
  padding: 14px 24px;
  border-radius: var(--lm-radius-lg);
  font-size: 1.04rem;
}

/* =========================================================
   FORMES
   ========================================================= */

.lm-btn--pill {
  border-radius: var(--lm-radius-pill);
}

.lm-btn--square {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: var(--lm-radius-sm);
}

.lm-btn--full {
  width: 100%;
}

/* =========================================================
   GROUPES
   ========================================================= */

.lm-btn-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lm-btn-group--end {
  justify-content: flex-end;
}

.lm-btn-group--center {
  justify-content: center;
}

.lm-btn-group--column {
  flex-direction: column;
  align-items: stretch;
}

@media (max-width: 700px) {
  .lm-btn-group--mobile-stack {
    flex-direction: column;
    align-items: stretch;
  }

  .lm-btn-group--mobile-stack .lm-btn {
    width: 100%;
  }
}