:root{
  --bg:#060d16;
  --bg-alt:#0a1522;
  --panel:rgba(255,255,255,0.045);
  --panel-hover:rgba(255,255,255,0.075);
  --border:rgba(255,255,255,0.09);
  --text:#eaf4fb;
  --text-dim:#93a9be;
  --ice:#5fd0ff;
  --ice-2:#bfeaff;
  --indigo:#818cf8;
  --purple:#c4b5fd;
  --gold:#ffd76a;
  --gold-2:#ffb020;
  --radius:16px;
  --maxw:1180px;
  font-size:16px;
}

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

html{scroll-behavior:smooth;scroll-padding-top:90px}

body{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:32px 32px;
  color:var(--text);
  font-family:'Poppins',system-ui,sans-serif;
  line-height:1.5;
  overflow-x:hidden;
  min-height:100vh;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

.pixel{font-family:'Press Start 2P',monospace}

/* ---------- Barre de défilement personnalisée ---------- */
html{scrollbar-color:#2a4258 var(--bg-alt); scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg-alt)}
::-webkit-scrollbar-thumb{background:#2a4258;border-radius:8px;border:2px solid var(--bg-alt)}
::-webkit-scrollbar-thumb:hover{background:var(--ice)}

#snow-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  opacity:0.6;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  padding:12px 22px;
  border-radius:8px;
  font-weight:700;
  font-size:0.95rem;
  transition:transform .12s ease, box-shadow .12s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:8px 16px;font-size:0.82rem}
.btn-lg{padding:14px 28px;font-size:1rem}

.btn-primary{
  background:linear-gradient(135deg,var(--ice),#3b82f6);
  color:#04101c;
  box-shadow:0 8px 24px -8px rgba(95,208,255,0.6), inset 0 2px 0 rgba(255,255,255,0.35), inset 0 -3px 0 rgba(0,0,0,0.2);
}
.btn-primary:hover{box-shadow:0 12px 28px -6px rgba(95,208,255,0.75), inset 0 2px 0 rgba(255,255,255,0.35), inset 0 -3px 0 rgba(0,0,0,0.2)}

.btn-outline{
  border:1.5px solid var(--border);
  color:var(--text);
  background:rgba(255,255,255,0.02);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -2px 0 rgba(0,0,0,0.18);
}
.btn-outline:hover{border-color:var(--ice);background:rgba(95,208,255,0.08)}

.btn-ghost{
  border:1.5px solid rgba(255,255,255,0.16);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -2px 0 rgba(0,0,0,0.18);
}
.btn-ghost:hover{background:rgba(255,255,255,0.08)}

.btn-gold{
  background:linear-gradient(135deg,#fff3cf,var(--gold),var(--gold-2));
  color:#3a2600;
  box-shadow:0 8px 24px -8px rgba(255,183,32,0.55), inset 0 2px 0 rgba(255,255,255,0.5), inset 0 -3px 0 rgba(0,0,0,0.2);
}

.btn:disabled{opacity:0.6;cursor:not-allowed;transform:none}

.rank-btn{width:100%;margin-top:auto}

/* ---------- Navbar ---------- */
.navbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:rgba(6,13,22,0.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:background .25s ease, padding .25s ease;
}
.navbar.scrolled{background:rgba(6,13,22,0.85)}

.nav-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  gap:24px;
}

.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{
  width:40px;height:40px;
  border-radius:9px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,0.15);
  box-shadow:0 2px 8px -2px rgba(0,0,0,0.5);
}
.brand-text{font-weight:700;font-size:1.15rem;letter-spacing:0.5px}
.brand-text b{color:var(--ice);font-weight:800}

.nav-links{display:flex;gap:28px;margin:0 auto;font-weight:500;font-size:0.95rem}
.nav-links a{color:var(--text-dim);transition:color .15s ease}
.nav-links a:hover{color:var(--text)}

.nav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}

.ip-chip{
  display:flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;
  border:1px solid var(--border);
  font-size:0.85rem;font-weight:600;
  background:rgba(255,255,255,0.03);
  transition:border-color .15s ease,background .15s ease;
}
.ip-chip:hover{border-color:var(--ice);background:rgba(95,208,255,0.08)}

.ip-dot{width:8px;height:8px;border-radius:50%;background:#5b6b7a;flex-shrink:0;transition:background .3s ease,box-shadow .3s ease}
.ip-dot.online{background:#4ade80;box-shadow:0 0 8px 1px rgba(74,222,128,0.7)}
.ip-dot.offline{background:#f87171;box-shadow:0 0 8px 1px rgba(248,113,113,0.6)}

.burger{display:none;flex-direction:column;gap:5px;width:24px}
.burger span{display:block;height:2px;width:100%;background:var(--text);border-radius:2px;transition:transform .2s ease,opacity .2s ease}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:140px 24px 80px;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 15%, rgba(95,208,255,0.2), transparent 60%),
    linear-gradient(180deg, rgba(4,9,15,0.58) 0%, rgba(6,14,23,0.75) 38%, rgba(6,14,23,0.9) 72%, rgba(6,14,23,0.97) 100%),
    url('../assets/hero-mountains.png') center 60% / cover no-repeat;
}

.hero-peaks{
  position:absolute;
  left:0;right:0;bottom:-2px;
  height:220px;
  z-index:0;
  opacity:0.9;
}
.hero-peaks svg{width:100%;height:100%}
.hero-peaks path{fill:#0a1c2e}

.hero-content{position:relative;z-index:2;max-width:760px}

.hero-tag{
  font-size:0.78rem;
  letter-spacing:3px;
  color:var(--ice-2);
  font-weight:600;
  margin-bottom:18px;
  opacity:0.85;
}

.hero-title{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(1.5rem,8vw,4.2rem);
  line-height:1.3;
  color:#f4fbff;
  text-shadow:0 0 30px rgba(95,208,255,0.35), 0 0 70px rgba(95,208,255,0.15);
  margin-bottom:22px;
  max-width:100%;
  overflow-wrap:break-word;
}
.hero-title span{
  background:linear-gradient(120deg,var(--ice),var(--purple),var(--ice));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-sub{
  color:var(--text-dim);
  font-size:1.1rem;
  margin-bottom:38px;
}

.hero-ip-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:26px;
}

.ip-box{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:11px 22px;
  border-radius:14px;
  border:1.5px solid var(--border);
  background:rgba(255,255,255,0.04);
  transition:border-color .15s ease, background .15s ease;
}
.ip-box:hover{border-color:var(--ice);background:rgba(95,208,255,0.08)}
.ip-box-label{font-size:0.62rem;letter-spacing:1.5px;color:var(--text-dim)}
.ip-box-value{font-size:1.05rem;font-weight:700;color:var(--ice-2)}

.hero-status{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:0.85rem;
  color:var(--text-dim);
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  padding:8px 16px;
  border-radius:999px;
}

/* ---------- Strip ---------- */
.strip{
  position:relative;z-index:2;
  background:var(--bg-alt);
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:22px 24px;
}
.strip-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  gap:18px;
}
.strip-item{
  display:flex;align-items:center;gap:10px;
  color:var(--text-dim);
  font-size:0.88rem;
  font-weight:500;
}
.strip-item svg{color:var(--ice);flex-shrink:0}

/* ---------- Sections ---------- */
.section{
  position:relative;z-index:2;
  max-width:var(--maxw);
  margin:0 auto;
  padding:100px 24px;
}
.section-alt{background:linear-gradient(180deg,transparent, rgba(95,208,255,0.03), transparent)}

.section-head{text-align:center;max-width:640px;margin:0 auto 56px}
.eyebrow{color:var(--ice);font-weight:600;font-size:0.85rem;letter-spacing:2px;margin-bottom:12px;text-transform:uppercase}
.section-head h2{font-size:clamp(2.1rem,5vw,3.2rem);font-weight:800;margin-bottom:14px}
.section-sub{color:var(--text-dim);font-size:1rem}

.billing-toggle{
  display:inline-flex;
  margin-top:28px;
  padding:5px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
}
.toggle-btn{
  padding:9px 22px;
  border-radius:999px;
  font-weight:600;
  font-size:0.9rem;
  color:var(--text-dim);
  transition:background .2s ease,color .2s ease;
}
.toggle-btn.active{
  background:linear-gradient(135deg,var(--ice),#3b82f6);
  color:#04101c;
}

/* ---------- Rank cards ---------- */
.ranks-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}

.rank-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:28px 24px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.04), inset 0 -2px 0 rgba(0,0,0,0.22);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.rank-card > .item-icon{align-self:center;margin-bottom:18px}
.rank-card:hover{transform:translateY(-6px);background:var(--panel-hover);border-color:rgba(95,208,255,0.35)}

.rank-head{margin-bottom:14px;text-align:center}
.rank-badge{
  display:inline-block;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.5px;
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:10px;
  background:rgba(95,208,255,0.12);
  color:var(--ice-2);
}
.rank-card[data-rank="frost"] .rank-badge{background:rgba(125,211,252,0.15);color:#7dd3fc}
.rank-card[data-rank="blizzard"] .rank-badge{background:rgba(99,102,241,0.18);color:#a5b4fc}
.rank-card[data-rank="snow"] .rank-badge{
  background:linear-gradient(120deg,rgba(224,242,254,0.25),rgba(56,189,248,0.25));
  color:#e0f2fe;
}
.rank-card[data-rank="winter"] .rank-badge{
  background:linear-gradient(120deg,rgba(196,181,253,0.3),rgba(103,232,249,0.3));
  color:#e9e4ff;
  animation:shimmer 3s ease infinite;
  background-size:200% 200%;
}
.rank-card[data-rank="patron"] .rank-badge{
  background:linear-gradient(120deg,#fff3cf,var(--gold),var(--gold-2));
  color:#3a2600;
  animation:shimmer 3s ease infinite;
  background-size:200% 200%;
}
@keyframes shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.rank-head h3{font-size:2.3rem;font-weight:800}

@keyframes titleShine{
  0%{background-position:160% 0}
  100%{background-position:-60% 0}
}
.rank-card[data-rank="frost"] .rank-head h3,
.rank-card[data-rank="winter"] .rank-head h3,
.rank-card[data-rank="blizzard"] .rank-head h3,
.rank-card[data-rank="snow"] .rank-head h3{
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:titleShine 3.2s linear infinite;
}
.rank-card[data-rank="frost"] .rank-head h3{background-image:linear-gradient(100deg, #5CCBFF 30%, #ffffff 48%, #5CCBFF 66%)}
.rank-card[data-rank="winter"] .rank-head h3{background-image:linear-gradient(100deg, #7AA7FF 30%, #ffffff 48%, #7AA7FF 66%)}
.rank-card[data-rank="blizzard"] .rank-head h3{background-image:linear-gradient(100deg, #9B7BFF 30%, #ffffff 48%, #9B7BFF 66%)}
.rank-card[data-rank="snow"] .rank-head h3{background-image:linear-gradient(100deg, #D8F3FF 30%, #ffffff 48%, #D8F3FF 66%)}

/* ---------- Titre animé (section + noms de clés) ---------- */
.shine-title{
  font-size:clamp(2.1rem,5vw,3.2rem);
  font-weight:800;
  margin-bottom:14px;
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:titleShine 3.2s linear infinite;
}
.shine-ice{background-image:linear-gradient(100deg, #5fd0ff 30%, #ffffff 48%, #5fd0ff 66%)}

.key-card[data-item="key_spawner"] h3,
.key-card[data-item="key_snow"] h3,
.key-card[data-item="key_amethyst"] h3,
.key-card[data-item="key_winter"] h3,
.key-card[data-item="key_koth"] h3,
.key-card[data-item="key_patron"] h3,
.key-card[data-item="key_divine"] h3,
.key-card[data-item="key_random"] h3{
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:titleShine 3.2s linear infinite;
}
.key-card[data-item="key_spawner"] h3{background-image:linear-gradient(100deg, #a0a0a8 30%, #ffffff 48%, #a0a0a8 66%)}
.key-card[data-item="key_snow"] h3{background-image:linear-gradient(100deg, #bfeaf7 30%, #ffffff 48%, #bfeaf7 66%)}
.key-card[data-item="key_amethyst"] h3{background-image:linear-gradient(100deg, #c084fc 30%, #ffffff 48%, #c084fc 66%)}
.key-card[data-item="key_winter"] h3{background-image:linear-gradient(100deg, #67e8f9 30%, #ffffff 48%, #67e8f9 66%)}
.key-card[data-item="key_koth"] h3{background-image:linear-gradient(100deg, #fb923c 30%, #ffffff 48%, #fb923c 66%)}
.key-card[data-item="key_patron"] h3{background-image:linear-gradient(100deg, #e0a530 30%, #ffffff 48%, #e0a530 66%)}
.key-card[data-item="key_divine"] h3{background-image:linear-gradient(100deg, #ffd76a 30%, #ffffff 48%, #ffd76a 66%)}
.key-card[data-item="key_random"] h3{background-image:linear-gradient(100deg, #f472b6 30%, #ffffff 48%, #f472b6 66%)}

.rank-tagline{color:var(--text-dim);font-size:0.85rem;margin-bottom:10px;font-style:italic}

.rank-price{display:flex;align-items:baseline;gap:6px;margin-bottom:20px}
.price-val{font-size:2rem;font-weight:800;color:#fff}
.price-period{color:var(--text-dim);font-size:0.9rem}

.rank-perks{margin-bottom:24px;flex-grow:1}
.rank-perks li{
  position:relative;
  padding-left:24px;
  margin-bottom:11px;
  font-size:0.9rem;
  color:var(--text-dim);
  line-height:1.4;
}
.rank-perks li::before{
  content:"✓";
  position:absolute;left:0;top:0;
  color:var(--ice);
  font-weight:700;
}
.rank-perks li b{color:var(--text);font-weight:600}

.rank-card.featured{
  border-color:rgba(129,140,248,0.4);
  background:linear-gradient(180deg,rgba(129,140,248,0.08),var(--panel));
}
.rank-card.legendary{
  border-color:rgba(255,183,32,0.4);
  background:linear-gradient(180deg,rgba(255,183,32,0.08),var(--panel));
}

.rank-ribbon{
  position:absolute;
  top:-12px;right:20px;
  background:linear-gradient(135deg,var(--indigo),#6366f1);
  color:#fff;
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.5px;
  padding:5px 14px;
  border-radius:999px;
  box-shadow:0 4px 12px -2px rgba(99,102,241,0.6);
}
.rank-ribbon.gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#3a2600;
  box-shadow:0 4px 12px -2px rgba(255,183,32,0.6);
}

/* ---------- Patron banner (full-width) ---------- */
.patron-banner{
  width:100%;
  margin-top:24px;
  padding:36px 40px;
}
.patron-layout{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:36px;
}
.patron-left{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  min-width:170px;
}
.patron-left .item-icon{margin-bottom:14px}
.patron-perks{
  flex:1 1 320px;
  display:grid;
  grid-template-columns:repeat(2,minmax(180px,1fr));
  gap:11px 28px;
  margin:0;
}
.patron-right{
  flex:0 0 220px;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:stretch;
}

@media (max-width:820px){
  .patron-layout{justify-content:center;text-align:center}
  .patron-left{align-items:center}
  .patron-perks{grid-template-columns:1fr;text-align:left}
  .patron-right{width:100%}
}

/* ---------- Keys ---------- */
.keys-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  margin-bottom:20px;
}

.key-card,.extra-card{
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:26px 22px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.04), inset 0 -2px 0 rgba(0,0,0,0.22);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.key-card:hover,.extra-card:hover{transform:translateY(-5px);background:var(--panel-hover);border-color:rgba(95,208,255,0.3)}

.key-card > .item-icon,.extra-card > .item-icon{margin-bottom:14px}
.key-card h3,.extra-card h3{font-size:1.4rem;font-weight:700;margin-bottom:8px}
.key-card p,.extra-card p{color:var(--text-dim);font-size:0.87rem;margin-bottom:20px}

.key-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.key-price{font-size:1.15rem;font-weight:800;color:#fff}
.key-price.big{font-size:1.5rem;color:var(--ice-2)}

.pack-card{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:linear-gradient(120deg,rgba(95,208,255,0.1),rgba(196,181,253,0.1));
  border:1.5px solid rgba(95,208,255,0.35);
  border-radius:10px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.06), inset 0 -2px 0 rgba(0,0,0,0.2);
  padding:28px 30px;
}
.pack-info{display:flex;align-items:center;gap:18px}
.pack-info h3{font-size:1.3rem;font-weight:800;margin-bottom:6px}
.pack-info p{color:var(--text-dim);font-size:0.9rem}
.pack-foot{display:flex;align-items:center;gap:20px}

.extra-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
}

/* ---------- CTA ---------- */
.cta{
  position:relative;z-index:2;
  margin:40px auto;
  max-width:var(--maxw);
  background:linear-gradient(135deg,rgba(95,208,255,0.12),rgba(196,181,253,0.1));
  border:1px solid rgba(95,208,255,0.25);
  border-radius:24px;
  padding:70px 24px;
  text-align:center;
}
.cta-inner{max-width:600px;margin:0 auto}
.cta h2{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(1rem,2.5vw,1.4rem);
  margin-bottom:16px;
  color:var(--ice-2);
}
.cta p{color:var(--text-dim);margin-bottom:30px}

/* ---------- FAQ ---------- */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel);
  overflow:hidden;
}
.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  font-weight:600;
  font-size:0.95rem;
  text-align:left;
}
.faq-arrow{color:var(--ice);font-size:1.2rem;transition:transform .2s ease;flex-shrink:0}
.faq-item.open .faq-arrow{transform:rotate(45deg)}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease, padding .25s ease;
  padding:0 22px;
  color:var(--text-dim);
  font-size:0.9rem;
}
.faq-item.open .faq-a{max-height:340px;padding:0 22px 20px}
.faq-a a{color:var(--ice);font-weight:600}

/* ---------- Footer ---------- */
.footer{
  position:relative;z-index:2;
  border-top:1px solid rgba(255,255,255,0.07);
  padding:50px 24px 24px;
  background:var(--bg-alt);
}
.footer-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:30px;
}
.footer-brand p{color:var(--text-dim);font-size:0.85rem;margin-top:4px}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-links a{color:var(--text-dim);font-size:0.9rem;transition:color .15s ease}
.footer-links a:hover{color:var(--ice)}
.footer-legal{
  text-align:center;
  color:var(--text-dim);
  font-size:0.78rem;
  max-width:var(--maxw);
  margin:0 auto;
  border-top:1px solid rgba(255,255,255,0.05);
  padding-top:20px;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;
  bottom:28px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:#0d2338;
  border:1px solid rgba(95,208,255,0.4);
  color:var(--ice-2);
  padding:12px 22px;
  border-radius:999px;
  font-size:0.9rem;
  font-weight:600;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:200;
  box-shadow:0 10px 30px -8px rgba(0,0,0,0.5);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Promo alert ---------- */
.promo-alert{
  position:fixed;
  bottom:28px;left:28px;
  z-index:250;
  max-width:320px;
  padding:18px 40px 18px 18px;
  border-radius:12px;
  background:#101c2c;
  border:1px solid rgba(255,183,32,0.4);
  box-shadow:0 20px 50px -15px rgba(0,0,0,0.6);
  animation:promoIn .4s ease;
}
.promo-alert[hidden]{display:none}
@keyframes promoIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.promo-alert-title{font-weight:800;font-size:0.95rem;margin-bottom:6px;color:var(--gold)}
.promo-alert-text{font-size:0.83rem;color:var(--text-dim);line-height:1.4}
.promo-alert-close{
  position:absolute;top:10px;right:10px;
  width:24px;height:24px;
  border-radius:6px;
  background:rgba(255,255,255,0.06);
  color:var(--text-dim);
  font-size:0.8rem;
  display:flex;align-items:center;justify-content:center;
}
.promo-alert-close:hover{background:rgba(255,255,255,0.14);color:var(--text)}

@media (max-width:480px){
  .promo-alert{left:16px;right:16px;bottom:16px;max-width:none}
}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav-links{
    position:fixed;
    top:64px;left:0;right:0;
    background:rgba(6,13,22,0.98);
    backdrop-filter:blur(14px);
    flex-direction:column;
    align-items:center;
    padding:24px;
    gap:20px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    transform:translateY(-130%);
    transition:transform .25s ease;
  }
  .nav-links.open{transform:translateY(0)}
  .burger{display:flex}
  .ip-chip{display:none}
  .login-chip span:last-child{display:none}
}

@media (max-width:640px){
  .hero{padding-top:120px}
  .pack-card{flex-direction:column;align-items:flex-start}
  .pack-foot{width:100%;justify-content:space-between}
  .section{padding:70px 20px}
}

@media (max-width:420px){
  .hero{padding-left:16px;padding-right:16px}
  .hero-title{font-size:clamp(1.2rem,9vw,1.9rem);word-break:break-word}
  .hero-title span{display:block}
}

/* ---------- Pixel corners & GUI panel ---------- */
.pixel-corners{
  clip-path:polygon(
    0 8px, 8px 8px, 8px 0,
    calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px)
  );
}

.mc-panel{
  background:#101c2c;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0.08),
    inset 0 -3px 0 rgba(0,0,0,0.35),
    inset 3px 0 0 rgba(255,255,255,0.05),
    inset -3px 0 0 rgba(0,0,0,0.25),
    0 24px 60px -16px rgba(0,0,0,0.65);
}

/* ---------- Item icons (voxel cubes) ---------- */
.item-icon{
  position:relative;
  display:inline-flex;
  width:52px;height:52px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.35));
}

/* Effet "objet enchanté" (halo scintillant, façon Minecraft) */
[data-cube="key-amethyst"]::after,
[data-cube="key-koth"]::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(115deg,
    transparent 0%, transparent 8%,
    rgba(168,85,247,0.7) 8%, rgba(168,85,247,0.7) 13%,
    rgba(236,72,255,0.55) 13%, rgba(236,72,255,0.55) 16%,
    transparent 16%, transparent 30%
  );
  background-size:240% 240%;
  mix-blend-mode:color-dodge;
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  animation:glintMove 2.2s linear infinite;
  pointer-events:none;
}
[data-cube="key-amethyst"]::after{
  -webkit-mask-image:url('../assets/items/netherite_pickaxe.png');
  mask-image:url('../assets/items/netherite_pickaxe.png');
}
[data-cube="key-koth"]::after{
  -webkit-mask-image:url('../assets/items/mace.png');
  mask-image:url('../assets/items/mace.png');
}
@keyframes glintMove{
  0%{background-position:0% 0%}
  100%{background-position:100% 100%}
}
.item-icon img{image-rendering:pixelated}
.item-icon.sm{width:30px;height:30px}
.item-icon.lg{width:72px;height:72px;margin:0 auto 10px}
.item-icon.xl{width:92px;height:92px}

/* ---------- Login chip & cart button ---------- */
.login-wrap{position:relative}

.login-chip{
  display:flex;align-items:center;gap:8px;
  padding:7px 14px 7px 7px;border-radius:8px;
  border:1px solid var(--border);
  font-size:0.85rem;font-weight:600;
  background:rgba(255,255,255,0.03);
  transition:border-color .15s ease,background .15s ease;
}
.login-chip:hover{border-color:var(--ice);background:rgba(95,208,255,0.08)}

.login-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:180px;
  padding:6px;
  border-radius:10px;
  background:#101c2c;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 16px 40px -12px rgba(0,0,0,0.6);
  z-index:150;
  animation:menuIn .15s ease;
}
.login-menu[hidden]{display:none}
@keyframes menuIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
.login-menu-item{
  display:block;
  width:100%;
  text-align:left;
  padding:10px 12px;
  border-radius:7px;
  font-size:0.87rem;
  font-weight:600;
  color:var(--text);
}
.login-menu-item:hover{background:rgba(95,208,255,0.1)}
.login-menu-item.danger:hover{background:rgba(239,68,68,0.12);color:#fca5a5}
.login-avatar{
  width:24px;height:24px;border-radius:6px;overflow:hidden;
  background:rgba(255,255,255,0.06);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.login-avatar img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.login-chip.logged-in{border-color:rgba(95,208,255,0.35)}
.login-avatar[hidden]{display:none}

.cart-btn{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border-radius:8px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
  color:var(--text);
  transition:border-color .15s ease,background .15s ease;
  flex-shrink:0;
}
.cart-btn:hover{border-color:var(--ice);background:rgba(95,208,255,0.08)}
.cart-count[hidden]{display:none}
.cart-count{
  position:absolute;top:-7px;right:-7px;
  min-width:18px;height:18px;padding:0 4px;
  border-radius:999px;
  background:linear-gradient(135deg,#ff8a8a,#ef4444);
  color:#fff;font-size:0.68rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px var(--bg);
}

/* ---------- Modal (login) ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(4,9,15,0.7);
  backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}
.modal-overlay.show{opacity:1;pointer-events:auto}

.modal{
  width:100%;max-width:400px;
  padding:32px 28px;
  position:relative;
  text-align:center;
}
.thanks-modal .item-icon{margin:0 auto 16px}
.thanks-modal h3{font-size:1.4rem;font-weight:800;margin-bottom:12px}
.thanks-modal p{color:var(--text-dim);font-size:0.92rem;line-height:1.5;margin-bottom:10px}
.thanks-modal p b{color:var(--ice-2)}
.thanks-modal .thanks-note{font-size:0.8rem;margin-bottom:20px}
.thanks-modal .thanks-note a{color:var(--ice);font-weight:600}
.thanks-modal .btn{width:100%}

.modal-close{
  position:absolute;top:14px;right:14px;
  width:28px;height:28px;
  border-radius:6px;
  background:rgba(255,255,255,0.06);
  color:var(--text-dim);
  font-size:0.9rem;
  display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{background:rgba(255,255,255,0.12);color:var(--text)}

.login-step h3{font-size:1.15rem;font-weight:800;margin-bottom:22px}

.edition-choice{display:flex;gap:14px;justify-content:center}
.edition-btn{
  flex:1;
  display:flex;flex-direction:column;align-items:center;
  gap:6px;
  padding:20px 12px;
  border-radius:10px;
  border:1.5px solid var(--border);
  background:rgba(255,255,255,0.03);
  font-weight:700;
  font-size:0.9rem;
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.05), inset 0 -2px 0 rgba(0,0,0,0.25);
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.edition-btn:hover{border-color:var(--ice);background:rgba(95,208,255,0.08);transform:translateY(-2px)}

.step-back{
  display:block;
  margin-bottom:14px;
  color:var(--text-dim);
  font-size:0.82rem;
  font-weight:600;
}
.step-back:hover{color:var(--text)}

#username-input{
  width:100%;
  padding:13px 16px;
  margin-bottom:14px;
  border-radius:8px;
  border:1.5px solid var(--border);
  background:rgba(0,0,0,0.25);
  color:var(--text);
  font-family:inherit;
  font-size:1rem;
  text-align:center;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.35);
}
#username-input:focus{outline:none;border-color:var(--ice)}

#edition-tag{color:var(--ice-2);font-weight:600;font-size:0.85rem}

.login-error{
  color:#fca5a5;
  font-size:0.82rem;
  margin-bottom:12px;
}

.login-step #username-submit,.login-step .btn{width:100%}

/* ---------- Cart drawer ---------- */
.cart-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(4,9,15,0.6);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.cart-overlay.show{opacity:1;pointer-events:auto}

.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;
  z-index:301;
  width:min(400px, 100%);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s ease;
}
.cart-drawer.open{transform:translateX(0)}

.cart-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.cart-head h3{font-size:1.1rem;font-weight:800}
.cart-head .modal-close{position:static}

.cart-items{
  flex:1;overflow-y:auto;
  padding:14px 22px;
  display:flex;flex-direction:column;gap:12px;
}
.cart-empty{
  text-align:center;
  color:var(--text-dim);
  font-size:0.9rem;
  padding:30px 22px;
}

.cart-row{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:8px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
}
.cart-row-name{font-size:0.88rem;font-weight:700}
.cart-row-sub{font-size:0.76rem;color:var(--text-dim)}
.cart-row-qty{
  display:flex;align-items:center;gap:6px;
  font-size:0.85rem;font-weight:700;
}
.cart-row-qty button{
  width:22px;height:22px;
  border-radius:5px;
  background:rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;
}
.cart-row-qty button:hover{background:rgba(255,255,255,0.16)}
.cart-row-remove{
  color:var(--text-dim);
  font-size:0.9rem;
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
}
.cart-row-remove:hover{color:#fca5a5}

.cart-foot{
  border-top:1px solid rgba(255,255,255,0.08);
  padding:18px 22px 22px;
}
.promo-section{margin-bottom:14px}

.promo-trigger{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 16px;
  border-radius:8px;
  border:1.5px dashed rgba(95,208,255,0.4);
  background:rgba(95,208,255,0.06);
  color:var(--ice-2);
  font-size:0.92rem;
  font-weight:700;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.promo-trigger:hover{background:rgba(95,208,255,0.12);border-color:var(--ice);transform:translateY(-1px)}

.promo-row{
  display:flex;align-items:center;gap:8px;
}
.promo-row[hidden]{display:none}
.promo-row input{
  flex:1;
  padding:10px 12px;
  border-radius:8px;
  border:1.5px solid var(--border);
  background:rgba(0,0,0,0.2);
  color:var(--text);
  font-family:inherit;font-size:0.9rem;
}
.promo-row input:focus{outline:none;border-color:var(--ice)}

.promo-confirmed{
  padding:12px 14px;
  border-radius:8px;
  background:rgba(95,208,255,0.08);
  border:1px solid rgba(95,208,255,0.3);
  transition:background .2s ease, border-color .2s ease;
}
.promo-confirmed[hidden]{display:none}
.promo-confirmed.invalid{background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.35)}
.promo-confirmed.invalid b{color:#fca5a5}
.promo-confirmed.valid b{color:#86efac}
.promo-confirmed p{
  font-size:0.8rem;
  color:var(--text-dim);
  line-height:1.5;
  margin-bottom:6px;
}
.promo-confirmed b{color:var(--ice-2)}
.promo-edit{
  font-size:0.78rem;
  font-weight:600;
  color:var(--ice-2);
  text-decoration:underline;
}
.promo-edit:hover{color:var(--ice)}

.cart-total-row{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:16px;
  font-weight:700;
}
.cart-total-row span:first-child{color:var(--text-dim);font-size:0.9rem}
#cart-total{font-size:1.4rem;color:#fff}

.terms-row{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-bottom:10px;
  font-size:0.8rem;
  color:var(--text-dim);
  cursor:pointer;
}
.terms-row input{
  margin-top:2px;
  width:15px;height:15px;
  accent-color:var(--ice);
  flex-shrink:0;
  cursor:pointer;
}
.terms-link{
  color:var(--ice-2);
  font-weight:600;
  text-decoration:underline;
  font-size:inherit;
}
.terms-box{
  margin-bottom:12px;
  padding:12px 14px;
  border-radius:8px;
  background:rgba(0,0,0,0.25);
  border:1px solid var(--border);
  font-size:0.78rem;
  color:var(--text-dim);
  line-height:1.5;
}
.terms-box[hidden]{display:none}

.cart-pay{width:100%}
.cart-note{
  text-align:center;
  color:var(--text-dim);
  font-size:0.75rem;
  margin-top:10px;
}

@media (max-width:480px){
  .cart-drawer{width:100%}
}

/* ---------- Vault tier select ---------- */
.tier-select{
  display:flex;
  gap:6px;
  margin-bottom:16px;
}
.tier-btn{
  flex:1;
  padding:8px 0;
  border-radius:7px;
  border:1.5px solid var(--border);
  background:rgba(255,255,255,0.03);
  color:var(--text-dim);
  font-weight:700;
  font-size:0.9rem;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.tier-btn:hover{transform:translateY(-2px);border-color:rgba(95,208,255,0.4)}
.tier-btn.active{
  background:linear-gradient(135deg,var(--ice),#3b82f6);
  border-color:transparent;
  color:#04101c;
}

/* ---------- Clé Aléatoire ---------- */
.key-card-random{
  position:relative;
  border-color:rgba(196,181,253,0.35);
  background:linear-gradient(160deg,rgba(196,181,253,0.08),var(--panel));
}
.random-badge{
  position:absolute;
  top:14px;right:14px;
  width:26px;height:26px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--ice));
  color:#04101c;
  font-weight:800;
  font-size:0.85rem;
  display:flex;align-items:center;justify-content:center;
  animation:spin3d 3.2s linear infinite;
}
@keyframes spin3d{
  0%{transform:rotateY(0deg)}
  100%{transform:rotateY(360deg)}
}
.item-icon.cycling img{animation:cycleFade 0.9s ease}
@keyframes cycleFade{
  0%{opacity:0;transform:scale(0.7) rotate(-8deg)}
  40%{opacity:1;transform:scale(1.05) rotate(2deg)}
  100%{opacity:1;transform:scale(1) rotate(0deg)}
}

/* ---------- More animation, everywhere ---------- */
@keyframes itemFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.item-icon{animation:itemFloat 3.4s ease-in-out infinite}
.item-icon.sm{animation-duration:2.6s}
.item-icon.xl{animation-duration:4s}
.rank-card:nth-of-type(2n) .item-icon{animation-delay:.4s}
.key-card:nth-of-type(3n) .item-icon,.extra-card:nth-of-type(2n) .item-icon{animation-delay:.5s}
.key-card:nth-of-type(3n+1) .item-icon{animation-delay:.9s}

.btn{position:relative;overflow:hidden}
.btn::after{
  content:"";
  position:absolute;
  top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.35),transparent);
  transform:skewX(-20deg);
  transition:left .5s ease;
  pointer-events:none;
}
.btn:hover::after{left:130%}

.ip-dot.online{animation:dotPulse 2s ease-in-out infinite}
@keyframes dotPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,0.55)}
  50%{box-shadow:0 0 0 6px rgba(74,222,128,0)}
}

.brand-mark{transition:transform .3s ease}
.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.08)}

.hero-title{animation:titleGlow 4s ease-in-out infinite}
@keyframes titleGlow{
  0%,100%{text-shadow:0 0 30px rgba(95,208,255,0.35), 0 0 70px rgba(95,208,255,0.15)}
  50%{text-shadow:0 0 42px rgba(95,208,255,0.55), 0 0 90px rgba(95,208,255,0.3)}
}

.reveal{transform:translateY(24px) scale(0.97)}
.reveal.visible{transform:translateY(0) scale(1)}

.rank-ribbon{animation:ribbonBounce 2.6s ease-in-out infinite}
@keyframes ribbonBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
}