/* ==================== TABLETTE (≤ 1024px) ==================== */
@media (max-width: 1024px) {
  .app-root {
    padding: 28px 20px calc(var(--bottom-nav-height) + 32px);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-actions {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}

/* ==================== MOBILE / TABLETTE — bascule de navigation (≤ 860px) ==================== */
@media (max-width: 860px) {
  .topbar__nav {
    display: none;
  }

  .bottom-nav {
    display: flex;
  }

  .topbar {
    padding: 0 18px;
  }
}

/* ==================== MOBILE (≤ 600px) ==================== */
@media (max-width: 600px) {
  .topbar__title {
    display: none;
  }

  .app-root {
    padding: 20px 16px calc(var(--bottom-nav-height) + 28px);
  }

  .home-hero {
    padding: 36px 18px 32px;
  }

  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .games-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .game-card {
    padding: 16px;
  }

  .game-card__banner {
    height: 84px;
    font-size: 2rem;
  }

  .home-hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .home-hero__actions .btn {
    width: 100%;
  }

  .auth-card {
    padding: 32px 22px;
  }
}

/* ==================== TRÈS PETIT ÉCRAN (≤ 380px) ==================== */
@media (max-width: 380px) {
  .games-grid {
    grid-template-columns: 1fr;
  }

  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}