:root {
  --bg: #030604;
  --bg-2: #071009;
  --panel: rgba(13, 20, 14, 0.72);
  --panel-strong: rgba(17, 27, 18, 0.88);
  --text: #f5fff0;
  --muted: rgba(245, 255, 240, 0.68);
  --muted-2: rgba(245, 255, 240, 0.46);
  --green: #b7ff20;
  --green-2: #38df42;
  --green-3: #7cff00;
  --yellow: #ffd33d;
  --line: rgba(183, 255, 32, 0.18);
  --line-strong: rgba(183, 255, 32, 0.38);
  --glass: rgba(255, 255, 255, 0.045);
  --shadow: 0 32px 90px rgba(0, 0, 0, 0.48);
  --glow: 0 0 48px rgba(183, 255, 32, 0.18);
  --radius: 28px;
  --radius-sm: 16px;
  --container: 1440px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 74% 8%, rgba(183, 255, 32, 0.13), transparent 30%),
    radial-gradient(circle at 18% 22%, rgba(59, 223, 66, 0.10), transparent 34%),
    linear-gradient(180deg, #030604 0%, #040805 50%, #020403 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(rgba(183,255,32,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183,255,32,0.024) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 50% 0%, black 0%, transparent 72%);
}

.site-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(183,255,32,0.045) 44.2% 44.55%, transparent 44.7%),
    linear-gradient(22deg, transparent 0 60%, rgba(183,255,32,0.035) 60.2% 60.5%, transparent 60.7%),
    url("assets/bg-flashmood.webp") center 15% / min(1500px, 100vw) auto no-repeat;
  opacity: 0.34;
  filter: saturate(1.1) contrast(1.05);
}

.site-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3,6,4,0.95) 0%, rgba(3,6,4,0.64) 46%, rgba(3,6,4,0.92) 100%);
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
::selection { background: rgba(183, 255, 32, 0.38); color: white; }

.topline { display: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 82px;
  padding: 0 max(28px, calc((100vw - var(--container)) / 2));
  background: rgba(3, 6, 4, 0.78);
  border-bottom: 1px solid rgba(183, 255, 32, 0.14);
  backdrop-filter: blur(24px);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.32);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
}
.brand img {
  width: 47px;
  height: 47px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(183,255,32,0.28));
}
.brand span { display: grid; line-height: 1; }
.brand strong {
  font-size: 1.16rem;
  font-weight: 950;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.brand small {
  margin-top: 4px;
  color: var(--green);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-left: auto;
  margin-right: auto;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 16px;
  color: rgba(245, 255, 240, 0.78);
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 850;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: 180ms ease;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--green);
  background: rgba(183, 255, 32, 0.09);
  border-color: rgba(183, 255, 32, 0.16);
  box-shadow: inset 0 0 0 1px rgba(183,255,32,0.02);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
}
.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(183, 255, 32, 0.07);
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  border-radius: 99px;
  background: var(--green);
}

main { padding-bottom: 118px; }
.section,
.hero-store,
.hero-home,
.hero-pro,
.page-hero,
.site-footer .footer-inner,
.legal {
  width: min(var(--container), calc(100% - 56px));
  margin-inline: auto;
}
.section { margin-top: 112px; }
.section-spacious { margin-top: 92px; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  letter-spacing: -0.055em;
  line-height: 0.96;
}
h1 { font-size: clamp(3.8rem, 7.2vw, 7.8rem); }
h2 { font-size: clamp(2.25rem, 4.2vw, 4.9rem); }
h3 { font-size: clamp(1.08rem, 1.45vw, 1.35rem); }
p { margin-bottom: 0; }

.lead,
.page-hero p,
.section-heading p,
.content-card p,
.showcase-copy p,
.editorial-copy p,
.connect-band p,
.immersion-copy p,
.news-card p,
.feature-card p,
.discord-card p,
.timeline-item p,
.benefit-card p,
.review-item p,
.server-row span,
.info-list.clean span,
.notice span,
details p {
  color: var(--muted);
  line-height: 1.72;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 10px;
  padding: 9px 16px;
  color: var(--green);
  border: 1px solid rgba(183, 255, 32, 0.28);
  border-radius: 999px;
  background: rgba(183, 255, 32, 0.075);
  box-shadow: inset 0 0 24px rgba(183,255,32,0.04);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 18px rgba(183,255,32,0.95);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-weight: 950;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  color: #031105;
  background: linear-gradient(135deg, var(--green) 0%, #8dff24 46%, var(--green-2) 100%);
  box-shadow: 0 18px 52px rgba(130, 255, 32, 0.24);
}
.btn-primary:hover { box-shadow: 0 22px 72px rgba(130, 255, 32, 0.34); }
.btn-soft {
  color: var(--text);
  border-color: rgba(183, 255, 32, 0.24);
  background: rgba(183, 255, 32, 0.045);
}
.btn-soft:hover { border-color: rgba(183, 255, 32, 0.48); background: rgba(183, 255, 32, 0.085); }
.btn-small { min-height: 42px; padding: 0 16px; border-radius: 10px; font-size: 0.86rem; }
.btn-basket b {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  color: #061004;
  border-radius: 999px;
  background: var(--green);
  font-size: 0.78rem;
}
.full { width: 100%; }

/* HOME — ultra minimalist storefront */
.hero-store {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(520px, 1.14fr);
  gap: clamp(44px, 6vw, 86px);
  align-items: center;
  min-height: calc(100svh - 82px);
  padding: 72px 0 54px;
}
.hero-store::before {
  content: "";
  position: absolute;
  left: 32%;
  top: 9%;
  width: 160px;
  height: 560px;
  background: linear-gradient(180deg, rgba(183,255,32,0.055), rgba(183,255,32,0));
  transform: skewX(-18deg);
  filter: blur(1px);
  opacity: 0.55;
  pointer-events: none;
}
.hero-store-copy { position: relative; z-index: 2; }
.hero-store-copy h1 {
  margin: 24px 0 22px;
  max-width: 740px;
  color: white;
  text-wrap: balance;
}
.hero-store-copy h1 .gradient-text {
  display: block;
  color: transparent;
  background: linear-gradient(90deg, #e8ff10 0%, var(--green) 52%, #38df42 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 44px rgba(183,255,32,0.16);
}
.hero-store-copy .lead { max-width: 640px; font-size: clamp(1rem, 1.22vw, 1.22rem); }
.hero-actions,
.store-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.trust-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 680px;
  margin-top: 38px;
}
.trust-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  color: var(--text);
}
.trust-item span:first-child {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--green);
  border-radius: 99px;
  background: rgba(183,255,32,0.09);
}
.trust-item strong { display: block; font-size: 0.96rem; letter-spacing: -0.03em; }
.trust-item small { display: block; margin-top: 3px; color: var(--muted-2); font-weight: 650; }

.hero-store-art {
  position: relative;
  z-index: 2;
  padding: 14px;
  border: 1px solid rgba(183, 255, 32, 0.32);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(183,255,32,0.13), rgba(255,255,255,0.035) 38%, rgba(183,255,32,0.08)),
    rgba(0,0,0,0.20);
  box-shadow: 0 0 0 1px rgba(183,255,32,0.05), 0 38px 110px rgba(0,0,0,0.64), 0 0 80px rgba(183,255,32,0.16);
  overflow: hidden;
}
.hero-store-art::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 75% 15%, rgba(183,255,32,0.26), transparent 34%);
  pointer-events: none;
}
.hero-store-art img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 24px;
  filter: saturate(1.08) contrast(1.04);
}
.hero-badges {
  position: absolute;
  left: 44px;
  right: 44px;
  bottom: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 14px 18px;
  border: 1px solid rgba(183,255,32,0.18);
  border-radius: 999px;
  background: rgba(3, 6, 4, 0.70);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.32);
}
.hero-badges span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(245,255,240,0.9);
  font-size: 0.86rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-badges span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--green);
  box-shadow: 0 0 14px var(--green);
}
.hero-badges i {
  display: block;
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.24);
}

.store-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}
.store-card,
.feature-card,
.benefit-card,
.content-card,
.server-panel,
.news-card,
.discord-card,
.timeline-item,
details,
.form-card,
.rating-summary,
.review-item,
.table-card,
.notice,
.stat-card {
  position: relative;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    rgba(10, 18, 11, 0.72);
  box-shadow: 0 22px 68px rgba(0,0,0,0.26);
  backdrop-filter: blur(12px);
}
.store-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  min-height: 134px;
  padding: 24px;
  border-radius: 20px;
  overflow: hidden;
}
.store-card::after {
  content: "›";
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--green);
  border: 1px solid rgba(183,255,32,0.22);
  border-radius: 99px;
  background: rgba(183,255,32,0.04);
  font-size: 1.35rem;
}
.card-icon,
.feature-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: #071005;
  border-radius: 17px;
  background: linear-gradient(135deg, var(--green), var(--green-2));
  box-shadow: 0 16px 34px rgba(88, 255, 32, 0.18);
  font-size: 1.3rem;
}
.store-card h3 { margin: 0 0 7px; letter-spacing: -0.04em; }
.store-card p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 0.94rem; }

.discord-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  min-height: 122px;
  padding: 28px 38px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(15, 31, 17, 0.94), rgba(9, 17, 11, 0.72)),
    url("assets/flashmood-wide-art.webp") center / cover no-repeat;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.discord-strip .discord-mark {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  color: #061004;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--green), var(--green-2));
  font-size: 2.2rem;
}
.discord-strip h2 {
  margin: 0 0 8px;
  font-size: clamp(1.65rem, 2.5vw, 2.35rem);
}
.discord-strip p { color: var(--muted); line-height: 1.55; }
.discord-strip h2 span { color: var(--green); }

.minimal-heading,
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 34px;
  margin-bottom: 34px;
}
.minimal-heading.centered,
.section-heading.centered {
  display: grid;
  justify-items: center;
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}
.minimal-heading h2,
.section-heading h2 { margin: 12px 0 0; max-width: 880px; }
.minimal-heading p,
.section-heading p { max-width: 680px; }
.gradient-text,
.accent { color: var(--green); }

/* Compatibility / inner pages */
.hero-home { padding: 90px 0 42px; }
.hero-copy h1 { margin: 22px 0; }
.hero-points { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-points span {
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,0.03);
  font-weight: 800;
}
.join-card,
.home-benefits,
.connect-band,
.editorial-media,
.editorial-copy,
.showcase-copy,
.immersion-copy,
.immersion-visual,
.compact-showcase,
.split-section > * { border-radius: var(--radius); }
.join-card { padding: 30px; }
.join-logo { width: 92px; height: 92px; object-fit: contain; margin-bottom: 18px; }
.mini-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 22px 0; }
.mini-stats div { padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: rgba(0,0,0,0.18); }
.mini-stats strong { display: block; color: var(--green); font-size: 1.4rem; }
.mini-stats span { color: var(--muted); font-size: 0.88rem; }

.page-hero {
  min-height: 360px;
  display: grid;
  align-items: end;
  margin-top: 42px;
  padding: clamp(34px, 6vw, 74px);
  border: 1px solid var(--line);
  border-radius: 34px;
  background:
    linear-gradient(90deg, rgba(3,6,4,0.82), rgba(3,6,4,0.60)),
    url("assets/tebex-banner.webp") center / cover no-repeat;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.page-hero.compact { min-height: 292px; }
.page-hero h1 { margin: 18px 0; max-width: 900px; }
.page-hero p { max-width: 760px; font-size: 1.05rem; }
.page-hero.shop { background-position: center; }

.feature-grid,
.news-grid,
.discord-grid,
.stats-grid,
.faq-grid { display: grid; gap: 20px; }
.feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.news-grid.extended { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.faq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.discord-grid.clean-grid { grid-template-columns: 1.2fr repeat(2, minmax(0, 1fr)); }

.feature-card,
.benefit-card,
.content-card,
.server-panel,
.news-card,
.discord-card,
.timeline-item,
details,
.form-card,
.rating-summary,
.stat-card { padding: 28px; border-radius: 24px; }
.feature-card:hover,
.store-card:hover,
.news-card:hover,
.discord-card:hover { border-color: var(--line-strong); transform: translateY(-3px); transition: 200ms ease; }
.feature-card h3,
.news-card h3,
.discord-card h3,
.timeline-item h3 { margin: 18px 0 10px; }
.feature-card p,
.news-card p,
.discord-card p { margin: 0; }
.news-tag,
.tag,
.status-pill {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  color: #061004;
  background: linear-gradient(135deg, var(--green), var(--green-2));
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.news-card time,
.timeline-item time { display: block; margin-top: 18px; color: var(--muted-2); font-weight: 800; }

.editorial-split,
.split-section,
.immersion-section,
.compact-showcase,
.hero-pro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  align-items: center;
}
.editorial-media,
.immersion-visual,
.showcase-media,
.intro-strip { overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,0.04); }
.editorial-media img,
.immersion-visual img,
.showcase-media img,
.intro-strip img { width: 100%; min-height: 360px; object-fit: cover; }
.editorial-copy,
.immersion-copy,
.showcase-copy { padding: 30px; }
.clean-checks,
.check-list { display: grid; gap: 12px; margin-top: 24px; }
.check-list span {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(0,0,0,0.2);
  color: var(--muted);
  font-weight: 800;
}
.check-list span::before { content: "✓"; color: var(--green); font-weight: 950; }
.connect-band {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 42px;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(14,28,15,0.94), rgba(7,12,8,0.78)),
    url("assets/footer-banner.png") center / cover no-repeat;
  box-shadow: var(--shadow);
}
.connect-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.server-panel { display: grid; gap: 15px; align-content: start; }
.server-row,
.info-list.clean div,
.review-item,
.leaderboard-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid rgba(183,255,32,0.14);
  border-radius: 16px;
  background: rgba(0,0,0,0.18);
}
.server-row { align-items: center; }
.online { color: var(--green); }
.progress { height: 10px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.08); }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--green-2)); }
.info-list.clean { display: grid; gap: 12px; margin-top: 22px; }
.info-list.clean div { align-items: start; flex-direction: column; }
.info-list.clean b { color: var(--green); }
.connection-code {
  margin: 24px 0;
  padding: 20px;
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
  background: rgba(183,255,32,0.07);
  color: var(--green);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 950;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  overflow-wrap: anywhere;
}

.shop-grid .feature-card { min-height: 235px; }
.process .timeline,
.patch-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.patch-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.timeline-item b {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  height: 38px;
  padding: 0 10px;
  margin-bottom: 18px;
  border-radius: 13px;
  color: #071005;
  background: linear-gradient(135deg, var(--green), var(--green-2));
}
details summary { cursor: pointer; font-weight: 950; }
details p { margin-top: 14px; }
.notice { display: grid; gap: 8px; margin-top: 24px; padding: 20px; border-radius: 18px; }
.notice strong { color: var(--green); }

.table-card { overflow-x: auto; border-radius: var(--radius); }
.staff-table { width: 100%; min-width: 940px; border-collapse: collapse; }
.staff-table th,
.staff-table td { padding: 19px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.07); }
.staff-table th { color: var(--green); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.065em; background: rgba(0,0,0,0.24); }
.staff-table td { color: rgba(245,255,240,0.86); }
.staff-table tr:last-child td { border-bottom: 0; }
.privacy-note { display: flex; gap: 10px; margin-top: 20px; padding: 20px; border-radius: 20px; color: var(--muted); line-height: 1.65; border: 1px solid var(--line); background: rgba(255,255,255,0.035); }
.privacy-note strong { color: var(--yellow); flex: 0 0 auto; }

.form-card label { display: grid; gap: 8px; margin-bottom: 15px; color: var(--text); font-weight: 900; }
input,
textarea,
select {
  width: 100%;
  color: var(--text);
  border: 1px solid rgba(183,255,32,0.18);
  border-radius: 15px;
  background: rgba(0,0,0,0.26);
  outline: 0;
  padding: 14px 15px;
}
textarea { resize: vertical; }
input:focus,
textarea:focus,
select:focus { border-color: var(--line-strong); box-shadow: 0 0 0 4px rgba(183,255,32,0.08); }
option { color: #101010; }
.form-message { min-height: 22px; margin: 14px 0 0; color: var(--green); font-weight: 850; }

.review-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
.review-layout.full-review { grid-template-columns: 360px minmax(0, 1fr); }
.rating-summary { text-align: center; }
.rating-summary strong { display: block; color: var(--green); font-size: 6.2rem; line-height: 0.82; letter-spacing: -0.08em; }
.stars-display,
.review-stars { color: var(--yellow); letter-spacing: 0.04em; }
.stars-display { margin: 14px 0 10px; font-size: 1.65rem; }
.rating-summary p,
.rating-summary small { color: var(--muted); font-weight: 850; }
.recent-reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.recent-reviews.expanded { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.review-item { display: grid; gap: 8px; align-items: start; }
.review-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-item p { margin: 0; }
.review-item small { color: var(--muted-2); font-weight: 850; }

.site-footer {
  border-top: 1px solid rgba(183,255,32,0.12);
  background: linear-gradient(180deg, rgba(4,9,5,0.84), rgba(2,5,3,0.96));
}
.footer-inner { display: grid; grid-template-columns: 1.05fr 1.55fr; gap: 44px; padding: 56px 0; }
.footer-brand { display: flex; align-items: center; gap: 18px; }
.footer-brand img { width: 74px; height: 74px; object-fit: contain; }
.footer-brand strong { font-size: 1.5rem; text-transform: uppercase; letter-spacing: -0.04em; }
.footer-brand p { max-width: 510px; margin: 8px 0 0; color: var(--muted); line-height: 1.62; }
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.footer-links h4 { margin: 0 0 12px; color: var(--green); }
.footer-links a { display: block; margin: 9px 0; color: var(--muted); font-weight: 800; }
.footer-links a:hover { color: var(--text); }
.legal { display: flex; justify-content: space-between; gap: 18px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.06); color: var(--muted-2); font-size: 0.82rem; }

.reveal { opacity: 0; transform: translateY(18px); animation: reveal 680ms ease forwards; }
.delay-1 { animation-delay: 90ms; }
.delay-2 { animation-delay: 180ms; }
.delay-3 { animation-delay: 270ms; }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1260px) {
  .nav-links { gap: 5px; }
  .nav-links a { padding-inline: 11px; font-size: 0.84rem; }
  .header-actions .btn-small { padding-inline: 12px; }
  .hero-store { grid-template-columns: 1fr; min-height: auto; padding-top: 68px; }
  .hero-store-art { max-width: 920px; }
  .store-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid,
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discord-grid.clean-grid,
  .faq-grid,
  .process .timeline,
  .patch-timeline,
  .news-grid,
  .news-grid.extended { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .site-header { min-height: 76px; }
  .brand img { width: 44px; height: 44px; }
  .menu-toggle { display: block; }
  .nav-links,
  .header-actions { display: none; }
  .nav-links.open {
    position: absolute;
    top: 86px;
    left: 22px;
    right: 22px;
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(4, 8, 5, 0.98);
    box-shadow: var(--shadow);
  }
  .nav-links.open a { justify-content: center; padding: 13px; }
  .header-actions.open {
    position: absolute;
    top: calc(86px + 492px);
    left: 22px;
    right: 22px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(4, 8, 5, 0.98);
    box-shadow: var(--shadow);
  }
  .hero-store { padding-top: 54px; }
  .trust-row { grid-template-columns: 1fr; gap: 16px; }
  .hero-badges { position: static; margin: 14px 4px 0; flex-wrap: wrap; border-radius: 18px; }
  .hero-badges i { display: none; }
  .discord-strip { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .minimal-heading,
  .section-heading { display: grid; align-items: start; }
  .editorial-split,
  .immersion-section,
  .compact-showcase,
  .split-section,
  .hero-pro,
  .footer-inner { grid-template-columns: 1fr; }
  .review-layout,
  .review-layout.full-review { grid-template-columns: 1fr; }
  .recent-reviews.expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .section,
  .hero-store,
  .hero-home,
  .hero-pro,
  .page-hero,
  .site-footer .footer-inner,
  .legal { width: min(100% - 30px, var(--container)); }
  main { padding-bottom: 82px; }
  .site-header { padding-inline: 15px; }
  .brand span { display: none; }
  h1 { font-size: clamp(3.25rem, 14vw, 4.8rem); }
  h2 { font-size: clamp(2.15rem, 10vw, 3.3rem); }
  .hero-store { padding-top: 42px; gap: 32px; }
  .store-actions,
  .hero-actions,
  .connect-actions { display: grid; width: 100%; }
  .btn { width: 100%; }
  .store-benefits,
  .feature-grid,
  .stats-grid,
  .discord-grid.clean-grid,
  .faq-grid,
  .process .timeline,
  .patch-timeline,
  .news-grid,
  .news-grid.extended,
  .recent-reviews,
  .recent-reviews.expanded,
  .footer-links { grid-template-columns: 1fr; }
  .store-card { grid-template-columns: auto 1fr; }
  .store-card::after { display: none; }
  .discord-strip { padding: 26px; }
  .hero-store-art { border-radius: 24px; padding: 8px; }
  .hero-store-art img { border-radius: 18px; }
  .page-hero,
  .page-hero.compact { min-height: 300px; margin-top: 24px; border-radius: 24px; }
  .feature-card,
  .benefit-card,
  .content-card,
  .server-panel,
  .news-card,
  .discord-card,
  .timeline-item,
  details,
  .form-card,
  .rating-summary,
  .stat-card,
  .connect-band { padding: 22px; border-radius: 20px; }
  .privacy-note,
  .legal { flex-direction: column; }
}

/* UPDATE — accueil plus ergonomique, navigation simplifiée, fond éclair discret */
:root { --container: 1320px; }
body {
  background:
    radial-gradient(circle at 74% 4%, rgba(183, 255, 32, 0.105), transparent 28%),
    radial-gradient(circle at 10% 28%, rgba(56, 223, 66, 0.065), transparent 34%),
    linear-gradient(180deg, #020503 0%, #040806 48%, #020403 100%);
}
body::before {
  background: linear-gradient(rgba(183,255,32,0.014) 1px, transparent 1px),
              linear-gradient(90deg, rgba(183,255,32,0.012) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.55;
  mask-image: radial-gradient(circle at 50% 0%, black 0%, transparent 58%);
}
.site-bg {
  background: url("assets/bolt-watermark.svg") center 128px / min(620px, 48vw) auto no-repeat;
  opacity: 0.16;
  filter: blur(0.2px) saturate(1.05);
}
.site-bg::after {
  background:
    radial-gradient(circle at 50% 30%, rgba(183,255,32,0.05), transparent 24%),
    linear-gradient(90deg, rgba(3,6,4,0.92) 0%, rgba(3,6,4,0.58) 48%, rgba(3,6,4,0.94) 100%);
}
.site-header {
  min-height: 78px;
  gap: 22px;
  background: rgba(3, 6, 4, 0.84);
}
.nav-links { gap: 8px; }
.nav-links a { min-height: 40px; padding: 0 15px; }
.home-main { padding-bottom: 108px; }
.home-main .section { margin-top: clamp(74px, 7vw, 108px); }
.refined-home {
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.98fr);
  gap: clamp(54px, 7vw, 104px);
  min-height: auto;
  padding: clamp(76px, 8vw, 118px) 0 clamp(54px, 6vw, 82px);
}
.refined-home::before { display: none; }
.refined-home .hero-store-copy h1 {
  max-width: 690px;
  margin: 24px 0 24px;
  font-size: clamp(3.25rem, 6.2vw, 6.35rem);
  line-height: 0.98;
}
.refined-home .hero-store-copy .lead {
  max-width: 620px;
  font-size: clamp(1rem, 1.12vw, 1.14rem);
  line-height: 1.75;
}
.refined-home .store-actions { margin-top: 34px; gap: 18px; }
.refined-home .trust-row {
  max-width: 650px;
  margin-top: 42px;
  gap: 26px;
}
.refined-home .hero-store-art {
  justify-self: end;
  width: min(100%, 650px);
  padding: 12px;
  border-radius: 30px;
  box-shadow: 0 30px 86px rgba(0,0,0,0.54), 0 0 58px rgba(183,255,32,0.13);
}
.refined-home .hero-store-art img { border-radius: 22px; }
.refined-home .hero-badges {
  left: 32px;
  right: 32px;
  bottom: 26px;
  gap: 16px;
  padding: 12px 16px;
}
.refined-home .hero-badges span { font-size: 0.76rem; }
.home-section-intro {
  display: grid;
  justify-items: center;
  text-align: center;
  max-width: 820px;
}
.home-section-intro h2 {
  margin: 18px 0 16px;
  font-size: clamp(2.2rem, 4.8vw, 4.6rem);
}
.home-section-intro p {
  max-width: 720px;
  color: var(--muted);
  line-height: 1.75;
  font-size: 1.04rem;
}
.compact-benefits {
  margin-top: clamp(52px, 5vw, 78px) !important;
  gap: 22px;
}
.compact-benefits .store-card {
  min-height: 158px;
  padding: 28px;
  border-radius: 22px;
}
.compact-benefits .card-icon { width: 50px; height: 50px; border-radius: 16px; }
.home-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
  gap: 26px;
  align-items: stretch;
}
.home-duo .content-card,
.home-duo .server-panel { min-height: 100%; }
.home-duo .content-card h2 {
  margin: 16px 0 18px;
  max-width: 720px;
  font-size: clamp(2.1rem, 4vw, 4.2rem);
}
.home-duo .content-card p { max-width: 760px; }
.discord-strip { margin-top: clamp(76px, 8vw, 118px) !important; }
.home-main .news-section,
.home-main .reviews-home { margin-top: clamp(84px, 8vw, 124px); }

@media (max-width: 1260px) {
  .refined-home {
    grid-template-columns: 1fr;
    padding-top: 68px;
  }
  .refined-home .hero-store-art {
    justify-self: start;
    width: min(100%, 860px);
  }
  .home-duo { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .header-actions.open { top: calc(86px + 390px); }
  .site-bg { background-position: center 100px; background-size: min(520px, 80vw) auto; opacity: 0.12; }
  .refined-home { gap: 44px; padding-top: 54px; }
  .refined-home .hero-badges { position: static; margin: 12px 3px 0; }
}
@media (max-width: 680px) {
  .site-bg { background-position: center 84px; background-size: 430px auto; opacity: 0.10; }
  .refined-home { padding-top: 42px; gap: 34px; }
  .refined-home .hero-store-copy h1 { font-size: clamp(3rem, 13vw, 4.55rem); }
  .home-section-intro { justify-items: start; text-align: left; }
  .compact-benefits .store-card { min-height: auto; }
}

/* UPDATE — accueil dynamique, texte mieux intégré et header plus premium */
.site-header {
  min-height: 76px;
  border-bottom-color: rgba(183,255,32,0.11);
  background: rgba(2, 5, 3, 0.86);
}
.brand img {
  transition: transform 260ms ease, filter 260ms ease;
}
.brand:hover img {
  transform: translateY(-1px) scale(1.035) rotate(-2deg);
  filter: drop-shadow(0 0 24px rgba(183,255,32,0.40));
}
.nav-links {
  padding: 6px;
  border: 1px solid rgba(183,255,32,0.075);
  border-radius: 18px;
  background: rgba(255,255,255,0.018);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}
.nav-links a {
  position: relative;
  min-height: 42px;
  padding: 0 17px;
  border-radius: 13px;
  color: rgba(245,255,240,0.74);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.095em;
  text-transform: uppercase;
  overflow: hidden;
}
.nav-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(135deg, rgba(183,255,32,0.14), rgba(56,223,66,0.045));
  transform: scaleX(0.72);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), opacity 240ms ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: 0;
  transform: translateY(5px);
  transition: 220ms ease;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
  border-color: rgba(183,255,32,0.24);
  background: rgba(183,255,32,0.055);
  box-shadow: 0 10px 32px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(183,255,32,0.035);
}
.nav-links a:hover::before,
.nav-links a.active::before {
  opacity: 1;
  transform: scaleX(1);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  opacity: 1;
  transform: translateY(0);
}
.header-actions .btn-small {
  min-height: 44px;
  border-radius: 13px;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-transform: none;
  will-change: transform;
  transition:
    transform 220ms cubic-bezier(.2,.8,.2,1),
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    color 220ms ease;
}
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px;
  background: linear-gradient(110deg, transparent 0 30%, rgba(255,255,255,0.34) 45%, transparent 60% 100%);
  transform: translateX(-130%) skewX(-18deg);
  transition: transform 620ms cubic-bezier(.2,.8,.2,1);
}
.btn:hover {
  transform: translateY(-3px);
}
.btn:hover::before {
  transform: translateX(130%) skewX(-18deg);
}
.btn:active {
  transform: translateY(-1px) scale(0.985);
}
.btn-primary:hover {
  box-shadow: 0 26px 78px rgba(130,255,32,0.38), 0 0 0 1px rgba(255,255,255,0.14) inset;
}
.btn-soft:hover {
  color: var(--green);
  border-color: rgba(183,255,32,0.52);
  background: rgba(183,255,32,0.09);
  box-shadow: 0 20px 55px rgba(0,0,0,0.26), 0 0 35px rgba(183,255,32,0.08);
}
.btn-icon,
.btn-arrow {
  display: inline-grid;
  place-items: center;
  transition: transform 220ms ease;
}
.btn:hover .btn-icon { transform: translateY(-1px) scale(1.12); }
.btn:hover .btn-arrow { transform: translateX(4px); }

