/* ==========================================================================
   responsive.css — media queries (tablette & mobile)
   Point de bascule menu : 860px. Le burger apparaît, la nav devient un
   panneau déroulant plein largeur.
   ========================================================================== */

/* -------------------------------------------------- Tablette (≤ 980px) --- */
@media (max-width: 980px) {
  .grid-3 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .support-grid,
  .blog-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------- Menu mobile (≤ 860px) - */
@media (max-width: 860px) {
  .burger { display: flex; }

  /* La navigation devient un panneau déroulant sous le header. */
  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cobalt-border);
    padding: 1rem var(--pad-x) 1.5rem;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .main-nav.is-open { display: flex; }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-links a {
    padding: 0.9rem 0.25rem;
    border-bottom: 1px solid var(--cobalt-border);
    font-size: 1.05rem;
  }

  .header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 1.25rem;
  }
  .header-actions .btn,
  .header-actions .lang-switch {
    width: 100%;
    justify-content: center;
    padding-block: 0.75rem;
  }
}

/* -------------------------------------------------- Mobile (≤ 560px) ----- */
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .waitlist-form { flex-direction: column; }
  .waitlist-form .btn { width: 100%; }
  .hero-actions .btn { width: 100%; }
  .footer-bottom { justify-content: flex-start; }
}