/* ============================================================
   BOUTONS 3D — style commun à tout le site
   Face en dégradé, rebord plein dessous, se soulève au survol
   et s'enfonce au clic. Spécificité basse (:where) pour que les
   règles de mise en page des pages restent prioritaires.
   ============================================================ */
:root {
  --b3-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Socle commun ---------- */
body.vp-body :where(
  .btn-primary,
  .vp-btn,
  .vp-btn-ghost,
  .vp-auth-submit,
  .vp-bazaar-cart,
  .vp-fortune-go,
  .hp-pill,
  .hp-disc-btn
),
#vote-card .vp-vote-go {
  --b3-top: #8cd7fb;
  --b3-bot: #3a9fe0;
  --b3-edge: #175a8f;
  --b3-ink: #0b1f32;
  --b3-lift: 5px;
  --bs-btn-color: var(--b3-ink);
  --bs-btn-hover-color: var(--b3-ink);
  --bs-btn-active-color: var(--b3-ink);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-focus-box-shadow: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--b3-top) 0%, var(--b3-bot) 100%);
  color: var(--b3-ink);
  font-family: var(--vp-font-btn, "Baloo 2", "Nunito", sans-serif);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  filter: none;
  translate: none;
  transform: none;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 0 rgba(0, 0, 0, .08),
    0 var(--b3-lift) 0 var(--b3-edge),
    0 calc(var(--b3-lift) + 8px) 20px rgba(0, 0, 0, .3);
  transition: transform .14s var(--b3-ease), box-shadow .14s var(--b3-ease), filter .14s ease, background .18s ease;
}
body.vp-body :where(.btn-primary, .vp-btn, .vp-btn-ghost, .vp-auth-submit) {
  min-height: 46px;
  padding: .7rem 1.35rem;
  font-size: .9rem;
}
body.vp-body :where(.vp-btn-sm) { min-height: 38px; padding: .45rem .95rem; font-size: .8rem; border-radius: 12px; }

/* survol / clic / focus */
body.vp-body :where(.btn-primary, .vp-btn, .vp-btn-ghost, .vp-auth-submit, .vp-bazaar-cart, .vp-fortune-go, .hp-pill, .hp-disc-btn):hover,
#vote-card .vp-vote-go:hover {
  color: var(--b3-ink);
  background: linear-gradient(180deg, var(--b3-top) 0%, var(--b3-bot) 100%);
  filter: brightness(1.05) saturate(1.05);
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .5),
    inset 0 -2px 0 rgba(0, 0, 0, .08),
    0 calc(var(--b3-lift) + 2px) 0 var(--b3-edge),
    0 calc(var(--b3-lift) + 12px) 24px rgba(0, 0, 0, .34);
}
body.vp-body :where(.btn-primary, .vp-btn, .vp-btn-ghost, .vp-auth-submit, .vp-bazaar-cart, .vp-fortune-go, .hp-pill, .hp-disc-btn):active,
#vote-card .vp-vote-go:active {
  color: var(--b3-ink);
  filter: brightness(.98);
  translate: none;
  transform: translateY(calc(var(--b3-lift) - 1px));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .35),
    0 1px 0 var(--b3-edge),
    0 4px 10px rgba(0, 0, 0, .3);
}
body.vp-body :where(.btn-primary, .vp-btn, .vp-btn-ghost, .vp-auth-submit, .vp-bazaar-cart, .vp-fortune-go, .hp-pill, .hp-disc-btn):focus-visible,
#vote-card .vp-vote-go:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
body.vp-body :where(.btn-primary, .vp-btn, .vp-btn-ghost, .vp-auth-submit, .vp-fortune-go):is(:disabled, .disabled, .is-done),
#vote-card .vp-vote-go:disabled {
  cursor: not-allowed;
  filter: grayscale(.6) brightness(.8);
  transform: translateY(calc(var(--b3-lift) - 2px));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), 0 2px 0 var(--b3-edge);
}

/* ---------- Variante Discord ---------- */
body.vp-body :where(.vp-btn-discord, .hp-disc-btn, .hp-pill-disc) {
  --b3-top: #7d88ff;
  --b3-bot: #5865f2;
  --b3-edge: #3640a8;
  --b3-ink: #fff;
}

/* ---------- Variante verre (secondaire) ---------- */
body.vp-body :where(.vp-btn-ghost, .hp-pill:not(.hp-pill-disc)) {
  --b3-top: rgba(255, 255, 255, .13);
  --b3-bot: rgba(255, 255, 255, .06);
  --b3-edge: rgba(0, 0, 0, .45);
  --b3-ink: var(--vp-ink);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  outline: 1px solid rgba(255, 255, 255, .16);
  outline-offset: -1px;
}
body.vp-body :where(.vp-btn-ghost, .hp-pill:not(.hp-pill-disc)):hover {
  --b3-top: rgba(255, 255, 255, .2);
  --b3-bot: rgba(255, 255, 255, .1);
  outline-color: color-mix(in srgb, var(--vp-orange) 55%, transparent);
}
body.vp-body :where(.vp-btn-ghost, .hp-pill:not(.hp-pill-disc)) i { color: var(--vp-orange); }

/* ---------- Ajustements par composant ---------- */
/* Panier boutique : jaune doré, comme un vrai bouton d'achat */
body.vp-body :where(.vp-bazaar-cart) {
  --b3-top: #ffe27a;
  --b3-bot: #f5b82e;
  --b3-edge: #b9740f;
  --b3-ink: #4a2a00;
  padding: 12px 20px;
}
body.vp-body :where(.vp-bazaar-cart) b { background: #4a2a00; color: #ffe27a; }
/* Roue : gros bouton, texte sur deux lignes gardé */
body.vp-body :where(.vp-fortune-go) { display: grid; --b3-lift: 6px; border-radius: 18px; }
body.vp-body :where(.vp-fortune-go) small { text-transform: none; letter-spacing: 0; font-family: "Nunito", sans-serif; }
/* Bouton payer du panier */
body.vp-body :where(.vp-pay) { --b3-lift: 6px; min-height: 54px; font-size: 1rem; }
/* Accueil : pastilles du hero */
body.vp-body :where(.hp-pill) { height: 46px; padding: 0 20px; border-radius: 14px; font-size: .84rem; --b3-lift: 4px; }
body.vp-body :where(.hp-disc-btn) { --b3-lift: 5px; }

/* Bouton connexion du rail : rebord discret, cohérent avec le reste */
.vp-header .vp-account .vp-btn {
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 rgba(0, 0, 0, .35) !important;
}
.vp-header .vp-account .vp-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35) !important; }

/* Cartes-liens et champ copiable : même rebord, en plus discret */
body.vp-body :where(.hp-link, .hp-addr-copy) {
  box-shadow: 0 4px 0 rgba(0, 0, 0, .45), 0 10px 22px rgba(0, 0, 0, .22);
  transition: transform .14s var(--b3-ease), box-shadow .14s var(--b3-ease), border-color .2s, background .2s;
}
body.vp-body :where(.hp-link, .hp-addr-copy):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .45), 0 14px 26px rgba(0, 0, 0, .28);
}
body.vp-body :where(.hp-link, .hp-addr-copy):active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .2);
}

@media (prefers-reduced-motion: reduce) {
  body.vp-body :where(.btn-primary, .vp-btn, .vp-btn-ghost, .vp-auth-submit, .vp-bazaar-cart, .vp-fortune-go, .hp-pill, .hp-disc-btn),
  #vote-card .vp-vote-go { transition: none; }
}