/* =========================================================
   TOPAD — Responsive
   ========================================================= */

@media (max-width: 1080px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
  .footer-col--lang {
    grid-column: span 3;
  }
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 960px) {
  .main-nav__links {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }

  /* En dessous de 960px, la navigation passe en menu "hamburger" :
     les boutons Connexion / Créer un compte du header (qui débordent
     à côté du logo et du bouton menu sur un petit écran, surtout en
     anglais où les libellés sont plus longs) sont retirés du header
     et réapparaissent à l'intérieur du panneau du menu mobile. */
  .header-actions > .btn--ghost,
  .header-actions > .btn--primary {
    display: none;
  }
  .header-actions > .lang-switch {
    display: none;
  }

  .main-nav__mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
  }
  .main-nav__mobile-actions .btn {
    width: 100%;
  }
  .main-nav__mobile-actions .lang-switch {
    align-self: center;
    margin-top: 0.3rem;
  }

  .hero__inner {
    grid-template-columns: 1fr;
  }
  .hero__media {
    order: -1;
    max-width: 420px;
    margin-inline: auto;
  }

  .split {
    grid-template-columns: 1fr;
  }
  .split.reverse-mobile > *:first-child {
    order: 2;
  }

  .dual-paths {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: 1fr;
  }
  .steps .step:not(:last-child)::after {
    display: none;
  }

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

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

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

  .cta-band {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  :root {
    --space-2xl: 3.5rem;
    --space-3xl: 4.5rem;
  }

  .section {
    padding-block: var(--space-xl);
  }

  h1 {
    font-size: var(--fs-2xl) !important;
  }

  .hero {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

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

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

  .compare-table {
    display: block;
    overflow-x: auto;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-brand {
    grid-column: span 1;
  }

  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-row .btn {
    width: 100%;
  }

  .cta-band {
    padding: var(--space-lg);
  }
  .cta-band .btn-row .btn {
    width: 100%;
  }

  .floating-card {
    display: none;
  }
}

/* Menu mobile ouvert */
.main-nav.is-open .main-nav__links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: fixed;
  /* --mobile-nav-top est calculé en JS à partir du bas réel du header
     (qui varie si le bandeau de langue est affiché au-dessus) ; 64px
     est un repli si le script n'a pas encore tourné. */
  top: var(--mobile-nav-top, 64px);
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: var(--space-md);
  overflow-y: auto;
  z-index: var(--z-overlay);
}

.main-nav.is-open .main-nav__links > a {
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-md);
}

body.nav-open {
  overflow: hidden;
}