{"id":568980,"date":"2026-03-26T15:22:17","date_gmt":"2026-03-26T14:22:17","guid":{"rendered":"https:\/\/hotelclosgalion.fr\/elaia-metadatas\/"},"modified":"2026-03-26T15:22:17","modified_gmt":"2026-03-26T14:22:17","slug":"elaia-metadatas","status":"publish","type":"page","link":"https:\/\/hotelclosgalion.fr\/de\/elaia-metadatas\/","title":{"rendered":"Entdecken Sie in Ihrer Umgebung"},"content":{"rendered":"\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>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n\n<style>\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     BASE \u2014 Layout principal et typographie\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  .em-wrap { font-family: 'Inter', -apple-system, sans-serif !important; color: #0f172a; max-width: 1400px; margin: 0 auto; padding: 0 24px; -webkit-font-smoothing: antialiased; }\n  .em-wrap * { box-sizing: border-box; }\n\n  \/* \u2500\u2500\u2500 Header \u2014 Titre + barre de recherche \u2500\u2500\u2500 *\/\n  .em-header { padding: 40px 0 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }\n  .em-header-title { font-size: 24px !important; font-weight: 800 !important; margin: 0 !important; color: #0f172a; }\n  .em-header-sub { font-size: 14px; color: #64748b; margin: 4px 0 0; }\n\n  \/* \u2500\u2500\u2500 Recherche \u2014 Champ avec ic\u00f4ne loupe \u2500\u2500\u2500 *\/\n  .em-search-wrap { position: relative; width: 280px; }\n  .em-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #94a3b8; pointer-events: none; }\n  .em-search { width: 100% !important; padding: 10px 16px 10px 36px !important; font-size: 14px !important; font-family: inherit; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; background: #fff !important; color: #0f172a; outline: none; }\n  .em-search:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px #3b82f618 !important; }\n  .em-search::placeholder { color: #94a3b8; }\n\n  \/* \u2500\u2500\u2500 Onglets \u2014 Filtrage par cat\u00e9gorie \u2500\u2500\u2500 *\/\n  .em-tabs { display: flex !important; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 24px; scrollbar-width: none; }\n  .em-tabs::-webkit-scrollbar { display: none; }\n  .em-tab { flex-shrink: 0; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; border: 1px solid #e2e8f0; background: #fff; color: #64748b; transition: all 0.15s; font-family: inherit; white-space: nowrap; }\n  .em-tab:hover { border-color: #cbd5e1; }\n  .em-tab.active { background: #3b82f6 !important; color: #fff !important; border-color: #3b82f6 !important; }\n  .em-tab-count { margin-left: 6px; font-size: 12px; opacity: 0.7; }\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     CARTE \u2014 Leaflet + l\u00e9gende + marqueurs\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  .em-map-section { margin-bottom: 24px; }\n  .em-map-wrap { border-radius: 16px; overflow: hidden; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }\n  .em-map { height: 420px; width: 100%; }\n\n  \/* Personnalisation des popups Leaflet *\/\n  .em-map .leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 0; overflow: hidden; }\n  .em-map .leaflet-popup-content { margin: 0; min-width: 200px; }\n  .em-map .leaflet-popup-tip { box-shadow: 0 2px 6px rgba(0,0,0,0.1); }\n  .em-map-popup { padding: 12px 14px; }\n  .em-map-popup-name { font-size: 14px; font-weight: 700; color: #0f172a; margin: 0 0 4px; line-height: 1.3; }\n  .em-map-popup-cat { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin: 0 0 8px; }\n  .em-map-popup-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #3b82f6; cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; }\n  .em-map-popup-btn:hover { text-decoration: underline; }\n\n  \/* L\u00e9gende de la carte *\/\n  .em-map-legend { display: flex; gap: 16px; padding: 10px 16px; background: #fff; border-top: 1px solid #e2e8f0; flex-wrap: wrap; }\n  .em-map-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #64748b; cursor: pointer; transition: opacity 0.15s; }\n  .em-map-legend-item:hover { opacity: 0.7; }\n  .em-map-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(0,0,0,0.08); }\n\n  \/* Bouton toggle carte *\/\n  .em-map-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; color: #64748b; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s; margin-bottom: 16px; }\n  .em-map-toggle:hover { border-color: #3b82f6; color: #3b82f6; }\n  .em-map-toggle.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }\n\n  \/* Marqueurs personnalis\u00e9s SVG *\/\n  .em-marker { transition: transform 0.15s ease; }\n  .em-marker:hover { transform: scale(1.3); z-index: 1000 !important; }\n  .em-marker--active { transform: scale(1.4); z-index: 1000 !important; }\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     LAYOUT \u2014 Sidebar filtres + grille cards\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  .em-layout { display: flex; gap: 24px; }\n  .em-sidebar { flex: 0 0 260px; position: sticky; top: 24px; height: fit-content; }\n  .em-main { flex: 1; min-width: 0; }\n\n  \/* \u2500\u2500\u2500 Filtres lat\u00e9raux \u2500\u2500\u2500 *\/\n  .em-filters { background: #fff; border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }\n  .em-filters-title { font-size: 15px !important; font-weight: 700 !important; margin: 0 0 16px !important; color: #0f172a; }\n  .em-filter-group { margin-bottom: 18px; }\n  .em-filter-group:last-child { margin-bottom: 0; }\n  .em-filter-label { display: block; font-size: 12px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }\n  .em-filter-check { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; }\n  .em-filter-check input[type=\"checkbox\"] { cursor: pointer; accent-color: #3b82f6; width: 15px; height: 15px; }\n  .em-filter-check span { font-size: 13px; color: #64748b; font-weight: 500; }\n  .em-filter-reset { width: 100%; padding: 10px; background: #0f172a; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; margin-top: 16px; }\n  .em-filter-reset:hover { background: #000; }\n\n  \/* \u2500\u2500\u2500 Compteurs \u2500\u2500\u2500 *\/\n  .em-stats { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }\n  .em-stat { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 14px; font-size: 13px; color: #64748b; }\n  .em-stat strong { color: #0f172a; font-weight: 700; margin-left: 4px; }\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     CARDS \u2014 Grille de fiches m\u00e9tadonn\u00e9es\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  .em-cards { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 20px !important; }\n  .em-card { background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; overflow: hidden !important; cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.04); display: block !important; }\n  .em-card:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07) !important; transform: translateY(-2px); border-color: #3b82f6 !important; }\n  .em-card--highlight { box-shadow: 0 0 0 3px #3b82f6 !important; }\n\n  \/* Image de la card *\/\n  .em-card-img-wrap { position: relative; }\n  .em-card-img { width: 100% !important; height: 160px !important; object-fit: cover !important; display: block !important; background: #f1f5f9; }\n  .em-card-placeholder { width: 100%; height: 160px; background: linear-gradient(135deg, #f1f5f9, #e2e8f0); display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 14px; font-weight: 500; }\n  .em-card-badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; backdrop-filter: blur(8px); }\n\n  \/* Badges de cat\u00e9gorie (couleurs par type) *\/\n  .badge-accom { background: rgba(16,185,129,0.9); color: #fff; }\n  .badge-city { background: rgba(59,130,246,0.9); color: #fff; }\n  .badge-activity { background: rgba(168,85,247,0.9); color: #fff; }\n  .badge-event { background: rgba(239,68,68,0.9); color: #fff; }\n  .badge-restaurant { background: rgba(245,158,11,0.9); color: #fff; }\n  .badge-service { background: rgba(99,102,241,0.9); color: #fff; }\n  .badge-default { background: rgba(100,116,139,0.9); color: #fff; }\n\n  \/* Contenu de la card *\/\n  .em-card-body { padding: 16px; }\n  .em-card-title { font-size: 15px !important; font-weight: 700 !important; margin: 0 0 8px !important; color: #0f172a; line-height: 1.3; }\n  .em-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }\n  .em-tag { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; background: #f1f5f9; color: #64748b; }\n  .em-tag-blue { background: #dbeafe; color: #1e40af; }\n  .em-tag-green { background: #d1fae5; color: #065f46; }\n  .em-tag-orange { background: #fed7aa; color: #92400e; }\n  .em-tag-purple { background: #ede9fe; color: #6b21a8; }\n\n  \/* Champs r\u00e9sum\u00e9s visibles sur la card *\/\n  .em-card-fields { margin-bottom: 10px; }\n  .em-card-field { display: flex; gap: 6px; font-size: 12px; margin-bottom: 4px; }\n  .em-card-field-label { color: #94a3b8; flex-shrink: 0; }\n  .em-card-field-value { color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n  \/* Pied de card *\/\n  .em-card-footer { padding-top: 10px; border-top: 1px solid #e2e8f0; display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #3b82f6; }\n  .em-card-footer svg { width: 14px; height: 14px; transition: transform 0.15s; }\n  .em-card:hover .em-card-footer svg { transform: translateX(2px); }\n\n  \/* \u00c9tat vide *\/\n  .em-empty { text-align: center; padding: 60px 20px; color: #64748b; }\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     MODAL \u2014 D\u00e9tail d'une fiche\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  .em-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; animation: emFadeIn 0.2s ease; }\n  @keyframes emFadeIn { from { opacity: 0 } to { opacity: 1 } }\n  .em-modal { background: #fff; border-radius: 16px; max-width: 640px; width: 100%; max-height: 85vh; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08); display: flex; flex-direction: column; animation: emSlideUp 0.25s ease; }\n  @keyframes emSlideUp { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }\n\n  \/* Modal avec image *\/\n  .em-modal-img-wrap { position: relative; flex-shrink: 0; }\n  .em-modal-img { width: 100%; height: 220px; object-fit: cover; display: block; }\n  .em-modal-img-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.4), transparent); }\n  .em-modal-img-info { position: absolute; bottom: 16px; left: 20px; right: 20px; }\n  .em-modal-img-cat { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.8); margin: 0 0 4px; }\n  .em-modal-img-title { font-size: 20px; font-weight: 800; color: #fff; margin: 0; }\n  .em-modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.4); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; }\n  .em-modal-close:hover { background: rgba(0,0,0,0.6); }\n\n  \/* Modal sans image *\/\n  .em-modal-header-noimg { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #e2e8f0; }\n  .em-modal-header-noimg-cat { font-size: 12px; color: #94a3b8; margin: 0 0 2px; }\n  .em-modal-header-noimg-title { font-size: 18px; font-weight: 800; color: #0f172a; margin: 0; }\n  .em-modal-close-noimg { width: 32px; height: 32px; border-radius: 8px; border: none; cursor: pointer; color: #94a3b8; background: none; display: flex; align-items: center; justify-content: center; font-size: 16px; }\n  .em-modal-close-noimg:hover { background: #f1f5f9; color: #0f172a; }\n\n  \/* Corps et entr\u00e9es de la modal *\/\n  .em-modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }\n  .em-modal-entry { margin-bottom: 16px; }\n  .em-modal-entry-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; margin: 0 0 4px; }\n  .em-modal-entry-value { font-size: 14px; color: #0f172a; margin: 0; line-height: 1.5; white-space: pre-line; }\n\n  \/* Pied de modal *\/\n  .em-modal-footer { padding: 16px 24px; border-top: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; }\n  .em-modal-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #3b82f6; text-decoration: none; }\n  .em-modal-link:hover { opacity: 0.8; }\n  .em-modal-close-btn { padding: 8px 16px; font-size: 14px; font-weight: 500; color: #64748b; background: none; border: none; cursor: pointer; font-family: inherit; }\n  .em-modal-close-btn:hover { color: #0f172a; }\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     RESPONSIVE\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  @media (max-width: 1024px) {\n    .em-layout { flex-direction: column; }\n    .em-sidebar { position: static; flex-basis: auto; }\n  }\n\n  @media (max-width: 720px) {\n    .em-wrap { padding: 0 12px; }\n    .em-header { flex-direction: column; align-items: stretch; padding: 24px 0 16px; gap: 12px; }\n    .em-header-title { font-size: 20px !important; }\n    .em-search-wrap { width: 100%; }\n    .em-tabs { gap: 6px; margin-bottom: 16px; }\n    .em-tab { padding: 6px 12px; font-size: 13px; }\n\n    \/* Carte mobile *\/\n    .em-map { height: 280px; }\n    .em-map-wrap { border-radius: 12px; }\n    .em-map-legend { gap: 10px; padding: 8px 12px; }\n    .em-map-legend-item { font-size: 11px; }\n\n    \/* Sidebar collapsible sur mobile *\/\n    .em-sidebar { order: -1; }\n    .em-filters { padding: 14px; }\n    .em-filters-title {\n      font-size: 14px !important; margin-bottom: 0 !important;\n      cursor: pointer; display: flex; align-items: center; justify-content: space-between;\n    }\n    .em-filters-title::after { content: '\u25be'; font-size: 12px; color: #94a3b8; transition: transform 0.2s; }\n    .em-filters.collapsed .em-filters-title::after { transform: rotate(-90deg); }\n    .em-filters.collapsed .em-filter-group,\n    .em-filters.collapsed .em-filter-reset { display: none; }\n\n    \/* Cards mobile *\/\n    .em-cards { grid-template-columns: 1fr !important; gap: 14px !important; }\n    .em-card-img { height: 140px !important; }\n    .em-card-body { padding: 12px; }\n    .em-card-title { font-size: 14px !important; }\n    .em-card-tags { gap: 4px; }\n    .em-tag { font-size: 10px; padding: 2px 6px; }\n\n    \/* Compteurs compacts *\/\n    .em-stats { gap: 8px; margin-bottom: 14px; }\n    .em-stat { padding: 6px 10px; font-size: 12px; }\n\n    \/* Modal \u2192 bottom sheet sur mobile *\/\n    .em-modal-overlay { align-items: flex-end; padding: 0; }\n    .em-modal { border-radius: 16px 16px 0 0; max-height: 90vh; max-width: 100%; animation: emSlideUpMobile 0.3s cubic-bezier(0.22,1,0.36,1); }\n    @keyframes emSlideUpMobile { from { transform: translateY(100%); } to { transform: translateY(0); } }\n    .em-modal-img { height: 180px; }\n    .em-modal-body { padding: 16px; }\n    .em-modal-footer { padding: 12px 16px; }\n    .em-modal-entry-value { font-size: 13px; }\n  }\n\n  @media (max-width: 380px) {\n    .em-map { height: 220px; }\n    .em-card-img { height: 120px !important; }\n    .em-card-fields { display: none; }\n  }\n<\/style>\n\n\n\n<script type=\"application\/ld+json\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"ItemList\",\"name\":\"Top 5 des villes et villages \u00e0 visiter autour du camping Clos Galion (Saint-Martin-de-Rr\u00e9)\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"Thing\",\"name\":\"La Flotte\",\"description\":\"Village portuaire r\u00e9put\u00e9 pour son charme maritime, ses ruelles et son patrimoine. C\u2019est l\u2019une des communes les plus agr\u00e9ables \u00e0 visiter autour de Saint-Martin-de-R\u00e9.\",\"image\":\"https:\/\/elaia-public.s3.fr-par.scw.cloud\/metadata_images\/image_69dbe8d0e8689.jpeg\",\"geo\":{\"@type\":\"GeoCoordinates\",\"latitude\":46.1886,\"longitude\":-1.3251},\"additionalProperty\":[{\"@type\":\"PropertyValue\",\"name\":\"Cat\u00e9gorie \/ Type\",\"value\":\"Village\"},{\"@type\":\"PropertyValue\",\"name\":\"Localisation\",\"value\":\"\u00cele de R\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France\"},{\"@type\":\"PropertyValue\",\"name\":\"Distance depuis Clos Galion (km)\",\"value\":\"3.7\"},{\"@type\":\"PropertyValue\",\"name\":\"Points d'int\u00e9r\u00eat\",\"value\":\"Port de plaisance, march\u00e9 m\u00e9di\u00e9val, \u00e9glise Sainte-Catherine, Platin Museum, ruelles du centre ancien\"},{\"@type\":\"PropertyValue\",\"name\":\"P\u00e9riodes recommand\u00e9es\",\"value\":\"Printemps, \u00e9t\u00e9, d\u00e9but d\u2019automne\"},{\"@type\":\"PropertyValue\",\"name\":\"Tags\",\"value\":\"village, port, patrimoine, plage, \u00eele de R\u00e9\"}]}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"Thing\",\"name\":\"Le Bois-Plage-en-R\u00e9\",\"description\":\"Commune de la c\u00f4te sud de l\u2019\u00eele connue pour ses longues plages de sable, ses dunes et son ambiance baln\u00e9aire.\",\"image\":\"https:\/\/elaia-public.s3.fr-par.scw.cloud\/metadata_images\/image_69dbe942182e1.jpg\",\"geo\":{\"@type\":\"GeoCoordinates\",\"latitude\":46.1872222,\"longitude\":-1.3919444},\"additionalProperty\":[{\"@type\":\"PropertyValue\",\"name\":\"Cat\u00e9gorie \/ Type\",\"value\":\"Village\"},{\"@type\":\"PropertyValue\",\"name\":\"Localisation\",\"value\":\"\u00cele de R\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France\"},{\"@type\":\"PropertyValue\",\"name\":\"Distance depuis Clos Galion (km)\",\"value\":\"3\"},{\"@type\":\"PropertyValue\",\"name\":\"Points d'int\u00e9r\u00eat\",\"value\":\"Plages sur plusieurs kilom\u00e8tres, march\u00e9 couvert, coop\u00e9rative vinicole, moulin de Bellerre, tour Malakoff\"},{\"@type\":\"PropertyValue\",\"name\":\"P\u00e9riodes recommand\u00e9es\",\"value\":\"Printemps, \u00e9t\u00e9, septembre\"},{\"@type\":\"PropertyValue\",\"name\":\"Tags\",\"value\":\"village, plage, dunes, march\u00e9, baignade\"}]}},{\"@type\":\"ListItem\",\"position\":3,\"item\":{\"@type\":\"Thing\",\"name\":\"La Couarde-sur-Mer\",\"description\":\"Village central de l\u2019\u00eele, entre plages et marais, appr\u00e9ci\u00e9 pour son atmosph\u00e8re paisible et sa position id\u00e9ale pour rayonner sur R\u00e9.\",\"image\":\"https:\/\/elaia-public.s3.fr-par.scw.cloud\/metadata_images\/image_69dbe9e71f7cc.jpeg\",\"geo\":{\"@type\":\"GeoCoordinates\",\"latitude\":46.1955556,\"longitude\":-1.4241667},\"additionalProperty\":[{\"@type\":\"PropertyValue\",\"name\":\"Cat\u00e9gorie \/ Type\",\"value\":\"Village\"},{\"@type\":\"PropertyValue\",\"name\":\"Localisation\",\"value\":\"\u00cele de R\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France\"},{\"@type\":\"PropertyValue\",\"name\":\"Distance depuis Clos Galion (km)\",\"value\":\"4.7\"},{\"@type\":\"PropertyValue\",\"name\":\"Points d'int\u00e9r\u00eat\",\"value\":\"Plages, port du Goisil, centre-bourg, pistes cyclables, marais et paysages littoraux\"},{\"@type\":\"PropertyValue\",\"name\":\"P\u00e9riodes recommand\u00e9es\",\"value\":\"Printemps, \u00e9t\u00e9, d\u00e9but d\u2019automne\"},{\"@type\":\"PropertyValue\",\"name\":\"Tags\",\"value\":\"village, plage, marais, v\u00e9lo, \u00eele de R\u00e9\"}]}},{\"@type\":\"ListItem\",\"position\":4,\"item\":{\"@type\":\"Thing\",\"name\":\"Sainte-Marie-de-R\u00e9\",\"description\":\"Village au caract\u00e8re plus rural, situ\u00e9 sur la c\u00f4te sud de l\u2019\u00eele, avec un patrimoine religieux et une ambiance authentique.\",\"image\":\"https:\/\/elaia-public.s3.fr-par.scw.cloud\/metadata_images\/image_69dbeace4782f.jpeg\",\"geo\":{\"@type\":\"GeoCoordinates\",\"latitude\":46.1506,\"longitude\":-1.3097},\"additionalProperty\":[{\"@type\":\"PropertyValue\",\"name\":\"Cat\u00e9gorie \/ Type\",\"value\":\"Village\"},{\"@type\":\"PropertyValue\",\"name\":\"Localisation\",\"value\":\"\u00cele de R\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France\"},{\"@type\":\"PropertyValue\",\"name\":\"Distance depuis Clos Galion (km)\",\"value\":\"7.6\"},{\"@type\":\"PropertyValue\",\"name\":\"Points d'int\u00e9r\u00eat\",\"value\":\"\u00c9glise Notre-Dame-de-l\u2019Assomption, chapelle Saint-Sauveur \u00e0 La Noue, plage, sentiers c\u00f4tiers\"},{\"@type\":\"PropertyValue\",\"name\":\"P\u00e9riodes recommand\u00e9es\",\"value\":\"Printemps, \u00e9t\u00e9, automne\"},{\"@type\":\"PropertyValue\",\"name\":\"Tags\",\"value\":\"village, patrimoine, c\u00f4te sud, nature, authenticit\u00e9\"}]}},{\"@type\":\"ListItem\",\"position\":5,\"item\":{\"@type\":\"Thing\",\"name\":\"Rivedoux-Plage\",\"description\":\"Porte d\u2019entr\u00e9e de l\u2019\u00eele de R\u00e9, connue pour son pont, son port et ses plages. C\u2019est une \u00e9tape tr\u00e8s pratique et agr\u00e9able \u00e0 proximit\u00e9 de Saint-Martin-de-R\u00e9.\",\"image\":\"https:\/\/elaia-public.s3.fr-par.scw.cloud\/metadata_images\/image_69dbebf2f421a.jpeg\",\"geo\":{\"@type\":\"GeoCoordinates\",\"latitude\":46.1603,\"longitude\":-1.2744},\"additionalProperty\":[{\"@type\":\"PropertyValue\",\"name\":\"Cat\u00e9gorie \/ Type\",\"value\":\"Village\"},{\"@type\":\"PropertyValue\",\"name\":\"Localisation\",\"value\":\"\u00cele de R\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France\"},{\"@type\":\"PropertyValue\",\"name\":\"Distance depuis Clos Galion (km)\",\"value\":\"8.7\"},{\"@type\":\"PropertyValue\",\"name\":\"Points d'int\u00e9r\u00eat\",\"value\":\"Pont de l\u2019\u00eele de R\u00e9, port, plage de Sablanceau, redoute de Rivedoux, moulin \u00e0 mar\u00e9e\"},{\"@type\":\"PropertyValue\",\"name\":\"P\u00e9riodes recommand\u00e9es\",\"value\":\"Printemps, \u00e9t\u00e9, d\u00e9but d\u2019automne\"},{\"@type\":\"PropertyValue\",\"name\":\"Tags\",\"value\":\"village, pont, plage, port, entr\u00e9e de l\u2019\u00eele\"}]}}]}]}<\/script>\n\n\n<!-- Injection des labels pour le JS (modal) -->\n<script>var emFieldLabels = {\"name\":\"Nom\",\"category_type\":\"Cat\\u00e9gorie \\\/ Type\",\"location\":\"Localisation\",\"description\":\"Description\",\"distance_km\":\"Distance depuis Clos Galion (km)\",\"points_d_interet\":\"Points d'int\\u00e9r\\u00eat\",\"saison\":\"P\\u00e9riodes recommand\\u00e9es\",\"tags\":\"Tags\",\"link\":\"Lien\"};<\/script>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     HTML \u2014 Interface principale\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<div class=\"em-wrap\">\n\n  <!-- \u2500\u2500\u2500 Header : titre + recherche \u2500\u2500\u2500 -->\n  <div class=\"em-header\">\n    <div>\n      <h1 class=\"em-header-title\">D\u00e9couvrez autour de vous<\/h1>\n      <p class=\"em-header-sub\">5 fiche(s) dans 1 cat\u00e9gorie(s)<\/p>\n    <\/div>\n    <div class=\"em-search-wrap\">\n      <svg class=\"em-search-icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"><\/path><\/svg>\n      <input type=\"text\" class=\"em-search\" id=\"em-search\" placeholder=\"Rechercher une fiche...\">\n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500\u2500 Onglets de cat\u00e9gories (affich\u00e9s si > 1 cat\u00e9gorie) \u2500\u2500\u2500 -->\n  \n  <!-- \u2500\u2500\u2500 Carte interactive (affich\u00e9e si des points GPS existent) \u2500\u2500\u2500 -->\n    <div class=\"em-map-section\">\n    <button class=\"em-map-toggle active\" id=\"em-map-toggle\">\ud83d\udccd Carte<\/button>\n    <div class=\"em-map-wrap\" id=\"em-map-wrap\">\n      <div id=\"em-map\" class=\"em-map\"><\/div>\n      <div class=\"em-map-legend\">\n                  <div class=\"em-map-legend-item\"><span class=\"em-map-legend-dot\" style=\"background:#0891b2;\"><\/span> Top 5 des villes et villages \u00e0 visiter autour du camping Clos Galion (Saint-Martin-de-Rr\u00e9)<\/div>\n              <\/div>\n    <\/div>\n  <\/div>\n  \n  <!-- \u2500\u2500\u2500 Layout principal : sidebar filtres + grille de cards \u2500\u2500\u2500 -->\n  <div class=\"em-layout\">\n\n    <!-- Sidebar \u2014 Filtres par type et \u00e9quipements -->\n    <aside class=\"em-sidebar\">\n      <div class=\"em-filters\">\n        <h3 class=\"em-filters-title\">Filtres<\/h3>\n        <div class=\"em-filter-group\">\n          <label class=\"em-filter-label\">Type<\/label>\n                      <label class=\"em-filter-check\"><input type=\"checkbox\" value=\"top-5-des-villes-et-villages-a-visiter-autour-du-camping-clos-galion-saint-martin-de-rre\" class=\"em-filter-type\" checked><span>Top 5 des villes et villages \u00e0 visiter autour du camping Clos Galion (Saint-Martin-de-Rr\u00e9)<\/span><\/label>\n                  <\/div>\n                <button class=\"em-filter-reset\" id=\"em-reset-filters\">R\u00e9initialiser<\/button>\n      <\/div>\n    <\/aside>\n\n    <!-- Contenu principal \u2014 Compteurs + grille de cards -->\n    <main class=\"em-main\">\n      <div class=\"em-stats\">\n        <div class=\"em-stat\">Total : <strong id=\"em-stat-total\">5<\/strong><\/div>\n        <div class=\"em-stat\">Affich\u00e9s : <strong id=\"em-stat-visible\">5<\/strong><\/div>\n      <\/div>\n\n      <div class=\"em-cards\" id=\"em-cards\">\n                  <article class=\"em-card\"\n            data-type=\"top-5-des-villes-et-villages-a-visiter-autour-du-camping-clos-galion-saint-martin-de-rre\"\n            data-features=\"\"\n            data-name=\"la flotte\"\n            data-json=\"{&quot;name&quot;:&quot;La Flotte&quot;,&quot;image&quot;:&quot;https:\\\/\\\/elaia-public.s3.fr-par.scw.cloud\\\/metadata_images\\\/image_69dbe8d0e8689.jpeg&quot;,&quot;link&quot;:&quot;&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;La Flotte&quot;,&quot;category_type&quot;:&quot;Village&quot;,&quot;location&quot;:&quot;\\u00cele de R\\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France&quot;,&quot;description&quot;:&quot;Village portuaire r\\u00e9put\\u00e9 pour son charme maritime, ses ruelles et son patrimoine. C\\u2019est l\\u2019une des communes les plus agr\\u00e9ables \\u00e0 visiter autour de Saint-Martin-de-R\\u00e9.&quot;,&quot;distance_km&quot;:3.7,&quot;points_d_interet&quot;:&quot;Port de plaisance, march\\u00e9 m\\u00e9di\\u00e9val, \\u00e9glise Sainte-Catherine, Platin Museum, ruelles du centre ancien&quot;,&quot;saison&quot;:&quot;Printemps, \\u00e9t\\u00e9, d\\u00e9but d\\u2019automne&quot;,&quot;tags&quot;:&quot;village, port, patrimoine, plage, \\u00eele de R\\u00e9&quot;,&quot;link&quot;:&quot;&quot;,&quot;latitude&quot;:&quot;46.1886000&quot;,&quot;longitude&quot;:&quot;-1.3251000&quot;,&quot;image&quot;:&quot;https:\\\/\\\/elaia-public.s3.fr-par.scw.cloud\\\/metadata_images\\\/image_69dbe8d0e8689.jpeg&quot;},&quot;category&quot;:&quot;Top 5 des villes et villages \\u00e0 visiter autour du camping Clos Galion (Saint-Martin-de-Rr\\u00e9)&quot;}\">\n\n            <!-- Image + badge cat\u00e9gorie -->\n            <div class=\"em-card-img-wrap\">\n                              <img decoding=\"async\" class=\"em-card-img\" src=\"https:\/\/elaia-public.s3.fr-par.scw.cloud\/metadata_images\/image_69dbe8d0e8689.jpeg\" alt=\"La Flotte\" loading=\"lazy\" onerror=\"this.style.display='none';this.nextElementSibling.style.display='flex';\">\n                <div class=\"em-card-placeholder\" style=\"display:none;\">\ud83d\udcf7 Image indisponible<\/div>\n                            <span class=\"em-card-badge badge-default\">Top 5 des villes et villages \u00e0 visiter autour du camping Clos Galion (Saint-Martin-de-Rr\u00e9)<\/span>\n            <\/div>\n\n            <!-- Contenu de la card -->\n            <div class=\"em-card-body\">\n              <h3 class=\"em-card-title\">La Flotte<\/h3>\n\n              <!-- Tags r\u00e9sum\u00e9s (max 4) -->\n              <div class=\"em-card-tags\">\n                                    <span class=\"em-tag em-tag-purple\">Village<\/span>\n                                              <\/div>\n\n              <!-- Champs suppl\u00e9mentaires (max 3) -->\n              <div class=\"em-card-fields\">\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Localisation :<\/span>\n                    <span class=\"em-card-field-value\">\u00cele de R\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France<\/span>\n                  <\/div>\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Distance depuis Clos Galion (km) :<\/span>\n                    <span class=\"em-card-field-value\">3.7<\/span>\n                  <\/div>\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Points d&#039;int\u00e9r\u00eat :<\/span>\n                    <span class=\"em-card-field-value\">Port de plaisance, march\u00e9 m\u00e9di\u00e9val, \u00e9glise Sainte-Catherine,<\/span>\n                  <\/div>\n                              <\/div>\n\n              <!-- Lien vers le d\u00e9tail -->\n              <div class=\"em-card-footer\">\n                <span>Voir le d\u00e9tail<\/span>\n                <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3\"><\/path><\/svg>\n              <\/div>\n            <\/div>\n          <\/article>\n                  <article class=\"em-card\"\n            data-type=\"top-5-des-villes-et-villages-a-visiter-autour-du-camping-clos-galion-saint-martin-de-rre\"\n            data-features=\"\"\n            data-name=\"le bois-plage-en-r\u00e9\"\n            data-json=\"{&quot;name&quot;:&quot;Le Bois-Plage-en-R\\u00e9&quot;,&quot;image&quot;:&quot;https:\\\/\\\/elaia-public.s3.fr-par.scw.cloud\\\/metadata_images\\\/image_69dbe942182e1.jpg&quot;,&quot;link&quot;:&quot;&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;Le Bois-Plage-en-R\\u00e9&quot;,&quot;category_type&quot;:&quot;Village&quot;,&quot;location&quot;:&quot;\\u00cele de R\\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France&quot;,&quot;description&quot;:&quot;Commune de la c\\u00f4te sud de l\\u2019\\u00eele connue pour ses longues plages de sable, ses dunes et son ambiance baln\\u00e9aire.&quot;,&quot;distance_km&quot;:3,&quot;points_d_interet&quot;:&quot;Plages sur plusieurs kilom\\u00e8tres, march\\u00e9 couvert, coop\\u00e9rative vinicole, moulin de Bellerre, tour Malakoff&quot;,&quot;saison&quot;:&quot;Printemps, \\u00e9t\\u00e9, septembre&quot;,&quot;tags&quot;:&quot;village, plage, dunes, march\\u00e9, baignade&quot;,&quot;link&quot;:&quot;&quot;,&quot;latitude&quot;:&quot;46.1872222&quot;,&quot;longitude&quot;:&quot;-1.3919444&quot;,&quot;image&quot;:&quot;https:\\\/\\\/elaia-public.s3.fr-par.scw.cloud\\\/metadata_images\\\/image_69dbe942182e1.jpg&quot;},&quot;category&quot;:&quot;Top 5 des villes et villages \\u00e0 visiter autour du camping Clos Galion (Saint-Martin-de-Rr\\u00e9)&quot;}\">\n\n            <!-- Image + badge cat\u00e9gorie -->\n            <div class=\"em-card-img-wrap\">\n                              <img decoding=\"async\" class=\"em-card-img\" src=\"https:\/\/elaia-public.s3.fr-par.scw.cloud\/metadata_images\/image_69dbe942182e1.jpg\" alt=\"Le Bois-Plage-en-R\u00e9\" loading=\"lazy\" onerror=\"this.style.display='none';this.nextElementSibling.style.display='flex';\">\n                <div class=\"em-card-placeholder\" style=\"display:none;\">\ud83d\udcf7 Image indisponible<\/div>\n                            <span class=\"em-card-badge badge-default\">Top 5 des villes et villages \u00e0 visiter autour du camping Clos Galion (Saint-Martin-de-Rr\u00e9)<\/span>\n            <\/div>\n\n            <!-- Contenu de la card -->\n            <div class=\"em-card-body\">\n              <h3 class=\"em-card-title\">Le Bois-Plage-en-R\u00e9<\/h3>\n\n              <!-- Tags r\u00e9sum\u00e9s (max 4) -->\n              <div class=\"em-card-tags\">\n                                    <span class=\"em-tag em-tag-purple\">Village<\/span>\n                                              <\/div>\n\n              <!-- Champs suppl\u00e9mentaires (max 3) -->\n              <div class=\"em-card-fields\">\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Localisation :<\/span>\n                    <span class=\"em-card-field-value\">\u00cele de R\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France<\/span>\n                  <\/div>\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Distance depuis Clos Galion (km) :<\/span>\n                    <span class=\"em-card-field-value\">3<\/span>\n                  <\/div>\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Points d&#039;int\u00e9r\u00eat :<\/span>\n                    <span class=\"em-card-field-value\">Plages sur plusieurs kilom\u00e8tres, march\u00e9 couvert, coop\u00e9rative<\/span>\n                  <\/div>\n                              <\/div>\n\n              <!-- Lien vers le d\u00e9tail -->\n              <div class=\"em-card-footer\">\n                <span>Voir le d\u00e9tail<\/span>\n                <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3\"><\/path><\/svg>\n              <\/div>\n            <\/div>\n          <\/article>\n                  <article class=\"em-card\"\n            data-type=\"top-5-des-villes-et-villages-a-visiter-autour-du-camping-clos-galion-saint-martin-de-rre\"\n            data-features=\"\"\n            data-name=\"la couarde-sur-mer\"\n            data-json=\"{&quot;name&quot;:&quot;La Couarde-sur-Mer&quot;,&quot;image&quot;:&quot;https:\\\/\\\/elaia-public.s3.fr-par.scw.cloud\\\/metadata_images\\\/image_69dbe9e71f7cc.jpeg&quot;,&quot;link&quot;:&quot;&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;La Couarde-sur-Mer&quot;,&quot;category_type&quot;:&quot;Village&quot;,&quot;location&quot;:&quot;\\u00cele de R\\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France&quot;,&quot;description&quot;:&quot;Village central de l\\u2019\\u00eele, entre plages et marais, appr\\u00e9ci\\u00e9 pour son atmosph\\u00e8re paisible et sa position id\\u00e9ale pour rayonner sur R\\u00e9.&quot;,&quot;distance_km&quot;:4.7,&quot;points_d_interet&quot;:&quot;Plages, port du Goisil, centre-bourg, pistes cyclables, marais et paysages littoraux&quot;,&quot;saison&quot;:&quot;Printemps, \\u00e9t\\u00e9, d\\u00e9but d\\u2019automne&quot;,&quot;tags&quot;:&quot;village, plage, marais, v\\u00e9lo, \\u00eele de R\\u00e9&quot;,&quot;link&quot;:&quot;&quot;,&quot;latitude&quot;:&quot;46.1955556&quot;,&quot;longitude&quot;:&quot;-1.4241667&quot;,&quot;image&quot;:&quot;https:\\\/\\\/elaia-public.s3.fr-par.scw.cloud\\\/metadata_images\\\/image_69dbe9e71f7cc.jpeg&quot;},&quot;category&quot;:&quot;Top 5 des villes et villages \\u00e0 visiter autour du camping Clos Galion (Saint-Martin-de-Rr\\u00e9)&quot;}\">\n\n            <!-- Image + badge cat\u00e9gorie -->\n            <div class=\"em-card-img-wrap\">\n                              <img decoding=\"async\" class=\"em-card-img\" src=\"https:\/\/elaia-public.s3.fr-par.scw.cloud\/metadata_images\/image_69dbe9e71f7cc.jpeg\" alt=\"La Couarde-sur-Mer\" loading=\"lazy\" onerror=\"this.style.display='none';this.nextElementSibling.style.display='flex';\">\n                <div class=\"em-card-placeholder\" style=\"display:none;\">\ud83d\udcf7 Image indisponible<\/div>\n                            <span class=\"em-card-badge badge-default\">Top 5 des villes et villages \u00e0 visiter autour du camping Clos Galion (Saint-Martin-de-Rr\u00e9)<\/span>\n            <\/div>\n\n            <!-- Contenu de la card -->\n            <div class=\"em-card-body\">\n              <h3 class=\"em-card-title\">La Couarde-sur-Mer<\/h3>\n\n              <!-- Tags r\u00e9sum\u00e9s (max 4) -->\n              <div class=\"em-card-tags\">\n                                    <span class=\"em-tag em-tag-purple\">Village<\/span>\n                                              <\/div>\n\n              <!-- Champs suppl\u00e9mentaires (max 3) -->\n              <div class=\"em-card-fields\">\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Localisation :<\/span>\n                    <span class=\"em-card-field-value\">\u00cele de R\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France<\/span>\n                  <\/div>\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Distance depuis Clos Galion (km) :<\/span>\n                    <span class=\"em-card-field-value\">4.7<\/span>\n                  <\/div>\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Points d&#039;int\u00e9r\u00eat :<\/span>\n                    <span class=\"em-card-field-value\">Plages, port du Goisil, centre-bourg, pistes cyclables, mara<\/span>\n                  <\/div>\n                              <\/div>\n\n              <!-- Lien vers le d\u00e9tail -->\n              <div class=\"em-card-footer\">\n                <span>Voir le d\u00e9tail<\/span>\n                <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3\"><\/path><\/svg>\n              <\/div>\n            <\/div>\n          <\/article>\n                  <article class=\"em-card\"\n            data-type=\"top-5-des-villes-et-villages-a-visiter-autour-du-camping-clos-galion-saint-martin-de-rre\"\n            data-features=\"\"\n            data-name=\"sainte-marie-de-r\u00e9\"\n            data-json=\"{&quot;name&quot;:&quot;Sainte-Marie-de-R\\u00e9&quot;,&quot;image&quot;:&quot;https:\\\/\\\/elaia-public.s3.fr-par.scw.cloud\\\/metadata_images\\\/image_69dbeace4782f.jpeg&quot;,&quot;link&quot;:&quot;&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;Sainte-Marie-de-R\\u00e9&quot;,&quot;category_type&quot;:&quot;Village&quot;,&quot;location&quot;:&quot;\\u00cele de R\\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France&quot;,&quot;description&quot;:&quot;Village au caract\\u00e8re plus rural, situ\\u00e9 sur la c\\u00f4te sud de l\\u2019\\u00eele, avec un patrimoine religieux et une ambiance authentique.&quot;,&quot;distance_km&quot;:7.6,&quot;points_d_interet&quot;:&quot;\\u00c9glise Notre-Dame-de-l\\u2019Assomption, chapelle Saint-Sauveur \\u00e0 La Noue, plage, sentiers c\\u00f4tiers&quot;,&quot;saison&quot;:&quot;Printemps, \\u00e9t\\u00e9, automne&quot;,&quot;tags&quot;:&quot;village, patrimoine, c\\u00f4te sud, nature, authenticit\\u00e9&quot;,&quot;link&quot;:&quot;&quot;,&quot;latitude&quot;:&quot;46.1506000&quot;,&quot;longitude&quot;:&quot;-1.3097000&quot;,&quot;image&quot;:&quot;https:\\\/\\\/elaia-public.s3.fr-par.scw.cloud\\\/metadata_images\\\/image_69dbeace4782f.jpeg&quot;},&quot;category&quot;:&quot;Top 5 des villes et villages \\u00e0 visiter autour du camping Clos Galion (Saint-Martin-de-Rr\\u00e9)&quot;}\">\n\n            <!-- Image + badge cat\u00e9gorie -->\n            <div class=\"em-card-img-wrap\">\n                              <img decoding=\"async\" class=\"em-card-img\" src=\"https:\/\/elaia-public.s3.fr-par.scw.cloud\/metadata_images\/image_69dbeace4782f.jpeg\" alt=\"Sainte-Marie-de-R\u00e9\" loading=\"lazy\" onerror=\"this.style.display='none';this.nextElementSibling.style.display='flex';\">\n                <div class=\"em-card-placeholder\" style=\"display:none;\">\ud83d\udcf7 Image indisponible<\/div>\n                            <span class=\"em-card-badge badge-default\">Top 5 des villes et villages \u00e0 visiter autour du camping Clos Galion (Saint-Martin-de-Rr\u00e9)<\/span>\n            <\/div>\n\n            <!-- Contenu de la card -->\n            <div class=\"em-card-body\">\n              <h3 class=\"em-card-title\">Sainte-Marie-de-R\u00e9<\/h3>\n\n              <!-- Tags r\u00e9sum\u00e9s (max 4) -->\n              <div class=\"em-card-tags\">\n                                    <span class=\"em-tag em-tag-purple\">Village<\/span>\n                                              <\/div>\n\n              <!-- Champs suppl\u00e9mentaires (max 3) -->\n              <div class=\"em-card-fields\">\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Localisation :<\/span>\n                    <span class=\"em-card-field-value\">\u00cele de R\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France<\/span>\n                  <\/div>\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Distance depuis Clos Galion (km) :<\/span>\n                    <span class=\"em-card-field-value\">7.6<\/span>\n                  <\/div>\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Points d&#039;int\u00e9r\u00eat :<\/span>\n                    <span class=\"em-card-field-value\">\u00c9glise Notre-Dame-de-l\u2019Assomption, chapelle Saint-Sauveur \u00e0 <\/span>\n                  <\/div>\n                              <\/div>\n\n              <!-- Lien vers le d\u00e9tail -->\n              <div class=\"em-card-footer\">\n                <span>Voir le d\u00e9tail<\/span>\n                <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3\"><\/path><\/svg>\n              <\/div>\n            <\/div>\n          <\/article>\n                  <article class=\"em-card\"\n            data-type=\"top-5-des-villes-et-villages-a-visiter-autour-du-camping-clos-galion-saint-martin-de-rre\"\n            data-features=\"\"\n            data-name=\"rivedoux-plage\"\n            data-json=\"{&quot;name&quot;:&quot;Rivedoux-Plage&quot;,&quot;image&quot;:&quot;https:\\\/\\\/elaia-public.s3.fr-par.scw.cloud\\\/metadata_images\\\/image_69dbebf2f421a.jpeg&quot;,&quot;link&quot;:&quot;&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;Rivedoux-Plage&quot;,&quot;category_type&quot;:&quot;Village&quot;,&quot;location&quot;:&quot;\\u00cele de R\\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France&quot;,&quot;description&quot;:&quot;Porte d\\u2019entr\\u00e9e de l\\u2019\\u00eele de R\\u00e9, connue pour son pont, son port et ses plages. C\\u2019est une \\u00e9tape tr\\u00e8s pratique et agr\\u00e9able \\u00e0 proximit\\u00e9 de Saint-Martin-de-R\\u00e9.&quot;,&quot;distance_km&quot;:8.7,&quot;points_d_interet&quot;:&quot;Pont de l\\u2019\\u00eele de R\\u00e9, port, plage de Sablanceau, redoute de Rivedoux, moulin \\u00e0 mar\\u00e9e&quot;,&quot;saison&quot;:&quot;Printemps, \\u00e9t\\u00e9, d\\u00e9but d\\u2019automne&quot;,&quot;tags&quot;:&quot;village, pont, plage, port, entr\\u00e9e de l\\u2019\\u00eele&quot;,&quot;link&quot;:&quot;&quot;,&quot;latitude&quot;:&quot;46.1603000&quot;,&quot;longitude&quot;:&quot;-1.2744000&quot;,&quot;image&quot;:&quot;https:\\\/\\\/elaia-public.s3.fr-par.scw.cloud\\\/metadata_images\\\/image_69dbebf2f421a.jpeg&quot;},&quot;category&quot;:&quot;Top 5 des villes et villages \\u00e0 visiter autour du camping Clos Galion (Saint-Martin-de-Rr\\u00e9)&quot;}\">\n\n            <!-- Image + badge cat\u00e9gorie -->\n            <div class=\"em-card-img-wrap\">\n                              <img decoding=\"async\" class=\"em-card-img\" src=\"https:\/\/elaia-public.s3.fr-par.scw.cloud\/metadata_images\/image_69dbebf2f421a.jpeg\" alt=\"Rivedoux-Plage\" loading=\"lazy\" onerror=\"this.style.display='none';this.nextElementSibling.style.display='flex';\">\n                <div class=\"em-card-placeholder\" style=\"display:none;\">\ud83d\udcf7 Image indisponible<\/div>\n                            <span class=\"em-card-badge badge-default\">Top 5 des villes et villages \u00e0 visiter autour du camping Clos Galion (Saint-Martin-de-Rr\u00e9)<\/span>\n            <\/div>\n\n            <!-- Contenu de la card -->\n            <div class=\"em-card-body\">\n              <h3 class=\"em-card-title\">Rivedoux-Plage<\/h3>\n\n              <!-- Tags r\u00e9sum\u00e9s (max 4) -->\n              <div class=\"em-card-tags\">\n                                    <span class=\"em-tag em-tag-purple\">Village<\/span>\n                                              <\/div>\n\n              <!-- Champs suppl\u00e9mentaires (max 3) -->\n              <div class=\"em-card-fields\">\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Localisation :<\/span>\n                    <span class=\"em-card-field-value\">\u00cele de R\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France<\/span>\n                  <\/div>\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Distance depuis Clos Galion (km) :<\/span>\n                    <span class=\"em-card-field-value\">8.7<\/span>\n                  <\/div>\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Points d&#039;int\u00e9r\u00eat :<\/span>\n                    <span class=\"em-card-field-value\">Pont de l\u2019\u00eele de R\u00e9, port, plage de Sablanceau, redoute de R<\/span>\n                  <\/div>\n                              <\/div>\n\n              <!-- Lien vers le d\u00e9tail -->\n              <div class=\"em-card-footer\">\n                <span>Voir le d\u00e9tail<\/span>\n                <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3\"><\/path><\/svg>\n              <\/div>\n            <\/div>\n          <\/article>\n              <\/div>\n\n      <!-- \u00c9tat vide (aucun r\u00e9sultat apr\u00e8s filtrage) -->\n      <div class=\"em-empty\" id=\"em-empty\" style=\"display:none;\">\n        <p><strong>Aucun r\u00e9sultat<\/strong><br>Modifiez vos filtres pour voir plus de r\u00e9sultats<\/p>\n      <\/div>\n    <\/main>\n  <\/div>\n<\/div>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     JAVASCRIPT \u2014 Filtres, modal, carte Leaflet\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<script>\n(function() {\n  'use strict';\n\n  \/\/ Labels des champs (inject\u00e9s depuis PHP)\n  var FIELD_LABELS = window.emFieldLabels || {};\n\n  \/\/ Cl\u00e9s exclues de la modal (donn\u00e9es internes \/ d\u00e9j\u00e0 affich\u00e9es)\n  var EXCLUDED_KEYS = [\n    'name', 'image', 'images', 'image_url', 'link', 'site_officiel',\n    'gps_coordinates_latitude', 'gps_coordinates_longitude',\n    'latitude', 'longitude', 'latitude_deg', 'longitude_deg',\n    'address', 'available_image_urls'\n  ];\n\n  \/**\n   * Retourne le label lisible d'un champ\n   * Utilise les labels API si disponibles, sinon formate la cl\u00e9\n   *\/\n  function getFieldLabel(key) {\n    return FIELD_LABELS[key] || key.replace(\/_\/g, ' ').replace(\/^\\w\/, function(c) { return c.toUpperCase(); });\n  }\n\n  \/**\n   * \u00c9chappe le HTML pour \u00e9viter les injections XSS\n   *\/\n  function escapeHtml(str) {\n    if (!str) return '';\n    var div = document.createElement('div');\n    div.textContent = str;\n    return div.innerHTML;\n  }\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ FILTRES \u2014 Onglets, checkboxes, recherche\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n  var activeCategoryFilter = 'all';\n  var searchQuery = '';\n\n  \/**\n   * Applique tous les filtres actifs (cat\u00e9gorie, type, \u00e9quipements, recherche)\n   * Met \u00e0 jour la visibilit\u00e9 des cards et les compteurs\n   *\/\n  function applyFilters() {\n    var selectedTypes    = Array.from(document.querySelectorAll('.em-filter-type:checked')).map(function(cb) { return cb.value; });\n    var selectedFeatures = Array.from(document.querySelectorAll('.em-filter-feat:checked')).map(function(cb) { return cb.value; });\n    var cards = document.querySelectorAll('.em-card');\n    var visibleCount = 0;\n\n    cards.forEach(function(card) {\n      var cardType     = card.getAttribute('data-type');\n      var cardFeatures = (card.getAttribute('data-features') || '').split(',').filter(Boolean);\n      var cardName     = card.getAttribute('data-name') || '';\n\n      \/\/ V\u00e9rifier chaque crit\u00e8re de filtre\n      var matchesCategory = (activeCategoryFilter === 'all' || activeCategoryFilter === cardType);\n      var matchesType     = selectedTypes.indexOf(cardType) !== -1;\n      var matchesSearch   = (searchQuery === '' || cardName.indexOf(searchQuery.toLowerCase()) !== -1);\n\n      var isVisible = matchesCategory && matchesType && matchesSearch;\n\n      \/\/ Filtre \u00e9quipements (uniquement pour les h\u00e9bergements)\n      if (isVisible && (cardType === 'accommodation' || cardType === 'accomodation') && selectedFeatures.length > 0) {\n        isVisible = selectedFeatures.every(function(feat) { return cardFeatures.indexOf(feat) !== -1; });\n      }\n\n      card.style.display = isVisible ? '' : 'none';\n      if (isVisible) visibleCount++;\n    });\n\n    \/\/ Mise \u00e0 jour des compteurs\n    document.getElementById('em-stat-visible').textContent = visibleCount;\n    document.getElementById('em-empty').style.display = visibleCount === 0 ? 'block' : 'none';\n\n    \/\/ Mise \u00e0 jour des marqueurs de la carte\n    if (typeof updateMapMarkers === 'function') {\n      updateMapMarkers(activeCategoryFilter === 'all' ? selectedTypes : [activeCategoryFilter]);\n    }\n  }\n\n  \/\/ \u2500\u2500\u2500 Onglets de cat\u00e9gories \u2500\u2500\u2500\n  document.querySelectorAll('.em-tab').forEach(function(tab) {\n    tab.addEventListener('click', function() {\n      document.querySelectorAll('.em-tab').forEach(function(t) { t.classList.remove('active'); });\n      tab.classList.add('active');\n      activeCategoryFilter = tab.getAttribute('data-filter');\n      applyFilters();\n    });\n  });\n\n  \/\/ \u2500\u2500\u2500 Checkboxes filtres \u2500\u2500\u2500\n  document.querySelectorAll('.em-filter-type, .em-filter-feat').forEach(function(checkbox) {\n    checkbox.addEventListener('change', applyFilters);\n  });\n\n  \/\/ \u2500\u2500\u2500 Barre de recherche \u2500\u2500\u2500\n  var searchInput = document.getElementById('em-search');\n  if (searchInput) {\n    searchInput.addEventListener('input', function(e) {\n      searchQuery = e.target.value;\n      applyFilters();\n    });\n  }\n\n  \/\/ \u2500\u2500\u2500 Bouton r\u00e9initialiser \u2500\u2500\u2500\n  var resetButton = document.getElementById('em-reset-filters');\n  if (resetButton) {\n    resetButton.addEventListener('click', function() {\n      document.querySelectorAll('.em-filter-type').forEach(function(cb) { cb.checked = true; });\n      document.querySelectorAll('.em-filter-feat').forEach(function(cb) { cb.checked = false; });\n      if (searchInput) searchInput.value = '';\n      searchQuery = '';\n      activeCategoryFilter = 'all';\n\n      \/\/ Remettre l'onglet \"Tout\" actif\n      document.querySelectorAll('.em-tab').forEach(function(t) { t.classList.remove('active'); });\n      var allTab = document.querySelector('.em-tab[data-filter=\"all\"]');\n      if (allTab) allTab.classList.add('active');\n\n      applyFilters();\n    });\n  }\n\n  \/\/ Application initiale des filtres\n  applyFilters();\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ MODAL \u2014 D\u00e9tail d'une fiche\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n  \/\/ Clic sur une card \u2192 ouvrir la modal\n  document.querySelectorAll('.em-card').forEach(function(card) {\n    card.addEventListener('click', function() {\n      var cardData = JSON.parse(card.getAttribute('data-json'));\n      openDetailModal(cardData);\n    });\n  });\n\n  \/**\n   * Ouvre la modal de d\u00e9tail pour une fiche\n   * Affiche l'image (si disponible), les champs et le lien externe\n   *\/\n  function openDetailModal(item) {\n    \/\/ Filtrer les champs \u00e0 afficher (exclure les cl\u00e9s internes)\n    var entries = Object.entries(item.data || {}).filter(function(entry) {\n      return EXCLUDED_KEYS.indexOf(entry[0]) === -1\n        && entry[1] && entry[1] !== ''\n        && typeof entry[1] !== 'object';\n    }).map(function(entry) {\n      var value = entry[1];\n      if (value === true || value === 'true') value = 'Oui';\n      else if (value === false || value === 'false') value = 'Non';\n      return { label: getFieldLabel(entry[0]), value: String(value) };\n    });\n\n    var hasImage = item.image && item.image.indexOf('http') === 0;\n    var html = '<div class=\"em-modal\">';\n\n    \/\/ \u2500\u2500\u2500 Header de la modal (avec ou sans image) \u2500\u2500\u2500\n    if (hasImage) {\n      html += '<div class=\"em-modal-img-wrap\">'\n        + '<img decoding=\"async\" class=\"em-modal-img\" src=\"' + escapeHtml(item.image) + '\" alt=\"' + escapeHtml(item.name) + '\" onerror=\"this.style.display=\\'none\\'\">'\n        + '<div class=\"em-modal-img-gradient\"><\/div>'\n        + '<button class=\"em-modal-close\" data-close>&times;<\/button>'\n        + '<div class=\"em-modal-img-info\">'\n        + '<p class=\"em-modal-img-cat\">' + escapeHtml(item.category || '') + '<\/p>'\n        + '<h3 class=\"em-modal-img-title\">' + escapeHtml(item.name) + '<\/h3>'\n        + '<\/div><\/div>';\n    } else {\n      html += '<div class=\"em-modal-header-noimg\"><div>'\n        + '<p class=\"em-modal-header-noimg-cat\">' + escapeHtml(item.category || '') + '<\/p>'\n        + '<h3 class=\"em-modal-header-noimg-title\">' + escapeHtml(item.name) + '<\/h3>'\n        + '<\/div><button class=\"em-modal-close-noimg\" data-close>&times;<\/button><\/div>';\n    }\n\n    \/\/ \u2500\u2500\u2500 Corps de la modal : champs cl\u00e9\/valeur \u2500\u2500\u2500\n    html += '<div class=\"em-modal-body\">';\n    entries.forEach(function(entry) {\n      html += '<div class=\"em-modal-entry\">'\n        + '<p class=\"em-modal-entry-label\">' + escapeHtml(entry.label) + '<\/p>'\n        + '<p class=\"em-modal-entry-value\">' + escapeHtml(entry.value) + '<\/p>'\n        + '<\/div>';\n    });\n    html += '<\/div>';\n\n    \/\/ \u2500\u2500\u2500 Footer de la modal : lien externe + bouton fermer \u2500\u2500\u2500\n    html += '<div class=\"em-modal-footer\">';\n    if (item.link && item.link.indexOf('http') === 0) {\n      html += '<a href=\"' + escapeHtml(item.link) + '\" target=\"_blank\" rel=\"noopener\" class=\"em-modal-link\">Ouvrir le lien &rarr;<\/a>';\n    } else {\n      html += '<span><\/span>';\n    }\n    html += '<button class=\"em-modal-close-btn\" data-close>Fermer<\/button><\/div><\/div>';\n\n    \/\/ \u2500\u2500\u2500 Injection dans le DOM \u2500\u2500\u2500\n    var overlay = document.createElement('div');\n    overlay.className = 'em-modal-overlay';\n    overlay.innerHTML = html;\n    document.body.appendChild(overlay);\n\n    \/\/ Fermeture : boutons, clic overlay, touche Escape\n    overlay.querySelectorAll('[data-close]').forEach(function(btn) {\n      btn.addEventListener('click', function() { overlay.remove(); });\n    });\n    overlay.addEventListener('click', function(e) { if (e.target === overlay) overlay.remove(); });\n    document.addEventListener('keydown', function escapeHandler(e) {\n      if (e.key === 'Escape') { overlay.remove(); document.removeEventListener('keydown', escapeHandler); }\n    });\n  }\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ CARTE LEAFLET \u2014 Marqueurs + interactions\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n  var mapElement = document.getElementById('em-map');\n\n  if (mapElement && typeof L !== 'undefined') {\n\n    \/\/ Initialisation de la carte\n    var map = L.map(mapElement, { zoomControl: false, attributionControl: false }).setView([46.6, 1.9], 6);\n    L.control.zoom({ position: 'topright' }).addTo(map);\n    L.control.attribution({ position: 'bottomright', prefix: false })\n      .addAttribution('&copy; <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OSM<\/a> &copy; <a href=\"https:\/\/carto.com\/\">CARTO<\/a>')\n      .addTo(map);\n\n    \/\/ Tuiles CartoDB Voyager\n    L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/rastertiles\/voyager\/{z}\/{x}\/{y}{r}.png', {\n      maxZoom: 19,\n      subdomains: 'abcd'\n    }).addTo(map);\n\n    \/\/ Donn\u00e9es inject\u00e9es depuis PHP\n    var gpsPoints      = [{\"lat\":46.1886,\"lng\":-1.3251,\"name\":\"La Flotte\",\"type\":\"top-5-des-villes-et-villages-a-visiter-autour-du-camping-clos-galion-saint-martin-de-rre\",\"idx\":0},{\"lat\":46.1872222,\"lng\":-1.3919444,\"name\":\"Le Bois-Plage-en-R\\u00e9\",\"type\":\"top-5-des-villes-et-villages-a-visiter-autour-du-camping-clos-galion-saint-martin-de-rre\",\"idx\":1},{\"lat\":46.1955556,\"lng\":-1.4241667,\"name\":\"La Couarde-sur-Mer\",\"type\":\"top-5-des-villes-et-villages-a-visiter-autour-du-camping-clos-galion-saint-martin-de-rre\",\"idx\":2},{\"lat\":46.1506,\"lng\":-1.3097,\"name\":\"Sainte-Marie-de-R\\u00e9\",\"type\":\"top-5-des-villes-et-villages-a-visiter-autour-du-camping-clos-galion-saint-martin-de-rre\",\"idx\":3},{\"lat\":46.1603,\"lng\":-1.2744,\"name\":\"Rivedoux-Plage\",\"type\":\"top-5-des-villes-et-villages-a-visiter-autour-du-camping-clos-galion-saint-martin-de-rre\",\"idx\":4}];\n    var categoryColorMap  = {\"top-5-des-villes-et-villages-a-visiter-autour-du-camping-clos-galion-saint-martin-de-rre\":\"#0891b2\"};\n    var categoryLabelMap  = {\"top-5-des-villes-et-villages-a-visiter-autour-du-camping-clos-galion-saint-martin-de-rre\":\"Top 5 des villes et villages \\u00e0 visiter autour du camping Clos Galion (Saint-Martin-de-Rr\\u00e9)\"};\n\n    var markers      = [];   \/\/ Tous les marqueurs [{marker, type, latLng, idx}]\n    var allBounds    = [];   \/\/ Coordonn\u00e9es pour le fitBounds initial\n    var activeMarker = null; \/\/ Marqueur actuellement s\u00e9lectionn\u00e9\n\n    \/**\n     * Cr\u00e9e une ic\u00f4ne SVG circulaire pour un marqueur Leaflet\n     * @param {string} color  \u2014 Couleur de remplissage\n     * @param {number} size   \u2014 Diam\u00e8tre du cercle int\u00e9rieur (d\u00e9faut: 12)\n     *\/\n    function createMarkerIcon(color, size) {\n      size = size || 12;\n      var outerSize = size + 8;\n      var center = outerSize \/ 2;\n      return L.divIcon({\n        className: 'em-marker',\n        html: '<svg width=\"' + outerSize + '\" height=\"' + outerSize + '\" viewBox=\"0 0 ' + outerSize + ' ' + outerSize + '\">'\n          + '<circle cx=\"' + center + '\" cy=\"' + center + '\" r=\"' + (size \/ 2 + 2) + '\" fill=\"white\" opacity=\"0.9\"\/>'\n          + '<circle cx=\"' + center + '\" cy=\"' + center + '\" r=\"' + (size \/ 2) + '\" fill=\"' + color + '\"\/>'\n          + '<\/svg>',\n        iconSize: [outerSize, outerSize],\n        iconAnchor: [center, center],\n        popupAnchor: [0, -(size \/ 2 + 6)]\n      });\n    }\n\n    \/\/ \u2500\u2500\u2500 Placement des marqueurs sur la carte \u2500\u2500\u2500\n    gpsPoints.forEach(function(point) {\n      var color    = categoryColorMap[point.type] || '#6b7280';\n      var catLabel = categoryLabelMap[point.type] || point.type;\n      var icon     = createMarkerIcon(color, 12);\n      var marker   = L.marker([point.lat, point.lng], { icon: icon }).addTo(map);\n\n      \/\/ Popup au clic\n      var popupHtml = '<div class=\"em-map-popup\">'\n        + '<p class=\"em-map-popup-name\">' + escapeHtml(point.name) + '<\/p>'\n        + '<p class=\"em-map-popup-cat\" style=\"color:' + color + '\">' + escapeHtml(catLabel) + '<\/p>'\n        + '<button class=\"em-map-popup-btn\" data-card-idx=\"' + point.idx + '\">Voir la fiche \u2192<\/button>'\n        + '<\/div>';\n      marker.bindPopup(popupHtml, { closeButton: false, minWidth: 180 });\n\n      \/\/ Highlight du marqueur actif\n      marker.on('click', function() {\n        if (activeMarker && activeMarker.getElement()) activeMarker.getElement().classList.remove('em-marker--active');\n        if (marker.getElement()) marker.getElement().classList.add('em-marker--active');\n        activeMarker = marker;\n      });\n\n      \/\/ Bouton \"Voir la fiche\" dans la popup \u2192 scroll vers la card\n      marker.on('popupopen', function() {\n        var popupBtn = document.querySelector('.em-map-popup-btn[data-card-idx=\"' + point.idx + '\"]');\n        if (popupBtn) {\n          popupBtn.addEventListener('click', function() {\n            var allCards = document.querySelectorAll('.em-card');\n            var targetCard = allCards[point.idx];\n            if (targetCard && targetCard.style.display !== 'none') {\n              targetCard.scrollIntoView({ behavior: 'smooth', block: 'center' });\n              targetCard.classList.add('em-card--highlight');\n              setTimeout(function() { targetCard.classList.remove('em-card--highlight'); }, 2000);\n            }\n            map.closePopup();\n          });\n        }\n      });\n\n      markers.push({ marker: marker, type: point.type, latLng: [point.lat, point.lng], idx: point.idx });\n      allBounds.push([point.lat, point.lng]);\n    });\n\n    \/\/ Cadrage initial de la carte\n    if (allBounds.length > 1) map.fitBounds(allBounds, { padding: [40, 40] });\n    else if (allBounds.length === 1) map.setView(allBounds[0], 13);\n    setTimeout(function() { map.invalidateSize(); }, 100);\n\n    \/\/ \u2500\u2500\u2500 Interaction cards \u2194 marqueurs (hover) \u2500\u2500\u2500\n    document.querySelectorAll('.em-card').forEach(function(card, cardIndex) {\n      card.addEventListener('mouseenter', function() {\n        markers.forEach(function(m) {\n          if (m.idx === cardIndex) {\n            m.marker.setIcon(createMarkerIcon(categoryColorMap[m.type] || '#6b7280', 18));\n            m.marker.setZIndexOffset(1000);\n          }\n        });\n      });\n      card.addEventListener('mouseleave', function() {\n        markers.forEach(function(m) {\n          if (m.idx === cardIndex) {\n            m.marker.setIcon(createMarkerIcon(categoryColorMap[m.type] || '#6b7280', 12));\n            m.marker.setZIndexOffset(0);\n          }\n        });\n      });\n    });\n\n    \/**\n     * Met \u00e0 jour la visibilit\u00e9 des marqueurs selon les types s\u00e9lectionn\u00e9s\n     * Appel\u00e9 par applyFilters() quand les filtres changent\n     *\/\n    window.updateMapMarkers = function(visibleTypes) {\n      var visibleBounds = [];\n      markers.forEach(function(m) {\n        if (visibleTypes.indexOf(m.type) !== -1) {\n          if (!map.hasLayer(m.marker)) map.addLayer(m.marker);\n          visibleBounds.push(m.latLng);\n        } else {\n          if (map.hasLayer(m.marker)) map.removeLayer(m.marker);\n        }\n      });\n      if (visibleBounds.length > 1) map.fitBounds(visibleBounds, { padding: [40, 40], maxZoom: 14 });\n      else if (visibleBounds.length === 1) map.setView(visibleBounds[0], 13);\n    };\n\n    \/\/ \u2500\u2500\u2500 Toggle visibilit\u00e9 de la carte \u2500\u2500\u2500\n    var mapToggle = document.getElementById('em-map-toggle');\n    var mapWrapper = document.getElementById('em-map-wrap');\n    if (mapToggle && mapWrapper) {\n      mapToggle.addEventListener('click', function() {\n        var isVisible = mapWrapper.style.display !== 'none';\n        mapWrapper.style.display = isVisible ? 'none' : '';\n        mapToggle.classList.toggle('active', !isVisible);\n        if (!isVisible) setTimeout(function() { map.invalidateSize(); }, 100);\n      });\n    }\n  }\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ MOBILE \u2014 Sidebar filtres collapsible\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n  \/**\n   * Sur mobile (\u2264720px), la sidebar filtres est repli\u00e9e par d\u00e9faut\n   * Un clic sur le titre la d\u00e9plie\/replie\n   *\/\n  function initMobileFilters() {\n    var filtersContainer = document.querySelector('.em-filters');\n    var filtersTitle     = document.querySelector('.em-filters-title');\n    if (!filtersContainer || !filtersTitle) return;\n\n    if (window.innerWidth <= 720) {\n      filtersContainer.classList.add('collapsed');\n    }\n\n    filtersTitle.addEventListener('click', function() {\n      if (window.innerWidth <= 720) {\n        filtersContainer.classList.toggle('collapsed');\n      }\n    });\n  }\n\n  initMobileFilters();\n})();\n<\/script>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","inline_featured_image":false,"gt_fse_maillage_image":"","gt_fse_maillage_titre":"Entdecken Sie in Ihrer Umgebung","gt_fse_maillage_alt":"Entdecken Sie in Ihrer Umgebung","gt_fse_maillage_resume":"","_gt_maillage_image":0,"_gt_maillage_video":0,"_gt_maillage_title":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-568980","page","type-page","status-publish"],"acf":[],"_links":{"self":[{"href":"https:\/\/hotelclosgalion.fr\/de\/wp-json\/wp\/v2\/pages\/568980","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hotelclosgalion.fr\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hotelclosgalion.fr\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hotelclosgalion.fr\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hotelclosgalion.fr\/de\/wp-json\/wp\/v2\/comments?post=568980"}],"version-history":[{"count":0,"href":"https:\/\/hotelclosgalion.fr\/de\/wp-json\/wp\/v2\/pages\/568980\/revisions"}],"wp:attachment":[{"href":"https:\/\/hotelclosgalion.fr\/de\/wp-json\/wp\/v2\/media?parent=568980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hotelclosgalion.fr\/de\/wp-json\/wp\/v2\/categories?post=568980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hotelclosgalion.fr\/de\/wp-json\/wp\/v2\/tags?post=568980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}