/* ── Hero ───────────────────────────────────────────────── */
.hero {
    background: linear-gradient(135deg, #1a9962 0%, var(--eco-forest) 55%, #2ec87e 100%);
    color: #fff;
    padding: 5rem 1.5rem 4rem;
    position: relative;
    overflow: hidden;
}

    .hero::before {
        content: '';
        position: absolute;
        top: -60px;
        right: -80px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: rgba(220,221,75,.13);
        pointer-events: none;
    }

    .hero::after {
        content: '';
        position: absolute;
        bottom: -100px;
        left: -60px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: rgba(255,255,255,.06);
        pointer-events: none;
    }

.hero-badge {
    display: inline-block;
    background: rgba(220,221,75,.25);
    border: 1px solid rgba(220,221,75,.5);
    color: #DCDD4B;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .35rem 1rem;
    border-radius: 20px;
    margin-bottom: 1.25rem;
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 600;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

    .hero h1 em {
        font-style: normal;
        color: #DCDD4B;
    }

.hero p.lead, .hero ul {
    font-size: 1.1rem;
    color: rgba(255,255,255,.85);
    max-width: 580px;
    line-height: 1.7;
    margin-bottom: 0 !important;
}

.hero-img-box {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
}

.hero-stat {
    background: rgba(255,255,255,.15);
    border-radius: var(--radius-md);
    padding: .75rem 1.25rem;
    text-align: center;
}

    .hero-stat .n {
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 600;
        color: #DCDD4B;
        line-height: 1;
    }

    .hero-stat .l {
        font-size: .75rem;
        color: rgba(255,255,255,.75);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-top: .2rem;
    }

/* ── Section générique ──────────────────────────────────── */
.section-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--eco-forest);
    margin-bottom: .5rem;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--eco-text-dark);
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ── Section label grande taille (bloc mission) ─────────── */
.section-label-lg {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 700;
    color: var(--eco-forest);
    margin-bottom: 1rem;
}

/* ── Piliers ─────────────────────────────────────────────── */
.pilier-card {
    background: var(--eco-warm-white);
    border: 1px solid var(--eco-beige);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    height: 100%;
    transition: box-shadow .2s, transform .2s;
}

    .pilier-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
    }

.pilier-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--eco-forest-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--eco-forest);
    margin-bottom: 1rem;
    flex-shrink: 0;
}

/* ── Outil cards ─────────────────────────────────────────── */
.outil-card {
    border-radius: var(--radius-xl) !important;
    border: none !important;
    overflow: hidden;
    height: 100%;
    box-shadow: var(--shadow-md) !important;
    transition: box-shadow .25s, transform .25s !important;
}

    .outil-card:hover {
        box-shadow: var(--shadow-lg) !important;
        transform: translateY(-4px) !important;
    }

    .outil-card .outil-header {
        padding: 2rem 2rem 1.5rem;
        position: relative;
    }

        .outil-card .outil-header.green {
            background: linear-gradient(135deg, var(--eco-forest) 0%, #2ec87e 100%);
            color: #fff;
        }

        .outil-card .outil-header.yellow {
            background: linear-gradient(135deg, #b8b930 0%, #DCDD4B 100%);
            color: #2d2d2d;
        }

.outil-num {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 700;
    opacity: .18;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    line-height: 1;
    pointer-events: none;
}

.outil-card .outil-body {
    padding: 1.75rem 2rem 2rem;
    background: var(--eco-warm-white);
}

.outil-tag {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .25rem .75rem;
    border-radius: 20px;
    margin-bottom: .75rem;
}

    .outil-tag.green {
        background: var(--eco-forest-light);
        color: var(--eco-forest);
    }

    .outil-tag.yellow {
        /*background: rgba(220,221,75,.2);*/
        background: var(--eco-forest-light);
        color: #6b6a00;
    }

.outil-feature {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .6rem;
    font-size: .875rem;
    color: var(--eco-text-mid);
}

    .outil-feature i {
        color: var(--eco-forest);
        font-size: 1rem;
        flex-shrink: 0;
        margin-top: .1rem;
    }

/* ── Étapes ──────────────────────────────────────────────── */
.steps-line {
    position: relative;
}

    .steps-line::before {
        content: '';
        position: absolute;
        top: 26px;
        left: calc(16.66% + 26px);
        right: calc(16.66% + 26px);
        height: 2px;
        background: var(--eco-beige);
        z-index: 0;
    }

.step-item {
    text-align: center;
    position: relative;
    z-index: 1;
}

.step-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--eco-forest);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .75rem;
    box-shadow: 0 4px 12px rgba(36,178,117,.3);
}

.step-item h6 {
    font-size: .85rem;
    font-weight: 600;
    color: var(--eco-text-dark);
    margin-bottom: .25rem;
}

.step-item p {
    font-size: .78rem;
    color: var(--eco-text-light);
    margin: 0;
}

/* ── CTA final ───────────────────────────────────────────── */
.cta-section {
    background: linear-gradient(135deg, #1a9962 0%, var(--eco-forest) 100%);
    border-radius: var(--radius-xl);
    padding: 3.5rem 2rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .cta-section::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -40px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: rgba(220,221,75,.15);
        pointer-events: none;
    }

    .cta-section h2 {
        color: #fff;
        font-family: var(--font-display);
        font-size: clamp(1.5rem, 3vw, 2rem);
    }

    .cta-section p {
        color: rgba(255,255,255,.8);
    }

.btn-lime {
    background: #DCDD4B !important;
    border-color: #DCDD4B !important;
    color: #2d2d2d !important;
    font-weight: 600;
}

    .btn-lime:hover {
        background: #c8c93f !important;
        border-color: #c8c93f !important;
        box-shadow: 0 4px 14px rgba(220,221,75,.4) !important;
        transform: translateY(-1px);
    }

.btn-ghost-white {
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    color: #fff !important;
}

    .btn-ghost-white:hover {
        background: rgba(255,255,255,.22) !important;
        color: #fff !important;
    }

/* ── Divider décoratif ───────────────────────────────────── */
.divider-leaf {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 auto;
    max-width: 200px;
}

    .divider-leaf hr {
        flex: 1;
        border-color: var(--eco-beige);
        opacity: 1;
    }

    .divider-leaf i {
        color: var(--eco-forest);
        opacity: .5;
        font-size: 1.1rem;
    }

/* ── FEDER ───────────────────────────────────────────────── */
.feder-band {
    background: var(--eco-warm-white);
    border: 1px solid var(--eco-beige);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    font-size: .82rem;
    color: var(--eco-text-mid);
}