/* Quiz « Tu votes quoi ? » — pile de cartes + jauges */
.qv-stack { height: 420px; touch-action: none; }
.qv-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 1.75rem; border-radius: 1rem; background: #fff;
  border: 1px solid #e2e8f0; box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  user-select: none; cursor: grab;
  transition: transform 300ms ease, opacity 300ms ease;
}
.qv-card.qv-dragging { transition: none; cursor: grabbing; }
.qv-card.qv-gone { display: none; }
.qv-card-theme { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: #64748b; }
.qv-card-title { margin-top: .5rem; font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.qv-card-resume { margin-top: .75rem; font-size: .95rem; color: #475569; line-height: 1.5; }
.qv-card-date { margin-top: auto; padding-top: 1rem; font-size: .75rem; color: #94a3b8; }

.qv-card-overlay {
  position: absolute; top: 1.25rem; padding: .25rem .75rem;
  border: 3px solid; border-radius: .5rem;
  font-weight: 800; letter-spacing: .05em; opacity: 0; pointer-events: none;
}
.qv-ov-pour   { left: 1.25rem;  color: #059669; border-color: #059669; transform: rotate(-12deg); }
.qv-ov-contre { right: 1.25rem; color: #dc2626; border-color: #dc2626; transform: rotate(12deg); }
.qv-ov-abst   { left: 50%; translate: -50% 0; color: #64748b; border-color: #64748b; }

.qv-fly-right { transform: translate(120vw, -30px) rotate(25deg) !important; opacity: 0; }
.qv-fly-left  { transform: translate(-120vw, -30px) rotate(-25deg) !important; opacity: 0; }
.qv-fly-up    { transform: translateY(-120vh) !important; opacity: 0; }

.qv-btn {
  border-radius: .75rem; padding: .8rem 1.1rem;
  font-weight: 700; font-size: .9rem; border: 2px solid;
  transition: transform 120ms ease;
}
.qv-btn:active { transform: scale(.94); }
.qv-btn-pour   { color: #059669; border-color: #059669; }
.qv-btn-contre { color: #dc2626; border-color: #dc2626; }
.qv-btn-abst   { color: #64748b; border-color: #64748b; }

.qv-bar { transition: width 500ms ease, background 500ms ease; }
.qv-leader-pop { animation: qv-pop 400ms ease; }
@keyframes qv-pop { 50% { transform: scale(1.03); } }

.qv-mini { display: flex; align-items: center; gap: .6rem; font-size: .75rem; }
.qv-mini-abbr { width: 5.5rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qv-mini-track { flex: 1; height: .4rem; border-radius: 9999px; background: #f1f5f9; overflow: hidden; }
.qv-mini-bar { height: 100%; border-radius: 9999px; transition: width 500ms ease; }
.qv-mini-pct { width: 2.5rem; text-align: right; font-family: ui-monospace, monospace; color: #64748b; }

/* page résultat */
.qv-hero { background: linear-gradient(160deg, var(--qv-color), color-mix(in srgb, var(--qv-color) 65%, #0f172a)); }
.qv-fill { width: var(--qv-w); animation: qv-fill 800ms ease backwards; }
@keyframes qv-fill { from { width: 0; } }
.qv-chip {
  display: inline-block; padding: 0 .45rem; border-radius: 9999px;
  background: color-mix(in srgb, var(--qv-color) 15%, #fff);
  color: var(--qv-color); font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .qv-card, .qv-bar, .qv-mini-bar, .qv-fill { transition: none; animation: none; }
}