/* =========================================================
   NALYORA — responsive.css
   Adaptations tablette / mobile générales (chargé en dernier).
   ========================================================= */

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .join-grid, .discord-grid, .faq-grid { grid-template-columns: 1fr; gap: 44px; }
  .faq-side { position: static; }
  .discord-art { min-height: 300px; }
}

@media (max-width: 820px) {
  .burger { display: inline-flex; }
  .nav-links {
    position: absolute;
    top: calc(var(--nav-h) + 10px);
    left: 14px;
    right: 14px;
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    border-radius: 18px;
    background: rgba(8, 20, 50, 0.96);
    border: 1px solid var(--card-border);
    box-shadow: 0 20px 40px rgba(0,0,0,.45);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .2s, transform .2s;
  }
  .nav-links.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links a { padding: 12px 14px; }
  .nav-links a.active { background: rgba(95, 208, 255, 0.08); }
  .nav-links a.active::after { display: none; }
  .nav-wrap { pointer-events: auto; }
}

@media (max-width: 560px) {
  .section { padding: 80px 0; }
  .btn-ip { min-width: 0; width: 100%; }
  .hero-actions { width: 100%; padding: 0 20px; }
  .hero-actions .btn { width: 100%; }
  .nav-actions .btn-shop-label { display: none; }
  .mc-screen { padding: 24px 16px 20px; }
  .cta-band { padding: 40px 22px; }
}