{"id":164,"date":"2026-01-12T23:34:06","date_gmt":"2026-01-12T22:34:06","guid":{"rendered":"https:\/\/gabrielmillon.com\/?page_id=164"},"modified":"2026-01-12T23:42:13","modified_gmt":"2026-01-12T22:42:13","slug":"164-2","status":"publish","type":"page","link":"https:\/\/gabrielmillon.com\/index.php\/164-2\/","title":{"rendered":""},"content":{"rendered":"<p><!DOCTYPE html><br \/>\n<html><br \/>\n<head>\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script><\/p>\n<style>\n  \/* On force l'affichage pour contrer le th\u00e8me *\/\n  #mon-super-container {\n    width: 100%;\n    max-width: 1200px;\n    margin: 0 auto;\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    color: #333;\n  }<\/p>\n<p>  \/* Zone des filtres *\/\n  .mes-filtres {\n    display: flex;\n    gap: 10px;\n    margin-bottom: 20px;\n    flex-wrap: wrap;\n  }<\/p>\n<p>  .btn-filtre {\n    padding: 10px 20px;\n    background-color: #f0f0f0; \/* Gris clair *\/\n    border: 1px solid #ddd;\n    border-radius: 30px;\n    cursor: pointer;\n    font-size: 14px;\n    font-weight: 600;\n    transition: all 0.3s ease;\n  }<\/p>\n<p>  .btn-filtre:hover, .btn-filtre.actif {\n    background-color: #333; \/* Noir\/Gris fonc\u00e9 *\/\n    color: white;\n    border-color: #333;\n  }<\/p>\n<p>  \/* La grille Carte + Liste *\/\n  .ma-grille {\n    display: grid;\n    grid-template-columns: 1fr 2fr; \/* 1\/3 liste, 2\/3 carte *\/\n    gap: 20px;\n    height: 600px; \/* Hauteur fixe importante ! *\/\n  }<\/p>\n<p>  \/* Si on est sur mobile, on empile *\/\n  @media (max-width: 768px) {\n    .ma-grille {\n      grid-template-columns: 1fr;\n      height: auto;\n    }\n    #maCarteDeLille {\n      height: 400px; \/* Hauteur forc\u00e9e sur mobile *\/\n      order: -1; \/* Mettre la carte au dessus *\/\n    }\n  }<\/p>\n<p>  \/* La liste d\u00e9roulante *\/\n  .ma-liste {\n    overflow-y: auto;\n    padding-right: 10px;\n    height: 100%;\n    max-height: 600px;\n  }<\/p>\n<p>  \/* Carte individuelle *\/\n  .carte-resto {\n    background: white;\n    padding: 15px;\n    margin-bottom: 12px;\n    border-radius: 8px;\n    border: 1px solid #eee;\n    box-shadow: 0 2px 5px rgba(0,0,0,0.05);\n    cursor: pointer;\n  }\n  .carte-resto:hover {\n    border-left: 5px solid #ff6b6b; \/* Couleur au survol *\/\n  }<\/p>\n<p>  \/* La carte map *\/\n  #maCarteDeLille {\n    width: 100%;\n    height: 100%;\n    border-radius: 12px;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n    z-index: 1;\n  }\n<\/style>\n<p><\/head><\/p>\n<p><body><\/p>\n<div id=\"mon-super-container\">\n<div class=\"mes-filtres\">\n    <button class=\"btn-filtre actif\" onclick=\"filtrer('tout', this)\">Tout<\/button><br \/>\n    <button class=\"btn-filtre\" onclick=\"filtrer('Latino', this)\">Latino \ud83c\udf2e<\/button><br \/>\n    <button class=\"btn-filtre\" onclick=\"filtrer('Viande', this)\">Viande \/ BBQ \ud83e\udd69<\/button><br \/>\n    <button class=\"btn-filtre\" onclick=\"filtrer('Sandwich', this)\">Street Food \ud83e\udd56<\/button>\n  <\/div>\n<div class=\"ma-grille\">\n<div class=\"ma-liste\" id=\"injecteur-liste\"><\/div>\n<div id=\"maCarteDeLille\"><\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\n  \/\/ --- VOS DONN\u00c9ES ---\n  const dataRestos = [\n    {\n      nom: \"Beatriz Lille\",\n      lat: 50.6263, lng: 3.0685,\n      cat: \"Latino\",\n      desc: \"Cuisine mexicaine authentique et raffin\u00e9e.\"\n    },\n    {\n      nom: \"Smoki Lille\",\n      lat: 50.6355, lng: 3.0372,\n      cat: \"Viande\",\n      desc: \"Le sp\u00e9cialiste du fumage artisanal am\u00e9ricain.\"\n    },\n    {\n      nom: \"Smokey Banh Mi\",\n      lat: 50.6408, lng: 3.0632,\n      cat: \"Sandwich\",\n      desc: \"Le meilleur Banh Mi (sandwich vietnamien) de Lille.\"\n    },\n    {\n      nom: \"Poyo\",\n      lat: 50.6360, lng: 3.0640,\n      cat: \"Latino\",\n      desc: \"R\u00f4tisserie sud-am\u00e9ricaine (Grand Sc\u00e8ne).\"\n    },\n    {\n      nom: \"Le Gueuleton\",\n      lat: 50.6293, lng: 3.0427,\n      cat: \"Viande\",\n      desc: \"Repaire des bons vivants, viandes et vins.\"\n    }\n  ];<\/p>\n<p>  \/\/ --- LOGIQUE (Chargement diff\u00e9r\u00e9 pour \u00e9viter les bugs WP) ---\n  document.addEventListener(\"DOMContentLoaded\", function() {<\/p>\n<p>    \/\/ 1. Cr\u00e9ation de la carte\n    var map = L.map('maCarteDeLille').setView([50.633, 3.055], 13);<\/p>\n<p>    L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/rastertiles\/voyager\/{z}\/{x}\/{y}{r}.png', {\n      attribution: '&copy; OpenStreetMap &copy; CARTO',\n      maxZoom: 19\n    }).addTo(map);<\/p>\n<p>    var layerGroup = L.layerGroup().addTo(map);<\/p>\n<p>    \/\/ 2. Fonction d'affichage\n    window.afficher = function(liste) {\n      const container = document.getElementById('injecteur-liste');\n      container.innerHTML = \"\";\n      layerGroup.clearLayers();<\/p>\n<p>      liste.forEach(r => {\n        \/\/ Ajout liste\n        let div = document.createElement('div');\n        div.className = 'carte-resto';\n        div.innerHTML = `<\/p>\n<h3>${r.nom}<\/h3>\n<p style=\"margin:0;font-size:0.9em;color:#666\">${r.desc}<\/p>\n<p>`;<\/p>\n<p>        \/\/ Clic sur la liste = Zoom carte\n        div.onclick = () => { \n            map.flyTo([r.lat, r.lng], 16);\n            marker.openPopup();\n        };\n        container.appendChild(div);<\/p>\n<p>        \/\/ Ajout marqueur\n        let marker = L.marker([r.lat, r.lng])\n          .bindPopup(`<b>${r.nom}<\/b><br \/>${r.cat}`);\n        layerGroup.addLayer(marker);\n      });\n    };<\/p>\n<p>    \/\/ 3. Fonction de filtre\n    window.filtrer = function(categorie, btn) {\n      \/\/ Gestion boutons\n      document.querySelectorAll('.btn-filtre').forEach(b => b.classList.remove('actif'));\n      btn.classList.add('actif');<\/p>\n<p>      \/\/ Filtrage\n      if(categorie === 'tout') {\n        window.afficher(dataRestos);\n      } else {\n        window.afficher(dataRestos.filter(r => r.cat === categorie));\n      }\n    };<\/p>\n<p>    \/\/ Lancement initial\n    window.afficher(dataRestos);<\/p>\n<p>    \/\/ Petit fix pour forcer l'affichage de la carte apr\u00e8s chargement\n    setTimeout(function(){ map.invalidateSize(); }, 500);\n  });\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tout Latino \ud83c\udf2e Viande \/ BBQ \ud83e\udd69 Street Food \ud83e\udd56<\/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-164","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gabrielmillon.com\/index.php\/wp-json\/wp\/v2\/pages\/164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gabrielmillon.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gabrielmillon.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gabrielmillon.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gabrielmillon.com\/index.php\/wp-json\/wp\/v2\/comments?post=164"}],"version-history":[{"count":4,"href":"https:\/\/gabrielmillon.com\/index.php\/wp-json\/wp\/v2\/pages\/164\/revisions"}],"predecessor-version":[{"id":168,"href":"https:\/\/gabrielmillon.com\/index.php\/wp-json\/wp\/v2\/pages\/164\/revisions\/168"}],"wp:attachment":[{"href":"https:\/\/gabrielmillon.com\/index.php\/wp-json\/wp\/v2\/media?parent=164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}