.refined-home {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.94fr);
  gap: clamp(68px, 7.6vw, 126px);
  padding: clamp(86px, 8vw, 128px) 0 clamp(70px, 6vw, 96px);
}
.refined-home .hero-store-copy {
  max-width: 720px;
}
.refined-home .hero-store-copy h1 {
  max-width: 720px;
  margin: 26px 0 24px;
  padding: 0.05em 0 0.11em;
  font-size: clamp(3.35rem, 5.65vw, 6.15rem);
  line-height: 1.075;
  letter-spacing: -0.048em;
  text-wrap: balance;
  overflow: visible;
}
.refined-home .hero-store-copy h1 .gradient-text {
  display: inline-block;
  padding-right: 0.06em;
  line-height: 1.02;
}
.refined-home .hero-store-copy .lead {
  max-width: 650px;
  color: rgba(245,255,240,0.76);
  font-size: clamp(1.02rem, 1.04vw, 1.12rem);
  line-height: 1.85;
  text-wrap: pretty;
}
.refined-home .store-actions {
  margin-top: 38px;
  gap: 18px;
}
.refined-home .store-actions .btn {
  min-height: 58px;
  padding-inline: 28px;
}
.refined-home .trust-row {
  max-width: 690px;
  margin-top: 44px;
}
.trust-item {
  transition: transform 220ms ease, opacity 220ms ease;
}
.trust-item:hover {
  transform: translateY(-2px);
}
.trust-item:hover span:first-child {
  box-shadow: 0 0 26px rgba(183,255,32,0.42);
}

.refined-home .hero-store-art {
  justify-self: stretch;
  width: 100%;
  max-width: 690px;
  padding: 12px;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease, box-shadow 260ms ease;
}
.refined-home .hero-store-art::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px;
  background: linear-gradient(110deg, transparent 0 34%, rgba(255,255,255,0.20) 48%, transparent 62% 100%);
  transform: translateX(-130%) skewX(-16deg);
  opacity: 0;
  pointer-events: none;
  transition: transform 850ms cubic-bezier(.2,.8,.2,1), opacity 260ms ease;
}
.refined-home .hero-store-art img {
  transform: scale(1.001);
  transition: transform 520ms cubic-bezier(.2,.8,.2,1), filter 520ms ease;
  will-change: transform;
}
.refined-home .hero-store-art:hover {
  transform: translateY(-8px) rotateX(1.2deg) rotateY(-1.4deg);
  border-color: rgba(183,255,32,0.58);
  box-shadow: 0 38px 112px rgba(0,0,0,0.60), 0 0 86px rgba(183,255,32,0.20);
}
.refined-home .hero-store-art:hover::after {
  opacity: 1;
  transform: translateX(130%) skewX(-16deg);
}
.refined-home .hero-store-art:hover img {
  transform: scale(1.036);
  filter: saturate(1.16) contrast(1.07) brightness(1.035);
}
.refined-home .hero-badges {
  transition: transform 260ms ease, border-color 260ms ease, background 260ms ease;
}
.refined-home .hero-store-art:hover .hero-badges {
  transform: translateY(-3px);
  border-color: rgba(183,255,32,0.34);
  background: rgba(3,6,4,0.76);
}

.store-card,
.news-card,
.content-card,
.server-panel,
.rating-summary,
.review-item,
.discord-strip {
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease, box-shadow 260ms ease, background 260ms ease;
}
.store-card::before,
.news-card::before,
.content-card::before,
.server-panel::before,
.review-item::before,
.rating-summary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(circle at 18% 0%, rgba(183,255,32,0.12), transparent 42%);
  transition: opacity 260ms ease;
  pointer-events: none;
}
.store-card:hover,
.news-card:hover,
.content-card:hover,
.server-panel:hover,
.review-item:hover,
.rating-summary:hover {
  transform: translateY(-6px);
  border-color: rgba(183,255,32,0.42);
  box-shadow: 0 30px 85px rgba(0,0,0,0.36), 0 0 54px rgba(183,255,32,0.08);
}
.store-card:hover::before,
.news-card:hover::before,
.content-card:hover::before,
.server-panel:hover::before,
.review-item:hover::before,
.rating-summary:hover::before {
  opacity: 1;
}
.store-card:hover .card-icon {
  transform: translateY(-2px) rotate(-3deg) scale(1.06);
  box-shadow: 0 20px 42px rgba(88,255,32,0.28);
}
.store-card:hover::after {
  transform: translateX(4px);
  border-color: rgba(183,255,32,0.42);
  background: rgba(183,255,32,0.09);
}
.card-icon,
.feature-icon,
.store-card::after {
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease, border-color 260ms ease, background 260ms ease;
}
.compact-benefits {
  grid-template-columns: repeat(4, minmax(230px, 1fr));
  gap: 24px;
}
.compact-benefits .store-card {
  min-height: 176px;
  align-items: start;
  padding: 30px;
}
.compact-benefits .store-card p {
  line-height: 1.68;
}

.home-duo {
  gap: 32px;
}
.home-duo .content-card,
.home-duo .server-panel {
  padding: clamp(30px, 3.2vw, 46px);
  border-radius: 28px;
}
.discord-strip {
  min-height: 142px;
  padding: 36px 42px;
}
.discord-strip:hover {
  transform: translateY(-5px);
  border-color: rgba(183,255,32,0.40);
  box-shadow: 0 34px 100px rgba(0,0,0,0.42), 0 0 60px rgba(183,255,32,0.11);
}
.discord-strip:hover .discord-mark {
  transform: rotate(-4deg) scale(1.06);
  box-shadow: 0 20px 48px rgba(88,255,32,0.26);
}
.discord-strip .discord-mark {
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.news-card h3,
.store-card h3,
.content-card h2,
.server-panel h3 {
  text-wrap: balance;
}

/* reveal au scroll, plus naturel que l'animation directe */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  animation: none !important;
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 80ms; }
.reveal.delay-2 { transition-delay: 150ms; }
.reveal.delay-3 { transition-delay: 220ms; }

@media (max-width: 1260px) {
  .nav-links { gap: 4px; }
  .nav-links a { padding-inline: 12px; font-size: 0.70rem; }
  .refined-home {
    grid-template-columns: 1fr;
    gap: 54px;
  }
  .refined-home .hero-store-copy,
  .refined-home .hero-store-copy h1,
  .refined-home .hero-store-copy .lead {
    max-width: 820px;
  }
  .refined-home .hero-store-art {
    max-width: 900px;
    justify-self: start;
  }
  .compact-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 980px) {
  .nav-links {
    padding: 14px;
    border-radius: 22px;
  }
  .nav-links.open a {
    min-height: 48px;
    padding: 0 16px;
    font-size: 0.78rem;
  }
  .header-actions.open { top: calc(86px + 400px); }
  .refined-home .hero-store-copy h1 {
    font-size: clamp(3.15rem, 9.2vw, 5.2rem);
  }
}
@media (max-width: 680px) {
  .refined-home {
    padding-top: 44px;
  }
  .refined-home .hero-store-copy h1 {
    font-size: clamp(2.75rem, 12.2vw, 4.15rem);
    line-height: 1.1;
  }
  .compact-benefits {
    grid-template-columns: 1fr;
  }
  .compact-benefits .store-card {
    min-height: auto;
    padding: 24px;
  }
  .refined-home .store-actions .btn,
  .discord-strip .btn {
    min-height: 56px;
  }
  .discord-strip {
    padding: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

.store-card::before,
.news-card::before,
.hero-store-art::before {
  background: radial-gradient(circle at var(--mx, 18%) var(--my, 0%), rgba(183,255,32,0.15), transparent 38%);
}


/* UPDATE — animations premium, icônes SVG et stats serveur */
.icon-svg {
  width: 1.08em;
  height: 1.08em;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn .icon-svg { width: 1.05rem; height: 1.05rem; stroke-width: 2.35; }
.header-actions .btn .icon-svg { width: 0.98rem; height: 0.98rem; }
.site-bg {
  background: url("assets/bolt-watermark.svg") center 125px / min(650px, 50vw) auto no-repeat;
  opacity: 0.20;
  filter: saturate(1.12);
  animation: boltWatermarkBreath 7.5s ease-in-out infinite;
}
.site-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/bolt-watermark.svg") center 125px / min(650px, 50vw) auto no-repeat;
  opacity: 0.26;
  filter: blur(0.1px) drop-shadow(0 0 22px rgba(183,255,32,0.24)) drop-shadow(0 0 70px rgba(56,223,66,0.10));
  mix-blend-mode: screen;
  animation: boltGlowDrift 5.2s ease-in-out infinite;
}
@keyframes boltWatermarkBreath {
  0%,100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.23; transform: scale(1.012); }
}
@keyframes boltGlowDrift {
  0%,100% { opacity: 0.10; transform: translate3d(-8px, 7px, 0) scale(0.995); }
  38% { opacity: 0.34; transform: translate3d(9px, -8px, 0) scale(1.018); }
  68% { opacity: 0.18; transform: translate3d(4px, 5px, 0) scale(1.006); }
}

.site-header {
  min-height: 74px;
  background: rgba(2, 5, 3, 0.88);
  border-bottom-color: rgba(183,255,32,0.13);
}
.nav-links a {
  min-height: 43px;
  padding-inline: 18px;
  border-radius: 14px;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}
.nav-links a:hover,
.nav-links a.active {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.24), 0 0 28px rgba(183,255,32,0.07), inset 0 0 0 1px rgba(183,255,32,0.04);
}
.header-actions .btn-small {
  padding-inline: 15px;
  gap: 8px;
  text-transform: uppercase;
}

.refined-home {
  grid-template-columns: minmax(0, 0.98fr) minmax(420px, 0.94fr);
  gap: clamp(76px, 8.8vw, 142px);
  padding-top: clamp(94px, 8.8vw, 140px);
  padding-bottom: clamp(70px, 7vw, 108px);
}
.refined-home .hero-store-copy h1 {
  max-width: 760px;
  font-size: clamp(3.2rem, 5.7vw, 6.05rem);
  line-height: 1.075;
  margin-bottom: 28px;
  overflow: visible;
}
.refined-home .hero-store-copy .lead {
  max-width: 660px;
  line-height: 1.82;
}
.refined-home .hero-store-art {
  max-width: 720px;
  animation: heroPanelFloat 7.5s ease-in-out infinite;
  will-change: transform, box-shadow;
}
.refined-home .hero-store-art::before {
  opacity: 1;
  animation: heroAuraMove 5.4s ease-in-out infinite;
}
.refined-home .hero-store-art::after {
  opacity: 0.42;
  animation: heroLightSweep 4.8s cubic-bezier(.2,.8,.2,1) infinite;
}
.refined-home .hero-store-art img {
  animation: heroImageBreath 8.2s ease-in-out infinite;
}
.refined-home .hero-store-art:hover {
  animation-play-state: paused;
  transform: translateY(-11px) rotateX(1.2deg) rotateY(-1.6deg) scale(1.01);
}
.refined-home .hero-store-art:hover img { animation-play-state: paused; }
.hero-badges span::before {
  animation: badgePulse 1.9s ease-in-out infinite;
}
@keyframes heroPanelFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes heroAuraMove {
  0%,100% { background: radial-gradient(circle at 18% 20%, rgba(183,255,32,0.20), transparent 32%), radial-gradient(circle at 82% 18%, rgba(56,223,66,0.22), transparent 34%); }
  50% { background: radial-gradient(circle at 76% 26%, rgba(183,255,32,0.26), transparent 34%), radial-gradient(circle at 35% 80%, rgba(56,223,66,0.16), transparent 38%); }
}
@keyframes heroLightSweep {
  0%, 34% { opacity: 0; transform: translateX(-140%) skewX(-16deg); }
  48% { opacity: 0.46; }
  68%,100% { opacity: 0; transform: translateX(145%) skewX(-16deg); }
}
@keyframes heroImageBreath {
  0%,100% { transform: scale(1.006); filter: saturate(1.09) contrast(1.04); }
  50% { transform: scale(1.028); filter: saturate(1.17) contrast(1.065) brightness(1.035); }
}
@keyframes badgePulse {
  0%,100% { box-shadow: 0 0 14px rgba(183,255,32,0.64); transform: scale(1); }
  50% { box-shadow: 0 0 28px rgba(183,255,32,0.95); transform: scale(1.18); }
}

.trust-icon,
.stat-icon,
.card-icon,
.discord-mark {
  display: grid;
  place-items: center;
  color: #071005;
  background: linear-gradient(135deg, var(--green), var(--green-2));
  box-shadow: 0 16px 34px rgba(88,255,32,0.18);
}
.trust-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--green);
  background: rgba(183,255,32,0.09);
  border: 1px solid rgba(183,255,32,0.15);
  box-shadow: 0 0 0 rgba(88,255,32,0);
}
.trust-icon .icon-svg { width: 15px; height: 15px; stroke-width: 2.6; }
.trust-item:hover .trust-icon { color: #071005; background: linear-gradient(135deg, var(--green), var(--green-2)); box-shadow: 0 0 26px rgba(183,255,32,0.34); }
.card-icon .icon-svg,
.stat-icon .icon-svg { width: 24px; height: 24px; stroke-width: 2.25; }
.discord-mark .icon-svg { width: 36px; height: 36px; stroke-width: 2.2; }
.discord-mark { font-size: 1rem; }
.btn-icon { color: currentColor; }

.server-stats-panel {
  position: relative;
  display: grid;
  gap: 20px;
  align-content: start;
  min-height: 100%;
  padding: clamp(30px, 3.2vw, 46px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 22% 10%, rgba(183,255,32,0.13), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.018)),
    rgba(10,18,11,0.76);
  box-shadow: 0 22px 68px rgba(0,0,0,0.26);
  overflow: hidden;
  backdrop-filter: blur(12px);
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease, box-shadow 260ms ease;
}
.server-stats-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--mx, 18%) var(--my, 0%), rgba(183,255,32,0.16), transparent 38%);
  transition: opacity 260ms ease;
}
.server-stats-panel:hover {
  transform: translateY(-6px);
  border-color: rgba(183,255,32,0.42);
  box-shadow: 0 30px 85px rgba(0,0,0,0.36), 0 0 54px rgba(183,255,32,0.08);
}
.server-stats-panel:hover::before { opacity: 1; }
.server-stats-panel h3 {
  margin: 0;
  font-size: clamp(1.65rem, 2.5vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
}
.stats-lead {
  color: var(--muted);
  line-height: 1.7;
  margin: -4px 0 2px;
}
.server-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.server-stat {
  position: relative;
  min-height: 132px;
  display: grid;
  align-content: end;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(183,255,32,0.16);
  border-radius: 20px;
  background: rgba(2,5,3,0.42);
  overflow: hidden;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}
.server-stat:hover {
  transform: translateY(-3px);
  border-color: rgba(183,255,32,0.34);
  background: rgba(183,255,32,0.055);
}
.stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  position: absolute;
  top: 16px;
  left: 16px;
}
.server-stat strong {
  font-size: clamp(1.45rem, 2.5vw, 2.2rem);
  letter-spacing: -0.055em;
  line-height: 0.95;
}
.server-stat small {
  color: var(--muted);
  font-weight: 750;
}
.server-stat .online { color: var(--green); text-transform: uppercase; letter-spacing: 0.05em; }
.server-stats-panel .btn { margin-top: 2px; }

.scroll-top {
  position: fixed;
  right: max(22px, calc((100vw - var(--container)) / 2));
  bottom: 24px;
  z-index: 900;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #071005;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--green), var(--green-2));
  box-shadow: 0 20px 58px rgba(88,255,32,0.18), 0 14px 34px rgba(0,0,0,0.32);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(0.92);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease;
}
.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.scroll-top:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 26px 74px rgba(88,255,32,0.28), 0 18px 40px rgba(0,0,0,0.36);
}
.scroll-top .icon-svg { width: 23px; height: 23px; stroke-width: 2.7; }

@media (max-width: 1260px) {
  .refined-home { grid-template-columns: 1fr; gap: 62px; }
  .refined-home .hero-store-art { justify-self: start; max-width: 900px; }
}
@media (max-width: 780px) {
  .server-stats-grid { grid-template-columns: 1fr; }
  .server-stat { min-height: 118px; }
  .site-bg, .site-bg::before { background-position: center 90px; background-size: min(500px, 82vw) auto; }
}
@media (max-width: 560px) {
  .refined-home .hero-store-copy h1 { font-size: clamp(2.78rem, 12.2vw, 4.2rem); }
  .scroll-top { right: 16px; bottom: 16px; width: 48px; height: 48px; }
  .nav-links a { letter-spacing: 0.08em; }
}
@media (prefers-reduced-motion: reduce) {
  .site-bg, .site-bg::before, .refined-home .hero-store-art, .refined-home .hero-store-art::before, .refined-home .hero-store-art::after, .refined-home .hero-store-art img, .hero-badges span::before {
    animation: none !important;
  }
}
.feature-icon .icon-svg { width: 24px; height: 24px; stroke-width: 2.25; }

/* UPDATE — header CTA, icônes premium et stats serveur V2 */
.icon-filled {
  fill: currentColor !important;
  stroke: none !important;
}
.icon-svg path,
.icon-svg circle,
.icon-svg rect,
.icon-svg line,
.icon-svg polyline,
.icon-svg polygon {
  vector-effect: non-scaling-stroke;
}

.header-actions {
  gap: 10px;
}
.header-actions .btn-small {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 0.74rem;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}
.btn-register {
  color: rgba(245,255,240,0.92);
  border-color: rgba(183,255,32,0.24);
  background: linear-gradient(180deg, rgba(183,255,32,0.070), rgba(183,255,32,0.028));
}
.btn-register:hover {
  color: var(--green);
  border-color: rgba(183,255,32,0.48);
  background: linear-gradient(180deg, rgba(183,255,32,0.12), rgba(183,255,32,0.052));
}
.btn-join {
  min-width: 132px;
}
.btn-register .btn-icon,
.btn-join .btn-icon,
.store-actions .btn-icon,
.discord-strip .btn-icon,
.server-status-card .btn-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
}
.btn-register .btn-icon,
.btn-soft .btn-icon {
  color: var(--green);
  background: rgba(183,255,32,0.105);
  border: 1px solid rgba(183,255,32,0.18);
}
.btn-primary .btn-icon {
  color: #071005;
  background: rgba(7,17,5,0.10);
  border: 1px solid rgba(7,17,5,0.14);
}
.btn:hover .btn-icon {
  transform: translateY(-1px) scale(1.08) rotate(-2deg);
}

.card-icon,
.feature-icon,
.stat-icon,
.trust-icon,
.main-stat-icon,
.discord-mark {
  color: var(--green) !important;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,0.22), transparent 32%),
    linear-gradient(145deg, rgba(183,255,32,0.16), rgba(56,223,66,0.055)) !important;
  border: 1px solid rgba(183,255,32,0.24);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.035),
    0 16px 40px rgba(0,0,0,0.20),
    0 0 32px rgba(183,255,32,0.08) !important;
}
.card-icon .icon-svg,
.feature-icon .icon-svg,
.stat-icon .icon-svg,
.trust-icon .icon-svg,
.main-stat-icon .icon-svg,
.discord-mark .icon-svg {
  filter: drop-shadow(0 0 9px rgba(183,255,32,0.22));
}
.store-card:hover .card-icon,
.server-stat:hover .stat-icon,
.discord-strip:hover .discord-mark {
  color: #071005 !important;
  background: linear-gradient(135deg, var(--green), var(--green-2)) !important;
  border-color: rgba(255,255,255,0.20);
  box-shadow: 0 22px 54px rgba(88,255,32,0.24) !important;
}
.store-card:hover .card-icon .icon-svg,
.server-stat:hover .stat-icon .icon-svg,
.discord-strip:hover .discord-mark .icon-svg {
  filter: none;
}

.home-duo {
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  gap: clamp(30px, 4vw, 48px);
}
.server-status-card {
  position: relative;
  display: grid;
  gap: 22px;
  align-content: start;
  min-height: 100%;
  padding: clamp(30px, 3.4vw, 48px);
  border: 1px solid rgba(183,255,32,0.22);
  border-radius: 30px;
  background:
    radial-gradient(circle at 78% 0%, rgba(183,255,32,0.18), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.058), rgba(255,255,255,0.018)),
    rgba(8, 15, 10, 0.78);
  box-shadow: 0 30px 92px rgba(0,0,0,0.34), 0 0 60px rgba(183,255,32,0.065);
  overflow: hidden;
  backdrop-filter: blur(14px);
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), border-color 280ms ease, box-shadow 280ms ease;
}
.server-status-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(255,255,255,0.10) 48%, transparent 62% 100%),
    radial-gradient(circle at var(--mx, 78%) var(--my, 0%), rgba(183,255,32,0.18), transparent 38%);
  opacity: 0;
  transition: opacity 280ms ease;
}
.server-status-card:hover {
  transform: translateY(-7px);
  border-color: rgba(183,255,32,0.48);
  box-shadow: 0 38px 110px rgba(0,0,0,0.42), 0 0 76px rgba(183,255,32,0.10);
}
.server-status-card:hover::before { opacity: 1; }
.status-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.eyebrow.mini {
  padding: 7px 12px;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
}
.eyebrow.mini::before { width: 7px; height: 7px; }
.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid rgba(183,255,32,0.28);
  border-radius: 999px;
  color: rgba(245,255,240,0.94);
  background: rgba(183,255,32,0.060);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.live-chip span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 18px rgba(183,255,32,0.90);
  animation: livePulse 1.9s ease-in-out infinite;
}
.server-status-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.02;
}
.server-status-card .stats-lead {
  position: relative;
  z-index: 1;
  max-width: 660px;
  color: rgba(245,255,240,0.70);
  line-height: 1.75;
}
.server-main-stat {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 24px;
  border: 1px solid rgba(183,255,32,0.20);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(183,255,32,0.12), rgba(255,255,255,0.025)),
    rgba(2,5,3,0.46);
}
.server-main-stat strong {
  display: block;
  margin-top: 6px;
  color: transparent;
  background: linear-gradient(90deg, #f1ff42, var(--green), var(--green-2));
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(3.1rem, 5.6vw, 5.2rem);
  line-height: 0.88;
  letter-spacing: -0.075em;
  text-shadow: 0 0 42px rgba(183,255,32,0.16);
}
.stat-kicker {
  display: block;
  color: rgba(245,255,240,0.52);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.server-main-stat small {
  display: block;
  margin-top: 12px;
  color: rgba(245,255,240,0.62);
  font-weight: 800;
}
.main-stat-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  border-radius: 22px;
}
.main-stat-icon .icon-svg {
  width: 32px;
  height: 32px;
  stroke-width: 2.1;
}
.server-meters {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
}
.server-meter-row {
  display: grid;
  grid-template-columns: 140px 48px 1fr;
  align-items: center;
  gap: 14px;
  color: rgba(245,255,240,0.78);
  font-size: 0.88rem;
  font-weight: 850;
}
.server-meter-row b {
  color: var(--green);
  font-weight: 950;
  text-align: right;
}
.server-meter-row i {
  position: relative;
  display: block;
  height: 9px;
  border: 1px solid rgba(183,255,32,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.055);
  overflow: hidden;
}
.server-meter-row em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--green-2));
  box-shadow: 0 0 22px rgba(183,255,32,0.28);
  transform-origin: left;
  animation: meterGrow 1.2s cubic-bezier(.2,.8,.2,1) both;
}
.server-stats-grid.premium {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.server-stats-grid.premium .server-stat {
  min-height: 126px;
  padding: 16px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)),
    rgba(2,5,3,0.45);
}
.server-stats-grid.premium .server-stat strong {
  margin-top: 42px;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  letter-spacing: -0.045em;
}
.server-stats-grid.premium .server-stat small {
  font-size: 0.76rem;
  line-height: 1.35;
}
.server-stats-grid.premium .stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 13px;
}
.server-stats-grid.premium .stat-icon .icon-svg {
  width: 20px;
  height: 20px;
}
.server-status-card .btn.full {
  position: relative;
  z-index: 1;
  margin-top: 4px;
}
@keyframes livePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.72; transform: scale(1.26); }
}
@keyframes meterGrow {
  from { transform: scaleX(0.08); opacity: 0.2; }
  to { transform: scaleX(1); opacity: 1; }
}

