/* --- VARIABLES & BASE --- */
        :root {
            --primary: #40604e;        /* Vert Forêt */
            --secondary: #f4b458;      /* Jaune Moutarde */
            --text-dark: #1a1a1a;
            --bg-light: #f4f6f5;
        }
        body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg-light); color: var(--text-dark); }
        h1, h2, h3 { font-weight: 800; letter-spacing: -0.5px; }

        /* --- 1. HERO AVEC IMAGE DE FOND --- */
        .hero-bg-image {
            /* Image d'ambiance (Marché / Artisanat) */
            background: url('https://images.unsplash.com/photo-1488459716781-31db52582fe9?auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;
            position: relative;
            padding: 150px 0 200px; /* Grand padding pour laisser la place aux cartes */
            color: white;
            text-align: center;
            border-bottom-left-radius: 60px; /* Courbe moderne en bas */
            border-bottom-right-radius: 60px;
            overflow: hidden;
        }

        /* Filtre Sombre Vert pour lisibilité du texte */
        .hero-bg-image::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(47, 74, 58, 0.85); /* Vert Marque sombre à 85% */
            z-index: 1;
        }

        .hero-content-relative {
            position: relative; z-index: 2; /* Passe au-dessus du filtre */
        }

        .hero-bg-image h1 { 
            font-size: 4rem; margin-bottom: 25px; 
            text-shadow: 0 4px 15px rgba(0,0,0,0.3);
            line-height: 1.1;
        }
        .hero-bg-image .lead {
            font-size: 1.3rem; opacity: 0.95; max-width: 700px; margin: 0 auto; font-weight: 400;
        }
        .hero-script {
            font-family: 'Dancing Script', cursive; color: var(--secondary); font-size: 2.8rem;
            display: block; margin-bottom: 15px; transform: rotate(-2deg);
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        /* --- 2. GRID CARDS (CHEVAUCHEMENT) --- */
        .features-grid-section {
            margin-top: -160px; /* Remonte sur le Hero */
            padding-bottom: 100px;
            position: relative;
            z-index: 10;
        }

        /* Carte Fonctionnalité */
        .feature-box {
            background: white;
            border-radius: 24px;
            padding: 40px;
            height: 100%;
            border: 1px solid rgba(0,0,0,0.05);
            box-shadow: 0 20px 40px rgba(0,0,0,0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
            display: flex; flex-direction: column;
        }
        .feature-box:hover { 
            transform: translateY(-10px); 
            box-shadow: 0 30px 60px rgba(0,0,0,0.12); 
            border-color: rgba(64, 96, 78, 0.2);
        }

        /* Icone colorée en haut */
        .icon-header {
            width: 70px; height: 70px;
            border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.8rem; margin-bottom: 25px;
        }
        /* Couleurs des icônes */
        .icon-header.green { background: #e8f5e9; color: var(--primary); }
        .icon-header.yellow { background: #fff8e1; color: #b7860b; }
        .icon-header.blue { background: #e3f2fd; color: #1565c0; }
        .icon-header.purple { background: #f3e5f5; color: #8e24aa; }
        .icon-header.red { background: #ffebee; color: #e53935; }
        .icon-header.teal { background: #e0f2f1; color: #00897b; }

        .feat-h3 { font-size: 1.6rem; margin-bottom: 15px; font-weight: 800; color: var(--text-dark); }
        .feat-p { color: #666; line-height: 1.6; margin-bottom: 30px; font-size: 1rem; flex-grow: 1; }

        /* Liste Check "Clean" */
        .clean-list { list-style: none; padding: 0; margin-top: auto; }
        .clean-list li {
            padding: 12px 0; border-top: 1px solid #f0f0f0;
            color: #444; font-weight: 600; display: flex; align-items: center; gap: 10px; font-size: 0.95rem;
        }
        .clean-list li:first-child { border-top: none; }
        .clean-list i { color: var(--secondary); }


        /* --- 3. SECTION "FOCUS" (LARGE) --- */
        .focus-section { padding: 100px 0; background: white; margin-top: 50px; }
        .focus-img-container {
            position: relative;
            padding: 20px;
        }
        /* Cadre décoratif derrière l'image */
        .focus-img-bg {
            position: absolute; top: 0; right: 0; width: 90%; height: 100%;
            background: #fffbf2; border-radius: 30px; z-index: 0;
        }
        .focus-img {
            position: relative; z-index: 1; border-radius: 16px;
            box-shadow: 0 15px 50px rgba(0,0,0,0.1);
            transform: translateX(-20px) translateY(20px);
            width: 100%; border: 1px solid rgba(0,0,0,0.05);
        }


        /* --- 4. STATS RAPIDES --- */
        .stats-bar {
            background: var(--text-dark); color: white; padding: 60px 0;
            border-radius: 24px; margin-bottom: 80px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }
        .stat-item { text-align: center; border-right: 1px solid rgba(255,255,255,0.1); }
        .stat-item:last-child { border: none; }
        .stat-num { font-size: 2.5rem; font-weight: 800; color: var(--secondary); display: block; margin-bottom: 5px; }
        .stat-label { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.7; font-weight: 600; }

        /* Responsive */
        @media (max-width: 991px) {
            .hero-bg-image { padding: 120px 0 180px; border-radius: 0 0 30px 30px; }
            .hero-bg-image h1 { font-size: 2.8rem; }
            .features-grid-section { margin-top: -100px; }
            .stat-item { border: none; margin-bottom: 30px; }
            .focus-img { transform: none; width: 100%; margin-top: 30px; }
            .focus-img-bg { display: none; }
        }