diff --git a/src/Controller/AdminController.php b/src/Controller/AdminController.php
index 0515eb92..5aa5f9bd 100644
--- a/src/Controller/AdminController.php
+++ b/src/Controller/AdminController.php
@@ -235,10 +235,12 @@ final class AdminController extends AbstractController
     public function calculer_stats(string $insee_code): Response
     {
         // Récupérer tous les commerces de la zone
-        $commerces = $this->entityManager->getRepository(Place::class)->findBy(['zip_code' => $insee_code, 'dead' => false]);
+        // $commerces = $this->entityManager->getRepository(Place::class)->findBy(['zip_code' => $insee_code, 'dead' => false]);
 
         // Récupérer les stats existantes pour la zone
         $stats = $this->entityManager->getRepository(Stats::class)->findOneBy(['zone' => $insee_code]);
+        $commerces = $stats->getPlaces();
+
         if(!$stats) {
             // Si aucune stat n'existe, on en crée une vide pour éviter les erreurs, mais sans la sauvegarder
             $stats = new Stats();
@@ -254,31 +256,11 @@ final class AdminController extends AbstractController
             ->orderBy('sh.id', 'DESC')
             ->setMaxResults(365)
             ->getQuery()
-            ->getResult();
-
-        /*
-        // La page de statistiques ne doit pas modifier les données, seulement les afficher.
-        // La mise à jour des statistiques se fait lors du labourage.
-        
-        // Calculer les statistiques
-        $calculatedStats = $this->motocultrice->calculateStats($commerces);
-
-        // Mettre à jour les stats pour la zone donnée
-        $stats->setPlacesCount($calculatedStats['places_count']);
-        // ... (plus de setters) ...
-        $stats->setCompletionPercent($calculatedStats['completion_percent']);
-
-        // ... (boucle foreach sur commerces) ...
-
-        $stats->computeCompletionPercent();
-        
-        $this->entityManager->persist($stats);
-        $this->entityManager->flush();
-        */
+            ->getResult(); 
         
         // Données pour le graphique des modifications par trimestre
         $modificationsByQuarter = [];
-        foreach ($stats->getPlaces() as $commerce) {
+        foreach ($commerces as $commerce) {
             if ($commerce->getOsmDataDate()) {
                 $date = $commerce->getOsmDataDate();
                 $year = $date->format('Y');
@@ -292,16 +274,36 @@ final class AdminController extends AbstractController
         }
         ksort($modificationsByQuarter); // Trier par clé (année-trimestre)
 
-        $overpass_query = $this->motocultrice->get_query_places($insee_code);
-        $overpass_query_url = "https://overpass-turbo.eu/?Q=" . urlencode($overpass_query);
+        $geojson = [
+            'type' => 'FeatureCollection',
+            'features' => []
+        ];
+
+        foreach ($commerces as $commerce) {
+            if ($commerce->getLat() && $commerce->getLon()) {
+                $geojson['features'][] = [
+                    'type' => 'Feature',
+                    'geometry' => [
+                        'type' => 'Point',
+                        'coordinates' => [$commerce->getLon(), $commerce->getLat()]
+                    ],
+                    'properties' => [
+                        'id' => $commerce->getOsmId(),
+                        'name' => $commerce->getName(),
+                        'main_tag' => $commerce->getMainTag(),
+                        'address' => $commerce->getStreet() . ' ' . $commerce->getHousenumber(),
+                        'note' => $commerce->getNoteContent(),
+                        'osm_url' => 'https://www.openstreetmap.org/' . $commerce->getOsmKind() . '/' . $commerce->getOsmId()
+                    ]
+                ];
+            }
+        }
 
         return $this->render('admin/stats.html.twig', [
             'stats' => $stats,
             'commerces' => $commerces,
             'urls' => $urls,
-            'query_places' => $overpass_query,
-            'overpass_query' => $overpass_query,
-            'overpass_query_url' => $overpass_query_url,
+            'geojson' => json_encode($geojson),
             'modificationsByQuarter' => json_encode($modificationsByQuarter),
             'maptiler_token' => $_ENV['MAPTILER_TOKEN'],
             'statsHistory' => $statsHistory,
diff --git a/src/Entity/Place.php b/src/Entity/Place.php
index 0baebc15..4ce7d4d0 100644
--- a/src/Entity/Place.php
+++ b/src/Entity/Place.php
@@ -85,7 +85,7 @@ class Place
     #[ORM\Column(nullable: true)]
     private ?\DateTime $displayed_date = null;
 
-    #[ORM\Column(nullable: true)]
+    #[ORM\Column(nullable: true, type: Types::FLOAT)]
     private ?float $lat = null;
 
     #[ORM\Column(nullable: true, type: Types::FLOAT)]
diff --git a/templates/admin/stats.html.twig b/templates/admin/stats.html.twig
index 1a9cd176..cafcb645 100644
--- a/templates/admin/stats.html.twig
+++ b/templates/admin/stats.html.twig
@@ -249,53 +249,11 @@
             <h2>Requête Overpass</h2>
         </div>
         <div class="card-body">
-    <pre class="p-4 bg-light">
-            {{ overpass_query|raw }}
-    </pre>
-            <a href="{{ overpass_query_url }}" class="btn btn-primary" target="_blank">
-                <i class="bi bi-box-arrow-up-right"></i> Exécuter dans Overpass Turbo
-            </a>
-     </div>
-</div>
-    <div id="history">
-        <h2>Historique des {{ statsHistory|length }} stats</h2>
-        <table class="table table-bordered table-striped table-hover table-responsive js-sort-table">
-            <thead>
-                <tr>
-                    <th>Date</th>
-                    <th>Places</th> 
-                    <th>Complétion</th>
-                    <th>Emails count</th>
-                    <th>Emails sent</th>
-                    <th>Opening hours</th>
-                    <th>Address</th>
-                    <th>Website</th>
-                    <th>Siret</th>
-                    {# <th>Accessibilite</th> #}
-                    {# <th>Note</th> #}
-                </tr>
-            </thead>
-            <tbody>
-                {% for stat in statsHistory %}
-                    <tr>
-                        <td>{{ stat.date|date('d/m/Y') }}</td>
-                        <td>{{ stat.placesCount }}</td>
-                        <td>{{ stat.completionPercent }}%</td>
-                        <td>{{ stat.emailsCount }}</td>
-                        <td>{{ stat.emailsSent }}</td>
-                        <td>{{ stat.openingHoursCount }}</td>
-                        <td>{{ stat.addressCount }}</td>
-                        <td>{{ stat.websiteCount }}</td>
-                        <td>{{ stat.siretCount }}</td>
-                        {# <td>{{ stat.accessibiliteCount }}</td> #}
-                        {# <td>{{ stat.noteCount }}</td> #}
-                    </tr>
-                {% endfor %}
-            </tbody>
-        </table>
+            <canvas id="modificationsByQuarterChart"></canvas>
+        </div>
     </div>
 
-<div class="completion-info mt-4">
+    <div class="completion-info mt-4">
                 <div class="alert alert-info">
                     <div class="d-flex align-items-center" style="cursor: pointer;" onclick="toggleCompletionInfo()">
                         <i class="bi bi-info-circle me-2"></i>
@@ -344,858 +302,141 @@
 {% block javascripts %}
     {{ parent() }}
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
-    <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script> 
-    <script type="module">
-      
-
-        // Attendre que le DOM et tous les scripts soient chargés
-        document.addEventListener('DOMContentLoaded', function() {
-            // Vérifier que Chart.js est disponible
-            if (typeof Chart === 'undefined') {
-                console.error('Chart.js n\'est pas chargé');
-                return;
-            }
-
-            // Vérifier que les fonctions sont disponibles
-            if (typeof calculateCompletion === 'undefined') {
-                console.error('La fonction calculateCompletion n\'est pas définie');
-                return;
-            }
-
-            let map;
-            let dropMarkers = [];
-            let currentMarkerType = 'drop';
-            let completionChart;
-            let contextMenu;
-            let selectedFeature = null;
-
-            // Fonction pour calculer la distribution des taux de complétion
-            function calculateCompletionDistribution(elements) {
-                const buckets = Array(11).fill(0); // 0-10%, 11-20%, ..., 91-100%
-                
-                elements.forEach(element => {
-                    if (element.tags) {
-                        const completion = calculateCompletion(element.tags);
-                        const bucketIndex = Math.min(Math.floor(completion.percentage / 10), 10);
-                        buckets[bucketIndex]++;
-                    }
-                });
-                
-                return buckets;
-            }
-
-            // Fonction pour créer le graphique de complétion
-            function createCompletionChart(elements) {
-                const chartElement = document.getElementById('completionChart');
-                if (!chartElement) return;
-
-                const ctx = chartElement.getContext('2d');
-                const distribution = calculateCompletionDistribution(elements);
-                
-                if (completionChart) {
-                    completionChart.destroy();
-                }
-                
-                completionChart = new Chart(ctx, {
-                    type: 'bar',
-                    data: {
-                        labels: ['0-10%', '11-20%', '21-30%', '31-40%', '41-50%', '51-60%', '61-70%', '71-80%', '81-90%', '91-100%'],
-                        datasets: [{
-                            label: 'Nombre de lieux',
-                            data: distribution,
-                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
-                            borderColor: 'rgba(75, 192, 192, 1)',
-                            borderWidth: 1
-                        }]
-                    },
-                    options: {
-                        responsive: true,
-                        scales: {
-                            y: {
-                                beginAtZero: true,
-                                ticks: {
-                                    stepSize: 1
-                                }
-                            }
-                        }
-                    }
-                });
-            }
-
-            // Fonction pour charger les lieux depuis l'API Overpass
-            async function loadPlaces() {
-                try {
-                    const response = await fetch(`https://overpass-api.de/api/interpreter?data={{ overpass_query|url_encode|raw }}`);
-                    const geojsonData = await response.json();
-                    
-                    if (geojsonData.elements && geojsonData.elements.length > 0) {
-                        const totallieux = geojsonData.elements.length;
-                        const totallieuxElement = document.getElementById('totallieux');
-                        if (totallieuxElement) {
-                            totallieuxElement.textContent = totallieux;
-                        }
-                        
-                        createCompletionChart(geojsonData.elements);
-                        
-                        dropMarkers = updateMarkers(geojsonData.elements, map, currentMarkerType, dropMarkers, geojsonData);
-                    }
-                } catch (error) {
-                    console.error('Erreur lors du chargement des lieux:', error);
-                }
-            }
-
-            // Initialisation de la carte
+    <script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const geojsonData = {{ geojson|raw }};
+        console.log('geojsonData', geojsonData)
+        const map_token = "{{ maptiler_token }}";
+        let map;
+        let map_is_loaded = false;
+        let dropMarkers = [];
+        
+        if (map_token && geojsonData && geojsonData.features.length > 0) {
             map = new maplibregl.Map({
                 container: 'map',
-                style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
-                center: [{{stats.places?stats.places[0].lat}}, {{stats.places?stats.places[0].lon}}], // Paris
-                zoom: 12
+                style: `https://api.maptiler.com/maps/streets/style.json?key=${map_token}`,
+                center: geojsonData.features[0].geometry.coordinates,
+                zoom: 14
             });
 
-            // Ajouter les contrôles de navigation
-            map.addControl(new maplibregl.NavigationControl());
+            map.on('load', function() {
+                map_is_loaded = true;
+                document.getElementById('maploader').style.display = 'none';
 
-            // Gestionnaire d'événements pour le menu contextuel
-            map.on('contextmenu', function(e) {
-                e.preventDefault();
-                const features = map.queryRenderedFeatures(e.point, {
-                    layers: ['markers', 'circles']
+                map.addSource('places', {
+                    type: 'geojson',
+                    data: geojsonData,
+                    cluster: true,
+                    clusterMaxZoom: 14,
+                    clusterRadius: 50
                 });
 
-                if (features.length > 0) {
-                    selectedFeature = features[0];
-                    const popup = new maplibregl.Popup()
-                        .setLngLat(e.lngLat)
-                        .setHTML(`
-                            <div class="context-menu">
-                                <button onclick="window.location.href='{{ path('app_admin_labourer', {'insee_code': 'ZONE_CODE'}) }}'.replace('ZONE_CODE', '${selectedFeature.properties.insee_code}')">
-                                    Labourer cette zone
-                                </button>
-                            </div>
-                        `)
-                        .addTo(map);
-                }
-            });
-
-            // Gestionnaire d'événements pour le clic sur la carte
-            map.on('click', function(e) {
-                const features = map.queryRenderedFeatures(e.point, {
-                    layers: ['markers', 'circles']
+                map.addLayer({
+                    id: 'clusters',
+                    type: 'circle',
+                    source: 'places',
+                    filter: ['has', 'point_count'],
+                    paint: {
+                        'circle-color': [
+                            'step', ['get', 'point_count'],
+                            '#51bbd6', 100,
+                            '#f1f075', 750,
+                            '#f28cb1'
+                        ],
+                        'circle-radius': [
+                            'step', ['get', 'point_count'],
+                            20, 100,
+                            30, 750,
+                            40
+                        ]
+                    }
                 });
 
-                if (features.length > 0) {
-                    const popup = new maplibregl.Popup()
-                        .setLngLat(e.lngLat)
-                        .setHTML(createPopupContent(features[0].properties))
-                        .addTo(map);
-                }
-            });
+                map.addLayer({
+                    id: 'cluster-count',
+                    type: 'symbol',
+                    source: 'places',
+                    filter: ['has', 'point_count'],
+                    layout: {
+                        'text-field': '{point_count_abbreviated}',
+                        'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
+                        'text-size': 12
+                    }
+                });
 
-            function toggleMarkerType() {   
-                currentMarkerType = currentMarkerType === 'drop' ? 'circle' : 'drop'; 
-                loadPlaces();
-            }
-            // Gestionnaire d'événements pour le bouton de changement de type de marqueur
-            document.getElementById('circleMarkersBtn')?.addEventListener('click', toggleMarkerType);
-            document.getElementById('dropMarkersBtn')?.addEventListener('click', toggleMarkerType);
-
-            // Charger les lieux au démarrage
-            loadPlaces();
-
-            // Graphique des modifications par trimestre
-            const modificationsData = JSON.parse('{{ modificationsByQuarter|raw }}');
-            const quarterLabels = Object.keys(modificationsData);
-            const quarterValues = Object.values(modificationsData);
-            console.log('modificationsData', modificationsData);
-            console.log('quarterLabels', quarterLabels);
-            console.log('quarterValues', quarterValues);
-
-            if (quarterLabels.length > 0) {
-                const chartElement = document.getElementById('modificationsByQuarterChart');
-                if (chartElement) {
-                    const ctxQuarter = chartElement.getContext('2d');
-                    new Chart(ctxQuarter, {
-                        type: 'bar',
-                        data: {
-                            labels: quarterLabels,
-                            datasets: [{
-                                label: 'Nombre de modifications',
-                                data: quarterValues,
-                                backgroundColor: 'rgba(54, 162, 235, 0.6)',
-                                borderColor: 'rgba(54, 162, 235, 1)',
-                                borderWidth: 1
-                            }]
-                        },
-                        options: {
-                            scales: {
-                                y: {
-                                    beginAtZero: true,
-                                    ticks: {
-                                        stepSize: 1
-                                    }
-                                }
-                            },
-                            plugins: {
-                                legend: {
-                                    display: false
-                                }
-                            }
-                        }
+                map.addLayer({
+                    id: 'unclustered-point',
+                    type: 'circle',
+                    source: 'places',
+                    filter: ['!', ['has', 'point_count']],
+                    paint: {
+                        'circle-color': '#11b4da',
+                        'circle-radius': 8,
+                        'circle-stroke-width': 2,
+                        'circle-stroke-color': '#fff'
+                    }
+                });
+                
+                // inspect a cluster on click
+                map.on('click', 'clusters', function(e) {
+                    const features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] });
+                    const clusterId = features[0].properties.cluster_id;
+                    map.getSource('places').getClusterExpansionZoom(clusterId, function(err, zoom) {
+                        if (err) return;
+                        map.easeTo({
+                            center: features[0].geometry.coordinates,
+                            zoom: zoom
+                        });
                     });
-                } else {
-                    console.warn('Canvas #modificationsByQuarterChart introuvable dans le DOM');
-                }
-            } else {
-                console.warn('Aucune donnée de trimestre à afficher pour le graphique.');
-                const chartElement = document.getElementById('modificationsByQuarterChart');
-                if (chartElement) {
-                    chartElement.parentNode.innerHTML += '<div class="text-muted p-3">Aucune donnée de modification disponible pour cette zone.</div>';
-                }
+                });
+
+                map.on('click', 'unclustered-point', function(e) {
+                    const coordinates = e.features[0].geometry.coordinates.slice();
+                    const properties = e.features[0].properties;
+
+                    let popupContent = `<strong>${properties.name || 'Sans nom'}</strong><br>`;
+                    if (properties.address) popupContent += `${properties.address}<br>`;
+                    if (properties.main_tag) popupContent += `<em>${properties.main_tag}</em><br>`;
+                    if (properties.note) popupContent += `<small>Note: ${properties.note}</small><br>`;
+                    popupContent += `<a href="${properties.osm_url}" target="_blank">Voir sur OSM</a>`;
+
+                    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+                        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
+                    }
+
+                    new maplibregl.Popup()
+                        .setLngLat(coordinates)
+                        .setHTML(popupContent)
+                        .addTo(map);
+                });
+
+                map.on('mouseenter', 'clusters', function() {
+                    map.getCanvas().style.cursor = 'pointer';
+                });
+                map.on('mouseleave', 'clusters', function() {
+                    map.getCanvas().style.cursor = '';
+                });
+            });
+        } else {
+            const mapDiv = document.getElementById('map');
+            if (mapDiv) {
+                mapDiv.innerHTML = '<div class="alert alert-warning">Aucune donnée géographique à afficher pour cette zone.</div>';
             }
-        });
+            document.getElementById('maploader').style.display = 'none';
+        }
+
+        const openInJOSMButton = document.getElementById('openInJOSM');
+        if (openInJOSMButton) {
+            openInJOSMButton.addEventListener('click', () => {
+                const osmElements = geojsonData.features.map(f => ({
+                    osm_id: f.properties.id.split('/')[1],
+                    osm_type: f.properties.id.split('/')[0]
+                }));
+                openInJOSM(map, map_is_loaded, osmElements);
+            });
+        }
+    });
     </script>
 
-<script>
-    const request = `{{query_places|raw}}`; 
-    const zip_code = `{{stats.zone}}`;
-    let mapElements = [];
-    let map_is_loaded = false;
-    let features = [];
-    let maplibre;
-    let map;
-    let overpassData = {}; // Stockage des données Overpass
-    let currentMarkerType = 'drop'; // Type de marqueur actuel
-    let dropMarkers = []; // Tableau pour stocker les marqueurs en goutte
-    let contextMenu = null; // Menu contextuel
-
-
-    function calculateCompletion(element) {
-        let completionCount = 0;
-        let totalFields = 0;
-  let missingFields = [];
-        
-        const fieldsToCheck = [
-    { name: 'name', label: 'Nom du commerce' },
-    { name: 'contact:street', label: 'Rue' },
-    { name: 'contact:housenumber', label: 'Numéro' },
-    { name: 'opening_hours', label: 'Horaires d\'ouverture' },
-    { name: 'contact:website', label: 'Site web' },
-    { name: 'contact:phone', label: 'Téléphone' },
-    { name: 'wheelchair', label: 'Accessibilité PMR' }
-        ];
-
-        fieldsToCheck.forEach(field => {
-            totalFields++;
-    if (element.tags && element.tags[field.name]) {
-                completionCount++;
-    } else {
-      missingFields.push(field.label);
-    }
-  });
-
-  return {
-    percentage: (completionCount / totalFields) * 100,
-    missingFields: missingFields
-  };
-}
-// Fonctions utilitaires pour la gestion des marqueurs et popups sur la carte
-
-function getCompletionColor(completion) {
-  if (completion === undefined || completion === null) {
-    return '#808080'; // Gris pour pas d'information
-  }
-  // Convertir le pourcentage en couleur verte (0% = blanc, 100% = vert foncé)
-  const intensity = Math.floor((completion / 100) * 255);
-    console.log('completion', completion, intensity);
-    
-  return `rgb(0, ${intensity}, 0)`;
-}
-
-
-    function createPopupContent(element) {
-  const completion = calculateCompletion(element);
-        let content = `
-            <div class="mb-2">
-            <h5>${element.tags?.name || 'Sans nom'}</h5>
-            <div class="d-flex gap-2">
-                <a class="btn btn-primary btn-sm" href="/admin/placeType/${element.type}/${element.id}">
-                    <i class="bi bi-pencil"></i> Éditer
-                </a>
-                <a class="btn btn-secondary btn-sm" href="https://openstreetmap.org/${element.type}/${element.id}" target="_blank">
-                    <i class="bi bi-map"></i> OSM
-                </a>
-            </div>
-            </div>
-        `;
-        
-  if (completion.percentage < 100) {
-    content += `
-            <div class="alert alert-warning mt-2">
-                <h6>Infos manquantes :</h6>
-                <ul class="list-unstyled mb-0">
-                    ${completion.missingFields.map(field => `<li><i class="bi bi-x-circle text-danger"></i> ${field}</li>`).join('')}
-                </ul>
-            </div>
-        `;
-  }
-
-  content += '<table class="table table-sm mt-2">';
-        
-        // Ajouter tous les tags
-        if (element.tags) {
-            for (const tag in element.tags) {
-                content += `<tr><td><strong>${tag}</strong></td><td>${element.tags[tag]}</td></tr>`;
-            }
-        }
-
-        content += '</table>';
-        return content;
-    }
-
-function updateMarkers(features, map, currentMarkerType, dropMarkers, overpassData) {
-  // Supprimer tous les marqueurs existants
-  dropMarkers.forEach(marker => marker.remove());
-  dropMarkers = [];
-
-  features.forEach(feature => {
-    if (currentMarkerType === 'drop') {
-      const el = document.createElement('div');
-      el.className = 'marker';
-      el.style.backgroundColor = getCompletionColor(feature.properties.completion);
-      el.style.width = '15px';
-      el.style.height = '15px';
-      el.style.borderRadius = '50%';
-      el.style.border = '2px solid white';
-      el.style.cursor = 'pointer';
-
-      const marker = new maplibregl.Marker(el)
-        .setLngLat(feature.geometry.coordinates)
-        .addTo(map);
-
-      // Ajouter l'événement de clic
-      el.addEventListener('click', () => {
-        const element = overpassData[feature.properties.id];
-        if (element) {
-          const popup = new maplibregl.Popup()
-            .setLngLat(feature.geometry.coordinates)
-            .setHTML(createPopupContent(element));
-          popup.addTo(map);
-        }
-      });
-
-      dropMarkers.push(marker);
-    } else {
-      // Créer un cercle pour chaque feature
-      const circle = turf.circle(
-        feature.geometry.coordinates,
-        0.02, // rayon en kilomètres (réduit de 0.5 à 0.2)
-        { steps: 64, units: 'kilometers' }
-      );
-
-      // Ajouter la source et la couche pour le cercle
-      if (!map.getSource(feature.id)) {
-        map.addSource(feature.id, {
-          type: 'geojson',
-          data: circle
-        });
-
-        map.addLayer({
-          id: feature.id,
-          type: 'fill',
-          source: feature.id,
-          paint: {
-            'fill-color': getCompletionColor(feature.properties.completion),
-            'fill-opacity': 0.6,
-            'fill-outline-color': '#fff'
-          }
-        });
-
-        // Ajouter l'événement de clic sur le cercle
-        map.on('click', feature.id, () => {
-          const element = overpassData[feature.properties.id];
-          if (element) {
-            const popup = new maplibregl.Popup()
-              .setLngLat(feature.geometry.coordinates)
-              .setHTML(createPopupContent(element));
-            popup.addTo(map);
-          }
-        });
-      }
-    }
-  });
-
-  return dropMarkers;
-}
-
-// Exporter les fonctions
-window.getCompletionColor = getCompletionColor;
-window.calculateCompletion = calculateCompletion;
-window.createPopupContent = createPopupContent;
-window.updateMarkers = updateMarkers; 
-
-
-    function calculateCompletionDistribution(elements) {
-        // Créer des buckets de 10% (0-10%, 10-20%, etc.)
-        const buckets = Array(11).fill(0);
-        
-        elements.forEach(element => {
-            const completion = calculateCompletion(element);
-            const bucketIndex = Math.floor(completion.percentage / 10);
-            buckets[bucketIndex]++;
-        });
-
-        return buckets;
-    }
-
-    function createCompletionChart(elements) {
-        const distribution = calculateCompletionDistribution(elements);
-        const ctx = document.createElement('canvas');
-        document.getElementById('distribution_completion').appendChild(ctx);
-
-        new Chart(ctx, {
-            type: 'line',
-            data: {
-                labels: ['0-10%', '10-20%', '20-30%', '30-40%', '40-50%', '50-60%', '60-70%', '70-80%', '80-90%', '90-100%'],
-                datasets: [{
-                    label: 'Nombre de lieux',
-                    data: distribution,
-                    backgroundColor: 'rgba(0, 128, 0, 0.1)',
-                    borderColor: 'rgba(0, 128, 0, 1)',
-                    borderWidth: 2,
-                    tension: 0.4,
-                    fill: true,
-                    pointBackgroundColor: 'rgba(0, 128, 0, 1)',
-                    pointBorderColor: '#fff',
-                    pointBorderWidth: 2,
-                    pointRadius: 4,
-                    pointHoverRadius: 6
-                }]
-            },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                scales: {
-                    y: {
-                        beginAtZero: true,
-                        title: {
-                            display: true,
-                            text: 'Nombre de lieux'
-                        }
-                    },
-                    x: {
-                        title: {
-                            display: true,
-                            text: 'Taux de complétion'
-                        }
-                    }
-                },
-                plugins: {
-                    title: {
-                        display: true,
-                        text: 'Distribution du taux de complétion des lieux'
-                    }
-                }
-            }
-        });
-    }
-
-    function createJOSMQuery(elements){
-        let query = '';
-        elements.forEach(element => {
-            query += `${element.type}${element.id},`;
-        });
-        // Enlever la virgule finale
-        query = query.replace(/,$/, '');
-        return query;
-    }
-
-    let josm_elements = [];
-    features = []; 
-
-    async function loadPlaces(map) {
-        try {
-            const request = `{{query_places |raw}}`;
-            const response = await fetch('https://overpass-api.de/api/interpreter', {
-                method: 'POST',
-                body: request
-            });
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            const data = await response.json();
-
-            // Stocker les données Overpass
-            data.elements.forEach(element => {
-                overpassData[element.id] = element;
-            });
-
-            // Mettre à jour les marqueurs
-            features = [];
-            josm_elements = [];
-            data.elements.forEach(element => {
-                const lat = element.lat || (element.center && element.center.lat);
-                const lon = element.lon || (element.center && element.center.lon);
-                if (lat && lon) {
-                    const completion = calculateCompletion(element);
-                     
-                    const feature = {
-                        id: `marker-${element.id}`,
-                        type: 'Feature',
-                        properties: {
-                            id: element.id,
-                            name: element.tags?.name || 'Sans nom',
-                            completion: completion.percentage,
-                            center: [lon, lat]
-                        },
-                        geometry: {
-                            type: 'Point',
-                            coordinates: [lon, lat]
-                        }
-                    };
-                    features.push(feature);
-                    josm_elements.push(element);
-                }
-            });
-
-            // Afficher les marqueurs selon le type actuel
-            dropMarkers = updateMarkers(features, map, currentMarkerType, dropMarkers, overpassData);
-
-            // Ajuster la vue pour inclure tous les points
-            const points = features.map(f => f.properties.center);
-            if (points.length > 0) {
-                const bounds = new maplibregl.LngLatBounds(points[0], points[0]);
-                points.forEach(point => bounds.extend(point));
-                
-                if (bounds?._sw && bounds?._ne) {
-                    map.fitBounds(bounds, {
-                        padding: 50,
-                        maxZoom: 15
-                    });
-                } else {
-                    console.warn('Bounds invalides, utilisation des coordonnées par défaut');
-                }
-            }
- 
-            createCompletionChart(data.elements);
-
-            // Cacher le spinner une fois le chargement terminé
-            document.getElementById('maploader').style.display = 'none';
-
-        } catch (error) {
-            console.error('Erreur lors du chargement des lieux:', error);
-        }
-    }
-
-    function openJOSMQuery(map, query) {
-        const bounds = map.getBounds();
- 
-        const josmUrl = `http://localhost:8111/load_object?` +
-   
-            `objects=${query}`;
-
-        // Créer un élément <a> temporaire
-        const tempLink = document.createElement('a');
-        tempLink.style.display = 'none';
-        document.body.appendChild(tempLink);
-        
-        tempLink.href = josmUrl;
-        tempLink.click();
-        document.body.removeChild(tempLink);
-    }
-
-    function openInJOSM() {
-        if (josm_elements.length === 0) {
-            alert('Veuillez sélectionner au moins un élément');
-            return;
-        }
-        const query = createJOSMQuery(josm_elements);
-        openJOSMQuery(map, query);
-    }
-
-    document.addEventListener('DOMContentLoaded', function() {
-
-        maplibre = new maplibregl.Map({
-            container: 'map',
-            style: 'https://api.maptiler.com/maps/streets-v2/style.json?key={{ maptiler_token }}',
-            center: [2.3488, 48.8534],
-            zoom: 12
-        });
-        map = maplibre;
-
-        // Créer le menu contextuel
-        contextMenu = document.createElement('div');
-        contextMenu.id = 'context-menu';
-        contextMenu.style.display = 'none';
-        contextMenu.style.position = 'absolute';
-        contextMenu.style.backgroundColor = 'white';
-        contextMenu.style.border = '1px solid #ccc';
-        contextMenu.style.padding = '10px';
-        contextMenu.style.borderRadius = '4px';
-        contextMenu.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
-        contextMenu.style.zIndex = '1000';
-        document.body.appendChild(contextMenu);
-
-        // Gestionnaire de clic droit sur la carte
-        map.on('contextmenu', async function(e) {
-            e.preventDefault();
-            
-            // Vérifier si le clic est sur un marqueur
-            const clickedFeatures = map.queryRenderedFeatures(e.point, {
-                layers: features.map(f => `marker-${f.properties.id}`)
-            });
-
-            if (clickedFeatures.length > 0) {
-                return; // Ne rien faire si on clique sur un marqueur
-            }
-
-            // Afficher le menu contextuel
-            contextMenu.style.display = 'block';
-            
-            // Obtenir la position de la carte dans la page
-            const mapContainer = map.getContainer();
-            const mapRect = mapContainer.getBoundingClientRect();
-            
-            // Calculer la position relative au conteneur de la carte
-            const x = e.point.x + mapRect.left;
-            const y = e.point.y + mapRect.top;
-            
-            // Positionner le menu contextuel
-            contextMenu.style.left = `${x}px`;
-            contextMenu.style.top = `${y}px`;
-            
-            contextMenu.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Recherche du code INSEE...';
-        });
-
-        document.getElementById('circleMarkersBtn').addEventListener('click', function() {
-            currentMarkerType = 'circle';
-            this.classList.add('active');
-            document.getElementById('dropMarkersBtn').classList.remove('active');
-            dropMarkers = updateMarkers(features, map, currentMarkerType, dropMarkers, overpassData);
-        });
-
-        document.getElementById('dropMarkersBtn').addEventListener('click', function() {
-            currentMarkerType = 'drop';
-            this.classList.add('active');
-            document.getElementById('circleMarkersBtn').classList.remove('active');
-            dropMarkers = updateMarkers(features, map, currentMarkerType, dropMarkers, overpassData);
-        });
-
-        document.getElementById('openInJOSM').addEventListener('click', openInJOSM);
-
-        // Attendre que la carte soit chargée avant d'ajouter les écouteurs d'événements
-        map.on('load', function() {
-            map_is_loaded = true;
-            // Changer le curseur au survol des marqueurs
-            map.on('mouseenter', function(e) {
-                const hoveredFeatures = map.queryRenderedFeatures(e.point, {
-                    layers: features.map(f => `marker-${f.properties.id}`)
-                });
-                if (hoveredFeatures.length > 0) {
-                    map.getCanvas().style.cursor = 'pointer';
-                }
-            });
-
-            map.on('mouseleave', function(e) {
-                const hoveredFeatures = map.queryRenderedFeatures(e.point, {
-                    layers: features.map(f => `marker-${f.properties.id}`)
-                });
-                if (hoveredFeatures.length === 0) {
-                    map.getCanvas().style.cursor = '';
-                }
-            });
-
-            // Charger les lieux
-            loadPlaces(map);
-        });
-
-        sortTable();
-
-        // Initialiser les popovers pour les cellules de complétion
-        const completionCells = document.querySelectorAll('.completion-cell');
-        completionCells.forEach(cell => {
-            new bootstrap.Popover(cell, {
-                trigger: 'hover',
-                html: true
-            });
-
-            // Fermer tous les popovers au clic sur une cellule
-            cell.addEventListener('click', function(e) {
-                e.stopPropagation();
-                completionCells.forEach(otherCell => {
-                    if (otherCell !== cell) {
-                        const popover = bootstrap.Popover.getInstance(otherCell);
-                        if (popover) {
-                            popover.hide();
-                        }
-                    }
-                });
-            });
-        });
-
-        // Fermer tous les popovers quand on clique ailleurs
-        document.addEventListener('click', function(e) {
-            if (!e.target.closest('.completion-cell')) {
-                completionCells.forEach(cell => {
-                    const popover = bootstrap.Popover.getInstance(cell);
-                    if (popover) {
-                        popover.hide();
-                    }
-                });
-            }
-        });
-    });
-
-    function toggleCompletionInfo() {
-        const content = document.getElementById('completionInfoContent');
-        const icon = document.getElementById('completionInfoIcon');
-        
-        if (content.style.display === 'none') {
-            content.style.display = 'block';
-            icon.classList.remove('bi-chevron-down');
-            icon.classList.add('bi-chevron-up');
-        } else {
-            content.style.display = 'none';
-            icon.classList.remove('bi-chevron-up');
-            icon.classList.add('bi-chevron-down');
-        }
-    }
-    window.toggleCompletionInfo = toggleCompletionInfo;
-
-
-    // infos depuis complète tes commerces : CTC 
-
-    let CTC_urls = {{ CTC_urls|json_encode|raw }};
-
-    console.log('CTC_urls', CTC_urls); 
-
- 
- // prendre les infos de CTC_urls.getOSMClosedSirets, on obtient un json. C'est une liste d'objets osm qui ont une propriété "siret".
-        // on regarde les lignes du tableau des lieux, et on regarde si le siret est dans la liste des sirets clos.
-        // si oui, on remplit la case des infos en cas de siret clos avec la propriété "vente", puis "radiation", puis "liquidation". avec chacun une icone bootstrap.
-        // on compte les sirets clos et on remplit l'entête du tableau en comptant. 
-    async function markClosedSiretsOnTable() {
-    // 1. Récupérer la liste des SIRETs fermés via l'API
-    const response = await fetch(CTC_urls.getOSMClosedSirets);
-    const closedSirets = await response.json(); // [{siret, vente, radiation, liquidation, ...}, ...]
-    const closedSiretMap = {};
-    closedSirets.forEach(obj => {
-        closedSiretMap[obj.siret] = obj;
-    });
-
-    // 2. Parcourir les lignes du tableau des lieux
-    let closedCount = 0;
-    document.querySelectorAll('table.lieux-table tbody tr').forEach(row => {
-        // Supposons que le SIRET est dans une cellule avec une classe ou un data-attribute
-        const siretCell = row.querySelector('.siret-cell');
-        if (!siretCell) return;
-        const siret = siretCell.textContent.trim();
-        if (closedSiretMap[siret]) {
-            closedCount++;
-            const info = closedSiretMap[siret];
-            // 3. Remplir la case infos avec les statuts
-            const infoCell = row.querySelector('.infos-cell');
-            let html = '';
-            if (info.vente) {
-                html += `<span title="Vente"><i class="bi bi-cash-coin text-warning"></i> Vente</span> `;
-            }
-            if (info.radiation) {
-                html += `<span title="Radiation"><i class="bi bi-x-circle text-danger"></i> Radiation</span> `;
-            }
-            if (info.liquidation) {
-                html += `<span title="Liquidation"><i class="bi bi-exclamation-triangle text-danger"></i> Liquidation</span> `;
-            }
-            infoCell.innerHTML = html;
-            row.classList.add('table-danger');
-        }
-    });
-
-    // 4. Mettre à jour l'entête du tableau avec le nombre de SIRETs clos
-    const headerClosed = document.querySelector('.header-closed-count');
-    if (headerClosed) {
-        headerClosed.textContent = closedCount;
-    }
-}
-
-    console.log('getOSMClosedSirets', CTC_urls.getOSMClosedSirets);
-    {# markClosedSiretsOnTable(); #}
-
-function makeDonutGraphOfTags() {
-  // Récupérer tous les tags de la colonne 4 (Type)
-  const tags = Array.from(document.querySelectorAll('table tbody tr td:nth-child(4)'))
-    .map(cell => cell.textContent.trim())
-    .filter(tag => tag.includes('=')) // Filtrer les cellules qui ne contiennent pas de =
-    .filter(tag => tag); // Filtrer les cellules vides
-
-  // Compter les occurrences de chaque tag
-  const tagCounts = {};
-  tags.forEach(tag => {
-    tagCounts[tag] = (tagCounts[tag] || 0) + 1;
-  });
-  console.log('tagCounts', tagCounts);
-
-  // Convertir en tableau et trier par nombre d'occurrences
-  const sortedTags = Object.entries(tagCounts)
-    .sort((a, b) => b[1] - a[1]);
-
-  // Créer ou récupérer la div pour le graphique
-  let repartitionDiv = document.getElementById('repartition_tags');
-  if (!repartitionDiv) {
-    repartitionDiv = document.createElement('div');
-    repartitionDiv.id = 'repartition_tags';
-    repartitionDiv.style.height = '300px';
-    repartitionDiv.style.margin = '20px 0';
-    // Insérer après la carte
-    const mapDiv = document.getElementById('map');
-    mapDiv.parentNode.insertBefore(repartitionDiv, mapDiv.nextSibling);
-  }
-
-  // Créer un canvas à l'intérieur de la div
-  const canvas = document.createElement('canvas');
-  repartitionDiv.innerHTML = ''; // Vider la div
-  repartitionDiv.appendChild(canvas);
-
-  // Créer le graphique donut
-  const ctx = canvas.getContext('2d');
-  new Chart(ctx, {
-    type: 'doughnut',
-    data: {
-      labels: sortedTags.map(([tag]) => tag),
-      datasets: [{
-        data: sortedTags.map(([, count]) => count),
-        backgroundColor: [
-          '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF',
-          '#FF9F40', '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0',
-          '#9966FF', '#FF9F40', '#FF6384', '#36A2EB', '#FFCE56'
-        ]
-      }]
-    },
-    options: {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        legend: {
-          position: 'right',
-          labels: {
-            boxWidth: 15,
-            padding: 15,
-              size: 12
-            }
-          }
-        },
-        title: {
-          display: true,
-          text: 'Répartition des types de lieux',
-          font: {
-            size: 16
-          }
-        }
-      }
-    })
-  };
-
-    makeDonutGraphOfTags();
-    markClosedSiretsOnTable();
-</script>
-
 {% endblock %}