/* =========================================================
   Flow Gourmet — Bouton « métal liquide » (partagé)
   Portage vanilla du composant React LiquidMetalButton :
   anneau shader (couche 0), pastille sombre (couche 1),
   libellé (couche 2), zone cliquable + ondulations (couche 3).
   Sans WebGL / hors ligne : dégradé chrome statique.
   Monté par assets/js/liquid-btn.js sur chaque .lm-wrap.

   Variables par instance (optionnelles, en inline sur .lm-wrap) :
     --lm-w / --lm-h   dimensions (232px / 46px par défaut)
     --lm-fill         dégradé de la pastille intérieure
     --lm-label        couleur du libellé
   ========================================================= */

.lm-wrap { display: inline-block; perspective: 1000px; }
.lm-stack { display: block; position: relative; width: var(--lm-w, 232px); height: var(--lm-h, 46px); transform-style: preserve-3d; }
.lm-layer { display: block; position: absolute; inset: 0; transition: transform .15s cubic-bezier(.4,0,.2,1); }

/* couche 0 : anneau shader + ombres portées */
.lm-base { z-index: 10; }
.lm-base .lm-shell { display: block; width: 100%; height: 100%; border-radius: 100px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 20px 12px rgba(0,0,0,.14),
              0 9px 9px rgba(0,0,0,.18), 0 2px 5px rgba(0,0,0,.22);
  transition: box-shadow .15s cubic-bezier(.4,0,.2,1); }
.lm-stack:hover .lm-base .lm-shell {
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 8px 5px rgba(0,0,0,.16),
              0 4px 4px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.26); }
.lm-shader { display: block; position: relative; width: 100%; height: 100%; border-radius: 100px; overflow: hidden;
  background: linear-gradient(115deg,#9ea6ab 0%,#f4f6f7 18%,#5c666c 38%,#e8ebed 55%,#7e888e 72%,#f2f4f5 88%,#8a949a 100%); }
.lm-shader canvas { width: 100% !important; height: 100% !important; display: block !important;
  position: absolute !important; top: 0 !important; left: 0 !important; border-radius: 100px !important; }

/* couche 1 : pastille sombre intérieure */
.lm-dark { z-index: 20; }
.lm-dark i { position: absolute; inset: 2px; border-radius: 100px; display: block;
  background: var(--lm-fill, linear-gradient(180deg, #1c2226 0%, #050a0c 100%));
  transition: box-shadow .15s cubic-bezier(.4,0,.2,1); }
.lm-stack.pressed .lm-dark i { box-shadow: inset 0 2px 4px rgba(0,0,0,.4), inset 0 1px 2px rgba(0,0,0,.3); }
.lm-stack.pressed .lm-dark, .lm-stack.pressed .lm-base { transform: translateY(1px) scale(.98); }

/* couche 2 : libellé */
.lm-label { z-index: 30; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.lm-label span { font-size: 13.5px; font-weight: 560; color: var(--lm-label, #ece9e2); white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* couche 3 : zone cliquable + ondulations */
.lm-hit { position: absolute; inset: 0; z-index: 40; border: 0; background: transparent;
  cursor: pointer; border-radius: 100px; overflow: hidden; display: block; }
.lm-hit:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.lm-ripple { position: absolute; width: 20px; height: 20px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 70%);
  animation: lmRipple .6s ease-out forwards; }
@keyframes lmRipple {
  0% { transform: translate(-50%,-50%) scale(0); opacity: .6; }
  100% { transform: translate(-50%,-50%) scale(4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lm-layer, .lm-stack.pressed .lm-dark, .lm-stack.pressed .lm-base { transition: none; transform: none; }
  .lm-ripple { animation: none; display: none; }
}