{"id":94727,"date":"2026-03-11T15:48:27","date_gmt":"2026-03-11T14:48:27","guid":{"rendered":"https:\/\/hotel-hr-spamarin.fr\/elaia-metadatas\/"},"modified":"2026-03-11T15:48:27","modified_gmt":"2026-03-11T14:48:27","slug":"elaia-metadatas","status":"publish","type":"page","link":"https:\/\/hotel-hr-spamarin.fr\/nl\/elaia-metadatas\/","title":{"rendered":"Lees meer"},"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\":\"Fiches touristiques autour de l'h\u00f4tel\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"Thing\",\"name\":\"La Flotte\",\"description\":\"Village parmi les plus embl\u00e9matiques de l\u2019\u00eele de R\u00e9, connu pour son port, son march\u00e9 et son charme de village c\u00f4tier.\",\"url\":\"https:\/\/www.iledere.com\/decouvrir\/une-ile-10-villages\/\",\"image\":\"https:\/\/elaia-public.s3.fr-par.scw.cloud\/metadata_images\/image_69dbf97069c80.jpeg\",\"geo\":{\"@type\":\"GeoCoordinates\",\"latitude\":46.1867,\"longitude\":-1.3245},\"additionalProperty\":[{\"@type\":\"PropertyValue\",\"name\":\"Cat\u00e9gorie\",\"value\":\"(*) Lieux touristiques, ( ) Monuments, ( ) Mus\u00e9es, ( ) Espaces verts, ( ) Restaurants, ( ) Shopping\"},{\"@type\":\"PropertyValue\",\"name\":\"Localisation\",\"value\":\"\u00cele de R\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France\"},{\"@type\":\"PropertyValue\",\"name\":\"Distance depuis l'h\u00f4tel (km)\",\"value\":\"0.8\"},{\"@type\":\"PropertyValue\",\"name\":\"Prix entr\u00e9e\",\"value\":\"Gratuit\"},{\"@type\":\"PropertyValue\",\"name\":\"Ouvert 24h\",\"value\":\"Oui\"}]}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"Thing\",\"name\":\"Saint-Martin-de-R\u00e9\",\"description\":\"Village fortifi\u00e9 class\u00e9 \u00e0 l\u2019UNESCO, r\u00e9put\u00e9 pour ses remparts, son port et son patrimoine historique.\",\"url\":\"https:\/\/www.iledere.com\/decouvrir\/une-ile-10-villages\/\",\"image\":\"https:\/\/elaia-public.s3.fr-par.scw.cloud\/metadata_images\/image_69dbf9db20fbb.jpeg\",\"geo\":{\"@type\":\"GeoCoordinates\",\"latitude\":46.2031,\"longitude\":-1.3672},\"additionalProperty\":[{\"@type\":\"PropertyValue\",\"name\":\"Cat\u00e9gorie\",\"value\":\"(*) Lieux touristiques, ( ) Monuments, ( ) Mus\u00e9es, ( ) Espaces verts, ( ) Restaurants, ( ) Shopping\"},{\"@type\":\"PropertyValue\",\"name\":\"Localisation\",\"value\":\"\u00cele de R\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France\"},{\"@type\":\"PropertyValue\",\"name\":\"Distance depuis l'h\u00f4tel (km)\",\"value\":\"4.2\"},{\"@type\":\"PropertyValue\",\"name\":\"Prix entr\u00e9e\",\"value\":\"Gratuit\"},{\"@type\":\"PropertyValue\",\"name\":\"Ouvert 24h\",\"value\":\"Oui\"}]}},{\"@type\":\"ListItem\",\"position\":3,\"item\":{\"@type\":\"Thing\",\"name\":\"Rivedoux-Plage\",\"description\":\"Porte d\u2019entr\u00e9e de l\u2019\u00eele de R\u00e9, avec ses plages face au continent et son ambiance baln\u00e9aire.\",\"url\":\"https:\/\/www.iledere.com\/decouvrir\/une-ile-10-villages\/\",\"image\":\"https:\/\/elaia-public.s3.fr-par.scw.cloud\/metadata_images\/image_69dbf9f813df4.jpeg\",\"geo\":{\"@type\":\"GeoCoordinates\",\"latitude\":46.162761,\"longitude\":-1.258687},\"additionalProperty\":[{\"@type\":\"PropertyValue\",\"name\":\"Cat\u00e9gorie\",\"value\":\"(*) Lieux touristiques, ( ) Monuments, ( ) Mus\u00e9es, ( ) Espaces verts, ( ) Restaurants, ( ) Shopping\"},{\"@type\":\"PropertyValue\",\"name\":\"Localisation\",\"value\":\"\u00cele de R\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France\"},{\"@type\":\"PropertyValue\",\"name\":\"Distance depuis l'h\u00f4tel (km)\",\"value\":\"5.2\"},{\"@type\":\"PropertyValue\",\"name\":\"Prix entr\u00e9e\",\"value\":\"Gratuit\"},{\"@type\":\"PropertyValue\",\"name\":\"Ouvert 24h\",\"value\":\"Oui\"}]}},{\"@type\":\"ListItem\",\"position\":4,\"item\":{\"@type\":\"Thing\",\"name\":\"Sainte-Marie-de-R\u00e9\",\"description\":\"Village du sud de l\u2019\u00eele appr\u00e9ci\u00e9 pour ses venelles fleuries, ses vignes et son atmosph\u00e8re typique.\",\"url\":\"https:\/\/www.iledere.com\/decouvrir\/une-ile-10-villages\/\",\"image\":\"https:\/\/elaia-public.s3.fr-par.scw.cloud\/metadata_images\/image_69dbfa1a3a710.jpeg\",\"geo\":{\"@type\":\"GeoCoordinates\",\"latitude\":46.15,\"longitude\":-1.3},\"additionalProperty\":[{\"@type\":\"PropertyValue\",\"name\":\"Cat\u00e9gorie\",\"value\":\"(*) Lieux touristiques, ( ) Monuments, ( ) Mus\u00e9es, ( ) Espaces verts, ( ) Restaurants, ( ) Shopping\"},{\"@type\":\"PropertyValue\",\"name\":\"Localisation\",\"value\":\"\u00cele de R\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France\"},{\"@type\":\"PropertyValue\",\"name\":\"Distance depuis l'h\u00f4tel (km)\",\"value\":\"4.2\"},{\"@type\":\"PropertyValue\",\"name\":\"Prix entr\u00e9e\",\"value\":\"Gratuit\"},{\"@type\":\"PropertyValue\",\"name\":\"Ouvert 24h\",\"value\":\"Oui\"}]}},{\"@type\":\"ListItem\",\"position\":5,\"item\":{\"@type\":\"Thing\",\"name\":\"La Couarde-sur-Mer\",\"description\":\"Village central de l\u2019\u00eele, connu pour son ambiance familiale, ses plages et son environnement baln\u00e9aire.\",\"url\":\"https:\/\/www.iledere.com\/decouvrir\/une-ile-10-villages\/\",\"image\":\"https:\/\/elaia-public.s3.fr-par.scw.cloud\/metadata_images\/image_69dbfa303534b.jpeg\",\"geo\":{\"@type\":\"GeoCoordinates\",\"latitude\":46.2,\"longitude\":-1.4},\"additionalProperty\":[{\"@type\":\"PropertyValue\",\"name\":\"Cat\u00e9gorie\",\"value\":\"(*) Lieux touristiques, ( ) Monuments, ( ) Mus\u00e9es, ( ) Espaces verts, ( ) Restaurants, ( ) Shopping\"},{\"@type\":\"PropertyValue\",\"name\":\"Localisation\",\"value\":\"\u00cele de R\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France\"},{\"@type\":\"PropertyValue\",\"name\":\"Distance depuis l'h\u00f4tel (km)\",\"value\":\"6.6\"},{\"@type\":\"PropertyValue\",\"name\":\"Prix entr\u00e9e\",\"value\":\"Gratuit\"},{\"@type\":\"PropertyValue\",\"name\":\"Ouvert 24h\",\"value\":\"Oui\"}]}}]}]}<\/script>\n\n\n<!-- Injection des labels pour le JS (modal) -->\n<script>var emFieldLabels = {\"name\":\"Nom\",\"category_type\":\"Cat\\u00e9gorie\",\"localisation\":\"Localisation\",\"description\":\"Description\",\"distance_from_hotel_km\":\"Distance depuis l'h\\u00f4tel (km)\",\"prix_entree\":\"Prix entr\\u00e9e\",\"ouvert_24h\":\"Ouvert 24h\",\"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> Fiches touristiques autour de l&#039;h\u00f4tel<\/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=\"fiches-touristiques-autour-de-lhotel\" class=\"em-filter-type\" checked><span>Fiches touristiques autour de l&#039;h\u00f4tel<\/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=\"fiches-touristiques-autour-de-lhotel\"\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_69dbf97069c80.jpeg&quot;,&quot;link&quot;:&quot;https:\\\/\\\/www.iledere.com\\\/decouvrir\\\/une-ile-10-villages\\\/&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;La Flotte&quot;,&quot;category_type&quot;:[&quot;(*) Lieux touristiques&quot;,&quot;( ) Monuments&quot;,&quot;( ) Mus\\u00e9es&quot;,&quot;( ) Espaces verts&quot;,&quot;( ) Restaurants&quot;,&quot;( ) Shopping&quot;],&quot;localisation&quot;:&quot;\\u00cele de R\\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France&quot;,&quot;description&quot;:&quot;Village parmi les plus embl\\u00e9matiques de l\\u2019\\u00eele de R\\u00e9, connu pour son port, son march\\u00e9 et son charme de village c\\u00f4tier.&quot;,&quot;distance_from_hotel_km&quot;:0.8,&quot;prix_entree&quot;:&quot;Gratuit&quot;,&quot;ouvert_24h&quot;:true,&quot;link&quot;:&quot;https:\\\/\\\/www.iledere.com\\\/decouvrir\\\/une-ile-10-villages\\\/&quot;,&quot;latitude&quot;:&quot;46.1867000&quot;,&quot;longitude&quot;:&quot;-1.3245000&quot;,&quot;image&quot;:&quot;https:\\\/\\\/elaia-public.s3.fr-par.scw.cloud\\\/metadata_images\\\/image_69dbf97069c80.jpeg&quot;},&quot;category&quot;:&quot;Fiches touristiques autour de l&#039;h\\u00f4tel&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_69dbf97069c80.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\">Fiches touristiques autour de l&#039;h\u00f4tel<\/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                                              <\/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 l&#039;h\u00f4tel (km) :<\/span>\n                    <span class=\"em-card-field-value\">0.8<\/span>\n                  <\/div>\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Prix entr\u00e9e :<\/span>\n                    <span class=\"em-card-field-value\">Gratuit<\/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=\"fiches-touristiques-autour-de-lhotel\"\n            data-features=\"\"\n            data-name=\"saint-martin-de-r\u00e9\"\n            data-json=\"{&quot;name&quot;:&quot;Saint-Martin-de-R\\u00e9&quot;,&quot;image&quot;:&quot;https:\\\/\\\/elaia-public.s3.fr-par.scw.cloud\\\/metadata_images\\\/image_69dbf9db20fbb.jpeg&quot;,&quot;link&quot;:&quot;https:\\\/\\\/www.iledere.com\\\/decouvrir\\\/une-ile-10-villages\\\/&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;Saint-Martin-de-R\\u00e9&quot;,&quot;category_type&quot;:[&quot;(*) Lieux touristiques&quot;,&quot;( ) Monuments&quot;,&quot;( ) Mus\\u00e9es&quot;,&quot;( ) Espaces verts&quot;,&quot;( ) Restaurants&quot;,&quot;( ) Shopping&quot;],&quot;localisation&quot;:&quot;\\u00cele de R\\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France&quot;,&quot;description&quot;:&quot;Village fortifi\\u00e9 class\\u00e9 \\u00e0 l\\u2019UNESCO, r\\u00e9put\\u00e9 pour ses remparts, son port et son patrimoine historique.&quot;,&quot;distance_from_hotel_km&quot;:4.2,&quot;prix_entree&quot;:&quot;Gratuit&quot;,&quot;ouvert_24h&quot;:true,&quot;link&quot;:&quot;https:\\\/\\\/www.iledere.com\\\/decouvrir\\\/une-ile-10-villages\\\/&quot;,&quot;latitude&quot;:&quot;46.2031000&quot;,&quot;longitude&quot;:&quot;-1.3672000&quot;,&quot;image&quot;:&quot;https:\\\/\\\/elaia-public.s3.fr-par.scw.cloud\\\/metadata_images\\\/image_69dbf9db20fbb.jpeg&quot;},&quot;category&quot;:&quot;Fiches touristiques autour de l&#039;h\\u00f4tel&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_69dbf9db20fbb.jpeg\" alt=\"Saint-Martin-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\">Fiches touristiques autour de l&#039;h\u00f4tel<\/span>\n            <\/div>\n\n            <!-- Contenu de la card -->\n            <div class=\"em-card-body\">\n              <h3 class=\"em-card-title\">Saint-Martin-de-R\u00e9<\/h3>\n\n              <!-- Tags r\u00e9sum\u00e9s (max 4) -->\n              <div class=\"em-card-tags\">\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 l&#039;h\u00f4tel (km) :<\/span>\n                    <span class=\"em-card-field-value\">4.2<\/span>\n                  <\/div>\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Prix entr\u00e9e :<\/span>\n                    <span class=\"em-card-field-value\">Gratuit<\/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=\"fiches-touristiques-autour-de-lhotel\"\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_69dbf9f813df4.jpeg&quot;,&quot;link&quot;:&quot;https:\\\/\\\/www.iledere.com\\\/decouvrir\\\/une-ile-10-villages\\\/&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;Rivedoux-Plage&quot;,&quot;category_type&quot;:[&quot;(*) Lieux touristiques&quot;,&quot;( ) Monuments&quot;,&quot;( ) Mus\\u00e9es&quot;,&quot;( ) Espaces verts&quot;,&quot;( ) Restaurants&quot;,&quot;( ) Shopping&quot;],&quot;localisation&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, avec ses plages face au continent et son ambiance baln\\u00e9aire.&quot;,&quot;distance_from_hotel_km&quot;:5.2,&quot;prix_entree&quot;:&quot;Gratuit&quot;,&quot;ouvert_24h&quot;:true,&quot;link&quot;:&quot;https:\\\/\\\/www.iledere.com\\\/decouvrir\\\/une-ile-10-villages\\\/&quot;,&quot;latitude&quot;:&quot;46.1627610&quot;,&quot;longitude&quot;:&quot;-1.2586870&quot;,&quot;image&quot;:&quot;https:\\\/\\\/elaia-public.s3.fr-par.scw.cloud\\\/metadata_images\\\/image_69dbf9f813df4.jpeg&quot;},&quot;category&quot;:&quot;Fiches touristiques autour de l&#039;h\\u00f4tel&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_69dbf9f813df4.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\">Fiches touristiques autour de l&#039;h\u00f4tel<\/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                                              <\/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 l&#039;h\u00f4tel (km) :<\/span>\n                    <span class=\"em-card-field-value\">5.2<\/span>\n                  <\/div>\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Prix entr\u00e9e :<\/span>\n                    <span class=\"em-card-field-value\">Gratuit<\/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=\"fiches-touristiques-autour-de-lhotel\"\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_69dbfa1a3a710.jpeg&quot;,&quot;link&quot;:&quot;https:\\\/\\\/www.iledere.com\\\/decouvrir\\\/une-ile-10-villages\\\/&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;Sainte-Marie-de-R\\u00e9&quot;,&quot;category_type&quot;:[&quot;(*) Lieux touristiques&quot;,&quot;( ) Monuments&quot;,&quot;( ) Mus\\u00e9es&quot;,&quot;( ) Espaces verts&quot;,&quot;( ) Restaurants&quot;,&quot;( ) Shopping&quot;],&quot;localisation&quot;:&quot;\\u00cele de R\\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France&quot;,&quot;description&quot;:&quot;Village du sud de l\\u2019\\u00eele appr\\u00e9ci\\u00e9 pour ses venelles fleuries, ses vignes et son atmosph\\u00e8re typique.&quot;,&quot;distance_from_hotel_km&quot;:4.2,&quot;prix_entree&quot;:&quot;Gratuit&quot;,&quot;ouvert_24h&quot;:true,&quot;link&quot;:&quot;https:\\\/\\\/www.iledere.com\\\/decouvrir\\\/une-ile-10-villages\\\/&quot;,&quot;latitude&quot;:&quot;46.1500000&quot;,&quot;longitude&quot;:&quot;-1.3000000&quot;,&quot;image&quot;:&quot;https:\\\/\\\/elaia-public.s3.fr-par.scw.cloud\\\/metadata_images\\\/image_69dbfa1a3a710.jpeg&quot;},&quot;category&quot;:&quot;Fiches touristiques autour de l&#039;h\\u00f4tel&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_69dbfa1a3a710.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\">Fiches touristiques autour de l&#039;h\u00f4tel<\/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                                              <\/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 l&#039;h\u00f4tel (km) :<\/span>\n                    <span class=\"em-card-field-value\">4.2<\/span>\n                  <\/div>\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Prix entr\u00e9e :<\/span>\n                    <span class=\"em-card-field-value\">Gratuit<\/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=\"fiches-touristiques-autour-de-lhotel\"\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_69dbfa303534b.jpeg&quot;,&quot;link&quot;:&quot;https:\\\/\\\/www.iledere.com\\\/decouvrir\\\/une-ile-10-villages\\\/&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;La Couarde-sur-Mer&quot;,&quot;category_type&quot;:[&quot;(*) Lieux touristiques&quot;,&quot;( ) Monuments&quot;,&quot;( ) Mus\\u00e9es&quot;,&quot;( ) Espaces verts&quot;,&quot;( ) Restaurants&quot;,&quot;( ) Shopping&quot;],&quot;localisation&quot;:&quot;\\u00cele de R\\u00e9, Charente-Maritime, Nouvelle-Aquitaine, France&quot;,&quot;description&quot;:&quot;Village central de l\\u2019\\u00eele, connu pour son ambiance familiale, ses plages et son environnement baln\\u00e9aire.&quot;,&quot;distance_from_hotel_km&quot;:6.6,&quot;prix_entree&quot;:&quot;Gratuit&quot;,&quot;ouvert_24h&quot;:true,&quot;link&quot;:&quot;https:\\\/\\\/www.iledere.com\\\/decouvrir\\\/une-ile-10-villages\\\/&quot;,&quot;latitude&quot;:&quot;46.2000000&quot;,&quot;longitude&quot;:&quot;-1.4000000&quot;,&quot;image&quot;:&quot;https:\\\/\\\/elaia-public.s3.fr-par.scw.cloud\\\/metadata_images\\\/image_69dbfa303534b.jpeg&quot;},&quot;category&quot;:&quot;Fiches touristiques autour de l&#039;h\\u00f4tel&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_69dbfa303534b.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\">Fiches touristiques autour de l&#039;h\u00f4tel<\/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                                              <\/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 l&#039;h\u00f4tel (km) :<\/span>\n                    <span class=\"em-card-field-value\">6.6<\/span>\n                  <\/div>\n                                  <div class=\"em-card-field\">\n                    <span class=\"em-card-field-label\">Prix entr\u00e9e :<\/span>\n                    <span class=\"em-card-field-value\">Gratuit<\/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.1867,\"lng\":-1.3245,\"name\":\"La Flotte\",\"type\":\"fiches-touristiques-autour-de-lhotel\",\"idx\":0},{\"lat\":46.2031,\"lng\":-1.3672,\"name\":\"Saint-Martin-de-R\\u00e9\",\"type\":\"fiches-touristiques-autour-de-lhotel\",\"idx\":1},{\"lat\":46.162761,\"lng\":-1.258687,\"name\":\"Rivedoux-Plage\",\"type\":\"fiches-touristiques-autour-de-lhotel\",\"idx\":2},{\"lat\":46.15,\"lng\":-1.3,\"name\":\"Sainte-Marie-de-R\\u00e9\",\"type\":\"fiches-touristiques-autour-de-lhotel\",\"idx\":3},{\"lat\":46.2,\"lng\":-1.4,\"name\":\"La Couarde-sur-Mer\",\"type\":\"fiches-touristiques-autour-de-lhotel\",\"idx\":4}];\n    var categoryColorMap  = {\"fiches-touristiques-autour-de-lhotel\":\"#0891b2\"};\n    var categoryLabelMap  = {\"fiches-touristiques-autour-de-lhotel\":\"Fiches touristiques autour de l'h\\u00f4tel\"};\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":0,"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":"Lees meer","gt_fse_maillage_alt":"Lees meer","gt_fse_maillage_resume":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-94727","page","type-page","status-publish"],"acf":[],"_links":{"self":[{"href":"https:\/\/hotel-hr-spamarin.fr\/nl\/wp-json\/wp\/v2\/pages\/94727","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hotel-hr-spamarin.fr\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hotel-hr-spamarin.fr\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hotel-hr-spamarin.fr\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hotel-hr-spamarin.fr\/nl\/wp-json\/wp\/v2\/comments?post=94727"}],"version-history":[{"count":0,"href":"https:\/\/hotel-hr-spamarin.fr\/nl\/wp-json\/wp\/v2\/pages\/94727\/revisions"}],"wp:attachment":[{"href":"https:\/\/hotel-hr-spamarin.fr\/nl\/wp-json\/wp\/v2\/media?parent=94727"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hotel-hr-spamarin.fr\/nl\/wp-json\/wp\/v2\/categories?post=94727"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hotel-hr-spamarin.fr\/nl\/wp-json\/wp\/v2\/tags?post=94727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}