/* ================================================================
   FROBELLA EXPORT — RESPONSIVE STYLESHEET (responsive.css)
   Load order: variables.css -> style.css -> animations.css -> responsive.css
   Breakpoints:
     >= 1536px  2xl (large desktop)
     >= 1280px  xl  (desktop)
     >= 1024px  lg  (small desktop / laptop)
     >=  768px  md  (tablet)
     >=  640px  sm  (large mobile)
     <   640px      (mobile)
   Approach: base rules in style.css/variables.css already target
   mobile-first defaults where sensible; this file overrides for
   larger breakpoints AND tightens layout for narrower ones.
================================================================ */

/* ----------------------------------------------------------------
   LARGE DESKTOP (>= 1536px) — extra breathing room
---------------------------------------------------------------- */
@media (min-width: 1536px) {
  .container { max-width: 1400px; }
  .hero__grid { gap: 80px; }
}

/* ----------------------------------------------------------------
   LAPTOP / SMALL DESKTOP (1024px - 1279px)
---------------------------------------------------------------- */
@media (max-width: 1279px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------------
   TABLET (768px - 1023px)
---------------------------------------------------------------- */
@media (max-width: 1023px) {
  section { padding: 72px 0; }

  .hero { padding-top: 48px; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 56px; }
  .hero__visual { order: -1; max-width: 460px; margin: 0 auto; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }

  .about-teaser__grid { grid-template-columns: 1fr; gap: 40px; }
  .about-teaser__visual { max-width: 420px; margin: 0 auto; }

  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .process-strip { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .process-strip::before { display: none; }

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

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

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

  .gallery-grid, .gallery-grid--teaser { columns: 3 180px; }

  .contact-teaser__grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }

  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 36px; }

  .page-header { padding: 140px 0 64px; }
}

/* ----------------------------------------------------------------
   NAVBAR: collapse to burger below 992px
---------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .main-nav,
  .site-header__actions .btn--sm,
  .btn--mobile {
    display: none !important;
  }
  .site-header__actions .lang-switch {
    display: flex;
  }
  .burger {
    display: inline-flex !important;
  }
}
@media (min-width: 992px) {
  .burger {
    display: none !important;
  }
  .mobile-nav {
    display: none !important;
  }
}

/* ----------------------------------------------------------------
   MOBILE (max-width: 767px)
---------------------------------------------------------------- */
@media (max-width: 767px) {
  html { scroll-padding-top: 70px; }
  section { padding: 56px 0; }
  .container { padding: 0 18px; }

  .site-header__inner { padding: 12px 18px; }
  .logo { font-size: 19px; }

  .hero { padding-top: 32px; }
  .hero__title { font-size: clamp(30px, 9vw, 40px); }
  .hero__subtitle { font-size: 16px; max-width: none; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .hero__badges { flex-direction: column; gap: 14px; margin-top: 36px; }

  .stats-bar { padding: 44px 0; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .stat__number { font-size: 30px; }

  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; }

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

  .process-strip { grid-template-columns: 1fr; }

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

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

  .gallery-grid, .gallery-grid--teaser { columns: 2 140px; }

  .testi-card { min-width: 82vw; }

  .newsletter__box { flex-direction: column; align-items: stretch; padding: 32px 24px; text-align: left; }
  .newsletter__form { flex-direction: column; max-width: none; }

  .form-row { grid-template-columns: 1fr; }

  .contact-side { padding: 26px; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }

  .wa-float { width: 50px; height: 50px; right: 16px; bottom: 16px; }
  .wa-float svg { width: 24px; height: 24px; }
  .back-to-top { width: 40px; height: 40px; right: 16px; bottom: 78px; }

  .page-header { padding: 120px 0 48px; }
  .error-page { padding: 90px 20px; }
}

@media (max-width: 640px) {
  .site-header .logo img {
    height: 44px;
    max-width: 140px;
  }
}

/* ----------------------------------------------------------------
   SMALL MOBILE (max-width: 420px) — final tightening pass
---------------------------------------------------------------- */
@media (max-width: 420px) {
  .cert-grid { grid-template-columns: 1fr; }
  .gallery-grid, .gallery-grid--teaser { columns: 1 100%; }
  .product-grid--related { grid-template-columns: 1fr; }
  .hero__badges li { font-size: 12.5px; }
  .btn { width: 100%; justify-content: center; }
  .hero__cta .btn, .newsletter__form .btn { width: auto; }
}

/* ----------------------------------------------------------------
   PRINT (mentions légales / confidentialité often printed)
---------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .wa-float, .back-to-top,
  .cookie-banner, .mobile-nav, .scroll-progress { display: none !important; }
  body { background: #fff; color: #000; }
  section { padding: 24px 0; }
}