/* ============================================
   SALAIRE FACILE — Responsive
   ============================================ */

/* ── Tablet (< 1024px) ── */
@media (max-width: 1024px) {
  :root { --container-padding: var(--space-5); }
  h1 { font-size: var(--font-size-3xl); }
  .calculator-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .comparison-grid { grid-template-columns: 1fr; }
  .comparison-arrow { transform: rotate(90deg); justify-self: center; }
  .status-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile (< 768px) ── */
@media (max-width: 768px) {
  :root { --container-padding: var(--space-4); --navbar-height: 64px; }
  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }
  .hero { padding: var(--space-10) 0 var(--space-8); }
  .section { padding: var(--space-10) 0; }

  /* Navbar mobile */
  .navbar-nav {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    background: rgba(10,10,20,0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: var(--space-4);
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-normal);
  }
  .navbar-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
  .nav-link {
    width: 100%;
    padding: var(--space-3) var(--space-4);
  }
  .mobile-menu-btn { display: flex; }

  /* Calculator */
  .results-grid { grid-template-columns: 1fr; }
  .result-card { padding: var(--space-4); }
  .result-value { font-size: var(--font-size-xl) !important; }
  .card { padding: var(--space-5); }
  .input-field-lg { font-size: var(--font-size-xl); padding: var(--space-3) var(--space-4); }
  .toggle-group { flex-wrap: wrap; }
  .toggle-btn { min-width: calc(50% - var(--space-1)); }
  .status-grid { grid-template-columns: 1fr 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-bottom { flex-direction: column; gap: var(--space-3); text-align: center; }

  /* Features */
  .features-grid { grid-template-columns: 1fr; }
}

/* ── Small Mobile (< 480px) ── */
@media (max-width: 480px) {
  h1 { font-size: var(--font-size-xl); }
  .hero-badge { font-size: var(--font-size-xs); }
  .toggle-btn { font-size: var(--font-size-xs); padding: var(--space-2); }
  .status-grid { grid-template-columns: 1fr; }
}