@media (max-width: 1260px) {
  .home-duo { grid-template-columns: 1fr; }
  .server-stats-grid.premium { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .header-actions .btn-small { padding-inline: 12px; }
  .btn-register .btn-icon,
  .btn-join .btn-icon { width: 25px; height: 25px; flex-basis: 25px; }
  .server-main-stat { align-items: flex-start; }
  .server-meter-row { grid-template-columns: 1fr auto; }
  .server-meter-row i { grid-column: 1 / -1; }
  .server-stats-grid.premium { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .header-actions.open { gap: 8px; }
  .header-actions.open .btn-small { width: 100%; }
  .status-card-head { align-items: flex-start; flex-direction: column; }
  .server-main-stat { flex-direction: column; }
}
.muted-form-text,
.form-note {
  color: var(--muted);
  line-height: 1.65;
}
.form-note {
  min-height: 22px;
  margin: 14px 0 0;
  color: var(--green);
  font-weight: 850;
}

/* =========================================================
   FINAL POLISH — icon system, hotbar, homepage dynamics
   ========================================================= */
.site-bg {
  background:
    radial-gradient(circle at 78% 10%, rgba(183,255,32,0.12), transparent 32%),
    radial-gradient(circle at 22% 30%, rgba(56,223,66,0.075), transparent 38%),
    url("assets/bolt-watermark.svg") center 120px / min(780px, 72vw) auto no-repeat !important;
  opacity: 0.24 !important;
  filter: drop-shadow(0 0 10px rgba(183,255,32,0.10)) drop-shadow(0 0 48px rgba(56,223,66,0.06));
  animation: fmBoltBreath 6.5s ease-in-out infinite;
}
.site-bg::after {
  background:
    linear-gradient(90deg, rgba(3,6,4,0.96) 0%, rgba(3,6,4,0.72) 45%, rgba(3,6,4,0.96) 100%),
    radial-gradient(circle at 50% 24%, transparent 0%, rgba(3,6,4,0.48) 54%, rgba(3,6,4,0.92) 100%) !important;
}
.site-bg::before {
  content: "";
  position: absolute;
  inset: -18%;
  background: conic-gradient(from 0deg at 50% 43%, transparent 0deg, rgba(183,255,32,0.16) 18deg, transparent 42deg, transparent 360deg);
  opacity: 0.22;
  mix-blend-mode: screen;
  animation: fmGlowSweep 8s linear infinite;
}

.site-header {
  min-height: 76px !important;
  padding: 0 max(26px, calc((100vw - var(--container)) / 2)) !important;
  gap: 20px !important;
  background:
    linear-gradient(180deg, rgba(4,8,5,0.94), rgba(2,5,3,0.82)) !important;
  border-bottom: 1px solid rgba(183,255,32,0.16) !important;
  box-shadow: 0 16px 50px rgba(0,0,0,0.34), inset 0 -1px 0 rgba(255,255,255,0.025) !important;
}
.site-header::after {
  content: "";
  position: absolute;
  left: max(26px, calc((100vw - var(--container)) / 2));
  right: max(26px, calc((100vw - var(--container)) / 2));
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183,255,32,0.44), transparent);
  opacity: 0.55;
  pointer-events: none;
}
.brand img { width: 42px !important; height: 42px !important; }
.brand strong { font-size: 1.03rem !important; letter-spacing: -0.025em !important; }
.brand small { font-size: 0.56rem !important; letter-spacing: 0.24em !important; }
.nav-links {
  gap: 3px !important;
  padding: 6px !important;
  border: 1px solid rgba(183,255,32,0.10);
  border-radius: 16px;
  background: rgba(0,0,0,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.018);
}
.nav-links a {
  position: relative;
  min-height: 36px !important;
  padding: 0 13px !important;
  border-radius: 11px !important;
  overflow: hidden;
  color: rgba(245,255,240,0.70) !important;
  font-size: 0.70rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}
.nav-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(183,255,32,0.10), transparent);
  transform: translateX(-120%);
  transition: transform 520ms cubic-bezier(.2,.8,.2,1);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--green), var(--green-2));
  opacity: 0;
  transform: scaleX(0.35);
  transition: 220ms ease;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--green) !important;
  background: rgba(183,255,32,0.075) !important;
  border-color: rgba(183,255,32,0.16) !important;
}
.nav-links a:hover::before { transform: translateX(120%); }
.nav-links a:hover::after,
.nav-links a.active::after { opacity: 1; transform: scaleX(1); }
.header-actions .btn-small {
  min-height: 40px !important;
  padding: 0 15px !important;
  border-radius: 12px !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.105em !important;
  text-transform: uppercase !important;
}

.icon-svg {
  display: block;
  width: 1.18em;
  height: 1.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.95;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), filter 220ms ease, color 220ms ease;
}
.icon-svg use { pointer-events: none; }
.btn-icon,
.card-icon,
.feature-icon,
.stat-icon,
.trust-icon,
.main-stat-icon,
.discord-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  color: var(--green) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.btn-primary .btn-icon { color: #041104 !important; }
.btn-soft .btn-icon,
.btn-register .btn-icon { color: var(--green) !important; }
.btn .btn-icon .icon-svg { width: 1.12rem !important; height: 1.12rem !important; stroke-width: 2.1; }
.header-actions .btn .icon-svg { width: 1rem !important; height: 1rem !important; }
.btn:hover .btn-icon { transform: none !important; }
.btn:hover .icon-svg { transform: translateX(2px) scale(1.06); filter: drop-shadow(0 0 9px rgba(183,255,32,0.30)); }
.btn-primary:hover .icon-svg { filter: drop-shadow(0 0 8px rgba(7,17,5,0.22)); }

.hero-store.refined-home {
  min-height: calc(100svh - 76px) !important;
  padding: clamp(70px, 7vw, 112px) 0 clamp(58px, 6vw, 86px) !important;
  gap: clamp(56px, 7vw, 104px) !important;
}
.refined-home .hero-store-copy h1 {
  max-width: 790px !important;
  margin: 28px 0 24px !important;
  font-size: clamp(4.1rem, 7.2vw, 8rem) !important;
  line-height: 0.94 !important;
}
.refined-home .hero-store-copy .lead {
  max-width: 655px !important;
  color: rgba(245,255,240,0.74) !important;
  font-size: clamp(1rem, 1.18vw, 1.18rem) !important;
  line-height: 1.82 !important;
}
.refined-home .hero-store-art {
  border-radius: 32px !important;
  transform-origin: center;
  animation: fmHeroFloat 7.5s ease-in-out infinite;
}
.refined-home .hero-store-art::after {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.18), rgba(183,255,32,0.12), transparent 68%);
  transform: translateX(-80%) rotate(8deg);
  opacity: 0;
  animation: fmImageScan 5.8s ease-in-out infinite;
}
.refined-home .hero-store-art img {
  transition: transform 580ms cubic-bezier(.2,.8,.2,1), filter 580ms ease !important;
  will-change: transform;
}
.refined-home .hero-store-art:hover {
  animation-play-state: paused;
  transform: translateY(-8px) scale(1.015) !important;
}
.refined-home .hero-store-art:hover img { transform: scale(1.045) translateY(-2px) !important; filter: saturate(1.16) contrast(1.08) brightness(1.03) !important; }
.hero-badges { transition: transform 300ms ease, border-color 300ms ease, background 300ms ease; }
.refined-home .hero-store-art:hover .hero-badges { transform: translateY(-4px); border-color: rgba(183,255,32,0.40); background: rgba(3,6,4,0.80); }

.trust-row { gap: 28px !important; }
.trust-item span:first-child,
.trust-icon { width: 26px !important; height: 26px !important; background: transparent !important; }
.trust-icon .icon-svg { width: 22px !important; height: 22px !important; stroke-width: 2.2 !important; }
.trust-item { transition: transform 220ms ease; }
.trust-item:hover { transform: translateY(-3px); }
.trust-item:hover .icon-svg { transform: scale(1.12); filter: drop-shadow(0 0 12px rgba(183,255,32,0.38)); }

.store-card {
  grid-template-columns: 38px 1fr auto !important;
  min-height: 148px !important;
  padding: 28px !important;
  border-radius: 22px !important;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease, background 260ms ease, box-shadow 260ms ease !important;
}
.store-card::after {
  content: "→" !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 1.1rem !important;
  opacity: 0.65;
  transition: transform 220ms ease, opacity 220ms ease;
}
.store-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(183,255,32,0.34) !important;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(183,255,32,0.11), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.018)),
    rgba(10,18,11,0.72) !important;
  box-shadow: 0 28px 86px rgba(0,0,0,0.38), 0 0 52px rgba(183,255,32,0.055) !important;
}
.store-card:hover::after { transform: translateX(5px); opacity: 1; }
.card-icon .icon-svg,
.feature-icon .icon-svg { width: 30px !important; height: 30px !important; stroke-width: 1.8 !important; filter: drop-shadow(0 0 9px rgba(183,255,32,0.17)); }
.store-card:hover .card-icon .icon-svg,
.feature-card:hover .feature-icon .icon-svg { transform: translateY(-2px) scale(1.12); filter: drop-shadow(0 0 14px rgba(183,255,32,0.30)); }
.feature-card .feature-icon { margin-bottom: 18px; }

.home-duo {
  align-items: stretch !important;
  gap: clamp(34px, 4vw, 58px) !important;
}
.server-status-card {
  gap: 24px !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at var(--mx, 78%) var(--my, 0%), rgba(183,255,32,0.18), transparent 36%),
    linear-gradient(145deg, rgba(183,255,32,0.085), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.016)),
    rgba(7, 13, 8, 0.84) !important;
}
.server-status-title { position: relative; z-index: 1; }
.server-main-stat {
  padding: clamp(24px, 3vw, 34px) !important;
  border-radius: 26px !important;
  overflow: hidden;
}
.server-main-stat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.065), transparent);
  transform: translateX(-120%);
  animation: fmStatSheen 6s ease-in-out infinite;
  pointer-events: none;
}
.server-main-stat strong { font-size: clamp(3.5rem, 6vw, 5.6rem) !important; }
.main-stat-icon .icon-svg { width: 42px !important; height: 42px !important; stroke-width: 1.75 !important; filter: drop-shadow(0 0 16px rgba(183,255,32,0.28)); }
.server-meter-row { grid-template-columns: minmax(128px, 0.8fr) 54px minmax(160px, 1fr) !important; gap: 16px !important; }
.server-meter-row i { height: 10px !important; background: rgba(255,255,255,0.06) !important; }
.server-meter-row em { width: var(--meter, 100%) !important; animation: fmMeterGrow 1.4s cubic-bezier(.2,.8,.2,1) both !important; }
.server-stats-grid.premium { gap: 14px !important; }
.server-stats-grid.premium .server-stat {
  display: grid !important;
  align-content: start !important;
  gap: 9px !important;
  min-height: 132px !important;
  padding: 20px !important;
  border: 1px solid rgba(183,255,32,0.14);
  transition: transform 240ms ease, border-color 240ms ease, background 240ms ease;
}
.server-stats-grid.premium .server-stat:hover {
  transform: translateY(-5px);
  border-color: rgba(183,255,32,0.34);
  background: rgba(183,255,32,0.055) !important;
}
.server-stats-grid.premium .server-stat strong { margin-top: 12px !important; }
.server-stats-grid.premium .stat-icon .icon-svg { width: 25px !important; height: 25px !important; stroke-width: 1.85 !important; }
.server-status-card .btn.full { min-height: 56px; }

.discord-mark .icon-svg { width: 50px !important; height: 50px !important; stroke-width: 1.6 !important; filter: drop-shadow(0 0 18px rgba(183,255,32,0.28)); }
.discord-strip { transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease; }
.discord-strip:hover { transform: translateY(-5px); border-color: rgba(183,255,32,0.36); box-shadow: 0 28px 90px rgba(0,0,0,0.34), 0 0 58px rgba(183,255,32,0.06); }
.news-card, .rating-summary, .review-item, .content-card { transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease, box-shadow 260ms ease; }
.news-card:hover, .rating-summary:hover, .review-item:hover, .content-card:hover { transform: translateY(-6px); border-color: rgba(183,255,32,0.30); box-shadow: 0 30px 88px rgba(0,0,0,0.36); }

.scroll-top { border-radius: 16px !important; }
.scroll-top:hover .icon-svg { transform: translateY(-2px); }

@keyframes fmBoltBreath {
  0%, 100% { opacity: 0.18; filter: drop-shadow(0 0 8px rgba(183,255,32,0.08)) drop-shadow(0 0 34px rgba(56,223,66,0.04)); }
  45% { opacity: 0.30; filter: drop-shadow(0 0 14px rgba(183,255,32,0.18)) drop-shadow(0 0 70px rgba(56,223,66,0.09)); }
}
@keyframes fmGlowSweep {
  to { transform: rotate(360deg); }
}
@keyframes fmHeroFloat {
  0%,100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -12px, 0); }
}
@keyframes fmImageScan {
  0%, 54%, 100% { opacity: 0; transform: translateX(-80%) rotate(8deg); }
  64% { opacity: 0.75; }
  78% { opacity: 0; transform: translateX(80%) rotate(8deg); }
}
@keyframes fmStatSheen {
  0%, 46%, 100% { transform: translateX(-120%); opacity: 0; }
  60% { opacity: 1; }
  76% { transform: translateX(120%); opacity: 0; }
}
@keyframes fmMeterGrow {
  from { width: 0; opacity: 0.25; }
  to { width: var(--meter, 100%); opacity: 1; }
}

