{"id":14,"date":"2026-06-02T09:50:49","date_gmt":"2026-06-02T09:50:49","guid":{"rendered":"http:\/\/remplirmagourde.com\/?page_id=14"},"modified":"2026-06-03T11:26:27","modified_gmt":"2026-06-03T11:26:27","slug":"14-2","status":"publish","type":"page","link":"https:\/\/remplirmagourde.com\/","title":{"rendered":"Accueil"},"content":{"rendered":"\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-heading\">Trouvez facilement un point d&#8217;eau potable pr\u00e8s de vous<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Remplir Ma Gourde vous permet de localiser rapidement les points d&#8217;eau potable accessibles autour de vous, partout dans le monde. Recherchez une adresse, utilisez votre position actuelle ou explorez la carte pour trouver o\u00f9 remplir votre gourde en quelques clics. Une solution simple pour s&#8217;hydrater, r\u00e9duire les d\u00e9chets plastiques et adopter des gestes plus responsables au quotidien.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En Is\u00e8re, retrouvez \u00e9galement les \u00e9tablissements priv\u00e9s pr\u00eats \u00e0 remplir votre gourde gratuitement<\/p>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* ==========================\n   RECHERCHE\n========================== *\/\n\n#search-container{\n    display:flex;\n    align-items:center;\n    gap:16px;\n    margin-bottom:24px;\n    flex-wrap:wrap;\n}\n\n#search-wrapper{\n    position:relative;\n    flex:1;\n    min-width:300px;\n}\n\n#searchInput{\n    width:100%;\n    height:64px;\n    padding:0 28px;\n    border:none;\n    border-radius:999px;\n    background:#ffffff;\n    color:#283583;\n    font-size:18px;\n    font-weight:600;\n    box-shadow:0 8px 24px rgba(0,0,0,.08);\n    transition:all .25s ease;\n}\n\n#searchInput::placeholder{\n    color:#283583;\n    opacity:.6;\n}\n\n#searchInput:focus{\n    outline:none;\n    box-shadow:0 10px 30px rgba(40,53,131,.15);\n}\n\n#suggestions{\n    position:absolute;\n    top:72px;\n    left:0;\n    right:0;\n    background:#fff;\n    border-radius:24px;\n    overflow:hidden;\n    box-shadow:0 15px 40px rgba(0,0,0,.12);\n    z-index:9999;\n    display:none;\n}\n\n.suggestion-item{\n    padding:16px 24px;\n    color:#283583;\n    font-size:15px;\n    cursor:pointer;\n    transition:all .2s ease;\n    border-bottom:1px solid #f1f1f1;\n}\n\n.suggestion-item:last-child{\n    border-bottom:none;\n}\n\n.suggestion-item:hover{\n    background:#f4f6fb;\n}\n\n\/* ==========================\n   BOUTON GEOLOCALISATION\n========================== *\/\n\n#locateBtn{\n    height:64px;\n    padding:0 32px;\n    border:none;\n    border-radius:999px;\n    background:#000;\n    color:#fff;\n    font-size:16px;\n    font-weight:700;\n    cursor:pointer;\n    transition:all .25s ease;\n}\n\n#locateBtn:hover{\n    transform:translateY(-2px);\n    box-shadow:0 10px 24px rgba(0,0,0,.18);\n}\n\n.btn-arrow{\n    display:inline-block;\n    margin-right:12px;\n    font-size:20px;\n    transform:translateY(-1px);\n}\n\n\/* ==========================\n   CARTE\n========================== *\/\n\n#map{\n    width:100%;\n    height:75vh;\n    min-height:600px;\n    border-radius:24px;\n    overflow:hidden;\n    box-shadow:0 20px 40px rgba(0,0,0,.08);\n    position:relative;\n    z-index:1;\n}\n\n\/* ==========================\n   CORRECTION LEAFLET \/ HEADER\n========================== *\/\n\n.leaflet-container{\n    z-index:1;\n}\n\n.leaflet-pane,\n.leaflet-top,\n.leaflet-bottom{\n    z-index:400 !important;\n}\n\n.ct-header,\n.site-header{\n    position:relative;\n    z-index:1000 !important;\n}\n\n\/* ==========================\n   MESSAGE ZOOM\n========================== *\/\n\n#zoom-message{\n    margin-top:16px;\n    color:#283583;\n    font-size:14px;\n    font-weight:500;\n}\n\n\/* ==========================\n   POPUPS\n========================== *\/\n\n.leaflet-popup-content{\n    color:#283583;\n    font-size:14px;\n    line-height:1.5;\n}\n\n.leaflet-popup-content h3{\n    margin:0 0 10px 0;\n    color:#283583;\n    font-size:18px;\n}\n\n\/* ==========================\n   CLUSTERS\n========================== *\/\n\n.marker-cluster-small,\n.marker-cluster-medium,\n.marker-cluster-large{\n    background:rgba(40,53,131,.15);\n}\n\n.marker-cluster div{\n    background:#283583;\n    color:#fff;\n    font-weight:700;\n}\n\n\/* ==========================\n   MOBILE\n========================== *\/\n\n@media (max-width:768px){\n\n    #search-container{\n        flex-direction:column;\n        align-items:stretch;\n    }\n\n    #search-wrapper{\n        width:100%;\n        min-width:auto;\n    }\n\n    #locateBtn{\n        width:100%;\n    }\n\n    #map{\n        height:65vh;\n        min-height:500px;\n    }\n\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n    const map = L.map(\"map\").setView([45.1885, 5.7245], 10);\n\n    L.tileLayer(\n        \"https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png\",\n        {\n            attribution: \"\u00a9 OpenStreetMap contributors\"\n        }\n    ).addTo(map);\n\n    const markers = L.markerClusterGroup({\n        showCoverageOnHover: false,\n        spiderfyOnMaxZoom: true,\n        maxClusterRadius: 50\n    });\n\n    map.addLayer(markers);\n\n    let loading = false;\n    let moveTimer;\n    let userMarker = null;\n\n    async function loadWaterPoints() {\n\n        if (map.getZoom() < 13) {\n\n            markers.clearLayers();\n\n            return;\n\n        }\n\n        if (loading) return;\n\n        loading = true;\n\n        const bounds = map.getBounds();\n\n        const south = bounds.getSouth();\n        const west = bounds.getWest();\n        const north = bounds.getNorth();\n        const east = bounds.getEast();\n\n        const query = `\n[out:json][timeout:20];\n\n(\n  node[\"amenity\"=\"drinking_water\"]\n      [\"access\"!=\"private\"]\n      [\"access\"!=\"no\"]\n      [\"disused\"!=\"yes\"]\n      [\"abandoned\"!=\"yes\"]\n      (${south},${west},${north},${east});\n);\n\nout body;\n`;\n\n        try {\n\n            const response = await fetch(\n                \"https:\/\/overpass-api.de\/api\/interpreter\",\n                {\n                    method: \"POST\",\n                    body: query\n                }\n            );\n\n            if (!response.ok) {\n\n                throw new Error(\n                    \"Erreur Overpass : \" +\n                    response.status\n                );\n\n            }\n\n            const data = await response.json();\n\n            markers.clearLayers();\n\n            const seen = new Set();\n\n            data.elements.forEach(point => {\n\n                if (!point.lat || !point.lon) return;\n\n                const key =\n                    point.lat.toFixed(6) +\n                    \"_\" +\n                    point.lon.toFixed(6);\n\n                if (seen.has(key)) return;\n\n                seen.add(key);\n\n                const tags = point.tags || {};\n\n                const name =\n                    tags.name ||\n                    tags.operator ||\n                    \"Point d'eau potable\";\n\n                const wheelchair =\n                    tags.wheelchair === \"yes\"\n                        ? \"Oui\"\n                        : tags.wheelchair === \"no\"\n                        ? \"Non\"\n                        : \"Non renseign\u00e9\";\n\n                const openingHours =\n                    tags.opening_hours ||\n                    \"Non renseign\u00e9\";\n\n                const operator =\n                    tags.operator ||\n                    \"Non renseign\u00e9\";\n\n                const marker = L.circleMarker(\n    [point.lat, point.lon],\n    {\n        radius: 8,\n        color: \"#283583\",\n        fillColor: \"#283583\",\n        fillOpacity: 0.9,\n        weight: 2\n    }\n);\n\n                marker.bindPopup(`\n                    <div style=\"max-width:250px;\">\n                        <h3>${name}<\/h3>\n                        <p><strong>PMR :<\/strong> ${wheelchair}<\/p>\n                        <p><strong>Horaires :<\/strong> ${openingHours}<\/p>\n                        <p><strong>Gestionnaire :<\/strong> ${operator}<\/p>\n                    <\/div>\n                `);\n\n                markers.addLayer(marker);\n\n            });\n\n        } catch (error) {\n\n            console.error(error);\n\n        } finally {\n\n            loading = false;\n\n        }\n\n    }\n\n    loadWaterPoints();\n\n    map.on(\"moveend\", function () {\n\n        clearTimeout(moveTimer);\n\n        moveTimer = setTimeout(() => {\n\n            loadWaterPoints();\n\n        }, 500);\n\n    });\n\n    const searchInput =\n        document.getElementById(\"searchInput\");\n\n    const suggestions =\n        document.getElementById(\"suggestions\");\n\n    let searchTimer;\n\n    searchInput.addEventListener(\n        \"input\",\n        function(){\n\n            clearTimeout(searchTimer);\n\n            const query =\n                this.value.trim();\n\n            if(query.length < 3){\n\n                suggestions.style.display =\n                    \"none\";\n\n                return;\n\n            }\n\n            searchTimer = setTimeout(() => {\n\n                fetchSuggestions(query);\n\n            }, 300);\n\n        }\n    );\n\n    async function fetchSuggestions(query){\n\n        try{\n\n            const response = await fetch(\n                `https:\/\/nominatim.openstreetmap.org\/search?format=jsonv2&addressdetails=1&limit=5&q=${encodeURIComponent(query)}`\n            );\n\n            const results =\n                await response.json();\n\n            suggestions.innerHTML = \"\";\n\n            if(!results.length){\n\n                suggestions.style.display =\n                    \"none\";\n\n                return;\n\n            }\n\n            results.forEach(result => {\n\n                const address =\n                    result.address || {};\n\n                const street =\n                    [\n                        address.house_number,\n                        address.road\n                    ]\n                    .filter(Boolean)\n                    .join(\" \");\n\n                const city =\n                    address.city ||\n                    address.town ||\n                    address.village ||\n                    \"\";\n\n                const postcode =\n                    address.postcode || \"\";\n\n                const label =\n                    [\n                        street,\n                        city,\n                        postcode\n                    ]\n                    .filter(Boolean)\n                    .join(\", \");\n\n                const item =\n                    document.createElement(\"div\");\n\n                item.className =\n                    \"suggestion-item\";\n\n                item.textContent =\n                    label ||\n                    result.display_name;\n\n                item.addEventListener(\n                    \"click\",\n                    function(){\n\n                        searchInput.value =\n                            label;\n\n                        suggestions.style.display =\n                            \"none\";\n\n                        map.setView(\n                            [\n                                parseFloat(result.lat),\n                                parseFloat(result.lon)\n                            ],\n                            16\n                        );\n\n                    }\n                );\n\n                suggestions.appendChild(item);\n\n            });\n\n            suggestions.style.display =\n                \"block\";\n\n        }\n        catch(error){\n\n            console.error(error);\n\n        }\n\n    }\n\n    document.addEventListener(\n        \"click\",\n        function(e){\n\n            if(\n                !searchInput.contains(e.target) &&\n                !suggestions.contains(e.target)\n            ){\n\n                suggestions.style.display =\n                    \"none\";\n\n            }\n\n        }\n    );\n\n    document\n        .getElementById(\"locateBtn\")\n        .addEventListener(\n            \"click\",\n            function(){\n\n                navigator.geolocation.getCurrentPosition(\n\n                    function(position){\n\n                        const lat =\n                            position.coords.latitude;\n\n                        const lon =\n                            position.coords.longitude;\n\n                        map.setView(\n                            [lat, lon],\n                            16\n                        );\n\n                        if(userMarker){\n\n                            map.removeLayer(\n                                userMarker\n                            );\n\n                        }\n\n                        userMarker = L.marker(\n                            [lat, lon]\n                        )\n                        .addTo(map)\n                        .bindPopup(\n                            \"Vous \u00eates ici\"\n                        )\n                        .openPopup();\n\n                    },\n\n                    function(error){\n\n                        console.error(error);\n\n                        alert(\n                            \"Impossible de r\u00e9cup\u00e9rer votre position.\"\n                        );\n\n                    }\n\n                );\n\n            }\n        );\n\n});\n<\/script>\n\n<div id=\"search-container\">\n\n    <div id=\"search-wrapper\">\n\n        <input type=\"text\" id=\"searchInput\" placeholder=\"Rechercher une adresse...\" autocomplete=\"off\">\n\n        <div id=\"suggestions\"><\/div>\n\n    <\/div>\n\n    <button id=\"locateBtn\">\n         \u2192 Me localiser\n    <\/button>\n\n<\/div>\n\n<div id=\"map\"><\/div>\n\n<p id=\"zoom-message\">\n\ud83d\udd0d Zoomez sur une ville pour afficher les points d&#8217;eau potable.\n<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Trouvez facilement un point d&#8217;eau potable pr\u00e8s de vous Remplir Ma Gourde vous permet de localiser rapidement les points d&#8217;eau potable accessibles autour de vous, partout dans le monde. Recherchez une adresse, utilisez votre position actuelle ou explorez la carte pour trouver o\u00f9 remplir votre gourde en quelques clics. Une solution simple pour s&#8217;hydrater, r\u00e9duire [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"blocksy_meta":{"content_style_source":"inherit","content_style":"wide","vertical_spacing_source":"custom","content_area_spacing":"none","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6},"disable_header":"no","disable_share_box":"yes","disable_featured_image":"yes","has_hero_section":"disabled"},"_links":{"self":[{"href":"https:\/\/remplirmagourde.com\/index.php\/wp-json\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/remplirmagourde.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/remplirmagourde.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/remplirmagourde.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/remplirmagourde.com\/index.php\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":28,"href":"https:\/\/remplirmagourde.com\/index.php\/wp-json\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":108,"href":"https:\/\/remplirmagourde.com\/index.php\/wp-json\/wp\/v2\/pages\/14\/revisions\/108"}],"wp:attachment":[{"href":"https:\/\/remplirmagourde.com\/index.php\/wp-json\/wp\/v2\/media?parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}