/* ══════════════════════════════════════════════════════════════
   blackScale IT — boutons partagés
   Utilisé par la nav-cta et les CTA de page.
   Tokens attendus sur :root : --mint, --dark, --white, --indigo.
   ══════════════════════════════════════════════════════════════ */

.btn {
  display: inline-block;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 15px 32px;
  cursor: pointer;
  border: none;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s, transform .15s ease;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* ── Mint ── */
.btn-mint            { background: var(--mint); color: var(--dark); }
.btn-mint:hover      { background: var(--dark); color: var(--mint); }
.btn-mint.on-dark:hover { background: var(--white); color: var(--dark); }

/* ── Indigo ── */
.btn-indigo          { background: var(--indigo); color: var(--white); }
.btn-indigo:hover    { background: var(--dark); color: var(--white); }
.btn-indigo.on-dark:hover { background: var(--mint); color: var(--dark); }

/* ── Ghost ── */
.btn-ghost           { background: transparent; color: var(--dark); border: 1.5px solid rgba(46,46,46,.30); }
.btn-ghost:hover     { background: var(--dark); color: var(--white); }
.btn-ghost-white     { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,.40); }
.btn-ghost-white:hover { background: var(--white); color: var(--dark); }

/* ── Mint on indigo section ── */
.btn-mint-on-indigo        { background: var(--mint); color: var(--dark); }
.btn-mint-on-indigo:hover  { background: var(--white); color: var(--dark); }

/* ── Focus ── */
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }

/* ── Responsive ── */
@media (max-width: 900px) { .btn { padding: 12px 22px; font-size: .75rem; } }