@media (max-width: 1260px) {
  .nav-links { gap: 2px !important; padding: 5px !important; }
  .nav-links a { padding-inline: 9px !important; font-size: 0.64rem !important; }
  .hero-store.refined-home { min-height: auto !important; }
}
@media (max-width: 980px) {
  .site-header { min-height: 72px !important; }
  .nav-links.open {
    gap: 8px !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }
  .nav-links.open a { min-height: 44px !important; font-size: 0.76rem !important; }
  .header-actions.open { top: calc(72px + 392px) !important; }
  .hero-store.refined-home { padding-top: 54px !important; }
}
@media (max-width: 780px) {
  .hero-store.refined-home { gap: 40px !important; }
  .refined-home .hero-store-copy h1 { font-size: clamp(3.15rem, 14vw, 5rem) !important; }
  .trust-row { grid-template-columns: 1fr !important; gap: 18px !important; }
  .store-card { grid-template-columns: 32px 1fr !important; }
  .store-card::after { display: none !important; }
  .discord-mark .icon-svg { width: 38px !important; height: 38px !important; }
  .server-meter-row { grid-template-columns: 1fr auto !important; }
  .server-meter-row i { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .header-actions.open .btn-small { width: 100%; }
  .server-main-stat { flex-direction: column !important; align-items: flex-start !important; }
  .server-stats-grid.premium { grid-template-columns: 1fr !important; }
  .hero-badges { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .site-bg, .site-bg::before, .refined-home .hero-store-art, .refined-home .hero-store-art::after, .server-main-stat::after { animation: none !important; }
  .btn:hover, .store-card:hover, .news-card:hover, .content-card:hover, .discord-strip:hover, .rating-summary:hover, .review-item:hover { transform: none !important; }
}

/* =========================================================
   UPDATE — lisibilité, fond vivant, tilt hero, icônes centralisées
   ========================================================= */
body::after {
  content: "";
  position: fixed;
  inset: -18%;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 24%, rgba(183,255,32,0.075), transparent 7%),
    radial-gradient(circle at 70% 18%, rgba(56,223,66,0.055), transparent 8%),
    radial-gradient(circle at 80% 76%, rgba(183,255,32,0.052), transparent 9%),
    linear-gradient(115deg, transparent 0 42%, rgba(183,255,32,0.035) 42.2% 42.45%, transparent 42.7%);
  filter: blur(0.2px);
  opacity: 0.72;
  animation: fmBackgroundDrift 16s ease-in-out infinite alternate;
}

.site-bg {
  background:
    radial-gradient(circle at 58% 8%, rgba(183,255,32,0.16), transparent 26%),
    radial-gradient(circle at 31% 44%, rgba(56,223,66,0.095), transparent 36%),
    url("assets/bolt-watermark.svg") center 104px / min(860px, 76vw) auto no-repeat !important;
  opacity: 0.36 !important;
  filter:
    drop-shadow(0 0 18px rgba(183,255,32,0.18))
    drop-shadow(0 0 76px rgba(56,223,66,0.12)) !important;
  animation: fmBoltBreathV2 5.6s ease-in-out infinite !important;
}
.site-bg::before {
  inset: -24% !important;
  background:
    conic-gradient(from 0deg at 50% 42%, transparent 0deg, rgba(183,255,32,0.22) 13deg, transparent 33deg, transparent 360deg),
    radial-gradient(circle at 50% 44%, rgba(183,255,32,0.105), transparent 28%) !important;
  opacity: 0.32 !important;
  mix-blend-mode: screen;
  animation: fmGlowSweep 7s linear infinite !important;
}
.site-bg::after {
  background:
    linear-gradient(90deg, rgba(3,6,4,0.91) 0%, rgba(3,6,4,0.56) 48%, rgba(3,6,4,0.90) 100%),
    radial-gradient(circle at 50% 28%, transparent 0%, rgba(3,6,4,0.36) 55%, rgba(3,6,4,0.88) 100%) !important;
}

/* Texte hero : évite les lettres coupées et garde un meilleur rythme visuel. */
.refined-home .hero-store-copy {
  overflow: visible !important;
  padding-block: 10px 14px !important;
}
.refined-home .hero-store-copy h1 {
  overflow: visible !important;
  max-width: 820px !important;
  padding-bottom: 0.08em !important;
  margin: 26px 0 22px !important;
  font-size: clamp(3.8rem, 6.75vw, 7.45rem) !important;
  line-height: 1.035 !important;
  letter-spacing: -0.07em !important;
}
.refined-home .hero-store-copy h1 .gradient-text {
  display: inline-block !important;
  padding-bottom: 0.04em !important;
}
.refined-home .hero-store-copy .lead {
  max-width: 690px !important;
  line-height: 1.78 !important;
}

/* Hero image : effet premium qui suit la souris, sans casser le layout. */
.refined-home .hero-store-art {
  --hero-rx: 0deg;
  --hero-ry: 0deg;
  --hero-tx: 0px;
  --hero-ty: 0px;
  --hero-img-x: 0px;
  --hero-img-y: 0px;
  transform:
    perspective(1150px)
    translate3d(var(--hero-tx), var(--hero-ty), 0)
    rotateX(var(--hero-rx))
    rotateY(var(--hero-ry)) !important;
  animation: none !important;
  transition: transform 180ms ease-out, border-color 240ms ease, box-shadow 240ms ease, filter 240ms ease !important;
  will-change: transform;
}
.refined-home .hero-store-art img {
  transform: translate3d(var(--hero-img-x), var(--hero-img-y), 0) scale(1.012) !important;
  transition: transform 180ms ease-out, filter 240ms ease !important;
  will-change: transform;
}
.refined-home .hero-store-art:hover {
  box-shadow: 0 38px 110px rgba(0,0,0,0.48), 0 0 70px rgba(183,255,32,0.12) !important;
}
.refined-home .hero-store-art:hover img {
  transform: translate3d(var(--hero-img-x), var(--hero-img-y), 0) scale(1.035) !important;
}
.refined-home .hero-store-art::after {
  animation: fmImageScan 6.8s ease-in-out infinite !important;
}
.refined-home .hero-store-art.is-tilting::before {
  opacity: 1 !important;
}

/* Ancien bloc conservé par compatibilité : le système actif vient de assets/icons-config.js. */
.btn-icon,
.card-icon,
.feature-icon,
.stat-icon,
.trust-icon,
.main-stat-icon,
.discord-mark {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--green) !important;
  overflow: visible !important;
}
.btn-icon::before,
.btn-icon::after,
.card-icon::before,
.card-icon::after,
.feature-icon::before,
.feature-icon::after,
.stat-icon::before,
.stat-icon::after,
.trust-icon::before,
.trust-icon::after,
.main-stat-icon::before,
.main-stat-icon::after,
.discord-mark::before,
.discord-mark::after {
  content: none !important;
  display: none !important;
}
.store-card:hover .card-icon,
.feature-card:hover .feature-icon,
.server-stat:hover .stat-icon,
.trust-item:hover .trust-icon,
.discord-strip:hover .discord-mark {
  color: var(--green) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.store-card:hover .card-icon .icon-svg,
.feature-card:hover .feature-icon .icon-svg,
.server-stat:hover .stat-icon .icon-svg,
.trust-item:hover .trust-icon .icon-svg,
.discord-strip:hover .discord-mark .icon-svg {
  transform: translateY(-2px) scale(1.08) !important;
  filter: drop-shadow(0 0 13px rgba(183,255,32,0.36)) !important;
}
.icon-svg {
  stroke-width: 1.9 !important;
}
.card-icon .icon-svg,
.feature-icon .icon-svg,
.stat-icon .icon-svg,
.trust-icon .icon-svg,
.main-stat-icon .icon-svg {
  flex: 0 0 auto !important;
}

/* Stats serveur : correction superposition icône/texte + rendu plus propre. */
.server-status-card {
  overflow: hidden !important;
}
.server-main-stat {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(18px, 2vw, 30px) !important;
}
.server-main-stat > div {
  min-width: 0 !important;
}
.server-main-stat strong {
  display: block !important;
  white-space: nowrap !important;
  line-height: 0.96 !important;
  padding-block: 0.05em 0.08em !important;
}
.main-stat-icon {
  width: 54px !important;
  height: 54px !important;
  justify-self: end !important;
  opacity: 0.9;
}
.main-stat-icon .icon-svg {
  width: 48px !important;
  height: 48px !important;
}
.server-stats-grid.premium {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.server-stats-grid.premium .server-stat {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-areas:
    "icon value"
    "icon label" !important;
  align-items: center !important;
  column-gap: 14px !important;
  row-gap: 4px !important;
  min-height: 88px !important;
  padding: 18px 20px !important;
  overflow: hidden !important;
}
.server-stats-grid.premium .server-stat .stat-icon {
  grid-area: icon !important;
  width: 30px !important;
  height: 30px !important;
  align-self: center !important;
  justify-self: center !important;
}
.server-stats-grid.premium .server-stat .stat-icon .icon-svg {
  width: 28px !important;
  height: 28px !important;
}
.server-stats-grid.premium .server-stat strong {
  grid-area: value !important;
  margin: 0 !important;
  min-width: 0 !important;
  line-height: 1.06 !important;
  white-space: nowrap !important;
}
.server-stats-grid.premium .server-stat small {
  grid-area: label !important;
  min-width: 0 !important;
  line-height: 1.35 !important;
}
.server-meter-row {
  align-items: center !important;
}
.server-meter-row span,
.server-meter-row b {
  line-height: 1.2 !important;
}

@keyframes fmBackgroundDrift {
  0% { transform: translate3d(-1.4%, -1%, 0) scale(1); opacity: 0.42; }
  50% { opacity: 0.76; }
  100% { transform: translate3d(1.4%, 1%, 0) scale(1.035); opacity: 0.58; }
}
@keyframes fmBoltBreathV2 {
  0%, 100% {
    opacity: 0.28;
    filter: drop-shadow(0 0 14px rgba(183,255,32,0.16)) drop-shadow(0 0 54px rgba(56,223,66,0.08));
  }
  44% {
    opacity: 0.43;
    filter: drop-shadow(0 0 24px rgba(183,255,32,0.26)) drop-shadow(0 0 96px rgba(56,223,66,0.14));
  }
  68% {
    opacity: 0.34;
  }
}

@media (max-width: 980px) {
  .refined-home .hero-store-copy h1 {
    font-size: clamp(3.35rem, 11vw, 5.8rem) !important;
    line-height: 1.05 !important;
  }
  .refined-home .hero-store-art {
    transform: none !important;
  }
  .refined-home .hero-store-art img {
    transform: scale(1.01) !important;
  }
  .server-stats-grid.premium .server-stat {
    min-height: 82px !important;
  }
}
@media (max-width: 680px) {
  .site-bg {
    background-size: min(560px, 96vw) auto !important;
    background-position: center 86px !important;
    opacity: 0.30 !important;
  }
  .refined-home .hero-store-copy h1 {
    font-size: clamp(2.95rem, 14vw, 4.6rem) !important;
    line-height: 1.07 !important;
    letter-spacing: -0.065em !important;
  }
  .server-main-stat {
    grid-template-columns: 1fr !important;
  }
  .main-stat-icon {
    display: none !important;
  }
  .server-stats-grid.premium {
    grid-template-columns: 1fr !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body::after,
  .site-bg,
  .site-bg::before,
  .refined-home .hero-store-art::after {
    animation: none !important;
  }
}

/* UPDATE — icônes remplaçables par fichiers depuis assets/icons-config.js
   Plus aucun pictogramme n'utilise le sprite assets/icons.svg dans les pages. */
.site-icon {
  --icon-size: 1.1em;
  --icon-stroke: 1.9;
  width: var(--icon-size);
  height: var(--icon-size);
  min-width: var(--icon-size);
  min-height: var(--icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  line-height: 1;
  flex: 0 0 auto;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.site-icon svg,
.site-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.site-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.site-icon img {
  filter: none;
}
.btn-icon,
.card-icon,
.feature-icon,
.stat-icon,
.trust-icon,
.main-stat-icon,
.discord-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: currentColor;
  overflow: visible !important;
}
.btn-icon .site-icon { --icon-size: 1.08rem; --icon-stroke: 2.15; }
.header-actions .btn-icon .site-icon { --icon-size: 1rem; }
.trust-icon .site-icon { --icon-size: 22px; --icon-stroke: 2.05; color: var(--green); }
.card-icon .site-icon,
.feature-icon .site-icon { --icon-size: 30px; --icon-stroke: 1.85; color: var(--green); filter: drop-shadow(0 0 10px rgba(183,255,32,0.17)); }
.stat-icon .site-icon { --icon-size: 25px; --icon-stroke: 1.85; color: var(--green); }
.main-stat-icon .site-icon { --icon-size: 46px; --icon-stroke: 1.75; color: var(--green); filter: drop-shadow(0 0 16px rgba(183,255,32,0.28)); }
.discord-mark .site-icon { --icon-size: 50px; --icon-stroke: 1.55; color: var(--green); filter: drop-shadow(0 0 18px rgba(183,255,32,0.28)); }
.scroll-top .site-icon { --icon-size: 23px; --icon-stroke: 2.55; }
.btn:hover .site-icon {
  transform: translateX(2px) scale(1.06);
  filter: drop-shadow(0 0 9px rgba(183,255,32,0.30));
}
.btn-primary:hover .site-icon {
  filter: drop-shadow(0 0 8px rgba(7,17,5,0.22));
}
.store-card:hover .card-icon .site-icon,
.feature-card:hover .feature-icon .site-icon,
.server-stat:hover .stat-icon .site-icon,
.trust-item:hover .trust-icon .site-icon,
.discord-strip:hover .discord-mark .site-icon {
  transform: translateY(-2px) scale(1.08) !important;
  filter: drop-shadow(0 0 13px rgba(183,255,32,0.36)) !important;
}
.server-stats-grid.premium .server-stat .stat-icon {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
}
.server-stats-grid.premium .server-stat .stat-icon .site-icon {
  --icon-size: 28px;
}
@media (max-width: 680px) {
  .discord-mark .site-icon { --icon-size: 38px; }
}

/* UPDATE — retrait des bulles visuelles demandées
   - plus de grand cadre autour de la navigation desktop
   - plus de cadre/bulle autour du visuel hero à droite */
.nav-links {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.refined-home .hero-store-art,
.hero-store-art {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 26px !important;
  overflow: visible !important;
}

.refined-home .hero-store-art::before,
.hero-store-art::before {
  content: none !important;
  display: none !important;
}

.refined-home .hero-store-art::after,
.hero-store-art::after {
  inset: 0 !important;
  border-radius: 24px !important;
  z-index: 2 !important;
  overflow: hidden !important;
}

.refined-home .hero-store-art img,
.hero-store-art img {
  border-radius: 24px !important;
  box-shadow: 0 32px 92px rgba(0,0,0,0.48), 0 0 52px rgba(183,255,32,0.10) !important;
}

.refined-home .hero-store-art:hover,
.hero-store-art:hover {
  box-shadow: none !important;
  filter: drop-shadow(0 38px 86px rgba(0,0,0,0.50)) drop-shadow(0 0 28px rgba(183,255,32,0.12)) !important;
}

@media (max-width: 980px) {
  .nav-links.open {
    padding: 14px !important;
    border: 1px solid rgba(183,255,32,0.14) !important;
    border-radius: 22px !important;
    background: rgba(4, 8, 5, 0.98) !important;
    box-shadow: var(--shadow) !important;
  }
}

/* =========================================================
   BOUTIQUE — refonte premium minimaliste, previews ingame
   ========================================================= */
.shop-main {
  padding-bottom: 116px;
}
.shop-hero-premium {
  width: min(var(--container), calc(100% - 56px));
  min-height: calc(100svh - 76px);
  margin-inline: auto;
  padding: clamp(76px, 7vw, 118px) 0 clamp(58px, 6vw, 92px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.1fr);
  align-items: center;
  gap: clamp(58px, 7vw, 112px);
}
.shop-hero-copy {
  max-width: 760px;
  overflow: visible;
}
.shop-hero-copy h1 {
  margin: 28px 0 24px;
  max-width: 840px;
  font-size: clamp(3.6rem, 6.4vw, 7.35rem);
  line-height: 1.02;
  letter-spacing: -0.07em;
  overflow: visible;
  text-wrap: balance;
}
.shop-hero-copy h1 .gradient-text {
  display: inline;
  color: transparent;
  background: linear-gradient(90deg, #f1ff30 0%, var(--green) 48%, var(--green-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 48px rgba(183,255,32,0.18);
}
.shop-hero-copy .lead {
  max-width: 710px;
  color: rgba(245,255,240,0.75);
  font-size: clamp(1rem, 1.16vw, 1.17rem);
  line-height: 1.82;
  text-wrap: pretty;
}
.shop-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.shop-hero-metrics div {
  position: relative;
  padding: 18px 18px 17px;
  border: 1px solid rgba(183,255,32,0.15);
  border-radius: 18px;
  background: rgba(255,255,255,0.028);
  overflow: hidden;
}
.shop-hero-metrics div::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(183,255,32,0.12), transparent 42%);
  opacity: 0;
  transition: opacity 240ms ease;
}
.shop-hero-metrics div:hover::before { opacity: 1; }
.shop-hero-metrics strong {
  position: relative;
  display: block;
  color: var(--green);
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -0.045em;
}
.shop-hero-metrics span {
  position: relative;
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.35;
}
.shop-hero-visual {
  --shop-rx: 0deg;
  --shop-ry: 0deg;
  --shop-tx: 0px;
  --shop-ty: 0px;
  position: relative;
  justify-self: stretch;
  transform: perspective(1200px) translate3d(var(--shop-tx), var(--shop-ty), 0) rotateX(var(--shop-rx)) rotateY(var(--shop-ry));
  transition: transform 180ms ease-out, filter 250ms ease;
  will-change: transform;
  isolation: isolate;
}
.shop-hero-visual::before {
  content: "";
  position: absolute;
  inset: -28px;
  z-index: -1;
  border-radius: 36px;
  background:
    radial-gradient(circle at var(--mx, 70%) var(--my, 10%), rgba(183,255,32,0.26), transparent 30%),
    radial-gradient(circle at 12% 90%, rgba(56,223,66,0.12), transparent 34%);
  filter: blur(28px);
  opacity: 0.48;
  transition: opacity 260ms ease;
}
.shop-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 36%, rgba(255,255,255,0.16) 48%, rgba(183,255,32,0.10) 56%, transparent 70%);
  transform: translateX(-110%) skewX(-12deg);
  opacity: 0;
  animation: shopHeroSweep 6.4s ease-in-out infinite;
}
.shop-hero-visual img {
  width: 100%;
  aspect-ratio: 16 / 8.2;
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(183,255,32,0.18);
  border-radius: 28px;
  box-shadow: 0 36px 100px rgba(0,0,0,0.52), 0 0 54px rgba(183,255,32,0.08);
  filter: saturate(1.08) contrast(1.04);
  transition: transform 240ms ease-out, filter 260ms ease, border-color 260ms ease;
}
.shop-hero-visual:hover::before { opacity: 0.68; }
.shop-hero-visual:hover img {
  border-color: rgba(183,255,32,0.32);
  filter: saturate(1.14) contrast(1.08) brightness(1.02);
}
.shop-floating-card {
  position: absolute;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 11px;
  align-items: center;
  min-width: 178px;
  padding: 13px 15px;
  border: 1px solid rgba(183,255,32,0.18);
  border-radius: 18px;
  background: rgba(3,6,4,0.74);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 52px rgba(0,0,0,0.34);
}
.shop-floating-card .site-icon {
  --icon-size: 25px;
  color: var(--green);
  grid-row: span 2;
}
.shop-floating-card b {
  font-size: 0.88rem;
  letter-spacing: -0.025em;
}
.shop-floating-card small {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 780;
}
.shop-floating-card.card-one { left: clamp(18px, 3vw, 38px); bottom: -18px; }
.shop-floating-card.card-two { right: clamp(18px, 3vw, 38px); top: -18px; }

.shop-feature-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 18px !important;
}
.shop-service-card,
.shop-category-card,
.shop-preview-card,
.shop-flow-panel,
.shop-cta-band {
  position: relative;
  border: 1px solid rgba(183,255,32,0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.044), rgba(255,255,255,0.016)),
    rgba(8,15,9,0.72);
  box-shadow: 0 24px 72px rgba(0,0,0,0.30);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.shop-service-card,
.shop-category-card {
  min-height: 210px;
  padding: 30px;
  border-radius: 24px;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease, box-shadow 260ms ease, background 260ms ease;
}
.shop-service-card::before,
.shop-category-card::before,
.shop-preview-card::before,
.shop-flow-panel::before,
.shop-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 0%), rgba(183,255,32,0.16), transparent 36%);
  transition: opacity 260ms ease;
}
.shop-service-card:hover,
.shop-category-card:hover,
.shop-preview-card:hover,
.shop-flow-panel:hover,
.shop-cta-band:hover {
  transform: translateY(-6px);
  border-color: rgba(183,255,32,0.34);
  box-shadow: 0 34px 96px rgba(0,0,0,0.38), 0 0 48px rgba(183,255,32,0.055);
}
.shop-service-card:hover::before,
.shop-category-card:hover::before,
.shop-preview-card:hover::before,
.shop-flow-panel:hover::before,
.shop-cta-band:hover::before { opacity: 1; }
.shop-service-card h3,
.shop-category-card h3 {
  margin: 22px 0 11px;
  font-size: clamp(1.18rem, 1.7vw, 1.55rem);
  line-height: 1.05;
  text-wrap: balance;
}
.shop-service-card p,
.shop-category-card p {
  position: relative;
  margin: 0;
  color: var(--muted);
  line-height: 1.66;
}

.shop-preview-section .section-heading h2 {
  max-width: 780px;
}
.shop-preview-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: repeat(2, minmax(260px, 1fr));
  gap: 22px;
}
.shop-preview-card {
  border-radius: 26px;
  min-height: 260px;
  isolation: isolate;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), border-color 280ms ease, box-shadow 280ms ease;
}
.shop-preview-card.large {
  grid-row: 1 / span 2;
}
.shop-preview-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(1.05) contrast(1.02);
  transition: transform 450ms cubic-bezier(.2,.8,.2,1), filter 280ms ease;
}
.shop-preview-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(2,5,3,0.10), rgba(2,5,3,0.78)),
    radial-gradient(circle at 82% 12%, rgba(183,255,32,0.15), transparent 36%);
  pointer-events: none;
}
.shop-preview-card div {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 24px;
}
.shop-preview-card span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(183,255,32,0.22);
  border-radius: 999px;
  color: var(--green);
  background: rgba(3,6,4,0.64);
  font-size: 0.70rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.shop-preview-card h3 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 2.25rem);
  line-height: 1.03;
}
.shop-preview-card:hover img {
  transform: scale(1.045);
  filter: saturate(1.15) contrast(1.07) brightness(1.02);
}

.shop-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.shop-category-card {
  min-height: 220px;
}

.shop-flow-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
  padding: clamp(34px, 4vw, 58px);
  border-radius: 32px;
}
.shop-flow-panel h2 {
  margin: 18px 0 18px;
  max-width: 680px;
  font-size: clamp(2.4rem, 4.4vw, 4.7rem);
}
.shop-flow-panel p {
  max-width: 680px;
  color: var(--muted);
  line-height: 1.75;
}
.shop-flow-steps {
  display: grid;
  gap: 16px;
}
.shop-flow-steps div {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  align-items: start;
  padding: 22px;
  border: 1px solid rgba(183,255,32,0.14);
  border-radius: 22px;
  background: rgba(0,0,0,0.19);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}
.shop-flow-steps div:hover {
  transform: translateX(6px);
  border-color: rgba(183,255,32,0.30);
  background: rgba(183,255,32,0.045);
}
.shop-flow-steps b {
  grid-row: span 2;
  color: var(--green);
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: -0.05em;
}
.shop-flow-steps h3 {
  margin: 0 0 7px;
  font-size: 1.16rem;
}
.shop-flow-steps p {
  margin: 0;
  line-height: 1.55;
}

.shop-cta-band {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  min-height: 144px;
  padding: clamp(28px, 3.3vw, 46px);
  border-radius: 30px;
  background:
    linear-gradient(90deg, rgba(12,28,13,0.92), rgba(4,8,5,0.78)),
    url("assets/boutique-ingame-journaliere.webp") center / cover no-repeat;
}
.shop-cta-band > div {
  display: contents;
}
.shop-cta-band > div > .site-icon {
  --icon-size: 54px;
  color: var(--green);
  filter: drop-shadow(0 0 18px rgba(183,255,32,0.30));
}
.shop-cta-band h2 {
  margin: 0 0 8px;
  font-size: clamp(1.75rem, 2.8vw, 3rem);
}
.shop-cta-band p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.62;
}
.shop-main .faq-grid details {
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.shop-main .faq-grid details:hover {
  transform: translateY(-4px);
  border-color: rgba(183,255,32,0.28);
  box-shadow: 0 24px 72px rgba(0,0,0,0.30);
}

@keyframes shopHeroSweep {
  0%, 48%, 100% { opacity: 0; transform: translateX(-110%) skewX(-12deg); }
  58% { opacity: 0.72; }
  72% { opacity: 0; transform: translateX(110%) skewX(-12deg); }
}

@media (max-width: 1260px) {
  .shop-hero-premium {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .shop-hero-copy,
  .shop-hero-copy .lead { max-width: 860px; }
  .shop-hero-visual { max-width: 980px; }
  .shop-feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-flow-panel { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .shop-preview-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .shop-preview-card.large { grid-row: auto; }
  .shop-preview-card { min-height: 360px; }
  .shop-cta-band {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .shop-cta-band > div { display: grid; justify-items: center; }
}
@media (max-width: 680px) {
  .shop-hero-premium {
    width: min(100% - 30px, var(--container));
    padding-top: 46px;
    gap: 42px;
  }
  .shop-hero-copy h1 {
    font-size: clamp(2.85rem, 13vw, 4.5rem);
    line-height: 1.07;
  }
  .shop-hero-metrics,
  .shop-feature-row,
  .shop-category-grid { grid-template-columns: 1fr; }
  .shop-hero-visual img {
    aspect-ratio: 16 / 10.5;
    border-radius: 22px;
  }
  .shop-floating-card {
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin-top: 12px;
    width: 100%;
  }
  .shop-preview-card { min-height: 310px; }
  .shop-preview-card div { left: 20px; right: 20px; bottom: 20px; }
  .shop-service-card,
  .shop-category-card { min-height: auto; padding: 24px; }
  .shop-flow-panel { padding: 26px; border-radius: 24px; }
  .shop-flow-steps div { grid-template-columns: 1fr; }
  .shop-flow-steps b { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-hero-visual,
  .shop-hero-visual::after,
  .shop-preview-card img { animation: none !important; transition-duration: 0.001ms !important; }
}

/* UPDATE — Boutique hero : animation identique au visuel de l'accueil */
.shop-hero-visual {
  --shop-rx: 0deg;
  --shop-ry: 0deg;
  --shop-tx: 0px;
  --shop-ty: 0px;
  --shop-img-x: 0px;
  --shop-img-y: 0px;
  transform:
    perspective(1150px)
    translate3d(var(--shop-tx), var(--shop-ty), 0)
    rotateX(var(--shop-rx))
    rotateY(var(--shop-ry)) !important;
  transition: transform 180ms ease-out, filter 240ms ease !important;
  will-change: transform;
}
.shop-hero-visual img {
  transform: translate3d(var(--shop-img-x), var(--shop-img-y), 0) scale(1.012) !important;
  transition: transform 180ms ease-out, filter 240ms ease, border-color 240ms ease !important;
  will-change: transform;
}
.shop-hero-visual:hover {
  filter: drop-shadow(0 38px 86px rgba(0,0,0,0.50)) drop-shadow(0 0 28px rgba(183,255,32,0.14));
}
.shop-hero-visual:hover img {
  transform: translate3d(var(--shop-img-x), var(--shop-img-y), 0) scale(1.035) !important;
  filter: saturate(1.16) contrast(1.08) brightness(1.03) !important;
}
.shop-hero-visual::after {
  animation: fmImageScan 6.8s ease-in-out infinite !important;
}
.shop-hero-visual.is-tilting::before {
  opacity: 0.8 !important;
}
.shop-hero-visual.is-tilting .shop-floating-card {
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .shop-hero-visual,
  .shop-hero-visual img,
  .shop-hero-visual::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
    transform: none !important;
  }
}

/* =========================================================
   UPDATE — effets visuels premium + bandeau d'informations
   ========================================================= */
:root {
  --flash-header-height: 76px;
  --flash-marquee-height: 38px;
}

/* Fond plus propre : l'éclair reste visible, sans grande ligne parasite. */
body::after {
  background:
    radial-gradient(circle at 12% 22%, rgba(183,255,32,0.075), transparent 9%),
    radial-gradient(circle at 72% 16%, rgba(56,223,66,0.065), transparent 10%),
    radial-gradient(circle at 86% 78%, rgba(183,255,32,0.055), transparent 12%),
    radial-gradient(circle at 38% 82%, rgba(56,223,66,0.045), transparent 10%) !important;
  opacity: 0.68 !important;
  filter: blur(0.4px) saturate(1.1) !important;
  animation: fmAmbientClouds 18s ease-in-out infinite alternate !important;
}

body::before {
  background:
    radial-gradient(circle, rgba(183,255,32,0.06) 0 1px, transparent 1.4px),
    linear-gradient(rgba(183,255,32,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183,255,32,0.01) 1px, transparent 1px) !important;
  background-size: 120px 120px, 72px 72px, 72px 72px !important;
  opacity: 0.42 !important;
  animation: fmTinyParticles 28s linear infinite !important;
}

.site-bg {
  background:
    radial-gradient(circle at 50% 28%, rgba(183,255,32,0.18), transparent 26%),
    radial-gradient(circle at 54% 57%, rgba(56,223,66,0.095), transparent 34%),
    url("assets/bolt-watermark.svg") center 98px / min(920px, 78vw) auto no-repeat !important;
  opacity: 0.44 !important;
  filter:
    drop-shadow(0 0 22px rgba(183,255,32,0.24))
    drop-shadow(0 0 86px rgba(56,223,66,0.15)) !important;
  animation: fmBoltPremiumPulse 6.4s ease-in-out infinite !important;
}

.site-bg::before {
  content: "";
  position: absolute;
  inset: -10% !important;
  background:
    radial-gradient(circle at 47% 26%, rgba(255,255,255,0.13), transparent 3.8%),
    radial-gradient(circle at 52% 42%, rgba(183,255,32,0.18), transparent 7%),
    radial-gradient(circle at 49% 64%, rgba(56,223,66,0.14), transparent 6.5%) !important;
  opacity: 0.52 !important;
  mix-blend-mode: screen;
  transform: none !important;
  animation: fmBoltGlowNodes 5.2s ease-in-out infinite !important;
}

.site-bg::after {
  background:
    radial-gradient(circle at 50% 34%, rgba(3,6,4,0.08), rgba(3,6,4,0.58) 58%, rgba(3,6,4,0.92) 100%),
    linear-gradient(90deg, rgba(3,6,4,0.94) 0%, rgba(3,6,4,0.50) 50%, rgba(3,6,4,0.94) 100%) !important;
}

/* Bandeau défilant sous la hotbar. */
.site-marquee {
  --marquee-duration: 52s;
  --marquee-distance: -50%;
  position: sticky;
  top: var(--flash-header-height);
  z-index: 999;
  height: var(--flash-marquee-height);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(183,255,32,0.12);
  background:
    radial-gradient(circle at 20% 50%, rgba(183,255,32,0.08), transparent 30%),
    linear-gradient(180deg, rgba(5,10,6,0.94), rgba(3,7,4,0.80));
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.025);
}

.site-marquee::before,
.site-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: min(150px, 14vw);
  pointer-events: none;
}
.site-marquee::before {
  left: 0;
  background: linear-gradient(90deg, rgba(3,6,4,1), rgba(3,6,4,0));
}
.site-marquee::after {
  right: 0;
  background: linear-gradient(270deg, rgba(3,6,4,1), rgba(3,6,4,0));
}

.marquee-viewport {
  width: 100%;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  transform: translate3d(0, 0, 0);
  animation: fmMarqueeScroll var(--marquee-duration) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.site-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: clamp(26px, 3.5vw, 58px);
  padding-right: clamp(26px, 3.5vw, 58px);
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(245,255,240,0.74);
  font-size: 0.73rem;
  font-weight: 850;
  letter-spacing: 0.105em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.marquee-separator {
  color: rgba(245,255,240,0.28);
}
.marquee-item strong,
.marquee-item a {
  color: var(--green);
  font-weight: 950;
  text-decoration: none;
  text-shadow: 0 0 16px rgba(183,255,32,0.20);
}
.marquee-item a:hover {
  color: #ffffff;
  text-shadow: 0 0 18px rgba(183,255,32,0.42);
}
.marquee-dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: var(--green);
  box-shadow: 0 0 14px rgba(183,255,32,0.58);
}

/* Micro-interactions plus propres sur les zones déjà importantes. */
.btn {
  isolation: isolate;
}
.btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.18), transparent 38%);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.btn:hover::after { opacity: 1; }

.hero-store-art,
.shop-hero-visual,
.store-card,
.news-card,
.shop-service-card,
.shop-category-card,
.shop-preview-card,
.discord-strip,
.shop-cta-band {
  backface-visibility: hidden;
}

.store-card,
.news-card,
.shop-service-card,
.shop-category-card,
.shop-preview-card {
  transition:
    transform 280ms cubic-bezier(.2,.8,.2,1),
    border-color 280ms ease,
    box-shadow 280ms ease,
    background 280ms ease,
    filter 280ms ease !important;
}
.news-card:hover,
.shop-service-card:hover,
.shop-category-card:hover,
.shop-preview-card:hover {
  filter: saturate(1.05);
}

.discord-strip,
.shop-cta-band {
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), border-color 280ms ease, box-shadow 280ms ease !important;
}
.discord-strip:hover,
.shop-cta-band:hover {
  transform: translateY(-5px);
  border-color: rgba(183,255,32,0.30);
  box-shadow: 0 32px 90px rgba(0,0,0,0.38), 0 0 46px rgba(183,255,32,0.07);
}

/* Le menu mobile descend sous le bandeau défilant. */
@media (max-width: 980px) {
  .site-marquee { top: 76px; }
  .nav-links.open {
    top: calc(76px + var(--flash-marquee-height) + 10px) !important;
  }
  .header-actions.open {
    top: calc(76px + var(--flash-marquee-height) + 502px) !important;
  }
}

@media (max-width: 680px) {
  :root { --flash-marquee-height: 34px; }
  .site-marquee { top: 76px; }
  .marquee-item { font-size: 0.66rem; letter-spacing: 0.08em; }
  .site-bg {
    background-size: min(660px, 112vw) auto !important;
    opacity: 0.34 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .site-bg,
  .site-bg::before,
  .marquee-track {
    animation: none !important;
  }
}

@keyframes fmAmbientClouds {
  0% { transform: translate3d(-1.2%, -1.1%, 0) scale(1); opacity: 0.48; }
  50% { opacity: 0.76; }
  100% { transform: translate3d(1.4%, 1.2%, 0) scale(1.045); opacity: 0.60; }
}
@keyframes fmTinyParticles {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 120px 90px, 72px 72px, 72px 72px; }
}
@keyframes fmBoltPremiumPulse {
  0%, 100% {
    opacity: 0.34;
    transform: scale(1);
    filter: drop-shadow(0 0 18px rgba(183,255,32,0.18)) drop-shadow(0 0 70px rgba(56,223,66,0.10));
  }
  45% {
    opacity: 0.48;
    transform: scale(1.012);
    filter: drop-shadow(0 0 30px rgba(183,255,32,0.30)) drop-shadow(0 0 110px rgba(56,223,66,0.18));
  }
  70% { opacity: 0.39; }
}
@keyframes fmBoltGlowNodes {
  0%, 100% { opacity: 0.32; transform: translate3d(-0.5%, -0.7%, 0); }
  35% { opacity: 0.62; transform: translate3d(0.6%, 0.2%, 0); }
  66% { opacity: 0.44; transform: translate3d(-0.2%, 0.8%, 0); }
}
@keyframes fmMarqueeScroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--marquee-distance), 0, 0); }
}

