/* NightBudz — base : reset, fond ambiant, keyframes, utilitaires partagés. */

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; -webkit-text-size-adjust: 100%; }

body.nightbudz {
  margin: 0;
  background: var(--surface-app);
  color: var(--text-primary);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-height: 100vh;
  overflow-wrap: break-word; /* évite qu'un mot/URL trop long ne pousse la page en largeur sur mobile */
}
.nb-app, .nb-site-content { overflow-x: clip; max-width: 100%; }
img, iframe, video, svg { max-width: 100%; }

/* Les liens sont verts, SAUF les boutons (.nb-btn) qui gardent leur propre couleur de texte. */
body.nightbudz a:not([class*="nb-btn"]) { color: var(--nb-green); text-decoration: none; transition: color var(--duration-base) var(--ease-out); }
body.nightbudz a:not([class*="nb-btn"]):hover { color: var(--nb-lime); text-shadow: var(--glow-green-sm); }
body.nightbudz a.nb-btn { text-decoration: none; }

::selection { background: var(--nb-purple); color: var(--nb-white); }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--text-primary); }

/* ---- Fond ambiant neon-noir : grille fixe + glows dérivants ---- */
.nb-ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: #000;
}
.nb-ambient span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; }
.nb-glow-1 { width: 46vw; height: 46vw; left: -8vw; top: -6vw;  background: radial-gradient(circle, rgba(138,43,226,0.55), transparent 66%); animation: nb-drift-a 22s ease-in-out infinite; }
.nb-glow-2 { width: 42vw; height: 42vw; right: -8vw; top: 28vh; background: radial-gradient(circle, rgba(255,0,127,0.42), transparent 66%); animation: nb-drift-b 26s ease-in-out infinite; }
.nb-glow-3 { width: 40vw; height: 40vw; left: 30vw; bottom: -16vw; background: radial-gradient(circle, rgba(57,255,20,0.14), transparent 66%); animation: nb-drift-a 30s ease-in-out infinite reverse; }
.nb-ambient::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(138,43,226,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138,43,226,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at 50% 35%, #000 30%, transparent 82%);
          mask-image: radial-gradient(circle at 50% 35%, #000 30%, transparent 82%);
}
.nb-app { position: relative; z-index: 1; }

/* Voile de flou tant que l'age gate n'est pas validé */
body.nb-age-locked { overflow: hidden; }
body.nb-age-locked .nb-app { filter: blur(9px) brightness(0.7); pointer-events: none; transition: filter 500ms var(--ease-out); }

@keyframes nb-drift-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(6vw, 5vh); } }
@keyframes nb-drift-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-5vw, -4vh); } }
@keyframes nb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes nb-toast-in { from { opacity: 0; transform: translateX(40px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes nb-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes nb-gate-in { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes nb-spin { to { transform: rotate(360deg); } }
@keyframes nb-pulse-glow { 0%,100% { box-shadow: var(--glow-green-sm); } 50% { box-shadow: var(--glow-green-md); } }
@keyframes nb-cta-breathe { 0%,100% { box-shadow: var(--glow-green-md); } 50% { box-shadow: var(--glow-green-lg); } }

.nb-fade-up { animation: nb-fade-up var(--duration-slow) var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .nb-ambient span, .nb-fade-up, [class*="nb-glow"] { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ---- Scrollbars ---- */
.nb-scroll::-webkit-scrollbar { height: 6px; width: 6px; }
.nb-scroll::-webkit-scrollbar-thumb { background: rgba(138,43,226,0.5); border-radius: 999px; }
.nb-scroll::-webkit-scrollbar-track { background: transparent; }
.nb-hide-scroll::-webkit-scrollbar { display: none; }
.nb-hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Layout ---- */
.nb-container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--container-pad); padding-right: var(--container-pad); }

/* ---- Verre (glassmorphism) ---- */
.nb-glass    { background: linear-gradient(160deg, rgba(26,26,34,0.56), rgba(8,8,12,0.5)); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.nb-glass-lo { background: linear-gradient(160deg, rgba(26,26,34,0.51), rgba(8,8,12,0.45)); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); }
.nb-glass-hi { background: linear-gradient(160deg, rgba(26,26,34,0.72), rgba(8,8,12,0.66)); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); }

/* ============ PERF SCROLL MOBILE ============ */
/* Sur mobile, le backdrop-filter (verre dépoli) recalculé à chaque frame + les halos
   animés en position fixe saccadent le scroll. On les fige : fonds opaques (rendu quasi
   identique sur fond noir) et halos statiques → scroll fluide. */
@media (max-width: 900px) {
  .nb-glass, .nb-glass-lo, .nb-eligibility, .nb-filtermenu,
  .wc-block-cart__sidebar .wc-block-components-sidebar,
  .wc-block-checkout__sidebar .wc-block-components-sidebar,
  .wp-block-woocommerce-checkout-order-summary-block {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    background: #15141c !important;
  }
  .nb-glass-hi { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #191824 !important; }
  /* Le fond ambiant était en `position: fixed` plein écran. Sur iOS, un calque fixe plein
     écran + un header sticky = re-composition à chaque frame de scroll (LA cause des micro-
     saccades, observée directement). On supprime le calque fixe et on peint le dégradé
     directement sur le <body> : il défile avec le contenu → aucun calque fixe à recomposer. */
  .nb-ambient { display: none !important; }
  body.nightbudz {
    background-color: #050507;
    background-image: radial-gradient(120% 80% at 50% 0%, #16121f 0%, #0b0a12 45%, #050507 100%);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 900px;
  }
}

/* ---- Coin « tech-cut » (chanfrein deux coins opposés) ---- */
.nb-clip     { clip-path: polygon(var(--clip-cut) 0, 100% 0, 100% calc(100% - var(--clip-cut)), calc(100% - var(--clip-cut)) 100%, 0 100%, 0 var(--clip-cut)); }
.nb-clip-sm  { --clip-cut: 7px;  clip-path: polygon(var(--clip-cut) 0, 100% 0, 100% calc(100% - var(--clip-cut)), calc(100% - var(--clip-cut)) 100%, 0 100%, 0 var(--clip-cut)); }
.nb-clip-lg  { --clip-cut: 20px; clip-path: polygon(var(--clip-cut) 0, 100% 0, 100% calc(100% - var(--clip-cut)), calc(100% - var(--clip-cut)) 100%, 0 100%, 0 var(--clip-cut)); }

/* ---- Eyebrow (sur-titre techno) ---- */
.nb-eyebrow { font: var(--text-eyebrow); font-family: var(--font-heading); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--nb-magenta); }
.nb-eyebrow--purple { color: var(--nb-purple); }
.nb-eyebrow--magenta { color: var(--nb-magenta); text-shadow: var(--text-glow-magenta); }
.nb-eyebrow--tertiary { color: var(--text-tertiary); }

/* ---- Titres display ---- */
.nb-display-m { font: var(--text-display-m); font-family: var(--font-display); color: var(--text-primary); text-shadow: var(--text-glow-white); }
.nb-display-l { font: var(--text-display-l); font-family: var(--font-display); color: #fff; text-shadow: var(--text-glow-white); }

/* Utilitaires */
.nb-mono { font-family: var(--font-mono); }
.nb-green-glow { color: var(--nb-green); text-shadow: var(--text-glow-green); }
.nb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }