/* ============================================================
   ROS'AM — RESPONSIVE
   Coller à la FIN du CSS supplémentaire
   ============================================================ */

/* ── DESKTOP LARGE (1200px+) ── */
@media (min-width: 1200px) {
  .site { max-width: 1300px; margin: 0 auto; }
  h1 { font-size: 4.5rem !important; }
  h2 { font-size: 3rem !important; }
  .hero-content { padding: 0 6rem !important; }
}

/* ── TABLET (768px – 1024px) ── */
@media (max-width: 1024px) and (min-width: 768px) {
  h1 { font-size: 2.8rem !important; }
  h2 { font-size: 2rem !important; }
  h3 { font-size: 1.4rem !important; }

  nav, .site-header { padding: 1rem 2rem !important; }

  .hero-content { padding: 0 2.5rem !important; }
  .hero-flags   { right: 2rem !important; bottom: 2rem !important; }

  .features-grid,
  .collections-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .about-strip {
    grid-template-columns: 1fr !important;
    padding: 4rem 2.5rem !important;
    gap: 3rem !important;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
}

/* ── MOBILE (max 767px) ── */
@media (max-width: 767px) {
  h1 { font-size: 2.2rem !important; }
  h2 { font-size: 1.7rem !important; }
  h3 { font-size: 1.3rem !important; }

  body { font-size: 0.9rem !important; }

  nav, .site-header { padding: 0.75rem 1rem !important; }
  .nav-links        { display: none !important; }

  .hero-content { padding: 0 1.25rem !important; max-width: 100% !important; }
  .hero-flags   { display: none !important; }

  .features-grid,
  .collections-grid,
  .about-strip,
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  section,
  .features,
  .collections,
  .about-strip { padding: 3rem 1.25rem !important; }

  .product-card:hover { transform: none !important; }

  .footer-top { padding-bottom: 1.5rem !important; }
  footer, .site-footer { padding: 2.5rem 1.25rem 1.25rem !important; }
}

/* ── TRÈS PETIT MOBILE (max 400px) ── */
@media (max-width: 400px) {
  h1 { font-size: 1.9rem !important; }
  .hero-content { padding: 0 1rem !important; }
  section { padding: 2.5rem 1rem !important; }
}