/* =============================================================
   MOBILE APP EXPERIENCE — Android / iOS Native Feel
   Fichier dédié mobile uniquement (max-width: 991px).
   Chargé après style.css pour surcharger proprement.
   ============================================================= */

/* ──────────────────────────────────────────────
   1. GLOBAL MOBILE SHELL
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    /* Prevent horizontal overflow on all elements */
    html,
    body {
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100%;
    }

    body {
        font-size: 15px;
        font-weight: 400;
        line-height: 1.7;
        letter-spacing: -0.011em;
        -webkit-font-smoothing: antialiased;
        -webkit-tap-highlight-color: rgba(51, 204, 102, 0.15);
    }

    /* Kill desktop cursor */
    .cursor {
        display: none !important;
    }

    /* Smooth momentum scrolling */
    main,
    .drawer-body {
        -webkit-overflow-scrolling: touch;
    }

    /* Container breathing room */
    .container {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* ──────────────────────────────────────────────
   2. MOBILE TOP BAR — App-Style Status Bar Feel
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    .theme-mobile-nav {
        position: sticky;
        top: 0;
        z-index: 999;
        background: #fff;
        box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .theme-mobile-menu {
        padding: 10px 0;
        min-height: 56px;
    }

    .theme-mobile-menu .mobile-logo img,
    .theme-mobile-menu .mobile-logo .logo-img {
        max-width: 130px;
        height: auto;
    }

    /* Hamburger — larger touch target */
    .hamburger {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 51, 102, 0.04);
        transition: background 0.2s ease;
    }
    .hamburger:active {
        background: rgba(51, 204, 102, 0.12);
    }

    .toggle-lines div {
        height: 2.5px;
        border-radius: 2px;
        margin: 0 0 5px;
        background: #003366;
    }
}

/* ──────────────────────────────────────────────
   3. MOBILE DRAWER — Native Slide Panel
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    .mobile-drawer {
        max-width: 85vw;
        width: 320px;
        border-radius: 20px 0 0 20px;
        box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
    }

    .drawer-header {
        padding: 18px 20px;
        border-bottom: 1px solid #f0f0f0;
        min-height: 60px;
    }

    .drawer-logo img {
        height: 32px;
        width: auto;
    }

    .drawer-close {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #0e1323;
        transition: all 0.2s ease;
    }
    .drawer-close:active {
        background: rgba(51, 204, 102, 0.15);
        transform: scale(0.92);
    }

    .drawer-body {
        padding: 12px 0;
    }

    /* Nav items — app-like list cells */
    .drawer-nav > li {
        border-bottom: 1px solid #f5f5f5;
    }

    .drawer-nav > li > a {
        padding: 16px 22px;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.006em;
        color: #1a1a2e;
        transition: all 0.2s ease;
        min-height: 52px;
        display: flex;
        align-items: center;
    }

    .drawer-nav > li > a i {
        font-size: 20px;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 51, 102, 0.06);
        border-radius: 10px;
        margin-right: 14px;
        color: #003366;
        flex-shrink: 0;
    }

    .drawer-nav > li > a.active {
        color: #33cc66;
        background: rgba(51, 204, 102, 0.04);
    }
    .drawer-nav > li > a.active i {
        background: rgba(51, 204, 102, 0.12);
        color: #33cc66;
    }

    /* Active state for tap */
    .drawer-nav > li > a:active {
        background: rgba(0, 51, 102, 0.04);
    }

    /* Submenu */
    .drawer-submenu li a {
        padding: 14px 22px 14px 72px;
        font-size: 15px;
        font-weight: 600;
        color: #555;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    .drawer-submenu li a:active {
        background: rgba(51, 204, 102, 0.06);
    }

    /* CTA button in drawer */
    .drawer-footer {
        padding: 16px 20px;
        border-top: 1px solid #f0f0f0;
    }

    .btn-drawer-quote {
        padding: 15px 24px;
        border-radius: 14px;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.3px;
        box-shadow: 0 4px 16px rgba(51, 204, 102, 0.3);
    }
    .btn-drawer-quote:active {
        transform: scale(0.97);
    }

    /* Overlay */
    .drawer-overlay.active {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}

