/* ============ HERO ============ */
.hero {
  position: relative;
  padding: 90px 24px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.hero-decor { position: absolute; inset: 0; pointer-events: none; }
.hero-planet {
  position: absolute;
  border-radius: 50%;
}
.hero-planet--1 { top: 50px; left: 6%; width: 70px; height: 70px; animation: float1 7s ease-in-out infinite; }
.hero-planet--1 .planet-body { background: radial-gradient(circle at 32% 28%, oklch(0.85 0.14 340), oklch(0.45 0.16 320)); box-shadow: 0 0 34px oklch(0.6 0.18 330 / 0.6); width: 100%; height: 100%; border-radius: 50%; }
.hero-planet--1 .planet-ring { position: absolute; inset: -14px; border: 2px solid oklch(0.75 0.15 330 / 0.4); border-radius: 50%; transform: rotate(-20deg); }

.hero-dot { position: absolute; top: 230px; left: 3%; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, white, oklch(0.7 0.15 200)); box-shadow: 0 0 16px oklch(0.78 0.16 200 / 0.8); animation: float2 6s ease-in-out infinite; }

.hero-planet--2 { top: 80px; right: 9%; width: 52px; height: 52px; animation: planetBob 6.5s ease-in-out infinite; }
.hero-planet--2 .planet-body { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 32% 28%, oklch(0.85 0.15 220), oklch(0.4 0.16 260)); box-shadow: 0 0 30px oklch(0.55 0.18 240 / 0.6); }
.hero-planet--2 .planet-ring { position: absolute; inset: -10px; border: 2px solid oklch(0.75 0.15 220 / 0.35); border-radius: 50%; }

.hero-orbit { position: absolute; top: 270px; right: 5%; width: 110px; height: 110px; animation: orbitSpin 22s linear infinite; }
.hero-orbit-dot { position: absolute; top: 0; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--c-gold); box-shadow: 0 0 12px var(--c-gold); }
.hero-orbit-ring { position: absolute; inset: 0; border: 1px dashed oklch(0.7 0.1 280 / 0.3); border-radius: 50%; }

.hero-shoot { position: absolute; width: 2px; height: 2px; background: white; box-shadow: 0 0 6px 2px white; }
.hero-shoot--1 { top: 130px; left: 20%; animation: shootStar 3.2s ease-in infinite; animation-delay: .4s; }
.hero-shoot--2 { top: 60px; right: 26%; animation: shootStar 4.4s ease-in infinite; animation-delay: 2.1s; }

.hero-glow {
  position: absolute; top: 20px; left: 50%; width: 900px; height: 400px; transform: translateX(-50%);
  background: radial-gradient(circle, oklch(0.6 0.18 300 / 0.3), transparent 70%);
  filter: blur(10px); animation: glowPulse 5s ease-in-out infinite;
}

