/* ==========================================================================
   J.A. CHAPES SÀRL — Adaptations mobile et tablette
   --------------------------------------------------------------------------
   À CHARGER EN DERNIER : les media queries doivent pouvoir
   remplacer les règles des autres fichiers.
   ========================================================================== */

/* ==========================================================================
   21. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --section-padding: 64px; }

  .nav, .header__phone, .header__actions .btn { display: none; }
  .burger { display: flex; }
  .mobile-cta { display: flex; }
  body { padding-bottom: 60px; } /* place pour la barre mobile */

  .featured__media,
  .featured__facts,
  .about__grid,
  .contact__grid,
  .subpage__grid { grid-template-columns: 1fr; }

  .cards { grid-template-columns: repeat(2, 1fr); }
  .why { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .masonry { columns: 3; }

  .about__badge { right: 12px; bottom: -20px; width: 190px; }
}

@media (max-width: 640px) {
  :root { --section-padding: 52px; }

  .container { padding: 0 18px; }

  .hero__content { padding-top: 130px; padding-bottom: 80px; }
  .hero__actions { gap: 12px; }
  .hero__actions .btn { flex: 1 1 100%; }

  .cards,
  .featured__list,
  .about__stats,
  .stats,
  .gallery__thumbs { grid-template-columns: repeat(2, 1fr); }

  .about__stats { grid-template-columns: 1fr; }
  .masonry { columns: 2; }
  .footer__grid { grid-template-columns: 1fr; }

  .modal__box { grid-template-columns: 1fr; max-height: 92vh; }
  .modal__img { max-height: 220px; }

  .about__badge { position: static; width: auto; margin-top: 16px; }
}