/* ==========================================================================
   RESPONSIVE.CSS — ajustements par breakpoint (mobile-first)
   Charger EN DERNIER sur chaque page.
   Breakpoints : 320 (base) / 768 / 1024 / 1440
   ========================================================================== */

/* -------------------- Mobile (320px – 767px), base déjà mobile-first -------------------- */
@media (max-width: 767px) {
  .header__logo-sub {
    display: none;
  }

  .hero {
    padding-top: 140px;
  }

  .bento__item--wide2x2,
  .bento__item--wide2x1,
  .portfolio__item--wide2x2,
  .portfolio__item--wide2x1 {
    grid-column: span 1;
  }

  .service-detail__item--reverse .service-detail__image,
  .service-detail__item--reverse .service-detail__text {
    order: 0;
  }

  .hero__cta,
  .cta-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta .btn,
  .cta-banner__actions .btn {
    justify-content: center;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* -------------------- Tablette (768px – 1023px) -------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio__grid,
  .bento__grid {
    grid-auto-rows: minmax(220px, auto);
  }
}

/* -------------------- Desktop (1024px – 1439px) -------------------- */
@media (min-width: 1024px) and (max-width: 1439px) {
  .container {
    padding-inline: 32px;
  }
}

/* -------------------- Menu inline desktop (≥1024px) -------------------- */
@media (min-width: 1024px) {
  .header__nav {
    display: flex;
  }

  .header__toggle {
    display: none;
  }
}

/* -------------------- Grand écran (1440px+) -------------------- */
@media (min-width: 1440px) {
  .container {
    max-width: 1280px;
  }
}