/* =========================================================
   UPDATE — correctif fluidité global
   Objectif : garder la DA Flashmood, mais retirer les animations coûteuses
   qui faisaient perdre en FPS sur certaines machines.
   ========================================================= */

/* Fond : plus léger, pas de grandes couches animées en permanence. */
body::before,
body::after {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

body::before {
  opacity: 0.22 !important;
  background:
    radial-gradient(circle, rgba(183,255,32,0.045) 0 1px, transparent 1.4px) !important;
  background-size: 128px 128px !important;
}

body::after {
  opacity: 0.36 !important;
  filter: none !important;
  background:
    radial-gradient(circle at 16% 20%, rgba(183,255,32,0.07), transparent 13%),
    radial-gradient(circle at 82% 18%, rgba(56,223,66,0.055), transparent 16%),
    radial-gradient(circle at 76% 82%, rgba(183,255,32,0.04), transparent 18%) !important;
}

.site-bg {
  opacity: 0.42 !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(183,255,32,0.13), transparent 27%),
    url("assets/bolt-watermark.svg") center 96px / min(900px, 76vw) auto no-repeat !important;
  filter: drop-shadow(0 0 18px rgba(183,255,32,0.18)) drop-shadow(0 0 66px rgba(56,223,66,0.10)) !important;
  animation: fmBoltSmooth 8.5s ease-in-out infinite !important;
  will-change: opacity, transform;
  transform: translateZ(0);
}

.site-bg::before {
  opacity: 0.32 !important;
  background:
    radial-gradient(circle at 49% 31%, rgba(183,255,32,0.12), transparent 7%),
    radial-gradient(circle at 52% 53%, rgba(56,223,66,0.10), transparent 9%) !important;
  animation: none !important;
  transform: none !important;
}

.site-bg::after {
  background:
    radial-gradient(circle at 50% 32%, rgba(3,6,4,0.08), rgba(3,6,4,0.64) 58%, rgba(3,6,4,0.94) 100%),
    linear-gradient(90deg, rgba(3,6,4,0.95) 0%, rgba(3,6,4,0.55) 50%, rgba(3,6,4,0.95) 100%) !important;
}

@keyframes fmBoltSmooth {
  0%, 100% { opacity: 0.38; transform: translate3d(0, 0, 0) scale(1); }
  50% { opacity: 0.48; transform: translate3d(0, -6px, 0) scale(1.006); }
}

/* Marquee : animation 100% transform, sans calcul JS ni blur lourd. */
.site-marquee {
  --marquee-duration: 56s !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: linear-gradient(180deg, rgba(5,10,6,0.97), rgba(3,7,4,0.91)) !important;
  contain: layout paint style;
  transform: translateZ(0);
}

.marquee-viewport {
  contain: content;
}

.marquee-track {
  animation: fmMarqueePerf var(--marquee-duration) linear infinite !important;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.marquee-group {
  flex: 0 0 auto;
}

@keyframes fmMarqueePerf {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* Les scans permanents sur les images étaient jolis mais coûteux :
   ils ne se déclenchent maintenant qu'au hover. */
.hero-store-art::after,
.shop-hero-visual::after,
.refined-home .hero-store-art::after {
  animation: none !important;
  opacity: 0 !important;
  will-change: auto !important;
}

.hero-store-art:hover::after,
.shop-hero-visual:hover::after,
.refined-home .hero-store-art:hover::after {
  animation: fmImageScanLite 1300ms ease-out 1 !important;
}

@keyframes fmImageScanLite {
  0% { opacity: 0; transform: translateX(-80%) rotate(8deg); }
  35% { opacity: 0.42; }
  100% { opacity: 0; transform: translateX(80%) rotate(8deg); }
}

/* Tilt/parallax : garde l'effet incroyable, mais évite de réserver trop de GPU
   quand la souris n'est pas dessus. */
.hero-store-art,
.shop-hero-visual,
.refined-home .hero-store-art {
  will-change: auto !important;
  contain: paint;
}

.hero-store-art.is-tilting,
.shop-hero-visual.is-tilting,
.refined-home .hero-store-art.is-tilting {
  will-change: transform !important;
}

.hero-store-art img,
.shop-hero-visual img,
.refined-home .hero-store-art img {
  will-change: auto !important;
}

.hero-store-art.is-tilting img,
.shop-hero-visual.is-tilting img,
.refined-home .hero-store-art.is-tilting img {
  will-change: transform !important;
}

/* Animations décoratives des stats : plus de reflet permanent. */
.server-main-stat::after,
.server-meter-row em {
  animation-duration: 850ms !important;
}

.server-main-stat::after {
  animation: none !important;
  opacity: 0 !important;
}

/* Survols moins lourds : moins de gros drop-shadows cumulés. */
.news-card:hover,
.shop-service-card:hover,
.shop-category-card:hover,
.shop-preview-card:hover,
.store-card:hover,
.content-card:hover,
.review-item:hover,
.rating-summary:hover {
  box-shadow: 0 22px 62px rgba(0,0,0,0.32) !important;
}

.discord-strip:hover,
.shop-cta-band:hover {
  box-shadow: 0 24px 70px rgba(0,0,0,0.34), 0 0 34px rgba(183,255,32,0.06) !important;
}

/* Boutons : spotlight léger sans forcer le repaint permanent. */
.btn::after {
  transition-duration: 160ms !important;
}

/* Mobile/tablette : zéro tilt et beaucoup moins d'effets pour une navigation fluide. */
@media (hover: none), (pointer: coarse), (max-width: 980px) {
  .site-bg {
    animation: none !important;
    opacity: 0.30 !important;
    filter: drop-shadow(0 0 12px rgba(183,255,32,0.12)) !important;
  }

  .hero-store-art,
  .shop-hero-visual,
  .refined-home .hero-store-art,
  .hero-store-art img,
  .shop-hero-visual img,
  .refined-home .hero-store-art img {
    transform: none !important;
    transition-duration: 180ms !important;
    will-change: auto !important;
  }

  .hero-store-art::after,
  .shop-hero-visual::after,
  .refined-home .hero-store-art::after {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-bg,
  .marquee-track,
  .hero-store-art::after,
  .shop-hero-visual::after,
  .refined-home .hero-store-art::after {
    animation: none !important;
  }
}

/* =========================================================
   HOTFIX — Boutique hero bubbles
   Les optimisations de fluidité avaient ajouté `contain: paint` sur le visuel
   boutique, ce qui coupait les cartes flottantes. On garde l'effet fluide,
   mais on autorise à nouveau les bulles à dépasser proprement.
   ========================================================= */
.shop-hero-premium,
.shop-hero-visual {
  overflow: visible !important;
}

.shop-hero-visual {
  contain: layout style !important;
  z-index: 2;
}

.shop-hero-visual img {
  position: relative;
  z-index: 1;
}

.shop-floating-card {
  z-index: 5;
  pointer-events: none;
  transform: translateZ(0);
}

.shop-floating-card.card-one {
  bottom: clamp(-14px, -1.2vw, -8px) !important;
}

.shop-floating-card.card-two {
  top: clamp(-14px, -1.2vw, -8px) !important;
}

.shop-hero-visual.is-tilting .shop-floating-card {
  transform: translate3d(0, -4px, 0);
}

@media (max-width: 680px) {
  .shop-hero-visual {
    contain: none !important;
  }
  .shop-floating-card {
    pointer-events: auto;
    transform: none !important;
  }
}

/* STAFF PAGE — refonte premium Flashmood */
.staff-main {
  padding-bottom: 112px;
}

.staff-hero,
.staff-poles-section,
.staff-roster-section,
.staff-private-section {
  width: min(var(--container), calc(100% - 56px));
  margin-inline: auto;
}

.staff-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(420px, 0.82fr);
  gap: clamp(46px, 7vw, 104px);
  align-items: center;
  padding: clamp(76px, 8vw, 122px) 0 clamp(48px, 7vw, 92px);
}

.staff-hero::before {
  content: "";
  position: absolute;
  inset: 8% -8% auto auto;
  width: min(540px, 44vw);
  height: min(540px, 44vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183,255,32,0.11), transparent 62%);
  filter: blur(18px);
  pointer-events: none;
  opacity: 0.8;
}

.staff-hero-copy {
  position: relative;
  z-index: 2;
}

.staff-hero-copy h1 {
  max-width: 860px;
  margin: 26px 0 24px;
  font-size: clamp(3.25rem, 6.4vw, 6.85rem);
  line-height: 0.98;
  text-wrap: balance;
}

.staff-hero-copy p {
  max-width: 690px;
  color: var(--muted);
  font-size: clamp(1rem, 1.16vw, 1.14rem);
  font-weight: 650;
  line-height: 1.78;
}

.staff-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

.staff-command-panel {
  position: relative;
  z-index: 2;
  min-height: 440px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(183,255,32,0.24);
  border-radius: 32px;
  background:
    radial-gradient(circle at var(--mx, 72%) var(--my, 18%), rgba(183,255,32,0.16), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    rgba(7, 14, 9, 0.82);
  box-shadow: 0 32px 92px rgba(0,0,0,0.38), 0 0 74px rgba(183,255,32,0.08);
  overflow: hidden;
  backdrop-filter: blur(16px);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), border-color 240ms ease, box-shadow 240ms ease;
}

.staff-command-panel:hover {
  transform: translateY(-4px);
  border-color: rgba(183,255,32,0.42);
  box-shadow: 0 38px 104px rgba(0,0,0,0.42), 0 0 84px rgba(183,255,32,0.12);
}

.staff-command-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(183,255,32,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183,255,32,0.026) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 0%, black 0%, transparent 78%);
  pointer-events: none;
  opacity: 0.5;
}

.command-topline,
.command-title,
.command-ranks,
.command-footer {
  position: relative;
  z-index: 2;
}

.command-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: var(--muted-2);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.command-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--green);
}

.command-status i {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: var(--green);
  box-shadow: 0 0 18px rgba(183,255,32,0.9);
}

.command-title {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  margin: 34px 0 30px;
}

.command-title > .site-icon {
  --icon-size: 42px;
  color: var(--green);
  filter: drop-shadow(0 0 16px rgba(183,255,32,0.28));
}

.command-title strong {
  display: block;
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.command-title small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 750;
}

.command-ranks {
  display: grid;
  gap: 10px;
}

.command-ranks span {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(183,255,32,0.14);
  border-radius: 14px;
  color: rgba(245,255,240,0.88);
  background: rgba(255,255,255,0.035);
  font-weight: 900;
  letter-spacing: -0.025em;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.command-ranks span:hover {
  transform: translateX(5px);
  border-color: rgba(183,255,32,0.32);
  background: rgba(183,255,32,0.07);
}

.command-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.command-footer div {
  min-height: 82px;
  padding: 17px;
  border: 1px solid rgba(183,255,32,0.14);
  border-radius: 18px;
  background: rgba(0,0,0,0.20);
}

.command-footer strong {
  display: block;
  color: var(--green);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.05em;
}

.command-footer small {
  display: block;
  margin-top: 8px;
  color: var(--muted-2);
  font-weight: 850;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.staff-poles-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.staff-pole-card,
.staff-member-card,
.staff-private-panel {
  position: relative;
  border: 1px solid rgba(183,255,32,0.16);
  background:
    radial-gradient(circle at var(--mx, 80%) var(--my, 20%), rgba(183,255,32,0.075), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.016)),
    rgba(8, 15, 10, 0.76);
  box-shadow: 0 22px 70px rgba(0,0,0,0.26);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), border-color 220ms ease, box-shadow 220ms ease;
}

.staff-pole-card:hover,
.staff-member-card:hover,
.staff-private-panel:hover {
  transform: translateY(-4px);
  border-color: rgba(183,255,32,0.34);
  box-shadow: 0 28px 78px rgba(0,0,0,0.34), 0 0 42px rgba(183,255,32,0.055);
}

.staff-pole-card {
  min-height: 238px;
  padding: 28px;
  border-radius: 24px;
}

.staff-line-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 24px;
  color: var(--green);
}

.staff-line-icon .site-icon {
  --icon-size: 32px;
  --icon-stroke: 1.75;
  filter: drop-shadow(0 0 12px rgba(183,255,32,0.22));
}

.staff-pole-card h3 {
  margin: 0 0 12px;
  font-size: 1.22rem;
}

.staff-pole-card p {
  color: var(--muted);
  line-height: 1.68;
  font-weight: 650;
}

.staff-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -8px 0 28px;
}

.staff-filter-bar button {
  min-height: 42px;
  padding: 0 17px;
  color: rgba(245,255,240,0.76);
  border: 1px solid rgba(183,255,32,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.028);
  font-weight: 950;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 170ms ease, color 170ms ease, border-color 170ms ease, background 170ms ease;
}

.staff-filter-bar button:hover,
.staff-filter-bar button.active {
  transform: translateY(-2px);
  color: #071005;
  border-color: rgba(183,255,32,0.55);
  background: linear-gradient(135deg, var(--green), var(--green-2));
  box-shadow: 0 14px 38px rgba(88,255,32,0.16);
}

.staff-roster-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.staff-member-card {
  display: grid;
  align-content: start;
  min-height: 362px;
  padding: 26px;
  border-radius: 26px;
}

.staff-member-card.is-hidden {
  display: none;
}

.staff-member-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--member-color, var(--green)), transparent);
  opacity: 0.78;
}

.staff-member-card.founder { --member-color: #ffd33d; }
.staff-member-card.dev { --member-color: #58a6ff; }
.staff-member-card.manager { --member-color: #b7ff20; }
.staff-member-card.admin { --member-color: #ff8a3d; }
.staff-member-card.moderator { --member-color: #9f7cff; }
.staff-member-card.helper { --member-color: #38df42; }
.staff-member-card.animator { --member-color: #ff4fd8; }

.member-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.member-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: #071005;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--member-color, var(--green)), rgba(255,255,255,0.82));
  font-weight: 1000;
  letter-spacing: -0.05em;
  box-shadow: 0 14px 32px rgba(0,0,0,0.20);
}

.member-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(183,255,32,0.16);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(0,0,0,0.20);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.member-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: rgba(245,255,240,0.42);
}

.member-status.online {
  color: var(--green);
}

.member-status.online::before {
  background: var(--green);
  box-shadow: 0 0 12px rgba(183,255,32,0.85);
}

.staff-member-card h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1;
}

.member-grade {
  display: inline-flex;
  width: fit-content;
  margin: 10px 0 20px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--member-color, var(--green)) 48%, transparent);
  border-radius: 999px;
  color: var(--member-color, var(--green));
  background: color-mix(in srgb, var(--member-color, var(--green)) 10%, transparent);
  font-size: 0.76rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.member-meta {
  display: grid;
  grid-template-columns: 106px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.member-meta span {
  color: var(--muted-2);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.member-meta strong {
  color: rgba(245,255,240,0.9);
  font-weight: 900;
}

.staff-member-card p {
  margin-top: 18px;
  color: var(--muted);
  line-height: 1.68;
  font-weight: 650;
}

.staff-private-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.56fr);
  gap: 34px;
  align-items: center;
  padding: clamp(30px, 4vw, 48px);
  border-radius: 30px;
}

.staff-private-panel h2 {
  margin: 16px 0 18px;
  font-size: clamp(2rem, 3.6vw, 4rem);
}

.staff-private-panel p {
  max-width: 760px;
  color: var(--muted);
  line-height: 1.76;
  font-weight: 650;
}

.private-list {
  display: grid;
  gap: 12px;
}

.private-list span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(183,255,32,0.13);
  border-radius: 16px;
  color: rgba(245,255,240,0.84);
  background: rgba(0,0,0,0.18);
  font-weight: 850;
}

.private-list .site-icon {
  --icon-size: 20px;
  color: var(--green);
}

@media (max-width: 1120px) {
  .staff-hero { grid-template-columns: 1fr; }
  .staff-command-panel { min-height: auto; }
  .staff-poles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-roster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 740px) {
  .staff-hero,
  .staff-poles-section,
  .staff-roster-section,
  .staff-private-section {
    width: min(100% - 34px, var(--container));
  }

  .staff-hero { padding-top: 54px; gap: 34px; }
  .staff-hero-copy h1 { font-size: clamp(2.6rem, 16vw, 4rem); }
  .staff-hero-actions .btn { width: 100%; }
  .command-footer,
  .staff-poles-grid,
  .staff-roster-grid,
  .staff-private-panel { grid-template-columns: 1fr; }
  .staff-command-panel,
  .staff-pole-card,
  .staff-member-card,
  .staff-private-panel { border-radius: 22px; }
  .member-meta { grid-template-columns: 1fr; gap: 4px; }
  .member-status { font-size: 0.66rem; }
  .staff-filter-bar { gap: 8px; }
  .staff-filter-bar button { flex: 1 1 auto; }
}

/* =========================================================
   UPDATE — Staff page v2 : visuel hero + roster rempli depuis Discord
   ========================================================= */
.staff-page-v2 .staff-hero {
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.98fr);
  gap: clamp(48px, 7vw, 118px);
  padding-top: clamp(82px, 8vw, 132px);
  padding-bottom: clamp(56px, 6vw, 96px);
}

.staff-page-v2 .staff-hero-copy h1 {
  max-width: 850px;
  font-size: clamp(3.35rem, 6.1vw, 6.75rem);
  line-height: 0.98;
}

.staff-page-v2 .staff-hero-copy p {
  max-width: 690px;
}

.staff-hero-visual {
  justify-self: stretch;
  overflow: visible !important;
  contain: initial !important;
  isolation: isolate;
  min-height: clamp(360px, 34vw, 560px);
  max-width: 920px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.staff-hero-visual::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 34px;
  border: 1px solid rgba(183,255,32,0.24);
  background:
    radial-gradient(circle at var(--mx, 68%) var(--my, 18%), rgba(183,255,32,0.18), transparent 38%),
    linear-gradient(135deg, rgba(183,255,32,0.08), transparent 32%, rgba(56,223,66,0.05));
  box-shadow: 0 38px 100px rgba(0,0,0,0.45), 0 0 70px rgba(183,255,32,0.08);
  opacity: 0.88;
  z-index: -1;
  transition: opacity 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.staff-hero-visual img {
  display: block;
  width: 100%;
  min-height: clamp(360px, 34vw, 560px);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid rgba(183,255,32,0.28);
  border-radius: 30px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 28px 80px rgba(0,0,0,0.36);
  filter: saturate(1.02) contrast(1.08) brightness(0.94);
}

.staff-hero-visual::after {
  border-radius: 30px;
  inset: 0;
  opacity: 0.42;
}

.staff-hero-visual:hover::before,
.staff-hero-visual.is-tilting::before {
  opacity: 1;
  border-color: rgba(183,255,32,0.42);
  box-shadow: 0 42px 112px rgba(0,0,0,0.52), 0 0 82px rgba(183,255,32,0.14);
}

.staff-hero-visual .shop-floating-card {
  z-index: 4;
  width: min(260px, 48%);
  white-space: nowrap;
  backdrop-filter: blur(18px);
}

.staff-hero-visual .staff-float-one {
  left: -24px;
  bottom: 28px;
}

.staff-hero-visual .staff-float-two {
  right: -22px;
  top: 28px;
}

.staff-page-v2 .staff-poles-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.staff-page-v2 .staff-pole-card {
  min-height: 220px;
}

.staff-roster-grid-v2 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.staff-page-v2 .staff-member-card {
  min-height: 425px;
  padding: 28px;
  border-color: rgba(183,255,32,0.15);
}

.staff-page-v2 .staff-member-card h3 {
  margin-top: 18px;
  margin-bottom: 6px;
  word-break: break-word;
}

.staff-page-v2 .member-grade {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 20px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--member-color, var(--green)) 38%, transparent);
  border-radius: 999px;
  color: var(--member-color, var(--green));
  background: color-mix(in srgb, var(--member-color, var(--green)) 10%, transparent);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.member-role-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 18px;
}

.member-role-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  color: rgba(245,255,240,0.78);
  background: rgba(255,255,255,0.035);
  font-size: 0.72rem;
  font-weight: 850;
}

.staff-page-v2 .member-meta {
  min-height: 39px;
  align-items: center;
}

.staff-page-v2 .member-meta strong {
  overflow-wrap: anywhere;
}

.staff-page-v2 .member-status {
  background: rgba(183,255,32,0.10);
  border-color: rgba(183,255,32,0.22);
  color: rgba(226,255,176,0.94);
}

.staff-page-v2 .staff-filter-bar {
  position: sticky;
  top: calc(var(--flash-header-height, 76px) + var(--flash-marquee-height, 38px) + 12px);
  z-index: 20;
  padding: 10px;
  margin-bottom: 30px;
  border: 1px solid rgba(183,255,32,0.12);
  border-radius: 24px;
  background: rgba(4, 9, 5, 0.74);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.26);
}

@media (max-width: 1260px) {
  .staff-page-v2 .staff-hero {
    grid-template-columns: 1fr;
  }
  .staff-hero-visual {
    justify-self: start;
    width: min(100%, 980px);
  }
  .staff-roster-grid-v2,
  .staff-page-v2 .staff-poles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 740px) {
  .staff-page-v2 .staff-hero-copy h1 {
    font-size: clamp(2.65rem, 15vw, 4.35rem);
    line-height: 1.03;
  }
  .staff-hero-visual {
    min-height: auto;
  }
  .staff-hero-visual img {
    min-height: 310px;
    border-radius: 22px;
  }
  .staff-hero-visual::before,
  .staff-hero-visual::after {
    border-radius: 24px;
  }
  .staff-hero-visual .shop-floating-card {
    width: 100%;
    white-space: normal;
  }
  .staff-roster-grid-v2,
  .staff-page-v2 .staff-poles-grid {
    grid-template-columns: 1fr;
  }
  .staff-page-v2 .staff-member-card {
    min-height: auto;
  }
  .staff-page-v2 .staff-filter-bar {
    position: relative;
    top: auto;
  }
}


/* =========================================================
   UPDATE — Staff page polish : hero image + cleaner roster cards
   ========================================================= */
.staff-page-v2 .staff-main {
  gap: 0;
}

.staff-page-v2 .staff-hero {
  align-items: center;
}

.staff-page-v2 .staff-hero-copy {
  max-width: 740px;
}

.staff-page-v2 .staff-hero-copy p {
  max-width: 640px;
}

.staff-page-v2 .staff-roster-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.staff-roster-grid-v2 {
  align-items: stretch;
}

.staff-page-v2 .staff-member-card {
  min-height: 338px;
  padding: 22px;
  border-radius: 24px;
}

.staff-page-v2 .staff-member-card h3 {
  margin-top: 14px;
  margin-bottom: 6px;
  font-size: 1.2rem;
}

.staff-page-v2 .staff-member-card p {
  font-size: 0.95rem;
  line-height: 1.62;
}

.staff-page-v2 .member-grade {
  margin-bottom: 16px;
}

.staff-page-v2 .member-meta {
  min-height: 34px;
  margin-bottom: 4px;
}

.staff-page-v2 .member-top {
  margin-bottom: 4px;
}

.staff-page-v2 .member-avatar {
  width: 50px;
  height: 50px;
  font-size: 1rem;
}

.staff-page-v2 .staff-filter-bar {
  margin-bottom: 24px;
}

.staff-page-v2 .staff-hero-visual {
  max-width: 980px;
}

.staff-page-v2 .staff-hero-visual img {
  aspect-ratio: 16 / 10;
}

.staff-page-v2 .staff-hero-visual .staff-float-one {
  left: -24px;
  bottom: 26px;
}

.staff-page-v2 .staff-hero-visual .staff-float-two {
  right: -24px;
  top: 26px;
}

@media (max-width: 1420px) {
  .staff-page-v2 .staff-roster-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .staff-page-v2 .staff-roster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 720px) {
  .staff-page-v2 .staff-roster-grid {
    grid-template-columns: 1fr;
  }

  .staff-page-v2 .staff-member-card {
    min-height: auto;
    padding: 20px;
  }
}


/* =========================================================
   UPDATE — Staff hero visual final + roster spacing polish
   ========================================================= */
.staff-page-v2 .staff-hero {
  grid-template-columns: minmax(0, .95fr) minmax(460px, 1.02fr);
  gap: clamp(56px, 7vw, 120px);
}

.staff-page-v2 .staff-hero-visual {
  position: relative;
  justify-self: stretch;
  max-width: 980px;
  min-height: clamp(360px, 34vw, 560px);
  overflow: visible !important;
  contain: initial !important;
  isolation: isolate;
}

.staff-page-v2 .staff-hero-visual::before {
  inset: -18px;
  border-radius: 34px;
  border: 1px solid rgba(183,255,32,0.26);
  background:
    radial-gradient(circle at var(--mx, 68%) var(--my, 18%), rgba(183,255,32,0.18), transparent 36%),
    linear-gradient(135deg, rgba(183,255,32,0.08), transparent 34%, rgba(56,223,66,0.05));
  box-shadow: 0 38px 110px rgba(0,0,0,0.46), 0 0 74px rgba(183,255,32,0.10);
}