/* ──────────────────────────────────────────────
   4. TYPOGRAPHY — Mobile Optimized for Inter
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    .section-title {
        font-size: 28px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.025em;
        font-weight: 800;
    }

    .section-subtitle {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        margin-bottom: 8px;
    }

    p {
        font-size: 15px;
        font-weight: 400;
        line-height: 1.7;
        letter-spacing: -0.006em;
    }

    h1 { font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; }
    h2 { font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
    h3 { font-size: 24px; font-weight: 700; line-height: 1.2; }
    h4 { font-size: 20px; font-weight: 600; line-height: 1.25; }
    h5 { font-size: 18px; font-weight: 600; line-height: 1.3; }
    h6 { font-size: 15px; font-weight: 600; line-height: 1.4; }
}

@media screen and (max-width: 420px) {
    .section-title {
        font-size: 24px !important;
        line-height: 1.15 !important;
    }
    p {
        font-size: 14px;
        line-height: 1.65;
    }
}

/* ──────────────────────────────────────────────
   5. SECTIONS — App-Like Spacing
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    .section-padding {
        padding: 50px 0;
    }

    /* About section */
    .about .row > [class*="col-"] {
        margin-bottom: 24px;
    }

    /* Services box — card feel */
    .services-box .item {
        background: #fff;
        border-radius: 16px;
        padding: 20px;
        margin-bottom: 16px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.04);
    }

    .services-box .item .icon {
        font-size: 40px !important;
        margin-right: 16px;
    }

    .services-box .item .icon::before {
        font-size: 40px;
        line-height: 40px;
    }

    .services-box .item h5 {
        font-size: 18px;
        margin-bottom: 4px;
    }

    .services-box .item p {
        font-size: 15px;
        font-weight: 400;
        line-height: 1.65;
        margin-bottom: 0;
    }

    .mb-90 {
        margin-bottom: 40px !important;
    }

    /* Features section cards */
    .features-item {
        border-radius: 16px;
        padding: 28px 20px;
        margin-bottom: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    .features-heading .section-title {
        font-size: 26px !important;
    }

    /* Partner section */
    .partner-section {
        padding: 50px 0;
    }
    .partner-heading .section-title {
        font-size: 24px !important;
    }
    .single-partner .inner-partner {
        min-height: 80px;
        padding: 14px;
        border-radius: 12px;
    }
}

/* ──────────────────────────────────────────────
   6. BUTTONS — Fat Touch Targets
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    .btn-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 14px;
        align-items: center;
    }

    .btn-wrap .button-1 {
        min-height: 52px;
        padding: 14px 28px;
        border-radius: 14px;
        font-size: 16px;
        font-weight: 700;
        width: auto;
        min-width: 220px;
        max-width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 16px rgba(51, 204, 102, 0.25);
    }

    .btn-wrap .button-1::after {
        display: none;
    }

    .btn-wrap .button-1:active {
        transform: scale(0.97) !important;
    }

    /* Call button */
    .btn-wrap .call-button {
        gap: 14px;
    }

    .btn-wrap .call-button .icon {
        width: 52px;
        height: 52px;
        line-height: 52px;
    }

    .btn-wrap .call-button .cont .phone {
        font-size: 20px;
    }

    /* av-btn */
    .av-btn {
        min-height: 48px;
        padding: 12px 20px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 12px;
    }

    /* All services button */
    .btn-all-services {
        min-height: 48px;
        padding: 13px 28px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ──────────────────────────────────────────────
   7. CARDS & CONTENT — Rounded Elevated Feel
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    /* Testimonials */
    .testimonials .item {
        border-radius: 18px;
        padding: 28px 22px;
        margin-bottom: 16px;
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
    }

    .testimonials .item .info p {
        font-size: 15px;
        font-weight: 400;
        margin-bottom: 24px;
    }

    .testimonials .item .review-title .img {
        width: 56px;
        height: 56px;
    }

    /* Services 3 cards */
    .services3 .item {
        border-radius: 16px;
        padding: 32px 18px;
        margin-bottom: 12px;
    }

    /* Blog cards */
    .blog .item {
        border-radius: 16px;
        margin-bottom: 20px;
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
    }
    .blog .item .img {
        border-radius: 16px 16px 0 0;
    }
    .blog .item .cont {
        padding: 24px 18px;
        border-radius: 0 0 16px 16px;
    }

    /* Gallery */
    .gallery-box {
        border-radius: 14px;
        margin-bottom: 12px;
    }

    /* Accordion */
    .accordion-box .block {
        border-radius: 14px;
        margin-bottom: 10px;
        overflow: hidden;
    }

    .accordion-box .block .acc-btn {
        font-size: 16px;
        padding: 16px 50px 16px 16px;
        line-height: 1.4;
        min-height: 52px;
        display: flex;
        align-items: center;
    }

    .accordion-box .block .acc-btn span {
        width: 34px;
        height: 34px;
        font-size: 14px;
        margin-right: 10px;
        flex-shrink: 0;
    }

    .accordion-box .block .acc-btn::before {
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
    }

    .accordion-box .block .content {
        padding: 0 18px 22px 18px;
    }

    .accordion-box .block .content p {
        font-size: 15px;
        font-weight: 400;
        line-height: 1.7;
    }
}

