/* ============================================
   AB2S RESPONSIVE DESIGN - TOUS LES ÉCRANS
   100% Compatible Mobile, Tablette, Desktop
   ============================================ */

/* === TEXTE BOUTON MOBILE/DESKTOP === */
.mobile-text {
    display: none !important;
}
.desktop-text {
    display: inline !important;
}
@media (max-width: 768px) {
    .mobile-text {
        display: inline !important;
    }
    .desktop-text {
        display: none !important;
    }
}

/* === BREAKPOINTS ===
   Mobile: < 640px
   Tablette Portrait: 640px - 768px
   Tablette Paysage: 768px - 1024px
   Desktop: > 1024px
   Grand écran: > 1280px
*/

/* =======================================
   GRAND ÉCRAN (min-width: 1280px)
   ======================================= */
@media (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }
}

/* =======================================
   DESKTOP MOYEN (max-width: 1280px)
   ======================================= */
@media (max-width: 1280px) {
    .services-section .container {
        padding: 0 2rem;
    }
}

/* =======================================
   TABLETTE PAYSAGE (max-width: 1024px)
   ======================================= */
@media (max-width: 1024px) {
    /* Container */
    .container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    
    /* Header - Top Bar cachée */
    .top-bar {
        display: none;
    }
    
    /* Navigation - Styles gérés par mobile-menu.css */
    .nav-container {
        padding: 0.75rem 1rem;
    }
    
    /* === HERO SECTION === */
    .hero-section {
        padding: 8rem 0 2rem 0 !important;
        min-height: auto !important;
    }
    
    .hero-section .grid.grid-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    .hero-section h1 {
        font-size: 2.25rem !important;
    }
    
    .hero-section > .container > .grid > div:first-child {
        padding-right: 0 !important;
        text-align: center;
    }
    
    .hero-section > .container > .grid > div:first-child > div {
        justify-content: center !important;
    }
    
    /* === SERVICES GRID 5 colonnes → 3 colonnes === */
    .services-section .container > div[style*="grid-template-columns: repeat(5"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
    }
    
    /* CNAPS section sous services */
    .services-section .container > div[style*="grid-template-columns: repeat(5"]:last-of-type {
        grid-template-columns: 1fr !important;
    }
    
    .services-section .container > div[style*="grid-template-columns: repeat(5"]:last-of-type > div[style*="grid-column: span 4"] {
        grid-column: span 1 !important;
    }
    
    /* Service icon plus petit */
    .service-icon {
        width: 150px !important;
        height: 150px !important;
    }
    
    /* === POURQUOI CHOISIR - 2 colonnes === */
    .grid.grid-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    .grid.grid-2 > div[style*="min-height: 450px"] {
        min-height: 350px !important;
    }
    
    /* === DOMAINES D'INTERVENTION - 4 colonnes → 2 colonnes === */
    .grid.grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
    
    /* === STATS GRID === */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
    
    /* === SECTION CONTACT / DEVIS === */
    #contact > .container > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
    }
    
    /* Mockup iPhone - Centré */
    #contact > .container > div > div[style*="display: flex; justify-content: center"] {
        order: -1;
    }
    
    #contact > .container > div > div[style*="display: flex; justify-content: center"] > div[style*="width: 350px"] {
        width: 280px !important;
        height: 560px !important;
    }
    
    #contact > .container > div > div[style*="display: flex; justify-content: center"] > div[style*="width: 350px"] * {
        transform: scale(0.8);
        transform-origin: top left;
    }
    
    /* Section FAQ */
    .grid.grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }
    
    /* Modal devis */
    #devis-modal > div {
        margin: 1rem !important;
        max-width: 95% !important;
    }
    
    #devis-modal div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* =======================================
   TABLETTE PORTRAIT (max-width: 768px)
   ======================================= */
