/*
 * _components/pz-buttons.css
 * Promotion luxe des boutons legacy (.btn, .btn-gold, .btn-primary, etc.)
 * vers le langage pz-btn (Luxe Granulé 2026). HTML inchangé.
 *
 * Hérité du pattern .pz-btn de _patterns/pz-theme.css :
 * - Fond plein + edge inset (relief)
 * - Shimmer ::before qui balaie au hover
 * - Lift translateY au hover, retour à 0 au :active
 * - Transitions φ-ease (var(--pz-ease-phi))
 */

/* ── Base : tous les .btn héritent du langage pz-btn ─────────────────── */
.btn,
.navbar-cta,
button.navbar-cta {
  --pz-btn-bg:   var(--pz-red);
  --pz-btn-fg:   var(--pz-ivory);
  --pz-btn-edge: var(--pz-red-2);
  display: inline-flex;
  align-items: center;
  gap: var(--pz-fib-8, 8px);
  padding: var(--pz-fib-13, 13px) var(--pz-fib-21, 21px);
  background: var(--pz-btn-bg);
  color: var(--pz-btn-fg);
  font-family: var(--pz-font-body);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--pz-radius-sm, 6px);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--pz-t-quick, 180ms) var(--pz-ease-phi),
              box-shadow var(--pz-t-soft, 320ms) var(--pz-ease-out),
              background var(--pz-t-quick, 180ms) var(--pz-ease-out);
  box-shadow: 0 4px 14px rgba(179, 0, 27, 0.20), inset 0 -2px 0 var(--pz-btn-edge);
  position: relative;
  overflow: hidden;
}

/* Shimmer doré qui balaie le bouton au hover */
.btn::before,
.navbar-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.20), transparent);
  transition: left var(--pz-t-cinema, 900ms) var(--pz-ease-out);
  pointer-events: none;
}

.btn:hover,
.navbar-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(179, 0, 27, 0.32), inset 0 -2px 0 var(--pz-btn-edge);
  text-decoration: none;
}
.btn:hover::before,
.navbar-cta:hover::before { left: 100%; }
.btn:active,
.navbar-cta:active { transform: translateY(0); }

/* ── Variant rouge (primary) ─────────────────────────────────────────── */
.btn-primary,
.navbar-cta {
  --pz-btn-bg:   var(--pz-red);
  --pz-btn-fg:   var(--pz-ivory);
  --pz-btn-edge: var(--pz-red-2);
  background: var(--pz-btn-bg);
  color: var(--pz-btn-fg);
}
.btn-primary:hover,
.navbar-cta:hover {
  background: var(--pz-red-2);
}

