/* ============================================================
   YAMOMARKET – LIQUID GLASS (style iOS 26)
   css/liquid-glass.css
   Applique un effet "verre liquide" à TOUS les boutons :
   • flou d'arrière-plan (backdrop-filter)
   • translucidité + reflet spéculaire (brillance en haut)
   • bordure lumineuse + ombre douce
   • pression "liquide" au clic (scale + rebond)
   Chargé APRÈS style.css → surcharge sans toucher au code métier.
   ============================================================ */

:root {
  --lg-blur: 14px;
  --lg-sat: 160%;
  --lg-radius: 14px;
}

/* ---------- Base : tout élément cliquable "bouton" ---------- */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-danger,
.btn-success,
.btn-green,
.btn-cta-main,
.btn-sm,
.pwa-install-btn,
button[class*="btn"],
a[class*="btn"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--lg-radius);
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1),
              box-shadow .25s ease,
              filter .2s ease;
  will-change: transform;
}

/* ---------- Couche de verre (reflet spéculaire + brillance) ---------- */
.btn::before,
.btn-primary::before,
.btn-secondary::before,
.btn-outline::before,
.btn-danger::before,
.btn-success::before,
.btn-green::before,
.btn-cta-main::before,
.pwa-install-btn::before,
button[class*="btn"]::before,
a[class*="btn"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.18) 30%,
      rgba(255,255,255,0.02) 55%,
      rgba(255,255,255,0.00) 100%);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
          backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -6px 12px rgba(0,0,0,0.06);
  pointer-events: none;
}

/* ---------- Teinte translucide par variante (conserve la couleur) ---------- */
.btn-primary,
.btn-cta-main { box-shadow: 0 8px 24px rgba(249,115,22,0.35); }
.btn-secondary,
.btn-green     { box-shadow: 0 8px 24px rgba(22,163,74,0.32); }
.btn-success   { box-shadow: 0 8px 24px rgba(37,211,102,0.32); }
.btn-danger    { box-shadow: 0 8px 24px rgba(220,38,38,0.30); }

.btn-primary { background: linear-gradient(135deg, rgba(249,115,22,.88), rgba(234,88,12,.88)); }
.btn-secondary,
.btn-green   { background: linear-gradient(135deg, rgba(22,163,74,.88), rgba(21,128,61,.88)); }
.btn-success { background: linear-gradient(135deg, rgba(37,211,102,.9), rgba(18,140,126,.9)); }
.btn-danger  { background: linear-gradient(135deg, rgba(220,38,38,.88), rgba(185,28,28,.88)); }
.btn-outline {
  background: rgba(255,255,255,0.35);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
          backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border: 1px solid rgba(249,115,22,0.55);
}
.btn-outline::before { border: none; }

/* ---------- Interaction "liquide" ---------- */
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-green:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-outline:hover,
.btn-cta-main:hover,
.pwa-install-btn:hover,
button[class*="btn"]:hover,
a[class*="btn"]:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.06) saturate(1.08);
}

.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-green:active,
.btn-success:active,
.btn-danger:active,
.btn-outline:active,
.btn-cta-main:active,
.pwa-install-btn:active,
button[class*="btn"]:active,
a[class*="btn"]:active {
  transform: translateY(0) scale(0.97);
  filter: brightness(0.96);
  transition-duration: .06s;
}

/* ---------- Accessibilité : réduire les animations ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-primary, .btn-secondary, .btn-green, .btn-success,
  .btn-danger, .btn-outline, .btn-cta-main,
  button[class*="btn"], a[class*="btn"] {
    transition: none !important;
  }
}

/* ---------- Repli si backdrop-filter non supporté ---------- */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .btn-primary { background: linear-gradient(135deg,#F97316,#EA580C); }
  .btn-secondary, .btn-green { background: linear-gradient(135deg,#16A34A,#15803D); }
  .btn-success { background: linear-gradient(135deg,#25D366,#128C7E); }
  .btn-danger  { background: linear-gradient(135deg,#DC2626,#B91C1C); }
  .btn-outline { background: rgba(255,255,255,0.9); }
}