@media (max-width: 768px) {
    /* Container */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Sections padding réduit */
    section,
    .section {
        padding: 3rem 0 !important;
    }
    
    /* === HERO === */
    .hero-section {
        padding: 6rem 0 2rem 0 !important;
    }
    
    .hero-section h1 {
        font-size: 1.875rem !important;
        line-height: 1.2 !important;
    }
    
    .hero-section p[style*="font-size: 1.35rem"] {
        font-size: 1rem !important;
    }
    
    .hero-section p[style*="font-size: 1.05rem"] {
        font-size: 0.9rem !important;
    }
    
    /* Boutons hero empilés */
    .hero-section div[style*="display: flex; gap: 1.25rem"] {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .hero-section div[style*="display: flex; gap: 1.25rem"] a {
        width: 100% !important;
        text-align: center !important;
        padding: 1rem 1.5rem !important;
        font-size: 0.95rem !important;
    }
    
    /* === SERVICES GRID === */
    .services-section .container > div[style*="grid-template-columns: repeat(5"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    .service-icon {
        width: 120px !important;
        height: 120px !important;
        margin-bottom: 1rem !important;
    }
    
    .service-card {
        padding: 1rem !important;
    }
    
    .service-card h3 {
        font-size: 1rem !important;
    }
    
    .service-card p {
        font-size: 0.85rem !important;
    }
    
    /* === SECTION TITRES === */
    .section-title,
    h2.section-title,
    .section-header h2 {
        font-size: 1.5rem !important;
    }
    
    .section-subtitle {
        font-size: 0.9rem !important;
    }
    
    /* === DOMAINES D'INTERVENTION === */
    .grid.grid-4 {
        grid-template-columns: 1fr !important;
    }
    
    /* === STATS === */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    .stat-number {
        font-size: 2.5rem !important;
    }
    
    .stat-label {
        font-size: 0.9rem !important;
    }
    
    /* === FORMULAIRE POSTULER - Grille des postes === */
    .postes-grid,
    .form-grid-2 {
        grid-template-columns: 1fr !important;
    }
    
    .postes-grid label[style*="grid-column: span 2"] {
        grid-column: span 1 !important;
    }
    
    /* === SECTION CONTACT / DEVIS === */
    #contact {
        padding: 40px 15px !important;
    }
    
    #contact h2[style*="font-size: 2.5rem"] {
        font-size: 1.5rem !important;
    }
    
    /* Mockup iPhone caché sur mobile - trop petit */
    #contact > .container > div > div[style*="display: flex; justify-content: center"] {
        display: none !important;
    }
    
    /* === TÉMOIGNAGES DÉFILANTS === */
    .scrolling-testimonials {
        margin: 0 -1rem;
        padding: 0 1rem;
    }
    
    .testimonial-card-scroll {
        min-width: 280px !important;
        padding: 1.25rem !important;
    }
    
    .testimonial-quote {
        font-size: 0.9rem !important;
    }
    
    /* === FAQ === */
    .grid.grid-3 {
        grid-template-columns: 1fr !important;
    }
    
    .faq-question {
        font-size: 1rem !important;
        padding: 1rem !important;
    }
    
    /* === FOOTER === */
    .footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    
    .footer-column {
        margin-bottom: 1.5rem;
    }
    
    .footer-bottom-content {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }
    
    .footer-legal {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    /* === MODAL DEVIS === */
    #devis-modal {
        padding: 0.5rem !important;
    }
    
    #devis-modal > div {
        margin: 0.5rem auto !important;
        border-radius: 12px !important;
    }
    
    #devis-modal div[style*="padding: 2rem"] {
        padding: 1rem !important;
    }
    
    #devis-modal div[style*="padding: 2.5rem"] {
        padding: 1.25rem !important;
    }
    
    #devis-modal h2 {
        font-size: 1.25rem !important;
    }
    
    #devis-modal h3 {
        font-size: 1.1rem !important;
    }
    
    #devis-modal button[style*="padding: 1rem 2.5rem"] {
        width: 100% !important;
        padding: 0.875rem 1.5rem !important;
    }
    
    /* Close button modal */
    #close-devis-modal {
        top: 5px !important;
        right: 5px !important;
        width: 35px !important;
        height: 35px !important;
    }
    
    /* === CTA BANNERS === */
    .cta-banner h2,
    .brand-gradient h2 {
        font-size: 1.5rem !important;
    }
    
    .cta-banner p,
    .brand-gradient p {
        font-size: 0.9rem !important;
    }
    
    /* === CERTIFICATIONS === */
    .certifications-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* === VIDÉO SECTION === */
    .video-section {
        padding: 2rem 0 3rem 0 !important;
    }
    
    .video-section h2 {
        font-size: 1.5rem !important;
    }
}

/* =======================================
   MOBILE (max-width: 640px)
   ======================================= */