.staff-page-v2 .staff-hero-visual img {
  width: 100%;
  min-height: clamp(360px, 34vw, 560px);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 30px;
  border: 1px solid rgba(183,255,32,0.26);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 28px 80px rgba(0,0,0,0.36);
  filter: saturate(1.03) contrast(1.06) brightness(0.96);
}

.staff-page-v2 .staff-hero-visual::after {
  inset: 0;
  border-radius: 30px;
  opacity: 0.42;
}

.staff-page-v2 .staff-hero-visual .shop-floating-card {
  width: min(230px, 46%);
  min-height: 78px;
  white-space: normal;
  z-index: 6;
}

.staff-page-v2 .staff-hero-visual .staff-float-one {
  left: clamp(18px, 3vw, 36px);
  bottom: clamp(-14px, -1.2vw, -8px);
}

.staff-page-v2 .staff-hero-visual .staff-float-two {
  right: clamp(18px, 3vw, 36px);
  top: clamp(-14px, -1.2vw, -8px);
}

.staff-page-v2 .staff-roster-grid,
.staff-page-v2 .staff-roster-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.staff-page-v2 .staff-member-card {
  min-height: 0;
  padding: 20px;
  border-radius: 22px;
}

.staff-page-v2 .member-top {
  margin-bottom: 8px;
}

.staff-page-v2 .member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  font-size: .98rem;
}

.staff-page-v2 .staff-member-card h3 {
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 1.12rem;
  line-height: 1.15;
}

.staff-page-v2 .member-grade {
  margin: 8px 0 14px;
  padding: 7px 10px;
  font-size: .7rem;
}

.staff-page-v2 .member-meta {
  grid-template-columns: 88px 1fr;
  gap: 10px;
  min-height: 32px;
  padding: 10px 0;
}

.staff-page-v2 .member-meta span {
  font-size: .72rem;
}

.staff-page-v2 .staff-member-card p {
  margin-top: 14px;
  font-size: .92rem;
  line-height: 1.56;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 1260px) {
  .staff-page-v2 .staff-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 740px) {
  .staff-page-v2 .staff-hero-visual .shop-floating-card {
    width: min(220px, 74%);
  }

  .staff-page-v2 .staff-member-card {
    padding: 18px;
  }

  .staff-page-v2 .member-meta {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}


/* =========================================================
   UPDATE — Staff layout horizontal hero + roster Discord final
   ========================================================= */
.staff-page-v2 .staff-hero {
  grid-template-columns: minmax(0, .88fr) minmax(560px, 1.12fr);
  gap: clamp(48px, 6vw, 112px);
  align-items: center;
}

.staff-page-v2 .staff-hero-visual {
  max-width: 1080px;
  min-height: clamp(290px, 27vw, 430px);
  overflow: visible !important;
  contain: initial !important;
}

.staff-page-v2 .staff-hero-visual::before {
  inset: -16px;
  border-radius: 32px;
}

.staff-page-v2 .staff-hero-visual img {
  min-height: clamp(290px, 27vw, 430px);
  aspect-ratio: 16 / 8.2;
  object-fit: cover;
  object-position: center center;
  border-radius: 28px;
}

.staff-page-v2 .staff-hero-visual::after {
  border-radius: 28px;
}

.staff-page-v2 .staff-hero-visual .shop-floating-card {
  width: min(245px, 42%);
  min-height: 76px;
  white-space: normal;
}

.staff-page-v2 .staff-hero-visual .staff-float-one {
  left: clamp(18px, 2.4vw, 34px);
  bottom: -15px;
}

.staff-page-v2 .staff-hero-visual .staff-float-two {
  right: clamp(18px, 2.4vw, 34px);
  top: -15px;
}

.staff-page-v2 .staff-roster-grid,
.staff-page-v2 .staff-roster-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 22px;
  align-items: stretch;
}

.staff-page-v2 .staff-member-card {
  min-height: 0;
  padding: 19px;
  border-radius: 22px;
}

.staff-page-v2 .member-top {
  margin-bottom: 8px;
}

.staff-page-v2 .member-avatar {
  width: 45px;
  height: 45px;
  border-radius: 15px;
  font-size: .9rem;
}

.staff-page-v2 .staff-member-card h3 {
  margin-top: 11px;
  margin-bottom: 6px;
  font-size: 1.06rem;
  line-height: 1.15;
}

.staff-page-v2 .member-status {
  min-height: 27px;
  padding: 0 9px;
  font-size: .66rem;
}

.staff-page-v2 .member-grade {
  margin: 8px 0 12px;
  padding: 7px 10px;
  font-size: .68rem;
}

.staff-page-v2 .member-role-tags {
  margin: 0 0 13px;
  gap: 7px;
}

.staff-page-v2 .member-role-tags span {
  min-height: 27px;
  padding: 0 9px;
  font-size: .68rem;
}

.staff-page-v2 .member-meta {
  grid-template-columns: 80px 1fr;
  gap: 9px;
  min-height: 30px;
  padding: 9px 0;
}

.staff-page-v2 .member-meta span {
  font-size: .69rem;
}

.staff-page-v2 .member-meta strong {
  font-size: .86rem;
}

.staff-page-v2 .staff-member-card p {
  margin-top: 12px;
  font-size: .9rem;
  line-height: 1.52;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 1280px) {
  .staff-page-v2 .staff-hero {
    grid-template-columns: 1fr;
  }

  .staff-page-v2 .staff-hero-visual {
    max-width: 980px;
  }
}

@media (max-width: 740px) {
  .staff-page-v2 .staff-hero-visual img {
    aspect-ratio: 16 / 10;
    min-height: 280px;
  }

  .staff-page-v2 .staff-hero-visual .shop-floating-card {
    width: min(220px, 74%);
  }

  .staff-page-v2 .member-meta {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* UPDATE — Staff title gradient polish */
.staff-page-v2 .staff-hero-copy h1 .gradient-text {
  display: inline;
  background: linear-gradient(90deg, var(--green), var(--green-2), var(--yellow));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 34px rgba(183,255,32,0.12);
}


/* PATCHNOTES — refonte premium */
.patch-main {
  padding-bottom: 118px;
}
.patch-hero-premium {
  width: min(var(--container), calc(100% - 56px));
  min-height: calc(100svh - 76px);
  margin-inline: auto;
  padding: clamp(76px, 7vw, 118px) 0 clamp(58px, 6vw, 92px);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(430px, 1.08fr);
  align-items: center;
  gap: clamp(56px, 7vw, 104px);
}
.patch-hero-copy {
  max-width: 760px;
}
.patch-hero-copy h1 {
  margin: 28px 0 24px;
  max-width: 860px;
  font-size: clamp(3.55rem, 6.3vw, 7.2rem);
  line-height: 1.02;
  letter-spacing: -0.07em;
  text-wrap: balance;
}
.patch-hero-copy h1 .gradient-text {
  display: inline;
  color: transparent;
  background: linear-gradient(90deg, #f1ff30 0%, var(--green) 48%, var(--green-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 48px rgba(183,255,32,0.18);
}
.patch-hero-copy .lead {
  max-width: 700px;
  color: rgba(245,255,240,0.75);
  font-size: clamp(1rem, 1.16vw, 1.17rem);
  line-height: 1.82;
  text-wrap: pretty;
}
.patch-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.patch-hero-metrics div {
  position: relative;
  padding: 18px 18px 17px;
  border: 1px solid rgba(183,255,32,0.15);
  border-radius: 18px;
  background: rgba(255,255,255,0.028);
  overflow: hidden;
}
.patch-hero-metrics div::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(183,255,32,0.12), transparent 42%);
  opacity: 0;
  transition: opacity 240ms ease;
}
.patch-hero-metrics div:hover::before { opacity: 1; }
.patch-hero-metrics strong {
  position: relative;
  display: block;
  color: var(--green);
  font-size: 1.12rem;
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.patch-hero-metrics span {
  position: relative;
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 780;
  line-height: 1.45;
}
.patch-hero-visual {
  --patch-rx: 0deg;
  --patch-ry: 0deg;
  --patch-tx: 0px;
  --patch-ty: 0px;
  --patch-img-x: 0px;
  --patch-img-y: 0px;
  position: relative;
  justify-self: stretch;
  transform: perspective(1200px) translate3d(var(--patch-tx), var(--patch-ty), 0) rotateX(var(--patch-rx)) rotateY(var(--patch-ry));
  transition: transform 180ms ease-out, filter 250ms ease;
  will-change: transform;
  isolation: isolate;
}
.patch-hero-visual::before {
  content: "";
  position: absolute;
  inset: -28px;
  z-index: -1;
  border-radius: 36px;
  background:
    radial-gradient(circle at var(--mx, 72%) var(--my, 14%), rgba(183,255,32,0.26), transparent 30%),
    radial-gradient(circle at 12% 90%, rgba(56,223,66,0.12), transparent 34%);
  filter: blur(28px);
  opacity: 0.50;
  transition: opacity 260ms ease;
}
.patch-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 36%, rgba(255,255,255,0.16) 48%, rgba(183,255,32,0.10) 56%, transparent 70%);
  transform: translateX(-110%) skewX(-12deg);
  opacity: 0;
  animation: shopHeroSweep 6.4s ease-in-out infinite;
}
.patch-hero-visual img {
  width: 100%;
  aspect-ratio: 16 / 8.2;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(183,255,32,0.18);
  border-radius: 28px;
  box-shadow: 0 36px 100px rgba(0,0,0,0.52), 0 0 54px rgba(183,255,32,0.08);
  filter: saturate(1.08) contrast(1.04);
  transition: transform 240ms ease-out, filter 260ms ease, border-color 260ms ease;
}
.patch-hero-visual:hover::before { opacity: 0.68; }
.patch-hero-visual:hover img {
  border-color: rgba(183,255,32,0.32);
  filter: saturate(1.14) contrast(1.08) brightness(1.02);
}
.patch-hero-visual .shop-floating-card {
  z-index: 2;
}
.patch-hero-visual .card-one {
  left: clamp(18px, 3vw, 38px);
  bottom: -18px;
}
.patch-hero-visual .card-two {
  right: clamp(18px, 3vw, 38px);
  top: -18px;
}
.patch-feature-grid,
.patch-update-grid,
.patch-changelog-grid {
  display: grid;
  gap: 22px;
}
.patch-feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.patch-update-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.patch-changelog-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.patch-feature-card,
.patch-update-card,
.patch-changelog-card,
.patch-cta-band {
  position: relative;
  border: 1px solid rgba(183,255,32,0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.044), rgba(255,255,255,0.016)),
    rgba(8,15,9,0.72);
  box-shadow: 0 24px 72px rgba(0,0,0,0.30);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.patch-feature-card::before,
.patch-update-card::before,
.patch-changelog-card::before,
.patch-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 0%), rgba(183,255,32,0.16), transparent 36%);
  transition: opacity 260ms ease;
}
.patch-feature-card:hover,
.patch-update-card:hover,
.patch-changelog-card:hover,
.patch-cta-band:hover {
  transform: translateY(-6px);
  border-color: rgba(183,255,32,0.34);
  box-shadow: 0 34px 96px rgba(0,0,0,0.38), 0 0 48px rgba(183,255,32,0.055);
}
.patch-feature-card:hover::before,
.patch-update-card:hover::before,
.patch-changelog-card:hover::before,
.patch-cta-band:hover::before { opacity: 1; }
.patch-feature-card,
.patch-changelog-card {
  min-height: 220px;
  padding: 30px;
  border-radius: 24px;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease, box-shadow 260ms ease;
}
.patch-update-card {
  min-height: 360px;
  padding: 32px 30px 30px;
  border-radius: 26px;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease, box-shadow 260ms ease;
}
.patch-feature-card h3,
.patch-update-card h3,
.patch-changelog-card h3 {
  margin: 18px 0 12px;
  font-size: clamp(1.2rem, 1.7vw, 1.62rem);
  line-height: 1.08;
  text-wrap: balance;
}
.patch-feature-card p,
.patch-update-card p,
.patch-changelog-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.68;
}
.patch-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.patch-version-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(183,255,32,0.24);
  background: rgba(183,255,32,0.10);
  color: var(--green);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.patch-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(245,255,240,0.68);
  font-size: 0.78rem;
  font-weight: 780;
  letter-spacing: 0.02em;
}
.patch-date .site-icon {
  --icon-size: 16px;
  color: var(--green);
}
.patch-bullets,
.patch-detail-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}
.patch-bullets li,
.patch-detail-list li {
  position: relative;
  padding-left: 18px;
  color: rgba(245,255,240,0.82);
  line-height: 1.55;
}
.patch-bullets li::before,
.patch-detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f1ff30, var(--green-2));
  box-shadow: 0 0 0 4px rgba(183,255,32,0.08);
  transform: translateY(-50%);
}
.patch-release-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.patch-release-grid .timeline-item {
  min-height: 100%;
}
.patch-cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(28px, 3vw, 34px);
  border-radius: 26px;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease, box-shadow 260ms ease;
}
.patch-cta-band > div {
  display: grid;
  gap: 12px;
  max-width: 820px;
}
.patch-cta-band > div > .site-icon {
  --icon-size: 28px;
  color: var(--green);
}
.patch-cta-band h2 {
  margin: 0;
  font-size: clamp(1.8rem, 2.7vw, 2.65rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
}
.patch-cta-band p {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}
.patch-faq .faq-grid details {
  border: 1px solid rgba(183,255,32,0.13);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.036), rgba(255,255,255,0.012)),
    rgba(8,15,9,0.68);
  box-shadow: 0 22px 62px rgba(0,0,0,0.24);
}
.patch-faq .faq-grid details:hover {
  border-color: rgba(183,255,32,0.26);
}
@media (max-width: 1380px) {
  .patch-feature-grid,
  .patch-changelog-grid,
  .patch-release-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .patch-update-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1160px) {
  .patch-hero-premium {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .patch-hero-copy,
  .patch-hero-copy .lead {
    max-width: 860px;
  }
  .patch-hero-visual {
    max-width: 980px;
  }
}
@media (max-width: 900px) {
  .patch-feature-grid,
  .patch-changelog-grid,
  .patch-release-grid,
  .patch-hero-metrics {
    grid-template-columns: 1fr;
  }
  .patch-hero-copy h1 {
    font-size: clamp(2.8rem, 15vw, 4.8rem);
  }
  .patch-cta-band {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 720px) {
  .patch-hero-premium {
    width: min(var(--container), calc(100% - 30px));
    padding-top: 58px;
    gap: 34px;
  }
  .patch-hero-visual,
  .patch-hero-visual::after,
  .patch-hero-visual img {
    border-radius: 22px;
  }
  .patch-hero-visual .shop-floating-card {
    position: static;
    margin-top: 14px;
  }
  .patch-hero-visual {
    display: grid;
    gap: 0;
  }
  .patch-feature-card,
  .patch-update-card,
  .patch-changelog-card {
    padding: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .patch-hero-visual,
  .patch-hero-visual img,
  .patch-hero-visual::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}


/* Harmonisation des blocs sous boutons sur les catégories */
.category-trust-row {
  max-width: 760px;
  margin-top: 40px;
  gap: 22px;
}
.category-trust-row .trust-item {
  padding: 4px 0;
  align-items: start;
}
.category-trust-row .trust-item strong {
  font-size: 0.98rem;
}
.category-trust-row .trust-item small {
  margin-top: 4px;
  font-size: 0.84rem;
  line-height: 1.45;
}
@media (max-width: 900px) {
  .category-trust-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Patchnote réel intégré — mise en page détaillée */
.patch-update-card-featured {
  grid-column: 1 / -1;
  min-height: auto;
  padding: clamp(28px, 3vw, 38px);
}

.patch-author-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 12px 0 6px;
  padding: 9px 12px;
  border: 1px solid rgba(183,255,32,0.16);
  border-radius: 999px;
  color: rgba(245,255,240,0.78);
  background: rgba(3,6,4,0.42);
  font-size: 0.82rem;
  font-weight: 850;
}

.patch-author-line .site-icon {
  --icon-size: 16px;
  color: var(--green);
}

.patch-author-line strong {
  color: rgba(245,255,240,0.96);
}

.patch-featured-lead {
  max-width: 980px;
}

.patch-detail-categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.patch-category-block {
  position: relative;
  padding: 20px;
  border: 1px solid rgba(183,255,32,0.12);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.036), rgba(255,255,255,0.012)),
    rgba(3,6,4,0.42);
  overflow: hidden;
}

.patch-category-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 25%) var(--my, 0%), rgba(183,255,32,0.13), transparent 38%);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.patch-category-block:hover::before {
  opacity: 1;
}

.patch-category-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}

.patch-category-title .site-icon {
  --icon-size: 20px;
  color: var(--green);
}

.patch-category-title h4 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.035em;
}

.patch-bullets.compact {
  gap: 8px;
  margin-top: 0;
}

.patch-bullets.compact li {
  font-size: 0.88rem;
  line-height: 1.48;
  color: rgba(245,255,240,0.76);
}

.patch-availability {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  margin-top: 26px;
  padding: 14px 16px;
  border: 1px solid rgba(183,255,32,0.22);
  border-radius: 18px;
  background: rgba(183,255,32,0.08);
  box-shadow: 0 20px 52px rgba(0,0,0,0.24), 0 0 34px rgba(183,255,32,0.08);
}

.patch-availability .site-icon {
  --icon-size: 23px;
  color: var(--green);
}

.patch-availability strong,
.patch-availability small {
  display: block;
}

.patch-availability small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 780;
}

@media (max-width: 1280px) {
  .patch-detail-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .patch-detail-categories {
    grid-template-columns: 1fr;
  }

  .patch-card-topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .patch-availability {
    width: 100%;
  }
}


/* Patchnotes archives réelles — accordéons et nettoyage historique */
.patch-archives-section .section-heading {
  margin-bottom: 30px;
}
.patch-archive-list {
  display: grid;
  gap: 22px;
}
.patch-archive-card {
  position: relative;
  border: 1px solid rgba(183,255,32,0.14);
  border-radius: 28px;
  padding: clamp(24px, 3vw, 34px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.044), rgba(255,255,255,0.016)),
    rgba(8,15,9,0.72);
  box-shadow: 0 24px 72px rgba(0,0,0,0.30);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease, box-shadow 260ms ease;
}
.patch-archive-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 0%), rgba(183,255,32,0.14), transparent 36%);
  transition: opacity 240ms ease;
}
.patch-archive-card:hover {
  transform: translateY(-5px);
  border-color: rgba(183,255,32,0.30);
  box-shadow: 0 34px 96px rgba(0,0,0,0.38), 0 0 48px rgba(183,255,32,0.055);
}
.patch-archive-card:hover::before { opacity: 1; }
.patch-archive-head {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}
.patch-archive-head h3 {
  margin: 14px 0 10px;
  font-size: clamp(1.65rem, 2.5vw, 2.55rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
}
.patch-archive-head p {
  margin: 0;
  max-width: 840px;
  color: var(--muted);
  line-height: 1.68;
}
.patch-author-mini {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
  min-width: 190px;
  padding: 12px 14px;
  border: 1px solid rgba(183,255,32,0.16);
  border-radius: 18px;
  background: rgba(3,6,4,0.42);
}
.patch-author-mini .site-icon {
  --icon-size: 20px;
  color: var(--green);
  grid-row: span 2;
}
.patch-author-mini strong {
  line-height: 1.1;
  color: rgba(245,255,240,0.94);
}
.patch-author-mini small {
  margin-top: 4px;
  color: var(--muted-2);
  font-weight: 780;
}
.patch-archive-details {
  position: relative;
  margin-top: 22px;
}
.patch-archive-details summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(183,255,32,0.18);
  border-radius: 999px;
  color: var(--green);
  background: rgba(183,255,32,0.08);
  font-weight: 950;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.patch-archive-details summary::-webkit-details-marker { display: none; }
.patch-archive-details summary::after {
  content: "+";
  font-size: 1.1rem;
  line-height: 1;
}
.patch-archive-details[open] summary::after { content: "–"; }
.patch-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}
.muted-tag {
  color: rgba(245,255,240,0.72);
  border-color: rgba(245,255,240,0.16);
  background: rgba(255,255,255,0.06);
}
.compact-availability {
  margin-top: 18px;
}
@media (max-width: 1280px) {
  .patch-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 840px) {
  .patch-archive-head {
    flex-direction: column;
  }
  .patch-author-mini {
    width: 100%;
  }
  .patch-archive-grid { grid-template-columns: 1fr; }
}

/* UPDATE — Topbar dropdown FLASHMOOD */
.nav-links {
  overflow: visible;
}

.nav-links a,
.nav-dropdown-toggle {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(245,255,240,0.78);
  background: transparent;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle,
.nav-dropdown.is-active .nav-dropdown-toggle {
  color: var(--green);
  background: rgba(183,255,32,0.08);
  border-color: rgba(183,255,32,0.18);
}

.nav-dropdown-toggle:hover {
  transform: translateY(-1px);
}

.nav-chevron {
  display: inline-flex;
  transform: translateY(-1px);
  color: currentColor;
  font-size: 0.9rem;
  transition: transform 180ms ease;
}

.nav-dropdown.open .nav-chevron {
  transform: translateY(-1px) rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 80;
  display: grid;
  min-width: 220px;
  padding: 10px;
  border: 1px solid rgba(183,255,32,0.16);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)),
    rgba(3, 7, 4, 0.94);
  box-shadow: 0 28px 80px rgba(0,0,0,0.42), 0 0 44px rgba(183,255,32,0.08);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
}

.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  width: 12px;
  height: 12px;
  border-left: 1px solid rgba(183,255,32,0.16);
  border-top: 1px solid rgba(183,255,32,0.16);
  background: rgba(3, 7, 4, 0.94);
  transform: translateX(-50%) rotate(45deg);
}

.nav-dropdown-menu a {
  justify-content: flex-start;
  min-height: 42px;
  padding: 0 13px;
  border-radius: 12px;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
  color: var(--green);
  background: rgba(183,255,32,0.09);
}

@media (max-width: 980px) {
  .nav-dropdown {
    width: 100%;
    display: grid;
  }

  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    min-height: 46px;
    padding: 0 16px;
  }

  .nav-dropdown-menu {
    position: relative;
    top: auto;
    left: auto;
    min-width: 0;
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    border-radius: 16px;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    display: none;
  }

  .nav-dropdown.open .nav-dropdown-menu,
  .nav-dropdown:hover .nav-dropdown-menu {
    display: grid;
    transform: none;
  }

  .nav-dropdown-menu::before {
    display: none;
  }

  .nav-dropdown-menu a {
    min-height: 42px;
    padding-left: 18px;
  }
}

/* UPDATE — Topbar FLASHMOOD dropdown polish */
.nav-dropdown {
  position: relative;
}

.nav-dropdown::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  height: 18px;
  display: block;
}

.nav-dropdown-toggle {
  gap: 9px;
  padding-inline: 16px 14px;
}

.nav-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.86;
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-dropdown.open .nav-chevron,
.nav-dropdown:hover .nav-chevron,
.nav-dropdown:focus-within .nav-chevron {
  transform: translateY(2px) rotate(225deg);
  opacity: 1;
}

.nav-dropdown-menu {
  top: calc(100% + 10px);
  padding: 9px;
  min-width: 238px;
  transform: translate(-50%, -6px) scale(0.985);
  transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
}

.nav-dropdown-menu a {
  position: relative;
  min-height: 44px;
  padding-inline: 14px 16px;
}

.nav-dropdown-menu a::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 14px rgba(183,255,32,0.70);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 160ms ease, transform 160ms ease;
}

.nav-dropdown-menu a:hover::before,
.nav-dropdown-menu a.active::before {
  opacity: 1;
  transform: scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .nav-dropdown-toggle {
    cursor: default;
  }

  .nav-dropdown.open .nav-dropdown-menu {
    pointer-events: auto;
  }
}

@media (max-width: 980px) {
  .nav-dropdown::after {
    display: none;
  }

  .nav-chevron {
    width: 9px;
    height: 9px;
  }

  .nav-dropdown:not(.open) .nav-dropdown-menu {
    display: none;
  }

  .nav-dropdown.open .nav-dropdown-menu {
    display: grid;
  }
}


/* ACTUALITÉS — refonte premium */
.news-main {
  padding-bottom: 118px;
}
.news-hero-premium .patch-hero-copy h1 .gradient-text {
  background: linear-gradient(90deg, #f1ff30 0%, var(--green) 46%, var(--green-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.news-hero-premium .patch-hero-visual img {
  aspect-ratio: 16 / 9.2;
  object-position: center top;
}
.news-hero-premium .patch-hero-visual::before {
  background:
    radial-gradient(circle at var(--mx, 72%) var(--my, 14%), rgba(183,255,32,0.24), transparent 32%),
    radial-gradient(circle at 10% 88%, rgba(56,223,66,0.12), transparent 34%);
}
.actualites-feature-grid .patch-feature-card {
  min-height: 230px;
}
.actualites-spotlight-grid,
.actualites-feed-grid {
  display: grid;
  gap: 22px;
}
.actualites-spotlight-grid {
  grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 0.85fr));
}
.news-spotlight-card {
  min-height: 100%;
}
.news-spotlight-card.featured {
  min-height: 420px;
}
.actualites-card-actions {
  display: flex;
  gap: 12px;
  margin-top: 26px;
}
.actualites-feed-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.actualites-feed-card {
  min-height: 100%;
}
.actualites-feed-card .text-link {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  color: var(--green);
  font-weight: 850;
  letter-spacing: 0.02em;
}
.actualites-feed-card .text-link:hover {
  color: var(--green-2);
}
@media (max-width: 1380px) {
  .actualites-spotlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .news-spotlight-card.featured {
    grid-column: 1 / -1;
  }
}
@media (max-width: 980px) {
  .actualites-feed-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .actualites-spotlight-grid {
    grid-template-columns: 1fr;
  }
}