/* ──────────────────────────────────────────────
   8. FORMS — iOS/Android Input Style
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    .form-group {
        margin-bottom: 14px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 50px;
        border-radius: 12px;
        font-size: 16px; /* prevents iOS zoom */
        padding: 14px 16px 14px 50px;
        border: 1.5px solid #e8e8e8;
        background: #fafafa;
        transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        border-color: #33cc66;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(51, 204, 102, 0.1) !important;
    }

    .form-group textarea {
        min-height: 120px;
    }

    .form-group .form-icon {
        left: 16px;
        font-size: 16px;
    }

    /* Select dropdown */
    .demande-devis-form .form-group select {
        height: 50px;
        padding-left: 50px;
    }
}

/* ──────────────────────────────────────────────
   9. SLIDER — Mobile Cinematic
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    .slider-wrapper {
        border-radius: 0;
    }

    .main-slider .owl-item img {
        height: 55vh;
        min-height: 360px;
        max-height: 500px;
    }

    .theme-content h1,
    .theme-content h2 {
        font-size: 28px !important;
        font-weight: 800;
        line-height: 1.15;
    }

    .theme-content h3 {
        font-size: 13px;
        padding: 8px 14px;
    }

    .theme-content p {
        font-size: 15px;
        font-weight: 400;
        line-height: 1.65;
        margin-bottom: 14px;
    }

    .theme-content .av-btn {
        font-size: 15px;
        font-weight: 600;
        padding: 10px 18px;
        border-radius: 10px;
    }

    /* Dots */
    .main-slider.owl-theme .owl-dots {
        bottom: 16px;
    }
}

/* ──────────────────────────────────────────────
   10. FOOTER — Clean Mobile Layout
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    .footer {
        padding-top: 40px;
    }

    .second-footer {
        padding-top: 20px;
    }

    .second-footer .row > [class*="col-"] {
        margin-bottom: 28px;
    }

    .footer .widget {
        text-align: center;
    }

    .footer .widget-title {
        font-size: 20px !important;
        margin-bottom: 14px;
    }

    .footer .widget-text p,
    .footer .usful-links ul li a {
        font-size: 15px;
        font-weight: 400;
    }

    .footer .usful-links ul {
        margin: 0;
        padding: 0;
    }

    .footer .usful-links ul li {
        margin-bottom: 8px;
    }

    .footer .usful-links ul li a {
        padding: 8px 0 8px 18px;
        display: inline-flex;
        align-items: center;
    }

    /* Social icons row */
    .footer .social-icons li {
        margin-right: 8px;
        margin-bottom: 8px;
    }
    .footer .social-icons li > a {
        width: 46px;
        height: 46px;
        line-height: 46px;
        font-size: 16px;
    }

    /* Newsletter */
    .widget-newsletter input {
        height: 52px;
        font-size: 15px;
        border-radius: 14px;
    }
    .widget-newsletter button {
        height: 44px;
        width: 44px;
        border-radius: 12px;
        top: 4px;
        right: 4px;
    }

    /* Copyright */
    .copyright {
        text-align: center;
        padding: 20px 0;
    }
    .copyright p {
        font-size: 13px;
        font-weight: 400;
    }

    /* Info contact section */
    .info-contact-section {
        padding: 30px 0 10px;
    }
    .info-contact-section .widget-contact {
        margin-bottom: 14px;
    }
    .info-contact-section .contact-area {
        border-radius: 14px;
        padding: 16px 18px;
    }
    .info-contact-section .contact-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 18px;
    }
    .info-contact-section .contact-info .title {
        font-size: 15px;
        font-weight: 600;
    }
    .info-contact-section .contact-info .text {
        font-size: 13px;
        font-weight: 500;
    }
}

