/* Boutons (tampon, secondaires) et tickets de sujet. */
/* ------------------------------------------------------------- buttons */
.stamp-btn {
  font-family: var(--disp); font-weight: 600; font-size: 20px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--stamp); background: var(--card); padding: 16px 30px; border-radius: 3px;
  border: 2px solid var(--stamp); box-shadow: inset 0 0 0 4px var(--card), inset 0 0 0 5px var(--stamp), var(--shadow-ticket);
  transform: rotate(-1.2deg); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.stamp-btn:hover { transform: rotate(-1.2deg) translateY(-2px); }
.stamp-btn:active { transform: rotate(-1.2deg) translateY(1px); box-shadow: inset 0 0 0 4px var(--card), inset 0 0 0 5px var(--stamp); }
.stamp-btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn {
  font-family: var(--disp); font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 16px; border: 1px solid var(--baize-line); border-radius: 3px; color: var(--fg);
  transition: background .2s, border-color .2s;
}
.btn:hover { background: rgba(255,255,255,.06); border-color: var(--fg-dim); }
.btn.solid { background: var(--cream); color: var(--on-cream); border-color: var(--cream); }
.btn.solid:hover { background: #fff; }
.btn.danger { color: #ffb3a6; border-color: rgba(200,50,30,.5); }
.btn.danger:hover { background: rgba(200,50,30,.18); }
.btn:disabled { opacity: .45; cursor: default; }
.ink .btn { border-color: var(--card-edge); color: var(--ink); }
.ink .btn:hover { background: rgba(var(--ink-rgb), .05); border-color: var(--ink-dim); }
.ink .btn.solid { background: var(--ink); color: var(--card); border-color: var(--ink); }
.ink .btn.solid:hover { background: var(--ink-deep); }

/* ------------------------------------------------------------- tickets */
.ticket {
  --stub: 44px;
  position: relative; color: var(--ink); background: var(--card); border-radius: 4px;
  box-shadow: var(--shadow-ticket); padding: 22px 26px 22px calc(var(--stub) + 26px);
}
.ticket::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--stub);
  background: var(--card-2); border-right: 2px dashed var(--card-edge); border-radius: 4px 0 0 4px;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) 0 0 / 100% 100%; mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px);
}
.ticket .stubtxt {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--stub); display: flex; align-items: center; justify-content: center;
  font-family: var(--disp); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim);
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.ticket .thead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-family: var(--type); font-size: 13px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .06em; }
.ticket .thead .num { font-family: var(--disp); font-size: 22px; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.ticket .tq { font-family: var(--type); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; margin-top: 12px; text-wrap: pretty; }
.ticket.mini { padding: 12px 14px 12px calc(var(--stub) + 14px); --stub: 30px; }
.ticket.mini .tq { font-size: 14px; margin-top: 4px; }
.fan { position: relative; height: 200px; }
.fan .ticket { position: absolute; left: 0; right: 0; top: 0; }
.fan .ticket:nth-child(1) { transform: rotate(-2.4deg) translate(-8px, 22px); opacity: .55; }
.fan .ticket:nth-child(2) { transform: rotate(1.6deg) translate(10px, 11px); opacity: .8; }
.fan .ticket:nth-child(3) { transform: rotate(-.6deg); }
.fan .ticket.mini { padding-top: 16px; padding-bottom: 16px; }
.fan .ticket.mini .tq { font-size: 15px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }