/* responsive.css — mobile-first, on elargit */

/* >= 640px (large mobile / petit tablet) */
@media (min-width: 640px) {
  .hero-cta { flex-direction: row; }
  .hero-cta .btn { width: auto; }
  .gallery-grid { grid-auto-rows: 200px; }
  .avis-list { grid-template-columns: repeat(2, 1fr); }
  .avis-list .avis-card:nth-child(3) { grid-column: span 2; }
  .contact-card .row-cta { flex-direction: row; }
}

/* >= 760px (tablet) */
@media (min-width: 760px) {
  .prest-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }
  .zone-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
  }
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px;
  }
  .gal-wide { grid-column: span 1; }
  .gal-tall { grid-row: span 2; }
  .gal-tall img { height: 100%; }
}

/* >= 960px (desktop) */
@media (min-width: 960px) {
  .nav { display: block; }
  .burger { display: none; }
  .link-call .num-full { display: inline; }
  .link-call .num-short { display: none; }
  main { padding-top: var(--header-h); }
  .hero { padding-block: var(--sp-8) var(--sp-7); }
  .hero-grid {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--sp-6);
  }
  .about-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    align-items: center;
  }
  .about-meta { grid-template-columns: repeat(3, 1fr); }
  .avis-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .avis-list .avis-card:nth-child(3) { grid-column: span 1; }
  .contact-grid {
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
  }
  .gallery-grid { grid-auto-rows: 240px; }
  .site-footer .container {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--sp-5);
  }
  .fab { display: none; }
}

/* >= 1180px */
@media (min-width: 1180px) {
  .hero-title { font-size: clamp(3.2rem, 4.8vw, 4.5rem); }
}

/* Mobile <760 : padding contact pour eviter chevauchement FAB */
@media (max-width: 759.98px) {
  #contact { padding-bottom: calc(var(--sp-7) + 60px); }
  .menu-mobile { display: flex; }
}

/* Desktop : pas de menu mobile */
@media (min-width: 960px) {
  .menu-mobile { display: none !important; }
}