.btn{
  --btn-bg: var(--surface-2);
  --btn-fg: var(--txt);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.88em 1.5em; border:1px solid var(--line-strong); border-radius:var(--r-pill);
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--f-title); font-weight:700; font-size:var(--fs-md);
  cursor:pointer; text-align:center;
  transition:transform .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.3); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn[disabled]{ opacity:.45; pointer-events:none; }

.btn--primary{
  --btn-bg:linear-gradient(135deg,var(--violet) 0%,var(--violet-2) 100%);
  --btn-fg:#fff; border-color:transparent; box-shadow:var(--sh-glow);
}
.btn--primary:hover{ box-shadow:0 0 0 1px rgba(155,107,255,.5), 0 18px 52px rgba(123,69,242,.4); }

.btn--gold{ --btn-bg:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 100%); --btn-fg:#2A1F05; border-color:transparent; }
.btn--live{ --btn-bg:linear-gradient(135deg,#FF4E6C,#E0233F); --btn-fg:#fff; border-color:transparent; }
.btn--ghost{ --btn-bg:transparent; border-color:var(--line-strong); }
.btn--big{ padding:1.05em 2em; font-size:var(--fs-lg); }
.btn--full{ width:100%; }
.btn--chip{ padding:.5em 1em; font-size:var(--fs-sm); background:rgba(255,255,255,.06); }

/* Bouton d'option d'événement */
.opt{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:.85em 1.2em; border-radius:var(--r-md);
  background:rgba(255,255,255,.035); border:1px solid var(--line);
  color:var(--txt); font-family:var(--f-body); font-size:var(--fs-md); font-weight:500;
  transition:background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.opt:hover{ background:var(--tone-soft,rgba(255,255,255,.07)); border-color:var(--tone,var(--line-strong)); transform:translateX(3px); }
.opt:active{ transform:translateX(1px) scale(.995); }
.opt-tag{
  display:block; font-family:var(--f-title); font-weight:800; font-size:.76rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--tone,var(--violet)); margin-bottom:.25em;
}
.dice{
  width:2em; height:2em; padding:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid var(--line-strong);
  font-size:.8em; line-height:1; display:inline-flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.dice:hover{ transform:rotate(24deg) scale(1.1); background:var(--violet-soft); }