/* Mobile UI Fixes - Loaded Last for Priority */

@media only screen and (max-width: 991px) {

    /* Body or Header Wrapper adjustments if needed */
    /* Ensure no horizontal scroll */
    body {
        overflow-x: hidden;
    }

    /* --- 1. Mobile Navigation Container (Logo area) --- */
    .mobile-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
        background-color: #ffffff !important;
        /* White background */
        border-bottom: 1px solid #eee;
        padding: 10px 15px !important;
        height: 60px !important;
        /* Fixed height for consistency */
        z-index: 9999 !important;
    }

    /* --- 2. Logo Positioning (In-flow, static) --- */
    .mobile-nav .logo {
        position: static !important;
        /* Let it sit naturally in the flex box */
        top: auto !important;
        left: auto !important;
        transform: none !important;
        max-width: 120px !important;
        z-index: 10000 !important;
        display: block !important;
    }

    .mobile-nav .logo img {
        max-height: 40px !important;
        /* Ensure it fits in the bar */
        width: auto !important;
    }

    /* --- 3. Mean Menu Bar (The Hamburger) --- */
    /* Meanmenu usually injects itself. We want it to sit on top or inside. */
    .mean-container .mean-bar {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        /* Span full width usually, but we want button on right */
        width: 100% !important;
        height: 60px !important;
        /* Match mobile-nav height */
        background: transparent !important;
        padding: 0 !important;
        min-height: 0 !important;
        z-index: 99999 !important;
        /* On top of logo container */
        pointer-events: none;
        /* Let clicks pass through to logo if needed, but hamburger needs events */
    }

    /* Hamburger Icon - Robust CSS Construction */
    .mean-container a.meanmenu-reveal {
        pointer-events: auto;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 60px !important;
        height: 60px !important;
        padding: 0 !important;
        cursor: pointer !important;
        background: transparent !important;
        display: block !important;
        /* Reset to block for absolute pseudo-element positioning */
    }

    /* Hide the JS-generated spans as they are inconsistent */
    .mean-container a.meanmenu-reveal span {
        display: none !important;
    }

    /* Draw the 3 lines using CSS box-shadow stripes */
    /* Icon structure: Line 1 (bg), Gap, Line 2 (shadow), Gap, Line 3 (shadow) */
    .mean-container a.meanmenu-reveal::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 19px !important;
        /* Center horizontally: (60px - 22px) / 2 = 19px */
        top: 22px !important;
        /* Center vertically approx */
        width: 22px !important;
        height: 3px !important;
        background-color: #23b187 !important;
        box-shadow: 0 6px 0 #23b187, 0 12px 0 #23b187 !important;
        border-radius: 2px !important;
    }

    /* Change to X when open (meanmenu adds .meanclose class usually, or changes text. 
       If text is "X", ::before still shows hamburger. 
       Let's try to detect if meanmenu adds styling. 
       Actually, meanmenu changes the text content of the anchor to "X" usually (text-decoration).
       For now, let's just make sure the hamburger is visible.
    */

    /* The Dropdown Menu */
    .mean-container .mean-nav {
        margin-top: 60px !important;
        /* Push it below the header bar */
        background: #ffffff !important;
        position: relative !important;
        z-index: 999 !important;
        pointer-events: auto !important;
        /* Enable clicks on the dropdown itself */
    }

    .mean-container .mean-nav ul li a {
        border-top: 1px solid #eee !important;
        color: #333 !important;
        pointer-events: auto !important;
        /* Double ensure links are clickable */
    }

    /* --- Spacing Fixes for "Devenir bénévole" (Dream) & "Vision" (Feature) --- */

    /* Apply margin to the COLUMNS to ensure spacing works even if items have weird display/float */
    .dream-area .row>div,
    .feature-area .row>div {
        margin-bottom: 40px !important;
    }

    /* Reset margin for the last visible item to avoid extra space at bottom */
    .dream-area .row>div:last-child,
    .feature-area .row>div:last-child {
        margin-bottom: 0 !important;
    }

    /* Ensure inner items don't have conflicting margins */
    .dream-item,
    .feature-item {
        margin-bottom: 0 !important;
        /* Let the column handle the spacing */
        height: 100% !important;
        /* Ensure equal height if flex */
    }

    /* Extra spacing for the containers themselves if needed */
    .dream-area,
    .feature-area {
        padding-bottom: 50px !important;
    }
}

```