/* ================================================
   MAITRESTRAVAUX - CSS RESPONSIVE MOBILE V6
   Version 6.0 - TAILLES MAXIMUM
================================================ */

/* ================================================
   MOBILE (max 767px)
================================================ */
@media (max-width: 767px) {

    /* ========================================
       1. HEADER - TOUT AU MAXIMUM
    ======================================== */
    
    .header .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .header .navbar {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 0 !important;
    }
    
    /* LOGO - MAXIMUM 80px */
    .header .navbar-brand.logo.d-lg-none img,
    .navbar-brand.logo.d-lg-none img,
    a.navbar-brand.logo.d-lg-none img {
        max-height: 80px !important;
        height: 80px !important;
        width: auto !important;
    }
    
    /* Container des boutons mobile */
    .header-mobile-actions {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    
    /* BOUTON TÉLÉPHONE - GRAND */
    .btn-cta-secondary {
        display: flex !important;
        align-items: center !important;
        padding: 10px 14px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 2px solid rgba(255, 255, 255, 0.25) !important;
        border-radius: 10px !important;
        text-decoration: none !important;
    }
    
    .btn-cta-secondary:hover {
        background: rgba(251, 191, 36, 0.15) !important;
        border-color: rgba(251, 191, 36, 0.4) !important;
    }
    
    .btn-cta-secondary .btn-phone-text {
        display: flex !important;
        flex-direction: column !important;
        line-height: 1.2 !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        text-align: center !important;
    }
    
    .btn-cta-secondary .btn-phone-text small {
        font-size: 9px !important;
        font-weight: 700 !important;
        color: #FBBF24 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
        margin-top: 2px !important;
    }

    /* ========================================
       2. CACHER LE LOGO DUPLIQUÉ DANS LE MENU
    ======================================== */
    
    .navbar-collapse .navbar-brand.logo,
    .navbar-collapse a.navbar-brand.logo,
    a.navbar-brand.logo.d-none.d-lg-block {
        display: none !important;
    }

    /* ========================================
       3. BOUTON HAMBURGER - GRAND 55x55
    ======================================== */
    
    .navbar-toggler,
    .navbar-toggler.header-button,
    button.navbar-toggler,
    .navbar-toggler.header-button.collapsed,
    button.navbar-toggler.header-button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 0 !important;
        border-radius: 10px !important;
        background: #1a1a2e !important;
        border: 2px solid #3d3d5c !important;
        align-items: center !important;
        justify-content: center !important;
        width: 55px !important;
        height: 55px !important;
        min-width: 55px !important;
        min-height: 55px !important;
        flex-shrink: 0 !important;
    }
    
    .navbar-toggler:hover,
    .navbar-toggler:focus {
        background: #252540 !important;
        border-color: #FBBF24 !important;
        outline: none !important;
        box-shadow: none !important;
    }
    
    /* Container de l'icône */
    #hiddenNav,
    .navbar-toggler span,
    .navbar-toggler span#hiddenNav {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* ICÔNE HAMBURGER - 28px */
    .navbar-toggler i.las.la-bars,
    .navbar-toggler .las.la-bars,
    #hiddenNav i.las.la-bars,
    #hiddenNav i.la-bars,
    #hiddenNav i,
    .navbar-toggler i {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-family: 'Line Awesome Free', 'Line Awesome Brands', sans-serif !important;
        font-size: 28px !important;
        color: #FBBF24 !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    /* ========================================
       4. BOUTON CTA MENU - CENTRÉ AU MILIEU
    ======================================== */
    
    .nav-end {
        margin-top: 20px !important;
        padding-top: 20px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .nav-end > div,
    .nav-end .d-flex,
    .nav-end .d-flex.flex-column,
    .nav-end .d-flex.flex-sm-row {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .nav-end > div > div,
    .nav-end .d-flex > div {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .ws-round-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: auto !important;
        min-width: 250px !important;
        padding: 18px 32px !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        text-align: center !important;
        border-radius: 50px !important;
        background: hsl(45, 96%, 56%) !important;
        color: #0f0f0f !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4) !important;
        margin: 0 auto !important;
    }
    
    .ws-round-btn:hover {
        background: hsl(45, 96%, 50%) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(251, 191, 36, 0.5) !important;
    }
    
    .ws-round-btn::before {
        display: none !important;
    }
    
    .ws-round-btn i {
        font-size: 18px !important;
        color: #0f0f0f !important;
    }

    /* ========================================
       5. CATEGORIES SLIDER
    ======================================== */
    
    .categories-slider-box {
        position: relative !important;
        z-index: 10 !important;
        margin-top: -60px !important;
        padding: 0 !important;
        background: transparent !important;
    }
    
    .slider-header-centered {
        background: #ffffff !important;
        margin: 0 15px !important;
        padding: 24px 20px 20px !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1) !important;
        text-align: center !important;
    }
    
    .slider-title-centered {
        font-size: 1.3rem !important;
        font-weight: 700 !important;
        color: #0f0f0f !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
    }
    
    .slider-title-centered .text-gold {
        color: #FBBF24 !important;
    }
    
    .slider-subtitle-centered {
        font-size: 14px !important;
        color: #6b7280 !important;
        margin-bottom: 16px !important;
    }
    
    .slider-reassurance-centered {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }
    
    .slider-reassurance-centered span {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 12px !important;
        color: #374151 !important;
        background: #f3f4f6 !important;
        padding: 8px 12px !important;
        border-radius: 20px !important;
    }
    
    .slider-reassurance-centered span i {
        font-size: 16px !important;
        color: #FBBF24 !important;
    }
    
    .categories-track-wrapper {
        background: #ffffff !important;
        margin: 0 15px !important;
        padding: 0 0 20px 0 !important;
        border-radius: 0 0 20px 20px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
        overflow: hidden !important;
    }
    
    .categories-track {
        display: flex !important;
        gap: 12px !important;
        padding: 10px 15px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    
    .categories-track::-webkit-scrollbar {
        display: none !important;
    }
    
    .category-slide-card {
        flex: 0 0 130px !important;
        min-width: 130px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 20px 14px !important;
        background: #f9fafb !important;
        border-radius: 16px !important;
        border: 2px solid transparent !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        scroll-snap-align: start !important;
    }
    
    .category-slide-card:hover,
    .category-slide-card:active {
        border-color: #FBBF24 !important;
        background: rgba(251, 191, 36, 0.1) !important;
        transform: translateY(-4px) !important;
    }
    
    .slide-icon {
        width: 56px !important;
        height: 56px !important;
        background: #0f0f0f !important;
        border-radius: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 12px !important;
    }
    
    .slide-icon i {
        font-size: 26px !important;
        color: #FBBF24 !important;
    }
    
    .slide-content {
        text-align: center !important;
    }
    
    .slide-title {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #0f0f0f !important;
        margin-bottom: 6px !important;
    }
    
    .slide-tag {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        font-size: 11px !important;
        color: #22C55E !important;
        font-weight: 600 !important;
    }
    
    .slide-tag i {
        font-size: 12px !important;
    }

    /* ========================================
       6. TEXTE HERO CENTRÉ
    ======================================== */
    
    .content--wrap,
    .banner-section .content--wrap,
    .content .content--wrap {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    
    .content--wrap h6,
    .content--wrap .title,
    .content--wrap h6.title,
    .content--wrap h6.title.text-start {
        text-align: center !important;
        width: 100% !important;
    }
    
    .content--wrap p {
        text-align: center !important;
        width: 100% !important;
        font-size: 16px !important;
        line-height: 1.8 !important;
        padding: 0 10px !important;
    }
    
    .text__first {
        font-size: 1.9rem !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }
    
    .text__line {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* ========================================
       7. FORMULAIRE RECHERCHE
    ======================================== */
    
    .search,
    .content .search,
    .banner-section .search {
        width: 100% !important;
        padding: 0 !important;
    }
    
    .action,
    .search .action {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 0 !important;
        position: relative !important;
    }
    
    .form--control,
    .form--control.w-75,
    input.form--control,
    .action input.form--control {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 !important;
        padding: 18px 60px 18px 20px !important;
        font-size: 16px !important;
        border-radius: 14px !important;
        min-height: 58px !important;
        border: 2px solid rgba(251, 191, 36, 0.3) !important;
        background: #ffffff !important;
        color: #0f0f0f !important;
    }
    
    .form--control::placeholder,
    .form--control.w-75::placeholder,
    input.form--control::placeholder {
        color: #6b7280 !important;
    }
    
    .form--control:focus {
        border-color: #FBBF24 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2) !important;
        color: #0f0f0f !important;
        background: #ffffff !important;
    }
    
    .action button.submit,
    .search .action button,
    .action .submit {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        background: #FBBF24 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .action button.submit i,
    .action .submit .fa-search {
        font-size: 18px !important;
        color: #0f0f0f !important;
        margin: 0 !important;
    }

    /* ========================================
       8. BOTTOM BADGES
    ======================================== */
    
    .bottom,
    .content .bottom {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        margin-top: 24px !important;
        margin-bottom: 80px !important;
        width: 100% !important;
    }
    
    .bottom > div {
        width: 100% !important;
    }
    
    .bottom h6 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        font-size: 14px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        padding: 14px 20px !important;
        border-radius: 12px !important;
        margin: 0 !important;
    }
    
    .bottom h6 i {
        font-size: 20px !important;
        color: #FBBF24 !important;
    }

    /* ========================================
       9. ADVANTAGE CARD
    ======================================== */
    
    .advantage-card,
    div.advantage-card,
    .why-choose-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 24px 16px !important;
        width: 100% !important;
        background: #f9fafb !important;
        border-radius: 16px !important;
        margin-bottom: 16px !important;
    }
    
    .advantage-card h4,
    div.advantage-card h4 {
        width: 100% !important;
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        margin-bottom: 12px !important;
        text-align: center !important;
        line-height: 1.3 !important;
        color: #0f0f0f !important;
    }
    
    .advantage-card p,
    div.advantage-card p {
        width: 100% !important;
        font-size: 16px !important;
        line-height: 1.7 !important;
        text-align: center !important;
        color: #6b7280 !important;
        margin: 0 !important;
    }
    
    .advantage-card .icon {
        margin-bottom: 16px !important;
        width: 64px !important;
        height: 64px !important;
        background: #0f0f0f !important;
        border-radius: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .advantage-card .icon i {
        font-size: 28px !important;
        color: #FBBF24 !important;
    }

    /* ========================================
       10. FOOTER LINKS
    ======================================== */
    
    .footer-links,
    .footer-widget .footer-links,
    ul.footer-links {
        background: rgba(255, 255, 255, 0.08) !important;
        padding: 16px !important;
        border-radius: 16px !important;
        margin-top: 12px !important;
    }
    
    .footer-links li {
        margin-bottom: 6px !important;
    }
    
    .footer-links li:last-child {
        margin-bottom: 0 !important;
    }
    
    .footer-links li a {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
        color: rgba(255, 255, 255, 0.85) !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 12px !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
    }
    
    .footer-links li a:hover {
        background: rgba(251, 191, 36, 0.15) !important;
        color: #FBBF24 !important;
        padding-left: 20px !important;
    }
    
    .footer-links li a i {
        font-size: 18px !important;
        color: #FBBF24 !important;
        width: 24px !important;
        text-align: center !important;
    }

    /* ========================================
       MENU MOBILE - FERMÉ ET OUVERT
    ======================================== */
    
    /* Header mobile actions - toujours en ligne */
    .header-mobile-actions {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 1000 !important;
    }
    
    /* Menu déroulant */
    .navbar-collapse,
    .collapse.navbar-collapse,
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: #0f0f0f !important;
        margin-top: 10px !important;
        border-radius: 20px !important;
        padding: 20px !important;
        border: 1px solid rgba(251, 191, 36, 0.2) !important;
        z-index: 999 !important;
        width: calc(100% - 16px) !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
    
    /* Navbar en position relative pour le menu absolu */
    .header .navbar {
        position: relative !important;
    }
    
    .nav-menu-moe,
    .navbar-nav {
        gap: 10px !important;
        width: 100% !important;
    }
    
    .nav-menu-moe .nav-item,
    .navbar-nav .nav-item {
        width: 100% !important;
    }
    
    .nav-menu-moe .nav-item .nav-link,
    .navbar-nav .nav-item .nav-link {
        display: block !important;
        padding: 16px 20px !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        text-align: center !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid transparent !important;
        color: rgba(255, 255, 255, 0.8) !important;
        transition: all 0.2s ease !important;
        width: 100% !important;
    }
    
    .nav-menu-moe .nav-item .nav-link:hover {
        background: rgba(251, 191, 36, 0.1) !important;
        border-color: rgba(251, 191, 36, 0.2) !important;
        color: #FBBF24 !important;
    }
    
    .nav-menu-moe .nav-item.nav-item-active .nav-link {
        background: rgba(251, 191, 36, 0.15) !important;
        border: 1px solid rgba(251, 191, 36, 0.3) !important;
        color: #FBBF24 !important;
        font-weight: 700 !important;
    }
    
    /* Bouton X quand menu ouvert - même style que hamburger */
    .navbar-toggler[aria-expanded="true"],
    .navbar-toggler.header-button[aria-expanded="true"] {
        background: #1a1a2e !important;
        border-color: #FBBF24 !important;
    }
    
    .navbar-toggler[aria-expanded="true"] i,
    .navbar-toggler[aria-expanded="true"] #hiddenNav i {
        color: #FBBF24 !important;
    }

    /* ========================================
       TITRES ET TEXTES
    ======================================== */
    
    h1, .h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
    
    h2, .h2 {
        font-size: 1.7rem !important;
        text-align: center !important;
    }
    
    h3, .h3 {
        font-size: 1.5rem !important;
    }
    
    h4, .h4 {
        font-size: 1.25rem !important;
    }
    
    p {
        font-size: 16px !important;
        line-height: 1.75 !important;
    }

    /* ========================================
       BOUTONS
    ======================================== */
    
    .btn,
    button:not(.navbar-toggler):not(.modal-close):not(.submit) {
        padding: 16px 24px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
    }
    
    .btn-primary-why {
        width: 100% !important;
        padding: 18px 28px !important;
        font-size: 17px !important;
        justify-content: center !important;
    }

    /* ========================================
       WHY CHOOSE US
    ======================================== */
    
    .why-choose-moe {
        padding: 50px 0 !important;
    }
    
    .section-badge-why {
        font-size: 14px !important;
        padding: 12px 20px !important;
    }
    
    .section-title-why {
        font-size: 1.7rem !important;
        text-align: center !important;
    }
    
    .section-desc-why {
        font-size: 16px !important;
        text-align: center !important;
    }
    
    .advantage-item-why {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px !important;
        background: #f9fafb !important;
        border-radius: 16px !important;
    }
    
    .advantage-icon-why {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 14px !important;
    }
    
    .advantage-icon-why i {
        font-size: 26px !important;
    }
    
    .advantage-text-why {
        text-align: center !important;
        width: 100% !important;
    }
    
    .advantage-text-why h5 {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }
    
    .advantage-text-why p {
        font-size: 15px !important;
    }

    /* ========================================
       CONTAINER ET SECTIONS
    ======================================== */
    
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    section {
        padding: 50px 0 !important;
    }
}

/* ================================================
   PETIT MOBILE (375px)
================================================ */
@media (max-width: 375px) {
    
    .header .navbar-brand.logo.d-lg-none img,
    .navbar-brand.logo.d-lg-none img {
        height: 65px !important;
        max-height: 65px !important;
    }
    
    .btn-cta-secondary {
        padding: 8px 10px !important;
    }
    
    .btn-cta-secondary .btn-phone-text {
        font-size: 12px !important;
    }
    
    .btn-cta-secondary .btn-phone-text small {
        font-size: 8px !important;
    }
    
    .navbar-toggler,
    .navbar-toggler.header-button {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }
    
    #hiddenNav i,
    .navbar-toggler i {
        font-size: 24px !important;
    }
}

/* ================================================
   TRÈS PETIT MOBILE (340px)
================================================ */
@media (max-width: 340px) {
    
    .header .navbar-brand.logo.d-lg-none img,
    .navbar-brand.logo.d-lg-none img {
        height: 55px !important;
        max-height: 55px !important;
    }
    
    .btn-cta-secondary .btn-phone-text {
        font-size: 11px !important;
    }
    
    .btn-cta-secondary .btn-phone-text small {
        display: none !important;
    }
    
    .navbar-toggler,
    .navbar-toggler.header-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }
    
    #hiddenNav i,
    .navbar-toggler i {
        font-size: 22px !important;
    }
}

/* ================================================
   TABLETTE (768px - 991px)
================================================ */
@media (min-width: 768px) and (max-width: 991px) {
    
    .header .navbar-brand.logo.d-lg-none img,
    .navbar-brand.logo.d-lg-none img {
        height: 70px !important;
        max-height: 70px !important;
    }
    
    .navbar-toggler,
    .navbar-toggler.header-button {
        width: 55px !important;
        height: 55px !important;
    }
    
    #hiddenNav i,
    .navbar-toggler i {
        font-size: 28px !important;
    }
    
    .btn-cta-secondary {
        padding: 12px 18px !important;
    }
    
    .btn-cta-secondary .btn-phone-text {
        font-size: 15px !important;
    }
    
    .btn-cta-secondary .btn-phone-text small {
        font-size: 10px !important;
    }
    
    .navbar-collapse .navbar-brand.logo,
    .navbar-brand.logo.d-none.d-lg-block {
        display: none !important;
    }
    
    .categories-slider-box {
        margin-top: -80px !important;
    }
}

/* ================================================
   FIN DU CSS RESPONSIVE MOBILE V6
================================================ */