/* =========================================================
   RESPONSIVE — adaptations tablette et mobile
   ========================================================= */

/* ---------- Tablette (≤ 1100px) ---------- */
@media (max-width: 1100px) {
  .main-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }

  .stats { grid-template-columns: 1fr; }
  .stat {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .stat:last-child { border-bottom: none; }

  .sim-controls { grid-template-columns: 1fr; }
  .sim-results { grid-template-columns: repeat(2, 1fr); }
  .sim-res:nth-child(2) { border-right: none; }
  .sim-res:nth-child(1),
  .sim-res:nth-child(2) { border-bottom: 1px solid var(--border); }
}

/* ---------- Mobile (≤ 640px) ---------- */
@media (max-width: 640px) {
  .topbar {
    padding: 14px 20px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .nav {
    gap: 18px;
    order: 3;
    width: 100%;
    justify-content: space-between;
  }

  .container { padding: 0 20px; }

  .hero { padding: 40px 0 30px; }
  .hero h1 { font-size: 36px; }

  .cards { grid-template-columns: 1fr; }

  .footer { padding: 20px; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}