/* Bouton « métal liquide » SnackEo — inspiré du composant 10kdesign, recréé en CSS pur (sans React ni WebGL).
   Anneau métallique animé autour d'une pilule bleu nuit. Variables à ajuster : --tk-metal-*. */
@property --tk-metal-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.tk-metal, .tk-scope{
  --tk-metal-bg:#071733; --tk-metal-fg:#FFFFFF; --tk-metal-ring:2px; --tk-metal-speed:3.6s;
  --tk-metal-c1:#F2FBFF; --tk-metal-c2:#19E6D6; --tk-metal-c3:#7FA6FF; --tk-metal-c4:#0E9F95; --tk-metal-c5:#C9D6E8;
}
.tk-metal{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 28px; }
.tk-metal, .tk-scope .bt:not(.gh), .tk-scope button.tk-go{
  position:relative; isolation:isolate; border:0; border-radius:999px; text-decoration:none; cursor:pointer;
  background:radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,.18), transparent 55%), var(--tk-metal-bg);
  color:var(--tk-metal-fg); font-weight:800; letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 22px rgba(25,230,214,.28), 0 10px 30px rgba(0,0,0,.35);
  animation:tk-metal-glow var(--tk-metal-speed) ease-in-out infinite;
  transition:transform .16s ease, box-shadow .2s ease;
}
.tk-metal::before, .tk-scope .bt:not(.gh)::before, .tk-scope button.tk-go::before{
  content:''; position:absolute; inset:calc(var(--tk-metal-ring) * -1); border-radius:inherit; z-index:-1; pointer-events:none;
  background:conic-gradient(from var(--tk-metal-a), var(--tk-metal-c1), var(--tk-metal-c2), var(--tk-metal-c3), var(--tk-metal-c1), var(--tk-metal-c4), var(--tk-metal-c5), var(--tk-metal-c2), var(--tk-metal-c1));
  animation:tk-metal-spin var(--tk-metal-speed) linear infinite;
}
/* anneau net (seulement la bordure) */
.tk-metal::before, .tk-scope .bt:not(.gh)::before, .tk-scope button.tk-go::before{
  padding:var(--tk-metal-ring);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.tk-metal:hover, .tk-scope .bt:not(.gh):hover, .tk-scope button.tk-go:hover{ transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 14px 36px rgba(25,230,214,.28); }
.tk-metal:active, .tk-scope .bt:not(.gh):active, .tk-scope button.tk-go:active{ transform:scale(.98); }
.tk-metal:focus-visible, .tk-scope .bt:not(.gh):focus-visible, .tk-scope button.tk-go:focus-visible{ outline:2px solid var(--tk-metal-c2); outline-offset:4px; }
.tk-metal .tk-metal__icon{ width:16px; height:16px; flex-shrink:0; }
@keyframes tk-metal-spin{ to{ --tk-metal-a:360deg; } }
@keyframes tk-metal-glow{ 50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 30px rgba(127,166,255,.32), 0 10px 30px rgba(0,0,0,.35); } }
@media (prefers-reduced-motion: reduce){ .tk-metal::before, .tk-scope .bt:not(.gh)::before, .tk-scope button.tk-go::before{ animation:none; } .tk-metal, .tk-scope .bt:not(.gh), .tk-scope button.tk-go{ transition:none; animation:none; } .tk-metal:hover, .tk-scope .bt:not(.gh):hover, .tk-scope button.tk-go:hover{ transform:none; } }

.tk-scope .bt:not(.gh):disabled{ opacity:.55; cursor:default; transform:none; }