/* ACTUALITÉS — recentrage annonces serveur */
.actualites-main .news-hero-copy h1 {
  max-width: 880px;
}
.actualites-main .news-hero-copy h1 .gradient-text {
  background: linear-gradient(90deg, #f1ff30 0%, var(--green) 46%, var(--green-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.actualites-annonces-grid {
  grid-template-columns: minmax(0, 1.22fr) repeat(2, minmax(0, .89fr));
}
.announcement-card {
  position: relative;
  overflow: hidden;
}
.announcement-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -45% auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(183,255,32,0.12), transparent 70%);
  pointer-events: none;
}
.announcement-featured {
  min-height: 470px;
}
.announcement-quote {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(183,255,32,0.14);
  background: rgba(255,255,255,0.03);
  border-radius: 18px;
  color: rgba(255,255,255,0.84);
  font-size: 0.98rem;
  line-height: 1.6;
}
.announcement-quote strong {
  color: var(--text-light);
}
.actualites-inline-note {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(183,255,32,0.08);
  border: 1px solid rgba(183,255,32,0.15);
  color: rgba(255,255,255,0.78);
  font-size: 0.95rem;
  line-height: 1.55;
}
.actualites-journal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.actualites-info-section .patch-cta-band p {
  max-width: 720px;
}
@media (max-width: 1380px) {
  .actualites-annonces-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .announcement-featured {
    grid-column: 1 / -1;
  }
}
@media (max-width: 980px) {
  .actualites-journal-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .actualites-annonces-grid {
    grid-template-columns: 1fr;
  }
}

/* DISCORD — refonte premium */
.discord-main {
  padding-bottom: 118px;
}

.discord-hero-premium .patch-hero-copy h1 .gradient-text {
  background: linear-gradient(90deg, #f1ff30 0%, var(--green) 46%, var(--green-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.discord-hero-visual img {
  aspect-ratio: 16 / 9.2;
  object-position: center top;
}

.discord-feature-grid .patch-feature-card {
  min-height: 230px;
}

.discord-hub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) repeat(2, minmax(0, .92fr));
  gap: 22px;
}

.discord-hub-card {
  position: relative;
  display: flex;
  min-height: 520px;
  flex-direction: column;
  gap: 16px;
  padding: clamp(26px, 2.4vw, 34px);
  border: 1px solid rgba(183,255,32,0.14);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.044), rgba(255,255,255,0.016)),
    rgba(8,15,9,0.72);
  box-shadow: 0 24px 72px rgba(0,0,0,0.30);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease, box-shadow 260ms ease;
}

.discord-hub-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 0%), rgba(183,255,32,0.18), transparent 38%);
  transition: opacity 260ms ease;
}

.discord-hub-card:hover {
  transform: translateY(-6px);
  border-color: rgba(183,255,32,0.34);
  box-shadow: 0 34px 96px rgba(0,0,0,0.38), 0 0 48px rgba(183,255,32,0.055);
}

.discord-hub-card:hover::before {
  opacity: 1;
}

.discord-hub-card > * {
  position: relative;
  z-index: 1;
}

.discord-hub-card.main {
  background:
    radial-gradient(circle at 16% 0%, rgba(88,101,242,0.18), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.016)),
    rgba(8,15,9,0.78);
}

.discord-hub-icon {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: var(--green);
  border: 1px solid rgba(183,255,32,0.18);
  background: rgba(183,255,32,0.09);
}

.discord-hub-icon .site-icon {
  --icon-size: 26px;
}

.discord-hub-card h3 {
  margin: 4px 0 0;
  font-size: clamp(1.55rem, 2.1vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.055em;
}

.discord-hub-card p {
  margin: 0;
  color: rgba(245,255,240,0.74);
  line-height: 1.7;
}

.discord-hub-card .btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

.discord-path-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.discord-embed-layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 22px;
  align-items: stretch;
}

.discord-widget-card,
.discord-setup-card {
  position: relative;
  padding: clamp(26px, 2.4vw, 34px);
  border: 1px solid rgba(183,255,32,0.14);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.044), rgba(255,255,255,0.016)),
    rgba(8,15,9,0.72);
  box-shadow: 0 24px 72px rgba(0,0,0,0.30);
  overflow: hidden;
}

.discord-widget-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.discord-widget-top > .site-icon {
  --icon-size: 34px;
  color: #5865f2;
}

.discord-widget-top strong,
.discord-widget-top small {
  display: block;
}

.discord-widget-top small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 800;
}

.discord-widget-preview {
  display: grid;
  gap: 14px;
  min-height: 250px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 0%, rgba(88,101,242,0.20), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018));
}

.widget-line {
  width: 68%;
  height: 14px;
  border-radius: 999px;
  background: rgba(245,255,240,0.16);
}

.widget-line.wide {
  width: 92%;
  background: rgba(183,255,32,0.20);
}

.widget-users {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.widget-users span {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 2px solid rgba(183,255,32,0.22);
  background: linear-gradient(135deg, rgba(183,255,32,0.34), rgba(88,101,242,0.32));
}

.discord-widget-preview p,
.discord-setup-card p {
  margin: 0;
  color: rgba(245,255,240,0.72);
  line-height: 1.7;
}

.discord-setup-card h3 {
  margin: 0 0 14px;
  font-size: clamp(1.55rem, 2.1vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -0.055em;
}

.code-card {
  margin: 20px 0;
  padding: 18px;
  border: 1px solid rgba(183,255,32,0.16);
  border-radius: 18px;
  background: rgba(0,0,0,0.30);
  color: rgba(245,255,240,0.82);
  font-size: .86rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.muted-note {
  color: var(--muted) !important;
  font-size: .94rem;
}

@media (max-width: 1380px) {
  .discord-hub-grid,
  .discord-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .discord-hub-card.main {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .discord-embed-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .discord-hub-grid,
  .discord-path-grid {
    grid-template-columns: 1fr;
  }

  .discord-hub-card {
    min-height: auto;
  }
}


.discord-widget-live {
  padding: 14px;
}

.discord-widget-live iframe {
  display: block;
  width: 100%;
  min-height: 360px;
  border: 0;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.16);
}

.discord-widget-live p {
  margin-top: 12px;
}


.discord-widget-top-premium {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.discord-widget-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.widget-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(183,255,32,0.22);
  background: rgba(8,18,8,0.82);
  color: rgba(245,255,240,0.92);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22), 0 0 24px rgba(183,255,32,0.08);
}

.widget-status-pill span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(183,255,32,1), rgba(87,255,111,0.92));
  box-shadow: 0 0 12px rgba(183,255,32,0.65);
}

.premium-widget-live {
  position: relative;
  padding: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(183,255,32,0.18), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(88,101,242,0.24), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}

.widget-frame-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.widget-frame-dots {
  display: inline-flex;
  gap: 8px;
}

.widget-frame-dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(245,255,240,0.16);
}

.widget-frame-dots span:first-child { background: rgba(183,255,32,0.86); box-shadow: 0 0 10px rgba(183,255,32,0.55); }
.widget-frame-dots span:nth-child(2) { background: rgba(255,205,84,0.8); }
.widget-frame-dots span:nth-child(3) { background: rgba(88,101,242,0.86); }

.widget-frame-label {
  color: rgba(245,255,240,0.60);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.widget-frame-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(183,255,32,0.18);
  background: rgba(12,20,12,0.80);
  color: rgba(245,255,240,0.88);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.widget-frame-link:hover {
  transform: translateY(-2px);
  border-color: rgba(183,255,32,0.35);
  background: rgba(183,255,32,0.12);
}

.widget-shell-glow {
  position: absolute;
  inset: auto -12% 16% auto;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(183,255,32,0.16), rgba(183,255,32,0));
  filter: blur(8px);
  pointer-events: none;
}

.widget-shell {
  position: relative;
  z-index: 2;
  padding: 10px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
    rgba(3,7,10,0.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 20px 42px rgba(0,0,0,0.30),
    0 0 0 1px rgba(183,255,32,0.04);
}

.premium-widget-live iframe {
  position: relative;
  z-index: 2;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.28);
}

.widget-quicklinks {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.widget-quicklinks a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  color: rgba(245,255,240,0.92);
  text-decoration: none;
  font-weight: 800;
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.widget-quicklinks a .site-icon {
  --icon-size: 16px;
  color: var(--green);
}

.widget-quicklinks a:hover {
  transform: translateY(-2px);
  border-color: rgba(183,255,32,0.28);
  background: rgba(183,255,32,0.08);
  box-shadow: 0 14px 32px rgba(0,0,0,0.18);
}

.widget-caption {
  position: relative;
  z-index: 2;
  margin-top: 14px !important;
}

.discord-setup-card-premium {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.widget-benefits {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.widget-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.028);
}

.widget-benefit-item .site-icon {
  --icon-size: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--green);
}

.widget-benefit-item strong,
.widget-benefit-item small {
  display: block;
}

.widget-benefit-item strong {
  color: rgba(245,255,240,0.95);
  margin-bottom: 4px;
}

.widget-benefit-item small {
  color: rgba(245,255,240,0.68);
  line-height: 1.55;
}

@media (max-width: 980px) {
  .discord-widget-top-premium {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  .widget-frame-head {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .widget-quicklinks a {
    width: 100%;
    justify-content: center;
  }
}


/* DISCORD — widget officiel clean */
.discord-official-section .section-heading {
  max-width: 920px;
  margin-inline: auto;
}

.discord-official-widget {
  position: relative;
  width: min(980px, 100%);
  margin: 42px auto 0;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid rgba(183,255,32,0.18);
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 0%, rgba(183,255,32,0.16), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(88,101,242,0.20), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)),
    rgba(8,15,9,0.78);
  box-shadow:
    0 34px 95px rgba(0,0,0,0.38),
    0 0 70px rgba(183,255,32,0.06);
  overflow: hidden;
}

.discord-official-widget::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,0.08) 48%, rgba(183,255,32,0.06) 56%, transparent 72%);
  transform: translateX(-110%) skewX(-12deg);
  animation: shopHeroSweep 7s ease-in-out infinite;
  opacity: .55;
}

.discord-official-widget > * {
  position: relative;
  z-index: 1;
}

.discord-official-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 6px 4px 0;
}

.discord-official-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.discord-official-title > .site-icon {
  --icon-size: 34px;
  color: #5865f2;
  filter: drop-shadow(0 0 18px rgba(88,101,242,0.40));
}

.discord-official-title strong,
.discord-official-title small {
  display: block;
}

.discord-official-title strong {
  color: rgba(245,255,240,0.96);
  font-size: 1.1rem;
  letter-spacing: -0.025em;
}

.discord-official-title small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 800;
}

.discord-official-frame {
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
    rgba(3,7,10,0.74);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 20px 42px rgba(0,0,0,0.30);
}

.discord-official-frame iframe {
  display: block;
  width: 100%;
  min-height: 440px;
  border: 0;
  border-radius: 18px;
  background: rgba(0,0,0,0.18);
}

@media (max-width: 760px) {
  .discord-official-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .discord-official-head .btn {
    width: 100%;
    justify-content: center;
  }

  .discord-official-frame iframe {
    min-height: 380px;
  }
}


/* AVIS — sous-page premium */
.reviews-main,
.avis-main {
  padding-bottom: 118px;
}

.avis-hero-premium .patch-hero-copy h1 .gradient-text {
  background: linear-gradient(90deg, #f1ff30 0%, var(--green) 46%, var(--green-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.avis-hero-visual img {
  aspect-ratio: 16 / 9.2;
  object-position: center top;
}

.avis-summary-grid {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.25fr) minmax(260px, .9fr);
  gap: 22px;
  align-items: stretch;
}

.avis-score-card,
.avis-reward-card,
.avis-rules-card,
.avis-gift-panel {
  position: relative;
  border: 1px solid rgba(183,255,32,0.14);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.044), rgba(255,255,255,0.016)),
    rgba(8,15,9,0.72);
  box-shadow: 0 24px 72px rgba(0,0,0,0.30);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease, box-shadow 260ms ease;
}

.avis-score-card::before,
.avis-reward-card::before,
.avis-rules-card::before,
.avis-gift-panel::before,
.avis-form-card::before,
.avis-reviews-grid .review-item::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 0%), rgba(183,255,32,0.16), transparent 38%);
  transition: opacity 260ms ease;
}

.avis-score-card:hover,
.avis-reward-card:hover,
.avis-rules-card:hover,
.avis-gift-panel:hover,
.avis-form-card:hover,
.avis-reviews-grid .review-item:hover {
  transform: translateY(-6px);
  border-color: rgba(183,255,32,0.34);
  box-shadow: 0 34px 96px rgba(0,0,0,0.38), 0 0 48px rgba(183,255,32,0.055);
}

.avis-score-card:hover::before,
.avis-reward-card:hover::before,
.avis-rules-card:hover::before,
.avis-gift-panel:hover::before,
.avis-form-card:hover::before,
.avis-reviews-grid .review-item:hover::before {
  opacity: 1;
}

.avis-score-card {
  padding: clamp(26px, 2.5vw, 34px);
  display: grid;
  align-content: center;
  justify-items: start;
}

.avis-score-card .review-average {
  display: block;
  margin-top: 14px;
  font-size: clamp(4rem, 7vw, 6.4rem);
  line-height: .9;
  letter-spacing: -0.08em;
  color: var(--text-light);
}

.avis-score-card .stars-display {
  margin: 16px 0 10px;
  color: var(--green);
  letter-spacing: .06em;
  text-shadow: 0 0 22px rgba(183,255,32,0.24);
}

.avis-score-card p,
.avis-score-card small {
  margin: 0;
  color: var(--muted);
  font-weight: 850;
}

.avis-reward-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  padding: clamp(28px, 3vw, 38px);
  align-items: center;
}

.avis-reward-icon {
  display: inline-flex;
  width: 74px;
  height: 74px;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  border: 1px solid rgba(183,255,32,0.20);
  background: rgba(183,255,32,0.10);
  color: var(--green);
  box-shadow: 0 0 38px rgba(183,255,32,0.10);
}

.avis-reward-icon .site-icon {
  --icon-size: 34px;
}

.avis-reward-card h2 {
  margin: 10px 0 12px;
  font-size: clamp(1.9rem, 3vw, 3.15rem);
  line-height: 1.02;
  letter-spacing: -0.06em;
}

.avis-reward-card p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.72;
}

.avis-rules-card {
  padding: clamp(24px, 2.3vw, 32px);
}

.avis-rules-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 15px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.avis-rules-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  color: rgba(245,255,240,0.78);
  line-height: 1.55;
  font-weight: 780;
}

.avis-rules-list .site-icon {
  --icon-size: 17px;
  color: var(--green);
  margin-top: 3px;
}

.avis-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .72fr);
  gap: 24px;
  align-items: stretch;
}

.avis-form-card {
  position: relative;
  border: 1px solid rgba(183,255,32,0.14);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.044), rgba(255,255,255,0.016)),
    rgba(8,15,9,0.72);
  box-shadow: 0 24px 72px rgba(0,0,0,0.30);
  overflow: hidden;
}

.avis-form-card h2 {
  font-size: clamp(1.9rem, 3vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -0.06em;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.avis-form-card input,
.avis-form-card select,
.avis-form-card textarea {
  border-color: rgba(183,255,32,0.14);
  background: rgba(0,0,0,0.24);
}

.avis-form-card input:focus,
.avis-form-card select:focus,
.avis-form-card textarea:focus {
  border-color: rgba(183,255,32,0.42);
  box-shadow: 0 0 0 4px rgba(183,255,32,0.08);
}

.avis-gift-panel {
  padding: clamp(26px, 2.5vw, 34px);
}

.avis-gift-panel h3 {
  margin: 10px 0 12px;
  font-size: clamp(1.7rem, 2.3vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: -0.055em;
}

.avis-gift-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.gift-placeholder {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
  padding: 18px;
  border: 1px solid rgba(183,255,32,0.16);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(183,255,32,0.16), transparent 34%),
    rgba(255,255,255,0.035);
}

.gift-placeholder > .site-icon {
  --icon-size: 30px;
  color: var(--green);
  filter: drop-shadow(0 0 18px rgba(183,255,32,0.28));
}

.gift-placeholder strong,
.gift-placeholder small {
  display: block;
}

.gift-placeholder small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 800;
}

.avis-gift-steps {
  display: grid;
  gap: 12px;
}

.avis-gift-steps div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
}

.avis-gift-steps b {
  color: var(--green);
  font-size: .86rem;
  letter-spacing: .12em;
}

.avis-gift-steps span {
  color: rgba(245,255,240,0.76);
  font-weight: 800;
}

.avis-reviews-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.avis-reviews-grid .review-item {
  position: relative;
  min-height: 210px;
  border: 1px solid rgba(183,255,32,0.12);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.014)),
    rgba(8,15,9,0.66);
  box-shadow: 0 20px 58px rgba(0,0,0,0.26);
  overflow: hidden;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease, box-shadow 260ms ease;
}

.avis-reviews-grid .review-topline,
.avis-reviews-grid .review-item p,
.avis-reviews-grid .review-item small {
  position: relative;
  z-index: 1;
}

.avis-reviews-grid .review-stars {
  color: var(--green);
  text-shadow: 0 0 16px rgba(183,255,32,0.22);
}

@media (max-width: 1280px) {
  .avis-summary-grid,
  .avis-form-layout {
    grid-template-columns: 1fr;
  }

  .avis-reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .avis-reward-card {
    grid-template-columns: 1fr;
  }

  .form-grid-2,
  .avis-reviews-grid {
    grid-template-columns: 1fr;
  }
}


/* UPDATE — Discord iframe requested sizing + favicon update */
.discord-official-frame {
  display: flex;
  justify-content: center;
}

.discord-official-frame iframe {
  width: 350px;
  max-width: 100%;
  height: 500px;
  min-height: 500px;
}

@media (max-width: 760px) {
  .discord-official-frame iframe {
    width: 100%;
    height: 500px;
    min-height: 500px;
  }
}

/* UPDATE — Stats Discord basées sur le widget officiel */
.discord-official-widget {
  width: min(1140px, 100%);
}

.discord-widget-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 18px;
  align-items: stretch;
}

.discord-widget-stats,
.discord-official-frame {
  min-height: 500px;
}

.discord-widget-stats {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  background:
    radial-gradient(circle at 16% 0%, rgba(183,255,32,0.14), transparent 34%),
    radial-gradient(circle at 100% 10%, rgba(88,101,242,0.18), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014)),
    rgba(3,7,10,0.66);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 20px 42px rgba(0,0,0,0.26);
  overflow: hidden;
}

.discord-widget-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 35%, rgba(255,255,255,0.06) 50%, transparent 66%);
  transform: translateX(-120%) skewX(-12deg);
  animation: shopHeroSweep 7.4s ease-in-out infinite;
  opacity: .42;
}

.discord-widget-stats > * {
  position: relative;
  z-index: 1;
}

.discord-widget-source {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 9px 13px;
  border: 1px solid rgba(183,255,32,0.16);
  border-radius: 999px;
  background: rgba(183,255,32,0.075);
  color: rgba(245,255,240,0.88);
  font-size: .74rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.discord-widget-source span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(183,255,32,1), rgba(87,255,111,0.92));
  box-shadow: 0 0 14px rgba(183,255,32,0.68);
}

.discord-official-widget.is-offline .discord-widget-source span {
  background: rgba(255,205,84,0.95);
  box-shadow: 0 0 14px rgba(255,205,84,0.42);
}

.discord-widget-stats h3 {
  margin: 18px 0 8px;
  color: rgba(245,255,240,0.98);
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: .95;
  letter-spacing: -0.07em;
}

.discord-widget-stats p {
  max-width: 560px;
  margin: 0 0 22px;
  color: rgba(245,255,240,0.68);
  line-height: 1.7;
  font-weight: 650;
}

.discord-widget-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.discord-widget-stat-card {
  min-height: 118px;
  padding: 17px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.050), rgba(255,255,255,0.016)),
    rgba(0,0,0,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 16px 34px rgba(0,0,0,0.18);
}

.discord-widget-stat-card strong,
.discord-widget-stat-card span {
  display: block;
}

.discord-widget-stat-card strong {
  color: var(--green);
  font-size: clamp(1.75rem, 3vw, 2.65rem);
  line-height: 1;
  letter-spacing: -0.055em;
  text-shadow: 0 0 18px rgba(183,255,32,0.18);
}

.discord-widget-stat-card span {
  margin-top: 10px;
  color: rgba(245,255,240,0.62);
  font-size: .79rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.discord-widget-note {
  display: block;
  margin-top: 16px;
  color: rgba(245,255,240,0.50);
  font-size: .82rem;
  line-height: 1.55;
}

.discord-official-frame {
  display: flex;
  justify-content: center;
  align-items: center;
}

.discord-official-frame iframe {
  width: 350px;
  max-width: 100%;
  height: 500px;
  min-height: 500px;
}

@media (max-width: 980px) {
  .discord-widget-layout {
    grid-template-columns: 1fr;
  }

  .discord-widget-stats,
  .discord-official-frame {
    min-height: auto;
  }
}

@media (max-width: 560px) {
  .discord-widget-stats-grid {
    grid-template-columns: 1fr;
  }
}




/* =========================================================
   UPDATE — Page Rejoindre + inscription Discord OAuth preview
   ========================================================= */
.join-hero,
.discord-login-hero {
  position: relative;
  width: min(var(--container), calc(100% - 56px));
  min-height: calc(100vh - 132px);
  margin: 42px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.72fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(34px, 6vw, 76px);
  border: 1px solid rgba(183,255,32,0.18);
  border-radius: 38px;
  background:
    radial-gradient(circle at 78% 18%, rgba(183,255,32,0.16), transparent 30%),
    linear-gradient(90deg, rgba(3,6,4,0.88), rgba(3,6,4,0.64)),
    url("assets/flashmood-wide-art.webp") center / cover no-repeat;
  box-shadow: var(--shadow), 0 0 70px rgba(183,255,32,0.055);
  overflow: hidden;
}

.discord-login-hero {
  background:
    radial-gradient(circle at 78% 18%, rgba(183,255,32,0.16), transparent 30%),
    linear-gradient(90deg, rgba(3,6,4,0.90), rgba(3,6,4,0.62)),
    url("assets/discord-hero-premium.png") center / cover no-repeat;
}

.join-hero::before,
.discord-login-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 48%, rgba(183,255,32,0.05) 48.1% 48.34%, transparent 48.48%),
    radial-gradient(circle at 20% 78%, rgba(56,223,66,0.10), transparent 28%);
  opacity: 0.92;
}

.join-hero-copy,
.join-access-card,
.discord-login-copy,
.discord-auth-card {
  position: relative;
  z-index: 1;
}

.join-hero-copy h1,
.discord-login-copy h1 {
  max-width: 850px;
  margin: 18px 0 22px;
  line-height: 1.02;
  letter-spacing: -0.07em;
}

.join-hero-copy .lead,
.discord-login-copy .lead {
  max-width: 720px;
  color: rgba(245,255,240,0.72);
  line-height: 1.78;
}

.join-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.join-hero-badges span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(183,255,32,0.18);
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  color: rgba(245,255,240,0.78);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  backdrop-filter: blur(12px);
}

.join-hero-badges .site-icon { color: var(--green); }

.join-access-card,
.discord-auth-card {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(183,255,32,0.20);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.022)),
    rgba(5,10,6,0.78);
  box-shadow: 0 30px 86px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(18px);
}

.join-access-top {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.join-access-top img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(183,255,32,0.22));
}

.join-access-top h2,
.discord-auth-card h2 {
  margin: 6px 0 0;
  font-size: clamp(1.55rem, 2.6vw, 2.35rem);
}

.join-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid rgba(183,255,32,0.22);
  border-radius: 999px;
  color: var(--green);
  background: rgba(183,255,32,0.075);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.join-live-pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px rgba(183,255,32,0.85);
  animation: livePulse 1.8s ease-in-out infinite;
}

.premium-code {
  margin: 26px 0;
  background:
    linear-gradient(90deg, rgba(183,255,32,0.105), rgba(56,223,66,0.035)),
    rgba(0,0,0,0.34);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025), 0 18px 42px rgba(0,0,0,0.22);
}

.join-mini-grid,
.discord-auth-lines,
.oauth-flow-card {
  display: grid;
  gap: 12px;
}

.join-mini-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 22px;
}

.join-mini-grid div,
.discord-auth-lines span,
.oauth-flow-card div {
  border: 1px solid rgba(183,255,32,0.14);
  border-radius: 18px;
  background: rgba(0,0,0,0.24);
}

.join-mini-grid div {
  padding: 16px;
}

.join-mini-grid strong,
.discord-auth-lines b {
  display: block;
  color: var(--green);
  font-size: 0.98rem;
  font-weight: 950;
}

.join-mini-grid span,
.discord-auth-lines i,
.oauth-flow-card span {
  display: block;
  margin-top: 6px;
  color: rgba(245,255,240,0.60);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.45;
  font-weight: 800;
}

.join-path-grid,
.auth-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.join-step-card {
  position: relative;
  min-height: 280px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    radial-gradient(circle at 90% 8%, rgba(183,255,32,0.10), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.050), rgba(255,255,255,0.018)),
    rgba(10,18,11,0.72);
  box-shadow: 0 22px 68px rgba(0,0,0,0.25);
  overflow: hidden;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.join-step-card:hover {
  transform: translateY(-4px);
  border-color: rgba(183,255,32,0.34);
  box-shadow: 0 28px 86px rgba(0,0,0,0.34), 0 0 48px rgba(183,255,32,0.055);
}

.join-step-card .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 38px;
  padding: 0 10px;
  border-radius: 14px;
  color: #071005;
  background: linear-gradient(135deg, var(--green), var(--green-2));
  font-weight: 950;
}

