/* Mobile-first defaults: ajustements pour breakpoints */

/* Tres petit : reduire padding sections */
@media (max-width: 420px) {
  section { padding: var(--sp-12) 0; }
  .hero { padding: var(--sp-8) 0 var(--sp-12); }
  .hero h1 { font-size: clamp(2rem, 1.6rem + 4vw, 2.6rem); }
  .hero-cta .btn { padding: 0.78rem 1.1rem; font-size: 0.9rem; flex: 1 1 auto; }
  .stats-strip { padding: var(--sp-8) 0; }
  .stat-num { font-size: 2rem; }
  .header-inner { gap: 0.5rem; }
  .brand-tag { display: none; }
}

/* Tablet */
@media (min-width: 600px) and (max-width: 919px) {
  .hero-cta .btn { padding: 0.95rem 1.5rem; }
}

/* Desktop */
@media (min-width: 1180px) {
  .hero h1 { max-width: 14ch; }
}

/* Reduit FAB sur petit ecran si necessaire */
@media (max-width: 360px) {
  .fab-call { padding: 0.7rem 0.95rem; font-size: 0.85rem; }
}

/* Contact padding mobile : laisser place au FAB */
@media (max-width: 919px) {
  .contact { padding-bottom: calc(var(--sp-16) + 60px); }
}

/* Lightbox boutons sur mobile */
@media (max-width: 540px) {
  .lb-close, .lb-prev, .lb-next { width: 40px; height: 40px; font-size: 1.1rem; }
  .lb-close { top: 0.6rem; right: 0.6rem; }
}