{"id":97,"date":"2025-10-18T21:48:44","date_gmt":"2025-10-18T19:48:44","guid":{"rendered":"https:\/\/dloannou.com\/?page_id=97"},"modified":"2025-10-19T19:41:25","modified_gmt":"2025-10-19T17:41:25","slug":"accueil","status":"publish","type":"page","link":"https:\/\/dloannou.com\/index.php\/accueil\/","title":{"rendered":"Accueil"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Dlo An Nou<\/title>\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            color: #333;\n            line-height: 1.6;\n        }\n\n        .container {\n            width: 100%;\n            max-width: 100%;\n            padding: 0;\n        }\n\n        \/* Hero Section *\/\n        .hero-section {\n            background: #078930;\n            padding: 40px 0 0 0;\n        }\n\n        .hero-content {\n            background: #da121a;\n            color: white;\n            text-align: center;\n            padding: 80px 20px;\n            border-top: 20px solid white;\n            border-bottom: 20px solid white;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .hero-star {\n            position: absolute;\n            top: 50%;\n            left: 10%;\n            transform: translateY(-50%);\n            width: 200px;\n            height: 200px;\n            z-index: 0;\n            opacity: 1;\n        }\n\n        .hero-star svg {\n            width: 100%;\n            height: 100%;\n        }\n\n        .hero-content h1,\n        .hero-content p,\n        .hero-buttons {\n            position: relative;\n            z-index: 1;\n        }\n\n        .hero-content h1 {\n            font-size: 3rem;\n            margin-bottom: 20px;\n            font-weight: bold;\n        }\n\n        .hero-content p {\n            font-size: 1.2rem;\n            margin-bottom: 30px;\n        }\n\n        .hero-buttons {\n            display: flex;\n            gap: 20px;\n            justify-content: center;\n            flex-wrap: wrap;\n        }\n\n        .btn {\n            padding: 15px 30px;\n            border: none;\n            border-radius: 5px;\n            cursor: pointer;\n            font-size: 1rem;\n            font-weight: bold;\n            text-decoration: none;\n            display: inline-block;\n            transition: all 0.3s;\n        }\n\n        .btn:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 5px 15px rgba(0,0,0,0.3);\n        }\n\n        .btn-primary {\n            background: #333;\n            color: white;\n        }\n\n        .btn-secondary {\n            background: #078930;\n            color: white;\n        }\n\n        .alert-banner {\n            background: #078930;\n            color: white;\n            text-align: center;\n            padding: 15px;\n            font-weight: bold;\n        }\n\n        \/* Crisis Section *\/\n        .crisis-section {\n            padding: 80px 40px;\n            background: #F5F5F5;\n        }\n\n        .crisis-section h2 {\n            font-size: 2.5rem;\n            color: #333;\n            margin-bottom: 20px;\n            text-align: center;\n        }\n\n        .crisis-intro {\n            text-align: center;\n            max-width: 800px;\n            margin: 0 auto 50px;\n            color: #6B6B6B;\n            font-size: 1.1rem;\n        }\n\n        .stats-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n            gap: 30px;\n            margin-bottom: 40px;\n        }\n\n        .stat-card {\n            background: white;\n            padding: 40px 20px;\n            text-align: center;\n            border-radius: 10px;\n            box-shadow: 0 3px 10px rgba(0,0,0,0.1);\n            transition: all 0.3s;\n        }\n\n        .stat-card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 5px 20px rgba(0,0,0,0.15);\n        }\n\n        .stat-number {\n            font-size: 3rem;\n            font-weight: bold;\n            color: #da121a;\n            margin-bottom: 10px;\n        }\n\n        .stat-description {\n            color: #6B6B6B;\n            font-size: 0.95rem;\n        }\n\/* Historique Section *\/\n        .historique-section {\n            padding: 80px 40px;\n            background: white;\n        }\n\n        .historique-section h2 {\n            font-size: 2.5rem;\n            color: #333;\n            margin-bottom: 20px;\n            text-align: center;\n        }\n\n        .historique-intro {\n            text-align: center;\n            max-width: 800px;\n            margin: 0 auto 60px;\n            color: #6B6B6B;\n            font-size: 1.1rem;\n        }\n\n        .timeline {\n            max-width: 900px;\n            margin: 0 auto;\n            position: relative;\n            padding: 20px 0;\n        }\n\n        .timeline::before {\n            content: '';\n            position: absolute;\n            left: 50%;\n            top: 0;\n            bottom: 0;\n            width: 3px;\n            background: #078930;\n            transform: translateX(-50%);\n        }\n\n        .timeline-item {\n            margin-bottom: 50px;\n            position: relative;\n            width: calc(50% - 40px);\n        }\n\n        .timeline-item:nth-child(odd) {\n            margin-left: 0;\n            text-align: right;\n            padding-right: 40px;\n        }\n\n        .timeline-item:nth-child(even) {\n            margin-left: calc(50% + 40px);\n            text-align: left;\n            padding-left: 40px;\n        }\n\n        .timeline-year {\n            display: inline-block;\n            background: #078930;\n            color: white;\n            padding: 8px 20px;\n            border-radius: 20px;\n            font-weight: bold;\n            margin-bottom: 15px;\n            position: relative;\n            z-index: 1;\n        }\n\n        .timeline-item::before {\n            content: '';\n            position: absolute;\n            width: 20px;\n            height: 20px;\n            background: #fcdd09;\n            border: 3px solid #078930;\n            border-radius: 50%;\n            top: 8px;\n            z-index: 2;\n        }\n\n        .timeline-item:nth-child(odd)::before {\n            right: -10px;\n        }\n\n        .timeline-item:nth-child(even)::before {\n            left: -10px;\n        }\n\n        .timeline-item h3 {\n            color: #da121a;\n            margin-bottom: 10px;\n            font-size: 1.3rem;\n        }\n\n        .timeline-item p {\n            color: #6B6B6B;\n            line-height: 1.6;\n        }\n        \/* Vision Section *\/\n        .vision-section {\n            padding: 80px 40px;\n            background: white;\n        }\n\n        .vision-section h2 {\n            font-size: 2.5rem;\n            color: #da121a;\n            margin-bottom: 20px;\n            text-align: center;\n        }\n\n        .vision-intro {\n            text-align: center;\n            max-width: 800px;\n            margin: 0 auto 60px;\n            color: #6B6B6B;\n        }\n\n        .solutions-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n            gap: 30px;\n            margin-bottom: 40px;\n        }\n\n        .solution-card {\n            background: white;\n            border: 1px solid #E0E0E0;\n            padding: 40px 30px;\n            text-align: center;\n            border-radius: 10px;\n            transition: all 0.3s;\n        }\n\n        .solution-card:hover {\n            box-shadow: 0 5px 20px rgba(0,0,0,0.1);\n            transform: translateY(-5px);\n        }\n\n        .solution-icon {\n            font-size: 3rem;\n            margin-bottom: 20px;\n        }\n\n        .solution-card h3 {\n            color: #078930;\n            font-size: 1.3rem;\n            margin-bottom: 15px;\n        }\n\n        .solution-card p {\n            color: #6B6B6B;\n            font-size: 0.95rem;\n            margin-bottom: 20px;\n            line-height: 1.6;\n        }\n\n        .learn-more {\n            color: #da121a;\n            font-weight: bold;\n            text-decoration: none;\n        }\n\n        .learn-more:hover {\n            text-decoration: underline;\n        }\n\n        \/* Action Section *\/\n        .action-section {\n            padding: 80px 40px;\n            background: #F5F5F5;\n        }\n\n        .action-section h2 {\n            font-size: 2.5rem;\n            color: #da121a;\n            margin-bottom: 20px;\n            text-align: center;\n        }\n\n        .actions-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n            gap: 30px;\n        }\n\n        .action-card {\n            background: white;\n            border: 1px solid #E0E0E0;\n            padding: 40px 30px;\n            text-align: center;\n            border-radius: 10px;\n            transition: all 0.3s;\n        }\n\n        .action-card:hover {\n            box-shadow: 0 5px 20px rgba(0,0,0,0.1);\n            transform: translateY(-5px);\n        }\n\n        .action-icon {\n            font-size: 3rem;\n            margin-bottom: 20px;\n        }\n\n        .action-card h3 {\n            color: #da121a;\n            font-size: 1.3rem;\n            margin-bottom: 15px;\n        }\n\n        .action-card p {\n            color: #6B6B6B;\n            font-size: 0.95rem;\n            margin-bottom: 25px;\n        }\n\n        \/* Newsletter *\/\n        .newsletter-section {\n            background: #078930;\n            color: white;\n            padding: 60px 20px;\n        }\n\n        .newsletter-content {\n            max-width: 800px;\n            margin: 0 auto;\n            text-align: center;\n        }\n\n        .newsletter-section h2 {\n            font-size: 2rem;\n            margin-bottom: 20px;\n        }\n\n        .newsletter-section p {\n            margin-bottom: 30px;\n            font-size: 1.1rem;\n        }\n\n        .newsletter-form {\n            display: flex;\n            gap: 15px;\n            justify-content: center;\n            flex-wrap: wrap;\n        }\n\n        .newsletter-input {\n            padding: 15px 20px;\n            border: none;\n            border-radius: 5px;\n            font-size: 1rem;\n            flex: 1;\n            min-width: 250px;\n            max-width: 400px;\n        }\n\n        \/* Footer *\/\n        .site-footer {\n            background: #333;\n            color: white;\n            padding: 60px 20px 30px;\n        }\n\n        .footer-content {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n            gap: 40px;\n            margin-bottom: 40px;\n        }\n\n        .footer-column h3 {\n            margin-bottom: 20px;\n        }\n\n        .footer-column ul {\n            list-style: none;\n        }\n\n        .footer-column ul li {\n            margin-bottom: 10px;\n        }\n\n        .footer-column a {\n            color: rgba(255,255,255,0.8);\n            text-decoration: none;\n            transition: all 0.3s;\n        }\n\n        .footer-column a:hover {\n            color: white;\n        }\n\n        .footer-bottom {\n            text-align: center;\n            color: rgba(255,255,255,0.6);\n            padding-top: 30px;\n            border-top: 1px solid rgba(255,255,255,0.2);\n        }\n\n        .text-center {\n            text-align: center;\n        }\n\n        .btn-outline {\n            background: transparent;\n            border: 2px solid #da121a;\n            color: #da121a;\n        }\n\n        .btn-outline:hover {\n            background: #da121a;\n            color: white;\n        }\n\n        \/* Scroll to top button *\/\n        .scroll-to-top {\n            position: fixed;\n            bottom: 30px;\n            right: 30px;\n            width: 50px;\n            height: 50px;\n            background: #da121a;\n            color: white;\n            border: none;\n            border-radius: 50%;\n            font-size: 1.5rem;\n            cursor: pointer;\n            display: none;\n            z-index: 999;\n            transition: all 0.3s;\n        }\n\n        .scroll-to-top:hover {\n            background: #333;\n            transform: translateY(-3px);\n        }\n\n        .scroll-to-top.show {\n            display: block;\n        }\n\n        \/* Responsive *\/\n        @media (max-width: 1024px) {\n            .hero-content h1 {\n                font-size: 2.5rem;\n            }\n            \n            .hero-star {\n                width: 150px;\n                height: 150px;\n            }\n            \n            .stats-grid,\n            .solutions-grid,\n            .actions-grid {\n                grid-template-columns: repeat(2, 1fr);\n            }\n        }\n\n        @media (max-width: 768px) {\n            .hero-content h1 {\n                font-size: 2rem;\n            }\n\n            .hero-content p {\n                font-size: 1rem;\n            }\n\n            .hero-star {\n                width: 120px;\n                height: 120px;\n            }\n\n            .stats-grid,\n            .solutions-grid,\n            .actions-grid {\n                grid-template-columns: 1fr;\n            }\n            \n            .hero-buttons {\n                flex-direction: column;\n                width: 100%;\n            }\n            \n            .btn {\n                width: 100%;\n                max-width: 300px;\n            }\n\n            .timeline::before {\n                left: 30px;\n            }\n\n            .timeline-item {\n                width: calc(100% - 60px);\n                margin-left: 60px !important;\n                text-align: left !important;\n                padding-left: 20px !important;\n                padding-right: 0 !important;\n            }\n\n            .timeline-item::before {\n                left: -44px !important;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .hero-content {\n                padding: 40px 15px;\n            }\n            \n            .hero-content h1 {\n                font-size: 1.5rem;\n                line-height: 1.3;\n            }\n            \n            .hero-content p {\n                font-size: 0.9rem;\n            }\n            \n            .hero-star {\n                width: 80px;\n                height: 80px;\n            }\n            \n            .btn {\n                padding: 12px 20px;\n                font-size: 0.9rem;\n            }\n            \n            .alert-banner {\n                padding: 12px;\n                font-size: 0.9rem;\n            }\n            \n            .stat-card {\n                padding: 30px 15px;\n            }\n            \n            .stat-number {\n                font-size: 2.5rem;\n            }\n            \n            .solution-card,\n            .action-card {\n                padding: 25px 20px;\n            }\n        }\n\n        @media (max-width: 360px) {\n            .hero-content h1 {\n                font-size: 1.3rem;\n            }\n            \n            .stat-number {\n                font-size: 2rem;\n            }\n            \n            .hero-star {\n                width: 60px;\n                height: 60px;\n            }\n        }\n\n        @media (min-width: 1400px) {\n            .hero-content h1 {\n                font-size: 3.5rem;\n            }\n            \n            .hero-star {\n                width: 250px;\n                height: 250px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <!-- Hero Section -->\n    <section id=\"accueil\" class=\"hero-section\">\n        <div class=\"hero-content\">\n            <span class=\"hero-star\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 51 48\">\n                    <path fill=\"#fcdd09\" d=\"m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z\"\/>\n                <\/svg>\n            <\/span>\n            <h1>Gawoul\u00e9 pou dlo an nou !<\/h1>\n            <p>Comprendre la crise, proposer des solutions, agir collectivement<\/p>\n            \n            <div class=\"hero-buttons\">\n                <a href=\"#crise\" class=\"btn btn-primary\">Comprendre la crise<\/a>\n                <a href=\"#agir\" class=\"btn btn-secondary\">Agir maintenant<\/a>\n            <\/div>\n        <\/div>\n        \n        <div class=\"alert-banner\">\n            \u26a0\ufe0f Tours d&#8217;eau en cours dans plusieurs communes &#8211; Voir la carte des coupures\n        <\/div>\n    <\/section>\n\n    <!-- Crisis Section -->\n    <section id=\"crise\" class=\"crisis-section\">\n        <div class=\"container\">\n            <h2>La crise de l&#8217;eau en Guadeloupe<\/h2>\n            <p class=\"crisis-intro\">\n                Depuis des d\u00e9cennies, les Guadeloup\u00e9ens vivent une crise de l&#8217;eau sans pr\u00e9c\u00e9dent. Malgr\u00e9 les ressources naturelles abondantes de l&#8217;archipel, l&#8217;acc\u00e8s \u00e0 l&#8217;eau potable est devenu un luxe pour de nombreux habitants.\n            <\/p>\n            \n            <div class=\"stats-grid\">\n                <div class=\"stat-card\">\n                    <div class=\"stat-number\">60%<\/div>\n                    <p class=\"stat-description\">de l&#8217;eau potable perdue dans le r\u00e9seau<\/p>\n                <\/div>\n                \n                <div class=\"stat-card\">\n                    <div class=\"stat-number\">75%<\/div>\n                    <p class=\"stat-description\">des Guadeloup\u00e9ens touch\u00e9s par les coupures<\/p>\n                <\/div>\n                \n                <div class=\"stat-card\">\n                    <div class=\"stat-number\">4 jours<\/div>\n                    <p class=\"stat-description\">d&#8217;attente entre deux distributions<\/p>\n                <\/div>\n                \n                <div class=\"stat-card\">\n                    <div class=\"stat-number\">40 ans<\/div>\n                    <p class=\"stat-description\">de n\u00e9gligence des infrastructures<\/p>\n                <\/div>\n            <\/div>\n            \n            <div class=\"text-center\">\n                <a href=\"#\" class=\"btn btn-outline\">D\u00e9couvrir l&#8217;\u00e9tat des lieux<\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Historique Section -->\n    <section id=\"historique\" class=\"historique-section\">\n        <div class=\"container\">\n            <h2>Historique de la crise de l&#8217;eau<\/h2>\n            <p class=\"historique-intro\">\n                La crise de l&#8217;eau en Guadeloupe n&#8217;est pas r\u00e9cente. Elle est le r\u00e9sultat de d\u00e9cennies de n\u00e9gligence, de mauvaise gestion et d&#8217;absence de volont\u00e9 politique.\n            <\/p>\n            \n            <div class=\"timeline\">\n                <div class=\"timeline-item\">\n                    <div class=\"timeline-year\">1980-1990<\/div>\n                    <h3>Les premiers signes<\/h3>\n                    <p>Les infrastructures vieillissantes commencent \u00e0 montrer des signes de fatigue. Les premiers rapports alertent sur l&#8217;\u00e9tat du r\u00e9seau.<\/p>\n                <\/div>\n                \n                <div class=\"timeline-item\">\n                    <div class=\"timeline-year\">1990-2000<\/div>\n                    <h3>Aggravation progressive<\/h3>\n                    <p>Les fuites se multiplient, atteignant 50% de perte. Les premi\u00e8res coupures r\u00e9guli\u00e8res apparaissent dans certains quartiers.<\/p>\n                <\/div>\n                \n                <div class=\"timeline-item\">\n                    <div class=\"timeline-year\">2000-2010<\/div>\n                    <h3>Crise g\u00e9n\u00e9ralis\u00e9e<\/h3>\n                    <p>La situation devient critique. Plus de 60% des foyers sont touch\u00e9s par les coupures d&#8217;eau. Les tours d&#8217;eau deviennent la norme.<\/p>\n                <\/div>\n                \n                <div class=\"timeline-item\">\n                    <div class=\"timeline-year\">2010-2020<\/div>\n                    <h3>\u00c9tat d&#8217;urgence permanent<\/h3>\n                    <p>Les coupures s&#8217;allongent, certaines communes passent 4 jours sans eau. Les investissements restent insuffisants.<\/p>\n                <\/div>\n                \n                <div class=\"timeline-item\">\n                    <div class=\"timeline-year\">2020-Aujourd&#8217;hui<\/div>\n                    <h3>Mobilisation citoyenne<\/h3>\n                    <p>Face \u00e0 l&#8217;inaction des autorit\u00e9s, les citoyens se mobilisent. Naissance de mouvements citoyens pour exiger des solutions durables.<\/p>\n                <\/div>\n            <\/div>\n            \n            <div class=\"text-center\">\n                <a href=\"#\" class=\"btn btn-outline\">En savoir plus sur l&#8217;historique<\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Vision Section -->\n    <section id=\"vision\" class=\"vision-section\">\n        <div class=\"container\">\n            <h2>Notre vision pour l&#8217;eau en Guadeloupe<\/h2>\n            <p class=\"vision-intro\">\n                Nous proposons des solutions concr\u00e8tes et adapt\u00e9es pour sortir durablement de la crise\n            <\/p>\n            \n            <div class=\"solutions-grid\">\n                <div class=\"solution-card\">\n                    <div class=\"solution-icon\">\ud83c\udfe0<\/div>\n                    <h3>Une gestion locale de l&#8217;eau<\/h3>\n                    <p>Pour une gouvernance transparente et d\u00e9mocratique impliquant les citoyens dans les d\u00e9cisions<\/p>\n                    <a href=\"#\" class=\"learn-more\">En savoir plus \u2192<\/a>\n                <\/div>\n                \n                <div class=\"solution-card\">\n                    <div class=\"solution-icon\">\ud83d\udd27<\/div>\n                    <h3>Des solutions techniques adapt\u00e9es<\/h3>\n                    <p>R\u00e9novation du r\u00e9seau, utilisation de technologies appropri\u00e9es et valorisation des savoir-faire<\/p>\n                    <a href=\"#\" class=\"learn-more\">En savoir plus \u2192<\/a>\n                <\/div>\n                \n                <div class=\"solution-card\">\n                    <div class=\"solution-icon\">\ud83d\udcb0<\/div>\n                    <h3>Un financement durable<\/h3>\n                    <p>Mobilisation de ressources publiques et priv\u00e9es pour garantir un service accessible \u00e0 tous<\/p>\n                    <a href=\"#\" class=\"learn-more\">En savoir plus \u2192<\/a>\n                <\/div>\n                \n                <div class=\"solution-card\">\n                    <div class=\"solution-icon\">\ud83d\udc65<\/div>\n                    <h3>Une gouvernance participative<\/h3>\n                    <p>Implication des citoyens, des associations et des experts locaux dans la gestion de l&#8217;eau<\/p>\n                    <a href=\"#\" class=\"learn-more\">En savoir plus \u2192<\/a>\n                <\/div>\n            <\/div>\n            \n            <div class=\"text-center\">\n                <a href=\"#\" class=\"btn btn-primary\">D\u00e9couvrir notre projet complet<\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Action Section -->\n    <section id=\"agir\" class=\"action-section\">\n        <div class=\"container\">\n            <h2>Comment agir ?<\/h2>\n            <p class=\"crisis-intro\">\n                Ensemble, nous pouvons faire changer les choses\n            <\/p>\n            \n            <div class=\"actions-grid\">\n                <div class=\"action-card\">\n                    <div class=\"action-icon\">\u26a0\ufe0f<\/div>\n                    <h3>Signaler un probl\u00e8me<\/h3>\n                    <p>Coupures, fuites, probl\u00e8mes de facturation ou de qualit\u00e9 de l&#8217;eau : signalez-le pour nous aider \u00e0 documenter la crise<\/p>\n                    <a href=\"#\" class=\"btn btn-primary\">Signaler<\/a>\n                <\/div>\n                \n                <div class=\"action-card\">\n                    <div class=\"action-icon\">\ud83d\udc65<\/div>\n                    <h3>Rejoindre les mobilisations<\/h3>\n                    <p>Participez aux actions collectives pour faire entendre notre voix et exiger un acc\u00e8s \u00e0 l&#8217;eau pour tous<\/p>\n                    <a href=\"#\" class=\"btn btn-primary\">Mobilisations<\/a>\n                <\/div>\n                \n                <div class=\"action-card\">\n                    <div class=\"action-icon\">\ud83d\udca7<\/div>\n                    <h3>\u00c9conomiser l&#8217;eau<\/h3>\n                    <p>D\u00e9couvrez des astuces et solutions adapt\u00e9es au contexte guadeloup\u00e9en pour r\u00e9duire votre consommation<\/p>\n                    <a href=\"#\" class=\"btn btn-primary\">Conseils<\/a>\n                <\/div>\n                \n                <div class=\"action-card\">\n                    <div class=\"action-icon\">\u2764\ufe0f<\/div>\n                    <h3>Soutenir nos actions<\/h3>\n                    <p>Faites un don ou devenez b\u00e9n\u00e9vole pour relayer nos campagnes pour renforcer notre impact collectif<\/p>\n                    <a href=\"#\" class=\"btn btn-primary\">Soutenir<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Newsletter Section -->\n    <section class=\"newsletter-section\">\n        <div class=\"container newsletter-content\">\n            <h2>Restez inform\u00e9<\/h2>\n            <p>Inscrivez-vous \u00e0 notre newsletter pour suivre nos actions et recevoir les alertes sur la situation de l&#8217;eau en Guadeloupe<\/p>\n            \n            <div class=\"newsletter-form\">\n                <input type=\"email\" class=\"newsletter-input\" placeholder=\"Votre email\" required>\n                <button type=\"button\" class=\"btn btn-primary\" onclick=\"alert('Merci pour votre inscription ! Cette fonctionnalit\u00e9 sera activ\u00e9e prochainement.')\">S&#8217;inscrire<\/button>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Scroll to top button -->\n    <button class=\"scroll-to-top\" id=\"scrollToTop\">\u2191<\/button>\n\n    <script>\n        \/\/ Smooth scrolling\n        document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n            anchor.addEventListener('click', function (e) {\n                e.preventDefault();\n                const target = document.querySelector(this.getAttribute('href'));\n                if (target) {\n                    target.scrollIntoView({\n                        behavior: 'smooth',\n                        block: 'start'\n                    });\n                }\n            });\n        });\n\n        \/\/ Scroll to top button\n        const scrollToTopBtn = document.getElementById('scrollToTop');\n\n        window.addEventListener('scroll', () => {\n            if (window.pageYOffset > 300) {\n                scrollToTopBtn.classList.add('show');\n            } else {\n                scrollToTopBtn.classList.remove('show');\n            }\n        });\n\n        scrollToTopBtn.addEventListener('click', () => {\n            window.scrollTo({\n                top: 0,\n                behavior: 'smooth'\n            });\n        });\n    <\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Dlo An Nou Gawoul\u00e9 pou dlo an nou ! Comprendre la crise, proposer des solutions, agir collectivement Comprendre la crise Agir maintenant \u26a0\ufe0f Tours d&#8217;eau en cours dans plusieurs communes&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-97","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dloannou.com\/index.php\/wp-json\/wp\/v2\/pages\/97","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dloannou.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dloannou.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dloannou.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dloannou.com\/index.php\/wp-json\/wp\/v2\/comments?post=97"}],"version-history":[{"count":9,"href":"https:\/\/dloannou.com\/index.php\/wp-json\/wp\/v2\/pages\/97\/revisions"}],"predecessor-version":[{"id":179,"href":"https:\/\/dloannou.com\/index.php\/wp-json\/wp\/v2\/pages\/97\/revisions\/179"}],"wp:attachment":[{"href":"https:\/\/dloannou.com\/index.php\/wp-json\/wp\/v2\/media?parent=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}