/* ============================================================
   ✨ GLOBAL BUTTONS — LUNANOVA
   Utilisation :
   <a class="ln-btn ln-btn--gold" href="...">Texte</a>
   <button class="ln-btn ln-btn--gold" type="button">Texte</button>
============================================================ */

:root{
  /* Tokens (peuvent être surchargés par page/section) */
  --ln-btn-font: "Inter", sans-serif;

  --ln-btn-radius: 999px;
  --ln-btn-pad-y: 16px;
  --ln-btn-pad-x: 42px;

  --ln-btn-letter: 0.06em;

  --ln-btn-text: rgba(20,10,6,0.96);

  --ln-btn-shadow:
    0 16px 36px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.22);

  --ln-btn-shadow-hover:
    0 22px 50px rgba(0,0,0,0.42),
    inset 0 0 0 1px rgba(255,255,255,0.30);

  --ln-btn-ease: cubic-bezier(.25,.1,.25,1);
}

/* Base */
.ln-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: var(--ln-btn-pad-y) var(--ln-btn-pad-x);
  border-radius: var(--ln-btn-radius);

  text-decoration: none;
  font-family: var(--ln-btn-font);
  font-weight: 500;
  letter-spacing: var(--ln-btn-letter);
  line-height: 1;

  border: 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  color: var(--ln-btn-text);

  box-shadow: var(--ln-btn-shadow);

  transition:
    transform .28s var(--ln-btn-ease),
    box-shadow .28s var(--ln-btn-ease),
    filter .28s var(--ln-btn-ease);
}

.ln-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.13);
  box-shadow: var(--ln-btn-shadow-hover);
}

.ln-btn:active{
  transform: translateY(-1px);
  filter: brightness(1.01);
}

/* Accessibilité */
.ln-btn:focus-visible{
  outline: 2px solid rgba(230,214,158,0.62);
  outline-offset: 6px;
}

/* Disabled (bouton ou lien “aria-disabled”) */
.ln-btn:disabled,
.ln-btn[aria-disabled="true"]{
  opacity: 0.62;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
}

/* Variant Gold */
.ln-btn--gold{
    background: var(--gold-gradient-main);
  color: #fff;
}


/* Responsive global (le layout peut encore surcharger localement) */
@media (max-width: 640px){
  .ln-btn{
    --ln-btn-pad-y: 14px;
    --ln-btn-pad-x: 22px;
  }
}