/* ============================================
MOBILE-FIRST OPTIMIZATIONS
Optimized for: 320px, 375px, 414px, 768px
============================================ */
/* Base font size - prevent iOS zoom */
html { font-size: 16px; }
body { font-size: 16px; line-height: 1.6; overflow-x: hidden; max-width: 100vw; }
/* Images responsive */
img, video { max-width: 100%; height: auto; }
/* Touch targets - minimum 48x48px (Google recommendation) */
button, a.button, input[type="submit"], input[type="button"],
a.cta, a[href^="tel:"], a[href^="mailto:"], a[href^="https://wa.me"] {
min-height: 48px; min-width: 48px;
}
/* Forms - prevent iOS zoom (font-size: 16px required) */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], textarea, select {
font-size: 16px !important;
min-height: 48px;
padding: 0.75rem 1rem;
}
/* Mobile breakpoint (max-width: 767px) */
@media (max-width: 767px) {
/* Buttons full-width on mobile */
.cta-button, a[href*="devis"], button[type="submit"] {
width: 100% !important;
}
/* Typography */
h1 { font-size: clamp(1.75rem, 5vw + 1rem, 2.5rem); line-height: 1.2; }
h2 { font-size: clamp(1.5rem, 4vw + 0.5rem, 2rem); line-height: 1.3; }
/* Spacing */
section { padding-top: 2rem; padding-bottom: 2rem; }
}
/* Tablet breakpoint (768px+) */
@media (min-width: 768px) {
section { padding-top: 3rem; padding-bottom: 3rem; }
}
/* Tables - responsive scroll */
table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Performance - reduce animations */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {