/* =========================================================
   VERRE LIQUIDE (liquid glass)
   Les cartes, menus et petits boutons en verre dépoli, posés sur le fond habituel du site.
   Pour l'enlever : supprimer ce fichier et la ligne qui le charge dans les pages.
   ========================================================= */

:root {
  --lg-tint: rgba(255, 255, 255, 0.07);
  --lg-tint-2: rgba(255, 255, 255, 0.03);
  --lg-base: rgba(8, 14, 32, 0.62); /* fond du verre : plus opaque = on voit moins à travers */
  --lg-edge: rgba(255, 255, 255, 0.16);
  --lg-blur: blur(34px) saturate(150%) brightness(1.03);
  --lg-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 24px rgba(255, 255, 255, 0.05),
    0 22px 50px rgba(0, 0, 0, 0.38);
  /* reflet en haut à gauche + verre légèrement teinté */
  --lg-surface:
    radial-gradient(120% 70% at 10% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
    linear-gradient(145deg, var(--lg-tint), var(--lg-tint-2) 55%, rgba(56, 182, 255, 0.05)),
    linear-gradient(var(--lg-base), var(--lg-base));
}


/* ---------- Les surfaces en verre ---------- */
html .noyz-header,
html .mobile-menu,
html .step,
html .sb-feature-card,
html .sb-card,
html .host-card,
html .vs-row,
html .gain-card,
html .sbrk-glass-card,
html .booking,
html .sbrk-card,
html .faq-card,
html .cmp-wrap,
html .cmp-card,
html .cmp-punch,
html .final-cta-card,
html .reward-card,
html .sbrk-stats-card,
html .blog-card,
html .article-cta {
  background: var(--lg-surface);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge);
  box-shadow: var(--lg-shadow);
}

/* Petits éléments en verre (pastilles, boutons secondaires) */
html .hero-rating,
html .gain-badge,
html .coach-nudge,
html .hero-btn--ghost,
html .sbrk-toggle-pill,
html .gc-arrow,
html .noyz-login,
html .vs-label i {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 22px rgba(0, 0, 0, 0.28);
}
@media (min-width: 921px) { html .noyz-login { background: none; border: 0; box-shadow: none; backdrop-filter: none; } }

/* Le menu du haut et le menu mobile restent lisibles : verre un peu plus sombre */
html .noyz-header { background: linear-gradient(145deg, rgba(10, 18, 40, 0.55), rgba(10, 18, 40, 0.35)); }
html .mobile-menu { background: linear-gradient(160deg, rgba(10, 18, 40, 0.82), rgba(10, 18, 40, 0.7)); }

/* Menu mobile ouvert : toute la page derrière passe sous un verre givré très flou.
   (Le menu est dans la barre du haut, qui floute déjà : un flou posé sur le menu lui-même
   ne toucherait pas la page. On pose donc une vitre floue sur toute la page, juste sous la barre.) */
@media (max-width: 920px) {
  body::after {
    content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
    background: rgba(5, 11, 31, 0.45);
    backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%);
    opacity: 0; transition: opacity .35s ease;
  }
  body:has(.mobile-menu.is-open)::after { opacity: 1; }
  html .mobile-menu {
    background:
      radial-gradient(120% 70% at 10% 0%, rgba(255, 255, 255, 0.12), transparent 55%),
      linear-gradient(160deg, rgba(10, 18, 40, 0.72), rgba(10, 18, 40, 0.6));
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html .noyz-header, html .step, html .sb-card, html .host-card, html .vs-row, html .gain-card, html .sbrk-glass-card,
  html .booking, html .sbrk-card, html .faq-card, html .cmp-wrap, html .cmp-card, html .final-cta-card, html .reward-card {
    background: rgba(10, 18, 40, 0.88);
  }
}