/* ============================================================
   PFM Lyon — responsive des composants partagés (chargé en dernier).
   Les règles responsive propres à chaque page restent dans sa feuille.
   ============================================================ */

@media (max-width: 1240px) {
  .container { padding-inline: 24px; }
  .topbar__left { gap: 16px; }
  .nav__list { gap: 20px; }
  .footer__cols { gap: 48px; }
  .footer__nav { gap: 32px; }
}

@media (max-width: 1024px) {
  .navbar__cta { display: none; }
  .footer__cols { flex-direction: column; }
  .footer__brand { width: 100%; }
  .footer__nav { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 48px; }
}

@media (max-width: 820px) {
  .topbar { height: auto; padding-block: 8px; }
  .topbar__inner { flex-direction: column; gap: 6px; }
  .topbar__left { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
  .topbar__sep:last-child { display: none; }

  .navbar { height: 88px; }
  .brand__icon { width: 52px; height: 54px; }

  .nav__burger { display: flex; }
  .nav__list {
    position: fixed;
    top: 0; right: 0;
    width: min(320px, 84vw);
    height: 100dvh;
    z-index: 60;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 96px 32px 32px;
    background: var(--c-white);
    box-shadow: var(--sh-card);
    transform: translateX(100%);
    transition: transform .3s ease;
  }
  body.nav-open .nav__list { transform: none; }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav__burger { position: relative; z-index: 61; }
  body.nav-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav__burger span:nth-child(2) { opacity: 0; }
  body.nav-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav__link { flex-direction: row; font-size: 16px; padding-block: 8px; }
  .nav__link::after { display: none; }

  .footer__inner { padding-top: 56px; gap: 48px; }
  .footer__nav { flex-direction: column; gap: 36px; }
  .footer__legal { padding-bottom: 48px; }
}

@media (max-width: 480px) {
  .btn {
    padding: 15px 20px;
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }
  .section-head h1, .section-head h2 { font-size: 28px; line-height: 38px; }
}