/* ============================================================
   BOUTONS — Variables CSS pour personnalisation Wagtail
   ============================================================ */

/* Bouton primaire avec effet rideau */
.lm-btn-primary {
  --btn-bg: var(--gold);
  --btn-text: var(--bg);
  --btn-hover-bg: var(--bg2);

  position: relative; display: inline-flex; align-items: center;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--btn-text); background: var(--btn-bg);
  padding: 1.1rem 2.8rem; overflow: hidden;
  transition: color .4s; cursor: pointer; border: none;
  font-family: 'Jost', sans-serif;
}
.lm-btn-primary::before {
  content: ''; position: absolute; inset: 0; background: var(--btn-hover-bg);
  transform: translateX(-101%);
  transition: transform .4s cubic-bezier(.77,0,.175,1);
}
.lm-btn-primary:hover { color: var(--btn-text); }
.lm-btn-primary:hover::before { transform: translateX(0); }
.lm-btn-primary span { position: relative; z-index: 1; }

/* Bouton ghost avec flèche */
.lm-btn-ghost {
  --btn-ghost: var(--muted);

  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--btn-ghost); transition: color .3s; cursor: pointer;
  display: inline-flex; align-items: center; gap: .8rem;
  background: none; border: none; font-family: 'Jost', sans-serif;
}
.lm-btn-ghost::after { content: '→'; transition: transform .3s; }
.lm-btn-ghost:hover { color: var(--text); }
.lm-btn-ghost:hover::after { transform: translateX(5px); }

/* Navigation CTA */
.lm-nav__cta {
  background: var(--btn-bg, var(--gold, #c9a96e));
  color: var(--btn-text, var(--bg, #f7f2e8));
  transition: background .3s, color .3s;
}
.lm-nav__cta:hover {
  background: var(--btn-hover-bg, var(--bg2, #ede8db));
  color: var(--btn-text, var(--bg, #f7f2e8));
}