/** * Born To Clean - Responsive Styles * Media queries consolidées */  /* ============================================ DESKTOP LARGE (max-width:1240px) ============================================ */ @media (max-width:1240px){:root{--container-max:1100px;} .hero .container{gap:var(--spacing-lg);} .services-grid,.bento-grid,.process-grid{gap:var(--spacing-md);} .process-step::after{width:80%;right:-40%;}}  /* ============================================ DESKTOP (max-width:1024px) ============================================ */ @media (max-width:1024px){:root{ --spacing-xxl:72px; --spacing-xl:48px;} .section{padding:var(--spacing-xl) 0;}   .hero{min-height:550px;} .hero .container{grid-template-columns:1fr;gap:var(--spacing-lg);} .hero-card{max-width:100%;margin:0 auto;} .hero-content p{max-width:100%;} .hero-stats{justify-content:center;}   .guarantees-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-md);} .services-grid,.services-detailed-grid{grid-template-columns:repeat(2,1fr);} .testimonials-grid{grid-template-columns:repeat(2,1fr);}   .about-section .container{grid-template-columns:1fr;gap:var(--spacing-lg);} .about-image img{height:350px;} .experience-badge{bottom:20px;right:20px;} .features-list{grid-template-columns:1fr;}   .process-grid{grid-template-columns:repeat(2,1fr);} .process-step::after{display:none;}   .faq-section .container{grid-template-columns:1fr;} .faq-header{position:static;text-align:center;} .faq-header .section-subtitle,.faq-header h2{text-align:center;}   .service-areas-grid{grid-template-columns:1fr;} .areas-image-single img{height:350px;}   .tarifs-grid{grid-template-columns:repeat(2,1fr);}   .footer-grid{grid-template-columns:repeat(2,1fr);} .footer-brand{grid-column:span 2;}   .protocole-grid,.outils-grid{grid-template-columns:repeat(2,1fr);} .pourquoi-grid{grid-template-columns:1fr;} .pourquoi-image{order:-1;} .tarifs-inclusions ul{grid-template-columns:1fr;}}  /* ============================================ TABLET (max-width:768px) ============================================ */ @media (max-width:768px){:root{ --spacing-xxl:56px; --spacing-xl:40px; --spacing-lg:24px;} .section{padding:var(--spacing-lg) 0;} .container{padding-left:16px;padding-right:16px;} .section-header{margin-bottom:var(--spacing-lg);} .section-subtitle{font-size:0.8rem;letter-spacing:1.5px;}   .top-bar{padding:8px 0;} .top-bar .container{justify-content:center;} .contact-info{gap:var(--spacing-sm);justify-content:center;} .contact-info-item{font-size:11px;} .contact-info-item svg{width:14px;height:14px;} .hide-mobile{display:none;}   .header .container{height:70px;} .logo-tagline{display:none;} .mobile-toggle{display:flex;} .header-cta{display:none;}   .nav-menu{ position:absolute; top:100%; left:0; width:100%; max-height:0; background:#fff; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.1); transition:max-height 0.4s ease; z-index:900;}  .nav-menu.active{ max-height:80vh; overflow-y:auto;}  .nav-list{ flex-direction:column; align-items:stretch; gap:0; padding:0; width:100%;}   .nav-list > li{ border-bottom:1px solid #f0f0f0; width:100%; display:block;}  .nav-list > li > a{ padding:16px 24px; font-size:15px; font-weight:500; color:#333; background:#fff; display:block; width:100%; box-sizing:border-box; text-decoration:none;}   .nav-list > li.menu-item-has-children > a{ display:flex; justify-content:space-between; align-items:center;}  .nav-list > li > a:hover{ background:#f9f9f9; color:var(--color-primary);}   .nav-list > li.menu-item-has-children > a::after{ border-color:#999; transition:transform 0.3s ease;}  .nav-list > li.menu-item-has-children.active > a::after{ transform:rotate(-135deg);}   .sub-menu{ position:static; background:#fafafa; border:none; border-radius:0; box-shadow:none; padding:0; margin:0; max-height:0; overflow:hidden; opacity:1; visibility:visible; transform:none; transition:max-height 0.3s ease; width:100%;}  .nav-list > li.active > .sub-menu{ max-height:500px;}  .sub-menu li{ border-bottom:1px solid #e8e8e8; width:100%;}  .sub-menu li:last-child{ border-bottom:none;}  .sub-menu a{ padding:14px 24px 14px 40px; font-size:14px; font-weight:400; color:#666; background:#fafafa; display:block; width:100%; box-sizing:border-box;}  .sub-menu a:hover{ background:#f0f0f0; color:var(--color-primary);}   .sub-menu a svg{ display:none;}   .mega-menu{ display:none;}   .nav-overlay{ display:none;}   .hero{min-height:auto;padding:var(--spacing-xl) 0;} .hero-content p{font-size:1rem;} .hero-buttons{flex-direction:column;} .hero-buttons .btn{width:100%;justify-content:center;} .hero-stats{gap:var(--spacing-md);flex-wrap:wrap;justify-content:center;} .stat-item{min-width:100px;} .hero-card{padding:var(--spacing-lg) var(--spacing-md);}   .hero-visual{ display:none;}   .urgence-banner .container{flex-direction:column;text-align:center;gap:var(--spacing-sm);} .urgence-title{justify-content:center;} .btn-urgence{width:100%;max-width:300px;justify-content:center;}   .guarantees-section{padding:var(--spacing-md) 0;} .guarantees-grid{grid-template-columns:1fr;gap:var(--spacing-sm);} .guarantee-item{flex-direction:column;text-align:center;} .guarantee-icon{width:40px;height:40px;} .guarantee-icon svg{width:20px;height:20px;}   .services-grid, .services-detailed-grid, .testimonials-grid, .protocole-grid, .outils-grid, .bento-grid, .tarifs-grid{ grid-template-columns:1fr; gap:var(--spacing-md);}  .service-card{padding:var(--spacing-lg) var(--spacing-md);} .bento-card.featured{grid-column:span 1;}   .about-image img{height:300px;} .experience-badge{position:static;margin-top:var(--spacing-md);display:inline-block;}   .process-grid{gap:var(--spacing-lg);} .step-number{width:50px;height:50px;font-size:18px;}   .testimonial-card{padding:var(--spacing-md);}   .accordion-header{padding:var(--spacing-sm);font-size:14px;} .accordion-content{padding:var(--spacing-sm);font-size:15px;}   .areas-image-single img{height:300px;}   .cta-buttons{ gap:var(--spacing-sm);} .cta-buttons .btn, .btn-contact{ font-size:13px; padding:12px 20px;} .cta-reassurances, .cta-reassurance{flex-direction:column;gap:var(--spacing-xs);}   .footer{padding:var(--spacing-xl) 0 var(--spacing-sm);} .footer-grid{grid-template-columns:1fr;gap:var(--spacing-xl);} .footer-brand{grid-column:span 1;text-align:center;} .footer-brand .logo{justify-content:center;margin:0 auto var(--spacing-md);} .footer-brand > p{font-size:15px;} .certifications{justify-content:center;} .footer-social{text-align:center;} .social-links{justify-content:center;} .footer-links{text-align:center;} .footer-contact{text-align:center;} .footer-contact li{justify-content:center;} .footer-contact ul{display:flex;flex-direction:column;align-items:center;} .footer-bottom{flex-direction:column;text-align:center;padding-top:var(--spacing-sm);gap:var(--spacing-xs);} .footer-legal{flex-wrap:wrap;justify-content:center;gap:var(--spacing-sm);}   .popup-overlay{padding:0;} .popup-container{max-width:100%;max-height:100vh;height:100vh;border-radius:0;} .popup-header{padding:20px;} .popup-logo{width:44px;height:44px;} .popup-title-group h2{font-size:1.2rem;} .step-indicators{padding:16px;gap:6px;} .popup-step-number{width:44px;height:44px;font-size:16px;} .step-connector{width:20px;} .popup-body{padding:20px;max-height:calc(100vh - 180px);} .service-selection{grid-template-columns:1fr;gap:12px;} .service-option{display:flex;align-items:center;gap:15px;text-align:left;padding:15px;} .service-option .service-icon{margin:0;width:50px;height:50px;flex-shrink:0;} .form-row{grid-template-columns:1fr;gap:12px;} .urgency-selector{grid-template-columns:1fr;gap:8px;} .form-navigation{flex-direction:column-reverse;gap:10px;} .form-navigation .btn-nav{width:100%;justify-content:center;}   .hero-prestation{min-height:50vh;padding:var(--spacing-lg) 0;} .pourquoi-image img,.pourquoi-image .placeholder{height:300px;} .pourquoi-content{text-align:center;} .pourquoi-content .content ul li{text-align:left;} .faq-category-title{text-align:center;}   .back-to-top{ display:none;}}  /* ============================================ MOBILE (max-width:480px) ============================================ */ @media (max-width:480px){:root{ --spacing-xxl:48px; --spacing-xl:32px; --spacing-lg:20px; --spacing-md:16px;} body{font-size:15px;} .section{padding:var(--spacing-md) 0;} .section-header{margin-bottom:var(--spacing-md);}   .contact-info-item{font-size:10px;} .contact-info-item span{display:none;} .contact-info-item svg{width:18px;height:18px;}   .header .container{height:65px;} .logo-text{font-size:1rem;} .logo-icon{width:36px;height:36px;} .logo-icon svg{width:20px;height:20px;} .mobile-toggle{width:36px;height:36px;}   .hero{padding:var(--spacing-lg) 0;} .hero-card{padding:var(--spacing-md);} .hero-card h2, .hero-card h3, .hero-card-title{font-size:1.125rem;} .stat-number{font-size:1.75rem;} .stat-label{font-size:10px;}   .hero-visual{ display:none;}   .urgence-banner{padding:12px 0;} .urgence-title{font-size:1rem;} .urgence-text{font-size:0.875rem;} .btn-urgence{font-size:0.8rem;padding:9px 20px;}   .guarantee-icon{width:36px;height:36px;} .guarantee-text{font-size:12px;}   .btn{padding:11px 20px;font-size:12px;} .btn svg{width:16px;height:16px;}   .service-card,.testimonial-card,.bento-card,.tarif-card{padding:var(--spacing-md);} .service-card-icon{width:48px;height:48px;} .bento-icon{width:40px;height:40px;}   .about-image img{height:250px;} .experience-badge{padding:var(--spacing-sm);} .experience-badge .number{font-size:2.5rem;}   .step-number{width:50px;height:50px;font-size:1.25rem;}   .testimonial-avatar{width:40px;height:40px;}   .accordion-header{font-size:13px;padding:12px;} .accordion-content{padding:12px;font-size:14px;}   .areas-image-single img{height:250px;}   .cta-section{padding:var(--spacing-lg) 0;} .cta-buttons{ flex-direction:column; gap:var(--spacing-xs);} .cta-buttons .btn, .btn-contact{ width:100%; max-width:350px; justify-content:center; padding:13px 20px; font-size:13px;} .btn-contact{ font-size:12px;} .cta-reassurances .reassurance-item, .cta-reassurance .reassurance-item, .reassurance-item{font-size:12px;}   .footer{padding:var(--spacing-lg) 0 var(--spacing-sm);} .footer h4{font-size:0.95rem;} .footer-brand > p{font-size:14px;} .social-links a{width:36px;height:36px;} .footer-bottom{font-size:12px;} .footer-legal{flex-direction:column;gap:var(--spacing-xs);align-items:center;}   .popup-header{padding:16px;} .popup-logo{display:none;} .popup-title-group h2{font-size:1.1rem;} .step-indicators{padding:12px;} .popup-step-number{width:38px;height:38px;font-size:14px;} .step-indicator span{display:none;} .popup-body{padding:16px;} .service-option{padding:12px;} .service-option .service-icon{width:44px;height:44px;}   .hero-prestation .hero-description{font-size:1rem;} .outil-card-icon{width:48px;height:48px;}   .back-to-top{ display:none;}}  /* ============================================ LANDSCAPE MODE (MOBILE) ============================================ */ @media (max-width:768px) and (orientation:landscape){ .header .container{height:60px;} .hero,.hero-prestation{min-height:auto;padding:var(--spacing-md) 0;} .section{padding:var(--spacing-md) 0;} .popup-body{max-height:calc(100vh - 140px);} .service-selection{grid-template-columns:repeat(3,1fr);} .service-option{flex-direction:column;text-align:center;}}  /* ============================================ REDUCED MOTION ============================================ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;} .service-card:hover,.btn:hover,.back-to-top:hover{transform:none;}}  /* ============================================ HIGH CONTRAST MODE ============================================ */ @media (prefers-contrast:high){:root{--color-border:#000;} .btn,.card{border-width:2px;} a{text-decoration:underline;} .header{border-bottom:2px solid var(--color-text);}}  /* ============================================ PRINT MODE ============================================ */ @media print{ .top-bar,.header,.back-to-top,.popup-overlay,.cta-section,.urgence-banner, .mobile-toggle,.footer-social,.footer-bottom{display:none !important;} .footer{background:none;color:#000;padding:var(--spacing-md) 0;} a{text-decoration:underline;} a[href]:after{content:" (" attr(href) ")";}}