/* Mobile-first par defaut. Media queries pour elargir. */

@media (min-width: 640px) {
  .hero-ctas .btn { min-width: 200px; }
  .gallery-mosaic {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "a a b"
      "a a c"
      "d e e";
  }
  .gallery-mosaic > a:nth-child(1) { aspect-ratio: 4/3; }
  .gallery-mosaic > a:nth-child(2) { aspect-ratio: 4/3; }
  .gallery-mosaic > a:nth-child(3) { aspect-ratio: 4/3; }
  .gallery-mosaic > a:nth-child(4) { aspect-ratio: 4/3; }
  .gallery-mosaic > a:nth-child(5) { aspect-ratio: 8/3; }

  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-item { position: relative; }
  .stat-item:not(:last-child)::after {
    content: ""; position: absolute; right: 0; top: 20%; bottom: 20%;
    width: 1px; background: oklch(45% 0.030 145);
  }

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

  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }

  .masonry { grid-template-columns: repeat(3, 1fr); }
  .masonry .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: 1/1; }
}

@media (min-width: 860px) {
  :root { --header-h: 84px; }
  html { scroll-padding-top: 100px; }
  section[id] { scroll-margin-top: 100px; }

  .nav-main { display: block; }
  .burger { display: none; }
  .mobile-menu { display: none; }

  .hero { padding: var(--sp-9) 0 var(--sp-8); }
  .hero-grid {
    grid-template-columns: 1.25fr 1fr;
    gap: var(--sp-7);
    align-items: center;
  }
  .hero-flora { display: block; }

  .services-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }

  .about-grid { grid-template-columns: 1.2fr 1fr; gap: var(--sp-7); }

  .zone-cols { grid-template-columns: 1fr 1.05fr; gap: var(--sp-6); align-items: center; }

  .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }

  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-6); }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

@media (min-width: 1100px) {
  .services-grid { grid-template-columns: repeat(4, 1fr); }
  .masonry { grid-template-columns: repeat(4, 1fr); }
}

/* FAB visible uniquement sur mobile */
@media (min-width: 860px) {
  .fab { display: none; }
}