/* ==================================================================
   COUCHE PREMIUM — chargée sur toutes les pages SAUF index.html
   Rehausse l'existant : ambiance, verre dépoli, reflets, animations.
   ================================================================== */

/* ==================================================================
   FOND VIDÉO DU SITE (injecté par premium.js sur les pages de contenu)
   ================================================================== */
html { background: #07090f; } /* base affichée tant que la vidéo charge */
body.has-site-bg { background: transparent !important; }
/* La vidéo remplace l'ambiance dégradé/grain sur ces pages */
body.has-site-bg::before, body.has-site-bg::after { display: none; }
.site-bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -3; pointer-events: none;
}
.site-bg-dim {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  /* Voile modéré : la vidéo reste bien visible, le texte reste lisible */
  background:
    radial-gradient(1000px 600px at 50% -10%, rgba(74,222,128,.08), transparent 60%),
    linear-gradient(180deg, rgba(7,9,15,.45) 0%, rgba(7,9,15,.62) 55%, rgba(7,9,15,.82) 100%);
}

/* ---------- Ambiance lumineuse de fond (fixe, très discrète) ---------- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(74, 222, 128, 0.07), transparent 60%),
    radial-gradient(800px 520px at 95% 10%, rgba(59, 130, 246, 0.055), transparent 60%),
    radial-gradient(1000px 600px at 50% 115%, rgba(251, 191, 36, 0.045), transparent 60%);
}
/* Grain très léger : matifie les dégradés (rend le noir "riche") */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Sélection, scrollbar, focus ---------- */
::selection { background: rgba(74, 222, 128, 0.28); color: #fff; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #0a0d13; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #253044, #1a2130);
  border-radius: 8px; border: 2.5px solid #0a0d13;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #2f3d55, #232c3f); }
:focus-visible { outline: 2px solid rgba(74, 222, 128, 0.65); outline-offset: 2px; border-radius: 6px; }

/* ==================================================================
   HEADER DU SITE (reconstruit par premium.js) : Discord | logo | liens | Launcher
   ================================================================== */
.nav {
  background: rgba(7, 9, 15, 0.72) !important;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-site { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nav-side { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.nav-side-l { justify-content: flex-start; }
.nav-side-r { justify-content: flex-end; }

/* Liens de catégorie : couleur simple, AUCUN halo/soulignement */
.nav-side a:not(.nav-dl):not(.nav-discord-btn) {
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: 13.5px;
  padding: 9px 13px; border-radius: 10px; white-space: nowrap;
  transition: color 0.15s;
}
.nav-side a:not(.nav-dl):not(.nav-discord-btn):hover { color: #fff; }
.nav-side a.active { color: var(--accent); }

/* Logo central */
.nav-center-logo { flex: none; display: flex; align-items: center; padding: 0 6px; }
.nav-center-logo img {
  height: 42px; width: auto; display: block;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s;
}
.nav-center-logo:hover img { transform: scale(1.05); }

/* Launcher : plein, sans halo excessif */
.nav-dl {
  background: linear-gradient(135deg, #86efac, var(--accent) 55%, var(--accent-dark)) !important;
  transition: transform 0.15s, filter 0.15s;
}
.nav-dl:hover { transform: translateY(-1px); filter: brightness(1.06); }

.nav-drawer { display: none; }

/* --- Mobile : Discord + logo + hamburger, le reste dans un tiroir --- */
@media (max-width: 900px) {
  .nav-site { justify-content: space-between; }
  .nav-side a:not(.nav-discord-btn) { display: none; }   /* liens + launcher → tiroir */
  .nav-side { flex: 0 0 auto; }
  .nav-burger { display: inline-flex; }
  .nav-drawer {
    display: flex; flex-direction: column; gap: 3px;
    position: fixed; top: 56px; left: 0; right: 0;
    background: rgba(7, 9, 15, 0.98);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    padding: 12px 16px 18px; max-height: calc(100vh - 56px); overflow-y: auto;
    transform: translateY(-130%);
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1); z-index: 90;
  }
  .nav.nav-open .nav-drawer { transform: translateY(0); }
  .nav-drawer a {
    color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px;
    padding: 13px 14px; border-radius: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .nav-drawer a:last-child { border-bottom: none; }
  .nav-drawer a.active { color: var(--accent); }
  .nav-drawer .nav-dl { text-align: center; margin-top: 8px; color: #052e16 !important; }
}

/* ---------- Titres de héros : dégradé subtil + halo ---------- */
.news-hero h1, .staff-hero h1, .shop-header h1, .dl-content h1, .guide-hero h1 {
  background: linear-gradient(180deg, #ffffff 30%, #c7d2e0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}
.news-hero h1 .c2, .staff-hero h1 .c2, .shop-header h1 .c2 {
  background: linear-gradient(180deg, #86efac, var(--accent) 55%, var(--accent-dark));
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 22px rgba(74, 222, 128, 0.35));
}

/* Séparateur lumineux sous les héros */
.news-hero, .staff-hero, .shop-header { position: relative; }
.news-hero::after, .staff-hero::after, .shop-header::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(520px, 70%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.4), transparent);
}

/* ---------- Cartes : verre + liseré haut + reflet balayé ---------- */
.news-article, .staff-card, .prod, .step, .pseudo-box,
.auth-card, .sp-col, .gc-article {
  position: relative;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)) padding-box,
    var(--panel) padding-box;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}
/* Liseré lumineux en haut de chaque carte */
.news-article::before, .staff-card::before, .prod::before, .step::before,
.auth-card::before, .sp-col::before, .gc-article::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  pointer-events: none;
}
/* Reflet qui balaie la carte au survol */
@keyframes sheen {
  from { transform: translateX(-130%) skewX(-18deg); }
  to   { transform: translateX(240%) skewX(-18deg); }
}
.prod::after, .news-article::after, .staff-card::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.prod:hover::after, .news-article:hover::after, .staff-card:hover::after {
  animation: sheen 0.9s ease;
}

/* ---------- Boutons premium ---------- */
.dl-btn, .btn-buy, .btn-auth, .btn-checkout {
  position: relative;
  background: linear-gradient(135deg, #86efac, var(--accent) 50%, var(--accent-dark)) !important;
  box-shadow: 0 6px 22px rgba(74, 222, 128, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.15s, box-shadow 0.2s, filter 0.15s;
}
.dl-btn:hover, .btn-buy:hover, .btn-auth:hover, .btn-checkout:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(74, 222, 128, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  filter: brightness(1.05);
}
.dl-btn:active, .btn-buy:active, .btn-auth:active, .btn-checkout:active {
  transform: translateY(0) scale(0.985);
}

/* ---------- Apparition au défilement ---------- */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- Pied de page enrichi ---------- */
footer {
  position: relative;
  margin-top: 30px;
  padding: 34px 20px 40px !important;
  border-top: none !important;
  background: linear-gradient(180deg, transparent, rgba(10, 13, 19, 0.85));
}
footer::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(720px, 88%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.35), transparent);
}

/* ==================================================================
   BOUTIQUE ÉPURÉE — même esprit que l'accueil : simple, premium,
   avec la lueur colorée au survol.
   ================================================================== */

/* Badge « populaire » : chip DANS la carte (il était coupé par overflow) */
.prod .prod-badge {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #fde68a, var(--gold) 60%, #d97706) !important;
  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.4);
}
.prod:has(.prod-badge) { padding-top: 52px; }

/* Écrin doré discret pour le produit populaire */
.prod:has(.prod-badge) {
  border-color: rgba(251, 191, 36, 0.4);
}
.prod:has(.prod-badge):hover {
  border-color: var(--gold);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(251, 191, 36, 0.22);
}

/* Icône produit : médaillon discret teinté de la couleur du produit */
.prod-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; margin: 0 auto 12px; border-radius: 50%;
  font-size: 36px !important;
  background: color-mix(in srgb, var(--p-color, var(--accent)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--p-color, var(--accent)) 22%, transparent);
  transition: box-shadow 0.25s, transform 0.2s;
}
.prod:hover .prod-icon {
  transform: scale(1.06);
  box-shadow: 0 0 26px color-mix(in srgb, var(--p-color, var(--accent)) 30%, transparent);
}

/* Prix : plus fin, la couleur suffit */
.prod-price { font-weight: 800 !important; letter-spacing: -0.5px; }

/* Bouton « Ajouter au panier » : fantôme, se remplit au survol avec lueur */
.btn-add {
  background: color-mix(in srgb, var(--p-color, var(--accent)) 10%, transparent) !important;
  color: var(--p-color, var(--accent)) !important;
  border: 1px solid color-mix(in srgb, var(--p-color, var(--accent)) 38%, transparent) !important;
  font-weight: 700 !important;
  transition: background 0.18s, color 0.18s, box-shadow 0.22s, transform 0.12s !important;
}
.btn-add:hover {
  background: var(--p-color, var(--accent)) !important;
  color: #10130a !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--p-color, var(--accent)) 40%, transparent);
  filter: none !important;
}
.btn-add.added {
  background: rgba(74, 222, 128, 0.12) !important;
  color: var(--accent) !important;
  border-color: rgba(74, 222, 128, 0.4) !important;
  box-shadow: none;
}

/* Pilules de catégories : fantômes, la sélection s'illumine */
.cat {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.cat:hover { border-color: rgba(255, 255, 255, 0.25) !important; }
.cat.active {
  background: linear-gradient(135deg, #86efac, var(--accent) 55%, var(--accent-dark)) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px rgba(74, 222, 128, 0.35);
}

/* Cartes produits : lueur colorée au survol (comme l'accueil) */
.prod:hover {
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4),
              0 0 32px color-mix(in srgb, var(--p-color, var(--accent)) 22%, transparent);
}

/* Bouton hamburger (base) — affiché en mobile via le bloc header plus haut */
.nav-burger {
  display: none; background: none; border: none; color: var(--text);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 10px;
  border-radius: 8px; transition: background .15s;
}
.nav-burger:hover { background: rgba(255, 255, 255, 0.08); }

/* ---------- Confort : réduire les animations si demandé ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .prod:hover::after, .news-article:hover::after, .staff-card:hover::after { animation: none; }
  * { scroll-behavior: auto !important; }
}