/* responsive.css — mobile-first, breakpoints */

/* Breakpoints : 560 / 768 / 1024 / 1200 */

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

  .site-header { height: var(--header-h); }

  /* Nav desktop visible */
  .nav-desktop { display: flex; }

  /* CTA desktop visible — .btn.header-cta-desktop spec 0,2,0 */
  .btn.header-cta-desktop { display: inline-flex; }

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

  /* FAB cachés sur desktop (nav header suffit) */
  .fab-group { display: none; }

  /* HERO desktop — offset avec hauteur header desktop */
  .hero-wrap { padding-top: 0; }
  .hero-grid75 {
    padding-top: clamp(48px, 7vw, 96px);
  }

  /* About split */
  .about-split { grid-template-columns: 1fr 1.1fr; }

  /* Contact layout */
  .contact-layout { grid-template-columns: 1.1fr 1fr; }

  /* Header open dot */
  .header-open-dot { display: flex; }
}

/* ========================================
   MAX 767px — mobile uniquement
   ======================================== */
@media (max-width: 767px) {
  /* HERO 1 colonne, photo en premier */
  .hero-grid75 {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: calc(var(--header-h-mobile) + 20px) 20px 36px;
  }
  .hero-grid75__media {
    aspect-ratio: 21/9; /* moins haut sur mobile pour laisser place aux CTAs */
    order: -1;
    border-radius: var(--r-lg);
  }
  .hero-grid75__sub { max-width: 100%; }
  /* Chips cachés sur mobile pour garder les CTAs visibles dans le fold */
  .chips { display: none; }

  /* CTA hero : empilés pleine largeur (PIÈGE #2) */
  .hero-grid75__cta {
    flex-direction: column;
    width: 100%;
  }
  .hero-grid75__cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Services alt-rows : 1 colonne */
  .svc-alt__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* Réinitialise order sur mobile (toujours art/media en premier) */
  .svc-alt__row:nth-child(even) .svc-alt__art { order: -1; }
  .svc-alt__art { aspect-ratio: 3/2; }

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

  /* About split : 1 colonne, photo d'abord */
  .about-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about-photo { order: -1; aspect-ratio: 16/9; }

  /* Contact layout : 1 colonne */
  .contact-layout { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }

  /* Stats : empilés */
  .stats-grid { grid-template-columns: 1fr; }
  .stat-item { border-bottom: 1px solid rgba(255,255,255,.1); }

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

  /* Gallery masonry */
  .gal-masonry { column-count: 1; }

  /* Footer grid : 1 colonne */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }

  /* Section padding réduit */
  .section { padding-block: clamp(40px, 6vw, 64px); }

  /* Hero title mobile floor */
  .hero-grid75__title { font-size: clamp(2rem, 10vw, 3rem); }

  /* Contact CTA stack */
  .contact-cta-stack .btn { width: 100%; }
}

/* ========================================
   560px–767px — petite tablette
   ======================================== */
@media (min-width: 560px) and (max-width: 767px) {
  .avis-cards-support { grid-template-columns: 1fr 1fr; }
  .gal-masonry { column-count: 2; }
}

/* ========================================
   900px+ — galerie 3 colonnes
   ======================================== */
@media (min-width: 900px) {
  .gal-masonry { column-count: 3; }
}

/* ========================================
   1024px+ — footergrid 3 colonnes
   ======================================== */
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

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