/* Jeton : piste horizontale + jeton à attraper (v3). Copie identique dans ballons/, chiffre/, fois/ et gagner/. */
.jt{ --jt-s:54px; position:relative; height:136px; margin:6px 0 0; touch-action:none; user-select:none; -webkit-user-select:none; outline:none; -webkit-tap-highlight-color:transparent; }
.jt__rail{ position:absolute; left:calc(var(--jt-s) / 2); right:calc(var(--jt-s) / 2); bottom:40px; height:6px; border-radius:var(--r-pill, 999px);
  background:linear-gradient(90deg, var(--raised-3), color-mix(in srgb, var(--u) 45%, var(--raised-3))); }
.jt__over, .jt__ticks{ position:absolute; left:calc(var(--jt-s) / 2); right:calc(var(--jt-s) / 2); top:0; bottom:0; pointer-events:none; }
.jt__tick{ position:absolute; bottom:6px; transform:translateX(-50%); font-size:11px; color:var(--fg-4); white-space:nowrap; font-variant-numeric:tabular-nums; }
.jt__tick::before{ content:""; position:absolute; left:50%; top:-14px; width:1px; height:8px; background:var(--fg-4); }
.jt__tick.is-first{ transform:translateX(-12px); } .jt__tick.is-first::before{ left:12px; }
.jt__tick.is-last{ transform:translateX(calc(-100% + 12px)); } .jt__tick.is-last::before{ left:auto; right:12px; }
.jt__shadow{ position:absolute; left:0; top:0; width:100px; height:10px; border-radius:50%; transform-origin:0 50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,0,0,.85), rgba(0,0,0,0)); will-change:transform, opacity; }
.jt__tk{ position:absolute; left:0; top:0; width:var(--jt-s); height:var(--jt-s); pointer-events:none; z-index:3; will-change:transform; }
.jt__rot{ position:absolute; inset:0; transform-origin:50% 0; will-change:transform; }
.jt__sq{ position:absolute; inset:0; transform-origin:50% 100%; will-change:transform; }
.jt__disc{ position:absolute; inset:0; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--u) 34%, #1d1d1d), #121212 70%);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--u) 75%, transparent), inset 0 1px 0 rgba(255,255,255,.2), 0 6px 16px rgba(0,0,0,.45); }
.jt__face{ width:64%; height:64%; display:grid; place-items:center; color:var(--fg); }
.jt__face svg{ width:100%; height:100%; display:block; fill:currentColor; overflow:visible; }
.jt__face b{ font-size:17px; font-weight:600; letter-spacing:-.03em; color:var(--fg); }
.jt.is-holding .jt__disc{ box-shadow:0 0 0 2px var(--u), 0 0 0 7px color-mix(in srgb, var(--u) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.24), 0 14px 26px rgba(0,0,0,.5); }
.jt:focus-visible .jt__disc{ box-shadow:0 0 0 2px var(--u), 0 0 0 6px color-mix(in srgb, var(--u) 40%, transparent); }
.jt.is-off{ pointer-events:none; }
.jt.is-off .jt__tk{ opacity:.55; }
.jt__mark{ position:absolute; bottom:40px; width:0; height:0; }
.jt__mark i{ position:absolute; left:-1px; bottom:-6px; width:2px; height:18px; border-radius:2px; background:currentColor; }
.jt__mark span{ position:absolute; bottom:16px; transform:translateX(-50%); font-size:11px; font-weight:600; white-space:nowrap; }
.jt__pin{ position:absolute; bottom:40px; width:16px; height:16px; margin-left:-8px; margin-bottom:-5px; border-radius:50%; background:var(--ok, #30D158);
  box-shadow:0 0 0 3px var(--bg, #0A0A0A); }
.jt__pin.is-in{ animation:jtpin .62s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes jtpin{ 0%{ transform:translateY(-70px) scale(.6); opacity:0; } 55%{ transform:translateY(0) scale(1.25,.75); opacity:1; } 100%{ transform:none; } }
@media (hover:hover) and (pointer:fine){
  .jt{ cursor:pointer; }
  .jt.is-hover-tk{ cursor:grab; }
  .jt.is-holding, .jt.is-holding *{ cursor:grabbing; }
  .jt.is-hover-tk .jt__disc{ box-shadow:0 0 0 2px var(--u), 0 0 0 7px color-mix(in srgb, var(--u) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px rgba(0,0,0,.45); }
}
@media (min-width:700px){ .jt{ --jt-s:60px; height:146px; } .jt__tick{ font-size:12px; } }
@media (prefers-reduced-motion:reduce){ .jt__pin.is-in{ animation:none; } }
.tkm{ display:block; width:100%; height:100%; background:currentColor; -webkit-mask:var(--m) center / contain no-repeat; mask:var(--m) center / contain no-repeat; }
/* en main (UX 10 nov. 2026) : le jeton flotte soulevé au-dessus du milieu de la piste, halo doux pour inviter à le prendre */
.jt{ --jt-s:58px; }
.jt.is-inhand .jt__disc{ box-shadow:0 0 0 2px var(--u), 0 0 0 8px color-mix(in srgb, var(--u) 16%, transparent), inset 0 1px 0 rgba(255,255,255,.24), 0 16px 28px rgba(0,0,0,.5); }
.jt.is-inhand .jt__rail{ background:linear-gradient(90deg, var(--raised-3), color-mix(in srgb, var(--u) 30%, var(--raised-3))); }
@media (min-width:700px){ .jt{ --jt-s:62px; } }
/* clic de souris : pas de cadre de focus autour de la piste (le jeton porte déjà son anneau au clavier) */
.jt[role="slider"]:focus-visible{ outline:none; }