/* ============================================================
   RESPONSIVE — Media queries uniquement
   Ordre : du plus large au plus petit (mobile-last)
   ============================================================ */

/* ── < 800px : grilles 2 colonnes → 1 colonne ────────────── */
@media (max-width: 800px) {

  .fst-grid,
  .relais-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .relais-inner {
    gap: 2.5rem;
  }
}

/* ── < 700px : hl-bar 3 colonnes → empilé ────────────────── */
@media (max-width: 700px) {

  .hl-bar {
    grid-template-columns: 1fr;
  }

  .hl-item {
    border-right: none;
    border-bottom: 1px solid var(--alpha-white-07);
  }

  .hl-item:last-child {
    border-bottom: none;
  }
}

/* ── < 600px : paddings réduits ──────────────────────────── */
@media (max-width: 600px) {

  :root {
    --section-padding-x: 20px;
    --section-padding-y: 5rem;
  }

  .nav,
  .nav.scrolled {
    padding: 12px 20px;
  }

  .nav-logo img {
    height: 36px;
  }

  .hero-inner {
    padding: 100px 20px 30px;
  }

  .hl-bar {
    padding: 1rem 20px;
  }
}

/* ── < 480px : hero pills empilées ──────────────────────── */
@media (max-width: 480px) {

  .hero-pills {
    flex-direction: column;
    align-items: center;
  }

  .cta-row {
    flex-direction: column;
    align-items: center;
  }
}