/* Le vote du jour : l'urne est une broyeuse. */
.vq { padding: 22px 16px 18px; transform: rotate(-.6deg); margin: 8px 0 20px; }
.vq h2 { font: 400 clamp(28px, 8vw, 44px)/1.02 var(--anton); text-transform: uppercase; margin: 6px 0 10px; }
.vq .ctx { margin: 0; font-weight: 600; }
.vq .src { font-size: 13px; color: var(--muted); margin: 8px 0 0; }

.ballots { display: grid; gap: 12px; margin: 0 0 18px; }
.ballot {
  position: relative; text-align: left; width: 100%; min-height: 58px; padding: 14px 16px 14px 54px; cursor: pointer;
  background: #fff; border: 1px solid #cfc6b2; box-shadow: var(--shadow); font: 800 17px/1.25 var(--inter); color: var(--ink);
  transition: transform .15s;
}
.ballot:nth-child(odd) { transform: rotate(-.7deg); }
.ballot:nth-child(even) { transform: rotate(.6deg); }
.ballot:hover, .ballot:focus-visible { transform: rotate(0) translateX(4px); }
.ballot::before { /* case à cocher tracée à la main */
  content: ''; position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
  border: 2.5px solid var(--ink); border-radius: 3px 5px 2px 4px; transform: rotate(-4deg);
}
.ballot.picked::after { content: '✗'; position: absolute; left: 17px; top: 50%; margin-top: -19px; font: 900 30px/1 var(--inter); color: var(--red); }

.urn { position: relative; height: 150px; margin: 24px auto 8px; max-width: 320px; }
.urn .mouth { position: absolute; left: 6%; right: 6%; top: 0; height: 56px; background: #2b2b2b; border-radius: 6px 6px 0 0; box-shadow: inset 0 -6px 0 #151515; }
.urn .mouth::after { content: ''; position: absolute; left: 14%; right: 14%; top: 22px; height: 8px; background: #050505; border-radius: 4px; }
.urn .teeth { position: absolute; left: 6%; right: 6%; top: 56px; height: 16px; background: repeating-linear-gradient(90deg, #9a9a9a 0 10px, #6a6a6a 10px 12px); }
.urn .label { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); color: var(--yellow); font: 900 10px/1 var(--inter); letter-spacing: .8px; white-space: nowrap; }
.urn .note { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 12px; color: var(--muted); font-style: italic; }
.urn.run .teeth { animation: grind .12s linear infinite; }
@keyframes grind { to { background-position: 12px 0; } }
.urn.run .mouth { animation: rattle .09s linear infinite; }
@keyframes rattle { 50% { transform: translateX(1.5px); } }

.flying { position: fixed; z-index: 30; pointer-events: none; }
.strip { position: absolute; top: 72px; width: 9px; background: #fff; border: 1px solid #cfc6b2; pointer-events: none; animation: shred 1.1s ease-in forwards; }
@keyframes shred { from { height: 0; opacity: 1; } 60% { opacity: 1; } to { height: 120px; transform: translateY(40px) rotate(var(--r)); opacity: 0; } }

.pv { padding: 20px 16px 18px; transform: rotate(.5deg); animation: slipIn .7s cubic-bezier(.16,1,.3,1) both; }
.pv h3 { font: 400 26px/1 var(--anton); text-transform: uppercase; margin: 0 0 4px; }
.pv .taken { font-weight: 800; margin: 0; }
.pv .taken-note { font-size: 12px; font-style: italic; color: var(--muted); margin: 2px 0 14px; }
.vbar { margin: 12px 0; }
.vbar .lbl { display: flex; justify-content: space-between; gap: 10px; font-weight: 800; }
.vbar .lbl b { font: 400 22px/1 var(--anton); white-space: nowrap; }
.vbar .track { height: 22px; margin-top: 4px; position: relative; }
.vbar .fill { /* trait de surligneur */
  height: 100%; width: 0; background: linear-gradient(100deg, transparent 0, rgba(242,200,30,.9) 2%, rgba(242,200,30,.8) 97%, transparent 100%);
  transform: skewX(-8deg); transition: width 1s cubic-bezier(.6,0,.2,1);
}
.vbar.mine .fill { background: linear-gradient(100deg, transparent 0, rgba(232,20,28,.85) 2%, rgba(232,20,28,.75) 97%, transparent 100%); }
.vbar .you { display: inline-block; margin-left: 6px; font: 900 10px/1 var(--inter); background: var(--ink); color: var(--paper); padding: 3px 5px; vertical-align: middle; }
.pv .meta { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.pv .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }