/* Jeton (shared/jeton.js) : même apparence que le jeton de Duel d'époques (epoques/epoques.css), en commun pour
   Longévités et Verticale. Après labo.css. Mouvement : transform et opacity seulement. */

/* on attrape un objet : la scène n'est plus un curseur de défilement */
.stage.jt-stage{ cursor:default; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.jt-stage .handle{ pointer-events:none; opacity:0; }
.jt-stage .handle:focus-visible{ opacity:1; }
.jt-stage .handle:focus-visible::before{ background:transparent; box-shadow:0 0 0 2px var(--fg); }
.jt-stage .handle:focus-visible .ico{ display:none; }
/* une seule bulle : celle du jeton */
html.jt-on .bulle:not(.bulle--jt){ display:none !important; }

/* en main (11 nov. 2026) : plus de socle ni de cercle. Le jeton flotte, soulevé, au-dessus de l'axe ; son nom est écrit au-dessus. */
.jt-tray{ position:absolute; left:0; top:0; width:var(--s, 80px); height:var(--s, 80px); pointer-events:none; transition:opacity .2s ease; z-index:4; }
.jt-tray__ring{ display:none; }
.jt-tray__name{ position:absolute; left:50%; bottom:calc(100% + 16px); transform:translateX(-50%); white-space:nowrap; font-size:13px; font-weight:600; color:var(--fg); letter-spacing:-.01em;
  padding:3px 9px; border-radius:var(--r-pill); background:rgba(10,10,10,.72); transition:opacity .2s ease; }
.jt-stage.is-holding .jt-tray__name{ opacity:0; }
.jt-stage.is-placed .jt-tray__name{ opacity:0; }
.jt-stage.is-reveal .jt-tray{ opacity:0; }

/* ombre portée au sol */
.jt-shadow{ position:absolute; left:0; top:0; width:100px; height:12px; border-radius:50%; transform-origin:0 50%; z-index:2;
  background:radial-gradient(closest-side, rgba(0,0,0,.75), rgba(0,0,0,0)); pointer-events:none; will-change:transform, opacity; }

/* le jeton : trois couches (position ; rotation au point de prise en haut ; écrasement depuis le bas) */
.jt{ position:absolute; left:0; top:0; width:var(--tk, 80px); height:var(--tk, 80px); 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;
  background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--u) 38%, #2a2a2a), #191919 72%);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--u) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.18); }
.jt__img{ position:absolute; left:0; top:0; width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; user-select:none; -webkit-user-drag:none; }
.jt__sil{ display:none; }
/* photo : remplit le disque */
.jt--cover .jt__img{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
/* détouré : le sujet sort du disque par le haut (effet médaille) */
.jt--cut .jt__img{ border-radius:0 0 50% 50% / 0 0 50% 50%; object-fit:contain; object-position:50% 100%; height:118%; top:-18%; padding:0 6%; }
.jt--cut.is-wide .jt__img{ border-radius:0; width:136%; left:-18%; height:100%; top:0; padding:0; object-position:50% 50%; }
/* silhouette (PhyloPic) : découpe en masque, claire sur le disque teinté, qui sort du disque par le haut */
.jt--sil .jt__img{ display:none; }
.jt--sil .jt__sil{ display:block; position:absolute; left:8%; right:8%; top:-16%; bottom:16%; background:var(--fg);
  -webkit-mask:var(--m) center bottom / contain no-repeat; mask:var(--m) center bottom / contain no-repeat;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.jt--sil.is-wide .jt__sil{ left:-22%; right:-22%; top:6%; bottom:24%; -webkit-mask-position:center; mask-position:center; }
.jt-stage.is-holding .jt__disc{ box-shadow:0 0 0 2px var(--u), inset 0 1px 0 rgba(255,255,255,.22); }

/* « Valider » tant que le jeton est en main : présent mais éteint (le clic secoue le jeton et redit la consigne) */
.cta.jt-off{ background:var(--raised-3); color:var(--fg-3); }
.jt-none{ font-size:.42em; color:var(--fg-3); letter-spacing:-.01em; }

@media (prefers-reduced-motion: reduce){ .jt-tray{ transition:none; } }

/* souris : main ouverte au survol du jeton, main fermée pendant la prise ; ailleurs, viser l'axe */
@media (hover:hover) and (pointer:fine){
  .stage.jt-stage{ cursor:pointer; }
  .stage.jt-stage.is-hover-tk{ cursor:grab; }
  .stage.jt-stage.is-holding, .stage.jt-stage.is-holding *{ cursor:grabbing; }
  .jt-stage.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); }
  .stage.jt-stage.is-reveal{ cursor:default; }
}
@media (min-width:1280px){ .jt-tray__name{ font-size:15px; } }

/* ---------- 15 nov. 2026 (Hugues : « enlève le rond, mets juste l'image en entier, plein pied ») ----------
   Plus de disque : on tient l'objet lui-même (détouré ou silhouette entière, debout sur l'axe ; photo en carte arrondie). */
.jt__disc{ display:none !important; }
.jt--cut .jt__img, .jt--cut.is-wide .jt__img{ border-radius:0; padding:0; object-fit:contain; object-position:50% 100%; left:-15%; width:130%; top:-40%; height:140%;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.jt--cut.is-wide .jt__img{ left:-35%; width:170%; top:-10%; height:110%; }
.jt--cover .jt__img{ left:-15%; width:130%; top:2%; height:98%; border-radius:12px;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--u) 80%, transparent), 0 8px 16px rgba(0,0,0,.45); }
.jt--sil .jt__sil{ left:-10%; right:-10%; top:-40%; bottom:0; background:var(--u); }
.jt--sil.is-wide .jt__sil{ left:-40%; right:-40%; top:-6%; bottom:0; -webkit-mask-position:center bottom; mask-position:center bottom; }
.jt-tray__name{ bottom:calc(140% + 10px); }