:root {
    --vertical-gap: 60px;
    --container-width: 1280px;
    --mediaforge-green: #43BA98;
    --mediaforge-blue: #0B1343;
    --btn-green: #4AE1B6;
    --section-gap: 50px;
    /* Standardized gap between sections */
}

body {
    margin: 0;
    padding: 0;
    background-color: #F1F5FF;
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
    position: relative;
    cursor: default !important;
}

a,
button,
.close-btn,
.submit-btn,
.open-contact-popup {
    cursor: pointer !important;
}

/* --- BACKGROUND ELEMENTS --- */
#background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.gradient-linear {
    position: absolute;
    background: #4AE1B6;
    opacity: 0.21;
    filter: blur(271.95px);
    pointer-events: none;
}

/* --- STRUCTURE (FLOW LAYOUT) --- */
.layout-wrapper {
    position: relative;
    z-index: 10;
    width: var(--container-width);
    max-width: 95vw;
    /* Responsive safety */
    margin: 0 auto;
    padding-top: 160px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    /* EQUIDISTANT SPACING */
    font-family: 'Montserrat Alternates', sans-serif;
}

.content-width {
    position: relative;
    width: 100%;
    /* controlled by wrapper */
    /* Removed absolute positioning */
}

/* --- TITRES & TEXTES --- */
.etude-de-cas-label {
    /* top removed */
    height: 56px;
    font-weight: 400;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    color: var(--mediaforge-blue);
    letter-spacing: 0.1em;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    MARGIN-TOP: 30px;
    MARGIN-BOTTOM: -30px;
}

.header-title {
    /* top removed */
    font-weight: 600;
    font-size: 40px;
    line-height: 140%;
    text-align: center;
    color: var(--mediaforge-green);
}

.section-title {
    font-weight: 600;
    font-size: 40px;
    color: var(--mediaforge-green);
    margin-bottom: 40px;
}

.text-block {
    font-weight: 400;
    font-size: 28px;
    line-height: 160%;
    color: var(--mediaforge-blue);
}

.highlight-green {
    color: var(--mediaforge-green);
    font-weight: 500;
    text-decoration: underline;
}

.bullet-list {
    list-style-type: disc;
    padding-left: 40px;
    margin-top: 20px;
    font-size: 24px;
    line-height: 180%;
    color: var(--mediaforge-blue);
}

.NOBULL-list {

    padding-left: 40px;
    margin-top: 20px;
    font-size: 24px;
    line-height: 180%;
    color: var(--mediaforge-blue);
}

.sub-point-title {
    font-weight: 500;
    font-size: 32px;
    color: var(--mediaforge-blue);
    margin-top: 50px;
    margin-bottom: 20px;
}

.organique-box {
    background: rgba(67, 186, 152, 0.08);
    border-left: 10px solid var(--mediaforge-green);
    padding: 40px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 32px;
    margin-top: 60px;
    text-align: center;
    color: var(--mediaforge-blue);
}

/* --- IMAGES --- */
.camp-banner {
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.08);
}

.full-img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- SECTION SPECIFIC (Spacing internal) --- */
/* Removed all fixed 'top' positions */

.stats-summary {
    text-align: center;
    width: 100%;
}

/* Grid for Partie 1 Stats */
.partie-1-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    font-size: 24px;
    font-weight: 500;
    margin-top: 30px;
}

/* New Styles for Clean lists */
.clean-list li {
    list-style: none;
    margin-bottom: 10px;
}

/* --- RÉSULTATS --- */
.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    margin-top: 50px;
}

.res-card {
    background: #F8FBFA;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #E0E0E0;
}

.res-label {
    font-weight: 600;
    color: var(--mediaforge-blue);
    font-size: 24px;
    margin-bottom: 15px;
}

.res-val {
    font-weight: 500;
    color: var(--mediaforge-blue);
    font-size: 22px;
    line-height: 1.5;
}

.btn-final {
    background: var(--btn-green);
    padding: 25px 50px;
    border-radius: 16px;
    color: var(--mediaforge-blue);
    font-weight: 600;
    font-size: 24px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s;
    width: fit-content;
    margin: 0 auto;
}