/* ──────────────────────────────────────────────
   11. APPOINTMENT / CTA SECTION
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    .appointment h4 {
        font-size: 24px;
        line-height: 1.3;
    }

    .appointment .help {
        margin-bottom: 20px;
    }

    .appointment .help .icon {
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .appointment .help .icon i {
        font-size: 24px;
    }

    .appointment .help .text a {
        font-size: 22px;
    }

    .appointment .appointment-cta-wrapper {
        min-height: 120px;
        padding: 24px 16px;
    }
}

/* ──────────────────────────────────────────────
   12. SCROLLING TICKER
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    .scrolling {
        padding: 20px 0;
    }
    .scrolling.scrolling-ticker .wrapper .content span {
        font-size: 18px;
    }
}

/* ──────────────────────────────────────────────
   13. BANNER HEADER (Inner Pages)
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    .banner-header {
        min-height: 220px;
    }

    .banner-header h1 {
        font-size: 30px;
    }

    .banner-header h2 {
        font-size: 28px;
    }

    .banner-header h3 {
        font-size: 26px;
        line-height: 1.25;
    }

    .banner-header h4 {
        font-size: 24px;
    }

    .banner-header h5 {
        font-size: 13px;
    }

    .banner-header p {
        font-size: 15px;
        font-weight: 400;
        line-height: 1.65;
    }
}

/* ──────────────────────────────────────────────
   14. IMAGES — Prevent Overflow
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    img {
        max-width: 100%;
        height: auto;
    }

    .about img {
        border-radius: 14px;
    }

    .about .row .col-6 img {
        border-radius: 12px;
    }
}

/* ──────────────────────────────────────────────
   15. PAGE LIST — Better Spacing
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    .page-list li {
        margin-bottom: 8px;
        padding: 4px 0;
    }

    .page-list-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }

    .page-list-text p {
        font-size: 15px;
        font-weight: 400;
    }
}

/* ──────────────────────────────────────────────
   16. OWL CAROUSEL DOTS — Touch Friendly
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    .owl-theme .owl-dots {
        margin-top: 16px;
    }

    .owl-theme .owl-dots .owl-dot {
        padding: 6px;
    }

    .owl-theme .owl-dots .owl-dot span {
        width: 8px;
        height: 8px;
    }

    .owl-theme .owl-dots .owl-dot.active span {
        width: 24px;
        border-radius: 4px;
    }
}

/* ──────────────────────────────────────────────
   17. PRICING — Mobile Cards
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    .pricing .item {
        padding: 36px 24px;
        border-radius: 18px;
        margin-bottom: 20px;
    }

    .pricing .item .cont h3 {
        font-size: 28px;
    }

    .pricing2 .list .flex .title {
        font-size: 16px;
        font-weight: 600;
    }

    .pricing2 .list .flex .price {
        font-size: 17px;
        font-weight: 700;
    }
}

/* ──────────────────────────────────────────────
   18. CONTACT & INFO-BOX — App Cards
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    .info-box .item {
        padding: 16px 0;
        margin-bottom: 16px;
    }

    .info-box .item .icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
        font-size: 22px;
        margin-right: 14px;
        border-radius: 14px;
    }

    .info-box .item h5 {
        font-size: 18px;
        margin-bottom: 2px;
    }

    .info-box .item p {
        font-size: 15px;
        font-weight: 400;
    }

    .worktime {
        border-radius: 16px;
        padding: 28px 22px;
    }
}

/* ──────────────────────────────────────────────
   19. FLOATING CONTACT — Mobile Bottom Adjust
   ────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    .floating-contact {
        bottom: 76px;
        right: 14px;
    }

    .progress-wrap {
        bottom: 16px;
        right: 14px;
    }
}

/* ──────────────────────────────────────────────
   20. SAFE AREAS & NOTCH SUPPORT
   ────────────────────────────────────────────── */
@supports (padding: max(0px)) {
    @media screen and (max-width: 991px) {
        .theme-mobile-nav {
            padding-top: max(0px, env(safe-area-inset-top));
            padding-left: max(0px, env(safe-area-inset-left));
            padding-right: max(0px, env(safe-area-inset-right));
        }

        .footer {
            padding-bottom: max(20px, env(safe-area-inset-bottom));
        }

        .floating-contact {
            bottom: max(76px, calc(76px + env(safe-area-inset-bottom)));
            right: max(14px, env(safe-area-inset-right));
        }

        .progress-wrap {
            bottom: max(16px, calc(16px + env(safe-area-inset-bottom)));
        }
    }
}

/* ──────────────────────────────────────────────
   21. REDUCED MOTION — Accessibility
   ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mobile-drawer,
    .drawer-overlay,
    .fc-icon,
    .fc-label,
    .fc-icon::before {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* ──────────────────────────────────────────────
   22. EXTRA SMALL — iPhone SE / Small Phones
   ────────────────────────────────────────────── */
@media screen and (max-width: 374px) {
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .theme-mobile-menu .mobile-logo img,
    .theme-mobile-menu .mobile-logo .logo-img {
        max-width: 110px;
    }

    .section-title {
        font-size: 20px !important;
        line-height: 1.15 !important;
    }

    p {
        font-size: 13px;
        line-height: 1.6;
    }

    .services-box .item {
        padding: 16px 14px;
    }

    .btn-wrap .button-1 {
        min-width: 180px;
        font-size: 14px;
        padding: 12px 22px;
    }

    .accordion-box .block .acc-btn {
        font-size: 13px;
        padding: 14px 44px 14px 14px;
    }

    .appointment h4 {
        font-size: 18px;
    }
}