/* ============ RESPONSIVE — Mobile-first, puis élargissement ============ */

/* ===== 560px+ : Tablette petite ===== */
@media (min-width: 560px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field.field-full { grid-column: 1 / -1; }

  /* Galerie 2 colonnes (PIÈGE #7 : max 2 sur mobile) */
  .gal-masonry { column-count: 2; }
  .page-realisations .gal-masonry { column-count: 2; }
}

/* ===== 640px+ ===== */
@media (min-width: 640px) {
  .hero-mega__cta .btn { }
}

/* ===== 768px+ : Tablette ===== */
@media (min-width: 768px) {
  html { scroll-padding-top: var(--header-h); }

  section { padding: 80px 0; }
  .stats-strip { padding: 40px 0; }

  /* Header : nav + CTA desktop */
  .site-header { height: var(--header-h); }
  .header-nav { display: flex; }
  .header-cta-desktop { display: inline-flex; }

  /* Burger + menu mobile cachés */
  .burger { display: none; }
  .menu-mobile { display: none; }

  /* FAB cachée sur desktop */
  .fab-call { display: none; }

  /* Hero */
  .hero-mega {
    padding: calc(var(--header-h) + 48px) 24px 56px;
    min-height: calc(100dvh - var(--header-h));
  }

  /* Process */
  .process-steps { grid-template-columns: repeat(3, 1fr); }

  /* Services */
  .svc-grid { grid-template-columns: repeat(2, 1fr); }

  /* Avis */
  .avis-cards { grid-template-columns: repeat(3, 1fr); }

  /* Zone */
  .zone-cols { grid-template-columns: 1fr 1.4fr; }
  .map-wrapper iframe { height: 360px; }

  /* FAQ */
  .faq-cols { grid-template-columns: .4fr 1fr; }

  /* Galerie masonry 2 col */
  .gal-masonry { column-count: 2; }
  .page-realisations .gal-masonry { column-count: 2; }

  /* Footer */
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}

/* ===== 900px+ : Desktop ===== */
@media (min-width: 900px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .gal-masonry { column-count: 3; }
  .page-realisations .gal-masonry { column-count: 3; }
}

/* ===== 1024px+ ===== */
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: .6fr 1fr; }
  .avis-cards { }
}

/* ===== Mobile STRICT (max 767px) ===== */
@media (max-width: 767px) {
  /* Process intro header : 1 colonne sur mobile */
  .process-header-grid {
    grid-template-columns: 1fr !important;
  }
  .process-header-grid figure {
    aspect-ratio: 16/9 !important;
    order: -1;
  }

  /* Hero mega — 1 colonne, photo dessus */
  .hero-mega {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: calc(var(--header-h-mobile) + 24px) 20px 40px;
    min-height: auto;
  }
  .hero-mega__media {
    aspect-ratio: 16/10;
    order: -1; /* photo au-dessus sur mobile */
  }
  .hero-mega__title {
    font-size: clamp(2.8rem, 12vw, 4rem);
  }
  .hero-mega__sub { max-width: 100%; }

  /* PIÈGE #2 : CTA hero empilés pleine largeur */
  .hero-mega__cta {
    flex-direction: column;
    width: 100%;
  }
  .hero-mega__cta .btn { width: 100%; }

  /* Stats : wrap sur 2 lignes */
  .stats-grid { gap: 20px; }
  .stat-divider { display: none; }

  /* Process : 1 colonne */
  .process-steps { grid-template-columns: 1fr; }

  /* Services : 1 colonne */
  .svc-grid { grid-template-columns: 1fr; }

  /* Avis : 1 colonne */
  .avis-cards { grid-template-columns: 1fr; }

  /* Galerie : 1 colonne sous 560px (déjà géré, renforcement) */

  /* Réalisations header flex col */
  .realisations-header { flex-direction: column; align-items: flex-start; }

  /* PIÈGE #13 : pas de CTA dans header sur mobile */
  .header-cta-desktop { display: none !important; }

  /* Contact ctas pleine largeur */
  .contact-ctas .btn { width: 100%; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }
}

/* ===== Galerie mobile fine (sous 560px) PIÈGE #7 ===== */
@media (max-width: 560px) {
  .gal-masonry { column-count: 1; }
  .page-realisations .gal-masonry { column-count: 1; }
}

/* wf-noxoverflow : reveal vertical (le slide horizontal deborde la largeur sur mobile) */
[data-reveal]:not(.in){ transform: translateY(18px) !important; }