.join-step-card .feature-icon {
  position: absolute !important;
  top: 28px;
  right: 28px;
  color: var(--green) !important;
}

.join-step-card .feature-icon .site-icon {
  --icon-size: 34px;
}

.join-step-card h3 {
  margin: 70px 0 12px;
  font-size: clamp(1.28rem, 1.9vw, 1.82rem);
}

.join-step-card p {
  color: var(--muted);
  line-height: 1.68;
}

.join-discord-next,
.discord-oauth-roadmap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr) auto;
  align-items: center;
  gap: 24px;
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid rgba(183,255,32,0.18);
  border-radius: 32px;
  background:
    radial-gradient(circle at 82% 26%, rgba(183,255,32,0.12), transparent 28%),
    linear-gradient(90deg, rgba(14,28,15,0.88), rgba(7,12,8,0.76));
  box-shadow: var(--shadow);
}

.discord-oauth-roadmap {
  grid-template-columns: minmax(0, 0.88fr) minmax(360px, 1.12fr);
}

.join-discord-next h2,
.discord-oauth-roadmap h2 {
  margin: 10px 0 14px;
  font-size: clamp(2rem, 3.5vw, 4.1rem);
}

.join-discord-next p,
.discord-oauth-roadmap p {
  max-width: 780px;
  color: var(--muted);
  line-height: 1.72;
}

.discord-oauth-roadmap code {
  color: var(--green);
  font-weight: 900;
}

.oauth-flow-card div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 15px;
}

.oauth-flow-card b {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #071005;
  background: linear-gradient(135deg, var(--green), var(--green-2));
  font-size: 0.8rem;
}

.oauth-flow-card span { margin-top: 0; }

.discord-auth-avatar {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  margin-bottom: 22px;
  color: var(--green);
  border: 1px solid rgba(183,255,32,0.22);
  border-radius: 28px;
  background: rgba(183,255,32,0.08);
  box-shadow: 0 0 42px rgba(183,255,32,0.10);
}

.discord-auth-avatar .site-icon { --icon-size: 46px; }

.discord-auth-card p {
  margin: 14px 0 22px;
  color: var(--muted);
  line-height: 1.68;
}

.discord-auth-lines span {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 15px;
}

.auth-preview-note {
  max-width: 650px;
  min-height: 24px;
  margin: 18px 0 0;
  color: rgba(245,255,240,0.58);
  line-height: 1.6;
  font-weight: 800;
}

.auth-preview-note.is-active {
  color: var(--green);
}

@media (max-width: 1180px) {
  .join-hero,
  .discord-login-hero,
  .join-discord-next,
  .discord-oauth-roadmap {
    grid-template-columns: 1fr;
  }

  .join-access-card,
  .discord-auth-card {
    max-width: 760px;
  }

  .join-discord-next > .btn {
    width: fit-content;
  }
}

@media (max-width: 980px) {
  .join-path-grid,
  .auth-benefits-grid {
    grid-template-columns: 1fr;
  }

  .join-step-card {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .join-hero,
  .discord-login-hero {
    width: min(var(--container), calc(100% - 32px));
    min-height: auto;
    padding: 28px;
    border-radius: 28px;
  }

  .join-hero-copy h1,
  .discord-login-copy h1 {
    font-size: clamp(3rem, 13vw, 4.65rem);
    letter-spacing: -0.065em;
  }

  .join-access-top {
    grid-template-columns: 50px 1fr;
  }

  .join-live-pill {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .join-mini-grid {
    grid-template-columns: 1fr;
  }

  .discord-auth-lines span {
    display: grid;
    gap: 4px;
  }

  .join-discord-next > .btn {
    width: 100%;
  }
}

/* =========================================================
   CORRECTION — Rejoindre + Inscription alignées avec la DA
   Les deux pages utilisent maintenant la même logique visuelle
   que Discord / Flashmood / Accueil : hero large + visuel premium.
   ========================================================= */
.join-main,
.auth-main {
  padding-bottom: 118px;
}

.join-hero-premium,
.auth-hero-premium {
  min-height: calc(100svh - 76px);
}

.join-page-copy,
.auth-page-copy {
  max-width: 780px;
}

.join-hero-premium .patch-hero-copy h1 .gradient-text,
.auth-hero-premium .patch-hero-copy h1 .gradient-text {
  background: linear-gradient(90deg, #f1ff30 0%, var(--green) 46%, var(--green-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.join-hero-visual img,
.auth-hero-visual img {
  aspect-ratio: 16 / 9.2;
  object-position: center;
}

.auth-hero-visual img {
  object-position: center top;
}

.join-feature-grid .patch-feature-card,
.auth-feature-grid .patch-feature-card {
  min-height: 230px;
}

.join-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 22px;
}

.join-command-grid .discord-hub-card {
  min-height: 430px;
}

.join-command-grid .discord-hub-card.main {
  grid-column: auto;
}

.join-command-card .connection-code {
  margin-top: 22px;
  margin-bottom: 22px;
}

.join-oauth-cta,
.auth-oauth-cta {
  margin-top: 20px;
}

.auth-path-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.auth-oauth-cta code {
  color: var(--green);
  font-weight: 900;
}

.auth-preview-note {
  max-width: 650px;
  min-height: 24px;
  margin: 18px 0 0;
  color: rgba(245,255,240,0.58);
  line-height: 1.6;
  font-weight: 800;
}

.auth-preview-note.is-active {
  color: var(--green);
}

@media (max-width: 1380px) {
  .join-command-grid {
    grid-template-columns: 1fr;
  }

  .auth-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .join-main,
  .auth-main {
    padding-bottom: 86px;
  }

  .join-command-grid,
  .auth-path-grid {
    grid-template-columns: 1fr;
  }

  .join-command-grid .discord-hub-card {
    min-height: auto;
  }
}

/* Update OAuth Discord fonctionnel */
.is-hidden {
  display: none !important;
}

.auth-preview-note code,
.auth-oauth-cta code {
  color: var(--green);
  font-weight: 900;
}

.btn-register.is-connected {
  border-color: rgba(158, 255, 20, .36);
  background: rgba(158, 255, 20, .12);
  color: var(--text);
}

.auth-oauth-cta.is-authenticated {
  border-color: rgba(158, 255, 20, .36);
  box-shadow: 0 22px 80px rgba(73, 255, 39, .14);
}

.auth-oauth-cta .btn.is-hidden {
  display: none !important;
}

/* =========================================================
   UPDATE — Discord connecté + espace profil personnalisable
   ========================================================= */
.header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 4px;
}

.header-auth-status {
  display: none;
  flex: 0 0 100%;
  margin: -2px 0 0;
  color: rgba(245,255,240,.56);
  font-size: .61rem;
  font-weight: 900;
  letter-spacing: .055em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.header-auth-status.is-active {
  display: block;
  color: var(--green);
  text-shadow: 0 0 18px rgba(183,255,32,.22);
}

.btn.is-connected,
.btn-register.is-connected {
  border-color: rgba(158, 255, 20, .46) !important;
  background: linear-gradient(135deg, rgba(183,255,32,.18), rgba(56,223,66,.09)) !important;
  box-shadow: inset 0 0 0 1px rgba(183,255,32,.08), 0 0 34px rgba(183,255,32,.12);
  color: var(--text) !important;
}

.profile-main {
  padding-bottom: 118px;
}

.profile-hero-premium {
  min-height: calc(100svh - 76px);
}

.profile-page-copy {
  max-width: 800px;
}

.profile-hero-premium .patch-hero-copy h1 .gradient-text {
  background: linear-gradient(90deg, #f1ff30 0%, var(--green) 46%, var(--green-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.profile-hero-visual img {
  aspect-ratio: 16 / 9.2;
  object-position: center top;
}

.profile-customizer-section {
  margin-top: 32px;
}

.profile-lab-grid {
  display: grid;
  grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr);
  gap: 24px;
  align-items: start;
}

.profile-preview-card,
.profile-form-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(183,255,32,.18);
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(9, 15, 10, .82);
  box-shadow: 0 30px 100px rgba(0,0,0,.38);
}

.profile-preview-card {
  min-height: 650px;
  padding: 24px;
  position: sticky;
  top: 104px;
}

.profile-card-glow {
  position: absolute;
  inset: -20% -25% auto auto;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(183,255,32,.24), transparent 64%);
  filter: blur(12px);
  opacity: .78;
  pointer-events: none;
}

.profile-banner {
  position: relative;
  height: 178px;
  overflow: hidden;
  border: 1px solid rgba(183,255,32,.18);
  border-radius: 24px;
  background:
    linear-gradient(120deg, rgba(183,255,32,.18), transparent 44%),
    linear-gradient(26deg, rgba(255,255,255,.10), transparent 34%),
    url("assets/discord-hero-premium.png") center / cover no-repeat;
  box-shadow: inset 0 0 40px rgba(0,0,0,.42);
}

.profile-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 26% 22%, rgba(183,255,32,.28), transparent 24%),
    linear-gradient(180deg, transparent, rgba(3,6,4,.64));
}

.profile-preview-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: -46px;
  padding-inline: 14px;
}

.profile-avatar {
  width: 104px;
  height: 104px;
  flex: 0 0 104px;
  object-fit: cover;
  border: 4px solid rgba(7,14,7,.92);
  border-radius: 28px;
  background: rgba(183,255,32,.1);
  box-shadow: 0 18px 42px rgba(0,0,0,.45), 0 0 0 1px rgba(183,255,32,.32);
}

.profile-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(183,255,32,.22);
  border-radius: 999px;
  background: rgba(183,255,32,.08);
  color: var(--green);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.profile-kicker .site-icon { --icon-size: .9rem; }

.profile-preview-top h3 {
  margin: 10px 0 2px;
  font-size: clamp(1.55rem, 2.2vw, 2.5rem);
  line-height: .96;
  letter-spacing: -.06em;
}

.profile-preview-top p {
  margin: 0;
  color: rgba(245,255,240,.62);
  font-weight: 800;
}

.profile-status-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 24px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(183,255,32,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  color: var(--green);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.profile-bio-preview {
  min-height: 86px;
  margin-bottom: 18px;
  color: rgba(245,255,240,.74);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.7;
}

.profile-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 20px;
}

.profile-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(183,255,32,.20);
  border-radius: 999px;
  background: rgba(183,255,32,.075);
  color: rgba(245,255,240,.92);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.profile-stat-grid div,
.profile-objective-card {
  border: 1px solid rgba(183,255,32,.15);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}

.profile-stat-grid div {
  min-height: 92px;
  padding: 14px;
}

.profile-stat-grid small,
.profile-objective-card small {
  display: block;
  color: rgba(245,255,240,.45);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.profile-stat-grid strong,
.profile-objective-card strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: .96rem;
  font-weight: 950;
  line-height: 1.16;
}

.profile-objective-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px;
}

.profile-objective-card > .site-icon {
  --icon-size: 1.2rem;
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(183,255,32,.10);
  color: var(--green);
  border: 1px solid rgba(183,255,32,.20);
}

.profile-objective-card em {
  display: block;
  margin-top: 5px;
  color: rgba(245,255,240,.55);
  font-size: .82rem;
  font-style: normal;
  font-weight: 850;
}

.profile-footer-note {
  margin-top: 16px;
  color: rgba(245,255,240,.46);
  font-size: .78rem;
  font-weight: 850;
  text-align: right;
}

.profile-form-card {
  padding: clamp(22px, 2.6vw, 34px);
}

.profile-form-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.profile-form-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(183,255,32,.25);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(183,255,32,.16), rgba(56,223,66,.08));
  color: var(--green);
}

.profile-form-icon .site-icon { --icon-size: 1.35rem; }

.profile-form-head h3 {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 2vw, 2rem);
  letter-spacing: -.05em;
}

.profile-form-head p {
  margin: 0;
  color: rgba(245,255,240,.62);
  font-weight: 760;
  line-height: 1.65;
}

.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.profile-form-card label {
  display: grid;
  gap: 9px;
  color: rgba(245,255,240,.76);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.profile-form-card input,
.profile-form-card select,
.profile-form-card textarea {
  width: 100%;
  border: 1px solid rgba(183,255,32,.18);
  border-radius: 16px;
  outline: none;
  background: rgba(3,6,4,.62);
  color: var(--text);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.profile-form-card input,
.profile-form-card select {
  height: 52px;
  padding: 0 14px;
}

.profile-form-card textarea {
  min-height: 128px;
  padding: 14px;
  resize: vertical;
}

.profile-form-card input:focus,
.profile-form-card select:focus,
.profile-form-card textarea:focus {
  border-color: rgba(183,255,32,.48);
  background: rgba(7,14,7,.88);
  box-shadow: 0 0 0 4px rgba(183,255,32,.08);
}

.profile-form-card select option {
  background: #071009;
  color: var(--text);
}

.profile-wide {
  grid-column: 1 / -1;
}

.profile-badges-field {
  margin: 22px 0 0;
  padding: 18px;
  border: 1px solid rgba(183,255,32,.16);
  border-radius: 22px;
  background: rgba(255,255,255,.028);
}

.profile-badges-field legend {
  padding: 0 10px;
  color: var(--green);
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.profile-badges-field legend small {
  color: rgba(245,255,240,.46);
  font-size: .72rem;
}

.profile-badge-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-badge-options label {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(183,255,32,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: rgba(245,255,240,.72);
  font-size: .72rem;
  cursor: pointer;
}

.profile-badge-options input {
  width: 15px;
  height: 15px;
  accent-color: var(--green);
}

.profile-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.profile-save-message {
  min-height: 24px;
  margin: 16px 0 0;
  color: rgba(245,255,240,.52);
  font-weight: 850;
}

.profile-save-message.is-active {
  color: var(--green);
}

.profile-save-message.is-error {
  color: #ff8d8d;
}

.profile-locked-section {
  margin-top: 32px;
}

.profile-preview-card[data-accent="lime"] { --profile-accent: #7cff00; }
.profile-preview-card[data-accent="green"] { --profile-accent: var(--green); }
.profile-preview-card[data-accent="gold"] { --profile-accent: #ffd33d; }
.profile-preview-card[data-accent="ice"] { --profile-accent: #7ee8ff; }
.profile-preview-card[data-accent="purple"] { --profile-accent: #b86cff; }

.profile-preview-card[data-accent] .profile-card-glow {
  background: radial-gradient(circle, color-mix(in srgb, var(--profile-accent, var(--green)) 46%, transparent), transparent 64%);
}

.profile-preview-card[data-accent] .profile-banner,
.profile-preview-card[data-accent] .profile-avatar,
.profile-preview-card[data-accent] .profile-kicker,
.profile-preview-card[data-accent] .profile-status-line,
.profile-preview-card[data-accent] .profile-chip,
.profile-preview-card[data-accent] .profile-objective-card > .site-icon {
  border-color: color-mix(in srgb, var(--profile-accent, var(--green)) 34%, transparent);
}

.profile-preview-card[data-accent] .profile-kicker,
.profile-preview-card[data-accent] .profile-status-line,
.profile-preview-card[data-accent] .profile-objective-card > .site-icon {
  color: var(--profile-accent, var(--green));
}

.profile-preview-card[data-banner="city"] .profile-banner { background-image: linear-gradient(120deg, rgba(183,255,32,.18), transparent 44%), url("assets/tebex-banner.webp"); }
.profile-preview-card[data-banner="premium"] .profile-banner { background-image: linear-gradient(120deg, rgba(255,211,61,.18), transparent 44%), url("assets/flashmood-wide-art.webp"); }
.profile-preview-card[data-banner="minimal"] .profile-banner { background: linear-gradient(135deg, rgba(183,255,32,.14), rgba(255,255,255,.035)), rgba(3,6,4,.92); }
.profile-preview-card[data-banner="storm"] .profile-banner { background-image: linear-gradient(120deg, rgba(126,232,255,.18), transparent 44%), url("assets/bg-flashmood.webp"); }

@media (max-width: 1180px) {
  .profile-lab-grid {
    grid-template-columns: 1fr;
  }

  .profile-preview-card {
    position: relative;
    top: auto;
    min-height: auto;
  }
}

@media (max-width: 720px) {
  .profile-main {
    padding-bottom: 86px;
  }

  .header-auth-status {
    font-size: .58rem;
    line-height: 1.25;
  }

  .header-actions.open .header-auth-status.is-active {
    display: block;
    margin-top: 4px;
  }

  .profile-form-grid,
  .profile-stat-grid {
    grid-template-columns: 1fr;
  }

  .profile-preview-card,
  .profile-form-card {
    border-radius: 24px;
  }

  .profile-banner {
    height: 136px;
  }

  .profile-preview-top {
    align-items: center;
    margin-top: -34px;
    padding-inline: 4px;
  }

  .profile-avatar {
    width: 82px;
    height: 82px;
    flex-basis: 82px;
    border-radius: 22px;
  }

  .profile-status-line,
  .profile-actions-row {
    flex-direction: column;
  }

  .profile-actions-row .btn {
    width: 100%;
  }
}

/* =========================================================
   FINALISATION — header connecté / déconnexion propre
   ========================================================= */
.header-actions {
  align-items: center;
  max-width: min(420px, 42vw);
}

.header-actions .btn-small {
  min-width: 132px;
  white-space: nowrap;
}

.header-auth-status {
  order: 10;
  width: 100%;
  max-width: 100%;
  margin: -1px 0 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.header-auth-status.is-active {
  display: block;
}

.btn-register.is-disconnect {
  border-color: rgba(183, 255, 32, .44) !important;
  background: rgba(183, 255, 32, .09) !important;
  color: var(--text) !important;
}

.btn-register.is-disconnect:hover,
.btn-register.is-disconnect:focus-visible {
  border-color: rgba(183, 255, 32, .72) !important;
  background: linear-gradient(135deg, rgba(183, 255, 32, .18), rgba(56, 223, 66, .08)) !important;
  box-shadow: 0 0 36px rgba(183, 255, 32, .14), inset 0 0 0 1px rgba(183, 255, 32, .08);
}

.btn-register.is-loading {
  pointer-events: none;
  opacity: .78;
}

.btn > span:not(.btn-icon) {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.btn .btn-icon {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

.auth-preview-note.is-active {
  color: var(--green);
  text-shadow: 0 0 20px rgba(183,255,32,.16);
}

.profile-form-card input::placeholder,
.profile-form-card textarea::placeholder {
  color: rgba(245,255,240,.38);
}

@media (max-width: 1180px) {
  .header-actions {
    max-width: min(390px, 44vw);
  }

  .header-actions .btn-small {
    min-width: 122px;
  }
}

@media (max-width: 980px) {
  .header-actions {
    max-width: none;
  }

  .header-actions.open .btn-small {
    min-width: 0;
  }

  .header-auth-status,
  .header-actions.open .header-auth-status {
    width: 100%;
    max-width: 100%;
    margin-top: 6px;
    text-align: center;
    white-space: normal;
  }
}

/* =========================================================
   UPDATE — menu compte connecté + correction icône unique
   ========================================================= */
.site-icon > :not(:last-child) {
  display: none !important;
}

.header-account-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}

.header-account-dropdown .btn-register {
  position: relative;
  z-index: 2;
}

.header-account-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 1200;
  display: grid;
  gap: 10px;
  min-width: 278px;
  padding: 11px;
  border: 1px solid rgba(183,255,32,.20);
  border-radius: 20px;
  background:
    radial-gradient(circle at 82% 0%, rgba(183,255,32,.13), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.014)),
    rgba(3, 7, 4, .965);
  box-shadow: 0 28px 90px rgba(0,0,0,.48), 0 0 46px rgba(183,255,32,.09);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.985);
  pointer-events: none;
  transition: opacity 170ms ease, visibility 170ms ease, transform 170ms ease;
}

.header-account-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 30px;
  width: 12px;
  height: 12px;
  border-left: 1px solid rgba(183,255,32,.20);
  border-top: 1px solid rgba(183,255,32,.20);
  background: rgba(3, 7, 4, .965);
  transform: rotate(45deg);
}

.header-account-dropdown.is-authenticated:hover .header-account-menu,
.header-account-dropdown.is-authenticated:focus-within .header-account-menu,
.header-account-dropdown.is-authenticated.is-open .header-account-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.header-account-menu-head {
  display: grid;
  gap: 4px;
  padding: 12px 13px 11px;
  border: 1px solid rgba(183,255,32,.12);
  border-radius: 16px;
  background: rgba(183,255,32,.055);
}

.header-account-menu-head span {
  color: rgba(245,255,240,.50);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .115em;
  text-transform: uppercase;
}

.header-account-menu-head strong {
  color: var(--green);
  font-size: .93rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-account-menu-link {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(183,255,32,.13);
  border-radius: 16px;
  background: rgba(0,0,0,.24);
  color: rgba(245,255,240,.88);
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease, color 170ms ease;
}

.header-account-menu-link:hover,
.header-account-menu-link:focus-visible {
  color: var(--green);
  border-color: rgba(183,255,32,.42);
  background: rgba(183,255,32,.085);
  transform: translateY(-1px);
  outline: none;
}

.header-account-menu-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: var(--green);
  background: rgba(183,255,32,.10);
  box-shadow: inset 0 0 0 1px rgba(183,255,32,.12);
}

.header-account-menu-icon .site-icon {
  --icon-size: 1.05rem;
  --icon-stroke: 2.15;
}

.header-account-menu-link b,
.header-account-menu-link small {
  display: block;
}

.header-account-menu-link b {
  font-size: .91rem;
  font-weight: 950;
  letter-spacing: -.015em;
}

.header-account-menu-link small {
  margin-top: 3px;
  color: rgba(245,255,240,.50);
  font-size: .71rem;
  font-weight: 800;
  line-height: 1.25;
}

.header-account-dropdown:not(.is-authenticated) .header-account-menu {
  display: none;
}

.header-account-dropdown.is-authenticated .btn-register.is-disconnect {
  min-width: 144px;
}

@media (max-width: 980px) {
  .header-account-dropdown {
    width: 100%;
    display: grid;
  }

  .header-account-dropdown .btn-register {
    width: 100%;
  }

  .header-account-menu {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    transform: translateY(-4px);
  }

  .header-account-menu::before {
    display: none;
  }

  .header-account-dropdown.is-authenticated:hover .header-account-menu,
  .header-account-dropdown.is-authenticated:focus-within .header-account-menu,
  .header-account-dropdown.is-authenticated.is-open .header-account-menu {
    transform: translateY(0);
  }
}

/* =========================================================
   UPDATE FINALE — header stable, menu compte fluide, finitions UI
   ========================================================= */
@media (min-width: 981px) {
  .site-header {
    display: grid !important;
    grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr) !important;
    align-items: center !important;
    column-gap: clamp(14px, 2vw, 28px) !important;
  }

  .site-header .brand {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .site-header .nav-links {
    grid-column: 2 !important;
    justify-self: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .site-header .header-actions {
    grid-column: 3 !important;
    justify-self: end !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
    max-width: min(440px, 34vw) !important;
  }

  .site-header .header-auth-status {
    flex: 0 0 100% !important;
    min-width: 0 !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .site-header {
    grid-template-columns: minmax(205px, 1fr) auto minmax(205px, 1fr) !important;
  }

  .site-header .header-actions {
    max-width: 360px !important;
  }
}

@media (max-width: 980px) {
  .site-header {
    display: flex !important;
  }
}

.header-account-dropdown.is-authenticated::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: max(100%, 278px);
  height: 18px;
  pointer-events: auto;
}

.header-account-menu {
  top: calc(100% + 8px) !important;
  transition:
    opacity 190ms ease,
    visibility 190ms ease,
    transform 190ms cubic-bezier(.2,.8,.2,1) !important;
}

.header-account-dropdown.is-authenticated.is-open .btn-register.is-disconnect,
.header-account-dropdown.is-authenticated:hover .btn-register.is-disconnect,
.header-account-dropdown.is-authenticated:focus-within .btn-register.is-disconnect {
  border-color: rgba(183,255,32,.70) !important;
  background: linear-gradient(135deg, rgba(183,255,32,.17), rgba(56,223,66,.06)) !important;
  box-shadow: 0 0 34px rgba(183,255,32,.11), inset 0 0 0 1px rgba(183,255,32,.08) !important;
}

.btn-register .btn-icon + .btn-icon,
.btn-register > .site-icon,
.btn-register > svg,
.btn-register > img {
  display: none !important;
}

.btn-register .btn-icon {
  width: 1.05rem !important;
  min-width: 1.05rem !important;
  overflow: hidden !important;
}

.btn-register .btn-icon .site-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 1.05rem !important;
  height: 1.05rem !important;
}

.btn-register .btn-icon .site-icon > svg,
.btn-register .btn-icon .site-icon > img {
  grid-area: 1 / 1 !important;
}

.btn-register .btn-icon .site-icon > :not(:last-child) {
  display: none !important;
}

.header-account-menu-link,
.patch-feature-card,
.timeline-item,
.profile-form-card,
.profile-preview-card,
.trust-item,
.shop-floating-card {
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .patch-feature-card:hover,
  .timeline-item:hover,
  .profile-form-card:hover,
  .profile-preview-card:hover,
  .trust-item:hover {
    transform: translateY(-3px);
  }

  .shop-floating-card:hover {
    transform: translateY(-4px) scale(1.015);
  }
}

html.is-ready .hero-store-copy,
html.is-ready .patch-hero-copy,
html.is-ready .profile-form-card,
html.is-ready .profile-preview-card {
  animation: fmSoftIntro 520ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes fmSoftIntro {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.is-ready .hero-store-copy,
  html.is-ready .patch-hero-copy,
  html.is-ready .profile-form-card,
  html.is-ready .profile-preview-card,
  .patch-feature-card,
  .timeline-item,
  .profile-form-card,
  .profile-preview-card,
  .trust-item,
  .shop-floating-card {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}