/* ============================================================ mobile.css — Surcharge mobile ciblée Charger APRÈS style.css dans le ============================================================ */ @media (max-width: 768px) { /* ============================================================ 1. CAROUSEL ============================================================ */ .services-carousel { overflow: hidden; position: relative; width: 100%; } .services-grid { display: flex !important; flex-wrap: nowrap !important; gap: 0 !important; margin-top: 40px !important; padding: 0 !important; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; will-change: transform; align-items: stretch; box-sizing: border-box; } .service-card { min-width: 100% !important; max-width: 100% !important; flex-shrink: 0 !important; padding: 28px 22px !important; border-radius: 16px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; } .service-card__title { font-size: 1.05rem !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; -webkit-hyphens: none !important; white-space: normal !important; line-height: 1.3 !important; margin-bottom: 10px !important; } .service-card__desc { font-size: 0.88rem !important; line-height: 1.65 !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: none !important; -webkit-hyphens: none !important; } .service-card__icon { width: 50px !important; height: 50px !important; font-size: 1.4rem !important; margin-bottom: 18px !important; } .services-carousel-nav { margin-top: 24px !important; gap: 12px !important; } .carousel-btn { width: 40px !important; height: 40px !important; font-size: 1rem !important; } .carousel-dots { display: flex !important; gap: 8px !important; align-items: center; } .carousel-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: rgba(0, 194, 224, 0.3) !important; transition: all 0.3s ease !important; cursor: pointer; border: none; padding: 0; } .carousel-dot.active { width: 22px !important; border-radius: 4px !important; background: #00c2e0 !important; } /* ============================================================ 2. NAVBAR ============================================================ */ .navbar__links, .navbar__cta .btn:not(.btn-call), .navbar__phone { display: none !important; } .burger { display: flex !important; } /* ============================================================ 3. HERO ============================================================ */ .hero__content { grid-template-columns: 1fr !important; padding: 100px 20px 60px !important; gap: 0 !important; } .hero__right { display: none !important; } .hero__title { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; letter-spacing: -0.3px !important; word-break: normal !important; hyphens: none !important; -webkit-hyphens: none !important; } .hero__subtitle { font-size: 0.92rem !important; max-width: 100% !important; margin-bottom: 32px !important; } .hero__actions { flex-direction: column !important; gap: 12px !important; } .hero__actions .btn { width: 100% !important; justify-content: center !important; } /* ============================================================ 4. SECTIONS ============================================================ */ .section { padding: 56px 0 !important; } .container { padding: 0 20px !important; } .section-title { font-size: clamp(1.35rem, 5.5vw, 1.8rem) !important; word-break: normal !important; hyphens: none !important; -webkit-hyphens: none !important; } .section-subtitle { font-size: 0.92rem !important; max-width: 100% !important; } /* ============================================================ 5. SERVICES DÉTAIL ============================================================ */ .services-detail { grid-template-columns: 1fr !important; gap: 16px !important; margin-top: 40px !important; } .service-detail-card { padding: 28px 22px !important; border-radius: 16px !important; } .service-detail-card__title { font-size: 1.1rem !important; word-break: normal !important; hyphens: none !important; } .service-detail-card__list li { font-size: 0.88rem !important; line-height: 1.55 !important; word-break: normal !important; } /* ============================================================ 6. À PROPOS ============================================================ */ .about-grid { grid-template-columns: 1fr !important; gap: 36px !important; } .about-values { grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-top: 28px !important; } .about-value { padding: 18px 14px !important; } .about-value__title { font-size: 0.88rem !important; word-break: normal !important; } .about-value__text { font-size: 0.8rem !important; } .about-stats { gap: 14px !important; } .about-stat-item { padding: 24px 20px !important; border-radius: 16px !important; } .about-stat-item__num { font-size: 2.4rem !important; } /* ============================================================ 7. ZONES ============================================================ */ .zones-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; margin-top: 28px !important; } .zone-card { padding: 20px 14px !important; } .zone-card__name { font-size: 0.88rem !important; word-break: normal !important; } /* ============================================================ 8. CTA BANNER ============================================================ */ .cta-banner { flex-direction: column !important; padding: 36px 24px !important; text-align: center !important; gap: 24px !important; border-radius: 16px !important; } .cta-banner__title { font-size: clamp(1.2rem, 5vw, 1.6rem) !important; word-break: normal !important; hyphens: none !important; max-width: 100% !important; } .cta-banner__actions { flex-direction: column !important; width: 100% !important; gap: 12px !important; flex-shrink: unset !important; } .cta-banner__actions .btn { width: 100% !important; justify-content: center !important; } /* ============================================================ 9. CONTACT ============================================================ */ .contact-grid { grid-template-columns: 1fr !important; gap: 24px !important; } .contact-form-card { padding: 28px 20px !important; border-radius: 16px !important; } .form-title { font-size: 1.3rem !important; } .form-row { grid-template-columns: 1fr !important; } .contact-info-card { padding: 28px 20px !important; border-radius: 16px !important; } .contact-info-card__title { font-size: 1.3rem !important; } /* ============================================================ 10. FOOTER ============================================================ */ .footer { padding: 48px 0 0 !important; } .footer__grid { grid-template-columns: 1fr !important; gap: 28px !important; padding-bottom: 32px !important; } .footer__logo { font-size: 1.5rem !important; } .footer__desc { font-size: 0.88rem !important; max-width: 100% !important; } .footer__bottom { font-size: 0.78rem !important; padding: 16px 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; text-align: center !important; } /* ============================================================ 11. PAGE HEADER ============================================================ */ .page-header { padding: 120px 0 52px !important; } .page-header__title { font-size: clamp(1.4rem, 6vw, 1.9rem) !important; word-break: normal !important; hyphens: none !important; } .page-header__sub { font-size: 0.92rem !important; } /* ============================================================ 12. PAGE SERVICE DÉDIÉE ============================================================ */ .service-page-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .service-page-icon { display: none !important; } .service-page-logos { gap: 20px !important; margin: 0 0 24px 0 !important; justify-content: center !important; } .service-logo { height: 55px !important; } /* ============================================================ 13. BOUTONS ============================================================ */ .btn { padding: 13px 22px !important; font-size: 0.9rem !important; } } /* ============================================================ PETIT MOBILE (max 480px) ============================================================ */ @media (max-width: 480px) { .about-values { grid-template-columns: 1fr !important; } .zones-grid { grid-template-columns: 1fr 1fr !important; } .hero__title { font-size: clamp(1.3rem, 7vw, 1.7rem) !important; } .btn { padding: 12px 18px !important; font-size: 0.87rem !important; } .about-stat-item__num { font-size: 2rem !important; } .cta-banner { padding: 28px 16px !important; } .contact-form-card, .contact-info-card { padding: 22px 16px !important; } }