/* ── Variant or (gold) — signature luxe ──────────────────────────────── */
.btn-gold {
  --pz-btn-bg:   var(--pz-gold);
  --pz-btn-fg:   var(--pz-ink);
  --pz-btn-edge: var(--pz-gold-2);
  background:
    linear-gradient(135deg,
      var(--pz-gold-3, #e6c878) 0%,
      var(--pz-gold,   #c9a14a) 45%,
      var(--pz-gold-2, #b78a32) 100%);
  color: var(--pz-btn-fg);
  box-shadow:
    0 4px 14px var(--pz-gold-glow, rgba(201, 161, 74, 0.45)),
    inset 0 -2px 0 var(--pz-btn-edge),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-gold:hover {
  background:
    linear-gradient(135deg,
      var(--pz-gold-3, #e6c878) 0%,
      var(--pz-gold-light, var(--pz-gold-3, #e6c878)) 45%,
      var(--pz-gold,   #c9a14a) 100%);
  box-shadow:
    0 12px 32px var(--pz-gold-glow, rgba(201, 161, 74, 0.55)),
    inset 0 -2px 0 var(--pz-btn-edge),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ── Variant secondary (outline-ish, plus discret) ───────────────────── */
.btn-secondary {
  --pz-btn-bg:   transparent;
  --pz-btn-fg:   var(--pz-ivory);
  --pz-btn-edge: transparent;
  background: transparent;
  color: var(--pz-btn-fg);
  border: 1px solid rgba(245, 233, 212, 0.32);
  box-shadow: none;
}
.btn-secondary:hover {
  background: rgba(245, 233, 212, 0.08);
  border-color: var(--pz-gold, #c9a14a);
  color: var(--pz-gold-3, #e6c878);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.20);
}

/* ── Variant outline (CTA sur fond clair) ────────────────────────────── */
.btn-outline {
  --pz-btn-bg:   transparent;
  --pz-btn-fg:   var(--pz-ink, #0a0908);
  --pz-btn-edge: var(--pz-ink, #0a0908);
  background: transparent;
  color: var(--pz-btn-fg);
  border: 1px solid var(--pz-ink, #0a0908);
  box-shadow: none;
}
.btn-outline:hover {
  background: var(--pz-ink, #0a0908);
  color: var(--pz-ivory, #fbf6ec);
  border-color: var(--pz-ink, #0a0908);
}

/* ── Variant danger (admin-like) — utilisable côté public si erreur ── */
.btn-danger {
  --pz-btn-bg:   var(--pz-red-2, #8a0014);
  --pz-btn-fg:   var(--pz-ivory);
  --pz-btn-edge: rgba(0, 0, 0, 0.32);
  background: var(--pz-btn-bg);
  color: var(--pz-btn-fg);
}

/* ── Petite taille (btn-sm) ──────────────────────────────────────────── */
.btn-sm {
  padding: var(--pz-fib-8, 8px) var(--pz-fib-13, 13px);
  font-size: 0.78rem;
}

/* ── Disabled state ──────────────────────────────────────────────────── */
.btn:disabled,
.btn[aria-disabled="true"],
.navbar-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.btn:disabled:hover,
.navbar-cta:disabled:hover {
  transform: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), inset 0 -2px 0 var(--pz-btn-edge);
}
.btn:disabled::before,
.navbar-cta:disabled::before { display: none; }

/* ── Variants luxe pour le langage `.pz-btn` (theme-2026) ─────────────── */

/* `.pz-btn--gold` — alias canonique. Le rename Phase 3 a transformé
 * `.pz-btn--gold` en `.pz-btn--pz-gold` (collision BEM/var). On rétablit
 * le nom canonique tout en gardant l'ancien fonctionnel. */
.pz-btn--gold,
.pz-btn--pz-gold {
  --pz-btn-bg:   var(--pz-gold);
  --pz-btn-fg:   var(--pz-ink);
  --pz-btn-edge: var(--pz-gold-2);
  background:
    linear-gradient(135deg,
      var(--pz-gold-3, #e6c878) 0%,
      var(--pz-gold,   #c9a14a) 45%,
      var(--pz-gold-2, #b78a32) 100%);
  color: var(--pz-btn-fg);
  box-shadow:
    0 4px 14px var(--pz-gold-glow, rgba(201, 161, 74, 0.45)),
    inset 0 -2px 0 var(--pz-btn-edge),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.pz-btn--gold:hover,
.pz-btn--pz-gold:hover {
  background:
    linear-gradient(135deg,
      var(--pz-gold-3, #e6c878) 0%,
      var(--pz-gold-light, var(--pz-gold-3, #e6c878)) 45%,
      var(--pz-gold,   #c9a14a) 100%);
  box-shadow:
    0 12px 32px var(--pz-gold-glow, rgba(201, 161, 74, 0.55)),
    inset 0 -2px 0 var(--pz-btn-edge),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* `.pz-btn--ghost` — secondaire scène sombre, frère discret du primaire or.
 *
 * Bug (récidive 2026-06-26, signalé patron) : le pattern de base `.pz-btn`
 * (_patterns/pz-theme.css) est chargé APRÈS ce fichier et ré-assène
 * `--pz-btn-bg: var(--pz-red)` + `background: var(--pz-btn-bg)` à spécificité
 * égale → la var translucide du ghost était clobberée → fond rouge plein au
 * repos, et au hover un bleed ivoire-sur-rouge → bordeaux boueux qui jure.
 *
 * Fix doctrinal : on ne dépend plus de `--pz-btn-bg` (clobberé par la cascade) ;
 * `background` est posé en littéral-token, donc résilient à l'ordre de chargement.
 * Le bouton DEVIENT le secondaire rouge canonique du design-system (frère de
 * `.btn-primary`) : fond `--pz-red`, hover `--pz-red-2` + lift, 100% tokens. */
.pz-btn--ghost {
  --pz-btn-bg:   var(--pz-red);
  --pz-btn-fg:   var(--pz-ivory);
  --pz-btn-edge: var(--pz-red-2);
  background: var(--pz-red);
  color: var(--pz-ivory);
  border: 1px solid var(--pz-red-2);
  box-shadow:
    0 4px 14px var(--pz-red-glow),
    inset 0 -2px 0 var(--pz-red-2);
}
.pz-btn--ghost:hover {
  background: var(--pz-red-2);
  border-color: var(--pz-red-2);
  color: var(--pz-ivory);
  box-shadow:
    0 10px 30px var(--pz-red-glow),
    inset 0 -2px 0 var(--pz-red-2);
}

/* `.pz-btn--ink` — variante sombre filled (contraste sur fond clair) */
.pz-btn--ink {
  --pz-btn-bg:   var(--pz-ink, #0a0908);
  --pz-btn-fg:   var(--pz-ivory, #fbf6ec);
  --pz-btn-edge: rgba(255, 255, 255, 0.06);
  background: var(--pz-btn-bg);
  color: var(--pz-btn-fg);
}
.pz-btn--ink:hover {
  background: var(--pz-ink-2, #16140f);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.45),
    inset 0 -2px 0 var(--pz-btn-edge);
}

/* ── Reduced-motion respect ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .navbar-cta,
  .btn::before,
  .navbar-cta::before {
    transition: none;
  }
  .btn:hover,
  .navbar-cta:hover {
    transform: none;
  }
}