/* ============================================================
   RESPONSIVE — ajustements mobile-first complémentaires
   ============================================================ */

/* Tous les composants sont déjà mobile-first.
   Ce fichier gère les cas spéciaux. */

/* Assure que le body ne génère pas de scroll horizontal */
html, body { max-width: 100vw; }

/* — Stats : 1 col sur très petit mobile ------------------- */
@media (max-width: 360px) {
  .stats-grid { gap: 20px; }
  .stat-num { font-size: 2.2rem; }
}

/* — Avis carousel : item un peu plus large sur petits écrans */
@media (max-width: 400px) {
  .avis-carousel__item { width: calc(100vw - 40px); }
}

/* — Services list : simplification layout à 390px ---------- */
@media (max-width: 560px) {
  .svc-list__item { grid-template-columns: 1fr; gap: 8px; }
  .svc-list__num  { display: none; }
}

/* — Contact grid : assure que la carte ne déborde pas ------ */
@media (max-width: 560px) {
  .map-wrapper { padding-top: 65%; }
}

/* — À propos : ordre photo/texte sur mobile --------------- */
@media (max-width: 768px) {
  .apropos-block { gap: 20px; }
}

/* — Galerie slider : no mask sur très petit écran ---------- */
@media (max-width: 440px) {
  .gal-slider {
    -webkit-mask-image: none;
    mask-image: none;
    padding-inline: 0;
  }
}

/* — Footer : grille centrée sur mobile -------------------- */
@media (max-width: 600px) {
  .footer__inner { text-align: left; }
}

/* — Realisations header stack sur mobile ------------------ */
@media (max-width: 560px) {
  .realisations-header { flex-direction: column; align-items: flex-start; }
}

/* — Hero band : pas de border-radius sur mobile ----------- */
@media (max-width: 440px) {
  .hero-centre__band { border-radius: var(--r-md); }
}

/* — Desktop : nav et header complet ----------------------- */
@media (min-width: 768px) {
  .hero-centre {
    padding-top: calc(var(--header-h) + 48px);
  }
}

/* — Galerie desktop 3 col (pour realisations.html) -------- */
.gal-masonry {
  column-count: 3;
  column-gap: 14px;
}

.gal-masonry__item {
  width: 100%;
  margin-bottom: 14px;
  border-radius: var(--r-lg);
  overflow: hidden;
  break-inside: avoid;
  cursor: pointer;
  display: block;
}

.gal-masonry__item img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform .4s ease;
}

.gal-masonry__item:hover img { transform: scale(1.03); }

@media (max-width: 900px) { .gal-masonry { column-count: 2; } }
@media (max-width: 560px) { .gal-masonry { column-count: 1; } }

@media (prefers-reduced-motion: reduce) {
  .gal-masonry__item img { transition: none; }
  .gal-masonry__item:hover img { transform: none; }
}

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