.btn-final:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(74, 225, 182, 0.3);
}

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 1300px) {
    :root {
        --container-width: 90vw;
    }
}

@media (max-width: 768px) {
    .layout-wrapper {
        padding-top: 170px;
        padding-bottom: 60px;
        gap: 25px;
        /* Reduced gap */
        width: 90vw;
        /* Ensure width is correct */
    }

    /* FORCE LEFT ALIGNMENT FOR MOST ELEMENTS */
    .section-title,
    .sub-point-title,
    .text-block,
    .bullet-list,
    .NOBULL-list,
    .clean-list,
    .res-label,
    .res-val,
    .organique-box,
    .highlight-green {
        text-align: left !important;
    }

    /* EXCEPTIONS: CENTER ALIGNED */

    /* 1. Étude de Cas */
    .etude-de-cas-label {
        font-size: 18px;
        height: auto;
        margin-bottom: 10px;
        justify-content: center !important;
        /* Center align flex */
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }

    /* 2. Main Title */
    .header-title {
        font-size: 24px;
        text-align: center !important;
    }

    /* 3 & 4. Stats Summary */
    .stats-summary,
    .stats-summary .text-block {
        text-align: center !important;
    }

    .stats-summary div[style*="font-size: 40px"] {
        font-size: 22px !important;
    }

    /* --- FONT SIZE CONSOLIDATION (Mobile) --- */

    /* TITLES -> 22px */
    .etude-de-cas-label,
    .header-title,
    .section-title,
    .stats-summary div[style*="font-size: 40px"],
    .highlight-green,
    .sub-point-title {
        font-size: 16px !important;
    }

    /* BODY TEXT -> 13px */
    .text-block,
    .bullet-list,
    .clean-list,
    .NOBULL-list,
    .res-label,
    .res-val,
    .partie-1-stats-grid,
    .organique-box,
    .btn-final,
    .partie-1-stats-grid div {
        font-size: 13px !important;
        line-height: 1.5;
    }

    /* Override specific text blocks (like Objectif) */
    .text-block[style*="font-size: 26px"],
    .partie-2-section .text-block .text-block,
    span[style*="font-size: 30px"]

    /* Target Constat : */
        {
        font-size: 13px !important;
    }

    /* OTHER STYLES (Padding, Margins, etc continued from before) */
    .section-title {
        margin-bottom: 15px;
    }

    /* Align lists strictly left with paragraphs */
    .bullet-list,
    .NOBULL-list,
    .clean-list {
        padding-left: 0 !important;
        margin-left: 0 !important;
        list-style: none !important;
    }

    .partie-1-stats-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: left !important;
    }

    .partie-1-stats-grid div {
        text-align: left !important;
    }

    .results-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .res-card {
        padding: 20px;
    }

    .res-label {
        margin-bottom: 5px;
    }

    .btn-final {
        padding: 15px 10px;
        width: 60%;
    }

    .sub-point-title {
        margin-top: 20px;
        /* Keep single line request logic if compatible with 22px, otherwise wrap may happen. 
           User asked for 22px title, but previously wanted uniform single line. 
           22px might break single line on small screens. I will prioritize font size 22px as per latest prompt. */
        white-space: normal !important;
        /* Allow wrap if 22px is too big */
    }

    .organique-box {
        padding: 20px;
    }

    /* ADJUSTMENTS REQUESTED (Alignments) */

    /* 1. Remove BR in Partie 1 Title */
    .partie-1-section .section-title br {
        display: none;
    }

    .partie-1-section .section-title {
        display: inline-block;
        width: 100%;
    }

    /* 2. Nouvelle Approche in Blue */
    .partie-2-section .highlight-green {
        color: var(--mediaforge-blue) !important;
        text-decoration: none !important;
    }

    /* 4. Objectif line single line (if possible with 13px) */
    .partie-2-section .text-block .text-block {
        white-space: nowrap !important;
        margin-top: 20px !important;
    }

    /* 5. Reduce spacing above final button */
    .conclusion-section>div:last-child {
        margin-top: 40px !important;
    }
}