/* ===========================================
   CRITICAL FIXES - Chargé en DERNIER
   Corrige les conflits CSS du menu mobile
   et de la bulle cookies
   =========================================== */

/* ===========================================
   MENU MOBILE - CORRECTIONS FINALES
   =========================================== */
@media (max-width: 960px) {

    /* NAV - Structure flexbox correcte */
    .nav {
        display: none !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100vh - 70px) !important;
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 99998 !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .nav.active {
        display: flex !important;
    }

    /* NAV-LIST - Contenu du menu */
    .nav-list {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 20px !important;
        margin: 0 !important;
        gap: 8px !important;
        list-style: none !important;
    }

    /* ===========================================
       BOUTON CONTACT - CORRECTION STRICTE
       =========================================== */

    /* CACHER le bouton Contact par défaut - haute spécificité */
    .nav .nav-cta,
    .nav > .nav-cta,
    .nav a.nav-cta,
    nav .nav-cta,
    nav.nav .nav-cta,
    nav.nav a.nav-cta,
    .header .nav .nav-cta,
    .header nav .nav-cta,
    .header-inner .nav .nav-cta,
    a.nav-cta,
    .btn.nav-cta,
    a.btn.nav-cta,
    a.nav-cta.btn,
    a.nav-cta.btn.btn-primary {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* AFFICHER le bouton Contact UNIQUEMENT quand nav.active */
    .nav.active .nav-cta,
    .nav.active > .nav-cta,
    .nav.active a.nav-cta,
    nav.active .nav-cta,
    nav.nav.active .nav-cta,
    nav.nav.active a.nav-cta,
    nav.nav.active > a.nav-cta,
    nav.nav.active a.nav-cta.btn,
    nav.nav.active a.nav-cta.btn.btn-primary,
    .header .nav.active .nav-cta,
    .header nav.nav.active .nav-cta,
    .header-inner nav.nav.active .nav-cta {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: calc(100% - 40px) !important;
        height: auto !important;
        margin: 24px 20px !important;
        padding: 16px 24px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-align: center !important;
        color: #ffffff !important;
        background: linear-gradient(135deg, #0B3772 0%, #1d4ed8 100%) !important;
        border: none !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        box-shadow: 0 4px 15px rgba(11, 55, 114, 0.3) !important;
        cursor: pointer !important;
    }
}

/* Breakpoint 768px */
@media (max-width: 768px) {
    .nav {
        top: 64px !important;
        height: calc(100vh - 64px) !important;
    }

    nav.nav.active .nav-cta,
    nav.nav.active a.nav-cta {
        margin: 20px 16px !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        width: calc(100% - 32px) !important;
    }
}

/* Breakpoint 480px */
@media (max-width: 480px) {
    .nav {
        top: 60px !important;
        height: calc(100vh - 60px) !important;
    }

    nav.nav.active .nav-cta,
    nav.nav.active a.nav-cta {
        margin: 16px 12px !important;
        padding: 14px 16px !important;
        font-size: 14px !important;
        width: calc(100% - 24px) !important;
    }
}

/* ===========================================
   BULLE COOKIES RGPD - POSITION FIXE
   Cette règle garantit que la bulle reste fixe
   même si un parent a transform/filter
   =========================================== */

#hc-cookie-bubble {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    right: auto !important;
    top: auto !important;
    z-index: 2147483647 !important;
    transform: none !important;
    -webkit-transform: none !important;
}

@media (max-width: 480px) {
    #hc-cookie-bubble {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
    }
}

/* ===========================================
   ESPACEMENT SECTION-HEADER → GRILLES
   RÈGLE FINALE - Priorité absolue
   =========================================== */
@media (max-width: 960px) {
    /* Section header - espacement unique - HAUTE SPÉCIFICITÉ */
    .section-header,
    .section .section-header,
    .hero-page .section-header,
    #features .section-header,
    #services .section-header,
    #process .section-header {
        margin-bottom: 40px !important;
        margin-top: 0 !important;
    }

    /* TOUTES les grilles - PAS de margin-top */
    .features-grid,
    .process-grid,
    .services-grid,
    .services-grid-new,
    .stats-grid,
    .benefit-grid,
    .step-grid,
    .testimonial-grid {
        margin-top: 0 !important;
    }

    /* ===========================================
       SERVICE CARDS MODERNES - Reset complet
       =========================================== */

    /* Reset du container visuel */
    .service-card-new .service-card-visual,
    .services-grid-new .service-card-new .service-card-visual {
        display: contents !important;
        background: none !important;
        background-image: none !important;
        height: auto !important;
    }

    /* SUPPRIMER les pseudo-éléments qui créent les coins gris */
    .service-card-visual::before,
    .service-card-visual::after,
    .service-card-new .service-card-visual::before,
    .service-card-new .service-card-visual::after,
    .services-grid-new .service-card-visual::before,
    .services-grid-new .service-card-visual::after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* ===========================================
       SERVICE ICON WRAPPER - Style moderne épuré
       Fond subtil gradient + SVG bleu
       =========================================== */
    .service-icon-wrapper,
    .service-card-new .service-icon-wrapper,
    .services-grid-new .service-icon-wrapper,
    .services-grid-new .service-card-new .service-icon-wrapper {
        background: linear-gradient(135deg, rgba(11, 55, 114, 0.08) 0%, rgba(11, 55, 114, 0.04) 100%) !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .service-icon-wrapper svg,
    .service-card-new .service-icon-wrapper svg,
    .services-grid-new .service-icon-wrapper svg {
        color: #0B3772 !important;
        stroke: #0B3772 !important;
        fill: none !important;
        stroke-width: 1.8 !important;
    }
}

@media (max-width: 768px) {
    /* Reset pseudo-éléments coins gris */
    .service-card-visual::before,
    .service-card-visual::after,
    .service-card-new .service-card-visual::before,
    .service-card-new .service-card-visual::after {
        display: none !important;
        content: none !important;
    }

    /* Service icon - Style moderne épuré */
    .service-icon-wrapper,
    .service-card-new .service-icon-wrapper {
        background: linear-gradient(135deg, rgba(11, 55, 114, 0.08) 0%, rgba(11, 55, 114, 0.04) 100%) !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }
}

@media (max-width: 480px) {
    .section-header,
    .section .section-header,
    .hero-page .section-header {
        margin-bottom: 32px !important;
        margin-top: 0 !important;
    }

    .features-grid,
    .process-grid,
    .services-grid,
    .services-grid-new,
    .stats-grid,
    .benefit-grid,
    .step-grid,
    .testimonial-grid {
        margin-top: 0 !important;
    }

    /* Reset pseudo-éléments coins gris */
    .service-card-visual::before,
    .service-card-visual::after,
    .service-card-new .service-card-visual::before,
    .service-card-new .service-card-visual::after {
        display: none !important;
        content: none !important;
    }

    /* Service icon - Style moderne épuré */
    .service-icon-wrapper,
    .service-card-new .service-icon-wrapper {
        background: linear-gradient(135deg, rgba(11, 55, 114, 0.08) 0%, rgba(11, 55, 114, 0.04) 100%) !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .service-icon-wrapper svg,
    .service-card-new .service-icon-wrapper svg {
        color: #0B3772 !important;
        stroke: #0B3772 !important;
        fill: none !important;
        stroke-width: 1.8 !important;
    }
}