.hero-badge { position: relative; margin-bottom: 26px; }
.hero-title {
  position: relative;
  font-family: var(--font-display); font-weight: 700; font-size: 84px; line-height: 1.02;
  color: white; margin: 0 0 20px; text-shadow: 0 0 40px oklch(0.7 0.15 280 / 0.5); max-width: 900px;
}
.hero-title-gradient {
  background: linear-gradient(120deg, var(--c-cyan), var(--c-magenta-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-subtitle { position: relative; font-size: 19px; color: oklch(0.9 0.02 280 / 0.85); max-width: 560px; margin: 0 0 40px; font-weight: 500; }
.hero-actions { position: relative; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 34px; }
.copy-pill { background: rgba(0,0,0,0.15); padding: 5px 12px; border-radius: var(--radius-pill); font-size: 13px; }
.hero-quicklinks { position: relative; display: flex; gap: 36px; margin-top: 56px; flex-wrap: wrap; justify-content: center; }
.quicklink { text-decoration: none; color: oklch(0.9 0.02 280); font-weight: 600; font-size: 14.5px; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: .85; }
.quicklink:hover { opacity: 1; }
.quicklink-icon { font-size: 26px; }

@media (max-width: 640px) {
  .hero-title { font-size: 48px; }
  .hero { padding: 60px 20px 70px; }
}

/* ============ MODES DE JEU ============ */
.modes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 26px; }
.mode-card {
  padding: 28px; position: relative; overflow: hidden;
  transition: transform .25s var(--ease);
}
.mode-card:hover { transform: translateY(-8px); }
.mode-card-glow { position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; border-radius: 50%; opacity: .18; filter: blur(20px); }
.mode-icon { font-size: 38px; margin-bottom: 14px; position: relative; }
.mode-title { font-family: var(--font-display); font-weight: 600; font-size: 23px; color: white; margin: 0 0 10px; position: relative; }
.mode-desc { color: oklch(0.85 0.02 280 / 0.75); font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; position: relative; }
.mode-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; position: relative; }
.mode-badge { color: #14102a; font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: var(--radius-pill); opacity: .9; }
.mode-cta-btn { background: none; color: white; padding: 10px 20px; border-radius: var(--radius-pill); font-weight: 600; font-size: 13.5px; cursor: pointer; position: relative; border: 1px solid currentColor; }

/* ============ TEASERS (Boutique / Discord) ============ */
.teaser-section {
  padding: 90px 24px;
  background: linear-gradient(135deg, oklch(0.28 0.1 300 / 0.22), oklch(0.24 0.1 260 / 0.15));
  border-top: 1px solid oklch(0.78 0.16 90 / 0.25);
  border-bottom: 1px solid oklch(0.78 0.16 90 / 0.25);
}
.teaser-inner { max-width: var(--container-w-narrow); margin: 0 auto; display: flex; align-items: center; gap: 60px; flex-wrap: wrap; justify-content: center; }
.teaser-text { flex: 1; min-width: 300px; }
.teaser-title { font-family: var(--font-display); font-weight: 600; font-size: 38px; color: white; margin: 0 0 16px; }
.teaser-desc { color: oklch(0.9 0.02 280 / 0.8); font-size: 16px; line-height: 1.6; max-width: 460px; margin: 0 0 26px; }
.teaser-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.teaser-secure-note { color: oklch(0.85 0.02 280 / 0.6); font-size: 13px; }

.grade-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grade-card { width: 120px; background: oklch(0.2 0.05 280 / 0.6); border-radius: 16px; padding: 18px 12px; text-align: center; border: 1px solid var(--grade-color, var(--c-cyan)); }
.grade-icon { font-size: 30px; margin-bottom: 8px; }
.grade-name { color: white; font-weight: 700; font-size: 13px; }

/* ============ CLASSEMENTS TEASER ============ */
.ranking-teaser-section { padding: 100px 24px; max-width: var(--container-w-narrow); margin: 0 auto; }
.ranking-teaser-podium { margin-bottom: 40px; }
.ranking-cta { text-align: center; }

/* ============ DISCORD ============ */
.discord-section { padding: 90px 24px; background: linear-gradient(135deg, oklch(0.28 0.1 300 / 0.3), oklch(0.22 0.08 260 / 0.2)); display: flex; justify-content: center; }
.discord-inner { max-width: var(--container-w-narrow); width: 100%; display: flex; align-items: center; gap: 50px; flex-wrap: wrap; justify-content: center; }
.chat-bubbles { display: flex; flex-direction: column; gap: 12px; width: 320px; max-width: 100%; }
.chat-bubble { background: oklch(0.22 0.06 285 / 0.7); border-radius: 14px; padding: 14px 18px; color: white; font-size: 13.5px; }
.chat-bubble--a { align-self: flex-start; border: 1px solid oklch(0.65 0.15 280 / 0.4); }
.chat-bubble--b { align-self: flex-end; border: 1px solid oklch(0.7 0.18 340 / 0.4); }
.chat-bubble--c { align-self: flex-start; border: 1px solid oklch(0.78 0.16 200 / 0.4); }

/* ============ ACTUALITÉS ============ */
.news-section { padding: 100px 24px; max-width: var(--container-w); margin: 0 auto; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.news-card { overflow: hidden; }
.news-image {
  height: 130px;
  background-color: oklch(0.28 0.06 285);
  background-image: repeating-linear-gradient(45deg, var(--news-color, var(--c-cyan)) 0px, var(--news-color, var(--c-cyan)) 10px, transparent 10px, transparent 20px);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: oklch(0.9 0.02 280 / 0.6); font-family: monospace;
}
.news-body { padding: 20px; }
.news-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.news-category { color: var(--news-color, var(--c-cyan)); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; }
.news-date { color: oklch(0.8 0.02 280 / 0.5); font-size: 12px; }
.news-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: white; margin: 0 0 8px; }
.news-summary { color: oklch(0.85 0.02 280 / 0.7); font-size: 13.5px; line-height: 1.5; margin: 0; }