@media (max-width: 640px) {
    /* === HERO === */
    .hero-section {
        padding: 5rem 0 1.5rem 0 !important;
    }
    
    .hero-section h1 {
        font-size: 1.5rem !important;
    }
    
    .hero-section p[style*="font-size: 1.35rem"] {
        font-size: 0.875rem !important;
        letter-spacing: 1px !important;
    }
    
    /* === SERVICES === */
    .services-section .container > div[style*="grid-template-columns: repeat(5"] {
        grid-template-columns: 1fr !important;
    }
    
    .service-icon {
        width: 100px !important;
        height: 100px !important;
    }
    
    /* === POURQUOI CHOISIR === */
    .grid.grid-2 > div[style*="padding: 1.75rem 2rem"] {
        padding: 1.25rem !important;
    }
    
    .grid.grid-2 h3 {
        font-size: 1rem !important;
    }
    
    .grid.grid-2 p {
        font-size: 0.85rem !important;
    }
    
    /* Image section plus petite */
    .grid.grid-2 > div[style*="min-height: 450px"],
    .grid.grid-2 > div[style*="min-height: 350px"] {
        min-height: 250px !important;
    }
    
    /* === STATS === */
    .stat-item {
        padding: 1rem !important;
    }
    
    .stat-number {
        font-size: 2rem !important;
    }
    
    /* === CONTACT SECTION === */
    #contact h2[style*="font-size: 2.5rem"],
    #contact h2[style*="font-size: 1.5rem"] {
        font-size: 1.25rem !important;
    }
    
    #contact p[style*="line-height: 1.7"] {
        font-size: 0.9rem !important;
    }
    
    #contact ul[style*="list-style: none"] li span:last-child {
        font-size: 0.9rem !important;
    }
    
    #contact button[style*="padding: 1.25rem"] {
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    /* === TÉMOIGNAGES === */
    .testimonial-card-scroll {
        min-width: 260px !important;
    }
    
    .testimonial-avatar {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.9rem !important;
    }
    
    /* === MODAL === */
    #devis-modal > div[style*="max-width: 800px"] {
        max-width: 100% !important;
    }
    
    #devis-modal input,
    #devis-modal select,
    #devis-modal textarea {
        font-size: 16px !important; /* Évite le zoom sur iOS */
        padding: 0.75rem !important;
    }
    
    /* Boutons modal */
    #devis-modal button {
        font-size: 0.95rem !important;
    }
    
    /* Progress steps */
    #devis-modal div[style*="display: flex; gap: 0.5rem"] {
        flex-wrap: wrap !important;
    }
    
    /* === FOOTER === */
    .footer-column h3 {
        font-size: 1rem !important;
    }
    
    .footer-link,
    .footer-contact-item {
        font-size: 0.9rem !important;
    }
    
    .footer-copyright {
        font-size: 0.75rem !important;
    }
    
    /* === VIDÉO === */
    .video-section > .container > div[style*="max-width: 900px"] {
        max-width: 100% !important;
    }
}

/* =======================================
   TRÈS PETIT MOBILE (max-width: 400px)
   ======================================= */
@media (max-width: 400px) {
    .hero-section h1 {
        font-size: 1.25rem !important;
    }
    
    .section-title,
    h2.section-title {
        font-size: 1.25rem !important;
    }
    
    .service-icon {
        width: 80px !important;
        height: 80px !important;
    }
    
    .service-card h3 {
        font-size: 0.9rem !important;
    }
    
    .btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.85rem !important;
    }
    
    .testimonial-card-scroll {
        min-width: 240px !important;
        padding: 1rem !important;
    }
}

/* =======================================
   LANDSCAPE MOBILE
   ======================================= */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: auto !important;
        padding: 5rem 0 2rem 0 !important;
    }
    
    #devis-modal {
        padding: 0.5rem !important;
    }
    
    #devis-modal > div {
        max-height: 95vh !important;
        overflow-y: auto !important;
    }
}

/* =======================================
   ACCESSIBILITÉ - TRÈS GRANDS ÉCRANS
   ======================================= */
@media (min-width: 1920px) {
    .container {
        max-width: 1400px;
    }
    
    .hero-section h1 {
        font-size: 4rem !important;
    }
    
    .section-title {
        font-size: 2.5rem !important;
    }
}

/* =======================================
   PRINT - IMPRESSION
   ======================================= */
@media print {
    .top-bar,
    .nav-bar,
    .main-header,
    .hamburger-btn,
    .emergency-btn,
    .candidature-btn,
    #devis-modal,
    .scrolling-testimonials,
    #contact > .container > div > div[style*="display: flex; justify-content: center"],
    footer {
        display: none !important;
    }
    
    .hero-section {
        margin-top: 0 !important;
        padding-top: 2rem !important;
    }
    
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
}

/* =======================================
   FIXES SPÉCIFIQUES iOS
   ======================================= */
@supports (-webkit-touch-callout: none) {
    /* Évite le zoom automatique sur les inputs */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* Fix pour le scroll momentum */
    .main-nav,
    #devis-modal {
        -webkit-overflow-scrolling: touch;
    }
}

/* =======================================
   ANIMATIONS RÉDUITES (accessibilité)
   ======================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .scrolling-track {
        animation: none !important;
    }
}